@ds-mo/ui 3.0.0 → 3.1.0

package/src/wc/nav/badge-gradient-ring.ts

@@ -1,109 +0,0 @@
-import {
-  SHELL_GRADIENT_POSITION_BAR_VAR,
-  SHELL_GRADIENT_POSITION_PANEL_VAR,
-} from './shell-gradient';
-
-/** Per-badge background-position for shell gradient ring sampling. */
-export const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';
-
-export interface GradientSurface {
-  element: HTMLElement;
-  chromeHost: HTMLElement;
-  positionVar: string;
-}
-
-/** Whether the badge sits under `ds-app-shell[gradient]`. */
-export function isShellGradientActive(from: HTMLElement): boolean {
-  // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only
-  // resolves where @stencil/core types are installed — consumers importing
-  // `@ds-mo/ui/nav` (raw TS) compile this without them.
-  const shell = from.closest<HTMLElement>('ds-app-shell');
-  return shell?.hasAttribute('gradient') === true;
-}
-
-/** Bar or panel chrome surface that owns the shell gradient stack. */
-export function findGradientSurface(from: HTMLElement): GradientSurface | null {
-  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;
-  if (barHost) {
-    const root = barHost.shadowRoot ?? barHost;
-    const element = root.querySelector('.bar-nav');
-    if (element) {
-      return {
-        element: element as HTMLElement,
-        chromeHost: barHost,
-        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,
-      };
-    }
-  }
-
-  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;
-  if (panelHost) {
-    const root = panelHost.shadowRoot ?? panelHost;
-    const element = root.querySelector('.panel-nav');
-    if (element) {
-      return {
-        element: element as HTMLElement,
-        chromeHost: panelHost,
-        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,
-      };
-    }
-  }
-
-  return null;
-}
-
-interface ParsedPosition {
-  x: number;
-  y: number;
-}
-
-/** Parse a two-value CSS background-position (e.g. `-200px 0`). */
-export function parseCssBackgroundPosition(value: string): ParsedPosition {
-  const trimmed = value.trim();
-  if (!trimmed) return { x: 0, y: 0 };
-
-  const parts = trimmed.split(/\s+/);
-  const x = parseLength(parts[0] ?? '0');
-  const y = parseLength(parts[1] ?? '0');
-  return { x, y };
-}
-
-function parseLength(token: string): number {
-  const px = token.match(/^(-?[\d.]+)px$/);
-  if (px) return Number(px[1]);
-  return 0;
-}
-
-/**
- * Background position for a badge ring so the shell gradient aligns with nav chrome.
- * Uses badge center relative to the painted chrome surface.
- */
-export function badgeGradientPosition(
-  badgeHost: HTMLElement,
-  surface: GradientSurface,
-  shellPosition: string,
-): string {
-  const badgeRect = badgeHost.getBoundingClientRect();
-  const surfaceRect = surface.element.getBoundingClientRect();
-  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;
-  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;
-  const { x, y } = parseCssBackgroundPosition(shellPosition);
-
-  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;
-}
-
-/** Resolve shell gradient position from chrome host custom properties. */
-export function readShellGradientPosition(surface: GradientSurface): string {
-  const styles = getComputedStyle(surface.chromeHost);
-  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';
-}
-
-/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */
-export function syncBadgeGradientPosition(badgeHost: HTMLElement): void {
-  if (!isShellGradientActive(badgeHost)) {
-    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);
-    return;
-  }
-
-  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');
-}

package/src/wc/nav/chrome-transition.ts

@@ -1,62 +0,0 @@
-/** Bubbling/composed events — `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */
-
-export const CHROME_TRANSITION_START = 'dsChromeTransitionStart';
-export const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';
-
-export type ChromeTransitionSource = 'panel-nav' | 'panel-tools';
-
-export interface ChromeTransitionDetail {
-  source: ChromeTransitionSource;
-  /** Panel-tools drawer motion direction; omitted for panel-nav. */
-  phase?: 'opening' | 'closing';
-}
-
-/** Reference-counted gate — used while panel-nav width is transitioning. */
-export class ChromeTransitionDepth {
-  private depth = 0;
-
-  enter(): void {
-    this.depth += 1;
-  }
-
-  exit(): void {
-    this.depth = Math.max(0, this.depth - 1);
-  }
-
-  get isActive(): boolean {
-    return this.depth > 0;
-  }
-}
-
-export interface RafCoalescer {
-  schedule(): void;
-  cancel(): void;
-}
-
-/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */
-export function createRafCoalescer(onFrame: () => void): RafCoalescer {
-  let rafId = 0;
-  return {
-    schedule() {
-      if (rafId !== 0) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = 0;
-        onFrame();
-      });
-    },
-    cancel() {
-      if (rafId !== 0) {
-        cancelAnimationFrame(rafId);
-        rafId = 0;
-      }
-    },
-  };
-}
-
-export function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {
-  return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;
-}
-
-export function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {
-  return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;
-}

