@zeyos/zx 4.2.0 → 4.3.4

package/docs/api.json

@@ -1468,7 +1468,7 @@
       {
         "name": "minCardWidth",
         "type": "number|string",
-        "default": "'18rem'",
+        "default": "'15rem'",
         "description": "Responsive minimum card width."
       },
       {
@@ -2750,6 +2750,12 @@
         "type": "Node|string|number|{toElement: () => Node|null}|null",
         "default": "null",
         "description": "Body content."
+      },
+      {
+        "name": "scope",
+        "type": "Element|string|null",
+        "default": "null",
+        "description": "Element whose nearest Zx theme scope owns the overlay; defaults to the opener."
       }
     ],
     "events": [
@@ -3082,6 +3088,12 @@
         "type": "boolean",
         "default": "false",
         "description": "Whether a click within the panel closes it."
+      },
+      {
+        "name": "scope",
+        "type": "Element|string|null",
+        "default": "null",
+        "description": "Element whose nearest Zx theme scope owns the panel; defaults to the anchor."
       }
     ],
     "events": [
@@ -4318,6 +4330,132 @@
         "default": "'local'",
         "description": "Whether accepted moves update local data."
       },
+      {
+        "name": "dragFrom",
+        "type": "'card'|'handle'",
+        "default": "'card'",
+        "description": "Whether the whole card or only its handle starts a pointer drag. Touch drags from the card body require a long press so the board still scrolls."
+      },
+      {
+        "name": "multiMove",
+        "type": "boolean",
+        "default": "true",
+        "description": "Move the whole selection when a selected card is picked up."
+      },
+      {
+        "name": "autoScroll",
+        "type": "boolean",
+        "default": "true",
+        "description": "Scroll the board and columns while dragging near an edge."
+      },
+      {
+        "name": "wipPolicy",
+        "type": "'warn'|'block'",
+        "default": "'warn'",
+        "description": "Whether exceeding a limit warns or refuses."
+      },
+      {
+        "name": "rules",
+        "type": "KanbanRule[]",
+        "default": "[]",
+        "description": "Ordered visual card rules."
+      },
+      {
+        "name": "search",
+        "type": "string",
+        "default": "''",
+        "description": "Board search text."
+      },
+      {
+        "name": "searchFields",
+        "type": "string[]|null",
+        "default": "null",
+        "description": "Field ids searched; null searches visible fields plus the title and subtitle sources."
+      },
+      {
+        "name": "filter",
+        "type": "((record:KanbanRecord,index:number)=>boolean)|null",
+        "default": "null",
+        "description": "Extra card predicate."
+      },
+      {
+        "name": "searchControl",
+        "type": "boolean",
+        "default": "false",
+        "description": "Render the built-in board search control."
+      },
+      {
+        "name": "history",
+        "type": "boolean",
+        "default": "true",
+        "description": "Record committed local moves for undo and redo."
+      },
+      {
+        "name": "historyLimit",
+        "type": "number",
+        "default": "50",
+        "description": "Maximum remembered move steps."
+      },
+      {
+        "name": "historyControls",
+        "type": "boolean",
+        "default": "false",
+        "description": "Render built-in undo and redo controls."
+      },
+      {
+        "name": "columnHeight",
+        "type": "string|null",
+        "default": "null",
+        "description": "CSS length turning each column into a scroll region."
+      },
+      {
+        "name": "allowAdd",
+        "type": "boolean|((column:KanbanColumn,swimlane:KanbanSwimlane|null)=>boolean)",
+        "default": "false",
+        "description": "Render a per-column add control that emits `recordadd`."
+      },
+      {
+        "name": "contextMenu",
+        "type": "boolean|MenuItem[]|((context:KanbanCardContext)=>MenuItem[])",
+        "default": "false",
+        "description": "Card context menu. `true` offers move commands; an array or function appends application items."
+      },
+      {
+        "name": "renderCard",
+        "type": "((context:KanbanCardContext)=>Node|null|undefined)|null",
+        "default": "null",
+        "description": "Replaces card content."
+      },
+      {
+        "name": "renderColumnHeader",
+        "type": "((context:KanbanHeaderContext)=>Node|null|undefined)|null",
+        "default": "null",
+        "description": "Replaces column header content."
+      },
+      {
+        "name": "renderSwimlaneHeader",
+        "type": "((context:KanbanHeaderContext)=>Node|null|undefined)|null",
+        "default": "null",
+        "description": "Replaces lane header content."
+      },
+      {
+        "name": "renderColumnEmpty",
+        "type": "((context:KanbanHeaderContext)=>Node|null|undefined)|null",
+        "default": "null",
+        "description": "Empty-column placeholder."
+      },
+      {
+        "name": "renderDragPreview",
+        "type": "((context:{records:KanbanRecord[],ids:unknown[],count:number})=>Node|null|undefined)|null",
+        "default": "null",
+        "description": "Replaces the floating drag preview."
+      },
+      {
+        "name": "labels",
+        "type": "Record<string,string>",
+        "default": "{}",
+        "description": "Overrides for every visible and announced string."
+      },
       {
         "name": "columnOrder",
         "type": "string[]",
@@ -4373,10 +4511,30 @@
         "payload": "Record<string,unknown>",
         "description": ""
       },
