fancy-ui-react 0.2.0

package/dist/cameleon/FancyProvider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { Skin } from "./types.js";
+export interface FancyProviderProps {
+    /** The active skin. Changing it re-flows the whole subtree live. */
+    skin: Skin;
+    /** Scope `.dark` to this subtree for skins whose colorScheme is "dark". */
+    manageColorScheme?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function FancyProvider({ skin, manageColorScheme, className, children, }: FancyProviderProps): import("react").JSX.Element;

package/dist/cameleon/FancyProvider.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useEffect } from "react";
+import { cn } from "../utils.js";
+import { SkinReactContext } from "./context.js";
+/* empty css             */
+function FancyProvider({
+  skin,
+  manageColorScheme = false,
+  className = "",
+  children
+}) {
+  const ctx = useMemo(() => ({ skin }), [skin]);
+  const styleVars = useMemo(() => ({ ...skin.tokens }), [skin.tokens]);
+  useEffect(() => {
+    if (!skin.fonts) return;
+    for (const font of skin.fonts) {
+      if (document.getElementById(font.id)) continue;
+      const link = document.createElement("link");
+      link.id = font.id;
+      link.rel = "stylesheet";
+      link.href = font.href;
+      document.head.appendChild(link);
+    }
+  }, [skin.fonts]);
+  return /* @__PURE__ */ jsx(SkinReactContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-skin": skin.name,
+      className: cn(
+        "cameleon-root",
+        manageColorScheme && skin.colorScheme === "dark" && "dark",
+        className
+      ),
+      style: styleVars,
+      children
+    }
+  ) });
+}
+export {
+  FancyProvider
+};

package/dist/cameleon/context.d.ts

@@ -0,0 +1,22 @@
+import type { Skin } from "./types.js";
+/**
+ * The context value is a plain object holding the active skin, not the skin
+ * itself. <FancyProvider> builds a fresh `{ skin }` object whenever its `skin`
+ * prop changes, so its identity changes and every consumer re-renders — this
+ * is what makes a live skin switch reactive. (Mirrors the getter-object shape
+ * of the Svelte context, which relies on Svelte's own reactivity instead.)
+ */
+export interface SkinContext {
+    readonly skin: Skin;
+}
+/**
+ * The skin context itself, public as the React stand-in for the Svelte barrel's
+ * `setSkinContext`: a shell can render `<SkinReactContext.Provider value={{ skin }}>`
+ * to skin a subtree without <FancyProvider>'s wrapper <div>. That element is what
+ * carries the skin's tokens as scoped CSS variables, the `data-skin` attribute, the
+ * optional `.dark` class and the webfont <link> injection, so a caller taking this
+ * path supplies those itself. <FancyProvider> stays the normal entry point.
+ */
+export declare const SkinReactContext: import("react").Context<SkinContext | null>;
+/** Read the active skin. Falls back to the default skin with no provider. */
+export declare function useSkin(): SkinContext;

package/dist/cameleon/context.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, useContext } from "react";
+import { defaultSkin } from "./skins/default.js";
+const SkinReactContext = createContext(null);
+const FALLBACK = {
+  get skin() {
+    return defaultSkin;
+  }
+};
+function useSkin() {
+  return useContext(SkinReactContext) ?? FALLBACK;
+}
+export {
+  SkinReactContext,
+  useSkin
+};