package/src/wc/nav/index.ts

@@ -1,80 +0,0 @@
-export type { NavChromeStyle } from './nav-chrome';
-export {
-  NAV_STYLE_HINT_ATTR,
-  readNavStyleAttr,
-  setNavStyleHint,
-  clearNavStyleHint,
-  resolveNavChromeStyle,
-  shouldResyncNavChromeStyle,
-} from './nav-chrome';
-export {
-  SHELL_BAR_NAV_VT_NAME,
-  SHELL_NAV_REVEAL_DURATION_VAR,
-  SHELL_NAV_REVEAL_EASING_VAR,
-  parseCssTimeMs,
-  ensureShellNavVtStyle,
-  resolveShellNavRevealOrigin,
-  setShellNavRevealOriginVars,
-  animateShellNavRadialReveal,
-  runShellNavStyleRevealOnReady,
-} from './shell-view-transition';
-export type { ShellNavRevealOrigin } from './shell-view-transition';
-export {
-  SHELL_GRADIENT_IMAGE_VAR,
-  SHELL_GRADIENT_SIZE_VAR,
-  SHELL_GRADIENT_POSITION_PANEL_VAR,
-  SHELL_GRADIENT_POSITION_BAR_VAR,
-  SHELL_GRADIENT_OPACITY_VAR,
-  SHELL_CHROME_SURFACE_POSITION_VAR,
-  SHELL_GRADIENT_OPACITY,
-  buildShellRadialGradient,
-  shellGradientImage,
-  shellGradientSize,
-  shellGradientPositionPanel,
-  shellGradientPositionBar,
-  shellChromeSurfacePosition,
-  shellChromeLayerActive,
-  readShellViewportDimensions,
-} from './shell-gradient';
-export type { ShellGradientLayout, ShellViewportDimensions } from './shell-gradient';
-export type { MenuPlacement } from '../components/Menu/menu-placement';
-export {
-  PANEL_NAV_USER_MENU_PLACEMENT,
-} from '../components/Menu/menu-placement';
-export type { ShellGradientPreset } from './shell-gradient-presets';
-export {
-  DEFAULT_SHELL_GRADIENT_PRESET,
-  SHELL_GRADIENT_PRESETS,
-  SHELL_GRADIENT_PRESET_LABELS,
-  buildShellRadialGradientForPreset,
-  isShellGradientPreset,
-  normalizeShellGradientPreset,
-  shellGradientPresetStopToken,
-} from './shell-gradient-presets';
-export type { ChromeTransitionDetail, ChromeTransitionSource } from './chrome-transition';
-export {
-  CHROME_TRANSITION_END,
-  CHROME_TRANSITION_START,
-  ChromeTransitionDepth,
-  createRafCoalescer,
-  readChromeTransitionSource,
-  readChromeTransitionPhase,
-} from './chrome-transition';
-export {
-  barGradientPositionFromPanelWidth,
-  isPanelNavCollapsed,
-  panelWidthPxFromTokens,
-  readCssVarWidthPx,
-  readPanelNavWidthTokens,
-} from './shell-chrome-metrics';
-export type { PanelNavWidthTokens } from './shell-chrome-metrics';
-export {
-  BADGE_GRADIENT_POSITION_VAR,
-  badgeGradientPosition,
-  findGradientSurface,
-  isShellGradientActive,
-  parseCssBackgroundPosition,
-  readShellGradientPosition,
-  syncBadgeGradientPosition,
-} from './badge-gradient-ring';
-export type { GradientSurface } from './badge-gradient-ring';

package/src/wc/nav/nav-chrome.ts

