@godxjp/ui 32.0.4 → 32.1.0

package/agent/patterns-index.json

@@ -91,6 +91,45 @@
       "delete"
     ]
   },
+  {
+    "aliases": [
+      "cascading-selects",
+      "country-state-city",
+      "chained-selects",
+      "linked-selects"
+    ],
+    "name": "dependent-selects",
+    "tagline": "Country → state → city: three Selects where each child is disabled until its parent has a value (FormField helper says why), loading while its options fetch, and reset to \"\" when the parent changes. A composition, not a component — reach for Cascader only when it is ONE field.",
+    "tags": [
+      "form",
+      "select",
+      "dependent",
+      "cascading",
+      "address",
+      "loading",
+      "reset"
+    ]
+  },
+  {
+    "aliases": [
+      "card-selection",
+      "selectable-cards",
+      "bulk-delete-cards",
+      "grid-bulk-actions"
+    ],
+    "name": "card-grid-selection",
+    "tagline": "Select cards in a grid and act on them in bulk — Card + Checkbox per item, the real DataTable.BulkActions driven by count outside a table, indeterminate select-all, AlertDialog before delete, toast with Undo after, EmptyState when nothing is left.",
+    "tags": [
+      "selection",
+      "bulk",
+      "cards",
+      "grid",
+      "delete",
+      "undo",
+      "empty",
+      "checkbox"
+    ]
+  },
   {
     "name": "deferred-loading",
     "tagline": "Inertia deferred props with a Skeleton fallback — SkeletonTable while data loads, then DataTable (real @godxjp/ui API).",

package/agent/patterns.json

@@ -97,6 +97,47 @@
       "delete"
     ]
   },
