@mieweb/ui 0.11.0-dev.25 → 0.11.0-dev.27

package/dist/{chunk-UTSRPQ5B.js → chunk-UWHVSRSU.js}

@@ -1,5 +1,5 @@
 import { Separator } from './chunk-OQWZYKJM.js';
-import { Dropdown, DropdownSeparator, DropdownLabel, DropdownItem } from './chunk-OYUIEJPN.js';
+import { Dropdown, DropdownSeparator, DropdownLabel, DropdownItem, DropdownSubmenu } from './chunk-OYUIEJPN.js';
 import { isHtmlEmpty } from './chunk-ERLPVXOV.js';
 import { Input } from './chunk-3IMM2PM4.js';
 import { X, Search, History, BookOpen, ChevronRight, ChevronDown, Plus } from './chunk-BKSPDTX4.js';
@@ -19,11 +19,7 @@ var DEFAULT_LABELS = {
   empty: "No macros available",
   emptyHint: "The application has not provided a macro list.",
   noResults: "No macros match",
-  clearSearch: "Clear search",
-  showFullContent: "Show full content",
-  hideFullContent: "Hide full content",
-  more: "more",
-  less: "less"
+  clearSearch: "Clear search"
 };
 function matchesQuery(macro, query) {
   const q = query.toLowerCase();
@@ -37,131 +33,6 @@ function rankMacros(macros, query) {
     (a, b) => Number(isShortcutHit(b, query)) - Number(isShortcutHit(a, query))
   );
 }
