@flanksource/clicky-ui 0.3.17 → 0.3.18

package/dist/ai.cjs

@@ -11,16 +11,18 @@ const index = require("./data/ai/examples/sessions/index.cjs");
 const ChatFab = require("./data/ai/ChatFab.cjs");
 const ChatWindow = require("./data/ai/ChatWindow.cjs");
 const ChatWindowManager = require("./data/ai/ChatWindowManager.cjs");
-const ToolPreferences = require("./data/ai/ToolPreferences.cjs");
+const ToolPreferencesList = require("./data/ai/ToolPreferencesList.cjs");
 const ContextBadges = require("./data/ai/ContextBadges.cjs");
 const ContextMeter = require("./data/chat/ContextMeter.cjs");
 const PromptPicker = require("./data/ai/PromptPicker/PromptPicker.cjs");
 const index$1 = require("./data/ai/PromptRunEditor/index.cjs");
 const PromptSourceRepair = require("./data/ai/PromptPicker/PromptSourceRepair.cjs");
-const RuntimeBar = require("./data/ai/RuntimeBar.cjs");
+const ProviderStatusPanel = require("./data/runtime/ProviderStatusPanel.cjs");
+const RuntimeBar = require("./data/runtime/RuntimeBar.cjs");
 const RuntimeModePicker = require("./data/ai/RuntimeModePicker.cjs");
+const sessionTones = require("./data/ai/session-tones.cjs");
 const SpecRuntimeEditor_model = require("./data/ai/SpecRuntimeEditor.model.cjs");
-const runtimeMode = require("./data/ai/runtime-mode.cjs");
+const runtimeMode = require("./data/runtime/runtime-mode.cjs");
 const ToolSchemaBrowser = require("./data/ai/ToolSchemaBrowser.cjs");
 const SessionChatComposer = require("./data/ai/SessionChatComposer.cjs");
 const SessionViewer_header = require("./data/ai/SessionViewer.header.cjs");
@@ -28,9 +30,10 @@ const SessionInspector = require("./data/ai/SessionInspector.cjs");
 const SessionViewer = require("./data/ai/SessionViewer.cjs");
 const index$2 = require("./data/ai/SpecRuntimeEditor/index.cjs");
 const ThreadPicker = require("./data/ai/ThreadPicker.cjs");
+const ToolPreferences = require("./data/ai/ToolPreferences.cjs");
 const tokens = require("./lib/tokens.cjs");
 const sessionCost = require("./data/ai/session-cost.cjs");
-const modelCapabilities = require("./data/ai/model-capabilities.cjs");
+const modelCapabilities = require("./data/runtime/model-capabilities.cjs");
 const SessionViewer_model = require("./data/ai/SessionViewer.model.cjs");
 const types$1 = require("./data/ai/PromptPicker/types.cjs");
 const context = require("./data/ai/context.cjs");
@@ -62,8 +65,7 @@ exports.ChatFab = ChatFab.ChatFab;
 exports.ChatWindow = ChatWindow.ChatWindow;
 exports.ChatWindowLayer = ChatWindow.ChatWindowLayer;
 exports.ChatWindowManagerProvider = ChatWindowManager.ChatWindowManagerProvider;
-exports.CompactToolPreferencesList = ToolPreferences.CompactToolPreferencesList;
-exports.ToolPreferences = ToolPreferences.ToolPreferences;
+exports.CompactToolPreferencesList = ToolPreferencesList.CompactToolPreferencesList;
 exports.ContextBadges = ContextBadges.ContextBadges;
 exports.ContextBadgesReadonly = ContextBadges.ContextBadgesReadonly;
 exports.ContextMeter = ContextMeter.ContextMeter;
@@ -71,8 +73,11 @@ exports.PromptPickerField = PromptPicker.PromptPickerField;
 exports.SpecEditorDialog = PromptPicker.SpecEditorDialog;
 exports.PromptRunEditor = index$1.PromptRunEditor;
 exports.PromptSourceRepair = PromptSourceRepair.PromptSourceRepair;
