@godxjp/ui 18.4.0 → 18.6.0

package/dist/components/data-display/index.js

@@ -1,4 +1,4 @@
-import { Badge } from "./badge.js";
+import { Badge, StatusBadge } from "./badge.js";
 import { ListRow } from "./list-row.js";
 import { CredentialReveal } from "./credential-reveal.js";
 import { QrCode } from "./qr-code.js";
@@ -15,6 +15,11 @@ import {
   CardAction,
   StatCard
 } from "./card.js";
+import {
+  ServiceCatalogCta,
+  ServiceLauncherCard,
+  ServiceLauncherCardSkeleton
+} from "./service-launcher-card.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 import { Descriptions } from "./descriptions.js";
 import { DataTable, flexRender } from "./data-table.js";
@@ -90,7 +95,11 @@ export {
   QrCode,
   ScrollArea,
   ScrollBar,
+  ServiceCatalogCta,
+  ServiceLauncherCard,
+  ServiceLauncherCardSkeleton,
   StatCard,
+  StatusBadge,
   Table,
   TableBody,
   TableCell,

package/dist/components/data-display/list-row.d.ts

@@ -1,24 +1,61 @@
 import * as React from "react";
+import type { ListRowDensityProp } from "../../props/components/data-display.prop.js";
 /**
- * ListRow — a single-line entity row (leading · title/description · trailing) for SHORT lists
- * inside a Card: active sessions, API tokens, linked accounts, passkeys, MFA factors, invitations.
+ * ListRow vertical/inline geometry — `default` (the roomy entity row) or `compact` (the
+ * inline-actions row: avatar + title + small trailing Buttons on one line in a narrow card).
+ * A ListRow-local subset of the density vocabulary — it has no `comfortable` step.
+ */
+export type ListRowDensity = ListRowDensityProp;
+/**
+ * ListRow — a single-line entity row (indicator · leading · title/description · trailing) for
+ * SHORT lists inside a Card: active sessions, API tokens, linked accounts, passkeys, MFA factors,
+ * invitations, notifications.
  * Use it INSTEAD of a hand-rolled `<div className="flex items-center justify-between border-b …">`.
  * DataTable is too heavy for a 2–4 item list, and nesting a Card per row would be card-in-card —
  * ListRow is the in-between surface. Drop rows into a `<Card><CardContent flush>…` and they stack
  * with a quiet divider; the trailing slot holds the row's action (Button / DropdownMenu / Switch).
+ *
+ * Overflow (#224): the content column always shrinks below its intrinsic width
+ * (`min-inline-size: min(--list-row-body-min-width, 100%)`) and the trailing actions wrap onto
+ * their own line at narrow container widths — a long title plus two Buttons never widens the page
+ * root. `overflow` picks how the long content resolves: `truncate` (default, one line + ellipsis)
+ * or `wrap` (multi-line, `overflow-wrap: anywhere`).
+ *
+ * Density (#246): `density="compact"` is the compact inline-actions geometry — tighter block
+ * padding/gap and a LOWER body threshold (`--list-row-compact-*`), so an avatar, the title and one
+ * or two small trailing Buttons stay on one line inside a ~326px card column at 390px. It only
+ * lowers thresholds, so the #224 wrap contract still holds.
  */
 export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
     as?: "div" | "li";
     /** Leading slot — a decorative icon or an Avatar. Mark a purely decorative icon `aria-hidden`. */
     leading?: React.ReactNode;
-    /** Primary line — rendered in medium weight; truncates to a single line. */
+    /** Primary line — rendered in medium weight. */
     title: React.ReactNode;
-    /** Secondary line under the title (muted, xs); truncates to a single line. */
+    /** Secondary line under the title (muted, xs). */
     description?: React.ReactNode;
     /** Trailing slot — the row action(s): a Button / DropdownMenu trigger, a Badge, or a Switch. */
     trailing?: React.ReactNode;
     /** Cross-axis alignment of the columns — `center` (default) or `start` for multi-line content. */
     align?: "center" | "start";
+    /**
+     * How title/description resolve content too long for the row — `truncate` (default: one line
+     * with an ellipsis) or `wrap` (multi-line; long unbroken tokens break so the row never widens).
+     */
+    overflow?: "truncate" | "wrap";
+    /**
+     * Row geometry — `default` (roomy entity row) or `compact` (#246): tighter block padding and
+     * column gap plus a lower body threshold, so a leading Avatar, the title/description and one or
+     * two small trailing Buttons stay INLINE inside a narrow card (≈326px content) at 390px, and a
+     * history Badge + date stays on the title's line. Retune per theme with `--list-row-compact-*`.
+     */
+    density?: ListRowDensity;
+    /**
+     * Read/unread state — renders the indicator dot (with localized `sr-only` text, never colour
+     * alone) and the tokenized unread surface. OMIT the prop entirely for rows that have no read
+     * state; pass `false` for a read row so its title stays on the same optical axis as unread ones.
+     */
+    unread?: boolean;
 }
 export declare const ListRow: React.ForwardRefExoticComponent<ListRowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/list-row.js

