@flamingo-stack/openframe-frontend-core 0.0.717 → 0.0.718

package/dist/{chunk-PPXR22YC.cjs → chunk-Z5UWW3Z2.cjs}

@@ -2,6 +2,10 @@
 
 
 
+var _chunkA6P6DHEZcjs = require('./chunk-A6P6DHEZ.cjs');
+
+
+
 
 
 
@@ -51,6 +55,8 @@ var _chunkLLSUVPQCcjs = require('./chunk-LLSUVPQC.cjs');
 
 
 
+
+
 
 
 
@@ -82,8 +88,63 @@ var _chunkCPA2CKRZcjs = require('./chunk-CPA2CKRZ.cjs');
 
 var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
 
-// src/components/ui/truncate-text.tsx
+// src/components/ui/hidden-tags-popup.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _jsxruntime = require('react/jsx-runtime');
+var HiddenTagsPopup = _react.forwardRef.call(void 0, function HiddenTagsPopupImpl({ items, onRemove, disabled, className, style }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      style,
+      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        // Base positioning is neutral (left-anchored); consumers override via
+        // `style.left` (search-input, tag-search-input) or `className` (autocomplete).
+        "absolute left-0 top-full z-50 mt-1 min-w-[200px]",
+        "rounded-[6px] border border-ods-border bg-ods-card shadow-lg",
+        "duration-150 animate-in fade-in-0 zoom-in-95",
+        className
+      ),
+      children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: _chunk3ATAYP36cjs.cn.call(void 0, 
+            "flex h-11 items-center justify-between gap-3 px-3 md:h-12",
+            "border-b border-ods-border last:border-b-0"
+          ),
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "span",
+              {
+                className: "min-w-0 flex-1 truncate uppercase text-ods-text-primary text-h5",
+                title: typeof item.label === "string" ? item.label : void 0,
+                children: item.label
+              }
+            ),
+            !disabled && onRemove && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemove(item.value);
+                },
+                className: "shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary",
+                "aria-label": `Remove ${String(item.label)}`,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVX4E6YSBcjs.XmarkCircleIcon, { size: 20 })
+              }
+            )
+          ]
+        },
+        String(item.value)
+      ))
+    }
+  );
+});
+HiddenTagsPopup.displayName = "HiddenTagsPopup";
+
+// src/components/ui/truncate-text.tsx
+
 var VARIANT_CLASS = {
   h1: "text-h1",
   h2: "text-h2",
@@ -145,10 +206,555 @@ function TruncateText({
   );
 }
 
+// src/components/ui/autocomplete.tsx
+var _reactpopover = require('@radix-ui/react-popover'); var PopoverPrimitive = _interopRequireWildcard(_reactpopover);
+var _reactscrollarea = require('@radix-ui/react-scroll-area'); var ScrollAreaPrimitive = _interopRequireWildcard(_reactscrollarea);
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+
+var innerInputStyles = _chunk3ATAYP36cjs.cn.call(void 0, 
+  "min-w-[60px] flex-1 border-none bg-transparent outline-none",
+  "text-h4",
+  "text-ods-text-primary placeholder:text-ods-text-secondary",
+  // Disabled - match Input exactly (value greys out, placeholder dims further)
+  "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border"
+);
+function AutocompleteInner(props, ref) {
+  const {
+    options,
+    disabled = false,
+    startAdornment,
+    showClearAll = true,
+    className,
+    dropdownClassName,
+    freeSolo = false,
+    label,
+    labelVariant,
+    error,
+    filterOptions,
+    renderOption,
+    invalid = false,
+    noOptionsText = "No options",
+    inputValue: inputValueProp,
+    onInputChange,
+    loading = false,
+    loadingText = "Loading...",
+    creatable = false,
+    onCreateOption,
+    maxCreateLength,
+    onDeleteOption,
+    isDeletingOption = false,
+    disableClientFilter = false,
+    showChevron = true,
+    clearOnOpen = true
+  } = props;
+  const multiple = _nullishCoalesce(props.multiple, () => ( false));
+  const placeholder = _nullishCoalesce(props.placeholder, () => ( (multiple ? "Add More..." : "Select...")));
+  const maxItems = multiple ? props.maxItems : void 0;
+  const renderTag = multiple ? props.renderTag : void 0;
+  const wrapTags = multiple && (_nullishCoalesce(props.wrapTags, () => ( false)));
+  const limitTagsProp = multiple ? _nullishCoalesce(props.limitTags, () => ( "auto")) : "auto";
+  const getLimitTagsText = multiple ? _nullishCoalesce(props.getLimitTagsText, () => ( ((more) => `+${more}`))) : (more) => `+${more}`;
+  const valueArray = _react.useMemo.call(void 0, 
+    () => multiple ? props.value : props.value != null ? [props.value] : [],
+    [multiple, props.value]
+  );
+  const [internalInputValue, setInternalInputValue] = _react.useState.call(void 0, "");
+  const isInputControlled = inputValueProp !== void 0;
+  const inputValue = isInputControlled ? inputValueProp : internalInputValue;
+  const updateInputValue = (value, reason) => {
+    if (!isInputControlled) {
+      setInternalInputValue(value);
+    }
+    _optionalChain([onInputChange, 'optionalCall', _ => _(value, reason)]);
+  };
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [highlightedIndex, setHighlightedIndex] = _react.useState.call(void 0, -1);
+  const keyboardPadding = _chunkA6P6DHEZcjs.useKeyboardCollisionPadding.call(void 0, );
+  const containerRef = _react.useRef.call(void 0, null);
+  const hiddenTagsPopupRef = _react.useRef.call(void 0, null);
+  const isInvalid = invalid || !!error;
+  _react.useImperativeHandle.call(void 0, ref, () => containerRef.current);
+  const selectedOptions = _react.useMemo.call(void 0, () => {
+    return valueArray.map((v) => _nullishCoalesce(options.find((opt) => opt.value === v), () => ( { label: String(v), value: v })));
+  }, [valueArray, options]);
+  const selectedOption = !multiple && selectedOptions.length > 0 ? selectedOptions[0] : null;
+  const resolvedStartAdornment = _nullishCoalesce(_nullishCoalesce(startAdornment, () => ( _optionalChain([selectedOption, 'optionalAccess', _2 => _2.icon]))), () => ( null));
+  const inputPlaceholder = multiple ? valueArray.length === 0 ? placeholder : "Add More..." : placeholder;
+  const {
+    visibleCount: autoVisibleCount,
+    middleRef,
+    measureRef,
+    textMeasureRef,
+    badgeRef,
+    inputRef
+  } = _chunkA6P6DHEZcjs.useAutoLimitTags.call(void 0, {
+    count: multiple ? selectedOptions.length : 0,
+    limitTags: multiple ? wrapTags ? selectedOptions.length : limitTagsProp : 0,
+    placeholder: inputPlaceholder
+  });
+  const visibleCount = multiple ? autoVisibleCount : 0;
+  const visibleTags = multiple ? selectedOptions.slice(0, visibleCount) : [];
+  const hiddenTags = multiple ? selectedOptions.slice(visibleCount) : [];
+  const hiddenTagsCount = multiple ? selectedOptions.length - visibleCount : 0;
+  const [showHiddenTags, setShowHiddenTags] = _react.useState.call(void 0, false);
+  const hiddenTagsRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!showHiddenTags) return void 0;
+    const handleClick = (e) => {
+      const target = e.target;
+      const inButton = _optionalChain([hiddenTagsRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.contains, 'call', _5 => _5(target)]);
+      const inPopup = _optionalChain([hiddenTagsPopupRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.contains, 'call', _8 => _8(target)]);
+      if (!inButton && !inPopup) {
+        setShowHiddenTags(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [showHiddenTags]);
+  const openDropdown = () => {
+    if (!multiple && !clearOnOpen && selectedOption) {
+      updateInputValue(selectedOption.label, "reset");
+    }
+    setShowHiddenTags(false);
+    setIsOpen(true);
+  };
+  const inputDisplayValue = !multiple && !isOpen && selectedOption ? selectedOption.label : inputValue;
+  const filteredOptions = _react.useMemo.call(void 0, () => {
+    if (disableClientFilter) {
+      return options;
+    }
+    if (filterOptions) {
+      return filterOptions(options, inputValue);
+    }
+    if (!inputValue.trim()) {
+      return options;
+    }
+    const lowerInput = inputValue.toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(lowerInput));
+  }, [options, inputValue, filterOptions, disableClientFilter]);
+  const showCreateOption = creatable && inputValue.trim().length > 0 && filteredOptions.length === 0;
+  const isCreateTooLong = maxCreateLength != null && inputValue.trim().length > maxCreateLength;
+  const handleCreate = () => {
+    const trimmed = inputValue.trim();
+    if (!trimmed || maxCreateLength != null && trimmed.length > maxCreateLength) return;
+    const newValue = trimmed;
+    if (multiple) {
+      if (maxItems && valueArray.length >= maxItems) return;
+      props.onChange([...valueArray, newValue]);
+    } else {
+      props.onChange(newValue);
+    }
+    updateInputValue("", "reset");
+    setIsOpen(false);
+    _optionalChain([onCreateOption, 'optionalCall', _9 => _9(trimmed)]);
+  };
+  const [highlightedFor, setHighlightedFor] = _react.useState.call(void 0, filteredOptions.length);
+  if (highlightedFor !== filteredOptions.length) {
+    setHighlightedFor(filteredOptions.length);
+    setHighlightedIndex(-1);
+  }
+  const handleInputChange = (e) => {
+    updateInputValue(e.target.value, "input");
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    setHighlightedIndex(-1);
+  };
+  const handleSelect = (option) => {
+    if (multiple) {
+      const isSelected = valueArray.includes(option.value);
+      if (isSelected) {
+        props.onChange(valueArray.filter((v) => v !== option.value));
+      } else {
+        if (maxItems && valueArray.length >= maxItems) {
+          return;
+        }
+        props.onChange([...valueArray, option.value]);
+      }
+      updateInputValue("", "reset");
+      _optionalChain([inputRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.focus, 'call', _12 => _12()]);
+    } else {
+      props.onChange(option.value);
+      updateInputValue(clearOnOpen ? "" : option.label, "reset");
+      setIsOpen(false);
+    }
+  };
+  const handleClearAll = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (multiple) {
+      props.onChange([]);
+    } else {
+      props.onChange(null);
+    }
+    if (!isInputControlled) {
+      setInternalInputValue("");
+    }
+    _optionalChain([onInputChange, 'optionalCall', _13 => _13("", "clear")]);
+    setIsOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          openDropdown();
+        }
+        setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (showCreateOption) {
+          handleCreate();
+        } else if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+          handleSelect(filteredOptions[highlightedIndex]);
+        } else if (freeSolo && inputValue.trim()) {
+          const newOption = {
+            label: inputValue.trim(),
+            value: inputValue.trim()
+          };
+          handleSelect(newOption);
+        }
+        break;
+      case "Escape": {
+        const resetValue = !multiple && !clearOnOpen && selectedOption ? selectedOption.label : "";
+        updateInputValue(resetValue, "reset");
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        break;
+      }
+      case "Backspace":
+        break;
+    }
+  };
+  const handleOpenChange = (open) => {
+    if (open) {
+      openDropdown();
+    } else {
+      const resetValue = !multiple && !clearOnOpen && selectedOption ? selectedOption.label : "";
+      updateInputValue(resetValue, "reset");
+      setIsOpen(false);
+    }
+  };
+  const canAddMore = multiple ? !maxItems || valueArray.length < maxItems : true;
+  const hasValue = valueArray.length > 0;
+  const popover = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PopoverPrimitive.Root, { open: isOpen, onOpenChange: handleOpenChange, modal: false, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        "data-invalid": isInvalid || void 0,
+        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+          // Layout — single line, no wrapping
+          "flex min-h-11 cursor-text items-center rounded-[6px] border md:min-h-12",
+          "focus-within:outline-none",
+          "transition-colors duration-200",
+          "border-ods-border bg-ods-card",
+          "group",
+          !disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
+          disabled && "!cursor-not-allowed bg-ods-bg",
+          // Adornments / chevron carry their own colour — grey them with the
+          // value so a disabled field reads as one flat colour. Scoped to the
+          // DIRECT span child (the start adornment) on purpose: as a descendant
+          // rule it also hit the selected `Tag` chips in the middle zone, whose
+          // label is a span, and they went invisible against their own fill in
+          // the light theme. Anything nested inside the adornment that sets its
+          // own colour keeps it; anything that doesn't inherits the grey.
+          "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
+          isOpen && !isInvalid && "border-ods-accent hover:border-ods-accent",
+          isInvalid && "border-ods-error hover:border-ods-error"
+        ),
+        onClick: () => {
+          if (!disabled) {
+            _optionalChain([inputRef, 'access', _14 => _14.current, 'optionalAccess', _15 => _15.focus, 'call', _16 => _16()]);
+            openDropdown();
+          }
+        },
+        children: [
+          resolvedStartAdornment && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                // Images are sized alongside svgs: an entity adornment is
+                // usually a flag or a crest, and an unconstrained <img> lays
+                // out at 0x0 inside this flex row.
+                "flex-shrink-0 pl-3 text-ods-text-secondary transition-colors duration-200",
+                "[&_img]:size-4 [&_img]:object-contain md:[&_img]:size-6 [&_svg]:size-4 md:[&_svg]:size-6",
+                isOpen && !isInvalid && "text-ods-accent",
+                isInvalid && "text-ods-error"
+              ),
+              children: resolvedStartAdornment
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              ref: middleRef,
+              className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                "flex min-w-0 flex-1 items-center gap-2 px-2",
+                wrapTags ? "flex-wrap py-[var(--spacing-system-xsf)]" : "overflow-hidden"
+              ),
+              children: [
+                multiple && visibleTags.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _chunkF5BPGWGTcjs.Tag,
+                  {
+                    variant: "outline",
+                    className: wrapTags ? "max-w-full" : void 0,
+                    labelClassName: wrapTags ? "truncate" : "max-w-[90px] truncate",
+                    label: renderTag ? renderTag(option) : option.label,
+                    onClose: !disabled ? () => {
+                      props.onChange(valueArray.filter((v) => v !== option.value));
+                    } : void 0
+                  },
+                  String(option.value)
+                )),
+                multiple && hiddenTagsCount > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: hiddenTagsRef, className: "shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    ref: badgeRef,
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setShowHiddenTags((prev) => {
+                        if (!prev) setIsOpen(false);
+                        return !prev;
+                      });
+                    },
+                    className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                      "flex h-8 items-center px-2",
+                      "rounded-[6px] border border-ods-border bg-ods-card",
+                      "text-ods-text-secondary text-h5",
+                      "cursor-pointer transition-colors hover:bg-ods-bg-hover"
+                    ),
+                    children: getLimitTagsText(hiddenTagsCount)
+                  }
+                ) }),
+                canAddMore && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    value: inputDisplayValue,
+                    onChange: handleInputChange,
+                    onKeyDown: handleKeyDown,
+                    onFocus: () => openDropdown(),
+                    placeholder: inputPlaceholder,
+                    disabled,
+                    className: innerInputStyles
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex shrink-0 items-center gap-1 pr-3", children: [
+            showClearAll && (hasValue || inputValue.length > 0) && !disabled && isOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                onClick: handleClearAll,
+                className: "flex items-center justify-center transition-opacity hover:opacity-70",
+                "aria-label": "Clear all",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVX4E6YSBcjs.XmarkCircleIcon, { className: "size-4 text-ods-text-secondary md:size-6" })
+              }
+            ),
+            loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _lucidereact.Loader2,
+              {
+                className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                  "size-4 animate-spin md:size-6",
+                  isInvalid ? "text-ods-error" : isOpen ? "text-ods-accent" : "text-ods-text-secondary"
+                )
+              }
+            ) : showChevron && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkVX4E6YSBcjs.Chevron02DownIcon,
+              {
+                className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                  "size-4 transition-all duration-200 md:size-6",
+                  "text-ods-text-secondary",
+                  isOpen && "rotate-180",
+                  isOpen && !isInvalid && "text-ods-accent",
+                  isInvalid && "text-ods-error"
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      PopoverPrimitive.Content,
+      {
+        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+          "z-50 mt-1 w-[var(--radix-popover-trigger-width)]",
+          "rounded-[4px] border border-ods-border bg-ods-card",
+          "flex max-h-[var(--radix-popper-available-height)] flex-col overflow-hidden",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+          dropdownClassName
+        ),
+        sideOffset: 4,
+        align: "start",
+        collisionPadding: { bottom: keyboardPadding },
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          _optionalChain([inputRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.focus, 'call', _19 => _19()]);
+        },
+        onInteractOutside: (e) => {
+          if (_optionalChain([containerRef, 'access', _20 => _20.current, 'optionalAccess', _21 => _21.contains, 'call', _22 => _22(e.target)])) {
+            e.preventDefault();
+          }
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ScrollAreaPrimitive.Root, { className: "flex min-h-0 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Viewport, { className: "max-h-[240px] min-h-0 w-full [&>div]:!block", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "listbox", children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-2 text-ods-text-secondary text-h6", children: loadingText }) : filteredOptions.length === 0 ? showCreateOption ? isCreateTooLong ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-11 min-w-0 items-center px-[var(--spacing-system-mf)] text-ods-error text-h5 md:h-12", children: [
+            "Maximum ",
+            maxCreateLength,
+            " characters"
+          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              role: "option",
+              "aria-selected": false,
+              className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                "flex h-11 min-w-0 cursor-pointer items-center px-[var(--spacing-system-mf)] transition-colors md:h-12",
+                "text-ods-accent text-h4",
+                "hover:bg-ods-bg-hover"
+              ),
+              onClick: handleCreate,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TruncateText, { className: "text-current", children: `+ Create "${inputValue.trim()}"` })
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-2 text-ods-text-secondary text-h6", children: freeSolo && inputValue.trim() ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+            'Press Enter to add "',
+            inputValue,
+            '"'
+          ] }) : noOptionsText }) : filteredOptions.map((option, index) => {
+            const isSelected = valueArray.includes(option.value);
+            const isHighlighted = index === highlightedIndex;
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                  // `min-h` rather than a fixed height: an option may carry
+                  // a second line, and a clipped one is worse than a taller row.
+                  "group/item flex min-h-11 cursor-pointer items-center border-b border-ods-border px-[var(--spacing-system-mf)] py-[var(--spacing-system-xsf)] transition-colors last:border-b-0 md:min-h-12",
+                  "text-h4",
+                  isHighlighted && "bg-ods-bg-surface",
+                  isSelected ? "text-ods-accent" : "text-ods-text-primary",
+                  !isHighlighted && "hover:bg-ods-bg-hover"
+                ),
+                onClick: () => handleSelect(option),
+                onMouseEnter: () => setHighlightedIndex(index),
+                children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full min-w-0 items-center justify-between gap-[var(--spacing-system-xsf)]", children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
+                    option.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex size-5 shrink-0 items-center justify-center overflow-hidden [&_img]:size-full [&_img]:object-contain [&_svg]:size-full", children: option.icon }),
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TruncateText, { className: "text-current", children: option.label }),
+                      typeof option.description === "string" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TruncateText, { tone: "secondary", variant: "h6", children: option.description }) : option.description
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+                    isSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVX4E6YSBcjs.CheckIcon, { className: "text-ods-accent", size: 20 }),
+                    onDeleteOption && !isSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `Delete ${option.label}`,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onDeleteOption(option.value);
+                        },
+                        disabled: isDeletingOption,
+                        className: "opacity-0 transition-opacity focus-visible:opacity-100 disabled:pointer-events-none disabled:opacity-50 group-hover/item:opacity-100",
+                        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVX4E6YSBcjs.TrashIcon, { className: "size-4 text-ods-error" })
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              String(option.value)
+            );
+          }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Scrollbar, { className: "hidden", orientation: "vertical", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Thumb, {}) })
+        ] })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkXXBLN4BPcjs.FieldWrapper,
+    {
+      label,
+      labelVariant,
+      error,
+      errorSlot: "error" in props,
+      className,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative", ref: containerRef, children: [
+        popover,
+        multiple && showHiddenTags && hiddenTagsCount > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          HiddenTagsPopup,
+          {
+            ref: hiddenTagsPopupRef,
+            items: hiddenTags,
+            disabled,
+            className: "left-auto right-0 max-w-full",
+            onRemove: (value) => {
+              const newValue = valueArray.filter((v) => v !== value);
+              props.onChange(newValue);
+              if (typeof limitTagsProp === "number" && newValue.length <= limitTagsProp) setShowHiddenTags(false);
+            }
+          }
+        ),
+        multiple && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              ref: textMeasureRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible absolute left-0 top-0 -z-10 whitespace-nowrap text-h4",
+              children: inputPlaceholder
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              ref: measureRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-2",
+              children: selectedOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkF5BPGWGTcjs.Tag,
+                {
+                  variant: "outline",
+                  labelClassName: "max-w-[90px] truncate",
+                  label: renderTag ? renderTag(option) : option.label,
+                  onClose: () => {
+                  }
+                },
+                `m-${String(option.value)}`
+              ))
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+var Autocomplete = _react.forwardRef.call(void 0, AutocompleteInner);
+
 // src/components/ui/select.tsx
 var _reactselect = require('@radix-ui/react-select'); var SelectPrimitive = _interopRequireWildcard(_reactselect);
