@sustaina/shared-ui 1.19.0 → 1.21.0

package/dist/index.js

@@ -21,11 +21,17 @@ var SheetPrimitive = require('@radix-ui/react-dialog');
 var i18n = require('i18next');
 var reactI18next = require('react-i18next');
 var zustand = require('zustand');
+var StarterKit = require('@tiptap/starter-kit');
+var react = require('@tiptap/react');
+var ReactDOM = require('react-dom/client');
+var core = require('@tiptap/core');
+var Suggestion = require('@tiptap/suggestion');
+var prosemirrorState = require('prosemirror-state');
 var zod$1 = require('@hookform/resolvers/zod');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var core = require('@dnd-kit/core');
+var core$1 = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 var zod = require('zod');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
@@ -83,6 +89,9 @@ var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimit
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+var Suggestion__default = /*#__PURE__*/_interopDefault(Suggestion);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
@@ -5120,7 +5129,8 @@ function DialogAlert({
   }, [onCancel, onOpenChange]);
   const handleConfirm = React4.useCallback(() => {
     onConfirm?.();
-  }, [onConfirm]);
+    onOpenChange(false);
+  }, [onConfirm, onOpenChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader2, { children: [
@@ -5382,6 +5392,989 @@ var getDialogAlertControls = () => ({
   closeDialogAlert,
   openErrorDialogAlert
 });
+function LoadingOverlay({
+  className,
+  fullscreen = true,
+  spinnerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "loading-overlay",
+      className: cn(
+        fullscreen ? "fixed z-100" : "absolute z-10",
+        "inset-0 flex items-center justify-center transition-opacity duration-300",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("size-50", spinnerClassName) })
+    }
+  );
+}
+
+// src/components/formulaEditor/constants/formulaOperation.ts
+var defaultOperators = [
+  { value: "(", label: "(" },
+  { value: ")", label: ")" },
+  { value: "%", label: "%" },
+  { value: "&", label: "&" },
+  { value: "+", label: "+" },
+  { value: "-", label: "-" },
+  { value: "*", label: "\xD7" },
+  { value: "/", label: "\xF7" },
+  { value: "=", label: "=" },
+  { value: "\u2260", label: "\u2260" },
+  { value: "#NULL", label: "#NULL" }
+];
+var defaultOperatorShortcuts = {
+  "(": "(",
+  ")": ")",
+  "%": "%",
+  "&": "&",
+  "+": "+",
+  "-": "-",
+  "*": "*",
+  "/": "/",
+  "=": "=",
+  "\u2260": "\u2260",
+  "#NULL": "#NULL"
+};
+var DEFAULT_DEBOUNCE = 200;
+function useKeyboardNavigation(itemsLength, onSelect, isLocked) {
+  const [selectedIndex, setSelectedIndex] = React4.useState(0);
+  React4.useEffect(() => {
+    const handler = (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % Math.max(itemsLength, 1));
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + Math.max(itemsLength, 1)) % Math.max(itemsLength, 1));
+        return;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        if (!isLocked) onSelect(selectedIndex);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [itemsLength, onSelect, selectedIndex, isLocked]);
+  return [selectedIndex, setSelectedIndex];
+}
+function useDropdownPosition(clientRect, itemsCount) {
+  const [rect, setRect] = React4.useState(null);
+  const [style, setStyle] = React4.useState({});
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
+    if (!clientRect) return;
+    const update = () => {
+      const nextRect = clientRect();
+      if (nextRect) setRect(nextRect);
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(document.body);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+      resizeObserver.disconnect();
+    };
+  }, [clientRect]);
+  React4.useLayoutEffect(() => {
+    if (!rect || !ref.current) return;
+    const dropdown = ref.current;
+    const dropdownRect = dropdown.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    let top = rect.bottom + window.scrollY + 6;
+    let left = rect.left + window.scrollX;
+    if (top + dropdownRect.height > viewportHeight + window.scrollY) {
+      top = rect.top + window.scrollY - dropdownRect.height - 6;
+    }
+    if (left + dropdownRect.width > viewportWidth + window.scrollX) {
+      left = Math.max(viewportWidth + window.scrollX - dropdownRect.width - 8, 0);
+    }
+    setStyle({ position: "absolute", zIndex: 50, top, left });
+  }, [rect, itemsCount]);
+  return { ref, style, rect };
+}
+var SuggestionList = ({
+  clientRect,
+  command,
+  fetchItems,
+  mapItem,
+  normalizeToken,
+  debounceMs = DEFAULT_DEBOUNCE,
+  query
+}) => {
+  const [items, setItems] = React4.useState([]);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const fetchId = React4.useRef(0);
+  const debounceHandle = React4.useRef(null);
+  const itemRefs = React4.useRef([]);
+  const { ref, style, rect } = useDropdownPosition(clientRect, items.length);
+  const normalizedMap = React4.useMemo(() => mapItem, [mapItem]);
+  const normalizeItem = React4.useMemo(() => normalizeToken, [normalizeToken]);
+  React4.useEffect(() => {
+    const runFetch = (input) => {
+      fetchId.current += 1;
+      const currentId = fetchId.current;
+      if (debounceHandle.current) clearTimeout(debounceHandle.current);
+      debounceHandle.current = window.setTimeout(async () => {
+        setIsLoading(true);
+        try {
+          const results = await fetchItems(input);
+          if (fetchId.current !== currentId) return;
+          const mapped = Array.isArray(results) ? results.map((item) => normalizeItem(normalizedMap(item))) : [];
+          setItems(mapped);
+        } catch {
+          if (fetchId.current === currentId) {
+            setItems([]);
+          }
+        } finally {
+          if (fetchId.current === currentId) {
+            setIsLoading(false);
+          }
+        }
+      }, debounceMs);
+    };
+    runFetch(query ?? "");
+    return () => {
+      if (debounceHandle.current) {
+        clearTimeout(debounceHandle.current);
+      }
+      fetchId.current += 1;
+    };
+  }, [query, fetchItems, normalizedMap, normalizeItem, debounceMs]);
+  const handleSelect = React4.useMemo(
+    () => (item) => {
+      if (isLoading) return;
+      command(item);
+    },
+    [command, isLoading]
+  );
+  const [selectedIndex, setSelectedIndex] = useKeyboardNavigation(
+    items.length,
+    (index) => {
+      if (!items.length) return;
+      handleSelect(items[index]);
+    },
+    isLoading
+  );
+  React4.useEffect(() => {
+    setSelectedIndex(0);
+  }, [items, setSelectedIndex]);
+  React4.useEffect(() => {
+    const element = itemRefs.current[selectedIndex];
+    if (element) element.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  if (!rect) return null;
+  const showEmptyState = !isLoading && items.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      style,
+      className: "w-80 max-h-60 overflow-y-auto rounded-lg border bg-white p-1 shadow-lg",
+      children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Loading suggestions\u2026" }),
+        showEmptyState && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No matches" }),
+        items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: (el) => {
+              itemRefs.current[idx] = el;
+            },
+            type: "button",
+            onClick: () => handleSelect(item),
+            onMouseMove: () => setSelectedIndex(idx),
+            className: cn(
+              "flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm",
+              selectedIndex === idx ? "bg-muted" : "hover:bg-muted",
+              isLoading && "pointer-events-none opacity-60"
+            ),
+            disabled: isLoading,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label ?? item.code }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                item.prefix ?? "",
+                item.code ?? ""
+              ] })
+            ]
+          },
+          item.id
+        ))
+      ]
+    }
+  );
+};
+var DISALLOWED_MARKS = ["bold", "italic", "link"];
+var SUGGESTION_DEBOUNCE = 200;
+var DEFAULT_CHIP_CLASS = "outline-1 outline-muted bg-muted/40 text-foreground";
+var TokenView = ({ node, editor, getPos }) => {
+  const [isFocused, setIsFocused] = React4__namespace.default.useState(false);
+  React4__namespace.default.useEffect(() => {
+    const handler = () => {
+      const { from, to } = editor.state.selection;
+      const position = getPos();
+      if (position >= from && position + node.nodeSize <= to) {
+        setIsFocused(true);
+      } else {
+        setIsFocused(false);
+      }
+    };
+    editor.on("selectionUpdate", handler);
+    return () => {
+      editor.off("selectionUpdate", handler);
+    };
+  }, [editor, getPos, node.nodeSize]);
+  const remove = () => {
+    const pos = getPos();
+    editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).run();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.NodeViewWrapper,
+    {
+      as: "span",
+      className: cn(
+        "inline-flex items-center gap-1 rounded-sm px-2 py-0.5 mx-2 text-sm font-medium",
+        DEFAULT_CHIP_CLASS,
+        node.attrs.chipClassName,
+        isFocused && "ring-2 ring-offset-1 ring-ring"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: node.attrs.label ?? node.attrs.code ?? node.attrs.rawValue }),
+        (node.attrs.code || node.attrs.prefix) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-normal opacity-80", children: [
+          "(",
+          node.attrs.prefix,
+          node.attrs.code ?? "",
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: remove,
+            className: "ml-1 cursor-pointer rounded-sm px-1 text-xs leading-none hover:bg-sus-primary-1/30",
+            "aria-label": `Remove ${node.attrs.label ?? node.attrs.code ?? "token"}`,
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+function normalizeTokenAttrs(attrs, config) {
+  const idSource = attrs.id ?? attrs.code ?? attrs.label ?? Math.random().toString(36).slice(2);
+  const prefix = attrs.prefix ?? config.prefix;
+  const suffix = attrs.code ?? attrs.label ?? "";
+  const outputType = attrs.outputType ?? config.outputType ?? config.type;
+  return {
+    ...attrs,
+    id: String(idSource),
+    type: config.type,
+    prefix,
+    chipClassName: attrs.chipClassName ?? config.chipClassName,
+    rawValue: attrs.rawValue ?? (suffix ? `${prefix}${suffix}` : prefix),
+    outputType
+  };
+}
+var isPlainTextContext = (state, range) => {
+  const { doc, schema } = state;
+  const $from = doc.resolve(range.from);
+  if ($from.parent.type.name !== "paragraph") return false;
+  const marks = $from.marks();
+  if (marks.some((mark) => DISALLOWED_MARKS.includes(mark.type.name))) return false;
+  const linkMark = schema.marks.link;
+  if (linkMark && linkMark.isInSet(marks)) return false;
+  const nodeBefore = $from.nodeBefore;
+  if (nodeBefore && nodeBefore.type.name === "token") return false;
+  const nodeAfter = $from.nodeAfter;
+  if (nodeAfter && nodeAfter.type.name === "token") return false;
+  return true;
+};
+function suggestionPlugin({ config, onSelect, nodeName, editor, register }) {
+  const pluginKey = new prosemirrorState.PluginKey(`formula-token-${config.type}-${config.prefix}`);
+  const fetchItems = config.fetchItems ?? (async () => []);
+  const mapItem = config.mapItem ?? ((item) => item);
+  const normalizeForConfig = (attrs) => normalizeTokenAttrs(attrs, config);
+  register({ key: pluginKey, config });
+  return Suggestion__default.default({
+    editor,
+    char: config.prefix,
+    pluginKey,
+    allowSpaces: true,
+    startOfLine: false,
+    items: () => [],
+    allow: ({ state, range }) => {
+      if (editor.view.composing) return false;
+      return isPlainTextContext(state, range);
+    },
+    render: () => {
+      let reactRoot = null;
+      let container = null;
+      return {
+        onStart: (props) => {
+          container = document.createElement("div");
+          document.body.appendChild(container);
+          reactRoot = ReactDOM__default.default.createRoot(container);
+          reactRoot.render(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SuggestionList,
+              {
+                ...props,
+                editor,
+                fetchItems,
+                mapItem,
+                normalizeToken: normalizeForConfig,
+                debounceMs: SUGGESTION_DEBOUNCE
+              }
+            )
+          );
+        },
+        onUpdate: (props) => {
+          reactRoot?.render(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SuggestionList,
+              {
+                ...props,
+                editor,
+                fetchItems,
+                mapItem,
+                normalizeToken: normalizeForConfig,
+                debounceMs: SUGGESTION_DEBOUNCE
+              }
+            )
+          );
+        },
+        onKeyDown: ({ event }) => {
+          if (event.key === "Escape" || event.key === "Enter" || event.key === "Tab") {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        onExit: () => {
+          reactRoot?.unmount();
+          reactRoot = null;
+          container?.remove();
+          container = null;
+        }
+      };
+    },
+    command: ({ range, props, editor: editor2 }) => {
+      const attrs = normalizeTokenAttrs(props, config);
+      const nextChar = editor2.state.doc.textBetween(range.to, range.to + 1, "\n", "\n");
+      const shouldInsertSpace = !nextChar || !/\s/.test(nextChar);
+      const content = shouldInsertSpace ? [
+        { type: nodeName, attrs },
+        { type: "text", text: " " }
+      ] : { type: nodeName, attrs };
+      editor2.chain().focus().insertContentAt(range, content).run();
+      onSelect?.(attrs, config);
+    }
+  });
+}
+var createSuggestionMonitorPlugin = (registrations) => new prosemirrorState.Plugin({
+  key: new prosemirrorState.PluginKey("formula-token-suggestion-guard"),
+  view(editorView) {
+    const ensureValid = () => {
+      registrations.forEach(({ key, config }) => {
+        const state = key.getState(editorView.state);
+        if (!state?.active) return;
+        const currentText = editorView.state.doc.textBetween(
+          state.range.from,
+          state.range.to,
+          "\n",
+          "\n"
+        );
+        if (!currentText || !currentText.startsWith(config.prefix)) {
+          const tr = editorView.state.tr.setMeta(key, { exit: true });
+          editorView.dispatch(tr);
+        }
+      });
+    };
+    ensureValid();
+    return {
+      update: () => ensureValid()
+    };
+  }
+});
+var createTokenSpacingPlugin = (nodeName) => new prosemirrorState.Plugin({
+  key: new prosemirrorState.PluginKey(`formula-token-spacing-${nodeName}`),
+  appendTransaction(transactions, oldState, newState) {
+    if (!transactions.some((tr2) => tr2.docChanged)) return null;
+    const insertions = [];
+    newState.doc.descendants((node, pos) => {
+      if (node.type.name !== nodeName) return;
+      const beforePos = pos - 1;
+      if (beforePos >= 0) {
+        const beforeChar = newState.doc.textBetween(beforePos, pos, "\n", "\n");
+        if (beforeChar && !/\s/.test(beforeChar)) {
+          insertions.push({ pos, text: " " });
+        }
+      }
+      const afterPos = pos + node.nodeSize;
+      if (afterPos < newState.doc.content.size) {
+        const afterChar = newState.doc.textBetween(afterPos, afterPos + 1, "\n", "\n");
+        if (afterChar && !/\s/.test(afterChar)) {
+          insertions.push({ pos: afterPos, text: " " });
+        }
+      }
+    });
+    if (!insertions.length) return null;
+    const tr = newState.tr;
+    insertions.sort((a, b) => b.pos - a.pos).forEach(({ pos, text }) => {
+      tr.insertText(text, pos);
+    });
+    return tr;
+  }
+});
+var Token = core.Node.create({
+  name: "token",
+  inline: true,
+  group: "inline",
+  atom: true,
+  selectable: false,
+  draggable: false,
+  addAttributes() {
+    return {
+      type: { default: "" },
+      id: { default: "" },
+      code: { default: "" },
+      label: { default: "" },
+      prefix: { default: "" },
+      rawValue: { default: "" },
+      chipClassName: { default: "" },
+      outputType: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "token-chip" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["token-chip", core.mergeAttributes(HTMLAttributes), HTMLAttributes.label || ""];
+  },
+  addNodeView() {
+    return react.ReactNodeViewRenderer(TokenView);
+  },
+  addProseMirrorPlugins() {
+    const configs = this.options.configs ?? [];
+    const registrations = [];
+    const suggestionPlugins = configs.map(
+      (config) => suggestionPlugin({
+        config,
+        onSelect: this.options.onSelect,
+        nodeName: this.name,
+        editor: this.editor,
+        register: (entry) => registrations.push(entry)
+      })
+    );
+    return [
+      ...suggestionPlugins,
+      createTokenSpacingPlugin(this.name),
+      createSuggestionMonitorPlugin(registrations)
+    ];
+  }
+});
+var Operator = core.Node.create({
+  name: "operator",
+  inline: true,
+  group: "inline",
+  atom: true,
+  selectable: false,
+  addAttributes() {
+    return {
+      value: { default: null }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[operator]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["span", core.mergeAttributes({ operator: HTMLAttributes.value }), HTMLAttributes.value];
+  },
+  addKeyboardShortcuts() {
+    const shortcuts = this.options.shortcuts ?? {};
+    return Object.fromEntries(
+      Object.entries(shortcuts).map(([key, value]) => [
+        key,
+        ({ editor }) => {
+          editor.chain().insertContent({ type: "operator", attrs: { value } }).insertContent(" ").run();
+          return true;
+        }
+      ])
+    );
+  }
+});
+
+// src/components/formulaEditor/utils/parseFormulaToken.ts
+var DEFAULT_PARENTHESIS_MAP = {
+  "(": ")",
+  "[": "]",
+  "{": "}"
+};
+var createSortedPrefixes = (prefixMap) => Object.keys(prefixMap).sort((a, b) => b.length - a.length);
+var findPrefixAt = (value, start, prefixes) => prefixes.find((prefix) => value.startsWith(prefix, start));
+var pushVariableAndInner = (tokens, value, prefixMap, prefixes) => {
+  if (!value) return;
+  tokens.push({ type: "variable", value });
+  for (let cursor = 0; cursor < value.length; ) {
+    const prefix = findPrefixAt(value, cursor, prefixes);
+    if (!prefix) {
+      cursor += 1;
+      continue;
+    }
+    cursor += prefix.length;
+    const rest = value.slice(cursor);
+    const codeMatch = rest.match(/^\w+/);
+    if (codeMatch) {
+      tokens.push({ type: prefixMap[prefix], code: codeMatch[0] });
+      cursor += codeMatch[0].length;
+    }
+  }
+};
+var buildPrefixMap = (configs) => {
+  return configs.reduce((acc, config) => {
+    const outputType = config.outputType ?? config.type;
+    if (!acc[config.prefix]) acc[config.prefix] = outputType;
+    return acc;
+  }, {});
+};
+var tokenizeFormulaString = (raw, prefixMap) => {
+  const segments = [];
+  if (!raw) return segments;
+  const prefixes = createSortedPrefixes(prefixMap);
+  let buffer = "";
+  const flushBuffer = () => {
+    if (buffer) {
+      segments.push({ kind: "text", value: buffer });
+      buffer = "";
+    }
+  };
+  for (let i = 0; i < raw.length; ) {
+    const prefix = findPrefixAt(raw, i, prefixes);
+    if (prefix) {
+      const rest = raw.slice(i + prefix.length);
+      const codeMatch = rest.match(/^\w+/);
+      if (codeMatch) {
+        flushBuffer();
+        segments.push({ kind: "token", prefix, code: codeMatch[0] });
+        i += prefix.length + codeMatch[0].length;
+        continue;
+      }
+    }
+    buffer += raw[i];
+    i += 1;
+  }
+  flushBuffer();
+  return segments;
+};
+var parseFormulaToToken = (text, prefixMap) => {
+  const tokens = [];
+  if (!text) return tokens;
+  const prefixes = createSortedPrefixes(prefixMap);
+  const leadingPrefix = findPrefixAt(text, 0, prefixes);
+  if (!leadingPrefix) {
+    pushVariableAndInner(tokens, text, prefixMap, prefixes);
+    return tokens;
+  }
+  const afterPrefix = text.slice(leadingPrefix.length);
+  const codeMatch = afterPrefix.match(/^\w+/);
+  if (!codeMatch) {
+    pushVariableAndInner(tokens, text, prefixMap, prefixes);
+    return tokens;
+  }
+  tokens.push({ type: prefixMap[leadingPrefix], code: codeMatch[0] });
+  const remaining = afterPrefix.slice(codeMatch[0].length);
+  if (remaining) {
+    let variablePart = remaining;
+    if (remaining.startsWith(":") && remaining.includes("(")) {
+      let depth = 0;
+      let endIndex = -1;
+      for (let i = 0; i < remaining.length; i++) {
+        if (remaining[i] === "(") depth += 1;
+        else if (remaining[i] === ")") depth -= 1;
+        if (depth === 0 && remaining[i] === ")") {
+          endIndex = i;
+          break;
+        }
+      }
+      if (endIndex !== -1) {
+        variablePart = remaining.slice(0, endIndex + 1);
+      }
+    }
+    pushVariableAndInner(tokens, variablePart, prefixMap, prefixes);
+  }
+  return tokens;
+};
+var splitOperators = (value, allowedOperators) => {
+  const result = [];
+  if (!value) return result;
+  const sortedOperators = [...allowedOperators].sort((a, b) => b.length - a.length);
+  let buffer = "";
+  for (let i = 0; i < value.length; i += 1) {
+    let matched = false;
+    for (const operator of sortedOperators) {
+      if (operator && value.startsWith(operator, i)) {
+        if (buffer) {
+          result.push({ type: "variable", value: buffer });
+          buffer = "";
+        }
+        result.push({ type: "operator", value: operator });
+        i += operator.length - 1;
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) buffer += value[i];
+  }
+  if (buffer) result.push({ type: "variable", value: buffer });
+  return result;
+};
+var parseFormula = (editorJson, prefixMap, allowedOperators) => {
+  const rawParts = [];
+  const tokens = [];
+  const traverse = (nodes2 = []) => {
+    nodes2.forEach((node) => {
+      if (!node) return;
+      switch (node.type) {
+        case "text": {
+          const text = node.text ?? "";
+          if (!text) return;
+          rawParts.push(text);
+          if (text.trim()) {
+            tokens.push({ type: "variable", value: text });
+          }
+          break;
+        }
+        case "operator": {
+          rawParts.push(node.attrs?.value ?? "");
+          tokens.push({ type: "operator", value: node.attrs?.value ?? "" });
+          break;
+        }
+        case "op-library": {
+          rawParts.push(node.attrs?.value ?? "");
+          tokens.push(...splitOperators(node.attrs?.value ?? "", allowedOperators));
+          break;
+        }
+        case "token": {
+          const attrs = node.attrs ?? {};
+          const rawValue = attrs.rawValue ?? `${attrs.prefix ?? ""}${attrs.code ?? ""}`;
+          rawParts.push(rawValue);
+          const outputType = attrs.outputType ?? attrs.type ?? prefixMap[attrs.prefix ?? ""];
+          tokens.push({ ...attrs, type: outputType });
+          break;
+        }
+        default:
+          if (node.content) traverse(node.content);
+      }
+    });
+  };
+  traverse(editorJson?.content ?? []);
+  return { raw: rawParts.join(""), token: tokens };
+};
+var validateTokenPrefixes = (rawFormula, prefixMap) => {
+  const prefixes = Object.keys(prefixMap);
+  if (prefixes.length === 0) return { isValid: true };
+  const missingTypes = /* @__PURE__ */ new Set();
+  for (let i = 0; i < rawFormula.length; i += 1) {
+    const prefix = prefixes.find((key) => rawFormula.startsWith(key, i));
+    if (prefix) {
+      const nextChar = rawFormula[i + prefix.length];
+      if (!nextChar || !/\w/.test(nextChar)) {
+        missingTypes.add(prefixMap[prefix]);
+      }
+      i += prefix.length;
+    }
+  }
+  if (missingTypes.size > 0) {
+    return {
+      isValid: false,
+      message: `Invalid token for ${Array.from(missingTypes).join(" and ")}`
+    };
+  }
+  return { isValid: true };
+};
+var isValidParentheses = (input) => {
+  const stack = [];
+  const openers = Object.keys(DEFAULT_PARENTHESIS_MAP);
+  const closers = Object.values(DEFAULT_PARENTHESIS_MAP);
+  for (const char of input) {
+    if (openers.includes(char)) {
+      stack.push(char);
+    } else if (closers.includes(char)) {
+      const last = stack.pop();
+      if (!last || DEFAULT_PARENTHESIS_MAP[last] !== char) {
+        return { valid: false };
+      }
+    }
+  }
+  if (stack.length > 0) {
+    return { valid: false };
+  }
+  return { valid: true };
+};
+var mapTokensToOutput = (tokens, configs) => {
+  const prefixLookup = /* @__PURE__ */ new Map();
+  const typeLookup = /* @__PURE__ */ new Map();
+  configs.forEach((config) => {
+    prefixLookup.set(config.prefix, config);
+    typeLookup.set(config.outputType ?? config.type, config);
+  });
+  return tokens.map((token) => {
+    if (!token || typeof token !== "object") return token;
+    const tokenPrefix = "prefix" in token ? token.prefix : void 0;
+    const tokenType = "type" in token ? token.type : void 0;
+    const config = (tokenPrefix ? prefixLookup.get(tokenPrefix) : void 0) ?? (tokenType ? typeLookup.get(String(tokenType)) : void 0);
+    if (config?.mapOutput) {
+      return config.mapOutput(token);
+    }
+    return token;
+  });
+};
+var DEFAULT_TOKEN_CONFIGS = [
+  {
+    type: "position",
+    prefix: "$",
+    chipClassName: "text-black border border-sus-primary-1 outline-sus-primary-1",
+    fetchItems: async () => []
+  },
+  {
+    type: "impact",
+    prefix: "#",
+    chipClassName: "text-black border border-sus-primary-1 outline-sus-primary-1",
+    fetchItems: async () => []
+  }
+];
+var defaultMapItem = (item) => {
+  const id = item?.id ?? item?.code ?? item?.label ?? Math.random().toString(36).slice(2);
+  return {
+    id: String(id),
+    label: item?.label ?? item?.name ?? String(item?.code ?? item?.id ?? ""),
+    code: item?.code ?? String(item?.id ?? "")
+  };
+};
+var looksLikeHTML = (value) => /<\/?[a-z][\s\S]*>/i.test(value.trim());
+var tryParseJSON = (value) => {
+  try {
+    const parsed = JSON.parse(value);
+    if (parsed && typeof parsed === "object") {
+      return parsed;
+    }
+  } catch {
+  }
+  return null;
+};
+var buildDocFromRaw = (raw, prefixMap, configLookup) => {
+  const lines = raw.split(/\r?\n/);
+  let tokenCounter = 0;
+  const paragraphs = lines.map((line) => {
+    const segments = tokenizeFormulaString(line, prefixMap);
+    const content = segments.map((segment) => {
+      if (segment.kind === "text") {
+        return segment.value ? { type: "text", text: segment.value } : null;
+      }
+      const config = configLookup.get(segment.prefix);
+      const fallbackType = prefixMap[segment.prefix];
+      const displayType = config?.type ?? fallbackType;
+      const outputType = config?.outputType ?? fallbackType;
+      if (!displayType && !outputType) {
+        return { type: "text", text: `${segment.prefix}${segment.code}` };
+      }
+      const attrs = {
+        id: `token-${tokenCounter++}`,
+        type: displayType ?? outputType ?? "token",
+        code: segment.code,
+        prefix: segment.prefix,
+        rawValue: `${segment.prefix}${segment.code}`,
+        chipClassName: config?.chipClassName,
+        label: segment.code,
+        outputType: outputType ?? displayType
+      };
+      return { type: "token", attrs };
+    }).filter((node) => Boolean(node));
+    return {
+      type: "paragraph",
+      content: content.length > 0 ? content : [{ type: "text", text: "" }]
+    };
+  });
+  return { type: "doc", content: paragraphs };
+};
+var FormulaEditor = ({
+  value,
+  disabled,
+  loading = false,
+  className,
+  editorClassName,
+  errorMessage,
+  tokenConfigs,
+  operators = defaultOperators,
+  operatorShortcuts = defaultOperatorShortcuts,
+  onChange,
+  onSelectSuggestion,
+  field,
+  fieldState
+}) => {
+  const [isExpanded, setIsExpanded] = React4.useState(false);
+  const lastEmittedValueRef = React4.useRef(null);
+  const ignorePropValueRef = React4.useRef(false);
+  const normalizedConfigs = React4.useMemo(() => {
+    const configsToUse = tokenConfigs?.length ? tokenConfigs : DEFAULT_TOKEN_CONFIGS;
+    return configsToUse.map((config) => ({
+      ...config,
+      fetchItems: config.fetchItems ?? (async () => []),
+      mapItem: config.mapItem ?? ((item) => ({ ...item, ...defaultMapItem(item) })),
+      outputType: config.outputType ?? config.type
+    }));
+  }, [tokenConfigs]);
+  const prefixMap = React4.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
+  const configLookup = React4.useMemo(() => {
+    const lookup = /* @__PURE__ */ new Map();
+    normalizedConfigs.forEach((config) => {
+      lookup.set(config.prefix, config);
+    });
+    return lookup;
+  }, [normalizedConfigs]);
+  const allowedOperators = React4.useMemo(() => operators.map((operator) => operator.value), [operators]);
+  const displayError = errorMessage ?? fieldState?.error?.message;
+  const hasError = Boolean(displayError);
+  const isInteractionDisabled = Boolean(disabled || loading);
+  const convertValueToContent = React4.useCallback(
+    (input) => {
+      if (!input) return "";
+      const trimmed = input.trim();
+      if (!trimmed) return "";
+      const parsedJSON = tryParseJSON(trimmed);
+      if (parsedJSON && parsedJSON.type === "doc") {
+        return parsedJSON;
+      }
+      if (looksLikeHTML(trimmed)) {
+        return input;
+      }
+      return buildDocFromRaw(input, prefixMap, configLookup);
+    },
+    [configLookup, prefixMap]
+  );
+  const resolvedContent = React4.useMemo(() => convertValueToContent(value), [convertValueToContent, value]);
+  const extensions = React4.useMemo(
+    () => [
+      StarterKit__default.default.configure({ bold: false, italic: false }),
+      Token.configure({ configs: normalizedConfigs, onSelect: onSelectSuggestion }),
+      Operator.configure({ shortcuts: operatorShortcuts })
+    ],
+    [normalizedConfigs, onSelectSuggestion, operatorShortcuts]
+  );
+  const editor = react.useEditor({
+    extensions,
+    content: resolvedContent ?? "",
+    onUpdate: ({ editor: nextEditor }) => {
+      const { raw, token } = parseFormula(nextEditor.getJSON(), prefixMap, allowedOperators);
+      const mappedTokens = mapTokensToOutput(token, normalizedConfigs);
+      lastEmittedValueRef.current = raw;
+      ignorePropValueRef.current = true;
+      onChange?.(raw, mappedTokens);
+    },
+    editorProps: {
+      attributes: {
+        class: cn(
+          isExpanded ? "min-h-[300px] max-h-[300px]" : "min-h-[150px] max-h-[150px]",
+          hasError ? "border border-destructive" : "border focus-visible:border-ring",
+          "w-full rounded-lg bg-white px-4 py-3",
+          "overflow-y-auto whitespace-pre-wrap wrap-break-word focus:outline-none",
+          isInteractionDisabled && "pointer-events-none opacity-60",
+          editorClassName
+        ),
+        ...loading ? { "aria-busy": "true" } : {}
+      }
+    }
+  });
+  React4.useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(!isInteractionDisabled);
+  }, [editor, isInteractionDisabled]);
+  React4.useEffect(() => {
+    if (!editor || resolvedContent === void 0) return;
+    if (ignorePropValueRef.current && typeof value === "string" && value === lastEmittedValueRef.current) {
+      ignorePropValueRef.current = false;
+      return;
+    }
+    ignorePropValueRef.current = false;
+    if (typeof resolvedContent === "string") {
+      const currentHTML = editor.getHTML();
+      if (resolvedContent !== currentHTML) {
+        editor.commands.setContent(resolvedContent, { emitUpdate: false });
+      }
+      return;
+    }
+    const currentJSON = JSON.stringify(editor.getJSON());
+    const nextJSON = JSON.stringify(resolvedContent);
+    if (currentJSON !== nextJSON) {
+      editor.commands.setContent(resolvedContent, { emitUpdate: false });
+    }
+  }, [editor, resolvedContent, value]);
+  const insertOperator = (operator) => {
+    editor?.chain().focus().insertContent({ type: "operator", attrs: { value: operator } }).insertContent(" ").run();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full space-y-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: field?.ref,
+        onBlur: field?.onBlur,
+        tabIndex: 0,
+        className: "relative",
+        "aria-busy": loading,
+        onFocus: () => {
+          if (editor && !editor.isFocused) {
+            editor.chain().focus().run();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx(
+            LoadingOverlay,
+            {
+              fullscreen: false,
+              className: "rounded-lg bg-white/80 backdrop-blur-sm",
+              spinnerClassName: "size-6 text-sus-blue-3"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "absolute bottom-2 right-4 h-6 w-6 rounded-full bg-white shadow",
+              disabled: isInteractionDisabled,
+              onClick: () => setIsExpanded((prev) => !prev),
+              children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    ),
+    hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", role: "alert", children: displayError }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-end gap-2 py-2", children: operators.map((operator) => /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        onClick: () => insertOperator(operator.value),
+        className: "min-w-10 rounded-sm px-3 bg-sus-blue-3",
+        disabled: isInteractionDisabled,
+        children: operator.label
+      },
+      operator.value
+    )) })
+  ] });
+};
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -5597,7 +6590,7 @@ var GridSettingsModal = ({
       onSaveColumns({ ordering, visibility, pinning }, data.columns);
     }
   };