+  {
+    "aliases": [
+      "cascading-selects",
+      "country-state-city",
+      "chained-selects",
+      "linked-selects"
+    ],
+    "code": "// Live page: /showcase/form-dependent-selects (docs/showcase/form-dependent-selects.tsx).\n// Three rules: (1) child disabled until parent has a value + helper saying why;\n// (2) child loading while its options fetch; (3) parent change resets EVERY descendant to \"\".\n// Reset to \"\", Select's controlled empty value — undefined flips it to uncontrolled.\nimport * as React from \"react\";\nimport { Form, FormField, Select } from \"@godxjp/ui/data-entry\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Option = { value: string; label: string };\ntype Address = { country: string; region: string; city: string };\n\n// Fetch options for a parent value. The answer is stored WITH the parent it answers, so\n// `loading` is derived and a slow answer for an OLD parent is never shown on the new one.\nfunction useChildOptions(parent: string, fetchOptions: (parent: string) => Promise<Option[]>) {\n  const [answer, setAnswer] = React.useState<{ parent: string; options: Option[] }>({ parent: \"\", options: [] });\n  React.useEffect(() => {\n    if (!parent) return;\n    let live = true;\n    void fetchOptions(parent).then((options) => { if (live) setAnswer({ parent, options }); });\n    return () => { live = false; };\n  }, [parent, fetchOptions]);\n  const ready = parent !== \"\" && answer.parent === parent;\n  return { options: ready ? answer.options : [], loading: parent !== \"\" && !ready };\n}\n\nexport function AddressFields({\n  fetchRegions,\n  fetchCities,\n}: {\n  fetchRegions: (country: string) => Promise<Option[]>; // stable (module-level or useCallback)\n  fetchCities: (region: string) => Promise<Option[]>;\n}) {\n  const { t, locale } = useTranslation();\n  const [value, setValue] = React.useState<Address>({ country: \"\", region: \"\", city: \"\" });\n  const regions = useChildOptions(value.country, fetchRegions);\n  const cities = useChildOptions(value.region, fetchCities);\n\n  // ISO 3166-1 alpha-2 → the reader's language, no catalogue needed.\n  const countries = React.useMemo(() => {\n    const names = new Intl.DisplayNames([locale], { type: \"region\" });\n    return [\"JP\", \"US\", \"VN\"].map((code) => ({ value: code, label: names.of(code) ?? code }));\n  }, [locale]);\n\n  return (\n    <Form controlWidth=\"20rem\">\n      <Flex direction=\"col\" gap=\"md\">\n        <FormField id=\"country\" label={t(\"address.country\")}>\n          <Select\n            value={value.country}\n            onValueChange={(country: string) => setValue({ country, region: \"\", city: \"\" })}\n            options={countries}\n            placeholder={t(\"address.countryPlaceholder\")}\n          />\n        </FormField>\n        <FormField\n          id=\"region\"\n          label={t(\"address.region\")}\n          helper={value.country ? undefined : t(\"address.selectCountryFirst\")}\n        >\n          <Select\n            value={value.region}\n            onValueChange={(region: string) => setValue({ ...value, region, city: \"\" })}\n            options={regions.options}\n            disabled={!value.country}\n            loading={regions.loading}\n            placeholder={t(\"address.regionPlaceholder\")}\n          />\n        </FormField>\n        <FormField\n          id=\"city\"\n          label={t(\"address.city\")}\n          helper={value.region ? undefined : t(\"address.selectRegionFirst\")}\n        >\n          <Select\n            value={value.city}\n            onValueChange={(city: string) => setValue({ ...value, city })}\n            options={cities.options}\n            disabled={!value.region}\n            loading={cities.loading}\n            placeholder={t(\"address.cityPlaceholder\")}\n          />\n        </FormField>\n      </Flex>\n    </Form>\n  );\n}",
+    "name": "dependent-selects",
+    "tagline": "Country → state → city: three Selects where each child is disabled until its parent has a value (FormField helper says why), loading while its options fetch, and reset to \"\" when the parent changes. A composition, not a component — reach for Cascader only when it is ONE field.",
+    "tags": [
+      "form",
+      "select",
+      "dependent",
+      "cascading",
+      "address",
+      "loading",
+      "reset"
+    ]
+  },
+  {
+    "aliases": [
+      "card-selection",
+      "selectable-cards",
+      "bulk-delete-cards",
+      "grid-bulk-actions"
+    ],
+    "code": "// Live page: /showcase/card-grid-selection (docs/showcase/card-grid-selection.tsx).\n// DataTable.BulkActions reads the table context only when one exists — outside a table pass\n// `count`: it renders nothing at 0, and the localised \"N selected\" + a labelled region above 0.\n// The Checkbox's inline label is the item name: the name is the click target and the\n// accessible name. Do NOT make the whole Card an onClick div.\nimport * as React from \"react\";\nimport { FolderOpen, Trash2 } from \"lucide-react\";\nimport { Card, CardContent, DataTable, EmptyState } from \"@godxjp/ui/data-display\";\nimport { Checkbox } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog, Toaster, toast } from \"@godxjp/ui/feedback\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Item = { id: string; name: string };\n\nexport function SelectableCardGrid({ source }: { source: Item[] }) {\n  const { t } = useTranslation();\n  const [items, setItems] = React.useState(source);\n  const [selected, setSelected] = React.useState<Set<string>>(new Set());\n  const [confirmOpen, setConfirmOpen] = React.useState(false);\n  const [confirmCount, setConfirmCount] = React.useState(0); // frozen: selection clears on confirm\n\n  const all = items.length > 0 && items.every((i) => selected.has(i.id));\n  const selectAll: boolean | \"indeterminate\" = all ? true : selected.size > 0 ? \"indeterminate\" : false;\n\n  const deleteSelected = () => {\n    const removed = new Set(selected);\n    setItems((cur) => cur.filter((i) => !removed.has(i.id)));\n    setSelected(new Set());\n    toast(t(\"files.deleted\", { count: removed.size }), {\n      action: {\n        label: t(\"files.undo\"),\n        // restore in the SOURCE order, not appended at the end\n        onClick: () => setItems((cur) => source.filter((i) => removed.has(i.id) || cur.some((c) => c.id === i.id))),\n      },\n    });\n  };\n\n  if (items.length === 0) {\n    return (\n      <EmptyState\n        icon={FolderOpen}\n        variant=\"section\"\n        title={t(\"files.emptyTitle\")}\n        action={<Button variant=\"outline\" onClick={() => setItems(source)}>{t(\"files.reset\")}</Button>}\n      />\n    );\n  }\n\n  return (\n    <Flex direction=\"col\" gap=\"md\">\n      <Flex direction=\"row\" align=\"center\" gap=\"md\" wrap>\n        <Checkbox\n          checked={selectAll}\n          onCheckedChange={(next) => setSelected(next === true ? new Set(items.map((i) => i.id)) : new Set())}\n        >\n          {t(\"files.selectAll\")}\n        </Checkbox>\n        <DataTable.BulkActions count={selected.size}>\n          <Button variant=\"destructive\" size=\"sm\" onClick={() => { setConfirmCount(selected.size); setConfirmOpen(true); }}>\n            <Trash2 aria-hidden=\"true\" />\n            {t(\"files.delete\")}\n          </Button>\n        </DataTable.BulkActions>\n      </Flex>\n      <ResponsiveGrid columns={{ base: 1, sm: 2, lg: 3 }}>\n        {items.map((item) => (\n          <Card key={item.id} className={selected.has(item.id) ? \"border-primary\" : undefined}>\n            <CardContent>\n              <Checkbox\n                checked={selected.has(item.id)}\n                onCheckedChange={(on) =>\n                  setSelected((prev) => {\n                    const next = new Set(prev);\n                    if (on === true) next.add(item.id); else next.delete(item.id);\n                    return next;\n                  })\n                }\n              >\n                {item.name}\n              </Checkbox>\n            </CardContent>\n          </Card>\n        ))}\n      </ResponsiveGrid>\n      <AlertDialog\n        open={confirmOpen}\n        onOpenChange={setConfirmOpen}\n        variant=\"destructive\"\n        title={t(\"files.confirmTitle\", { count: confirmCount })}\n        confirmLabel={t(\"files.delete\")}\n        onConfirm={deleteSelected}\n      />\n      <Toaster />{/* once per app — usually in the root layout, not here */}\n    </Flex>\n  );\n}",
+    "name": "card-grid-selection",
+    "tagline": "Select cards in a grid and act on them in bulk — Card + Checkbox per item, the real DataTable.BulkActions driven by count outside a table, indeterminate select-all, AlertDialog before delete, toast with Undo after, EmptyState when nothing is left.",
+    "tags": [
+      "selection",
+      "bulk",
+      "cards",
+      "grid",
+      "delete",
+      "undo",
+      "empty",
+      "checkbox"
+    ]
+  },
   {
     "code": "// Server (Laravel): defer the heavy prop\n//   Inertia::render('crm/coupons/index', [\n//     'coupons' => Inertia::defer(fn () => Coupon::all()),\n//   ]);\nimport { Card, CardContent, DataTable } from \"@godxjp/ui/data-display\";\nimport type { ColumnDef } from \"@godxjp/ui/data-display\";\nimport { SkeletonTable } from \"@godxjp/ui/feedback\";\n\ntype Coupon = { id: string; name: string };\nconst columns: ColumnDef<Coupon>[] = [{ key: \"name\", header: \"クーポン名\" }];\n\n// coupons is undefined until the deferred request resolves\nexport default function Coupons({ coupons }: { coupons?: Coupon[] }) {\n  return (\n    <Card>\n      <CardContent flush>\n        {!coupons\n          ? <SkeletonTable rows={10} columns={6} />\n          : <DataTable data={coupons} columns={columns} getRowId={(c) => c.id} />}\n      </CardContent>\n    </Card>\n  );\n}",
     "name": "deferred-loading",

package/agent/tokens.json

@@ -1241,6 +1241,12 @@
     "tier": "foundation",
     "value": "160ms"
   },
