@wallarm-org/design-system 0.7.0 → 0.8.0-rc-feature-filter-attacks-components-oks.1

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,10 +1,24 @@
 import { type FC, type ReactNode } from 'react';
+import { Menu } from '@ark-ui/react/menu';
 interface DropdownMenuProps {
     children: ReactNode;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     modal?: boolean;
+    /** Virtual anchor point for positioning without a trigger element */
+    anchorPoint?: {
+        x: number;
+        y: number;
+    };
+    /** Override default positioning config */
+    positioning?: Menu.RootProps['positioning'];
+    /** Programmatically control which item is highlighted */
+    highlightedValue?: string | null;
+    /** Callback when the highlighted item changes (e.g. on mouse hover) */
+    onHighlightChange?: (details: Menu.HighlightChangeDetails) => void;
+    /** Whether selecting an item closes the menu (default true) */
+    closeOnSelect?: boolean;
 }
 export declare const DropdownMenu: FC<DropdownMenuProps>;
 export {};

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -14,9 +14,10 @@ const SUB_POSITIONING = {
         crossAxis: -9
     }
 };
-const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, ...props })=>{
+const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint, positioning, highlightedValue, onHighlightChange, closeOnSelect, ...props })=>{
     const parent = useDropdownMenuContext();
     const isNested = null !== parent;
+    const defaultPositioning = isNested ? SUB_POSITIONING : ROOT_POSITIONING;
     const handleOpenChange = (details)=>{
         onOpenChange?.(details.open);
     };
@@ -27,7 +28,19 @@ const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, ...props })=>
         value: ctx,
         children: /*#__PURE__*/ jsx(Menu.Root, {
             ...props,
-            positioning: isNested ? SUB_POSITIONING : ROOT_POSITIONING,
+            positioning: positioning ?? defaultPositioning,
+            ...null != anchorPoint && {
+                anchorPoint
+            },
+            ...null != highlightedValue && {
+                highlightedValue
+            },
+            ...null != closeOnSelect && {
+                closeOnSelect
+            },
+            ...null != onHighlightChange && {
+                onHighlightChange
+            },
             open: open,
             defaultOpen: defaultOpen,
             onOpenChange: handleOpenChange,

package/dist/components/DropdownMenu/DropdownMenuItem.d.ts

@@ -6,6 +6,8 @@ export interface DropdownMenuItemProps extends Omit<HTMLAttributes<HTMLDivElemen
     inset?: boolean;
     disabled?: boolean;
     onSelect?: () => void;
+    /** Explicit value for programmatic highlighting via highlightedValue */
+    value?: string;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const DropdownMenuItem: FC<DropdownMenuItemProps>;

package/dist/components/DropdownMenu/DropdownMenuItem.js

@@ -3,17 +3,17 @@ import { useId } from "react";
 import { Menu } from "@ark-ui/react/menu";
 import { cn } from "../../utils/cn.js";
 import { dropdownMenuItemVariants } from "./classes.js";
-const DropdownMenuItem = ({ inset = false, variant = 'default', onSelect, disabled, ...props })=>{
-    const id = useId();
+const DropdownMenuItem = ({ inset = false, variant = 'default', onSelect, disabled, value, className, ...props })=>{
+    const autoId = useId();
     return /*#__PURE__*/ jsx(Menu.Item, {
         ...props,
-        value: id,
+        value: value ?? autoId,
         disabled: disabled,
         onSelect: onSelect,
         className: cn(dropdownMenuItemVariants({
             variant,
             inset
-        }))
+        }), className)
     });
 };
 DropdownMenuItem.displayName = 'DropdownMenuItem';

