@apliteni/apliteni-ui 0.79.0 → 0.81.0

package/README.md

@@ -36,7 +36,7 @@ install, one version and one version pin.
 | Import | What it is |
 | --- | --- |
 | `@apliteni/apliteni-ui/css` | Tokens and every component stylesheet. Import once at the app root. |
-| `@apliteni/apliteni-ui` | The HTML-string factories: `button()`, `card()`, `topbar()`, `accountShell()` and the rest. |
+| `@apliteni/apliteni-ui` | The HTML-string factories: `button()`, `card()`, `topbar()`, `appShell()` and the rest. |
 | `@apliteni/apliteni-ui/react` | The React components, TypeScript types included. |
 | `@apliteni/apliteni-ui/react/css` | Their shell styles. |
 | `@apliteni/apliteni-ui/inline` | The same CSS as strings, for a server that inlines it. |
@@ -59,9 +59,11 @@ import '@apliteni/apliteni-ui/react/css';
 import { DataTable, Modal } from '@apliteni/apliteni-ui/react';
 ```
 
-The `accountShell()` factory provides the complete `/account` layout: the topbar, sticky
-sidebar and page body, so no product rebuilds it. The
+The `appShell()` factory provides the complete product layout: the sticky rail, the page body
+and a topbar over it when you ask for one, so no product rebuilds it. The
 [component catalog](docs/library.md#component-catalog) lists this factory and every other one.
+Account and personal settings belong in a modal over the product rather than on a page of
+their own — see [Guidelines / Account and settings](guidelines/account-and-settings.md).
 
 ### Fonts
 

package/guidelines/account-and-settings.md

@@ -0,0 +1,71 @@
+# Account and settings
+
+## Open the account area in one modal
+
+<!-- rule: modal -->
+
+**Rule:** Open account and settings in one modal over the product, with its navigation beside the pane.
+
+**Why:** The reader has not left the work behind it, and one overlay holds every setting.
+
+**Do:** Open a panel over the work, navigation beside the pane.
+
+**Don't:** Slide a full-width sheet in with columns inside it.
+
+**Except:** On a phone the navigation stands above the pane, where a column beside it would leave the pane narrower than its rows.
+
+**Gap #553:** The kit has no modal that takes a navigation pane or a width, so this shape is built by hand.
+
+## Give the modal its own navigation
+
+<!-- rule: nav -->
+
+**Rule:** Give the modal one entry per group a reader arrives to change.
+
+**Why:** A reader already knows which group they came for, and a list of names is read faster than every group in turn.
+
+**Do:** Stand the entries beside the pane — above it on a phone — and mark the one on screen.
+
+**Don't:** Run all five groups down one scroll.
+
+**Except:** Merge two groups when neither fills a pane alone.
+
+## Limit the account menu to identity and the way in
+
+<!-- rule: menu -->
+
+**Rule:** Keep the account menu to the reader, the row that opens the modal, and Sign out.
+
+**Why:** A setting answered inside a menu has no address to link, search or come back to.
+
+**Do:** Name the reader, then the way in and the way out.
+
+**Don't:** Answer the settings in the menu, a row per setting.
+
+## Change a single field where it sits
+
+<!-- rule: in-row -->
+
+**Rule:** Change a single field in the row that names it, with no overlay.
+
+**Why:** Opening the account area to flip one switch costs two presses back to the row.
+
+**Do:** Flip the weekly digest where it is named.
+
+**Don't:** Open the modal on a pane to flip one switch.
+
+**Except:** A question that must be answered before anything else still stops the page.
+
+## Name the action after its change
+
+<!-- rule: one-action -->
+
+**Rule:** Name an account pane’s action after the change it makes.
+
+**Why:** On a pane of agents and the tokens they hold, Save does not say what the press changes.
+
+**Do:** End the tokens pane with “Create token”.
+
+**Don't:** End the same pane with “Save”.
+
+**Except:** A pane whose choices apply as they are made carries no action.

package/guidelines/component-choice.md

@@ -20,7 +20,7 @@
 
 **Why:** A confirm keeps keyboard focus until answered; a callout does not interrupt.
 
-**Except:** Use a content-sized modal for a short form and a drawer for a long form.
+**Except:** Use a content-sized modal or a drawer for a short form, and a page for a long one.
 
 **Do:** Ask “Rotate this token?” in a confirm with “Keep token” and “Rotate token” buttons.
 

package/guidelines/drawer.md

@@ -8,11 +8,25 @@
 
 **Why:** Closing the drawer returns the user to the opened row.
 
-**Do:** Use a drawer for a short filter, a new key, or a reclassification.
+**Do:** Open one for a quick edit, a new key, a filter, or a peek at a row’s detail.
 
-**Don't:** Use it for work needing an address, multiple screens, or steps; use a page instead.
+**Don't:** Open one for a long form, several steps, or a view with its own address and Back.
 
-**Except:** Two-answer questions use confirm. Short forms fit; forms needing steps or more than one screen use a page.
+**Except:** A two-answer question uses confirm, not a drawer.
+
+## Drawer or page
+
+<!-- rule: drawer-or-page -->
+
+**Rule:** Use a page to edit more than one group, and a drawer for one short change.
+
+**Why:** Several groups need room to move between them and check them before saving.
+
+**Do:** Edit the roles and the per-unit switches on a page, under a way back to the list.
+
+**Don't:** Edit the same groups in a drawer, stacked in one narrow panel over the list.
+
+**Except:** Change one field inline, without a panel. A drawer may show groups a reader only reads.
 
 ## Grouped content
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.79.0",
+  "version": "0.81.0",
   "workspaces": [
     "react"
   ],

package/src/components/shell.js

@@ -1,6 +1,6 @@
 // The kit's one page shell: a full-height rail beside one <main>, in two layouts.
-// accountShell() is a thin preset over it that keeps the topbar. wireShell() once
-// after mounting wires the fold, the nav's groups and the reader's menu.
+// `topbar` switches the product band on; it is off unless the caller hands one over.
+// wireShell() once after mounting wires the fold, the nav's groups and the reader's menu.
 // why: docs/specification.md#the-page-shell
 import { topbar as productTopbar } from './topbar.js';
 import { esc, icon } from './index.js';
@@ -26,8 +26,8 @@ const isRecord = (v) => typeof v === 'object' && v !== null;
 // settled here, before the first sink sees it. Adding one to appShell() means adding it
 // to SHAPES or deciding in the open that it needs nothing.
 
-// accountShell()'s tuple nav — [id, icon, label, href?, target?] — and nav.js's object
-// shape are accepted side by side. A nav that is not a list falls back to the default;
+// The account menu's nav takes the old tuple — [id, icon, label, href?, target?] — and
+// nav.js's object shape side by side. A nav that is not a list falls back to ACCOUNT_NAV;
 // an entry that is neither shape is dropped. An empty list is an answer and stays.
 const toItems = (nav) => (Array.isArray(nav) ? nav : ACCOUNT_NAV)
   .filter(isRecord)
@@ -434,59 +434,3 @@ export function wireShell(root = document, { persist } = {}) {
     setRail(app, auto ? saved : app.classList.contains('is-collapsed'));
   }
 }
-
-// The /account preset: appShell() with the topbar switched on, and the old
-// `cap` + `crumb` strings folded into the trail the caller now owns.
-export function accountShell({
-  word = 'Account',
-  versions,
-  account = {},
-  nav = ACCOUNT_NAV,
-  active = 'prefs',
-  cap = 'Account',
-  showSwitch = false,
-  crumb,
-  title = '',
-  sub = '',
-  body = '',
-  signOutHref = '#logout',
-  collapsible = true,
-  collapsed,
-  layout,
-  width,
-  search,
-} = {}) {
-  // The same normaliser appShell() runs, called once here so the rail and the
-  // topbar menu are handed one list rather than two readings of `nav`.
-  const items = toItems(nav);
-  const trail = [{ label: cap }, { label: crumb || title }];
-  // The preset hands the topbar the caller's text, as it does the rail. toTopbar()
-  // escapes for the menu's raw sinks and runs once inside appShell(); escaping here as
-  // well would reach the menu as entities.
-  return appShell({
-    word,
-    nav: items,
-    active,
-    navLabel: cap,
-    crumbs: trail,
-    title,
-    sub,
-    body,
-    account,
-    signOutHref,
-    collapsible,
-    collapsed,
-    // Settled nowhere but appShell(). Under `layout: 'topbar'` the bag below is not
-    // drawn, which is what that layout costs the preset.
-    layout,
-    width,
-    search,
-    topbar: {
-      word,
-      view: 'text',
-      showSwitch,
-      versions,
-      account: { ...(isRecord(account) ? account : {}), active, nav: items },
-    },
-  });
-}

package/src/index.d.ts

@@ -56,7 +56,6 @@ export declare const illoNames: string[];
 // Vanilla factories accept their existing option bags and return HTML.
 export declare function accentPicker(opts?: Record<string, unknown>): string;
 export declare function accountMenu(opts?: Record<string, unknown>): string;
-export declare function accountShell(opts?: Record<string, unknown>): string;
 export declare function appShell(opts?: Record<string, unknown>): string;
 export declare function breadcrumbs(opts?: Record<string, unknown>): string;
 export declare function busyRegion(opts?: Record<string, unknown>): string;

package/src/styles/table.css

@@ -125,6 +125,25 @@
 .ui-table :where(td, th, caption) a:not([class]) {
   display: inline-block;
   border-radius: var(--radius-xs);
+  position: relative;
+}
+/* A bare link in a cell is only as tall as its line box — 21px in a dense table,
+   under the 24px pointer floor. This layer gives a pointer the floor without
+   moving anything: growing the link's own box would grow every dense row holding
+   one. Written one cell kind per line because the measuring gate splits a
+   selector list on commas, and `:where(td, th, caption)` carries two of its own.
+   why: guidelines/accessibility-floor.md#minimum-target-size
+   held by: stories/guidelines/accessibility-floor.test.js */
+.ui-table td a:not([class])::after,
+.ui-table th a:not([class])::after,
+.ui-table caption a:not([class])::after {
+  content: '';
+  position: absolute;
+  height: 24px;
+  left: 0;
+  right: 0;
+  top: 50%;
+  translate: 0 -50%;
 }
 /* And on keyboard focus every link in a table takes the kit ring, at whatever corner it
    carries, so none falls back to the browser's own outline. `.ui-btn` has the ring already.

package/src/styles/topbar.css

@@ -210,9 +210,31 @@
 }
 .vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
 .vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
-/* The switcher keeps its glyph and drops its label where the shell folds — the
-   same step the rail folds at: docs/specification.md#breakpoints. */
-@media (max-width: 720px) { .vsw__btn .lbl { display: none; } }
+/* The phone step — the same one the rail folds at: docs/specification.md#breakpoints.
+   The switcher keeps its glyph and drops its label.
+   The menu hangs the other way here. Anchored by its left edge it opened
+   rightwards off a band that is as wide as the page, and a CLOSED menu is still
+   laid out, so it scrolled the page sideways with nothing visible to explain it.
+   `.amenu` beside it has always been anchored right. On a 320px viewport the
+   page's scroll width was 527px and is 397px; the band's own controls still want
+   more room than that page has, which is #558.
+   why: guidelines/layout-and-density.md#use-the-three-breakpoints
+   held by: stories/overlay-css.test.js */
+@media (max-width: 720px) {
+  .vsw__btn .lbl { display: none; }
+  .vsw__menu { left: auto; right: 0; }
+}
+
+/* One column, and the band is at its tightest. The row is already full at 390,
+   and at the gap above this one the account avatar stood from 365 to 397 and was
+   cut at the screen edge — the one control on this screen that opens the account
+   area. Packed to --space-2 the band needs 352 of the 362 it has there, so the
+   avatar is whole with the band's own gutter beside it. 320 is still short of the
+   room these controls want, which stays #558.
+   why: docs/specification.md#breakpoints */
+@media (max-width: 560px) {
+  .topbar__in { gap: var(--space-2); }
+}
 
 /* Account — avatar + dropdown. Gated: hidden until the app confirms a session
    and adds `.on` (mirrors the portal's /auth/me reveal). */