@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

package/dist/esm/core/app-shell/shell-motion/shell-motion-vocabulary.js

@@ -0,0 +1,197 @@
+import { ShellRegion } from '@wildo-ai/presets-components-models';
+import { NavigationZoneName } from '@wildo-ai/saas-models';
+/** @wildo_source:part:start saas.frontend.app-shell.shell-motion-contract facet:layer:frontend facet:family:app-shell facet:audience:app-developer */
+/**
+ * The motion building blocks a layout composes (#2052). They are the MECHANICS every animated layout needs — which
+ * pane is in front, which zone just opened or changed place, the picture a dismissed or hidden pane leaves behind, the
+ * dip a pane or a column makes while it changes — and none of them knows which way things move. That is the axis's
+ * (`ShellMotionAxis`): a depth axis moves along z (the focal-plane 3D layout), a flat axis slides, scales and fades.
+ *
+ * Nothing here writes on a region the engine renders. Ghosts are pictures in the layout's own layers, dips play
+ * through the Web Animations API (nothing is left on the element when they finish), and objects are the layout's own
+ * wrappers plus the navigation panes found by the engine's markers.
+ */
+/** How a navigation zone's place moved between two renders. */
+export var ShellPlaceChange;
+(function (ShellPlaceChange) {
+    /** The zone held nothing and now holds a place: a pane opened. */
+    ShellPlaceChange["APPEARED"] = "appeared";
+    /** The zone showed one place and now shows another, in the same pane. */
+    ShellPlaceChange["CHANGED"] = "changed";
+})(ShellPlaceChange || (ShellPlaceChange = {}));
+/** Where a ghost — the picture of a pane that was dismissed or hidden — stands. */
+export var ShellGhostPose;
+(function (ShellGhostPose) {
+    /** Where the pane stood: a ghost starts here, and a picture left behind returns here before it goes. */
+    ShellGhostPose["REST"] = "rest";
+    /** Stepped back behind an expanded pane, dimmed: the picture of a pane the expansion hid. */
+    ShellGhostPose["BEHIND"] = "behind";
+    /** Gone: where a dismissed pane flies to as it fades. */
+    ShellGhostPose["DISCARDED"] = "discarded";
+})(ShellGhostPose || (ShellGhostPose = {}));
+/** What a dip — a brief move away and back — acknowledges. */
+export var ShellMotionDip;
+(function (ShellMotionDip) {
+    /** A pane's content changed in place (the same zone shows another place). */
+    ShellMotionDip["PANE_SWAP"] = "pane-swap";
+    /** A side column (the sidebar or a utility panel) changed width, and the panes re-arranged. */
+    ShellMotionDip["COLUMN_RESIZE"] = "column-resize";
+})(ShellMotionDip || (ShellMotionDip = {}));
+/** How a side pane arrives when it opens. */
+export var ShellPaneArrival;
+(function (ShellPaneArrival) {
+    /** The layout's stylesheet animates the pane as it mounts (a keyframe on the pane). */
+    ShellPaneArrival["STYLESHEET"] = "stylesheet";
+    /**
+     * The pane GROWS OUT OF the element that was pressed to open it: a proxy box flies from the pressed row to the
+     * pane's box, and the core reveals the pane on the flight's own clock (hidden for `SHELL_PROXY_FLIGHT_SHARE` of the
+     * motion, then faded in). A layout's stylesheet MAY also hold the arriving pane for that share — only as the fallback
+     * when there is nothing to fly from (a pane opened by URL), where the pane then simply appears when the hold ends.
+     * An axis may ask the browser to carry it out instead, as a view transition (`paneArrivalByViewTransition`).
+     */
+    ShellPaneArrival["FROM_PRESSED_ELEMENT"] = "from-pressed-element";
+})(ShellPaneArrival || (ShellPaneArrival = {}));
+/** How a pane changes size when it is emphasized (takes the width) or given back its place. */
+export var ShellPaneResize;
+(function (ShellPaneResize) {
+    /** At once, as the engine lays it out. */
+    ShellPaneResize["INSTANT"] = "instant";
+    /** The emphasized pane grows from the box it had to the width it takes; given back its place, it slides home. */
+    ShellPaneResize["GROW"] = "grow";
+})(ShellPaneResize || (ShellPaneResize = {}));
+/** How a modal popup (a dialog, a sheet) arrives. */
+export var ShellDialogArrival;
+(function (ShellDialogArrival) {
+    /** The layout's stylesheet animates it (a keyframe on its content slot). */
+    ShellDialogArrival["STYLESHEET"] = "stylesheet";
+    /**
+     * It GROWS OUT OF its trigger: a proxy flies from the pressed control to the dialog's box, and the core reveals the
+     * dialog on the flight's own clock. A stylesheet hold is optional, the fallback when no control was pressed.
+     */
+    ShellDialogArrival["FROM_PRESSED_ELEMENT"] = "from-pressed-element";
+})(ShellDialogArrival || (ShellDialogArrival = {}));
+/**
+ * The share of the motion a proxy flies before the element it stands for appears (the rest of the motion reveals
+ * it). The core reveals the arriving element on the SAME clock as the flight (a script animation that sits above any
+ * stylesheet animation), so the two can never drift apart; a layout's stylesheet may also hold the element for this
+ * share, as the fallback when there is nothing to fly from (a pane opened by URL).
+ */
+export const SHELL_PROXY_FLIGHT_SHARE = 0.55;
+/** The attribute on a proxy the core flies. A layout may restyle it (the core paints it from theme tokens inline). */
+export const SHELL_PROXY_ATTRIBUTE = 'data-shell-proxy';
+/**
+ * The attribute a layout container puts on each wrapper it draws a region in. Wrappers are the layout's own
+ * elements, so they may be moved; the region inside keeps the engine's markup untouched.
+ */
+export const SHELL_OBJECT_ATTRIBUTE = 'data-shell-object';
+/** The attribute of the layout's two ghost layers: `back` (under the regions) and `front` (above them). */
+export const SHELL_GHOST_LAYER_ATTRIBUTE = 'data-shell-ghost-layer';
+/** The attribute every ghost carries, with its kind (`ShellGhostKind`). */
+export const SHELL_GHOST_ATTRIBUTE = 'data-shell-ghost';
+/** The two kinds of ghost. */
+export var ShellGhostKind;
+(function (ShellGhostKind) {
+    /** A dismissed side pane, flying away. */
+    ShellGhostKind["DISCARDED"] = "discarded";
+    /** A still image of a pane an expansion hid. */
+    ShellGhostKind["BEHIND"] = "behind";
+})(ShellGhostKind || (ShellGhostKind = {}));
+/** The two ghost layers. */
+export var ShellGhostLayer;
+(function (ShellGhostLayer) {
+    ShellGhostLayer["BACK"] = "back";
+    ShellGhostLayer["FRONT"] = "front";
+})(ShellGhostLayer || (ShellGhostLayer = {}));
+/**
+ * The selector of one shell region, by the marker its preset writes (`data-component-area`, from `ShellRegion`). The
+ * one place a layout spells it, so a region is always found by the enum and never by a literal.
+ */
+export function shellRegionSelector(region) {
+    return `[data-component-area="${region}"]`;
+}
+const CONTENT = shellRegionSelector(ShellRegion.CONTENT);
+/**
+ * The navigation panes inside the content region, by the engine's own markers: the zone itself in the static and
+ * single-zone branches (`[data-content-area]`), the panel in the resizable branch (`[data-panel-id^="nav-"]`) — never
+ * the zone INSIDE a panel, which would be moved twice and clipped by the panel's `overflow: hidden`.
+ */
+export const SHELL_PANE_SELECTOR = `${CONTENT} [data-content-area]:not([data-panel-id] *), ${CONTENT} [data-panel-id^="nav-"]`;
+/** The pane of one zone, in either branch (a plain selector list: `:not()` nested in `:is()` is beyond some engines). */
+export function shellPaneSelectorForZone(zone) {
+    return `${CONTENT} [data-content-area="${zone}"]:not([data-panel-id] *), ${CONTENT} [data-panel-id="nav-${zone}"]`;
+}
+/** The zone a pane element shows, read from the engine's markers; `undefined` for anything else. */
+export function shellPaneZone(element) {
+    if (!(element instanceof HTMLElement))
+        return undefined;
+    return element.dataset.contentArea ?? element.dataset.panelId?.replace(/^nav-/, '');
+}
+const SIDE_ZONES = new Set([NavigationZoneName.SECONDARY, NavigationZoneName.COMPANION]);
+/** Whether a pane shows a SIDE zone — the only kind a person dismisses (the primary pane leaves only on a remount). */
+export function isShellSidePane(element) {
+    const zone = shellPaneZone(element);
+    return zone !== undefined && SIDE_ZONES.has(zone);
+}
+/** Whether a zone is a SIDE zone (secondary, companion): the panes that open beside the list. */
+export function isShellSideZone(zone) {
+    return SIDE_ZONES.has(zone);
+}
+/**
+ * The portalled popups a layout may move, by the `data-slot` their content element carries (the presets write these
+ * values; Radix writes `data-state` on the same element). A closed list: a layout keys its popup motion on it, never
+ * on a role or a class.
+ */
+export var ShellPopupSlot;
+(function (ShellPopupSlot) {
+    ShellPopupSlot["DROPDOWN_MENU"] = "dropdown-menu-content";
+    ShellPopupSlot["DROPDOWN_MENU_SUB"] = "dropdown-menu-sub-content";
+    ShellPopupSlot["CONTEXT_MENU"] = "context-menu-content";
+    ShellPopupSlot["CONTEXT_MENU_SUB"] = "context-menu-sub-content";
+    ShellPopupSlot["POPOVER"] = "popover-content";
+    ShellPopupSlot["HOVER_CARD"] = "hover-card-content";
+    ShellPopupSlot["TOOLTIP"] = "tooltip-content";
+    ShellPopupSlot["SELECT"] = "select-content";
+    ShellPopupSlot["MENUBAR"] = "menubar-content";
+    ShellPopupSlot["MENUBAR_SUB"] = "menubar-sub-content";
+    ShellPopupSlot["DIALOG"] = "dialog-content";
+    ShellPopupSlot["ALERT_DIALOG"] = "alert-dialog-content";
+    ShellPopupSlot["SHEET"] = "sheet-content";
+    ShellPopupSlot["DRAWER"] = "drawer-content";
+})(ShellPopupSlot || (ShellPopupSlot = {}));
+/**
+ * The popups anchored to a trigger, each with the CSS variable Radix publishes as its trigger-relative origin: the
+ * point a layout lifts or scales such a popup from.
+ */
+export const SHELL_ANCHORED_POPUP_ORIGINS = {
+    [ShellPopupSlot.DROPDOWN_MENU]: '--radix-dropdown-menu-content-transform-origin',
+    [ShellPopupSlot.DROPDOWN_MENU_SUB]: '--radix-dropdown-menu-content-transform-origin',
+    [ShellPopupSlot.CONTEXT_MENU]: '--radix-context-menu-content-transform-origin',
+    [ShellPopupSlot.CONTEXT_MENU_SUB]: '--radix-context-menu-content-transform-origin',
+    [ShellPopupSlot.POPOVER]: '--radix-popover-content-transform-origin',
+    [ShellPopupSlot.HOVER_CARD]: '--radix-hover-card-content-transform-origin',
+    [ShellPopupSlot.TOOLTIP]: '--radix-tooltip-content-transform-origin',
+    [ShellPopupSlot.SELECT]: '--radix-select-content-transform-origin',
+    [ShellPopupSlot.MENUBAR]: '--radix-menubar-content-transform-origin',
+    [ShellPopupSlot.MENUBAR_SUB]: '--radix-menubar-content-transform-origin',
+};
+/** The centred dialogs: no trigger origin, they open over the whole shell. */
+export const SHELL_CENTRED_POPUP_SLOTS = [ShellPopupSlot.DIALOG, ShellPopupSlot.ALERT_DIALOG];
+/**
+ * The MODAL popups: while one is open the rest of the shell is not what the person works in. Keyed on the content
+ * slot, deliberately never on `role="dialog"` — a Radix popover carries that role too (date pickers, record pickers,
+ * the notification centre), and treating it as modal steps back the form being edited — nor on
+ * `body[data-scroll-locked]`, which dropdown and context menus also set.
+ */
+export const SHELL_MODAL_POPUP_SLOTS = [ShellPopupSlot.DIALOG, ShellPopupSlot.ALERT_DIALOG, ShellPopupSlot.SHEET, ShellPopupSlot.DRAWER];
+/** The `data-state` values of an OPEN popup. A tooltip is never `open`: Radix writes `delayed-open` or `instant-open`. */
+export const SHELL_POPUP_OPEN_STATES = ['open', 'delayed-open', 'instant-open'];
+/**
+ * A `:has()` clause that matches a layout root while a modal popup is open in its overlay layer
+ * (`AppShellOverlayPortalLayer`, `[data-shell-overlay-layer]`). Append it to the root selector:
+ * `[data-my-layout]${shellModalOpenClause()} [data-shell-object] { … }`.
+ */
+export function shellModalOpenClause() {
+    return `:has([data-shell-overlay-layer] :is(${SHELL_MODAL_POPUP_SLOTS.map((slot) => `[data-slot="${slot}"]`).join(', ')})[data-state="open"])`;
+}
+/** @wildo_source:part:end saas.frontend.app-shell.shell-motion-contract */
+//# sourceMappingURL=shell-motion-vocabulary.js.map