+      {
+        "name": "movereject",
+        "payload": "Record<string,unknown>",
+        "description": ""
+      },
       {
         "name": "recordaction",
         "payload": "Record<string,unknown>",
         "description": ""
+      },
+      {
+        "name": "recordadd",
+        "payload": "Record<string,unknown>",
+        "description": ""
+      },
+      {
+        "name": "searchchange",
+        "payload": "{search:string}",
+        "description": ""
+      },
+      {
+        "name": "historychange",
+        "payload": "{canUndo:boolean,canRedo:boolean,depth:{undo:number,redo:number}}",
+        "description": ""
       }
     ],
     "methods": [
@@ -4480,7 +4638,73 @@
         "name": "moveRecord",
         "signature": "moveRecord(id, destination)",
         "returns": "this",
-        "description": "Proposes and, in local mode, commits a record move. Destination acceptance is checked before a cancelable `recordmove` event. WIP limits are reported but remain advisory."
+        "description": "Proposes and, in local mode, commits a record move. Equivalent to `moveRecords([id], …)`."
+      },
+      {
+        "name": "moveRecords",
+        "signature": "moveRecords(ids, destination)",
+        "returns": "this",
+        "description": "Proposes and, in local mode, commits an atomic move of one or more records. Destination eligibility, transition rules, and work-in-progress policy are all checked before a single cancelable `recordmove` event; the move commits completely or not at all, and the moving records keep their relative order at the destination."
+      },
+      {
+        "name": "canUndo",
+        "signature": "canUndo()",
+        "returns": "boolean",
+        "description": "Whether a committed local move can be reverted."
+      },
+      {
+        "name": "canRedo",
+        "signature": "canRedo()",
+        "returns": "boolean",
+        "description": "Whether a reverted local move can be reapplied."
+      },
+      {
+        "name": "undo",
+        "signature": "undo()",
+        "returns": "this",
+        "description": "Reverts the last committed local move, restoring the exact record order and selection."
+      },
+      {
+        "name": "redo",
+        "signature": "redo()",
+        "returns": "this",
+        "description": "Reapplies the last reverted local move."
+      },
+      {
+        "name": "clearHistory",
+        "signature": "clearHistory()",
+        "returns": "this",
+        "description": "Empties both history stacks."
+      },
+      {
+        "name": "getSearch",
+        "signature": "getSearch()",
+        "returns": "string",
+        "description": "Returns the current board search text."
+      },
+      {
+        "name": "setSearch",
+        "signature": "setSearch(search, [options])",
+        "returns": "this",
+        "description": "Narrows visible cards to those matching a search. Hidden records keep their position in the data, so a card dropped between two visible cards still lands between them."
+      },
+      {
+        "name": "setFilter",
+        "signature": "setFilter(filter)",
+        "returns": "this",
+        "description": "Replaces the extra card predicate. Pass null to clear it."
+      },
+      {
+        "name": "getVisibleRecords",
+        "signature": "getVisibleRecords()",
+        "returns": "KanbanRecord[]",
+        "description": "Returns the records currently rendered, in board order."
+      },
+      {
+        "name": "setData",
+        "signature": "setData(records)",
+        "returns": "this",
+        "description": "Replaces every record. History is dropped because its snapshots describe records the host has just replaced, and reinstating them would resurrect data the application no longer owns."
       },
       {
         "name": "getViewState",
@@ -4587,6 +4811,12 @@
         "type": "false|{move?: string, open?: string, close?: string}",
         "default": null,
         "description": "Visible keyboard hints, or false."
+      },
+      {
+        "name": "scope",
+        "type": "Element|string|null",
+        "default": "null",
+        "description": "Element whose nearest Zx theme scope owns an internally created launcher; defaults to the opener."
       }
     ],
     "events": [
@@ -4969,6 +5199,12 @@
         "type": "boolean",
         "default": "true",
         "description": "Whether to render a close button."
+      },
+      {
+        "name": "scope",
+        "type": "Element|string|null",
+        "default": "null",
+        "description": "Element whose nearest Zx theme scope owns a floating toast."
       }
     ],
     "events": [],