-var _lucidereact = require('lucide-react');
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
 
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
@@ -507,7 +1113,7 @@ function IconButtonsVariant({
 }) {
   const desktopActions = actions.filter((a) => !a.showOnlyMobile);
   const hasMenuActions = !!menuActions && menuActions.some((g) => g.items.length > 0);
-  const isSingleAction = actions.length === 1 && !_optionalChain([actions, 'access', _ => _[0], 'access', _2 => _2.submenu, 'optionalAccess', _3 => _3.length]);
+  const isSingleAction = actions.length === 1 && !_optionalChain([actions, 'access', _23 => _23[0], 'access', _24 => _24.submenu, 'optionalAccess', _25 => _25.length]);
   const singleAction = isSingleAction ? actions[0] : null;
   const useSingleActionMobile = isSingleAction && !hasMenuActions;
   const mobileMenuGroups = [{ items: actions.flatMap(actionToMenuItems) }, ..._nullishCoalesce(menuActions, () => ( []))];
@@ -1052,7 +1658,7 @@ function RemoteAccessRequestCard({
 }) {
   const { organizationName } = party;
   const siteUrl = _nullishCoalesce(party.organizationSiteUrl, () => ( void 0));
-  const openableSite = _optionalChain([siteUrl, 'optionalAccess', _4 => _4.startsWith, 'call', _5 => _5("https://")]) ? siteUrl : void 0;
+  const openableSite = _optionalChain([siteUrl, 'optionalAccess', _26 => _26.startsWith, 'call', _27 => _27("https://")]) ? siteUrl : void 0;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-[var(--spacing-system-l)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)]", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "w-full text-ods-text-primary text-h2", children: "Your IT support team is requesting remote access" }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-center gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-m)]", children: [
@@ -1873,7 +2479,7 @@ function ReleaseKeepingModal({
   keptBy,
   keptOn,
   reason,
-  ticket,
+  tickets = [],
   expiresOn,
   dueOn,
   isPending = false,
@@ -1892,9 +2498,9 @@ function ReleaseKeepingModal({
         reason,
         "."
       ] }),
-      ticket && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { children: [
+      tickets.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { children: [
         "Ticket: ",
-        ticket
+        tickets.join(", ")
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeepNotice, { icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVX4E6YSBcjs.HourglassIcon, { size: 24, color: "currentColor" }), title: `It will expire on ${expiresOn}`, children: dueOn ? `It was due to expire on ${dueOn}. Releasing gives it 3 days' grace, and it shows amber until then. Whoever placed the Keep is reminded the day before it goes. Nothing is deleted now.` : "Nothing is deleted now." }),
@@ -1906,6 +2512,92 @@ function ReleaseKeepingModal({
   ] });
 }
 
+// src/components/features/remote-session/remote-session-ticket-modals.tsx
+
+
+function AssignTicketModal({
+  isOpen,
+  onClose,
+  options,
+  onSearch,
+  loading = false,
+  isPending = false,
+  onConfirm
+}) {
+  const [ticketIds, setTicketIds] = _react.useState.call(void 0, []);
+  const [titles, setTitles] = _react.useState.call(void 0, {});
+  const [seededOpen, setSeededOpen] = _react.useState.call(void 0, isOpen);
+  if (seededOpen !== isOpen) {
+    setSeededOpen(isOpen);
+    if (isOpen) {
+      setTicketIds([]);
+      setTitles({});
+    }
+  }
+  const handleChange = (ids) => {
+    setTicketIds(ids);
+    setTitles((prev) => {
+      const next = {};
+      for (const id of ids) next[id] = _nullishCoalesce(_nullishCoalesce(_optionalChain([options, 'access', _28 => _28.find, 'call', _29 => _29((option) => option.value === id), 'optionalAccess', _30 => _30.label]), () => ( prev[id])), () => ( id));
+      return next;
+    });
+  };
+  const handleAssign = () => {
+    if (ticketIds.length === 0 || isPending) return;
+    onConfirm(ticketIds);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDC4RTYWKcjs.Modal, { isOpen, onClose: isPending ? () => {
+  } : onClose, className: "text-left md:max-w-[600px]", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDC4RTYWKcjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDC4RTYWKcjs.ModalTitle, { children: "Assign Ticket" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Autocomplete,
+      {
+        multiple: true,
+        wrapTags: true,
+        label: "Tickets",
+        labelVariant: "large",
+        options,
+        value: ticketIds,
+        onChange: handleChange,
+        renderTag: (option) => _nullishCoalesce(titles[option.value], () => ( option.label)),
+        onInputChange: onSearch ? (value, reason) => reason === "input" && onSearch(value) : void 0,
+        disableClientFilter: Boolean(onSearch),
+        loading,
+        noOptionsText: "No tickets found",
+        disabled: isPending
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDC4RTYWKcjs.ModalFooter, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDFQYAYBHcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden flex-1 md:block" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkDFQYAYBHcjs.Button,
+        {
+          type: "button",
+          variant: "accent",
+          onClick: handleAssign,
+          loading: isPending,
+          disabled: ticketIds.length === 0,
+          className: "flex-1",
+          children: "Assign"
+        }
+      )
+    ] })
+  ] });
+}
+function UnassignTicketModal({ isOpen, onClose, isPending = false, onConfirm }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDC4RTYWKcjs.Modal, { isOpen, onClose: isPending ? () => {
+  } : onClose, className: "text-left md:max-w-[600px]", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDC4RTYWKcjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDC4RTYWKcjs.ModalTitle, { children: "Unassign Ticket" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full text-ods-text-primary text-h4", children: "This Ticket will no longer be linked to this remote session. The ticket itself stays as it is, and you can assign it again anytime." }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDC4RTYWKcjs.ModalFooter, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDFQYAYBHcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden flex-1 md:block" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDFQYAYBHcjs.Button, { type: "button", variant: "destructive", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Unassign" })
+    ] })
+  ] });
+}
+
 // src/components/features/remote-session/remote-session-events.tsx
 
 function formatRemoteSessionOffset(offsetMs) {
@@ -1923,7 +2615,7 @@ function RemoteSessionEventList({ events, activeEventId, onSelect, className })
       {
         type: "button",
         "aria-current": event.id === activeEventId || void 0,
-        onClick: () => _optionalChain([onSelect, 'optionalCall', _6 => _6(event)]),
+        onClick: () => _optionalChain([onSelect, 'optionalCall', _31 => _31(event)]),
         className: _chunk3ATAYP36cjs.cn.call(void 0, 
           "flex w-full items-start gap-[var(--spacing-system-xxs)] rounded-md p-[var(--spacing-system-xxs)] text-left outline-none transition-colors",
           "hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-ods-focus",
@@ -1956,7 +2648,7 @@ function RemoteSessionTimelineMarkers({
         type: "button",
         "aria-label": label,
         title: label,
-        onClick: () => _optionalChain([onSelect, 'optionalCall', _7 => _7(event)]),
+        onClick: () => _optionalChain([onSelect, 'optionalCall', _32 => _32(event)]),
         style: { left: `${share * 100}%` },
         className: "absolute top-0 h-4 w-1 -translate-x-1/2 rounded-md bg-ods-text-secondary outline-none transition-colors hover:bg-ods-text-primary focus-visible:ring-2 focus-visible:ring-ods-focus"
       },
@@ -2084,4 +2776,8 @@ function RemoteSessionStorageAlert({ scope, capacity, className }) {
 
 
 
-exports.TruncateText = TruncateText; exports.Select = Select; exports.SelectGroup = SelectGroup; exports.SelectValue = SelectValue; exports.SelectTrigger = SelectTrigger; exports.SelectScrollUpButton = SelectScrollUpButton; exports.SelectScrollDownButton = SelectScrollDownButton; exports.SelectContent = SelectContent; exports.SelectLabel = SelectLabel; exports.SelectItem = SelectItem; exports.SelectSeparator = SelectSeparator; exports.BACK_BUTTON_SKELETON_CLASS = BACK_BUTTON_SKELETON_CLASS; exports.BackButton = BackButton; exports.PageActions = PageActions; exports.usePageActionsBottomPadding = usePageActionsBottomPadding; exports.EntityImage = EntityImage; exports.TITLE_BLOCK_MIN_HEIGHT = TITLE_BLOCK_MIN_HEIGHT; exports.TitleBlock = TitleBlock; exports.PageLayout = PageLayout; exports.RemoteSessionViewers = RemoteSessionViewers; exports.RemoteSessionScope = RemoteSessionScope; exports.RemoteSessionOrgLogo = RemoteSessionOrgLogo; exports.RemoteSessionRecordingTag = RemoteSessionRecordingTag; exports.REMOTE_SESSION_DRAG_HANDLE_CLASS = REMOTE_SESSION_DRAG_HANDLE_CLASS; exports.RemoteSessionDragger = RemoteSessionDragger; exports.formatRemoteSessionElapsed = formatRemoteSessionElapsed; exports.useRemoteSessionTimer = useRemoteSessionTimer; exports.RemoteAccessRequestCard = RemoteAccessRequestCard; exports.RemoteSessionBlockFrame = RemoteSessionBlockFrame; exports.RemoteSessionEndButton = RemoteSessionEndButton; exports.RemoteSessionSummary = RemoteSessionSummary; exports.RemoteSessionMinimizedChip = RemoteSessionMinimizedChip; exports.RemoteSessionChatPanel = RemoteSessionChatPanel; exports.RemoteDesktopChatMessageRow = RemoteDesktopChatMessageRow; exports.REMOTE_DESKTOP_CHAT_END_USER_NAME = REMOTE_DESKTOP_CHAT_END_USER_NAME; exports.RemoteDesktopChatPanel = RemoteDesktopChatPanel; exports.RemoteDesktopFullscreenToolbar = RemoteDesktopFullscreenToolbar; exports.RemoteDesktopView = RemoteDesktopView; exports.RemoteDesktopViewSkeleton = RemoteDesktopViewSkeleton; exports.RemoteSessionDialog = RemoteSessionDialog; exports.RemoteSessionBorder = RemoteSessionBorder; exports.RemoteSessionPill = RemoteSessionPill; exports.REMOTE_SESSION_KEEP_REASON_LABELS = REMOTE_SESSION_KEEP_REASON_LABELS; exports.KeepRecordingModal = KeepRecordingModal; exports.ReleaseKeepingModal = ReleaseKeepingModal; exports.formatRemoteSessionOffset = formatRemoteSessionOffset; exports.RemoteSessionEventList = RemoteSessionEventList; exports.RemoteSessionTimelineMarkers = RemoteSessionTimelineMarkers; exports.RemoteSessionStatusTag = RemoteSessionStatusTag; exports.RemoteSessionExpiry = RemoteSessionExpiry; exports.RemoteSessionStorageAlert = RemoteSessionStorageAlert;
+
+
+
+
+exports.HiddenTagsPopup = HiddenTagsPopup; exports.TruncateText = TruncateText; exports.Autocomplete = Autocomplete; exports.Select = Select; exports.SelectGroup = SelectGroup; exports.SelectValue = SelectValue; exports.SelectTrigger = SelectTrigger; exports.SelectScrollUpButton = SelectScrollUpButton; exports.SelectScrollDownButton = SelectScrollDownButton; exports.SelectContent = SelectContent; exports.SelectLabel = SelectLabel; exports.SelectItem = SelectItem; exports.SelectSeparator = SelectSeparator; exports.BACK_BUTTON_SKELETON_CLASS = BACK_BUTTON_SKELETON_CLASS; exports.BackButton = BackButton; exports.PageActions = PageActions; exports.usePageActionsBottomPadding = usePageActionsBottomPadding; exports.EntityImage = EntityImage; exports.TITLE_BLOCK_MIN_HEIGHT = TITLE_BLOCK_MIN_HEIGHT; exports.TitleBlock = TitleBlock; exports.PageLayout = PageLayout; exports.RemoteSessionViewers = RemoteSessionViewers; exports.RemoteSessionScope = RemoteSessionScope; exports.RemoteSessionOrgLogo = RemoteSessionOrgLogo; exports.RemoteSessionRecordingTag = RemoteSessionRecordingTag; exports.REMOTE_SESSION_DRAG_HANDLE_CLASS = REMOTE_SESSION_DRAG_HANDLE_CLASS; exports.RemoteSessionDragger = RemoteSessionDragger; exports.formatRemoteSessionElapsed = formatRemoteSessionElapsed; exports.useRemoteSessionTimer = useRemoteSessionTimer; exports.RemoteAccessRequestCard = RemoteAccessRequestCard; exports.RemoteSessionBlockFrame = RemoteSessionBlockFrame; exports.RemoteSessionEndButton = RemoteSessionEndButton; exports.RemoteSessionSummary = RemoteSessionSummary; exports.RemoteSessionMinimizedChip = RemoteSessionMinimizedChip; exports.RemoteSessionChatPanel = RemoteSessionChatPanel; exports.RemoteDesktopChatMessageRow = RemoteDesktopChatMessageRow; exports.REMOTE_DESKTOP_CHAT_END_USER_NAME = REMOTE_DESKTOP_CHAT_END_USER_NAME; exports.RemoteDesktopChatPanel = RemoteDesktopChatPanel; exports.RemoteDesktopFullscreenToolbar = RemoteDesktopFullscreenToolbar; exports.RemoteDesktopView = RemoteDesktopView; exports.RemoteDesktopViewSkeleton = RemoteDesktopViewSkeleton; exports.RemoteSessionDialog = RemoteSessionDialog; exports.RemoteSessionBorder = RemoteSessionBorder; exports.RemoteSessionPill = RemoteSessionPill; exports.REMOTE_SESSION_KEEP_REASON_LABELS = REMOTE_SESSION_KEEP_REASON_LABELS; exports.KeepRecordingModal = KeepRecordingModal; exports.ReleaseKeepingModal = ReleaseKeepingModal; exports.AssignTicketModal = AssignTicketModal; exports.UnassignTicketModal = UnassignTicketModal; exports.formatRemoteSessionOffset = formatRemoteSessionOffset; exports.RemoteSessionEventList = RemoteSessionEventList; exports.RemoteSessionTimelineMarkers = RemoteSessionTimelineMarkers; exports.RemoteSessionStatusTag = RemoteSessionStatusTag; exports.RemoteSessionExpiry = RemoteSessionExpiry; exports.RemoteSessionStorageAlert = RemoteSessionStorageAlert;