openvibers/openvibe.shared Commits

Kit docs: the menu button at the top of the page (#418)

OP OpenVibers committed 3 days ago · 9b19c71ddd · 1 file, +12 −12

Changes

ddiff --git a/docs/kit.md b/docs/kit.md
iindex ac53726..61aed10 100644
---- a/docs/kit.md
++++ b/docs/kit.md
@@@ -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 own
results 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 the
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.
- **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.
@@@ -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` the
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.
**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
panel (a phone gets the whole screen).