+  {
+    "description": "How long a toast stays before it dismisses itself (gh#1253). In the MOTION tier, like `--activity-interval`: a component-token name has no property word for a duration. Sonner takes `duration` as a JS number, so `Toaster` reads this ONCE on mount with getComputedStyle — from its ThemeScope host when it has one, else `<html>` — and accepts `ms` or `s`. A theme override applies to toasts raised after the Toaster mounts; a per-call `duration` or the Toaster's own `duration` prop still wins. 4000ms is Sonner's own default.",
+    "name": "--toast-duration",
+    "tier": "foundation",
+    "value": "4000ms"
+  },
   {
     "description": "MARQUEE — the TRAVERSAL member of the loop family, and deliberately NOT `--duration-loop`. `--duration-loop` is 1400ms because it times a BREATH: a dot rising and falling, a bar sweeping a small box. A marquee's cycle is a distance being crossed, two orders of magnitude longer, and the two are not the same knob — binding them would mean a service that calms its typing indicator to 2s also whips its logo wall across the screen twice a second. Same tier, same naming, separate value. It is a duration PER SCREENFUL, not per cycle: the component measures one copy of the content and sets `--marquee-cycle-scale` to (copy width ÷ viewport width), so the duration of one lap is `interval × scale` and the PACE is the same whether the track carries one item or forty. A per-cycle duration would make forty logos forty times faster than one, which is how every pure-CSS marquee behaves and why none of them survive real content. 20s per screenful ≈ 60px/s at 1200px — the resting pace a logo wall reads at. The two ordinals are the `speed` prop's `slow` and `fast`; they are tokens rather than multipliers in the stylesheet so a theme can retune the ladder, not just its middle rung.",
     "name": "--marquee-interval",
@@ -9317,6 +9323,18 @@
     "tier": "component",
     "value": "var(--font-size-base)"
   },