-function MacroRow({
-  macro,
-  isPrevious,
-  isPeeked,
-  peekId,
-  labels,
-  onSelect,
-  onTogglePeek,
-  onRowKeyDown
-}) {
-  const [truncated, setTruncated] = React2.useState(false);
-  const rowRef = React2.useRef(null);
-  const lessRef = React2.useRef(null);
-  const focusAfterToggle = React2.useRef(false);
-  React2.useEffect(() => {
-    if (!focusAfterToggle.current) return;
-    focusAfterToggle.current = false;
-    (isPeeked ? lessRef.current : rowRef.current)?.focus();
-  }, [isPeeked]);
-  const handleToggle = () => {
-    focusAfterToggle.current = true;
-    onTogglePeek();
-  };
-  const previewObserver = React2.useRef(null);
-  const measurePreview = (el) => {
-    previewObserver.current?.disconnect();
-    previewObserver.current = null;
-    if (!el) return;
-    const measure = () => setTruncated(el.scrollHeight > el.clientHeight);
-    measure();
-    if (typeof ResizeObserver !== "undefined") {
-      previewObserver.current = new ResizeObserver(measure);
-      previewObserver.current.observe(el);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "macro-library-item",
-      className: "group/macro hover:bg-muted/60 relative rounded-md",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            "data-macro-row": true,
-            ref: rowRef,
-            className: "focus-visible:ring-ring text-foreground hover:text-primary flex w-full cursor-pointer flex-col items-stretch gap-0.5 rounded-md px-2 py-1.5 text-start focus-visible:ring-2 focus-visible:outline-none",
-            onClick: () => onSelect(macro),
-            onKeyDown: onRowKeyDown,
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                macro.shortcut && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    dir: "ltr",
-                    className: cn(
-                      "border-border bg-background text-muted-foreground rounded border px-1 font-mono text-[11px]",
-                      isPrevious && "border-warning-300 bg-warning-50 text-warning-800 dark:border-warning-700 dark:bg-warning-950 dark:text-warning-300"
-                    ),
-                    children: macro.shortcut
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: macro.label })
-              ] }),
-              !isPeeked && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  ref: measurePreview,
-                  className: "text-muted-foreground line-clamp-2 text-xs break-words",
-                  children: macro.content
-                }
-              )
-            ]
-          }
-        ),
-        isPeeked && /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: peekId,
-            "data-slot": "macro-library-peek",
-            className: "text-muted-foreground px-2 pb-1 text-xs break-words whitespace-pre-line",
-            children: macro.content
-          }
-        ),
-        truncated && !isPeeked && // Overlays the end of the clamped second line; revealed on row
-        // hover or keyboard focus so short rows stay entirely clean. Always
-        // visible on devices without hover (touch).
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "bg-muted text-muted-foreground hover:text-primary focus-visible:ring-ring invisible absolute end-1.5 bottom-1.5 flex cursor-pointer items-center rounded-sm px-1 text-[11px] leading-4 group-focus-within/macro:visible group-hover/macro:visible hover:underline focus-visible:ring-2 focus-visible:outline-none [@media(hover:none)]:visible",
-            "aria-expanded": false,
-            "aria-label": `${labels.showFullContent}: ${macro.label}`,
-            onClick: handleToggle,
-            children: [
-              labels.more,
-              /* @__PURE__ */ jsx(
-                ChevronRight,
-                {
-                  "aria-hidden": "true",
-                  className: "h-3 w-3 rtl:-scale-x-100"
-                }
-              )
-            ]
-          }
-        ),
-        isPeeked && /* @__PURE__ */ jsx("span", { className: "-mt-1 flex justify-end px-2 pb-1", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            ref: lessRef,
-            className: "text-muted-foreground hover:text-primary focus-visible:ring-ring cursor-pointer rounded text-[11px] hover:underline focus-visible:ring-2 focus-visible:outline-none",
-            "aria-expanded": true,
-            "aria-controls": peekId,
-            "aria-label": `${labels.hideFullContent}: ${macro.label}`,
-            onClick: handleToggle,
-            children: labels.less
-          }
-        ) })
-      ]
-    }
-  );
-}
 var MacroLibrary = React2.forwardRef(
   function MacroLibrary2({
     groups,
@@ -179,7 +50,6 @@ var MacroLibrary = React2.forwardRef(
     const [collapsed, setCollapsed] = React2.useState(
       {}
     );
-    const [peeked, setPeeked] = React2.useState(null);
     const listRef = React2.useRef(null);
     const searchRef = React2.useRef(null);
     const panelId = React2.useId();
@@ -381,23 +251,32 @@ var MacroLibrary = React2.forwardRef(
                                 ]
                               }
                             ),
-                            !isCollapsed && group.macros.map((macro) => {
-                              const isPeeked = peeked === macro.id;
-                              return /* @__PURE__ */ jsx(
-                                MacroRow,
-                                {
-                                  macro,
-                                  isPrevious,
-                                  isPeeked,
-                                  peekId: `${panelId}-peek-${macro.id}`,
-                                  labels,
-                                  onSelect,
-                                  onTogglePeek: () => setPeeked(isPeeked ? null : macro.id),
-                                  onRowKeyDown: handleRowKeyDown
-                                },
-                                macro.id
-                              );
-                            })
+                            !isCollapsed && group.macros.map((macro) => /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                "data-macro-row": true,
+                                "data-slot": "macro-library-item",
+                                className: "focus-visible:ring-ring text-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 focus-visible:ring-2 focus-visible:outline-none",
+                                onClick: () => onSelect(macro),
+                                onKeyDown: handleRowKeyDown,
+                                children: [
+                                  macro.shortcut && /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      dir: "ltr",
+                                      className: cn(
+                                        "border-border bg-background text-muted-foreground rounded border px-1 font-mono text-[11px]",
+                                        isPrevious && "border-warning-300 bg-warning-50 text-warning-800 dark:border-warning-700 dark:bg-warning-950 dark:text-warning-300"
+                                      ),
+                                      children: macro.shortcut
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: macro.label })
+                                ]
+                              },
+                              macro.id
+                            ))
                           ]
                         },
                         group.id
