@godxjp/ui 31.7.0 → 31.9.0

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

@@ -1,10 +1,14 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { isImeComposing } from "../../lib/ime.js";
 import { resolveFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlIconClass } from "../../lib/control-styles.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../data-display/collapsible.js";
 import { Input } from "./input.js";
 const HEX_PATTERN = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const NATIVE_COLOR_FALLBACK = "#000000";
@@ -12,6 +16,68 @@ function normalizeHex(value) {
   if (!value.startsWith("#")) return `#${value}`;
   return value;
 }
+function colorKey(value) {
+  const hex = normalizeHex(value.trim()).toLowerCase();
+  if (!HEX_PATTERN.test(hex)) return hex;
+  if (hex.length === 4) return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+  return hex;
+}
+const ColorPickerPartsContext = React.createContext(null);
+function ColorPickerPickerPart() {
+  return /* @__PURE__ */ jsx(Fragment, { children: React.useContext(ColorPickerPartsContext)?.picker });
+}
+function ColorPickerPresetsPart() {
+  return /* @__PURE__ */ jsx(Fragment, { children: React.useContext(ColorPickerPartsContext)?.presets });
+}
+const PANEL_COMPONENTS = { Picker: ColorPickerPickerPart, Presets: ColorPickerPresetsPart };
+function ColorPickerPresetGroup({
+  preset,
+  value,
+  disabled,
+  onSelect
+}) {
+  const { t } = useTranslation();
+  const labelId = React.useId();
+  const currentKey = colorKey(value);
+  const checked = preset.colors.find((color) => colorKey(color) === currentKey) ?? null;
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      defaultOpen: preset.defaultOpen ?? true,
+      className: "ui-color-picker-presets-group",
+      "data-slot": "color-picker-presets-group",
+      children: [
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "ui-color-picker-presets-trigger ui-focus-ring", children: [
+          /* @__PURE__ */ jsx(ChevronDown, { className: "ui-color-picker-presets-chevron", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "ui-color-picker-presets-label", children: preset.label })
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: "ui-color-picker-presets-content", children: preset.colors.length > 0 ? /* @__PURE__ */ jsx(
+          AriaRadioGroup,
+          {
+            "aria-labelledby": labelId,
+            orientation: "horizontal",
+            value: checked,
+            onChange: onSelect,
+            isDisabled: disabled,
+            className: "ui-color-picker-presets-items",
+            "data-slot": "color-picker-presets-items",
+            children: preset.colors.map((color, index) => /* @__PURE__ */ jsx(
+              AriaRadio,
+              {
+                value: color,
+                "aria-label": color,
+                className: "ui-color-picker-presets-color ui-focus-ring",
+                "data-slot": "color-picker-preset",
+                style: { ["--color-picker-preset-color"]: color }
+              },
+              `${index}-${color}`
+            ))
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "ui-color-picker-presets-empty", children: t("dataEntry.colorPicker.presetEmpty") }) })
+      ]
+    }
+  );
+}
 function ColorPicker({
   value: valueProp,
   defaultValue,
@@ -21,6 +87,8 @@ function ColorPicker({
   className,
   id,
   showHexInput = true,
+  presets,
+  panelRender,
   ...ariaProps
 }) {
   const { t } = useTranslation();
@@ -43,48 +111,93 @@ function ColorPicker({
     if (!isControlled) setInternalValue(normalized);
     onValueChange?.(normalized);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker-swatch", controlIconClass), children: [
+  const swatch = /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker-swatch", controlIconClass), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ui-color-picker-preview",
+        style: { backgroundColor: swatchValue },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "color",
+        value: swatchValue,
+        disabled,
+        onChange: (event) => commit(event.target.value),
+        className: "ui-color-picker-input",
+        "data-field": ariaProps["data-field"] ?? identity["data-field"],
+        ...swatchA11y
+      }
+    )
+  ] });
+  const hexInput = showHexInput ? /* @__PURE__ */ jsx(
+    Input,
+    {
+      id: id ? `${id}-hex` : void 0,
+      value: display,
+      disabled,
+      "aria-label": t("dataEntry.colorPicker.hexLabel"),
+      onChange: (event) => setDraft(event.target.value),
+      onBlur: () => commit(display),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" && !isImeComposing(event)) commit(display);
+      },
+      className: "ui-color-picker-hex",
+      spellCheck: false
+    }
+  ) : null;
+  const hiddenInput = resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null;
+  if (!presets && !panelRender) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), children: [
+      swatch,
+      hexInput,
+      hiddenInput
+    ] });
+  }
+  const presetsNamed = Boolean(ariaProps["aria-labelledby"] ?? ariaProps["aria-label"]);
+  const parts = {
+    picker: /* @__PURE__ */ jsxs("div", { className: "ui-color-picker-picker", "data-slot": "color-picker-picker", children: [
+      swatch,
+      hexInput
+    ] }),
+    presets: presets?.length ? (
+      // The FormField name/description also reach the palette as a GROUP, so presets-only mode
+      // (no native swatch to carry them) still announces which field these swatches fill.
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "ui-color-picker-preview",
-          style: { backgroundColor: swatchValue },
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id,
-          type: "color",
-          value: swatchValue,
-          disabled,
-          onChange: (event) => commit(event.target.value),
-          className: "ui-color-picker-input",
-          "data-field": ariaProps["data-field"] ?? identity["data-field"],
-          ...swatchA11y
+          className: "ui-color-picker-presets",
+          "data-slot": "color-picker-presets",
+          role: presetsNamed ? "group" : void 0,
+          "aria-labelledby": ariaProps["aria-labelledby"],
+          "aria-label": ariaProps["aria-labelledby"] ? void 0 : ariaProps["aria-label"],
+          "aria-describedby": ariaProps["aria-describedby"],
+          children: presets.map((preset, index) => /* @__PURE__ */ jsx(
+            ColorPickerPresetGroup,
+            {
+              preset,
+              value,
+              disabled,
+              onSelect: commit
+            },
+            preset.key ?? index
+          ))
         }
       )
