@zeyos/zx 4.1.0 → 4.2.0

package/docs/llms.md

@@ -75,11 +75,19 @@ Keep the 600 stop at 4.5:1 or better against white and the 400 stop at 4.5:1 aga
 
 The theme studio treats those stable IDs as complete recipes: selecting a preset also changes its
 density, neutral tint, radius, control height, base text size, font stack, and material strength.
-Its **Material** control is CSS-first (`Flat`, `Glass`, or `Deep glass`); only the deep setting uses
-backdrop blur, and components fall back to solid surfaces under reduced-transparency preferences.
+Its **Material** control is CSS-first (`Flat`, `Glass`, or `Deep glass`). Aurora is the independent
+ambient canvas layer; material controls how surfaces respond to that light. The shared recipe
+applies to AppIcons, ordinary controls, persistent chrome, raised cards, and every transient overlay: Dropdown, ContextMenu,
+MenuButton, AccountMenu, AppRail flyouts, Select, TagPicker, date pickers, tooltips, column menus,
+and toasts use `--zx-color-overlay-surface`; Launcher, Modal, Dialog, and overlay Sheets use the
+more opaque `--zx-color-overlay-panel`. A docked Sheet is layout rather than
+an overlay and becomes opaque, as do dense data surfaces. Glass and Deep glass progressively raise
+translucency, blur, highlights, and elevation; reduced-transparency preferences restore solid
+surfaces.
 
 Define a product theme by overriding **semantic** tokens under a `[data-zx-theme="name"]` selector:
