@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/property-filter-applied-DZz8aSoU.cjs

@@ -0,0 +1,348 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Button = require('./Button-C2dx_QZN.cjs');
+const dropdownMenu = require('./dropdown-menu-DfX8T0jb.cjs');
+const React = require('react');
+const buttonsGroup = require('./buttons-group-yLVV4nzz.cjs');
+const tooltip = require('./tooltip-_cda-a7s.cjs');
+const spinner = require('./spinner-cX-ypfV2.cjs');
+const primitives_menuItem = require('./primitives/menu-item.cjs.js');
+const utils_cn = require('./cn-BuHW7Wrt.cjs');
+const input = require('./input-XEcMP_LL.cjs');
+const popover = require('./popover-CGB4qBAn.cjs');
+
+function PropertyFilterActions({
+  disabled,
+  onClear,
+  onRemoveAll,
+  onSave,
+  onRemoveSaved
+}) {
+  const hasMenuItems = !!(onRemoveAll || onSave || onRemoveSaved);
+  if (!onClear && !hasMenuItems) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    onClear && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled, size: "md", onClick: onClear, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}), children: "Clear" }),
+    hasMenuItems && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled, size: "md", "aria-label": "More filter actions", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EllipsisVerticalIcon, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Content, { align: "end", children: [
+        onRemoveAll && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => onRemoveAll(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+          "Remove all filters"
+        ] }),
+        onRemoveAll && (onSave || onRemoveSaved) && /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
+        onSave && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => onSave(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SaveIcon, {}),
+          "Save filters for next time"
+        ] }),
+        onRemoveSaved && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => onRemoveSaved(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, {}),
+          "Remove saved filters"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+const pickMultiItemClass = utils_cn.cn(primitives_menuItem.menuItemClass, "min-w-0 focus:bg-neutral6/5 focus:text-neutral6");
+function PickMultiItem({
+  role,
+  checked,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role,
+      "aria-checked": checked,
+      "data-selected": checked || void 0,
+      "data-pick-multi-item": "",
+      title: label,
+      className: pickMultiItemClass,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        checked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: primitives_menuItem.menuItemCheckClass, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) })
+      ]
+    }
+  );
+}
+function PickMultiPanel({ field, tokens, onChange }) {
+  const [query, setQuery] = React.useState("");
+  const filteredOptions = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return field.options;
+    return field.options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [field.options, query]);
+  const token = React.useMemo(() => tokens.find((t) => t.fieldId === field.id), [tokens, field.id]);
+  const selectedValue = typeof token?.value === "string" ? token.value : !field.multi ? field.defaultValue : void 0;
+  const selectedValues = React.useMemo(() => {
+    const value = token?.value;
+    if (Array.isArray(value)) return value;
+    if (typeof value === "string") return [value];
+    return [];
+  }, [token]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    field.searchable !== false && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: primitives_menuItem.menuSearchClasses.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: primitives_menuItem.menuSearchClasses.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: `Search ${field.label.toLowerCase()}...`,
+          className: primitives_menuItem.menuSearchClasses.input,
+          onKeyDown: (e) => {
+            if (e.key !== "ArrowDown") return;
+            const panel = e.currentTarget.closest("[data-pick-multi-panel]");
+            const first = panel?.querySelector("[data-pick-multi-item]:not([disabled])");
+            if (!first) return;
+            e.preventDefault();
+            e.stopPropagation();
+            first.focus();
+          }
+        }
+      )
+    ] }),
+    field.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn(primitives_menuItem.menuEmptyClass, "m-1"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm", className: "text-neutral3 size-3" }),
+      "Loading options…"
+    ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(primitives_menuItem.menuEmptyClass, "m-1"), children: field.emptyText ?? "No option found." }) : field.multi ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[80dvh] overflow-auto p-1", children: filteredOptions.map((option) => {
+      const checked = selectedValues.includes(option.value);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        PickMultiItem,
+        {
+          role: "checkbox",
+          checked,
+          label: option.label,
+          onClick: () => onChange(
+            field.id,
+            checked ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value]
+          )
+        },
+        option.value
+      );
+    }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "radiogroup", className: "max-h-[80dvh] overflow-auto p-1", children: [
+      filteredOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        PickMultiItem,
+        {
+          role: "radio",
+          checked: selectedValue === option.value,
+          label: option.label,
+          onClick: () => onChange(field.id, option.value)
+        },
+        option.value
+      )),
+      !field.omitAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
+        PickMultiItem,
+        {
+          role: "radio",
+          checked: selectedValue === "Any",
+          label: "Any",
+          onClick: () => onChange(field.id, "Any")
+        }
+      )
+    ] })
+  ] });
+}
+
+function stringifyTokenValue(value) {
+  if (Array.isArray(value)) return value.length === 0 ? "Any" : value.join(", ");
+  return value;
+}
+const DEFAULT_LOCKED_TOOLTIP = "This filter is set by the current context and cannot be removed here.";
+function lookupOptionLabel(field, value) {
+  if (field.kind === "pick-multi" && field.options) {
+    if (Array.isArray(value)) {
+      if (value.length === 0) return "Any";
+      return value.map((v) => field.options.find((o) => o.value === v)?.label ?? v).join(", ");
+    }
+    return field.options.find((o) => o.value === value)?.label ?? value;
+  }
+  return stringifyTokenValue(value);
+}
+function LockedTokenPill({ field, value, tooltipContent }) {
+  const display = lookupOptionLabel(field, value);
+  const lockA11yLabel = `${field.label} filter is locked by context`;
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      buttonsGroup.ButtonsGroup,
+      {
+        spacing: "close",
+        "data-locked-field-id": field.id,
+        "data-property-filter-pill": "locked",
+        tabIndex: 0,
+        "aria-label": lockA11yLabel,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: "is" }),
+          /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: display }),
+          /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LockIcon, {}) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltipContent })
+  ] }) });
+}
+function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }) {
+  const [draft, setDraft] = React.useState(value);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (draft.trim() !== value) setDraft(value);
+  }, [value]);
+  React.useEffect(() => {
+    if (autoFocus) inputRef.current?.focus();
+  }, [autoFocus]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: field.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: "is" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        ref: inputRef,
+        size: "md",
+        disabled,
+        value: draft,
+        placeholder: field.placeholder ?? `Enter ${field.label}`,
+        onChange: (e) => {
+          const next = e.target.value;
+          setDraft(next);
+          if (next.trim() !== value) onChange(next);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            const trimmed = draft.trim();
+            if (trimmed !== value) onChange(trimmed);
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            setDraft(value);
+            e.target.blur();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        type: "button",
+        disabled,
+        "aria-label": `Remove ${field.label} filter`,
+        size: "md",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+      }
+    )
+  ] });
+}
+function PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled }) {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: field.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: "is" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", disabled, size: "md", children: stringifyTokenValue(token.value) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverContent, { align: "start", sideOffset: primitives_menuItem.MENU_SIDE_OFFSET, className: "w-64 p-0", "data-pick-multi-panel": true, children: /* @__PURE__ */ jsxRuntime.jsx(PickMultiPanel, { field, tokens, onChange }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        type: "button",
+        disabled,
+        "aria-label": `Remove ${field.label} filter`,
+        size: "md",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+      }
+    )
+  ] });
+}
+function PropertyFilterApplied({
+  fields,
+  tokens,
+  onTokensChange,
+  disabled,
+  autoFocusFieldId,
+  lockedFieldIds,
+  lockedTooltipContent = DEFAULT_LOCKED_TOOLTIP
+}) {
+  if (tokens.length === 0) return null;
+  const lockedSet = new Set(lockedFieldIds ?? []);
+  const replaceTokenAt = (index, next) => {
+    const copy = [...tokens];
+    copy[index] = next;
+    onTokensChange(copy);
+  };
+  const removeTokenAt = (index) => {
+    onTokensChange(tokens.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: tokens.map((token, index) => {
+    const field = fields.find((f) => f.id === token.fieldId);
+    if (!field) return null;
+    if (lockedSet.has(token.fieldId)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        LockedTokenPill,
+        {
+          field,
+          value: token.value,
+          tooltipContent: lockedTooltipContent
+        },
+        `${token.fieldId}-${index}`
+      );
+    }
+    if (field.kind === "text" && typeof token.value === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TextTokenPill,
+        {
+          field,
+          value: token.value,
+          disabled,
+          autoFocus: autoFocusFieldId === token.fieldId,
+          onChange: (nextValue) => replaceTokenAt(index, { fieldId: token.fieldId, value: nextValue }),
+          onRemove: () => removeTokenAt(index)
+        },
+        `${token.fieldId}-${index}`
+      );
+    }
+    if (field.kind === "pick-multi") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        PickMultiTokenPill,
+        {
+          field,
+          token,
+          tokens,
+          disabled,
+          onChange: (fieldId, value) => replaceTokenAt(index, { fieldId, value }),
+          onRemove: () => removeTokenAt(index)
+        },
+        `${token.fieldId}-${index}`
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { spacing: "close", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: field.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: "is" }),
+      /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: stringifyTokenValue(token.value) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          disabled,
+          size: "md",
+          "aria-label": `Remove ${field.label} filter`,
+          onClick: () => removeTokenAt(index),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+        }
+      )
+    ] }, `${token.fieldId}-${index}`);
+  }) });
+}
+
+exports.PickMultiPanel = PickMultiPanel;
+exports.PropertyFilterActions = PropertyFilterActions;
+exports.PropertyFilterApplied = PropertyFilterApplied;
+//# sourceMappingURL=property-filter-applied-DZz8aSoU.cjs.map

