@zeyos/zx 5.0.0 → 5.3.0

package/CHANGELOG.md

@@ -8,6 +8,204 @@ and friends remain the complete record.
 
 ## Unreleased
 
+## 5.3.0 — 2026-10-29
+
+The record collection's toolbar, chips, drawers and pager become one shared composition in the
+layout kit, and the CRM and the issue tracker are rebuilt on it.
+
+### Added
+
+- `CardView` `keyboard: 'roving'` — the APG grid keyboard model the `Table` already has: the
+  collection is one Tab stop, arrows move between cards and group headings by the rendered rows,
+  Home/End and Page keys, Enter activates, Space and Shift+Arrow select, Ctrl/Cmd+A selects all;
+  focus is kept by record id across re-renders. `'tabs'`, the default, is unchanged.
+- `CardView` `collapsibleGroups`, `collapsedGroups`, `setGroupCollapsed()`, `getCollapsedGroups()`
+  and the `groupcollapse` event; `renderGroupHeading(context)` renders a group's heading with the
+  id, label, count, records, collapsed state and a `toggle()`.
+
+### Fixed
+
+- A narrow `Search` field squeezed its submit and clear buttons below the control height.
+
+### Website
+
+- The record collection's composition — toolbar, chip strip and chip editors, the Filters and View
+  settings drawers, page slicing, grouping, pagination, board axes and the keyboard map — is one
+  shared layout-kit module, with `other` buckets that write back, a base filter for tabs and
+  scopes, a split empty state, a `rendered` event and one-line toolbars beside an open drawer.
+- **CRM**: companies, people, deals and the curated lists use the shared overview: inline search,
+  the Filter, Sort and View drawers, the five-way shape switch, chips and the pager under the saved
+  view tabs. Companies gain cards and a stage board, people gain cards; owner and tier have
+  Unassigned and No tier buckets so no record drops out of a grouped view; the ARR total rides the
+  count line and the board columns keep their totals.
+- **Issue tracker**: the list is a roving `CardView` in the tracker's dense row anatomy with
+  collapsible group headings carrying status glyphs and counts and "New issue in <group>" on each;
+  the board takes its swim lanes from the grouping; the fixed tabs stay in the header.
+
+## 5.2.0 — 2026-10-29
+
+A record collection pattern with a five-way view switch and filter chips, two components to go
+with it, and the sixteen defects a library-wide consistency audit found, fixed.
+
+### Added
+
+- **`WorkspaceSwitcher`** — the account or workspace switcher at the head of a module menu: the
+  open workspace's tile, name and secondary line with a chevron, opening a menu of the user's
+  workspaces as `menuitemradio` rows followed by workspace actions; `compact` shows the tile
+  alone. `select` is cancelable, `setActive()`, `setWorkspaces()`, `setCompact()`. The layout
+  kit's `suiteNav()` takes a `workspace` option that puts it in place of the brand.
+- **`ViewSettings`** — the content of a "View settings" drawer: search the hidden fields and add
+  one with an explicit button, see every field's type glyph, arrange the shown fields by pointer
+  or keyboard (announced, auto-scrolling), hide them, choose the grouping, and set a board's
+  columns, swim lanes and empty-column rule. `bind(view)` keeps it in step with a record view; a
+  `locked` field is offered neither to hide nor to move; the panel's own `fields` act as the
+  allow-list when bound.
+- `ListToolbar` view presets `table | list | cards | gallery | board`, with bundled glyphs
+  `table`, `image`, `columns`, and `type`, `hash`, `mail`, `link-2`, `circle-chevron-down` for
+  field types.
+- `Filter`: fields take an `icon` shown in the searchable picker; choice icons are drawn; a
+  many-valued operator on fixed choices uses a `TagPicker`; compact rows show their group's
+  and/or as a pill that switches the logic; `withinLast` / `withinNext` take an amount and a unit.
+- A default English message catalogue in core (`defaultMessages`): `msg(key)` resolves the
+  instance table, the host translator, the class defaults, then the catalogue, so no raw key
+  reaches the screen without a translator. A test keeps it complete against every key in `src/`.
+- `src/core/overlay-stack.js` — one registry of open overlays with the z-order, Escape routing
+  to the topmost layer, and the outside-press test along the opener chain; `Modal`, `Sheet`,
+  `Dropdown`, `MenuButton`, `ContextMenu`, `Tooltip`, `Message`, `Launcher` and the rail flyouts
+  use it.
+- `Table`: the APG grid and treegrid keyboard model — arrows, Home/End, Page keys, Enter to
+  activate, Space and Shift+Arrow to select, Ctrl/Cmd+A — on tables that are `selectable`,
+  editable, hierarchical, listen for `rowclick`, or set `interactive: true`; focus kept by row id
+  across data changes; `label` / `labelledBy` for the grid's name; row controls named by the row's
+  first text cell; 24px targets on checkboxes and sort buttons.
+- `RecordView.getFieldControls()` and `mountFieldControls(target)`; `KanbanView` honours
+  `fieldControls.target`; `ListToolbar.bind()` mounts the chooser through them.
+- `MenuButton.toggle()`; `Select.get()`; `Field` `readonly` and `setReadonly()`;
+  `FilterPanel` `timeZone`; `dataFilterStateToFilters(state, defs, { timeZone })`; the ZeyOS
+  bindings' `load({ replace, pageSize })` and `pageSize` getter; `rovingTabindex` `rtl: 'auto'`;
+  `--zx-surface-shadow`.
+- `Pagination` and `Search`: the summary and page size sit at the start of the bar, the pager at
+  the end; the search input fills a stretched field so the submit glyph stays on its trailing
+  edge.
+
+### Changed
+
+- Geometry tokens (control sizes, blur, filters) are declared on `:root` only; the theme blocks
+  carry colours. A nested light region no longer resets an application's `--zx-control-height`.
+- Every `outline: 0` in the stylesheets became `outline-color: transparent`, and `base.css` draws a
+  solid `Highlight` outline on `:focus-visible` under forced colors.
+- The token lint covers `icons.css`, flags tier-1 accent, module and shadow names in component and
+  layout CSS, modern colour functions, raw colours in `var()` fallbacks, and outline suppression.
+- A host translator now takes precedence over a class's own `defaults.msg`, which makes `Field`,
+  `Form` and `Questionnaire` translatable; a translator that returns the key counts as no answer.
+- `Calendar` message keys are namespaced (`calendar.next`, `calendar.today`, …); the bare keys are
+  still honoured for one version.
+- Light dismiss stops at the first overlay that contains the press: a press in the upper of two
+  light-dismiss sheets no longer closes the lower one. Anchored popups and toast regions are hosted
+  inside the open dialog their anchor sits in.
+- The ZeyOS `zeyosTable` / `zeyosView` bindings share one loader; an invalid page or page size
+  throws a `RangeError` and non-object filters a `TypeError` where they used to clamp, and a
+  rejected call changes nothing. `Pagination`'s documentation shows the real mapping
+  (`offset = (page - 1) * pageSize`, `load({ page: page - 1, replace: true })`).
+- `Field`'s `code` type reports `change` on commit and `input` on every keystroke.
+- `Fieldset.addField()` writes with the caller's options; a component's own `change` listeners
+  hear a non-silent `setValues()`.
+
+### Fixed
+
+- Menus, dropdowns, context menus, rail flyouts and toasts were inert while a modal `Dialog` or
+  `Sheet` was open; a non-modal `Sheet` closed itself when an item was chosen in a menu inside it,
+  and Escape closed the sheet while leaving its dropdown open; an Escape another control handled is
+  ignored; a `Dropdown` panel is reachable with Tab, and Tab out of a panel holding a `Select` or a
+  roving toolbar lands after the trigger.
+- `AccountMenu.toggle()` threw.
+- `Table`, `CardView` and `DataFilter` showed raw message keys without a translator.
+- `Table` rows were not focusable, so `rowclick` and single selection were mouse-only; re-rendering
+  a table scrolled the page back to it.
+- `Fieldset.addField()` could not read, write or disable `get()/set()` components.
+- `Field` emitted `change` twice for `slider` and `code`.
+- Focus dropped to `<body>` after moving a field in the record-view chooser and after every
+  `FileList.updateItem()`; `ActivityList` had the same fault. The move is announced and Escape
+  closes the chooser.
+- `rovingTabindex` took ArrowLeft/Right/Home/End from text fields inside a `Toolbar`, and missed a
+  disabled `<fieldset>` around its items.
+- `FilterPanel` and the ZeyOS query conversion used the browser's local midnight for dates; both
+  take the instance time zone.
+- `--zx-shadow-1`, a tier-1 token, was used by three components; `MasterPanel` wrote a module
+  accent property nothing read.
+- The layout icon pack no longer shadows bundled glyphs.
+
+### Website
+
+- **Record collection**, a new screen pattern: one toolbar over the same records as a table, a
+  list, cards, a gallery and a board; dynamic filters as editable chips with all/any matching and
+  a Filters drawer holding the expression editor, kept in step both ways; a View settings drawer
+  bound to the current presentation, with the board's axes resolved so columns and swim lanes
+  never share a field; grouping, saved views, a stage facet, bulk actions, a workspace switcher at
+  the head of the module strip, and the pager. Keys: 1–5 views, F and V for the drawers, / for
+  search, N for a new record, ? for the sheet.
+- The contributor notes gain a library consistency review, repository-only, with the defects above
+  and a staged programme for the remaining redundancies and inconsistencies.
+
+## 5.1.0 — 2026-10-22
+
+### Added
+
+- **`ModuleBar`** — the module level of an application: one colour-coded tile per module in a
+  vertical strip or a horizontal bar. Modules take a theme `tone` or any CSS `color`, and draw as
+  `tint` (default), `solid` (the classic identity tile), or `plain`; `labels: 'below'` prints names
+  under the tiles, `labels: 'beside'` beside them as a navigation column of its own, and
+  `setLabels()` switches between the two; a section of modules is a heading over them, or a rule
+  between groups on an icon strip. A module's children open as a flyout menu, or (`menus: 'none'`) are left to a
+  panel the application owns, with `setExpanded()`, `aria-expanded`, and `aria-controls`. Modules
+  that do not fit, or are not `pinned`, are under an "All modules" catalogue — grouped, filterable,
+  arrow-navigable — while the current module stays on the bar. One Tab stop, arrow keys, Home/End,
+  and type-ahead; `setBadge()` updates a count in place; `partitionModules()` and
+  `resolveModuleColor()` are exported.
+- **`AppSidebar` sections** — `{ section: true, label, actions, children }` is a quiet heading over
+  rows at its own level, so one sidebar replaces several stacked ones: one landmark, one keyboard
+  sequence, and on a rail a separator.
+- **`AppSidebar` `layout: 'modules'`** — the top level becomes a `ModuleBar` strip beside a panel
+  with one module's menu, plus that module's own `header` and `content`. Choosing a module fires a
+  cancelable `modulechange`; `setModule()`, `getModule()`, `setBadge()`, `setModuleLabels()`, and
+  `moduleBar` presentation options. Three presentations — both menus expanded, the module menu
+  collapsed to icons beside the side menu, or both collapsed with every menu as a flyout — and a
+  small three-way switch at the foot of the strip to choose between them (`presentations`,
+  `presentation`, `getPresentation()`, `setPresentation()`, `togglePresentation()`,
+  `presentationchange`).
+- **ZeyOS module bar** — `zeyosModuleItems()`, `buildZeyosModuleBarConfig()`,
+  `buildZeyosAppSidebarConfig()`, and `zeyosModuleBar()` build both from the launcher's shell
+  state plus each module's menu and badges, in the ZeyOS identity colours.
+- `AccountMenu.setCompact()` switches between the avatar alone and the avatar with name and role.
+- **Menu choices** — a `{type: 'choice', label, value, options, onselect}` entry in `MenuButton`
+  and `AccountMenu` items: a setting chosen in place as a small segmented group of
+  `menuitemradio` options, the menu staying open. `AppSidebar`'s `presentationChoice()` returns
+  its layout switch as one, `presentationGlyph()` draws its pictograms, and
+  `presentationSwitch: false` takes the switch off the strip.
+- `--zx-color-tone-{blue,…,slate}-solid`, solid identity fills the white icon glyph reads on in
+  both themes, and `AppIcon`'s `tone` option that uses them.
+- A `grid` (`table-cells-large`) icon in the bundled set.
+
+### Fixed
+
+- `position()` adds its name to the anchor's `anchor-name` list and removes only its own, so a
+  tooltip and a menu on one trigger no longer overwrite each other — a keyboard-opened rail flyout
+  appeared at the page origin.
+- `AppRail`: a tile's tooltip stays quiet while its flyout is open, so the first Escape closes the
+  flyout, and on a vertical rail ArrowLeft leaves a top-level flyout for its tile.
+
+### Website
+
+- Every layout with a navigation column now shares one suite navigation: the Zx mark, the ACME
+  modules under their headings, the signed-in user, and the layout's own menu. The account menu
+  opens above the account and holds the layout — both menus expanded, the module menu collapsed,
+  or both collapsed — and the theme — light, dark, or system — each a three-way choice; Mod+B
+  steps through the layouts, and the choice is remembered. Below 1440px the module menu keeps
+  its labels off, between 860 and 1180px both menus start collapsed, and below that the navigation
+  is a drawer; choosing another module's screen opens that layout, and each layout's menu ends with
+  a "More in <module>" section leading to its sibling layouts.
+- The fictional company the layouts share is now called ACME.
+
 ## 5.0.0 — 2026-10-09
 
 Xenon now has one geometry and a quieter finish. The cozy and compact view modes are gone; in their

