@hyvnt/hyvui 0.1.0

package/dist/examples/SignalLost.svelte

@@ -0,0 +1,191 @@
+<!--
+  EXAMPLE: Signal Lost
+  REGISTER: field-notebook
+  CONCEPT: a 404 page that feels like arriving at coordinates where something used to be
+  DEMONSTRATES: FloatCard, HorizonGrid, TerminalBoot, StatusDot, CornerBrackets, SignalRing, Text expressions, surface action, depth system
+  INSPIRED BY: the last transmission log of a deep-space relay station
+-->
+<script lang="ts">
+  import {
+    Text,
+    Label,
+    Button,
+    StatusDot,
+    CornerBrackets,
+    TerminalBoot,
+    FloatCard,
+    HorizonGrid,
+    DepthStage,
+    DepthLayer,
+    SignalRing,
+    GlyphMark,
+    surface,
+    applyRegister,
+  } from '../index.js';
+  import { onMount } from 'svelte';
+
+  let bootComplete = $state(false);
+
+  const bootLines: { status: 'ok' | 'pend' | 'warn' | 'fail'; message: string }[] = [
+    { status: 'ok', message: 'local systems nominal' },
+    { status: 'ok', message: 'navigation subsystem online' },
+    { status: 'ok', message: 'scanning frequency range' },
+    { status: 'pend', message: 'attempting signal acquisition' },
+    { status: 'warn', message: 'no response on primary band' },
+    { status: 'warn', message: 'sweeping secondary frequencies' },
+    { status: 'fail', message: 'target signal not found at these coordinates' },
+  ];
+
+  onMount(() => {
+    applyRegister('field-notebook');
+    return () => {
+      document.body.removeAttribute('data-register');
+    };
+  });
+</script>
+
+<div class="signal-lost">
+  <div class="signal-lost-bg">
+    <HorizonGrid animated rows={20} cols={14} vanishY={0.32} />
+  </div>
+
+  <div class="signal-lost-ring" aria-hidden="true">
+    <SignalRing active size={400} />
+  </div>
+
+  <DepthStage perspective="mid" class="signal-lost-stage">
+    <DepthLayer level="ground" class="signal-lost-terminal">
+      <div class="signal-lost-terminal-inner" use:surface={{ delay: 800 }}>
+        <TerminalBoot
+          lines={bootLines}
+          delay={1200}
+          interval={900}
+          oncomplete={() => (bootComplete = true)}
+        />
+      </div>
+    </DepthLayer>
+
+    <DepthLayer level="raised" class="signal-lost-center">
+      <FloatCard tiltMax={6} class="signal-lost-card">
+        <div class="signal-lost-content" style:position="relative">
+          <CornerBrackets size={28} color="rgba(199, 156, 87, 0.2)" />
+
+          <div class="signal-lost-status" use:surface={{ delay: 200 }}>
+            <StatusDot status="fail" size={8} pulse />
+            <Label color="muted">transmission ended</Label>
+          </div>
+
+          <div use:surface={{ delay: 400 }}>
+            <Text variant="heading" expression="title-card" as="h1" color="primary">
+              the coordinates are empty now
+            </Text>
+          </div>
+
+          <div use:surface={{ delay: 600 }}>
+            <Text expression="manifesto">
+              something was broadcasting from here. the frequency is right,
+              the heading is right. but the source has gone quiet.
+            </Text>
+          </div>
+
+          <div class="signal-lost-meta" use:surface={{ delay: 700 }}>
+            <GlyphMark variant="coord" size={16} color="var(--muted-strong)" />
+            <Label color="muted">bearing 047.2 | range unknown | last contact 7h ago</Label>
+          </div>
+
+          <div class="signal-lost-action" use:surface={{ delay: 900 }}>
+            <Button variant="ghost" onclick={() => window.history.back()}>
+              return to last known position
+            </Button>
+          </div>
+        </div>
+      </FloatCard>
+    </DepthLayer>
+  </DepthStage>
+</div>
+
+<style>
+  .signal-lost {
+    position: relative;
+    min-height: 100dvh;
+    background-color: var(--bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .signal-lost-bg {
+    position: absolute;
+    inset: 0;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .signal-lost-ring {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  :global(.signal-lost-stage) {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    padding: var(--space-scene);
+    width: 100%;
+    max-width: 52rem;
+  }
+
+  :global(.signal-lost-center) {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  :global(.signal-lost-card) {
+    max-width: 36rem;
+    width: 100%;
+  }
+
+  .signal-lost-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 1rem;
+  }
+
+  .signal-lost-status {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  .signal-lost-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .signal-lost-action {
+    margin-top: 0.5rem;
+  }
+
+  :global(.signal-lost-terminal) {
+    width: 100%;
+    max-width: 36rem;
+    align-self: center;
+  }
+
+  .signal-lost-terminal-inner {
+    padding: 1rem 0;
+    border-left: 2px solid rgba(121, 166, 163, 0.14);
+    padding-left: 1.25rem;
+  }
+</style>

package/dist/examples/SignalLost.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SignalLost: import("svelte").Component<Record<string, never>, {}, "">;
+type SignalLost = ReturnType<typeof SignalLost>;
+export default SignalLost;

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+export { default as Text } from './components/primitives/Text.svelte';
+export { default as Label } from './components/primitives/Label.svelte';
+export { default as Icon } from './components/primitives/Icon.svelte';
+export { default as Divider } from './components/primitives/Divider.svelte';
+export { default as Surface } from './components/primitives/Surface.svelte';
+export { default as Button } from './components/inputs/Button.svelte';
+export { default as Input } from './components/inputs/Input.svelte';
+export { default as Textarea } from './components/inputs/Textarea.svelte';
+export { default as Select } from './components/inputs/Select.svelte';
+export { default as Checkbox } from './components/inputs/Checkbox.svelte';
+export { default as Toggle } from './components/inputs/Toggle.svelte';
+export { default as FileUpload } from './components/inputs/FileUpload.svelte';
+export { default as Toast } from './components/feedback/Toast.svelte';
+export { toastStore } from './components/feedback/Toast.svelte';
+export { default as Alert } from './components/feedback/Alert.svelte';
+export { default as Skeleton } from './components/feedback/Skeleton.svelte';
+export { default as StatusDot } from './components/feedback/StatusDot.svelte';
+export { default as StatusLine } from './components/feedback/StatusLine.svelte';
+export { default as EmptyState } from './components/feedback/EmptyState.svelte';
+export { default as ErrorState } from './components/feedback/ErrorState.svelte';
+export { default as Stack } from './components/layout/Stack.svelte';
+export { default as Grid } from './components/layout/Grid.svelte';
+export { default as Card } from './components/layout/Card.svelte';
+export { default as Panel } from './components/layout/Panel.svelte';
+export { default as Modal } from './components/layout/Modal.svelte';
+export { default as Drawer } from './components/layout/Drawer.svelte';
+export { default as Popover } from './components/layout/Popover.svelte';
+export { default as Topbar } from './components/navigation/Topbar.svelte';
+export { default as SidebarNav } from './components/navigation/SidebarNav.svelte';
+export { default as Tabs } from './components/navigation/Tabs.svelte';
+export { default as Breadcrumb } from './components/navigation/Breadcrumb.svelte';
+export { default as DropdownMenu } from './components/navigation/DropdownMenu.svelte';
+export { default as Badge } from './components/display/Badge.svelte';
+export { default as Avatar } from './components/display/Avatar.svelte';
+export { default as Table } from './components/display/Table.svelte';
+export { default as CodeBlock } from './components/display/CodeBlock.svelte';
+export { default as MetricCard } from './components/display/MetricCard.svelte';
+export { default as Blockquote } from './components/display/Blockquote.svelte';
+export { default as GridOverlay } from './components/ambient/GridOverlay.svelte';
+export { default as CornerBrackets } from './components/ambient/CornerBrackets.svelte';
+export { default as ScanBand } from './components/ambient/ScanBand.svelte';
+export { default as Vignette } from './components/ambient/Vignette.svelte';
+export { default as ParallaxLayer } from './components/ambient/ParallaxLayer.svelte';
+export { default as PageHeader } from './components/patterns/PageHeader.svelte';
+export { default as ConfirmDialog } from './components/patterns/ConfirmDialog.svelte';
+export { default as SearchBar } from './components/patterns/SearchBar.svelte';
+export { default as TerminalBoot } from './components/patterns/TerminalBoot.svelte';
+export { default as ActionBar } from './components/patterns/ActionBar.svelte';
+export { tokens } from './tokens/tokens.js';
+export { applyRegister, clearRegister, registers } from './system/register.js';
+export type { Register } from './system/register.js';
+export type { Expression } from './components/primitives/text.js';
+export { surface } from './system/actions/surface.js';
+export { echo } from './system/actions/echo.js';
+export { reveal } from './system/actions/reveal.js';
+export { resolve } from './system/actions/resolve.js';
+export type { ResolveStatus } from './system/actions/resolve.js';
+export { default as DepthStage } from './components/depth/DepthStage.svelte';
+export { default as FloatCard } from './components/depth/FloatCard.svelte';
+export { default as HorizonGrid } from './components/depth/HorizonGrid.svelte';
+export { default as DepthLayer } from './components/depth/DepthLayer.svelte';
+export { default as Plinth } from './components/depth/Plinth.svelte';
+export { tiltTransform, depthZ } from './system/depth/depth.js';
+export type { DepthLevel, PerspectivePreset } from './system/depth/depth.js';
+export { default as SignalRing } from './components/ambient/SignalRing.svelte';
+export { default as GlyphMark } from './components/ambient/GlyphMark.svelte';
+export { default as DataStream } from './components/ambient/DataStream.svelte';
+export { default as ThreadLine } from './components/ambient/ThreadLine.svelte';
+export { default as NarrativeScene } from './components/scenes/NarrativeScene.svelte';
+export { default as ReadoutScene } from './components/scenes/ReadoutScene.svelte';
+export { default as StageScene } from './components/scenes/StageScene.svelte';
+export { default as ArchiveScene } from './components/scenes/ArchiveScene.svelte';
+export { default as LogScene } from './components/scenes/LogScene.svelte';

package/dist/index.js

@@ -0,0 +1,83 @@
+// primitives
+export { default as Text } from './components/primitives/Text.svelte';
+export { default as Label } from './components/primitives/Label.svelte';
+export { default as Icon } from './components/primitives/Icon.svelte';
+export { default as Divider } from './components/primitives/Divider.svelte';
+export { default as Surface } from './components/primitives/Surface.svelte';
+// inputs
+export { default as Button } from './components/inputs/Button.svelte';
+export { default as Input } from './components/inputs/Input.svelte';
+export { default as Textarea } from './components/inputs/Textarea.svelte';
+export { default as Select } from './components/inputs/Select.svelte';
+export { default as Checkbox } from './components/inputs/Checkbox.svelte';
+export { default as Toggle } from './components/inputs/Toggle.svelte';
+export { default as FileUpload } from './components/inputs/FileUpload.svelte';
+// feedback
+export { default as Toast } from './components/feedback/Toast.svelte';
+export { toastStore } from './components/feedback/Toast.svelte';
+export { default as Alert } from './components/feedback/Alert.svelte';
+export { default as Skeleton } from './components/feedback/Skeleton.svelte';
+export { default as StatusDot } from './components/feedback/StatusDot.svelte';
+export { default as StatusLine } from './components/feedback/StatusLine.svelte';
+export { default as EmptyState } from './components/feedback/EmptyState.svelte';
+export { default as ErrorState } from './components/feedback/ErrorState.svelte';
+// layout
+export { default as Stack } from './components/layout/Stack.svelte';
+export { default as Grid } from './components/layout/Grid.svelte';
+export { default as Card } from './components/layout/Card.svelte';
+export { default as Panel } from './components/layout/Panel.svelte';
+export { default as Modal } from './components/layout/Modal.svelte';
+export { default as Drawer } from './components/layout/Drawer.svelte';
+export { default as Popover } from './components/layout/Popover.svelte';
+// navigation
+export { default as Topbar } from './components/navigation/Topbar.svelte';
+export { default as SidebarNav } from './components/navigation/SidebarNav.svelte';
+export { default as Tabs } from './components/navigation/Tabs.svelte';
+export { default as Breadcrumb } from './components/navigation/Breadcrumb.svelte';
+export { default as DropdownMenu } from './components/navigation/DropdownMenu.svelte';
+// display
+export { default as Badge } from './components/display/Badge.svelte';
+export { default as Avatar } from './components/display/Avatar.svelte';
+export { default as Table } from './components/display/Table.svelte';
+export { default as CodeBlock } from './components/display/CodeBlock.svelte';
+export { default as MetricCard } from './components/display/MetricCard.svelte';
+export { default as Blockquote } from './components/display/Blockquote.svelte';
+// ambient
+export { default as GridOverlay } from './components/ambient/GridOverlay.svelte';
+export { default as CornerBrackets } from './components/ambient/CornerBrackets.svelte';
+export { default as ScanBand } from './components/ambient/ScanBand.svelte';
+export { default as Vignette } from './components/ambient/Vignette.svelte';
+export { default as ParallaxLayer } from './components/ambient/ParallaxLayer.svelte';
+// patterns
+export { default as PageHeader } from './components/patterns/PageHeader.svelte';
+export { default as ConfirmDialog } from './components/patterns/ConfirmDialog.svelte';
+export { default as SearchBar } from './components/patterns/SearchBar.svelte';
+export { default as TerminalBoot } from './components/patterns/TerminalBoot.svelte';
+export { default as ActionBar } from './components/patterns/ActionBar.svelte';
+// tokens
+export { tokens } from './tokens/tokens.js';
+// system — register
+export { applyRegister, clearRegister, registers } from './system/register.js';
+// system — actions
+export { surface } from './system/actions/surface.js';
+export { echo } from './system/actions/echo.js';
+export { reveal } from './system/actions/reveal.js';
+export { resolve } from './system/actions/resolve.js';
+// depth system
+export { default as DepthStage } from './components/depth/DepthStage.svelte';
+export { default as FloatCard } from './components/depth/FloatCard.svelte';
+export { default as HorizonGrid } from './components/depth/HorizonGrid.svelte';
+export { default as DepthLayer } from './components/depth/DepthLayer.svelte';
+export { default as Plinth } from './components/depth/Plinth.svelte';
+export { tiltTransform, depthZ } from './system/depth/depth.js';
+// new ambient ornaments
+export { default as SignalRing } from './components/ambient/SignalRing.svelte';
+export { default as GlyphMark } from './components/ambient/GlyphMark.svelte';
+export { default as DataStream } from './components/ambient/DataStream.svelte';
+export { default as ThreadLine } from './components/ambient/ThreadLine.svelte';
+// scenes
+export { default as NarrativeScene } from './components/scenes/NarrativeScene.svelte';
+export { default as ReadoutScene } from './components/scenes/ReadoutScene.svelte';
+export { default as StageScene } from './components/scenes/StageScene.svelte';
+export { default as ArchiveScene } from './components/scenes/ArchiveScene.svelte';
+export { default as LogScene } from './components/scenes/LogScene.svelte';

package/dist/system/actions/echo.d.ts

@@ -0,0 +1,10 @@
+import type { ActionReturn } from 'svelte/action';
+/**
+ * Adds a gold radial pulse on click. Signals action receipt.
+ * Does not interfere with the element's existing styles.
+ * Respects prefers-reduced-motion.
+ *
+ * @example
+ * <button use:echo>confirm</button>
+ */
+export declare function echo(node: HTMLElement): ActionReturn;

package/dist/system/actions/echo.js

@@ -0,0 +1,46 @@
+/**
+ * Adds a gold radial pulse on click. Signals action receipt.
+ * Does not interfere with the element's existing styles.
+ * Respects prefers-reduced-motion.
+ *
+ * @example
+ * <button use:echo>confirm</button>
+ */
+export function echo(node) {
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    function handleClick(e) {
+        if (prefersReduced)
+            return;
+        const rect = node.getBoundingClientRect();
+        const x = ((e.clientX - rect.left) / rect.width) * 100;
+        const y = ((e.clientY - rect.top) / rect.height) * 100;
+        const overlay = document.createElement('span');
+        overlay.style.cssText = `
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      background: radial-gradient(circle at ${x}% ${y}%, rgba(199, 156, 87, 0.22), transparent 70%);
+      opacity: 0;
+      transition: opacity 0.15s ease-out;
+    `;
+        const position = getComputedStyle(node).position;
+        if (position === 'static')
+            node.style.position = 'relative';
+        node.style.overflow = 'hidden';
+        node.appendChild(overlay);
+        requestAnimationFrame(() => {
+            overlay.style.opacity = '1';
+            setTimeout(() => {
+                overlay.style.opacity = '0';
+                setTimeout(() => overlay.remove(), 200);
+            }, 200);
+        });
+    }
+    node.addEventListener('click', handleClick);
+    return {
+        destroy() {
+            node.removeEventListener('click', handleClick);
+        },
+    };
+}

package/dist/system/actions/resolve.d.ts

@@ -0,0 +1,23 @@
+import type { ActionReturn } from 'svelte/action';
+export type ResolveStatus = 'ok' | 'warn' | 'fail' | 'pend';
+export interface ResolveAction {
+    /** Trigger the status flash animation. */
+    trigger: (status: ResolveStatus) => void;
+}
+/**
+ * Animates a status change on an element. A brief overlay flash in the
+ * status color signals the transition, then fades out.
+ * Dispatches custom DOM events `resolve:start` and `resolve:end`.
+ * Respects prefers-reduced-motion.
+ *
+ * @example
+ * <script>
+ *   let resolveAction;
+ *   async function submit() {
+ *     const ok = await doSubmit();
+ *     resolveAction.trigger(ok ? 'ok' : 'fail');
+ *   }
+ * </script>
+ * <form use:resolve={a => resolveAction = a}>...</form>
+ */
+export declare function resolve(node: HTMLElement, register: (action: ResolveAction) => void): ActionReturn;

package/dist/system/actions/resolve.js

@@ -0,0 +1,59 @@
+const statusColors = {
+    ok: 'var(--status-ok)',
+    warn: 'var(--status-warn)',
+    fail: 'var(--status-fail)',
+    pend: 'var(--status-pend)',
+};
+/**
+ * Animates a status change on an element. A brief overlay flash in the
+ * status color signals the transition, then fades out.
+ * Dispatches custom DOM events `resolve:start` and `resolve:end`.
+ * Respects prefers-reduced-motion.
+ *
+ * @example
+ * <script>
+ *   let resolveAction;
+ *   async function submit() {
+ *     const ok = await doSubmit();
+ *     resolveAction.trigger(ok ? 'ok' : 'fail');
+ *   }
+ * </script>
+ * <form use:resolve={a => resolveAction = a}>...</form>
+ */
+export function resolve(node, register) {
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const position = getComputedStyle(node).position;
+    if (position === 'static')
+        node.style.position = 'relative';
+    function trigger(status) {
+        node.dispatchEvent(new CustomEvent('resolve:start', { detail: status }));
+        if (prefersReduced) {
+            node.dispatchEvent(new CustomEvent('resolve:end', { detail: status }));
+            return;
+        }
+        const overlay = document.createElement('span');
+        overlay.style.cssText = `
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: ${statusColors[status]};
+      opacity: 0;
+      border-radius: inherit;
+      transition: opacity 0.12s ease-out;
+    `;
+        node.appendChild(overlay);
+        requestAnimationFrame(() => {
+            overlay.style.opacity = '0.12';
+            setTimeout(() => {
+                overlay.style.transition = 'opacity 0.4s ease-out';
+                overlay.style.opacity = '0';
+                setTimeout(() => {
+                    overlay.remove();
+                    node.dispatchEvent(new CustomEvent('resolve:end', { detail: status }));
+                }, 450);
+            }, 200);
+        });
+    }
+    register({ trigger });
+    return {};
+}

package/dist/system/actions/reveal.d.ts

@@ -0,0 +1,18 @@
+import type { ActionReturn } from 'svelte/action';
+interface RevealOptions {
+    /** CSS selector for the child element to reveal on hover. */
+    target: string;
+}
+/**
+ * Reveals a child element when the node is hovered.
+ * The target child starts invisible and transitions in on hover.
+ * Respects prefers-reduced-motion (instant show/hide, no transition).
+ *
+ * @example
+ * <div use:reveal={{ target: '.meta' }}>
+ *   <span>main content</span>
+ *   <span class="meta">revealed on hover</span>
+ * </div>
+ */
+export declare function reveal(node: HTMLElement, options: RevealOptions): ActionReturn<RevealOptions>;
+export {};

package/dist/system/actions/reveal.js

@@ -0,0 +1,54 @@
+/**
+ * Reveals a child element when the node is hovered.
+ * The target child starts invisible and transitions in on hover.
+ * Respects prefers-reduced-motion (instant show/hide, no transition).
+ *
+ * @example
+ * <div use:reveal={{ target: '.meta' }}>
+ *   <span>main content</span>
+ *   <span class="meta">revealed on hover</span>
+ * </div>
+ */
+export function reveal(node, options) {
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    function getTarget() {
+        return node.querySelector(options.target);
+    }
+    function init() {
+        const target = getTarget();
+        if (!target)
+            return;
+        target.style.opacity = '0';
+        target.style.transform = prefersReduced ? 'none' : 'translateY(4px)';
+        if (!prefersReduced) {
+            target.style.transition = 'opacity 0.25s ease-out, transform 0.25s ease-out';
+        }
+    }
+    function show() {
+        const target = getTarget();
+        if (!target)
+            return;
+        target.style.opacity = '1';
+        target.style.transform = 'translateY(0)';
+    }
+    function hide() {
+        const target = getTarget();
+        if (!target)
+            return;
+        target.style.opacity = '0';
+        target.style.transform = prefersReduced ? 'none' : 'translateY(4px)';
+    }
+    init();
+    node.addEventListener('mouseenter', show);
+    node.addEventListener('mouseleave', hide);
+    node.addEventListener('focusin', show);
+    node.addEventListener('focusout', hide);
+    return {
+        destroy() {
+            node.removeEventListener('mouseenter', show);
+            node.removeEventListener('mouseleave', hide);
+            node.removeEventListener('focusin', show);
+            node.removeEventListener('focusout', hide);
+        },
+    };
+}

package/dist/system/actions/surface.d.ts

@@ -0,0 +1,14 @@
+import type { ActionReturn } from 'svelte/action';
+interface SurfaceOptions {
+    /** Delay in ms before the entrance animation starts. */
+    delay?: number;
+}
+/**
+ * Plays the standard hyvui entrance: translateY(6px) -> 0, opacity 0 -> 1.
+ * Respects prefers-reduced-motion.
+ *
+ * @example
+ * <div use:surface={{ delay: 200 }}>content</div>
+ */
+export declare function surface(node: HTMLElement, options?: SurfaceOptions): ActionReturn<SurfaceOptions>;
+export {};

package/dist/system/actions/surface.js

@@ -0,0 +1,25 @@
+/**
+ * Plays the standard hyvui entrance: translateY(6px) -> 0, opacity 0 -> 1.
+ * Respects prefers-reduced-motion.
+ *
+ * @example
+ * <div use:surface={{ delay: 200 }}>content</div>
+ */
+export function surface(node, options = {}) {
+    const { delay = 0 } = options;
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReduced)
+        return {};
+    node.style.opacity = '0';
+    node.style.transform = 'translateY(6px)';
+    node.style.transition = `opacity 0.5s ease-out ${delay}ms, transform 0.5s ease-out ${delay}ms`;
+    const frame = requestAnimationFrame(() => {
+        node.style.opacity = '1';
+        node.style.transform = 'translateY(0)';
+    });
+    return {
+        destroy() {
+            cancelAnimationFrame(frame);
+        },
+    };
+}

package/dist/system/depth/depth.css

@@ -0,0 +1,49 @@
+/* ── perspective tokens ──────────────────────────────────────────────── */
+:root {
+  --perspective-near: 600px;
+  --perspective-mid: 1000px;
+  --perspective-far: 1800px;
+
+  --depth-ground: 0px;
+  --depth-raised: 60px;
+  --depth-foreground: 140px;
+
+  --depth-tilt-max: 8deg;
+  --depth-tilt-subtle: 3deg;
+
+  --depth-transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ── perspective container ───────────────────────────────────────────── */
+.depth-stage {
+  perspective: var(--perspective-mid);
+  perspective-origin: 50% 40%;
+  transform-style: preserve-3d;
+}
+
+/* ── depth level utilities ───────────────────────────────────────────── */
+.depth-ground {
+  transform: translateZ(var(--depth-ground));
+}
+
+.depth-raised {
+  transform: translateZ(var(--depth-raised));
+}
+
+.depth-foreground {
+  transform: translateZ(var(--depth-foreground));
+}
+
+/* ── reduced motion override ─────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .depth-ground,
+  .depth-raised,
+  .depth-foreground {
+    transform: none;
+  }
+
+  .depth-stage {
+    perspective: none;
+    transform-style: flat;
+  }
+}