@spatika/react 1.0.0

package/dist/lib/cover-chrome.js

@@ -0,0 +1,23 @@
+import { cn } from "./cn";
+/** Floating glass pill sitting on a generated / photo cover. */
+export function coverFloatingShellClass(_ink, className) {
+    return cn("cover-floating-shell", className);
+}
+export function coverFloatingIconClass(ink) {
+    return ink === "light"
+        ? "text-white/90 hover:bg-white/20 hover:text-white"
+        : "text-zinc-800 hover:bg-zinc-950/[0.08] hover:text-zinc-950";
+}
+export function coverPlateClass(ink) {
+    return ink === "light"
+        ? "border border-white/18 bg-black/40 backdrop-blur-[24px] backdrop-saturate-150 shadow-[0_8px_36px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.18)]"
+        : "border border-white/60 bg-white/55 backdrop-blur-[20px] backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.8)]";
+}
+export function coverTitleClass(ink) {
+    return ink === "light"
+        ? "text-white [text-shadow:0_1px_10px_rgba(0,0,0,0.4)]"
+        : "text-zinc-950";
+}
+export function coverMutedClass(ink) {
+    return ink === "light" ? "text-white/70" : "text-zinc-600";
+}

package/dist/lib/cover-pattern.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Seeded cover scenes for profile / story heroes.
+ * Compact kit set — journalD ships a larger catalog; kinds here keep the same
+ * contract (palette, headerInk, chromeInk, layered SVG geometry).
+ */
+export declare const COVER_PATTERN_KINDS: readonly ["mountains", "aurora", "ocean", "meadow", "dusk", "lake"];
+export type CoverPatternKind = (typeof COVER_PATTERN_KINDS)[number];
+export type CoverPatternInput = {
+    seed: string;
+    hue: number;
+    secondaryHue?: number;
+    tertiaryHue?: number;
+    dark?: boolean;
+    warm?: boolean;
+    kind?: CoverPatternKind | null;
+};
+export type CoverNaturePalette = {
+    skyTop: string;
+    skyBottom: string;
+    far: string;
+    mid: string;
+    near: string;
+    accent: string;
+    water: string;
+    highlight: string;
+    star: string;
+};
+export type CoverCircle = {
+    cx: number;
+    cy: number;
+    r: number;
+    fill: string;
+    opacity?: number;
+};
+export type CoverEllipse = {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+    fill?: string;
+    opacity?: number;
+};
+export type CoverPath = {
+    d: string;
+    fill?: string;
+    opacity?: number;
+};
+export type CoverPolygon = {
+    points: string;
+    fill: string;
+    opacity?: number;
+};
+/** `light` = white-ish text on a dark scene; `dark` = near-black text on a pale scene. */
+export type CoverHeaderInk = "light" | "dark";
+export type CoverScene = {
+    kind: CoverPatternKind;
+    palette: CoverNaturePalette;
+    uid: string;
+    skyStyle: {
+        backgroundColor: string;
+        backgroundImage: string;
+    };
+    headerInk: CoverHeaderInk;
+    chromeInk: CoverHeaderInk;
+    polygons: CoverPolygon[];
+    paths: CoverPath[];
+    ellipses: CoverEllipse[];
+    circles: CoverCircle[];
+};
+export type CoverPattern = CoverScene;
+export declare function isCoverPatternKind(value: string | null | undefined): value is CoverPatternKind;
+export declare function getCoverPattern(input: CoverPatternInput): CoverScene;
+export declare function getCoverPatternStyle(input: CoverPatternInput): CoverScene["skyStyle"];
+export declare function getCoverPatternKind(input: CoverPatternInput): CoverPatternKind;
+//# sourceMappingURL=cover-pattern.d.ts.map

