npm - @momoi-labs/kiso-react - Versions diffs - 0.8.0 → 0.9.0 - Mend

@momoi-labs/kiso-react 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md +55 -1
package/dist/chip-input.d.ts +2 -2
package/dist/chip-input.js +77 -16
package/dist/command-palette.d.ts +1 -1
package/dist/command-palette.js +18 -4
package/dist/empty-state.js +2 -2
package/dist/filter-expression.d.ts +49 -0
package/dist/filter-expression.js +264 -0
package/dist/filter-input.d.ts +14 -0
package/dist/filter-input.js +251 -0
package/dist/index.d.ts +4 -0
package/dist/index.js +4 -0
package/dist/lifecycle.d.ts +7 -0
package/dist/lifecycle.js +10 -0
package/dist/split.js +3 -1
package/dist/status-badge.d.ts +8 -0
package/dist/status-badge.js +8 -0
package/dist/styles.css +16 -3
package/dist/theme-selector.js +15 -1
package/package.json +2 -2

package/README.md CHANGED Viewed

@@ -38,6 +38,22 @@ those again. React and React DOM are peer dependencies supplied by the
 application. No Tailwind setup is required. The stylesheet includes global
 styles and Google Fonts.
+## Appearance
+The stylesheet includes the gallery's theme, accent, border, and corner-mark
+options. Copy the Appearance page's HTML attributes onto your `<html>` element;
+you do not need any gallery files or a second stylesheet.
+```html
+<html lang="en" data-accent="terracotta" data-border-style="soft"
+  data-corner-size="small" data-corner-marks="arcs" data-mark-size="medium">
+```
+See the [appearance attributes](../../kiso/docs/tokens.md#appearance-attributes)
+for supported values. Omit `data-theme` to follow the operating system.
+Your application owns saving and restoring preferences before first paint.
+Remove any previously copied gallery appearance overrides after upgrading.
 ## Available components
 Controls and forms
@@ -52,6 +68,8 @@ Controls and forms
   field. Each chip reads as a call: scope, name, value, then one segment per
   option as name=value or name=[a, b].
 - ValidationMessage, for a field error referenced by `aria-describedby`.
+- FilterInput, for typed field/operator/value conditions, IN lists, and nested
+  AND/OR groups. ChipInput keeps its existing API for structured stored values.
 Data and structure
@@ -68,6 +86,8 @@ Data and structure
 - LogView, LogViewLine, LogViewTime, and LogViewLevel.
 - StepList, a run's steps with a state each, and StepBar, the same run as
   one segment per step for a summary, a table cell, or a toast.
+- Lifecycle, a detail screen's status, verbs and destructive action in one
+  row, and StatusBadge, a state in one of three tones.
 - Stat, StatHeader, StatLabel, StatValue, StatFoot, and StatDelta.
 - KV, KVKey, and KVValue, a description list of fixed facts.
 - Separator, horizontal or vertical, and Dot and `dotVariants`.
@@ -187,10 +207,44 @@ import { BrandMark, TerminalIcon } from '@momoi-labs/kiso-react';
 </div>
 ```
+## Structured filters
+`FilterInput` turns completed conditions into editable chips. The application
+supplies a field schema and owns the confirmed filter tree and search results.
+```tsx
+import { useState } from 'react';
+import { FilterInput, type FilterField, type FilterNode } from '@momoi-labs/kiso-react';
+const fields: FilterField[] = [
+  { key: 'status', type: 'text', values: ['active', 'paused'] },
+  { key: 'region', type: 'text', values: ['us', 'eu', 'ap'] },
+  { key: 'lag', type: 'number' },
+];
+export function ReplicaFilters() {
+  const [filters, setFilters] = useState<FilterNode[]>([]);
+  return <FilterInput label="Find replicas" fields={fields}
+    value={filters} onValueChange={setFilters} />;
+}
+```
+Type `status=active ` to create a chip, or
+`(region IN (us, eu,) OR lag>100)` to create a group. Click a chip's field,
+operator, or value to edit that segment. Use Edit expression to change grouping
+across existing chips.
+`parseFilterExpression` validates saved text against the schema;
+`serializeFilterExpression` converts the confirmed tree back to text. The
+component does not execute queries. Products own server validation and
+parameterized query translation. See the
+[FilterInput contract](../../kiso/docs/components/filter-input.md) for syntax,
+draft handling, keyboard behavior, and mobile states.
 ## Development
 From the repository root, run `npm ci`, then `npm run prototype`. The component
-gallery opens at <http://127.0.0.1:5173/#components> and covers all 44 Kiso
+gallery opens at <http://127.0.0.1:5173/#components> and covers the Kiso
 catalog entries, each rendering the component this package exports. Its sample
 data is simulated in memory.

package/dist/chip-input.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ declare function ChipInput({ className, ...props }: React.ComponentProps<"div">)
 declare function ChipInputBox({ className, disabled, onMouseDown, ...props }: React.ComponentProps<"div"> & {
     disabled?: boolean;
 }): React.JSX.Element;
-declare function ChipInputField({ className, onKeyDown, onRemoveLast, ...props }: React.ComponentProps<"input"> & {
+declare function ChipInputField({ className, onKeyDown, onChange, onRemoveLast, onCompositionStart, onCompositionEnd, ...props }: React.ComponentProps<"input"> & {
     onRemoveLast?: () => void;
 }): React.JSX.Element;
 declare function ChipInputList({ className, "aria-label": ariaLabel, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -39,5 +39,5 @@ declare function ChipOption({ className, name, value, label, editLabel, confirmL
 declare function ChipOptionAdd({ className, label, placeholder, editLabel, confirmLabel, ...props }: Omit<React.ComponentProps<typeof EditableSegment>, "slot" | "value" | "display"> & {
     label: string;
 }): React.JSX.Element;
-declare function ChipRemove({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function ChipRemove({ className, onClick, ...props }: React.ComponentProps<"button">): React.JSX.Element;
 export { Chip, ChipInput, ChipInputBox, ChipInputEmpty, ChipInputField, ChipInputList, ChipInputOption, ChipName, ChipOption, ChipOptionAdd, ChipRemove, ChipScope, ChipValue, };

package/dist/chip-input.js CHANGED Viewed

@@ -37,35 +37,56 @@ function ChipInputBox({ className, disabled = false, onMouseDown, ...props }) {
             onMouseDown?.(event);
         }, ...props }));
 }
-function ChipInputField({ className, onKeyDown, onRemoveLast, ...props }) {
-    const { activeId, setActiveId, listId, listRef, fieldRef, open } = useChipInput();
+function ChipInputField({ className, onKeyDown, onChange, onRemoveLast, onCompositionStart, onCompositionEnd, ...props }) {
+    const { activeId, setActiveId, listId, listRef, fieldRef, open, setOpen } = useChipInput();
+    const composing = React.useRef(false);
     // Typing changes the list under the highlight, so re-anchor it every render
     // instead of tracking an index the filter invalidates.
     React.useEffect(() => {
-        const visible = options(listRef.current);
+        const visible = open ? options(listRef.current) : [];
         if (!visible.some((option) => option.id === activeId)) {
             setActiveId(visible[0]?.id ?? "");
         }
     });
+    // Reopening must render the list before scrolling its highlight.
+    React.useEffect(() => {
+        if (open)
+            options(listRef.current).find((option) => option.id === activeId)?.scrollIntoView({ block: "nearest" });
+    }, [activeId, open, listRef]);
     function keys(event) {
-        const visible = options(listRef.current);
+        if (composing.current || event.nativeEvent.isComposing || event.keyCode === 229) {
+            event.stopPropagation();
+            return;
+        }
+        const visible = open ? options(listRef.current) : [];
         const index = visible.findIndex((option) => option.id === activeId);
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault();
-            if (!visible.length)
+            const available = options(listRef.current);
+            if (!available.length)
                 return;
+            setOpen(true);
             const step = event.key === "ArrowDown" ? 1 : -1;
-            const next = visible[(index + step + visible.length) % visible.length];
+            const next = available[index < 0
+                ? (step > 0 ? 0 : available.length - 1)
+                : (index + step + available.length) % available.length];
             setActiveId(next.id);
-            next.scrollIntoView({ block: "nearest" });
         }
-        else if ((event.key === "Enter" || event.key === "Tab") && index >= 0) {
+        else if ((event.key === "Enter" || (event.key === "Tab" && !event.shiftKey)) &&
+            index >= 0) {
             // Tab only commits a highlighted suggestion; with none it still leaves
             // the field, so the box never traps the keyboard. Enter with no
             // highlight falls through to the product, which may take the query.
             event.preventDefault();
             visible[index]?.click();
         }
+        else if (event.key === "Enter" && event.currentTarget.value === "") {
+            event.preventDefault();
+        }
+        else if (event.key === "Escape") {
+            setOpen(false);
+            setActiveId("");
+        }
         else if (event.key === "Backspace" &&
             event.currentTarget.value === "" &&
             onRemoveLast) {
@@ -74,15 +95,25 @@ function ChipInputField({ className, onKeyDown, onRemoveLast, ...props }) {
         }
         onKeyDown?.(event);
     }
-    return (_jsx("input", { ref: fieldRef, "data-slot": "chip-input-field", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-activedescendant": activeId || undefined, "aria-autocomplete": "list", autoComplete: "off", onKeyDown: keys, className: cn("chip-input-field", className), ...props }));
+    return (_jsx("input", { ref: fieldRef, "data-slot": "chip-input-field", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-activedescendant": open && activeId ? activeId : undefined, "aria-autocomplete": "list", autoComplete: "off", onKeyDown: keys, onChange: (event) => {
+            if (listRef.current)
+                setOpen(true);
+            onChange?.(event);
+        }, onCompositionStart: (event) => {
+            composing.current = true;
+            onCompositionStart?.(event);
+        }, onCompositionEnd: (event) => {
+            composing.current = false;
+            onCompositionEnd?.(event);
+        }, className: cn("chip-input-field", className), ...props }));
 }
 function ChipInputList({ className, "aria-label": ariaLabel = "Suggestions", ...props }) {
-    const { listId, listRef, setOpen } = useChipInput();
+    const { listId, listRef, open, setOpen } = useChipInput();
     React.useEffect(() => {
         setOpen(true);
         return () => setOpen(false);
     }, [setOpen]);
-    return (_jsx("div", { id: listId, ref: listRef, role: "listbox", "aria-label": ariaLabel, "data-slot": "chip-input-list", className: cn("menu chip-input-list", className), ...props }));
+    return (_jsx("div", { id: listId, ref: listRef, role: "listbox", hidden: !open, "aria-label": ariaLabel, "data-slot": "chip-input-list", className: cn("menu chip-input-list", className), ...props }));
 }
 function ChipInputOption({ className, disabled = false, onSelect, onClick, ...props }) {
     const id = React.useId();
@@ -108,10 +139,24 @@ function ChipScope({ className, ...props }) {
 function ChipName({ className, ...props }) {
     return (_jsx("span", { "data-slot": "chip-name", className: cn("chip-name truncate", className), ...props }));
 }
+// Resolve the control after the parent's update: adding an option can replace
+// the editor's entire component, so a ref on its old button is not enough.
+function restoreSegmentFocus(editor) {
+    const chip = editor?.parentElement;
+    if (!chip || !editor)
+        return;
+    const controls = 'button[data-slot], input[data-slot]';
+    const index = Array.from(chip.querySelectorAll(controls)).indexOf(editor);
+    requestAnimationFrame(() => {
+        chip.querySelectorAll(controls)[index]?.focus();
+    });
+}
 // Every editable segment behaves the same: press it, it becomes an input
 // sized to its text, Enter or the check confirms, Escape restores.
 function EditableSegment({ slot, className, value, placeholder, display, onCommit, editable = true, editLabel, confirmLabel, maxWidth = 48, ...props }) {
     const [draft, setDraft] = React.useState(null);
+    const composing = React.useRef(false);
+    const editorRef = React.useRef(null);
     if (!editable || !onCommit) {
         return (_jsx("span", { "data-slot": slot, className: cn(className), children: value ? (display ?? value) : placeholder }));
     }
@@ -121,22 +166,27 @@ function EditableSegment({ slot, className, value, placeholder, display, onCommi
         setDraft(null);
     }
     if (draft !== null) {
-        return (_jsxs(_Fragment, { children: [_jsx("input", { "data-slot": `${slot}-input`, className: cn(className, "is-editing"), "aria-label": editLabel, value: draft, autoFocus: true, size: 1, style: {
+        return (_jsxs(_Fragment, { children: [_jsx("input", { ref: editorRef, "data-slot": `${slot}-input`, className: cn(className, "is-editing"), "aria-label": editLabel, value: draft, autoFocus: true, size: 1, style: {
                         width: `${Math.min(Math.max(draft.length + 1, 6), maxWidth)}ch`,
-                    }, onChange: (event) => setDraft(event.target.value), onBlur: () => commit(draft), onKeyDown: (event) => {
+                    }, onChange: (event) => setDraft(event.target.value), onBlur: () => commit(draft), onCompositionStart: () => { composing.current = true; }, onCompositionEnd: () => { composing.current = false; }, onKeyDown: (event) => {
+                        event.stopPropagation();
+                        if (composing.current || event.nativeEvent.isComposing || event.keyCode === 229)
+                            return;
                         if (event.key === "Enter") {
                             event.preventDefault();
+                            restoreSegmentFocus(editorRef.current);
                             commit(draft);
                         }
                         else if (event.key === "Escape") {
                             event.preventDefault();
+                            restoreSegmentFocus(editorRef.current);
                             setDraft(null);
                         }
-                        event.stopPropagation();
                     } }), _jsx("button", { type: "button", className: "chip-action", "aria-label": confirmLabel,
                     // Commit before the input's blur can unmount this button.
                     onMouseDown: (event) => {
                         event.preventDefault();
+                        restoreSegmentFocus(editorRef.current);
                         commit(draft);
                     }, children: _jsx(CheckIcon, {}) })] }));
     }
@@ -162,8 +212,19 @@ function ChipOption({ className, name, value, label, editLabel, confirmLabel, ..
 function ChipOptionAdd({ className, label, placeholder = "+", editLabel, confirmLabel, ...props }) {
     return (_jsx(EditableSegment, { slot: "chip-option-add", className: cn("chip-option", className), value: "", placeholder: placeholder, editLabel: editLabel ?? `Add an option to ${label}`, confirmLabel: confirmLabel ?? `Confirm the new option on ${label}`, ...props }));
 }
-function ChipRemove({ className, ...props }) {
-    return (_jsx("button", { type: "button", "data-slot": "chip-remove", className: cn("chip-action", className), ...props, children: _jsx(CloseIcon, {}) }));
+function ChipRemove({ className, onClick, ...props }) {
+    return (_jsx("button", { type: "button", "data-slot": "chip-remove", className: cn("chip-action", className), ...props, onClick: (event) => {
+            const button = event.currentTarget;
+            const root = button.closest('[data-slot="chip-input"]');
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            requestAnimationFrame(() => {
+                if (!button.isConnected) {
+                    root?.querySelector('[data-slot="chip-input-field"]')?.focus();
+                }
+            });
+        }, children: _jsx(CloseIcon, {}) }));
 }
 function CheckIcon() {
     return (_jsx("svg", { className: "icon", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 8.5 3 3 6-7" }) }));

package/dist/command-palette.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ declare function CommandPalette({ className, label, children, ...props }: React.
     className?: string;
     label?: string;
 }): React.JSX.Element;
-declare function CommandPaletteInput({ className, onKeyDown, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function CommandPaletteInput({ className, onKeyDown, onCompositionStart, onCompositionEnd, ...props }: React.ComponentProps<"input">): React.JSX.Element;
 declare function CommandPaletteList({ className, "aria-label": ariaLabel, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CommandPaletteGroup({ className, heading, children, ...props }: React.ComponentProps<"div"> & {
     heading: string;

package/dist/command-palette.js CHANGED Viewed

@@ -20,12 +20,16 @@ function items(list) {
 }
 function CommandPalette({ className, label = "Command palette", children, ...props }) {
     const [activeId, setActiveId] = React.useState("");
+    const composing = React.useRef(false);
     const listId = React.useId();
     const listRef = React.useRef(null);
-    return (_jsx(DialogPrimitive.Root, { "data-slot": "command-palette", ...props, children: _jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "aria-modal": "true", "data-slot": "command-palette-content", className: cn("palette kiso-react-palette", className), children: [_jsx(VisuallyHidden.Root, { asChild: true, children: _jsx(DialogPrimitive.Title, { children: label }) }), _jsx(CommandPaletteContext.Provider, { value: { activeId, setActiveId, listId, listRef }, children: children })] })] }) }));
+    return (_jsx(DialogPrimitive.Root, { "data-slot": "command-palette", ...props, children: _jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "aria-modal": "true", onEscapeKeyDown: (event) => {
+                        if (composing.current || event.isComposing || event.keyCode === 229)
+                            event.preventDefault();
+                    }, "data-slot": "command-palette-content", className: cn("palette kiso-react-palette", className), children: [_jsx(VisuallyHidden.Root, { asChild: true, children: _jsx(DialogPrimitive.Title, { children: label }) }), _jsx(CommandPaletteContext.Provider, { value: { composing, activeId, setActiveId, listId, listRef }, children: children })] })] }) }));
 }
-function CommandPaletteInput({ className, onKeyDown, ...props }) {
-    const { activeId, setActiveId, listId, listRef } = useCommandPalette();
+function CommandPaletteInput({ className, onKeyDown, onCompositionStart, onCompositionEnd, ...props }) {
+    const { composing, activeId, setActiveId, listId, listRef } = useCommandPalette();
     // The query changes the list under the highlight, so re-anchor it every
     // render rather than tracking an index that the filter invalidates.
     React.useEffect(() => {
@@ -35,6 +39,10 @@ function CommandPaletteInput({ className, onKeyDown, ...props }) {
         }
     });
     function move(event) {
+        if (composing.current || event.nativeEvent.isComposing || event.keyCode === 229) {
+            event.stopPropagation();
+            return;
+        }
         const visible = items(listRef.current);
         const index = visible.findIndex((item) => item.id === activeId);
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -52,7 +60,13 @@ function CommandPaletteInput({ className, onKeyDown, ...props }) {
         }
         onKeyDown?.(event);
     }
-    return (_jsxs("div", { className: "palette-input", "data-slot": "command-palette-input", children: [_jsxs("svg", { className: "icon muted", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5" }), _jsx("path", { d: "m10.5 10.5 3 3" })] }), _jsx("input", { role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": activeId || undefined, "aria-autocomplete": "list", autoComplete: "off", autoFocus: true, onKeyDown: move, className: className, ...props })] }));
+    return (_jsxs("div", { className: "palette-input", "data-slot": "command-palette-input", children: [_jsxs("svg", { className: "icon muted", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5" }), _jsx("path", { d: "m10.5 10.5 3 3" })] }), _jsx("input", { role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": activeId || undefined, "aria-autocomplete": "list", autoComplete: "off", autoFocus: true, onKeyDown: move, onCompositionStart: (event) => {
+                    composing.current = true;
+                    onCompositionStart?.(event);
+                }, onCompositionEnd: (event) => {
+                    composing.current = false;
+                    onCompositionEnd?.(event);
+                }, className: className, ...props })] }));
 }
 function CommandPaletteList({ className, "aria-label": ariaLabel = "Commands", ...props }) {
     const { listId, listRef } = useCommandPalette();

package/dist/empty-state.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { cva } from "class-variance-authority";
 import { clsx as cn } from "clsx";
 import { Slot } from "radix-ui";
 // Emptiness is not an error: the variants change which action belongs here, not
-// the colour of the surface.
-const emptyStateVariants = cva("empty", {
+// the colour of the surface. The hatch says "this region is not data".
+const emptyStateVariants = cva("empty hatch", {
     variants: {
         variant: { "first-run": "", "no-results": "", informational: "" },
         size: { md: "", sm: "empty-sm" },

package/dist/filter-expression.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+/** Structured filters. Parsing is opt-in and does not change ChipInput. */
+export type FilterOperator = "=" | "!=" | ">" | ">=" | "<" | "<=" | "IN" | "CONTAINS" | "IS NULL";
+export type FilterScalar = string | number;
+export type FilterJoin = "AND" | "OR";
+export type FilterField = {
+    key: string;
+    label?: string;
+    type: "text" | "number";
+    nullable?: boolean;
+    operators?: readonly FilterOperator[];
+    values?: readonly FilterScalar[];
+};
+export type FilterCondition = {
+    kind: "condition";
+    field: string;
+    operator: FilterOperator;
+    value: FilterScalar | FilterScalar[] | null;
+    /** The first node's join is ignored. AND binds before OR within each group. */
+    join: FilterJoin;
+};
+export type FilterGroup = {
+    kind: "group";
+    children: FilterNode[];
+    join: FilterJoin;
+};
+export type FilterNode = FilterCondition | FilterGroup;
+export type FilterParseResult = {
+    ok: true;
+    value: FilterNode[];
+} | {
+    ok: false;
+    error: string;
+};
+export type FilterSuggestion = {
+    label: string;
+    text: string;
+    description: string;
+};
+export declare function filterOperators(field: FilterField): readonly FilterOperator[];
+export declare function formatFilterScalar(value: FilterScalar): string;
+export declare function formatFilterValue(condition: FilterCondition): string;
+export declare function serializeFilterNode(node: FilterNode): string;
+export declare function serializeFilterExpression(nodes: readonly FilterNode[]): string;
+/** Empty input is an empty filter. Incomplete input returns an error without partial results. */
+export declare function parseFilterExpression(source: string, fields: readonly FilterField[], options?: {
+    allowLeadingJoin?: boolean;
+}): FilterParseResult;
+/** Suggestions replace only the condition at the end of the draft, including inside groups. */
+export declare function getFilterSuggestions(source: string, fields: readonly FilterField[], existing?: boolean): FilterSuggestion[];

package/dist/filter-expression.js ADDED Viewed

@@ -0,0 +1,264 @@
+const textOperators = ["=", "!=", "IN", "CONTAINS"];
+const numberOperators = ["=", "!=", ">", ">=", "<", "<=", "IN"];
+export function filterOperators(field) {
+    const supported = field.type === "number" ? numberOperators : textOperators;
+    const allowed = field.nullable ? [...supported, "IS NULL"] : supported;
+    return field.operators ? field.operators.filter(operator => allowed.includes(operator)) : allowed;
+}
+export function formatFilterScalar(value) {
+    return typeof value === "number" || /^[\w.-]+$/.test(value) && !/^(AND|OR)$/i.test(value)
+        ? String(value) : JSON.stringify(value);
+}
+export function formatFilterValue(condition) {
+    return condition.value === null ? "" : Array.isArray(condition.value)
+        ? `(${condition.value.map(formatFilterScalar).join(", ")})`
+        : formatFilterScalar(condition.value);
+}
+export function serializeFilterNode(node) {
+    return node.kind === "group" ? `(${serializeFilterExpression(node.children)})`
+        : `${node.field} ${node.operator} ${formatFilterValue(node)}`.trim();
+}
+export function serializeFilterExpression(nodes) {
+    return nodes.map((node, index) => `${index ? `${node.join} ` : ""}${serializeFilterNode(node)}`).join(" ");
+}
+function tokens(source, incomplete = false) {
+    const result = [];
+    let index = 0;
+    while (index < source.length) {
+        if (/\s/.test(source[index])) {
+            index++;
+            continue;
+        }
+        const start = index;
+        const quote = source[index];
+        if (quote === '"' || quote === "'") {
+            let text = "";
+            index++;
+            while (index < source.length && source[index] !== quote) {
+                if (source[index] === "\\") {
+                    index++;
+                    if (index === source.length)
+                        break;
+                    const escape = source[index++];
+                    if (escape === "u") {
+                        const hex = source.slice(index, index + 4);
+                        if (!/^[0-9a-f]{4}$/i.test(hex)) {
+                            throw new Error("Complete the Unicode escape with four hexadecimal digits.");
+                        }
+                        text += String.fromCharCode(parseInt(hex, 16));
+                        index += 4;
+                        continue;
+                    }
+                    text += { n: "\n", r: "\r", t: "\t", b: "\b", f: "\f" }[escape] ?? escape;
+                }
+                else
+                    text += source[index++];
+            }
+            if (source[index] !== quote && !incomplete)
+                throw new Error("Close the quoted value before confirming.");
+            if (source[index] === quote)
+                index++;
+            result.push({ text, quoted: true, start, end: index });
+        }
+        else {
+            const match = /^(>=|<=|!=|[=<>:~(),\[\]]|[^\s=<>!:~(),\[\]"']+)/.exec(source.slice(index));
+            if (!match) {
+                // A final "!" may become "!="; any other unexpected character stays an error.
+                if (incomplete && source.slice(index) === "!") {
+                    result.push({ text: "!", quoted: false, start, end: ++index });
+                    continue;
+                }
+                throw new Error(`Unexpected character "${source[index]}". Choose a suggested operator.`);
+            }
+            index += match[0].length;
+            result.push({ text: match[0], quoted: false, start, end: index });
+        }
+    }
+    return result;
+}
+/** Empty input is an empty filter. Incomplete input returns an error without partial results. */
+export function parseFilterExpression(source, fields, options = {}) {
+    try {
+        const input = tokens(source);
+        let index = 0;
+        const is = (text) => !input[index]?.quoted && input[index]?.text.toUpperCase() === text;
+        function take(message) {
+            const token = input[index++];
+            if (!token)
+                throw new Error(message);
+            return token;
+        }
+        function sequence(nested = false, depth = 0) {
+            // Bound recursion for pasted or generated input; this is not a UI nesting limit.
+            if (depth > 64)
+                throw new Error("Too many nested groups. Use fewer than 65 levels.");
+            const nodes = [];
+            while (index < input.length && !(nested && is(")"))) {
+                let join = "AND";
+                if (is("AND") || is("OR")) {
+                    if (!nodes.length && !(options.allowLeadingJoin && !nested))
+                        throw new Error("Add a condition before AND or OR.");
+                    join = take("").text.toUpperCase();
+                }
+                if (is("(")) {
+                    index++;
+                    const children = sequence(true, depth + 1);
+                    if (!is(")"))
+                        throw new Error("Close the filter group with ).");
+                    index++;
+                    nodes.push({ kind: "group", children, join });
+                    continue;
+                }
+                if (is(")"))
+                    throw new Error("This ) has no matching filter group.");
+                const name = take("Type a field after the connector.");
+                const field = fields.find(field => field.key.toLowerCase() === name.text.toLowerCase());
+                if (!field || name.quoted)
+                    throw new Error(`Unknown field "${name.text}". Choose a suggested field.`);
+                let operator = take(`Choose an operator for ${field.label ?? field.key}.`).text.toUpperCase();
+                if (operator === ":")
+                    operator = "=";
+                if (operator === "~")
+                    operator = "CONTAINS";
+                if (operator === "IS") {
+                    if (!is("NULL"))
+                        throw new Error("Complete IS NULL, or choose another operator.");
+                    index++;
+                    operator = "IS NULL";
+                }
+                if (!filterOperators(field).includes(operator)) {
+                    throw new Error(`${field.label ?? field.key} accepts ${filterOperators(field).join(", ")}.`);
+                }
+                const scalar = () => {
+                    const token = take(`Type a value for ${field.label ?? field.key}.`);
+                    if (!token.quoted && /^(AND|OR|[(),\[\]])$/i.test(token.text))
+                        throw new Error(`Type a value for ${field.label ?? field.key}. Quote text containing spaces or reserved words.`);
+                    let value = token.text;
+                    if (field.type === "number") {
+                        if (!/^-?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(token.text) || !Number.isFinite(Number(token.text)))
+                            throw new Error(`${field.label ?? field.key} needs a finite number.`);
+                        value = Number(token.text);
+                    }
+                    if (field.values && !field.values.includes(value))
+                        throw new Error(`Choose a listed value for ${field.label ?? field.key}.`);
+                    return value;
+                };
+                let value = null;
+                if (operator === "IN") {
+                    if (!is("(") && !is("["))
+                        throw new Error("Write IN (a, b), with comma-separated values.");
+                    const closing = take("").text === "(" ? ")" : "]";
+                    const values = [scalar()];
+                    while (is(",")) {
+                        index++;
+                        // Completion leaves a comma ready for another value; closing ends the list.
+                        if (is(closing))
+                            break;
+                        values.push(scalar());
+                    }
+                    if (!is(closing))
+                        throw new Error(`Separate IN values with commas and close the list with ${closing}.`);
+                    index++;
+                    value = [...new Set(values)];
+                }
+                else if (operator !== "IS NULL")
+                    value = scalar();
+                nodes.push({ kind: "condition", field: field.key, operator: operator, value, join });
+            }
+            if (nested && !nodes.length)
+                throw new Error("Add a condition inside the group.");
+            return nodes;
+        }
+        return { ok: true, value: sequence() };
+    }
+    catch (error) {
+        return { ok: false, error: error.message };
+    }
+}
+/** Suggestions replace only the condition at the end of the draft, including inside groups. */
+export function getFilterSuggestions(source, fields, existing = false) {
+    const complete = parseFilterExpression(source, fields, { allowLeadingJoin: existing });
+    if (complete.ok && complete.value.length)
+        return [];
+    let input;
+    // Never suggest past a lexical error: accepting would drop the unread suffix.
+    try {
+        input = tokens(source, true);
+    }
+    catch {
+        return [];
+    }
+    let start = 0;
+    const stack = [];
+    input.forEach((token, index) => {
+        // A complete prefix marks an implicit AND boundary, using the parser grammar.
+        if (!stack.some(frame => frame.kind === "list")) {
+            const preceding = parseFilterExpression(source.slice(start, token.start), fields, { allowLeadingJoin: true });
+            if (preceding.ok && preceding.value.length)
+                start = token.start;
+        }
+        if (token.quoted)
+            return;
+        if (token.text === "(" || token.text === "[") {
+            const list = input[index - 1]?.text.toUpperCase() === "IN" && !input[index - 1].quoted;
+            stack.push({ kind: list ? "list" : "group", start });
+            if (!list)
+                start = token.end;
+        }
+        else if (token.text === ")" || token.text === "]") {
+            const frame = stack.pop();
+            if (frame?.kind === "group")
+                start = frame.start;
+        }
+        else if (!stack.some(frame => frame.kind === "list") && /^(AND|OR)$/i.test(token.text) && /\s/.test(source[token.end] ?? ""))
+            start = token.end;
+    });
+    const prefix = source.slice(0, start);
+    const tail = source.slice(start).trimStart();
+    const leadingSpace = source.slice(start).slice(0, source.slice(start).length - tail.length);
+    const wrap = (suggestions) => suggestions.map(suggestion => ({ ...suggestion, text: prefix + leadingSpace + suggestion.text }));
+    const tailResult = parseFilterExpression(tail, fields, { allowLeadingJoin: true });
+    if (tailResult.ok && tailResult.value.length)
+        return [];
+    const condition = tokens(tail, true);
+    const first = condition[0];
+    const field = fields.find(field => field.key.toLowerCase() === first?.text.toLowerCase());
+    if (!field || condition.length === 1 && !/\s$/.test(tail)) {
+        const suggestions = fields.filter(field => field.key.toLowerCase().startsWith(tail.toLowerCase()) || field.label?.toLowerCase().startsWith(tail.toLowerCase()))
+            .map(field => ({ label: field.label ?? field.key, text: `${field.key} `, description: field.type === "number" ? "Number" : "Text" }));
+        if (existing && !prefix && /^(A|AN|AND|O|OR)$/i.test(tail)) {
+            const join = tail.toUpperCase().startsWith("A") ? "AND" : "OR";
+            suggestions.push({ label: join, text: `${join} `, description: "Combine with the next filter" });
+        }
+        return wrap(suggestions);
+    }
+    const remainder = tail.slice(first.end).trimStart();
+    const operatorMatch = /^(IS NULL|CONTAINS|IN|!=|>=|<=|[=<>:~])\s*(.*)$/i.exec(remainder);
+    if (!operatorMatch)
+        return wrap(filterOperators(field).filter(operator => operator.startsWith(remainder.toUpperCase())).map(operator => ({ label: operator, text: `${field.key} ${operator} `, description: operator === "IN" ? "Several values" : "Operator" })));
+    const operator = operatorMatch[1].toUpperCase();
+    const rawValue = operatorMatch[2];
+    if (operator === "IS NULL")
+        return [];
+    if (operator === "IN") {
+        const valueTokens = tokens(rawValue, true);
+        // Complete only "(a, b, c": members alternate with commas and the list stays open.
+        const opened = !!valueTokens[0] && !valueTokens[0].quoted && /^[(\[]$/.test(valueTokens[0].text);
+        const listTokens = opened ? valueTokens.slice(1) : valueTokens;
+        const wellFormed = listTokens.every((token, index) => index % 2
+            ? token.text === "," && !token.quoted
+            : token.quoted || !/^(AND|OR|[(),\[\]])$/i.test(token.text));
+        if (!wellFormed || (!opened && listTokens.length > 1))
+            return [];
+        const lastComma = [...valueTokens].reverse().find(token => token.text === "," && !token.quoted);
+        const partial = lastComma ? rawValue.slice(lastComma.end).trim() : rawValue.replace(/^\s*[(\[]/, "").trim();
+        const committed = lastComma ? rawValue.slice(0, lastComma.end).replace(/^\s*[(\[]/, "").trim() : "";
+        const search = tokens(partial, true)[0]?.text ?? "";
+        return wrap((field.values ?? []).filter(value => String(value).toLowerCase().startsWith(search.toLowerCase())).map(value => ({ label: String(value), text: `${field.key} IN (${committed ? `${committed} ` : ""}${formatFilterScalar(value)}, `, description: "Add value; type ) to finish" })));
+    }
+    const valueTokens = tokens(rawValue, true);
+    if (valueTokens.length > 1)
+        return [];
+    const partial = valueTokens[0]?.text ?? "";
+    return wrap((field.values ?? []).filter(value => String(value).toLowerCase().startsWith(partial.toLowerCase())).map(value => ({ label: String(value), text: `${field.key} ${operator} ${formatFilterScalar(value)}`, description: "Complete condition" })));
+}

package/dist/filter-input.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type FilterField, type FilterNode } from "./filter-expression.js";
+export type FilterInputProps = Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> & {
+    label: string;
+    fields: readonly FilterField[];
+    value: FilterNode[];
+    onValueChange: (value: FilterNode[]) => void;
+    /** Observe uncommitted text, for example to prevent submitting an incomplete search. */
+    onDraftChange?: (draft: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+};
+/** Continuous typing creates segmented filters; the product owns querying and SQL. */
+export declare function FilterInput({ id: providedId, label, fields, value, onValueChange, onDraftChange, disabled, placeholder, className, ...props }: FilterInputProps): React.JSX.Element;

package/dist/filter-input.js ADDED Viewed

@@ -0,0 +1,251 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { clsx as cn } from "clsx";
+import { Button } from "./button.js";
+import { Chip, ChipRemove } from "./chip-input.js";
+import { filterOperators, formatFilterValue, getFilterSuggestions, parseFilterExpression, serializeFilterExpression, serializeFilterNode, } from "./filter-expression.js";
+function nodeAt(nodes, path) {
+    let node;
+    for (const index of path) {
+        node = nodes[index];
+        nodes = node?.kind === "group" ? node.children : [];
+    }
+    return node;
+}
+function replaceNode(nodes, path, replacement) {
+    return nodes.flatMap((node, index) => {
+        if (index !== path[0])
+            return [node];
+        if (path.length === 1)
+            return replacement ? [replacement] : [];
+        if (node.kind !== "group")
+            return [node];
+        const children = replaceNode(node.children, path.slice(1), replacement);
+        return children.length ? [{ ...node, children }] : [];
+    });
+}
+const controlKey = (path, segment) => `${path.join("-")}-${segment}`;
+/** Continuous typing creates segmented filters; the product owns querying and SQL. */
+export function FilterInput({ id: providedId, label, fields, value, onValueChange, onDraftChange, disabled = false, placeholder = "status=active OR region IN (eu, us)", className, ...props }) {
+    const generatedId = React.useId();
+    const id = providedId ?? generatedId;
+    const host = React.useRef(null);
+    const input = React.useRef(null);
+    const composing = React.useRef(false);
+    const [draft, setDraft] = React.useState("");
+    const [error, setError] = React.useState("");
+    const [message, setAnnouncement] = React.useState({ text: "", revision: 0 });
+    const [focused, setFocused] = React.useState(false);
+    const [dismissed, setDismissed] = React.useState(false);
+    const [active, setActive] = React.useState(0);
+    const [edit, setEdit] = React.useState(null);
+    const [wholeExpression, setWholeExpression] = React.useState(false);
+    const suggestions = getFilterSuggestions(draft, fields, !wholeExpression && value.length > 0);
+    const visible = !disabled && !edit && focused && !dismissed && suggestions.length > 0;
+    const selected = Math.min(active, Math.max(0, suggestions.length - 1));
+    const parsed = parseFilterExpression(draft, fields, { allowLeadingJoin: !wholeExpression && value.length > 0 });
+    React.useEffect(() => {
+        if (edit && !nodeAt(value, edit.path))
+            setEdit(null);
+    }, [value, edit]);
+    React.useEffect(() => {
+        if (visible)
+            host.current?.querySelector(`#${CSS.escape(`${id}-option-${selected}`)}`)?.scrollIntoView({ block: "nearest" });
+    }, [selected, visible, id]);
+    // Replace the live region content even when consecutive actions use the same text.
+    function setMessage(text) {
+        setAnnouncement(previous => ({ text, revision: previous.revision + 1 }));
+    }
+    function updateDraft(text) {
+        setDraft(text);
+        onDraftChange?.(text);
+        setError("");
+        setActive(0);
+        setDismissed(false);
+    }
+    function commit(text = draft, reportError = true) {
+        if (disabled || !text.trim() && !wholeExpression)
+            return false;
+        const result = parseFilterExpression(text, fields, { allowLeadingJoin: !wholeExpression && value.length > 0 });
+        if (!result.ok) {
+            if (reportError)
+                setError(result.error);
+            return false;
+        }
+        onValueChange(wholeExpression ? result.value : [...value, ...result.value]);
+        setWholeExpression(false);
+        updateDraft("");
+        setDismissed(true);
+        setMessage("Filters updated. Keep typing to add another condition.");
+        return true;
+    }
+    function typed(text, caretAtEnd) {
+        updateDraft(text);
+        if (!composing.current && !wholeExpression && caretAtEnd && /(?:\s|[)\]])$/.test(text))
+            commit(text, false);
+    }
+    function choose(index) {
+        const suggestion = suggestions[index];
+        if (!suggestion || disabled)
+            return;
+        updateDraft(suggestion.text);
+        if (!wholeExpression)
+            commit(suggestion.text, false);
+        input.current?.focus();
+    }
+    function restoreFocus(path, segment) {
+        requestAnimationFrame(() => {
+            const button = host.current?.querySelector(`[data-filter-control="${controlKey(path, segment)}"]`);
+            (button ?? input.current)?.focus();
+        });
+    }
+    function closeEdit() {
+        if (!edit)
+            return;
+        restoreFocus(edit.path, edit.segment);
+        setEdit(null);
+    }
+    function beginEdit(path, segment) {
+        if (disabled || edit || wholeExpression || draft.trim())
+            return;
+        const node = nodeAt(value, path);
+        if (!node)
+            return;
+        const text = node.kind === "group" ? serializeFilterExpression(node.children)
+            : segment === "field" ? node.field : segment === "operator" ? node.operator : formatFilterValue(node);
+        setEdit({ path, segment, text, error: "" });
+        setDismissed(true);
+    }
+    function saveEdit() {
+        if (!edit || disabled)
+            return;
+        const node = nodeAt(value, edit.path);
+        if (!node) {
+            closeEdit();
+            return;
+        }
+        let candidate = edit.text;
+        if (node.kind === "condition") {
+            let operator = edit.operator ?? node.operator;
+            let nextValue = node.value;
+            if (edit.segment === "operator") {
+                const entered = edit.text.trim().toUpperCase();
+                operator = (entered === ":" ? "=" : entered === "~" ? "CONTAINS" : entered);
+                const field = fields.find(field => field.key === node.field);
+                if (!field || !filterOperators(field).includes(operator)) {
+                    setEdit({ ...edit, error: "Choose an operator supported by this field." });
+                    return;
+                }
+                if (operator === "IS NULL")
+                    nextValue = null;
+                else if (nextValue === null || Array.isArray(nextValue) && operator !== "IN" && nextValue.length > 1) {
+                    setEdit({ ...edit, segment: "value", operator, text: "", error: "Type a value for the new operator, then press Enter." });
+                    return;
+                }
+                else if (operator === "IN" && !Array.isArray(nextValue))
+                    nextValue = [nextValue];
+                else if (operator !== "IN" && Array.isArray(nextValue))
+                    nextValue = nextValue[0];
+            }
+            const field = edit.segment === "field" ? edit.text : node.field;
+            const editedValue = edit.segment === "value"
+                ? operator === "IN" && !/^\s*[(\[]/.test(edit.text) ? `(${edit.text})` : edit.text
+                : formatFilterValue({ ...node, value: nextValue });
+            candidate = `${field} ${operator} ${operator === "IS NULL" ? "" : editedValue}`;
+        }
+        const result = parseFilterExpression(candidate, fields);
+        if (!result.ok || !result.value.length || node.kind === "condition" && (result.value.length !== 1 || result.value[0].kind !== "condition")) {
+            setEdit({ ...edit, error: !result.ok ? result.error : "Enter a valid condition. Groups cannot be empty." });
+            return;
+        }
+        const next = node.kind === "group" ? { ...node, children: result.value } : { ...result.value[0], join: node.join };
+        onValueChange(replaceNode(value, edit.path, next));
+        setMessage("Filter updated.");
+        closeEdit();
+    }
+    function remove(path) {
+        if (disabled)
+            return;
+        onValueChange(replaceNode(value, path, null));
+        setEdit(null);
+        setMessage("Filter removed.");
+        input.current?.focus();
+    }
+    function keys(event) {
+        if (composing.current || event.nativeEvent.isComposing)
+            return;
+        if ((event.key === "ArrowDown" || event.key === "ArrowUp") && suggestions.length) {
+            event.preventDefault();
+            setDismissed(false);
+            setActive(visible ? (selected + (event.key === "ArrowDown" ? 1 : -1) + suggestions.length) % suggestions.length : event.key === "ArrowDown" ? 0 : suggestions.length - 1);
+        }
+        else if (event.key === "Tab" && !event.shiftKey && visible) {
+            event.preventDefault();
+            choose(selected);
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            if (parsed.ok && (parsed.value.length || wholeExpression))
+                commit();
+            else if (visible && draft.trim())
+                choose(selected);
+            else if (draft.trim())
+                commit();
+        }
+        else if (event.key === "Escape") {
+            setDismissed(true);
+            setError("");
+            if (wholeExpression) {
+                setWholeExpression(false);
+                updateDraft("");
+                setDismissed(true);
+                setMessage("Expression edit canceled. Filters unchanged.");
+            }
+        }
+        else if (event.key === "Backspace" && !draft && !wholeExpression && value.length) {
+            event.preventDefault();
+            const last = value.at(-1);
+            onValueChange(value.slice(0, -1));
+            updateDraft(`${value.length > 1 ? `${last.join} ` : ""}${serializeFilterNode(last)}`);
+            setMessage("Last filter restored as text. Edit it and press Enter.");
+        }
+    }
+    function editor() {
+        if (!edit)
+            return null;
+        const node = nodeAt(value, edit.path);
+        return _jsxs("span", { className: "filter-editor", children: [_jsx("input", { autoFocus: true, disabled: disabled, className: "filter-segment-input", "aria-label": `Edit ${edit.segment} in ${node ? serializeFilterNode(node) : "filter"}`, "aria-invalid": !!edit.error, "aria-describedby": `${id}-edit-hint`, value: edit.text, size: Math.max(6, Math.min(edit.text.length + 1, 48)), onFocus: event => event.target.select(), onChange: event => setEdit({ ...edit, text: event.target.value, error: "" }), onKeyDown: event => {
+                        event.stopPropagation();
+                        if (event.nativeEvent.isComposing)
+                            return;
+                        if (event.key === "Enter") {
+                            event.preventDefault();
+                            saveEdit();
+                        }
+                        if (event.key === "Escape") {
+                            event.preventDefault();
+                            closeEdit();
+                        }
+                    } }, controlKey(edit.path, edit.segment)), _jsxs("span", { className: "filter-edit-actions", children: [_jsx(Button, { size: "xs", onClick: saveEdit, disabled: disabled, children: "Save" }), _jsx(Button, { size: "xs", variant: "ghost", onClick: closeEdit, disabled: disabled, children: "Cancel" })] })] });
+    }
+    const busy = !!edit || wholeExpression || !!draft.trim();
+    function renderNodes(nodes, parent = []) {
+        return nodes.map((node, index) => {
+            const path = [...parent, index];
+            const key = path.join("-");
+            const editingHere = edit?.path.join("-") === key;
+            const description = serializeFilterNode(node);
+            function segment(name, content) {
+                return editingHere && edit?.segment === name ? editor() : _jsx("button", { type: "button", className: `filter-segment filter-${name}`, "data-filter-control": controlKey(path, name), disabled: disabled || busy, "aria-label": `Edit ${name} in ${description}`, onClick: () => beginEdit(path, name), children: content });
+            }
+            return _jsxs(React.Fragment, { children: [index > 0 && _jsx("button", { type: "button", className: "filter-join", "data-join": node.join, disabled: disabled || busy, "aria-label": `Change ${node.join} before ${description}`, onClick: () => onValueChange(replaceNode(value, path, { ...node, join: node.join === "AND" ? "OR" : "AND" })), children: node.join }), node.kind === "group" ? _jsxs("span", { className: "filter-group", role: "group", "aria-label": `Filter group: ${serializeFilterExpression(node.children)}`, children: [_jsx("button", { type: "button", className: "filter-boundary", "data-filter-control": controlKey(path, "group"), disabled: disabled || busy, "aria-label": `Edit group ${description}`, onClick: () => beginEdit(path, "group"), children: "(" }), editingHere ? editor() : renderNodes(node.children, path), _jsx("span", { className: "filter-boundary", "aria-hidden": "true", children: ")" }), _jsx(ChipRemove, { disabled: disabled || busy, "aria-label": `Remove group ${description}`, onClick: () => remove(path) })] }) : _jsxs(Chip, { className: "filter-chip", invalid: editingHere && !!edit?.error, children: [segment("field", fields.find(field => field.key === node.field)?.label ?? node.field), segment("operator", editingHere && edit?.operator ? edit.operator : node.operator), (editingHere && edit?.operator ? edit.operator : node.operator) !== "IS NULL" && segment("value", Array.isArray(node.value)
+                                ? _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "(" }), node.value.map((item, i) => _jsxs(React.Fragment, { children: [i > 0 && _jsx("span", { children: "," }), _jsx("span", { className: "filter-list-value", children: String(item) })] }, i)), _jsx("span", { "aria-hidden": "true", children: ")" })] })
+                                : node.value === "" ? '""' : String(node.value)), _jsx(ChipRemove, { disabled: disabled || busy, "aria-label": `Remove ${description}`, onClick: () => remove(path) })] })] }, key);
+        });
+    }
+    return _jsxs("div", { ...props, ref: host, "data-slot": "filter-input", className: cn("filter-input", className), children: [_jsx("label", { className: "label", htmlFor: id, children: label }), _jsxs("div", { className: "chip-input", children: [_jsxs("div", { className: "chip-input-box filter-box", "data-disabled": disabled || undefined, "aria-invalid": !!error || undefined, onMouseDown: event => { if (event.target === event.currentTarget && !disabled) {
+                            event.preventDefault();
+                            input.current?.focus();
+                        } }, children: [!wholeExpression && renderNodes(value), _jsx("input", { ref: input, id: id, "data-slot": "filter-input-field", className: "chip-input-field filter-field-input", role: "combobox", autoComplete: "off", spellCheck: false, disabled: disabled || !!edit, "aria-autocomplete": "list", "aria-expanded": visible, "aria-controls": visible ? `${id}-list` : undefined, "aria-activedescendant": visible ? `${id}-option-${selected}` : undefined, "aria-invalid": !!error, "aria-describedby": `${id}-hint${error ? ` ${id}-error` : ""}`, placeholder: placeholder, value: draft, onChange: event => typed(event.target.value, event.target.selectionStart === event.target.value.length), onCompositionStart: () => { composing.current = true; }, onCompositionEnd: event => { composing.current = false; typed(event.currentTarget.value, event.currentTarget.selectionStart === event.currentTarget.value.length); }, onKeyDown: keys, onFocus: () => setFocused(true), onBlur: () => setFocused(false) })] }), visible && _jsx("div", { className: "menu filter-suggestions", id: `${id}-list`, role: "listbox", "aria-label": `${label} suggestions`, children: suggestions.map((suggestion, index) => _jsxs("div", { id: `${id}-option-${index}`, role: "option", "aria-selected": index === selected, className: "menu-item", onMouseDown: event => event.preventDefault(), onPointerMove: () => setActive(index), onClick: () => choose(index), children: [_jsx("span", { children: suggestion.label }), _jsx("span", { className: "muted", children: suggestion.description })] }, `${suggestion.text}-${index}`)) })] }), _jsx("p", { id: `${id}-hint`, className: "field-hint", children: "Space completes a filter. Close IN lists and groups with ). Enter also confirms. Tab completes suggestions; Escape closes them. Quote values with spaces." }), error && _jsx("p", { className: "field-error", id: `${id}-error`, role: "alert", children: error }), edit && _jsx("p", { id: `${id}-edit-hint`, className: edit.error ? "field-error" : "field-hint", role: edit.error ? "alert" : undefined, children: edit.error || "Enter saves; Escape cancels. Results use the saved filter until you confirm." }), wholeExpression && _jsx("p", { className: "field-hint", children: "Edit parentheses or conditions. Enter saves; Escape cancels. Results still use the saved filters." }), _jsxs("div", { className: "filter-actions", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: disabled || busy || !value.length, onClick: () => { updateDraft(serializeFilterExpression(value)); setWholeExpression(true); input.current?.focus(); }, children: "Edit expression" }), _jsx(Button, { size: "sm", variant: "ghost", disabled: disabled || (!value.length && !draft && !edit), onClick: () => { onValueChange([]); setEdit(null); setWholeExpression(false); updateDraft(""); setMessage("Filters cleared."); requestAnimationFrame(() => input.current?.focus()); }, children: "Clear filters" })] }), _jsx("span", { className: "filter-status", role: "status", "aria-atomic": "true", children: _jsx("span", { children: message.text }, message.revision) })] });
+}

