@blurrow/ui 0.2.0 → 0.2.1

package/dist/Combobox.js

@@ -0,0 +1,255 @@
+"use client";
+
+// ../../components/ui/Combobox.tsx
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Portal } from "./Floating.js";
+import { FieldLabel, FieldMessage } from "./FieldMessage.js";
+import { useFloatingPanel } from "./useFloatingPanel.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var defaultFilter = (o, q) => {
+  const hay = [o.label, o.description ?? "", ...o.keywords ?? []].join(" ").toLowerCase();
+  return q.toLowerCase().split(/\s+/).filter(Boolean).every((word) => hay.includes(word));
+};
+function Highlight({ text, query }) {
+  const q = query.trim().toLowerCase();
+  const at = q ? text.toLowerCase().indexOf(q) : -1;
+  if (at < 0) return /* @__PURE__ */ jsx(Fragment, { children: text });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    text.slice(0, at),
+    /* @__PURE__ */ jsx("mark", { className: "bg-transparent font-semibold text-ink", children: text.slice(at, at + q.length) }),
+    text.slice(at + q.length)
+  ] });
+}
+function Combobox({
+  options,
+  value,
+  defaultValue = null,
+  onChange,
+  placeholder = "search\u2026",
+  label,
+  hint,
+  error,
+  emptyText = "nothing matches",
+  filter = defaultFilter,
+  clearable = false,
+  disabled = false,
+  fullWidth = false,
+  name,
+  className = ""
+}) {
+  const uid = useId();
+  const ref = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const [internal, setInternal] = useState(defaultValue);
+  const selectedValue = value !== void 0 ? value : internal;
+  const selected = options.find((o) => o.value === selectedValue) ?? null;
+  const [query, setQuery] = useState(null);
+  const [active, setActive] = useState(0);
+  const { open, mounted, show, close, setFloating, panelStyle } = useFloatingPanel(ref, {
+    matchWidth: true,
+    onEscape: () => setQuery(null)
+  });
+  const messageId = error || hint ? `${uid}-message` : void 0;
+  const matches = useMemo(
+    () => query ? options.filter((o) => filter(o, query)) : options,
+    [options, query, filter]
+  );
+  useEffect(() => {
+    if (!open) return;
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [open, active]);
+  const pick = (o) => {
+    if (o?.disabled) return;
+    setInternal(o?.value ?? null);
+    onChange?.(o?.value ?? null);
+    setQuery(null);
+    close();
+  };
+  const openList = () => {
+    if (open || disabled) return;
+    const i = matches.findIndex((o) => o.value === selectedValue);
+    setActive(Math.max(0, i));
+    show();
+  };
+  const step = (dir) => {
+    if (!matches.length) return;
+    let i = active;
+    for (let n = 0; n < matches.length; n++) {
+      i = (i + dir + matches.length) % matches.length;
+      if (!matches[i].disabled) break;
+    }
+    setActive(i);
+  };
+  const onKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) openList();
+        else step(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) openList();
+        else step(-1);
+        break;
+      case "Enter":
+        if (open && matches[active]) {
+          e.preventDefault();
+          pick(matches[active]);
+        }
+        break;
+      case "Tab":
+        if (open) close();
+        break;
+    }
+  };
+  const shownText = query ?? selected?.label ?? "";
+  const showClear = clearable && !!selected && !disabled;
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { id: `${uid}-label`, htmlFor: `${uid}-input`, children: label }),
+    /* @__PURE__ */ jsxs("div", { ref, className: ["group/combo relative isolate", fullWidth ? "w-full" : "w-60", className].join(" "), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id: `${uid}-input`,
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-controls": `${uid}-list`,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": open && matches[active] ? `${uid}-opt-${active}` : void 0,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": messageId,
+          autoComplete: "off",
+          spellCheck: false,
+          disabled,
+          placeholder: selected?.label ?? placeholder,
+          value: shownText,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setActive(0);
+            if (!open) show();
+          },
+          onClick: openList,
+          onFocus: (e) => e.target.select(),
+          onKeyDown,
+          onBlur: () => {
+            setQuery(null);
+            if (open) close();
+          },
+          "data-open": open || void 0,
+          className: [
+            "field relative z-10 w-full rounded-xl py-3 pl-4 text-[13.5px] font-medium text-ink caret-ink",
+            "placeholder:font-normal placeholder:text-ink-faint focus:placeholder:text-ink-ghost",
+            "disabled:opacity-40 disabled:cursor-not-allowed",
+            open ? "cursor-text" : "cursor-pointer",
+            showClear ? "pr-[60px]" : "pr-10"
+          ].join(" ")
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-15 overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute inset-y-0 -left-[30%] block w-[30%] opacity-0 group-focus-within/combo:animate-input-shimmer",
+          style: { background: "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)" }
+        }
+      ) }),
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "clear",
+          tabIndex: -1,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => pick(null),
+          className: [
+            "absolute right-9 top-1/2 z-20 grid h-[18px] w-[18px] -translate-y-1/2 cursor-pointer place-items-center rounded-full",
+            "text-ink-faint transition-[opacity,color,background-color] duration-150 hover:bg-surface-active hover:text-ink",
+            "opacity-0 group-hover/combo:opacity-100 group-focus-within/combo:opacity-100"
+          ].join(" "),
+          children: /* @__PURE__ */ jsx("svg", { "aria-hidden": true, width: "9", height: "9", fill: "none", stroke: "currentColor", strokeWidth: "2.75", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M6 6l12 12M18 6L6 18" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": true,
+          width: "14",
+          height: "14",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          viewBox: "0 0 24 24",
+          className: [
+            "pointer-events-none absolute right-4 top-1/2 z-20 -mt-[7px] transition-[transform,color] duration-300 ease-[var(--ease-spring)]",
+            open ? "rotate-180 text-ink" : "text-ink-faint group-hover/combo:text-ink-label"
+          ].join(" "),
+          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+        }
+      ),
+      name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedValue ?? "" })
+    ] }),
+    mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setFloating,
+        className: "rounded-[16px] p-1.5",
+        style: { ...panelStyle, maxWidth: "min(420px, calc(100vw - 16px))" },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: listRef,
+            id: `${uid}-list`,
+            role: "listbox",
+            "aria-labelledby": label ? `${uid}-label` : void 0,
+            onMouseDown: (e) => e.preventDefault(),
+            className: "flex max-h-72 flex-col gap-0.5 overflow-y-auto rounded-[11px] bg-panel-face p-1 scroll-thin",
+            style: { boxShadow: "var(--panel-face-shadow)" },
+            children: [
+              matches.length === 0 && /* @__PURE__ */ jsx("div", { role: "presentation", className: "px-2.5 py-2 text-[13px] text-ink-faint", children: emptyText }),
+              matches.map((o, i) => {
+                const isSel = o.value === selectedValue;
+                const isActive = i === active;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    id: `${uid}-opt-${i}`,
+                    "data-index": i,
+                    role: "option",
+                    "aria-selected": isSel,
+                    "aria-disabled": o.disabled || void 0,
+                    onClick: () => pick(o),
+                    onMouseMove: () => !o.disabled && setActive(i),
+                    className: [
+                      "flex w-full items-center justify-between gap-3 rounded-[8px] px-2.5 py-2 text-[13px] transition-colors duration-100",
+                      o.disabled ? "cursor-not-allowed opacity-40" : "cursor-pointer",
+                      isSel ? "font-medium" : "",
+                      // one ink per state, as in Select
+                      isSel || isActive ? "text-ink" : "text-ink-body",
+                      isActive ? "bg-surface-active/80" : ""
+                    ].join(" "),
+                    style: { animation: `select-option-in 300ms var(--ease-out-soft) ${40 + Math.min(i, 8) * 22}ms both` },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-px", children: [
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: /* @__PURE__ */ jsx(Highlight, { text: o.label, query: query ?? "" }) }),
+                        o.description && /* @__PURE__ */ jsx("span", { className: "truncate text-[11.5px] font-normal text-ink-faint", children: o.description })
+                      ] }),
+                      isSel && /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "shrink-0 text-ink", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+                    ]
+                  },
+                  o.value
+                );
+              })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FieldMessage, { id: messageId, error, hint })
+  ] });
+}
+export {
+  Combobox
+};
+//# sourceMappingURL=Combobox.js.map

