@lab206/ui 0.1.0

package/dist/components/Code.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "@lab206/dom/jsx-runtime";
+import { component, mergeProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+const styles = `
+.pu-code {
+  font-family: var(--pu-font-mono);
+  font-size: 0.84em;
+  font-feature-settings: "liga" 0;
+}
+.pu-code--inline {
+  padding: 0.12em 0.4em;
+  border-radius: 6px;
+  background: var(--pu-color-surface-2);
+  border: 1px solid var(--pu-color-border);
+  color: var(--pu-color-text);
+}
+.pu-code--block {
+  display: block;
+  margin: 0;
+  padding: var(--pu-space-4) var(--pu-space-5);
+  border-radius: var(--pu-radius-lg);
+  background: var(--pu-gray-900);
+  color: var(--pu-gray-100);
+  border: 1px solid color-mix(in srgb, var(--pu-brand-400) 18%, transparent);
+  overflow-x: auto;
+  line-height: 1.65;
+  white-space: pre;
+  box-shadow: var(--pu-shadow-md);
+}
+[data-pu-theme="dark"] .pu-code--block {
+  background: #080c14;
+}
+.pu-code--block .pu-k { color: var(--pu-brand-300); }
+.pu-code--block .pu-s { color: var(--pu-sage-400); }
+.pu-code--block .pu-c { color: var(--pu-gray-400); }
+.pu-code--block .pu-p { color: #6e8298; }
+`;
+let injected = false;
+function ensureStyles() {
+    if (injected || typeof document === "undefined")
+        return;
+    injected = true;
+    const el = document.createElement("style");
+    el.setAttribute("data-pu-ui", "code");
+    el.textContent = styles;
+    document.head.appendChild(el);
+}
+export const Code = component((raw) => {
+    ensureStyles();
+    const props = mergeProps({ block: false }, raw);
+    const cls = () => cx("pu-code", props.block ? "pu-code--block" : "pu-code--inline", typeof props.class === "function" ? props.class() : props.class);
+    if (props.block) {
+        return _jsx("pre", { class: cls, children: props.children });
+    }
+    return _jsx("code", { class: cls, children: props.children });
+});
+//# sourceMappingURL=Code.js.map

package/dist/components/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/components/Code.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAuB,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AASjC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCd,CAAC;AAEF,IAAI,QAAQ,GAAG,KAAK,CAAC;AACrB,SAAS,YAAY;IACnB,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IACxD,QAAQ,GAAG,IAAI,CAAC;IAChB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACtC,EAAE,CAAC,WAAW,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,GAAc,EAAE,EAAE;IAC/C,YAAY,EAAE,CAAC;IACf,MAAM,KAAK,GAAG,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,CAE7C,CAAC;IACF,MAAM,GAAG,GAAG,GAAG,EAAE,CACf,EAAE,CACA,SAAS,EACT,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAClD,OAAO,KAAK,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAChE,CAAC;IACJ,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,cAAK,KAAK,EAAE,GAAG,YAAG,KAAK,CAAC,QAAiB,GAAO,CAAC;IAC1D,CAAC;IACD,OAAO,eAAM,KAAK,EAAE,GAAG,YAAG,KAAK,CAAC,QAAiB,GAAQ,CAAC;AAC5D,CAAC,CAAC,CAAC"}

package/dist/components/Collapse.d.ts

@@ -0,0 +1,15 @@
+export type CollapseProps = {
+    open: boolean | (() => boolean);
+    class?: string | (() => string);
+    children?: unknown;
+};
+/**
+ * Height-animated show/hide region (CSS grid 0fr → 1fr).
+ * Prefer this over manual max-height hacks.
+ */
+export declare const Collapse: import("@lab206/dom").Component<{
+    open: boolean | (() => boolean);
+    class?: string | (() => string);
+    children?: unknown;
+}>;
+//# sourceMappingURL=Collapse.d.ts.map

package/dist/components/Collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../src/components/Collapse.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAuBF;;;GAGG;AACH,eAAO,MAAM,QAAQ;UA9Bb,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC;YACvB,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC;eACpB,OAAO;EAmElB,CAAC"}

package/dist/components/Collapse.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "@lab206/dom/jsx-runtime";
+import { signal, effect } from "@lab206/core";
+import { component } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+const ensure = createStyleSheet("collapse", `
+.pu-collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pu-duration-slow) var(--pu-ease-out);
+}
+.pu-collapse.is-open {
+  grid-template-rows: 1fr;
+}
+.pu-collapse__inner {
+  overflow: hidden;
+  min-height: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-collapse { transition: none; }
+}
+`);
+/**
+ * Height-animated show/hide region (CSS grid 0fr → 1fr).
+ * Prefer this over manual max-height hacks.
+ */
+export const Collapse = component((raw) => {
+    ensure();
+    const props = raw;
+    const isOpen = () => typeof props.open === "function"
+        ? !!props.open()
+        : !!props.open;
+    // Keep children mounted while open so height can animate; optionally keep for exit
+    const mounted = signal(isOpen());
+    effect(() => {
+        if (isOpen()) {
+            mounted.set(true);
+            return;
+        }
+        // delay unmount slightly so exit anim can run (grid collapse is CSS-driven)
+        const t = window.setTimeout(() => {
+            if (!isOpen())
+                mounted.set(false);
+        }, 280);
+        return () => window.clearTimeout(t);
+    });
+    return (_jsx("div", { class: () => cx("pu-collapse", isOpen() && "is-open", typeof props.class === "function" ? props.class() : props.class), ref: (el) => ensure(el.ownerDocument), children: _jsx("div", { class: "pu-collapse__inner", children: () => (mounted() || isOpen() ? props.children : null) }) }));
+});
+//# sourceMappingURL=Collapse.js.map

package/dist/components/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../src/components/Collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,MAAM,MAAM,GAAG,gBAAgB,CAC7B,UAAU,EACV;;;;;;;;;;;;;;;;CAgBD,CACA,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,GAAkB,EAAE,EAAE;IACvD,MAAM,EAAE,CAAC;IACT,MAAM,KAAK,GAAG,GAAoC,CAAC;IACnD,MAAM,MAAM,GAAG,GAAG,EAAE,CAClB,OAAO,KAAK,CAAC,IAAI,KAAK,UAAU;QAC9B,CAAC,CAAC,CAAC,CAAE,KAAK,CAAC,IAAsB,EAAE;QACnC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAEnB,mFAAmF;IACnF,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IAEjC,MAAM,CAAC,GAAG,EAAE;QACV,IAAI,MAAM,EAAE,EAAE,CAAC;YACb,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAClB,OAAO;QACT,CAAC;QACD,4EAA4E;QAC5E,MAAM,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC/B,IAAI,CAAC,MAAM,EAAE;gBAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,EAAE,GAAG,CAAC,CAAC;QACR,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cACE,KAAK,EAAE,GAAG,EAAE,CACV,EAAE,CACA,aAAa,EACb,MAAM,EAAE,IAAI,SAAS,EACrB,OAAO,KAAK,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAChE,EAEH,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,YAErC,cAAK,KAAK,EAAC,oBAAoB,YAC5B,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,MAAM,EAAE,CAAC,CAAC,CAAE,KAAK,CAAC,QAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,GAC7D,GACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/Combobox.d.ts

@@ -0,0 +1,47 @@
+import { type MaybeReactive } from "../reactive.js";
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type ComboboxProps = {
+    options: MaybeReactive<ComboboxOption[]>;
+    value?: MaybeReactive<string>;
+    placeholder?: string;
+    disabled?: MaybeReactive<boolean>;
+    /**
+     * Async / remote search: show a loading row instead of options or empty.
+     * Pair with a reactive `options` signal that fills when the request settles.
+     */
+    loading?: MaybeReactive<boolean>;
+    /** Empty-state copy when filter yields no options (default: “No matches”) */
+    emptyText?: MaybeReactive<string>;
+    /** Loading-state copy (default: “Loading…”) */
+    loadingText?: MaybeReactive<string>;
+    /** Called with the selected option value */
+    onChange?: (value: string) => void;
+    /** Filter function — default: case-insensitive label includes query */
+    filter?: (opt: ComboboxOption, query: string) => boolean;
+    class?: MaybeReactive<string>;
+    id?: string;
+    "aria-label"?: string;
+};
+/**
+ * Searchable select: type to filter, click or Enter to choose.
+ * For remote data: pass a reactive `options` list + `loading` while fetching.
+ */
+export declare const Combobox: import("@lab206/dom").Component<{
+    options: MaybeReactive<ComboboxOption[]>;
+    value?: MaybeReactive<string>;
+    placeholder?: string;
+    disabled?: MaybeReactive<boolean>;
+    loading?: MaybeReactive<boolean>;
+    emptyText?: MaybeReactive<string>;
+    loadingText?: MaybeReactive<string>;
+    onChange?: (value: string) => void;
+    filter?: (opt: ComboboxOption, query: string) => boolean;
+    class?: MaybeReactive<string>;
+    id?: string;
+    "aria-label"?: string;
+}>;
+//# sourceMappingURL=Combobox.d.ts.map

package/dist/components/Combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEjF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,aAAa,CAAC,cAAc,EAAE,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACjC,6EAA6E;IAC7E,SAAS,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAClC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uEAAuE;IACvE,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAsIF;;;GAGG;AACH,eAAO,MAAM,QAAQ;aA9JV,aAAa,CAAC,cAAc,EAAE,CAAC;YAChC,aAAa,CAAC,MAAM,CAAC;kBACf,MAAM;eACT,aAAa,CAAC,OAAO,CAAC;cAKvB,aAAa,CAAC,OAAO,CAAC;gBAEpB,aAAa,CAAC,MAAM,CAAC;kBAEnB,aAAa,CAAC,MAAM,CAAC;eAExB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aAEzB,CAAC,GAAG,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;YAChD,aAAa,CAAC,MAAM,CAAC;SACxB,MAAM;mBACI,MAAM;EAqZrB,CAAC"}

package/dist/components/Combobox.js

@@ -0,0 +1,325 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@lab206/dom/jsx-runtime";
+import { signal, effect } from "@lab206/core";
+import { For, Show, component, mergeProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { attachOverlay } from "../overlay.js";
+import { readBool, readProp, readStr } from "../reactive.js";
+const styles = `
+.pu-combobox {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+.pu-combobox__input {
+  width: 100%;
+  height: var(--pu-control-h-md);
+  padding: 0 var(--pu-control-px);
+  border-radius: var(--pu-radius-md);
+  border: 1px solid var(--pu-color-control-border, var(--pu-color-border));
+  background: var(--pu-color-surface);
+  color: var(--pu-color-text);
+  box-shadow: var(--pu-shadow-xs);
+  transition:
+    border-color var(--pu-duration) var(--pu-ease),
+    box-shadow var(--pu-duration) var(--pu-ease);
+}
+.pu-combobox__input::placeholder { color: var(--pu-color-text-muted); }
+.pu-combobox__input:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--pu-color-border) 50%, var(--pu-color-text-muted));
+}
+.pu-combobox__input:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--pu-color-accent) 55%, var(--pu-color-border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pu-color-accent) 16%, transparent);
+}
+.pu-combobox__input:disabled { opacity: 0.55; cursor: not-allowed; }
+.pu-combobox__list {
+  position: fixed;
+  z-index: var(--pu-z-overlay);
+  margin: 0;
+  padding: 0.25rem;
+  list-style: none;
+  max-height: 14rem;
+  overflow: auto;
+  border-radius: var(--pu-radius-lg);
+  background: var(--pu-color-surface-elevated);
+  border: 1px solid var(--pu-color-control-border, var(--pu-color-border));
+  box-shadow: var(--pu-shadow-float);
+  display: none;
+  opacity: 0;
+  transform: translateY(4px) scale(0.98);
+  transform-origin: top center;
+  transition:
+    opacity var(--pu-duration) var(--pu-ease-out),
+    transform var(--pu-duration) var(--pu-ease-out);
+}
+.pu-combobox__list.is-open {
+  display: block;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.pu-combobox__list[data-side="top"] {
+  transform-origin: bottom center;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-combobox__list { transition: none; transform: none; }
+  .pu-combobox__list.is-open { transform: none; }
+}
+.pu-combobox__option {
+  display: block;
+  width: 100%;
+  text-align: left;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text);
+  padding: 0.5rem 0.65rem;
+  border-radius: var(--pu-radius-sm);
+  cursor: pointer;
+}
+.pu-combobox__option:hover:not(:disabled),
+.pu-combobox__option.is-active:not(:disabled) {
+  background: var(--pu-color-surface-2);
+}
+.pu-combobox__option:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--pu-color-surface-elevated),
+    0 0 0 4px color-mix(in srgb, var(--pu-color-focus) 55%, transparent);
+  background: var(--pu-color-surface-2);
+}
+.pu-combobox__option:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.pu-combobox__option.is-selected {
+  color: var(--pu-color-accent);
+  font-weight: var(--pu-font-semibold);
+}
+.pu-combobox__status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 0.75rem;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text-muted);
+}
+.pu-combobox__status--loading::before {
+  content: "";
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--pu-color-accent) 30%, transparent);
+  border-top-color: var(--pu-color-accent);
+  animation: pu-combobox-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes pu-combobox-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-combobox__status--loading::before { animation: none; opacity: 0.7; }
+}
+`;
+function ensureStyles(doc = document) {
+    if (typeof doc === "undefined")
+        return;
+    if (doc.querySelector('style[data-pu-ui="combobox"]'))
+        return;
+    const el = doc.createElement("style");
+    el.setAttribute("data-pu-ui", "combobox");
+    el.textContent = styles;
+    doc.head.appendChild(el);
+}
+const defaultFilter = (opt, q) => opt.label.toLowerCase().includes(q.toLowerCase());
+/**
+ * Searchable select: type to filter, click or Enter to choose.
+ * For remote data: pass a reactive `options` list + `loading` while fetching.
+ */
+export const Combobox = component((raw) => {
+    ensureStyles();
+    const props = mergeProps({
+        placeholder: "Search…",
+        emptyText: "No matches",
+        loadingText: "Loading…",
+    }, raw);
+    const open = signal(false);
+    const query = signal("");
+    const active = signal(0);
+    let rootEl = null;
+    let listEl = null;
+    let inputEl = null;
+    const isLoading = () => readBool(props.loading);
+    const placeList = () => {
+        if (!rootEl || !listEl || !inputEl || !open())
+            return;
+        const doc = rootEl.ownerDocument;
+        const win = doc.defaultView ?? window;
+        const gap = 4;
+        const pad = 8;
+        const rect = inputEl.getBoundingClientRect();
+        const vw = win.innerWidth;
+        const vh = win.innerHeight;
+        const width = rect.width;
+        listEl.style.width = `${Math.round(width)}px`;
+        listEl.style.maxHeight = "";
+        const naturalH = Math.min(listEl.scrollHeight || 224, 14 * 16);
+        const spaceBelow = vh - rect.bottom - gap - pad;
+        const spaceAbove = rect.top - gap - pad;
+        const placeAbove = spaceBelow < Math.min(naturalH, 100) && spaceAbove > spaceBelow;
+        const available = Math.max(96, placeAbove ? spaceAbove : spaceBelow);
+        const maxH = Math.min(naturalH, available, 14 * 16);
+        listEl.style.maxHeight = `${Math.round(maxH)}px`;
+        const ph = Math.min(listEl.offsetHeight || maxH, maxH);
+        let top = placeAbove ? rect.top - gap - ph : rect.bottom + gap;
+        top = Math.min(Math.max(pad, top), Math.max(pad, vh - ph - pad));
+        let left = rect.left;
+        left = Math.min(Math.max(pad, left), Math.max(pad, vw - width - pad));
+        listEl.dataset.side = placeAbove ? "top" : "bottom";
+        listEl.style.top = `${Math.round(top)}px`;
+        listEl.style.left = `${Math.round(left)}px`;
+    };
+    const getOptions = () => readProp(props.options) ?? [];
+    const getValue = () => readProp(props.value) ?? "";
+    const filtered = () => {
+        if (isLoading())
+            return [];
+        const q = query().trim();
+        const list = getOptions();
+        const fn = props.filter ?? defaultFilter;
+        if (!q)
+            return list;
+        return list.filter((opt) => fn(opt, q));
+    };
+    const selectedLabel = () => {
+        const v = getValue();
+        const hit = getOptions().find((o) => o.value === v);
+        return hit?.label ?? "";
+    };
+    const close = () => {
+        open.set(false);
+        query.set(selectedLabel());
+        listEl?.classList.remove("is-open");
+    };
+    effect(() => {
+        if (!open()) {
+            query.set(selectedLabel());
+            listEl?.classList.remove("is-open");
+        }
+    });
+    // Reposition when loading/options change while open
+    effect(() => {
+        if (!open())
+            return;
+        void filtered().length;
+        void isLoading();
+        const win = rootEl?.ownerDocument.defaultView ?? window;
+        const t = win.setTimeout(() => placeList(), 0);
+        return () => win.clearTimeout(t);
+    });
+    effect(() => {
+        if (!open())
+            return;
+        return attachOverlay({
+            getRoot: () => rootEl,
+            onClose: close,
+            escape: true,
+            dismissOutside: true,
+            isInside: (node) => {
+                if (rootEl?.contains(node))
+                    return true;
+                if (listEl?.contains(node))
+                    return true;
+                return false;
+            },
+            onAttach: ({ doc, win }) => {
+                if (listEl && listEl.parentNode !== doc.body) {
+                    doc.body.appendChild(listEl);
+                }
+                listEl?.classList.add("is-open");
+                const onRepo = () => placeList();
+                const placeTimer = win.setTimeout(() => {
+                    placeList();
+                    win.setTimeout(placeList, 16);
+                }, 0);
+                win.addEventListener("resize", onRepo);
+                doc.addEventListener("scroll", onRepo, true);
+                win.addEventListener("scroll", onRepo, true);
+                return () => {
+                    win.clearTimeout(placeTimer);
+                    win.removeEventListener("resize", onRepo);
+                    doc.removeEventListener("scroll", onRepo, true);
+                    win.removeEventListener("scroll", onRepo, true);
+                    listEl?.classList.remove("is-open");
+                };
+            },
+        });
+    });
+    const pick = (opt) => {
+        if (opt.disabled || isLoading())
+            return;
+        props.onChange?.(opt.value);
+        query.set(opt.label);
+        open.set(false);
+    };
+    return (_jsxs("div", { class: () => cx("pu-combobox", open() && "pu-combobox--open", isLoading() && "pu-combobox--loading", typeof props.class === "function" ? props.class() : props.class), ref: (el) => {
+            rootEl = el;
+            ensureStyles(el.ownerDocument);
+        }, children: [_jsx("input", { type: "text", class: "pu-combobox__input", id: props.id, "aria-label": props["aria-label"], "aria-expanded": () => (open() ? "true" : "false"), "aria-busy": () => (isLoading() ? "true" : "false"), "aria-autocomplete": "list", role: "combobox", placeholder: props.placeholder, disabled: () => readBool(props.disabled), value: query, ref: (el) => {
+                    inputEl = el;
+                }, onFocus: () => {
+                    open.set(true);
+                    active.set(0);
+                }, onInput: (e) => {
+                    const v = e.target.value;
+                    query.set(v);
+                    open.set(true);
+                    active.set(0);
+                }, onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        if (open()) {
+                            e.preventDefault();
+                            close();
+                        }
+                        return;
+                    }
+                    if (isLoading())
+                        return;
+                    const list = filtered();
+                    if (e.key === "ArrowDown") {
+                        e.preventDefault();
+                        open.set(true);
+                        active.set(Math.min(Math.max(list.length - 1, 0), active() + 1));
+                    }
+                    else if (e.key === "ArrowUp") {
+                        e.preventDefault();
+                        active.set(Math.max(0, active() - 1));
+                    }
+                    else if (e.key === "Enter") {
+                        e.preventDefault();
+                        const opt = list[active()];
+                        if (opt)
+                            pick(opt);
+                    }
+                } }), _jsxs("ul", { class: "pu-combobox__list", role: "listbox", "aria-busy": () => (isLoading() ? "true" : "false"), ref: (el) => {
+                    listEl = el;
+                }, children: [_jsx(Show, { when: () => isLoading(), children: () => {
+                            const li = document.createElement("li");
+                            li.className = "pu-combobox__status pu-combobox__status--loading";
+                            li.setAttribute("role", "status");
+                            li.textContent =
+                                readStr(props.loadingText) ||
+                                    "Loading…";
+                            return li;
+                        } }), _jsx(Show, { when: () => !isLoading() && filtered().length === 0, children: () => {
+                            const li = document.createElement("li");
+                            li.className = "pu-combobox__status";
+                            li.setAttribute("role", "status");
+                            li.textContent =
+                                readStr(props.emptyText) || "No matches";
+                            return li;
+                        } }), _jsx(Show, { when: () => !isLoading(), children: () => (_jsx(For, { each: filtered, children: (opt, index) => (_jsx("li", { role: "presentation", children: _jsx("button", { type: "button", role: "option", class: () => cx("pu-combobox__option", getValue() === opt().value && "is-selected", active() === index() && "is-active"), disabled: () => !!opt().disabled, onClick: () => pick(opt()), onMouseEnter: () => active.set(index()), children: () => opt().label }) })) })) })] })] }));
+});
+//# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox.js.map

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

