@mieweb/ui 0.11.0-dev.29 → 0.11.0-dev.30

package/dist/{chunk-43QBEF6N.js → chunk-QR7B6UPR.js}

@@ -1,9 +1,11 @@
+import { useMessages } from './chunk-5YOT4DVH.js';
 import { Separator } from './chunk-OQWZYKJM.js';
 import { Dropdown, DropdownSeparator, DropdownLabel, DropdownItem, DropdownSubmenu } from './chunk-OYUIEJPN.js';
 import { Input } from './chunk-3IMM2PM4.js';
 import { isHtmlEmpty } from './chunk-ERLPVXOV.js';
 import { X, Search, History, BookOpen, ChevronRight, ChevronDown, Plus } from './chunk-BKSPDTX4.js';
 import { Button } from './chunk-WFBUBT54.js';
+import { AnimatedPresence, Animated } from './chunk-F4N67NAF.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React2 from 'react';
 import { Bold, Italic, Underline, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Braces, Replace, MicOff, Mic, BookOpen as BookOpen$1, Plus as Plus$1 } from 'lucide-react';
@@ -19,8 +21,10 @@ var DEFAULT_LABELS = {
   empty: "No macros available",
   emptyHint: "The application has not provided a macro list.",
   noResults: "No macros match",
-  clearSearch: "Clear search"
+  clearSearch: "Clear search",
+  showMore: "Show {count} more"
 };