@@ -583,6 +462,7 @@ var RichTextEditor = React2.forwardRef(
     blockMenu = false,
     blockMenuLabels,
     markdownShortcuts = false,
+    chromeless = false,
     "aria-label": ariaLabel
   }, ref) => {
     const editorRef = React2.useRef(null);
@@ -596,6 +476,9 @@ var RichTextEditor = React2.forwardRef(
     const macroPanelId = React2.useId();
     const hasVariables = Boolean(variableGroups && variableGroups.length > 0);
     const hasMacros = Boolean(macros);
+    const hasMacroEntries = Boolean(
+      macros?.some((group) => group.macros.length > 0)
+    );
     const isEmpty = isHtmlEmpty(value);
     const [uncontrolledToolbar, setUncontrolledToolbar] = React2.useState(defaultToolbar);
     const toolbarVisible = (toolbar ?? uncontrolledToolbar) !== "hidden";
@@ -605,9 +488,36 @@ var RichTextEditor = React2.forwardRef(
     };
     const toolbarVisibleRef = React2.useRef(toolbarVisible);
     const [blockMenuOpen, setBlockMenuOpen] = React2.useState(false);
-    const [gutterTop, setGutterTop] = React2.useState(16);
+    const [gutterTop, setGutterTop] = React2.useState(chromeless ? 7 : 16);
     const gutterWrapperRef = React2.useRef(null);
+    const measureRestGutterTop = React2.useCallback(() => {
+      const fallback = chromeless ? 7 : 16;
+      if (!editorRef.current) return fallback;
+      const padding = parseFloat(
+        getComputedStyle(editorRef.current).paddingTop
+      );
+      return Number.isNaN(padding) ? fallback : Math.round(padding);
+    }, [chromeless]);
+    React2.useLayoutEffect(() => {
+      if (!blockMenu || !editorRef.current) return;
+      setGutterTop((current) => {
+        const next = measureRestGutterTop();
+        return current === next ? current : next;
+      });
+    }, [blockMenu, measureRestGutterTop]);
     const hoverBlockNodeRef = React2.useRef(null);
+    const resetGutter = React2.useCallback(() => {
+      hoverBlockNodeRef.current = null;
+      const next = measureRestGutterTop();
+      setGutterTop((current) => current === next ? current : next);
+    }, [measureRestGutterTop]);
+    const reconcileGutterWithContent = React2.useCallback(() => {
+      if (!blockMenu || !editorRef.current) return;
+      const hovered = hoverBlockNodeRef.current;
+      if (hovered && !editorRef.current.contains(hovered) || !editorRef.current.hasChildNodes()) {
+        resetGutter();
+      }
+    }, [blockMenu, resetGutter]);
     const blockTargetRangeRef = React2.useRef(null);
     const firstBlockItemRef = React2.useRef(null);
     React2.useImperativeHandle(ref, () => editorRef.current);
@@ -636,10 +546,12 @@ var RichTextEditor = React2.forwardRef(
     React2.useEffect(() => {
       if (editorRef.current && editorRef.current.innerHTML !== value) {
         editorRef.current.innerHTML = value;
+        reconcileGutterWithContent();
       }
-    }, [value]);
+    }, [value, reconcileGutterWithContent]);
     const updateContent = () => {
       if (editorRef.current) onChange(editorRef.current.innerHTML);
+      reconcileGutterWithContent();
     };
     const insertSanitized = (html) => {
       if (!sanitizeHtml) return false;
@@ -882,7 +794,10 @@ var RichTextEditor = React2.forwardRef(
           top = rect.top;
         }
       }
-      if (!target || top === null) return;
+      if (!target || top === null) {
+        resetGutter();
+        return;
+      }
       hoverBlockNodeRef.current = target;
       const wrapperTop = gutterWrapperRef.current.getBoundingClientRect().top;
       const next = Math.max(Math.round(top - wrapperTop), 4);
@@ -1093,8 +1008,10 @@ var RichTextEditor = React2.forwardRef(
       "div",
       {
         "data-slot": "rich-text-editor",
+        "data-chromeless": chromeless || void 0,
         className: cn(
-          "border-border bg-background flex flex-col overflow-hidden rounded-lg border",
+          "bg-background flex flex-col",
+          !chromeless && "border-border overflow-hidden rounded-lg border",
           className
         ),
         children: [
@@ -1378,20 +1295,62 @@ var RichTextEditor = React2.forwardRef(
                               item.key
                             )),
                             /* @__PURE__ */ jsx(DropdownSeparator, {}),
-                            hasMacros && /* @__PURE__ */ jsx(
-                              DropdownItem,
-                              {
-                                onClick: () => {
-                                  setBlockMenuOpen(false);
-                                  if (blockTargetRangeRef.current) {
-                                    savedRangeRef.current = blockTargetRangeRef.current;
-                                  }
-                                  setMacrosOpen(true);
-                                  focusRestoringSelection();
-                                },
-                                children: blockMenuLabels?.insertMacro ?? "Insert macro\u2026"
-                              }
-                            ),
+                            hasMacros && macros && /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx(
+                                DropdownSubmenu,
+                                {
+                                  label: blockMenuLabels?.insertMacro ?? "Insert macro",
+                                  disabled: !hasMacroEntries,
+                                  children: blockMenuOpen && macros.flatMap((group) => [
+                                    // Group headings only earn their row when there
+                                    // is more than one group to tell apart.
+                                    ...macros.length > 1 ? [
+                                      /* @__PURE__ */ jsx(DropdownLabel, { children: group.label }, `h:${group.id}`)
+                                    ] : [],
+                                    ...group.macros.map((macro) => /* @__PURE__ */ jsx(
+                                      DropdownItem,
+                                      {
+                                        className: "[&>[data-slot=dropdown-item-label]]:min-w-0 [&>[data-slot=dropdown-item-label]]:flex-1",
+                                        onClick: () => {
+                                          setBlockMenuOpen(false);
+                                          if (blockTargetRangeRef.current) {
+                                            savedRangeRef.current = blockTargetRangeRef.current;
+                                          }
+                                          insertMacro(macro);
+                                        },
+                                        children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                                          macro.shortcut && /* @__PURE__ */ jsx(
+                                            "span",
+                                            {
+                                              dir: "ltr",
+                                              className: "border-border bg-background text-muted-foreground rounded border px-1 font-mono text-[11px]",
+                                              children: macro.shortcut
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: macro.label })
+                                        ] })
+                                      },
+                                      `m:${JSON.stringify([group.id, macro.id])}`
+                                    ))
+                                  ])
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                DropdownItem,
+                                {
+                                  onClick: () => {
+                                    setBlockMenuOpen(false);
+                                    if (blockTargetRangeRef.current) {
+                                      savedRangeRef.current = blockTargetRangeRef.current;
+                                    }
+                                    setMacrosOpen(true);
+                                    focusRestoringSelection();
+                                  },
+                                  children: blockMenuLabels?.showMacroLibrary ?? "Show macro library"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(DropdownSeparator, {})
+                            ] }),
                             /* @__PURE__ */ jsx(
                               DropdownItem,
                               {
@@ -1415,7 +1374,12 @@ var RichTextEditor = React2.forwardRef(
                     {
                       "aria-hidden": "true",
                       className: cn(
-                        "text-muted-foreground pointer-events-none absolute start-0 top-0 p-4",
+                        "text-muted-foreground pointer-events-none absolute start-0 top-0",
+                        // Chromeless hosts drop the wrapper's clipping, so a long
+                        // placeholder must stay a single ellipsized line (as a
+                        // 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"
                       ),
                       children: placeholder
@@ -1429,6 +1393,7 @@ var RichTextEditor = React2.forwardRef(
                       "aria-multiline": "true",
                       "aria-label": ariaLabel ?? placeholder,
                       contentEditable: !disabled,
+                      "data-macros-open": hasMacros && macrosOpen ? "" : void 0,
                       tabIndex: disabled ? -1 : 0,
                       onInput: updateContent,
                       onPaste: handlePaste,
@@ -1438,7 +1403,11 @@ var RichTextEditor = React2.forwardRef(
                       onKeyUp: hasMacros ? saveSelection : void 0,
                       onMouseUp: hasMacros ? saveSelection : void 0,
                       className: cn(
-                        "min-h-[250px] overflow-y-auto p-4 focus:outline-none",
+                        "overflow-y-auto focus:outline-none",
+                        // Chromeless surfaces start one Input row tall (Textarea md
+                        // metrics: 24px line + 7px padding + the host's 1px borders
+                        // = h-10) and auto-grow with content.
+                        chromeless ? "min-h-[38px] px-3 py-[7px] text-base" : "min-h-[250px] p-4",
                         "prose prose-sm max-w-none",
                         // Baseline block styles: Tailwind preflight strips heading,
                         // list and quote styling, and the `prose` classes above only
@@ -1485,5 +1454,5 @@ var RichTextEditor = React2.forwardRef(
 RichTextEditor.displayName = "RichTextEditor";
 
 export { MacroLibrary, RichTextEditor, convertAngleBracketsToMustache, processDictation };
-//# sourceMappingURL=chunk-UTSRPQ5B.js.map
-//# sourceMappingURL=chunk-UTSRPQ5B.js.map
+//# sourceMappingURL=chunk-UWHVSRSU.js.map
+//# sourceMappingURL=chunk-UWHVSRSU.js.map