@lab206/ui 0.1.0

package/dist/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAe,MAAM,cAAc,CAAC;AAiB3D,MAAM,WAAW,GAAG,YAAY,CAAC;AAEjC,SAAS,UAAU;IACjB,IAAI,OAAO,YAAY,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IACrD,IAAI,CAAC;QACH,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAC5C,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,MAAM;YAAE,OAAO,CAAC,CAAC;IACnD,CAAC;IAAC,MAAM,CAAC;QACP,kBAAkB;IACpB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,WAAW,CAAC,EAAa;IAChC,IAAI,OAAO,YAAY,KAAK,WAAW;QAAE,OAAO;IAChD,IAAI,CAAC;QACH,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IACxC,CAAC;IAAC,MAAM,CAAC;QACP,kBAAkB;IACpB,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,UAAqB,MAAM;IACvD,gEAAgE;IAChE,MAAM,KAAK,GAAG,UAAU,EAAE,IAAI,OAAO,CAAC;IACtC,MAAM,EAAE,GAAG,MAAM,CAAY,KAAK,CAAC,CAAC;IAEpC,SAAS,GAAG,CAAC,IAAe;QAC1B,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACb,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAED,SAAS,MAAM;QACb,GAAG,CAAC,EAAE,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/C,CAAC;IAED,SAAS,IAAI,CAAC,MAAgB;QAC5B,MAAM,EAAE,GACN,MAAM;YACN,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtE,IAAI,CAAC,EAAE;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAEzB,OAAO,MAAM,CAAC,GAAG,EAAE;YACjB,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AACnC,CAAC"}

package/dist/reactive.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Shared prop reading for form / control primitives.
+ *
+ * Prefer `mergeProps` / `createProps` so accessors and signals unwrap on
+ * property access. These helpers still work on *raw* values when needed
+ * (e.g. reading before merge, or defensive double-unwrap).
+ *
+ * Call inside an `effect` (or JSX reactive binding) so dependencies track.
+ */
+/** Plain value or zero-arg accessor / signal-like function. */
+export type MaybeReactive<T> = T | (() => T);
+/**
+ * Resolve `T | (() => T)`.
+ * - functions with arity 0 (including signals) are called
+ * - multi-arg functions are returned as-is (not used as accessors)
+ * - everything else is returned as-is
+ */
+export declare function readProp<T>(value: MaybeReactive<T> | null | undefined): T | undefined;
+/** Boolean controls (`disabled`, `checked`, …). */
+export declare function readBool(value: MaybeReactive<boolean> | null | undefined): boolean;
+/** String controls (`value`, `placeholder`, …). Nullish → `""`. */
+export declare function readStr(value: MaybeReactive<string> | null | undefined): string;
+/** Numeric controls. Nullish → `fallback`. */
+export declare function readNum(value: MaybeReactive<number> | null | undefined, fallback?: number): number;
+//# sourceMappingURL=reactive.d.ts.map

package/dist/reactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,+DAA+D;AAC/D,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAE7C;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,GAAG,SAAS,CASrF;AAED,mDAAmD;AACnD,wBAAgB,QAAQ,CACtB,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,GAC/C,OAAO,CAET;AAED,mEAAmE;AACnE,wBAAgB,OAAO,CACrB,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,GAC9C,MAAM,CAGR;AAED,8CAA8C;AAC9C,wBAAgB,OAAO,CACrB,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,EAC/C,QAAQ,SAAI,GACX,MAAM,CAIR"}

package/dist/reactive.js