@@ -1,23 +1,43 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Text } from "../general/typography.js";
 const ListRow = React.forwardRef(
-  ({ as = "div", leading, title, description, trailing, align = "center", className, ...props }, ref) => {
+  ({
+    as = "div",
+    leading,
+    title,
+    description,
+    trailing,
+    align = "center",
+    overflow = "truncate",
+    density = "default",
+    unread,
+    className,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
     const Comp = as;
+    const truncate = overflow !== "wrap";
     return /* @__PURE__ */ jsxs(
       Comp,
       {
         ref,
         "data-slot": "list-row",
         "data-align": align === "start" ? "start" : void 0,
+        "data-overflow": overflow === "wrap" ? "wrap" : void 0,
+        "data-density": density === "compact" ? "compact" : void 0,
+        "data-unread": unread === true ? "" : void 0,
         className: cn("ui-list-row", className),
         ...props,
         children: [
+          unread !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-indicator", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: unread ? t("dataDisplay.listRow.unread") : t("dataDisplay.listRow.read") }) }) : null,
           leading != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-leading", children: leading }) : null,
           /* @__PURE__ */ jsxs("span", { "data-slot": "list-row-body", children: [
-            /* @__PURE__ */ jsx(Text, { weight: "medium", truncate: true, children: title }),
-            description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate: true, children: description }) : null
+            /* @__PURE__ */ jsx(Text, { weight: "medium", truncate, children: title }),
+            description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate, children: description }) : null
           ] }),
           trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
         ]

package/dist/components/data-display/qr-code.d.ts

@@ -5,4 +5,4 @@ export type QrCodeProps = QrCodeProp & Omit<React.ComponentPropsWithoutRef<"svg"
  * Renders a QR code entirely in-process. The encoded value is never sent to a network service,
  * written to an element attribute, or included in accessible text.
  */
-export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "style" | "children" | "role" | "type" | keyof QrCodeProp> & React.RefAttributes<SVGSVGElement>>;
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "style" | "role" | "children" | "type" | keyof QrCodeProp> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/data-display/service-launcher-card.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { LucideIcon } from "lucide-react";
+import type { HeadingLevelProp, ToneProp } from "../../props/vocabulary/index.js";
+export type ServiceLauncherStatusTone = Extract<ToneProp, "success" | "warning" | "destructive" | "info" | "neutral" | "muted">;
+export interface ServiceLauncherCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon: LucideIcon;
+    title: React.ReactNode;
+    titleLevel?: HeadingLevelProp;
+    statusLabel?: React.ReactNode;
+    statusTone?: ServiceLauncherStatusTone;
+    description?: React.ReactNode;
+    metadata?: React.ReactNode;
+    action: React.ReactNode;
+    disabledReason?: React.ReactNode;
+}
+/**
+ * Token-owned launcher surface for an organization-scoped downstream service.
+ *
+ * Consumers supply real status, metadata and actions; access is NEVER inferred — the component
+ * derives no entitlement, no launch URL and no disabled state of its own. `statusLabel`/
+ * `statusTone` are rendered verbatim, and the action's `disabled` state is the consumer's Button
+ * prop. The only thing derived from a prop is presentational: supplying `disabledReason` marks
+ * the tile `data-unavailable` so the token layer can drop the medallion's brand wash.
+ *
+ * Layout is NOT owned here: place tiles in `ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}` for
+ * the canonical 3 → 2 → 1 launcher grid (the grid queries its own container, never the viewport).
+ */
+export declare const ServiceLauncherCard: React.ForwardRefExoticComponent<ServiceLauncherCardProps & React.RefAttributes<HTMLDivElement>>;
+export interface ServiceCatalogCtaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: LucideIcon;
+    title: React.ReactNode;
+    action: React.ReactNode;
+}
+/** Dashed companion tile for the real catalog/add action beside launcher cards. */
+export declare const ServiceCatalogCta: React.ForwardRefExoticComponent<ServiceCatalogCtaProps & React.RefAttributes<HTMLDivElement>>;
+export interface ServiceLauncherCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+}
+/** Shape-matched loading placeholder for a launcher card. */
+export declare function ServiceLauncherCardSkeleton({ className, label, ...props }: ServiceLauncherCardSkeletonProps): React.JSX.Element;

