@yurikilian/lex4 1.8.0 → 1.11.0

package/dist/lex4-editor.cjs

@@ -8,6 +8,7 @@ const React = require("react");
 const lexical = require("lexical");
 const LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 const list = require("@lexical/list");
+const utils = require("@lexical/utils");
 const selection = require("@lexical/selection");
 const richText = require("@lexical/rich-text");
 const useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
@@ -473,6 +474,7 @@ const DEFAULT_TRANSLATIONS = {
     justify: "Justify",
     numberedList: "Numbered List",
     bulletList: "Bullet List",
+    alphabeticList: "Alphabetic List",
     indent: "Indent",
     outdent: "Outdent",
     history: "History",
@@ -512,12 +514,14 @@ const DEFAULT_TRANSLATIONS = {
       justifiedText: "Justified text",
       insertedNumberedList: "Inserted numbered list",
       insertedBulletList: "Inserted bullet list",
+      insertedAlphabeticList: "Inserted alphabetic list",
       indentedContent: "Indented content",
       outdentedContent: "Outdented content",
       fontChanged: "Font changed to {{value}}",
       fontSizeChanged: "Font size changed to {{value}}pt",
       blockTypeChanged: "Block type changed to {{value}}",
-      insertedDocumentContent: "Inserted document content"
+      insertedDocumentContent: "Inserted document content",
+      optionalSegmentToggled: "Optional section toggled"
     }
   },
   variables: {
@@ -538,7 +542,9 @@ const DEFAULT_TRANSLATIONS = {
     createVariableSave: "Add variable",
     createVariableCancel: "Cancel",
     createVariableMissingFields: "Label and key are required.",
-    createVariableDuplicateKey: "Variable {{key}} already exists."
+    createVariableDuplicateKey: "Variable {{key}} already exists.",
+    optionalSegmentToggle: "Optional section",
+    optionalSegmentTooltip: "Optional section — appears only when all fields have a value"
   },
   header: {
     placeholder: "Header"
@@ -615,6 +621,7 @@ const PT_BR_TRANSLATIONS = {
     justify: "Justificar",
     numberedList: "Lista Numerada",
     bulletList: "Lista com Marcadores",
+    alphabeticList: "Lista Alfabética",
     indent: "Aumentar Recuo",
     outdent: "Diminuir Recuo",
     history: "Histórico",
@@ -654,12 +661,14 @@ const PT_BR_TRANSLATIONS = {
       justifiedText: "Texto justificado",
       insertedNumberedList: "Lista numerada inserida",
       insertedBulletList: "Lista com marcadores inserida",
+      insertedAlphabeticList: "Lista alfabética inserida",
       indentedContent: "Conteúdo recuado",
       outdentedContent: "Recuo reduzido",
       fontChanged: "Fonte alterada para {{value}}",
       fontSizeChanged: "Tamanho da fonte alterado para {{value}}pt",
       blockTypeChanged: "Tipo de bloco alterado para {{value}}",
-      insertedDocumentContent: "Conteúdo do documento inserido"
+      insertedDocumentContent: "Conteúdo do documento inserido",
+      optionalSegmentToggled: "Seção opcional alternada"
     }
   },
   variables: {
@@ -680,7 +689,9 @@ const PT_BR_TRANSLATIONS = {
     createVariableSave: "Adicionar variável",
     createVariableCancel: "Cancelar",
     createVariableMissingFields: "Rótulo e chave são obrigatórios.",
-    createVariableDuplicateKey: "A variável {{key}} já existe."
+    createVariableDuplicateKey: "A variável {{key}} já existe.",
+    optionalSegmentToggle: "Seção opcional",
+    optionalSegmentTooltip: "Seção opcional — aparece apenas quando todos os campos têm valor"
   },
   header: {
     placeholder: "Cabeçalho"
@@ -853,11 +864,14 @@ const DEFAULT_TOOLBAR_STYLE_SNAPSHOT = {
   fontFamily: "Inter",
   fontSize: DEFAULT_FONT_SIZE,
   alignment: "left",
+  activeList: "none",
   isBold: false,
   isItalic: false,
   isUnderline: false,
   isStrikethrough: false,
-  hasSelectedVariable: false
+  hasSelectedVariable: false,
+  hasTextSelection: false,
+  insideOptionalSegment: false
 };
 function createToolbarStyleStore(initialSnapshot = DEFAULT_TOOLBAR_STYLE_SNAPSHOT) {
   return createStore((set) => ({
@@ -1573,33 +1587,33 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [
+const __iconNode$s = [
   ["path", { d: "m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16", key: "xik6mr" }],
   ["path", { d: "M15.697 14h5.606", key: "1stdlc" }],
   ["path", { d: "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", key: "d5nyq2" }],
   ["path", { d: "M3.304 13h6.392", key: "1q3zxz" }]
 ];
-const ALargeSmall = createLucideIcon("a-large-small", __iconNode$r);
+const ALargeSmall = createLucideIcon("a-large-small", __iconNode$s);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [
+const __iconNode$r = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
 ];
-const Bold = createLucideIcon("bold", __iconNode$q);
+const Bold = createLucideIcon("bold", __iconNode$r);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$q = [
   [
     "path",
     { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1", key: "ezmyqa" }
@@ -1612,7 +1626,18 @@ const __iconNode$p = [
     }
   ]
 ];
-const Braces = createLucideIcon("braces", __iconNode$p);
+const Braces = createLucideIcon("braces", __iconNode$q);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$p = [
+  ["path", { d: "M16 3h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-3", key: "1kt8lf" }],
+  ["path", { d: "M8 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h3", key: "gduv9" }]
+];
+const Brackets = createLucideIcon("brackets", __iconNode$p);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -2210,13 +2235,145 @@ function toggleStrikethrough(editor) {
 function setAlignment(editor, alignment) {
   editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, alignment);
 }
+function decorateAlphaListDom(dom) {
+  dom.classList.add("lex4-list-alpha");
+  dom.setAttribute("data-lex4-list-variant", "alpha");
+}
+class AlphaListNode extends list.ListNode {
+  static getType() {
+    return "alpha-list";
+  }
+  static clone(node) {
+    return new AlphaListNode(node.getStart(), node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = $createAlphaListNode(
+      typeof serializedNode.start === "number" ? serializedNode.start : 1
+    );
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  constructor(start = 1, key) {
+    super("number", start, key);
+  }
+  createDOM(config, editor) {
+    const dom = super.createDOM(config, editor);
+    decorateAlphaListDom(dom);
+    return dom;
+  }
+  updateDOM(prevNode, dom, config) {
+    const replaced = super.updateDOM(prevNode, dom, config);
+    if (replaced) {
+      return true;
+    }
+    decorateAlphaListDom(dom);
+    return false;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "alpha-list",
+      markerStyle: "alpha"
+    };
+  }
+}
+function $createAlphaListNode(start = 1) {
+  return lexical.$applyNodeReplacement(new AlphaListNode(start));
+}
+function $isAlphaListNode(node) {
+  return node instanceof AlphaListNode;
+}
+function getNearestListNode$1(node) {
+  if (list.$isListNode(node)) {
+    return node;
+  }
+  const listNode = utils.$findMatchingParent(node, list.$isListNode);
+  return list.$isListNode(listNode) ? listNode : null;
+}
+function getSelectedListNodes() {
+  const selection2 = lexical.$getSelection();
+  if (!selection2) {
+    return [];
+  }
+  const listNodes = /* @__PURE__ */ new Map();
+  const nodes = selection2.getNodes();
+  if (lexical.$isRangeSelection(selection2)) {
+    nodes.push(selection2.anchor.getNode(), selection2.focus.getNode());
+  }
+  for (const node of nodes) {
+    const listNode = getNearestListNode$1(node);
+    if (listNode) {
+      listNodes.set(listNode.getKey(), listNode);
+    }
+  }
+  return Array.from(listNodes.values());
+}
+function replaceWithAlphaList(listNode) {
+  if ($isAlphaListNode(listNode) || listNode.getListType() !== "number") {
+    return;
+  }
+  const alphaList = $createAlphaListNode(listNode.getStart());
+  alphaList.setFormat(listNode.getFormatType());
+  alphaList.setIndent(listNode.getIndent());
+  alphaList.setDirection(listNode.getDirection());
+  alphaList.append(...listNode.getChildren());
+  listNode.replace(alphaList);
+}
+function replaceWithPlainList(listNode, listType) {
+  if (!$isAlphaListNode(listNode) && listNode.getListType() === listType) {
+    return;
+  }
+  const plainList = list.$createListNode(
+    listType,
+    listType === "number" ? listNode.getStart() : 1
+  );
+  plainList.setFormat(listNode.getFormatType());
+  plainList.setIndent(listNode.getIndent());
+  plainList.setDirection(listNode.getDirection());
+  plainList.append(...listNode.getChildren());
+  listNode.replace(plainList);
+}
+function insertAlphaList(editor) {
+  const hasAlphaListSelection = editor.getEditorState().read(
+    () => getSelectedListNodes().some($isAlphaListNode)
+  );
+  if (hasAlphaListSelection) {
+    removeList(editor);
+    return;
+  }
+  editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
+  editor.update(() => {
+    getSelectedListNodes().forEach(replaceWithAlphaList);
+  });
+}
+function normalizeSelectedAlphaLists(editor, listType) {
+  const hasAlphaListSelection = editor.getEditorState().read(
+    () => getSelectedListNodes().some($isAlphaListNode)
+  );
+  if (!hasAlphaListSelection) {
+    return false;
+  }
+  editor.update(() => {
+    getSelectedListNodes().forEach((listNode) => replaceWithPlainList(listNode, listType));
+  });
+  return true;
+}
 function insertList(editor, type) {
-  if (type === "number") {
+  if (type === "alpha") {
+    insertAlphaList(editor);
+  } else if (normalizeSelectedAlphaLists(editor, type)) {
+    return;
+  } else if (type === "number") {
     editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
   } else {
     editor.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND, void 0);
   }
 }
+function removeList(editor) {
+  editor.dispatchCommand(list.REMOVE_LIST_COMMAND, void 0);
+}
 function indentContent(editor) {
   editor.dispatchCommand(lexical.INDENT_CONTENT_COMMAND, void 0);
 }
@@ -2610,7 +2767,7 @@ function VariableChip({
       className,
       "data-testid": `variable-chip-${variableKey}`,
       "data-variable-group": group,
-      title: variableKey,
+      title: label,
       style,
       onMouseDown: handleMouseDown,
       onMouseUp: handleMouseUp,
@@ -3271,6 +3428,154 @@ const CanvasControls = () => {
     )
   ] });
 };
+class OptionalSegmentNode extends lexical.ElementNode {
+  static getType() {
+    return "optional-segment";
+  }
+  static clone(node) {
+    return new OptionalSegmentNode(node.__key);
+  }
+  constructor(key) {
+    super(key);
+  }
+  // -- Serialization --
+  static importJSON(serializedNode) {
+    const node = $createOptionalSegmentNode();
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "optional-segment",
+      version: 1
+    };
+  }
+  // -- DOM --
+  createDOM() {
+    const span = document.createElement("span");
+    span.className = "lex4-optional-segment";
+    span.setAttribute("data-lex4-optional-segment", "true");
+    span.setAttribute("data-testid", "optional-segment");
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const span = document.createElement("span");
+    span.setAttribute("data-lex4-optional-segment", "true");
+    return { element: span };
+  }
+  static importDOM() {
+    return null;
+  }
+  // -- Behavior --
+  isInline() {
+    return true;
+  }
+  canBeEmpty() {
+    return false;
+  }
+  canInsertTextBefore() {
+    return false;
+  }
+  canInsertTextAfter() {
+    return false;
+  }
+  insertNewAfter(_, restoreSelection = true) {
+    const segment = $createOptionalSegmentNode();
+    this.insertAfter(segment, restoreSelection);
+    return segment;
+  }
+  extractWithChild(_child, selection2, _destination) {
+    if (!lexical.$isRangeSelection(selection2)) {
+      return false;
+    }
+    const anchorNode = selection2.anchor.getNode();
+    const focusNode = selection2.focus.getNode();
+    return this.isParentOf(anchorNode) && this.isParentOf(focusNode) && selection2.getTextContent().length > 0;
+  }
+}
+function $createOptionalSegmentNode() {
+  return lexical.$applyNodeReplacement(new OptionalSegmentNode());
+}
+function $isOptionalSegmentNode(node) {
+  return node instanceof OptionalSegmentNode;
+}
+const TOGGLE_OPTIONAL_SEGMENT_COMMAND = lexical.createCommand(
+  "TOGGLE_OPTIONAL_SEGMENT"
+);
+function $getAncestorOptionalSegment(node) {
+  let current = node;
+  while (current !== null) {
+    if ($isOptionalSegmentNode(current)) {
+      return current;
+    }
+    current = typeof current.getParent === "function" ? current.getParent() : null;
+  }
+  return null;
+}
+function $unwrapOptionalSegment(segment) {
+  for (const child of segment.getChildren()) {
+    segment.insertBefore(child);
+  }
+  segment.remove();
+}
+function containsOptionalSegment(node) {
+  if ($isOptionalSegmentNode(node)) {
+    return true;
+  }
+  if (lexical.$isElementNode(node)) {
+    return node.getChildren().some(containsOptionalSegment);
+  }
+  return false;
+}
+function $toggleOptionalSegment() {
+  const selection2 = lexical.$getSelection();
+  if (!lexical.$isRangeSelection(selection2)) {
+    return false;
+  }
+  const anchorSegment = $getAncestorOptionalSegment(selection2.anchor.getNode());
+  const focusSegment = $getAncestorOptionalSegment(selection2.focus.getNode());
+  if (anchorSegment !== null || focusSegment !== null) {
+    if (anchorSegment !== null && focusSegment !== null && anchorSegment !== focusSegment) {
+      return false;
+    }
+    $unwrapOptionalSegment(anchorSegment ?? focusSegment);
+    return true;
+  }
+  if (selection2.isCollapsed()) {
+    return false;
+  }
+  const anchorTop = selection2.anchor.getNode().getTopLevelElement();
+  const focusTop = selection2.focus.getNode().getTopLevelElement();
+  if (anchorTop === null || anchorTop !== focusTop) {
+    return false;
+  }
+  const extracted = selection2.extract();
+  const inlineNodes = extracted.filter((node) => {
+    if (lexical.$isElementNode(node) && !node.isInline()) {
+      return false;
+    }
+    return !node.getParents().some((parent) => extracted.includes(parent));
+  });
+  if (inlineNodes.length === 0) {
+    return false;
+  }
+  if (inlineNodes.some(containsOptionalSegment)) {
+    return false;
+  }
+  const segment = $createOptionalSegmentNode();
+  inlineNodes[0].insertBefore(segment);
+  for (const node of inlineNodes) {
+    segment.append(node);
+  }
+  segment.selectEnd();
+  return true;
+}
 const FORMAT_MASKS = {
   bold: 1,
   italic: 2,
@@ -3303,6 +3608,40 @@ function getElementAlignment(node) {
   }
   return "left";
 }
+function getNearestListNode(node) {
+  if (list.$isListNode(node)) {
+    return node;
+  }
+  return utils.$findMatchingParent(node, list.$isListNode);
+}
+function getNodeActiveList(node) {
+  const listNode = getNearestListNode(node);
+  if (!list.$isListNode(listNode)) {
+    return "none";
+  }
+  if ($isAlphaListNode(listNode)) {
+    return "alpha";
+  }
+  return listNode.getListType() === "number" ? "number" : listNode.getListType() === "bullet" ? "bullet" : "none";
+}
+function getActiveList(nodes, anchorNode) {
+  const activeLists = /* @__PURE__ */ new Set();
+  const anchorList = getNodeActiveList(anchorNode);
+  if (anchorList !== "none") {
+    activeLists.add(anchorList);
+  }
+  for (const node of nodes) {
+    const activeList = getNodeActiveList(node);
+    if (activeList === "none") {
+      continue;
+    }
+    activeLists.add(activeList);
+    if (activeLists.size > 1) {
+      return "none";
+    }
+  }
+  return activeLists.values().next().value ?? "none";
+}
 function getInlineStyleTarget(nodes, anchorNode) {
   if (lexical.$isTextNode(anchorNode) || $isVariableNode(anchorNode)) {
     return anchorNode;
@@ -3330,8 +3669,9 @@ function hasInlineFormat(node, format) {
 function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState()) {
   let snapshot = DEFAULT_TOOLBAR_STYLE_SNAPSHOT;
   editorState.read(() => {
+    var _a;
     const currentSelection = lexical.$getSelection();
-    const selection2 = lexical.$isNodeSelection(currentSelection) ? currentSelection : lexical.$createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
+    const selection2 = lexical.$isNodeSelection(currentSelection) || lexical.$isRangeSelection(currentSelection) ? currentSelection : lexical.$createRangeSelectionFromDom(window.getSelection(), editor) ?? currentSelection;
     if (lexical.$isNodeSelection(selection2)) {
       const variableNodes = selection2.getNodes().filter($isVariableNode);
       if (variableNodes.length === 0) {
@@ -3344,11 +3684,14 @@ function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState())
         fontFamily: normalizeFontFamily(extractFontFamilyFromStyle(style2)),
         fontSize: extractFontSizePtFromStyle(style2) ?? DEFAULT_FONT_SIZE,
         alignment: getElementAlignment(firstVariableNode),
+        activeList: getActiveList(variableNodes, firstVariableNode),
         isBold: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.bold) !== 0),
         isItalic: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.italic) !== 0),
         isUnderline: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.underline) !== 0),
         isStrikethrough: variableNodes.every((node) => (node.getFormat() & FORMAT_MASKS.strikethrough) !== 0),
-        hasSelectedVariable: true
+        hasSelectedVariable: true,
+        hasTextSelection: false,
+        insideOptionalSegment: $getAncestorOptionalSegment(firstVariableNode) !== null
       };
       return;
     }
@@ -3364,11 +3707,14 @@ function readToolbarStyleSnapshot(editor, editorState = editor.getEditorState())
       fontFamily: normalizeFontFamily(extractFontFamilyFromStyle(style)),
       fontSize: extractFontSizePtFromStyle(style) ?? DEFAULT_FONT_SIZE,
       alignment: getElementAlignment(anchorNode),
+      activeList: getActiveList(selection2.getNodes(), anchorNode),
       isBold: selection2.hasFormat("bold") || isCollapsed && hasInlineFormat(inlineStyleTarget, "bold"),
       isItalic: selection2.hasFormat("italic") || isCollapsed && hasInlineFormat(inlineStyleTarget, "italic"),
       isUnderline: selection2.hasFormat("underline") || isCollapsed && hasInlineFormat(inlineStyleTarget, "underline"),
       isStrikethrough: selection2.hasFormat("strikethrough") || isCollapsed && hasInlineFormat(inlineStyleTarget, "strikethrough"),
-      hasSelectedVariable: false
+      hasSelectedVariable: false,
+      hasTextSelection: !isCollapsed,
+      insideOptionalSegment: $getAncestorOptionalSegment(anchorNode) !== null || $getAncestorOptionalSegment(((_a = selection2.focus) == null ? void 0 : _a.getNode()) ?? null) !== null
     };
   });
   return snapshot;
@@ -3394,6 +3740,7 @@ const Toolbar = () => {
   const activeFontFamily = useToolbarStyleStore((state) => state.fontFamily);
   const activeFontSize = useToolbarStyleStore((state) => state.fontSize);
   const activeAlignment = useToolbarStyleStore((state) => state.alignment);
+  const activeList = useToolbarStyleStore((state) => state.activeList);
   const isBoldActive = useToolbarStyleStore((state) => state.isBold);
   const isItalicActive = useToolbarStyleStore((state) => state.isItalic);
   const isUnderlineActive = useToolbarStyleStore((state) => state.isUnderline);
@@ -3422,16 +3769,27 @@ const Toolbar = () => {
   );
   const runToolbarAction = React.useCallback(
     (label, callback) => {
+      const refreshSnapshot = () => {
+        if (!activeEditor) {
+          return;
+        }
+        queueMicrotask(() => {
+          toolbarStyleStore.getState().setSnapshot(readToolbarStyleSnapshot(activeEditor));
+        });
+      };
       runHistoryAction(
         {
           label,
           source: "toolbar",
           region: "document"
         },
-        callback
+        () => {
+          callback();
+          refreshSnapshot();
+        }
       );
     },
-    [runHistoryAction]
+    [activeEditor, runHistoryAction, toolbarStyleStore]
   );
   React.useEffect(() => {
     if (!activeEditor) {
@@ -3524,6 +3882,11 @@ const Toolbar = () => {
       applyToBodyEditors((editor) => insertList(editor, "bullet"));
     });
   }, [applyToBodyEditors, runToolbarAction, t.history.actions.insertedBulletList]);
+  const handleListAlpha = React.useCallback(() => {
+    runToolbarAction(t.history.actions.insertedAlphabeticList, () => {
+      applyToBodyEditors((editor) => insertList(editor, "alpha"));
+    });
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.insertedAlphabeticList]);
   const handleIndent = React.useCallback(() => {
     runToolbarAction(t.history.actions.indentedContent, () => {
       applyToBodyEditors(indentContent);
@@ -3656,8 +4019,9 @@ const Toolbar = () => {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "list-group", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsxRuntime.jsx(ListOrdered, { size: 15 }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsxRuntime.jsx(List, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", active: activeList === "number", onClick: handleListNumber, children: /* @__PURE__ */ jsxRuntime.jsx(ListOrdered, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", active: activeList === "bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsxRuntime.jsx(List, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alphabeticList, testId: "btn-list-alpha", active: activeList === "alpha", onClick: handleListAlpha, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-toolbar-text-icon", children: "a)" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.indent, testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsxRuntime.jsx(ListIndentIncrease, { size: 15 }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.outdent, testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsxRuntime.jsx(ListIndentDecrease, { size: 15 }) })
         ] }),
@@ -4048,7 +4412,7 @@ const lexicalTheme = {
   },
   quote: "lex4-quote"
 };
-const DEFAULT_NODES = [richText.HeadingNode, richText.QuoteNode, list.ListNode, list.ListItemNode];
+const DEFAULT_NODES = [richText.HeadingNode, richText.QuoteNode, list.ListNode, list.ListItemNode, AlphaListNode];
 function createEditorConfig(mode, pageId, extraNodes = [], themeOverrides = {}) {
   const namespace = pageId ? `lex4-${mode}-${pageId}` : `lex4-${mode}`;
   return {
@@ -5608,6 +5972,8 @@ function mapInlineNode(node) {
       return mapVariableNode(node);
     case "linebreak":
       return mapLineBreak();
+    case "optional-segment":
+      return mapOptionalSegment(node);
     default:
       return { type: "text", text: "" };
   }
@@ -5631,6 +5997,12 @@ function mapVariableNode(node) {
 function mapLineBreak() {
   return { type: "linebreak" };
 }
+function mapOptionalSegment(node) {
+  return {
+    type: "optional-segment",
+    children: mapInlineNodes(node.children ?? [])
+  };
+}
 function mapInlineNodes(nodes) {
   return nodes.map(mapInlineNode);
 }
@@ -5666,6 +6038,7 @@ function mapBlockNode(node) {
     case "heading":
       return mapHeading(node);
     case "list":
+    case "alpha-list":
       return mapList(node);
     case "quote":
       return mapBlockQuote(node);
@@ -5699,7 +6072,7 @@ function mapHeading(node) {
   };
 }
 function mapList(node) {
-  const listType = node.listType === "number" ? "ordered" : "unordered";
+  const listType = node.type === "alpha-list" ? "ordered-alpha" : node.listType === "number" ? "ordered" : "unordered";
   const items = (node.children ?? []).filter((c) => c.type === "listitem").map(mapListItem);
   return {
     type: "list",
@@ -5711,7 +6084,7 @@ function mapListItem(node) {
   const inlineChildren = [];
   let nestedList;
   for (const child of node.children ?? []) {
-    if (child.type === "list") {
+    if (child.type === "list" || child.type === "alpha-list") {
       nestedList = mapList(child);
     } else {
       const mapped = mapInlineNodes([child]);
@@ -5855,6 +6228,13 @@ function buildLexicalNode(serializedNode) {
       appendChildren(node, serializedNode.children);
       return node;
     }
+    case "alpha-list": {
+      const node = $createAlphaListNode(
+        typeof serializedNode.start === "number" ? serializedNode.start : 1
+      );
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
     case "listitem": {
       const node = list.$createListItemNode();
       appendChildren(node, serializedNode.children);
@@ -5878,6 +6258,11 @@ function buildLexicalNode(serializedNode) {
         typeof serializedNode.format === "number" ? serializedNode.format : 0,
         typeof serializedNode.style === "string" ? serializedNode.style : ""
       );
+    case "optional-segment": {
+      const node = $createOptionalSegmentNode();
+      appendChildren(node, serializedNode.children);
+      return node;
+    }
     default:
       return null;
   }
@@ -6359,13 +6744,53 @@ const VariablePlugin = () => {
   }, [editor]);
   return null;
 };
+const OptionalSegmentPlugin = () => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const t = useTranslations();
+  React.useEffect(() => {
+    return editor.registerCommand(
+      TOGGLE_OPTIONAL_SEGMENT_COMMAND,
+      () => {
+        let handled = false;
+        editor.update(() => {
+          handled = $toggleOptionalSegment();
+        });
+        return handled;
+      },
+      lexical.COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  React.useEffect(() => {
+    return editor.registerMutationListener(
+      OptionalSegmentNode,
+      (mutations) => {
+        editor.getEditorState().read(() => {
+          for (const [key, mutation] of mutations) {
+            if (mutation === "created" || mutation === "updated") {
+              const element = editor.getElementByKey(key);
+              if (element) {
+                element.title = t.variables.optionalSegmentTooltip;
+              }
+            }
+          }
+        });
+      },
+      { skipInitialization: false }
+    );
+  }, [editor, t.variables.optionalSegmentTooltip]);
+  return null;
+};
 const VariablePanel = ({ open, onClose }) => {
   const { definitions, refreshDefinitions } = useVariables();
   const { activeEditor, runHistoryAction } = useDocument();
   const t = useTranslations();
   const [filter, setFilter] = React.useState("");
+  const [collapsedGroups, setCollapsedGroups] = React.useState({});
   const [creating, setCreating] = React.useState(false);
   const [createError, setCreateError] = React.useState(null);
+  const toggleGroup = React.useCallback((group) => {
+    setCollapsedGroups((current) => ({ ...current, [group]: !current[group] }));
+  }, []);
   const [draft, setDraft] = React.useState({
     label: "",
     key: "",
@@ -6479,23 +6904,50 @@ const VariablePanel = ({ open, onClose }) => {
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-list", children: [
           Object.keys(grouped).length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-list-empty", children: t.variables.noVariablesFound }),
-          Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-group", "data-variable-group": group, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group-label", children: group }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group-items", children: defs.map((def) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+          Object.entries(grouped).map(([group, defs]) => {
+            const isCollapsed = !filter && Boolean(collapsedGroups[group]);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                type: "button",
-                className: "lex4-variable-list-item",
-                "data-testid": `variable-panel-${def.key}`,
+                className: `lex4-variable-group${isCollapsed ? " is-collapsed" : ""}`,
                 "data-variable-group": group,
-                onClick: () => handleInsert(def.key),
-                disabled: !activeEditor,
-                title: def.key,
-                children: def.label
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lex4-variable-group-header",
+                      "data-testid": `variable-panel-group-${group}`,
+                      "aria-expanded": !isCollapsed,
+                      onClick: () => toggleGroup(group),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lex4-variable-group-header-left", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 12, className: "lex4-variable-group-chevron" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-group-label", children: group })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-group-count", children: defs.length })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group-items", children: defs.map((def) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lex4-variable-list-item",
+                      "data-testid": `variable-panel-${def.key}`,
+                      "data-variable-group": group,
+                      onClick: () => handleInsert(def.key),
+                      disabled: !activeEditor,
+                      title: def.key,
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-list-item-label", children: def.label })
+                    },
+                    def.key
+                  )) })
+                ]
               },
-              def.key
-            )) })
-          ] }, group))
+              group
+            );
+          })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-create", children: creating ? /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "lex4-variable-create-form", onSubmit: handleCreateVariable, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-create-title", children: t.variables.createVariableTitle }),
@@ -6621,6 +7073,48 @@ const VariableToolbarToggle = () => {
     }
   );
 };