@@ -0,0 +1,43 @@
+/**
+ * Shared prop reading for form / control primitives.
+ *
+ * Prefer `mergeProps` / `createProps` so accessors and signals unwrap on
+ * property access. These helpers still work on *raw* values when needed
+ * (e.g. reading before merge, or defensive double-unwrap).
+ *
+ * Call inside an `effect` (or JSX reactive binding) so dependencies track.
+ */
+/**
+ * Resolve `T | (() => T)`.
+ * - functions with arity 0 (including signals) are called
+ * - multi-arg functions are returned as-is (not used as accessors)
+ * - everything else is returned as-is
+ */
+export function readProp(value) {
+    if (value == null)
+        return undefined;
+    if (typeof value === "function") {
+        // Signals and zero-arg accessors only
+        if (value.length === 0) {
+            return value();
+        }
+    }
+    return value;
+}
+/** Boolean controls (`disabled`, `checked`, …). */
+export function readBool(value) {
+    return !!readProp(value);
+}
+/** String controls (`value`, `placeholder`, …). Nullish → `""`. */
+export function readStr(value) {
+    const v = readProp(value);
+    return v == null ? "" : String(v);
+}
+/** Numeric controls. Nullish → `fallback`. */
+export function readNum(value, fallback = 0) {
+    const v = readProp(value);
+    if (v == null || Number.isNaN(Number(v)))
+        return fallback;
+    return Number(v);
+}
+//# sourceMappingURL=reactive.js.map

package/dist/reactive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactive.js","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAI,KAA0C;IACpE,IAAI,KAAK,IAAI,IAAI;QAAE,OAAO,SAAS,CAAC;IACpC,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;QAChC,sCAAsC;QACtC,IAAK,KAAyC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5D,OAAQ,KAAiB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,OAAO,KAAU,CAAC;AACpB,CAAC;AAED,mDAAmD;AACnD,MAAM,UAAU,QAAQ,CACtB,KAAgD;IAEhD,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC3B,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,OAAO,CACrB,KAA+C;IAE/C,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACpC,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,OAAO,CACrB,KAA+C,EAC/C,QAAQ,GAAG,CAAC;IAEZ,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,IAAI,CAAC,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAAE,OAAO,QAAQ,CAAC;IAC1D,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AACnB,CAAC"}

package/dist/rovingFocus.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Roving tabindex helpers for Menu, Tabs, List, etc.
+ * @see https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+ */
+export declare function listRovingItems(root: HTMLElement, selector: string): HTMLElement[];
+/** Set tabindex so only `activeIndex` is in sequential tab order. */
+export declare function applyRovingTabIndex(items: HTMLElement[], activeIndex: number): void;
+export declare function focusRovingItem(items: HTMLElement[], index: number): HTMLElement | null;
+export declare function indexOfFocused(items: HTMLElement[], active: Element | null): number;
+export type RovingKeyOptions = {
+    orientation?: "horizontal" | "vertical" | "both";
+    loop?: boolean;
+    /** Home / End jump to ends (default true) */
+    homeEnd?: boolean;
+    /**
+     * Called when the focused item should activate (Enter / Space).
+     * Return true if the event was handled.
+     */
+    onActivate?: (el: HTMLElement, index: number) => boolean | void;
+    /**
+     * Called when focus moves via arrows/home/end.
+     * Return true to also activate (tabs pattern).
+     */
+    onMove?: (el: HTMLElement, index: number) => boolean | void;
+};
+/**
+ * Handle Arrow / Home / End / Enter / Space on a composite widget.
+ * Returns true when the event was consumed.
+ */
+export declare function handleRovingKeydown(e: KeyboardEvent, root: HTMLElement, selector: string, options?: RovingKeyOptions): boolean;
+/**
+ * Initial tabindex setup + focus first/selected item.
+ * Call when a menu opens or a list mounts.
+ */
+export declare function initRovingFocus(root: HTMLElement, selector: string, preferredIndex?: number): number;
+//# sourceMappingURL=rovingFocus.d.ts.map

package/dist/rovingFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rovingFocus.d.ts","sourceRoot":"","sources":["../src/rovingFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,MAAM,GACf,WAAW,EAAE,CAQf;AAED,qEAAqE;AACrE,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAAE,EACpB,WAAW,EAAE,MAAM,GAClB,IAAI,CAIN;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,MAAM,GACZ,WAAW,GAAG,IAAI,CAOpB;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,EAAE,EACpB,MAAM,EAAE,OAAO,GAAG,IAAI,GACrB,MAAM,CAGR;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IAChE;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;CAC7D,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,CAAC,EAAE,aAAa,EAChB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,gBAAqB,GAC7B,OAAO,CAgFT;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,MAAM,EAChB,cAAc,SAAI,GACjB,MAAM,CAMR"}