+  {
+    "description": "`DropdownMenuItem description` (gh#1246): the muted second line takes the shortcut's xs step, and a two-line row swaps its fixed height for this block padding.",
+    "name": "--menu-item-description-font-size",
+    "tier": "component",
+    "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )"
+  },
+  {
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers.",
+    "name": "--menu-item-description-space-block",
+    "tier": "component",
+    "value": "var(--space-1)"
+  },
   {
     "description": "Inset rows (a checkbox/radio row without its own indicator) reserve the indicator column so labels stay aligned with their checked siblings.",
     "name": "--menu-item-inset-space-inline-start",

package/dist/components/data-entry/checkbox-group.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { CheckboxGroupProp } from "../../props/components/data-entry.prop.js";
 export type { CheckboxGroupProp, CheckboxGroupProp as CheckboxGroupProps, } from "../../props/components/data-entry.prop.js";
-export declare function CheckboxGroup({ value: controlledValue, defaultValue, onValueChange, options, orientation, disabled, name, id, className, children, ...ariaProps }: CheckboxGroupProp): React.JSX.Element;
+export declare function CheckboxGroup({ value: controlledValue, defaultValue, onValueChange, options, orientation, disabled, name, id, className, children, selectAll, ...ariaProps }: CheckboxGroupProp): React.JSX.Element;

package/dist/components/data-entry/checkbox-group.js

@@ -1,10 +1,12 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { Checkbox } from "./checkbox.js";
 import { Field } from "./field.js";
+import { Separator } from "../layout/separator.js";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { choiceGroupClassName } from "./choice-option.js";
 function useControllableArray(controlled, defaultValue) {
   const [internal, setInternal] = React.useState(defaultValue);
@@ -28,8 +30,10 @@ function CheckboxGroup({
   id,
   className,
   children,
+  selectAll,
   ...ariaProps
 }) {
+  const { t } = useTranslation();
   const reactId = React.useId();
   const [value, setValue] = useControllableArray(controlledValue, defaultValue);
   const groupA11y = pickGroupFieldA11y(ariaProps);
@@ -42,8 +46,18 @@ function CheckboxGroup({
     setValue(next);
     onValueChange?.(next);
   };
+  const enabledValues = (options ?? []).filter((opt) => !opt.disabled).map((opt) => opt.value);
+  const selectedEnabled = enabledValues.filter((v) => value.includes(v)).length;
+  const allState = enabledValues.length > 0 && selectedEnabled === enabledValues.length ? true : selectedEnabled > 0 ? "indeterminate" : false;
+  const toggleAll = () => {
+    const next = allState === true ? value.filter((v) => !enabledValues.includes(v)) : [...value, ...enabledValues.filter((v) => !value.includes(v))];
+    setValue(next);
+    onValueChange?.(next);
+  };
+  const selectAllId = id ? `${id}-select-all` : `${reactId}-select-all`;
+  const selectAllLabel = typeof selectAll === "object" && selectAll.label != null ? selectAll.label : t("dataEntry.checkboxGroup.selectAll");
   if (options && options.length > 0) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         role: "group",
@@ -53,24 +67,49 @@ function CheckboxGroup({
         "aria-disabled": disabled ? true : void 0,
         "data-orientation": orientation,
         className: choiceGroupClassName(orientation, className),
-        children: options.map((opt, index) => {
-          const optionId = optionDomId(opt.value, index);
-          const checked = value.includes(opt.value);
-          return /* @__PURE__ */ jsx(Field, { id: optionId, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              id: optionId,
-              name: resolvedName,
-              "data-field": resolvedField,
-              value: opt.value,
-              checked,
-              disabled: Boolean(disabled) || Boolean(opt.disabled),
-              onCheckedChange: () => {
-                toggle(opt.value);
+        children: [
+          selectAll ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                id: selectAllId,
+                label: selectAllLabel,
+                description: t("common.selectedOfTotal", {
+                  count: selectedEnabled,
+                  total: enabledValues.length
+                }),
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: selectAllId,
+                    checked: allState,
+                    disabled: Boolean(disabled) || enabledValues.length === 0,
+                    onCheckedChange: toggleAll
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(Separator, {})
+          ] }) : null,
+          options.map((opt, index) => {
+            const optionId = optionDomId(opt.value, index);
+            const checked = value.includes(opt.value);
+            return /* @__PURE__ */ jsx(Field, { id: optionId, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: optionId,
+                name: resolvedName,
+                "data-field": resolvedField,
+                value: opt.value,
+                checked,
+                disabled: Boolean(disabled) || Boolean(opt.disabled),
+                onCheckedChange: () => {
+                  toggle(opt.value);
+                }
               }
-            }
-          ) }, opt.value);
-        })
+            ) }, opt.value);
+          })
+        ]
       }
     );
   }

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