+exports.ProviderStatusPanel = ProviderStatusPanel.ProviderStatusPanel;
 exports.RuntimeBar = RuntimeBar.RuntimeBar;
 exports.RuntimeModePicker = RuntimeModePicker.RuntimeModePicker;
+exports.SESSION_TONES = sessionTones.SESSION_TONES;
+exports.sessionTone = sessionTones.sessionTone;
 exports.SPEC_CHECKOUT_MODES = SpecRuntimeEditor_model.SPEC_CHECKOUT_MODES;
 exports.SPEC_COMMIT_CONDITIONS = SpecRuntimeEditor_model.SPEC_COMMIT_CONDITIONS;
 exports.SPEC_COMMIT_GATES = SpecRuntimeEditor_model.SPEC_COMMIT_GATES;
@@ -108,6 +113,7 @@ exports.SessionInspector = SessionInspector.SessionInspector;
 exports.SessionViewer = SessionViewer.SessionViewer;
 exports.SpecRuntimeEditor = index$2.SpecRuntimeEditor;
 exports.ThreadPicker = ThreadPicker.ThreadPicker;
+exports.ToolPreferences = ToolPreferences.ToolPreferences;
 exports.compactTokens = tokens.compactTokens;
 exports.formatCost = tokens.formatCost;
 exports.costTotal = sessionCost.costTotal;

package/dist/ai.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ai.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ai.js

@@ -9,16 +9,18 @@ import { COMPLETE_EXAMPLE_SESSIONS, EXAMPLE_SESSIONS } from "./data/ai/examples/
 import { ChatFab } from "./data/ai/ChatFab.js";
 import { ChatWindow, ChatWindowLayer } from "./data/ai/ChatWindow.js";
 import { ChatWindowManagerProvider } from "./data/ai/ChatWindowManager.js";
-import { CompactToolPreferencesList, ToolPreferences } from "./data/ai/ToolPreferences.js";
+import { CompactToolPreferencesList } from "./data/ai/ToolPreferencesList.js";
 import { ContextBadges, ContextBadgesReadonly } from "./data/ai/ContextBadges.js";
 import { ContextMeter } from "./data/chat/ContextMeter.js";
 import { PromptPickerField, SpecEditorDialog } from "./data/ai/PromptPicker/PromptPicker.js";
 import { PromptRunEditor } from "./data/ai/PromptRunEditor/index.js";
 import { PromptSourceRepair } from "./data/ai/PromptPicker/PromptSourceRepair.js";
-import { RuntimeBar } from "./data/ai/RuntimeBar.js";
+import { ProviderStatusPanel } from "./data/runtime/ProviderStatusPanel.js";
+import { RuntimeBar } from "./data/runtime/RuntimeBar.js";
 import { RuntimeModePicker } from "./data/ai/RuntimeModePicker.js";
+import { SESSION_TONES, sessionTone } from "./data/ai/session-tones.js";
 import { SPEC_CHECKOUT_MODES, SPEC_COMMIT_CONDITIONS, SPEC_COMMIT_GATES, SPEC_COMMIT_MODES, SPEC_COMMIT_PHASES, SPEC_COMMIT_STAGES, SPEC_PERMISSION_MODES, SPEC_SCHEMA_STRICTNESS, SPEC_STASH_MODES, SPEC_VERIFY_SCOPES, SPEC_WORKTREE_MODES, buildAISpecRuntimePayload, compactAISpecRuntime, normalizeMCPPermissions, normalizeResourcePolicies, normalizeToolPolicies } from "./data/ai/SpecRuntimeEditor.model.js";