package/dist/rovingFocus.js

@@ -0,0 +1,127 @@
+/**
+ * Roving tabindex helpers for Menu, Tabs, List, etc.
+ * @see https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+ */
+export function listRovingItems(root, selector) {
+    return [...root.querySelectorAll(selector)].filter((el) => {
+        if (el.hasAttribute("disabled"))
+            return false;
+        if (el.getAttribute("aria-disabled") === "true")
+            return false;
+        // hidden from a11y tree
+        if (el.getAttribute("aria-hidden") === "true")
+            return false;
+        return true;
+    });
+}
+/** Set tabindex so only `activeIndex` is in sequential tab order. */
+export function applyRovingTabIndex(items, activeIndex) {
+    items.forEach((el, i) => {
+        el.tabIndex = i === activeIndex ? 0 : -1;
+    });
+}
+export function focusRovingItem(items, index) {
+    if (items.length === 0)
+        return null;
+    const i = Math.max(0, Math.min(items.length - 1, index));
+    applyRovingTabIndex(items, i);
+    const el = items[i];
+    el.focus();
+    return el;
+}
+export function indexOfFocused(items, active) {
+    if (!active)
+        return -1;
+    return items.findIndex((el) => el === active || el.contains(active));
+}
+/**
+ * Handle Arrow / Home / End / Enter / Space on a composite widget.
+ * Returns true when the event was consumed.
+ */
+export function handleRovingKeydown(e, root, selector, options = {}) {
+    const { orientation = "vertical", loop = true, homeEnd = true, onActivate, onMove, } = options;
+    const items = listRovingItems(root, selector);
+    if (items.length === 0)
+        return false;
+    const doc = root.ownerDocument;
+    let idx = indexOfFocused(items, doc.activeElement);
+    if (idx < 0)
+        idx = 0;
+    const key = e.key;
+    const vertical = orientation === "vertical" || orientation === "both";
+    const horizontal = orientation === "horizontal" || orientation === "both";
+    let next = idx;
+    let moved = false;
+    if (vertical && key === "ArrowDown") {
+        next = loop
+            ? (idx + 1) % items.length
+            : Math.min(items.length - 1, idx + 1);
+        moved = true;
+    }
+    else if (vertical && key === "ArrowUp") {
+        next = loop
+            ? (idx - 1 + items.length) % items.length
+            : Math.max(0, idx - 1);
+        moved = true;
+    }
+    else if (horizontal && key === "ArrowRight") {
+        next = loop
+            ? (idx + 1) % items.length
+            : Math.min(items.length - 1, idx + 1);
+        moved = true;
+    }
+    else if (horizontal && key === "ArrowLeft") {
+        next = loop
+            ? (idx - 1 + items.length) % items.length
+            : Math.max(0, idx - 1);
+        moved = true;
+    }
+    else if (homeEnd && key === "Home") {
+        next = 0;
+        moved = true;
+    }
+    else if (homeEnd && key === "End") {
+        next = items.length - 1;
+        moved = true;
+    }
+    else if (key === "Enter" || key === " ") {
+        e.preventDefault();
+        const el = items[idx];
+        onActivate?.(el, idx);
+        return true;
+    }
+    else {
+        return false;
+    }
+    if (!moved || next === idx && key !== "Home" && key !== "End") {
+        // still prevent scroll for arrows even if clamped
+        if (key === "ArrowDown" ||
+            key === "ArrowUp" ||
+            key === "ArrowLeft" ||
+            key === "ArrowRight" ||
+            key === "Home" ||
+            key === "End") {
+            e.preventDefault();
+            return true;
+        }
+        return false;
+    }
+    e.preventDefault();
+    const el = focusRovingItem(items, next);
+    if (el)
+        onMove?.(el, next);
+    return true;
+}
+/**
+ * Initial tabindex setup + focus first/selected item.
+ * Call when a menu opens or a list mounts.
+ */
+export function initRovingFocus(root, selector, preferredIndex = 0) {
+    const items = listRovingItems(root, selector);
+    if (items.length === 0)
+        return -1;
+    const i = Math.max(0, Math.min(items.length - 1, preferredIndex));
+    applyRovingTabIndex(items, i);
+    return i;
+}
+//# sourceMappingURL=rovingFocus.js.map