@@ -1,47 +0,0 @@
-/** Nav chrome style slot — dashboard vs settings. Colors unified for now; texture hooks use the class. */
-export type NavChromeStyle = 'dashboard' | 'settings';
-
-/** Document hint for first paint before framework props land. */
-export const NAV_STYLE_HINT_ATTR = 'data-nav-style';
-
-export function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {
-  if (attr === 'dashboard' || attr === 'settings') return attr;
-  return undefined;
-}
-
-export function setNavStyleHint(style: NavChromeStyle): void {
-  if (typeof document === 'undefined') return;
-  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);
-}
-
-export function clearNavStyleHint(): void {
-  if (typeof document === 'undefined') return;
-  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);
-}
-
-export function resolveNavChromeStyle(
-  styleProp: NavChromeStyle,
-  hostAttr: string | null,
-  docHint?: string | null,
-): NavChromeStyle {
-  const fromHost = readNavStyleAttr(hostAttr);
-  if (fromHost) return fromHost;
-
-  const hint =
-    docHint !== undefined
-      ? docHint
-      : typeof document !== 'undefined'
-        ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)
-        : null;
-  const fromHint = readNavStyleAttr(hint);
-  if (fromHint) return fromHint;
-
-  return styleProp;
-}
-
-export function shouldResyncNavChromeStyle(
-  renderedStyle: NavChromeStyle,
-  style: NavChromeStyle,
-): boolean {
-  return renderedStyle !== style;
-}

package/src/wc/nav/shell-chrome-metrics.ts

@@ -1,49 +0,0 @@
-import { shellGradientPositionBar } from './shell-gradient';
-
-/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */
-export function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {
-  if (typeof document === 'undefined') return 0;
-
-  const probe = document.createElement('div');
-  probe.style.cssText =
-    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +
-    cssVarName +
-    ');';
-  context.appendChild(probe);
-  const width = probe.getBoundingClientRect().width;
-  context.removeChild(probe);
-  return width;
-}
-
-export interface PanelNavWidthTokens {
-  expandedPx: number;
-  collapsedPx: number;
-}
-
-/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */
-export function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {
-  return {
-    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),
-    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),
-  };
-}
-
-export function isPanelNavCollapsed(
-  panelNavHost: HTMLElement | null,
-  navRoot: HTMLElement | null,
-): boolean {
-  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;
-  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;
-  return collapsedProp === true;
-}
-
-export function panelWidthPxFromTokens(
-  tokens: PanelNavWidthTokens,
-  collapsed: boolean,
-): number {
-  return collapsed ? tokens.collapsedPx : tokens.expandedPx;
-}
-
-export function barGradientPositionFromPanelWidth(panelWidthPx: number): string {
-  return shellGradientPositionBar(panelWidthPx);
-}

package/src/wc/nav/shell-gradient-presets.ts