+var PREVIEW_COUNT = 4;
 function matchesQuery(macro, query) {
   const q = query.toLowerCase();
   return macro.label.toLowerCase().includes(q) || (macro.shortcut ?? "").toLowerCase().includes(q) || (macro.keywords ?? []).some((k) => k.toLowerCase().includes(q)) || macro.content.toLowerCase().includes(q);
@@ -42,6 +46,7 @@ var MacroLibrary = React2.forwardRef(
     onClose,
     onCreateMacro,
     autoFocusSearch = false,
+    compact = false,
     className,
     labels: labelOverrides
   }, ref) {
@@ -50,6 +55,7 @@ var MacroLibrary = React2.forwardRef(
     const [collapsed, setCollapsed] = React2.useState(
       {}
     );
+    const [expanded, setExpanded] = React2.useState({});
     const listRef = React2.useRef(null);
     const searchRef = React2.useRef(null);
     const panelId = React2.useId();
@@ -112,6 +118,18 @@ var MacroLibrary = React2.forwardRef(
         moveFocus(-1);
       }
     };
+    const expandGroup = (groupId) => {
+      setExpanded((prev) => ({ ...prev, [groupId]: true }));
+      requestAnimationFrame(() => {
+        const groupEl = Array.from(
+          listRef.current?.querySelectorAll(
+            '[data-slot="macro-library-group"]'
+          ) ?? []
+        ).find((el) => el.dataset.groupId === groupId);
+        const rows = groupEl?.querySelectorAll("[data-macro-row]");
+        rows?.[PREVIEW_COUNT]?.focus();
+      });
+    };
     return (
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- keydown only delegates Escape-to-close from focusable children
       /* @__PURE__ */ jsxs(
@@ -125,7 +143,7 @@ var MacroLibrary = React2.forwardRef(
           className: cn("bg-muted/20 flex min-h-0 flex-col", className),
           onKeyDown: handlePanelKeyDown,
           children: [
-            /* @__PURE__ */ jsxs(
+            !compact && /* @__PURE__ */ jsxs(
               "div",
               {
                 "data-slot": "macro-library-header",
@@ -152,7 +170,7 @@ var MacroLibrary = React2.forwardRef(
               }
             ),
             hasMacros ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              !compact && /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ jsx(
                   Search,
                   {
@@ -211,14 +229,17 @@ var MacroLibrary = React2.forwardRef(
                     visibleGroups.map((group) => {
                       const isPrevious = group.kind === "previous";
                       const isCollapsed = !searching && collapsed[group.id] === true;
+                      const isPreview = !searching && expanded[group.id] !== true && group.macros.length > PREVIEW_COUNT;
+                      const visibleMacros = isPreview ? group.macros.slice(0, PREVIEW_COUNT) : group.macros;
                       const GroupIcon = isPrevious ? History : BookOpen;
                       return /* @__PURE__ */ jsxs(
                         "div",
                         {
                           "data-slot": "macro-library-group",
+                          "data-group-id": group.id,
                           "data-kind": group.kind ?? "library",
                           children: [
-                            /* @__PURE__ */ jsxs(
+                            (!compact || isPrevious) && /* @__PURE__ */ jsxs(
                               "button",
                               {
                                 type: "button",
@@ -251,7 +272,7 @@ var MacroLibrary = React2.forwardRef(
                                 ]
                               }
                             ),
-                            !isCollapsed && group.macros.map((macro) => /* @__PURE__ */ jsxs(
+                            !isCollapsed && visibleMacros.map((macro) => /* @__PURE__ */ jsxs(
                               "button",
                               {
                                 type: "button",
@@ -276,7 +297,31 @@ var MacroLibrary = React2.forwardRef(
                                 ]
                               },
                               macro.id
-                            ))
+                            )),
+                            !isCollapsed && isPreview && /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                "data-macro-row": true,
+                                "data-slot": "macro-library-show-more",
+                                className: "focus-visible:ring-ring text-muted-foreground hover:bg-muted/60 hover:text-primary flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-start text-xs font-medium focus-visible:ring-2 focus-visible:outline-none",
+                                onClick: () => expandGroup(group.id),
+                                onKeyDown: handleRowKeyDown,
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    ChevronDown,
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "h-3 w-3"
+                                    }
+                                  ),
+                                  labels.showMore.replace(
+                                    "{count}",
+                                    String(group.macros.length - PREVIEW_COUNT)
+                                  )
+                                ]
+                              }
+                            )
                           ]
                         },
                         group.id
@@ -454,6 +499,9 @@ var RichTextEditor = React2.forwardRef(
     sanitizeHtml,
     macros,
     defaultMacrosOpen = false,
+    macrosOnFocus = false,
+    compactMacros = false,
+    onMacroInsert,
     macroLabels,
     onCreateMacro,
     toolbar,
@@ -473,6 +521,7 @@ var RichTextEditor = React2.forwardRef(
     "aria-invalid": ariaInvalid,
     "aria-required": ariaRequired
   }, ref) => {
+    const m = useMessages();
     const inert = disabled || readOnly;
     const editorRef = React2.useRef(null);
     const [isListening, setIsListening] = React2.useState(false);
@@ -480,11 +529,14 @@ var RichTextEditor = React2.forwardRef(
     const recognitionRef = React2.useRef(null);
     const isListeningRef = React2.useRef(false);
     const shouldRestartRef = React2.useRef(false);
-    const [macrosOpen, setMacrosOpen] = React2.useState(defaultMacrosOpen);
+    const [macrosOpen, setMacrosOpen] = React2.useState(
+      defaultMacrosOpen && !macrosOnFocus
+    );
     const savedRangeRef = React2.useRef(null);
     const macroPanelId = React2.useId();
     const hasVariables = Boolean(variableGroups && variableGroups.length > 0);
     const hasMacros = Boolean(macros);
+    const macrosResting = hasMacros && macrosOnFocus && !macrosOpen;
     const hasMacroEntries = Boolean(
       macros?.some((group) => group.macros.length > 0)
     );
@@ -565,7 +617,17 @@ var RichTextEditor = React2.forwardRef(
     }, [inert]);
     React2.useEffect(() => {
       if (editorRef.current && editorRef.current.innerHTML !== value) {
+        const hadFocus = document.activeElement === editorRef.current;
         editorRef.current.innerHTML = value;
+        if (hadFocus) {
+          const range = document.createRange();
+          range.selectNodeContents(editorRef.current);
+          range.collapse(false);
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+          savedRangeRef.current = range.cloneRange();
+        }
         reconcileGutterWithContent();
       }
     }, [value, reconcileGutterWithContent]);
@@ -669,6 +731,7 @@ var RichTextEditor = React2.forwardRef(
     };
     const insertMacro = (macro) => {
       if (inert || !editorRef.current) return;
+      if (onMacroInsert?.(macro) === true) return;
       focusRestoringSelection();
       insertTextAtSelection(macro.content);
     };
@@ -747,6 +810,21 @@ var RichTextEditor = React2.forwardRef(
       collected.selection.addRange(replaceRange);
       return replaceRange;
     };
+    const deleteSelectedRange = (replaceRange) => {
+      let deleted = false;
+      try {
+        deleted = document.execCommand("delete", false);
+      } catch {
+        deleted = false;
+      }
+      if (!deleted) {
+        replaceRange.deleteContents();
+        replaceRange.collapse(true);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(replaceRange);
+      }
+    };
     const expandTypedShortcut = (event) => {
       if (!macros) return;
       const collected = collectTokenBeforeCaret();
@@ -755,6 +833,14 @@ var RichTextEditor = React2.forwardRef(
       const macro = macros.flatMap((group) => group.macros).find((candidate) => candidate.shortcut?.toLowerCase() === lowered);
       if (!macro) return;
       event.preventDefault();
+      if (onMacroInsert) {
+        deleteSelectedRange(selectCollectedToken(collected));
+        saveSelection();
+        updateContent();
+        if (onMacroInsert(macro) === true) return;
+        insertTextAtSelection(macro.content);
+        return;
+      }
       selectCollectedToken(collected);
       insertTextAtSelection(macro.content);
     };
@@ -764,19 +850,7 @@ var RichTextEditor = React2.forwardRef(
       if (!Object.hasOwn(MARKDOWN_BLOCK_RULES, collected.token)) return false;
       const rule = MARKDOWN_BLOCK_RULES[collected.token];
       event.preventDefault();
-      const replaceRange = selectCollectedToken(collected);
-      let deleted = false;
-      try {
-        deleted = document.execCommand("delete", false);
-      } catch {
-        deleted = false;
-      }
-      if (!deleted) {
-        replaceRange.deleteContents();
-        replaceRange.collapse(true);
-        collected.selection.removeAllRanges();
-        collected.selection.addRange(replaceRange);
-      }
+      deleteSelectedRange(selectCollectedToken(collected));
       try {
         document.execCommand(rule.command, false, rule.value);
       } catch {
@@ -1030,6 +1104,21 @@ var RichTextEditor = React2.forwardRef(
       {
         "data-slot": "rich-text-editor",
         "data-chromeless": chromeless || void 0,
+        onFocus: hasMacros && macrosOnFocus ? () => setMacrosOpen(true) : void 0,
+        onBlur: hasMacros && macrosOnFocus ? (event) => {
+          const related = event.relatedTarget;
+          if (related && event.currentTarget.contains(related)) return;
+          let menu = related?.closest('[role="menu"]');
+          while (menu && menu.id) {
+            const trigger = document.querySelector(
+              `[aria-controls="${globalThis.CSS.escape(menu.id)}"]`
+            );
+            if (!trigger) break;
+            if (event.currentTarget.contains(trigger)) return;
+            menu = trigger.closest('[role="menu"]');
+          }
+          setMacrosOpen(false);
+        } : void 0,
         className: cn(
           "bg-background flex flex-col",
           !chromeless && "border-border overflow-hidden rounded-lg border",
@@ -1051,8 +1140,8 @@ var RichTextEditor = React2.forwardRef(
                     onClick: () => execCommand("bold"),
                     disabled,
                     className: iconButtonClass,
-                    "aria-label": "Bold",
-                    title: "Bold",
+                    "aria-label": m("Bold"),
+                    title: m("Bold"),
                     children: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" })
                   }
                 ),
@@ -1065,8 +1154,8 @@ var RichTextEditor = React2.forwardRef(
                     onClick: () => execCommand("italic"),
                     disabled,
                     className: iconButtonClass,
-                    "aria-label": "Italic",
-                    title: "Italic",
+                    "aria-label": m("Italic"),
+                    title: m("Italic"),
                     children: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" })
                   }
                 ),
@@ -1079,8 +1168,8 @@ var RichTextEditor = React2.forwardRef(
                     onClick: () => execCommand("underline"),
                     disabled,
                     className: iconButtonClass,
-                    "aria-label": "Underline",
-                    title: "Underline",
+                    "aria-label": m("Underline"),
+                    title: m("Underline"),
                     children: /* @__PURE__ */ jsx(Underline, { className: "h-4 w-4" })
                   }
                 ),
@@ -1094,8 +1183,8 @@ var RichTextEditor = React2.forwardRef(
                     onClick: () => execCommand("insertUnorderedList"),
                     disabled,
                     className: iconButtonClass,
-                    "aria-label": "Bullet list",
-                    title: "Bullet list",
+                    "aria-label": m("Bullet list"),
+                    title: m("Bullet list"),
                     children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
                   }
                 ),
@@ -1108,8 +1197,8 @@ var RichTextEditor = React2.forwardRef(
                     onClick: () => execCommand("insertOrderedList"),
                     disabled,
                     className: iconButtonClass,
-                    "aria-label": "Numbered list",
-                    title: "Numbered list",
+                    "aria-label": m("Numbered list"),
+                    title: m("Numbered list"),
                     children: /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" })
                   }
                 ),
@@ -1123,8 +1212,8 @@ var RichTextEditor = React2.forwardRef(
                     onClick: () => execCommand("justifyLeft"),
                     disabled,
                     className: iconButtonClass,
-                    "aria-label": "Align left",
-                    title: "Align left",
+                    "aria-label": m("Align left"),
+                    title: m("Align left"),
                     children: /* @__PURE__ */ jsx(AlignLeft, { className: "h-4 w-4" })
                   }
                 ),
@@ -1137,8 +1226,8 @@ var RichTextEditor = React2.forwardRef(
                     onClick: () => execCommand("justifyCenter"),
                     disabled,
                     className: iconButtonClass,
-                    "aria-label": "Align center",
-                    title: "Align center",
+                    "aria-label": m("Align center"),
+                    title: m("Align center"),
                     children: /* @__PURE__ */ jsx(AlignCenter, { className: "h-4 w-4" })
                   }
                 ),
@@ -1151,8 +1240,8 @@ var RichTextEditor = React2.forwardRef(
                     onClick: () => execCommand("justifyRight"),
                     disabled,
                     className: iconButtonClass,
-                    "aria-label": "Align right",
-                    title: "Align right",
+                    "aria-label": m("Align right"),
+                    title: m("Align right"),
                     children: /* @__PURE__ */ jsx(AlignRight, { className: "h-4 w-4" })
                   }
                 ),
@@ -1175,10 +1264,10 @@ var RichTextEditor = React2.forwardRef(
                           size: "sm",
                           className: "h-8 gap-1 px-2",
                           disabled,
-                          title: "Insert variable",
+                          title: m("Insert variable"),
                           children: [
                             /* @__PURE__ */ jsx(Braces, { className: "h-4 w-4" }),
-                            /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs", children: "Variables" })
+                            /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs", children: m("Variables") })
                           ]
                         }
                       ),
@@ -1206,10 +1295,10 @@ var RichTextEditor = React2.forwardRef(
                       onClick: handleConvertToMustache,
                       disabled,
                       className: "h-8 gap-1 px-2",
-                      title: "Convert <<field>> to {{field}}",
+                      title: m("Convert <<field>> to {{field}}"),
                       children: [
                         /* @__PURE__ */ jsx(Replace, { className: "h-4 w-4" }),
-                        /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs", children: "<< >> to {{ }}" })
+                        /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs", children: m("<< >> to {{ }}") })
                       ]
                     }
                   )
@@ -1228,10 +1317,10 @@ var RichTextEditor = React2.forwardRef(
                         "h-8 gap-1 px-2",
                         isListening && "animate-pulse"
                       ),
-                      title: !speechSupported ? "Speech recognition not supported in this browser" : isListening ? "Stop dictation" : "Start dictation",
+                      title: !speechSupported ? m("Speech recognition not supported in this browser") : isListening ? m("Stop dictation") : m("Start dictation"),
                       children: [
                         isListening ? /* @__PURE__ */ jsx(MicOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" }),
-                        /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs", children: isListening ? "Stop" : "Dictate" })
+                        /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs", children: isListening ? m("Stop") : m("Dictate") })
                       ]
                     }
                   )
@@ -1272,7 +1361,7 @@ var RichTextEditor = React2.forwardRef(
                 ),
                 onMouseMove: blockMenu && !disabled ? handleGutterMouseMove : void 0,
                 children: [
-                  blockMenu && !inert && /* @__PURE__ */ jsx(
+                  blockMenu && !inert && !macrosResting && /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-slot": "rich-text-editor-block-gutter",
@@ -1337,6 +1426,7 @@ var RichTextEditor = React2.forwardRef(
                                           if (blockTargetRangeRef.current) {
                                             savedRangeRef.current = blockTargetRangeRef.current;
                                           }
+                                          focusRestoringSelection();
                                           insertMacro(macro);
                                         },
                                         children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
@@ -1401,7 +1491,7 @@ var RichTextEditor = React2.forwardRef(
                         // native textarea clips its own) instead of wrapping out
                         // of the one-row field.
                         chromeless ? "end-0 truncate px-3 py-[7px] text-base" : "p-4",
-                        blockMenu && "ps-10",
+                        blockMenu && !macrosResting && "ps-10",
                         // Keep the placeholder's font in step with the editable
                         // when the host restyles it (e.g. Textarea's `size`).
                         editorClassName
@@ -1450,8 +1540,15 @@ var RichTextEditor = React2.forwardRef(
                         "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:ps-6",
                         "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:ps-6",
                         "[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:my-2 [&_blockquote]:border-s-4 [&_blockquote]:ps-3",
-                        blockMenu && "ps-10",
-                        hasMacros && macrosOpen && "md:min-h-[400px]",
+                        blockMenu && !macrosResting && "ps-10",
+                        // Tall enough for the docked panel's search plus a few rows
+                        // without forcing the host form to scroll; the compact panel
+                        // is just rows, so it needs far less.
+                        hasMacros && macrosOpen && (compactMacros ? "md:min-h-[140px]" : "md:min-h-[250px]"),
+                        // Focus mode grows the field from one row on focus (and, with
+                        // the block gutter, indents it) — ease the jump instead of
+                        // snapping.
+                        hasMacros && macrosOnFocus && "transition-[min-height,padding] duration-200 ease-out motion-reduce:transition-none",
                         disabled && "bg-muted/20 cursor-not-allowed text-neutral-700 dark:text-neutral-300",
                         editorClassName
                       ),
@@ -1462,22 +1559,38 @@ var RichTextEditor = React2.forwardRef(
                 ]
               }
             ),
-            hasMacros && macrosOpen && /* @__PURE__ */ jsx(
-              MacroLibrary,
+            hasMacros && /* @__PURE__ */ jsx(AnimatedPresence, { children: macrosOpen && /* @__PURE__ */ jsx(
+              Animated,
               {
-                id: macroPanelId,
-                groups: macros,
-                onSelect: insertMacro,
-                targetLabel: ariaLabel ?? placeholder,
-                onClose: () => {
-                  setMacrosOpen(false);
-                  focusRestoringSelection();
-                },
-                onCreateMacro,
-                labels: macroLabels,
-                className: "border-border max-h-72 border-t md:absolute md:inset-y-0 md:end-0 md:max-h-none md:w-72 md:border-s md:border-t-0"
-              }
-            )
+                preset: "menu",
+                mode: "presence",
+                custom: typeof document !== "undefined" && document.dir === "rtl" ? "left" : "right",
+                fallbackClassName: "animate-fade-in",
+                className: "border-border flex max-h-72 flex-col border-t md:absolute md:inset-y-0 md:end-0 md:max-h-none md:w-72 md:border-s md:border-t-0",
+                children: /* @__PURE__ */ jsx(
+                  MacroLibrary,
+                  {
+                    id: macroPanelId,
+                    groups: macros,
+                    onSelect: insertMacro,
+                    targetLabel: ariaLabel ?? placeholder,
+                    onClose: (
+                      // Focus mode: visibility follows focus; a close that
+                      // refocuses the editor would just reopen the panel.
+                      macrosOnFocus ? void 0 : () => {
+                        setMacrosOpen(false);
+                        focusRestoringSelection();
+                      }
+                    ),
+                    onCreateMacro,
+                    labels: macroLabels,
+                    compact: compactMacros,
+                    className: "min-h-0 flex-1"
+                  }
+                )
+              },
+              "macro-panel"
+            ) })
           ] })
         ]
       }
@@ -1487,5 +1600,5 @@ var RichTextEditor = React2.forwardRef(
 RichTextEditor.displayName = "RichTextEditor";
 
 export { MacroLibrary, RichTextEditor, convertAngleBracketsToMustache, processDictation };
-//# sourceMappingURL=chunk-43QBEF6N.js.map
-//# sourceMappingURL=chunk-43QBEF6N.js.map
+//# sourceMappingURL=chunk-QR7B6UPR.js.map
+//# sourceMappingURL=chunk-QR7B6UPR.js.map