package/dist/cameleon/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Cameleon Engine — multi-skin UI primitives for fancy-ui.
+ *
+ * Same component API, radically different art directions ("skins"): each skin
+ * carries tokens (CSS custom properties), recipes (pure functions returning
+ * class strings per primitive), optional ornaments and per-skin CSS.
+ *
+ * Published as `fancy-ui-react/cameleon`. Consumers wrap a subtree:
+ *
+ *   import { FancyProvider, Button, brutalSkin } from "fancy-ui-react/cameleon";
+ *   <FancyProvider skin={brutalSkin}> ... </FancyProvider>
+ *
+ * Two name-level differences from the Svelte barrel, both deliberate:
+ *   - `setSkinContext` has no React counterpart — <FancyProvider> is the setter.
+ *     `SkinReactContext` is exported in its place for a shell that must install
+ *     a skin without the provider's wrapper <div> (see its own doc comment for
+ *     what that element carries and therefore what the caller takes on).
+ *   - The retro-OS component kit, published on the Svelte side as
+ *     `fancy-ui-svelte/cameleon/retro-kit`, has no React equivalent: this
+ *     package declares the `./cameleon` subpath and nothing under it.
+ */
+export { FancyProvider, type FancyProviderProps } from "./FancyProvider.js";
+export { useSkin, SkinReactContext, type SkinContext } from "./context.js";
+export type { Skin, SkinRecipes, SkinOrnaments, SkinFont, SkinMeta, RecipeFn, RecipeArgs, RecipeResult, PartState, } from "./types.js";
+export * from "./primitives/index.js";
+export { defaultSkin } from "./skins/default.js";
+export { auroraSkin } from "./skins/aurora/index.js";
+export { brutalSkin } from "./skins/brutal/index.js";
+export { glassSkin } from "./skins/glass/index.js";
+export { terminalSkin } from "./skins/terminal/index.js";
+export { retroOsSkin } from "./skins/retro-os/index.js";

package/dist/cameleon/index.js

@@ -0,0 +1,39 @@
+import { FancyProvider } from "./FancyProvider.js";
+import { SkinReactContext, useSkin } from "./context.js";
+import { defaultSkin } from "./skins/default.js";
+import { auroraSkin } from "./skins/aurora/index.js";
+import { brutalSkin } from "./skins/brutal/index.js";
+import { glassSkin } from "./skins/glass/index.js";
+import { terminalSkin } from "./skins/terminal/index.js";
+import { retroOsSkin } from "./skins/retro-os/index.js";
+import { Button } from "./primitives/Button.js";
+import { Input } from "./primitives/Input.js";
+import { Textarea } from "./primitives/Textarea.js";
+import { Select } from "./primitives/Select.js";
+import { Checkbox } from "./primitives/Checkbox.js";
+import { Radio } from "./primitives/Radio.js";
+import { Switch } from "./primitives/Switch.js";
+import { Slider } from "./primitives/Slider.js";
+import { Badge } from "./primitives/Badge.js";
+import { Tooltip } from "./primitives/Tooltip.js";
+export {
+  Badge,
+  Button,
+  Checkbox,
+  FancyProvider,
+  Input,
+  Radio,
+  Select,
+  SkinReactContext,
+  Slider,
+  Switch,
+  Textarea,
+  Tooltip,
+  auroraSkin,
+  brutalSkin,
+  defaultSkin,
+  glassSkin,
+  retroOsSkin,
+  terminalSkin,
+  useSkin
+};

package/dist/cameleon/primitives/Badge.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { PartState } from "../types.js";
+export interface BadgeProps {
+    variant?: "default" | "solid" | "blue" | "red" | "yellow" | "green" | "purple";
+    /** Force a visual state for the /skins state matrix. */
+    demoState?: PartState;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function Badge({ variant, demoState, className, children }: BadgeProps): import("react").JSX.Element;

package/dist/cameleon/primitives/Badge.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+function Badge({ variant = "default", demoState, className, children }) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.badge({ variant, state: demoState });
+  return /* @__PURE__ */ jsx("span", { className: cn(parts.root, className), children });
+}
+export {
+  Badge
+};