package/dist/esm/core/app-shell/shell-motion/shell-motion-vocabulary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-motion-vocabulary.js","sourceRoot":"","sources":["../../../../../../src/core/app-shell/shell-motion/shell-motion-vocabulary.ts"],"names":[],"mappings":"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","sourcesContent":["import { ShellRegion } from '@wildo-ai/presets-components-models';\nimport { NavigationZoneName } from '@wildo-ai/saas-models';\n\n/** @wildo_source:part:start saas.frontend.app-shell.shell-motion-contract facet:layer:frontend facet:family:app-shell facet:audience:app-developer */\n/**\n * The motion building blocks a layout composes (#2052). They are the MECHANICS every animated layout needs — which\n * pane is in front, which zone just opened or changed place, the picture a dismissed or hidden pane leaves behind, the\n * dip a pane or a column makes while it changes — and none of them knows which way things move. That is the axis's\n * (`ShellMotionAxis`): a depth axis moves along z (the focal-plane 3D layout), a flat axis slides, scales and fades.\n *\n * Nothing here writes on a region the engine renders. Ghosts are pictures in the layout's own layers, dips play\n * through the Web Animations API (nothing is left on the element when they finish), and objects are the layout's own\n * wrappers plus the navigation panes found by the engine's markers.\n */\n\n/** How a navigation zone's place moved between two renders. */\nexport enum ShellPlaceChange {\n  /** The zone held nothing and now holds a place: a pane opened. */\n  APPEARED = 'appeared',\n  /** The zone showed one place and now shows another, in the same pane. */\n  CHANGED = 'changed',\n}\n\n/** Where a ghost — the picture of a pane that was dismissed or hidden — stands. */\nexport enum ShellGhostPose {\n  /** Where the pane stood: a ghost starts here, and a picture left behind returns here before it goes. */\n  REST = 'rest',\n  /** Stepped back behind an expanded pane, dimmed: the picture of a pane the expansion hid. */\n  BEHIND = 'behind',\n  /** Gone: where a dismissed pane flies to as it fades. */\n  DISCARDED = 'discarded',\n}\n\n/** What a dip — a brief move away and back — acknowledges. */\nexport enum ShellMotionDip {\n  /** A pane's content changed in place (the same zone shows another place). */\n  PANE_SWAP = 'pane-swap',\n  /** A side column (the sidebar or a utility panel) changed width, and the panes re-arranged. */\n  COLUMN_RESIZE = 'column-resize',\n}\n\n/** How a side pane arrives when it opens. */\nexport enum ShellPaneArrival {\n  /** The layout's stylesheet animates the pane as it mounts (a keyframe on the pane). */\n  STYLESHEET = 'stylesheet',\n  /**\n   * The pane GROWS OUT OF the element that was pressed to open it: a proxy box flies from the pressed row to the\n   * pane's box, and the core reveals the pane on the flight's own clock (hidden for `SHELL_PROXY_FLIGHT_SHARE` of the\n   * motion, then faded in). A layout's stylesheet MAY also hold the arriving pane for that share — only as the fallback\n   * when there is nothing to fly from (a pane opened by URL), where the pane then simply appears when the hold ends.\n   * An axis may ask the browser to carry it out instead, as a view transition (`paneArrivalByViewTransition`).\n   */\n  FROM_PRESSED_ELEMENT = 'from-pressed-element',\n}\n\n/** How a pane changes size when it is emphasized (takes the width) or given back its place. */\nexport enum ShellPaneResize {\n  /** At once, as the engine lays it out. */\n  INSTANT = 'instant',\n  /** The emphasized pane grows from the box it had to the width it takes; given back its place, it slides home. */\n  GROW = 'grow',\n}\n\n/** How a modal popup (a dialog, a sheet) arrives. */\nexport enum ShellDialogArrival {\n  /** The layout's stylesheet animates it (a keyframe on its content slot). */\n  STYLESHEET = 'stylesheet',\n  /**\n   * It GROWS OUT OF its trigger: a proxy flies from the pressed control to the dialog's box, and the core reveals the\n   * dialog on the flight's own clock. A stylesheet hold is optional, the fallback when no control was pressed.\n   */\n  FROM_PRESSED_ELEMENT = 'from-pressed-element',\n}\n\n/**\n * The share of the motion a proxy flies before the element it stands for appears (the rest of the motion reveals\n * it). The core reveals the arriving element on the SAME clock as the flight (a script animation that sits above any\n * stylesheet animation), so the two can never drift apart; a layout's stylesheet may also hold the element for this\n * share, as the fallback when there is nothing to fly from (a pane opened by URL).\n */\nexport const SHELL_PROXY_FLIGHT_SHARE = 0.55;\n\n/** The attribute on a proxy the core flies. A layout may restyle it (the core paints it from theme tokens inline). */\nexport const SHELL_PROXY_ATTRIBUTE = 'data-shell-proxy';\n\n/** An element's laid-out box in the stage (untransformed), as last measured. */\nexport interface ShellStageRect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Which way a layout moves things. The building blocks decide WHEN something moves and WHAT; the axis decides only\n * the pose it moves to. A layout builds one from its settings and memoizes it: the hooks re-arm when it changes.\n */\nexport interface ShellMotionAxis {\n  /** How long every motion lasts, in milliseconds. `0` turns the motion building blocks off (reduced motion). */\n  durationMs: number;\n  /** The timing function of the dips (a CSS easing). */\n  easing: string;\n  /**\n   * Whether a pane an expansion hides leaves a still picture of itself behind the expanded pane. Only an axis whose\n   * panes are SEEN THROUGH should say yes (the focal plane's glass windows). Where panes paint nothing of their own\n   * — a 2D shell under a CONTINUOUS theme — the picture shows through the expanded pane and its text overlaps the\n   * expanded pane's text (measured on the glide layout, 2026-09-30).\n   */\n  drawsHiddenPanePicture: boolean;\n  /** How a side pane arrives (`ShellPaneArrival`). */\n  paneArrival: ShellPaneArrival;\n  /**\n   * With `FROM_PRESSED_ELEMENT`: carry the arrival out as a browser VIEW TRANSITION where the browser has one\n   * (`document.startViewTransition`) — the navigation's commit runs inside it, and the browser morphs the pressed row\n   * into the pane from pictures of the screen before and after. Where it has none, or nothing was pressed, the proxy\n   * flies as usual, so the arrival never depends on it. Absent means no. Evaluated on #2055.\n   */\n  paneArrivalByViewTransition?: boolean;\n  /** How an emphasized pane changes size (`ShellPaneResize`). */\n  paneResize: ShellPaneResize;\n  /** How a modal popup arrives (`ShellDialogArrival`). */\n  dialogArrival: ShellDialogArrival;\n  /**\n   * Whether the rows of a pane cascade in when the pane opens or shows another place. Rows are recognised by shape\n   * (the largest group of wide, row-high siblings in the pane), so it holds for tables, card lists and custom rows.\n   */\n  cascadesRows: boolean;\n  /**\n   * The style properties a ghost takes at a pose — standard or custom properties, kebab-case (`transform`,\n   * `--fp-z`). Opacity is not the axis's: a ghost always fades as it goes and appears as it steps back. The layout's\n   * stylesheet transitions these properties on `[data-shell-ghost]`.\n   */\n  ghostPose(pose: ShellGhostPose, placement: { rect: ShellStageRect; stage: HTMLElement }): Readonly<Record<string, string>>;\n  /**\n   * The peak keyframe of a dip. The first and last keyframes are implicit: the element leaves and returns to its rest.\n   * `stage` is the layout's stage, for a dip that travels sideways and must mirror right to left.\n   */\n  dipPeak(dip: ShellMotionDip, placement: { stage: HTMLElement }): Keyframe;\n}\n\n/**\n * The attribute a layout container puts on each wrapper it draws a region in. Wrappers are the layout's own\n * elements, so they may be moved; the region inside keeps the engine's markup untouched.\n */\nexport const SHELL_OBJECT_ATTRIBUTE = 'data-shell-object';\n/** The attribute of the layout's two ghost layers: `back` (under the regions) and `front` (above them). */\nexport const SHELL_GHOST_LAYER_ATTRIBUTE = 'data-shell-ghost-layer';\n/** The attribute every ghost carries, with its kind (`ShellGhostKind`). */\nexport const SHELL_GHOST_ATTRIBUTE = 'data-shell-ghost';\n\n/** The two kinds of ghost. */\nexport enum ShellGhostKind {\n  /** A dismissed side pane, flying away. */\n  DISCARDED = 'discarded',\n  /** A still image of a pane an expansion hid. */\n  BEHIND = 'behind',\n}\n\n/** The two ghost layers. */\nexport enum ShellGhostLayer {\n  BACK = 'back',\n  FRONT = 'front',\n}\n\n/**\n * The selector of one shell region, by the marker its preset writes (`data-component-area`, from `ShellRegion`). The\n * one place a layout spells it, so a region is always found by the enum and never by a literal.\n */\nexport function shellRegionSelector(region: ShellRegion): string {\n  return `[data-component-area=\"${region}\"]`;\n}\n\nconst CONTENT = shellRegionSelector(ShellRegion.CONTENT);\n\n/**\n * The navigation panes inside the content region, by the engine's own markers: the zone itself in the static and\n * single-zone branches (`[data-content-area]`), the panel in the resizable branch (`[data-panel-id^=\"nav-\"]`) — never\n * the zone INSIDE a panel, which would be moved twice and clipped by the panel's `overflow: hidden`.\n */\nexport const SHELL_PANE_SELECTOR = `${CONTENT} [data-content-area]:not([data-panel-id] *), ${CONTENT} [data-panel-id^=\"nav-\"]`;\n\n/** The pane of one zone, in either branch (a plain selector list: `:not()` nested in `:is()` is beyond some engines). */\nexport function shellPaneSelectorForZone(zone: string): string {\n  return `${CONTENT} [data-content-area=\"${zone}\"]:not([data-panel-id] *), ${CONTENT} [data-panel-id=\"nav-${zone}\"]`;\n}\n\n/** The zone a pane element shows, read from the engine's markers; `undefined` for anything else. */\nexport function shellPaneZone(element: Element): string | undefined {\n  if (!(element instanceof HTMLElement)) return undefined;\n  return element.dataset.contentArea ?? element.dataset.panelId?.replace(/^nav-/, '');\n}\n\nconst SIDE_ZONES: ReadonlySet<string> = new Set([NavigationZoneName.SECONDARY, NavigationZoneName.COMPANION]);\n\n/** Whether a pane shows a SIDE zone — the only kind a person dismisses (the primary pane leaves only on a remount). */\nexport function isShellSidePane(element: Element): boolean {\n  const zone = shellPaneZone(element);\n  return zone !== undefined && SIDE_ZONES.has(zone);\n}\n\n/** Whether a zone is a SIDE zone (secondary, companion): the panes that open beside the list. */\nexport function isShellSideZone(zone: string): boolean {\n  return SIDE_ZONES.has(zone);\n}\n\n/**\n * The portalled popups a layout may move, by the `data-slot` their content element carries (the presets write these\n * values; Radix writes `data-state` on the same element). A closed list: a layout keys its popup motion on it, never\n * on a role or a class.\n */\nexport enum ShellPopupSlot {\n  DROPDOWN_MENU = 'dropdown-menu-content',\n  DROPDOWN_MENU_SUB = 'dropdown-menu-sub-content',\n  CONTEXT_MENU = 'context-menu-content',\n  CONTEXT_MENU_SUB = 'context-menu-sub-content',\n  POPOVER = 'popover-content',\n  HOVER_CARD = 'hover-card-content',\n  TOOLTIP = 'tooltip-content',\n  SELECT = 'select-content',\n  MENUBAR = 'menubar-content',\n  MENUBAR_SUB = 'menubar-sub-content',\n  DIALOG = 'dialog-content',\n  ALERT_DIALOG = 'alert-dialog-content',\n  SHEET = 'sheet-content',\n  DRAWER = 'drawer-content',\n}\n\n/**\n * The popups anchored to a trigger, each with the CSS variable Radix publishes as its trigger-relative origin: the\n * point a layout lifts or scales such a popup from.\n */\nexport const SHELL_ANCHORED_POPUP_ORIGINS: Readonly<Partial<Record<ShellPopupSlot, string>>> = {\n  [ShellPopupSlot.DROPDOWN_MENU]: '--radix-dropdown-menu-content-transform-origin',\n  [ShellPopupSlot.DROPDOWN_MENU_SUB]: '--radix-dropdown-menu-content-transform-origin',\n  [ShellPopupSlot.CONTEXT_MENU]: '--radix-context-menu-content-transform-origin',\n  [ShellPopupSlot.CONTEXT_MENU_SUB]: '--radix-context-menu-content-transform-origin',\n  [ShellPopupSlot.POPOVER]: '--radix-popover-content-transform-origin',\n  [ShellPopupSlot.HOVER_CARD]: '--radix-hover-card-content-transform-origin',\n  [ShellPopupSlot.TOOLTIP]: '--radix-tooltip-content-transform-origin',\n  [ShellPopupSlot.SELECT]: '--radix-select-content-transform-origin',\n  [ShellPopupSlot.MENUBAR]: '--radix-menubar-content-transform-origin',\n  [ShellPopupSlot.MENUBAR_SUB]: '--radix-menubar-content-transform-origin',\n};\n\n/** The centred dialogs: no trigger origin, they open over the whole shell. */\nexport const SHELL_CENTRED_POPUP_SLOTS: readonly ShellPopupSlot[] = [ShellPopupSlot.DIALOG, ShellPopupSlot.ALERT_DIALOG];\n\n/**\n * The MODAL popups: while one is open the rest of the shell is not what the person works in. Keyed on the content\n * slot, deliberately never on `role=\"dialog\"` — a Radix popover carries that role too (date pickers, record pickers,\n * the notification centre), and treating it as modal steps back the form being edited — nor on\n * `body[data-scroll-locked]`, which dropdown and context menus also set.\n */\nexport const SHELL_MODAL_POPUP_SLOTS: readonly ShellPopupSlot[] = [ShellPopupSlot.DIALOG, ShellPopupSlot.ALERT_DIALOG, ShellPopupSlot.SHEET, ShellPopupSlot.DRAWER];\n\n/** The `data-state` values of an OPEN popup. A tooltip is never `open`: Radix writes `delayed-open` or `instant-open`. */\nexport const SHELL_POPUP_OPEN_STATES: readonly string[] = ['open', 'delayed-open', 'instant-open'];\n\n/**\n * A `:has()` clause that matches a layout root while a modal popup is open in its overlay layer\n * (`AppShellOverlayPortalLayer`, `[data-shell-overlay-layer]`). Append it to the root selector:\n * `[data-my-layout]${shellModalOpenClause()} [data-shell-object] { … }`.\n */\nexport function shellModalOpenClause(): string {\n  return `:has([data-shell-overlay-layer] :is(${SHELL_MODAL_POPUP_SLOTS.map((slot) => `[data-slot=\"${slot}\"]`).join(', ')})[data-state=\"open\"])`;\n}\n/** @wildo_source:part:end saas.frontend.app-shell.shell-motion-contract */\n"]}

