@shipfox/react-ui 0.31.0 → 0.32.0

package/dist/components/index.d.ts

@@ -38,6 +38,7 @@ export * from './shiny-text';
 export * from './shipql-editor';
 export * from './skeleton';
 export * from './slider';
+export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './textarea';

package/dist/components/index.js

@@ -38,6 +38,7 @@ export * from './shiny-text/index.js';
 export * from './shipql-editor/index.js';
 export * from './skeleton/index.js';
 export * from './slider/index.js';
+export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './textarea/index.js';

package/dist/components/shipql-editor/index.d.ts

@@ -1,3 +1,3 @@
 export type { LeafAstNode } from './lexical/shipql-leaf-node';
-export { type FacetDef, type LeafChangePayload, type RangeFacetConfig, ShipQLEditor, type ShipQLEditorProps, } from './shipql-editor';
+export { type FacetDef, type FormatLeafDisplay, type LeafChangePayload, type RangeFacetConfig, ShipQLEditor, type ShipQLEditorProps, } from './shipql-editor';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/shipql-editor/lexical/shipql-leaf-node.d.ts

@@ -10,7 +10,8 @@ type SerializedShipQLLeafNode = SerializedTextNode & {
 };
 export declare class ShipQLLeafNode extends TextNode {
     __shipqlNode: LeafAstNode;
-    constructor(text: string, shipqlNode: LeafAstNode, key?: NodeKey);
+    __displayText: string | null;
+    constructor(text: string, shipqlNode: LeafAstNode, key?: NodeKey, displayText?: string);
     static getType(): string;
     static clone(node: ShipQLLeafNode): ShipQLLeafNode;
     static importJSON(serialized: SerializedShipQLLeafNode): ShipQLLeafNode;
@@ -23,7 +24,7 @@ export declare class ShipQLLeafNode extends TextNode {
     getShipQLNode(): LeafAstNode;
 }
 export declare function $isShipQLLeafNode(node: unknown): node is ShipQLLeafNode;
-export declare function $createShipQLLeafNode(text: string, shipqlNode: LeafAstNode): ShipQLLeafNode;
+export declare function $createShipQLLeafNode(text: string, shipqlNode: LeafAstNode, displayText?: string): ShipQLLeafNode;
 /** Returns true if the AST node qualifies as a visual leaf chip in the editor. */
 export declare function isAstLeafNode(ast: AstNode): ast is LeafAstNode;
 export declare function leafSource(node: LeafAstNode): string;

package/dist/components/shipql-editor/lexical/shipql-leaf-node.js

@@ -30,15 +30,16 @@ function isValidLeafText(text) {
     }
 }
 export class ShipQLLeafNode extends TextNode {
-    constructor(text, shipqlNode, key){
+    constructor(text, shipqlNode, key, displayText){
         super(text, key);
         this.__shipqlNode = shipqlNode;
+        this.__displayText = displayText ?? null;
     }
     static getType() {
         return 'shipql-leaf';
     }
     static clone(node) {
-        return new ShipQLLeafNode(node.__text, node.__shipqlNode, node.__key);
+        return new ShipQLLeafNode(node.__text, node.__shipqlNode, node.__key, node.__displayText ?? undefined);
     }
     static importJSON(serialized) {
         const text = serialized.text;
@@ -76,6 +77,9 @@ export class ShipQLLeafNode extends TextNode {
     }
     createDOM(config) {
         const element = super.createDOM(config);
+        if (this.__displayText) {
+            element.textContent = this.__displayText;
+        }
         const valid = isValidLeafText(this.__text);
         for (const cls of LEAF_BASE_CLASSES.split(' '))element.classList.add(cls);
         for (const cls of (valid ? LEAF_NORMAL_CLASSES : LEAF_ERROR_CLASSES).split(' '))element.classList.add(cls);
@@ -111,8 +115,8 @@ export class ShipQLLeafNode extends TextNode {
 export function $isShipQLLeafNode(node) {
     return node instanceof ShipQLLeafNode;
 }
-export function $createShipQLLeafNode(text, shipqlNode) {
-    return new ShipQLLeafNode(text, shipqlNode);
+export function $createShipQLLeafNode(text, shipqlNode, displayText) {
+    return new ShipQLLeafNode(text, shipqlNode, undefined, displayText);
 }
 /** Returns true if the AST node qualifies as a visual leaf chip in the editor. */ export function isAstLeafNode(ast) {
     return isSimpleLeaf(ast) || isNotLeaf(ast) || isGroupedCompound(ast);

package/dist/components/shipql-editor/lexical/shipql-plugin.d.ts

@@ -3,7 +3,8 @@ import { type LeafAstNode } from './shipql-leaf-node';
 export declare const REMOVE_LEAF_COMMAND: import("lexical").LexicalCommand<string>;
 interface ShipQLPluginProps {
     onLeafFocus?: (node: LeafAstNode | null) => void;
+    formatLeafDisplay?: (source: string) => string;
 }
-export declare function ShipQLPlugin({ onLeafFocus }: ShipQLPluginProps): null;
+export declare function ShipQLPlugin({ onLeafFocus, formatLeafDisplay }: ShipQLPluginProps): null;
 export {};
 //# sourceMappingURL=shipql-plugin.d.ts.map

package/dist/components/shipql-editor/lexical/shipql-plugin.js

@@ -98,11 +98,13 @@ function getAbsoluteOffset(para, point) {
 /** Payload: the Lexical node key of the leaf to remove. */ export const REMOVE_LEAF_COMMAND = createCommand('REMOVE_LEAF_COMMAND');
 // ─── Plugin ───────────────────────────────────────────────────────────────────
 const REBUILD_TAG = 'shipql-rebuild';
-export function ShipQLPlugin({ onLeafFocus }) {
+export function ShipQLPlugin({ onLeafFocus, formatLeafDisplay }) {
     const [editor] = useLexicalComposerContext();
     // Keep latest callback accessible inside Lexical listeners without re-registering.
     const onLeafFocusRef = useRef(onLeafFocus);
     onLeafFocusRef.current = onLeafFocus;
+    const formatLeafDisplayRef = useRef(formatLeafDisplay);
+    formatLeafDisplayRef.current = formatLeafDisplay;
     // Track the key of the last focused leaf to avoid redundant callbacks.
     const lastFocusedKeyRef = useRef(null);
     useEffect(()=>{
@@ -233,7 +235,8 @@ export function ShipQLPlugin({ onLeafFocus }) {
                 const para = $getRoot().getFirstChild();
                 if (!para) return;
                 para.clear();
-                const newNodes = nextSegments.map((seg)=>seg.kind === 'leaf' ? $createShipQLLeafNode(seg.text, seg.node) : $createTextNode(seg.text));
+                const fmt = formatLeafDisplayRef.current;
+                const newNodes = nextSegments.map((seg)=>seg.kind === 'leaf' ? $createShipQLLeafNode(seg.text, seg.node, fmt?.(seg.text)) : $createTextNode(seg.text));
                 for (const node of newNodes)para.append(node);
                 // Restore cursor to the same absolute character position.
                 if (savedOffset >= 0 && newNodes.length > 0) {
@@ -273,9 +276,10 @@ export function ShipQLPlugin({ onLeafFocus }) {
             if (!ast) return;
             const segments = tokenize(text, collectLeaves(ast));
             if (!needsRebuild(children, segments)) return;
+            const fmt = formatLeafDisplayRef.current;
             para.clear();
             for (const seg of segments){
-                para.append(seg.kind === 'leaf' ? $createShipQLLeafNode(seg.text, seg.node) : $createTextNode(seg.text));
+                para.append(seg.kind === 'leaf' ? $createShipQLLeafNode(seg.text, seg.node, fmt?.(seg.text)) : $createTextNode(seg.text));
             }
         });
         return ()=>{

package/dist/components/shipql-editor/shipql-editor-inner.d.ts

@@ -1,3 +1,3 @@
 import type { ShipQLEditorInnerProps } from './shipql-editor';
-export default function ShipQLEditorInner({ onChange, onLeafFocus, placeholder, className, disabled, mode, text, editorKey, isError, onTextChange, onClear, onToggleMode, facets, currentFacet, setCurrentFacet, valueSuggestions, isLoadingValueSuggestions, onLeafChange, }: ShipQLEditorInnerProps): import("react/jsx-runtime").JSX.Element;
+export default function ShipQLEditorInner({ onChange, onLeafFocus, placeholder, className, disabled, mode, text, editorKey, isError, onTextChange, onClear, onToggleMode, facets, currentFacet, setCurrentFacet, valueSuggestions, isLoadingValueSuggestions, onLeafChange, formatLeafDisplay, }: ShipQLEditorInnerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=shipql-editor-inner.d.ts.map

package/dist/components/shipql-editor/shipql-editor-inner.js

@@ -21,7 +21,7 @@ import { ShipQLSuggestionsPlugin } from './suggestions/shipql-suggestions-plugin
 const INPUT_CLASSES = 'block w-full rounded-6 bg-background-field-base py-2 pl-32 pr-58 sm:pr-64 text-md text-foreground-neutral-base caret-foreground-neutral-base outline-none focus:border-border-highlights-interactive shadow-button-neutral';
 const INPUT_ERROR_CLASSES = 'shadow-border-error';
 const BUTTON_CLASSES = 'shrink-0 text-foreground-neutral-subtle hover:text-foreground-neutral-base transition-all duration-150 flex justify-center items-center cursor-pointer w-28 sm:w-32 h-full';
-export default function ShipQLEditorInner({ onChange, onLeafFocus, placeholder, className, disabled, mode, text, editorKey, isError, onTextChange, onClear, onToggleMode, facets, currentFacet, setCurrentFacet, valueSuggestions, isLoadingValueSuggestions, onLeafChange }) {
+export default function ShipQLEditorInner({ onChange, onLeafFocus, placeholder, className, disabled, mode, text, editorKey, isError, onTextChange, onClear, onToggleMode, facets, currentFacet, setCurrentFacet, valueSuggestions, isLoadingValueSuggestions, onLeafChange, formatLeafDisplay }) {
     const [suggestionsOpen, setSuggestionsOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(-1);
     const [items, setItems] = useState([]);
@@ -107,7 +107,8 @@ export default function ShipQLEditorInner({ onChange, onLeafFocus, placeholder,
                                     ErrorBoundary: LexicalErrorBoundary
                                 }),
                                 /*#__PURE__*/ _jsx(ShipQLPlugin, {
-                                    onLeafFocus: handleLeafFocus
+                                    onLeafFocus: handleLeafFocus,
+                                    formatLeafDisplay: formatLeafDisplay
                                 }),
                                 /*#__PURE__*/ _jsx(OnBlurPlugin, {
                                     onChange: onChange
@@ -175,6 +176,10 @@ export default function ShipQLEditorInner({ onChange, onLeafFocus, placeholder,
                         ast: tryParse(newText)
                     });
                 },
+                onBlur: (e)=>{
+                    const ast = tryParse(e.target.value);
+                    if (ast) onChange?.(ast);
+                },
                 placeholder: placeholder,
                 disabled: disabled
             }),

package/dist/components/shipql-editor/shipql-editor.d.ts

@@ -1,7 +1,7 @@
 import type { AstNode } from '@shipfox/shipql-parser';
 import type { LeafAstNode } from './lexical/shipql-leaf-node';
-import type { FacetDef } from './suggestions/types';
-export type { FacetDef, RangeFacetConfig } from './suggestions/types';
+import type { FacetDef, FormatLeafDisplay } from './suggestions/types';
+export type { FacetDef, FormatLeafDisplay, RangeFacetConfig } from './suggestions/types';
 export type LeafChangePayload = {
     partialValue: string;
     ast: AstNode | null;
@@ -19,6 +19,7 @@ export interface ShipQLEditorProps {
     valueSuggestions?: string[];
     isLoadingValueSuggestions?: boolean;
     onLeafChange?: (payload: LeafChangePayload) => void;
+    formatLeafDisplay?: FormatLeafDisplay;
 }
 export interface ShipQLEditorInnerProps extends ShipQLEditorProps {
     mode: 'editor' | 'text';

package/dist/components/shipql-editor/shipql-editor.js

@@ -34,7 +34,13 @@ export function ShipQLEditor({ disabled, className, ...props }) {
         textRef.current = '';
         setIsError(false);
         setEditorKey((k)=>k + 1);
-    }, []);
+        props.onLeafChange?.({
+            partialValue: '',
+            ast: null
+        });
+    }, [
+        props.onLeafChange
+    ]);
     const handleToggleMode = useCallback(()=>{
         setMode((m)=>{
             if (m === 'editor') {

package/dist/components/shipql-editor/suggestions/generate-suggestions.js

@@ -155,7 +155,7 @@ export function buildSuggestionItems(facets, valueSuggestions, activeText, focus
     if (filtered.length === 0) return [];
     return [
         header('TYPE'),
-        ...filtered.slice(0, 8).map((f)=>({
+        ...filtered.map((f)=>({
                 value: f,
                 label: f,
                 icon: /*#__PURE__*/ _jsx(Icon, {

package/dist/components/shipql-editor/suggestions/shipql-range-facet-panel.js

@@ -5,6 +5,22 @@ import { Slider } from '../../../components/slider/index.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../utils/cn.js';
 const RECENT_MAX = 5;
+const RANGE_BRACKET_RE = /^\[(\S+)\s+TO\s+(\S+)\]$/;
+const RANGE_OP_RE = /^([<>]=?)(.+)$/;
+function formatRangeDisplay(raw, fmt) {
+    const bracketMatch = RANGE_BRACKET_RE.exec(raw);
+    if (bracketMatch) {
+        const min = Number(bracketMatch[1]);
+        const max = Number(bracketMatch[2]);
+        if (!Number.isNaN(min) && !Number.isNaN(max)) return `[${fmt(min)} TO ${fmt(max)}]`;
+    }
+    const opMatch = RANGE_OP_RE.exec(raw);
+    if (opMatch) {
+        const v = Number(opMatch[2]);
+        if (!Number.isNaN(v)) return `${opMatch[1]}${fmt(v)}`;
+    }
+    return raw;
+}
 const INPUT_CLASSES = 'w-40 shrink-0 rounded-4 border border-border-neutral-base-component bg-background-field-base shadow-button-neutral transition-[color,box-shadow] outline-none px-4 py-2 text-center text-xs text-foreground-neutral-base focus-visible:shadow-border-interactive-with-active [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none';
 function getRecentKey(facetName) {
     return `shipql-range-recent-${facetName}`;
@@ -37,7 +53,7 @@ function clearRecent(facetName) {
     // ignore storage errors
     }
 }
-function PresetRow({ value, onClick, isRecent, isHighlighted, rowRef }) {
+function PresetRow({ value, displayValue, onClick, isRecent, isHighlighted, rowRef }) {
     return /*#__PURE__*/ _jsxs("button", {
         ref: rowRef,
         type: "button",
@@ -53,7 +69,7 @@ function PresetRow({ value, onClick, isRecent, isHighlighted, rowRef }) {
             }),
             /*#__PURE__*/ _jsx("span", {
                 className: "flex-1 truncate text-sm text-foreground-neutral-subtle",
-                children: value
+                children: displayValue ?? value
             })
         ]
     });
@@ -61,6 +77,7 @@ function PresetRow({ value, onClick, isRecent, isHighlighted, rowRef }) {
 export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingRef }) {
     const absMin = Number(config.min);
     const absMax = Number(config.max);
+    const fmt = config.format ?? String;
     const [sliderValues, setSliderValues] = useState([
         absMin,
         absMax
@@ -71,19 +88,59 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
     selectedPresetIndexRef.current = selectedPresetIndex;
     const presetRowRefs = useRef([]);
     // Local string state for inputs so mid-edit typing isn't clamped
-    const [minText, setMinText] = useState(String(absMin));
-    const [maxText, setMaxText] = useState(String(absMax));
+    const [minText, setMinText] = useState(fmt(absMin));
+    const [maxText, setMaxText] = useState(fmt(absMax));
+    const [isEditingMin, setIsEditingMin] = useState(false);
+    const [isEditingMax, setIsEditingMax] = useState(false);
     const [lo, hi] = sliderValues;
-    // Keep input text in sync when slider moves
+    // Keep input text in sync when slider moves (only when not actively editing)
     useEffect(()=>{
-        setMinText(String(lo));
+        if (!isEditingMin) setMinText(fmt(lo));
     }, [
-        lo
+        lo,
+        fmt,
+        isEditingMin
     ]);
     useEffect(()=>{
-        setMaxText(String(hi));
+        if (!isEditingMax) setMaxText(fmt(hi));
     }, [
-        hi
+        hi,
+        fmt,
+        isEditingMax
+    ]);
+    const commitMin = useCallback((text)=>{
+        setIsEditingMin(false);
+        const n = Number(text);
+        if (!Number.isNaN(n)) {
+            const clamped = Math.max(absMin, Math.min(n, hi));
+            setSliderValues([
+                clamped,
+                hi
+            ]);
+        }
+        setMinText(fmt(lo));
+    }, [
+        absMin,
+        hi,
+        lo,
+        fmt
+    ]);
+    const commitMax = useCallback((text)=>{
+        setIsEditingMax(false);
+        const n = Number(text);
+        if (!Number.isNaN(n)) {
+            const clamped = Math.max(lo, Math.min(n, absMax));
+            setSliderValues([
+                lo,
+                clamped
+            ]);
+        }
+        setMaxText(fmt(hi));
+    }, [
+        absMax,
+        lo,
+        hi,
+        fmt
     ]);
     // Hold dropdown open for any pointer interaction inside the panel
     const panelRef = useRef(null);
@@ -109,15 +166,16 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
         isSelectingRef
     ]);
     const addLabel = useMemo(()=>{
-        if (lo === absMin && hi === absMax) return `Add ">=${lo},<=${hi}"`;
-        if (lo === absMin) return `Add "<=${hi}"`;
-        if (hi === absMax) return `Add ">=${lo}"`;
-        return `Add ">=${lo},<=${hi}"`;
+        if (lo === absMin && hi === absMax) return `Add ">=${fmt(lo)},<=${fmt(hi)}"`;
+        if (lo === absMin) return `Add "<=${fmt(hi)}"`;
+        if (hi === absMax) return `Add ">=${fmt(lo)}"`;
+        return `Add ">=${fmt(lo)},<=${fmt(hi)}"`;
     }, [
         lo,
         hi,
         absMin,
-        absMax
+        absMax,
+        fmt
     ]);
     const buildValue = useCallback(()=>{
         if (lo === absMin && hi === absMax) return `[${lo} TO ${hi}]`;
@@ -206,44 +264,6 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
     }, [
         selectedPresetIndex
     ]);
-    // Commit min input on blur or Enter
-    const commitMin = useCallback(()=>{
-        const v = Number(minText);
-        if (!Number.isNaN(v)) {
-            const clamped = Math.min(Math.max(v, absMin), hi);
-            setSliderValues([
-                clamped,
-                hi
-            ]);
-            setMinText(String(clamped));
-        } else {
-            setMinText(String(lo));
-        }
-    }, [
-        minText,
-        absMin,
-        hi,
-        lo
-    ]);
-    // Commit max input on blur or Enter
-    const commitMax = useCallback(()=>{
-        const v = Number(maxText);
-        if (!Number.isNaN(v)) {
-            const clamped = Math.max(Math.min(v, absMax), lo);
-            setSliderValues([
-                lo,
-                clamped
-            ]);
-            setMaxText(String(clamped));
-        } else {
-            setMaxText(String(hi));
-        }
-    }, [
-        maxText,
-        absMax,
-        lo,
-        hi
-    ]);
     return /*#__PURE__*/ _jsxs("div", {
         ref: panelRef,
         className: "flex flex-col",
@@ -262,14 +282,21 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
                         className: "flex items-center gap-12",
                         children: [
                             /*#__PURE__*/ _jsx("input", {
-                                type: "number",
+                                type: "text",
+                                className: INPUT_CLASSES,
                                 value: minText,
-                                onChange: (e)=>setMinText(e.target.value),
-                                onBlur: commitMin,
+                                onChange: (e)=>{
+                                    setIsEditingMin(true);
+                                    setMinText(e.target.value);
+                                },
+                                onBlur: (e)=>commitMin(e.target.value),
                                 onKeyDown: (e)=>{
-                                    if (e.key === 'Enter') commitMin();
+                                    if (e.key === 'Enter') e.target.blur();
                                 },
-                                className: INPUT_CLASSES
+                                onFocus: ()=>{
+                                    setIsEditingMin(true);
+                                    setMinText(String(lo));
+                                }
                             }),
                             /*#__PURE__*/ _jsx(Slider, {
                                 className: "flex-1",
@@ -288,14 +315,21 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
                                 }
                             }),
                             /*#__PURE__*/ _jsx("input", {
-                                type: "number",
+                                type: "text",
+                                className: INPUT_CLASSES,
                                 value: maxText,
-                                onChange: (e)=>setMaxText(e.target.value),
-                                onBlur: commitMax,
+                                onChange: (e)=>{
+                                    setIsEditingMax(true);
+                                    setMaxText(e.target.value);
+                                },
+                                onBlur: (e)=>commitMax(e.target.value),
                                 onKeyDown: (e)=>{
-                                    if (e.key === 'Enter') commitMax();
+                                    if (e.key === 'Enter') e.target.blur();
                                 },
-                                className: INPUT_CLASSES
+                                onFocus: ()=>{
+                                    setIsEditingMax(true);
+                                    setMaxText(String(hi));
+                                }
                             })
                         ]
                     }),
@@ -336,6 +370,7 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
                             }),
                             recentValues.slice(0, 3).map((v, i)=>/*#__PURE__*/ _jsx(PresetRow, {
                                     value: v,
+                                    displayValue: formatRangeDisplay(v, fmt),
                                     onClick: handlePreset,
                                     isRecent: true,
                                     isHighlighted: selectedPresetIndex === i,
@@ -358,6 +393,7 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
                                 const idx = recentValues.slice(0, 3).length + i;
                                 return /*#__PURE__*/ _jsx(PresetRow, {
                                     value: v,
+                                    displayValue: formatRangeDisplay(v, fmt),
                                     onClick: handlePreset,
                                     isHighlighted: selectedPresetIndex === idx,
                                     rowRef: (el)=>{

package/dist/components/shipql-editor/suggestions/shipql-suggestions-plugin.js

@@ -3,6 +3,17 @@ import { $createRangeSelection, $createTextNode, $getRoot, $getSelection, $isRan
 import { useEffect, useRef } from 'react';
 import { $isShipQLLeafNode } from '../lexical/shipql-leaf-node.js';
 import { buildSuggestionItems, detectFacetContext, extractFacetFromLeaf, negationPrefixFromSource, normalizeFacets, stripNegationPrefix, tryParse } from './generate-suggestions.js';
+const NEEDS_QUOTING = /[\s"()[\]]/;
+const RANGE_SYNTAX = /^(\[.*\s+TO\s+.*\]|[<>]=?.+)$/;
+const ALREADY_QUOTED = /^"[^"]*"$/;
+function quoteIfNeeded(value) {
+    if (RANGE_SYNTAX.test(value)) return value;
+    if (ALREADY_QUOTED.test(value)) return value;
+    if (value === '' || NEEDS_QUOTING.test(value)) {
+        return `"${value}"`;
+    }
+    return value;
+}
 function getActiveSegment(para) {
     const children = para.getChildren();
     let active = '';
@@ -15,6 +26,11 @@ function getActiveSegment(para) {
             const leafText = child.getTextContent();
             if (active.length > 0 && active[0] !== ' ' && leafText.includes(':')) {
                 active = leafText + active;
+            } else if (active.length === 0 && leafText.endsWith(':')) {
+                // Cursor is immediately after a facet leaf like "status:" (no trailing
+                // text yet). Include the leaf so detectFacetContext can identify the
+                // facet and show value suggestions instead of facet-name suggestions.
+                active = leafText;
             }
             break;
         }
@@ -153,7 +169,7 @@ export function ShipQLSuggestionsPlugin({ facets, currentFacet, setCurrentFacet,
             editor.update(()=>{
                 const para = $getRoot().getFirstChild();
                 if (!para) return;
-                const insertText = currentFacetRef.current ? `${negationPrefixRef.current}${currentFacetRef.current}:${selectedValue} ` : `${negationPrefixRef.current}${selectedValue}:`;
+                const insertText = currentFacetRef.current ? `${negationPrefixRef.current}${currentFacetRef.current}:${quoteIfNeeded(selectedValue)} ` : `${negationPrefixRef.current}${selectedValue}:`;
                 // Case 1: Cursor is inside a focused leaf chip — replace the chip in-place
                 if (focusedLeafNodeRef.current) {
                     const sel = $getSelection();

package/dist/components/shipql-editor/suggestions/types.d.ts

@@ -3,11 +3,13 @@ export interface RangeFacetConfig {
     min: string;
     max: string;
     presets?: string[];
+    format?: (value: number) => string;
 }
 export type FacetDef = string | {
     name: string;
     config: RangeFacetConfig;
 };
+export type FormatLeafDisplay = (source: string) => string;
 export interface SuggestionItem {
     value: string;
     label: React.ReactNode;

package/dist/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './switch';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.js

@@ -0,0 +1,3 @@
+export * from './switch.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,12 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const switchVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const switchThumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof switchVariants>;
+export declare function Switch({ className, size, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch/switch.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+export const switchVariants = cva('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-none outline-none transition-colors duration-200', {
+    variants: {
+        size: {
+            sm: 'h-20 w-36',
+            md: 'h-24 w-44',
+            lg: 'h-28 w-52'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export const switchThumbVariants = cva('pointer-events-none block rounded-full bg-white shadow-button-neutral transition-transform duration-200', {
+    variants: {
+        size: {
+            sm: 'size-16 data-[state=checked]:translate-x-18 data-[state=unchecked]:translate-x-2',
+            md: 'size-20 data-[state=checked]:translate-x-22 data-[state=unchecked]:translate-x-2',
+            lg: 'size-24 data-[state=checked]:translate-x-26 data-[state=unchecked]:translate-x-2'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export function Switch({ className, size, ...props }) {
+    return /*#__PURE__*/ _jsx(SwitchPrimitive.Root, {
+        "data-slot": "switch",
+        className: cn(switchVariants({
+            size
+        }), // Unchecked state
+        'bg-background-switch-off', 'hover:bg-background-switch-off-hover', // Checked state
+        'data-[state=checked]:bg-checkbox-checked-bg', 'data-[state=checked]:hover:bg-checkbox-checked-bg-hover', // Focus
+        'focus-visible:shadow-checkbox-unchecked-focus', 'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus', // Disabled
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', className),
+        ...props,
+        children: /*#__PURE__*/ _jsx(SwitchPrimitive.Thumb, {
+            className: cn(switchThumbVariants({
+                size
+            }))
+        })
+    });
+}
+
+//# sourceMappingURL=switch.js.map

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

@@ -71,7 +71,7 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         getSortedRowModel: getSortedRowModel(),
-        getPaginationRowModel: isPaginationNeeded ? getPaginationRowModel() : undefined,
+        getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
         enableRowSelection: showSelectedCount,
         onSortingChange: setSorting,
         onColumnFiltersChange: setColumnFilters,
@@ -83,7 +83,7 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
             columnFilters,
             columnVisibility,
             rowSelection,
-            pagination: isPaginationNeeded ? paginationState : undefined
+            pagination: pagination ? paginationState : undefined
         }
     });
     const rowModel = table.getRowModel();