-    ] }),
-    showHexInput && /* @__PURE__ */ jsx(
-      Input,
-      {
-        id: id ? `${id}-hex` : void 0,
-        value: display,
-        disabled,
-        "aria-label": t("dataEntry.colorPicker.hexLabel"),
-        onChange: (event) => setDraft(event.target.value),
-        onBlur: () => commit(display),
-        onKeyDown: (event) => {
-          if (event.key === "Enter") commit(display);
-        },
-        className: "ui-color-picker-hex",
-        spellCheck: false
-      }
-    ),
-    resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null
+    ) : null
+  };
+  const panel = /* @__PURE__ */ jsxs(Fragment, { children: [
+    parts.picker,
+    parts.presets
   ] });
+  return /* @__PURE__ */ jsx(ColorPickerPartsContext.Provider, { value: parts, children: /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), "data-panel": "", children: [
+    panelRender ? panelRender(panel, { components: PANEL_COMPONENTS }) : panel,
+    hiddenInput
+  ] }) });
 }
 export {
   ColorPicker

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

@@ -12,6 +12,7 @@ import {
   CommandItem,
   CommandList
 } from "./command.js";
+import { isImeComposing } from "../../lib/ime.js";
 function CommandPalette({
   groups,
   labels,
@@ -61,7 +62,7 @@ function CommandPalette({
   React.useEffect(() => {
     if (!shortcut) return;
     const handleKeyDown = (event) => {
-      if (!event.isComposing && event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
+      if (!isImeComposing(event) && event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
         if (!open && document.activeElement instanceof HTMLElement) {
           shortcutRestoreFocusRef.current = document.activeElement;

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

@@ -23,6 +23,7 @@ import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
 import { dateTimeFormat, numberFormat } from "../../lib/intl-cache.js";
+import { isImeComposing } from "../../lib/ime.js";
 const ISO_HINT = "yyyy-mm-dd";
 const PERIOD_PICKERS = /* @__PURE__ */ new Set(["month", "quarter", "year"]);
 const PERIOD_COLUMNS = 3;
@@ -236,6 +237,7 @@ function DatePicker(props) {
   };
   const keyHandlers = (onEnter) => ({
     onKeyDown: (event) => {
+      if (isImeComposing(event)) return;
       if (event.key === "ArrowDown") {
         event.preventDefault();
         setOpen(true);

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

@@ -39,7 +39,7 @@ export type { DatePickerProps } from "./date-picker.js";
 export { TimePicker } from "./time-picker.js";
 export type { TimePickerProps } from "./time-picker.js";
 export { ColorPicker } from "./color-picker.js";
-export type { ColorPickerProps } from "./color-picker.js";
+export type { ColorPickerProps, ColorPickerPresetProps } from "./color-picker.js";
 export type { SelectProp, SelectProp as SelectProps } from "./select.js";
 export type { SearchSelectOptionProp as SelectOption, SearchSelectLoadParamsProp as SelectLoadParams, SearchSelectLoadResultProp as SelectLoadResult, } from "./search-select.js";
 export { UPLOAD_LIST_IGNORE, Upload, collectUploadCommitActions, createUploadItem, useUploadDraft, } from "./upload.js";

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

@@ -8,6 +8,7 @@ import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { Button } from "../general/button.js";
 import { Input } from "./input.js";
 import { numberFormat } from "../../lib/intl-cache.js";
+import { isImeComposing } from "../../lib/ime.js";
 function decimalsOf(n) {
   if (!Number.isFinite(n)) return 0;
   const s = String(n);
@@ -165,7 +166,7 @@ const NumberInput = React.forwardRef(
     };
     const handleKeyDown = (event) => {
       if (!interactive) return;
-      if (composing.current || event.nativeEvent.isComposing) return;
+      if (composing.current || isImeComposing(event)) return;
       if (keyboard && event.key === "ArrowUp") {
         event.preventDefault();
         stepBy(1, event.shiftKey ? 10 : 1);

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import { ChevronsUpDown, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useFieldIdentity, useFieldNameFallback } from "../../lib/field-a11y.js";
+import { isImeComposing } from "../../lib/ime.js";
 import { cn } from "../../lib/utils.js";
 import { controlSurfaceTriggerClass } from "../../lib/control-styles.js";
 import {
@@ -54,6 +55,7 @@ function SearchSelect(props) {
     onSearchChange,
     filterOption,
     optionFilterProp,
+    caseSensitive = false,
     filterSort,
     autoClearSearchValue = true,
     optionRender,
@@ -91,6 +93,18 @@ function SearchSelect(props) {
   const maxTagTextLength = props.mode !== void 0 ? props.maxTagTextLength : void 0;
   const tokenSeparators = props.mode !== void 0 ? props.tokenSeparators : void 0;
   const tagRender = props.mode !== void 0 ? props.tagRender : void 0;
+  const allowCreate = props.mode !== void 0 ? props.allowCreate : void 0;
+  const createLabel = props.mode !== void 0 ? props.createLabel : void 0;
+  const onCreate = props.mode !== void 0 ? props.onCreate : void 0;
+  const fold = React.useCallback(
+    (text) => caseSensitive ? text : text.toLowerCase(),
+    [caseSensitive]
+  );
+  const canCreate = React.useCallback(
+    (text) => tagsMode && (typeof allowCreate === "function" ? allowCreate(text) : allowCreate !== false),
+    [tagsMode, allowCreate]
+  );
+  const composingRef = React.useRef(false);
   const { t } = useTranslation();
   const nameFallback = useFieldNameFallback({
     "aria-label": ariaLabel,
@@ -154,9 +168,7 @@ function SearchSelect(props) {
       const matches = (option) => {
         if (filterOption) return filterOption(option, needle);
         const haystack = optionFilterProp ? [String(option[optionFilterProp] ?? "")] : [option.label, option.value];
-        return haystack.some(
-          (field) => String(field).toLowerCase().includes(needle.toLowerCase())
-        );
+        return haystack.some((field) => fold(String(field)).includes(fold(needle)));
       };
       const kept = needle ? list.filter(matches) : list;
       return {
@@ -164,7 +176,7 @@ function SearchSelect(props) {
         hasMore: false
       };
     }),
-    [loadOptions, staticOptions, filterOption, optionFilterProp, filterSort]
+    [loadOptions, staticOptions, filterOption, optionFilterProp, filterSort, fold]
   );
   React.useEffect(() => {
     const handle = window.setTimeout(() => setDebouncedQuery(query.trim()), DEBOUNCE_MS);
@@ -201,8 +213,9 @@ function SearchSelect(props) {
     setActiveIndex(0);
     void fetchPage(1, debouncedQuery, false);
   }, [open, debouncedQuery, fetchPage]);
-  const displayOptions = React.useMemo(() => {
-    if (!tagsMode) return loaded;
+  const typedText = query.trim();
+  const { displayOptions, createOption } = React.useMemo(() => {
+    if (!tagsMode) return { displayOptions: loaded, createOption: void 0 };
     const known = new Set(loaded.map((option) => option.value));
     const extras = [];
     for (const entry of values) {
@@ -210,11 +223,16 @@ function SearchSelect(props) {
       known.add(entry);
       extras.push(pickedOptions[entry] ?? { value: entry, label: entry });
     }
-    const needle = query.trim();
-    const exists = known.has(needle) || loaded.some((option) => option.label === needle);
-    const create = needle && !exists ? [{ value: needle, label: needle }] : [];
-    return create.length || extras.length ? [...create, ...extras, ...loaded] : loaded;
-  }, [tagsMode, loaded, values, query, pickedOptions]);
+    const typed = fold(typedText);
+    const exists = [...known].some((entry) => fold(entry) === typed) || [...staticOptions ?? [], ...loaded].some(
+      (option) => fold(option.value) === typed || fold(option.label) === typed
+    );
+    const create = typedText && !exists && canCreate(typedText) ? { value: typedText, label: typedText } : void 0;
+    return {
+      displayOptions: create || extras.length ? [...create ? [create] : [], ...extras, ...loaded] : loaded,
+      createOption: create
+    };
+  }, [tagsMode, loaded, values, typedText, pickedOptions, staticOptions, fold, canCreate]);
   const grouped = React.useMemo(() => {
     const order = [];
     const buckets = /* @__PURE__ */ new Map();
@@ -258,6 +276,7 @@ function SearchSelect(props) {
   const maxCount = props.mode !== void 0 ? props.maxCount : void 0;
   const atMaxCount = maxCount !== void 0 && values.length >= maxCount;
   const remember = (option) => setPickedOptions((prev) => ({ ...prev, [option.value]: option }));
+  const isInvented = (entry) => tagsMode && !(staticOptions ?? []).some((option) => option.value === entry) && !loaded.some((option) => option.value === entry);
   const select = (option) => {
     if (option.disabled) return;
     if (props.mode !== void 0) {
@@ -271,7 +290,10 @@ function SearchSelect(props) {
         next.map((entry) => entry === option.value ? option : optionFor(entry)).filter((entry) => entry !== null)
       );
       if (already) props.onDeselect?.(option.value, option);
-      else props.onSelect?.(option.value, option);
+      else {
+        props.onSelect?.(option.value, option);
+        if (isInvented(option.value)) onCreate?.(option.value);
+      }
       if (autoClearSearchValue) setQuery("");
       return;
     }
@@ -289,8 +311,10 @@ function SearchSelect(props) {
     for (const raw of splitByTokenSeparators(text, tokenSeparators ?? [])) {
       const token = raw.trim();
       if (!token) continue;
-      const match = flatOrdered.find((option2) => option2.value === token || option2.label === token);
-      const option = match ?? (tagsMode ? { value: token, label: token } : void 0);
+      const match = flatOrdered.find((option2) => option2.value === token || option2.label === token) ?? flatOrdered.find(
+        (option2) => option2 !== createOption && (fold(option2.value) === fold(token) || fold(option2.label) === fold(token))
+      );
+      const option = match ?? (canCreate(token) ? { value: token, label: token } : void 0);
       if (!option || option.disabled) continue;
       if (next.includes(option.value)) continue;
       if (maxCount !== void 0 && next.length >= maxCount) break;
@@ -304,7 +328,10 @@ function SearchSelect(props) {
       next,
       next.map((entry) => picked.find((option) => option.value === entry) ?? optionFor(entry)).filter((entry) => entry != null)
     );
-    for (const option of picked) props.onSelect?.(option.value, option);
+    for (const option of picked) {
+      props.onSelect?.(option.value, option);
+      if (isInvented(option.value)) onCreate?.(option.value);
+    }
   };
   const deselect = (chipValue) => {
     select(optionFor(chipValue) ?? { value: chipValue, label: chipValue });
@@ -344,6 +371,7 @@ function SearchSelect(props) {
     if (next !== void 0) setActiveIndex(next);
   };
   const onKeyDown = (event) => {
+    if (isImeComposing(event)) return;
     if (event.key === "ArrowDown") {
       event.preventDefault();
       moveActive(1);
@@ -530,7 +558,7 @@ function SearchSelect(props) {
                         value: query,
                         onChange: (event) => {
                           const next = event.target.value;
-                          if (multiple && tokenSeparators?.length && tokenSeparators.some((separator) => next.includes(separator))) {
+                          if (multiple && !composingRef.current && tokenSeparators?.length && tokenSeparators.some((separator) => next.includes(separator))) {
                             selectTokens(next);
                             setQuery("");
                             return;
@@ -546,6 +574,12 @@ function SearchSelect(props) {
                           setQuery("");
                         },
                         onKeyDown,
+                        onCompositionStart: () => {
+                          composingRef.current = true;
+                        },
+                        onCompositionEnd: () => {
+                          composingRef.current = false;
+                        },
                         placeholder: searchPlaceholder ?? t("dataEntry.searchSelect.search"),
                         className: "ui-search-select-search-input"
                       }
@@ -588,7 +622,11 @@ function SearchSelect(props) {
                                 onMouseDown: (event) => event.preventDefault(),
                                 onClick: () => select(option),
                                 children: [
-                                  optionRender ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: optionRender(option, { index }) }) : renderOption ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-body", children: [
+                                  option === createOption ? (
+                                    // gh#1052: the create row SAYS it creates — antd shows the bare text, which
+                                    // reads like an existing option.
+                                    /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-body", "data-slot": "select-create", children: /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-label", children: createLabel ? createLabel(option.value) : t("dataEntry.searchSelect.create", { value: option.value }) }) })
+                                  ) : optionRender ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: optionRender(option, { index }) }) : renderOption ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-body", children: [
                                     option.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: option.icon }) : null,
                                     /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-text", children: [
                                       /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-label", children: option.label }),

package/dist/components/data-entry/select.js

@@ -646,7 +646,7 @@ function DataSelect(props) {
           props.onSearchChange?.(query);
         } : void 0,
         autoClearSearchValue: showSearchConfig?.autoClearSearchValue ?? props.autoClearSearchValue,
-        disabled: props.disabled || !props.loadOptions && !hasOptions,
+        disabled: props.disabled || !props.loadOptions && !hasOptions && props.mode !== "tags",
         name: resolvedName,
         "data-field": resolvedField
       }

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

@@ -11,6 +11,7 @@ import { resolveAllowClear } from "./control-surface.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Button } from "../general/button.js";
 import { Input } from "./input.js";
+import { isImeComposing } from "../../lib/ime.js";
 function pad2(n) {
   return String(n).padStart(2, "0");
 }
@@ -326,6 +327,7 @@ function TimePickerPanel({
           "aria-label": t("dataEntry.timePicker.typeLabel"),
           className: "text-center tabular-nums",
           onKeyDown: (e) => {
+            if (isImeComposing(e)) return;
             if (e.key === "Enter") {
               e.preventDefault();
               commitDraft();
@@ -482,6 +484,7 @@ function TimePicker({
           if (!disabled) setOpen(true);
         },
         onKeyDown: (event) => {
+          if (isImeComposing(event)) return;
           if (event.key === "ArrowDown") {
             event.preventDefault();
             setOpen(true);

package/dist/components/feedback/non-modal-layer.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { useExitAnimation } from "@react-aria/utils";
 import { FocusScope } from "react-aria";
+import { isImeComposing } from "../../lib/ime.js";
 function useNonModalPortal(isOpen, enabled) {
   const contentRef = React.useRef(null);
   const isExiting = useExitAnimation(contentRef, enabled && isOpen);
@@ -11,7 +12,7 @@ function useNonModalPortal(isOpen, enabled) {
 }
 function closeOnEscape(close) {
   return (event) => {
-    if (event.key === "Escape" && !event.defaultPrevented && !event.nativeEvent.isComposing) {
+    if (event.key === "Escape" && !event.defaultPrevented && !isImeComposing(event)) {
       event.preventDefault();
       event.stopPropagation();
       close();

package/dist/components/general/typography.js

@@ -7,6 +7,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { EllipsisTooltip, Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import { Textarea } from "../data-entry/textarea.js";
 import { isDevelopment } from "../../lib/dev.js";
+import { isImeComposing } from "../../lib/ime.js";
 const COPIED_RESET_MS = 3e3;
 const DECORATION_ELEMENTS = [
   ["strong", "strong"],
@@ -133,7 +134,10 @@ function TypographyEditor({
           inComposition.current = false;
         },
         onKeyDown: (event) => {
-          if (inComposition.current) return;
+          if (inComposition.current || isImeComposing(event)) {
+            lastKey.current = null;
+            return;
+          }
           lastKey.current = event.key;
         },
         onKeyUp: (event) => {

package/dist/components/layout/split-pane.d.ts

@@ -28,5 +28,20 @@ export type SplitPaneProps = {
      * not invent it. Inside a flex column give the wrapper `flex: 1; min-height: 0`.
      */
     fill?: boolean;
+    /**
+     * Which pane comes first when the pane is too narrow to split and the columns STACK.
+     *
+     * `main-first` (default) keeps today's order: main on top, aside below. `aside-first` puts the
+     * aside on top — for a detail page whose properties / agent card must not fall below a long
+     * comment thread on a phone.
+     *
+     * `aside-first` moves the `<aside>` FIRST IN THE DOM, not just visually, so in the stacked
+     * layout the reading and focus order match what is on screen (WCAG 1.3.2 / 2.4.3 — a CSS
+     * `order` swap would leave Tab going through the whole main column before reaching the aside
+     * drawn above it). Once the pane is wide enough to split, grid placement puts main back in the
+     * leading column and the aside in the trailing one (inline-end, so it flips under RTL); there
+     * the DOM order is aside → main, which reads as two independent regions, not a broken sequence.
+     */
+    stackOrder?: "main-first" | "aside-first";
 };
-export declare function SplitPane({ children, aside, asideWidth, asideLabel, fill, }: SplitPaneProps): import("react").JSX.Element;
+export declare function SplitPane({ children, aside, asideWidth, asideLabel, fill, stackOrder, }: SplitPaneProps): import("react").JSX.Element;

package/dist/components/layout/split-pane.js

@@ -4,9 +4,12 @@ function SplitPane({
   aside,
   asideWidth = "md",
   asideLabel,
-  fill = false
+  fill = false,
+  stackOrder = "main-first"
 }) {
   const closed = aside === null || aside === void 0;
+  const asideFirst = stackOrder === "aside-first";
+  const asideElement = closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside });
   return (
     // `data-fill` is published on BOTH wrappers, not just the grid: the scope element is the one
     // the consumer's own box actually contains, so without it the height stops at the scope and
@@ -19,9 +22,11 @@ function SplitPane({
         "data-aside-width": asideWidth,
         "data-aside": closed ? "closed" : void 0,
         "data-fill": fill ? "true" : void 0,
+        "data-stack-order": asideFirst ? "aside-first" : void 0,
         children: [
+          asideFirst ? asideElement : null,
           /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
-          closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
+          asideFirst ? null : asideElement
         ]
       }
     ) })

package/dist/components/navigation/pagination.js

@@ -17,6 +17,7 @@ import {
   SelectValue
 } from "../data-entry/select.js";
 import { buildPageRange } from "./pagination-utils.js";
+import { isImeComposing } from "../../lib/ime.js";
 const PaginationContent = React.forwardRef(({ className, ...props }, ref) => {
   const [scrollRegion, setScrollRegion] = React.useState(null);
   const setListElement = React.useCallback(
@@ -171,7 +172,7 @@ function Pagination({
             value: jumperDraft,
             onChange: (event) => setJumperDraft(event.target.value),
             onKeyDown: (event) => {
-              if (event.key !== "Enter") return;
+              if (event.key !== "Enter" || isImeComposing(event)) return;
               event.preventDefault();
               commitJump();
             }

package/dist/components/ui/tag-input.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { isImeComposing } from "../../lib/ime.js";
 import { cn } from "../../lib/utils.js";
 import {
   applyMaxTagCount,
@@ -62,7 +63,7 @@ const TagInput = React.forwardRef(
     const removeAt = (i) => commit(tags.filter((_, idx) => idx !== i));
     const onKeyDown = (e) => {
       if (readOnly) return;
-      if (e.nativeEvent.isComposing) return;
+      if (isImeComposing(e)) return;
       if (e.key === "Enter" || tokenSeparators.includes(e.key)) {
         e.preventDefault();
         add(draft);

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.7.0",
+  "version": "31.9.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -56,7 +56,8 @@
     },
     "colorPicker": {
       "ariaLabel": "Pick color",
-      "hexLabel": "Hex color value"
+      "hexLabel": "Hex color value",
+      "presetEmpty": "Empty"
     },
     "upload": {
       "dropzoneLabel": "Upload files",
@@ -123,7 +124,8 @@
       "clear": "Clear selection",
       "loading": "Loading…",
       "empty": "No results",
-      "error": "Couldn’t load options"
+      "error": "Couldn’t load options",
+      "create": "Create “{value}”"
     },
     "selection": {
       "overflow": "+{count}"