@northstar-js/react 0.0.0-stage → 0.2.0

package/dist/internal/interaction.js

@@ -0,0 +1,129 @@
+'use client';
+// The interaction layer's only JavaScript: pointer tracking for spotlights and
+// magnetic controls, and a presence hook that lets overlays play an exit
+// animation. Everything writes CSS custom properties or attributes straight to
+// the element, so pointer movement never re-renders React.
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+const useIsoLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const raf = typeof window !== 'undefined' && window.requestAnimationFrame
+    ? (cb) => window.requestAnimationFrame(cb)
+    : (cb) => setTimeout(cb, 16);
+const caf = typeof window !== 'undefined' && window.cancelAnimationFrame ? (id) => window.cancelAnimationFrame(id) : (id) => clearTimeout(id);
+function prefersReducedMotion() {
+    return typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Tracks the pointer over an element, rAF-throttled, and writes
+ * `--ns-mx` / `--ns-my` (px from the top-left, for spotlights and specular
+ * highlights), `--ns-pointer-x` / `--ns-pointer-y` (unitless, -1 at the
+ * left/top edge to 1 at the right/bottom, for the spin finish's turning
+ * sweep) and, when magnetic, `--ns-mag-x` / `--ns-mag-y`. Touch is
+ * ignored; the pointer effects are a hover affordance and keyboard focus gets
+ * an equivalent centred highlight from CSS.
+ */
+export function usePointerTracking(enabled, options = {}) {
+    const magnetic = options.magnetic ?? 0;
+    const cleanup = useRef(null);
+    // A predicate is decided once, when the element mounts (e.g. "am I on glass?").
+    const test = useRef(enabled);
+    test.current = enabled;
+    const key = typeof enabled === 'function' ? 'test' : enabled;
+    return useCallback((el) => {
+        cleanup.current?.();
+        cleanup.current = null;
+        const on = typeof test.current === 'function' ? !!el && test.current(el) : test.current;
+        if (!el || !on)
+            return;
+        let frame = 0;
+        let last = null;
+        const flush = () => {
+            frame = 0;
+            if (!last)
+                return;
+            const r = el.getBoundingClientRect();
+            const x = last.clientX - r.left;
+            const y = last.clientY - r.top;
+            el.style.setProperty('--ns-mx', `${x.toFixed(1)}px`);
+            el.style.setProperty('--ns-my', `${y.toFixed(1)}px`);
+            if (r.width <= 0 || r.height <= 0)
+                return;
+            const dx = Math.max(-1, Math.min(1, (x / r.width - 0.5) * 2));
+            const dy = Math.max(-1, Math.min(1, (y / r.height - 0.5) * 2));
+            el.style.setProperty('--ns-pointer-x', dx.toFixed(3));
+            el.style.setProperty('--ns-pointer-y', dy.toFixed(3));
+            if (magnetic > 0 && !prefersReducedMotion()) {
+                el.style.setProperty('--ns-mag-x', `${(dx * magnetic).toFixed(2)}px`);
+                el.style.setProperty('--ns-mag-y', `${(dy * magnetic).toFixed(2)}px`);
+            }
+        };
+        const onMove = (e) => {
+            if (e.pointerType === 'touch')
+                return;
+            last = e;
+            el.setAttribute('data-pointer', '');
+            if (!frame)
+                frame = raf(flush);
+        };
+        const onLeave = () => {
+            last = null;
+            if (frame)
+                caf(frame);
+            frame = 0;
+            el.removeAttribute('data-pointer');
+            el.style.removeProperty('--ns-pointer-x');
+            el.style.removeProperty('--ns-pointer-y');
+            el.style.removeProperty('--ns-mag-x');
+            el.style.removeProperty('--ns-mag-y');
+        };
+        el.addEventListener('pointermove', onMove, { passive: true });
+        el.addEventListener('pointerleave', onLeave);
+        cleanup.current = () => {
+            el.removeEventListener('pointermove', onMove);
+            el.removeEventListener('pointerleave', onLeave);
+            if (frame)
+                caf(frame);
+        };
+    }, [key, magnetic]);
+}
+function longestAnimation(el) {
+    const cs = getComputedStyle(el);
+    if (!cs.animationName || cs.animationName === 'none')
+        return 0;
+    const parse = (s) => (s.trim().endsWith('ms') ? parseFloat(s) : parseFloat(s) * 1000) || 0;
+    const durations = (cs.animationDuration || '0s').split(',').map(parse);
+    const delays = (cs.animationDelay || '0s').split(',').map(parse);
+    return Math.max(0, ...durations.map((d, i) => d + (delays[i] ?? 0)));
+}
+/**
+ * Keeps a layer mounted after `open` turns false until its exit animation
+ * (`[data-state='closed']` in CSS) has played. With no animation — reduced
+ * motion, forced zero durations, or no stylesheet — it unmounts at once.
+ */
+export function usePresence(open, ref) {
+    const [mounted, setMounted] = useState(open);
+    if (open && !mounted)
+        setMounted(true);
+    useIsoLayoutEffect(() => {
+        if (open || !mounted)
+            return;
+        const el = ref.current;
+        const ms = el ? longestAnimation(el) : 0;
+        if (!el || ms <= 0) {
+            setMounted(false);
+            return;
+        }
+        const done = () => setMounted(false);
+        const onEnd = (e) => {
+            if (e.target === el)
+                done();
+        };
+        el.addEventListener('animationend', onEnd);
+        const t = setTimeout(done, ms + 60);
+        return () => {
+            el.removeEventListener('animationend', onEnd);
+            clearTimeout(t);
+        };
+    }, [open, mounted]);
+    return open || mounted;
+}
+//# sourceMappingURL=interaction.js.map

package/dist/internal/interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction.js","sourceRoot":"","sources":["../../src/internal/interaction.ts"],"names":[],"mappings":"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"}

package/dist/internal/layers.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Close on Escape (topmost layer only) and on pointer-down outside every
+ * element in `inside`.
+ */
+export declare function useDismiss(active: boolean, inside: Array<React.RefObject<HTMLElement | null>>, onDismiss: () => void, options?: {
+    outside?: boolean;
+}): void;
+/** Keep Tab inside `ref` while active; restore focus to the opener afterwards. */
+export declare function useFocusTrap(active: boolean, ref: React.RefObject<HTMLElement | null>, restore?: boolean): void;
+/** Roving focus over `selector` items inside a container (arrow keys, Home, End). */
+export declare function rovingKeyDown(e: React.KeyboardEvent<HTMLElement>, selector: string, orientation?: 'horizontal' | 'vertical' | 'both'): HTMLElement | null;
+//# sourceMappingURL=layers.d.ts.map

package/dist/internal/layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers.d.ts","sourceRoot":"","sources":["../../src/internal/layers.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,OAAO,EACf,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,EAClD,SAAS,EAAE,MAAM,IAAI,EACrB,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,GAClC,IAAI,CA+BN;AAED,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,OAAO,UAAO,GAAG,IAAI,CAiC5G;AAED,qFAAqF;AACrF,wBAAgB,aAAa,CAC3B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EACnC,QAAQ,EAAE,MAAM,EAChB,WAAW,GAAE,YAAY,GAAG,UAAU,GAAG,MAAmB,GAC3D,WAAW,GAAG,IAAI,CAiBpB"}

package/dist/internal/layers.js

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import { focusables } from './util.js';
+/** Stack of open dismissable layers, so Escape closes only the topmost. */
+const stack = [];
+/**
+ * Close on Escape (topmost layer only) and on pointer-down outside every
+ * element in `inside`.
+ */
+export function useDismiss(active, inside, onDismiss, options = {}) {
+    const cb = useRef(onDismiss);
+    cb.current = onDismiss;
+    const insideRef = useRef(inside);
+    insideRef.current = inside;
+    const outside = options.outside ?? true;
+    useEffect(() => {
+        if (!active)
+            return;
+        const id = Symbol('layer');
+        stack.push(id);
+        const onKey = (e) => {
+            if (e.key === 'Escape' && stack[stack.length - 1] === id) {
+                e.stopPropagation();
+                cb.current();
+            }
+        };
+        const onPointer = (e) => {
+            if (!outside || stack[stack.length - 1] !== id)
+                return;
+            const t = e.target;
+            if (t && insideRef.current.some((r) => r.current?.contains(t)))
+                return;
+            cb.current();
+        };
+        document.addEventListener('keydown', onKey);
+        document.addEventListener('pointerdown', onPointer);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('pointerdown', onPointer);
+            const i = stack.indexOf(id);
+            if (i >= 0)
+                stack.splice(i, 1);
+        };
+    }, [active, outside]);
+}
+/** Keep Tab inside `ref` while active; restore focus to the opener afterwards. */
+export function useFocusTrap(active, ref, restore = true) {
+    useEffect(() => {
+        if (!active)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        const previous = document.activeElement;
+        const auto = el.querySelector('[data-autofocus]') ?? focusables(el)[0] ?? el;
+        auto.focus();
+        const onKey = (e) => {
+            if (e.key !== 'Tab')
+                return;
+            const items = focusables(el);
+            if (items.length === 0) {
+                e.preventDefault();
+                el.focus();
+                return;
+            }
+            const first = items[0];
+            const last = items[items.length - 1];
+            const current = document.activeElement;
+            if (e.shiftKey && (current === first || current === el)) {
+                e.preventDefault();
+                last?.focus();
+            }
+            else if (!e.shiftKey && current === last) {
+                e.preventDefault();
+                first?.focus();
+            }
+        };
+        el.addEventListener('keydown', onKey);
+        return () => {
+            el.removeEventListener('keydown', onKey);
+            if (restore && previous && document.contains(previous))
+                previous.focus();
+        };
+    }, [active, ref, restore]);
+}
+/** Roving focus over `selector` items inside a container (arrow keys, Home, End). */
+export function rovingKeyDown(e, selector, orientation = 'vertical') {
+    const items = Array.from(e.currentTarget.querySelectorAll(selector)).filter((el) => !el.hasAttribute('disabled') && el.getAttribute('aria-disabled') !== 'true');
+    if (items.length === 0)
+        return null;
+    const i = items.indexOf(document.activeElement);
+    const next = (orientation !== 'horizontal' && e.key === 'ArrowDown') || (orientation !== 'vertical' && e.key === 'ArrowRight');
+    const prev = (orientation !== 'horizontal' && e.key === 'ArrowUp') || (orientation !== 'vertical' && e.key === 'ArrowLeft');
+    let target;
+    if (next)
+        target = items[(i + 1) % items.length];
+    else if (prev)
+        target = items[(i - 1 + items.length) % items.length];
+    else if (e.key === 'Home')
+        target = items[0];
+    else if (e.key === 'End')
+        target = items[items.length - 1];
+    if (!target)
+        return null;
+    e.preventDefault();
+    target.focus();
+    return target;
+}
+//# sourceMappingURL=layers.js.map