package/dist/components/data-display/service-launcher-card.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Plus } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "./badge.js";
+import { Card } from "./card.js";
+const ServiceLauncherCard = React.forwardRef(
+  ({
+    className,
+    icon: Icon,
+    title,
+    titleLevel = 2,
+    statusLabel,
+    statusTone = "neutral",
+    description,
+    metadata,
+    action,
+    disabledReason,
+    ...props
+  }, ref) => {
+    const Heading = `h${titleLevel}`;
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        density: "tight",
+        className: cn("ui-service-launcher-card", className),
+        "data-service-launcher": "",
+        "data-unavailable": disabledReason != null ? "" : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-heading", children: [
+            /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+            /* @__PURE__ */ jsx(Heading, { "data-slot": "service-launcher-title", children: title }),
+            statusLabel != null ? /* @__PURE__ */ jsx(Badge, { tone: statusTone, "data-slot": "service-launcher-status", children: statusLabel }) : null
+          ] }),
+          description != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-description", children: description }) : null,
+          metadata != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-metadata", children: metadata }) : null,
+          disabledReason != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-disabled-reason", children: disabledReason }) : null,
+          /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-action", children: action })
+        ]
+      }
+    );
+  }
+);
+ServiceLauncherCard.displayName = "ServiceLauncherCard";
+const ServiceCatalogCta = React.forwardRef(
+  ({ className, icon: Icon = Plus, title, action, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ref,
+      variant: "outline",
+      className: cn("ui-service-catalog-cta", className),
+      "data-service-catalog-cta": "",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "data-slot": "service-catalog-icon", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "service-catalog-title", children: title }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "service-catalog-action", children: action })
+      ]
+    }
+  )
+);
+ServiceCatalogCta.displayName = "ServiceCatalogCta";
+function ServiceLauncherCardSkeleton({
+  className,
+  label,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      density: "tight",
+      className: cn("ui-service-launcher-card", className),
+      "data-service-launcher": "",
+      "aria-busy": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-skeleton-heading", children: [
+          /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-icon" }),
+          /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-title" }),
+          /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-status" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-description" }),
+        /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-metadata" }),
+        /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-action" })
+      ]
+    }
+  );
+}
+export {
+  ServiceCatalogCta,
+  ServiceLauncherCard,
+  ServiceLauncherCardSkeleton
+};

package/dist/components/data-display/table.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { BreakpointProp, TableColumnPriorityProp, TablePresetProp } from "../../props/vocabulary/index.js";
 export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
     /**
      * Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a
@@ -8,6 +9,23 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
      * avoids a redundant NESTED scroll container and a duplicate keyboard focus stop for one table.
      */
     scrollable?: boolean;