@@ -5005,6 +5241,12 @@
         "type": "boolean",
         "default": "false",
         "description": "Whether to destroy the modal after it closes."
+      },
+      {
+        "name": "scope",
+        "type": "Element|string|null",
+        "default": "null",
+        "description": "Element whose nearest Zx theme scope owns the overlay; defaults to the opener."
       }
     ],
     "events": [
@@ -6985,6 +7227,12 @@
         "type": "boolean",
         "default": "false",
         "description": "Whether to destroy the sheet after it closes."
+      },
+      {
+        "name": "scope",
+        "type": "Element|string|null",
+        "default": "null",
+        "description": "Element whose nearest Zx theme scope owns a floating sheet; defaults to the opener."
       }
     ],
     "events": [

package/docs/llms.md

@@ -31,6 +31,8 @@ const t = new Table(target, options);
   (always an object, e.g. `{ value, item }`).
 - Every `emit` also dispatches a **bubbling, composed** `zx-<type>` `CustomEvent` on `t.el`, so
   `t.el.addEventListener('zx-change', …)` and event delegation work.
+- Mutation boundaries may opt into honoring cancellation of that mirrored DOM event; Kanban's
+  `zx-recordmove` does, so delegated hosts can veto a move without a component reference.
 - `t.destroy()` aborts all listeners (one AbortController), unregisters the element, and removes an
   owned root. `Component.from(el)` returns the component for a root element (replaces the legacy
   `el.retrieve('com')`).
@@ -80,14 +82,19 @@ ambient canvas layer; material controls how surfaces respond to that light. The
 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.
+calmer `--zx-color-overlay-panel`. Both tiers combine a translucent base, responsive specular and
+Aurora tint layers, backdrop filtering, and dedicated state/divider roles; the modal backdrop is a
+separate material token so it does not erase the light the panel should refract. 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,
+increased-contrast, forced-colour, and unsupported-filter environments restore solid surfaces.
+Top-layer components remain DOM children of their nearest Zx theme scope, so a theme or material
+set on an application region continues to inherit through its menus, dialogs, tooltips, and toasts.
 
 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-glass-chrome/surface`,
-`--zx-color-overlay-surface/panel/border`, `--zx-color-border(-strong/-control)`,
+`--zx-color-overlay-surface/panel/backdrop/border/hover/selected/divider/scrim`,
+`--zx-overlay-surface-image/toast-image/panel-image`, `--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-*`,
@@ -248,28 +255,6 @@ reflection and ElementInternals form association: `<zx-toggle>`, `<zx-check-butt
 `<zx-checklist>`, `<zx-datebox>`, `<zx-timebox>`, `<zx-search>`, `<zx-groupbox>`, `<zx-tabbox>`,
 `<zx-table>`, `<zx-dialog>`.
 
-## Conventions (editing component source)
-
-Follow `AGENTS.md`. Key rules: never declare instance class fields for state used in `render()`
-(render runs inside the base constructor before field initializers); route all DOM listeners
-through `this.listen()`; no `innerHTML` outside `h.raw()`; express state via ARIA/`data-*`, not
-state classes; small glyph buttons use the shared `.zx-icon-btn` utility; follow the named APG
-pattern with `:focus-visible` rings and `prefers-reduced-motion` guards.
-
-## File map & commands
-
-```
-src/components/<name>/   component + CSS      src/core/   kernel (component, dom, http, i18n, date…)
-website/                 marketing page + docs.html (docs.js)          specs/  per-component specs
-website/demos/           per-component demo modules    website/layouts/  application layout examples
-tests/                   node unit + smoke    dist/       built bundles
-
-npm run serve   # http://127.0.0.1:8321/website/docs.html  (no build)
-npm test        # node --test tests/unit/*.test.js  +  node tests/lint-tokens.js
-npm run build   # dist/: ESM, global, ZeyOS binding, and CSS assets
-node tools/build-module-tokens.js   # regenerate styles/tokens/modules.css from src/zeyos/modules.js
-```
-
 ---
 
 # Components
@@ -456,11 +441,13 @@ A native-dialog launcher for applications, recent records, commands, and grouped
 Zx owns ranking, focus, request cancellation, and presentation; ZeyOS owns the catalogue,
 permissions, recent-history/cache policy, and the route or command ultimately invoked.
 
-- **Constructor** — `new Launcher(null, options)` owns a body-level dialog;
+- **Constructor** — `new Launcher(null, options)` owns a top-layer dialog in the opener's nearest
+  Zx theme scope;
   `new Launcher(existingDialog, options)` enhances and later restores an existing `<dialog>`.
 - **Options** — `items`, abortable `sources: [{id, label?, minQuery?, when?, order?, load(query, {signal})}]`,
   `query`, `debounce: 250`, `minQuery: 0`, `maxResults: 100`, `placeholder`, `label`, `emptyText`,
-  `loadingText`, `shortcut: 'mod+k'|false`, and visible `hints` labels (or `false`).
+  `loadingText`, `shortcut: 'mod+k'|false`, visible `hints` labels (or `false`), and `scope` to
+  explicitly select an element whose nearest Zx theme scope owns the launcher.
 - **Items** — `{id, label, description?, keywords?, group?, icon?, badge?, value?, href?, target?,
   invoke?, pinned?, disabled?, kind?, current?, when?, groupOrder?, itemOrder?}`. `icon` accepts a
   bundled icon name, Node, or factory. Links stay native so modified and middle clicks work;
@@ -787,8 +774,10 @@ The shared floating region is fixed to the upper-right logical corner by default
 messages rather than the page, and uses the translucent glass surface tokens with a solid fallback.
 
 - **Statics** — `Message.info/success/warning/error(msg, opts)`,
-  `Message.show(msg, { kind, timeout=4000, closable })` → `{ close() }`,
-  `Message.progress(text)` → `{ update(pct, text?), done(), fail(text?) }`.
+  `Message.show(msg, { kind, timeout=4000, closable, scope? })` → `{ close() }`,
+  `Message.progress(text, {scope?})` → `{ update(pct, text?), done(), fail(text?) }`. `scope` is
+  an element or selector whose nearest Zx theme scope owns that floating region; without it the
+  focused opener supplies the scope.
 - **Per-message options** — `kind: 'info'`, `timeout`, `closable: true`, `maxVisible: 5` (extras
   queue, and hovering pauses dismissal).
 <!-- /doc -->
@@ -797,10 +786,10 @@ messages rather than the page, and uses the translucent glass surface tokens wit
 ### Modal
 
 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.
+panel material; the backdrop uses `--zx-color-overlay-backdrop`, and focus returns to the opener on close.
 
 - **Options** — `content`, `width: 'auto'`, `closable: true`, `lightDismiss: false`,
-  `destroyOnClose: false`.
+  `destroyOnClose: false`, `scope: null` (the opener's nearest Zx theme scope by default).
 - **Methods** — `open()`, `close(result?)`, `setContent()`, `isOpen()`.
 - **Events** — `open`, `close {result}`, `cancel` (Esc; preventable with `event.preventDefault()`).
 <!-- /doc -->
@@ -832,7 +821,7 @@ When a Dock adopts it, the Sheet becomes an opaque layout surface instead.
   (`true | 'trap-focus' | false`), `backdrop: 'dim'` (`'dim' | 'blur' | 'none'`), `size: null`
   (CSS length or px number, applied to whichever axis `side` implies), `closeButton: true`,
   plus everything Dialog takes — `title`, `content`, `buttons`, `closable`, `lightDismiss`
-  (defaults to `true` here, unlike Modal), `destroyOnClose`.
+  (defaults to `true` here, unlike Modal), `destroyOnClose`, `scope`.
 - **Methods** — `open()`, `close(result?)`, `setSide(side)`, `getSide()`, `setSize(size)`,
   `isModal()`, `isDocked()`, `isOpen()`, `getSize()`, `snapTo(target)`, plus Dialog's `setTitle()`, `setContent()`,
   `setButtons()`, `addView()`, `showView()`.
@@ -846,10 +835,12 @@ When a Dock adopts it, the Sheet becomes an opaque layout surface instead.
   across a handoff: the element moves and reopens in place, so DOM state and listeners survive,
   and no `open`/`close` is emitted for what is only a change of address.
 - **Modality** — `true` delegates focus containment, page inertness, Escape, and the backdrop to
-  the browser through `showModal()`. `'trap-focus'` and `false` open with `show()`, so the page
-  keeps scrolling and stays interactive; Escape and outside-click are re-implemented, and
-  `'trap-focus'` adds `focusTrap()` on top. Only a modal sheet renders a `::backdrop`, so
-  `backdrop` is meaningful only when `modal` is `true`.
+  the browser through `showModal()`. Floating `'trap-focus'` and `false` sheets use a manual
+  Popover top layer, so they stay viewport-anchored even inside a transformed or clipped theme
+  scope while the page keeps scrolling and stays interactive. Escape and outside-click are
+  re-implemented, and `'trap-focus'` adds `focusTrap()` on top. Their top-layer backdrop is
+  explicitly transparent and non-filtering; `backdrop` is meaningful only when `modal` is `true`.
+  A docked Sheet remains a native non-modal dialog in its Dock's flow.
 - **Resizing and detents** — `resizable` makes the inner edge draggable between `min` and `max`.
   `snap` gives it detents: a number at or below 1 is a fraction of the viewport along the sheet's
   axis, anything larger is pixels, and a string is any CSS length (`'320px'`, `'90%'`). With
@@ -920,12 +911,14 @@ alone, `new SheetStack({…})`.
 ### Dropdown
 
 Generic anchored popover in the top layer, constructed as `new Dropdown(anchor, options)`. It
-light-dismisses on an outside click or Esc, and mirrors `aria-expanded` onto the anchor.
+light-dismisses on an outside click or Esc, mirrors `aria-expanded` onto the anchor, and stays a
+DOM child of the anchor's nearest Zx theme scope while the browser lifts it into the top layer.
 
 - **Options** — `content`,
   `placement: 'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'` plus the matching
   `left*` and `right*` placements, `offset: 4`,
-  `matchWidth: false`, `openOn: 'click'|'manual'`, `closeOnSelect: false`.
+  `matchWidth: false`, `openOn: 'click'|'manual'`, `closeOnSelect: false`, `scope: null` (the
+  anchor's nearest Zx theme scope by default).
 - **Methods** — `open()`, `close()`, `toggle()`, `isOpen()`, `setContent()`, `getPanel()`.
 - **Events** — `open`, `close`.
 <!-- /doc -->
@@ -1138,8 +1131,15 @@ portable state as TableView and KanbanView.
   `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`.
+  actions, optional native multi-select checkbox, labelled metadata, and a global ARIA selection
+  description that retains valid listitem semantics.
+  CardView uses a dense collection rhythm: titles clamp to two lines, previews stay at
+  thumbnail/avatar scale, and visible fields become compact labelled metadata chips. Title/subtitle
+  fields are not duplicated in metadata unless their field sets `duplicate:true`.
+- **Shared card slots** — a visible field may set
+  `view.card.slot: 'eyebrow-start'|'eyebrow-end'|'title-prefix'`. These slots create a semantic
+  eyebrow row or put labelled content immediately before (and outside) the title heading/link.
+  Unknown slots remain ordinary metadata; visibility and field order still control rendering.
 - **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`.
@@ -1163,14 +1163,25 @@ cards, advisory work-in-progress limits, and equivalent pointer/programmatic/key
   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.
+  state; record order, movement history, and selection do not. Saved preferences for data-derived
+  axes survive an empty/partial result set and reconcile as later records introduce their IDs.
+- **Dense board layout** — bounded muted columns use a stable 20rem rail with native horizontal
+  overflow, 48px headings, compact counts, 8–12px card padding, and 8px card gaps. Surface cards
+  use an optional square thumbnail and a two-tier hierarchy from shared card field slots:
+  `eyebrow-start`, `eyebrow-end`, and `title-prefix`. Unslotted metadata stays as quiet inline
+  facts. Titles clamp visually to two lines while retaining their complete accessible text. Move
+  and action controls reveal on hover/focus/selection/grab, and remain visible on touch devices.
 - **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.
+  cancelable and fires before a commit/request; either the component event or bubbling
+  `zx-recordmove` mirror may veto it. `accept` is a hard eligibility gate; WIP is visual advice.
+  Local mode clones the moved record and never mutates host data, and a manual local move clears an
+  active local sort so saved state matches visible order. 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.
+  lane. A polite live region announces every target, result, and reached/exceeded WIP limit.
+  Collapse keeps focus on its control, including when a programmatic collapse hides the focused
+  card. Native drag is an enhancement.
 <!-- /doc -->
 
 <!-- doc:grid -->
@@ -1243,7 +1254,9 @@ windowed loader.
   HTML, and suspicious CSS colour strings are ignored.
 - **Methods** — `getEvents()`, `setEvents()`, `addEvent()`, `updateEvent()`, `removeEvent()`,
   `getDate()`, `setDate()`, `getView()`, `setView()`, `prev()`, `next()`, `today()`,
-  `setLoading()`, `focusEvent()`, `destroy()`.
+  `setLoading()`, `focusEvent()`, `destroy()`. `prev()`/`next()` step one visible period and clamp
+  the day of month into the target month, so a 29th–31st anchor cannot skip a shorter month; the
+  same arithmetic is exported as `calendarPageDate()` and `addCalendarMonths()`.
 - **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
@@ -1252,6 +1265,12 @@ windowed loader.
   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.
+- **View layout** — agenda days keep every event in one vertically stacked content column. Month
+  uses a continuous seven-day grid with full-height day boundaries and event lanes overlaid below
+  the date labels; today is indicated with accent text instead of a decorative edge highlight.
+- **Pointer editing** — a timed move preserves the point where the event was grabbed and snaps the
+  resulting start to `slotDuration`. The lower grip stretches the event in its original day column,
+  while pointer capture keeps either interaction active if the pointer leaves the event surface.
 - **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

package/docs/llms.txt

@@ -16,9 +16,7 @@ exports and as `window.zx.*`.
 - [Documentation site](https://zx.zeyos.com/docs.html): getting started, every component with a live demo and its JavaScript source, and the application layouts. Machine index: [llms.txt](https://zx.zeyos.com/llms.txt).
 - [README](../README.md): what Zx is, quick start (ESM + global script), component index, theming, and browser support.
 - [API reference](llms.md): per-component constructor options, methods, and events for all public components plus the core helpers.
-- [Skill](https://zx.zeyos.com/skills/zx/SKILL.md): task-oriented guide — mental model, recipes, ZeyOS HTTP client, theming, gotchas, commands.
 - [Changelog](../CHANGELOG.md): what changed in each release, including behaviour changes an upgrade has to account for.
-- [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: `button()`, `buttonGroup()`, `badge()`/`badgeGroup()`, `CheckButton`,
@@ -52,7 +50,7 @@ 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. 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.
+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 responsive compact glass; Launcher, Modal, Dialog, and floating Sheets share a calmer reading panel. Both preserve scoped theme inheritance and refract Aurora/page content; 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeyos/zx",
-  "version": "4.2.0",
+  "version": "4.3.4",
   "description": "Dependency-free JavaScript implementation of the Xenon Design System.",
   "type": "module",
   "license": "MIT",
@@ -65,7 +65,6 @@
     "docs/api.json",
     "CHANGELOG.md",
     "README.md",
-    "DESIGN-SYSTEM.md",
     "LICENSE"
   ],
   "engines": {

package/src/components/account-menu/account-menu.css

@@ -60,7 +60,7 @@
   min-inline-size: 220px;
   gap: 2px;
   margin: calc(-1 * var(--zx-space-1)) calc(-1 * var(--zx-space-1)) var(--zx-space-1);
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
   padding: var(--zx-space-3);
 }
 

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

@@ -101,7 +101,7 @@
 }
 .zx-app-rail__flyout-item:hover,
 .zx-app-rail__flyout-item:focus-visible,
-.zx-app-rail__flyout-item[aria-current="page"] { background: var(--zx-color-bg-hover); color: var(--zx-color-accent); }
+.zx-app-rail__flyout-item[aria-current="page"] { background: var(--zx-color-overlay-hover); color: var(--zx-color-accent); }
 .zx-app-rail__flyout-item-icon { display: inline-flex; grid-column: 1; }
 .zx-app-rail__flyout-item-label { grid-column: 2; }
 .zx-app-rail__flyout-item-badge { grid-column: 3; color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); }

package/src/components/calendar/calendar-model.js

@@ -70,6 +70,51 @@ export function calendarRange(view, anchor, options = {}) {
   return { start, end };
 }
 
+/**
+ * Returns the anchor date one visible period away from `anchor`.
+ *
+ * Month and year steps clamp the day of month into the target month instead of letting it
+ * overflow: `setMonth()` alone turns 31 January into 3 March, which makes February unreachable
+ * from a month-end anchor and leaves `prev()` on 31 March landing back inside March.
+ * @param {CalendarView} view Current view.
+ * @param {Date} anchor Current anchor date.
+ * @param {number} direction -1 for the previous period, 1 for the next.
+ * @param {{agendaDays?: number}} [options={}] Paging options.
+ * @returns {Date}
+ */
+export function calendarPageDate(view, anchor, direction, options = {}) {
+  const date = validDate(anchor, 'Calendar date');
+  const step = integer(direction, 'direction');
+  if (view === 'day') date.setDate(date.getDate() + step);
+  else if (view === 'agenda') {
+    date.setDate(date.getDate() + step * positiveInteger(options.agendaDays ?? 14, 'agendaDays'));
+  } else if (view === 'week') date.setDate(date.getDate() + step * 7);
+  else if (view === 'month') return addCalendarMonths(date, step);
+  else if (view === 'year') return addCalendarMonths(date, step * 12);
+  else throw new RangeError(`Unknown calendar view: ${view}`);
+  return date;
+}
+
+/**
+ * Adds whole months, clamping the day of month to the last day the target month actually has.
+ * @param {Date} value Local date.
+ * @param {number} months Months to add.
+ * @returns {Date}
+ */
+export function addCalendarMonths(value, months) {
+  const date = validDate(value, 'Calendar date');
+  const day = date.getDate();
+  date.setDate(1);
+  date.setMonth(date.getMonth() + integer(months, 'month amount'));
+  date.setDate(Math.min(day, daysInCalendarMonth(date.getFullYear(), date.getMonth())));
+  return date;
+}
+
+/** @param {number} year @param {number} month @returns {number} */
+function daysInCalendarMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+
 /**
  * Normalizes caller records atomically into the Calendar event contract.
  * @param {Record<string, any>[]} records Source records.