@bug-on/m3-expressive 1.3.2 → 1.3.3

package/dist/layout.mjs

@@ -5861,12 +5861,15 @@ Text.displayName = "Text";
 function TableOfContents({
   items,
   className,
-  scrollAreaProps
+  scrollAreaProps,
+  scrollContainerRef
 }) {
   const [activeId, setActiveId] = useState("");
   const itemIds = useMemo(() => items.map((i) => i.id), [items]);
   useEffect(() => {
+    var _a;
     if (typeof IntersectionObserver === "undefined") return;
+    const root = (_a = scrollContainerRef == null ? void 0 : scrollContainerRef.current) != null ? _a : null;
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
@@ -5874,19 +5877,20 @@ function TableOfContents({
         }
       },
       // rootMargin: top offset ~100px (fixed header), bottom -80% (early switch)
-      { rootMargin: "-100px 0% -80% 0%" }
+      { root, rootMargin: "-100px 0% -80% 0%" }
     );
     for (const id of itemIds) {
       const el = document.getElementById(id);
       if (el) observer.observe(el);
     }
     return () => observer.disconnect();
-  }, [itemIds]);
+  }, [itemIds, scrollContainerRef]);
   const handleClick = useCallback(
     (e, id) => {
-      var _a;
       e.preventDefault();
-      (_a = document.getElementById(id)) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" });
+      const target = document.getElementById(id);
+      if (!target) return;
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
     },
     []
   );
@@ -5903,19 +5907,35 @@ function TableOfContents({
             type: "hover"
           }, scrollAreaProps), {
             className: cn("flex-1 min-h-0", scrollAreaProps == null ? void 0 : scrollAreaProps.className),
-            children: /* @__PURE__ */ jsx("ul", { className: "space-y-4 pr-4", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: `#${item.id}`,
-                onClick: (e) => handleClick(e, item.id),
-                "aria-current": activeId === item.id ? "true" : void 0,
-                className: cn(
-                  "text-sm transition-colors hover:text-m3-primary block",
-                  activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant font-medium"
-                ),
-                children: item.label
-              }
-            ) }, item.id)) })
+            children: /* @__PURE__ */ jsx("ul", { className: "space-y-2 pr-4", children: items.map((item) => {
+              var _a;
+              const depth = (_a = item.depth) != null ? _a : 1;
+              const isSubItem = depth > 1;
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: cn(
+                    isSubItem && "pl-3.5 border-l border-m3-outline-variant/40 ml-1"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `#${item.id}`,
+                      onClick: (e) => handleClick(e, item.id),
+                      "aria-current": activeId === item.id ? "true" : void 0,
+                      className: cn(
+                        "transition-colors hover:text-m3-primary block truncate",
+                        isSubItem ? "text-xs py-0.5 leading-relaxed" : "text-sm py-1 font-medium leading-snug",
+                        activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant"
+                      ),
+                      title: item.label,
+                      children: item.label
+                    }
+                  )
+                },
+                item.id
+              );
+            }) })
           })
         )
       ]