@shipfox/react-ui 0.31.1 → 0.32.1

package/dist/components/alert/alert.d.ts

@@ -23,6 +23,6 @@ declare function AlertDescription({ className, ...props }: ComponentProps<'div'>
 declare function AlertActions({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function AlertAction({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
 declare function AlertClose({ className, variant: variantProp, onClick, ...props }: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>): import("react/jsx-runtime").JSX.Element;
-export { Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose, alertDefaultTransition, };
 export type { AlertProps };
+export { Alert, AlertAction, AlertActions, AlertClose, AlertContent, AlertDescription, AlertTitle, alertDefaultTransition, };
 //# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.js

@@ -218,6 +218,6 @@ function AlertClose({ className, variant: variantProp, onClick, ...props }) {
         })
     });
 }
-export { Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose, alertDefaultTransition };
+export { Alert, AlertAction, AlertActions, AlertClose, AlertContent, AlertDescription, AlertTitle, alertDefaultTransition };
 
 //# sourceMappingURL=alert.js.map

package/dist/components/avatar/avatar.d.ts

@@ -20,5 +20,5 @@ export type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & VariantP
     logoClassName?: string;
 };
 export declare function Avatar({ className, radius, size, content, src, alt, fallback, animateOnHover, logoName, logoClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
-export { AvatarRoot, AvatarImage, AvatarFallback };
+export { AvatarFallback, AvatarImage, AvatarRoot };
 //# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.js

@@ -160,6 +160,6 @@ export function Avatar({ className, radius, size = 'md', content = 'letters', sr
         children: renderContent()
     });
 }
-export { AvatarRoot, AvatarImage, AvatarFallback };
+export { AvatarFallback, AvatarImage, AvatarRoot };
 
 //# sourceMappingURL=avatar.js.map

package/dist/components/command/command.d.ts

@@ -24,6 +24,6 @@ declare function CommandGroup({ className, ...props }: ComponentProps<typeof Com
 declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
 declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
 declare function CommandShortcut({ className, children, ...props }: ComponentProps<typeof Kbd>): import("react/jsx-runtime").JSX.Element;
-export { Command, CommandTrigger, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, commandTriggerVariants, };
-export type { CommandTriggerProps, CommandInputProps };
+export type { CommandInputProps, CommandTriggerProps };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommandTrigger, commandTriggerVariants, };
 //# sourceMappingURL=command.d.ts.map

package/dist/components/command/command.js

@@ -189,6 +189,6 @@ function CommandShortcut({ className, children, ...props }) {
         children: children
     });
 }
-export { Command, CommandTrigger, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, commandTriggerVariants };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommandTrigger, commandTriggerVariants };
 
 //# sourceMappingURL=command.js.map

package/dist/components/dashboard/components/charts/bar-chart.js