package/dist/rovingFocus.js.map

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

package/dist/size-entries/form-kit.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Size entry: golden-path form surface only (tree-shake probe).
+ * Measured by scripts/size.ts — not a public export.
+ */
+export { Button } from "../components/Button.js";
+export { Input } from "../components/Input.js";
+export { Field } from "../components/Field.js";
+export { Stack } from "../components/Stack.js";
+export { Text } from "../components/Text.js";
+export { createTheme } from "../theme.js";
+export { required, emailFormat, firstError } from "../form.js";
+//# sourceMappingURL=form-kit.d.ts.map

package/dist/size-entries/form-kit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-kit.d.ts","sourceRoot":"","sources":["../../src/size-entries/form-kit.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/size-entries/form-kit.js

@@ -0,0 +1,12 @@
+/**
+ * Size entry: golden-path form surface only (tree-shake probe).
+ * Measured by scripts/size.ts — not a public export.
+ */
+export { Button } from "../components/Button.js";
+export { Input } from "../components/Input.js";
+export { Field } from "../components/Field.js";
+export { Stack } from "../components/Stack.js";
+export { Text } from "../components/Text.js";
+export { createTheme } from "../theme.js";
+export { required, emailFormat, firstError } from "../form.js";
+//# sourceMappingURL=form-kit.js.map

package/dist/size-entries/form-kit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-kit.js","sourceRoot":"","sources":["../../src/size-entries/form-kit.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Inject a component stylesheet once per document.
+ * Use this when writing new primitives — 3 lines of setup.
+ *
+ * @example
+ * ```ts
+ * const ensure = createStyleSheet("my-thing", `.pu-my { color: var(--pu-color-accent); }`);
+ * export const MyThing = component((props) => {
+ *   ensure();
+ *   return <div class="pu-my" ref={(el) => ensure(el.ownerDocument)}>{props.children}</div>;
+ * });
+ * ```
+ *
+ * **Customize without forking:** override CSS variables on a wrapper
+ * (`style={{ "--pu-color-accent": "#69BE28" }}`) or restyle via
+ * `[data-pu-ui="my-thing"]` rules / class props.
+ */
+export declare function createStyleSheet(id: string, css: string): (doc?: Document) => void;
+/**
+ * Build a style object of CSS custom properties for the `style` prop.
+ * Keys may omit the leading `--` (both `"pu-color-accent"` and `"--pu-x"` work).
+ *
+ * @example
+ * ```tsx
+ * <Card style={styleVars({ "pu-color-accent": "#69BE28", "pu-radius-md": "12px" })} />
+ * ```
+ */
+export declare function styleVars(vars: Record<string, string | number | undefined | null>): Record<string, string | number>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,IAC/B,MAAK,QAAmB,KAAG,IAAI,CAQvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,GACvD,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAYjC"}

package/dist/styles.js