package/dist/components/DropdownMenu/classes.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const dropdownMenuClassNames = cn('flex flex-col gap-1 min-w-128', 'z-50 overflow-y-auto overflow-x-hidden outline-none', 'rounded-12 border border-border-primary-light bg-bg-surface-2 p-8 font-sans text-text-primary shadow-md outline-none', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2');
+const dropdownMenuClassNames = cn('flex flex-col gap-1 min-w-128', 'z-50 overflow-hidden outline-none', 'rounded-12 border border-border-primary-light bg-bg-surface-2 p-8 font-sans text-text-primary shadow-md outline-none', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2');
 const dropdownMenuItemVariants = cva([
     'flex items-center gap-8 rounded-6 px-8 py-6 text-sm',
     'relative cursor-pointer select-none outline-none transition-colors',

package/dist/components/QueryBar/QueryBar.d.ts

@@ -0,0 +1,36 @@
+import type { FC, HTMLAttributes } from 'react';
+import type { ExprNode, FieldMetadata } from './types';
+export interface QueryBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /**
+     * Available fields from backend API config
+     */
+    fields?: FieldMetadata[];
+    /**
+     * Current filter expression value (controlled mode)
+     */
+    value?: ExprNode | null;
+    /**
+     * Callback when filter expression changes
+     */
+    onChange?: (expression: ExprNode | null) => void;
+    /**
+     * Placeholder text to display when field is empty
+     * @default "Type to filter..."
+     */
+    placeholder?: string;
+    /**
+     * Whether the field has a validation error
+     */
+    error?: boolean;
+    /**
+     * Whether to show the keyboard hint (⌘K or Ctrl+K)
+     */
+    showKeyboardHint?: boolean;
+}
+/**
+ * QueryBar - Self-contained filter component.
+ * Handles autocomplete flow (field → operator → value), chip creation, and expression management.
+ * Supports multiple conditions joined by AND/OR connectors.
+ * Just pass `fields` config from backend API and it works.
+ */
+export declare const QueryBar: FC<QueryBarProps>;

package/dist/components/QueryBar/QueryBar.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { useQueryBarAutocomplete, useQueryBarExpression } from "./hooks/index.js";
+import { QueryBarProvider, useQueryBarContextValue } from "./QueryBarContext/index.js";
+import { QueryBarInput } from "./QueryBarInput/index.js";
+import { QueryBarMenu } from "./QueryBarMenu/QueryBarMenu.js";
+const QueryBar = ({ fields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const buildingChipRef = useRef(null);
+    const { conditions, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useQueryBarExpression({
+        fields,
+        value,
+        onChange,
+        error
+    });
+    const autocomplete = useQueryBarAutocomplete({
+        fields,
+        conditions,
+        chips,
+        upsertCondition,
+        removeCondition,
+        removeConditionAtIndex,
+        clearAll,
+        setConnectorValue,
+        containerRef,
+        buildingChipRef,
+        inputRef
+    });
+    const contextValue = useQueryBarContextValue({
+        chips,
+        autocomplete,
+        buildingChipRef,
+        inputRef,
+        placeholder,
+        error,
+        showKeyboardHint
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        className: cn('relative w-full', className),
+        onFocus: autocomplete.handleFocus,
+        onBlur: autocomplete.handleBlur,
+        children: [
+            /*#__PURE__*/ jsx(QueryBarProvider, {
+                value: contextValue,
+                children: /*#__PURE__*/ jsx(QueryBarInput, {
+                    ...props
+                })
+            }),
+            /*#__PURE__*/ jsx(QueryBarMenu, {
+                fields: fields,
+                autocomplete: autocomplete
+            })
+        ]
+    });
+};
+QueryBar.displayName = 'QueryBar';
+export { QueryBar };

package/dist/components/QueryBar/QueryBarContext/QueryBarContext.d.ts

@@ -0,0 +1,2 @@
+import type { QueryBarContextValue } from './types';
+export declare const QueryBarContext: import("react").Context<QueryBarContextValue | null>;

package/dist/components/QueryBar/QueryBarContext/QueryBarContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const QueryBarContext = createContext(null);
+export { QueryBarContext };

package/dist/components/QueryBar/QueryBarContext/QueryBarProvider.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from 'react';
+import type { QueryBarContextValue } from './types';
+interface QueryBarProviderProps {
+    value: QueryBarContextValue;
+    children: ReactNode;
+}
+export declare const QueryBarProvider: FC<QueryBarProviderProps>;
+export {};

package/dist/components/QueryBar/QueryBarContext/QueryBarProvider.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { QueryBarContext } from "./QueryBarContext.js";
+const QueryBarProvider = ({ value, children })=>/*#__PURE__*/ jsx(QueryBarContext.Provider, {
+        value: value,
+        children: children
+    });
+QueryBarProvider.displayName = 'QueryBarProvider';
+export { QueryBarProvider };

package/dist/components/QueryBar/QueryBarContext/index.d.ts

@@ -0,0 +1,4 @@
+export { QueryBarProvider } from './QueryBarProvider';
+export type { BuildingChipData, QueryBarContextValue } from './types';
+export { useQueryBarContext } from './useQueryBarContext';
+export { useQueryBarContextValue } from './useQueryBarContextValue';

package/dist/components/QueryBar/QueryBarContext/index.js

@@ -0,0 +1,4 @@
+import { QueryBarProvider } from "./QueryBarProvider.js";
+import { useQueryBarContext } from "./useQueryBarContext.js";
+import { useQueryBarContextValue } from "./useQueryBarContextValue.js";
+export { QueryBarProvider, useQueryBarContext, useQueryBarContextValue };

package/dist/components/QueryBar/QueryBarContext/types.d.ts

@@ -0,0 +1,38 @@
+import type { ChangeEvent, KeyboardEvent, Ref, RefObject } from 'react';
+import type { ChipSegment } from '../QueryBarInput/QueryBarChip';
+import type { QueryBarChipData } from '../types';
+export interface BuildingChipData {
+    attribute: string;
+    operator?: string;
+    value?: string;
+}
+export interface QueryBarContextValue {
+    chips: QueryBarChipData[];
+    buildingChipData: BuildingChipData | null;
+    buildingChipRef: Ref<HTMLDivElement>;
+    inputText: string;
+    inputRef: Ref<HTMLInputElement>;
+    placeholder: string;
+    error: boolean;
+    showKeyboardHint: boolean;
+    menuOpen: boolean;
+    insertIndex: number;
+    insertAfterConnector: boolean;
+    onInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onInputClick: () => void;
+    onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
+    onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    onConnectorChange: (chipId: string, value: 'and' | 'or') => void;
+    onChipRemove: (chipId: string) => void;
+    onClear: () => void;
+    editingChipId: string | null;
+    editingSegment: ChipSegment | null;
+    segmentFilterText: string;
+    onSegmentFilterChange: (text: string) => void;
+    onCancelSegmentEdit: () => void;
+    onCustomValueCommit: (customText: string) => void;
+    onCustomAttributeCommit: (customText: string) => void;
+    /** Ref to the currently open menu content element */
+    menuRef: RefObject<HTMLDivElement | null>;
+}

package/dist/components/QueryBar/QueryBarContext/useQueryBarContext.d.ts

@@ -0,0 +1,2 @@
+import type { QueryBarContextValue } from './types';
+export declare const useQueryBarContext: () => QueryBarContextValue;

package/dist/components/QueryBar/QueryBarContext/useQueryBarContext.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { QueryBarContext } from "./QueryBarContext.js";
+const useQueryBarContext = ()=>{
+    const ctx = useContext(QueryBarContext);
+    if (!ctx) throw new Error('useQueryBarContext must be used within a <QueryBar> component');
+    return ctx;
+};
+export { useQueryBarContext };

package/dist/components/QueryBar/QueryBarContext/useQueryBarContextValue.d.ts

@@ -0,0 +1,38 @@
+import type { RefObject } from 'react';
+import type { ChipSegment } from '../QueryBarInput/QueryBarChip';
+import type { MenuState, QueryBarChipData } from '../types';
+import type { BuildingChipData, QueryBarContextValue } from './types';
+interface AutocompleteForContext {
+    buildingChipData: BuildingChipData | null;
+    inputText: string;
+    menuState: MenuState;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleInputClick: () => void;
+    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleConnectorChange: (chipId: string, value: 'and' | 'or') => void;
+    handleChipRemove: (chipId: string) => void;
+    handleClear: () => void;
+    handleGapClick: (conditionIndex: number, afterConnector: boolean) => void;
+    insertIndex: number;
+    insertAfterConnector: boolean;
+    editingChipId: string | null;
+    editingSegment: ChipSegment | null;
+    segmentFilterText: string;
+    handleSegmentFilterChange: (text: string) => void;
+    cancelSegmentEdit: () => void;
+    handleCustomValueCommit: (customText: string) => void;
+    handleCustomAttributeCommit: (customText: string) => void;
+    menuRef: RefObject<HTMLDivElement | null>;
+}
+interface UseQueryBarContextValueOptions {
+    chips: QueryBarChipData[];
+    autocomplete: AutocompleteForContext;
+    buildingChipRef: RefObject<HTMLDivElement | null>;
+    inputRef: RefObject<HTMLInputElement | null>;
+    placeholder: string;
+    error: boolean;
+    showKeyboardHint: boolean;
+}
+export declare const useQueryBarContextValue: ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint, }: UseQueryBarContextValueOptions) => QueryBarContextValue;
+export {};

package/dist/components/QueryBar/QueryBarContext/useQueryBarContextValue.js

@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+const useQueryBarContextValue = ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint })=>useMemo(()=>({
+            chips,
+            buildingChipData: autocomplete.buildingChipData,
+            buildingChipRef,
+            inputText: autocomplete.inputText,
+            inputRef,
+            placeholder,
+            error,
+            showKeyboardHint,
+            menuOpen: 'closed' !== autocomplete.menuState,
+            insertIndex: autocomplete.insertIndex,
+            insertAfterConnector: autocomplete.insertAfterConnector,
+            onInputChange: autocomplete.handleInputChange,
+            onGapClick: autocomplete.handleGapClick,
+            onInputKeyDown: autocomplete.handleKeyDown,
+            onInputClick: autocomplete.handleInputClick,
+            onChipClick: autocomplete.handleChipClick,
+            onConnectorChange: autocomplete.handleConnectorChange,
+            onChipRemove: autocomplete.handleChipRemove,
+            onClear: autocomplete.handleClear,
+            editingChipId: autocomplete.editingChipId,
+            editingSegment: autocomplete.editingSegment,
+            segmentFilterText: autocomplete.segmentFilterText,
+            onSegmentFilterChange: autocomplete.handleSegmentFilterChange,
+            onCancelSegmentEdit: autocomplete.cancelSegmentEdit,
+            onCustomValueCommit: autocomplete.handleCustomValueCommit,
+            onCustomAttributeCommit: autocomplete.handleCustomAttributeCommit,
+            menuRef: autocomplete.menuRef
+        }), [
+        chips,
+        autocomplete.buildingChipData,
+        autocomplete.inputText,
+        autocomplete.menuState,
+        autocomplete.insertIndex,
+        autocomplete.insertAfterConnector,
+        autocomplete.handleInputChange,
+        autocomplete.handleGapClick,
+        autocomplete.handleKeyDown,
+        autocomplete.handleInputClick,
+        autocomplete.handleChipClick,
+        autocomplete.handleConnectorChange,
+        autocomplete.handleChipRemove,
+        autocomplete.handleClear,
+        autocomplete.editingChipId,
+        autocomplete.editingSegment,
+        autocomplete.segmentFilterText,
+        autocomplete.handleSegmentFilterChange,
+        autocomplete.cancelSegmentEdit,
+        autocomplete.handleCustomValueCommit,
+        autocomplete.handleCustomAttributeCommit,
+        autocomplete.menuRef,
+        buildingChipRef,
+        inputRef,
+        placeholder,
+        error,
+        showKeyboardHint
+    ]);
+export { useQueryBarContextValue };

package/dist/components/QueryBar/QueryBarInput/ChipsWithGaps.d.ts

@@ -0,0 +1,23 @@
+import type { FC } from 'react';
+import type { QueryBarChipData } from '../types';
+import type { ChipSegment } from './QueryBarChip';
+interface ChipsWithGapsProps {
+    chips: QueryBarChipData[];
+    hideLeadingGap?: boolean;
+    hideTrailingGap?: boolean;
+    onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    onConnectorChange: (chipId: string, value: 'and' | 'or') => void;
+    onChipRemove: (chipId: string) => void;
+    onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
+}
+/**
+ * Renders chips with InsertionGap components around each connector.
+ * Trailing gap is handled separately in the parent to avoid duplicates when chips are split.
+ */
+export declare const ChipsWithGaps: FC<ChipsWithGapsProps>;
+/** Trailing gap rendered once after chipsAfter in the parent layout. */
+export declare const TrailingGap: FC<{
+    chips: QueryBarChipData[];
+    onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
+}>;
+export {};

package/dist/components/QueryBar/QueryBarInput/ChipsWithGaps.js

@@ -0,0 +1,63 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { InsertionGap } from "./InsertionGap/index.js";
+import { QueryBarChip } from "./QueryBarChip/QueryBarChip.js";
+import { QueryBarConnectorChip } from "./QueryBarConnectorChip/index.js";
+const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, onConnectorChange, onChipRemove, onGapClick })=>{
+    const elements = [];
+    let connectorIndex = 0;
+    const connectorCount = chips.filter((c)=>'and' === c.variant || 'or' === c.variant).length;
+    for (const chip of chips){
+        const isCondition = 'chip' === chip.variant;
+        const isConnector = 'and' === chip.variant || 'or' === chip.variant;
+        if (isCondition) elements.push(/*#__PURE__*/ jsx("div", {
+            className: "shrink-0 cursor-pointer hover:z-10",
+            children: /*#__PURE__*/ jsx(QueryBarChip, {
+                chipId: chip.id,
+                attribute: chip.attribute ?? '',
+                operator: chip.operator,
+                value: chip.value,
+                error: chip.error,
+                onRemove: ()=>onChipRemove(chip.id),
+                onSegmentClick: (segment, anchorRect)=>onChipClick(chip.id, segment, anchorRect)
+            })
+        }, chip.id));
+        else if (isConnector) {
+            const match = chip.id.match(/^connector-(\d+)$/);
+            const condIdx = match ? Number(match[1]) : 0;
+            const isFirst = 0 === connectorIndex;
+            const isLast = connectorIndex === connectorCount - 1;
+            if (!(isFirst && hideLeadingGap)) elements.push(/*#__PURE__*/ jsx(InsertionGap, {
+                onClick: ()=>onGapClick(condIdx, false)
+            }, `gap-before-${chip.id}`));
+            elements.push(/*#__PURE__*/ jsx("div", {
+                className: "shrink-0",
+                children: /*#__PURE__*/ jsx(QueryBarConnectorChip, {
+                    chipId: chip.id,
+                    variant: chip.variant,
+                    onChange: onConnectorChange
+                })
+            }, chip.id));
+            if (!(isLast && hideTrailingGap)) elements.push(/*#__PURE__*/ jsx(InsertionGap, {
+                onClick: ()=>onGapClick(condIdx, true)
+            }, `gap-after-${chip.id}`));
+            connectorIndex++;
+        }
+    }
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: elements
+    });
+};
+ChipsWithGaps.displayName = 'ChipsWithGaps';
+const TrailingGap = ({ chips, onGapClick })=>{
+    const lastCondChip = [
+        ...chips
+    ].reverse().find((c)=>'chip' === c.variant);
+    if (!lastCondChip) return null;
+    const match = lastCondChip.id.match(/^chip-(\d+)$/);
+    const trailingIdx = match ? Number(match[1]) + 1 : 0;
+    return /*#__PURE__*/ jsx(InsertionGap, {
+        onClick: ()=>onGapClick(trailingIdx, true)
+    });
+};
+TrailingGap.displayName = 'TrailingGap';
+export { ChipsWithGaps, TrailingGap };