package/dist/cameleon/primitives/Button.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
+    variant?: "primary" | "secondary" | "destructive";
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+    /** Force a visual state for the /skins state matrix (non-interactive). */
+    demoState?: "hover" | "active" | "focus";
+    className?: string;
+    children?: ReactNode;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cameleon/primitives/Button.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+const Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled = false,
+  type = "button",
+  demoState,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const ctx = useSkin();
+  const args = {
+    variant,
+    size,
+    state: demoState ?? (loading ? "loading" : disabled ? "disabled" : "default")
+  };
+  const parts = ctx.skin.recipes.button(args);
+  const trailing = ctx.skin.ornaments?.buttonTrailing;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: cn("cam-btn", parts.root, className),
+      disabled: disabled || loading,
+      "data-variant": variant,
+      ...rest,
+      children: [
+        parts.label !== void 0 ? /* @__PURE__ */ jsx("span", { className: parts.label, children }) : children,
+        trailing ? trailing(args) : null
+      ]
+    }
+  );
+});
+export {
+  Button
+};

package/dist/cameleon/primitives/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import type { PartState } from "../types.js";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "type"> {
+    checked?: boolean;
+    error?: boolean;
+    demoState?: PartState;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cameleon/primitives/Checkbox.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+const Checkbox = forwardRef(function Checkbox2({ checked, error = false, demoState, className, children, ...rest }, ref) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.checkbox({ state: demoState });
+  return /* @__PURE__ */ jsxs("label", { className: cn(parts.root, className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "peer sr-only",
+        ref,
+        checked,
+        "aria-invalid": error,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: parts.box, children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3.5",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    ) }),
+    children
+  ] });
+});
+export {
+  Checkbox
+};

package/dist/cameleon/primitives/Input.d.ts

@@ -0,0 +1,10 @@
+import { type InputHTMLAttributes } from "react";
+import type { PartState } from "../types.js";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className"> {
+    error?: boolean;
+    /** Force a visual state for the /skins state matrix. */
+    demoState?: PartState;
+    className?: string;
+    value?: string;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cameleon/primitives/Input.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+const Input = forwardRef(function Input2({ error = false, demoState, className, ...rest }, ref) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.input({ state: demoState });
+  return /* @__PURE__ */ jsx("input", { ref, className: cn(parts.root, className), "aria-invalid": error, ...rest });
+});
+export {
+  Input
+};

package/dist/cameleon/primitives/Radio.d.ts

@@ -0,0 +1,12 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import type { PartState } from "../types.js";
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "type"> {
+    /** The currently selected value across this radio's group, if controlled. */
+    group?: string;
+    value?: string;
+    error?: boolean;
+    demoState?: PartState;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cameleon/primitives/Radio.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+const Radio = forwardRef(function Radio2({ group, value, name, error = false, demoState, className, children, ...rest }, ref) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.radio({ state: demoState });
+  return /* @__PURE__ */ jsxs("label", { className: cn(parts.root, className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        className: "peer sr-only",
+        ref,
+        name: name ?? group,
+        value,
+        checked: group !== void 0 ? group === value : void 0,
+        "data-invalid": error ? "true" : void 0,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: parts.box }),
+    children
+  ] });
+});
+export {
+  Radio
+};

package/dist/cameleon/primitives/Select.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode, type SelectHTMLAttributes } from "react";
+import type { PartState } from "../types.js";
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "className"> {
+    error?: boolean;
+    demoState?: PartState;
+    className?: string;
+    value?: string;
+    children?: ReactNode;
+}
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/cameleon/primitives/Select.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+const Select = forwardRef(function Select2({ error = false, demoState, className, children, ...rest }, ref) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.select({ state: demoState });
+  return /* @__PURE__ */ jsxs("div", { className: cn(parts.root, className), children: [
+    /* @__PURE__ */ jsx("select", { ref, className: parts.field, "aria-invalid": error, ...rest, children }),
+    /* @__PURE__ */ jsx("span", { className: parts.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    ) })
+  ] });
+});
+export {
+  Select
+};

package/dist/cameleon/primitives/Slider.d.ts