@@ -0,0 +1,53 @@
+/**
+ * Inject a component stylesheet once per document.
+ * Use this when writing new primitives — 3 lines of setup.
+ *
+ * @example
+ * ```ts
+ * const ensure = createStyleSheet("my-thing", `.pu-my { color: var(--pu-color-accent); }`);
+ * export const MyThing = component((props) => {
+ *   ensure();
+ *   return <div class="pu-my" ref={(el) => ensure(el.ownerDocument)}>{props.children}</div>;
+ * });
+ * ```
+ *
+ * **Customize without forking:** override CSS variables on a wrapper
+ * (`style={{ "--pu-color-accent": "#69BE28" }}`) or restyle via
+ * `[data-pu-ui="my-thing"]` rules / class props.
+ */
+export function createStyleSheet(id, css) {
+    return function ensure(doc = document) {
+        if (typeof doc === "undefined")
+            return;
+        if (doc.querySelector(`style[data-pu-ui="${id}"]`))
+            return;
+        const el = doc.createElement("style");
+        el.setAttribute("data-pu-ui", id);
+        el.textContent = css;
+        doc.head.appendChild(el);
+    };
+}
+/**
+ * Build a style object of CSS custom properties for the `style` prop.
+ * Keys may omit the leading `--` (both `"pu-color-accent"` and `"--pu-x"` work).
+ *
+ * @example
+ * ```tsx
+ * <Card style={styleVars({ "pu-color-accent": "#69BE28", "pu-radius-md": "12px" })} />
+ * ```
+ */
+export function styleVars(vars) {
+    const out = {};
+    for (const [key, value] of Object.entries(vars)) {
+        if (value == null || value === "")
+            continue;
+        const name = key.startsWith("--")
+            ? key
+            : key.startsWith("pu-")
+                ? `--${key}`
+                : `--${key}`;
+        out[name] = value;
+    }
+    return out;
+}
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAU,EAAE,GAAW;IACtD,OAAO,SAAS,MAAM,CAAC,MAAgB,QAAQ;QAC7C,IAAI,OAAO,GAAG,KAAK,WAAW;YAAE,OAAO;QACvC,IAAI,GAAG,CAAC,aAAa,CAAC,qBAAqB,EAAE,IAAI,CAAC;YAAE,OAAO;QAC3D,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACtC,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;QAClC,EAAE,CAAC,WAAW,GAAG,GAAG,CAAC;QACrB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,SAAS,CACvB,IAAwD;IAExD,MAAM,GAAG,GAAoC,EAAE,CAAC;IAChD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAChD,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE;YAAE,SAAS;QAC5C,MAAM,IAAI,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC;YAC/B,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC;gBACrB,CAAC,CAAC,KAAK,GAAG,EAAE;gBACZ,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;QACjB,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;IACpB,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,22 @@
+import { type Signal } from "@lab206/core";
+export type ThemeMode = "light" | "dark";
+export interface ThemeController {
+    /** Current mode signal */
+    mode: Signal<ThemeMode>;
+    setMode(mode: ThemeMode): void;
+    toggle(): void;
+    /** Apply `data-pu-theme` on an element (default: document.documentElement) */
+    bind(target?: Element): () => void;
+}
+/**
+ * Create a theme controller. Tokens switch via `data-pu-theme` on the root.
+ *
+ * @example
+ * ```ts
+ * const theme = createTheme("dark");
+ * theme.bind(); // <html data-pu-theme="dark">
+ * theme.toggle();
+ * ```
+ */
+export declare function createTheme(initial?: ThemeMode): ThemeController;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAGnD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,eAAe;IAC9B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IACxB,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,MAAM,IAAI,IAAI,CAAC;IACf,8EAA8E;IAC9E,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,IAAI,CAAC;CACpC;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,SAAmB,GAAG,eAAe,CAuBzE"}

package/dist/theme.js