-  const sensors = core.useSensors(core.useSensor(core.PointerSensor, { activationConstraint: { distance: 5 } }));
+  const sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }));
   function handleDragEnd(event) {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
@@ -5661,10 +6654,10 @@ var GridSettingsModal = ({
               fields[0]?.fieldId
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 [&_button:not([disabled])]:cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
-              core.DndContext,
+              core$1.DndContext,
               {
                 sensors,
-                collisionDetection: core.closestCenter,
+                collisionDetection: core$1.closestCenter,
                 modifiers: [modifiers.restrictToParentElement, modifiers.restrictToVerticalAxis],
                 onDragStart: () => setIsDragging(true),
                 onDragEnd: (event) => {
@@ -5781,26 +6774,6 @@ var useGridSettingsStore = zustand.create(
   })
 );
 var useGridSettingsStore_default = useGridSettingsStore;
-function LoadingOverlay({
-  className,
-  fullscreen = true,
-  spinnerClassName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "loading-overlay",
-      className: cn(
-        fullscreen ? "fixed z-100" : "absolute z-10",
-        "inset-0 flex items-center justify-center transition-opacity duration-300",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("size-50", spinnerClassName) })
-    }
-  );
-}
 var DEVICE_SIZES = [320, 420, 640, 768, 1024, 1280, 1536, 1920];
 var IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
 var defaultLoader = ({ src }) => src;
@@ -8819,6 +9792,7 @@ exports.FormField = FormField;
 exports.FormItem = FormItem;
 exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
+exports.FormulaEditor = FormulaEditor;
 exports.GridSettingsModal = GridSettingsModal_default;
 exports.HeaderCell = HeaderCell_default;
 exports.Image = Image2;
@@ -8906,20 +9880,29 @@ exports.TooltipTrigger = TooltipTrigger;
 exports.Truncated = truncated_default;
 exports.UI = ui_exports;
 exports.booleanToSelectValue = booleanToSelectValue;
+exports.buildPrefixMap = buildPrefixMap;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.compareAlphanumeric = compareAlphanumeric;
 exports.debounce = debounce;
+exports.defaultOperatorShortcuts = defaultOperatorShortcuts;
+exports.defaultOperators = defaultOperators;
 exports.formatISODate = formatISODate;
 exports.getDialogAlertControls = getDialogAlertControls;
 exports.getDialogTemplates = getDialogTemplates;
 exports.inputVariants = inputVariants;
 exports.isDefined = isDefined;
 exports.isEmptyObject = isEmptyObject;
+exports.isValidParentheses = isValidParentheses;
+exports.mapTokensToOutput = mapTokensToOutput;
+exports.parseFormula = parseFormula;
+exports.parseFormulaToToken = parseFormulaToToken;
 exports.selectValueToBoolean = selectValueToBoolean;
 exports.spinnerVariants = spinnerVariants;
+exports.splitOperators = splitOperators;
 exports.stripNullishObject = stripNullishObject;
 exports.throttle = throttle;
+exports.tokenizeFormulaString = tokenizeFormulaString;
 exports.useFormField = useFormField;
 exports.useGridSettingsStore = useGridSettingsStore_default;
 exports.useHover = useHover_default;
@@ -8930,5 +9913,6 @@ exports.usePreventPageLeaveStore = usePreventPageLeaveStore_default;
 exports.useScreenSize = useScreenSize_default;
 exports.useSidebar = useSidebar;
 exports.useTruncated = useTruncated_default;
+exports.validateTokenPrefixes = validateTokenPrefixes;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map