package/dist/index.d.ts CHANGED Viewed

@@ -8,6 +8,8 @@ export * from "./button.js";
 export * from "./card.js";
 export * from "./checkbox.js";
 export * from "./chip-input.js";
+export * from "./filter-input.js";
+export * from "./filter-expression.js";
 export * from "./command-palette.js";
 export * from "./dialog.js";
 export * from "./dot.js";
@@ -53,3 +55,5 @@ export * from "./disclosure.js";
 export * from "./time-range-control.js";
 export * from "./dashboard-grid.js";
 export * from "./step-list.js";
+export * from "./lifecycle.js";
+export * from "./status-badge.js";

package/dist/index.js CHANGED Viewed

@@ -9,6 +9,8 @@ export * from "./button.js";
 export * from "./card.js";
 export * from "./checkbox.js";
 export * from "./chip-input.js";
+export * from "./filter-input.js";
+export * from "./filter-expression.js";
 export * from "./command-palette.js";
 export * from "./dialog.js";
 export * from "./dot.js";
@@ -54,3 +56,5 @@ export * from "./disclosure.js";
 export * from "./time-range-control.js";
 export * from "./dashboard-grid.js";
 export * from "./step-list.js";
+export * from "./lifecycle.js";
+export * from "./status-badge.js";

package/dist/lifecycle.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type LifecycleProps = Omit<React.ComponentProps<"div">, "children"> & {
+    status: React.ReactNode;
+    actions?: React.ReactNode;
+    destructive?: React.ReactNode;
+};
+export declare function Lifecycle({ status, actions, destructive, className, ...props }: LifecycleProps): React.JSX.Element;

