@mieweb/ui 0.3.0-dev.63 → 0.3.0-dev.65

package/dist/index.cjs

@@ -41,7 +41,7 @@ var chunkAUXHRAID_cjs = require('./chunk-AUXHRAID.cjs');
 var chunkZGSPFVGL_cjs = require('./chunk-ZGSPFVGL.cjs');
 var chunkLXHPW2ZF_cjs = require('./chunk-LXHPW2ZF.cjs');
 var chunk4ZU53GNR_cjs = require('./chunk-4ZU53GNR.cjs');
-var chunkR4DM4635_cjs = require('./chunk-R4DM4635.cjs');
+var chunkFSBFQBNE_cjs = require('./chunk-FSBFQBNE.cjs');
 var chunk2O7D6F67_cjs = require('./chunk-2O7D6F67.cjs');
 var chunk6HFFWEM3_cjs = require('./chunk-6HFFWEM3.cjs');
 var chunkNNEFAUHV_cjs = require('./chunk-NNEFAUHV.cjs');
@@ -8383,7 +8383,7 @@ function CommandPaletteProvider({
       open();
     }
   }, [isOpen, open, close]);
-  chunkR4DM4635_cjs.useCommandK(toggle, enableShortcut);
+  chunkFSBFQBNE_cjs.useCommandK(toggle, enableShortcut);
   React48__namespace.default.useEffect(() => {
     if (!customEventName) return;
     const handler = () => open();
@@ -13202,7 +13202,7 @@ function DocumentScanner({
   const [error, setError] = React48__namespace.useState(null);
   const [isWebcamOpen, setIsWebcamOpen] = React48__namespace.useState(false);
   const [validationErrors, setValidationErrors] = React48__namespace.useState([]);
-  const isMobile = chunkR4DM4635_cjs.useIsMobile();
+  const isMobile = chunkFSBFQBNE_cjs.useIsMobile();
   const cameraInputRef = React48__namespace.useRef(null);
   const {
     files,
@@ -34608,7 +34608,7 @@ function SidebarProvider({
   defaultExpandedGroup = null,
   mobileBreakpoint = "(max-width: 1023px)"
 }) {
-  const isMobileViewport = chunkR4DM4635_cjs.useMediaQuery(mobileBreakpoint);
+  const isMobileViewport = chunkFSBFQBNE_cjs.useMediaQuery(mobileBreakpoint);
   const [isCollapsed, setIsCollapsed] = React48.useState(() => {
     if (typeof window !== "undefined" && persistCollapsed) {
       const stored = localStorage.getItem(storageKey);
@@ -37109,6 +37109,185 @@ function StripeSecureBadge({
     }
   );
 }
+function discoverHeadings(container, selector, maxDepth) {
+  const elements = Array.from(container.querySelectorAll(selector));
+  const items = [];
+  for (const el of elements) {
+    if (!el.id) continue;
+    const tagLevel = parseInt(el.tagName.charAt(1), 10);
+    if (isNaN(tagLevel) || tagLevel > maxDepth) continue;
+    items.push({
+      id: el.id,
+      title: el.textContent?.trim() || el.id,
+      level: tagLevel
+    });
+  }
+  return items;
+}
+function nestItems(flat) {
+  if (flat.length === 0) return [];
+  const root = [];
+  const stack = [];
+  for (const item of flat) {
+    const node = { ...item, children: [] };
+    while (stack.length > 0 && stack[stack.length - 1].level >= node.level) {
+      stack.pop();
+    }
+    if (stack.length === 0) {
+      root.push(node);
+    } else {
+      const parent = stack[stack.length - 1];
+      if (!parent.children) parent.children = [];
+      parent.children.push(node);
+    }
+    stack.push(node);
+  }
+  return root;
+}
+function TableOfContents({
+  items: manualItems,
+  selector = "h2, h3",
+  contentRef,
+  activeId: controlledActiveId,
+  onActiveChange,
+  maxDepth = 3,
+  scrollOffset = 0,
+  smooth = true,
+  title,
+  indentLines = true,
+  hideWhenEmpty = true,
+  scrollSpyOptions,
+  className
+}) {
+  const [discoveredItems, setDiscoveredItems] = React48__namespace.useState([]);
+  const flatItems = manualItems ?? discoveredItems;
+  const contentEl = contentRef?.current ?? null;
+  React48__namespace.useEffect(() => {
+    if (manualItems) return;
+    const container = contentEl ?? document;
+    let frameId = null;
+    function discover() {
+      const next = discoverHeadings(container, selector, maxDepth);
+      setDiscoveredItems((prev) => {
+        if (prev.length === next.length && prev.every(
+          (p, i) => p.id === next[i].id && p.title === next[i].title && p.level === next[i].level
+        )) {
+          return prev;
+        }
+        return next;
+      });
+    }
+    function scheduleDiscover() {
+      if (frameId !== null) return;
+      frameId = requestAnimationFrame(() => {
+        frameId = null;
+        discover();
+      });
+    }
+    discover();
+    const observer = new MutationObserver(scheduleDiscover);
+    const target = container instanceof HTMLElement ? container : document.body;
+    observer.observe(target, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      if (frameId !== null) cancelAnimationFrame(frameId);
+    };
+  }, [manualItems, selector, maxDepth, contentEl]);
+  const ids = React48__namespace.useMemo(() => flatItems.map((i) => i.id), [flatItems]);
+  const isControlled = controlledActiveId !== void 0;
+  const { activeId: spyActiveId } = chunkFSBFQBNE_cjs.useScrollSpy({
+    ids,
+    root: contentRef,
+    enabled: !isControlled && ids.length > 0,
+    ...scrollSpyOptions
+  });
+  const activeId = isControlled ? controlledActiveId : spyActiveId;
+  React48__namespace.useEffect(() => {
+    if (!isControlled && onActiveChange) {
+      onActiveChange(spyActiveId);
+    }
+  }, [spyActiveId, isControlled, onActiveChange]);
+  const handleClick = React48__namespace.useCallback(
+    (e, id) => {
+      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
+      }
+      e.preventDefault();
+      const target = document.getElementById(id);
+      if (!target) return;
+      const scrollContainer = contentEl;
+      const behavior = smooth ? "smooth" : "auto";
+      if (scrollContainer) {
+        const top = target.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop - scrollOffset;
+        scrollContainer.scrollTo({ top, behavior });
+      } else {
+        const top = target.getBoundingClientRect().top + window.scrollY - scrollOffset;
+        window.scrollTo({ top, behavior });
+      }
+      window.history.pushState(null, "", `#${id}`);
+    },
+    [contentEl, scrollOffset, smooth]
+  );
+  const tree = React48__namespace.useMemo(() => nestItems(flatItems), [flatItems]);
+  if (hideWhenEmpty && tree.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": "Table of contents", className: chunkOR5DRJCW_cjs.cn("text-sm", className), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground mb-3 font-semibold", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TocList,
+      {
+        items: tree,
+        activeId,
+        onClickItem: handleClick,
+        depth: 0,
+        indentLines
+      }
+    )
+  ] });
+}
+function TocList({
+  items,
+  activeId,
+  onClickItem,
+  depth,
+  indentLines
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      className: chunkOR5DRJCW_cjs.cn(
+        "space-y-1",
+        depth > 0 && indentLines && "border-border ml-3 border-l pl-3",
+        depth > 0 && !indentLines && "ml-4"
+      ),
+      children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: `#${item.id}`,
+            onClick: (e) => onClickItem(e, item.id),
+            "aria-current": activeId === item.id ? "location" : void 0,
+            className: chunkOR5DRJCW_cjs.cn(
+              "block rounded-sm px-2 py-1 transition-colors duration-150",
+              "hover:text-foreground",
+              activeId === item.id ? "text-primary font-medium" : "text-muted-foreground"
+            ),
+            children: item.title
+          }
+        ),
+        item.children && item.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          TocList,
+          {
+            items: item.children,
+            activeId,
+            onClickItem,
+            depth: depth + 1,
+            indentLines
+          }
+        )
+      ] }, item.id))
+    }
+  );
+}
 function TimelineProgress({
   steps,
   currentStep,
@@ -39068,39 +39247,43 @@ Object.defineProperty(exports, "validatePhoneNumber", {
 });
 Object.defineProperty(exports, "useCommandK", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useCommandK; }
+  get: function () { return chunkFSBFQBNE_cjs.useCommandK; }
 });
 Object.defineProperty(exports, "useIsDesktop", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useIsDesktop; }
