@godxjp/ui 18.8.0 → 18.9.0

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

@@ -636,9 +636,8 @@ DataTable.Content = function DataTableContent() {
                         ),
                         children: col.render ? col.render(original) : (() => {
                           const v = original[col.key];
-                          if (v == null) return "\u2014";
-                          if (typeof v === "string" || typeof v === "number") return String(v);
-                          return "\u2014";
+                          const text = v == null || !(typeof v === "string" || typeof v === "number") ? "\u2014" : String(v);
+                          return /* @__PURE__ */ jsx("span", { "data-slot": "table-cell-text", children: text });
                         })()
                       },
                       col.key

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

@@ -29,9 +29,50 @@ export type CommandPaletteProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Controlled search-box query. Pairs with `onSearchChange`; leave it out for the uncontrolled
+     * palette (seeded by `defaultSearch`). Same idiom as `SearchSelect`'s `search`.
+     */
+    search?: string;
+    /** Initial uncontrolled query, and the value the palette resets to when it closes. Default `""`. */
+    defaultSearch?: string;
+    /**
+     * Fires on every keystroke with the current query — the seam a server-backed group needs to run
+     * search-as-you-type. Also fires with `defaultSearch` when the palette closes.
+     */
+    onSearchChange?: (query: string) => void;
+    /**
+     * Whether the palette filters `groups` itself (cmdk's client-side fuzzy match). Set `false` when
+     * the QUERY is answered by a server and `groups` already holds the matches — otherwise every row
+     * is scored a second time against the same string and late-arriving matches are dropped.
+     *
+     * It also decides who owns the empty node; see the component doc block. Default `true`.
+     */
+    shouldFilter?: boolean;
     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;
+/**
+ * CommandPalette — the ⌘K search dialog.
+ *
+ * ## The empty-state contract (gh#412)
+ *
+ * `labels.empty` renders under exactly one rule, and which mechanism decides follows `shouldFilter`:
+ *
+ * - **`shouldFilter` (default, client-side)** — cmdk owns it: the palette holds items, the query
+ *   matches none of them. Unchanged.
+ * - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived synchronously from
+ *   props: the empty node renders when `groups` carries no items, and never while `loading` or
+ *   `error` is set. cmdk's own empty node cannot be trusted here, because it is driven by a
+ *   scheduled count of the items that have REGISTERED in the DOM, not by what the consumer knows —
+ *   so an async group that populates a frame late flips it on and off and any assertion over it
+ *   races. Reading `groups` instead makes "did we render the empty state?" a pure function of the
+ *   props at that render, which is what a contract test can assert.
+ *
+ * The practical consequence for search-as-you-type: hold `loading` true for the whole in-flight
+ * window. While it is true the palette shows `labels.loading` and never claims "no results" —
+ * a request that has not answered yet is not an empty result.
+ */
+export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;

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

