@evinvest/uikit 0.24.0 → 0.26.0

package/dist/primitives/focus-scope.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/focus-scope.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// `tabindex=\"-1\"` opts an element out of Tab order whatever its tag, so the\n// exclusion goes on every branch — otherwise a roving-tabindex grid's parked\n// cells would count as tab stops.\nconst FOCUSABLE = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"[tabindex]\",\n]\n  .map(sel => `${sel}:not([tabindex=\"-1\"])`)\n  .join(\",\");\n\n/**\n * Every enabled, Tab-reachable candidate under `root` in DOM (= Tab) order,\n * before the layout-based visibility filter; `tabindex=\"-1\"` is skipped on any\n * tag. For content that is fully visible while it exists (a popover), this is\n * the tab order itself. Internal to the kit.\n */\nexport function focusCandidates(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE));\n}\n\nfunction focusable(root: HTMLElement): HTMLElement[] {\n  return focusCandidates(root).filter(\n    (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement,\n  );\n}\n\n/**\n * Traps Tab focus inside the returned ref's subtree and restores focus to the\n * previously-focused element on unmount — the dep-light core of dialogs/menus,\n * replacing `@radix-ui/react-focus-scope`. On mount, focuses the first\n * focusable (or the container itself).\n *\n * Rust dialogs rely on the browser's native focus order within a fixed overlay;\n * see the README \"Limitations\".\n */\nexport function useFocusScope(enabled: boolean): React.RefObject<HTMLDivElement | null> {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    const root = ref.current;\n    if (!root) return;\n\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    const first = focusable(root)[0];\n    (first ?? root).focus();\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key !== \"Tab\" || !root) return;\n      const items = focusable(root);\n      if (items.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const firstEl = items[0]!;\n      const lastEl = items[items.length - 1]!;\n      const active = document.activeElement;\n      if (event.shiftKey && active === firstEl) {\n        event.preventDefault();\n        lastEl.focus();\n      } else if (!event.shiftKey && active === lastEl) {\n        event.preventDefault();\n        firstEl.focus();\n      }\n    }\n\n    root.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      root.removeEventListener(\"keydown\", onKeyDown);\n      previouslyFocused?.focus?.();\n    };\n  }, [enabled]);\n\n  return ref;\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAKvB,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EACG,IAAI,SAAO,GAAG,GAAG,uBAAuB,EACxC,KAAK,GAAG;AAQJ,SAAS,gBAAgB,MAAkC;AAChE,SAAO,MAAM,KAAK,KAAK,iBAA8B,SAAS,CAAC;AACjE;AAEA,SAAS,UAAU,MAAkC;AACnD,SAAO,gBAAgB,IAAI,EAAE;AAAA,IAC3B,CAAC,OAAO,GAAG,cAAc,KAAK,GAAG,eAAe,KAAK,OAAO,SAAS;AAAA,EACvE;AACF;AAWO,SAAS,cAAc,SAA0D;AACtF,QAAM,MAAM,MAAM,OAA8B,IAAI;AAEpD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AAEX,UAAM,oBAAoB,SAAS;AACnC,UAAM,QAAQ,UAAU,IAAI,EAAE,CAAC;AAC/B,KAAC,SAAS,MAAM,MAAM;AAEtB,aAAS,UAAU,OAAsB;AACvC,UAAI,MAAM,QAAQ,SAAS,CAAC,KAAM;AAClC,YAAM,QAAQ,UAAU,IAAI;AAC5B,UAAI,MAAM,WAAW,GAAG;AACtB,cAAM,eAAe;AACrB;AAAA,MACF;AACA,YAAM,UAAU,MAAM,CAAC;AACvB,YAAM,SAAS,MAAM,MAAM,SAAS,CAAC;AACrC,YAAM,SAAS,SAAS;AACxB,UAAI,MAAM,YAAY,WAAW,SAAS;AACxC,cAAM,eAAe;AACrB,eAAO,MAAM;AAAA,MACf,WAAW,CAAC,MAAM,YAAY,WAAW,QAAQ;AAC/C,cAAM,eAAe;AACrB,gBAAQ,MAAM;AAAA,MAChB;AAAA,IACF;AAEA,SAAK,iBAAiB,WAAW,SAAS;AAC1C,WAAO,MAAM;AACX,WAAK,oBAAoB,WAAW,SAAS;AAC7C,yBAAmB,QAAQ;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/primitives/focus-scope.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// `tabindex=\"-1\"` opts an element out of Tab order whatever its tag, so the\n// exclusion goes on every branch — otherwise a roving-tabindex grid's parked\n// cells would count as tab stops.\nconst FOCUSABLE = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"[tabindex]\",\n]\n  .map(sel => `${sel}:not([tabindex=\"-1\"])`)\n  .join(\",\");\n\n/**\n * Every enabled, Tab-reachable candidate under `root` in DOM (= Tab) order,\n * before the layout-based visibility filter; `tabindex=\"-1\"` is skipped on any\n * tag. For content that is fully visible while it exists (a popover), this is\n * the tab order itself. Internal to the kit.\n */\nexport function focusCandidates(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE));\n}\n\nfunction focusable(root: HTMLElement): HTMLElement[] {\n  return focusCandidates(root).filter(\n    (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement,\n  );\n}\n\n/**\n * Where focus lands when the scope opens. `first` is the first Tab stop inside\n * (an input, an alert dialog's least destructive action); `container` is the\n * scope root itself, so a reader starts at the top and the first Tab reaches the\n * first control — right for a panel of content, where the first stop may be an\n * action one keypress away from firing.\n */\nexport type InitialFocus = \"first\" | \"container\";\n\nexport interface FocusScopeOptions {\n  /** Default `first`; falls back to the container when nothing inside is focusable. */\n  initialFocus?: InitialFocus;\n  /**\n   * Where focus goes back on close when the element focused before opening is\n   * no use: `<body>` (Safari does not focus a clicked button), or detached (the\n   * opener was re-rendered away). Pass the overlay's trigger.\n   */\n  returnFocusTo?: React.RefObject<HTMLElement | null>;\n}\n\nfunction usable(el: HTMLElement | null | undefined): el is HTMLElement {\n  return !!el && el !== document.body && el.isConnected;\n}\n\n// A `<div>` without a tabindex ignores `.focus()`, so a scope with no Tab stops\n// used to leave focus on the trigger behind the scrim. `-1` makes the root\n// focusable by script (and by a click on its empty area, which keeps focus in\n// the scope) without adding it to the Tab order.\nfunction focusRoot(root: HTMLElement) {\n  if (!root.hasAttribute(\"tabindex\")) root.tabIndex = -1;\n  root.focus();\n}\n\n/**\n * Traps Tab focus inside the returned ref's subtree and restores focus to the\n * previously-focused element on unmount — the dep-light core of dialogs/menus,\n * replacing `@radix-ui/react-focus-scope`. On mount, focuses per\n * `initialFocus`; the root gets `tabindex=\"-1\"` whenever it is the target.\n *\n * Rust dialogs rely on the browser's native focus order within a fixed overlay;\n * see the README \"Limitations\".\n */\nexport function useFocusScope(\n  enabled: boolean,\n  { initialFocus = \"first\", returnFocusTo }: FocusScopeOptions = {},\n): React.RefObject<HTMLDivElement | null> {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  // Read at close, not captured at open: a trigger re-rendered while the\n  // overlay was up is a new node by then.\n  const fallbackRef = React.useRef(returnFocusTo);\n  fallbackRef.current = returnFocusTo;\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    const root = ref.current;\n    if (!root) return;\n\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    const first = initialFocus === \"first\" ? focusable(root)[0] : undefined;\n    if (first) first.focus();\n    else focusRoot(root);\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key !== \"Tab\" || !root) return;\n      const items = focusable(root);\n      if (items.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const firstEl = items[0]!;\n      const lastEl = items[items.length - 1]!;\n      const active = document.activeElement;\n      // From the root itself Shift+Tab would leave the scope for whatever\n      // precedes the portal, so both directions are steered explicitly.\n      if (active === root) {\n        event.preventDefault();\n        (event.shiftKey ? lastEl : firstEl).focus();\n      } else if (event.shiftKey && active === firstEl) {\n        event.preventDefault();\n        lastEl.focus();\n      } else if (!event.shiftKey && active === lastEl) {\n        event.preventDefault();\n        firstEl.focus();\n      }\n    }\n\n    root.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      root.removeEventListener(\"keydown\", onKeyDown);\n      // Focus that already left the scope (a click outside landed on a field)\n      // is the user's; only focus still inside, or dropped to <body>, returns.\n      const active = document.activeElement;\n      if (active && active !== document.body && !root.contains(active)) return;\n      const target = usable(previouslyFocused) ? previouslyFocused : fallbackRef.current?.current;\n      if (usable(target)) target.focus({ preventScroll: true });\n    };\n  }, [enabled, initialFocus]);\n\n  return ref;\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAKvB,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EACG,IAAI,SAAO,GAAG,GAAG,uBAAuB,EACxC,KAAK,GAAG;AAQJ,SAAS,gBAAgB,MAAkC;AAChE,SAAO,MAAM,KAAK,KAAK,iBAA8B,SAAS,CAAC;AACjE;AAEA,SAAS,UAAU,MAAkC;AACnD,SAAO,gBAAgB,IAAI,EAAE;AAAA,IAC3B,CAAC,OAAO,GAAG,cAAc,KAAK,GAAG,eAAe,KAAK,OAAO,SAAS;AAAA,EACvE;AACF;AAsBA,SAAS,OAAO,IAAuD;AACrE,SAAO,CAAC,CAAC,MAAM,OAAO,SAAS,QAAQ,GAAG;AAC5C;AAMA,SAAS,UAAU,MAAmB;AACpC,MAAI,CAAC,KAAK,aAAa,UAAU,EAAG,MAAK,WAAW;AACpD,OAAK,MAAM;AACb;AAWO,SAAS,cACd,SACA,EAAE,eAAe,SAAS,cAAc,IAAuB,CAAC,GACxB;AACxC,QAAM,MAAM,MAAM,OAA8B,IAAI;AAGpD,QAAM,cAAc,MAAM,OAAO,aAAa;AAC9C,cAAY,UAAU;AAEtB,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AAEX,UAAM,oBAAoB,SAAS;AACnC,UAAM,QAAQ,iBAAiB,UAAU,UAAU,IAAI,EAAE,CAAC,IAAI;AAC9D,QAAI,MAAO,OAAM,MAAM;AAAA,QAClB,WAAU,IAAI;AAEnB,aAAS,UAAU,OAAsB;AACvC,UAAI,MAAM,QAAQ,SAAS,CAAC,KAAM;AAClC,YAAM,QAAQ,UAAU,IAAI;AAC5B,UAAI,MAAM,WAAW,GAAG;AACtB,cAAM,eAAe;AACrB;AAAA,MACF;AACA,YAAM,UAAU,MAAM,CAAC;AACvB,YAAM,SAAS,MAAM,MAAM,SAAS,CAAC;AACrC,YAAM,SAAS,SAAS;AAGxB,UAAI,WAAW,MAAM;AACnB,cAAM,eAAe;AACrB,SAAC,MAAM,WAAW,SAAS,SAAS,MAAM;AAAA,MAC5C,WAAW,MAAM,YAAY,WAAW,SAAS;AAC/C,cAAM,eAAe;AACrB,eAAO,MAAM;AAAA,MACf,WAAW,CAAC,MAAM,YAAY,WAAW,QAAQ;AAC/C,cAAM,eAAe;AACrB,gBAAQ,MAAM;AAAA,MAChB;AAAA,IACF;AAEA,SAAK,iBAAiB,WAAW,SAAS;AAC1C,WAAO,MAAM;AACX,WAAK,oBAAoB,WAAW,SAAS;AAG7C,YAAM,SAAS,SAAS;AACxB,UAAI,UAAU,WAAW,SAAS,QAAQ,CAAC,KAAK,SAAS,MAAM,EAAG;AAClE,YAAM,SAAS,OAAO,iBAAiB,IAAI,oBAAoB,YAAY,SAAS;AACpF,UAAI,OAAO,MAAM,EAAG,QAAO,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,SAAS,YAAY,CAAC;AAE1B,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/uikit",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {

package/styles/theme.css

@@ -1,6 +1,8 @@
 /* AUTO-GENERATED by `nix run .#gen` from the repo-root theme.css — do not edit. */
 /*
- * Toast (sonner) and Drawer enter/exit motion, shared by both ports. Imported by the token
+ * Toast (sonner) and Drawer enter/exit motion, the reduced-motion fade for Sheet and
+ * the dialogs, the entrances (rise / stagger / settled / skeleton) and the app-shell
+ * markers, shared by both ports. Imported by the token
  * sheets so the lifecycle ships with the theme contract.
  */
 
@@ -306,6 +308,163 @@
   }
 }
 
+/* ── Sheet and dialogs under reduced motion ──────────────────────────────────
+   Both ports animate these with tw-animate-css (`animate-in` / `animate-out` +
+   `slide-*` / `zoom-*`), whose `enter` / `exit` keyframes read the
+   --tw-enter-* / --tw-exit-* variables the slide and zoom utilities set. Zeroing
+   the travel and the scale here leaves a fade: the dialogs already fade, the
+   sheet does not, so its opacity is set too. The keyframes still run on their
+   usual clock, so the TS port's exit `animationend` unmount is untouched.
+   Unlayered, like the rest of this sheet, so it outranks those utilities
+   without !important. */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="sheet-content"],
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"] {
+    --tw-enter-translate-x: 0;
+    --tw-enter-translate-y: 0;
+    --tw-exit-translate-x: 0;
+    --tw-exit-translate-y: 0;
+    --tw-enter-scale: 1;
+    --tw-exit-scale: 1;
+    --tw-enter-opacity: 0;
+    --tw-exit-opacity: 0;
+  }
+}
+
+/* ── Entrances: rise, stagger, settled, skeleton ─────────────────────────────
+   One keyframe for every "arriving" thing, driven by attributes so a consumer
+   without a motion library (and a Server Component) gets it for free:
+
+     data-enter="rise"       the element fades in and rises --ev-rise, once, on
+                             insertion; --enter-delay postpones it.
+     data-enter="stagger"    each direct child does the same, one --enter-step
+                             (default --ev-stagger) after the previous. The index
+                             comes from nth-child; set --enter-index inline to
+                             override it. Capped at 12 — past that the tail is
+                             still arriving after the head has been read.
+     [data-slot="settled"][data-state="revealed"]
+                             a skeleton → content handover (uikit <Settled>).
+
+   It animates the independent `translate` property, not `transform`, so it
+   composes with any transform the element already has. `backwards` holds the
+   start frame through the delay and then lets go, so nothing about the element
+   (stacking, containing block for `fixed` children) lingers after it lands.
+   Reduced motion keeps the fade and drops the travel. */
+@keyframes ev-enter-rise {
+  from {
+    opacity: 0;
+    translate: 0 var(--ev-rise, 8px);
+  }
+}
+[data-enter="rise"],
+[data-enter="stagger"] > *,
+[data-slot="settled"][data-state="revealed"] {
+  animation: ev-enter-rise var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out)
+    var(--enter-delay, 0ms) backwards;
+}
+[data-enter="stagger"] > * {
+  animation-delay: calc(
+    var(--enter-delay, 0ms) + var(--enter-index, 0) * var(--enter-step, var(--ev-stagger, 35ms))
+  );
+}
+[data-enter="stagger"] > :nth-child(2) { --enter-index: 1; }
+[data-enter="stagger"] > :nth-child(3) { --enter-index: 2; }
+[data-enter="stagger"] > :nth-child(4) { --enter-index: 3; }
+[data-enter="stagger"] > :nth-child(5) { --enter-index: 4; }
+[data-enter="stagger"] > :nth-child(6) { --enter-index: 5; }
+[data-enter="stagger"] > :nth-child(7) { --enter-index: 6; }
+[data-enter="stagger"] > :nth-child(8) { --enter-index: 7; }
+[data-enter="stagger"] > :nth-child(9) { --enter-index: 8; }
+[data-enter="stagger"] > :nth-child(10) { --enter-index: 9; }
+[data-enter="stagger"] > :nth-child(11) { --enter-index: 10; }
+[data-enter="stagger"] > :nth-child(n + 12) { --enter-index: 11; }
+
+/* Every skeleton fades in before it starts to pulse. Keyed on the pulse class as
+   well as the slot: a running animation beats a transition on the same property,
+   so the entrance has to be the first of two animations rather than anything
+   layered beside `animate-pulse` — and a caller's `animate-none` (which `cn`
+   merges over the pulse) removes the class and with it this rule. Reduced motion
+   keeps the pulse, the signal that work is in flight, and drops the entrance. */
+@keyframes ev-skeleton-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes ev-skeleton-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+[data-slot="skeleton"].animate-pulse {
+  animation:
+    ev-skeleton-in 200ms var(--ev-ease-out, ease-out),
+    ev-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 200ms infinite;
+}
+
+/* ── App shell: the rail's active-row marker and the tab bar's rule ──────────
+   ShellNav: one marker node per nav section, placed on the [aria-current] row by
+   measurement and moved by a `transform` transition — on the compositor, so it
+   keeps its frames while the main thread renders the page just navigated to (a
+   JS layout projection here dropped exactly those). Until the first placement
+   (SSR, every frame to hydration) the marker has no position: it stays hidden
+   and the marked row carries the fill itself, so the first paint is right.
+   `data-placed` flips both at once; `entered` is a marker that mounted into a
+   section already on screen (a move across sections — a fade), `first` one that
+   arrived with its section (a cut: fading under a row whose own fill fades out
+   would dip). */
+@keyframes ev-shell-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+[data-slot="shell-nav-marker"] {
+  transition: transform var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="shell-nav-marker"]:not([data-placed]) {
+  visibility: hidden;
+}
+[data-slot="shell-nav-marker"][data-placed="entered"] {
+  animation: ev-shell-fade-in var(--ev-dur-fast, 180ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="shell-nav-marker"]:not([data-placed]) ~ * [aria-current="page"] {
+  background-color: var(--primary);
+}
+
+/* BottomTabBar: one rule for the whole bar, mounted once and translated by
+   whole tab widths (it is exactly one tab wide, so the two cannot drift). A
+   route no tab claims fades it out where it stands, and coming back fades it in
+   already in place. */
+[data-slot="tab-bar-marker"] {
+  transition:
+    translate var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out),
+    opacity var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="tab-bar-marker"][data-state="idle"] {
+  opacity: 0;
+}
+
+@keyframes ev-enter-fade {
+  from {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-enter="rise"],
+  [data-enter="stagger"] > *,
+  [data-slot="settled"][data-state="revealed"] {
+    animation-name: ev-enter-fade;
+  }
+  [data-slot="skeleton"].animate-pulse {
+    animation: ev-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+  [data-slot="shell-nav-marker"],
+  [data-slot="tab-bar-marker"] {
+    transition: none;
+    animation: none;
+  }
+}
+
 /* ═══ CONTRACT ═══════════════════════════════════════════════════ */
 
 @theme inline {
@@ -428,6 +587,26 @@
 
   --sidebar-width: 14rem;
 
+  /* app shell (uikit <AppShell> / <ShellNav> / <BottomTabBar>) */
+  --shell-rail-w: 15.5rem; /* 248px */
+  --shell-tab-bar-h: 4rem; /* 64px, before the bottom safe area */
+
+  /* ── motion ──────────────────────────────────────────────────── *
+   * One place to retune the feel of every animation the kit ships (motion.css
+   * reads these) and every one a consumer writes against them:
+   * `ease-(--ev-ease-out) duration-(--ev-dur-base)`. Quiet on purpose — short,
+   * small travel: motion here says what changed, it never decorates. */
+  --ev-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* every entrance */
+  --ev-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* state that reverses */
+  --ev-dur-fast: 180ms;
+  --ev-dur-base: 280ms;
+  --ev-dur-slow: 400ms;
+  --ev-rise: 8px; /* how far an entrance travels */
+  --ev-stagger: 35ms; /* between rows of a list */
+  /* between the sections of a page: cards, not rows — at 35ms six of them read
+     as one block twitching; at 50ms the last lands ~0.55s in, still "opening" */
+  --ev-stagger-section: 50ms;
+
   /* page container — responsive gutter + max width (uikit <Container>) */
   --page-max: 90rem; /* 1440px */
   --page-px: 1rem; /* 16px — mobile gutter, scales up below */

package/styles/tokens.css

@@ -21,7 +21,8 @@
  *              accent-trace · accent-debug · accent-info · accent-warn · accent-error
  *              primary-ink — the primary role as ink on a surface, where the
  *              fill and the readable value are different colours
- *   SCALARS    radius · control-* · display-scale · page-* · shadows · fonts
+ *   SCALARS    radius · control-* · display-scale · page-* · shell-* · shadows · fonts
+ *   MOTION     ev-ease-* · ev-dur-* · ev-rise · ev-stagger(-section)
  *   CHARTS     chart-1 … chart-5
  *   MARK       brand-mark · brand-aspect       — supplied, never defined here
  *
@@ -40,7 +41,9 @@
  */
 
 /*
- * Toast (sonner) and Drawer enter/exit motion, shared by both ports. Imported by the token
+ * Toast (sonner) and Drawer enter/exit motion, the reduced-motion fade for Sheet and
+ * the dialogs, the entrances (rise / stagger / settled / skeleton) and the app-shell
+ * markers, shared by both ports. Imported by the token
  * sheets so the lifecycle ships with the theme contract.
  */
 
@@ -346,6 +349,163 @@
   }
 }
 
+/* ── Sheet and dialogs under reduced motion ──────────────────────────────────
+   Both ports animate these with tw-animate-css (`animate-in` / `animate-out` +
+   `slide-*` / `zoom-*`), whose `enter` / `exit` keyframes read the
+   --tw-enter-* / --tw-exit-* variables the slide and zoom utilities set. Zeroing
+   the travel and the scale here leaves a fade: the dialogs already fade, the
+   sheet does not, so its opacity is set too. The keyframes still run on their
+   usual clock, so the TS port's exit `animationend` unmount is untouched.
+   Unlayered, like the rest of this sheet, so it outranks those utilities
+   without !important. */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="sheet-content"],
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"] {
+    --tw-enter-translate-x: 0;
+    --tw-enter-translate-y: 0;
+    --tw-exit-translate-x: 0;
+    --tw-exit-translate-y: 0;
+    --tw-enter-scale: 1;
+    --tw-exit-scale: 1;
+    --tw-enter-opacity: 0;
+    --tw-exit-opacity: 0;
+  }
+}
+
+/* ── Entrances: rise, stagger, settled, skeleton ─────────────────────────────
+   One keyframe for every "arriving" thing, driven by attributes so a consumer
+   without a motion library (and a Server Component) gets it for free:
+
+     data-enter="rise"       the element fades in and rises --ev-rise, once, on
+                             insertion; --enter-delay postpones it.
+     data-enter="stagger"    each direct child does the same, one --enter-step
+                             (default --ev-stagger) after the previous. The index
+                             comes from nth-child; set --enter-index inline to
+                             override it. Capped at 12 — past that the tail is
+                             still arriving after the head has been read.
+     [data-slot="settled"][data-state="revealed"]
+                             a skeleton → content handover (uikit <Settled>).
+
+   It animates the independent `translate` property, not `transform`, so it
+   composes with any transform the element already has. `backwards` holds the
+   start frame through the delay and then lets go, so nothing about the element
+   (stacking, containing block for `fixed` children) lingers after it lands.
+   Reduced motion keeps the fade and drops the travel. */
+@keyframes ev-enter-rise {
+  from {
+    opacity: 0;
+    translate: 0 var(--ev-rise, 8px);
+  }
+}
+[data-enter="rise"],
+[data-enter="stagger"] > *,
+[data-slot="settled"][data-state="revealed"] {
+  animation: ev-enter-rise var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out)
+    var(--enter-delay, 0ms) backwards;
+}
+[data-enter="stagger"] > * {
+  animation-delay: calc(
+    var(--enter-delay, 0ms) + var(--enter-index, 0) * var(--enter-step, var(--ev-stagger, 35ms))
+  );
+}
+[data-enter="stagger"] > :nth-child(2) { --enter-index: 1; }
+[data-enter="stagger"] > :nth-child(3) { --enter-index: 2; }
+[data-enter="stagger"] > :nth-child(4) { --enter-index: 3; }
+[data-enter="stagger"] > :nth-child(5) { --enter-index: 4; }
+[data-enter="stagger"] > :nth-child(6) { --enter-index: 5; }
+[data-enter="stagger"] > :nth-child(7) { --enter-index: 6; }
+[data-enter="stagger"] > :nth-child(8) { --enter-index: 7; }
+[data-enter="stagger"] > :nth-child(9) { --enter-index: 8; }
+[data-enter="stagger"] > :nth-child(10) { --enter-index: 9; }
+[data-enter="stagger"] > :nth-child(11) { --enter-index: 10; }
+[data-enter="stagger"] > :nth-child(n + 12) { --enter-index: 11; }
+
+/* Every skeleton fades in before it starts to pulse. Keyed on the pulse class as
+   well as the slot: a running animation beats a transition on the same property,
+   so the entrance has to be the first of two animations rather than anything
+   layered beside `animate-pulse` — and a caller's `animate-none` (which `cn`
+   merges over the pulse) removes the class and with it this rule. Reduced motion
+   keeps the pulse, the signal that work is in flight, and drops the entrance. */
+@keyframes ev-skeleton-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes ev-skeleton-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+[data-slot="skeleton"].animate-pulse {
+  animation:
+    ev-skeleton-in 200ms var(--ev-ease-out, ease-out),
+    ev-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 200ms infinite;
+}
+
+/* ── App shell: the rail's active-row marker and the tab bar's rule ──────────
+   ShellNav: one marker node per nav section, placed on the [aria-current] row by
+   measurement and moved by a `transform` transition — on the compositor, so it
+   keeps its frames while the main thread renders the page just navigated to (a
+   JS layout projection here dropped exactly those). Until the first placement
+   (SSR, every frame to hydration) the marker has no position: it stays hidden
+   and the marked row carries the fill itself, so the first paint is right.
+   `data-placed` flips both at once; `entered` is a marker that mounted into a
+   section already on screen (a move across sections — a fade), `first` one that
+   arrived with its section (a cut: fading under a row whose own fill fades out
+   would dip). */
+@keyframes ev-shell-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+[data-slot="shell-nav-marker"] {
+  transition: transform var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="shell-nav-marker"]:not([data-placed]) {
+  visibility: hidden;
+}
+[data-slot="shell-nav-marker"][data-placed="entered"] {
+  animation: ev-shell-fade-in var(--ev-dur-fast, 180ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="shell-nav-marker"]:not([data-placed]) ~ * [aria-current="page"] {
+  background-color: var(--primary);
+}
+
+/* BottomTabBar: one rule for the whole bar, mounted once and translated by
+   whole tab widths (it is exactly one tab wide, so the two cannot drift). A
+   route no tab claims fades it out where it stands, and coming back fades it in
+   already in place. */
+[data-slot="tab-bar-marker"] {
+  transition:
+    translate var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out),
+    opacity var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="tab-bar-marker"][data-state="idle"] {
+  opacity: 0;
+}
+
+@keyframes ev-enter-fade {
+  from {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-enter="rise"],
+  [data-enter="stagger"] > *,
+  [data-slot="settled"][data-state="revealed"] {
+    animation-name: ev-enter-fade;
+  }
+  [data-slot="skeleton"].animate-pulse {
+    animation: ev-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+  [data-slot="shell-nav-marker"],
+  [data-slot="tab-bar-marker"] {
+    transition: none;
+    animation: none;
+  }
+}
+
 /* ═══ CONTRACT ═══════════════════════════════════════════════════ */
 
 @theme inline {
@@ -468,6 +628,26 @@
 
   --sidebar-width: 14rem;
 
+  /* app shell (uikit <AppShell> / <ShellNav> / <BottomTabBar>) */
+  --shell-rail-w: 15.5rem; /* 248px */
+  --shell-tab-bar-h: 4rem; /* 64px, before the bottom safe area */
+
+  /* ── motion ──────────────────────────────────────────────────── *
+   * One place to retune the feel of every animation the kit ships (motion.css
+   * reads these) and every one a consumer writes against them:
+   * `ease-(--ev-ease-out) duration-(--ev-dur-base)`. Quiet on purpose — short,
+   * small travel: motion here says what changed, it never decorates. */
+  --ev-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* every entrance */
+  --ev-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* state that reverses */
+  --ev-dur-fast: 180ms;
+  --ev-dur-base: 280ms;
+  --ev-dur-slow: 400ms;
+  --ev-rise: 8px; /* how far an entrance travels */
+  --ev-stagger: 35ms; /* between rows of a list */
+  /* between the sections of a page: cards, not rows — at 35ms six of them read
+     as one block twitching; at 50ms the last lands ~0.55s in, still "opening" */
+  --ev-stagger-section: 50ms;
+
   /* page container — responsive gutter + max width (uikit <Container>) */
   --page-max: 90rem; /* 1440px */
   --page-px: 1rem; /* 16px — mobile gutter, scales up below */