@@ -0,0 +1,7 @@
+import { type InputHTMLAttributes } from "react";
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "type"> {
+    error?: boolean;
+    className?: string;
+    value?: number;
+}
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cameleon/primitives/Slider.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+const Slider = forwardRef(function Slider2({ error = false, className, ...rest }, ref) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.slider({ state: error ? "error" : void 0 });
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "range",
+      ref,
+      className: cn(parts.root, className),
+      "aria-invalid": error || void 0,
+      ...rest
+    }
+  );
+});
+export {
+  Slider
+};

package/dist/cameleon/primitives/Switch.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes } from "react";
+import type { PartState } from "../types.js";
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
+    checked?: boolean;
+    error?: boolean;
+    demoState?: PartState;
+    className?: string;
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cameleon/primitives/Switch.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+const Switch = forwardRef(function Switch2({ checked, error = false, disabled = false, demoState, className, onClick, ...rest }, ref) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.switch({ state: demoState });
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(false);
+  const isControlled = checked !== void 0;
+  const isChecked = isControlled ? checked : uncontrolledChecked;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": isChecked,
+      "aria-invalid": error,
+      disabled,
+      onClick: (event) => {
+        if (!isControlled) setUncontrolledChecked((c) => !c);
+        onClick?.(event);
+      },
+      className: cn(parts.root, className),
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: parts.thumb })
+    }
+  );
+});
+export {
+  Switch
+};

package/dist/cameleon/primitives/Textarea.d.ts

@@ -0,0 +1,9 @@
+import { type TextareaHTMLAttributes } from "react";
+import type { PartState } from "../types.js";
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className"> {
+    error?: boolean;
+    demoState?: PartState;
+    className?: string;
+    value?: string;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cameleon/primitives/Textarea.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+const Textarea = forwardRef(function Textarea2({ error = false, demoState, className, ...rest }, ref) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.textarea({ state: demoState });
+  return /* @__PURE__ */ jsx("textarea", { ref, className: cn(parts.root, className), "aria-invalid": error, ...rest });
+});
+export {
+  Textarea
+};

package/dist/cameleon/primitives/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { PartState } from "../types.js";
+export interface TooltipProps {
+    /** Text shown in the bubble on hover / keyboard focus. */
+    content: string;
+    /** Force a visual state (focus / error) for the /skins state matrix. */
+    demoState?: PartState;
+    /** Force the bubble visible (state matrix). */
+    demoOpen?: boolean;
+    className?: string;
+    /** Trigger contents; defaults to a "?" glyph. */
+    children?: ReactNode;
+}
+export declare function Tooltip({ content, demoState, demoOpen, className, children }: TooltipProps): import("react").JSX.Element;

package/dist/cameleon/primitives/Tooltip.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+import { useSkin } from "../context.js";
+function Tooltip({ content, demoState, demoOpen = false, className, children }) {
+  const ctx = useSkin();
+  const parts = ctx.skin.recipes.tooltip({ state: demoState });
+  return /* @__PURE__ */ jsxs("span", { className: cn(parts.root, className), children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: parts.trigger, "aria-label": content, children: children ?? "?" }),
+    /* @__PURE__ */ jsx("span", { role: "tooltip", className: cn(parts.bubble, demoOpen && "opacity-100"), children: content })
+  ] });
+}
+export {
+  Tooltip
+};

package/dist/cameleon/primitives/index.d.ts

@@ -0,0 +1,10 @@
+export { Button, type ButtonProps } from "./Button.js";
+export { Input, type InputProps } from "./Input.js";
+export { Textarea, type TextareaProps } from "./Textarea.js";
+export { Select, type SelectProps } from "./Select.js";
+export { Checkbox, type CheckboxProps } from "./Checkbox.js";
+export { Radio, type RadioProps } from "./Radio.js";
+export { Switch, type SwitchProps } from "./Switch.js";
+export { Slider, type SliderProps } from "./Slider.js";
+export { Badge, type BadgeProps } from "./Badge.js";
+export { Tooltip, type TooltipProps } from "./Tooltip.js";

package/dist/cameleon/skins/aurora/index.d.ts