package/dist/internal/layers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers.js","sourceRoot":"","sources":["../../src/internal/layers.ts"],"names":[],"mappings":"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"}

package/dist/internal/util.d.ts

@@ -0,0 +1,9 @@
+export type Size = 'sm' | 'md' | 'lg' | 'xl';
+export type Tone = 'neutral' | 'signal';
+export declare function cx(...parts: Array<string | false | null | undefined>): string;
+/** Controlled/uncontrolled state: `value` wins when defined. */
+export declare function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void): [T, (next: T) => void];
+export declare const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]):not([type=\"hidden\"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"]),[contenteditable=\"true\"]";
+export declare function focusables(root: HTMLElement): HTMLElement[];
+export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;
+//# sourceMappingURL=util.d.ts.map

package/dist/internal/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/internal/util.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExC,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,CAE7E;AAED,gEAAgE;AAChE,wBAAgB,eAAe,CAAC,CAAC,EAC/B,KAAK,EAAE,CAAC,GAAG,SAAS,EACpB,YAAY,EAAE,CAAC,EACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,GAC3B,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAcxB;AAED,eAAO,MAAM,SAAS,6LACgK,CAAC;AAEvL,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW,EAAE,CAI3D;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAO3F"}

package/dist/internal/util.js

@@ -0,0 +1,33 @@
+import { useCallback, useRef, useState } from 'react';
+export function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+/** Controlled/uncontrolled state: `value` wins when defined. */
+export function useControllable(value, defaultValue, onChange) {
+    const [inner, setInner] = useState(defaultValue);
+    const controlled = value !== undefined;
+    const current = controlled ? value : inner;
+    const ref = useRef(onChange);
+    ref.current = onChange;
+    const set = useCallback((next) => {
+        if (!controlled)
+            setInner(next);
+        ref.current?.(next);
+    }, [controlled]);
+    return [current, set];
+}
+export const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
+export function focusables(root) {
+    return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => !el.hasAttribute('inert') && el.getAttribute('aria-hidden') !== 'true');
+}
+export function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }
+    };
+}
+//# sourceMappingURL=util.js.map