@@ -27,6 +27,21 @@ export type CommandPaletteLabels = {
     select?: React.ReactNode;
     close?: React.ReactNode;
 };
+/**
+ * Recent queries the CONSUMER keeps (gh#1249). The palette only renders them — it never reads or
+ * writes `localStorage` or any other store, and it renders `items` exactly as given (de-duplicate
+ * and cap them before passing them in).
+ */
+export type CommandPaletteRecent = {
+    /** Most recent first. Duplicates are rendered as given. */
+    items: string[];
+    /** A recent query was chosen. The palette closes, like any other selection. */
+    onSelect: (query: string) => void;
+    /** The trailing "Clear recent searches" row was chosen. The palette stays open. */
+    onClear: () => void;
+    /** Group heading. Default: `t("dataEntry.commandPalette.recent")`. */
+    label?: React.ReactNode;
+};
 /** The modifier keys held while an item was chosen (gh#1126). */
 export type CommandPaletteSelectModifiers = {
     metaKey: boolean;
@@ -90,6 +105,11 @@ export type CommandPaletteProps = {
      * `mod+shift+p` are different shortcuts. Never fires during IME composition.
      */
     shortcut?: boolean | string;
+    /**
+     * Recent queries (gh#1249), shown as the FIRST group only while the query is empty, with a
+     * trailing "Clear recent searches" row. Storage stays with the consumer.
+     */
+    recent?: CommandPaletteRecent;
 };
 /**
  * Unchanged. - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived
@@ -100,4 +120,4 @@ export type CommandPaletteProps = {
  * 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.
  */
-export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;
+export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, recent, }: CommandPaletteProps): React.JSX.Element;

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

@@ -12,39 +12,9 @@ import {
   CommandItem,
   CommandList
 } from "./command.js";
-import { isApplePlatform } from "../../lib/platform.js";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { isImeComposing } from "../../lib/ime.js";
-function parseShortcut(shortcut) {
-  if (shortcut === false) return null;
-  const parts = (shortcut === true ? "mod+k" : shortcut).toLowerCase().split("+").map((p) => p.trim());
-  const key = parts.pop() ?? "";
-  if (!key) return null;
-  return {
-    key,
-    mod: parts.includes("mod"),
-    meta: parts.includes("meta") || parts.includes("cmd"),
-    ctrl: parts.includes("ctrl"),
-    shift: parts.includes("shift"),
-    alt: parts.includes("alt") || parts.includes("option")
-  };
-}
-function shortcutMatches(spec, event) {
-  const keyMatches = event.key.toLowerCase() === spec.key || /^[a-z]$/.test(spec.key) && event.code === `Key${spec.key.toUpperCase()}`;
-  if (!keyMatches) return false;
-  if (spec.mod && !(isApplePlatform() ? event.metaKey : event.ctrlKey)) return false;
-  if (spec.meta && !event.metaKey) return false;
-  if (spec.ctrl && !event.ctrlKey) return false;
-  return event.shiftKey === spec.shift && event.altKey === spec.alt;
-}
-function shortcutHint(spec) {
-  return [
-    spec.meta || spec.mod && isApplePlatform() ? "\u2318" : "",
-    spec.ctrl || spec.mod && !isApplePlatform() ? "Ctrl+" : "",
-    spec.alt ? "\u2325" : "",
-    spec.shift ? "\u21E7" : "",
-    spec.key.length === 1 ? spec.key.toUpperCase() : spec.key
-  ].join("");
-}
+import { parseShortcut, shortcutHint, shortcutMatches } from "../../lib/shortcut.js";
 const modifiersOf = (event) => ({
   metaKey: event.metaKey,
   ctrlKey: event.ctrlKey,
@@ -71,8 +41,10 @@ function CommandPalette({
   loading = false,
   error,
   trigger,
-  shortcut = true
+  shortcut = true,
+  recent
 }) {
+  const { t } = useTranslation();
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
   const [uncontrolledSearch, setUncontrolledSearch] = React.useState(defaultSearch);
   const shortcutRestoreFocusRef = React.useRef(null);
@@ -120,6 +92,7 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen, shortcutSpec]);
   const hasItems = React.useMemo(() => groups.some((group) => group.items.length > 0), [groups]);
+  const showRecent = recent != null && recent.items.length > 0 && search === "";
   const triggerNode = trigger === void 0 ? /* @__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 }),
@@ -172,11 +145,38 @@ function CommandPalette({
                   }
                 ),
                 /* @__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: [
-                  shouldFilter ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : hasItems ? null : (
+                  shouldFilter ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : hasItems || showRecent ? 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 })
                   ),
+                  showRecent ? /* @__PURE__ */ jsxs(CommandGroup, { heading: recent.label ?? t("dataEntry.commandPalette.recent"), children: [
+                    recent.items.map((query, index) => /* @__PURE__ */ jsx(
+                      CommandItem,
+                      {
+                        value: `recent:${index}:${query}`,
+                        onSelect: () => {
+                          modifiersRef.current = NO_MODIFIERS;
+                          setOpen(false);
+                          recent.onSelect(query);
+                        },
+                        children: /* @__PURE__ */ jsx("span", { className: "ui-command-palette-label", children: query })
+                      },
+                      `${index}:${query}`
+                    )),
+                    /* @__PURE__ */ jsx(
+                      CommandItem,
+                      {
+                        value: "recent:clear",
+                        className: "ui-command-palette-recent-clear",
+                        onSelect: () => {
+                          modifiersRef.current = NO_MODIFIERS;
+                          recent.onClear();
+                        },
+                        children: t("dataEntry.commandPalette.clearRecent")
+                      }
+                    )
+                  ] }) : null,
                   groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
                     CommandItem,
                     {

package/dist/components/data-entry/date-picker.js

@@ -13,6 +13,7 @@ import {
 } from "../../lib/datetime/picker-format.js";
 import { Button } from "../general/button.js";
 import { Flex } from "../layout/flex.js";
+import { Text } from "../general/typography.js";
 import { TimePicker } from "./time-picker.js";
 import { useControlledLatch } from "../../lib/hooks.js";
 import { pickFieldA11y, pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
@@ -75,6 +76,7 @@ function DatePicker(props) {
     preserveInvalidOnBlur,
     placement = "bottom-start",
     renderExtraFooter,
+    showSummary = true,
     size,
     status,
     variant,
@@ -166,6 +168,7 @@ function DatePicker(props) {
   React.useEffect(() => {
     if (open) setInternalView(defaultPickerValue ?? valueAnchor);
   }, [open]);
+  const halfRange = Boolean(rangeValue?.from && !rangeValue.to);
   const resolvedPlaceholder = placeholder ?? (isPeriod ? t("dataEntry.monthPicker.placeholder") : range ? t("dataEntry.dateRangePicker.placeholder") : t("dataEntry.datePicker.placeholder")) ?? PERIOD_HINT[picker];
   const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
   const showClear = clearControl.enabled && !anyDisabled && (range ? allowEmpty.every(Boolean) && Boolean(committedRange?.from || committedRange?.to) : text !== "");
@@ -389,6 +392,22 @@ function DatePicker(props) {
       ) }, index);
     }) }, row)) })
   ] });