+const OptionalSegmentToolbarButton = () => {
+  const { activeEditor, runHistoryAction } = useDocument();
+  const toolbarConfig = useToolbarConfig();
+  const t = useTranslations();
+  const hasTextSelection = useToolbarStyleStore((state) => state.hasTextSelection);
+  const insideOptionalSegment = useToolbarStyleStore((state) => state.insideOptionalSegment);
+  if (!toolbarConfig.variables.visible) {
+    return null;
+  }
+  if (!hasTextSelection && !insideOptionalSegment) {
+    return null;
+  }
+  const handleClick = () => {
+    if (!activeEditor) {
+      return;
+    }
+    runHistoryAction(
+      {
+        label: t.history.actions.optionalSegmentToggled,
+        source: "toolbar",
+        region: "document"
+      },
+      () => {
+        activeEditor.dispatchCommand(TOGGLE_OPTIONAL_SEGMENT_COMMAND, void 0);
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      title: t.variables.optionalSegmentToggle,
+      "aria-label": t.variables.optionalSegmentToggle,
+      "aria-pressed": insideOptionalSegment,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: handleClick,
+      className: `lex4-toolbar-btn${insideOptionalSegment ? " active" : ""}`,
+      "data-testid": "btn-optional-segment",
+      children: /* @__PURE__ */ jsxRuntime.jsx(Brackets, { size: 15 })
+    }
+  );
+};
 const VariablePanelWithState = () => {
   const { panelOpen, setPanelOpen } = useVariablePanelState();
   return /* @__PURE__ */ jsxRuntime.jsx(VariablePanel, { open: panelOpen, onClose: () => setPanelOpen(false) });
@@ -6648,8 +7142,9 @@ function variablesExtension(definitions = []) {
   };
   return {
     name: "variables",
-    nodes: [VariableNode],
-    bodyPlugins: [VariablePlugin],
+    nodes: [VariableNode, OptionalSegmentNode],
+    bodyPlugins: [VariablePlugin, OptionalSegmentPlugin],
+    toolbarItems: [OptionalSegmentToolbarButton],
     toolbarEndItems: [VariableToolbarToggle],
     sidePanel: VariablePanelWithState,
     provider: ProviderWrapper,
@@ -6675,7 +7170,9 @@ function variablesExtension(definitions = []) {
     })
   };
 }
+exports.$createOptionalSegmentNode = $createOptionalSegmentNode;
 exports.$createVariableNode = $createVariableNode;
+exports.$isOptionalSegmentNode = $isOptionalSegmentNode;
 exports.$isVariableNode = $isVariableNode;
 exports.A4_HEIGHT_MM = A4_HEIGHT_MM;
 exports.A4_HEIGHT_PX = A4_HEIGHT_PX;
@@ -6687,7 +7184,9 @@ exports.INSERT_VARIABLE_COMMAND = INSERT_VARIABLE_COMMAND;
 exports.Lex4Editor = Lex4Editor;
 exports.MAX_FOOTER_HEIGHT_PX = MAX_FOOTER_HEIGHT_PX;
 exports.MAX_HEADER_HEIGHT_PX = MAX_HEADER_HEIGHT_PX;
+exports.OptionalSegmentNode = OptionalSegmentNode;
 exports.PT_BR_TRANSLATIONS = PT_BR_TRANSLATIONS;
+exports.TOGGLE_OPTIONAL_SEGMENT_COMMAND = TOGGLE_OPTIONAL_SEGMENT_COMMAND;
 exports.VariableNode = VariableNode;
 exports.astExtension = astExtension;
 exports.buildSavePayload = buildSavePayload;