-import { SPEC_RUNTIME_FAMILIES, backendForFamilyMode, familiesFromRuntimeCatalog, familyById, familyForBackend, labelForBackend, modeForBackend, modelBelongsToFamily, modelsForFamily, runtimeModeOptions, selectionForBackend } from "./data/ai/runtime-mode.js";
+import { SPEC_RUNTIME_FAMILIES, backendForFamilyMode, familiesFromRuntimeCatalog, familyById, familyForBackend, labelForBackend, modeForBackend, modelBelongsToFamily, modelsForFamily, runtimeModeOptions, selectionForBackend } from "./data/runtime/runtime-mode.js";
 import { ToolSchemaBrowser, ToolSchemaBrowser as ToolSchemaBrowser2 } from "./data/ai/ToolSchemaBrowser.js";
 import { SessionChatComposer } from "./data/ai/SessionChatComposer.js";
 import { SessionContextMeter } from "./data/ai/SessionViewer.header.js";
@@ -26,9 +28,10 @@ import { SessionInspector } from "./data/ai/SessionInspector.js";
 import { SessionViewer } from "./data/ai/SessionViewer.js";
 import { SpecRuntimeEditor } from "./data/ai/SpecRuntimeEditor/index.js";
 import { ThreadPicker } from "./data/ai/ThreadPicker.js";
+import { ToolPreferences } from "./data/ai/ToolPreferences.js";
 import { compactTokens, formatCost } from "./lib/tokens.js";
 import { costTotal, tokenTotal } from "./data/ai/session-cost.js";
-import { effortOptionsForModel, reconcileModelCapabilities } from "./data/ai/model-capabilities.js";
+import { effortOptionsForModel, reconcileModelCapabilities } from "./data/runtime/model-capabilities.js";
 import { getSessionAction, getSessionMetadata, normalizeMessages, normalizeSession, splitMcpTool, summarizeSession } from "./data/ai/SessionViewer.model.js";
 import { isValidPromptSpecDetail } from "./data/ai/PromptPicker/types.js";
 import { makeContextId, parseContextPrefix, serializeContext } from "./data/ai/context.js";