package/dist/components/QueryBar/QueryBarInput/InsertionGap/InsertionGap.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+interface InsertionGapProps {
+    onClick: () => void;
+}
+/** Thin clickable zone between chips for caret placement. */
+export declare const InsertionGap: FC<InsertionGapProps>;
+export {};

package/dist/components/QueryBar/QueryBarInput/InsertionGap/InsertionGap.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { insertionGapButton, insertionGapDivider } from "./classes.js";
+const InsertionGap = ({ onClick })=>/*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: insertionGapButton,
+        onClick: (e)=>{
+            e.stopPropagation();
+            onClick();
+        },
+        tabIndex: -1,
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ jsx("div", {
+            className: insertionGapDivider
+        })
+    });
+InsertionGap.displayName = 'InsertionGap';
+export { InsertionGap };

package/dist/components/QueryBar/QueryBarInput/InsertionGap/classes.d.ts

@@ -0,0 +1,4 @@
+/** Insertion gap button */
+export declare const insertionGapButton = "group relative z-20 flex h-28 w-8 shrink-0 cursor-text items-center justify-center";
+/** Insertion gap divider indicator */
+export declare const insertionGapDivider = "h-16 w-1 rounded-full bg-transparent transition-colors group-hover:bg-border-primary/50";

package/dist/components/QueryBar/QueryBarInput/InsertionGap/classes.js