package/dist/lib/cover-pattern.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cover-pattern.d.ts","sourceRoot":"","sources":["../../src/lib/cover-pattern.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,mBAAmB,qEAOtB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,0FAA0F;AAC1F,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,kBAAkB,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE;QAAE,eAAe,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;AAgCtC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,IAAI,gBAAgB,CAE9F;AA0FD,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,GAAG,UAAU,CAyBpE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,iBAAiB,GAAG,UAAU,CAAC,UAAU,CAAC,CAErF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB,GAAG,gBAAgB,CAE9E"}

package/dist/lib/cover-pattern.js

@@ -0,0 +1,135 @@
+/**
+ * Seeded cover scenes for profile / story heroes.
+ * Compact kit set — journalD ships a larger catalog; kinds here keep the same
+ * contract (palette, headerInk, chromeInk, layered SVG geometry).
+ */
+export const COVER_PATTERN_KINDS = [
+    "mountains",
+    "aurora",
+    "ocean",
+    "meadow",
+    "dusk",
+    "lake",
+];
+const VW = 1600;
+const VH = 420;
+function hashSeed(value) {
+    let hash = 2166136261;
+    const source = value || "User";
+    for (let i = 0; i < source.length; i++) {
+        hash ^= source.charCodeAt(i);
+        hash = Math.imul(hash, 16777619);
+    }
+    return hash >>> 0;
+}
+function wrapHue(hue) {
+    return ((hue % 360) + 360) % 360;
+}
+function pick(hash, salt, modulo) {
+    return (hash + salt * 2654435761) % modulo;
+}
+function hsl(h, s, l) {
+    return `hsl(${Math.round(wrapHue(h))} ${Math.round(s)}% ${Math.round(l)}%)`;
+}
+function parseHslL(color) {
+    const match = color.match(/hsl\(\s*[\d.]+\s+[\d.]+%\s+([\d.]+)%\s*\)/i);
+    return match ? Number(match[1]) : null;
+}
+export function isCoverPatternKind(value) {
+    return Boolean(value && COVER_PATTERN_KINDS.includes(value));
+}
+function buildPalette(kind, hue, secondary, dark) {
+    const skyL = dark ? 14 : kind === "dusk" || kind === "aurora" ? 28 : 78;
+    const landL = dark ? 18 : 42;
+    const shift = kind === "ocean" || kind === "lake" ? 18 : 0;
+    return {
+        skyTop: hsl(hue + (kind === "aurora" ? 40 : 8), dark ? 38 : 52, skyL + (dark ? 0 : 8)),
+        skyBottom: hsl(hue + shift, dark ? 32 : 48, skyL - 8),
+        far: hsl(secondary, 28, landL + 12),
+        mid: hsl(hue + 12, 34, landL),
+        near: hsl(hue - 8, 38, landL - 8),
+        accent: hsl(hue + 48, 62, dark ? 58 : 52),
+        water: hsl(hue + 18 + shift, 42, dark ? 28 : 48),
+        highlight: hsl(hue + 20, 70, dark ? 72 : 88),
+        star: hsl(hue, 20, 96),
+    };
+}
+function getCoverHeaderInk(palette) {
+    const samples = [palette.near, palette.mid, palette.skyBottom];
+    const luma = samples.reduce((sum, color) => sum + (parseHslL(color) ?? 50), 0) / samples.length;
+    return luma < 36 ? "light" : "dark";
+}
+function getCoverChromeInk(palette) {
+    const luma = parseHslL(palette.skyTop);
+    return (luma ?? 50) < 42 ? "light" : "dark";
+}
+function ridge(y, amp, phase, fill) {
+    const steps = 8;
+    let d = `M0 ${VH} L0 ${y}`;
+    for (let i = 1; i <= steps; i++) {
+        const x = (VW / steps) * i;
+        const wave = Math.sin((i + phase) * 0.9) * amp;
+        d += ` L${x} ${y + wave}`;
+    }
+    d += ` L${VW} ${VH} Z`;
+    return { d, fill };
+}
+function buildScene(kind, hash, palette) {
+    const sunX = 220 + pick(hash, 3, 1100);
+    const sunY = kind === "dusk" ? 90 : 70;
+    const sunR = kind === "aurora" ? 28 : 46;
+    const paths = [
+        ridge(250, 28, pick(hash, 5, 6), palette.far),
+        ridge(290, 36, pick(hash, 7, 6), palette.mid),
+        ridge(340, 22, pick(hash, 9, 6), palette.near),
+    ];
+    const circles = [
+        { cx: sunX, cy: sunY, r: sunR, fill: palette.highlight, opacity: 0.9 },
+    ];
+    const ellipses = [];
+    if (kind === "ocean" || kind === "lake") {
+        paths.push({
+            d: `M0 310 Q400 280 800 320 T${VW} 300 L${VW} ${VH} L0 ${VH} Z`,
+            fill: palette.water,
+            opacity: 0.85,
+        });
+    }
+    if (kind === "aurora") {
+        ellipses.push({ cx: 480, cy: 90, rx: 340, ry: 48, fill: palette.accent, opacity: 0.35 }, { cx: 980, cy: 70, rx: 280, ry: 36, fill: palette.highlight, opacity: 0.28 });
+    }
+    if (kind === "meadow") {
+        circles.push({ cx: 180, cy: 360, r: 14, fill: palette.accent, opacity: 0.7 }, { cx: 420, cy: 380, r: 10, fill: palette.highlight, opacity: 0.65 }, { cx: 1280, cy: 350, r: 12, fill: palette.accent, opacity: 0.6 });
+    }
+    return { polygons: [], paths, ellipses, circles };
+}
+export function getCoverPattern(input) {
+    const seed = input.seed || "User";
+    const hash = hashSeed(seed);
+    const kind = isCoverPatternKind(input.kind)
+        ? input.kind
+        : COVER_PATTERN_KINDS[pick(hash, 1, COVER_PATTERN_KINDS.length)];
+    const dark = Boolean(input.dark);
+    const warmth = input.warm ? 8 : 0;
+    const hue = wrapHue(input.hue + warmth);
+    const secondary = wrapHue((input.secondaryHue ?? input.hue + 28) + warmth);
+    const palette = buildPalette(kind, hue, secondary, dark);
+    const drawn = buildScene(kind, hash, palette);
+    return {
+        kind,
+        palette,
+        uid: `n${hash.toString(36)}-${kind}`,
+        headerInk: getCoverHeaderInk(palette),
+        chromeInk: getCoverChromeInk(palette),
+        skyStyle: {
+            backgroundColor: palette.skyBottom,
+            backgroundImage: `linear-gradient(180deg, ${palette.skyTop} 0%, ${palette.skyBottom} 72%)`,
+        },
+        ...drawn,
+    };
+}
+export function getCoverPatternStyle(input) {
+    return getCoverPattern(input).skyStyle;
+}
+export function getCoverPatternKind(input) {
+    return getCoverPattern(input).kind;
+}