+  get: function () { return chunkFSBFQBNE_cjs.useIsDesktop; }
 });
 Object.defineProperty(exports, "useIsLargeDesktop", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useIsLargeDesktop; }
+  get: function () { return chunkFSBFQBNE_cjs.useIsLargeDesktop; }
 });
 Object.defineProperty(exports, "useIsMobile", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useIsMobile; }
+  get: function () { return chunkFSBFQBNE_cjs.useIsMobile; }
 });
 Object.defineProperty(exports, "useIsMobileOrTablet", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useIsMobileOrTablet; }
+  get: function () { return chunkFSBFQBNE_cjs.useIsMobileOrTablet; }
 });
 Object.defineProperty(exports, "useIsSmallTablet", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useIsSmallTablet; }
+  get: function () { return chunkFSBFQBNE_cjs.useIsSmallTablet; }
 });
 Object.defineProperty(exports, "useIsTablet", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useIsTablet; }
+  get: function () { return chunkFSBFQBNE_cjs.useIsTablet; }
 });
 Object.defineProperty(exports, "useKeyboardShortcut", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useKeyboardShortcut; }
+  get: function () { return chunkFSBFQBNE_cjs.useKeyboardShortcut; }
 });
 Object.defineProperty(exports, "useMediaQuery", {
   enumerable: true,
-  get: function () { return chunkR4DM4635_cjs.useMediaQuery; }
+  get: function () { return chunkFSBFQBNE_cjs.useMediaQuery; }
+});
+Object.defineProperty(exports, "useScrollSpy", {
+  enumerable: true,
+  get: function () { return chunkFSBFQBNE_cjs.useScrollSpy; }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
@@ -39470,6 +39653,7 @@ exports.StepIndicator = StepIndicator;
 exports.StripeBadge = StripeBadge;
 exports.StripeSecureBadge = StripeSecureBadge;
 exports.SuggestedActions = SuggestedActions;
+exports.TableOfContents = TableOfContents;
 exports.TimelineEventList = TimelineEventList;
 exports.TimelineProgress = TimelineProgress;
 exports.Toast = Toast;