@@ -0,0 +1,3 @@
+const insertionGapButton = 'group relative z-20 flex h-28 w-8 shrink-0 cursor-text items-center justify-center';
+const insertionGapDivider = 'h-16 w-1 rounded-full bg-transparent transition-colors group-hover:bg-border-primary/50';
+export { insertionGapButton, insertionGapDivider };

package/dist/components/QueryBar/QueryBarInput/InsertionGap/index.d.ts

@@ -0,0 +1 @@
+export { InsertionGap } from './InsertionGap';

package/dist/components/QueryBar/QueryBarInput/InsertionGap/index.js

@@ -0,0 +1,2 @@
+import { InsertionGap } from "./InsertionGap.js";
+export { InsertionGap };

package/dist/components/QueryBar/QueryBarInput/QueryBarChip/EditingContext.d.ts

@@ -0,0 +1,14 @@
+import { type FC, type FocusEvent, type KeyboardEvent, type ReactNode } from 'react';
+import type { ChipSegment } from './QueryBarChip';
+export interface EditingContextValue {
+    editingChipId: string | null;
+    editingSegment: ChipSegment | null;
+    segmentFilterText: string;
+    onSegmentFilterChange: (text: string) => void;
+    onSegmentEditKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onSegmentEditBlur: (e: FocusEvent<HTMLInputElement>) => void;
+}
+export declare const EditingProvider: FC<EditingContextValue & {
+    children: ReactNode;
+}>;
+export declare const useEditingContext: () => EditingContextValue | null;