@@ -19,14 +19,20 @@ function CommandPalette({
   open: controlledOpen,
   defaultOpen = false,
   onOpenChange,
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  shouldFilter = true,
   loading = false,
   error,
   trigger,
   shortcut = true
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const [uncontrolledSearch, setUncontrolledSearch] = React.useState(defaultSearch);
   const shortcutRestoreFocusRef = React.useRef(null);
   const open = controlledOpen ?? uncontrolledOpen;
+  const search = controlledSearch ?? uncontrolledSearch;
   const setOpen = React.useCallback(
     (next) => {
       if (controlledOpen === void 0) {
@@ -36,6 +42,22 @@ function CommandPalette({
     },
     [controlledOpen, onOpenChange]
   );
+  const setSearch = React.useCallback(
+    (next) => {
+      if (controlledSearch === void 0) {
+        setUncontrolledSearch(next);
+      }
+      onSearchChange?.(next);
+    },
+    [controlledSearch, onSearchChange]
+  );
+  const previousOpenRef = React.useRef(open);
+  React.useEffect(() => {
+    const wasOpen = previousOpenRef.current;
+    previousOpenRef.current = open;
+    if (!wasOpen || open || search === defaultSearch) return;
+    setSearch(defaultSearch);
+  }, [open, search, defaultSearch, setSearch]);
   React.useEffect(() => {
     if (!shortcut) return;
     const handleKeyDown = (event) => {
@@ -50,6 +72,7 @@ function CommandPalette({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen, shortcut]);
+  const hasItems = React.useMemo(() => groups.some((group) => group.items.length > 0), [groups]);
   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 }),
@@ -79,10 +102,23 @@ function CommandPalette({
         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__ */ jsxs(Command, { label: labels.title, shouldFilter, children: [
+            /* @__PURE__ */ jsx(
+              CommandInput,
+              {
+                autoFocus: true,
+                value: search,
+                onValueChange: setSearch,
+                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 }),
+              shouldFilter ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : hasItems ? null : (
+                // Same node cmdk would have rendered (class + role), decided from `groups`
+                // instead of from its scheduled DOM-registration count — see the doc block.
+                /* @__PURE__ */ jsx("div", { className: "ui-command-empty", role: "presentation", children: labels.empty })
+              ),
               groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
                 CommandItem,
                 {

package/dist/props/registry.d.ts

@@ -1547,7 +1547,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly CommandPaletteProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry/command-palette.tsx";
-        readonly vocabulary: readonly ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp"];
+        readonly vocabulary: readonly ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp", "OnSearchChangeProp"];
     };
     readonly TwoFactorSetupProp: {
         readonly group: "feedback";

package/dist/props/registry.js

@@ -1697,7 +1697,7 @@ const COMPONENT_PROP_REGISTRY = {
   CommandPaletteProp: {
     group: "data-entry",
     file: "components/data-entry/command-palette.tsx",
-    vocabulary: ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp"]
+    vocabulary: ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp", "OnSearchChangeProp"]
   },
   TwoFactorSetupProp: {
     group: "feedback",

package/dist/styles/base.css

@@ -28,6 +28,34 @@
  * ───────────────────────────────────────────────────────────────────────── */
 @import "tailwindcss";
 
+/* ── THE LAYER CONTRACT (gh#412) ───────────────────────────────────────────
+ * `@import "tailwindcss"` establishes `theme, base, components, utilities`. Everything this
+ * package styles lives in `@layer components`, which is EARLIER than `utilities` — so a Tailwind
+ * utility a component itself emits silently outranks the package rule that is supposed to own the
+ * same property, no matter how specific that rule is. That is not a specificity bug you can fix
+ * with another selector; layer order beats specificity outright.
+ *
+ * It shipped as a real defect: `<table class="… text-sm">` (utilities) vs the collection preset's
+ * `font-size: var(--table-action-collection-font-size-compact)` (components) — the compact type
+ * tier never applied at ANY width, so the documented token was dead and a 5–6 character Japanese
+ * label could not fit the narrow-frame column measure (WCAG 2.2 SC 1.4.10, and only ever visible
+ * in Japanese). Two independent consumers reported it.
+ *
+ * `godxjp-ui-responsive` is declared HERE, after Tailwind, so it is the LAST layer and outranks
+ * `utilities`. It is reserved for one thing: RESPONSIVE RE-POINTS — the container/media blocks
+ * that must win over a component's own static utility for the layout contract to hold. Nothing
+ * static belongs in it; a rule that does not sit inside a `@container`/`@media` query goes in
+ * `@layer components` like everything else.
+ *
+ * What this layer canNOT do — and the rule consumers must follow: an UNLAYERED consumer rule
+ * outranks EVERY layer, including this one. So app CSS must theme this package through TOKENS on
+ * a wrapper, never by writing its own selectors against `[data-slot]` / `[data-priority]`
+ * elements. A consumer that does write such a rule must put it in a layer
+ * (`@layer components { … }`), or it will silently kill the responsive re-points the package
+ * makes — a column measured to 0px and wrapped one character per line is what that looks like.
+ * See docs/TOKENS.md · "The layer contract". */
+@layer godxjp-ui-responsive;
+
 /* Per-language font wiring — token-only, NO hardcoded faces. Each locale reads
  * an OPTIONAL per-lang slot token (empty by default) and falls back to the
  * base sans. Consumers switch a locale's face by setting its slot, e.g.

package/dist/styles/table-layout.css

@@ -307,7 +307,18 @@
     --table-action-collection-column-width: var(--table-action-collection-actions-width);
     text-align: end;
   }
+}
 
+/* The compact tier lives in `godxjp-ui-responsive` — the LAST layer, declared after Tailwind in
+ * styles/base.css — not in `@layer components`. `<table>` carries `text-sm`, a Tailwind utility,
+ * and `utilities` outranks `components` by LAYER ORDER, so a `font-size:` re-point written here as
+ * a component rule can never apply however specific it is: that is exactly why
+ * `--table-action-collection-font-size-compact` was dead at every width (gh#412), leaving the
+ * narrow frame at 14px where a 5–6 character Japanese label overflows its column measure. The
+ * column measures move with it so the whole compact tier is decided in ONE place, and so a
+ * consumer utility on the table can't half-collapse it either. See styles/base.css · THE LAYER
+ * CONTRACT. */
+@layer godxjp-ui-responsive {
   /* Below the step the SOURCE measures are re-pointed to their compact tier (and the type / row
    * density with them); nothing else moves. One block per canonical step — a media/container
    * query cannot read a `var()`, so the tokenized scale is written out (sm 40rem · md 48rem ·
@@ -324,6 +335,10 @@
       --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
       --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
       font-size: var(--table-action-collection-font-size-compact);
+      /* The legibility floor. Default `0` keeps the table fitted to its container exactly as
+       * before; a consumer whose column count exceeds the priority budget raises it and the
+       * surrounding scroll region takes the overflow instead of the cells. */
+      min-inline-size: var(--table-action-collection-min-inline-size-compact);
     }
 
     /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
@@ -345,6 +360,10 @@
       --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
       --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
       font-size: var(--table-action-collection-font-size-compact);
+      /* The legibility floor. Default `0` keeps the table fitted to its container exactly as
+       * before; a consumer whose column count exceeds the priority budget raises it and the
+       * surrounding scroll region takes the overflow instead of the cells. */
+      min-inline-size: var(--table-action-collection-min-inline-size-compact);
     }
 
     /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
@@ -366,6 +385,10 @@
       --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
       --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
       font-size: var(--table-action-collection-font-size-compact);
+      /* The legibility floor. Default `0` keeps the table fitted to its container exactly as
+       * before; a consumer whose column count exceeds the priority budget raises it and the
+       * surrounding scroll region takes the overflow instead of the cells. */
+      min-inline-size: var(--table-action-collection-min-inline-size-compact);
     }
 
     /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
@@ -387,6 +410,10 @@
       --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
       --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
       font-size: var(--table-action-collection-font-size-compact);
+      /* The legibility floor. Default `0` keeps the table fitted to its container exactly as
+       * before; a consumer whose column count exceeds the priority budget raises it and the
+       * surrounding scroll region takes the overflow instead of the cells. */
+      min-inline-size: var(--table-action-collection-min-inline-size-compact);
     }
 
     /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the

package/dist/tokens/components/table.css

@@ -68,4 +68,25 @@
   --table-action-collection-cell-space-x-compact: var(--space-2);
   --table-action-collection-cell-padding-y-compact: var(--space-2);
   --table-action-collection-row-height-compact: var(--table-row-height-compact);
+  /* Compact-tier LEGIBILITY FLOOR — the measure below which the preset stops fitting the table
+   * to its container and lets the scroll region it already owns take over.
+   *
+   * The percentage budget above is sized for ONE column per priority tier plus one free-text
+   * column. A queue that repeats a tier — two `secondary` columns, three `meta` columns, or an
+   * unmarked column beside them — asks for more than 100%, and under `table-layout: fixed` the
+   * surplus is taken out of the columns rather than out of the table: measured on a seven-column
+   * Japanese admin queue at 390, every column landed at 44–59px and CJK labels wrapped at ONE to
+   * TWO characters per line (dxs-platform/platform#680). That is a WCAG 2.2 SC 1.4.10 Reflow (AA)
+   * failure, and it is the failure mode this floor removes.
+   *
+   * Scrolling is the correct escape, not a concession: SC 1.4.10 exempts "parts of the content
+   * which require two-dimensional layout for usage or meaning", and its own note names data
+   * tables as the example. A table that scrolls horizontally inside its card conforms; a table
+   * whose cells are one character wide does not.
+   *
+   * Default `0` so nothing changes for any existing consumer: a queue that fits its priority
+   * budget keeps fitting. A consumer whose queue carries more columns than the budget sets this
+   * to the measure at which its narrowest column is still readable (roughly 5rem per column for
+   * Japanese at the compact type tier) and the table scrolls instead of crushing. */
+  --table-action-collection-min-inline-size-compact: 0;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.8.0",
-  "godxUiMcp": "18.8.0",
+  "version": "18.9.0",
+  "godxUiMcp": "18.9.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {