@rufous/ui 0.3.21 → 0.3.23

package/dist/main.cjs

@@ -9088,6 +9088,14 @@ function getTopLevelSelected(nodes, selected) {
   }
   return result;
 }
+function getAllSelected(nodes, selected) {
+  const result = [];
+  for (const node of nodes) {
+    if (selected.has(String(node.id))) result.push(node);
+    if (node.children?.length) result.push(...getAllSelected(node.children, selected));
+  }
+  return result;
+}
 function filterTree(nodes, query) {
   if (!query) return nodes;
   const q = query.toLowerCase();
@@ -9116,6 +9124,7 @@ function TreeNodeItem({
   selected,
   expanded,
   selectionMode,
+  allowChildSelection,
   onToggleExpand,
   onSelect,
   isFiltering
@@ -9123,7 +9132,7 @@ function TreeNodeItem({
   const nodeId = String(node.id);
   const hasChildren = !!node.children?.length;
   const isExpanded = isFiltering || expanded.has(nodeId);
-  const state = getNodeState(node, selected);
+  const state = allowChildSelection ? getNodeState(node, selected) : selected.has(nodeId) ? "checked" : "unchecked";
   return /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
@@ -9143,16 +9152,8 @@ function TreeNodeItem({
       },
       isExpanded ? /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 14 }) : /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronRight, { size: 14 })
     ) : /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__expand-ph" }),
-    selectionMode === "multiple" && /* @__PURE__ */ import_react49.default.createElement(
-      "span",
-      {
-        className: `rf-tsn__cb${state === "checked" ? " rf-tsn__cb--checked" : state === "partial" ? " rf-tsn__cb--partial" : ""}`
-      },
-      state === "checked" && /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Check, { size: 10, strokeWidth: 3 }),
-      state === "partial" && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__cb-dash" })
-    ),
-    selectionMode === "single" && /* @__PURE__ */ import_react49.default.createElement("span", { className: `rf-tsn__radio${state === "checked" ? " rf-tsn__radio--checked" : ""}` }),
-    /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__label" }, node.label)
+    /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__label" }, node.label),
+    /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-tsn__check", "aria-hidden": "true" }, state === "partial" ? /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Minus, { size: 13, strokeWidth: 2.5 }) : /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.Check, { size: 13, strokeWidth: 2.5 }))
   ), hasChildren && isExpanded && /* @__PURE__ */ import_react49.default.createElement("div", null, node.children.map((child) => /* @__PURE__ */ import_react49.default.createElement(
     TreeNodeItem,
     {
@@ -9162,6 +9163,7 @@ function TreeNodeItem({
       selected,
       expanded,
       selectionMode,
+      allowChildSelection,
       onToggleExpand,
       onSelect,
       isFiltering
@@ -9175,6 +9177,7 @@ function TreeSelect({
   onNodeSelect,
   onNodeUnselect,
   selectionMode = "single",
+  allowChildSelection = false,
   placeholder = "Select",
   filter = false,
   filterInputAutoFocus = false,
@@ -9295,15 +9298,25 @@ function TreeSelect({
   const handleSelect = (node) => {
     const nodeId = String(node.id);
     if (isMultiple) {
-      const state = getNodeState(node, selectedSet);
-      const descendants = collectDescendants(node);
       const newSet = new Set(selectedSet);
-      if (state === "checked" || state === "partial") {
-        descendants.forEach((id) => newSet.delete(id));
-        onNodeUnselect?.({ node });
+      if (allowChildSelection) {
+        const state = getNodeState(node, selectedSet);
+        const descendants = collectDescendants(node);
+        if (state === "checked" || state === "partial") {
+          descendants.forEach((id) => newSet.delete(id));
+          onNodeUnselect?.({ node });
+        } else {
+          descendants.forEach((id) => newSet.add(id));
+          onNodeSelect?.({ node });
+        }
       } else {
-        descendants.forEach((id) => newSet.add(id));
-        onNodeSelect?.({ node });
+        if (newSet.has(nodeId)) {
+          newSet.delete(nodeId);
+          onNodeUnselect?.({ node });
+        } else {
+          newSet.add(nodeId);
+          onNodeSelect?.({ node });
+        }
       }
       onChange?.({ value: setToRecord(newSet) });
     } else {
@@ -9336,7 +9349,7 @@ function TreeSelect({
     onNodeUnselect?.({ node });
   };
   const filteredTree = filterTree(options, filterQuery);
-  const tagNodes = isMultiple ? getTopLevelSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
+  const tagNodes = isMultiple ? allowChildSelection ? getTopLevelSelected(options, selectedSet) : getAllSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
   const hasValue = tagNodes.length > 0;
   const isFloating = open || hasValue || focused;
   const rootClasses = [
@@ -9434,6 +9447,7 @@ function TreeSelect({
           selected: selectedSet,
           expanded: expandedKeys,
           selectionMode,
+          allowChildSelection,
           onToggleExpand: handleToggleExpand,
           onSelect: handleSelect,
           isFiltering: !!filterQuery
@@ -9598,6 +9612,14 @@ function SmartSelect({
   (0, import_react51.useEffect)(() => () => {
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
   }, []);
+  const [inputValue, setInputValue] = (0, import_react51.useState)(
+    () => !multiple && value != null ? getOptionLabel(value) : ""
+  );
+  (0, import_react51.useEffect)(() => {
+    if (!multiple) {
+      setInputValue(value != null ? getOptionLabel(value) : "");
+    }
+  }, [value, multiple, getOptionLabel]);
   const getValue = (0, import_react51.useCallback)(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -9628,14 +9650,15 @@ function SmartSelect({
     }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
   }, [multiple, value, getValue]);
-  const handleInputChange = (0, import_react51.useCallback)((_, inputValue) => {
+  const handleInputChange = (0, import_react51.useCallback)((_, inputValue2) => {
+    setInputValue(inputValue2);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
-    if (!inputValue) {
+    if (!inputValue2) {
       onSearchChange("", 0);
       return;
     }
-    const q = inputValue.toLowerCase();
+    const q = inputValue2.toLowerCase();
     let localCount = 0;
     for (const opt of flatOptionsList) {
       if (getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)) {
@@ -9646,10 +9669,10 @@ function SmartSelect({
     if (localCount >= searchThreshold) return;
     const needed = searchThreshold - localCount;
     if (debounceMs <= 0) {
-      onSearchChange(inputValue, needed);
+      onSearchChange(inputValue2, needed);
     } else {
       debounceTimer.current = setTimeout(() => {
-        onSearchChange(inputValue, needed);
+        onSearchChange(inputValue2, needed);
       }, debounceMs);
     }
   }, [onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
@@ -9704,43 +9727,37 @@ function SmartSelect({
       {
         key,
         ...rest,
-        className: muiClass,
+        className: [
+          muiClass,
+          "rf-select__option",
+          isSelected ? "rf-select__option--selected" : ""
+        ].filter(Boolean).join(" "),
         style: {
           ...muiStyle,
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          padding: "8px 16px",
           paddingLeft: 16 + depth * 20,
-          fontSize: "0.9rem",
-          color: "rgba(0,0,0,0.87)",
-          cursor: "pointer",
-          userSelect: "none",
-          minHeight: 40,
-          boxSizing: "border-box",
-          fontWeight: isSelected ? 500 : void 0,
-          backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
-          listStyle: "none"
+          listStyle: "none",
+          alignItems: subLabel ? "flex-start" : void 0
         }
       },
-      /* @__PURE__ */ import_react51.default.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ import_react51.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
-      /* @__PURE__ */ import_react51.default.createElement("span", { style: {
-        color: "var(--primary-color, #a41b06)",
-        flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        opacity: isSelected ? 1 : 0,
-        transition: "opacity 0.1s"
-      } }, /* @__PURE__ */ import_react51.default.createElement(CheckIcon3, null))
+      /* @__PURE__ */ import_react51.default.createElement(
+        "span",
+        {
+          className: "rf-select__option-label",
+          style: subLabel ? { display: "flex", flexDirection: "column", whiteSpace: "normal" } : void 0
+        },
+        /* @__PURE__ */ import_react51.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)),
+        subLabel && /* @__PURE__ */ import_react51.default.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)
+      ),
+      /* @__PURE__ */ import_react51.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react51.default.createElement(CheckIcon3, null))
     );
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
-  const computedFilterOptions = (0, import_react51.useCallback)((opts, inputValue) => {
-    if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
+  const computedFilterOptions = (0, import_react51.useCallback)((opts, inputValue2) => {
+    if (filterOptionsProp) return filterOptionsProp(opts, inputValue2);
     if (multiple) {
       const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
       const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
-      if (!inputValue) return [...selected, ...unselected];
-      const q2 = inputValue.toLowerCase();
+      if (!inputValue2) return [...selected, ...unselected];
+      const q2 = inputValue2.toLowerCase();
       const filteredUnselected = unselected.filter(
         (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
       ).slice(0, searchThreshold);
@@ -9748,7 +9765,7 @@ function SmartSelect({
     }
     if (value != null) {
       const selectedLabel = getOptionLabel(value);
-      if (inputValue === selectedLabel) {
+      if (inputValue2 === selectedLabel) {
         const selectedKey = getValue(value);
         return [
           ...opts.filter((o) => getValue(o) === selectedKey),
@@ -9756,8 +9773,8 @@ function SmartSelect({
         ];
       }
     }
-    if (!inputValue) return opts;
-    const q = inputValue.toLowerCase();
+    if (!inputValue2) return opts;
+    const q = inputValue2.toLowerCase();
     return opts.filter(
       (opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
     ).slice(0, searchThreshold);
@@ -9768,6 +9785,7 @@ function SmartSelect({
       options: displayOptions,
       value: value ?? (multiple ? [] : null),
       onChange: handleChange,
+      inputValue: multiple ? void 0 : inputValue,
       onInputChange: handleInputChange,
       multiple,
       limitTags,

package/dist/main.css

@@ -1370,6 +1370,12 @@ pre {
 .rf-tsn__row:hover {
   background: rgba(241, 91, 36, 0.06);
 }
+.rf-tsn__row--active {
+  background: rgba(164, 27, 6, 0.08);
+}
+.rf-tsn__row--active:hover {
+  background: rgba(164, 27, 6, 0.12);
+}
 .rf-tsn__row--active .rf-tsn__label {
   color: rgba(0, 0, 0, 0.87);
   font-weight: 500;
@@ -1397,56 +1403,17 @@ pre {
   flex-shrink: 0;
   display: inline-block;
 }
-.rf-tsn__cb {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--border-color);
-  border-radius: 4px;
+.rf-tsn__check {
+  color: var(--primary-color, #a41b06);
+  flex-shrink: 0;
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: border-color 0.15s, background 0.15s;
-  background: var(--surface-color);
-  color: transparent;
-}
-.rf-tsn__cb--checked {
-  background: var(--primary-color);
-  border-color: var(--primary-color);
-  color: #fff;
-}
-.rf-tsn__cb--partial {
-  border-color: var(--primary-color);
-}
-.rf-tsn__cb-dash {
-  display: block;
-  width: 8px;
-  height: 2px;
-  background: var(--primary-color);
-  border-radius: 1px;
-}
-.rf-tsn__radio {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--border-color);
-  border-radius: 50%;
-  flex-shrink: 0;
-  transition: border-color 0.15s;
-  position: relative;
-}
-.rf-tsn__radio--checked {
-  border-color: var(--primary-color);
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.1s;
 }
-.rf-tsn__radio--checked::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8px;
-  height: 8px;
-  background: var(--primary-color);
-  border-radius: 50%;
+.rf-tsn__row--active .rf-tsn__check {
+  opacity: 1;
 }
 .rf-tsn__label {
   font-size: 0.875rem;

package/dist/main.d.cts

@@ -1830,7 +1830,13 @@ interface TreeSelectProps {
     filterInputAutoFocus?: boolean;
     /** Clear filter text when the dropdown closes */
     resetFilterOnHide?: boolean;
-    /** PrimeReact compat — accepted but not used (checkboxes handle multi-select) */
+    /**
+     * When **true**, selecting a parent selects all its descendants and vice-versa (cascade).
+     * When **false** (default), every node is selected/deselected independently — no cascade.
+     * Only relevant in `multiple` mode.
+     */
+    allowChildSelection?: boolean;
+    /** PrimeReact compat — accepted but not used */
     metaKeySelection?: boolean;
     /** Disable the whole control */
     disabled?: boolean;
@@ -1854,7 +1860,7 @@ interface TreeSelectProps {
     className?: string;
     sx?: SxProp;
 }
-declare function TreeSelect({ options, value, onChange, onNodeSelect, onNodeUnselect, selectionMode, placeholder, filter, filterInputAutoFocus, resetFilterOnHide, metaKeySelection: _metaKeySelection, disabled, label, variant, size, error, helperText, fullWidth, clearable, required, style, className, sx, }: TreeSelectProps): React__default.JSX.Element;
+declare function TreeSelect({ options, value, onChange, onNodeSelect, onNodeUnselect, selectionMode, allowChildSelection, placeholder, filter, filterInputAutoFocus, resetFilterOnHide, metaKeySelection: _metaKeySelection, disabled, label, variant, size, error, helperText, fullWidth, clearable, required, style, className, sx, }: TreeSelectProps): React__default.JSX.Element;
 
 interface UserOption {
     id?: string | number;

package/dist/main.d.ts

@@ -1830,7 +1830,13 @@ interface TreeSelectProps {
     filterInputAutoFocus?: boolean;
     /** Clear filter text when the dropdown closes */
     resetFilterOnHide?: boolean;
-    /** PrimeReact compat — accepted but not used (checkboxes handle multi-select) */
+    /**
+     * When **true**, selecting a parent selects all its descendants and vice-versa (cascade).
+     * When **false** (default), every node is selected/deselected independently — no cascade.
+     * Only relevant in `multiple` mode.
+     */
+    allowChildSelection?: boolean;
+    /** PrimeReact compat — accepted but not used */
     metaKeySelection?: boolean;
     /** Disable the whole control */
     disabled?: boolean;
@@ -1854,7 +1860,7 @@ interface TreeSelectProps {
     className?: string;
     sx?: SxProp;
 }
-declare function TreeSelect({ options, value, onChange, onNodeSelect, onNodeUnselect, selectionMode, placeholder, filter, filterInputAutoFocus, resetFilterOnHide, metaKeySelection: _metaKeySelection, disabled, label, variant, size, error, helperText, fullWidth, clearable, required, style, className, sx, }: TreeSelectProps): React__default.JSX.Element;
+declare function TreeSelect({ options, value, onChange, onNodeSelect, onNodeUnselect, selectionMode, allowChildSelection, placeholder, filter, filterInputAutoFocus, resetFilterOnHide, metaKeySelection: _metaKeySelection, disabled, label, variant, size, error, helperText, fullWidth, clearable, required, style, className, sx, }: TreeSelectProps): React__default.JSX.Element;
 
 interface UserOption {
     id?: string | number;

package/dist/main.js

@@ -8978,7 +8978,7 @@ import React106, {
   useCallback as useCallback10
 } from "react";
 import ReactDOM10 from "react-dom";
-import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, X as X3, Search as Search2, Check } from "lucide-react";
+import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, X as X3, Search as Search2, Check, Minus } from "lucide-react";
 function collectDescendants(node) {
   const ids = [String(node.id)];
   node.children?.forEach((c) => ids.push(...collectDescendants(c)));
@@ -9012,6 +9012,14 @@ function getTopLevelSelected(nodes, selected) {
   }
   return result;
 }
+function getAllSelected(nodes, selected) {
+  const result = [];
+  for (const node of nodes) {
+    if (selected.has(String(node.id))) result.push(node);
+    if (node.children?.length) result.push(...getAllSelected(node.children, selected));
+  }
+  return result;
+}
 function filterTree(nodes, query) {
   if (!query) return nodes;
   const q = query.toLowerCase();
@@ -9040,6 +9048,7 @@ function TreeNodeItem({
   selected,
   expanded,
   selectionMode,
+  allowChildSelection,
   onToggleExpand,
   onSelect,
   isFiltering
@@ -9047,7 +9056,7 @@ function TreeNodeItem({
   const nodeId = String(node.id);
   const hasChildren = !!node.children?.length;
   const isExpanded = isFiltering || expanded.has(nodeId);
-  const state = getNodeState(node, selected);
+  const state = allowChildSelection ? getNodeState(node, selected) : selected.has(nodeId) ? "checked" : "unchecked";
   return /* @__PURE__ */ React106.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ React106.createElement(
     "div",
     {
@@ -9067,16 +9076,8 @@ function TreeNodeItem({
       },
       isExpanded ? /* @__PURE__ */ React106.createElement(ChevronDown2, { size: 14 }) : /* @__PURE__ */ React106.createElement(ChevronRight2, { size: 14 })
     ) : /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__expand-ph" }),
-    selectionMode === "multiple" && /* @__PURE__ */ React106.createElement(
-      "span",
-      {
-        className: `rf-tsn__cb${state === "checked" ? " rf-tsn__cb--checked" : state === "partial" ? " rf-tsn__cb--partial" : ""}`
-      },
-      state === "checked" && /* @__PURE__ */ React106.createElement(Check, { size: 10, strokeWidth: 3 }),
-      state === "partial" && /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__cb-dash" })
-    ),
-    selectionMode === "single" && /* @__PURE__ */ React106.createElement("span", { className: `rf-tsn__radio${state === "checked" ? " rf-tsn__radio--checked" : ""}` }),
-    /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__label" }, node.label)
+    /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__label" }, node.label),
+    /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__check", "aria-hidden": "true" }, state === "partial" ? /* @__PURE__ */ React106.createElement(Minus, { size: 13, strokeWidth: 2.5 }) : /* @__PURE__ */ React106.createElement(Check, { size: 13, strokeWidth: 2.5 }))
   ), hasChildren && isExpanded && /* @__PURE__ */ React106.createElement("div", null, node.children.map((child) => /* @__PURE__ */ React106.createElement(
     TreeNodeItem,
     {
@@ -9086,6 +9087,7 @@ function TreeNodeItem({
       selected,
       expanded,
       selectionMode,
+      allowChildSelection,
       onToggleExpand,
       onSelect,
       isFiltering
@@ -9099,6 +9101,7 @@ function TreeSelect({
   onNodeSelect,
   onNodeUnselect,
   selectionMode = "single",
+  allowChildSelection = false,
   placeholder = "Select",
   filter = false,
   filterInputAutoFocus = false,
@@ -9219,15 +9222,25 @@ function TreeSelect({
   const handleSelect = (node) => {
     const nodeId = String(node.id);
     if (isMultiple) {
-      const state = getNodeState(node, selectedSet);
-      const descendants = collectDescendants(node);
       const newSet = new Set(selectedSet);
-      if (state === "checked" || state === "partial") {
-        descendants.forEach((id) => newSet.delete(id));
-        onNodeUnselect?.({ node });
+      if (allowChildSelection) {
+        const state = getNodeState(node, selectedSet);
+        const descendants = collectDescendants(node);
+        if (state === "checked" || state === "partial") {
+          descendants.forEach((id) => newSet.delete(id));
+          onNodeUnselect?.({ node });
+        } else {
+          descendants.forEach((id) => newSet.add(id));
+          onNodeSelect?.({ node });
+        }
       } else {
-        descendants.forEach((id) => newSet.add(id));
-        onNodeSelect?.({ node });
+        if (newSet.has(nodeId)) {
+          newSet.delete(nodeId);
+          onNodeUnselect?.({ node });
+        } else {
+          newSet.add(nodeId);
+          onNodeSelect?.({ node });
+        }
       }
       onChange?.({ value: setToRecord(newSet) });
     } else {
@@ -9260,7 +9273,7 @@ function TreeSelect({
     onNodeUnselect?.({ node });
   };
   const filteredTree = filterTree(options, filterQuery);
-  const tagNodes = isMultiple ? getTopLevelSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
+  const tagNodes = isMultiple ? allowChildSelection ? getTopLevelSelected(options, selectedSet) : getAllSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
   const hasValue = tagNodes.length > 0;
   const isFloating = open || hasValue || focused;
   const rootClasses = [
@@ -9358,6 +9371,7 @@ function TreeSelect({
           selected: selectedSet,
           expanded: expandedKeys,
           selectionMode,
+          allowChildSelection,
           onToggleExpand: handleToggleExpand,
           onSelect: handleSelect,
           isFiltering: !!filterQuery
@@ -9466,7 +9480,7 @@ function UserSelectionField({
 }
 
 // lib/SmartSelect/SmartSelect.tsx
-import React108, { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo3, useRef as useRef25 } from "react";
+import React108, { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo3, useRef as useRef25, useState as useState26 } from "react";
 var CheckIcon3 = () => /* @__PURE__ */ React108.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React108.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function flattenTree(options, getChildren, depth = 0) {
   return options.flatMap((opt) => [
@@ -9522,6 +9536,14 @@ function SmartSelect({
   useEffect21(() => () => {
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
   }, []);
+  const [inputValue, setInputValue] = useState26(
+    () => !multiple && value != null ? getOptionLabel(value) : ""
+  );
+  useEffect21(() => {
+    if (!multiple) {
+      setInputValue(value != null ? getOptionLabel(value) : "");
+    }
+  }, [value, multiple, getOptionLabel]);
   const getValue = useCallback11(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -9552,14 +9574,15 @@ function SmartSelect({
     }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
   }, [multiple, value, getValue]);
-  const handleInputChange = useCallback11((_, inputValue) => {
+  const handleInputChange = useCallback11((_, inputValue2) => {
+    setInputValue(inputValue2);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
-    if (!inputValue) {
+    if (!inputValue2) {
       onSearchChange("", 0);
       return;
     }
-    const q = inputValue.toLowerCase();
+    const q = inputValue2.toLowerCase();
     let localCount = 0;
     for (const opt of flatOptionsList) {
       if (getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)) {
@@ -9570,10 +9593,10 @@ function SmartSelect({
     if (localCount >= searchThreshold) return;
     const needed = searchThreshold - localCount;
     if (debounceMs <= 0) {
-      onSearchChange(inputValue, needed);
+      onSearchChange(inputValue2, needed);
     } else {
       debounceTimer.current = setTimeout(() => {
-        onSearchChange(inputValue, needed);
+        onSearchChange(inputValue2, needed);
       }, debounceMs);
     }
   }, [onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
@@ -9628,43 +9651,37 @@ function SmartSelect({
       {
         key,
         ...rest,
-        className: muiClass,
+        className: [
+          muiClass,
+          "rf-select__option",
+          isSelected ? "rf-select__option--selected" : ""
+        ].filter(Boolean).join(" "),
         style: {
           ...muiStyle,
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          padding: "8px 16px",
           paddingLeft: 16 + depth * 20,
-          fontSize: "0.9rem",
-          color: "rgba(0,0,0,0.87)",
-          cursor: "pointer",
-          userSelect: "none",
-          minHeight: 40,
-          boxSizing: "border-box",
-          fontWeight: isSelected ? 500 : void 0,
-          backgroundColor: isSelected ? "rgba(164,27,6,0.08)" : void 0,
-          listStyle: "none"
+          listStyle: "none",
+          alignItems: subLabel ? "flex-start" : void 0
         }
       },
-      /* @__PURE__ */ React108.createElement("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React108.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)), subLabel && /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)),
-      /* @__PURE__ */ React108.createElement("span", { style: {
-        color: "var(--primary-color, #a41b06)",
-        flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        opacity: isSelected ? 1 : 0,
-        transition: "opacity 0.1s"
-      } }, /* @__PURE__ */ React108.createElement(CheckIcon3, null))
+      /* @__PURE__ */ React108.createElement(
+        "span",
+        {
+          className: "rf-select__option-label",
+          style: subLabel ? { display: "flex", flexDirection: "column", whiteSpace: "normal" } : void 0
+        },
+        /* @__PURE__ */ React108.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.3 } }, getOptionLabel(option)),
+        subLabel && /* @__PURE__ */ React108.createElement("span", { style: { fontSize: "0.75rem", color: "var(--text-secondary)", lineHeight: 1.3, marginTop: 1 } }, subLabel)
+      ),
+      /* @__PURE__ */ React108.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React108.createElement(CheckIcon3, null))
     );
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
-  const computedFilterOptions = useCallback11((opts, inputValue) => {
-    if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
+  const computedFilterOptions = useCallback11((opts, inputValue2) => {
+    if (filterOptionsProp) return filterOptionsProp(opts, inputValue2);
     if (multiple) {
       const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
       const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
-      if (!inputValue) return [...selected, ...unselected];
-      const q2 = inputValue.toLowerCase();
+      if (!inputValue2) return [...selected, ...unselected];
+      const q2 = inputValue2.toLowerCase();
       const filteredUnselected = unselected.filter(
         (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
       ).slice(0, searchThreshold);
@@ -9672,7 +9689,7 @@ function SmartSelect({
     }
     if (value != null) {
       const selectedLabel = getOptionLabel(value);
-      if (inputValue === selectedLabel) {
+      if (inputValue2 === selectedLabel) {
         const selectedKey = getValue(value);
         return [
           ...opts.filter((o) => getValue(o) === selectedKey),
@@ -9680,8 +9697,8 @@ function SmartSelect({
         ];
       }
     }
-    if (!inputValue) return opts;
-    const q = inputValue.toLowerCase();
+    if (!inputValue2) return opts;
+    const q = inputValue2.toLowerCase();
     return opts.filter(
       (opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
     ).slice(0, searchThreshold);
@@ -9692,6 +9709,7 @@ function SmartSelect({
       options: displayOptions,
       value: value ?? (multiple ? [] : null),
       onChange: handleChange,
+      inputValue: multiple ? void 0 : inputValue,
       onInputChange: handleInputChange,
       multiple,
       limitTags,
@@ -9718,7 +9736,7 @@ function SmartSelect({
 }
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
-import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef33, useEffect as useEffect30 } from "react";
+import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState36, useRef as useRef33, useEffect as useEffect30 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -9744,9 +9762,9 @@ import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
 
 // lib/RufousTextEditor/MentionList.tsx
-import React109, { forwardRef as forwardRef11, useEffect as useEffect22, useImperativeHandle, useState as useState26 } from "react";
+import React109, { forwardRef as forwardRef11, useEffect as useEffect22, useImperativeHandle, useState as useState27 } from "react";
 var MentionList = forwardRef11((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = useState26(0);
+  const [selectedIndex, setSelectedIndex] = useState27(0);
   const selectItem = (index) => {
     const item = props.items[index];
     if (item) {
@@ -9840,18 +9858,18 @@ function createMentionSuggestion(users) {
 }
 
 // lib/RufousTextEditor/Toolbar.tsx
-import React115, { useState as useState31, useRef as useRef29, useEffect as useEffect26, useCallback as useCallback15 } from "react";
+import React115, { useState as useState32, useRef as useRef29, useEffect as useEffect26, useCallback as useCallback15 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
-import React110, { useState as useState27, useEffect as useEffect23, useRef as useRef26, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
+import React110, { useState as useState28, useEffect as useEffect23, useRef as useRef26, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
 var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
-  const [speaking, setSpeaking] = useState27(false);
-  const [paused, setPaused] = useState27(false);
-  const [voices, setVoices] = useState27([]);
-  const [selectedVoice, setSelectedVoice] = useState27("");
-  const [rate, setRate] = useState27(1);
-  const [showPanel, setShowPanel] = useState27(false);
+  const [speaking, setSpeaking] = useState28(false);
+  const [paused, setPaused] = useState28(false);
+  const [voices, setVoices] = useState28([]);
+  const [selectedVoice, setSelectedVoice] = useState28("");
+  const [rate, setRate] = useState28(1);
+  const [showPanel, setShowPanel] = useState28(false);
   const utteranceRef = useRef26(null);
   const panelRef = useRef26(null);
   useEffect23(() => {
@@ -9989,12 +10007,12 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
 var TextToSpeech_default = TextToSpeech;
 
 // lib/RufousTextEditor/SpeechToText.tsx
-import React111, { useState as useState28, useRef as useRef27, useCallback as useCallback13, useEffect as useEffect24, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
+import React111, { useState as useState29, useRef as useRef27, useCallback as useCallback13, useEffect as useEffect24, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
 var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
-  const [listening, setListening] = useState28(false);
-  const [showPanel, setShowPanel] = useState28(false);
-  const [language, setLanguage] = useState28("en-US");
-  const [interim, setInterim] = useState28("");
+  const [listening, setListening] = useState29(false);
+  const [showPanel, setShowPanel] = useState29(false);
+  const [language, setLanguage] = useState29("en-US");
+  const [interim, setInterim] = useState29("");
   const recognitionRef = useRef27(null);
   const panelRef = useRef27(null);
   const isListeningRef = useRef27(false);
@@ -10151,7 +10169,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
 var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
-import React112, { useState as useState29, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback14 } from "react";
+import React112, { useState as useState30, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback14 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var AI_COMMANDS = [
   { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
@@ -10199,14 +10217,14 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
   return data.choices?.[0]?.message?.content?.trim() || "";
 };
 var AICommands = ({ editor, onAICommand }) => {
-  const [open, setOpen] = useState29(false);
-  const [showModal, setShowModal] = useState29(false);
-  const [loading, setLoading] = useState29(false);
-  const [promptText, setPromptText] = useState29("");
-  const [resultText, setResultText] = useState29("");
-  const [originalText, setOriginalText] = useState29("");
-  const [selectionRange, setSelectionRange] = useState29(null);
-  const [previousResults, setPreviousResults] = useState29([]);
+  const [open, setOpen] = useState30(false);
+  const [showModal, setShowModal] = useState30(false);
+  const [loading, setLoading] = useState30(false);
+  const [promptText, setPromptText] = useState30("");
+  const [resultText, setResultText] = useState30("");
+  const [originalText, setOriginalText] = useState30("");
+  const [selectionRange, setSelectionRange] = useState30(null);
+  const [previousResults, setPreviousResults] = useState30([]);
   const panelRef = useRef28(null);
   useEffect25(() => {
     const handleClick = (e) => {
@@ -10356,7 +10374,7 @@ var AICommands = ({ editor, onAICommand }) => {
 var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
-import React113, { useState as useState30, useMemo as useMemo4 } from "react";
+import React113, { useState as useState31, useMemo as useMemo4 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
@@ -10496,12 +10514,12 @@ async function translateText(text, sourceLang, targetLang) {
   return null;
 }
 var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
-  const [sourceLang, setSourceLang] = useState30(initialSource || "en");
-  const [targetLang, setTargetLang] = useState30(initialTarget || "hi");
-  const [sourceFilter, setSourceFilter] = useState30("");
-  const [targetFilter, setTargetFilter] = useState30("");
-  const [translating, setTranslating] = useState30(false);
-  const [error, setError] = useState30("");
+  const [sourceLang, setSourceLang] = useState31(initialSource || "en");
+  const [targetLang, setTargetLang] = useState31(initialTarget || "hi");
+  const [sourceFilter, setSourceFilter] = useState31("");
+  const [targetFilter, setTargetFilter] = useState31("");
+  const [translating, setTranslating] = useState31(false);
+  const [error, setError] = useState31("");
   const filteredSource = useMemo4(() => LANGUAGES.filter(
     (l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
   ), [sourceFilter]);
@@ -11405,7 +11423,7 @@ var SPECIAL_CHARS = [
   "\xA2"
 ];
 var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
-  const [open, setOpen] = useState31(false);
+  const [open, setOpen] = useState32(false);
   const ref = useRef29(null);
   const menuRef = useRef29(null);
   useEffect26(() => {
@@ -11463,8 +11481,8 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
   ));
 };
 var InsertPanel = ({ editor, onClose, mode = "video" }) => {
-  const [activeTab, setActiveTab] = useState31("link");
-  const [url, setUrl] = useState31("");
+  const [activeTab, setActiveTab] = useState32("link");
+  const [url, setUrl] = useState32("");
   const extractIframeSrc = (html) => {
     const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
     return match ? match[1] : null;
@@ -11534,9 +11552,9 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
   ), /* @__PURE__ */ React115.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
 };
 var ImagePanel = ({ editor, onClose, onImageUpload }) => {
-  const [activeTab, setActiveTab] = useState31("upload");
-  const [url, setUrl] = useState31("");
-  const [isDragging, setIsDragging] = useState31(false);
+  const [activeTab, setActiveTab] = useState32("upload");
+  const [url, setUrl] = useState32("");
+  const [isDragging, setIsDragging] = useState32(false);
   const fileInputRef = useRef29(null);
   const getBase64 = (file) => {
     return new Promise((resolve, reject) => {
@@ -11627,8 +11645,8 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
 };
 var MAX_GRID = 10;
 var TableGridSelector = ({ editor, onClose }) => {
-  const [hoverRow, setHoverRow] = useState31(0);
-  const [hoverCol, setHoverCol] = useState31(0);
+  const [hoverRow, setHoverRow] = useState32(0);
+  const [hoverCol, setHoverCol] = useState32(0);
   const handleInsert = () => {
     if (!editor || hoverRow === 0 || hoverCol === 0) return;
     editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
@@ -11666,9 +11684,9 @@ var TableGridSelector = ({ editor, onClose }) => {
   )));
 };
 var ColorPickerPanel = ({ editor, onClose }) => {
-  const [tab, setTab] = useState31("background");
-  const [activeBg, setActiveBg] = useState31(() => editor.getAttributes("highlight").color || null);
-  const [activeText, setActiveText] = useState31(() => editor.getAttributes("textStyle").color || null);
+  const [tab, setTab] = useState32("background");
+  const [activeBg, setActiveBg] = useState32(() => editor.getAttributes("highlight").color || null);
+  const [activeText, setActiveText] = useState32(() => editor.getAttributes("textStyle").color || null);
   const activeColor = tab === "background" ? activeBg : activeText;
   const applyColor = (color) => {
     if (tab === "background") {
@@ -11713,8 +11731,8 @@ var ColorPickerPanel = ({ editor, onClose }) => {
   )))), /* @__PURE__ */ React115.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React115.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React115.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
 };
 var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
-  const [, setEditorState] = useState31(0);
-  const [todoEnabled, setTodoEnabled] = useState31(false);
+  const [, setEditorState] = useState32(0);
+  const [todoEnabled, setTodoEnabled] = useState32(false);
   const ttsRef = useRef29(null);
   const sttRef = useRef29(null);
   const show = (id) => !visibleButtons || visibleButtons.has(id);
@@ -11728,11 +11746,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     if (!editor) return;
     editor.chain().focus().insertContent(char).run();
   }, [editor]);
-  const [copySuccess, setCopySuccess] = useState31(false);
-  const [translateSource, setTranslateSource] = useState31("en");
-  const [translateTarget, setTranslateTarget] = useState31("hi");
-  const [translateStatus, setTranslateStatus] = useState31("");
-  const [showTranslateModal, setShowTranslateModal] = useState31(false);
+  const [copySuccess, setCopySuccess] = useState32(false);
+  const [translateSource, setTranslateSource] = useState32("en");
+  const [translateTarget, setTranslateTarget] = useState32("hi");
+  const [translateStatus, setTranslateStatus] = useState32("");
+  const [showTranslateModal, setShowTranslateModal] = useState32(false);
   const handleCopy = useCallback15(async () => {
     if (!editor) return;
     const { from, to, empty } = editor.state.selection;
@@ -12341,7 +12359,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
 var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
-import React116, { useState as useState32, useEffect as useEffect27, useRef as useRef30 } from "react";
+import React116, { useState as useState33, useEffect as useEffect27, useRef as useRef30 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -12349,17 +12367,17 @@ var ALIGNMENTS = [
   { value: "right", label: "Right", icon: "\u2263" }
 ];
 var ImagePropertiesModal = ({ editor, node, onClose }) => {
-  const [activeTab, setActiveTab] = useState32("image");
-  const [src, setSrc] = useState32(node?.attrs?.src || "");
-  const [title, setTitle] = useState32(node?.attrs?.title || "");
-  const [alt, setAlt] = useState32(node?.attrs?.alt || "");
-  const [link, setLink] = useState32("");
-  const [openInNewTab, setOpenInNewTab] = useState32(false);
-  const [width, setWidth] = useState32("");
-  const [height, setHeight] = useState32("");
-  const [lockRatio, setLockRatio] = useState32(true);
-  const [naturalWidth, setNaturalWidth] = useState32(0);
-  const [naturalHeight, setNaturalHeight] = useState32(0);
+  const [activeTab, setActiveTab] = useState33("image");
+  const [src, setSrc] = useState33(node?.attrs?.src || "");
+  const [title, setTitle] = useState33(node?.attrs?.title || "");
+  const [alt, setAlt] = useState33(node?.attrs?.alt || "");
+  const [link, setLink] = useState33("");
+  const [openInNewTab, setOpenInNewTab] = useState33(false);
+  const [width, setWidth] = useState33("");
+  const [height, setHeight] = useState33("");
+  const [lockRatio, setLockRatio] = useState33(true);
+  const [naturalWidth, setNaturalWidth] = useState33(0);
+  const [naturalHeight, setNaturalHeight] = useState33(0);
   useEffect27(() => {
     if (src) {
       const img = new window.Image();
@@ -12478,11 +12496,11 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
   ), "Open link in new tab")) : /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ React116.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
 };
 var ImageToolbar = ({ editor }) => {
-  const [showModal, setShowModal] = useState32(false);
-  const [showAlign, setShowAlign] = useState32(false);
-  const [showVAlign, setShowVAlign] = useState32(false);
-  const [copyStatus, setCopyStatus] = useState32("");
-  const [pos, setPos] = useState32(null);
+  const [showModal, setShowModal] = useState33(false);
+  const [showAlign, setShowAlign] = useState33(false);
+  const [showVAlign, setShowVAlign] = useState33(false);
+  const [copyStatus, setCopyStatus] = useState33("");
+  const [pos, setPos] = useState33(null);
   const toolbarRef = useRef30(null);
   useEffect27(() => {
     if (!editor) return;
@@ -12620,7 +12638,7 @@ var ImageToolbar = ({ editor }) => {
 var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
-import React117, { useState as useState33, useEffect as useEffect28, useRef as useRef31 } from "react";
+import React117, { useState as useState34, useEffect as useEffect28, useRef as useRef31 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -12629,10 +12647,10 @@ var ALIGNMENTS2 = [
 ];
 var VIDEO_TYPES = ["youtube", "video"];
 var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
-  const [src, setSrc] = useState33(node?.attrs?.src || "");
-  const [width, setWidth] = useState33(String(node?.attrs?.width || 640));
-  const [height, setHeight] = useState33(String(node?.attrs?.height || 360));
-  const [lockRatio, setLockRatio] = useState33(true);
+  const [src, setSrc] = useState34(node?.attrs?.src || "");
+  const [width, setWidth] = useState34(String(node?.attrs?.width || 640));
+  const [height, setHeight] = useState34(String(node?.attrs?.height || 360));
+  const [lockRatio, setLockRatio] = useState34(true);
   const handleWidthChange = (val) => {
     setWidth(val);
     if (lockRatio) {
@@ -12730,11 +12748,11 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
   )))), /* @__PURE__ */ React117.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
 };
 var VideoToolbar = ({ editor }) => {
-  const [showModal, setShowModal] = useState33(false);
-  const [showSize, setShowSize] = useState33(false);
-  const [showAlign, setShowAlign] = useState33(false);
-  const [copyStatus, setCopyStatus] = useState33("");
-  const [pos, setPos] = useState33(null);
+  const [showModal, setShowModal] = useState34(false);
+  const [showSize, setShowSize] = useState34(false);
+  const [showAlign, setShowAlign] = useState34(false);
+  const [copyStatus, setCopyStatus] = useState34("");
+  const [pos, setPos] = useState34(null);
   const toolbarRef = useRef31(null);
   useEffect28(() => {
     if (!editor) return;
@@ -12860,7 +12878,7 @@ var VideoToolbar = ({ editor }) => {
 var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
-import React118, { useState as useState34, useEffect as useEffect29, useRef as useRef32 } from "react";
+import React118, { useState as useState35, useEffect as useEffect29, useRef as useRef32 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 var IconAddRowBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
 var IconAddRowAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
@@ -12873,7 +12891,7 @@ var IconMergeCells = () => /* @__PURE__ */ React118.createElement("svg", { width
 var IconSplitCell = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
 var IconToggleHeader = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React118.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
 var TableToolbar = ({ editor }) => {
-  const [pos, setPos] = useState34(null);
+  const [pos, setPos] = useState35(null);
   const toolbarRef = useRef32(null);
   useEffect29(() => {
     if (!editor) return;
@@ -13240,13 +13258,13 @@ var RufousTextEditor = ({
     };
   }, [editor]);
   const setLinkRef = useRef33(null);
-  const [linkModalOpen, setLinkModalOpen] = useState35(false);
-  const [linkUrl, setLinkUrl] = useState35("");
-  const [linkText, setLinkText] = useState35("");
-  const [linkClassName, setLinkClassName] = useState35("");
-  const [linkNewTab, setLinkNewTab] = useState35(true);
-  const [linkNoFollow, setLinkNoFollow] = useState35(true);
-  const [linkSelection, setLinkSelection] = useState35(null);
+  const [linkModalOpen, setLinkModalOpen] = useState36(false);
+  const [linkUrl, setLinkUrl] = useState36("");
+  const [linkText, setLinkText] = useState36("");
+  const [linkClassName, setLinkClassName] = useState36("");
+  const [linkNewTab, setLinkNewTab] = useState36(true);
+  const [linkNoFollow, setLinkNoFollow] = useState36(true);
+  const [linkSelection, setLinkSelection] = useState36(null);
   const setLink = useCallback16(() => {
     if (!editor) return;
     const attrs = editor.getAttributes("link");
@@ -13372,7 +13390,7 @@ var RufousTextEditor = ({
     setLinkSelection(null);
     editor?.chain().focus().run();
   }, [editor]);
-  const [saveStatus, setSaveStatus] = useState35("");
+  const [saveStatus, setSaveStatus] = useState36("");
   const handleSave = useCallback16(() => {
     if (!editor || !onSaveProp) return;
     onSaveProp(editor.getHTML(), editor.getJSON());
@@ -13384,7 +13402,7 @@ var RufousTextEditor = ({
     onExportProp(editor.getHTML(), editor.getJSON());
   }, [editor, onExportProp]);
   const providerValue = useMemo5(() => ({ editor }), [editor]);
-  const [isFullscreen, setIsFullscreen] = useState35(false);
+  const [isFullscreen, setIsFullscreen] = useState36(false);
   const toggleFullscreen = useCallback16(() => setIsFullscreen((prev) => !prev), []);
   const wrapperJsx = /* @__PURE__ */ React119.createElement(
     "div",
@@ -13707,10 +13725,10 @@ function getCitiesByName(name, exact = false) {
 }
 
 // lib/utils/useLocationSearch.ts
-import { useState as useState36, useEffect as useEffect31, useRef as useRef34, useCallback as useCallback17 } from "react";
+import { useState as useState37, useEffect as useEffect31, useRef as useRef34, useCallback as useCallback17 } from "react";
 function useDebounced(searcher, debounceMs) {
-  const [query, setQuery] = useState36("");
-  const [results, setResults] = useState36([]);
+  const [query, setQuery] = useState37("");
+  const [results, setResults] = useState37([]);
   const timer = useRef34(null);
   useEffect31(() => () => {
     if (timer.current) clearTimeout(timer.current);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.3.21",
+  "version": "0.3.23",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",