@@ -1,60 +0,0 @@
-/** Built-in shell chrome wash presets — none (solid secondary), cool, neutral, warm. */
-export type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm';
-
-export const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = ['none', 'cool', 'neutral', 'warm'];
-
-/** Wash presets shown after the `none` option in pickers. */
-export const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [
-  'cool',
-  'neutral',
-  'warm',
-];
-
-/** Default wash when `gradient-preset` is omitted. */
-export const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';
-
-export const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {
-  none: 'None',
-  cool: 'Cool',
-  neutral: 'Neutral',
-  warm: 'Warm',
-};
-
-const SHELL_GRADIENT_PRESET_STOP: Record<Exclude<ShellGradientPreset, 'none'>, string> = {
-  cool: 'var(--color-color-intent-blue-strong-background)',
-  neutral: 'var(--color-color-intent-grey-strong-background)',
-  warm: 'var(--color-color-intent-yellow-strong-background)',
-};
-
-const GRADIENT_GEOMETRY = '100% 100% at 0% 0%';
-
-export function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {
-  if (preset === 'none') return null;
-  return SHELL_GRADIENT_PRESET_STOP[preset];
-}
-
-export function isShellGradientPreset(value: string): value is ShellGradientPreset {
-  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);
-}
-
-/**
- * Coerce unknown/absent presets to the default. Runtime values escape the
- * type: removing the reflected `gradient-preset` attribute (e.g. an Angular
- * `[attr.gradient-preset]="null"` binding) drives the prop to null past its
- * field default — without normalization the stop lookup interpolates the
- * literal string "undefined" into CSS and the wash silently disappears.
- */
-export function normalizeShellGradientPreset(
-  value: string | null | undefined,
-): ShellGradientPreset {
-  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;
-}
-
-/** Radial wash for a preset — transparent at top-left into the intent stop. `none` returns no image. */
-export function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {
-  const normalized = normalizeShellGradientPreset(preset);
-  if (normalized === 'none') return 'none';
-
-  const stop = shellGradientPresetStopToken(normalized);
-  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, ${stop} 100%)`;
-}

package/src/wc/nav/shell-gradient.ts

@@ -1,94 +0,0 @@
-/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
-import type { ShellGradientPreset } from './shell-gradient-presets';
-import {
-  DEFAULT_SHELL_GRADIENT_PRESET,
-  buildShellRadialGradientForPreset,
-} from './shell-gradient-presets';
-
-export type { ShellGradientPreset } from './shell-gradient-presets';
-export {
-  DEFAULT_SHELL_GRADIENT_PRESET,
-  SHELL_GRADIENT_PRESETS,
-  SHELL_GRADIENT_PRESET_LABELS,
-  buildShellRadialGradientForPreset,
-  isShellGradientPreset,
-  shellGradientPresetStopToken,
-} from './shell-gradient-presets';
-
-export const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';
-export const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';
-export const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';
-export const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';
-export const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';
-/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */
-export const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';
-
-/** Layer opacity for the nav gradient wash. */
-export const SHELL_GRADIENT_OPACITY = '0.1';
-
-/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */
-export function shellChromeLayerActive(gradient: boolean): boolean {
-  return gradient;
-}
-
-/**
- * Shell radial wash — same for panel and bar nav.
- * Tokens follow `data-theme` (light/dark intent stops).
- */
-export function buildShellRadialGradient(
-  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,
-): string {
-  return buildShellRadialGradientForPreset(preset);
-}
-
-/** Built-in radial image (`gradientSrc` on shell overrides). */
-export function shellGradientImage(
-  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,
-): string {
-  return buildShellRadialGradient(preset);
-}
-
-export interface ShellViewportDimensions {
-  width: number;
-  height: number;
-}
-
-/**
- * Viewport size for shell chrome with `background-attachment: fixed`.
- * Must not use the `ds-app-shell` element box — the shell can be shorter or
- * taller than the viewport when host height chains break or content overflows.
- */
-export function readShellViewportDimensions(win?: Window): ShellViewportDimensions {
-  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);
-  if (!w) return { width: 0, height: 0 };
-
-  const visual = w.visualViewport;
-  return {
-    width: Math.round(visual?.width ?? w.innerWidth),
-    height: Math.round(visual?.height ?? w.innerHeight),
-  };
-}
-
-export interface ShellGradientLayout {
-  width: number;
-  height: number;
-  panelWidth: number;
-}
-
-/** Pixel `background-size` for the fixed-attachment radial wash. */
-export function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {
-  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;
-}
-
-export function shellGradientPositionPanel(): string {
-  return '0 0';
-}
-
-export function shellGradientPositionBar(panelWidth: number): string {
-  return `${-Math.round(panelWidth)}px 0`;
-}
-
-/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */
-export function shellChromeSurfacePosition(leftPx: number, topPx: number): string {
-  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;
-}

package/src/wc/nav/shell-shortcuts.ts

@@ -1,63 +0,0 @@
-import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';
-
-export type ShellShortcutAction =
-  | 'toggle-panel-nav'
-  | 'close-panel-tools'
-  | `open-tool:${PanelToolsToolId}`;
-
-const TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {
-  k: 'search',
-  a: 'agents',
-  s: 'stacks',
-  m: 'messages',
-  n: 'activity',
-};
-
-/** Tool shortcut keys (K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
-
-/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */
-export function isBareShellShortcutKey(
-  e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,
-): boolean {
-  return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;
-}
-
-/** Skip shell shortcuts while typing in an editable control. */
-export function isEditableShortcutTarget(target: EventTarget | null): boolean {
-  if (!target || typeof target !== 'object') return false;
-  if (!('closest' in target) || typeof target.closest !== 'function') return false;
-
-  const el = target as Element & { isContentEditable?: boolean };
-
-  const editable = el.closest(
-    'input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]',
-  );
-  if (editable) return true;
-
-  const role = el.getAttribute('role');
-  if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;
-
-  return Boolean(el.isContentEditable);
-}
-
-function normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {
-  if (e.key === '[' || e.code === 'BracketLeft') return '[';
-  if (e.key === ']' || e.code === 'BracketRight') return ']';
-  return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();
-}
-
-/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */
-export function resolveShellShortcut(
-  e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,
-): ShellShortcutAction | null {
-  if (!isBareShellShortcutKey(e)) return null;
-
-  const key = normalizedShortcutKey(e);
-  if (key === '[') return 'toggle-panel-nav';
-  if (key === ']') return 'close-panel-tools';
-
-  const toolId = TOOL_SHORTCUT_KEYS[key];
-  if (toolId) return `open-tool:${toolId}`;
-
-  return null;
-}

package/src/wc/nav/shell-view-transition.ts

@@ -1,122 +0,0 @@
-import { parseCssTimeMs } from '../utils/resolve-css-time-ms';
-
-/** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */
-export const SHELL_BAR_NAV_VT_NAME = 'ds-shell-bar-nav';
-
-export { parseCssTimeMs };
-
-const VT_STYLE_ID = 'ds-shell-nav-vt-style';
-
-/** TokoMo tokens for the dashboard ↔ settings radial reveal (WAAPI). */
-export const SHELL_NAV_REVEAL_DURATION_VAR = '--effect-animation-duration-medium-3';
-export const SHELL_NAV_REVEAL_EASING_VAR = '--effect-animation-easing-ease-in-out';
-const SHELL_NAV_REVEAL_DURATION_FALLBACK_MS = 500;
-const SHELL_NAV_REVEAL_EASING_FALLBACK = 'ease-in-out';
-
-function readCssCustomProperty(name: string, fallback: string): string {
-  if (typeof document === 'undefined') return fallback;
-  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-  return value || fallback;
-}
-
-/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
-export function ensureShellNavVtStyle(): void {
-  if (typeof document === 'undefined') return;
-
-  const content = [
-    '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',
-    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}),::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){animation:none;mix-blend-mode:normal}`,
-    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}){z-index:1}`,
-    `::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){z-index:2;clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}`,
-    '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',
-  ].join('\n');
-
-  const existing = document.getElementById(VT_STYLE_ID) as HTMLStyleElement | null;
-  if (existing) {
-    if (existing.textContent !== content) existing.textContent = content;
-    return;
-  }
-
-  const style = document.createElement('style');
-  style.id = VT_STYLE_ID;
-  style.textContent = content;
-  document.head.appendChild(style);
-}
-
-export interface ShellNavRevealOrigin {
-  x: number;
-  y: number;
-  maxRadius: number;
-}
-
-/** Origin for the radial reveal — defaults to panel-nav footer gear, then viewport center. */
-export function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin {
-  const btn =
-    originEl ??
-    document.querySelector<HTMLElement>('.panel-nav__footer-btn');
-  const rect = btn?.getBoundingClientRect();
-  const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);
-  const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);
-  const maxRadius = Math.ceil(
-    Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)),
-  );
-  return { x, y, maxRadius };
-}
-
-export function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void {
-  document.documentElement.style.setProperty('--vt-x', `${origin.x}px`);
-  document.documentElement.style.setProperty('--vt-y', `${origin.y}px`);
-}
-
-/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */
-export function animateShellNavRadialReveal(
-  origin: ShellNavRevealOrigin,
-  durationMs?: number,
-): void {
-  const duration =
-    durationMs ??
-    parseCssTimeMs(
-      readCssCustomProperty(SHELL_NAV_REVEAL_DURATION_VAR, '400ms'),
-      SHELL_NAV_REVEAL_DURATION_FALLBACK_MS,
-    );
-  const easing = readCssCustomProperty(
-    SHELL_NAV_REVEAL_EASING_VAR,
-    SHELL_NAV_REVEAL_EASING_FALLBACK,
-  );
-  const keyframes = {
-    clipPath: [
-      `circle(0px at ${origin.x}px ${origin.y}px)`,
-      `circle(${origin.maxRadius}px at ${origin.x}px ${origin.y}px)`,
-    ],
-  };
-  const options = {
-    duration,
-    easing,
-    fill: 'forwards' as const,
-  };
-
-  document.documentElement.animate(keyframes, {
-    ...options,
-    pseudoElement: '::view-transition-new(root)',
-  });
-  document.documentElement.animate(keyframes, {
-    ...options,
-    pseudoElement: `::view-transition-new(${SHELL_BAR_NAV_VT_NAME})`,
-  });
-}
-
-/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */
-export function runShellNavStyleRevealOnReady(
-  transition: { ready: Promise<void> },
-  originEl?: HTMLElement | null,
-): void {
-  ensureShellNavVtStyle();
-  const origin = resolveShellNavRevealOrigin(originEl);
-  setShellNavRevealOriginVars(origin);
-
-  transition.ready
-    .then(() => animateShellNavRadialReveal(origin))
-    .catch(() => {
-      /* transition skipped or superseded */
-    });
-}