package/dist/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { Portal } from \"./Floating\";\nimport { FieldLabel, FieldMessage } from \"./FieldMessage\";\nimport { useFloatingPanel } from \"./useFloatingPanel\";\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  /** A second, quieter line under the label */\n  description?: string;\n  /** Extra words to match on that aren't shown */\n  keywords?: string[];\n  disabled?: boolean;\n}\n\ninterface ComboboxProps {\n  options: ComboboxOption[];\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n  placeholder?: string;\n  label?: string;\n  hint?: string;\n  error?: string;\n  /** Shown when nothing matches */\n  emptyText?: string;\n  /** Replace the default \"contains\" match */\n  filter?: (option: ComboboxOption, query: string) => boolean;\n  /** Show a key that empties the field */\n  clearable?: boolean;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  name?: string;\n  className?: string;\n}\n\nconst defaultFilter = (o: ComboboxOption, q: string) => {\n  const hay = [o.label, o.description ?? \"\", ...(o.keywords ?? [])].join(\" \").toLowerCase();\n  return q\n    .toLowerCase()\n    .split(/\\s+/)\n    .filter(Boolean)\n    .every((word) => hay.includes(word));\n};\n\n/* Bolds the part of the label that matched what was typed */\nfunction Highlight({ text, query }: { text: string; query: string }) {\n  const q = query.trim().toLowerCase();\n  const at = q ? text.toLowerCase().indexOf(q) : -1;\n  if (at < 0) return <>{text}</>;\n  return (\n    <>\n      {text.slice(0, at)}\n      <mark className=\"bg-transparent font-semibold text-ink\">{text.slice(at, at + q.length)}</mark>\n      {text.slice(at + q.length)}\n    </>\n  );\n}\n\n/* A Select you can type into. The field filters the list as you go,\n   arrows walk the matches, Enter picks one, and leaving the field puts\n   the chosen label back if what you typed didn't match anything.     */\nexport function Combobox({\n  options,\n  value,\n  defaultValue = null,\n  onChange,\n  placeholder = \"search…\",\n  label,\n  hint,\n  error,\n  emptyText = \"nothing matches\",\n  filter = defaultFilter,\n  clearable = false,\n  disabled = false,\n  fullWidth = false,\n  name,\n  className = \"\",\n}: ComboboxProps) {\n  const uid = useId();\n  const ref = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const [internal, setInternal] = useState<string | null>(defaultValue);\n  const selectedValue = value !== undefined ? value : internal;\n  const selected = options.find((o) => o.value === selectedValue) ?? null;\n  const [query, setQuery] = useState<string | null>(null); // null: not typing, show the selection\n  const [active, setActive] = useState(0);\n  const { open, mounted, show, close, setFloating, panelStyle } = useFloatingPanel(ref, {\n    matchWidth: true,\n    onEscape: () => setQuery(null),\n  });\n  const messageId = error || hint ? `${uid}-message` : undefined;\n\n  const matches = useMemo(\n    () => (query ? options.filter((o) => filter(o, query)) : options),\n    [options, query, filter],\n  );\n\n  useEffect(() => {\n    if (!open) return;\n    listRef.current?.querySelector(`[data-index=\"${active}\"]`)?.scrollIntoView({ block: \"nearest\" });\n  }, [open, active]);\n\n  const pick = (o: ComboboxOption | null) => {\n    if (o?.disabled) return;\n    setInternal(o?.value ?? null);\n    onChange?.(o?.value ?? null);\n    setQuery(null);\n    close();\n  };\n\n  const openList = () => {\n    if (open || disabled) return;\n    const i = matches.findIndex((o) => o.value === selectedValue);\n    setActive(Math.max(0, i));\n    show();\n  };\n\n  const step = (dir: 1 | -1) => {\n    if (!matches.length) return;\n    let i = active;\n    for (let n = 0; n < matches.length; n++) {\n      i = (i + dir + matches.length) % matches.length;\n      if (!matches[i].disabled) break;\n    }\n    setActive(i);\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        if (!open) openList();\n        else step(1);\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        if (!open) openList();\n        else step(-1);\n        break;\n      case \"Enter\":\n        if (open && matches[active]) {\n          e.preventDefault();\n          pick(matches[active]);\n        }\n        break;\n      case \"Tab\":\n        if (open) close();\n        break;\n    }\n  };\n\n  const shownText = query ?? selected?.label ?? \"\";\n  const showClear = clearable && !!selected && !disabled;\n\n  return (\n    <div className={[\"group/field flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && (\n        <FieldLabel id={`${uid}-label`} htmlFor={`${uid}-input`}>\n          {label}\n        </FieldLabel>\n      )}\n      {/* Closed, it reads exactly like Select: the chosen label and a\n          chevron. Focus it and it turns into a field you type into.  */}\n      <div ref={ref} className={[\"group/combo relative isolate\", fullWidth ? \"w-full\" : \"w-60\", className].join(\" \")}>\n        <input\n          ref={inputRef}\n          id={`${uid}-input`}\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={`${uid}-list`}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={open && matches[active] ? `${uid}-opt-${active}` : undefined}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={messageId}\n          autoComplete=\"off\"\n          spellCheck={false}\n          disabled={disabled}\n          placeholder={selected?.label ?? placeholder}\n          value={shownText}\n          onChange={(e) => {\n            setQuery(e.target.value);\n            setActive(0);\n            if (!open) show();\n          }}\n          onClick={openList}\n          // typing replaces the chosen label instead of adding to it\n          onFocus={(e) => e.target.select()}\n          onKeyDown={onKeyDown}\n          onBlur={() => {\n            setQuery(null);\n            if (open) close();\n          }}\n          data-open={open || undefined}\n          className={[\n            \"field relative z-10 w-full rounded-xl py-3 pl-4 text-[13.5px] font-medium text-ink caret-ink\",\n            \"placeholder:font-normal placeholder:text-ink-faint focus:placeholder:text-ink-ghost\",\n            \"disabled:opacity-40 disabled:cursor-not-allowed\",\n            open ? \"cursor-text\" : \"cursor-pointer\",\n            showClear ? \"pr-[60px]\" : \"pr-10\",\n          ].join(\" \")}\n        />\n\n        {/* Input's sweep of light as the field comes up */}\n        <span aria-hidden className=\"pointer-events-none absolute inset-0 z-15 overflow-hidden rounded-xl\">\n          <span\n            className=\"absolute inset-y-0 -left-[30%] block w-[30%] opacity-0 group-focus-within/combo:animate-input-shimmer\"\n            style={{ background: \"linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)\" }}\n          />\n        </span>\n\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label=\"clear\"\n            tabIndex={-1}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={() => pick(null)}\n            className={[\n              \"absolute right-9 top-1/2 z-20 grid h-[18px] w-[18px] -translate-y-1/2 cursor-pointer place-items-center rounded-full\",\n              \"text-ink-faint transition-[opacity,color,background-color] duration-150 hover:bg-surface-active hover:text-ink\",\n              \"opacity-0 group-hover/combo:opacity-100 group-focus-within/combo:opacity-100\",\n            ].join(\" \")}\n          >\n            <svg aria-hidden width=\"9\" height=\"9\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.75\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" d=\"M6 6l12 12M18 6L6 18\" />\n            </svg>\n          </button>\n        )}\n\n        <svg\n          aria-hidden\n          width=\"14\"\n          height=\"14\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          className={[\n            \"pointer-events-none absolute right-4 top-1/2 z-20 -mt-[7px] transition-[transform,color] duration-300 ease-[var(--ease-spring)]\",\n            open ? \"rotate-180 text-ink\" : \"text-ink-faint group-hover/combo:text-ink-label\",\n          ].join(\" \")}\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n        {name && <input type=\"hidden\" name={name} value={selectedValue ?? \"\"} />}\n      </div>\n\n      {mounted && (\n        <Portal>\n          <div\n            ref={setFloating}\n            className=\"rounded-[16px] p-1.5\"\n            style={{ ...panelStyle, maxWidth: \"min(420px, calc(100vw - 16px))\" }}\n          >\n            <div\n              ref={listRef}\n              id={`${uid}-list`}\n              role=\"listbox\"\n              aria-labelledby={label ? `${uid}-label` : undefined}\n              // keeps focus in the field, even when the scrollbar is dragged\n              onMouseDown={(e) => e.preventDefault()}\n              className=\"flex max-h-72 flex-col gap-0.5 overflow-y-auto rounded-[11px] bg-panel-face p-1 scroll-thin\"\n              style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n            >\n              {matches.length === 0 && (\n                <div role=\"presentation\" className=\"px-2.5 py-2 text-[13px] text-ink-faint\">\n                  {emptyText}\n                </div>\n              )}\n              {matches.map((o, i) => {\n                const isSel = o.value === selectedValue;\n                const isActive = i === active;\n                return (\n                  <div\n                    key={o.value}\n                    id={`${uid}-opt-${i}`}\n                    data-index={i}\n                    role=\"option\"\n                    aria-selected={isSel}\n                    aria-disabled={o.disabled || undefined}\n                    onClick={() => pick(o)}\n                    onMouseMove={() => !o.disabled && setActive(i)}\n                    className={[\n                      \"flex w-full items-center justify-between gap-3 rounded-[8px] px-2.5 py-2 text-[13px] transition-colors duration-100\",\n                      o.disabled ? \"cursor-not-allowed opacity-40\" : \"cursor-pointer\",\n                      isSel ? \"font-medium\" : \"\",\n                      // one ink per state, as in Select\n                      isSel || isActive ? \"text-ink\" : \"text-ink-body\",\n                      isActive ? \"bg-surface-active/80\" : \"\",\n                    ].join(\" \")}\n                    style={{ animation: `select-option-in 300ms var(--ease-out-soft) ${40 + Math.min(i, 8) * 22}ms both` }}\n                  >\n                    <span className=\"flex min-w-0 flex-col gap-px\">\n                      <span className=\"truncate\">\n                        <Highlight text={o.label} query={query ?? \"\"} />\n                      </span>\n                      {o.description && <span className=\"truncate text-[11.5px] font-normal text-ink-faint\">{o.description}</span>}\n                    </span>\n                    {isSel && (\n                      <svg aria-hidden className=\"shrink-0 text-ink\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" viewBox=\"0 0 24 24\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n                      </svg>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </Portal>\n      )}\n      <FieldMessage id={messageId} error={error} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/CommandPalette.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface CommandItem {
+    key: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    onSelect?: () => void;
+}
+interface CommandSection {
+    title: string;
+    items: CommandItem[];
+}
+interface CommandPaletteProps {
+    open: boolean;
+    onClose: () => void;
+    sections: CommandSection[];
+    placeholder?: string;
+    className?: string;
+}
+declare function CommandPalette({ open, onClose, sections, placeholder, className, }: CommandPaletteProps): react_jsx_runtime.JSX.Element | null;
+
+export { CommandPalette };