package/dist/esm/core/app-shell/shell-motion/shell-view-transition.d.ts

@@ -0,0 +1,46 @@
+import type { NavigationCommitWrapper } from '../../navigation/navigation-commit';
+import { type ShellPressOrigin } from './shell-motion-origins';
+import { type ShellMotionAxis } from './shell-motion-vocabulary';
+/**
+ * A side pane's arrival carried out by the browser's View Transitions API (#2055), for an axis that asks for it
+ * (`paneArrivalByViewTransition`). The navigation's commit runs inside `document.startViewTransition`: the browser takes
+ * a picture of the screen, the commit renders synchronously (`flushSync`), the browser takes a second picture, and the
+ * element NAMED in both morphs from its first box to its second. The pressed row carries the name before the commit and
+ * the pane that opened carries it after, so the row becomes the pane.
+ *
+ * What the browser brings that the proxy cannot: the pane's REAL picture (the proxy is a plain box with a copy of the
+ * row), cropped as it grows, on the compositor. What it costs: every other part of the screen changes at once (the root
+ * is not animated, so nothing else cross-fades), and the page takes no input while the pictures play.
+ *
+ * Nothing depends on it: where the browser has no view transitions, nothing was pressed, the pane was already open, or
+ * the reader asked for reduced motion, the commit simply runs and the proxy flies as it always did.
+ */
+/** The `view-transition-name` the row and the pane share. */
+export declare const SHELL_VIEW_TRANSITION_NAME = "shell-pane-arrival";
+/** Written on the document element for the length of the transition, so the stylesheet below applies to it only. */
+export declare const SHELL_VIEW_TRANSITION_ATTRIBUTE = "data-shell-view-transition";
+/**
+ * The transition's pictures: the rest of the screen switches at once, and the box grows from the row to the pane. Both
+ * pictures keep their natural size, anchored at the start corner and clipped by the box (never stretched: a wide, short
+ * row scaled to cover a tall pane is unreadable), the row's fading out and the pane's fading in over the second half. The pace is the
+ * axis's, written on the document element as custom properties for the length of the transition.
+ */
+export declare const SHELL_VIEW_TRANSITION_CSS = "\nhtml[data-shell-view-transition]::view-transition-old(root),\nhtml[data-shell-view-transition]::view-transition-new(root) { animation: none; }\n::view-transition-group(shell-pane-arrival) {\n  animation-duration: var(--shell-vt-duration, 320ms); animation-timing-function: var(--shell-vt-ease, ease);\n  overflow: clip; border-radius: var(--radius, 8px);\n}\n::view-transition-old(shell-pane-arrival),\n::view-transition-new(shell-pane-arrival) { height: 100%; object-fit: none; object-position: left top; }\nhtml:dir(rtl)::view-transition-old(shell-pane-arrival),\nhtml:dir(rtl)::view-transition-new(shell-pane-arrival) { object-position: right top; }\n::view-transition-old(shell-pane-arrival) { animation: shell-vt-out calc(var(--shell-vt-duration, 320ms) * 0.6) ease-out both; }\n::view-transition-new(shell-pane-arrival) { animation: shell-vt-in var(--shell-vt-duration, 320ms) ease-in both; }\n@keyframes shell-vt-out { to { opacity: 0; } }\n@keyframes shell-vt-in { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) {\n  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }\n}\n";
+/** Whether this browser can run a view transition. */
+export declare function shellViewTransitionsAvailable(doc?: Document): boolean;
+/**
+ * The navigation-commit wrapper of a view-transition arrival. It lets a commit through untouched unless it OPENS a side
+ * pane that was not on screen, right after a row was pressed; then it consumes the press (so the proxy does not also
+ * fly), names the row, and runs the commit inside a view transition.
+ *
+ * After the commit it names the pane that opened and FINISHES any hold the layout's stylesheet plays on an arriving
+ * pane (the transition is the arrival now, and a stylesheet hold would leave the pane's picture blank). Only ONE element may carry a name at a time — a duplicate makes the browser abandon the transition — so the
+ * row loses it before the pane gets it.
+ */
+export declare function createShellViewTransitionCommit(options: {
+    stage: () => HTMLElement | null;
+    origin: ShellPressOrigin;
+    axis: ShellMotionAxis;
+    doc?: Document;
+}): NavigationCommitWrapper;
+//# sourceMappingURL=shell-view-transition.d.ts.map