package/dist/internal/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/internal/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,UAAU,EAAE,CAAC,GAAG,KAA+C;IACnE,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzC,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,eAAe,CAC7B,KAAoB,EACpB,YAAe,EACf,QAA4B;IAE5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,YAAY,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,CAAC;IACvC,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7B,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC;IACvB,MAAM,GAAG,GAAG,WAAW,CACrB,CAAC,IAAO,EAAE,EAAE;QACV,IAAI,CAAC,UAAU;YAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAChC,GAAG,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IACF,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GACpB,oLAAoL,CAAC;AAEvL,MAAM,UAAU,UAAU,CAAC,IAAiB;IAC1C,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,SAAS,CAAC,CAAC,CAAC,MAAM,CACrE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,MAAM,CAC/E,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS,CAAI,GAAG,IAAqC;IACnE,OAAO,CAAC,IAAI,EAAE,EAAE;QACd,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,IAAI,CAAC,CAAC;iBACpC,IAAI,GAAG;gBAAG,GAAiC,CAAC,OAAO,GAAG,IAAI,CAAC;QAClE,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"}

package/dist/layout.d.ts

@@ -0,0 +1,34 @@
+type Space = 0 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64;
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
+    direction?: 'row' | 'column';
+    gap?: Space;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+    as?: 'div' | 'section' | 'ul' | 'ol' | 'header' | 'footer' | 'nav' | 'main' | 'form';
+}
+export declare function Stack({ direction, gap, align, justify, wrap, as: Tag, className, style, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** A column count, or a minimum column width for an auto-fill grid. */
+    columns?: number | {
+        min: number;
+    };
+    gap?: Space;
+}
+export declare function Grid({ columns, gap, className, style, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    sidebar?: React.ReactNode;
+    topBar?: React.ReactNode;
+    /** Id of <main>, the target for a skip link. */
+    mainId?: string;
+    skipLabel?: string;
+}
+/** Sidebar, top bar and a single <main> landmark, with a skip link. */
+export declare function AppShell({ sidebar, topBar, mainId, skipLabel, className, children, ...rest }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export interface TopBarProps extends React.HTMLAttributes<HTMLElement> {
+    start?: React.ReactNode;
+    end?: React.ReactNode;
+}
+export declare function TopBar({ start, end, className, children, ...rest }: TopBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAKvE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACnE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACtF;AAID,wBAAgB,KAAK,CAAC,EAAE,SAAoB,EAAE,GAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAY,EAAE,EAAE,EAAE,GAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CAe5I;AAID,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC;CACb;AAED,wBAAgB,IAAI,CAAC,EAAE,OAAW,EAAE,GAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAGnF;AAID,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAkB,EAAE,SAA6B,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAe3I;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAQ/E"}

package/dist/layout.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Server-component safe: no state, no context.
+import { cx } from './internal/util.js';
+const space = (n) => (n === undefined ? undefined : n === 0 ? '0' : `var(--ns-space-${n})`);
+const flex = { start: 'flex-start', end: 'flex-end', center: 'center', stretch: 'stretch', baseline: 'baseline', between: 'space-between' };
+export function Stack({ direction = 'column', gap = 8, align, justify, wrap = false, as: Tag = 'div', className, style, ...rest }) {
+    return (_jsx(Tag, { ...rest, className: cx('ns-stack', className), style: {
+            flexDirection: direction,
+            gap: space(gap),
+            alignItems: align && flex[align],
+            justifyContent: justify && flex[justify],
+            flexWrap: wrap ? 'wrap' : undefined,
+            ...style,
+        } }));
+}
+export function Grid({ columns = 2, gap = 16, className, style, ...rest }) {
+    const template = typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : `repeat(auto-fill, minmax(${columns.min}px, 1fr))`;
+    return _jsx("div", { ...rest, className: cx('ns-grid', className), style: { gridTemplateColumns: template, gap: space(gap), ...style } });
+}
+/** Sidebar, top bar and a single <main> landmark, with a skip link. */
+export function AppShell({ sidebar, topBar, mainId = 'ns-main', skipLabel = 'Skip to content', className, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: cx('ns-app-shell', !sidebar && 'ns-app-shell--no-sidebar', className), children: [_jsx("a", { className: "ns-skip-link", href: `#${mainId}`, children: skipLabel }), sidebar && _jsx("div", { className: "ns-app-shell__sidebar", children: sidebar }), _jsxs("div", { className: "ns-app-shell__column", children: [topBar, _jsx("main", { id: mainId, className: "ns-app-shell__main", tabIndex: -1, children: children })] })] }));
+}
+export function TopBar({ start, end, className, children, ...rest }) {
+    return (_jsxs("header", { ...rest, className: cx('ns-top-bar', className), children: [start && _jsx("div", { className: "ns-top-bar__start", children: start }), _jsx("div", { className: "ns-top-bar__center", children: children }), end && _jsx("div", { className: "ns-top-bar__end", children: end })] }));
+}
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"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"}

package/dist/motion.d.ts

@@ -0,0 +1,36 @@
+export declare function prefersReducedMotion(): boolean;
+/** True where the View Transitions API is available and motion is allowed. */
+export declare function canViewTransition(): boolean;
+/**
+ * Runs a React state update inside `document.startViewTransition` where it is
+ * supported (flushing synchronously so the new DOM is captured), and plainly
+ * everywhere else. With `scope`, only that element is named for the
+ * transition (as `name`, default `ns-step`) and only while it runs, so several
+ * instances on one page never clash. Returns true when a view transition ran.
+ */
+export declare function withViewTransition(update: () => void, scope?: HTMLElement | null, name?: string): boolean;
+/** A stable callback version of `withViewTransition`. */
+export declare function useViewTransition(): (update: () => void, scope?: HTMLElement | null, name?: string) => boolean;
+type RevealTag = 'div' | 'section' | 'article' | 'li' | 'ul' | 'ol' | 'span' | 'header' | 'footer';
+export interface RevealProps extends React.HTMLAttributes<HTMLElement> {
+    /** Stagger the direct children in sequence instead of revealing as one block. */
+    stagger?: boolean;
+    /** Extra delay before the reveal, in ms. */
+    delay?: number;
+    /** How the content arrives. Default `rise`. */
+    effect?: 'rise' | 'fade' | 'scale';
+    /** Reveal again each time it re-enters the viewport. Default false. */
+    repeat?: boolean;
+    /** Fraction of the element visible before it reveals. Default 0.15. */
+    threshold?: number;
+    as?: RevealTag;
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * Fades and rises its content in when it scrolls into view. The server HTML
+ * and no-JS render are fully visible: the element is only held back once the
+ * observer is attached. Under reduced motion it shows at once.
+ */
+export declare function Reveal({ stagger, delay, effect, repeat, threshold, as: Tag, className, style, ref, ...rest }: RevealProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=motion.d.ts.map

package/dist/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../src/motion.tsx"],"names":[],"mappings":"AAQA,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C;AAID,8EAA8E;AAC9E,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,SAAY,GAAG,OAAO,CAgB5G;AAED,yDAAyD;AACzD,wBAAgB,iBAAiB,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAE9G;AAED,KAAK,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEnG,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,OAAe,EAAE,KAAS,EAAE,MAAe,EAAE,MAAc,EAAE,SAAgB,EAAE,EAAE,EAAE,GAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAkCrK"}

package/dist/motion.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Motion utilities without a motion library: a scroll-linked Reveal on
+// IntersectionObserver, and a View Transitions wrapper for step and tab
+// changes. Both do nothing visible under prefers-reduced-motion.
+import { useCallback, useEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
+import { cx, mergeRefs } from './internal/util.js';
+export function prefersReducedMotion() {
+    return typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/** True where the View Transitions API is available and motion is allowed. */
+export function canViewTransition() {
+    return typeof document !== 'undefined' && typeof document.startViewTransition === 'function' && !prefersReducedMotion();
+}
+/**
+ * Runs a React state update inside `document.startViewTransition` where it is
+ * supported (flushing synchronously so the new DOM is captured), and plainly
+ * everywhere else. With `scope`, only that element is named for the
+ * transition (as `name`, default `ns-step`) and only while it runs, so several
+ * instances on one page never clash. Returns true when a view transition ran.
+ */
+export function withViewTransition(update, scope, name = 'ns-step') {
+    if (!canViewTransition()) {
+        update();
+        return false;
+    }
+    if (scope)
+        scope.style.setProperty('view-transition-name', name);
+    try {
+        const t = document.startViewTransition(() => flushSync(update));
+        const clear = () => scope?.style.removeProperty('view-transition-name');
+        t.finished.then(clear, clear);
+    }
+    catch {
+        scope?.style.removeProperty('view-transition-name');
+        update();
+        return false;
+    }
+    return true;
+}
+/** A stable callback version of `withViewTransition`. */
+export function useViewTransition() {
+    return useCallback((update, scope, name) => withViewTransition(update, scope, name), []);
+}
+/**
+ * Fades and rises its content in when it scrolls into view. The server HTML
+ * and no-JS render are fully visible: the element is only held back once the
+ * observer is attached. Under reduced motion it shows at once.
+ */
+export function Reveal({ stagger = false, delay = 0, effect = 'rise', repeat = false, threshold = 0.15, as: Tag = 'div', className, style, ref, ...rest }) {
+    const node = useRef(null);
+    useEffect(() => {
+        const el = node.current;
+        if (!el)
+            return;
+        if (typeof IntersectionObserver === 'undefined' || prefersReducedMotion()) {
+            el.setAttribute('data-reveal', 'in');
+            return;
+        }
+        el.setAttribute('data-reveal', 'pending');
+        const io = new IntersectionObserver((entries) => {
+            for (const e of entries) {
+                if (e.isIntersecting) {
+                    el.setAttribute('data-reveal', 'in');
+                    if (!repeat)
+                        io.disconnect();
+                }
+                else if (repeat)
+                    el.setAttribute('data-reveal', 'pending');
+            }
+        }, { threshold, rootMargin: '0px 0px -8% 0px' });
+        io.observe(el);
+        return () => io.disconnect();
+    }, [repeat, threshold]);
+    return (_jsx(Tag, { ...rest, ref: mergeRefs(ref, (el) => {
+            node.current = el;
+        }), className: cx('ns-reveal', `ns-reveal--${effect}`, stagger && 'ns-reveal--stagger', className), style: delay ? { '--ns-reveal-delay': `${delay}ms`, ...style } : style }));
+}
+//# sourceMappingURL=motion.js.map

package/dist/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sourceRoot":"","sources":["../src/motion.tsx"],"names":[],"mappings":"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"}