+    /**
+     * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
+     * table exactly as it is. `"action-collection"` is the canonical dense approval / action queue
+     * (gh#253): below `collapseBelow`, the desktop intrinsic column widths — the thing that pushes
+     * the last columns outside a 390px viewport — are replaced by the token-owned column PRIORITY
+     * measures (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead
+     * of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
+     * The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
+     * header association, `aria-sort` and screen-reader table navigation are identical at every width.
+     */
+    preset?: TablePresetProp;
+    /**
+     * Step at which `preset="action-collection"` switches to the priority measures, measured against
+     * the TABLE's own container (not the viewport), so a table inside a rail collapses before the
+     * page does. Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`.
+     */
+    collapseBelow?: BreakpointProp;
 };
 export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
     /**
@@ -18,9 +36,36 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
      * avoids a redundant NESTED scroll container and a duplicate keyboard focus stop for one table.
      */
     scrollable?: boolean;
+    /**
+     * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
+     * table exactly as it is. `"action-collection"` is the canonical dense approval / action queue
+     * (gh#253): below `collapseBelow`, the desktop intrinsic column widths — the thing that pushes
+     * the last columns outside a 390px viewport — are replaced by the token-owned column PRIORITY
+     * measures (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead
+     * of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
+     * The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
+     * header association, `aria-sort` and screen-reader table navigation are identical at every width.
+     */
+    preset?: TablePresetProp;
+    /**
+     * Step at which `preset="action-collection"` switches to the priority measures, measured against
+     * the TABLE's own container (not the viewport), so a table inside a rail collapses before the
+     * page does. Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`.
+     */
+    collapseBelow?: BreakpointProp;
 } & React.RefAttributes<HTMLTableElement>>;
 export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
-export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * Column priority carried by BOTH the header cell and the body cells of a column. Read only by
+ * `Table preset="action-collection"` below its collapse step, where it selects the column's
+ * token-owned measure; unset columns take the remaining space. Emitted as `data-priority` only
+ * when supplied, so an ordinary table gains no attribute.
+ */
+type TableCellPriority = {
+    priority?: TableColumnPriorityProp;
+};
+export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
+export {};

package/dist/components/data-display/table.js