package/dist/esm/core/app-shell/shell-motion/shell-view-transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-view-transition.d.ts","sourceRoot":"","sources":["../../../../../../src/core/app-shell/shell-motion/shell-view-transition.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAiC,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAA6C,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5G;;;;;;;;;;;;;GAaG;AAEH,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,uBAAuB,CAAC;AAC/D,oHAAoH;AACpH,eAAO,MAAM,+BAA+B,+BAA+B,CAAC;AAE5E;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,oqCAkBrC,CAAC;AAOF,sDAAsD;AACtD,wBAAgB,6BAA6B,CAAC,GAAG,GAAE,QAAmB,GAAG,OAAO,CAE/E;AAUD;;;;;;;;GAQG;AACH,wBAAgB,+BAA+B,CAAC,OAAO,EAAE;IACvD,KAAK,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,gBAAgB,CAAC;IACzB,IAAI,EAAE,eAAe,CAAC;IACtB,GAAG,CAAC,EAAE,QAAQ,CAAC;CAChB,GAAG,uBAAuB,CA4D1B"}

package/dist/esm/core/app-shell/shell-motion/shell-view-transition.js

@@ -0,0 +1,139 @@
+import { flushSync } from 'react-dom';
+import { LoggerFrontendService } from '../../../core/monitoring/logger.frontend.service.js';
+import { SHELL_PRESS_ORIGIN_MAX_AGE_MS } from './shell-motion-origins.js';
+import { isShellSideZone, shellPaneSelectorForZone } from './shell-motion-vocabulary.js';
+/**
+ * A side pane's arrival carried out by the browser's View Transitions API (#2055), for an axis that asks for it
+ * (`paneArrivalByViewTransition`). The navigation's commit runs inside `document.startViewTransition`: the browser takes
+ * a picture of the screen, the commit renders synchronously (`flushSync`), the browser takes a second picture, and the
+ * element NAMED in both morphs from its first box to its second. The pressed row carries the name before the commit and
+ * the pane that opened carries it after, so the row becomes the pane.
+ *
+ * What the browser brings that the proxy cannot: the pane's REAL picture (the proxy is a plain box with a copy of the
+ * row), cropped as it grows, on the compositor. What it costs: every other part of the screen changes at once (the root
+ * is not animated, so nothing else cross-fades), and the page takes no input while the pictures play.
+ *
+ * Nothing depends on it: where the browser has no view transitions, nothing was pressed, the pane was already open, or
+ * the reader asked for reduced motion, the commit simply runs and the proxy flies as it always did.
+ */
+/** The `view-transition-name` the row and the pane share. */
+export const SHELL_VIEW_TRANSITION_NAME = 'shell-pane-arrival';
+/** Written on the document element for the length of the transition, so the stylesheet below applies to it only. */
+export const SHELL_VIEW_TRANSITION_ATTRIBUTE = 'data-shell-view-transition';
+/**
+ * The transition's pictures: the rest of the screen switches at once, and the box grows from the row to the pane. Both
+ * pictures keep their natural size, anchored at the start corner and clipped by the box (never stretched: a wide, short
+ * row scaled to cover a tall pane is unreadable), the row's fading out and the pane's fading in over the second half. The pace is the
+ * axis's, written on the document element as custom properties for the length of the transition.
+ */
+export const SHELL_VIEW_TRANSITION_CSS = `
+html[${SHELL_VIEW_TRANSITION_ATTRIBUTE}]::view-transition-old(root),
+html[${SHELL_VIEW_TRANSITION_ATTRIBUTE}]::view-transition-new(root) { animation: none; }
+::view-transition-group(${SHELL_VIEW_TRANSITION_NAME}) {
+  animation-duration: var(--shell-vt-duration, 320ms); animation-timing-function: var(--shell-vt-ease, ease);
+  overflow: clip; border-radius: var(--radius, 8px);
+}
+::view-transition-old(${SHELL_VIEW_TRANSITION_NAME}),
+::view-transition-new(${SHELL_VIEW_TRANSITION_NAME}) { height: 100%; object-fit: none; object-position: left top; }
+html:dir(rtl)::view-transition-old(${SHELL_VIEW_TRANSITION_NAME}),
+html:dir(rtl)::view-transition-new(${SHELL_VIEW_TRANSITION_NAME}) { object-position: right top; }
+::view-transition-old(${SHELL_VIEW_TRANSITION_NAME}) { animation: shell-vt-out calc(var(--shell-vt-duration, 320ms) * 0.6) ease-out both; }
+::view-transition-new(${SHELL_VIEW_TRANSITION_NAME}) { animation: shell-vt-in var(--shell-vt-duration, 320ms) ease-in both; }
+@keyframes shell-vt-out { to { opacity: 0; } }
+@keyframes shell-vt-in { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
+}
+`;
+const logger = LoggerFrontendService.getLogger();
+/** The transition that owns the document attribute and the pace variables right now (a newer one takes them over). */
+let owningTransition = null;
+/** Whether this browser can run a view transition. */
+export function shellViewTransitionsAvailable(doc = document) {
+    return typeof doc.startViewTransition === 'function';
+}
+/** A pane of `zone` that is on screen. */
+function shownPane(stage, zone) {
+    for (const pane of stage.querySelectorAll(shellPaneSelectorForZone(zone))) {
+        if (!pane.hasAttribute('data-zone-hidden') && pane.offsetWidth > 0)
+            return pane;
+    }
+    return null;
+}
+/**
+ * The navigation-commit wrapper of a view-transition arrival. It lets a commit through untouched unless it OPENS a side
+ * pane that was not on screen, right after a row was pressed; then it consumes the press (so the proxy does not also
+ * fly), names the row, and runs the commit inside a view transition.
+ *
+ * After the commit it names the pane that opened and FINISHES any hold the layout's stylesheet plays on an arriving
+ * pane (the transition is the arrival now, and a stylesheet hold would leave the pane's picture blank). Only ONE element may carry a name at a time — a duplicate makes the browser abandon the transition — so the
+ * row loses it before the pane gets it.
+ */
+export function createShellViewTransitionCommit(options) {
+    const doc = options.doc ?? document;
+    return (commit, { zone }) => {
+        const stage = options.stage();
+        const start = doc.startViewTransition;
+        if (!stage || typeof start !== 'function' || options.axis.durationMs === 0 || !isShellSideZone(zone) || shownPane(stage, zone)) {
+            commit();
+            return;
+        }
+        // Look before taking: a row that re-mounted since the press keeps its box for the proxy, which needs only that.
+        const row = options.origin.peekRow(SHELL_PRESS_ORIGIN_MAX_AGE_MS)?.element;
+        if (!row?.isConnected) {
+            commit();
+            return;
+        }
+        options.origin.takeRow(SHELL_PRESS_ORIGIN_MAX_AGE_MS);
+        const root = doc.documentElement;
+        const owner = {};
+        owningTransition = owner;
+        let named = null;
+        const finish = () => {
+            row.style.removeProperty('view-transition-name');
+            named?.style.removeProperty('view-transition-name');
+            // A newer transition may have taken the document over meanwhile: leave its attribute and pace alone.
+            if (owningTransition !== owner)
+                return;
+            owningTransition = null;
+            root.removeAttribute(SHELL_VIEW_TRANSITION_ATTRIBUTE);
+            root.style.removeProperty('--shell-vt-duration');
+            root.style.removeProperty('--shell-vt-ease');
+        };
+        root.setAttribute(SHELL_VIEW_TRANSITION_ATTRIBUTE, '');
+        root.style.setProperty('--shell-vt-duration', `${options.axis.durationMs}ms`);
+        root.style.setProperty('--shell-vt-ease', options.axis.easing);
+        row.style.setProperty('view-transition-name', SHELL_VIEW_TRANSITION_NAME);
+        try {
+            const transition = start.call(doc, () => {
+                row.style.removeProperty('view-transition-name');
+                try {
+                    flushSync(commit);
+                }
+                catch (error) {
+                    // Inside the transition an error would surface as an unhandled rejection with no context: say what failed.
+                    logger.error('A navigation commit failed inside the view-transition arrival', { error, zone });
+                    return;
+                }
+                const pane = shownPane(stage, zone);
+                if (!pane)
+                    return;
+                // The transition IS the arrival: end any hold the layout's stylesheet plays on the arriving pane at once
+                // (finished, not removed — nothing is left on the element, and a pane opened later holds as it should).
+                for (const element of stage.querySelectorAll(shellPaneSelectorForZone(zone))) {
+                    for (const animation of element.getAnimations?.() ?? [])
+                        if ('animationName' in animation)
+                            animation.finish();
+                }
+                pane.style.setProperty('view-transition-name', SHELL_VIEW_TRANSITION_NAME);
+                named = pane;
+            });
+            void transition.finished.then(finish, finish);
+        }
+        catch {
+            finish();
+            commit();
+        }
+    };
+}
+//# sourceMappingURL=shell-view-transition.js.map