package/dist/lib/overlay-stack.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+/**
+ * Stacking layers for portaled UI.
+ *
+ * App shells (e.g. journalD fullscreen story editor) often use z-index ~9999.
+ * Floating menus sit just above that; modal dialogs sit above menus.
+ */
+export declare const OVERLAY_Z_INDEX: {
+    /** Popovers / selects that are not competing with fullscreen editors. */
+    readonly popover: 90;
+    /** Dropdown menus (including menus opened inside fullscreen editors). */
+    readonly menu: 10000;
+    /** Modal overlays + dialog/sheet/alert content. */
+    readonly modal: 11000;
+};
+/** Inline styles that beat consumer `.glass { position: relative }` rules. */
+export declare function fixedLayerStyle(zIndex: number, extra?: React.CSSProperties): React.CSSProperties;
+/**
+ * Radix-compatible synthetic event for menu `onSelect`.
+ * Callers use `event.preventDefault()` to keep the menu open.
+ */
+export declare function createSelectEvent(): Event;
+//# sourceMappingURL=overlay-stack.d.ts.map

package/dist/lib/overlay-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-stack.d.ts","sourceRoot":"","sources":["../../src/lib/overlay-stack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;;GAKG;AACH,eAAO,MAAM,eAAe;IAC1B,yEAAyE;;IAEzE,yEAAyE;;IAEzE,mDAAmD;;CAE3C,CAAC;AAEX,8EAA8E;AAC9E,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,GAC1B,KAAK,CAAC,aAAa,CAMrB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,KAAK,CAUzC"}