@@ -3,16 +3,23 @@ import * as React from "react";
 import { tableHeadHeightClass } from "../../lib/control-styles.js";
 import { cn } from "../../lib/utils.js";
 const Table = React.forwardRef(
-  ({ className, scrollable = true, ...props }, ref) => (
+  ({ className, scrollable = true, preset = "default", collapseBelow = "sm", ...props }, ref) => (
     // A table wider than its container scrolls horizontally in this wrapper; keep it
     // keyboard-reachable so it can be scrolled without a pointer (WCAG 2.1.1 / axe
     // scrollable-region-focusable). No landmark role — avoids landmark-unique collisions.
     // When `scrollable` is false an ancestor owns the scroll region, so this is a bare
     // positioning box (no `overflow`, no tab stop) to avoid a redundant nested scroller.
+    // The preset adds ONE class (the container the collapse step is measured against) and the
+    // step attribute; with `preset="default"` neither is emitted, so the box is byte-identical.
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: scrollable ? "relative w-full overflow-auto" : "relative w-full",
+        className: cn(
+          scrollable ? "relative w-full overflow-auto" : "relative w-full",
+          preset !== "default" && "ui-table-collection"
+        ),
+        "data-preset": preset === "default" ? void 0 : preset,
+        "data-collapse-below": preset === "default" ? void 0 : collapseBelow,
         ...scrollable ? { tabIndex: 0 } : {},
         children: /* @__PURE__ */ jsx(
           "table",
@@ -44,9 +51,27 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", { ref, "data-slot": "table-head", className: cn(tableHeadHeightClass, className), ...props }));
+const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    "data-slot": "table-head",
+    "data-priority": priority,
+    className: cn(tableHeadHeightClass, className),
+    ...props
+  }
+));
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", { ref, "data-slot": "table-cell", className: cn(className), ...props }));
+const TableCell = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    "data-slot": "table-cell",
+    "data-priority": priority,
+    className: cn(className),
+    ...props
+  }
+));
 TableCell.displayName = "TableCell";
 export {
   Table,

package/dist/components/data-entry/command-palette.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type CommandPaletteItem = {
+    id: string;
+    label: React.ReactNode;
+    searchValue?: string;
+    meta?: React.ReactNode;
+    disabled?: boolean;
+};
+export type CommandPaletteGroup = {
+    id: string;
+    label: React.ReactNode;
+    items: CommandPaletteItem[];
+};
+export type CommandPaletteLabels = {
+    open: string;
+    title: string;
+    description: string;
+    placeholder: string;
+    empty: React.ReactNode;
+    loading?: React.ReactNode;
+    move?: React.ReactNode;
+    select?: React.ReactNode;
+    close?: React.ReactNode;
+};
+export type CommandPaletteProps = {
+    groups: CommandPaletteGroup[];
+    labels: CommandPaletteLabels;
+    onSelect: (item: CommandPaletteItem) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    loading?: boolean;
+    error?: React.ReactNode;
+    trigger?: React.ReactNode;
+    shortcut?: boolean;
+};
+export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;

package/dist/components/data-entry/command-palette.js

@@ -0,0 +1,125 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search } from "lucide-react";
+import { Button } from "../general/button.js";
+import { Dialog, DialogContent } from "../feedback/dialog.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "./command.js";
+function CommandPalette({
+  groups,
+  labels,
+  onSelect,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  loading = false,
+  error,
+  trigger,
+  shortcut = true
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const shortcutRestoreFocusRef = React.useRef(null);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (controlledOpen === void 0) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  React.useEffect(() => {
+    if (!shortcut) return;
+    const handleKeyDown = (event) => {
+      if (!event.isComposing && event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        if (!open && document.activeElement instanceof HTMLElement) {
+          shortcutRestoreFocusRef.current = document.activeElement;
+        }
+        setOpen(!open);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, setOpen, shortcut]);
+  const triggerNode = trigger ?? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ui-command-palette-trigger", children: [
+    /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: labels.open }),
+    /* @__PURE__ */ jsx("span", { className: "kbd", "aria-hidden": "true", children: "\u2318K" })
+  ] });
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: "ui-command-palette",
+        showCloseButton: false,
+        "aria-modal": "true",
+        "aria-describedby": "ui-command-palette-description",
+        onCloseAutoFocus: (event) => {
+          const restoreTarget = shortcutRestoreFocusRef.current;
+          if (restoreTarget?.isConnected) {
+            event.preventDefault();
+            requestAnimationFrame(() => {
+              if (restoreTarget.isConnected) {
+                restoreTarget.focus({ preventScroll: true });
+              }
+            });
+          }
+          shortcutRestoreFocusRef.current = null;
+        },
+        children: [
+          /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: labels.title }),
+          /* @__PURE__ */ jsx(Dialog.Description, { id: "ui-command-palette-description", className: "sr-only", children: labels.description }),
+          /* @__PURE__ */ jsxs(Command, { label: labels.title, children: [
+            /* @__PURE__ */ jsx(CommandInput, { autoFocus: true, placeholder: labels.placeholder, "aria-label": labels.placeholder }),
+            /* @__PURE__ */ jsx(CommandList, { "aria-busy": loading, children: loading ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "alert", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),
+              groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: item.searchValue ?? `${item.id} ${String(item.label)}`,
+                  disabled: item.disabled,
+                  onSelect: () => {
+                    setOpen(false);
+                    onSelect(item);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "ui-command-palette-label", children: item.label }),
+                    item.meta != null ? /* @__PURE__ */ jsx("span", { className: "ui-command-palette-meta", children: item.meta }) : null
+                  ]
+                },
+                item.id
+              )) }, group.id))
+            ] }) })
+          ] }),
+          labels.move != null || labels.select != null || labels.close != null ? /* @__PURE__ */ jsxs("div", { className: "ui-command-palette-hints", "aria-hidden": "true", children: [
+            labels.move != null ? /* @__PURE__ */ jsxs("span", { children: [
+              "\u2191\u2193 ",
+              labels.move
+            ] }) : null,
+            labels.select != null ? /* @__PURE__ */ jsxs("span", { children: [
+              "\u21B5 ",
+              labels.select
+            ] }) : null,
+            labels.close != null ? /* @__PURE__ */ jsxs("span", { children: [
+              "esc ",
+              labels.close
+            ] }) : null
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CommandPalette
+};

package/dist/components/data-entry/command.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 export declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,38 +26,38 @@ export declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pic
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "value" | "heading"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "onSelect" | "value" | "disabled"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;