@lab206/ui 0.1.0

package/src/components/Command.tsx

@@ -0,0 +1,380 @@
+import { signal, effect } from "@lab206/core";
+import { For, Show, component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { attachOverlay } from "../overlay.js";
+import { readBool, readStr, 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>;
+};
+
+const styles = `
+.pu-command-root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--pu-z-overlay);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: min(20vh, 6rem) var(--pu-space-4) var(--pu-space-4);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--pu-duration) var(--pu-ease-out),
+    visibility var(--pu-duration) var(--pu-ease-out);
+}
+.pu-command-root--open {
+  pointer-events: auto;
+  opacity: 1;
+  visibility: visible;
+}
+.pu-command-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--pu-overlay-scrim);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+.pu-command {
+  position: relative;
+  width: min(32rem, 100%);
+  max-height: min(28rem, 70vh);
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--pu-radius-xl);
+  background: var(--pu-color-surface-elevated);
+  border: 1px solid var(--pu-color-border);
+  box-shadow: var(--pu-shadow-float);
+  overflow: hidden;
+  transform: translateY(8px) scale(0.98);
+  transition: transform var(--pu-duration-slow) var(--pu-ease-out);
+}
+.pu-command-root--open .pu-command {
+  transform: translateY(0) scale(1);
+}
+.pu-command__input {
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--pu-color-border);
+  background: transparent;
+  color: var(--pu-color-text);
+  font: inherit;
+  font-size: var(--pu-text-md);
+  padding: 0.9rem 1rem;
+  outline: none;
+}
+.pu-command__input::placeholder { color: var(--pu-color-text-muted); }
+.pu-command__input:focus-visible {
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pu-color-focus) 35%, transparent);
+}
+.pu-command__list {
+  overflow: auto;
+  padding: 0.35rem;
+  flex: 1;
+  min-height: 0;
+}
+.pu-command__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text);
+  padding: 0.55rem 0.7rem;
+  border-radius: var(--pu-radius-md);
+  cursor: pointer;
+}
+.pu-command__item:hover:not(:disabled),
+.pu-command__item.is-active:not(:disabled) {
+  background: color-mix(in srgb, var(--pu-color-accent) 12%, var(--pu-color-surface-2));
+}
+.pu-command__item: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: color-mix(in srgb, var(--pu-color-accent) 12%, var(--pu-color-surface-2));
+}
+.pu-command__item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.pu-command__hint {
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  font-family: var(--pu-font-mono);
+}
+.pu-command__status {
+  padding: 1.25rem;
+  text-align: center;
+  color: var(--pu-color-text-muted);
+  font-size: var(--pu-text-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+}
+.pu-command__status--loading::before {
+  content: "";
+  width: 0.75rem;
+  height: 0.75rem;
+  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-command-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes pu-command-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-command__status--loading::before { animation: none; opacity: 0.7; }
+}
+.pu-command__footer {
+  border-top: 1px solid var(--pu-color-border);
+  padding: 0.45rem 0.75rem;
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-command-root, .pu-command { transition: none; }
+}
+`;
+
+function ensureStyles(doc: Document = document) {
+  if (typeof doc === "undefined") return;
+  if (doc.querySelector('style[data-pu-ui="command"]')) return;
+  const el = doc.createElement("style");
+  el.setAttribute("data-pu-ui", "command");
+  el.textContent = styles;
+  doc.head.appendChild(el);
+}
+
+/**
+ * Command palette (⌘K style): search + run an action.
+ * Control with `open` + `onOpenChange`. Esc / backdrop close via `attachOverlay`.
+ * For async sources: reactive `items` + `loading`.
+ */
+export const Command = component((raw: CommandProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    {
+      placeholder: "Type a command…",
+      emptyText: "No commands match",
+      loadingText: "Loading…",
+    },
+    raw,
+  ) as ComponentProps<
+    CommandProps & {
+      placeholder: string;
+      emptyText: string;
+      loadingText: string;
+    }
+  >;
+
+  const isOpen = () => readBool(props.open as MaybeReactive<boolean>);
+  const isLoading = () =>
+    readBool(props.loading as MaybeReactive<boolean> | undefined);
+  const query = signal("");
+  const active = signal(0);
+  let rootEl: HTMLElement | null = null;
+  let panelEl: HTMLElement | null = null;
+  let inputEl: HTMLInputElement | null = null;
+
+  const getItems = (): CommandItem[] => {
+    const i = props.items;
+    return typeof i === "function" ? (i as () => CommandItem[])() : (i ?? []);
+  };
+
+  const filtered = () => {
+    if (isLoading()) return [] as CommandItem[];
+    const q = query().trim().toLowerCase();
+    const list = getItems();
+    if (!q) return list;
+    return list.filter(
+      (it) =>
+        it.label.toLowerCase().includes(q) ||
+        (it.hint?.toLowerCase().includes(q) ?? false) ||
+        (it.group?.toLowerCase().includes(q) ?? false),
+    );
+  };
+
+  effect(() => {
+    if (!isOpen()) {
+      query.set("");
+      active.set(0);
+      return;
+    }
+    return attachOverlay({
+      getRoot: () => rootEl,
+      getFocusRoot: () => panelEl,
+      onClose: () => props.onOpenChange?.(false),
+      scrollLock: true,
+      escape: true,
+      onAttach: ({ doc, win }) => {
+        ensureStyles(doc);
+        const t = win.setTimeout(() => inputEl?.focus(), 0);
+        return () => win.clearTimeout(t);
+      },
+    });
+  });
+
+  const run = (item: CommandItem) => {
+    if (item.disabled || isLoading()) return;
+    props.onSelect?.(item.id);
+    props.onOpenChange?.(false);
+  };
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-command-root",
+          isOpen() && "pu-command-root--open",
+          isLoading() && "pu-command-root--loading",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      aria-hidden={() => (!isOpen() ? "true" : "false")}
+      ref={(el) => {
+        rootEl = el;
+        ensureStyles(el.ownerDocument);
+      }}
+    >
+      <div
+        class="pu-command-backdrop"
+        onClick={() => props.onOpenChange?.(false)}
+        aria-hidden="true"
+      />
+      <div
+        class="pu-command"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        aria-busy={() => (isLoading() ? "true" : "false")}
+        onClick={(e: MouseEvent) => e.stopPropagation()}
+        ref={(el) => {
+          panelEl = el;
+        }}
+      >
+        <input
+          class="pu-command__input"
+          type="text"
+          role="combobox"
+          aria-expanded="true"
+          aria-busy={() => (isLoading() ? "true" : "false")}
+          placeholder={props.placeholder}
+          value={query}
+          ref={(el) => {
+            inputEl = el as HTMLInputElement;
+          }}
+          onInput={(e: Event) => {
+            query.set((e.target as HTMLInputElement).value);
+            active.set(0);
+          }}
+          onKeyDown={(e: KeyboardEvent) => {
+            if (isLoading()) return;
+            const list = filtered();
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              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 item = list[active()];
+              if (item) run(item);
+            }
+          }}
+        />
+        <div class="pu-command__list" role="listbox">
+          <Show when={() => isLoading()}>
+            {() => {
+              const d = document.createElement("div");
+              d.className = "pu-command__status pu-command__status--loading";
+              d.setAttribute("role", "status");
+              d.textContent =
+                readStr(props.loadingText as MaybeReactive<string>) ||
+                "Loading…";
+              return d;
+            }}
+          </Show>
+          <Show when={() => !isLoading() && filtered().length === 0}>
+            {() => {
+              const d = document.createElement("div");
+              d.className = "pu-command__status";
+              d.setAttribute("role", "status");
+              d.textContent =
+                readStr(props.emptyText as MaybeReactive<string>) ||
+                "No commands match";
+              return d;
+            }}
+          </Show>
+          <Show when={() => !isLoading()}>
+            {() => (
+              <For each={filtered}>
+                {(item, index) => (
+                  <button
+                    type="button"
+                    role="option"
+                    class={() =>
+                      cx(
+                        "pu-command__item",
+                        active() === index() && "is-active",
+                      )
+                    }
+                    disabled={() => !!item().disabled}
+                    onClick={() => run(item())}
+                    onMouseEnter={() => active.set(index())}
+                  >
+                    <span>{() => item().label}</span>
+                    <span class="pu-command__hint">
+                      {() => item().hint ?? ""}
+                    </span>
+                  </button>
+                )}
+              </For>
+            )}
+          </Show>
+        </div>
+        <div class="pu-command__footer">
+          <span>↑↓ navigate</span>
+          <span>↵ run</span>
+          <span>esc close</span>
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/components/Container.tsx

@@ -0,0 +1,58 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type ContainerProps = {
+  size?: "sm" | "md" | "lg" | "xl";
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-container {
+  width: 100%;
+  margin-inline: auto;
+  /* Prefer site-level gutters when demos define them (unified chrome) */
+  padding-inline: var(--site-gutter, var(--pu-space-4));
+  box-sizing: border-box;
+}
+@media (min-width: 640px) {
+  .pu-container {
+    padding-inline: var(--site-gutter, var(--pu-space-6));
+  }
+}
+.pu-container--sm { max-width: 40rem; }
+.pu-container--md { max-width: 48rem; }
+.pu-container--lg { max-width: 64rem; }
+/* Default “app shell” width — match site nav + main content */
+.pu-container--xl { max-width: var(--site-max, 80rem); }
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "container");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Container = component((raw: ContainerProps) => {
+  ensureStyles();
+  const props = mergeProps({ size: "lg" as const }, raw) as ComponentProps<
+    ContainerProps & { size: NonNullable<ContainerProps["size"]> }
+  >;
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-container",
+          `pu-container--${props.size}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      {props.children as never}
+    </div>
+  );
+});

package/src/components/Dialog.tsx

@@ -0,0 +1,226 @@
+import { effect } from "@lab206/core";
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx, puId } from "../utils.js";
+import { attachOverlay } from "../overlay.js";
+import { readBool, type MaybeReactive } from "../reactive.js";
+
+export type DialogProps = {
+  /** Controlled open state (boolean, signal, or accessor) */
+  open: MaybeReactive<boolean>;
+  onClose?: () => void;
+  title?: string;
+  description?: string;
+  /** Panel size */
+  size?: "sm" | "md" | "lg";
+  class?: MaybeReactive<string>;
+  children?: unknown;
+};
+
+const styles = `
+.pu-dialog-root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--pu-z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--pu-space-4);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--pu-duration-slow) var(--pu-ease-out),
+    visibility var(--pu-duration-slow) var(--pu-ease-out);
+}
+.pu-dialog-root--open {
+  pointer-events: auto;
+  opacity: 1;
+  visibility: visible;
+}
+.pu-dialog-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--pu-overlay-scrim);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+.pu-dialog-panel {
+  position: relative;
+  width: 100%;
+  max-height: min(88vh, 720px);
+  overflow: auto;
+  background: var(--pu-color-surface-elevated);
+  color: var(--pu-color-text);
+  border: 1px solid var(--pu-color-border);
+  border-radius: var(--pu-radius-xl);
+  box-shadow: var(--pu-shadow-float);
+  padding: var(--pu-space-6);
+  transform: translateY(12px) scale(0.96);
+  transition: transform var(--pu-duration-slow) var(--pu-ease-spring);
+}
+.pu-dialog-root--open .pu-dialog-panel {
+  transform: translateY(0) scale(1);
+}
+.pu-dialog-panel--sm { max-width: 22rem; }
+.pu-dialog-panel--md { max-width: 28rem; }
+.pu-dialog-panel--lg { max-width: 36rem; }
+.pu-dialog__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--pu-space-3);
+  margin-bottom: var(--pu-space-4);
+}
+.pu-dialog__title {
+  margin: 0;
+  font-size: var(--pu-text-xl);
+  font-weight: var(--pu-font-bold);
+  letter-spacing: var(--pu-tracking-tight);
+  line-height: var(--pu-leading-tight);
+  color: var(--pu-color-text);
+}
+.pu-dialog__desc {
+  margin: var(--pu-space-2) 0 0;
+  color: var(--pu-color-text-muted);
+  font-size: var(--pu-text-sm);
+  line-height: 1.5;
+}
+.pu-dialog__close {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--pu-radius-md);
+  background: transparent;
+  color: var(--pu-color-text-muted);
+  cursor: pointer;
+  font-size: 1.15rem;
+  line-height: 1;
+  transition:
+    background var(--pu-duration) var(--pu-ease),
+    color var(--pu-duration) var(--pu-ease);
+}
+.pu-dialog__close:hover {
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text);
+}
+.pu-dialog__close:focus-visible {
+  outline: none;
+  color: var(--pu-color-text);
+  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);
+}
+.pu-dialog__body {
+  font-size: var(--pu-text-sm);
+  line-height: 1.55;
+  color: var(--pu-color-text);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-dialog-root,
+  .pu-dialog-panel { transition: none; }
+}
+`;
+
+function ensureStyles(doc: Document = document) {
+  if (typeof doc === "undefined") return;
+  if (doc.querySelector('style[data-pu-ui="dialog"]')) return;
+  const el = doc.createElement("style");
+  el.setAttribute("data-pu-ui", "dialog");
+  el.textContent = styles;
+  doc.head.appendChild(el);
+}
+
+/**
+ * Modal dialog with scrim. Control via `open` + `onClose`.
+ * Escape, scroll lock, and focus trap via shared `attachOverlay`.
+ */
+export const Dialog = component((raw: DialogProps) => {
+  ensureStyles();
+  const props = mergeProps({ size: "md" as const }, raw) as ComponentProps<
+    DialogProps & { size: "sm" | "md" | "lg" }
+  >;
+
+  const isOpen = () => readBool(props.open as MaybeReactive<boolean>);
+  const titleId = puId("pu-dialog-title");
+  let rootEl: HTMLElement | null = null;
+  let panelEl: HTMLElement | null = null;
+
+  effect(() => {
+    if (!isOpen()) return;
+    return attachOverlay({
+      getRoot: () => rootEl,
+      getFocusRoot: () => panelEl,
+      onClose: () => props.onClose?.(),
+      scrollLock: true,
+      escape: true,
+      onAttach: ({ doc }) => {
+        ensureStyles(doc);
+      },
+    });
+  });
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-dialog-root",
+          isOpen() && "pu-dialog-root--open",
+          typeof props.class === "function"
+            ? (props.class as () => string)()
+            : props.class,
+        )
+      }
+      aria-hidden={() => (!isOpen() ? "true" : "false")}
+      ref={(el) => {
+        rootEl = el;
+        ensureStyles(el.ownerDocument);
+      }}
+    >
+      <div
+        class="pu-dialog-backdrop"
+        onClick={() => props.onClose?.()}
+        aria-hidden="true"
+      />
+      <div
+        class={() => cx("pu-dialog-panel", `pu-dialog-panel--${props.size}`)}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={props.title ? titleId : undefined}
+        onClick={(e: MouseEvent) => e.stopPropagation()}
+        ref={(el) => {
+          panelEl = el;
+        }}
+      >
+        {(props.title || props.onClose) && (
+          <div class="pu-dialog__head">
+            <div>
+              {props.title ? (
+                <h2 class="pu-dialog__title" id={titleId}>
+                  {props.title}
+                </h2>
+              ) : null}
+              {props.description ? (
+                <p class="pu-dialog__desc">{props.description}</p>
+              ) : null}
+            </div>
+            {props.onClose ? (
+              <button
+                type="button"
+                class="pu-dialog__close"
+                aria-label="Close"
+                onClick={() => props.onClose?.()}
+              >
+                ×
+              </button>
+            ) : null}
+          </div>
+        )}
+        <div class="pu-dialog__body">{props.children as never}</div>
+      </div>
+    </div>
+  );
+});