package/dist/lib/overlay-stack.js

@@ -0,0 +1,37 @@
+/**
+ * Stacking layers for portaled UI.
+ *
+ * App shells (e.g. journalD fullscreen story editor) often use z-index ~9999.
+ * Floating menus sit just above that; modal dialogs sit above menus.
+ */
+export const OVERLAY_Z_INDEX = {
+    /** Popovers / selects that are not competing with fullscreen editors. */
+    popover: 90,
+    /** Dropdown menus (including menus opened inside fullscreen editors). */
+    menu: 10000,
+    /** Modal overlays + dialog/sheet/alert content. */
+    modal: 11000,
+};
+/** Inline styles that beat consumer `.glass { position: relative }` rules. */
+export function fixedLayerStyle(zIndex, extra) {
+    return {
+        position: "fixed",
+        zIndex,
+        ...extra,
+    };
+}
+/**
+ * Radix-compatible synthetic event for menu `onSelect`.
+ * Callers use `event.preventDefault()` to keep the menu open.
+ */
+export function createSelectEvent() {
+    let prevented = false;
+    return {
+        preventDefault() {
+            prevented = true;
+        },
+        get defaultPrevented() {
+            return prevented;
+        },
+    };
+}

package/dist/lib/portal.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type PortalProps = {
+    children: React.ReactNode;
+    container?: HTMLElement | null;
+};
+/**
+ * Renders children into `document.body` (or a provided container) via React portal.
+ * Mounts synchronously on the client so floating content can be measured in the
+ * same layout pass (avoids width=0 positioning flashes).
+ */
+export declare function Portal({ children, container }: PortalProps): React.ReactPortal | null;
+//# sourceMappingURL=portal.d.ts.map

package/dist/lib/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/lib/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,WAAW,4BAO1D"}

package/dist/lib/portal.js

@@ -0,0 +1,12 @@
+import { createPortal } from "react-dom";
+/**
+ * Renders children into `document.body` (or a provided container) via React portal.
+ * Mounts synchronously on the client so floating content can be measured in the
+ * same layout pass (avoids width=0 positioning flashes).
+ */
+export function Portal({ children, container }) {
+    const target = container ?? (typeof document !== "undefined" ? document.body : null);
+    if (!target)
+        return null;
+    return createPortal(children, target);
+}

package/dist/lib/slot.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type SlotProps = React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+};
+/**
+ * Renders as its single React element child, merging Slot props onto that child.
+ * Used for `asChild` composition on Button, Badge, and overlay triggers.
+ */
+export declare const Slot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=slot.d.ts.map

package/dist/lib/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../src/lib/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyC/B,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI;eAPJ,KAAK,CAAC,SAAS;qCAyB3B,CAAC"}

