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

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

@@ -0,0 +1,316 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { SHELL_MODAL_POPUP_SLOTS, SHELL_PANE_SELECTOR, SHELL_PROXY_ATTRIBUTE, SHELL_PROXY_FLIGHT_SHARE, ShellDialogArrival, ShellPopupSlot, } from './shell-motion-vocabulary.js';
+/** A row is at least this high (a single line of text in a padded row) … */
+const ROW_MIN_HEIGHT_PX = 24;
+/** … at most this high (a two-line card row with meta) … */
+const ROW_MAX_HEIGHT_PX = 220;
+/** … and at least this share of its pane's width. */
+const ROW_MIN_WIDTH_SHARE = 0.5;
+/** How many rows a cascade animates at most: the rest are below the fold or too many to stagger meaningfully. */
+const CASCADE_MAX_ROWS = 24;
+/** The stagger between two cascading rows. */
+const CASCADE_STAGGER_MS = 28;
+/** How long a cascade keeps watching for rows that arrive after the place changed (data still loading). */
+const CASCADE_WATCH_MS = 1500;
+/**
+ * How recent a press must be to be what opened a pane or a dialog. Short on purpose: a modal that opens later than
+ * this was not opened by that press (a timer, a websocket push), and must not fly from it.
+ */
+export const SHELL_PRESS_ORIGIN_MAX_AGE_MS = 800;
+const toBox = (rect) => ({ left: rect.left, top: rect.top, width: rect.width, height: rect.height });
+/** An inert, unaddressable copy of an element: no ids, no focus, hidden from assistive technology, no engine markers. */
+function pictureOf(element) {
+    const copy = element.cloneNode(true);
+    copy.setAttribute('aria-hidden', 'true');
+    copy.setAttribute('inert', '');
+    for (const node of [copy, ...copy.querySelectorAll('*')]) {
+        for (const attribute of ['id', 'data-content-area', 'data-panel-id', 'data-component-area', 'data-slot', 'data-state'])
+            node.removeAttribute(attribute);
+    }
+    for (const media of copy.querySelectorAll('iframe, video, audio'))
+        media.remove();
+    return copy;
+}
+/** Whether an element has the shape of a row inside a pane `paneWidth` wide. */
+function isRowShaped(element, paneWidth) {
+    if (!(element instanceof HTMLElement))
+        return false;
+    const height = element.offsetHeight;
+    return height >= ROW_MIN_HEIGHT_PX && height <= ROW_MAX_HEIGHT_PX && element.offsetWidth >= paneWidth * ROW_MIN_WIDTH_SHARE;
+}
+/**
+ * Whether two elements are ALIKE — the same tag, and mostly the same classes (half their class tokens shared or more).
+ * Rows rendered by one component share their classes, whatever state class one of them adds (`active`, `selected`); a
+ * header, a toolbar and a filter bar are rendered by different components and do not.
+ */
+function isAlike(a, b) {
+    if (a.tagName !== b.tagName)
+        return false;
+    const tokensA = new Set(a.classList);
+    const tokensB = new Set(b.classList);
+    if (tokensA.size === 0 && tokensB.size === 0)
+        return true;
+    const shared = [...tokensA].filter((token) => tokensB.has(token)).length;
+    return shared / Math.max(tokensA.size, tokensB.size) >= 0.5;
+}
+/**
+ * Whether a row-shaped element is one of a REPEATED group — at least one alike, row-shaped sibling: a list, even of two
+ * items, and never a strip that is alone of its kind.
+ */
+function isInRepeatedGroup(element, paneWidth) {
+    const siblings = element.parentElement ? [...element.parentElement.children] : [];
+    return siblings.some((sibling) => sibling !== element && isRowShaped(sibling, paneWidth) && isAlike(sibling, element));
+}
+/**
+ * The row an element belongs to, recognised by SHAPE: the nearest ancestor inside the pane that is row-high, wide, and
+ * one of a repeated group of such siblings. The engine renders no row marker, and its lists are tables, card lists or an
+ * application's own rows, so a marker could never cover them all while a shape does. The repeated-group rule keeps a
+ * full-width toolbar or header, which is alone of its kind, from passing for a row. `null` outside a pane, or when
+ * nothing on the way qualifies (a multi-column card grid, whose cards are narrower than half the pane).
+ */
+export function shellRowBox(target) {
+    const pane = target.closest(SHELL_PANE_SELECTOR);
+    if (!pane)
+        return null;
+    const paneWidth = pane.clientWidth;
+    for (let element = target; element && element !== pane; element = element.parentElement) {
+        if (isRowShaped(element, paneWidth) && isInRepeatedGroup(element, paneWidth))
+            return element;
+    }
+    return null;
+}
+const CONTROL_SELECTOR = 'button, a, [role="button"], [role="menuitem"], [role="option"]';
+/**
+ * Remembers the last press — a pointer press, or Enter / Space on a focused element — as the box of the row and of the
+ * control it happened in, measured AT the press, before anything re-renders (the row may move or unmount the moment what
+ * it opens mounts). ANY other key press forgets it: whatever opens next was opened by that key (a shortcut such as the
+ * command palette's), not by the earlier press, and must not grow out of it.
+ *
+ * Installs nothing while `enabled` is false — a layout whose axis never grows from a press pays no listener and no layout
+ * read on every press.
+ */
+export function useShellPressOrigin(enabled) {
+    const last = useRef(null);
+    useEffect(() => {
+        last.current = null;
+        if (!enabled)
+            return undefined;
+        const record = (target) => {
+            if (!target)
+                return;
+            const row = shellRowBox(target);
+            const control = target.closest(CONTROL_SELECTOR) ?? target;
+            last.current = {
+                row: row ? { ...toBox(row.getBoundingClientRect()), picture: pictureOf(row), element: row } : null,
+                control: toBox(control.getBoundingClientRect()),
+                at: performance.now(),
+            };
+        };
+        const onPointer = (event) => record(event.target instanceof Element ? event.target : null);
+        const onKey = (event) => {
+            if (event.key === 'Enter' || event.key === ' ')
+                record(document.activeElement);
+            else
+                last.current = null;
+        };
+        document.addEventListener('pointerdown', onPointer, true);
+        document.addEventListener('keydown', onKey, true);
+        return () => {
+            document.removeEventListener('pointerdown', onPointer, true);
+            document.removeEventListener('keydown', onKey, true);
+        };
+    }, [enabled]);
+    return useMemo(() => {
+        const take = (pick, maxAgeMs) => {
+            const press = last.current;
+            if (!press || performance.now() - press.at > maxAgeMs)
+                return null;
+            last.current = null;
+            return pick(press);
+        };
+        const peek = (maxAgeMs) => {
+            const press = last.current;
+            return press && performance.now() - press.at <= maxAgeMs ? press.row : null;
+        };
+        return { takeRow: (maxAgeMs) => take((press) => press.row, maxAgeMs), peekRow: peek, takeControl: (maxAgeMs) => take((press) => press.control, maxAgeMs) };
+    }, []);
+}
+/**
+ * Flies a proxy box from one viewport box to another inside the stage, for `SHELL_PROXY_FLIGHT_SHARE` of the axis's
+ * motion, then removes it. A pressed row's picture (`from.picture`) rides in it, fading as it grows. The proxy is the core's own element (`data-shell-proxy`, aria-hidden, no pointer events),
+ * painted inline from the theme's tokens so it reads as the surface it becomes.
+ *
+ * `arriving` — the pane or dialog the proxy stands for — is revealed on the SAME clock: hidden for the flight, then faded
+ * in over the rest of the motion, by a script animation that sits above whatever the layout's stylesheet plays on it.
+ * Two clocks (a stylesheet hold started at mount, a flight started later) drift apart; one cannot.
+ */
+export function flyShellProxy(stage, from, to, axis, arriving) {
+    const duration = Math.round(axis.durationMs * SHELL_PROXY_FLIGHT_SHARE);
+    if (duration === 0 || typeof HTMLElement.prototype.animate !== 'function')
+        return Promise.resolve();
+    const origin = stage.getBoundingClientRect();
+    const frame = (box, radius) => ({
+        left: `${box.left - origin.left}px`,
+        top: `${box.top - origin.top}px`,
+        width: `${box.width}px`,
+        height: `${box.height}px`,
+        borderRadius: `${radius}px`,
+    });
+    const proxy = document.createElement('div');
+    proxy.setAttribute(SHELL_PROXY_ATTRIBUTE, '');
+    proxy.setAttribute('aria-hidden', 'true');
+    Object.assign(proxy.style, {
+        position: 'absolute',
+        zIndex: '400',
+        pointerEvents: 'none',
+        boxSizing: 'border-box',
+        background: 'var(--card, var(--background))',
+        border: '1px solid var(--primary, currentColor)',
+        boxShadow: '0 18px 40px -18px rgb(0 0 0 / 0.35)',
+    });
+    Object.assign(proxy.style, frame(from, 10), { overflow: 'hidden' });
+    // The pressed row rides in the proxy, fading as the box grows: the row visibly BECOMES the record.
+    if (from.picture) {
+        Object.assign(from.picture.style, { position: 'absolute', left: '0', top: '0', width: `${from.width}px`, height: `${from.height}px`, margin: '0', pointerEvents: 'none' });
+        proxy.appendChild(from.picture);
+        from.picture.animate([{ opacity: 1 }, { opacity: 0 }], { duration: Math.round(duration * 0.8), easing: 'ease-in', fill: 'forwards' });
+    }
+    stage.appendChild(proxy);
+    if (arriving instanceof HTMLElement && typeof arriving.animate === 'function') {
+        arriving.animate([{ opacity: 0 }, { opacity: 0, offset: SHELL_PROXY_FLIGHT_SHARE }, { opacity: 1 }], { duration: axis.durationMs, easing: 'linear' });
+    }
+    const animation = proxy.animate([frame(from, 10), frame(to, 14)], { duration, easing: axis.easing, fill: 'forwards' });
+    return animation.finished.catch(() => undefined).then(() => proxy.remove());
+}
+/**
+ * An emphasized pane grows from the box it had (`before`, in stage coordinates) to the box it now fills: it is
+ * REVEALED through a clip that starts on the old box, so its content is never scaled or distorted on the way.
+ */
+export function growShellPane(pane, before, stage, axis) {
+    if (axis.durationMs === 0 || typeof pane.animate !== 'function')
+        return;
+    const origin = stage.getBoundingClientRect();
+    const after = pane.getBoundingClientRect();
+    const top = Math.max(0, origin.top + before.top - after.top);
+    const left = Math.max(0, origin.left + before.left - after.left);
+    const right = Math.max(0, after.right - (origin.left + before.left + before.width));
+    const bottom = Math.max(0, after.bottom - (origin.top + before.top + before.height));
+    pane.animate([{ clipPath: `inset(${top}px ${right}px ${bottom}px ${left}px round 12px)` }, { clipPath: 'inset(0px 0px 0px 0px round 0px)' }], {
+        duration: axis.durationMs,
+        easing: axis.easing,
+    });
+}
+/** A pane given back its place slides home from where it stood while it had the width. */
+export function slideShellPaneHome(pane, before, stage, axis) {
+    if (axis.durationMs === 0 || typeof pane.animate !== 'function')
+        return;
+    const origin = stage.getBoundingClientRect();
+    const dx = origin.left + before.left - pane.getBoundingClientRect().left;
+    if (Math.abs(dx) < 2)
+        return;
+    pane.animate([{ transform: `translateX(${dx}px)` }, { transform: 'none' }], { duration: axis.durationMs, easing: axis.easing });
+}
+/**
+ * The rows of a pane: the largest group of ALIKE, row-shaped siblings in it (at least two — a list of two items is a
+ * list — and most of their parent's children, so neither a toolbar of wide buttons nor a pane's own header strips pass
+ * for a list).
+ */
+export function shellPaneRows(pane) {
+    const width = pane.clientWidth;
+    let best = [];
+    for (const parent of [pane, ...pane.querySelectorAll('*')]) {
+        if (parent.children.length < 2 || parent.children.length <= best.length)
+            continue;
+        const shaped = [...parent.children].filter((child) => isRowShaped(child, width));
+        // The rows are the largest ALIKE subset of the row-shaped children (a list's header row is not one of them). Each
+        // child joins the first group whose first member it is alike to: linear in the children, not quadratic.
+        const groups = [];
+        for (const child of shaped) {
+            const group = groups.find((candidate) => isAlike(candidate[0], child));
+            if (group)
+                group.push(child);
+            else
+                groups.push([child]);
+        }
+        const rows = groups.reduce((largest, group) => (group.length > largest.length ? group : largest), []);
+        if (rows.length >= 2 && rows.length > best.length && rows.length >= parent.children.length * 0.6)
+            best = rows;
+    }
+    return best;
+}
+/**
+ * Cascades a pane's rows in, one after another. Rows present now cascade at once. For `CASCADE_WATCH_MS` afterwards
+ * the pane is re-scanned after mutations — at most once per frame, in an animation-frame callback, which runs before
+ * that frame is painted — and rows not yet animated join the cascade. So rows that arrive with the data (after a loading
+ * skeleton, in a different container) cascade too, and a row never shows and then vanishes to start its entrance.
+ * Watching the WHOLE pane, not the first list found, is deliberate: the first list is often the skeleton.
+ */
+export function cascadeShellRows(pane, axis) {
+    if (axis.durationMs === 0 || typeof pane.animate !== 'function')
+        return () => undefined;
+    const animated = new WeakSet();
+    let staggerIndex = 0;
+    const run = () => {
+        scan = 0;
+        for (const row of shellPaneRows(pane).slice(0, CASCADE_MAX_ROWS)) {
+            if (animated.has(row))
+                continue;
+            animated.add(row);
+            row.animate([{ opacity: 0, transform: 'translateY(12px) scale(0.98)' }, { opacity: 1, transform: 'none' }], {
+                duration: Math.round(axis.durationMs * 0.8),
+                easing: axis.easing,
+                delay: Math.min(staggerIndex, CASCADE_MAX_ROWS) * CASCADE_STAGGER_MS,
+                fill: 'backwards',
+            });
+            staggerIndex += 1;
+        }
+    };
+    let scan = 0;
+    run();
+    // A new batch staggers from its own first row, not after the rows already shown.
+    const watch = new MutationObserver(() => {
+        if (scan)
+            return;
+        staggerIndex = 0;
+        scan = requestAnimationFrame(run);
+    });
+    watch.observe(pane, { childList: true, subtree: true });
+    const stop = setTimeout(() => { cancelAnimationFrame(scan); watch.disconnect(); }, CASCADE_WATCH_MS);
+    return () => {
+        clearTimeout(stop);
+        cancelAnimationFrame(scan);
+        watch.disconnect();
+    };
+}
+/**
+ * A modal popup grows out of the control that opened it, for an axis whose `dialogArrival` says so: when a modal content
+ * slot appears open in the stage's overlay layer, a proxy flies from the pressed control to the dialog's box, and the
+ * dialog is revealed on the flight's clock. Only the overlay layer is watched. A drawer is left alone: its library
+ * positions it with transforms of its own.
+ */
+export function useShellDialogArrival(rootRef, axis, origin) {
+    useEffect(() => {
+        const layer = rootRef.current?.querySelector('[data-shell-overlay-layer]');
+        const stage = rootRef.current;
+        if (!stage || !layer || axis.dialogArrival !== ShellDialogArrival.FROM_PRESSED_ELEMENT || axis.durationMs === 0)
+            return undefined;
+        const seen = new WeakSet();
+        const openModal = SHELL_MODAL_POPUP_SLOTS.filter((slot) => slot !== ShellPopupSlot.DRAWER)
+            .map((slot) => `[data-slot="${slot}"][data-state="open"]`)
+            .join(', ');
+        const check = () => {
+            for (const dialog of layer.querySelectorAll(openModal)) {
+                if (seen.has(dialog))
+                    continue;
+                seen.add(dialog);
+                const from = origin.takeControl(SHELL_PRESS_ORIGIN_MAX_AGE_MS);
+                if (from)
+                    void flyShellProxy(stage, from, toBox(dialog.getBoundingClientRect()), axis, dialog);
+            }
+        };
+        const observer = new MutationObserver(check);
+        observer.observe(layer, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-state'] });
+        return () => observer.disconnect();
+    }, [rootRef, axis, origin]);
+}
+//# sourceMappingURL=shell-motion-origins.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shell-motion-origins.js","sourceRoot":"","sources":["../../../../../../src/core/app-shell/shell-motion/shell-motion-origins.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, type RefObject } from 'react';\n\nimport {\n  SHELL_MODAL_POPUP_SLOTS,\n  SHELL_PANE_SELECTOR,\n  SHELL_PROXY_ATTRIBUTE,\n  SHELL_PROXY_FLIGHT_SHARE,\n  ShellDialogArrival,\n  ShellPopupSlot,\n  type ShellMotionAxis,\n  type ShellStageRect,\n} from './shell-motion-vocabulary';\n\n/**\n * The motion building blocks that start from WHERE something was pressed (#2055): a pane or a dialog growing out of the\n * row or button that opened it, an emphasized pane growing to its new width, and a pane's rows cascading in. Like the\n * rest of the motion core they write nothing on an engine element but WAAPI animations, which leave nothing behind, and\n * proxies of their own.\n */\n\n/** A box in viewport coordinates. */\nexport interface ShellViewportBox {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/** A row is at least this high (a single line of text in a padded row) … */\nconst ROW_MIN_HEIGHT_PX = 24;\n/** … at most this high (a two-line card row with meta) … */\nconst ROW_MAX_HEIGHT_PX = 220;\n/** … and at least this share of its pane's width. */\nconst ROW_MIN_WIDTH_SHARE = 0.5;\n/** How many rows a cascade animates at most: the rest are below the fold or too many to stagger meaningfully. */\nconst CASCADE_MAX_ROWS = 24;\n/** The stagger between two cascading rows. */\nconst CASCADE_STAGGER_MS = 28;\n/** How long a cascade keeps watching for rows that arrive after the place changed (data still loading). */\nconst CASCADE_WATCH_MS = 1500;\n/**\n * How recent a press must be to be what opened a pane or a dialog. Short on purpose: a modal that opens later than\n * this was not opened by that press (a timer, a websocket push), and must not fly from it.\n */\nexport const SHELL_PRESS_ORIGIN_MAX_AGE_MS = 800;\n\nconst toBox = (rect: DOMRect | ShellViewportBox): ShellViewportBox => ({ left: rect.left, top: rect.top, width: rect.width, height: rect.height });\n\n/** A pressed box, with — for a row — a still picture of it taken at the press, which a proxy carries as it grows. */\nexport interface ShellPressedBox extends ShellViewportBox {\n  picture?: HTMLElement;\n  /**\n   * The pressed row itself, live — for a view-transition arrival, which names the row BEFORE the commit so the browser\n   * captures it. It may have moved or unmounted since the press; the box above is where it was.\n   */\n  element?: HTMLElement;\n}\n\n/** An inert, unaddressable copy of an element: no ids, no focus, hidden from assistive technology, no engine markers. */\nfunction pictureOf(element: HTMLElement): HTMLElement {\n  const copy = element.cloneNode(true) as HTMLElement;\n  copy.setAttribute('aria-hidden', 'true');\n  copy.setAttribute('inert', '');\n  for (const node of [copy, ...copy.querySelectorAll<HTMLElement>('*')]) {\n    for (const attribute of ['id', 'data-content-area', 'data-panel-id', 'data-component-area', 'data-slot', 'data-state']) node.removeAttribute(attribute);\n  }\n  for (const media of copy.querySelectorAll('iframe, video, audio')) media.remove();\n  return copy;\n}\n\n/** Whether an element has the shape of a row inside a pane `paneWidth` wide. */\nfunction isRowShaped(element: Element, paneWidth: number): element is HTMLElement {\n  if (!(element instanceof HTMLElement)) return false;\n  const height = element.offsetHeight;\n  return height >= ROW_MIN_HEIGHT_PX && height <= ROW_MAX_HEIGHT_PX && element.offsetWidth >= paneWidth * ROW_MIN_WIDTH_SHARE;\n}\n\n/**\n * Whether two elements are ALIKE — the same tag, and mostly the same classes (half their class tokens shared or more).\n * Rows rendered by one component share their classes, whatever state class one of them adds (`active`, `selected`); a\n * header, a toolbar and a filter bar are rendered by different components and do not.\n */\nfunction isAlike(a: Element, b: Element): boolean {\n  if (a.tagName !== b.tagName) return false;\n  const tokensA = new Set(a.classList);\n  const tokensB = new Set(b.classList);\n  if (tokensA.size === 0 && tokensB.size === 0) return true;\n  const shared = [...tokensA].filter((token) => tokensB.has(token)).length;\n  return shared / Math.max(tokensA.size, tokensB.size) >= 0.5;\n}\n\n/**\n * Whether a row-shaped element is one of a REPEATED group — at least one alike, row-shaped sibling: a list, even of two\n * items, and never a strip that is alone of its kind.\n */\nfunction isInRepeatedGroup(element: HTMLElement, paneWidth: number): boolean {\n  const siblings = element.parentElement ? [...element.parentElement.children] : [];\n  return siblings.some((sibling) => sibling !== element && isRowShaped(sibling, paneWidth) && isAlike(sibling, element));\n}\n\n/**\n * The row an element belongs to, recognised by SHAPE: the nearest ancestor inside the pane that is row-high, wide, and\n * one of a repeated group of such siblings. The engine renders no row marker, and its lists are tables, card lists or an\n * application's own rows, so a marker could never cover them all while a shape does. The repeated-group rule keeps a\n * full-width toolbar or header, which is alone of its kind, from passing for a row. `null` outside a pane, or when\n * nothing on the way qualifies (a multi-column card grid, whose cards are narrower than half the pane).\n */\nexport function shellRowBox(target: Element): HTMLElement | null {\n  const pane = target.closest(SHELL_PANE_SELECTOR);\n  if (!pane) return null;\n  const paneWidth = pane.clientWidth;\n  for (let element: Element | null = target; element && element !== pane; element = element.parentElement) {\n    if (isRowShaped(element, paneWidth) && isInRepeatedGroup(element, paneWidth)) return element;\n  }\n  return null;\n}\n\nconst CONTROL_SELECTOR = 'button, a, [role=\"button\"], [role=\"menuitem\"], [role=\"option\"]';\n\ninterface ShellPress {\n  row: ShellPressedBox | null;\n  control: ShellViewportBox;\n  at: number;\n}\n\n/** The last press, as boxes to grow from. Each `take…` CONSUMES it, so one press opens at most one thing. */\nexport interface ShellPressOrigin {\n  /** The row pressed within `maxAgeMs`, if any, with its picture. */\n  takeRow(maxAgeMs: number): ShellPressedBox | null;\n  /** The row pressed within `maxAgeMs`, WITHOUT consuming the press — to decide before taking it. */\n  peekRow(maxAgeMs: number): ShellPressedBox | null;\n  /** The control (button, link, menu item) pressed within `maxAgeMs`, if any. */\n  takeControl(maxAgeMs: number): ShellViewportBox | null;\n}\n\n/**\n * Remembers the last press — a pointer press, or Enter / Space on a focused element — as the box of the row and of the\n * control it happened in, measured AT the press, before anything re-renders (the row may move or unmount the moment what\n * it opens mounts). ANY other key press forgets it: whatever opens next was opened by that key (a shortcut such as the\n * command palette's), not by the earlier press, and must not grow out of it.\n *\n * Installs nothing while `enabled` is false — a layout whose axis never grows from a press pays no listener and no layout\n * read on every press.\n */\nexport function useShellPressOrigin(enabled: boolean): ShellPressOrigin {\n  const last = useRef<ShellPress | null>(null);\n  useEffect(() => {\n    last.current = null;\n    if (!enabled) return undefined;\n    const record = (target: Element | null): void => {\n      if (!target) return;\n      const row = shellRowBox(target);\n      const control = target.closest(CONTROL_SELECTOR) ?? target;\n      last.current = {\n        row: row ? { ...toBox(row.getBoundingClientRect()), picture: pictureOf(row), element: row } : null,\n        control: toBox(control.getBoundingClientRect()),\n        at: performance.now(),\n      };\n    };\n    const onPointer = (event: PointerEvent): void => record(event.target instanceof Element ? event.target : null);\n    const onKey = (event: KeyboardEvent): void => {\n      if (event.key === 'Enter' || event.key === ' ') record(document.activeElement);\n      else last.current = null;\n    };\n    document.addEventListener('pointerdown', onPointer, true);\n    document.addEventListener('keydown', onKey, true);\n    return () => {\n      document.removeEventListener('pointerdown', onPointer, true);\n      document.removeEventListener('keydown', onKey, true);\n    };\n  }, [enabled]);\n  return useMemo<ShellPressOrigin>(() => {\n    const take = <T extends ShellViewportBox>(pick: (press: ShellPress) => T | null, maxAgeMs: number): T | null => {\n      const press = last.current;\n      if (!press || performance.now() - press.at > maxAgeMs) return null;\n      last.current = null;\n      return pick(press);\n    };\n    const peek = (maxAgeMs: number): ShellPressedBox | null => {\n      const press = last.current;\n      return press && performance.now() - press.at <= maxAgeMs ? press.row : null;\n    };\n    return { takeRow: (maxAgeMs) => take((press) => press.row, maxAgeMs), peekRow: peek, takeControl: (maxAgeMs) => take((press) => press.control, maxAgeMs) };\n  }, []);\n}\n\n/**\n * Flies a proxy box from one viewport box to another inside the stage, for `SHELL_PROXY_FLIGHT_SHARE` of the axis's\n * motion, then removes it. A pressed row's picture (`from.picture`) rides in it, fading as it grows. The proxy is the core's own element (`data-shell-proxy`, aria-hidden, no pointer events),\n * painted inline from the theme's tokens so it reads as the surface it becomes.\n *\n * `arriving` — the pane or dialog the proxy stands for — is revealed on the SAME clock: hidden for the flight, then faded\n * in over the rest of the motion, by a script animation that sits above whatever the layout's stylesheet plays on it.\n * Two clocks (a stylesheet hold started at mount, a flight started later) drift apart; one cannot.\n */\nexport function flyShellProxy(stage: HTMLElement, from: ShellPressedBox, to: ShellViewportBox, axis: ShellMotionAxis, arriving?: Element): Promise<void> {\n  const duration = Math.round(axis.durationMs * SHELL_PROXY_FLIGHT_SHARE);\n  if (duration === 0 || typeof HTMLElement.prototype.animate !== 'function') return Promise.resolve();\n  const origin = stage.getBoundingClientRect();\n  const frame = (box: ShellViewportBox, radius: number): Keyframe => ({\n    left: `${box.left - origin.left}px`,\n    top: `${box.top - origin.top}px`,\n    width: `${box.width}px`,\n    height: `${box.height}px`,\n    borderRadius: `${radius}px`,\n  });\n  const proxy = document.createElement('div');\n  proxy.setAttribute(SHELL_PROXY_ATTRIBUTE, '');\n  proxy.setAttribute('aria-hidden', 'true');\n  Object.assign(proxy.style, {\n    position: 'absolute',\n    zIndex: '400',\n    pointerEvents: 'none',\n    boxSizing: 'border-box',\n    background: 'var(--card, var(--background))',\n    border: '1px solid var(--primary, currentColor)',\n    boxShadow: '0 18px 40px -18px rgb(0 0 0 / 0.35)',\n  });\n  Object.assign(proxy.style, frame(from, 10), { overflow: 'hidden' });\n  // The pressed row rides in the proxy, fading as the box grows: the row visibly BECOMES the record.\n  if (from.picture) {\n    Object.assign(from.picture.style, { position: 'absolute', left: '0', top: '0', width: `${from.width}px`, height: `${from.height}px`, margin: '0', pointerEvents: 'none' });\n    proxy.appendChild(from.picture);\n    from.picture.animate([{ opacity: 1 }, { opacity: 0 }], { duration: Math.round(duration * 0.8), easing: 'ease-in', fill: 'forwards' });\n  }\n  stage.appendChild(proxy);\n  if (arriving instanceof HTMLElement && typeof arriving.animate === 'function') {\n    arriving.animate([{ opacity: 0 }, { opacity: 0, offset: SHELL_PROXY_FLIGHT_SHARE }, { opacity: 1 }], { duration: axis.durationMs, easing: 'linear' });\n  }\n  const animation = proxy.animate([frame(from, 10), frame(to, 14)], { duration, easing: axis.easing, fill: 'forwards' });\n  return animation.finished.catch(() => undefined).then(() => proxy.remove());\n}\n\n/**\n * An emphasized pane grows from the box it had (`before`, in stage coordinates) to the box it now fills: it is\n * REVEALED through a clip that starts on the old box, so its content is never scaled or distorted on the way.\n */\nexport function growShellPane(pane: HTMLElement, before: ShellStageRect, stage: HTMLElement, axis: ShellMotionAxis): void {\n  if (axis.durationMs === 0 || typeof pane.animate !== 'function') return;\n  const origin = stage.getBoundingClientRect();\n  const after = pane.getBoundingClientRect();\n  const top = Math.max(0, origin.top + before.top - after.top);\n  const left = Math.max(0, origin.left + before.left - after.left);\n  const right = Math.max(0, after.right - (origin.left + before.left + before.width));\n  const bottom = Math.max(0, after.bottom - (origin.top + before.top + before.height));\n  pane.animate([{ clipPath: `inset(${top}px ${right}px ${bottom}px ${left}px round 12px)` }, { clipPath: 'inset(0px 0px 0px 0px round 0px)' }], {\n    duration: axis.durationMs,\n    easing: axis.easing,\n  });\n}\n\n/** A pane given back its place slides home from where it stood while it had the width. */\nexport function slideShellPaneHome(pane: HTMLElement, before: ShellStageRect, stage: HTMLElement, axis: ShellMotionAxis): void {\n  if (axis.durationMs === 0 || typeof pane.animate !== 'function') return;\n  const origin = stage.getBoundingClientRect();\n  const dx = origin.left + before.left - pane.getBoundingClientRect().left;\n  if (Math.abs(dx) < 2) return;\n  pane.animate([{ transform: `translateX(${dx}px)` }, { transform: 'none' }], { duration: axis.durationMs, easing: axis.easing });\n}\n\n/**\n * The rows of a pane: the largest group of ALIKE, row-shaped siblings in it (at least two — a list of two items is a\n * list — and most of their parent's children, so neither a toolbar of wide buttons nor a pane's own header strips pass\n * for a list).\n */\nexport function shellPaneRows(pane: HTMLElement): HTMLElement[] {\n  const width = pane.clientWidth;\n  let best: HTMLElement[] = [];\n  for (const parent of [pane, ...pane.querySelectorAll<HTMLElement>('*')]) {\n    if (parent.children.length < 2 || parent.children.length <= best.length) continue;\n    const shaped = [...parent.children].filter((child): child is HTMLElement => isRowShaped(child, width));\n    // The rows are the largest ALIKE subset of the row-shaped children (a list's header row is not one of them). Each\n    // child joins the first group whose first member it is alike to: linear in the children, not quadratic.\n    const groups: HTMLElement[][] = [];\n    for (const child of shaped) {\n      const group = groups.find((candidate) => isAlike(candidate[0]!, child));\n      if (group) group.push(child);\n      else groups.push([child]);\n    }\n    const rows = groups.reduce<HTMLElement[]>((largest, group) => (group.length > largest.length ? group : largest), []);\n    if (rows.length >= 2 && rows.length > best.length && rows.length >= parent.children.length * 0.6) best = rows;\n  }\n  return best;\n}\n\n/**\n * Cascades a pane's rows in, one after another. Rows present now cascade at once. For `CASCADE_WATCH_MS` afterwards\n * the pane is re-scanned after mutations — at most once per frame, in an animation-frame callback, which runs before\n * that frame is painted — and rows not yet animated join the cascade. So rows that arrive with the data (after a loading\n * skeleton, in a different container) cascade too, and a row never shows and then vanishes to start its entrance.\n * Watching the WHOLE pane, not the first list found, is deliberate: the first list is often the skeleton.\n */\nexport function cascadeShellRows(pane: HTMLElement, axis: ShellMotionAxis): () => void {\n  if (axis.durationMs === 0 || typeof pane.animate !== 'function') return () => undefined;\n  const animated = new WeakSet<Element>();\n  let staggerIndex = 0;\n  const run = (): void => {\n    scan = 0;\n    for (const row of shellPaneRows(pane).slice(0, CASCADE_MAX_ROWS)) {\n      if (animated.has(row)) continue;\n      animated.add(row);\n      row.animate([{ opacity: 0, transform: 'translateY(12px) scale(0.98)' }, { opacity: 1, transform: 'none' }], {\n        duration: Math.round(axis.durationMs * 0.8),\n        easing: axis.easing,\n        delay: Math.min(staggerIndex, CASCADE_MAX_ROWS) * CASCADE_STAGGER_MS,\n        fill: 'backwards',\n      });\n      staggerIndex += 1;\n    }\n  };\n  let scan = 0;\n  run();\n  // A new batch staggers from its own first row, not after the rows already shown.\n  const watch = new MutationObserver(() => {\n    if (scan) return;\n    staggerIndex = 0;\n    scan = requestAnimationFrame(run);\n  });\n  watch.observe(pane, { childList: true, subtree: true });\n  const stop = setTimeout(() => { cancelAnimationFrame(scan); watch.disconnect(); }, CASCADE_WATCH_MS);\n  return () => {\n    clearTimeout(stop);\n    cancelAnimationFrame(scan);\n    watch.disconnect();\n  };\n}\n\n/**\n * A modal popup grows out of the control that opened it, for an axis whose `dialogArrival` says so: when a modal content\n * slot appears open in the stage's overlay layer, a proxy flies from the pressed control to the dialog's box, and the\n * dialog is revealed on the flight's clock. Only the overlay layer is watched. A drawer is left alone: its library\n * positions it with transforms of its own.\n */\nexport function useShellDialogArrival(rootRef: RefObject<HTMLElement | null>, axis: ShellMotionAxis, origin: ShellPressOrigin): void {\n  useEffect(() => {\n    const layer = rootRef.current?.querySelector('[data-shell-overlay-layer]');\n    const stage = rootRef.current;\n    if (!stage || !layer || axis.dialogArrival !== ShellDialogArrival.FROM_PRESSED_ELEMENT || axis.durationMs === 0) return undefined;\n    const seen = new WeakSet<Element>();\n    const openModal = SHELL_MODAL_POPUP_SLOTS.filter((slot) => slot !== ShellPopupSlot.DRAWER)\n      .map((slot) => `[data-slot=\"${slot}\"][data-state=\"open\"]`)\n      .join(', ');\n    const check = (): void => {\n      for (const dialog of layer.querySelectorAll(openModal)) {\n        if (seen.has(dialog)) continue;\n        seen.add(dialog);\n        const from = origin.takeControl(SHELL_PRESS_ORIGIN_MAX_AGE_MS);\n        if (from) void flyShellProxy(stage, from, toBox(dialog.getBoundingClientRect()), axis, dialog);\n      }\n    };\n    const observer = new MutationObserver(check);\n    observer.observe(layer, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-state'] });\n    return () => observer.disconnect();\n  }, [rootRef, axis, origin]);\n}\n"]}

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

@@ -0,0 +1,217 @@
+import { ShellRegion } from '@wildo-ai/presets-components-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 declare enum ShellPlaceChange {
+    /** The zone held nothing and now holds a place: a pane opened. */
+    APPEARED = "appeared",
+    /** The zone showed one place and now shows another, in the same pane. */
+    CHANGED = "changed"
+}
+/** Where a ghost — the picture of a pane that was dismissed or hidden — stands. */
+export declare enum ShellGhostPose {
+    /** Where the pane stood: a ghost starts here, and a picture left behind returns here before it goes. */
+    REST = "rest",
+    /** Stepped back behind an expanded pane, dimmed: the picture of a pane the expansion hid. */
+    BEHIND = "behind",
+    /** Gone: where a dismissed pane flies to as it fades. */
+    DISCARDED = "discarded"
+}
+/** What a dip — a brief move away and back — acknowledges. */
+export declare enum ShellMotionDip {
+    /** A pane's content changed in place (the same zone shows another place). */
+    PANE_SWAP = "pane-swap",
+    /** A side column (the sidebar or a utility panel) changed width, and the panes re-arranged. */
+    COLUMN_RESIZE = "column-resize"
+}
+/** How a side pane arrives when it opens. */
+export declare enum ShellPaneArrival {
+    /** The layout's stylesheet animates the pane as it mounts (a keyframe on the pane). */
+    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`).
+     */
+    FROM_PRESSED_ELEMENT = "from-pressed-element"
+}
+/** How a pane changes size when it is emphasized (takes the width) or given back its place. */
+export declare enum ShellPaneResize {
+    /** At once, as the engine lays it out. */
+    INSTANT = "instant",
+    /** The emphasized pane grows from the box it had to the width it takes; given back its place, it slides home. */
+    GROW = "grow"
+}
+/** How a modal popup (a dialog, a sheet) arrives. */
+export declare enum ShellDialogArrival {
+    /** The layout's stylesheet animates it (a keyframe on its content slot). */
+    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.
+     */
+    FROM_PRESSED_ELEMENT = "from-pressed-element"
+}
+/**
+ * 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 declare 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 declare const SHELL_PROXY_ATTRIBUTE = "data-shell-proxy";
+/** An element's laid-out box in the stage (untransformed), as last measured. */
+export interface ShellStageRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Which way a layout moves things. The building blocks decide WHEN something moves and WHAT; the axis decides only
+ * the pose it moves to. A layout builds one from its settings and memoizes it: the hooks re-arm when it changes.
+ */
+export interface ShellMotionAxis {
+    /** How long every motion lasts, in milliseconds. `0` turns the motion building blocks off (reduced motion). */
+    durationMs: number;
+    /** The timing function of the dips (a CSS easing). */
+    easing: string;
+    /**
+     * Whether a pane an expansion hides leaves a still picture of itself behind the expanded pane. Only an axis whose
+     * panes are SEEN THROUGH should say yes (the focal plane's glass windows). Where panes paint nothing of their own
+     * — a 2D shell under a CONTINUOUS theme — the picture shows through the expanded pane and its text overlaps the
+     * expanded pane's text (measured on the glide layout, 2026-09-30).
+     */
+    drawsHiddenPanePicture: boolean;
+    /** How a side pane arrives (`ShellPaneArrival`). */
+    paneArrival: ShellPaneArrival;
+    /**
+     * With `FROM_PRESSED_ELEMENT`: carry the arrival out as a browser VIEW TRANSITION where the browser has one
+     * (`document.startViewTransition`) — the navigation's commit runs inside it, and the browser morphs the pressed row
+     * into the pane from pictures of the screen before and after. Where it has none, or nothing was pressed, the proxy
+     * flies as usual, so the arrival never depends on it. Absent means no. Evaluated on #2055.
+     */
+    paneArrivalByViewTransition?: boolean;
+    /** How an emphasized pane changes size (`ShellPaneResize`). */
+    paneResize: ShellPaneResize;
+    /** How a modal popup arrives (`ShellDialogArrival`). */
+    dialogArrival: ShellDialogArrival;
+    /**
+     * Whether the rows of a pane cascade in when the pane opens or shows another place. Rows are recognised by shape
+     * (the largest group of wide, row-high siblings in the pane), so it holds for tables, card lists and custom rows.
+     */
+    cascadesRows: boolean;
+    /**
+     * The style properties a ghost takes at a pose — standard or custom properties, kebab-case (`transform`,
+     * `--fp-z`). Opacity is not the axis's: a ghost always fades as it goes and appears as it steps back. The layout's
+     * stylesheet transitions these properties on `[data-shell-ghost]`.
+     */
+    ghostPose(pose: ShellGhostPose, placement: {
+        rect: ShellStageRect;
+        stage: HTMLElement;
+    }): Readonly<Record<string, string>>;
+    /**
+     * The peak keyframe of a dip. The first and last keyframes are implicit: the element leaves and returns to its rest.
+     * `stage` is the layout's stage, for a dip that travels sideways and must mirror right to left.
+     */
+    dipPeak(dip: ShellMotionDip, placement: {
+        stage: HTMLElement;
+    }): Keyframe;
+}
+/**
+ * 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 declare 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 declare const SHELL_GHOST_LAYER_ATTRIBUTE = "data-shell-ghost-layer";
+/** The attribute every ghost carries, with its kind (`ShellGhostKind`). */
+export declare const SHELL_GHOST_ATTRIBUTE = "data-shell-ghost";
+/** The two kinds of ghost. */
+export declare enum ShellGhostKind {
+    /** A dismissed side pane, flying away. */
+    DISCARDED = "discarded",
+    /** A still image of a pane an expansion hid. */
+    BEHIND = "behind"
+}
+/** The two ghost layers. */
+export declare enum ShellGhostLayer {
+    BACK = "back",
+    FRONT = "front"
+}
+/**
+ * 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 declare function shellRegionSelector(region: ShellRegion): string;
+/**
+ * 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 declare const SHELL_PANE_SELECTOR: string;
+/** The pane of one zone, in either branch (a plain selector list: `:not()` nested in `:is()` is beyond some engines). */
+export declare function shellPaneSelectorForZone(zone: string): string;
+/** The zone a pane element shows, read from the engine's markers; `undefined` for anything else. */
+export declare function shellPaneZone(element: Element): string | undefined;
+/** Whether a pane shows a SIDE zone — the only kind a person dismisses (the primary pane leaves only on a remount). */
+export declare function isShellSidePane(element: Element): boolean;
+/** Whether a zone is a SIDE zone (secondary, companion): the panes that open beside the list. */
+export declare function isShellSideZone(zone: string): boolean;
+/**
+ * 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 declare enum ShellPopupSlot {
+    DROPDOWN_MENU = "dropdown-menu-content",
+    DROPDOWN_MENU_SUB = "dropdown-menu-sub-content",
+    CONTEXT_MENU = "context-menu-content",
+    CONTEXT_MENU_SUB = "context-menu-sub-content",
+    POPOVER = "popover-content",
+    HOVER_CARD = "hover-card-content",
+    TOOLTIP = "tooltip-content",
+    SELECT = "select-content",
+    MENUBAR = "menubar-content",
+    MENUBAR_SUB = "menubar-sub-content",
+    DIALOG = "dialog-content",
+    ALERT_DIALOG = "alert-dialog-content",
+    SHEET = "sheet-content",
+    DRAWER = "drawer-content"
+}
+/**
+ * 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 declare const SHELL_ANCHORED_POPUP_ORIGINS: Readonly<Partial<Record<ShellPopupSlot, string>>>;
+/** The centred dialogs: no trigger origin, they open over the whole shell. */
+export declare const SHELL_CENTRED_POPUP_SLOTS: readonly ShellPopupSlot[];
+/**
+ * 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 declare const SHELL_MODAL_POPUP_SLOTS: readonly ShellPopupSlot[];
+/** The `data-state` values of an OPEN popup. A tooltip is never `open`: Radix writes `delayed-open` or `instant-open`. */
+export declare const SHELL_POPUP_OPEN_STATES: readonly string[];
+/**
+ * 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 declare function shellModalOpenClause(): string;
+/** @wildo_source:part:end saas.frontend.app-shell.shell-motion-contract */
+//# sourceMappingURL=shell-motion-vocabulary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shell-motion-vocabulary.d.ts","sourceRoot":"","sources":["../../../../../../src/core/app-shell/shell-motion/shell-motion-vocabulary.ts"],"names":[],"mappings":"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"}