package/dist/CommandPalette.js

@@ -0,0 +1,304 @@
+"use client";
+
+// ../../components/ui/CommandPalette.tsx
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  useId
+} from "react";
+import { Portal } from "./Floating.js";
+import { Kbd } from "./Kbd.js";
+import { useModalBehavior } from "./useModalBehavior.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLOSE_MS = 240;
+function CommandPalette({
+  open,
+  onClose,
+  sections,
+  placeholder = "search commands\u2026",
+  className = ""
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const dialogRef = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const uid = useId();
+  const filtered = useMemo(() => {
+    const q = query.toLowerCase().trim();
+    if (!q) return sections;
+    return sections.map((section) => ({
+      ...section,
+      items: section.items.filter(
+        (item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q)
+      )
+    })).filter((section) => section.items.length > 0);
+  }, [sections, query]);
+  const flatItems = useMemo(
+    () => filtered.flatMap((s) => s.items),
+    [filtered]
+  );
+  const [wasOpen, setWasOpen] = useState(false);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) {
+      setMounted(true);
+      setQuery("");
+      setActiveIndex(0);
+    } else {
+      setVisible(false);
+    }
+  }
+  useEffect(() => {
+    if (open || !mounted) return;
+    const t = setTimeout(() => setMounted(false), CLOSE_MS);
+    return () => clearTimeout(t);
+  }, [open, mounted]);
+  useLayoutEffect(() => {
+    if (!mounted || !open || visible) return;
+    const el = dialogRef.current;
+    if (el) {
+      void el.getBoundingClientRect();
+    }
+    const id = requestAnimationFrame(() => {
+      setVisible(true);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [mounted, open, visible]);
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+  useEffect(() => {
+    if (!listRef.current) return;
+    const activeEl = listRef.current.querySelector(
+      `[data-command-index="${activeIndex}"]`
+    );
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+  const handleSelect = useCallback(
+    (item) => {
+      item.onSelect?.();
+      onClose();
+    },
+    [onClose]
+  );
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((i) => i + 1 >= flatItems.length ? 0 : i + 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex(
+            (i) => i - 1 < 0 ? Math.max(flatItems.length - 1, 0) : i - 1
+          );
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (flatItems[activeIndex]) {
+            handleSelect(flatItems[activeIndex]);
+          }
+          break;
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose, flatItems, activeIndex, handleSelect]);
+  useModalBehavior({ open, ready: visible, ref: dialogRef, onClose, initialFocus: inputRef });
+  if (!mounted) return null;
+  let itemIndex = 0;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-90 flex items-start justify-center pt-[min(20vh,140px)] px-4", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          "absolute inset-0 backdrop-blur-[6px]",
+          "transition-opacity ease-out",
+          visible ? "opacity-100 duration-300" : "opacity-0 duration-200"
+        ].join(" "),
+        style: { background: "var(--scrim)" },
+        "aria-hidden": true,
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: dialogRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Command palette",
+        className: [
+          "relative z-10 w-full max-w-lg rounded-[20px] p-1.5 overflow-hidden",
+          "transition-[opacity,transform,scale,translate] ease-[var(--ease-spring)]",
+          visible ? "opacity-100 scale-100 translate-y-0 duration-300" : "opacity-0 scale-[0.94] translate-y-3 duration-200",
+          className
+        ].filter(Boolean).join(" "),
+        style: { background: "var(--panel-bezel)", boxShadow: "var(--modal-shadow)" },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bg-panel-face rounded-[14px] overflow-hidden",
+            style: { boxShadow: "var(--panel-face-shadow)" },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5", children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "shrink-0 text-ink-faint",
+                    width: "14",
+                    height: "14",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.75",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    placeholder,
+                    role: "combobox",
+                    "aria-expanded": "true",
+                    "aria-controls": `${uid}-list`,
+                    "aria-activedescendant": flatItems[activeIndex] ? `${uid}-item-${activeIndex}` : void 0,
+                    "aria-autocomplete": "list",
+                    className: "flex-1 min-w-0 text-[14.5px] font-medium text-ink placeholder:text-ink-faint placeholder:font-normal bg-transparent border-none outline-none"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Kbd, { className: "shrink-0", children: "esc" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "border-b border-line" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: listRef,
+                  id: `${uid}-list`,
+                  role: "listbox",
+                  className: "max-h-[340px] overflow-y-auto scroll-thin py-2 px-2",
+                  children: filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "py-10 flex flex-col items-center gap-1 text-center", children: [
+                    /* @__PURE__ */ jsxs("p", { className: "text-[13px] font-medium text-ink-label", children: [
+                      "nothing for \u201C",
+                      query,
+                      "\u201D"
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-[12px] text-ink-faint", children: "try a shorter or different word." })
+                  ] }) : filtered.map((section, si) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": section.title, className: si > 0 ? "mt-3" : "", children: [
+                    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "px-3 py-1.5 text-[11.5px] font-medium text-ink-faint lowercase select-none", children: section.title }),
+                    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: section.items.map((item) => {
+                      const currentIndex = itemIndex++;
+                      const isActive = currentIndex === activeIndex;
+                      return /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          id: `${uid}-item-${currentIndex}`,
+                          role: "option",
+                          "aria-selected": isActive,
+                          "data-command-index": currentIndex,
+                          onClick: () => handleSelect(item),
+                          onMouseMove: () => setActiveIndex(currentIndex),
+                          className: [
+                            "group/cmd flex items-center gap-3 w-full text-left px-3 py-2 rounded-[10px] cursor-pointer",
+                            "transition-[background,box-shadow] duration-100",
+                            isActive ? "bg-surface-hover" : ""
+                          ].join(" "),
+                          style: { boxShadow: isActive ? "var(--panel-face-shadow)" : void 0 },
+                          children: [
+                            item.icon && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: [
+                                  "shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center transition-colors duration-100",
+                                  isActive ? "text-ink" : "text-ink-muted"
+                                ].join(" "),
+                                style: { background: "var(--face)", boxShadow: "var(--face-shadow)" },
+                                children: item.icon
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [
+                              /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-ink truncate", children: item.label }),
+                              item.description && /* @__PURE__ */ jsx("span", { className: "text-[12px] text-ink-muted truncate", children: item.description })
+                            ] }),
+                            item.shortcut && /* @__PURE__ */ jsx(Kbd, { className: "shrink-0", children: item.shortcut }),
+                            !item.shortcut && /* @__PURE__ */ jsx(
+                              "svg",
+                              {
+                                "aria-hidden": true,
+                                width: "12",
+                                height: "12",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: "2",
+                                viewBox: "0 0 24 24",
+                                className: [
+                                  "shrink-0 text-ink-faint transition-all duration-150",
+                                  isActive ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-1"
+                                ].join(" "),
+                                children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+                              }
+                            )
+                          ]
+                        },
+                        item.key
+                      );
+                    }) })
+                  ] }, section.title))
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center gap-4 px-4 py-2.5 border-t border-line text-[11.5px] text-ink-muted select-none",
+                  style: { background: "var(--palette-tray)" },
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx(Kbd, { children: "\u2191" }),
+                      /* @__PURE__ */ jsx(Kbd, { children: "\u2193" }),
+                      "Navigate"
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx(Kbd, { children: "\u21B5" }),
+                      "Open"
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "ml-auto tabular-nums text-ink-faint", children: [
+                      flatItems.length,
+                      " ",
+                      flatItems.length === 1 ? "result" : "results"
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+}
+export {
+  CommandPalette
+};
+//# sourceMappingURL=CommandPalette.js.map