@@ -0,0 +1,32 @@
+import { signal } from "@lab206/core";
+import { effect } from "@lab206/core";
+/**
+ * Create a theme controller. Tokens switch via `data-pu-theme` on the root.
+ *
+ * @example
+ * ```ts
+ * const theme = createTheme("dark");
+ * theme.bind(); // <html data-pu-theme="dark">
+ * theme.toggle();
+ * ```
+ */
+export function createTheme(initial = "light") {
+    const mode = signal(initial);
+    function setMode(next) {
+        mode.set(next);
+    }
+    function toggle() {
+        mode.update((m) => (m === "light" ? "dark" : "light"));
+    }
+    function bind(target) {
+        const el = target ??
+            (typeof document !== "undefined" ? document.documentElement : null);
+        if (!el)
+            return () => { };
+        return effect(() => {
+            el.setAttribute("data-pu-theme", mode());
+        });
+    }
+    return { mode, setMode, toggle, bind };
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAe,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAatC;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,UAAqB,OAAO;IACtD,MAAM,IAAI,GAAG,MAAM,CAAY,OAAO,CAAC,CAAC;IAExC,SAAS,OAAO,CAAC,IAAe;QAC9B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC;IAED,SAAS,MAAM;QACb,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,SAAS,IAAI,CAAC,MAAgB;QAC5B,MAAM,EAAE,GACN,MAAM;YACN,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtE,IAAI,CAAC,EAAE;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAEzB,OAAO,MAAM,CAAC,GAAG,EAAE;YACjB,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AACzC,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+/** Join class names, skipping falsy. */
+export declare function cx(...parts: Array<string | false | null | undefined | Record<string, boolean | undefined | null>>): string;
+/** Stable-enough unique id for a11y wiring (dialog titles, field labels, …). */
+export declare function puId(prefix?: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,wBAAgB,EAAE,CAChB,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC,GAC9F,MAAM,CAaR;AAID,gFAAgF;AAChF,wBAAgB,IAAI,CAAC,MAAM,SAAO,GAAG,MAAM,CAG1C"}

package/dist/utils.js

@@ -0,0 +1,24 @@
+/** Join class names, skipping falsy. */
+export function cx(...parts) {
+    const out = [];
+    for (const p of parts) {
+        if (!p)
+            continue;
+        if (typeof p === "string") {
+            out.push(p);
+            continue;
+        }
+        for (const key of Object.keys(p)) {
+            if (p[key])
+                out.push(key);
+        }
+    }
+    return out.join(" ");
+}
+let uidSeq = 0;
+/** Stable-enough unique id for a11y wiring (dialog titles, field labels, …). */
+export function puId(prefix = "pu") {
+    uidSeq += 1;
+    return `${prefix}-${uidSeq.toString(36)}`;
+}
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,MAAM,UAAU,EAAE,CAChB,GAAG,KAA4F;IAE/F,MAAM,GAAG,GAAa,EAAE,CAAC;IACzB,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,IAAI,CAAC,CAAC;YAAE,SAAS;QACjB,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;YAC1B,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACZ,SAAS;QACX,CAAC;QACD,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,CAAC,GAAG,CAAC;gBAAE,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;IACD,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACvB,CAAC;AAED,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf,gFAAgF;AAChF,MAAM,UAAU,IAAI,CAAC,MAAM,GAAG,IAAI;IAChC,MAAM,IAAI,CAAC,CAAC;IACZ,OAAO,GAAG,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;AAC5C,CAAC"}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@lab206/ui",
+  "version": "0.1.0",
+  "description": "Powers design system — tokens, primitives, and token-mapped utilities (batteries included).",
+  "type": "module",
+  "license": "BUSL-1.1",
+  "sideEffects": [
+    "./src/styles/tokens.css",
+    "./src/styles/base.css",
+    "./src/styles/utilities.css",
+    "./src/styles/theme.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./tokens.css": "./src/styles/tokens.css",
+    "./base.css": "./src/styles/base.css",
+    "./utilities.css": "./src/styles/utilities.css",
+    "./theme.css": "./src/styles/theme.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.css",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/code-connect/**",
+    "!src/**/*.figma.ts"
+  ],
+  "dependencies": {
+    "@lab206/core": "0.1.0",
+    "@lab206/dom": "0.1.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.1",
+    "happy-dom": "^17.4.4",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2"
+  },
+  "author": "Scott Powers",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://lab206.com",
+  "bugs": {
+    "url": "https://github.com/spowers2/powers/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/spowers2/powers.git",
+    "directory": "packages/ui"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --import tsx --test src/*.test.ts",
+    "size": "node --import tsx scripts/size.ts"
+  }
+}