@@ -46,6 +46,10 @@ export function BarChart({ data, bars, height = 200, xAxis, yAxis, grid, tooltip
                             /*#__PURE__*/ _jsx(ResponsiveContainer, {
                                 width: "100%",
                                 height: "100%",
+                                initialDimension: {
+                                    width: 320,
+                                    height: 200
+                                },
                                 children: /*#__PURE__*/ _jsxs(RechartsBarChart, {
                                     data: isEmpty ? [] : data,
                                     margin: {

package/dist/components/dashboard/components/charts/chart-tooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '../../../../components/typography/index.js';
 import { cn } from '../../../../utils/cn.js';
 export function ChartTooltipContent({ active, label, payload, hoveredDataKey, labelFormatter }) {
-    const isVisible = active && payload && payload.length;
+    const isVisible = active && payload?.length;
     if (!isVisible) return null;
     return /*#__PURE__*/ _jsxs("div", {
         className: "flex flex-col gap-4 rounded-8 p-12 bg-background-neutral-overlay border border-border-neutral-base shadow-lg",

package/dist/components/dashboard/components/charts/line-chart.js

@@ -41,6 +41,10 @@ export function LineChart({ data, lines, height = 200, xAxis, yAxis, grid, toolt
                             /*#__PURE__*/ _jsx(ResponsiveContainer, {
                                 width: "100%",
                                 height: "100%",
+                                initialDimension: {
+                                    width: 320,
+                                    height: 200
+                                },
                                 children: /*#__PURE__*/ _jsxs(RechartsLineChart, {
                                     data: isEmpty ? [] : data,
                                     margin: {

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -53,6 +53,6 @@ type DropdownMenuSubTriggerProps = ComponentProps<typeof DropdownMenuPrimitive.S
 };
 declare function DropdownMenuSubTrigger({ className, inset, icon, children, ...props }: DropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, dropdownMenuContentVariants, dropdownMenuItemVariants, dropdownMenuLabelVariants, };
-export type { DropdownMenuContentProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps, DropdownMenuSubTriggerProps, DropdownMenuShortcutProps, };
+export type { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuRadioItemProps, DropdownMenuShortcutProps, DropdownMenuSubTriggerProps, };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuContentVariants, dropdownMenuItemVariants, dropdownMenuLabelVariants, };
 //# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -275,6 +275,6 @@ function DropdownMenuSubContent({ className, ...props }) {
         ...props
     });
 }
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, dropdownMenuContentVariants, dropdownMenuItemVariants, dropdownMenuLabelVariants };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuContentVariants, dropdownMenuItemVariants, dropdownMenuLabelVariants };
 
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/components/form/form.d.ts

@@ -7,5 +7,5 @@ declare const FormLabel: React.ForwardRefExoticComponent<Omit<import("@radix-ui/
 declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 declare const FormDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 declare const FormMessage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage };
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage };
 //# sourceMappingURL=form.d.ts.map

package/dist/components/form/form.js

@@ -101,6 +101,6 @@ const FormMessage = /*#__PURE__*/ React.forwardRef(({ className, children, ...pr
     });
 });
 FormMessage.displayName = 'FormMessage';
-export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage };
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage };
 
 //# sourceMappingURL=form.js.map

package/dist/components/index.d.ts

@@ -15,7 +15,6 @@ export * from './dashboard';
 export * from './date-picker';
 export * from './date-time-range-picker';
 export * from './dot-grid';
-export * from './dropdown-input';
 export * from './dropdown-menu';
 export * from './dynamic-item';
 export * from './empty-state';
@@ -38,6 +37,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

@@ -15,7 +15,6 @@ export * from './dashboard/index.js';
 export * from './date-picker/index.js';
 export * from './date-time-range-picker/index.js';
 export * from './dot-grid/index.js';
-export * from './dropdown-input/index.js';
 export * from './dropdown-menu/index.js';
 export * from './dynamic-item/index.js';
 export * from './empty-state/index.js';
@@ -38,6 +37,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/inline-tips/inline-tips.d.ts

@@ -15,5 +15,5 @@ declare const inlineTipsActionVariants: (props?: ({
     variant?: "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InlineTipsAction({ className, variant, ...props }: ComponentProps<'button'> & VariantProps<typeof inlineTipsActionVariants>): import("react/jsx-runtime").JSX.Element;
-export { InlineTips, InlineTipsContent, InlineTipsTitle, InlineTipsDescription, InlineTipsActions, InlineTipsAction, };
+export { InlineTips, InlineTipsAction, InlineTipsActions, InlineTipsContent, InlineTipsDescription, InlineTipsTitle, };
 //# sourceMappingURL=inline-tips.d.ts.map

package/dist/components/inline-tips/inline-tips.js

@@ -93,6 +93,6 @@ function InlineTipsAction({ className, variant, ...props }) {
         ...props
     });
 }
-export { InlineTips, InlineTipsContent, InlineTipsTitle, InlineTipsDescription, InlineTipsActions, InlineTipsAction };
+export { InlineTips, InlineTipsAction, InlineTipsActions, InlineTipsContent, InlineTipsDescription, InlineTipsTitle };
 
 //# sourceMappingURL=inline-tips.js.map

package/dist/components/modal/modal.d.ts

@@ -41,6 +41,6 @@ type ModalBodyHeaderProps = ComponentProps<'div'> & {
     children?: ReactNode;
 };
 declare function ModalBodyHeader({ className, src, alt, title, description, children, ...props }: ModalBodyHeaderProps): import("react/jsx-runtime").JSX.Element;
-export { Modal, ModalPortal, ModalOverlay, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalBodyHeader, ModalTitle, ModalDescription, modalContentVariants, modalOverlayVariants, modalDefaultTransition, };
-export type { ModalContentProps, ModalHeaderProps, ModalOverlayProps, ModalTitleProps, ModalDescriptionProps, ModalBodyHeaderProps, };
+export type { ModalBodyHeaderProps, ModalContentProps, ModalDescriptionProps, ModalHeaderProps, ModalOverlayProps, ModalTitleProps, };
+export { Modal, ModalBody, ModalBodyHeader, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, modalContentVariants, modalDefaultTransition, modalOverlayVariants, };
 //# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.js

@@ -288,6 +288,6 @@ function ModalBodyHeader({ className, src, alt = '', title, description, childre
         ]
     });
 }
-export { Modal, ModalPortal, ModalOverlay, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalBodyHeader, ModalTitle, ModalDescription, modalContentVariants, modalOverlayVariants, modalDefaultTransition };
+export { Modal, ModalBody, ModalBodyHeader, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, modalContentVariants, modalDefaultTransition, modalOverlayVariants };
 
 //# sourceMappingURL=modal.js.map

package/dist/components/popover/popover.d.ts

@@ -8,5 +8,5 @@ declare function PopoverContent({ className, align, sideOffset, container, ...pr
 }): import("react/jsx-runtime").JSX.Element;
 declare function PopoverArrow({ className, ...props }: ComponentProps<typeof PopoverPrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverClose({ ...props }: ComponentProps<typeof PopoverPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverArrow, PopoverClose };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger };
 //# sourceMappingURL=popover.d.ts.map

package/dist/components/popover/popover.js

@@ -43,6 +43,6 @@ function PopoverClose({ ...props }) {
         ...props
     });
 }
-export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverArrow, PopoverClose };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger };
 
 //# sourceMappingURL=popover.js.map

package/dist/components/select/select.d.ts

@@ -22,6 +22,6 @@ type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
 };
 declare function SelectItem({ className, children, icon, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
 declare function SelectSeparator({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, selectTriggerVariants, };
-export type { SelectTriggerProps, SelectItemProps };
+export type { SelectItemProps, SelectTriggerProps };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants, };
 //# sourceMappingURL=select.d.ts.map

package/dist/components/select/select.js

@@ -149,6 +149,6 @@ function SelectSeparator({ className, ...props }) {
         ...props
     });
 }
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, selectTriggerVariants };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
 
 //# sourceMappingURL=select.js.map