package/dist/lifecycle.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+/* The header row of a detail screen: what the thing is, what you can do to
+   it, and the one action you do not want to hit by accident. Status is read,
+   the verbs are pressed, and the destructive action sits outside both with a
+   wider gap. A screen with no verbs passes none, and the middle group is
+   dropped rather than rendered as an empty bordered box. */
+export function Lifecycle({ status, actions, destructive, className, ...props }) {
+    return _jsxs("div", { ...props, "data-slot": "lifecycle", className: cn("lifecycle", className), children: [_jsx("div", { className: "cluster cluster-status", role: "group", "aria-label": "Status", children: status }), actions ? _jsx("div", { className: "cluster cluster-verbs", role: "group", "aria-label": "Actions", children: actions }) : null, destructive] });
+}

package/dist/split.js CHANGED Viewed

@@ -18,6 +18,7 @@ function Splitter({ className, defaultSize = 50, min = 25, max = 75, step = 2, o
     const ref = React.useRef(null);
     const [size, setSize] = React.useState(defaultSize);
     const [dragging, setDragging] = React.useState(false);
+    const dragStart = React.useRef({ x: 0, size: defaultSize });
     useIsomorphicLayoutEffect(() => {
         const pane = ref.current?.previousElementSibling;
         if (pane instanceof HTMLElement)
@@ -32,6 +33,7 @@ function Splitter({ className, defaultSize = 50, min = 25, max = 75, step = 2, o
     }
     return (_jsx("div", { ref: ref, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": ariaLabel, "aria-valuenow": Math.round(size), "aria-valuemin": min, "aria-valuemax": max, "data-slot": "splitter", className: cn("splitter", dragging && "dragging", className), ...props, onPointerDown: (event) => {
             onPointerDown?.(event);
+            dragStart.current = { x: event.clientX, size };
             event.currentTarget.setPointerCapture(event.pointerId);
             setDragging(true);
         }, onPointerMove: (event) => {
@@ -40,7 +42,7 @@ function Splitter({ className, defaultSize = 50, min = 25, max = 75, step = 2, o
                 return;
             const box = event.currentTarget.parentElement?.getBoundingClientRect();
             if (box)
-                resize(((event.clientX - box.left) / box.width) * 100);
+                resize(dragStart.current.size + ((event.clientX - dragStart.current.x) / box.width) * 100);
         },
         /* Covers the pointer being released and the drag being cancelled. */
         onLostPointerCapture: (event) => {

package/dist/status-badge.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Badge } from "./badge.js";
+export type StatusTone = "success" | "danger" | "neutral";
+export type StatusBadgeProps = Omit<React.ComponentProps<typeof Badge>, "variant" | "asChild"> & {
+    tone: StatusTone;
+    pulse?: boolean;
+};
+export declare function StatusBadge({ tone, pulse, children, ...props }: StatusBadgeProps): React.JSX.Element;

package/dist/status-badge.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "./badge.js";
+import { Dot } from "./dot.js";
+/* The dot pulses while work is going, a run or a build; a thing that is
+   merely up holds still. */
+export function StatusBadge({ tone, pulse = false, children, ...props }) {
+    return _jsxs(Badge, { ...props, variant: tone, children: [_jsx(Dot, { pulse: pulse }), children] });
+}

package/dist/styles.css CHANGED Viewed

@@ -16,7 +16,7 @@
   border-radius: var(--radius-lg);
   background: var(--color-muted);
 }
-.theme-buttons .btn[aria-pressed="true"] {
+.theme-buttons .btn[aria-checked="true"] {
   background: var(--color-card);
   color: var(--color-foreground);
   box-shadow: var(--shadow-xs);
@@ -161,9 +161,17 @@
 }
 @media (pointer: coarse) {
-  .kiso-checkbox::before {
+  /* Reserve the extended target in layout so adjacent controls cannot overlap. */
+  .kiso-checkbox { margin: calc((var(--size-touch-min) - var(--size-icon-md)) / 2); }
+  .kiso-react-switch {
+    margin-block: calc((var(--size-touch-min) - 18px) / 2);
+    margin-inline: calc((var(--size-touch-min) - 32px) / 2);
+  }
+  .kiso-checkbox::before, .kiso-react-switch::before {
     content: "";
     position: absolute;
+    top: 50%; left: 50%;
+    translate: -50% -50%;
     width: var(--size-touch-min);
     height: var(--size-touch-min);
   }
@@ -217,10 +225,15 @@
   cursor: pointer;
 }
 [data-slot="select-trigger"][data-placeholder] {
-  color: var(--color-subtle-foreground);
+  color: var(--color-muted-foreground);
 }
 [data-slot="select-trigger"]:disabled { cursor: not-allowed; }
 [data-slot="select-item"] { justify-content: space-between; }
+[data-slot="select-content"] {
+  max-height: var(--radix-select-content-available-height);
+  overflow: hidden;
+}
+[data-slot="select-viewport"] { min-height: 0; }
 /* Portalled surfaces: above the page, never wider than it. */
 .kiso-react-floating {

package/dist/theme-selector.js CHANGED Viewed

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { Button } from "./button.js";
 export function ThemeSelector({ theme, onChange, }) {
+    const buttons = useRef([]);
     const options = [
         {
             value: "system",
@@ -19,5 +21,17 @@ export function ThemeSelector({ theme, onChange, }) {
             path: "M13.5 10A6 6 0 0 1 6 2.5a6 6 0 1 0 7.5 7.5Z",
         },
     ];
-    return (_jsxs("div", { className: "theme-row", children: [_jsx("span", { className: "t-label", children: "Theme" }), _jsx("div", { className: "theme-buttons", role: "group", "aria-label": "Theme", children: options.map((option) => (_jsx(Button, { variant: "ghost", size: "sm", className: "btn-icon", "aria-label": option.label, title: option.label, "aria-pressed": theme === option.value, onClick: () => onChange(option.value), children: _jsx("svg", { className: "icon icon-sm", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", "aria-hidden": "true", children: _jsx("path", { d: option.path }) }) }, option.value))) })] }));
+    return (_jsxs("div", { className: "theme-row", children: [_jsx("span", { className: "t-label", children: "Theme" }), _jsx("div", { className: "theme-buttons", role: "radiogroup", "aria-label": "Theme", children: options.map((option, index) => (_jsx(Button, { ref: (button) => { buttons.current[index] = button; }, variant: "ghost", size: "sm", className: "btn-icon", role: "radio", "aria-label": option.label, title: option.label, "aria-checked": theme === option.value, tabIndex: theme === option.value ? 0 : -1, onClick: () => onChange(option.value), onKeyDown: (event) => {
+                        if (event.altKey || event.ctrlKey || event.metaKey)
+                            return;
+                        const direction = event.key === "ArrowRight" || event.key === "ArrowDown"
+                            ? 1
+                            : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+                        if (!direction)
+                            return;
+                        event.preventDefault();
+                        const next = (index + direction + options.length) % options.length;
+                        buttons.current[next]?.focus();
+                        onChange(options[next].value);
+                    }, children: _jsx("svg", { className: "icon icon-sm", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", "aria-hidden": "true", children: _jsx("path", { d: option.path }) }) }, option.value))) })] }));
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso-react",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Kiso React components built with shadcn/ui and Radix",
   "type": "module",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@momoi-labs/kiso": "^0.11.0",
+    "@momoi-labs/kiso": "^0.13.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "radix-ui": "1.6.7",