@@ -0,0 +1,2 @@
+import type { Skin } from "../../types.js";
+export declare const auroraSkin: Skin;

package/dist/cameleon/skins/aurora/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { auroraTokens } from "./tokens.js";
+import { auroraMeta } from "./meta.js";
+import { auroraRecipes } from "./recipes.js";
+/* empty css           */
+const auroraSkin = {
+  name: "aurora",
+  label: "Aurora",
+  colorScheme: "dark",
+  tokens: auroraTokens,
+  meta: auroraMeta,
+  recipes: auroraRecipes
+};
+export {
+  auroraSkin
+};

package/dist/cameleon/skins/aurora/meta.d.ts

@@ -0,0 +1,3 @@
+import type { SkinMeta } from "../../types.js";
+/** Aurora design metadata — near-black canvas, violet→blue sweep, hairline edges. */
+export declare const auroraMeta: SkinMeta;

package/dist/cameleon/skins/aurora/meta.js

@@ -0,0 +1,61 @@
+"use client";
+const auroraMeta = {
+  palette: [
+    { name: "Canvas", value: "#050508", note: "page" },
+    { name: "Card", value: "#0d0d14", note: "section card" },
+    { name: "Surface", value: "#12121c", note: "inner surface" },
+    { name: "Line 10%", value: "rgba(255,255,255,0.10)", note: "hairline edge" },
+    { name: "Purple", value: "#8b7bff", note: "accent · brand" },
+    { name: "Blue", value: "#5b8cff", note: "accent · info" },
+    { name: "Red", value: "#fb7185", note: "accent · error" },
+    { name: "Yellow", value: "#fbbf24", note: "accent · warn" },
+    { name: "Green", value: "#34d399", note: "accent · ok" }
+  ],
+  type: [
+    {
+      sample: "Display",
+      spec: "SYSTEM SANS 700 · -0.03EM · CLAMP(44, 7VW, 92)",
+      style: "font-size:60px;font-weight:700;letter-spacing:-0.03em;line-height:1.05;"
+    },
+    {
+      sample: "Heading — section title",
+      spec: "SYSTEM SANS 600 · 24–34",
+      style: "font-size:30px;font-weight:600;letter-spacing:-0.02em;"
+    },
+    {
+      sample: "Subheading — panel label",
+      spec: "SYSTEM SANS 500 · 15–18",
+      style: "font-size:17px;font-weight:500;letter-spacing:-0.01em;"
+    },
+    {
+      sample: "Body — A near-black field, one violet accent, and nothing else competing for attention.",
+      spec: "SYSTEM SANS 400 · 14–16 · 1.6 LINE",
+      style: "font-size:15px;font-weight:400;line-height:1.6;max-width:52ch;"
+    },
+    {
+      sample: "mono-label — #8b7bff",
+      spec: "SF MONO 500 · 10–12 + 0.08EM",
+      style: "font-family:var(--skin-font-mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;"
+    }
+  ],
+  specs: {
+    radius: [
+      { size: "10px", label: "button · input" },
+      { size: "14px", label: "card" },
+      { size: "20px", label: "panel" },
+      { size: "999px", label: "pill · badge" }
+    ],
+    border: "1px hairline white at 8–12% opacity; brightens to 25% on hover.",
+    shadowRest: "0 2px 16px rgba(124,58,237,.35) — violet bloom, not a drop shadow",
+    shadowHover: "0 10px 34px rgba(91,140,255,.45)",
+    spacing: "4 / 8 / 14 / 18 / 24"
+  },
+  responsive: [
+    { label: "Desktop ≥1024", note: "1440 max width · 3-col panels · full bloom and glow" },
+    { label: "Tablet 720–1023", note: "2-col panels · bloom radius halved · nav collapses" },
+    { label: "Mobile <720", note: "single column · glow dropped for contrast · 44px targets" }
+  ]
+};
+export {
+  auroraMeta
+};