@zeyos/zx 4.2.0 → 4.3.0

package/docs/api.json

@@ -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": [
@@ -4587,6 +4599,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 +4987,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 +5029,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 +7015,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

@@ -80,14 +80,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-*`,
@@ -456,11 +461,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 +794,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 +806,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 +841,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 +855,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 +931,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 -->
@@ -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

@@ -52,7 +52,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.0",
   "description": "Dependency-free JavaScript implementation of the Xenon Design System.",
   "type": "module",
   "license": "MIT",

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.css

@@ -261,6 +261,7 @@
   inline-size: 100%;
   block-size: 100%;
   min-inline-size: 0;
+  min-block-size: 0;
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--zx-calendar-event-color) 65%, var(--zx-color-border));
   border-inline-start: 3px solid var(--zx-calendar-event-color);
@@ -310,8 +311,11 @@
   z-index: 3;
   display: grid;
   block-size: 8px;
+  min-block-size: 0;
   place-items: center;
+  appearance: none;
   border: 0;
+  border-radius: 0;
   background: transparent;
   padding: 0;
   cursor: ns-resize;
@@ -329,6 +333,7 @@
 .zx-calendar__event[data-variant="span"] .zx-calendar__event-action,
 .zx-calendar__event[data-variant="month"] .zx-calendar__event-action {
   display: flex;
+  min-block-size: 0;
   align-items: center;
   gap: var(--zx-space-1);
   padding-block: 2px;
@@ -358,10 +363,17 @@
 }
 
 .zx-calendar__agenda { display: grid; }
-.zx-calendar__agenda-day { display: grid; grid-template-columns: minmax(10rem, 22%) minmax(0, 1fr); border-block-end: 1px solid var(--zx-color-border); }
+.zx-calendar__agenda-day {
+  display: grid;
+  grid-template-columns: minmax(10rem, 22%) minmax(0, 1fr);
+  border-block-end: 1px solid var(--zx-color-border);
+}
 .zx-calendar__agenda-heading {
-  align-self: start;
+  align-self: stretch;
+  appearance: none;
   border: 0;
+  border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
@@ -371,9 +383,13 @@
   cursor: pointer;
 }
 .zx-calendar__agenda-heading[aria-current="date"] { color: var(--zx-color-accent); }
+.zx-calendar__agenda-events {
+  display: grid;
+  min-inline-size: 0;
+}
 .zx-calendar__agenda-empty { margin: 0; color: var(--zx-color-text-muted); padding: var(--zx-space-3); }
-.zx-calendar__agenda-day > .zx-calendar__event { border-block-end: 1px solid var(--zx-color-border); }
-.zx-calendar__agenda-day > .zx-calendar__event:last-child { border-block-end: 0; }
+.zx-calendar__agenda-events > .zx-calendar__event { border-block-end: 1px solid var(--zx-color-border); }
+.zx-calendar__agenda-events > .zx-calendar__event:last-child { border-block-end: 0; }
 .zx-calendar__event[data-variant="agenda"] .zx-calendar__event-action {
   grid-template-columns: minmax(6rem, 18%) minmax(0, 1fr);
   grid-template-areas: "time title" "time location";
@@ -418,26 +434,13 @@
   text-transform: uppercase;
   letter-spacing: .04em;
 }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday { grid-row: 1; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(7) { grid-column: 2; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(6) { grid-column: 3; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(5) { grid-column: 4; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(4) { grid-column: 5; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(3) { grid-column: 6; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(2) { grid-column: 7; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(1) { grid-column: 8; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(7) { grid-column: 1; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(6) { grid-column: 2; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(5) { grid-column: 3; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(4) { grid-column: 4; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(3) { grid-column: 5; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(2) { grid-column: 6; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(1) { grid-column: 7; }
 .zx-calendar__month-week { min-block-size: 7.5rem; border-block-end: 1px solid var(--zx-color-border); }
 .zx-calendar__month-week-number {
-  grid-row: 1 / span 2;
+  grid-row: 1;
+  appearance: none;
   border: 0;
   border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
   font: inherit;
@@ -452,11 +455,21 @@
 }
 .zx-calendar__month-week:not(:has(.zx-calendar__month-week-number)) .zx-calendar__month-days,
 .zx-calendar__month-week:not(:has(.zx-calendar__month-week-number)) .zx-calendar__month-events { grid-column: 1; }
-.zx-calendar__month-days { grid-row: 1; }
+.zx-calendar__month-days {
+  grid-row: 1;
+  min-block-size: 7.5rem;
+  align-items: stretch;
+}
 .zx-calendar__month-day {
+  display: flex;
+  block-size: 100%;
+  appearance: none;
+  align-items: flex-start;
+  justify-content: flex-end;
   min-block-size: var(--zx-control-height);
   border: 0;
   border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   padding: var(--zx-space-2);
@@ -464,12 +477,34 @@
   text-align: end;
   cursor: pointer;
 }
+.zx-calendar__month-day:last-child { border-inline-end: 0; }
 .zx-calendar__month-day[data-other-month="true"] { color: var(--zx-color-text-muted); background: var(--zx-color-bg-muted); }
-.zx-calendar__month-day[aria-current="date"] { color: var(--zx-color-accent); font-weight: 750; box-shadow: inset 0 2px var(--zx-color-accent); }
+.zx-calendar__month-day[aria-current="date"] {
+  color: var(--zx-color-accent);
+  font-weight: 750;
+}
 .zx-calendar__month-day:hover:not(:disabled) { background: var(--zx-color-bg-hover); }
-.zx-calendar__month-events { grid-row: 2; grid-auto-rows: calc(var(--zx-control-height) - var(--zx-space-2)); align-content: start; gap: 2px 0; padding-block: var(--zx-space-1); }
+.zx-calendar__month-events {
+  grid-row: 1;
+  z-index: 2;
+  grid-auto-rows: calc(var(--zx-control-height) - var(--zx-space-2));
+  align-content: start;
+  gap: 2px 0;
+  padding-block: calc(var(--zx-control-height) + var(--zx-space-1)) var(--zx-space-1);
+  pointer-events: none;
+}
+.zx-calendar__month-events > .zx-calendar__event,
+.zx-calendar__month-events > .zx-calendar__more { pointer-events: auto; }
+.zx-calendar__event[data-variant="month"] .zx-calendar__event-action {
+  border-color: color-mix(in srgb, var(--zx-calendar-event-color) 55%, var(--zx-color-border));
+  border-inline-start-width: 1px;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--zx-calendar-event-color) 13%, var(--zx-color-bg-surface));
+}
+.zx-calendar__event[data-variant="month"][data-all-day="true"] .zx-calendar__event-time { display: none; }
 .zx-calendar__more {
   align-self: center;
+  min-block-size: 0;
   overflow: hidden;
   border: 0;
   background: transparent;
@@ -546,7 +581,14 @@
   .zx-calendar__view-button { flex: 1 0 auto; }
   .zx-calendar__new span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
   .zx-calendar__agenda-day { grid-template-columns: 1fr; }
-  .zx-calendar__agenda-heading { position: sticky; inset-block-start: 0; z-index: 3; border-block-end: 1px solid var(--zx-color-border); }
+  .zx-calendar__agenda-heading {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 3;
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--zx-color-border);
+  }
+  .zx-calendar__agenda-events { grid-column: 1; }
   .zx-calendar__event[data-variant="agenda"] .zx-calendar__event-action { grid-template-columns: 5.5rem minmax(0, 1fr); }
   .zx-calendar__year { grid-template-columns: 1fr; padding: var(--zx-space-3); }
 }

package/src/components/calendar/calendar.js

@@ -452,7 +452,11 @@ export class Calendar extends Component {
         if (!calendarEventIntersects(event, day, next)) return false;
         return event.start >= day || index === 0;
       }).sort(compareEvents);
-      const row = h('section', { class: 'zx-calendar__agenda-day', role: 'row' },
+      const row = h('section', {
+        class: 'zx-calendar__agenda-day',
+        role: 'row',
+        dataset: { date: calendarDayKey(day) }
+      },
         h('button', {
           type: 'button',
           class: 'zx-calendar__agenda-heading',
@@ -461,11 +465,13 @@ export class Calendar extends Component {
           ariaCurrent: sameCalendarDay(day, this._now()) ? 'date' : null,
           disabled: this.options.disabled
         }, this._format(day, { weekday: 'long', day: 'numeric', month: 'long' })));
+      const entries = h('div', { class: 'zx-calendar__agenda-events', role: 'gridcell' });
       if (!events.length) {
-        row.append(h('p', { class: 'zx-calendar__agenda-empty', role: 'gridcell' }, this.msg('noEvents')));
+        entries.append(h('p', { class: 'zx-calendar__agenda-empty' }, this.msg('noEvents')));
       } else {
-        for (const event of events) row.append(this._eventElement(event, { variant: 'agenda', day }));
+        for (const event of events) entries.append(this._eventElement(event, { variant: 'agenda', day }));
       }
+      row.append(entries);
       grid.append(row);
     }
     return grid;
@@ -721,6 +727,7 @@ export class Calendar extends Component {
       dataset: {
         eventId: key,
         variant: context.variant,
+        allDay: event.allDay ? 'true' : null,
         draggable: this._canMove(event) ? 'true' : null
       },
       style: event.color ? { '--zx-calendar-event-color': event.color } : null
@@ -989,7 +996,9 @@ export class Calendar extends Component {
       const item = this._eventById(control.dataset.eventId);
       const action = control.dataset.eventAction === 'resize' ? 'resize' : 'move';
       if (!item || (action === 'move' ? !this._canMove(item) : !this._canResize(item))) return;
-      control.setPointerCapture?.(event.pointerId);
+      event.preventDefault();
+      this._capturePointer(event.pointerId);
+      const offset = action === 'move' ? this._dragOffsetForEvent(item, event.clientX, event.clientY) : null;
       this._pointer = {
         type: 'event',
         pointerId: event.pointerId,
@@ -999,6 +1008,8 @@ export class Calendar extends Component {
         event: cloneCalendarEvent(item),
         action,
         control,
+        timeOffsetMinutes: offset?.minutes ?? 0,
+        dayOffset: offset?.days ?? 0,
         moved: false
       };
       return;
@@ -1007,7 +1018,8 @@ export class Calendar extends Component {
     if (!slot || !this.options.selectable) return;
     const date = this._dateFromTarget(slot);
     if (!date) return;
-    slot.setPointerCapture?.(event.pointerId);
+    event.preventDefault();
+    this._capturePointer(event.pointerId);
     this._pointer = {
       type: 'selection',
       pointerId: event.pointerId,
@@ -1041,7 +1053,13 @@ export class Calendar extends Component {
     const wrapper = pointer.control.closest('.zx-calendar__event');
     if (wrapper) {
       wrapper.dataset.state = 'dragging';
-      wrapper.style.transform = `translate(${event.clientX - pointer.startX}px, ${event.clientY - pointer.startY}px)`;
+      if (pointer.action === 'resize') {
+        wrapper.style.transform = '';
+        const height = this._timedPreviewHeight(proposed);
+        if (height) wrapper.style.blockSize = height;
+      } else {
+        wrapper.style.transform = `translate(${event.clientX - pointer.startX}px, ${event.clientY - pointer.startY}px)`;
+      }
       wrapper.dataset.preview = this._eventTime(proposed, proposed.start);
     }
     this._announce(this.msg('editPreview', proposed.title,
@@ -1053,6 +1071,7 @@ export class Calendar extends Component {
     const pointer = this._pointer;
     if (!pointer || pointer.pointerId !== event.pointerId) return;
     this._pointer = null;
+    this._releasePointerCapture(pointer.pointerId);
     this._clearSelectionPreview();
     if (!pointer.moved) return;
     event.preventDefault();
@@ -1071,6 +1090,7 @@ export class Calendar extends Component {
   _cancelPointer(event) {
     if (!this._pointer || this._pointer.pointerId !== event.pointerId) return;
     const control = this._pointer.control;
+    this._releasePointerCapture(this._pointer.pointerId);
     this._pointer = null;
     this._clearSelectionPreview();
     control.closest?.('.zx-calendar__event')?.removeAttribute('data-state');
@@ -1079,13 +1099,14 @@ export class Calendar extends Component {
 
   /** @param {CalendarEvent} event @param {'move'|'resize'} action @param {number} x @param {number} y @returns {CalendarEvent|null} */
   _proposalAtPoint(event, action, x, y) {
-    const timed = this._timeAtPoint(x, y);
+    const resizeTimed = action === 'resize' && !calendarEventSpansDays(event);
+    const timed = this._timeAtPoint(x, y, resizeTimed ? event.start : null);
     if (timed && !calendarEventSpansDays(event)) {
       if (action === 'move') {
         const duration = event.end.getTime() - event.start.getTime();
         const next = cloneCalendarEvent(event);
-        next.start = timed;
-        next.end = new Date(timed.getTime() + duration);
+        next.start = addMinutes(timed, -Number(this._pointer?.timeOffsetMinutes ?? 0));
+        next.end = new Date(next.start.getTime() + duration);
         return next;
       }
       const next = cloneCalendarEvent(event);
@@ -1094,7 +1115,8 @@ export class Calendar extends Component {
     }
     const day = this._dayAtPoint(x, y);
     if (!day) return null;
-    const difference = calendarDayDifference(startOfCalendarDay(event.start), day);
+    const targetDay = addCalendarDays(day, -Number(this._pointer?.dayOffset ?? 0));
+    const difference = calendarDayDifference(startOfCalendarDay(event.start), targetDay);
     if (action === 'move') return shiftCalendarEvent(event, { days: difference, minutes: 0 });
     const next = cloneCalendarEvent(event);
     const endDay = addCalendarDays(day, 1);
@@ -1102,15 +1124,23 @@ export class Calendar extends Component {
     return next.end > next.start ? next : null;
   }
 
-  /** @param {number} x @param {number} y @returns {Date|null} */
-  _timeAtPoint(x, y) {
+  /** @param {number} x @param {number} y @param {Date|null} [fixedDay=null] @returns {Date|null} */
+  _timeAtPoint(x, y, fixedDay = null) {
     const slots = this.refs.body.querySelector('.zx-calendar__slots');
     if (!slots) return null;
     const rect = slots.getBoundingClientRect();
-    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom || rect.width <= 0 || rect.height <= 0) return null;
+    const scroller = slots.closest('.zx-calendar__time-scroller');
+    const viewport = scroller?.getBoundingClientRect();
+    const left = viewport ? Math.max(rect.left, viewport.left) : rect.left;
+    const right = viewport ? Math.min(rect.right, viewport.right) : rect.right;
+    const top = viewport ? Math.max(rect.top, viewport.top) : rect.top;
+    const bottom = viewport ? Math.min(rect.bottom, viewport.bottom) : rect.bottom;
+    if (x < left || x > right || y < top || y > bottom || rect.width <= 0 || rect.height <= 0) return null;
     const columns = Number(slots.closest('[role="grid"]')?.getAttribute('aria-colcount')) || 1;
     const rows = Number(slots.closest('[role="grid"]')?.getAttribute('aria-rowcount')) || 1;
-    const column = Math.max(0, Math.min(columns - 1, Math.floor((x - rect.left) / rect.width * columns)));
+    const fixedColumn = fixedDay ? this._timeGridDayIndex(fixedDay) : -1;
+    const column = fixedColumn >= 0 ? fixedColumn
+      : Math.max(0, Math.min(columns - 1, Math.floor((x - rect.left) / rect.width * columns)));
     const row = Math.max(0, Math.min(rows - 1, Math.floor((y - rect.top) / rect.height * rows)));
     const target = slots.querySelector(`[data-row-index="${row}"][data-day-index="${column}"]`);
     return target ? this._dateFromTarget(target) : null;
@@ -1118,11 +1148,6 @@ export class Calendar extends Component {
 
   /** @param {number} x @param {number} y @returns {Date|null} */
   _dayAtPoint(x, y) {
-    const elements = typeof document.elementsFromPoint === 'function' ? document.elementsFromPoint(x, y) : [];
-    for (const element of elements) {
-      const date = element instanceof HTMLElement ? element.dataset.date : null;
-      if (date) return parseDayKey(date);
-    }
     const allDay = this.refs.body.querySelector('.zx-calendar__all-day-grid');
     if (allDay) {
       const rect = allDay.getBoundingClientRect();
@@ -1132,9 +1157,79 @@ export class Calendar extends Component {
         return parseDayKey(cells[index]?.dataset.date);
       }
     }
+    for (const monthEvents of this.refs.body.querySelectorAll('.zx-calendar__month-events')) {
+      const rect = monthEvents.getBoundingClientRect();
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom || rect.width <= 0) continue;
+      const start = parseDayKey(monthEvents.closest('.zx-calendar__month-week')?.dataset.weekStart);
+      if (!start) continue;
+      const index = Math.max(0, Math.min(6, Math.floor((x - rect.left) / rect.width * 7)));
+      return addCalendarDays(start, index);
+    }
+    for (const agendaDay of this.refs.body.querySelectorAll('.zx-calendar__agenda-day')) {
+      const rect = agendaDay.getBoundingClientRect();
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) continue;
+      return parseDayKey(agendaDay.dataset.date);
+    }
+    const elements = typeof document.elementsFromPoint === 'function' ? document.elementsFromPoint(x, y) : [];
+    for (const element of elements) {
+      const dateTarget = element instanceof HTMLElement ? element.closest('[data-date]') : null;
+      const date = dateTarget instanceof HTMLElement ? dateTarget.dataset.date : null;
+      if (date) return parseDayKey(date);
+    }
     return null;
   }
 
+  /** @param {CalendarEvent} event @param {number} x @param {number} y @returns {{minutes: number, days: number}} */
+  _dragOffsetForEvent(event, x, y) {
+    if (!calendarEventSpansDays(event)) {
+      const timed = this._timeAtPoint(x, y);
+      if (timed) {
+        const slot = normalizeSlot(this.options.slotDuration);
+        const duration = Math.max(0, Math.round((event.end.getTime() - event.start.getTime()) / 60_000));
+        const maxOffset = Math.max(0, duration - slot);
+        const minutes = Math.round((timed.getTime() - event.start.getTime()) / 60_000);
+        return { minutes: Math.max(0, Math.min(maxOffset, minutes)), days: 0 };
+      }
+    }
+    const day = this._dayAtPoint(x, y);
+    const days = day ? calendarDayDifference(startOfCalendarDay(event.start), day) : 0;
+    return { minutes: 0, days: Math.max(0, days) };
+  }
+
+  /** @param {Date} day @returns {number} */
+  _timeGridDayIndex(day) {
+    const key = calendarDayKey(day);
+    const headings = [...this.refs.body.querySelectorAll('.zx-calendar__day-heading')];
+    return headings.findIndex((heading) => heading.dataset.date === key);
+  }
+
+  /** @param {CalendarEvent} event @returns {string|null} */
+  _timedPreviewHeight(event) {
+    const grid = this.refs.body.querySelector('.zx-calendar__time-grid');
+    if (!grid || calendarEventSpansDays(event)) return null;
+    const min = normalizeMinute(this.options.slotMinTime, 0);
+    const max = normalizeMinute(this.options.slotMaxTime, 1440, true);
+    const slot = normalizeSlot(this.options.slotDuration);
+    const start = event.start.getHours() * 60 + event.start.getMinutes();
+    const end = event.end.getHours() * 60 + event.end.getMinutes();
+    const minutes = Math.max(slot, Math.min(max, end) - Math.max(min, start));
+    return `${(minutes / (max - min)) * 100}%`;
+  }
+
+  /** @param {number} pointerId @returns {void} */
+  _capturePointer(pointerId) {
+    try {
+      this.el.setPointerCapture?.(pointerId);
+    } catch {
+      // Synthetic PointerEvents used by smoke tests do not create an active pointer capture target.
+    }
+  }
+
+  /** @param {number} pointerId @returns {void} */
+  _releasePointerCapture(pointerId) {
+    if (this.el.hasPointerCapture?.(pointerId)) this.el.releasePointerCapture?.(pointerId);
+  }
+
   /** @param {Date} start @param {Date} end @returns {void} */
   _previewSelection(start, end) {
     const low = Math.min(start.getTime(), end.getTime());