package/dist/lib/slot.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { composeRefs } from "./compose-refs";
+/**
+ * Merges two prop objects, composing event handlers and classNames,
+ * and merging style objects. Used by Slot for asChild composition.
+ */
+function mergeProps(slotProps, childProps) {
+    const override = { ...childProps };
+    for (const propName of Object.keys(slotProps)) {
+        const slotValue = slotProps[propName];
+        const childValue = childProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            if (slotValue && childValue) {
+                override[propName] = (...args) => {
+                    childValue(...args);
+                    slotValue(...args);
+                };
+            }
+            else if (slotValue) {
+                override[propName] = slotValue;
+            }
+        }
+        else if (propName === "style") {
+            override[propName] = {
+                ...(slotValue || {}),
+                ...(childValue || {}),
+            };
+        }
+        else if (propName === "className") {
+            override[propName] = [slotValue, childValue].filter(Boolean).join(" ");
+        }
+        else if (childValue === undefined) {
+            override[propName] = slotValue;
+        }
+    }
+    return override;
+}
+/**
+ * Renders as its single React element child, merging Slot props onto that child.
+ * Used for `asChild` composition on Button, Badge, and overlay triggers.
+ */
+export const Slot = React.forwardRef(({ children, ...props }, forwardedRef) => {
+    if (!React.isValidElement(children)) {
+        return null;
+    }
+    const child = children;
+    const childProps = (child.props ?? {});
+    const merged = mergeProps(props, childProps);
+    return React.cloneElement(child, {
+        ...merged,
+        ref: composeRefs(forwardedRef, child.ref),
+    });
+});
+Slot.displayName = "Slot";

package/dist/lib/surfaces.d.ts

@@ -0,0 +1,14 @@
+export declare const surfaceRadiusCard = "rounded-[var(--radius-card)]";
+export declare const surfaceRadiusControl = "rounded-[var(--radius-control)]";
+export declare const surfaceRadiusPill = "rounded-[var(--radius-pill)]";
+/** Soft profile-style card radius (squarish). */
+export declare const surfaceRadiusProfile = "rounded-lg";
+/** Primary elevated card (About / hero panels). */
+export declare const surfacePrimaryClass: string;
+/** Quieter secondary card. */
+export declare const surfaceSecondaryClass: string;
+/** Detail glass card with soft elevation. */
+export declare const surfaceDetailClass: string;
+/** Minimal dashed supporting strip. */
+export declare const surfaceTertiaryClass: string;
+//# sourceMappingURL=surfaces.d.ts.map

package/dist/lib/surfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../../src/lib/surfaces.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,iCAAiC,CAAC;AAChE,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AACtE,eAAO,MAAM,iBAAiB,iCAAiC,CAAC;AAEhE,iDAAiD;AACjD,eAAO,MAAM,oBAAoB,eAAe,CAAC;AAEjD,mDAAmD;AACnD,eAAO,MAAM,mBAAmB,QAS/B,CAAC;AAEF,8BAA8B;AAC9B,eAAO,MAAM,qBAAqB,QAQjC,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,kBAAkB,QAS9B,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,oBAAoB,QAOhC,CAAC"}

package/dist/lib/surfaces.js

@@ -0,0 +1,18 @@
+/**
+ * Surface / card hierarchy class recipes.
+ * Use with GlassCard or SurfaceCard rather than copying Tailwind strings.
+ */
+import { cn } from "./cn";
+export const surfaceRadiusCard = "rounded-[var(--radius-card)]";
+export const surfaceRadiusControl = "rounded-[var(--radius-control)]";
+export const surfaceRadiusPill = "rounded-[var(--radius-pill)]";
+/** Soft profile-style card radius (squarish). */
+export const surfaceRadiusProfile = "rounded-lg";
+/** Primary elevated card (About / hero panels). */
+export const surfacePrimaryClass = cn("relative h-full overflow-hidden", surfaceRadiusProfile, "border border-border/20", "bg-gradient-to-br from-card via-card to-primary/[0.06] dark:from-card/95 dark:via-card/90 dark:to-primary/[0.08]", "p-3.5 sm:p-5 lg:p-6", "shadow-[0_18px_40px_-24px_rgba(0,0,0,0.35)] dark:shadow-[0_22px_48px_-20px_rgba(0,0,0,0.65)]", "ring-1 ring-inset ring-white/25 dark:ring-white/8", "backdrop-blur-xl");
+/** Quieter secondary card. */
+export const surfaceSecondaryClass = cn("relative h-full overflow-hidden", surfaceRadiusProfile, "border border-border/20", "bg-muted/25 dark:bg-muted/15", "p-3 sm:p-3.5 lg:p-4", "shadow-none", "backdrop-blur-md");
+/** Detail glass card with soft elevation. */
+export const surfaceDetailClass = cn("relative h-full overflow-hidden", surfaceRadiusProfile, "border border-border/25", "bg-card/95 dark:bg-card/80", "p-3 sm:p-4 lg:p-5", "shadow-[0_10px_28px_-18px_rgba(0,0,0,0.28)] dark:shadow-[0_14px_32px_-16px_rgba(0,0,0,0.55)]", "ring-1 ring-inset ring-white/40 dark:ring-white/8", "backdrop-blur-xl");
+/** Minimal dashed supporting strip. */
+export const surfaceTertiaryClass = cn("relative overflow-hidden", surfaceRadiusProfile, "border border-dashed border-border/30", "bg-transparent dark:bg-muted/5", "p-3 sm:p-3.5", "shadow-none");