package/dist/esm/core/app-shell/shell-motion/shell-view-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-view-transition.js","sourceRoot":"","sources":["../../../../../../src/core/app-shell/shell-motion/shell-view-transition.ts"],"names":[],"mappings":"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","sourcesContent":["import { flushSync } from 'react-dom';\n\nimport { LoggerFrontendService } from '~wildo-frontend-lib/core/monitoring/logger.frontend.service';\n\nimport type { NavigationCommitWrapper } from '../../navigation/navigation-commit';\nimport { SHELL_PRESS_ORIGIN_MAX_AGE_MS, type ShellPressOrigin } from './shell-motion-origins';\nimport { isShellSideZone, shellPaneSelectorForZone, type ShellMotionAxis } from './shell-motion-vocabulary';\n\n/**\n * A side pane's arrival carried out by the browser's View Transitions API (#2055), for an axis that asks for it\n * (`paneArrivalByViewTransition`). The navigation's commit runs inside `document.startViewTransition`: the browser takes\n * a picture of the screen, the commit renders synchronously (`flushSync`), the browser takes a second picture, and the\n * element NAMED in both morphs from its first box to its second. The pressed row carries the name before the commit and\n * the pane that opened carries it after, so the row becomes the pane.\n *\n * What the browser brings that the proxy cannot: the pane's REAL picture (the proxy is a plain box with a copy of the\n * row), cropped as it grows, on the compositor. What it costs: every other part of the screen changes at once (the root\n * is not animated, so nothing else cross-fades), and the page takes no input while the pictures play.\n *\n * Nothing depends on it: where the browser has no view transitions, nothing was pressed, the pane was already open, or\n * the reader asked for reduced motion, the commit simply runs and the proxy flies as it always did.\n */\n\n/** The `view-transition-name` the row and the pane share. */\nexport const SHELL_VIEW_TRANSITION_NAME = 'shell-pane-arrival';\n/** Written on the document element for the length of the transition, so the stylesheet below applies to it only. */\nexport const SHELL_VIEW_TRANSITION_ATTRIBUTE = 'data-shell-view-transition';\n\n/**\n * The transition's pictures: the rest of the screen switches at once, and the box grows from the row to the pane. Both\n * pictures keep their natural size, anchored at the start corner and clipped by the box (never stretched: a wide, short\n * row scaled to cover a tall pane is unreadable), the row's fading out and the pane's fading in over the second half. The pace is the\n * axis's, written on the document element as custom properties for the length of the transition.\n */\nexport const SHELL_VIEW_TRANSITION_CSS = `\nhtml[${SHELL_VIEW_TRANSITION_ATTRIBUTE}]::view-transition-old(root),\nhtml[${SHELL_VIEW_TRANSITION_ATTRIBUTE}]::view-transition-new(root) { animation: none; }\n::view-transition-group(${SHELL_VIEW_TRANSITION_NAME}) {\n  animation-duration: var(--shell-vt-duration, 320ms); animation-timing-function: var(--shell-vt-ease, ease);\n  overflow: clip; border-radius: var(--radius, 8px);\n}\n::view-transition-old(${SHELL_VIEW_TRANSITION_NAME}),\n::view-transition-new(${SHELL_VIEW_TRANSITION_NAME}) { height: 100%; object-fit: none; object-position: left top; }\nhtml:dir(rtl)::view-transition-old(${SHELL_VIEW_TRANSITION_NAME}),\nhtml:dir(rtl)::view-transition-new(${SHELL_VIEW_TRANSITION_NAME}) { object-position: right top; }\n::view-transition-old(${SHELL_VIEW_TRANSITION_NAME}) { animation: shell-vt-out calc(var(--shell-vt-duration, 320ms) * 0.6) ease-out both; }\n::view-transition-new(${SHELL_VIEW_TRANSITION_NAME}) { animation: shell-vt-in var(--shell-vt-duration, 320ms) ease-in both; }\n@keyframes shell-vt-out { to { opacity: 0; } }\n@keyframes shell-vt-in { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) {\n  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }\n}\n`;\n\nconst logger: LoggerFrontendService = LoggerFrontendService.getLogger();\n\n/** The transition that owns the document attribute and the pace variables right now (a newer one takes them over). */\nlet owningTransition: object | null = null;\n\n/** Whether this browser can run a view transition. */\nexport function shellViewTransitionsAvailable(doc: Document = document): boolean {\n  return typeof (doc as Document & { startViewTransition?: unknown }).startViewTransition === 'function';\n}\n\n/** A pane of `zone` that is on screen. */\nfunction shownPane(stage: HTMLElement, zone: string): HTMLElement | null {\n  for (const pane of stage.querySelectorAll<HTMLElement>(shellPaneSelectorForZone(zone))) {\n    if (!pane.hasAttribute('data-zone-hidden') && pane.offsetWidth > 0) return pane;\n  }\n  return null;\n}\n\n/**\n * The navigation-commit wrapper of a view-transition arrival. It lets a commit through untouched unless it OPENS a side\n * pane that was not on screen, right after a row was pressed; then it consumes the press (so the proxy does not also\n * fly), names the row, and runs the commit inside a view transition.\n *\n * After the commit it names the pane that opened and FINISHES any hold the layout's stylesheet plays on an arriving\n * pane (the transition is the arrival now, and a stylesheet hold would leave the pane's picture blank). Only ONE element may carry a name at a time — a duplicate makes the browser abandon the transition — so the\n * row loses it before the pane gets it.\n */\nexport function createShellViewTransitionCommit(options: {\n  stage: () => HTMLElement | null;\n  origin: ShellPressOrigin;\n  axis: ShellMotionAxis;\n  doc?: Document;\n}): NavigationCommitWrapper {\n  const doc = options.doc ?? document;\n  return (commit, { zone }) => {\n    const stage = options.stage();\n    const start = (doc as Document & { startViewTransition?: (update: () => void) => { finished: Promise<void> } }).startViewTransition;\n    if (!stage || typeof start !== 'function' || options.axis.durationMs === 0 || !isShellSideZone(zone) || shownPane(stage, zone)) {\n      commit();\n      return;\n    }\n    // Look before taking: a row that re-mounted since the press keeps its box for the proxy, which needs only that.\n    const row = options.origin.peekRow(SHELL_PRESS_ORIGIN_MAX_AGE_MS)?.element;\n    if (!row?.isConnected) {\n      commit();\n      return;\n    }\n    options.origin.takeRow(SHELL_PRESS_ORIGIN_MAX_AGE_MS);\n    const root = doc.documentElement;\n    const owner = {};\n    owningTransition = owner;\n    let named: HTMLElement | null = null;\n    const finish = (): void => {\n      row.style.removeProperty('view-transition-name');\n      named?.style.removeProperty('view-transition-name');\n      // A newer transition may have taken the document over meanwhile: leave its attribute and pace alone.\n      if (owningTransition !== owner) return;\n      owningTransition = null;\n      root.removeAttribute(SHELL_VIEW_TRANSITION_ATTRIBUTE);\n      root.style.removeProperty('--shell-vt-duration');\n      root.style.removeProperty('--shell-vt-ease');\n    };\n    root.setAttribute(SHELL_VIEW_TRANSITION_ATTRIBUTE, '');\n    root.style.setProperty('--shell-vt-duration', `${options.axis.durationMs}ms`);\n    root.style.setProperty('--shell-vt-ease', options.axis.easing);\n    row.style.setProperty('view-transition-name', SHELL_VIEW_TRANSITION_NAME);\n    try {\n      const transition = start.call(doc, () => {\n        row.style.removeProperty('view-transition-name');\n        try {\n          flushSync(commit);\n        } catch (error) {\n          // Inside the transition an error would surface as an unhandled rejection with no context: say what failed.\n          logger.error('A navigation commit failed inside the view-transition arrival', { error, zone });\n          return;\n        }\n        const pane = shownPane(stage, zone);\n        if (!pane) return;\n        // The transition IS the arrival: end any hold the layout's stylesheet plays on the arriving pane at once\n        // (finished, not removed — nothing is left on the element, and a pane opened later holds as it should).\n        for (const element of stage.querySelectorAll<HTMLElement>(shellPaneSelectorForZone(zone))) {\n          for (const animation of element.getAnimations?.() ?? []) if ('animationName' in animation) animation.finish();\n        }\n        pane.style.setProperty('view-transition-name', SHELL_VIEW_TRANSITION_NAME);\n        named = pane;\n      });\n      void transition.finished.then(finish, finish);\n    } catch {\n      finish();\n      commit();\n    }\n  };\n}\n"]}

package/dist/esm/core/app-shell/shell-motion/use-shell-motion.d.ts

@@ -0,0 +1,108 @@
+import { type RefObject } from 'react';
+import type { NavigationContextType } from '../../navigation/NavigationContext';
+import { ShellPlaceChange, type ShellMotionAxis, type ShellStageRect } from './shell-motion-vocabulary';
+/**
+ * The last laid-out box of every object, kept so a pane that has just been REMOVED or HIDDEN can still be drawn where
+ * it was (its ghost leaves from there). A zero-size reading never replaces a real one: a hidden pane measures as
+ * nothing, and its last visible box is the one that matters.
+ */
+export declare const shellStageRects: WeakMap<Element, ShellStageRect>;
+/** An element's layout offset inside `root`, walking the offset-parent chain (transforms are not part of it). */
+export declare function offsetWithin(element: HTMLElement, root: HTMLElement): {
+    left: number;
+    top: number;
+};
+/**
+ * Measures every object in the stage — the layout's region wrappers and the navigation panes — whenever anything can
+ * have moved one: the stage or any object resizing (a sidebar collapsing MOVES the content column without resizing the
+ * stage), the DOM changing, the window resizing. Each box lands in {@link shellStageRects}, and `onObject` lets a
+ * layout derive something per object from it (the focal plane writes each object's vanishing-point origin).
+ *
+ * Offsets come from `offsetLeft`/`offsetTop`, which ignore transforms, so an object that is moved right now still
+ * reports where it is laid out.
+ */
+export declare function useShellStageMeasurement(rootRef: RefObject<HTMLElement | null>, onObject?: (element: HTMLElement, offset: {
+    left: number;
+    top: number;
+}, stage: HTMLElement) => void): void;
+/**
+ * Which pane is in front: the one last pressed in or focused, or the one that last opened or changed place
+ * (`bringForward`). Kept by the layout rather than read from the navigation state's `focusedZone` alone, because that
+ * follows only interaction: opening a record beside a list leaves the LIST focused, and a layout brings the new pane
+ * forward. The engine's focus state is never written.
+ */
+export declare function useShellFrontPane(rootRef: RefObject<HTMLElement | null>, focusedZone: string): {
+    zone: string;
+    bringForward: (zone: string) => void;
+};
+/** The part of the navigation state place detection reads. */
+export type ShellPlaceNavigation = Pick<NavigationContextType, 'state' | 'getTopEntry'>;
+/**
+ * Reports each structural zone that APPEARS (it held nothing and now holds a place) or CHANGES place (it now shows
+ * another URL path). A place is the top entry's URL path — not its id, which is minted again on every push, and not
+ * its query string, which carries view state on the same content (a section tab, a list mode). The overlay zone is a
+ * dialog, not a pane, and is never reported. Nothing is reported on the first render.
+ */
+export declare function useShellPlaceChanges(navigation: ShellPlaceNavigation, onPlace: (zone: string, how: ShellPlaceChange) => void): void;
+/**
+ * Makes an element a picture: no ids, no focus, invisible to assistive technology, and none of the markers a query for
+ * the REAL pane would find (a document-level lookup of a pane must never return its image). Embedded frames and media
+ * are dropped rather than loaded a second time.
+ */
+export declare function makeShellPicture(element: HTMLElement): void;
+/**
+ * What a stylesheet cannot do alone, because the engine unmounts or hides a pane at once:
+ *
+ * - **Discard.** A side pane dismissed by its close control is removed from the DOM immediately. The removed node,
+ *   no longer React's, is re-parented into the FRONT ghost layer at the box it last had, and goes to the axis's
+ *   `DISCARDED` pose as it fades.
+ * - **Expand.** An emphasized pane takes the width and the engine HIDES the others (`data-zone-hidden`). When the axis
+ *   draws one (`drawsHiddenPanePicture`), a still, inert image of each hidden pane is left in the BACK ghost layer at
+ *   the axis's `BEHIND` pose. It is a picture, never a
+ *   control: returning to side by side is the pane's own restore control. The image returns to `REST` and fades when
+ *   the emphasis ends.
+ * - **Swap.** `dip(zone)` plays the axis's `PANE_SWAP` dip on a pane whose content changed in place.
+ *
+ * Needs {@link useShellStageMeasurement} running on the same stage (the boxes ghosts leave from), and the two ghost
+ * layers (`[data-shell-ghost-layer="back"]` and `"front"`) inside it. An axis with `durationMs: 0` plays nothing: no
+ * discard ghost and no dip. The picture behind an expanded pane is still drawn — a still picture is not motion — at
+ * its pose at once, and removed at once.
+ */
+export declare function useShellPaneMotion(rootRef: RefObject<HTMLElement | null>, axis: ShellMotionAxis): {
+    dip: (zone: string) => void;
+};
+/**
+ * A side column (the sidebar folding to its rail or unfolding, a utility panel) plays the axis's `COLUMN_RESIZE` dip
+ * while the panes re-arrange. The width animates over many frames, so the dip plays once per settled change larger
+ * than a few pixels, and at most once per motion. It runs on the layout's OWN wrapper (`[data-shell-object]`).
+ */
+export declare function useShellColumnMotion(rootRef: RefObject<HTMLElement | null>, axis: ShellMotionAxis): void;
+/** @wildo_source:part:start saas.frontend.app-shell.use-shell-motion facet:layer:frontend facet:family:app-shell facet:audience:app-developer */
+/** What an animated layout's stage passes to {@link useShellMotion}. */
+export interface ShellMotionOptions {
+    /** Which way things move, and for how long. Memoize it: the building blocks re-arm when it changes. */
+    axis: ShellMotionAxis;
+    /** The navigation state (`useNavigationState()`): its focused zone, its zones' places. */
+    navigation: ShellPlaceNavigation & Pick<NavigationContextType, 'focusedZone'>;
+    /** Called per object on every measurement, with its offset in the stage (a depth layout derives its origin here). */
+    onObjectMeasured?: (element: HTMLElement, offset: {
+        left: number;
+        top: number;
+    }, stage: HTMLElement) => void;
+}
+/**
+ * Every motion building block an animated layout composes, on one stage: the measurement, the front pane, place
+ * changes (a pane that opens or changes place comes forward, and a change in place dips), the discard and behind
+ * ghosts, the column dip — and, as the axis chooses, a side pane or a dialog growing out of what was pressed, an
+ * emphasized pane growing to its width, and rows cascading in (a side pane's arrival as a browser view transition when
+ * the axis asks, `paneArrivalByViewTransition`). Returns the zone in front, which the layout exposes (as an attribute) for its stylesheet
+ * to recede the others.
+ *
+ * The stage (`rootRef`) must contain the layout's region wrappers marked `data-shell-object`, the content outlet, and
+ * the two ghost layers (`data-shell-ghost-layer="back"` under the regions, `"front"` above them).
+ */
+export declare function useShellMotion(rootRef: RefObject<HTMLElement | null>, { axis, navigation, onObjectMeasured }: ShellMotionOptions): {
+    frontZone: string;
+};
+/** @wildo_source:part:end saas.frontend.app-shell.use-shell-motion */
+//# sourceMappingURL=use-shell-motion.d.ts.map

package/dist/esm/core/app-shell/shell-motion/use-shell-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-shell-motion.d.ts","sourceRoot":"","sources":["../../../../../../src/core/app-shell/shell-motion/use-shell-motion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAgBL,gBAAgB,EAChB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,2BAA2B,CAAC;AAQnC;;;;GAIG;AACH,eAAO,MAAM,eAAe,kCAAyC,CAAC;AAEtE,iHAAiH;AACjH,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAYnG;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,GACnG,IAAI,CAoCN;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,WAAW,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CAoBrJ;AAED,8DAA8D;AAC9D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;AAIxF;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,oBAAoB,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,gBAAgB,KAAK,IAAI,GAAG,IAAI,CAsBnI;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAO3D;AAWD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,GAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CA4HjI;AAKD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI,CAyBxG;AAED,iJAAiJ;AACjJ,wEAAwE;AACxE,MAAM,WAAW,kBAAkB;IACjC,uGAAuG;IACvG,IAAI,EAAE,eAAe,CAAC;IACtB,0FAA0F;IAC1F,UAAU,EAAE,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,EAAE,aAAa,CAAC,CAAC;IAC9E,qHAAqH;IACrH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9G;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,GAAG;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,CAuCxJ;AACD,sEAAsE"}