@@ -61,8 +64,10 @@ export {
   PromptPickerField,
   PromptRunEditor,
   PromptSourceRepair,
+  ProviderStatusPanel,
   RuntimeBar,
   RuntimeModePicker,
+  SESSION_TONES,
   SPEC_CHECKOUT_MODES,
   SPEC_COMMIT_CONDITIONS,
   SPEC_COMMIT_GATES,
@@ -124,6 +129,7 @@ export {
   runtimeModeOptions,
   selectionForBackend,
   serializeContext,
+  sessionTone,
   specToPromptRuntimeValue,
   splitMcpTool,
   summarizeSession,

package/dist/ai.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chat.cjs

@@ -12,10 +12,23 @@ const Message = require("./data/chat/Message.cjs");
 const MessageActions = require("./data/chat/MessageActions.cjs");
 const PromptInput = require("./data/chat/PromptInput.cjs");
 const Reasoning = require("./data/chat/Reasoning.cjs");
+const RuntimeBar = require("./data/runtime/RuntimeBar.cjs");
 const Suggestion = require("./data/chat/Suggestion.cjs");
+const ToolArgs = require("./data/chat/tool-render/ToolArgs.cjs");
 const ToolCall = require("./data/chat/ToolCall.cjs");
+const ToolParams = require("./data/chat/tool-render/ToolParams.cjs");
+const adapter = require("./data/chat/tool-render/adapter.cjs");
+const context = require("./data/chat/tool-render/context.cjs");
+const ToolValue = require("./data/chat/tool-render/ToolValue.cjs");
+const shape = require("./data/chat/tool-render/shape.cjs");
 const clickyOperationsToTools = require("./data/chat/clickyOperationsToTools.cjs");
+const registry = require("./data/chat/tool-render/registry.cjs");
 const models = require("./data/chat/models.cjs");
+const defaults = require("./data/chat/tool-render/defaults.cjs");
+const summary = require("./data/chat/tool-render/summary.cjs");
+const schema = require("./data/chat/tool-render/schema.cjs");
+const knownTools = require("./data/chat/tool-render/known-tools.cjs");
+const normalize = require("./data/chat/tool-render/normalize.cjs");
 const providerIcons = require("./data/chat/provider-icons.cjs");
 exports.AttachmentButton = Attachment.AttachmentButton;
 exports.AttachmentList = Attachment.AttachmentList;
@@ -43,11 +56,34 @@ exports.Message = Message.Message;
 exports.MessageActions = MessageActions.MessageActions;
 exports.PromptInput = PromptInput.PromptInput;
 exports.Reasoning = Reasoning.Reasoning;
+exports.RuntimeBar = RuntimeBar.RuntimeBar;
 exports.Suggestions = Suggestion.Suggestions;
+exports.ToolArgs = ToolArgs.ToolArgs;
 exports.ToolCall = ToolCall.ToolCall;
+exports.ToolFieldValue = ToolParams.ToolFieldValue;
+exports.ToolParams = ToolParams.ToolParams;
+exports.ToolRenderRegistry = adapter.ToolRenderRegistry;
+exports.toolNameAdapter = adapter.toolNameAdapter;
+exports.ToolRenderRegistryProvider = context.ToolRenderRegistryProvider;
+exports.useToolRenderRegistry = context.useToolRenderRegistry;
+exports.ToolValue = ToolValue.ToolValue;
+exports.classifyToolValue = shape.classifyToolValue;
+exports.deriveColumns = shape.deriveColumns;
 exports.clickyOperationsToTools = clickyOperationsToTools.clickyOperationsToTools;
 exports.operationToTool = clickyOperationsToTools.operationToTool;
+exports.createToolRenderRegistry = registry.createToolRenderRegistry;
+exports.toToolRenderRegistry = registry.toToolRenderRegistry;
 exports.defaultChatModelId = models.defaultChatModelId;
+exports.defaultToolInputView = defaults.defaultToolInputView;
+exports.defaultToolOutputView = defaults.defaultToolOutputView;
+exports.defaultToolRenderAdapters = defaults.defaultToolRenderAdapters;
+exports.defaultToolSummary = summary.defaultToolSummary;
+exports.summarizeToolValue = summary.summarizeToolValue;
+exports.fieldMetaFromSchema = schema.fieldMetaFromSchema;
+exports.listItemsSchema = schema.listItemsSchema;
+exports.orderFieldKeys = schema.orderFieldKeys;
+exports.knownToolRenderAdapters = knownTools.knownToolRenderAdapters;
+exports.normalizeToolOutput = normalize.normalizeToolOutput;
 exports.providerIcon = providerIcons.providerIcon;
 exports.providerIconColor = providerIcons.providerIconColor;
 //# sourceMappingURL=chat.cjs.map

package/dist/chat.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"chat.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chat.js

@@ -10,10 +10,23 @@ import { Message } from "./data/chat/Message.js";
 import { MessageActions } from "./data/chat/MessageActions.js";
 import { PromptInput } from "./data/chat/PromptInput.js";
 import { Reasoning } from "./data/chat/Reasoning.js";
+import { RuntimeBar } from "./data/runtime/RuntimeBar.js";
 import { Suggestions } from "./data/chat/Suggestion.js";
+import { ToolArgs } from "./data/chat/tool-render/ToolArgs.js";
 import { ToolCall } from "./data/chat/ToolCall.js";
+import { ToolFieldValue, ToolParams } from "./data/chat/tool-render/ToolParams.js";
+import { ToolRenderRegistry, toolNameAdapter } from "./data/chat/tool-render/adapter.js";
+import { ToolRenderRegistryProvider, useToolRenderRegistry } from "./data/chat/tool-render/context.js";
+import { ToolValue } from "./data/chat/tool-render/ToolValue.js";
+import { classifyToolValue, deriveColumns } from "./data/chat/tool-render/shape.js";
 import { clickyOperationsToTools, operationToTool } from "./data/chat/clickyOperationsToTools.js";
+import { createToolRenderRegistry, toToolRenderRegistry } from "./data/chat/tool-render/registry.js";
 import { defaultChatModelId } from "./data/chat/models.js";
+import { defaultToolInputView, defaultToolOutputView, defaultToolRenderAdapters } from "./data/chat/tool-render/defaults.js";
+import { defaultToolSummary, summarizeToolValue } from "./data/chat/tool-render/summary.js";
+import { fieldMetaFromSchema, listItemsSchema, orderFieldKeys } from "./data/chat/tool-render/schema.js";
+import { knownToolRenderAdapters } from "./data/chat/tool-render/known-tools.js";
+import { normalizeToolOutput } from "./data/chat/tool-render/normalize.js";
 import { providerIcon, providerIconColor } from "./data/chat/provider-icons.js";
 export {
   AttachmentButton,
@@ -33,21 +46,44 @@ export {
   PromptInput,
   ProviderSelector,
   Reasoning,
+  RuntimeBar,
   Suggestions,
+  ToolArgs,
   ToolCall,
+  ToolFieldValue,
+  ToolParams,
+  ToolRenderRegistry,
+  ToolRenderRegistryProvider,
+  ToolValue,
+  classifyToolValue,
   clickyOperationsToTools,
   createAttachmentUploadAdapter,
+  createToolRenderRegistry,
   defaultChatModelId,
+  defaultToolInputView,
+  defaultToolOutputView,
+  defaultToolRenderAdapters,
+  defaultToolSummary,
+  deriveColumns,
+  fieldMetaFromSchema,
   isDynamicToolPart,
   isFilePart,
   isReasoningPart,
   isTypedToolPart,
+  knownToolRenderAdapters,
+  listItemsSchema,
   mockChatTransport,
+  normalizeToolOutput,
   operationToTool,
+  orderFieldKeys,
   providerIcon,
   providerIconColor,
   suggestionLabel,
   suggestionPrompt,
-  toolPartName
+  summarizeToolValue,
+  toToolRenderRegistry,
+  toolNameAdapter,
+  toolPartName,
+  useToolRenderRegistry
 };
 //# sourceMappingURL=chat.js.map

package/dist/chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"chat.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Combobox.cjs

@@ -4,9 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
-const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 const modalStack = require("../overlay/modalStack.cjs");
-const ComboboxActions = require("./ComboboxActions.cjs");
+const ComboboxControl = require("./ComboboxControl.cjs");
+const useComboboxLayout = require("./useComboboxLayout.cjs");
 const ComboboxMenu = require("./ComboboxMenu.cjs");
 const comboboxUtils = require("./combobox-utils.cjs");
 function Combobox(props) {
@@ -18,6 +18,8 @@ function Combobox(props) {
     disabled,
     required,
     invalid,
+    ariaRequired,
+    describedBy,
     allowCustomValue = true,
     onNew,
     onCreate,
@@ -33,12 +35,14 @@ function Combobox(props) {
   } = props;
   const multiple = props.multiple === true;
   const tristate = props.multiple === true && props.tristate === true;
+  const tags = props.multiple === true && props.tristate !== true && props.variant === "tags";
   const modes = react.useMemo(
     () => props.multiple === true && props.tristate === true ? props.value : {},
     [props.multiple, props.tristate, props.value]
   );
   const selectedValues = react.useMemo(() => {
-    if (props.multiple === true && props.tristate === true) return Object.keys(props.value);
+    if (props.multiple === true && props.tristate === true)
+      return Object.keys(props.value);
     if (props.multiple === true) return props.value;
     return props.value ? [props.value] : [];
   }, [props.multiple, props.tristate, props.value]);
@@ -49,10 +53,10 @@ function Combobox(props) {
   const labelRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const floatingZ = modalStack.useFloatingZIndex();
-  const [menuPos, setMenuPos] = react.useState(null);
+  const menuPos = useComboboxLayout.useComboboxMenuPosition(open, anchorRef);
   const [query, setQuery] = react.useState("");
   const [highlighted, setHighlighted] = react.useState(-1);
-  const [labelWidth, setLabelWidth] = react.useState(0);
+  const labelWidth = useComboboxLayout.useComboboxLabelWidth(label, labelRef);
   const isSelected = (optValue) => selectedValues.includes(optValue);
   const selectedOption = react.useMemo(() => {
     if (multiple) return void 0;
@@ -68,22 +72,22 @@ function Combobox(props) {
       return [includes > 0 && `+${includes}`, excludes > 0 && `-${excludes}`].filter(Boolean).join(" ");
     }
     if (multiple) {
-      const labels = options.filter((o) => selectedValues.includes(o.value)).map((o) => o.selectedLabel ?? o.label);
-      if (labels.length === 0) return "";
-      if (labels.length <= 2) return labels.join(", ");
-      return `${labels.length} selected`;
+      return comboboxUtils.multipleComboboxLabel(options, selectedValues);
     }
     const single = selectedValues[0] ?? "";
     return (selectedOption == null ? void 0 : selectedOption.selectedLabel) ?? (selectedOption == null ? void 0 : selectedOption.label) ?? single;
   }, [tristate, modes, multiple, options, selectedOption, selectedValues]);
   const effectivePrefix = prefix ?? ((selectedOption == null ? void 0 : selectedOption.icon) != null ? /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: selectedOption.icon, className: "size-4" }) : null);
-  const displayValue = open ? query : closedLabel;
+  const displayValue = tags ? query : open ? query : closedLabel;
   const filtered = react.useMemo(() => {
     if (onSearch) return comboboxUtils.withSelectedComboboxOptions(options, selectedValues);
     const q = query.toLowerCase().trim();
     if (!q) return options;
     return options.filter(
-      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)
+      (o) => {
+        var _a;
+        return o.label.toLowerCase().includes(q) || ((_a = o.description) == null ? void 0 : _a.toLowerCase().includes(q)) || o.value.toLowerCase().includes(q);
+      }
     );
   }, [onSearch, options, query, selectedValues]);
   react.useEffect(() => {
@@ -92,23 +96,26 @@ function Combobox(props) {
     return () => clearTimeout(handle);
   }, [onSearch, open, query]);
   const trimmedQuery = query.trim();
-  const customEntry = react.useMemo(() => {
-    if (!allowCustomValue || !trimmedQuery || !tristate && (multiple || !onNew) || options.some((option) => option.value === trimmedQuery)) {
-      return null;
-    }
-    if (onNew) return onNew(trimmedQuery);
-    return {
-      value: trimmedQuery,
-      label: `Add "${trimmedQuery}"`
-    };
-  }, [
-    allowCustomValue,
-    multiple,
-    onNew,
-    options,
-    trimmedQuery,
-    tristate
-  ]);
+  const customEntry = react.useMemo(
+    () => comboboxUtils.createComboboxCustomEntry({
+      allowCustomValue,
+      query: trimmedQuery,
+      multiple,
+      tristate,
+      onNew,
+      choices: options,
+      selectedValues
+    }),
+    [
+      allowCustomValue,
+      multiple,
+      onNew,
+      options,
+      selectedValues,
+      trimmedQuery,
+      tristate
+    ]
+  );
   const navOptions = react.useMemo(
     () => customEntry ? [...filtered, customEntry] : filtered,
     [filtered, customEntry]
@@ -135,51 +142,6 @@ function Combobox(props) {
       document.removeEventListener("focusin", onAway);
     };
   });
-  react.useLayoutEffect(() => {
-    if (label == null) {
-      setLabelWidth(0);
-      return;
-    }
-    const el = labelRef.current;
-    if (el) setLabelWidth(el.offsetWidth);
-  }, [label]);
-  react.useLayoutEffect(() => {
-    if (!open) {
-      setMenuPos(null);
-      return;
-    }
-    const update = () => {
-      const anchor = anchorRef.current;
-      if (!anchor) return;
-      const rect = anchor.getBoundingClientRect();
-      const viewportCap = window.innerWidth - rect.left - 8;
-      const maxWidth = Math.max(
-        rect.width,
-        Math.min(comboboxUtils.COMBOBOX_MENU_MAX_WIDTH_PX, viewportCap)
-      );
-      const spaceBelow = window.innerHeight - rect.bottom - 8;
-      const spaceAbove = rect.top - 8;
-      const openUp = spaceBelow < comboboxUtils.COMBOBOX_MENU_MAX_HEIGHT_PX && spaceAbove > spaceBelow;
-      const maxHeight = Math.min(
-        comboboxUtils.COMBOBOX_MENU_MAX_HEIGHT_PX,
-        openUp ? spaceAbove : spaceBelow
-      );
-      setMenuPos({
-        ...openUp ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
-        left: rect.left,
-        width: rect.width,
-        maxWidth,
-        maxHeight
-      });
-    };
-    update();
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [open]);
   function emit(next) {
     if (props.multiple === true && props.tristate !== true) {
       props.onChange(next);
@@ -188,7 +150,8 @@ function Combobox(props) {
     }
   }
   function emitModes(next) {
-    if (props.multiple === true && props.tristate === true) props.onChange(next);
+    if (props.multiple === true && props.tristate === true)
+      props.onChange(next);
   }
   function setMode(value, mode) {
     const next = { ...modes };
@@ -209,15 +172,32 @@ function Combobox(props) {
     setHighlighted(-1);
     setOpen(true);
   }
+  function createOptionValue(option) {
+    return onCreate ? onCreate(option) : option.value;
+  }
+  function emitCustomValue(value) {
+    if (tristate) {
+      setMode(value, "include");
+      return;
+    }
+    if (multiple) {
+      if (!selectedValues.includes(value)) emit([...selectedValues, value]);
+      return;
+    }
+    emit([value]);
+  }
   function commitAndClose() {
     const trimmed = query.trim();
-    if (!multiple && allowCustomValue && trimmed && trimmed !== selectedValues[0]) {
+    if (customEntry) {
+      const created = createOptionValue(customEntry);
+      if (created !== null) emitCustomValue(created);
+    } else if (!multiple && allowCustomValue && trimmed && trimmed !== selectedValues[0]) {
       const existing = options.find((option) => option.value === trimmed);
       const candidate = existing ?? (onNew ? onNew(trimmed) : {
         value: trimmed,
         label: trimmed
       });
-      const created = candidate ? existing ? existing.value : onCreate ? onCreate(candidate) : candidate.value : null;
+      const created = candidate ? existing ? existing.value : createOptionValue(candidate) : null;
       if (created !== null) emit([created]);
     }
     setQuery("");
@@ -227,15 +207,12 @@ function Combobox(props) {
   function selectOption(opt) {
     var _a, _b, _c, _d;
     if (opt === customEntry) {
-      const created = onCreate ? onCreate(opt) : opt.value;
-      if (created !== null) {
-        if (tristate) setMode(created, "include");
-        else emit([created]);
-      }
-      if (!tristate) {
-        setQuery("");
+      const created = createOptionValue(opt);
+      if (created !== null) emitCustomValue(created);
+      setQuery("");
+      setHighlighted(-1);
+      if (!multiple) {
         setOpen(false);
-        setHighlighted(-1);
       }
       (_a = inputRef.current) == null ? void 0 : _a.focus();
       return;
@@ -268,6 +245,11 @@ function Combobox(props) {
     setHighlighted(-1);
     (_a = inputRef.current) == null ? void 0 : _a.focus();
   }
+  function removeTag(value) {
+    var _a;
+    emit(selectedValues.filter((selected) => selected !== value));
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }
   function scrollToHighlighted(index) {
     var _a;
     const list = listRef.current;
@@ -276,7 +258,10 @@ function Combobox(props) {
     (_a = item == null ? void 0 : item.scrollIntoView) == null ? void 0 : _a.call(item, { block: "nearest" });
   }
   function onKeyDown(e) {
-    if (e.key === "ArrowDown") {
+    if (tags && e.key === "Backspace" && query === "" && selectedValues.length > 0) {
+      e.preventDefault();
+      emit(selectedValues.slice(0, -1));
+    } else if (e.key === "ArrowDown") {
       e.preventDefault();
       if (!open) {
         openMenu();
@@ -297,6 +282,11 @@ function Combobox(props) {
         selectOption(navOptions[highlighted]);
         return;
       }
+      if (open && multiple && customEntry) {
+        e.preventDefault();
+        selectOption(customEntry);
+        return;
+      }
       commitAndClose();
       onKeyDownProp == null ? void 0 : onKeyDownProp(e);
     } else if (e.key === "Escape") {
@@ -314,74 +304,53 @@ function Combobox(props) {
   const ariaLabel = ariaLabelProp ?? (typeof label === "string" ? label : void 0);
   const showClear = !required && !loading && !disabled && selectedValues.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn("relative", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: anchorRef, "data-jsf-control": true, className: "relative flex items-center", children: [
-      label != null && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          ref: labelRef,
-          className: "pointer-events-none absolute left-2 z-10 whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground text-[10px]",
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ref: inputRef,
-          id,
-          type: "text",
-          role: "combobox",
-          "aria-expanded": open,
-          "aria-controls": listId,
-          "aria-activedescendant": highlighted >= 0 ? `${listId}-${highlighted}` : void 0,
-          "aria-label": ariaLabel,
-          "aria-invalid": invalid || void 0,
-          autoComplete: "off",
-          disabled,
-          placeholder,
-          value: displayValue,
-          ...!open && closedLabel ? { title: closedLabel } : {},
-          onChange: (e) => {
-            setQuery(e.target.value);
-            if (!open) setOpen(true);
-          },
-          onFocus: openMenu,
-          onClick: () => {
-            if (!open) openMenu();
-          },
-          onKeyDown,
-          className: utils.cn(
-            "w-full rounded-md border border-input bg-background text-foreground",
-            size ? jsonSchemaFormSize.inputSizeClass[size] : "h-control-h px-control-px text-sm",
-            effectivePrefix && "pl-8",
-            suffix ? showClear ? "pr-[5.5rem]" : "pr-14" : showClear ? "pr-14" : "pr-8",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            invalid && "border-destructive focus-visible:ring-destructive"
-          ),
-          style: label != null ? comboboxUtils.comboboxLabelPadding(label, labelWidth) : void 0
-        }
-      ),
-      effectivePrefix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-1.5 flex items-center", children: effectivePrefix }),
-      suffix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("absolute flex h-full items-center", showClear ? "right-[3.75rem]" : "right-7"), children: suffix }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ComboboxActions.ComboboxActions,
-        {
-          disabled,
-          loading,
-          onClear: clear,
-          onToggle: () => {
-            var _a;
-            if (open) {
-              commitAndClose();
-            } else {
-              openMenu();
-              (_a = inputRef.current) == null ? void 0 : _a.focus();
-            }
-          },
-          showClear
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ComboboxControl.ComboboxControl,
+      {
+        anchorRef,
+        ariaLabel,
+        ariaRequired,
+        closedLabel,
+        describedBy,
+        disabled,
+        displayValue,
+        effectivePrefix,
+        highlighted,
+        id,
+        inputRef,
+        invalid,
+        label,
+        labelRef,
+        labelWidth,
+        listId,
+        loading,
+        onClear: clear,
+        onInput: (value) => {
+          setQuery(value);
+          if (!open) setOpen(true);
+        },
+        onKeyDown,
+        onOpen: openMenu,
+        onRemoveTag: removeTag,
+        onToggle: () => {
+          var _a;
+          if (open) {
+            commitAndClose();
+          } else {
+            openMenu();
+            (_a = inputRef.current) == null ? void 0 : _a.focus();
+          }
+        },
+        open,
+        options,
+        placeholder,
+        showClear,
+        size,
+        suffix,
+        tagValues: selectedValues,
+        tags
+      }
+    ),
     open && menuPos && typeof document !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(
       ComboboxMenu.ComboboxMenu,
       {