+  const renderSummary = () => {
+    const from = rangeValue?.from;
+    const to = rangeValue?.to;
+    const dates = dateTimeFormat(locale, { year: "numeric", month: "short", day: "numeric" });
+    let content;
+    if (from && to) {
+      const utc = (date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+      const count = Math.round(Math.abs(utc(to) - utc(from)) / 864e5) + 1;
+      const [start, end] = +from <= +to ? [from, to] : [to, from];
+      content = t("dataEntry.dateRangePicker.summary", {
+        range: dates.formatRange(start, end),
+        days: t("dataEntry.dateRangePicker.days", { count })
+      });
+    } else if (from) content = dates.format(from);
+    return /* @__PURE__ */ jsx("div", { "data-slot": "date-picker-summary", "aria-live": "polite", "aria-atomic": "true", children: content ? /* @__PURE__ */ jsx(Flex, { pad: "sm", children: /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", tabular: true, children: content }) }) : null });
+  };
   const calendarBounds = [
     ...minimum ? [{ before: minimum }] : [],
     ...maximum ? [{ after: maximum }] : [],
@@ -510,6 +529,7 @@ function DatePicker(props) {
           index
         )) }) : null,
         isPeriod ? renderPeriodPanel() : renderDayPanel(),
+        range && showSummary && !isPeriod ? renderSummary() : null,
         showTime ? /* @__PURE__ */ jsx(
           Flex,
           {
@@ -579,7 +599,7 @@ function DatePicker(props) {
         "aria-readonly": inputReadOnly || void 0,
         value: edge === "from" ? fromText : toText,
         disabled: edgeDisabled(edge),
-        placeholder: resolvedPlaceholder,
+        placeholder: edge === "to" && halfRange && !isPeriod ? t("dataEntry.dateRangePicker.selectEnd") ?? resolvedPlaceholder : resolvedPlaceholder,
         inputMode: "numeric",
         autoComplete: "off",
         "aria-label": (edge === "from" ? t("dataEntry.dateRangePicker.from") : t("dataEntry.dateRangePicker.to")) ?? edge,

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

@@ -50,7 +50,7 @@ export type { TransferProps, TransferItemProp } from "./transfer.js";
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
 export type { CommandProps } from "./command.js";
 export { CommandPalette } from "./command-palette.js";
-export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, CommandPaletteSelectModifiers, } from "./command-palette.js";
+export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, CommandPaletteRecent, CommandPaletteSelectModifiers, } from "./command-palette.js";
 export { PasswordInput } from "./password-input.js";
 export type { PasswordInputProps, PasswordVisibilityToggleProp } from "./password-input.js";
 export { PasswordStrength, usePasswordStrength } from "./password-strength.js";

package/dist/components/data-entry/password-strength.d.ts

@@ -8,6 +8,8 @@ export type PasswordStrengthLabels = {
     weak?: string;
     fair?: string;
     strong?: string;
+    /** The neutral line shown while nothing has been typed (gh#1247). */
+    empty?: string;
     /** Checklist line per rule. */
     rules?: Partial<Record<PasswordRule, string>>;
     /** Screen-reader prefix before a met rule (e.g. "Passed: "). */

package/dist/components/data-entry/password-strength.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, X } from "lucide-react";
+import { Check, Minus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 const DEFAULT_PASSWORD_RULES = ["length", "upper", "lower", "number", "symbol"];
 function usePasswordStrength(value, rules = [...DEFAULT_PASSWORD_RULES], minLength = 8) {
@@ -36,12 +36,13 @@ function PasswordStrength({
   const { t } = useTranslation();
   const normalizedRules = [...new Set(rules)];
   const { score, checks } = usePasswordStrength(value, normalizedRules, minLength);
-  const tone = scoreTone(score);
+  const empty = value.trim() === "";
+  const tone = empty ? void 0 : scoreTone(score);
   const segments = Array.from({ length: 5 });
   const key = scoreKey(score);
-  const strength = labels[key] ?? t(`dataEntry.passwordStrength.${key}`);
+  const strength = empty ? labels.empty ?? t("dataEntry.passwordStrength.empty") : labels[key] ?? t(`dataEntry.passwordStrength.${key}`);
   const ruleLabel = (rule) => labels.rules?.[rule] ?? t(`dataEntry.passwordStrength.rules.${rule}`, { n: String(minLength) });
-  const announcement = labels.announcement ? labels.announcement(strength) : t("dataEntry.passwordStrength.announcement", { strength });
+  const announcement = empty ? "" : labels.announcement ? labels.announcement(strength) : t("dataEntry.passwordStrength.announcement", { strength });
   return /* @__PURE__ */ jsxs("div", { className: "ui-password-strength", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -50,7 +51,7 @@ function PasswordStrength({
         role: "img",
         "aria-label": t("dataEntry.passwordStrength.meter", { score: String(score) }),
         children: segments.map((_, index) => {
-          const filled = index < score + 1;
+          const filled = !empty && index < score + 1;
           return /* @__PURE__ */ jsx(
             "span",
             {
@@ -75,9 +76,9 @@ function PasswordStrength({
       "li",
       {
         className: "ui-password-strength-checklist-item",
-        "data-state": checks[rule] ? "passed" : "failed",
+        "data-state": empty ? "pending" : checks[rule] ? "passed" : "failed",
         children: [
-          checks[rule] ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+          empty ? /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true" }) : checks[rule] ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: checks[rule] ? labels.passed ?? t("dataEntry.passwordStrength.passed") : labels.failed ?? t("dataEntry.passwordStrength.failed") }),
           /* @__PURE__ */ jsx("span", { children: ruleLabel(rule) })
         ]

package/dist/components/data-entry/search-input.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { SearchInputProp } from "../../props/components/data-entry.prop.js";
 export type SearchInputProps = SearchInputProp;
-export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, status, variant, ...ariaProps }: SearchInputProps): React.JSX.Element;
+export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, status, variant, shortcut, ...ariaProps }: SearchInputProps): React.JSX.Element;

package/dist/components/data-entry/search-input.js

@@ -8,6 +8,8 @@ import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
 import { resolveFieldA11y } from "../../lib/field-a11y.js";
 import { useDebouncedValue } from "../../lib/hooks.js";
+import { isImeComposing } from "../../lib/ime.js";
+import { parseShortcut, shortcutHint, shortcutMatches } from "../../lib/shortcut.js";
 function SearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -23,9 +25,12 @@ function SearchInput({
   disabled = false,
   status,
   variant,
+  shortcut = false,
   ...ariaProps
 }) {
   const { t } = useTranslation();
+  const inputRef = React.useRef(null);
+  const shortcutSpec = React.useMemo(() => parseShortcut(shortcut), [shortcut]);
   const isControlled = controlledValue !== void 0;
   const [internal, setInternal] = React.useState(defaultValue);
   const value = isControlled ? controlledValue : internal;
@@ -48,6 +53,17 @@ function SearchInput({
     lastSearch.current = debounced;
     onSearchRef.current?.(debounced);
   }, [debounced]);
+  React.useEffect(() => {
+    if (!shortcutSpec || disabled) return;
+    const handleKeyDown = (event) => {
+      if (isImeComposing(event) || !shortcutMatches(shortcutSpec, event)) return;
+      event.preventDefault();
+      inputRef.current?.focus();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [shortcutSpec, disabled]);
+  const showShortcut = Boolean(shortcutSpec && !value && !disabled);
   const setValue = (v) => {
     if (!isControlled) setInternal(v);
     onValueChange?.(v);
@@ -59,6 +75,7 @@ function SearchInput({
       /* @__PURE__ */ jsx(
         Input,
         {
+          ref: inputRef,
           id: inputId,
           type: "text",
           role: "searchbox",
@@ -78,7 +95,9 @@ function SearchInput({
           variant,
           ...fieldA11y,
           className: cn(
-            "ui-search-input-control !ps-[var(--search-input-start-padding)] !pe-[var(--search-input-end-padding)]",
+            "ui-search-input-control !ps-[var(--search-input-start-padding)]",
+            // gh#1250 — while the key cap shows, the text stops before it instead of running under it.
+            showShortcut ? "!pe-[calc(var(--search-input-edge-inset)+6ch)]" : "!pe-[var(--search-input-end-padding)]",
             inputClassName
           ),
           disabled
@@ -95,7 +114,8 @@ function SearchInput({
           className: "ui-search-input-clear",
           children: /* @__PURE__ */ jsx(X, {})
         }
-      )
+      ),
+      showShortcut && shortcutSpec ? /* @__PURE__ */ jsx("kbd", { className: "kbd ui-search-input-shortcut", "aria-hidden": "true", children: shortcutHint(shortcutSpec) }) : null
     ] })
   ] });
 }