package/dist/components/sheet/sheet.d.ts

@@ -28,6 +28,6 @@ type SheetDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
 declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react/jsx-runtime").JSX.Element;
 type SheetBodyProps = ComponentProps<'div'>;
 declare function SheetBody({ className, children, ...props }: SheetBodyProps): import("react/jsx-runtime").JSX.Element;
-export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetBody, sheetContentVariants, sheetOverlayVariants, };
-export type { SheetContentProps, SheetHeaderProps, SheetFooterProps, SheetTitleProps, SheetDescriptionProps, SheetBodyProps, SheetOverlayProps, };
+export type { SheetBodyProps, SheetContentProps, SheetDescriptionProps, SheetFooterProps, SheetHeaderProps, SheetOverlayProps, SheetTitleProps, };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetContentVariants, sheetOverlayVariants, };
 //# sourceMappingURL=sheet.d.ts.map

package/dist/components/sheet/sheet.js

@@ -158,6 +158,6 @@ function SheetBody({ className, children, ...props }) {
         children: children
     });
 }
-export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetBody, sheetContentVariants, sheetOverlayVariants };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetContentVariants, sheetOverlayVariants };
 
 //# sourceMappingURL=sheet.js.map

package/dist/components/shiny-text/shiny-text.d.ts

@@ -5,6 +5,6 @@ type ShinyTextProps = {
     className?: string;
 };
 declare function ShinyText({ text, disabled, speed, className }: ShinyTextProps): import("react/jsx-runtime").JSX.Element;
-export { ShinyText };
 export type { ShinyTextProps };
+export { ShinyText };
 //# sourceMappingURL=shiny-text.d.ts.map

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, node: LeafAstNode) => 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, seg.node)) : $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, seg.node)) : $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, {