package/dist/lib/themes.d.ts

@@ -0,0 +1,16 @@
+/** Supported theme identifiers applied as classes on a root element. */
+export declare const THEME_IDS: readonly ["mukta", "neelam", "usha", "sandhya"];
+export type ThemeId = (typeof THEME_IDS)[number];
+export declare const DEFAULT_THEME: ThemeId;
+/** Default `localStorage` key used by the docs site and `SpatikaThemeProvider`. */
+export declare const SPATIKA_THEME_STORAGE_KEY = "spk-theme";
+export declare const THEME_LABELS: Record<ThemeId, string>;
+export declare function isThemeId(value: unknown): value is ThemeId;
+export declare function isDarkTheme(theme: ThemeId): boolean;
+/** Read a persisted theme. Returns `null` when missing or invalid. */
+export declare function readStoredTheme(storageKey?: string | false): ThemeId | null;
+/** Persist a theme. No-op when `storageKey` is unset. */
+export declare function writeStoredTheme(storageKey: string | false | undefined, theme: ThemeId): void;
+/** Apply a theme class to an element (defaults to `<html>`). */
+export declare function applyTheme(theme: ThemeId, target?: HTMLElement | null): void;
+//# sourceMappingURL=themes.d.ts.map

package/dist/lib/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/lib/themes.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,eAAO,MAAM,SAAS,iDAAkD,CAAC;AAEzE,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,eAAO,MAAM,aAAa,EAAE,OAAiB,CAAC;AAE9C,mFAAmF;AACnF,eAAO,MAAM,yBAAyB,cAAc,CAAC;AAErD,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAKhD,CAAC;AAIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,OAAO,CAE1D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAEnD;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,CAQ3E;AAED,yDAAyD;AACzD,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAO7F;AAED,gEAAgE;AAChE,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,QASrE"}

package/dist/lib/themes.js