package/dist/components/Command.d.ts

@@ -0,0 +1,42 @@
+import { type MaybeReactive } from "../reactive.js";
+export type CommandItem = {
+    id: string;
+    label: string;
+    hint?: string;
+    group?: string;
+    disabled?: boolean;
+};
+export type CommandProps = {
+    open: MaybeReactive<boolean>;
+    onOpenChange?: (open: boolean) => void;
+    items: CommandItem[] | (() => CommandItem[]);
+    placeholder?: string;
+    /**
+     * Async command sources: show a loading row while `items` is still settling.
+     * Use a reactive `items` function + toggle `loading` around the fetch.
+     */
+    loading?: MaybeReactive<boolean>;
+    /** Empty-state copy (default: “No commands match”) */
+    emptyText?: MaybeReactive<string>;
+    /** Loading-state copy (default: “Loading…”) */
+    loadingText?: MaybeReactive<string>;
+    onSelect?: (id: string) => void;
+    class?: MaybeReactive<string>;
+};
+/**
+ * Command palette (⌘K style): search + run an action.
+ * Control with `open` + `onOpenChange`. Esc / backdrop close via `attachOverlay`.
+ * For async sources: reactive `items` + `loading`.
+ */
+export declare const Command: import("@lab206/dom").Component<{
+    open: MaybeReactive<boolean>;
+    onOpenChange?: (open: boolean) => void;
+    items: CommandItem[] | (() => CommandItem[]);
+    placeholder?: string;
+    loading?: MaybeReactive<boolean>;
+    emptyText?: MaybeReactive<string>;
+    loadingText?: MaybeReactive<string>;
+    onSelect?: (id: string) => void;
+    class?: MaybeReactive<string>;
+}>;
+//# sourceMappingURL=Command.d.ts.map

package/dist/components/Command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../src/components/Command.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,WAAW,EAAE,GAAG,CAAC,MAAM,WAAW,EAAE,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACjC,sDAAsD;IACtD,SAAS,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAClC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC/B,CAAC;AAyJF;;;;GAIG;AACH,eAAO,MAAM,OAAO;UA7KZ,aAAa,CAAC,OAAO,CAAC;mBACb,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;WAC/B,WAAW,EAAE,GAAG,CAAC,MAAM,WAAW,EAAE,CAAC;kBAC9B,MAAM;cAKV,aAAa,CAAC,OAAO,CAAC;gBAEpB,aAAa,CAAC,MAAM,CAAC;kBAEnB,aAAa,CAAC,MAAM,CAAC;eACxB,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;YACvB,aAAa,CAAC,MAAM,CAAC;EA8V7B,CAAC"}