package/README.md

@@ -177,7 +177,8 @@ ZeyOS binding — see `src/zeyos/modules.js`.
 | `MasterPanel` | Full-height application panel with fixed header actions and footer. |
 | `Tabbox` | APG tabs in four appearances, with lazy content, closing, badges, and disabled states. |
 | `NavigationBar` | Responsive application navigation with optional tab panels and overflow. |
-| `AppSidebar` | Expanded or minimized vertical application navigation plus horizontal rails; descendants are inline only while expanded. |
+| `AppSidebar` | Expanded or minimized vertical application navigation plus horizontal rails; descendants are inline only while expanded. Sections group a tree; `layout: 'modules'` puts a module strip beside one module's menu. |
+| `ModuleBar` | Colour-coded module tiles in a strip or bar: flyout menus, live badges, one Tab stop, and an "All modules" catalogue for what does not fit. |
 | `Toolbar` | APG toolbar: one tab stop, arrow-key movement, and overflow into a menu. |
 | `SplitView` | Resizable two-pane split with a keyboard-operable separator. |
 | `Stepper` | Linear multi-step progress with completed, active, and error states. |

package/dist/types/components/account-menu/account-menu.d.ts

@@ -126,6 +126,14 @@ export declare class AccountMenu extends Component<AccountMenuOptions> {
     isOpen(): boolean;
     /** Replaces account presentation without touching session state. @param {AccountIdentity} account @returns {this} */
     setAccount(account: AccountIdentity): this;
+    /**
+     * Shows the avatar alone or the avatar with the name and secondary line — for a navigation
+     * column that narrows to icons and widens again. The trigger keeps its full accessible name
+     * either way.
+     * @param {boolean} compact
+     * @returns {this}
+     */
+    setCompact(compact: boolean): this;
     /** Replaces account actions. @param {MenuButtonItem[]} items @returns {this} */
     setItems(items: MenuButtonItem[]): this;
     /** Focuses the account trigger. @returns {this} */

package/dist/types/components/activity-list/activity-list.d.ts

@@ -178,8 +178,16 @@ export declare class ActivityList extends Component<ActivityListOptions> {
     setLoading(loading: boolean): this;
     /** Restores an enhanced target exactly, or removes an owned list. @returns {void} */
     destroy(): void;
-    /** @private @returns {void} */
+    /**
+     * Rebuilds the list. Items are regrouped on every mutation, so the rows are new; focus that sat
+     * on an item's control is put back on the same control of the same activity (matched by `id`,
+     * else by position), so a live feed prepending entries does not throw the reader to `<body>`.
+     * @private
+     * @returns {void}
+     */
     private _renderList;
+    /** @private @returns {void} */
+    private _renderItems;
     /** @private @param {ActivityGroup} group @param {boolean} grouped @returns {HTMLElement} */
     private _createGroup;
     /** @private @param {boolean} placeholders @returns {HTMLElement} */

package/dist/types/components/app-icon/app-icon.d.ts

@@ -1,13 +1,22 @@
 import { Component } from '../../core/component.js';
+export type AppIconTone = 'blue' | 'teal' | 'green' | 'amber' | 'orange' | 'red' | 'pink' | 'violet' | 'slate';
+/** @typedef {'blue'|'teal'|'green'|'amber'|'orange'|'red'|'pink'|'violet'|'slate'} AppIconTone */
+/** The categorical tones a `tone` option accepts. @type {ReadonlyArray<AppIconTone>} */
+export declare const APP_ICON_TONES: ReadonlyArray<AppIconTone>;
 export type AppIconOptions = {
     /**
      * Icon name, node, or lazy renderer.
      */
     icon?: string | Node | (() => string | Node) | null;
     /**
-     * Identity colour; falls back to the accent colour.
+     * Identity colour, any CSS colour; takes precedence over `tone`.
      */
     color?: string | null;
+    /**
+     * Categorical identity colour from the theme's tone palette,
+     * drawn with its `--zx-color-tone-<tone>-solid` fill. Without `color` or `tone` the icon takes the accent.
+     */
+    tone?: AppIconTone | null;
     /**
      * Edge length in pixels or any CSS length.
      */
@@ -44,7 +53,9 @@ export type AppIconOptions = {
 /**
  * @typedef {Object} AppIconOptions
  * @property {string|Node|(()=>string|Node)|null} [icon=null] Icon name, node, or lazy renderer.
- * @property {string|null} [color=null] Identity colour; falls back to the accent colour.
+ * @property {string|null} [color=null] Identity colour, any CSS colour; takes precedence over `tone`.
+ * @property {AppIconTone|null} [tone=null] Categorical identity colour from the theme's tone palette,
+ *   drawn with its `--zx-color-tone-<tone>-solid` fill. Without `color` or `tone` the icon takes the accent.
  * @property {number|string} [size=36] Edge length in pixels or any CSS length.
  * @property {number|string} [iconSize='52%'] Glyph size.
  * @property {string|null} [label=null] Accessible image label; null makes the icon decorative.
@@ -65,6 +76,7 @@ export declare class AppIcon extends Component<AppIconOptions> {
     _state: {
         icon?: string | Node | (() => string | Node) | null;
         color?: string | null;
+        tone?: AppIconTone | null;
         size?: number | string;
         iconSize?: number | string;
         label?: string | null;