@@ -0,0 +1,53 @@
+/** Supported theme identifiers applied as classes on a root element. */
+export const THEME_IDS = ["mukta", "neelam", "usha", "sandhya"];
+export const DEFAULT_THEME = "mukta";
+/** Default `localStorage` key used by the docs site and `SpatikaThemeProvider`. */
+export const SPATIKA_THEME_STORAGE_KEY = "spk-theme";
+export const THEME_LABELS = {
+    mukta: "Mukta",
+    neelam: "Neelam",
+    usha: "Usha",
+    sandhya: "Sandhya",
+};
+const THEME_CLASS_LIST = ["neelam", "usha", "sandhya"];
+export function isThemeId(value) {
+    return typeof value === "string" && THEME_IDS.includes(value);
+}
+export function isDarkTheme(theme) {
+    return theme === "neelam" || theme === "sandhya";
+}
+/** Read a persisted theme. Returns `null` when missing or invalid. */
+export function readStoredTheme(storageKey) {
+    if (!storageKey || typeof window === "undefined")
+        return null;
+    try {
+        const value = window.localStorage.getItem(storageKey);
+        return isThemeId(value) ? value : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** Persist a theme. No-op when `storageKey` is unset. */
+export function writeStoredTheme(storageKey, theme) {
+    if (!storageKey || typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(storageKey, theme);
+    }
+    catch {
+        // Private mode / quota — keep the in-memory theme.
+    }
+}
+/** Apply a theme class to an element (defaults to `<html>`). */
+export function applyTheme(theme, target) {
+    if (typeof document === "undefined")
+        return;
+    const root = target ?? document.documentElement;
+    root.classList.remove(...THEME_CLASS_LIST);
+    if (theme !== DEFAULT_THEME) {
+        root.classList.add(theme);
+    }
+    root.setAttribute("data-spk-theme", theme);
+    root.style.colorScheme = isDarkTheme(theme) ? "dark" : "light";
+}

package/dist/lib/typography.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Named typography roles for the Spatika design language.
+ * Prefer these over ad-hoc text-[10px] font-black uppercase strings.
+ */
+/** Uppercase micro-label (section kickers, chip group titles). */
+export declare const typographyEyebrow = "text-[10px] font-black uppercase tracking-widest text-muted-foreground/70";
+/** Slightly stronger eyebrow for page bands. */
+export declare const typographyBandEyebrow = "text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/55";
+/** Compact card / filter section title. */
+export declare const typographySectionLabel = "text-[10px] font-black uppercase tracking-widest text-muted-foreground";
+/** Primary page title treatment (pairs with .app-title CSS when preferred). */
+export declare const typographyPageTitle = "text-2xl font-black tracking-tight text-foreground sm:text-3xl";
+/** Supporting copy under titles. */
+export declare const typographyPageSubtitle = "text-sm font-medium leading-relaxed text-muted-foreground";
+/** Dense body used in admin / settings panels. */
+export declare const typographyBodyDense = "text-sm font-medium leading-snug text-foreground";
+//# sourceMappingURL=typography.d.ts.map

package/dist/lib/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/lib/typography.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,kEAAkE;AAClE,eAAO,MAAM,iBAAiB,8EAC+C,CAAC;AAE9E,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,+EAC4C,CAAC;AAE/E,2CAA2C;AAC3C,eAAO,MAAM,sBAAsB,2EACuC,CAAC;AAE3E,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,mEACkC,CAAC;AAEnE,oCAAoC;AACpC,eAAO,MAAM,sBAAsB,8DAC0B,CAAC;AAE9D,kDAAkD;AAClD,eAAO,MAAM,mBAAmB,qDAAqD,CAAC"}

package/dist/lib/typography.js

@@ -0,0 +1,16 @@
+/**
+ * Named typography roles for the Spatika design language.
+ * Prefer these over ad-hoc text-[10px] font-black uppercase strings.
+ */
+/** Uppercase micro-label (section kickers, chip group titles). */
+export const typographyEyebrow = "text-[10px] font-black uppercase tracking-widest text-muted-foreground/70";
+/** Slightly stronger eyebrow for page bands. */
+export const typographyBandEyebrow = "text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/55";
+/** Compact card / filter section title. */
+export const typographySectionLabel = "text-[10px] font-black uppercase tracking-widest text-muted-foreground";
+/** Primary page title treatment (pairs with .app-title CSS when preferred). */
+export const typographyPageTitle = "text-2xl font-black tracking-tight text-foreground sm:text-3xl";
+/** Supporting copy under titles. */
+export const typographyPageSubtitle = "text-sm font-medium leading-relaxed text-muted-foreground";
+/** Dense body used in admin / settings panels. */
+export const typographyBodyDense = "text-sm font-medium leading-snug text-foreground";

package/dist/lib/use-controllable-state.d.ts

@@ -0,0 +1,12 @@
+type UseControllableStateParams<T> = {
+    prop?: T;
+    defaultProp?: T;
+    onChange?: (value: T) => void;
+};
+/**
+ * Controlled/uncontrolled state helper (Radix-style).
+ * When `prop` is provided the state is controlled; otherwise it uses local state.
+ */
+export declare function useControllableState<T>({ prop, defaultProp, onChange, }: UseControllableStateParams<T>): [T | undefined, (value: T | ((prev: T | undefined) => T)) => void];
+export {};
+//# sourceMappingURL=use-controllable-state.d.ts.map

package/dist/lib/use-controllable-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-state.d.ts","sourceRoot":"","sources":["../../src/lib/use-controllable-state.ts"],"names":[],"mappings":"AAEA,KAAK,0BAA0B,CAAC,CAAC,IAAI;IACnC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,GACT,EAAE,0BAA0B,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,SAAS,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAqBpG"}

package/dist/lib/use-controllable-state.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+/**
+ * Controlled/uncontrolled state helper (Radix-style).
+ * When `prop` is provided the state is controlled; otherwise it uses local state.
+ */
+export function useControllableState({ prop, defaultProp, onChange, }) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultProp);
+    const isControlled = prop !== undefined;
+    const value = isControlled ? prop : uncontrolled;
+    const setValue = React.useCallback((next) => {
+        const resolved = typeof next === "function"
+            ? next(value)
+            : next;
+        if (!isControlled) {
+            setUncontrolled(resolved);
+        }
+        onChange?.(resolved);
+    }, [isControlled, onChange, value]);
+    return [value, setValue];
+}