-`--zx-color-bg-page/surface/raised/control/hover/selected`, `--zx-color-border(-strong/-control)`,
+`--zx-color-bg-page/surface/raised/control/hover/selected`, `--zx-color-glass-chrome/surface`,
+`--zx-color-overlay-surface/panel/border`, `--zx-color-border(-strong/-control)`,
 `--zx-color-text(-muted/-placeholder)`, `--zx-color-accent(-hover)/on-accent`,
 `--zx-color-danger/warning/success/info(+ -bg)`, `--zx-focus-ring`, `--zx-control-height/-radius`,
 `--zx-space-*`, `--zx-radius-*`, `--zx-text-*`. Never use tier-1 palette tokens (`--zx-gray-*`,
@@ -119,8 +127,10 @@ bundles `@zeyos/client`; the application owns client creation, authentication, a
 ```js
 import { createZeyosClient } from '@zeyos/client';
 import {
-  connect, dataFilterStateToFilters, zeyosForm, zeyosSelect, zeyosTable
+  connect, createLegacySavedViewTransport, createSavedViewRegistry,
+  dataFilterStateToFilters, legacySavedViewRequest, zeyosForm, zeyosSelect, zeyosTable, zeyosView
 } from '/assets/zx-zeyos.esm.js';
+import { CardView, TableView } from '/assets/zx.esm.js';
 
 const client = createZeyosClient({ platform, auth });
 const api = connect(client, { locale: 'en-GB' });
@@ -138,6 +148,17 @@ const editor = zeyosForm(client, 'transactions', {
 });
 await editor.load(transactionId);
 await editor.save();
+
+const records = zeyosView(client, 'transactions', TableView, {
+  fields: ['transactionnum', 'account', 'date', 'netamount', 'status'],
+  savedViews: {
+    transport: savedViewTransport,
+    scope: { userId: currentUserId, workspaceId: currentWorkspaceId }
+  }
+});
+await records.ready; // restores a compatible default before the first list request
+await records.load();
+await records.saveView({ name: 'My open invoices', setDefault: true });
 ```
 
 - `connect(client, { onError, locale })` returns `{client, list, get, create, update, reportError}`;
@@ -154,6 +175,21 @@ await editor.save();
   `{table, load(), setSearch(), setFilters(), loadMore(), count, page, hasMore, destroy()}`. Columns
   come from schema metadata, sorting uses `sortMode:'server'`, and page zero replaces rows while
   later pages append them using server `limit`/`offset` and `count`.
+- `buildZeyosViewConfig(client, resource, opts)` resolves one schema to shared `ViewField[]`, a
+  complete projection, and view options. `zeyosView(client, resource, CardView|TableView|KanbanView,
+  opts)` returns `{view, load(), setSearch(), setFilters(), loadMore(), count, page, hasMore,
+  savedViews, ready, restoreDefault(), captureView(), saveView(), applyView(), destroy()}` with
+  paging and server sort. Title, preview, group, column, and swim-lane fields stay in the projection
+  even when hidden. Without `savedViews`, the host may persist `view.getViewState()` directly.
+- `createSavedViewRegistry(transport, {userId,workspaceId,resource})` coordinates private named
+  Table/Card/Kanban configurations as one versioned, atomically replaced document. Entries capture
+  component state plus filters/search and an explicit presentation type, never records, selection,
+  pages, callbacks, or DOM. Duplicate names, defaults, migration, type mismatch, failed writes, and
+  teardown are explicit. `workspaceId:null` addresses ZeyOS's base workspace.
+- `createLegacySavedViewTransport(request)` reuses the authenticated `fields`, `fields_save`, and
+  `fields_remove` endpoints through one reserved, namespaced `userfields` record.
+  `legacySavedViewRequest(PG.load.bind(PG))` is the optional Promise bridge for a legacy host. The
+  scope's `userId` is intentionally not sent to the endpoint; the server session remains authority.
 
 Field mapping is schema-driven: entity/FK → async `zxselect`; enum/list → `optionlist` or native
 `select`; indexed `date` bigint → `date`; other date/time bigints → `datetime`; money/price/numeric
@@ -194,8 +230,8 @@ registerModules({ tickets: '#f04639', 'my-fork': { label: 'My Fork', icon: 'zeyo
 - `moduleIcon(name, {size, label, standard})` → the bare glyph; `standard: true` uses the stock
   Font Awesome fallback, for pages on a kit without the ZeyOS uploads.
 - `moduleChip(name, {size, iconSize, label, title, standard})` → `<span class="zx-module-icon">`
-  with the glyph on the module colour. The glyph colour is whichever of ZeyOS's two foregrounds
-  (`#ffffff`, `#141414`) contrasts better, via `moduleGlyphColor(hex)`.
+  with a centred white glyph on the module colour. `moduleGlyphColor(hex)` remains available as a
+  separate contrast helper for non-AppIcon integrations that deliberately choose their foreground.
 - `moduleInfo`/`moduleColor`/`moduleIconName`/`moduleKeys`/`normalizeModuleName` read the config.
   Module, entity, and API resource names are all accepted, case-insensitively, with dots and
   underscores normalized: `'transactions.billing'`, `'invoices'`, and `'Transactions Billing'` all
@@ -453,25 +489,34 @@ permissions, recent-history/cache policy, and the route or command ultimately in
 <!-- doc:app-icon -->
 ### AppIcon — application identity
 
-A fixed-size, product-agnostic application tile. It keeps glyph geometry stable in launchers,
+A fixed-size, product-agnostic application identity. It keeps glyph geometry stable in launchers,
 sidebars, entity results, and recent-item rows while identity colour and material remain explicit
 options rather than application globals.
 
 - **Options** — `icon` (bundled name, Node, or lazy renderer), `color`, `size: 36`,
-  `iconSize: '52%'`, `label`, `badge`, `selected: false`, `glass: false|'subtle'|'strong'`, and
+  `iconSize: '52%'`, `label`, `badge`, `selected: false`, `shape: 'tile'|'circle'`,
+  `glass: false|'subtle'|'strong'`, and
   additional `class` names.
 - **Methods** — `set(partialOptions)` updates the existing root; `destroy()` restores an enhanced
   target. `appIcon(options)` is the element-returning convenience factory.
 - **ZeyOS preset** — import `zeyosAppIcon(module, options)` from `@zeyos/zx/zeyos`. Every current
   ZeyOS application/module has a canonical colour and icon mapping in `src/zeyos/modules.js`;
-  entity names and aliases resolve through the same catalogue. `moduleChip()` is the compatible
-  alias. An application may call `useZeyosIcons()` for the existing custom glyph kit or inject an
-  offline `icon` override; Zx never loads a network asset automatically.
-- **Material** — subtle glass is a CSS border/highlight treatment; strong glass progressively adds
-  `backdrop-filter`. `prefers-reduced-transparency` and browsers without support receive a solid
-  tile. The glyph and label semantics do not depend on the visual treatment.
-- **Accessibility** — a non-empty `label` gives the root `role="img"`; otherwise it is decorative.
-  The badge is visual supplementary status, so include its meaning in `label` when it matters.
+  entity names and aliases resolve through the same catalogue. `zeyosAppIcon()` defaults to a
+  circular application vessel; `moduleChip()` deliberately keeps a compact tile for entity and
+  record identity. An application may call `useZeyosIcons()` for the existing custom glyph kit or
+  inject an offline `icon` override; Zx never loads a network asset automatically.
+- **Shape and material** — core `AppIcon` keeps the backward-compatible `tile` default. Application
+  launchers and rails use `circle`; entity rows, recent records, badges, and tables use `tile`.
+  Subtle glass uses a quiet colour bloom, rim, reflection, and shadow without per-icon backdrop
+  blur; strong glass increases those material cues without changing geometry.
+  `prefers-reduced-transparency` receives a solid surface. Glyphs remain crisp white and
+  geometrically centred in either built-in SVG or Font Awesome form. Enabled interactive hosts
+  respond through rim, light, and shadow without translating the icon; decorative and disabled
+  identities do not imply clickability.
+- **Accessibility** — on an owned identity surface, a non-empty `label` gives the root
+  `role="img"`; otherwise it is decorative. When AppIcon enhances a button or link, it preserves
+  that control's native role and uses `label` only as its accessible name. The badge is visual
+  supplementary status, so include its meaning in `label` when it matters.
 <!-- /doc -->
 
 <!-- doc:avatar -->
@@ -751,8 +796,8 @@ messages rather than the page, and uses the translucent glass surface tokens wit
 <!-- doc:modal -->
 ### Modal
 
-Thin overlay on the native `<dialog>` element. The backdrop uses `--zx-color-bg-backdrop`, and
-focus returns to the opener on close.
+Thin overlay on the native `<dialog>` element. The surface uses the shared, reading-sized overlay
+panel material; the backdrop uses `--zx-color-bg-backdrop`, and focus returns to the opener on close.
 
 - **Options** — `content`, `width: 'auto'`, `closable: true`, `lightDismiss: false`,
   `destroyOnClose: false`.
@@ -780,7 +825,8 @@ Structured modal: a header with title and close button, a body, and footer butto
 Edge-anchored surface — a `Dialog` attached to one side of the viewport instead of floating in the
 middle. One primitive covers both side sheets and mobile drawers, which differ mainly in the edge they take, so
 `side` replaces what would otherwise be two components. Inherits the whole Dialog anatomy: title,
-footer buttons, switchable views, and focus restoration.
+footer buttons, switchable views, focus restoration, and the reading-sized overlay panel material.
+When a Dock adopts it, the Sheet becomes an opaque layout surface instead.
 
 - **Options** — `side: 'end'` (`'start' | 'end' | 'top' | 'bottom'`, logical), `modal: true`
   (`true | 'trap-focus' | false`), `backdrop: 'dim'` (`'dim' | 'blur' | 'none'`), `size: null`
@@ -969,7 +1015,7 @@ range select.
   `hierarchy: false|{parentId, column?, expanded?}`. Locale, currency, unit, and decimals may be
   row callbacks; values remain numbers in row data while display formatting is locale-aware.
 - **Methods** — `setData()`, `addData()`, `updateRow(id,row)`, `removeRow(id)`, `getRow(id)`,
-  `getData()`, `empty()`, `setSort(id,dir)`, `getSelection()`, `setSelection(ids)`,
+  `getData()`, `empty()`, `setSort(id,dir)`, `getSort()`, `clearSort()`, `getSelection()`, `setSelection(ids)`,
   `clearSelection()`, `setLoading(bool)` (busy/skeleton state — dims rows, shows an indeterminate
   top bar, sets `aria-busy`, and is cleared by the next `setData`).
 - **Events** — `rowclick {row, id, index, event}`, `rowdblclick`, `sort {id, dir}`,
@@ -1049,6 +1095,82 @@ range select.
 - **Column visibility** — `columnVisibility: true` renders a chooser; `hiddenColumns` seeds it.
   `getVisibleColumns()`, `getHiddenColumns()`, `setColumnVisible()`, and `toggleColumn()` preserve
   caller column order and never allow the final visible column to disappear.
+- **Column order** — `columnReorder: true` adds up/down buttons to the chooser and ArrowUp/
+  ArrowDown support while a column option is focused. `getColumns()`, `setColumns()`,
+  `getColumnOrder()`, `setColumnOrder()`, and `moveColumn()` reconcile stale saved IDs and keep
+  hidden/sorted state attached to stable column IDs. `columnorderchange {order}` fires after a
+  user or non-silent programmatic change.
+<!-- /doc -->
+
+<!-- doc:table-view -->
+### TableView and the shared RecordView contract
+
+`TableView` is the record-oriented entry point above the lower-level `Table`. It extends
+`RecordView` and composes one complete `Table`, so editing, hierarchy, growing, row movement,
+responsive stacking, loading, and advanced table events remain available through `getTable()`.
+
+- **Shared fields** — every view accepts `fields: [{id,label,get?,render?,sortValue?,sortable?,
+  visible?,duplicate?,type?,view?}]`. Primitive rendered values become text; an explicit Node is
+  adopted. `field.view.table` carries Table-only column keys without changing CardView or KanbanView.
+- **Shared options** — `data`, `recordId: 'ID'`, `sort`, `sortMode: 'local'|'server'`,
+  `selectable: false|'single'|'multi'`, `selection`, `fieldOrder`, `hiddenFields`,
+  `fieldControls: true`, and `emptyText`. At least one field remains visible.
+- **Shared methods** — `setData()`, `addData()`, `updateRecord()`, `removeRecord()`, `getRecord()`,
+  `getData()`, field getters/order/visibility methods, `setSort()`/`getSort()`, selection methods,
+  `setLoading()`, `getViewState()`, and `setViewState()`.
+- **Portable state** — `{version:1,fieldOrder,hiddenFields,sort}` is JSON-safe configuration only.
+  Records, selection, DOM nodes, rendered values, and callbacks are never serialized. A state from
+  one record view may seed another; unknown fields are ignored and new fields append.
+- **TableView composition** — `table: {...}` forwards every advanced Table option, while shared
+  fields/data/id/sort/selection/visibility/order win on overlaps. `getTable()` returns the composed
+  instance. Row events become shared `recordclick`/`recorddblclick` details.
+- **Events** — `recordclick`, `recorddblclick`, `datachange`, `selectionchange`, `sortchange`,
+  `fieldvisibilitychange`, `fieldorderchange`, and `statechange {state,reason}`.
+<!-- /doc -->
+
+<!-- doc:card-view -->
+### CardView
+
+A responsive semantic record collection using the same fields, records, sort, selection, and
+portable state as TableView and KanbanView.
+
+- **Options** — the shared RecordView options plus `titleField`, `subtitleField`, `preview`,
+  `previewAlt`, `link`, `actions`, `groupBy`, `groupOrder`, `minCardWidth`, `maxColumns`,
+  `variant: 'outlined'|'raised'|'filled'`, `loadingCount`, `headingLevel`, and `label`.
+- **Cards** — each record is a focusable `<li>` with a native title link, separate secondary
+  actions, optional native multi-select checkbox, labelled metadata, and `aria-selected` state.
+  Title/subtitle fields are not duplicated in metadata unless their field sets `duplicate:true`.
+- **Media and URLs** — `preview` accepts a field ID or callback returning an image URL,
+  `{src,alt,fit}`, Node, or null. Executable/non-image schemes are rejected and image failures show
+  a stable fallback. Title/action links are normalized; `_blank` links receive `noopener`.
+- **Grouping and layout** — `groupBy` is a field ID or callback; `groupOrder` may deliberately show
+  empty groups. Cards reflow through container queries and may cap columns without viewport logic.
+- **Interaction** — Enter activates a focused card; Space toggles selection. Links, actions,
+  selection controls, and selected text do not also activate the card. `recordaction` adds the
+  resolved action to the shared event set.
+<!-- /doc -->
+
+<!-- doc:kanban-view -->
+### KanbanView
+
+A semantic record board with explicit or data-derived columns, optional swim lanes, shared record
+cards, advisory work-in-progress limits, and equivalent pointer/programmatic/keyboard movement.
+
+- **Options** — the shared RecordView options plus `columnBy`, `columns`, `swimlaneBy`,
+  `swimlanes`, card title/subtitle/preview/link/actions, `moveMode: 'local'|'external'`,
+  `columnOrder`, `swimlaneOrder`, collapsed IDs, `showCounts`, `showEmptyColumns`, `variant`, and
+  `label`. Column/lane descriptors use stable `id`, `label`, optional stored `value`, and `accept`;
+  columns may also declare an advisory `limit`.
+- **Methods** — configure/get/move columns and swim lanes, collapse either axis, and
+  `moveRecord(id,{column?,lane?,index?})`. Board-specific order/collapse joins the common view
+  state; record order, movement history, and selection do not.
+- **Movement boundary** — `recordmove {record,id,from,to,column,swimlane,limitExceeded}` is
+  cancelable and fires before a commit/request. `accept` is a hard eligibility gate; WIP is visual
+  advice. Local mode clones the moved record and never mutates host data. External mode emits only,
+  for server validation and optimistic rollback owned by ZeyOS.
+- **Keyboard** — focus the move handle; Enter/Space grabs or drops, Escape cancels, Left/Right
+  chooses a column, Up/Down chooses a bucket-relative position, and Alt+Up/Down chooses a swim
+  lane. A polite live region announces every target and result. Native drag is an enhancement.
 <!-- /doc -->
 
 <!-- doc:grid -->
@@ -1100,6 +1222,47 @@ code, so future adapters do not change the public `Chart` API.
   for assistive technology; `'visible'` makes exact values part of the interface.
 <!-- /doc -->
 
+<!-- doc:calendar -->
+### Calendar
+
+A dependency-free scheduling surface for operational events. One component owns agenda, day,
+week, month, and year views; local-time range math; timed collision columns; multi-day lanes;
+loading and empty states; pointer range selection; and equivalent pointer/keyboard move and resize
+interactions. Visible ranges use an exclusive `end`, so `dateschange` can be passed directly to a
+windowed loader.
+
+- **Options** — `events`, `date`, `view: 'month'`, `views: ['agenda','day','week','month','year']`,
+  `locale`, `weekStart: 1`, `weekNumbers: true`, `workweek: false`, `agendaDays: 14`,
+  `slotDuration: 30`, `slotMinTime: 0`, `slotMaxTime: 1440`, `scrollTime: 480`, `eventLimit: 3`,
+  `selectable: false`, `editable: false`, `eventStartEditable`, `eventDurationEditable`,
+  `optimistic: true`, `nowIndicator: true`, `now`, `disabled`, and `renderEvent(event)`.
+- **Event input** — generic records default to `{id,title,start,end,allDay,color,location,editable,
+  durationEditable}`. Every field has a string-or-function reader (`eventId`, `eventTitle`,
+  `eventStart`, …); numeric dates use `dateUnit: 'milliseconds'|'seconds'`. Inputs are normalized
+  atomically, duplicate IDs and inverted intervals throw, Dates are copied, text is never parsed as
+  HTML, and suspicious CSS colour strings are ignored.
+- **Methods** — `getEvents()`, `setEvents()`, `addEvent()`, `updateEvent()`, `removeEvent()`,
+  `getDate()`, `setDate()`, `getView()`, `setView()`, `prev()`, `next()`, `today()`,
+  `setLoading()`, `focusEvent()`, `destroy()`.
+- **Events** — `dateschange {view,start,end}`, `viewchange {view,oldView}`, `eventclick`,
+  `eventdblclick`, `dateclick {date,allDay,view}`, `select {start,end,allDay,view}`,
+  `new {date,view}`, `moreclick {date,count}`, `eventschange {events}`, and cancelable
+  `eventchange {event,oldEvent,action,delta,jsEvent,revert}`.
+- **Persistence** — `optimistic: true` updates local events before `eventchange`; call the
+  idempotent, version-guarded `detail.revert()` if persistence fails. With `optimistic: false`, the
+  component stays controlled: it emits the proposal without changing data, and the application
+  applies an accepted response through `updateEvent()` or `setEvents()`. Zx does not send requests.
+- **Keyboard** — time slots and date grids use arrow-key navigation, Home/End, PageUp/PageDown,
+  Enter/Space activation, and roving focus. On an editable event, Space grabs it, arrows propose a
+  slot/day move (or change the focused resize grip), Space drops, and Escape cancels. Live status
+  text announces the edit and its proposed times.
+- **ZeyOS binding** — `zeyosCalendar()` maps current appointment occurrence rows (`ID`, `name`,
+  `location`, `color`, `datefrom`, `dateto`, and association text). `calendarEventToZeyosPatch()`
+  returns the base `ID` with Unix-second dates. The current server already expands recurrence into
+  the requested window; recurrence rules, DAV synchronization, permissions, and routes therefore
+  remain in ZeyOS instead of being reimplemented in core.
+<!-- /doc -->
+
 <!-- doc:data-filter -->
 ### DataFilter
 
@@ -1403,6 +1566,30 @@ so buttons and links in its action, content, and footer regions remain valid sib
   container query when the card itself becomes narrow.
 <!-- /doc -->
 
+<!-- doc:aurora -->
+### Aurora
+
+A decorative, CSS-driven ambient light field for an existing application surface. Aurora enhances
+the target in place: it does not wrap, replace, or relocate the surface's content, and it does not
+own routing, overlays, or interaction. Its gradients sit behind the target's children, so raised
+Cards and other Liquid Glass surfaces can pick up the underlying colour naturally.
+
+- **Options** — `preset: 'source'|'confluence'|'horizon'|'diagonal'|'edge'|'curtain'`,
+  `colors: []` (zero to four concrete CSS colours),
+  `intensity: 'subtle'|'balanced'|'vivid'`.
+- **Methods** — `setPreset(preset)`, `setColors(colors)`, `setIntensity(intensity)`.
+- **Palette** — an empty list uses semantic accent, info, success, and warning colours. One colour
+  fills all four fields; two alternate; three repeat the second colour in the fourth field; four
+  map directly. Network/image-bearing CSS values and palettes longer than four are rejected.
+- **Geometry** — Source starts at the leading chrome; Confluence meets from the corners; Horizon
+  forms a shallow top band; Diagonal crosses the surface; Edge preserves a neutral centre; Curtain
+  descends as four elongated fields. All use ordinary CSS gradients without animation.
+- **Lifecycle** — `destroy()` removes an owned root or restores every original attribute and child
+  of an enhanced target. Content is never rebuilt when a setter changes the effect.
+- **Accessibility** — the light field is pointer-transparent and purely decorative. Forced-colour
+  and reduced-transparency preferences remove it entirely.
+<!-- /doc -->
+
 <!-- doc:panel -->
 ### Panel / MasterPanel
 

package/docs/llms.txt

@@ -21,21 +21,26 @@ exports and as `window.zx.*`.
 - [Contributor contract](https://github.com/zeyos/zx/blob/main/AGENTS.md): conventions for editing component source (token rules, render-time state, listeners, ARIA/APG).
 
 ## Components
-- Inputs and identity: `button()`, `buttonGroup()`, `badge()`/`badgeGroup()`, `CheckButton`,
-  `Toggle`, `Search`, `AppIcon` (+ `zeyosAppIcon()` presets), `Avatar`,
+- Inputs: `button()`, `buttonGroup()`, `badge()`/`badgeGroup()`, `CheckButton`,
+  `Toggle`, `Search`,
   `Select` (APG combobox; `filter: false|'local'|async`; priority, status, permission, and
   `Select.entity()` presets), `Checklist`, `TagPicker` (icon/color identity), `NumberField`, `Rating`, `Slider`,
   `copyButton()`/`CopyInput`, `DatePicker`, `MonthPicker`, `TimePicker`,
   `Datebox`/`DateTimeBox`, `DateRangePicker`/`DateRangeBox`, `Timebox`.
 - Overlays: `Message` (toasts/inline/progress), `Modal`, `Dialog` (+ `alert`/`confirm`/`prompt` Promises), `Sheet` (edge-anchored Dialog; `side`, `modal: true|'trap-focus'|false`, `backdrop`, `snap` detents, swipe-to-dismiss), `SheetStack` (drill-down; `stack`/`cascade`), `Dropdown`, `MenuButton`, `ContextMenu` (right-click; `selector` for per-row menus), `Tooltip`/`tooltip()`/`describe()`.
 - Data: `Table` (sortable, selectable, sticky header, opt-in inline cell/row editing, row reorder,
-  column visibility), `Grid` with single-click editing and `Grid.BillingItems()`, engine-neutral
-  `Chart` with injected `ChartJsAdapter`, backend-neutral nested `Filter`, simple client-side
+  column visibility), shared `RecordView` state through `TableView`, `CardView`, and `KanbanView`,
+  `Grid` with single-click editing and `Grid.BillingItems()`, engine-neutral
+  `Chart` with injected `ChartJsAdapter`, `Calendar` (agenda/day/week/month/year, pointer/keyboard
+  drag and resize, `optimistic: true|false`), backend-neutral nested `Filter`, simple client-side
   `DataFilter`, `Pagination` (+ pure `paginationRange()`), `TreeView` (APG tree),
   `Finder` (Miller columns).
 - Forms: `Form`, `Fieldset`, `Questionnaire` (guided one-question-at-a-time flow with branching), `Field` (type registry), `ValueList`, `MultiValueEditor`, `FieldUpload`.
 - Layout: `stack()`/`grid()`/`aspect()` (spacing, an intrinsically reflowing grid, a fixed-ratio
-  box), `Groupbox`, `Card` (media/title link/actions/footer), `Panel` (header/footer action
+  box), `Groupbox`, `Card` (media/title link/actions/footer), `AppIcon` (generic tile geometry;
+  circular `zeyosAppIcon()` application presets and compact `moduleChip()` identities),
+  `Aurora` (one- to four-colour ambient
+  canvas light; shared material roles govern chrome and overlays), `Avatar`, `Panel` (header/footer action
   buttons), `MasterPanel`, `Tabbox`
   (`variant: 'divided'|'bracket'|'line'|'segmented'`), `NavigationBar`, `AppSidebar` (expanded and
   minimized vertical states plus horizontal rail layouts), `AccountMenu`, `Launcher`,
@@ -47,11 +52,16 @@ exports and as `window.zx.*`.
 - Helpers: `formatNumber`/`formatCurrency`/`formatPercent`/`formatFileSize`/`formatRelativeTime` (locale-aware, cached `Intl`), `debounce`/`throttle`, `groupBy`/`sortBy`/`uniqueBy`, `escapeRegExp`/`highlightMatch`, `storage()` (namespaced JSON, degrades to memory), `toCsv`/`downloadBlob`/`copyToClipboard`, `truncate()`/`isTruncated()` (line clamp with the full value on hover).
 
 ## Theming
-Load `zx.css` once; set `data-zx-theme` (`light`|`dark`|`auto`) and `data-zx-density` (`cozy`|`compact`) on any ancestor. Define a product theme by overriding semantic `--zx-color-*` / `--zx-control-*` tokens under `[data-zx-theme="name"]`. The theme studio controls accent, neutral tint, density, font, type size, radius, control height, and CSS-first glass material. Never use tier-1 palette tokens or raw color literals in application CSS.
+Load `zx.css` once; set `data-zx-theme` (`light`|`dark`|`auto`) and `data-zx-density` (`cozy`|`compact`) on any ancestor. Define a product theme by overriding semantic `--zx-color-*` / `--zx-control-*` tokens under `[data-zx-theme="name"]`. The theme studio controls accent, neutral tint, density, font, type size, radius, control height, and CSS-first glass material. Compact menus, pickers, tooltips, column menus, and toasts share a floating overlay material; Launcher, Modal, Dialog, and overlay Sheets share a more opaque panel material. Docked Sheets and dense data surfaces remain opaque. Never use tier-1 palette tokens or raw color literals in application CSS.
 
 ## Talking to ZeyOS
 Use the dedicated ZeyOS client library **`@zeyos/client`** (`npm install @zeyos/client`) for ZeyOS business data: `createZeyosClient({ platform, auth })`, typed `client.api.list/get/create/update<Resource>` over the full OpenAPI surface, and `normalizeListResult`. Zx accepts the client by injection and does not bundle it. See the `website/layouts/zeyos-invoices.layout.js` layout for a Zx-components-on-@zeyos/client reference. Zx also ships a minimal `Http`/`zeyosService` for ad-hoc in-app `remotecall`, but `@zeyos/client` is the recommended default.
 
+The optional `./zeyos` entry maps schemas into all three record views. `SavedViewRegistry` adds
+private named configurations scoped by authenticated user, workspace/fork (including null for the
+base workspace), and resource through an injected atomic transport. The compatibility transport
+reuses ZeyOS `userfields`; records, selection, pages, callbacks, and DOM are never persisted.
+
 ## Installing
 `npm install @zeyos/zx`. Entry points: `.` (components), `./zeyos` (ZeyOS binding), `./zx.css`
 (styles), and `./global` (classic script tag). Docs: https://zx.zeyos.com

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeyos/zx",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Dependency-free JavaScript implementation of the Xenon Design System.",
   "type": "module",
   "license": "MIT",

package/src/components/app-icon/app-icon.css

@@ -2,6 +2,12 @@
   --zx-app-icon-size: 36px;
   --zx-app-icon-glyph-size: 52%;
   --zx-app-icon-color: var(--zx-color-accent);
+  --zx-app-icon-core: color-mix(in srgb, var(--zx-app-icon-color) var(--zx-app-icon-core-strength), var(--zx-color-app-icon-shade));
+  --zx-app-icon-rim: color-mix(in srgb, var(--zx-app-icon-color) var(--zx-app-icon-rim-strength), var(--zx-app-icon-rim-base));
+  --zx-app-icon-bloom: color-mix(in srgb, var(--zx-app-icon-color) var(--zx-app-icon-bloom-strength), transparent);
+  --zx-app-icon-specular: color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-app-icon-specular-strength), transparent);
+  --zx-app-icon-halo: 0 0 var(--zx-app-icon-halo-size) color-mix(in srgb, var(--zx-app-icon-color) var(--zx-app-icon-halo-strength), transparent);
+  --zx-app-icon-selected-ring: color-mix(in srgb, var(--zx-app-icon-color) 54%, transparent);
   position: relative;
   isolation: isolate;
   display: inline-grid;
@@ -9,71 +15,134 @@
   flex: none;
   inline-size: var(--zx-app-icon-size);
   block-size: var(--zx-app-icon-size);
-  overflow: hidden;
-  border: 1px solid var(--zx-color-glass-border);
-  border-radius: max(var(--zx-radius-md), calc(var(--zx-app-icon-size) * .22));
-  background: var(--zx-app-icon-color);
-  box-shadow: var(--zx-app-icon-shadow);
-  color: var(--zx-app-icon-glyph, var(--zx-color-text-invert));
+  overflow: visible;
+  border-radius: max(var(--zx-radius-sm), calc(var(--zx-app-icon-size) * .12));
+  color: var(--zx-app-icon-glyph, var(--zx-color-app-icon-glyph));
   font-size: var(--zx-app-icon-size);
   vertical-align: middle;
 }
 
-.zx-app-icon[data-glass="subtle"],
-.zx-app-icon[data-glass="strong"] {
+.zx-app-icon[data-shape="circle"] {
+  border-radius: var(--zx-radius-full);
+}
+
+.zx-app-icon__surface {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  display: grid;
+  overflow: hidden;
+  place-items: center;
+  border: 1px solid var(--zx-app-icon-rim);
+  border-radius: inherit;
+  background: var(--zx-app-icon-core);
+  box-shadow: var(--zx-app-icon-shadow);
+}
+
+.zx-app-icon[data-glass="subtle"] .zx-app-icon__surface,
+.zx-app-icon[data-glass="strong"] .zx-app-icon__surface {
   background:
-    linear-gradient(145deg, var(--zx-color-glass-highlight), transparent 44%),
-    color-mix(in srgb, var(--zx-app-icon-color) var(--zx-glass-color-strength), transparent);
+    radial-gradient(112% 92% at 50% 122%, var(--zx-app-icon-bloom), transparent 64%),
+    var(--zx-app-icon-core);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
-.zx-app-icon[data-glass="strong"] {
-  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+.zx-app-icon[data-glass="strong"] .zx-app-icon__surface {
+  box-shadow: var(--zx-app-icon-shadow-hover), var(--zx-app-icon-halo);
 }
 
-.zx-app-icon[data-glass="none"] {
-  border-color: var(--zx-color-border);
+.zx-app-icon[data-glass="none"] .zx-app-icon__surface {
+  border-color: color-mix(in srgb, var(--zx-app-icon-color) 62%, var(--zx-color-border));
+  background: color-mix(in srgb, var(--zx-app-icon-color) 72%, var(--zx-color-app-icon-shade));
   box-shadow: none;
 }
 
 .zx-app-icon[data-glass="none"] .zx-app-icon__shine { display: none; }
+.zx-app-icon[data-glass="none"] .zx-app-icon__surface::after { display: none; }
 
-.zx-app-icon[data-selected] {
-  outline: 2px solid var(--zx-color-bg-page);
-  box-shadow: 0 0 0 3px var(--zx-color-ring), var(--zx-overlay-shadow);
+.zx-app-icon[data-selected] .zx-app-icon__surface {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--zx-color-bg-page),
+    0 0 0 3px var(--zx-app-icon-selected-ring),
+    var(--zx-app-icon-shadow-hover),
+    var(--zx-app-icon-halo);
 }
 
 .zx-app-icon__shine {
   position: absolute;
-  z-index: -1;
-  inset: 1px 12% auto;
-  block-size: 42%;
-  border-radius: 999px;
-  background: linear-gradient(to bottom, var(--zx-color-glass-highlight-strong), transparent);
-  filter: blur(2px);
+  z-index: 1;
+  inset: 2px 18% auto;
+  block-size: 1px;
+  border-radius: var(--zx-radius-full);
+  background: linear-gradient(90deg, transparent, var(--zx-app-icon-specular), transparent);
+  opacity: .72;
+  pointer-events: none;
+}
+
+.zx-app-icon[data-glass="strong"] .zx-app-icon__shine { opacity: .9; }
+
+.zx-app-icon__surface::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 56%, transparent);
+  opacity: .56;
   pointer-events: none;
 }
 
 .zx-app-icon__glyph {
-  display: inline-grid;
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: grid;
   place-items: center;
   inline-size: var(--zx-app-icon-glyph-size);
   block-size: var(--zx-app-icon-glyph-size);
+  margin: 0;
+  padding: 0;
   font-size: var(--zx-app-icon-glyph-size);
   line-height: 1;
-  filter: drop-shadow(var(--zx-glass-glyph-shadow));
+  filter: none;
+  transform: translate(-50%, -50%);
 }
 
 .zx-app-icon__glyph > .zx-icon,
 .zx-app-icon__glyph > svg,
 .zx-app-icon__glyph > i {
+  display: grid;
+  place-items: center;
   inline-size: 1em;
   block-size: 1em;
+  margin: 0;
+  color: inherit;
+  font-size: 1em;
+  line-height: 1;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.zx-app-icon__glyph > i::before {
+  display: block;
+  line-height: 1;
+}
+
+.zx-app-icon__glyph svg [fill]:not([fill="none"]) {
+  fill: currentColor;
+}
+
+.zx-app-icon__glyph svg [stroke]:not([stroke="none"]) {
+  stroke: currentColor;
 }
 
 .zx-app-icon__badge {
   position: absolute;
-  inset-block-end: 1px;
-  inset-inline-end: 1px;
+  z-index: 3;
+  inset-block-start: -3px;
+  inset-inline-end: -3px;
   display: grid;
   place-items: center;
   min-inline-size: 14px;
@@ -88,18 +157,59 @@
   line-height: 1;
 }
 
+.zx-app-icon:is(a, button, [role="button"]):not(:disabled):not([aria-disabled="true"]):hover .zx-app-icon__surface,
+:is(a, button, [role="button"]):not(:disabled):not([aria-disabled="true"]):hover .zx-app-icon__surface {
+  border-color: color-mix(in srgb, var(--zx-app-icon-color) 76%, var(--zx-color-glass-highlight-strong));
+  box-shadow: var(--zx-app-icon-shadow-hover), var(--zx-app-icon-halo);
+  filter: brightness(1.06) saturate(1.04);
+}
+
+.zx-app-icon:is(a, button, [role="button"]):not(:disabled):not([aria-disabled="true"]):focus-visible .zx-app-icon__surface,
+:is(a, button, [role="button"]):not(:disabled):not([aria-disabled="true"]):focus-visible .zx-app-icon__surface {
+  outline: none;
+  box-shadow: var(--zx-focus-ring), var(--zx-app-icon-shadow-hover), var(--zx-app-icon-halo);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-app-icon__surface {
+    transition: border-color var(--zx-dur-fast) var(--zx-ease),
+      box-shadow var(--zx-dur-fast) var(--zx-ease),
+      filter var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+
 @media (prefers-reduced-transparency: reduce) {
-  .zx-app-icon[data-glass="strong"] {
-    background: var(--zx-app-icon-color);
+  .zx-app-icon[data-glass="strong"] .zx-app-icon__surface {
+    background: var(--zx-app-icon-core);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .zx-app-icon[data-glass="subtle"] .zx-app-icon__surface {
+    background: var(--zx-app-icon-core);
+    -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
 }
 
 @media (forced-colors: active) {
-  .zx-app-icon {
+  .zx-app-icon__surface {
     border-color: ButtonText;
     background: ButtonFace;
     color: ButtonText;
     box-shadow: none;
+    filter: none;
+    transform: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .zx-app-icon__surface::after,
+  .zx-app-icon__shine { display: none; }
+
+  .zx-app-icon__badge {
+    border-color: Canvas;
+    background: Highlight;
+    color: HighlightText;
   }
 }