@sustaina/shared-ui 1.19.0 → 1.21.0

package/dist/index.mjs

@@ -3,9 +3,9 @@ import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React4 from 'react';
-import React4__default, { forwardRef, useRef, useMemo, useCallback, isValidElement, useState, useEffect, createElement } from 'react';
+import React4__default, { forwardRef, useRef, useMemo, useCallback, isValidElement, useState, useEffect, useLayoutEffect, createElement } from 'react';
 import { format, isValid, parseISO, isAfter, compareAsc, parse } from 'date-fns';
-import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image as Image$1, AlignLeft, AlignCenter, AlignRight, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Plus, ChevronLeft, CircleUserRound, PanelLeftIcon, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
+import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image as Image$1, AlignLeft, AlignCenter, AlignRight, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Minimize2, Maximize2, Plus, ChevronLeft, CircleUserRound, PanelLeftIcon, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useForm, FormProvider, Controller, useFormContext, useFormState, useFieldArray, useWatch } from 'react-hook-form';
@@ -20,6 +20,12 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 import { create } from 'zustand';
+import StarterKit from '@tiptap/starter-kit';
+import { ReactNodeViewRenderer, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
+import ReactDOM from 'react-dom/client';
+import { Node as Node$1, mergeAttributes } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+import { Plugin, PluginKey } from 'prosemirror-state';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -5083,7 +5089,8 @@ function DialogAlert({
   }, [onCancel, onOpenChange]);
   const handleConfirm = useCallback(() => {
     onConfirm?.();
-  }, [onConfirm]);
+    onOpenChange(false);
+  }, [onConfirm, onOpenChange]);
   return /* @__PURE__ */ jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxs(DialogHeader2, { children: [
@@ -5345,6 +5352,989 @@ var getDialogAlertControls = () => ({
   closeDialogAlert,
   openErrorDialogAlert
 });
+function LoadingOverlay({
+  className,
+  fullscreen = true,
+  spinnerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ 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__ */ 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] = useState(0);
+  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] = useState(null);
+  const [style, setStyle] = useState({});
+  const ref = useRef(null);
+  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]);
+  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] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const fetchId = useRef(0);
+  const debounceHandle = useRef(null);
+  const itemRefs = useRef([]);
+  const { ref, style, rect } = useDropdownPosition(clientRect, items.length);
+  const normalizedMap = useMemo(() => mapItem, [mapItem]);
+  const normalizeItem = useMemo(() => normalizeToken, [normalizeToken]);
+  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 = useMemo(
+    () => (item) => {
+      if (isLoading) return;
+      command(item);
+    },
+    [command, isLoading]
+  );
+  const [selectedIndex, setSelectedIndex] = useKeyboardNavigation(
+    items.length,
+    (index) => {
+      if (!items.length) return;
+      handleSelect(items[index]);
+    },
+    isLoading
+  );
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [items, setSelectedIndex]);
+  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__ */ 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__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Loading suggestions\u2026" }),
+        showEmptyState && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No matches" }),
+        items.map((item, idx) => /* @__PURE__ */ 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__ */ jsx("span", { children: item.label ?? item.code }),
+              /* @__PURE__ */ 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__default.useState(false);
+  React4__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__ */ jsxs(
+    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__ */ jsx("span", { children: node.attrs.label ?? node.attrs.code ?? node.attrs.rawValue }),
+        (node.attrs.code || node.attrs.prefix) && /* @__PURE__ */ jsxs("span", { className: "text-xs font-normal opacity-80", children: [
+          "(",
+          node.attrs.prefix,
+          node.attrs.code ?? "",
+          ")"
+        ] }),
+        /* @__PURE__ */ 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 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({
+    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.createRoot(container);
+          reactRoot.render(
+            /* @__PURE__ */ jsx(
+              SuggestionList,
+              {
+                ...props,
+                editor,
+                fetchItems,
+                mapItem,
+                normalizeToken: normalizeForConfig,
+                debounceMs: SUGGESTION_DEBOUNCE
+              }
+            )
+          );
+        },
+        onUpdate: (props) => {
+          reactRoot?.render(
+            /* @__PURE__ */ 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 Plugin({
+  key: new 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 Plugin({
+  key: new 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 = Node$1.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", mergeAttributes(HTMLAttributes), HTMLAttributes.label || ""];
+  },
+  addNodeView() {
+    return 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 = Node$1.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", 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] = useState(false);
+  const lastEmittedValueRef = useRef(null);
+  const ignorePropValueRef = useRef(false);
+  const normalizedConfigs = 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 = useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
+  const configLookup = useMemo(() => {
+    const lookup = /* @__PURE__ */ new Map();
+    normalizedConfigs.forEach((config) => {
+      lookup.set(config.prefix, config);
+    });
+    return lookup;
+  }, [normalizedConfigs]);
+  const allowedOperators = useMemo(() => operators.map((operator) => operator.value), [operators]);
+  const displayError = errorMessage ?? fieldState?.error?.message;
+  const hasError = Boolean(displayError);
+  const isInteractionDisabled = Boolean(disabled || loading);
+  const convertValueToContent = 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 = useMemo(() => convertValueToContent(value), [convertValueToContent, value]);
+  const extensions = useMemo(
+    () => [
+      StarterKit.configure({ bold: false, italic: false }),
+      Token.configure({ configs: normalizedConfigs, onSelect: onSelectSuggestion }),
+      Operator.configure({ shortcuts: operatorShortcuts })
+    ],
+    [normalizedConfigs, onSelectSuggestion, operatorShortcuts]
+  );
+  const editor = 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" } : {}
+      }
+    }
+  });
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(!isInteractionDisabled);
+  }, [editor, isInteractionDisabled]);
+  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__ */ jsxs("div", { className: cn("w-full space-y-2", className), children: [
+    /* @__PURE__ */ 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__ */ jsx(EditorContent, { editor }),
+          loading && /* @__PURE__ */ jsx(
+            LoadingOverlay,
+            {
+              fullscreen: false,
+              className: "rounded-lg bg-white/80 backdrop-blur-sm",
+              spinnerClassName: "size-6 text-sus-blue-3"
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", role: "alert", children: displayError }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-2 py-2", children: operators.map((operator) => /* @__PURE__ */ 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
@@ -5744,26 +6734,6 @@ var useGridSettingsStore = create(
   })
 );
 var useGridSettingsStore_default = useGridSettingsStore;
-function LoadingOverlay({
-  className,
-  fullscreen = true,
-  spinnerClassName,
-  ...props
-}) {
-  return /* @__PURE__ */ 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__ */ 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;
@@ -8746,6 +9716,6 @@ var Truncated = ({ children, className, ellipsis = true, as = "p", style }) => {
 };
 var truncated_default = Truncated;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CropperModal, CropperModalError, DIALOG_ALERT_I18N_SUBNAMESPACE, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Image2 as Image, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, truncated_default as Truncated, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, formatISODate, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, spinnerVariants, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CropperModal, CropperModalError, DIALOG_ALERT_I18N_SUBNAMESPACE, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Image2 as Image, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, truncated_default as Truncated, ui_exports as UI, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map