package/dist/lib/use-cover-chrome-bleed.d.ts

@@ -0,0 +1,9 @@
+/** Foreground ink the app chrome should use while it floats over a cover surface. */
+export type CoverChromeInk = "light" | "dark";
+/**
+ * Tells the fixed app header to go transparent so a page cover (profile hero,
+ * story hero, …) can paint through it. Cleared on unmount and whenever the
+ * cover has scrolled away.
+ */
+export declare function useCoverChromeBleed(active: boolean, ink: CoverChromeInk): void;
+//# sourceMappingURL=use-cover-chrome-bleed.d.ts.map

package/dist/lib/use-cover-chrome-bleed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cover-chrome-bleed.d.ts","sourceRoot":"","sources":["../../src/lib/use-cover-chrome-bleed.ts"],"names":[],"mappings":"AAEA,qFAAqF;AACrF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,cAAc,GAAG,IAAI,CAsB9E"}

package/dist/lib/use-cover-chrome-bleed.js

@@ -0,0 +1,28 @@
+import { useLayoutEffect } from "react";
+/**
+ * Tells the fixed app header to go transparent so a page cover (profile hero,
+ * story hero, …) can paint through it. Cleared on unmount and whenever the
+ * cover has scrolled away.
+ */
+export function useCoverChromeBleed(active, ink) {
+    useLayoutEffect(() => {
+        const root = document.documentElement;
+        if (!active) {
+            root.removeAttribute("data-cover-chrome-bleed");
+            root.removeAttribute("data-cover-chrome-ink");
+            root.removeAttribute("data-profile-cover-bleed");
+            root.removeAttribute("data-profile-cover-ink");
+            return;
+        }
+        root.setAttribute("data-cover-chrome-bleed", "true");
+        root.setAttribute("data-cover-chrome-ink", ink);
+        root.setAttribute("data-profile-cover-bleed", "true");
+        root.setAttribute("data-profile-cover-ink", ink);
+        return () => {
+            root.removeAttribute("data-cover-chrome-bleed");
+            root.removeAttribute("data-cover-chrome-ink");
+            root.removeAttribute("data-profile-cover-bleed");
+            root.removeAttribute("data-profile-cover-ink");
+        };
+    }, [active, ink]);
+}