package/dist/components/QueryBar/QueryBarInput/QueryBarChip/EditingContext.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const EditingCtx = /*#__PURE__*/ createContext(null);
+const EditingProvider = ({ children, ...value })=>/*#__PURE__*/ jsx(EditingCtx.Provider, {
+        value: value,
+        children: children
+    });
+const useEditingContext = ()=>useContext(EditingCtx);
+export { EditingProvider, useEditingContext };

package/dist/components/QueryBar/QueryBarInput/QueryBarChip/OperatorSegment.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes } from 'react';
+type OperatorSegmentProps = HTMLAttributes<HTMLDivElement> & {
+    children: string;
+};
+/** Operator segment — click-only (opens dropdown), no inline editing. */
+export declare const OperatorSegment: FC<OperatorSegmentProps>;
+export {};

package/dist/components/QueryBar/QueryBarInput/QueryBarChip/OperatorSegment.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../../utils/cn.js";
+import { segmentContainer, segmentTextVariants } from "./classes.js";
+const OperatorSegment = ({ children, className, ...props })=>{
+    const isInteractive = !!props.onClick;
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(segmentContainer, className),
+        "data-slot": "segment-operator",
+        ...isInteractive && {
+            role: 'button',
+            'aria-label': 'Edit filter operator'
+        },
+        ...props,
+        children: /*#__PURE__*/ jsx("p", {
+            className: segmentTextVariants({
+                variant: 'operator'
+            }),
+            children: children
+        })
+    });
+};
+OperatorSegment.displayName = 'OperatorSegment';
+export { OperatorSegment };

package/dist/components/QueryBar/QueryBarInput/QueryBarChip/QueryBarChip.d.ts

@@ -0,0 +1,13 @@
+import type { FC, HTMLAttributes } from 'react';
+export type ChipSegment = 'attribute' | 'operator' | 'value';
+export interface QueryBarChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    chipId?: string;
+    attribute: string;
+    operator?: string;
+    value?: string;
+    error?: boolean;
+    building?: boolean;
+    onRemove?: () => void;
+    onSegmentClick?: (segment: ChipSegment, anchorRect: DOMRect) => void;
+}
+export declare const QueryBarChip: FC<QueryBarChipProps>;