package/dist/property-filter-applied-DZz8aSoU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-filter-applied-DZz8aSoU.cjs","sources":["../src/ds/components/PropertyFilter/property-filter-actions.tsx","../src/ds/components/PropertyFilter/pick-multi-panel.tsx","../src/ds/components/PropertyFilter/property-filter-applied.tsx"],"sourcesContent":["import { EllipsisVerticalIcon, SaveIcon, Trash2Icon, XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button/Button';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu/dropdown-menu';\n\nexport type PropertyFilterActionsProps = {\n  disabled?: boolean;\n  /** Neutralize each pill's value (keep pills, clear values). Shown as a button, not a menu item. */\n  onClear?: () => void;\n  /** Fully remove all active filters. Rendered as \"Remove all filters\" inside the overflow menu. */\n  onRemoveAll?: () => void;\n  /** Persist the current filter set (typically to localStorage) for later restoration. */\n  onSave?: () => void;\n  /** Drop a previously-saved filter set. Wire only when a saved set actually exists. */\n  onRemoveSaved?: () => void;\n};\n\n/**\n * Shared action bar for filter-driven pages (traces, logs, …). Renders a\n * Clear button and an overflow menu with Remove all / Save / Remove saved actions.\n */\nexport function PropertyFilterActions({\n  disabled,\n  onClear,\n  onRemoveAll,\n  onSave,\n  onRemoveSaved,\n}: PropertyFilterActionsProps) {\n  const hasMenuItems = !!(onRemoveAll || onSave || onRemoveSaved);\n  if (!onClear && !hasMenuItems) return null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {onClear && (\n        <Button disabled={disabled} size=\"md\" onClick={onClear} icon={<XIcon />}>\n          Clear\n        </Button>\n      )}\n\n      {hasMenuItems && (\n        <DropdownMenu>\n          <DropdownMenu.Trigger asChild>\n            <Button disabled={disabled} size=\"md\" aria-label=\"More filter actions\">\n              <EllipsisVerticalIcon />\n            </Button>\n          </DropdownMenu.Trigger>\n          <DropdownMenu.Content align=\"end\">\n            {onRemoveAll && (\n              <DropdownMenu.Item onSelect={() => onRemoveAll()}>\n                <XIcon />\n                Remove all filters\n              </DropdownMenu.Item>\n            )}\n            {onRemoveAll && (onSave || onRemoveSaved) && <DropdownMenu.Separator />}\n            {onSave && (\n              <DropdownMenu.Item onSelect={() => onSave()}>\n                <SaveIcon />\n                Save filters for next time\n              </DropdownMenu.Item>\n            )}\n            {onRemoveSaved && (\n              <DropdownMenu.Item onSelect={() => onRemoveSaved()}>\n                <Trash2Icon />\n                Remove saved filters\n              </DropdownMenu.Item>\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu>\n      )}\n    </div>\n  );\n}\n","import { CheckIcon, SearchIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Spinner } from '@/ds/components/Spinner/spinner';\nimport { menuEmptyClass, menuItemCheckClass, menuItemClass, menuSearchClasses } from '@/ds/primitives/menu-item';\nimport { cn } from '@/lib/utils';\n\n// Same rendering as Combobox items: no visible control, a trailing check when selected.\n// Focus is on the item itself (roving via [data-pick-multi-item]), so highlight rides on :focus.\nconst pickMultiItemClass = cn(menuItemClass, 'min-w-0 focus:bg-neutral6/5 focus:text-neutral6');\n\nfunction PickMultiItem({\n  role,\n  checked,\n  label,\n  onClick,\n}: {\n  role: 'checkbox' | 'radio';\n  checked: boolean;\n  label: string;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role={role}\n      aria-checked={checked}\n      data-selected={checked || undefined}\n      data-pick-multi-item=\"\"\n      title={label}\n      className={pickMultiItemClass}\n      onClick={onClick}\n    >\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      {checked && (\n        <span className={menuItemCheckClass}>\n          <CheckIcon />\n        </span>\n      )}\n    </button>\n  );\n}\n\ntype PickMultiField = Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n\nexport type PickMultiPanelProps = {\n  field: PickMultiField;\n  tokens: PropertyFilterToken[];\n  /** Always carries a value: an empty list is how the panel says \"nothing selected\". */\n  onChange: (fieldId: string, value: string | string[]) => void;\n};\n\n/**\n * Reusable body for a pick-multi side popover: optional search input plus a\n * radio group (single-select) or checkbox list (when `field.multi` is true).\n * Shared between the Filter Creator's property-picker side popover and the\n * PropertyFilterApplied pill's inline editor so both surfaces use the exact same UI.\n */\nexport function PickMultiPanel({ field, tokens, onChange }: PickMultiPanelProps) {\n  const [query, setQuery] = useState('');\n\n  const filteredOptions = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return field.options;\n    return field.options.filter(o => o.label.toLowerCase().includes(q));\n  }, [field.options, query]);\n\n  const token = useMemo(() => tokens.find(t => t.fieldId === field.id), [tokens, field.id]);\n  // Fall back to `defaultValue` when no token exists — lets view-toggle fields (e.g. List mode)\n  // show their default option pre-selected before the user explicitly picks one.\n  const selectedValue = typeof token?.value === 'string' ? token.value : !field.multi ? field.defaultValue : undefined;\n  const selectedValues = useMemo<string[]>(() => {\n    const value = token?.value;\n    if (Array.isArray(value)) return value;\n    if (typeof value === 'string') return [value];\n    return [];\n  }, [token]);\n\n  return (\n    <>\n      {field.searchable !== false && (\n        <div className={menuSearchClasses.container}>\n          <SearchIcon className={menuSearchClasses.icon} />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={e => setQuery(e.target.value)}\n            placeholder={`Search ${field.label.toLowerCase()}...`}\n            className={menuSearchClasses.input}\n            onKeyDown={e => {\n              if (e.key !== 'ArrowDown') return;\n              const panel = e.currentTarget.closest<HTMLElement>('[data-pick-multi-panel]');\n              const first = panel?.querySelector<HTMLElement>('[data-pick-multi-item]:not([disabled])');\n              if (!first) return;\n              e.preventDefault();\n              e.stopPropagation();\n              first.focus();\n            }}\n          />\n        </div>\n      )}\n\n      {field.isLoading ? (\n        <div className={cn(menuEmptyClass, 'm-1')}>\n          <Spinner size=\"sm\" className=\"text-neutral3 size-3\" />\n          Loading options…\n        </div>\n      ) : filteredOptions.length === 0 ? (\n        <div className={cn(menuEmptyClass, 'm-1')}>{field.emptyText ?? 'No option found.'}</div>\n      ) : field.multi ? (\n        <div className=\"max-h-[80dvh] overflow-auto p-1\">\n          {filteredOptions.map(option => {\n            const checked = selectedValues.includes(option.value);\n            return (\n              <PickMultiItem\n                key={option.value}\n                role=\"checkbox\"\n                checked={checked}\n                label={option.label}\n                onClick={() =>\n                  onChange(\n                    field.id,\n                    checked ? selectedValues.filter(v => v !== option.value) : [...selectedValues, option.value],\n                  )\n                }\n              />\n            );\n          })}\n        </div>\n      ) : (\n        <div role=\"radiogroup\" className=\"max-h-[80dvh] overflow-auto p-1\">\n          {filteredOptions.map(option => (\n            <PickMultiItem\n              key={option.value}\n              role=\"radio\"\n              checked={selectedValue === option.value}\n              label={option.label}\n              onClick={() => onChange(field.id, option.value)}\n            />\n          ))}\n          {!field.omitAnyOption && (\n            <PickMultiItem\n              role=\"radio\"\n              checked={selectedValue === 'Any'}\n              label=\"Any\"\n              onClick={() => onChange(field.id, 'Any')}\n            />\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n","import { LockIcon, XIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { ButtonsGroup, ButtonsGroupText } from '../ButtonsGroup';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../Tooltip';\nimport { PickMultiPanel } from './pick-multi-panel';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Input } from '@/ds/components/Input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover/popover';\nimport { MENU_SIDE_OFFSET } from '@/ds/primitives/menu-item';\n\nexport type PropertyFilterAppliedProps = {\n  fields: PropertyFilterField[];\n  tokens: PropertyFilterToken[];\n  onTokensChange: (tokens: PropertyFilterToken[]) => void;\n  disabled?: boolean;\n  /**\n   * Field id that was just added via the Creator — rendered pill auto-focuses\n   * its input so the user can start typing immediately.\n   */\n  autoFocusFieldId?: string;\n  /**\n   * Field ids whose pills must remain visible and read-only — value stays\n   * displayed but cannot be edited or removed. Use when an upstream context\n   * (e.g. agent-scoped traces tab) pre-applies a filter that the user must\n   * not be able to clear.\n   */\n  lockedFieldIds?: readonly string[];\n  /** Tooltip content shown on hover/focus of any locked pill. */\n  lockedTooltipContent?: ReactNode;\n};\n\nfunction stringifyTokenValue(value: string | string[]) {\n  if (Array.isArray(value)) return value.length === 0 ? 'Any' : value.join(', ');\n  return value;\n}\n\nconst DEFAULT_LOCKED_TOOLTIP = 'This filter is set by the current context and cannot be removed here.';\n\nfunction lookupOptionLabel(field: PropertyFilterField, value: string | string[]): string {\n  if (field.kind === 'pick-multi' && field.options) {\n    if (Array.isArray(value)) {\n      if (value.length === 0) return 'Any';\n      return value.map(v => field.options.find(o => o.value === v)?.label ?? v).join(', ');\n    }\n    return field.options.find(o => o.value === value)?.label ?? value;\n  }\n  return stringifyTokenValue(value);\n}\n\ntype LockedTokenPillProps = {\n  field: PropertyFilterField;\n  value: string | string[];\n  tooltipContent: ReactNode;\n};\n\nfunction LockedTokenPill({ field, value, tooltipContent }: LockedTokenPillProps) {\n  const display = lookupOptionLabel(field, value);\n  const lockA11yLabel = `${field.label} filter is locked by context`;\n\n  return (\n    <TooltipProvider delayDuration={150}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <ButtonsGroup\n            spacing=\"close\"\n            data-locked-field-id={field.id}\n            data-property-filter-pill=\"locked\"\n            tabIndex={0}\n            aria-label={lockA11yLabel}\n          >\n            <ButtonsGroupText size=\"md\">{field.label}</ButtonsGroupText>\n            <ButtonsGroupText size=\"md\">is</ButtonsGroupText>\n            <ButtonsGroupText size=\"md\">{display}</ButtonsGroupText>\n            <ButtonsGroupText size=\"md\">\n              <LockIcon />\n            </ButtonsGroupText>\n          </ButtonsGroup>\n        </TooltipTrigger>\n        <TooltipContent>{tooltipContent}</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n\ntype TextTokenPillProps = {\n  field: Extract<PropertyFilterField, { kind: 'text' }>;\n  value: string;\n  onChange: (value: string) => void;\n  onRemove: () => void;\n  disabled?: boolean;\n  autoFocus?: boolean;\n};\n\nfunction TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }: TextTokenPillProps) {\n  // Local draft keeps the caret stable when the URL round-trip trims the\n  // stored value (e.g. trailing spaces). We only re-sync from the prop when\n  // the external value is genuinely different from our current (trimmed) draft.\n  const [draft, setDraft] = useState(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (draft.trim() !== value) setDraft(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  useEffect(() => {\n    if (autoFocus) inputRef.current?.focus();\n  }, [autoFocus]);\n\n  return (\n    <ButtonsGroup spacing=\"close\">\n      <ButtonsGroupText size=\"md\">{field.label}</ButtonsGroupText>\n      <ButtonsGroupText size=\"md\">is</ButtonsGroupText>\n      <Input\n        ref={inputRef}\n        size=\"md\"\n        disabled={disabled}\n        value={draft}\n        placeholder={field.placeholder ?? `Enter ${field.label}`}\n        onChange={e => {\n          const next = e.target.value;\n          setDraft(next);\n          // Apply live — URL and traces query update on every keystroke.\n          // Empty values persist as empty-value tokens so the pill stays visible.\n          if (next.trim() !== value) onChange(next);\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            const trimmed = draft.trim();\n            if (trimmed !== value) onChange(trimmed);\n          } else if (e.key === 'Escape') {\n            e.preventDefault();\n            setDraft(value);\n            (e.target as HTMLInputElement).blur();\n          }\n        }}\n      />\n      <Button\n        type=\"button\"\n        disabled={disabled}\n        aria-label={`Remove ${field.label} filter`}\n        size=\"md\"\n        onMouseDown={e => e.preventDefault()}\n        onClick={onRemove}\n      >\n        <XIcon />\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\ntype PickMultiTokenPillProps = {\n  field: Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n  token: PropertyFilterToken;\n  tokens: PropertyFilterToken[];\n  onChange: (fieldId: string, value: string | string[]) => void;\n  onRemove: () => void;\n  disabled?: boolean;\n};\n\nfunction PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled }: PickMultiTokenPillProps) {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <ButtonsGroup spacing=\"close\">\n      <ButtonsGroupText size=\"md\">{field.label}</ButtonsGroupText>\n      <ButtonsGroupText size=\"md\">is</ButtonsGroupText>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button type=\"button\" disabled={disabled} size=\"md\">\n            {stringifyTokenValue(token.value)}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" sideOffset={MENU_SIDE_OFFSET} className=\"w-64 p-0\" data-pick-multi-panel>\n          <PickMultiPanel field={field} tokens={tokens} onChange={onChange} />\n        </PopoverContent>\n      </Popover>\n      <Button\n        type=\"button\"\n        disabled={disabled}\n        aria-label={`Remove ${field.label} filter`}\n        size=\"md\"\n        onClick={onRemove}\n      >\n        <XIcon />\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\n/**\n * Applied filter pills. Text/id-style tokens render with an always-active\n * input so the user can edit the value inline (and an empty token is valid —\n * it persists in the URL until the user explicitly removes it via ×).\n * Pick-multi tokens render with a clickable value that opens the same side\n * popover as the Filter Creator so the user can update selections in place.\n * Creation lives in a separate component (PropertyFilterCreator).\n */\nexport function PropertyFilterApplied({\n  fields,\n  tokens,\n  onTokensChange,\n  disabled,\n  autoFocusFieldId,\n  lockedFieldIds,\n  lockedTooltipContent = DEFAULT_LOCKED_TOOLTIP,\n}: PropertyFilterAppliedProps) {\n  if (tokens.length === 0) return null;\n\n  const lockedSet = new Set(lockedFieldIds ?? []);\n\n  const replaceTokenAt = (index: number, next: PropertyFilterToken) => {\n    const copy = [...tokens];\n    copy[index] = next;\n    onTokensChange(copy);\n  };\n\n  const removeTokenAt = (index: number) => {\n    onTokensChange(tokens.filter((_, i) => i !== index));\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      {tokens.map((token, index) => {\n        const field = fields.find(f => f.id === token.fieldId);\n        if (!field) return null;\n\n        if (lockedSet.has(token.fieldId)) {\n          return (\n            <LockedTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              value={token.value}\n              tooltipContent={lockedTooltipContent}\n            />\n          );\n        }\n\n        if (field.kind === 'text' && typeof token.value === 'string') {\n          return (\n            <TextTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              value={token.value}\n              disabled={disabled}\n              autoFocus={autoFocusFieldId === token.fieldId}\n              onChange={nextValue => replaceTokenAt(index, { fieldId: token.fieldId, value: nextValue })}\n              onRemove={() => removeTokenAt(index)}\n            />\n          );\n        }\n\n        if (field.kind === 'pick-multi') {\n          return (\n            <PickMultiTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              token={token}\n              tokens={tokens}\n              disabled={disabled}\n              // Unselecting everything (empty array) keeps the pill alive in a\n              // neutral state — the user explicitly removes it via ×. This lets\n              // the page-level Reset neutralize values without dropping the pill.\n              onChange={(fieldId, value) => replaceTokenAt(index, { fieldId, value })}\n              onRemove={() => removeTokenAt(index)}\n            />\n          );\n        }\n\n        return (\n          <ButtonsGroup spacing=\"close\" key={`${token.fieldId}-${index}`}>\n            <ButtonsGroupText size=\"md\">{field.label}</ButtonsGroupText>\n            <ButtonsGroupText size=\"md\">is</ButtonsGroupText>\n            <ButtonsGroupText size=\"md\">{stringifyTokenValue(token.value)}</ButtonsGroupText>\n            <Button\n              type=\"button\"\n              disabled={disabled}\n              size=\"md\"\n              aria-label={`Remove ${field.label} filter`}\n              onClick={() => removeTokenAt(index)}\n            >\n              <XIcon />\n            </Button>\n          </ButtonsGroup>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","Button","XIcon","DropdownMenu","EllipsisVerticalIcon","SaveIcon","Trash2Icon","cn","menuItemClass","menuItemCheckClass","CheckIcon","useState","useMemo","Fragment","menuSearchClasses","SearchIcon","menuEmptyClass","Spinner","TooltipProvider","Tooltip","TooltipTrigger","ButtonsGroup","ButtonsGroupText","LockIcon","TooltipContent","useRef","useEffect","Input","Popover","PopoverTrigger","PopoverContent","MENU_SIDE_OFFSET"],"mappings":";;;;;;;;;;;;;;;AAoBO,SAAS,qBAAA,CAAsB;AAAA,EACpC,QAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,MAAM,YAAA,GAAe,CAAC,EAAE,WAAA,IAAe,MAAA,IAAU,aAAA,CAAA;AACjD,EAAA,IAAI,CAAC,OAAA,IAAW,CAAC,YAAA,EAAc,OAAO,IAAA;AAEtC,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,oBACCC,cAAA,CAACC,aAAA,EAAA,EAAO,QAAA,EAAoB,IAAA,EAAK,IAAA,EAAK,OAAA,EAAS,OAAA,EAAS,IAAA,kBAAMD,cAAA,CAACE,iBAAA,EAAA,EAAM,CAAA,EAAI,QAAA,EAAA,OAAA,EAEzE,CAAA;AAAA,IAGD,YAAA,oCACEC,yBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAACG,yBAAA,CAAa,OAAA,EAAb,EAAqB,OAAA,EAAO,MAC3B,QAAA,kBAAAH,cAAA,CAACC,aAAA,EAAA,EAAO,QAAA,EAAoB,IAAA,EAAK,MAAK,YAAA,EAAW,qBAAA,EAC/C,QAAA,kBAAAD,cAAA,CAACI,gCAAA,EAAA,EAAqB,GACxB,CAAA,EACF,CAAA;AAAA,sBACAL,eAAA,CAACI,yBAAA,CAAa,OAAA,EAAb,EAAqB,OAAM,KAAA,EACzB,QAAA,EAAA;AAAA,QAAA,WAAA,oCACEA,yBAAA,CAAa,IAAA,EAAb,EAAkB,QAAA,EAAU,MAAM,aAAY,EAC7C,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACE,iBAAA,EAAA,EAAM,CAAA;AAAA,UAAE;AAAA,SAAA,EAEX,CAAA;AAAA,QAED,gBAAgB,MAAA,IAAU,aAAA,CAAA,oBAAkBF,cAAA,CAACG,yBAAA,CAAa,WAAb,EAAuB,CAAA;AAAA,QACpE,MAAA,oCACEA,yBAAA,CAAa,IAAA,EAAb,EAAkB,QAAA,EAAU,MAAM,QAAO,EACxC,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACK,oBAAA,EAAA,EAAS,CAAA;AAAA,UAAE;AAAA,SAAA,EAEd,CAAA;AAAA,QAED,aAAA,oCACEF,yBAAA,CAAa,IAAA,EAAb,EAAkB,QAAA,EAAU,MAAM,eAAc,EAC/C,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACM,sBAAA,EAAA,EAAW,CAAA;AAAA,UAAE;AAAA,SAAA,EAEhB;AAAA,OAAA,EAEJ;AAAA,KAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;AC7DA,MAAM,kBAAA,GAAqBC,WAAA,CAAGC,iCAAA,EAAe,iDAAiD,CAAA;AAE9F,SAAS,aAAA,CAAc;AAAA,EACrB,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,uBACET,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,IAAA;AAAA,MACA,cAAA,EAAc,OAAA;AAAA,MACd,iBAAe,OAAA,IAAW,MAAA;AAAA,MAC1B,sBAAA,EAAqB,EAAA;AAAA,MACrB,KAAA,EAAO,KAAA;AAAA,MACP,SAAA,EAAW,kBAAA;AAAA,MACX,OAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAChD,2BACCA,cAAA,CAAC,MAAA,EAAA,EAAK,WAAWS,sCAAA,EACf,QAAA,kBAAAT,cAAA,CAACU,yBAAU,CAAA,EACb;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAiBO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAO,MAAA,EAAQ,UAAS,EAAwB;AAC/E,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,eAAS,EAAE,CAAA;AAErC,EAAA,MAAM,eAAA,GAAkBC,cAAQ,MAAM;AACpC,IAAA,MAAM,CAAA,GAAI,KAAA,CAAM,IAAA,EAAK,CAAE,WAAA,EAAY;AACnC,IAAA,IAAI,CAAC,CAAA,EAAG,OAAO,KAAA,CAAM,OAAA;AACrB,IAAA,OAAO,KAAA,CAAM,OAAA,CAAQ,MAAA,CAAO,CAAA,CAAA,KAAK,CAAA,CAAE,MAAM,WAAA,EAAY,CAAE,QAAA,CAAS,CAAC,CAAC,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,KAAA,CAAM,OAAA,EAAS,KAAK,CAAC,CAAA;AAEzB,EAAA,MAAM,KAAA,GAAQA,aAAA,CAAQ,MAAM,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,OAAA,KAAY,KAAA,CAAM,EAAE,CAAA,EAAG,CAAC,MAAA,EAAQ,KAAA,CAAM,EAAE,CAAC,CAAA;AAGxF,EAAA,MAAM,aAAA,GAAgB,OAAO,KAAA,EAAO,KAAA,KAAU,QAAA,GAAW,KAAA,CAAM,KAAA,GAAQ,CAAC,KAAA,CAAM,KAAA,GAAQ,KAAA,CAAM,YAAA,GAAe,MAAA;AAC3G,EAAA,MAAM,cAAA,GAAiBA,cAAkB,MAAM;AAC7C,IAAA,MAAM,QAAQ,KAAA,EAAO,KAAA;AACrB,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG,OAAO,KAAA;AACjC,IAAA,IAAI,OAAO,KAAA,KAAU,QAAA,EAAU,OAAO,CAAC,KAAK,CAAA;AAC5C,IAAA,OAAO,EAAC;AAAA,EACV,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,uBACEb,eAAA,CAAAc,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,eAAe,KAAA,oBACpBd,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWe,sCAAkB,SAAA,EAChC,QAAA,EAAA;AAAA,sBAAAd,cAAA,CAACe,sBAAA,EAAA,EAAW,SAAA,EAAWD,qCAAA,CAAkB,IAAA,EAAM,CAAA;AAAA,sBAC/Cd,cAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,MAAA;AAAA,UACL,KAAA,EAAO,KAAA;AAAA,UACP,QAAA,EAAU,CAAA,CAAA,KAAK,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,UACtC,WAAA,EAAa,CAAA,OAAA,EAAU,KAAA,CAAM,KAAA,CAAM,aAAa,CAAA,GAAA,CAAA;AAAA,UAChD,WAAWc,qCAAA,CAAkB,KAAA;AAAA,UAC7B,WAAW,CAAA,CAAA,KAAK;AACd,YAAA,IAAI,CAAA,CAAE,QAAQ,WAAA,EAAa;AAC3B,YAAA,MAAM,KAAA,GAAQ,CAAA,CAAE,aAAA,CAAc,OAAA,CAAqB,yBAAyB,CAAA;AAC5E,YAAA,MAAM,KAAA,GAAQ,KAAA,EAAO,aAAA,CAA2B,wCAAwC,CAAA;AACxF,YAAA,IAAI,CAAC,KAAA,EAAO;AACZ,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,YAAA,KAAA,CAAM,KAAA,EAAM;AAAA,UACd;AAAA;AAAA;AACF,KAAA,EACF,CAAA;AAAA,IAGD,KAAA,CAAM,4BACLf,eAAA,CAAC,KAAA,EAAA,EAAI,WAAWQ,WAAA,CAAGS,kCAAA,EAAgB,KAAK,CAAA,EACtC,QAAA,EAAA;AAAA,sBAAAhB,cAAA,CAACiB,eAAA,EAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,SAAA,EAAU,sBAAA,EAAuB,CAAA;AAAA,MAAE;AAAA,KAAA,EAExD,CAAA,GACE,gBAAgB,MAAA,KAAW,CAAA,kCAC5B,KAAA,EAAA,EAAI,SAAA,EAAWV,WAAA,CAAGS,kCAAA,EAAgB,KAAK,CAAA,EAAI,gBAAM,SAAA,IAAa,kBAAA,EAAmB,CAAA,GAChF,KAAA,CAAM,KAAA,mBACRhB,cAAA,CAAC,SAAI,SAAA,EAAU,iCAAA,EACZ,QAAA,EAAA,eAAA,CAAgB,GAAA,CAAI,CAAA,MAAA,KAAU;AAC7B,MAAA,MAAM,OAAA,GAAU,cAAA,CAAe,QAAA,CAAS,MAAA,CAAO,KAAK,CAAA;AACpD,MAAA,uBACEA,cAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UAEC,IAAA,EAAK,UAAA;AAAA,UACL,OAAA;AAAA,UACA,OAAO,MAAA,CAAO,KAAA;AAAA,UACd,SAAS,MACP,QAAA;AAAA,YACE,KAAA,CAAM,EAAA;AAAA,YACN,OAAA,GAAU,cAAA,CAAe,MAAA,CAAO,CAAA,CAAA,KAAK,CAAA,KAAM,MAAA,CAAO,KAAK,CAAA,GAAI,CAAC,GAAG,cAAA,EAAgB,MAAA,CAAO,KAAK;AAAA;AAC7F,SAAA;AAAA,QARG,MAAA,CAAO;AAAA,OAUd;AAAA,IAEJ,CAAC,GACH,CAAA,mBAEAD,eAAA,CAAC,SAAI,IAAA,EAAK,YAAA,EAAa,WAAU,iCAAA,EAC9B,QAAA,EAAA;AAAA,MAAA,eAAA,CAAgB,IAAI,CAAA,MAAA,qBACnBC,cAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UAEC,IAAA,EAAK,OAAA;AAAA,UACL,OAAA,EAAS,kBAAkB,MAAA,CAAO,KAAA;AAAA,UAClC,OAAO,MAAA,CAAO,KAAA;AAAA,UACd,SAAS,MAAM,QAAA,CAAS,KAAA,CAAM,EAAA,EAAI,OAAO,KAAK;AAAA,SAAA;AAAA,QAJzC,MAAA,CAAO;AAAA,OAMf,CAAA;AAAA,MACA,CAAC,MAAM,aAAA,oBACNA,cAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,OAAA;AAAA,UACL,SAAS,aAAA,KAAkB,KAAA;AAAA,UAC3B,KAAA,EAAM,KAAA;AAAA,UACN,OAAA,EAAS,MAAM,QAAA,CAAS,KAAA,CAAM,IAAI,KAAK;AAAA;AAAA;AACzC,KAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;;ACvHA,SAAS,oBAAoB,KAAA,EAA0B;AACrD,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG,OAAO,KAAA,CAAM,MAAA,KAAW,CAAA,GAAI,KAAA,GAAQ,KAAA,CAAM,IAAA,CAAK,IAAI,CAAA;AAC7E,EAAA,OAAO,KAAA;AACT;AAEA,MAAM,sBAAA,GAAyB,uEAAA;AAE/B,SAAS,iBAAA,CAAkB,OAA4B,KAAA,EAAkC;AACvF,EAAA,IAAI,KAAA,CAAM,IAAA,KAAS,YAAA,IAAgB,KAAA,CAAM,OAAA,EAAS;AAChD,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AACxB,MAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,KAAA;AAC/B,MAAA,OAAO,KAAA,CAAM,GAAA,CAAI,CAAA,CAAA,KAAK,KAAA,CAAM,QAAQ,IAAA,CAAK,CAAA,CAAA,KAAK,CAAA,CAAE,KAAA,KAAU,CAAC,CAAA,EAAG,KAAA,IAAS,CAAC,CAAA,CAAE,KAAK,IAAI,CAAA;AAAA,IACrF;AACA,IAAA,OAAO,KAAA,CAAM,QAAQ,IAAA,CAAK,CAAA,CAAA,KAAK,EAAE,KAAA,KAAU,KAAK,GAAG,KAAA,IAAS,KAAA;AAAA,EAC9D;AACA,EAAA,OAAO,oBAAoB,KAAK,CAAA;AAClC;AAQA,SAAS,eAAA,CAAgB,EAAE,KAAA,EAAO,KAAA,EAAO,gBAAe,EAAyB;AAC/E,EAAA,MAAM,OAAA,GAAU,iBAAA,CAAkB,KAAA,EAAO,KAAK,CAAA;AAC9C,EAAA,MAAM,aAAA,GAAgB,CAAA,EAAG,KAAA,CAAM,KAAK,CAAA,4BAAA,CAAA;AAEpC,EAAA,uBACEA,cAAA,CAACkB,uBAAA,EAAA,EAAgB,aAAA,EAAe,GAAA,EAC9B,0CAACC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAnB,cAAA,CAACoB,sBAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAArB,eAAA;AAAA,MAACsB,yBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,wBAAsB,KAAA,CAAM,EAAA;AAAA,QAC5B,2BAAA,EAA0B,QAAA;AAAA,QAC1B,QAAA,EAAU,CAAA;AAAA,QACV,YAAA,EAAY,aAAA;AAAA,QAEZ,QAAA,EAAA;AAAA,0BAAArB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,KAAA,EAAM,CAAA;AAAA,0BACzCtB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAK,QAAA,EAAA,IAAA,EAAE,CAAA;AAAA,0BAC9BtB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,yCACpCA,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EACrB,QAAA,kBAAAtB,cAAA,CAACuB,wBAAS,CAAA,EACZ;AAAA;AAAA;AAAA,KACF,EACF,CAAA;AAAA,oBACAvB,cAAA,CAACwB,0BAAgB,QAAA,EAAA,cAAA,EAAe;AAAA,GAAA,EAClC,CAAA,EACF,CAAA;AAEJ;AAWA,SAAS,aAAA,CAAc,EAAE,KAAA,EAAO,KAAA,EAAO,UAAU,QAAA,EAAU,QAAA,EAAU,WAAU,EAAuB;AAIpG,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIb,eAAS,KAAK,CAAA;AACxC,EAAA,MAAM,QAAA,GAAWc,aAAyB,IAAI,CAAA;AAE9C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAA,CAAM,IAAA,EAAK,KAAM,KAAA,WAAgB,KAAK,CAAA;AAAA,EAE5C,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW,QAAA,CAAS,OAAA,EAAS,KAAA,EAAM;AAAA,EACzC,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE3B,eAAA,CAACsB,yBAAA,EAAA,EAAa,OAAA,EAAQ,OAAA,EACpB,QAAA,EAAA;AAAA,oBAAArB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,KAAA,EAAM,CAAA;AAAA,oBACzCtB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAK,QAAA,EAAA,IAAA,EAAE,CAAA;AAAA,oBAC9BtB,cAAA;AAAA,MAAC2B,WAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK,IAAA;AAAA,QACL,QAAA;AAAA,QACA,KAAA,EAAO,KAAA;AAAA,QACP,WAAA,EAAa,KAAA,CAAM,WAAA,IAAe,CAAA,MAAA,EAAS,MAAM,KAAK,CAAA,CAAA;AAAA,QACtD,UAAU,CAAA,CAAA,KAAK;AACb,UAAA,MAAM,IAAA,GAAO,EAAE,MAAA,CAAO,KAAA;AACtB,UAAA,QAAA,CAAS,IAAI,CAAA;AAGb,UAAA,IAAI,IAAA,CAAK,IAAA,EAAK,KAAM,KAAA,WAAgB,IAAI,CAAA;AAAA,QAC1C,CAAA;AAAA,QACA,WAAW,CAAA,CAAA,KAAK;AACd,UAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,EAAS;AACrB,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,MAAM,OAAA,GAAU,MAAM,IAAA,EAAK;AAC3B,YAAA,IAAI,OAAA,KAAY,KAAA,EAAO,QAAA,CAAS,OAAO,CAAA;AAAA,UACzC,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,QAAA,EAAU;AAC7B,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,QAAA,CAAS,KAAK,CAAA;AACd,YAAC,CAAA,CAAE,OAA4B,IAAA,EAAK;AAAA,UACtC;AAAA,QACF;AAAA;AAAA,KACF;AAAA,oBACA3B,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,QAAA;AAAA,QACA,YAAA,EAAY,CAAA,OAAA,EAAU,KAAA,CAAM,KAAK,CAAA,OAAA,CAAA;AAAA,QACjC,IAAA,EAAK,IAAA;AAAA,QACL,WAAA,EAAa,CAAA,CAAA,KAAK,CAAA,CAAE,cAAA,EAAe;AAAA,QACnC,OAAA,EAAS,QAAA;AAAA,QAET,yCAACC,iBAAA,EAAA,EAAM;AAAA;AAAA;AACT,GAAA,EACF,CAAA;AAEJ;AAWA,SAAS,kBAAA,CAAmB,EAAE,KAAA,EAAO,KAAA,EAAO,QAAQ,QAAA,EAAU,QAAA,EAAU,UAAS,EAA4B;AAC3G,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIS,eAAS,KAAK,CAAA;AAEtC,EAAA,uBACEZ,eAAA,CAACsB,yBAAA,EAAA,EAAa,OAAA,EAAQ,OAAA,EACpB,QAAA,EAAA;AAAA,oBAAArB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,KAAA,EAAM,CAAA;AAAA,oBACzCtB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAK,QAAA,EAAA,IAAA,EAAE,CAAA;AAAA,oBAC9BvB,eAAA,CAAC6B,eAAA,EAAA,EAAQ,IAAA,EAAY,YAAA,EAAc,OAAA,EACjC,QAAA,EAAA;AAAA,sBAAA5B,cAAA,CAAC6B,sBAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAA7B,cAAA,CAACC,iBAAO,IAAA,EAAK,QAAA,EAAS,QAAA,EAAoB,IAAA,EAAK,IAAA,EAC5C,QAAA,EAAA,mBAAA,CAAoB,KAAA,CAAM,KAAK,GAClC,CAAA,EACF,CAAA;AAAA,sBACAD,cAAA,CAAC8B,sBAAA,EAAA,EAAe,KAAA,EAAM,OAAA,EAAQ,YAAYC,oCAAA,EAAkB,SAAA,EAAU,UAAA,EAAW,uBAAA,EAAqB,MACpG,QAAA,kBAAA/B,cAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAc,MAAA,EAAgB,UAAoB,CAAA,EACpE;AAAA,KAAA,EACF,CAAA;AAAA,oBACAA,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,QAAA;AAAA,QACA,YAAA,EAAY,CAAA,OAAA,EAAU,KAAA,CAAM,KAAK,CAAA,OAAA,CAAA;AAAA,QACjC,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAS,QAAA;AAAA,QAET,yCAACC,iBAAA,EAAA,EAAM;AAAA;AAAA;AACT,GAAA,EACF,CAAA;AAEJ;AAUO,SAAS,qBAAA,CAAsB;AAAA,EACpC,MAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,oBAAA,GAAuB;AACzB,CAAA,EAA+B;AAC7B,EAAA,IAAI,MAAA,CAAO,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAEhC,EAAA,MAAM,SAAA,GAAY,IAAI,GAAA,CAAI,cAAA,IAAkB,EAAE,CAAA;AAE9C,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAe,IAAA,KAA8B;AACnE,IAAA,MAAM,IAAA,GAAO,CAAC,GAAG,MAAM,CAAA;AACvB,IAAA,IAAA,CAAK,KAAK,CAAA,GAAI,IAAA;AACd,IAAA,cAAA,CAAe,IAAI,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAkB;AACvC,IAAA,cAAA,CAAe,OAAO,MAAA,CAAO,CAAC,GAAG,CAAA,KAAM,CAAA,KAAM,KAAK,CAAC,CAAA;AAAA,EACrD,CAAA;AAEA,EAAA,uBACEF,cAAA,CAAC,SAAI,SAAA,EAAU,mCAAA,EACZ,iBAAO,GAAA,CAAI,CAAC,OAAO,KAAA,KAAU;AAC5B,IAAA,MAAM,QAAQ,MAAA,CAAO,IAAA,CAAK,OAAK,CAAA,CAAE,EAAA,KAAO,MAAM,OAAO,CAAA;AACrD,IAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AAEnB,IAAA,IAAI,SAAA,CAAU,GAAA,CAAI,KAAA,CAAM,OAAO,CAAA,EAAG;AAChC,MAAA,uBACEA,cAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UAEC,KAAA;AAAA,UACA,OAAO,KAAA,CAAM,KAAA;AAAA,UACb,cAAA,EAAgB;AAAA,SAAA;AAAA,QAHX,CAAA,EAAG,KAAA,CAAM,OAAO,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,OAIhC;AAAA,IAEJ;AAEA,IAAA,IAAI,MAAM,IAAA,KAAS,MAAA,IAAU,OAAO,KAAA,CAAM,UAAU,QAAA,EAAU;AAC5D,MAAA,uBACEA,cAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UAEC,KAAA;AAAA,UACA,OAAO,KAAA,CAAM,KAAA;AAAA,UACb,QAAA;AAAA,UACA,SAAA,EAAW,qBAAqB,KAAA,CAAM,OAAA;AAAA,UACtC,QAAA,EAAU,CAAA,SAAA,KAAa,cAAA,CAAe,KAAA,EAAO,EAAE,SAAS,KAAA,CAAM,OAAA,EAAS,KAAA,EAAO,SAAA,EAAW,CAAA;AAAA,UACzF,QAAA,EAAU,MAAM,aAAA,CAAc,KAAK;AAAA,SAAA;AAAA,QAN9B,CAAA,EAAG,KAAA,CAAM,OAAO,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,OAOhC;AAAA,IAEJ;AAEA,IAAA,IAAI,KAAA,CAAM,SAAS,YAAA,EAAc;AAC/B,MAAA,uBACEA,cAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UAEC,KAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UAIA,QAAA,EAAU,CAAC,OAAA,EAAS,KAAA,KAAU,eAAe,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,CAAA;AAAA,UACtE,QAAA,EAAU,MAAM,aAAA,CAAc,KAAK;AAAA,SAAA;AAAA,QAT9B,CAAA,EAAG,KAAA,CAAM,OAAO,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,OAUhC;AAAA,IAEJ;AAEA,IAAA,uBACED,eAAA,CAACsB,yBAAA,EAAA,EAAa,OAAA,EAAQ,OAAA,EACpB,QAAA,EAAA;AAAA,sBAAArB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,KAAA,EAAM,CAAA;AAAA,sBACzCtB,cAAA,CAACsB,6BAAA,EAAA,EAAiB,IAAA,EAAK,IAAA,EAAK,QAAA,EAAA,IAAA,EAAE,CAAA;AAAA,qCAC7BA,6BAAA,EAAA,EAAiB,IAAA,EAAK,MAAM,QAAA,EAAA,mBAAA,CAAoB,KAAA,CAAM,KAAK,CAAA,EAAE,CAAA;AAAA,sBAC9DtB,cAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,QAAA;AAAA,UACA,IAAA,EAAK,IAAA;AAAA,UACL,YAAA,EAAY,CAAA,OAAA,EAAU,KAAA,CAAM,KAAK,CAAA,OAAA,CAAA;AAAA,UACjC,OAAA,EAAS,MAAM,aAAA,CAAc,KAAK,CAAA;AAAA,UAElC,yCAACC,iBAAA,EAAA,EAAM;AAAA;AAAA;AACT,KAAA,EAAA,EAZiC,CAAA,EAAG,KAAA,CAAM,OAAO,CAAA,CAAA,EAAI,KAAK,CAAA,CAa5D,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;;;"}

package/dist/resize/collapsible-panel.cjs.js

@@ -7,11 +7,11 @@ const React = require('react');
 const reactResizablePanels = require('react-resizable-panels');
 const resize_panelEdgeIcon = require('./panel-edge-icon.cjs.js');
 const resize_panelIconButton = require('./panel-icon-button.cjs.js');
-const kbd = require('../kbd-BaoBQUlL.cjs');
-const tooltip = require('../tooltip-BsSNtmxl.cjs');
+const kbd = require('../kbd-DjjBBIZN.cjs');
+const tooltip = require('../tooltip-_cda-a7s.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
 require('lucide-react');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 const CollapsiblePanel = ({
   collapsedSize,

package/dist/resize/collapsible-panel.es.js

@@ -3,11 +3,11 @@ import { useState, useRef, useImperativeHandle } from 'react';
 import { usePanelRef, Panel } from 'react-resizable-panels';
 import { PanelEdgeIcon } from './panel-edge-icon.es.js';
 import { panelIconButtonClass } from './panel-icon-button.es.js';
-import { K as Kbd } from '../kbd-Bod0H0VQ.js';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-Vj_jjcxE.js';
+import { K as Kbd } from '../kbd-H5Qu573u.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-QuS0KEbc.js';
 import { Icon } from '../icons/Icon.es.js';
 import 'lucide-react';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 const CollapsiblePanel = ({
   collapsedSize,

package/dist/resize/panel-drawer.cjs.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const resize_panelEdgeIcon = require('./panel-edge-icon.cjs.js');
 const resize_panelIconButton = require('./panel-icon-button.cjs.js');
-const drawer = require('../drawer-Bq7j_MiM.cjs');
+const drawer = require('../drawer-CEufBgtb.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
 require('lucide-react');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 const PanelDrawer = ({ direction, label, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(drawer.Drawer, { side: direction, children: [

package/dist/resize/panel-drawer.es.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { PanelEdgeIcon } from './panel-edge-icon.es.js';
 import { panelIconButtonClass } from './panel-icon-button.es.js';
-import { D as Drawer, p as DrawerTrigger, l as DrawerPortal, a as DrawerBackdrop, q as DrawerViewport, k as DrawerPopup, o as DrawerTitle } from '../drawer-D1m2faHU.js';
+import { D as Drawer, p as DrawerTrigger, l as DrawerPortal, a as DrawerBackdrop, q as DrawerViewport, k as DrawerPopup, o as DrawerTitle } from '../drawer-DgGxK4oq.js';
 import { Icon } from '../icons/Icon.es.js';
 import 'lucide-react';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 const PanelDrawer = ({ direction, label, children }) => {
   return /* @__PURE__ */ jsxs(Drawer, { side: direction, children: [

package/dist/resize/panel-group.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../panel-group.css');const jsxRuntime = require('react/jsx-runtime');
 const reactResizablePanels = require('react-resizable-panels');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 function PanelGroup({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Group, { className: utils_cn.cn("panel-group-resize-transition", className), ...props });

package/dist/resize/panel-group.es.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Group } from 'react-resizable-panels';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 import '../panel-group.css';function PanelGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(Group, { className: cn("panel-group-resize-transition", className), ...props });

package/dist/resize/panel-icon-button.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 const panelIconButtonClass = utils_cn.cn(
   "flex size-8 cursor-pointer items-center justify-center rounded-full",

package/dist/resize/panel-icon-button.es.js

@@ -1,4 +1,4 @@
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 const panelIconButtonClass = cn(
   "flex size-8 cursor-pointer items-center justify-center rounded-full",

package/dist/resize/separator.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const reactResizablePanels = require('react-resizable-panels');
 const primitives_resizeHandleIndicator = require('../primitives/resize-handle-indicator.cjs.js');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 const stateClasses = {
   line: utils_cn.cn(
@@ -21,13 +21,15 @@ const stateClasses = {
     "group-focus-visible/separator:bg-accent1"
   )
 };
-const PanelSeparator = ({ variant = "line" }) => {
+const PanelSeparator = ({ variant = "line", className, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactResizablePanels.Separator,
     {
+      ...props,
       className: utils_cn.cn(
         "group/separator relative z-10 w-0 bg-transparent",
-        "focus:outline-hidden focus-visible:outline-hidden"
+        "focus:outline-hidden focus-visible:outline-hidden",
+        className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",

package/dist/resize/separator.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.cjs.js","sources":["../../src/lib/resize/separator.tsx"],"sourcesContent":["import { Separator } from 'react-resizable-panels';\nimport { ResizeHandleIndicator } from '@/ds/primitives/resize-handle-indicator';\nimport { cn } from '@/lib/utils';\n\nexport type PanelSeparatorProps = {\n  /** `line` fits a visible container edge; `pill` floats when there is none. */\n  variant?: 'line' | 'pill';\n};\n\nconst stateClasses = {\n  line: cn(\n    'group-hover/separator:opacity-100',\n    \"group-data-[separator='hover']/separator:opacity-100\",\n    \"group-data-[separator='active']/separator:via-neutral6/45 group-data-[separator='active']/separator:opacity-100\",\n    'group-focus-visible/separator:via-accent1 group-focus-visible/separator:opacity-100',\n  ),\n  pill: cn(\n    'group-hover/separator:h-12 group-hover/separator:w-1',\n    \"group-data-[separator='hover']/separator:h-12 group-data-[separator='hover']/separator:w-1\",\n    \"group-data-[separator='active']/separator:h-12 group-data-[separator='active']/separator:w-1 group-data-[separator='active']/separator:bg-accent1\",\n    'group-focus-visible/separator:bg-accent1',\n  ),\n};\n\nexport const PanelSeparator = ({ variant = 'line' }: PanelSeparatorProps) => {\n  return (\n    <Separator\n      className={cn(\n        'group/separator relative z-10 w-0 bg-transparent',\n        'focus:outline-hidden focus-visible:outline-hidden',\n      )}\n    >\n      {/* Hit zone wider than the 0px separator; indicator centered inside. */}\n      <span\n        aria-hidden\n        className=\"absolute -inset-x-1 inset-y-0 flex cursor-col-resize touch-none items-center justify-center\"\n      >\n        <ResizeHandleIndicator variant={variant} className={stateClasses[variant]} />\n      </span>\n    </Separator>\n  );\n};\n"],"names":["cn","jsx","Separator","ResizeHandleIndicator"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAMA,WAAA;AAAA,IACJ,mCAAA;AAAA,IACA,sDAAA;AAAA,IACA,iHAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,IAAA,EAAMA,WAAA;AAAA,IACJ,sDAAA;AAAA,IACA,4FAAA;AAAA,IACA,mJAAA;AAAA,IACA;AAAA;AAEJ,CAAA;AAEO,MAAM,cAAA,GAAiB,CAAC,EAAE,OAAA,GAAU,QAAO,KAA2B;AAC3E,EAAA,uBACEC,cAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWF,WAAA;AAAA,QACT,kDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAGA,QAAA,kBAAAC,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAW,IAAA;AAAA,UACX,SAAA,EAAU,6FAAA;AAAA,UAEV,yCAACE,sDAAA,EAAA,EAAsB,OAAA,EAAkB,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA;AAAA;AAC7E;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"separator.cjs.js","sources":["../../src/lib/resize/separator.tsx"],"sourcesContent":["import { Separator } from 'react-resizable-panels';\nimport type { SeparatorProps } from 'react-resizable-panels';\nimport { ResizeHandleIndicator } from '@/ds/primitives/resize-handle-indicator';\nimport { cn } from '@/lib/utils';\n\nexport type PanelSeparatorProps = Omit<SeparatorProps, 'children'> & {\n  variant?: 'line' | 'pill';\n};\n\nconst stateClasses = {\n  line: cn(\n    'group-hover/separator:opacity-100',\n    \"group-data-[separator='hover']/separator:opacity-100\",\n    \"group-data-[separator='active']/separator:via-neutral6/45 group-data-[separator='active']/separator:opacity-100\",\n    'group-focus-visible/separator:via-accent1 group-focus-visible/separator:opacity-100',\n  ),\n  pill: cn(\n    'group-hover/separator:h-12 group-hover/separator:w-1',\n    \"group-data-[separator='hover']/separator:h-12 group-data-[separator='hover']/separator:w-1\",\n    \"group-data-[separator='active']/separator:h-12 group-data-[separator='active']/separator:w-1 group-data-[separator='active']/separator:bg-accent1\",\n    'group-focus-visible/separator:bg-accent1',\n  ),\n};\n\nexport const PanelSeparator = ({ variant = 'line', className, ...props }: PanelSeparatorProps) => {\n  return (\n    <Separator\n      {...props}\n      className={cn(\n        'group/separator relative z-10 w-0 bg-transparent',\n        'focus:outline-hidden focus-visible:outline-hidden',\n        className,\n      )}\n    >\n      <span\n        aria-hidden\n        className=\"absolute -inset-x-1 inset-y-0 flex cursor-col-resize touch-none items-center justify-center\"\n      >\n        <ResizeHandleIndicator variant={variant} className={stateClasses[variant]} />\n      </span>\n    </Separator>\n  );\n};\n"],"names":["cn","jsx","Separator","ResizeHandleIndicator"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAMA,WAAA;AAAA,IACJ,mCAAA;AAAA,IACA,sDAAA;AAAA,IACA,iHAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,IAAA,EAAMA,WAAA;AAAA,IACJ,sDAAA;AAAA,IACA,4FAAA;AAAA,IACA,mJAAA;AAAA,IACA;AAAA;AAEJ,CAAA;AAEO,MAAM,cAAA,GAAiB,CAAC,EAAE,OAAA,GAAU,QAAQ,SAAA,EAAW,GAAG,OAAM,KAA2B;AAChG,EAAA,uBACEC,cAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWF,WAAA;AAAA,QACT,kDAAA;AAAA,QACA,mDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAAC,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAW,IAAA;AAAA,UACX,SAAA,EAAU,6FAAA;AAAA,UAEV,yCAACE,sDAAA,EAAA,EAAsB,OAAA,EAAkB,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA;AAAA;AAC7E;AAAA,GACF;AAEJ;;;;"}

package/dist/resize/separator.es.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Separator } from 'react-resizable-panels';
 import { ResizeHandleIndicator } from '../primitives/resize-handle-indicator.es.js';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 const stateClasses = {
   line: cn(
@@ -17,13 +17,15 @@ const stateClasses = {
     "group-focus-visible/separator:bg-accent1"
   )
 };
-const PanelSeparator = ({ variant = "line" }) => {
+const PanelSeparator = ({ variant = "line", className, ...props }) => {
   return /* @__PURE__ */ jsx(
     Separator,
     {
+      ...props,
       className: cn(
         "group/separator relative z-10 w-0 bg-transparent",
-        "focus:outline-hidden focus-visible:outline-hidden"
+        "focus:outline-hidden focus-visible:outline-hidden",
+        className
       ),
       children: /* @__PURE__ */ jsx(
         "span",

package/dist/resize/separator.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.es.js","sources":["../../src/lib/resize/separator.tsx"],"sourcesContent":["import { Separator } from 'react-resizable-panels';\nimport { ResizeHandleIndicator } from '@/ds/primitives/resize-handle-indicator';\nimport { cn } from '@/lib/utils';\n\nexport type PanelSeparatorProps = {\n  /** `line` fits a visible container edge; `pill` floats when there is none. */\n  variant?: 'line' | 'pill';\n};\n\nconst stateClasses = {\n  line: cn(\n    'group-hover/separator:opacity-100',\n    \"group-data-[separator='hover']/separator:opacity-100\",\n    \"group-data-[separator='active']/separator:via-neutral6/45 group-data-[separator='active']/separator:opacity-100\",\n    'group-focus-visible/separator:via-accent1 group-focus-visible/separator:opacity-100',\n  ),\n  pill: cn(\n    'group-hover/separator:h-12 group-hover/separator:w-1',\n    \"group-data-[separator='hover']/separator:h-12 group-data-[separator='hover']/separator:w-1\",\n    \"group-data-[separator='active']/separator:h-12 group-data-[separator='active']/separator:w-1 group-data-[separator='active']/separator:bg-accent1\",\n    'group-focus-visible/separator:bg-accent1',\n  ),\n};\n\nexport const PanelSeparator = ({ variant = 'line' }: PanelSeparatorProps) => {\n  return (\n    <Separator\n      className={cn(\n        'group/separator relative z-10 w-0 bg-transparent',\n        'focus:outline-hidden focus-visible:outline-hidden',\n      )}\n    >\n      {/* Hit zone wider than the 0px separator; indicator centered inside. */}\n      <span\n        aria-hidden\n        className=\"absolute -inset-x-1 inset-y-0 flex cursor-col-resize touch-none items-center justify-center\"\n      >\n        <ResizeHandleIndicator variant={variant} className={stateClasses[variant]} />\n      </span>\n    </Separator>\n  );\n};\n"],"names":[],"mappings":";;;;;AASA,MAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,EAAA;AAAA,IACJ,mCAAA;AAAA,IACA,sDAAA;AAAA,IACA,iHAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,IAAA,EAAM,EAAA;AAAA,IACJ,sDAAA;AAAA,IACA,4FAAA;AAAA,IACA,mJAAA;AAAA,IACA;AAAA;AAEJ,CAAA;AAEO,MAAM,cAAA,GAAiB,CAAC,EAAE,OAAA,GAAU,QAAO,KAA2B;AAC3E,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,kDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAGA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAW,IAAA;AAAA,UACX,SAAA,EAAU,6FAAA;AAAA,UAEV,8BAAC,qBAAA,EAAA,EAAsB,OAAA,EAAkB,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA;AAAA;AAC7E;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"separator.es.js","sources":["../../src/lib/resize/separator.tsx"],"sourcesContent":["import { Separator } from 'react-resizable-panels';\nimport type { SeparatorProps } from 'react-resizable-panels';\nimport { ResizeHandleIndicator } from '@/ds/primitives/resize-handle-indicator';\nimport { cn } from '@/lib/utils';\n\nexport type PanelSeparatorProps = Omit<SeparatorProps, 'children'> & {\n  variant?: 'line' | 'pill';\n};\n\nconst stateClasses = {\n  line: cn(\n    'group-hover/separator:opacity-100',\n    \"group-data-[separator='hover']/separator:opacity-100\",\n    \"group-data-[separator='active']/separator:via-neutral6/45 group-data-[separator='active']/separator:opacity-100\",\n    'group-focus-visible/separator:via-accent1 group-focus-visible/separator:opacity-100',\n  ),\n  pill: cn(\n    'group-hover/separator:h-12 group-hover/separator:w-1',\n    \"group-data-[separator='hover']/separator:h-12 group-data-[separator='hover']/separator:w-1\",\n    \"group-data-[separator='active']/separator:h-12 group-data-[separator='active']/separator:w-1 group-data-[separator='active']/separator:bg-accent1\",\n    'group-focus-visible/separator:bg-accent1',\n  ),\n};\n\nexport const PanelSeparator = ({ variant = 'line', className, ...props }: PanelSeparatorProps) => {\n  return (\n    <Separator\n      {...props}\n      className={cn(\n        'group/separator relative z-10 w-0 bg-transparent',\n        'focus:outline-hidden focus-visible:outline-hidden',\n        className,\n      )}\n    >\n      <span\n        aria-hidden\n        className=\"absolute -inset-x-1 inset-y-0 flex cursor-col-resize touch-none items-center justify-center\"\n      >\n        <ResizeHandleIndicator variant={variant} className={stateClasses[variant]} />\n      </span>\n    </Separator>\n  );\n};\n"],"names":[],"mappings":";;;;;AASA,MAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,EAAA;AAAA,IACJ,mCAAA;AAAA,IACA,sDAAA;AAAA,IACA,iHAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,IAAA,EAAM,EAAA;AAAA,IACJ,sDAAA;AAAA,IACA,4FAAA;AAAA,IACA,mJAAA;AAAA,IACA;AAAA;AAEJ,CAAA;AAEO,MAAM,cAAA,GAAiB,CAAC,EAAE,OAAA,GAAU,QAAQ,SAAA,EAAW,GAAG,OAAM,KAA2B;AAChG,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,kDAAA;AAAA,QACA,mDAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAW,IAAA;AAAA,UACX,SAAA,EAAU,6FAAA;AAAA,UAEV,8BAAC,qBAAA,EAAA,EAAsB,OAAA,EAAkB,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA;AAAA;AAC7E;AAAA,GACF;AAEJ;;;;"}