openvibers/openvibe.shared Commits
Kit docs: the menu button at the top of the page (#418)
Changes
@@@ -11,7 +11,7 @@ theme, and they fit a phone first.loads only this one.- **`kit.css`**: the look, built on the site's theme tokens.- **`appbar.js`**: the phone tab bar. `navbar.js` loads it only for a site that sets `appBar`.--- **`search.js`**: the OpenVibe menu (search, every site, every tool) behind the orb beside the brand, loaded on first use.++- **`search.js`**: the OpenVibe menu (search, every site, every tool) behind the menu button beside the brand, loaded on first use.- **`loading.js`**: the one loading look (an overlay over the thing's own picture) and skeleton rows.The package is MIT. Every site serves its own pinned copy at `/shared/kit.css`, `/shared/kit.js`, `/shared/kit-web.js` and@@@ -45,7 +45,7 @@ The same day, a sweep measured the front page of all 38 live sites at 390 px wid```┌──────────────────────────────┐--│ navbar (sticky) │ OpenVibe Frame: brand + menu orb, balances, bell, account++│ navbar (sticky) │ OpenVibe Frame: brand + menu button, balances, bell, account├──────────────────────────────┤│ ‹ Title ⓘ ••• │ kit.head: back, title, one muted line, icon actions ┐ sticky under│ ( Look ) Privacy Sound … │ kit.tabs: the page's parts, one at a time ┘ the navbar@@@ -376,7 +376,7 @@ The rules since 4.22.0:icons make the phone app bar (`appBar: true`).2. **The rest is `more: true`.** Those links fold into one "More" on computers and are listed in the phone drawer:guides, sources, "how it works", the API.--3. **Search is the orb beside the brand**, not a link: `search: { owner, label, page }` points it at the site's own++3. **Search is the menu button beside the brand**, not a link: `search: { owner, label, page }` points it at the site's ownresults and search page.4. **"What shipped" lives in the footer** (Updates), which every site has.5. **The account menu holds the person's things** (dashboard, settings, admin), and the OpenVibe menu holds the other@@@ -399,7 +399,7 @@ OpenVibeNavbar.init({ service: 'food', links: [- **Signed in:** the balances fold into one pill under 560 px that always shows **both**, OpenCoins and Vibes (4.25.0;a tap lists them in full). Under 440 px the pill tightens; under 350 px the site's word gives way to the mark so thebalances keep their icons.--- **The menu's orb** stays beside the brand at every width.++- **The menu button** stays beside the brand at every width.- **Spacing:** under 400 px the bar's padding, gaps, picture and buttons tighten.- **Reading down a phone** (under 760 px), the bar steps away and comes back on the first scroll up. It never doeswith one of its menus open or focus inside it. `autoHide: false` keeps it.@@@ -511,14 +511,14 @@ the site's main verb (go live, post, ask). Settings and the rest live in More.## The OpenVibe menu: search, every site, every tool--One control on every site: the orb beside the brand (or `/`, or Ctrl+K) opens the OpenVibe menu. It used to be two--panels doing the same job, the launcher's dots (every site) and the magnifier (search).++One control on every site: the menu button at the top of the page (or `/`, or Ctrl+K) opens the OpenVibe menu. It used++to be two panels doing the same job, the launcher's dots (every site) and the magnifier (search).--**The orb** (4.25.0; the owner: "the little diamond thing… an icon that has cool animations and effects… next to the--logo"): nine dots set as a diamond, the centre in the accent.--- **Hovered:** a ripple runs out from the centre and the dots take the accent's colours.--- **While the menu loads:** the dots wave.--- **While it is open:** the diamond turns into an × that closes it.++**The menu button** (4.187.0; the owner, 2026-11-10: the Arena's "Search and apps"): a search bar over three apps,++drawn by `OpenVibeOrb.svg()` in the navbar, the menu's sheet and the Dock.++- **Hovered:** its parts lift in turn.++- **While the menu loads:** the apps breathe.++- **While it is open:** it becomes the × that closes the menu, in the same place.- **At rest it doesn't move**, and reduced motion turns all of it off. The owner, 2026-10-28:"combine… a better hierarchy… use this user's history… autocomplete… maybe use tabs". The navbar loads `search.js` thefirst time someone asks, so a page nobody searches pays nothing (and the navbar itself got 15 KB lighter).@@@ -544,7 +544,7 @@ completion shows faintly behind the text; Tab or → takes it.**Keys:** arrows move, Enter opens, Escape closes.--**Layout:** opened from the orb, the menu drops from it under the bar. On a computer it is a panel from the orb's side, with++**Layout:** opened from the menu button, the menu drops from it under the bar. On a computer it is a panel from its side, withthe keys listed at its foot. On a phone it is a sheet as tall as its contents. Opened any other way, it is a centredpanel (a phone gets the whole screen).
@@ -11,7 +11,7 @@ theme, and they fit a phone first.
@@ -11,7 +11,7 @@ theme, and they fit a phone first.
loads only this one.
loads only this one.
- **`kit.css`**: the look, built on the site's theme tokens.
- **`kit.css`**: the look, built on the site's theme tokens.
- **`appbar.js`**: the phone tab bar. `navbar.js` loads it only for a site that sets `appBar`.
- **`appbar.js`**: the phone tab bar. `navbar.js` loads it only for a site that sets `appBar`.
-- **`search.js`**: the OpenVibe menu (search, every site, every tool) behind the orb beside the brand, loaded on first use.
+- **`search.js`**: the OpenVibe menu (search, every site, every tool) behind the menu button beside the brand, loaded on first use.
- **`loading.js`**: the one loading look (an overlay over the thing's own picture) and skeleton rows.
- **`loading.js`**: the one loading look (an overlay over the thing's own picture) and skeleton rows.
The package is MIT. Every site serves its own pinned copy at `/shared/kit.css`, `/shared/kit.js`, `/shared/kit-web.js` and
The package is MIT. Every site serves its own pinned copy at `/shared/kit.css`, `/shared/kit.js`, `/shared/kit-web.js` and
@@ -45,7 +45,7 @@ The same day, a sweep measured the front page of all 38 live sites at 390 px wid
@@ -45,7 +45,7 @@ The same day, a sweep measured the front page of all 38 live sites at 390 px wid
```
```
┌──────────────────────────────┐
┌──────────────────────────────┐
-│ navbar (sticky) │ OpenVibe Frame: brand + menu orb, balances, bell, account
+│ navbar (sticky) │ OpenVibe Frame: brand + menu button, balances, bell, account
├──────────────────────────────┤
├──────────────────────────────┤
│ ‹ Title ⓘ ••• │ kit.head: back, title, one muted line, icon actions ┐ sticky under
│ ‹ Title ⓘ ••• │ kit.head: back, title, one muted line, icon actions ┐ sticky under
│ ( Look ) Privacy Sound … │ kit.tabs: the page's parts, one at a time ┘ the navbar
│ ( Look ) Privacy Sound … │ kit.tabs: the page's parts, one at a time ┘ the navbar
@@ -376,7 +376,7 @@ The rules since 4.22.0:
@@ -376,7 +376,7 @@ The rules since 4.22.0:
icons make the phone app bar (`appBar: true`).
icons make the phone app bar (`appBar: true`).
2. **The rest is `more: true`.** Those links fold into one "More" on computers and are listed in the phone drawer:
2. **The rest is `more: true`.** Those links fold into one "More" on computers and are listed in the phone drawer:
guides, sources, "how it works", the API.
guides, sources, "how it works", the API.
-3. **Search is the orb beside the brand**, not a link: `search: { owner, label, page }` points it at the site's own
+3. **Search is the menu button beside the brand**, not a link: `search: { owner, label, page }` points it at the site's own
results and search page.
results and search page.
4. **"What shipped" lives in the footer** (Updates), which every site has.
4. **"What shipped" lives in the footer** (Updates), which every site has.
5. **The account menu holds the person's things** (dashboard, settings, admin), and the OpenVibe menu holds the other
5. **The account menu holds the person's things** (dashboard, settings, admin), and the OpenVibe menu holds the other
@@ -399,7 +399,7 @@ OpenVibeNavbar.init({ service: 'food', links: [
@@ -399,7 +399,7 @@ OpenVibeNavbar.init({ service: 'food', links: [
- **Signed in:** the balances fold into one pill under 560 px that always shows **both**, OpenCoins and Vibes (4.25.0;
- **Signed in:** the balances fold into one pill under 560 px that always shows **both**, OpenCoins and Vibes (4.25.0;
a tap lists them in full). Under 440 px the pill tightens; under 350 px the site's word gives way to the mark so the
a tap lists them in full). Under 440 px the pill tightens; under 350 px the site's word gives way to the mark so the
balances keep their icons.
balances keep their icons.
-- **The menu's orb** stays beside the brand at every width.
+- **The menu button** stays beside the brand at every width.
- **Spacing:** under 400 px the bar's padding, gaps, picture and buttons tighten.
- **Spacing:** under 400 px the bar's padding, gaps, picture and buttons tighten.
- **Reading down a phone** (under 760 px), the bar steps away and comes back on the first scroll up. It never does
- **Reading down a phone** (under 760 px), the bar steps away and comes back on the first scroll up. It never does
with one of its menus open or focus inside it. `autoHide: false` keeps it.
with one of its menus open or focus inside it. `autoHide: false` keeps it.
@@ -511,14 +511,14 @@ the site's main verb (go live, post, ask). Settings and the rest live in More.
@@ -511,14 +511,14 @@ the site's main verb (go live, post, ask). Settings and the rest live in More.
## The OpenVibe menu: search, every site, every tool
## The OpenVibe menu: search, every site, every tool
-One control on every site: the orb beside the brand (or `/`, or Ctrl+K) opens the OpenVibe menu. It used to be two
-panels doing the same job, the launcher's dots (every site) and the magnifier (search).
+One control on every site: the menu button at the top of the page (or `/`, or Ctrl+K) opens the OpenVibe menu. It used
+to be two panels doing the same job, the launcher's dots (every site) and the magnifier (search).
-**The orb** (4.25.0; the owner: "the little diamond thing… an icon that has cool animations and effects… next to the
-logo"): nine dots set as a diamond, the centre in the accent.
-- **Hovered:** a ripple runs out from the centre and the dots take the accent's colours.
-- **While the menu loads:** the dots wave.
-- **While it is open:** the diamond turns into an × that closes it.
+**The menu button** (4.187.0; the owner, 2026-11-10: the Arena's "Search and apps"): a search bar over three apps,
+drawn by `OpenVibeOrb.svg()` in the navbar, the menu's sheet and the Dock.
+- **Hovered:** its parts lift in turn.
+- **While the menu loads:** the apps breathe.
+- **While it is open:** it becomes the × that closes the menu, in the same place.
- **At rest it doesn't move**, and reduced motion turns all of it off. The owner, 2026-10-28:
- **At rest it doesn't move**, and reduced motion turns all of it off. The owner, 2026-10-28:
"combine… a better hierarchy… use this user's history… autocomplete… maybe use tabs". The navbar loads `search.js` the
"combine… a better hierarchy… use this user's history… autocomplete… maybe use tabs". The navbar loads `search.js` the
first time someone asks, so a page nobody searches pays nothing (and the navbar itself got 15 KB lighter).
first time someone asks, so a page nobody searches pays nothing (and the navbar itself got 15 KB lighter).
@@ -544,7 +544,7 @@ completion shows faintly behind the text; Tab or → takes it.
@@ -544,7 +544,7 @@ completion shows faintly behind the text; Tab or → takes it.
**Keys:** arrows move, Enter opens, Escape closes.
**Keys:** arrows move, Enter opens, Escape closes.
-**Layout:** opened from the orb, the menu drops from it under the bar. On a computer it is a panel from the orb's side, with
+**Layout:** opened from the menu button, the menu drops from it under the bar. On a computer it is a panel from its side, with
the keys listed at its foot. On a phone it is a sheet as tall as its contents. Opened any other way, it is a centred
the keys listed at its foot. On a phone it is a sheet as tall as its contents. Opened any other way, it is a centred
panel (a phone gets the whole screen).
panel (a phone gets the whole screen).