morphing-toc 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Antoine Pirard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,174 @@
+# morphing-toc
+
+A React table of contents component that displays minimal vertical lines and morphs into a full navigation menu on hover.
+
+## Features
+
+- Minimal visual footprint with vertical lines
+- Smooth morph animation on hover
+- Auto-extracts headings from DOM
+- Generates unique IDs for headings
+- Smooth scrolling with configurable offset
+- Fully customizable colors and sizes
+- TypeScript support
+- Works with any React framework
+
+## Installation
+
+```bash
+npm install morphing-toc
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `motion` >= 11.0.0
+
+## Quick Start
+
+```tsx
+import { MorphingToc } from 'morphing-toc';
+
+function BlogPost() {
+  return (
+    <div>
+      <MorphingToc />
+      <article>
+        <h1>My Blog Post</h1>
+        <h2>Introduction</h2>
+        <p>...</p>
+        <h2>Main Content</h2>
+        <h3>Subsection</h3>
+        <p>...</p>
+      </article>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Custom CSS class for the container |
+| `scrollOffset` | `number` | `80` | Offset from top when scrolling (px) |
+| `headingLevels` | `number[]` | `[2, 3, 4]` | Which heading levels to include |
+| `skipFirstH1` | `boolean` | `true` | Skip the first h1 (page title) |
+| `containerSelector` | `string` | `undefined` | CSS selector to scope heading search |
+| `colors` | `MorphingTocColors` | See below | Custom color configuration |
+| `sizes` | `MorphingTocSizes` | See below | Custom size configuration |
+
+## Customization
+
+### Custom Colors
+
+```tsx
+<MorphingToc
+  colors={{
+    line: {
+      h1: '#1e40af',
+      h2: '#3b82f6',
+      h3: '#93c5fd',
+    },
+    menu: {
+      background: 'rgba(30, 64, 175, 0.95)',
+      border: 'rgba(59, 130, 246, 0.3)',
+      text: '#ffffff',
+      textHover: '#bfdbfe',
+      itemHover: 'rgba(59, 130, 246, 0.2)',
+    },
+  }}
+/>
+```
+
+### Custom Sizes
+
+```tsx
+<MorphingToc
+  sizes={{
+    lineWidth: {
+      h1: '2rem',
+      h2: '1.5rem',
+      h3: '1rem',
+    },
+    lineHeight: '2px',
+    lineGap: '0.75rem',
+    menuWidth: '20rem',
+  }}
+/>
+```
+
+### Scoped to Container
+
+```tsx
+<MorphingToc
+  containerSelector="#article-content"
+  headingLevels={[2, 3]}
+/>
+```
+
+## Exports
+
+```tsx
+import {
+  MorphingToc,      // Main component
+  useTocItems,      // Hook for heading extraction
+  scrollToSection,  // Scroll utility
+} from 'morphing-toc';
+
+// Type exports
+import type {
+  MorphingTocProps,
+  MorphingTocColors,
+  MorphingTocSizes,
+  TocItem,
+  UseTocItemsOptions,
+} from 'morphing-toc';
+```
+
+## useTocItems Hook
+
+For custom implementations, you can use the `useTocItems` hook directly:
+
+```tsx
+import { useTocItems, scrollToSection } from 'morphing-toc';
+
+function CustomToc() {
+  const items = useTocItems({
+    headingLevels: [2, 3],
+    skipFirstH1: true,
+    containerSelector: '#content',
+  });
+
+  return (
+    <nav>
+      {items.map((item) => (
+        <button
+          key={item.id}
+          onClick={() => scrollToSection(item.id, 80)}
+        >
+          {item.title}
+        </button>
+      ))}
+    </nav>
+  );
+}
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT
+
+## Author
+
+[Antoine Pirard](https://antoinepirard.com)

package/dist/MorphingToc.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { M as MorphingTocProps } from './types-Dol3SnRo.mjs';
+
+declare function MorphingToc({ className, scrollOffset, headingLevels, skipFirstH1, containerSelector, colors, sizes, }: MorphingTocProps): react_jsx_runtime.JSX.Element | null;
+
+export { MorphingToc };

package/dist/MorphingToc.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { M as MorphingTocProps } from './types-Dol3SnRo.js';
+
+declare function MorphingToc({ className, scrollOffset, headingLevels, skipFirstH1, containerSelector, colors, sizes, }: MorphingTocProps): react_jsx_runtime.JSX.Element | null;
+
+export { MorphingToc };

package/dist/MorphingToc.js

@@ -0,0 +1,229 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var react$1 = require('motion/react');
+var useTocItems = require('./useTocItems');
+var scrollToSection = require('./scrollToSection');
+
+function MenuItem({ item, indent, colors, onClick }) {
+  const [isHovered, setIsHovered] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: "block w-full text-left px-2 py-1 rounded text-sm cursor-pointer",
+      style: {
+        paddingLeft: `${8 + indent}px`,
+        color: isHovered ? colors.textHover : colors.text,
+        backgroundColor: isHovered ? colors.itemHover : "transparent"
+      },
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: item.title })
+    }
+  );
+}
+const defaultColors = {
+  line: {
+    h1: "#475569",
+    h2: "#94a3b8",
+    h3: "#cbd5e1",
+    h4: "#cbd5e1",
+    default: "#cbd5e1"
+  },
+  menu: {
+    background: "rgba(255, 255, 255, 0.95)",
+    border: "rgba(203, 213, 225, 0.3)",
+    text: "#475569",
+    textHover: "#0f172a",
+    itemHover: "#f8fafc"
+  }
+};
+const defaultSizes = {
+  lineWidth: {
+    h1: "1.5rem",
+    h2: "1rem",
+    h3: "0.75rem",
+    h4: "0.5rem",
+    default: "0.5rem"
+  },
+  lineHeight: "1px",
+  lineGap: "0.5rem",
+  menuWidth: "16rem"
+};
+function getLineColor(level, colors = {}) {
+  const merged = { ...defaultColors.line, ...colors };
+  switch (level) {
+    case 1:
+      return merged.h1;
+    case 2:
+      return merged.h2;
+    case 3:
+      return merged.h3;
+    case 4:
+      return merged.h4;
+    default:
+      return merged.default;
+  }
+}
+function getLineWidth(level, sizes = {}) {
+  const merged = { ...defaultSizes.lineWidth, ...sizes };
+  switch (level) {
+    case 1:
+      return merged.h1;
+    case 2:
+      return merged.h2;
+    case 3:
+      return merged.h3;
+    case 4:
+      return merged.h4;
+    default:
+      return merged.default;
+  }
+}
+function MorphingToc({
+  className = "",
+  scrollOffset = 80,
+  headingLevels = [2, 3, 4],
+  skipFirstH1 = true,
+  containerSelector,
+  colors = {},
+  sizes = {}
+}) {
+  const [isHovered, setIsHovered] = react.useState(false);
+  const tocItems = useTocItems.useTocItems({
+    headingLevels,
+    skipFirstH1,
+    containerSelector
+  });
+  const mergedColors = {
+    line: { ...defaultColors.line, ...colors.line },
+    menu: { ...defaultColors.menu, ...colors.menu }
+  };
+  const mergedSizes = {
+    lineWidth: { ...defaultSizes.lineWidth, ...sizes.lineWidth },
+    lineHeight: sizes.lineHeight ?? defaultSizes.lineHeight,
+    lineGap: sizes.lineGap ?? defaultSizes.lineGap,
+    menuWidth: sizes.menuWidth ?? defaultSizes.menuWidth
+  };
+  if (tocItems.length === 0) return null;
+  const handleClick = (id) => {
+    scrollToSection.scrollToSection(id, scrollOffset);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `fixed left-0 top-1/2 -translate-y-1/2 z-40 hidden lg:block ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute -left-20 top-1/2 -translate-y-1/2 w-32 h-96",
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.div,
+      {
+        className: "relative",
+        initial: { opacity: 0, x: -20 },
+        animate: { opacity: 1, x: 0 },
+        transition: { duration: 0.3, delay: 0.5 },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2 md:pl-4 lg:pl-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: !isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: {
+                opacity: 0,
+                x: 20,
+                transition: { duration: 0.15, ease: "easeOut" }
+              },
+              transition: { duration: 0.15 },
+              className: "absolute top-1/2 left-0 -translate-y-1/2",
+              style: { display: "flex", flexDirection: "column", gap: mergedSizes.lineGap },
+              children: tocItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.motion.button,
+                {
+                  onClick: () => handleClick(item.id),
+                  className: "block rounded-sm transition-opacity duration-150 hover:opacity-70",
+                  style: {
+                    width: getLineWidth(item.level, mergedSizes.lineWidth),
+                    height: mergedSizes.lineHeight,
+                    backgroundColor: getLineColor(item.level, mergedColors.line)
+                  },
+                  whileTap: { scale: 0.95 },
+                  tabIndex: -1,
+                  animate: {
+                    x: isHovered ? 20 : 0,
+                    transition: {
+                      duration: 0.15,
+                      delay: index * 0.02,
+                      ease: "easeOut"
+                    }
+                  }
+                },
+                item.id
+              ))
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.motion.div,
+            {
+              initial: {
+                opacity: 0,
+                x: -20,
+                scale: 0.9,
+                borderRadius: 0
+              },
+              animate: {
+                opacity: 1,
+                x: 0,
+                scale: 1,
+                borderRadius: 6
+              },
+              exit: {
+                opacity: 0,
+                x: -20,
+                scale: 0.9,
+                transition: { duration: 0.15, ease: "easeOut" }
+              },
+              transition: {
+                duration: 0.2,
+                delay: 0.05,
+                ease: "easeOut"
+              },
+              className: "absolute top-1/2 left-0 -translate-y-1/2 backdrop-blur-sm shadow-md p-3",
+              style: {
+                width: mergedSizes.menuWidth,
+                backgroundColor: mergedColors.menu.background,
+                boxShadow: `0 0 0 1px ${mergedColors.menu.border}`
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "space-y-0.5", children: tocItems.map((item) => {
+                const baseLevel = Math.min(...headingLevels);
+                const indent = (item.level - baseLevel) * 12;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  MenuItem,
+                  {
+                    item,
+                    indent,
+                    colors: mergedColors.menu,
+                    onClick: () => handleClick(item.id)
+                  },
+                  item.id
+                );
+              }) })
+            }
+          ) })
+        ] }) })
+      }
+    )
+  ] });
+}
+
+exports.MorphingToc = MorphingToc;
+//# sourceMappingURL=MorphingToc.js.map
+//# sourceMappingURL=MorphingToc.js.map

package/dist/MorphingToc.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MorphingToc.tsx"],"names":["useState","jsx","useTocItems","scrollToSection","jsxs","motion","AnimatePresence"],"mappings":"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","file":"MorphingToc.js","sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { useTocItems } from './useTocItems';\nimport { scrollToSection } from './scrollToSection';\nimport type { MorphingTocProps, MorphingTocColors, MorphingTocSizes, TocItem } from './types';\n\ninterface MenuItemProps {\n  item: TocItem;\n  indent: number;\n  colors: NonNullable<MorphingTocColors['menu']>;\n  onClick: () => void;\n}\n\nfunction MenuItem({ item, indent, colors, onClick }: MenuItemProps) {\n  const [isHovered, setIsHovered] = useState(false);\n\n  return (\n    <button\n      onClick={onClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className=\"block w-full text-left px-2 py-1 rounded text-sm cursor-pointer\"\n      style={{\n        paddingLeft: `${8 + indent}px`,\n        color: isHovered ? colors.textHover : colors.text,\n        backgroundColor: isHovered ? colors.itemHover : 'transparent',\n      }}\n      tabIndex={-1}\n    >\n      <span className=\"block truncate\">{item.title}</span>\n    </button>\n  );\n}\n\nconst defaultColors: Required<MorphingTocColors> = {\n  line: {\n    h1: '#475569',\n    h2: '#94a3b8',\n    h3: '#cbd5e1',\n    h4: '#cbd5e1',\n    default: '#cbd5e1',\n  },\n  menu: {\n    background: 'rgba(255, 255, 255, 0.95)',\n    border: 'rgba(203, 213, 225, 0.3)',\n    text: '#475569',\n    textHover: '#0f172a',\n    itemHover: '#f8fafc',\n  },\n};\n\nconst defaultSizes: Required<MorphingTocSizes> = {\n  lineWidth: {\n    h1: '1.5rem',\n    h2: '1rem',\n    h3: '0.75rem',\n    h4: '0.5rem',\n    default: '0.5rem',\n  },\n  lineHeight: '1px',\n  lineGap: '0.5rem',\n  menuWidth: '16rem',\n};\n\nfunction getLineColor(level: number, colors: MorphingTocColors['line'] = {}): string {\n  const merged = { ...defaultColors.line, ...colors };\n  switch (level) {\n    case 1:\n      return merged.h1!;\n    case 2:\n      return merged.h2!;\n    case 3:\n      return merged.h3!;\n    case 4:\n      return merged.h4!;\n    default:\n      return merged.default!;\n  }\n}\n\nfunction getLineWidth(level: number, sizes: MorphingTocSizes['lineWidth'] = {}): string {\n  const merged = { ...defaultSizes.lineWidth, ...sizes };\n  switch (level) {\n    case 1:\n      return merged.h1!;\n    case 2:\n      return merged.h2!;\n    case 3:\n      return merged.h3!;\n    case 4:\n      return merged.h4!;\n    default:\n      return merged.default!;\n  }\n}\n\nexport function MorphingToc({\n  className = '',\n  scrollOffset = 80,\n  headingLevels = [2, 3, 4],\n  skipFirstH1 = true,\n  containerSelector,\n  colors = {},\n  sizes = {},\n}: MorphingTocProps) {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const tocItems = useTocItems({\n    headingLevels,\n    skipFirstH1,\n    containerSelector,\n  });\n\n  const mergedColors = {\n    line: { ...defaultColors.line, ...colors.line },\n    menu: { ...defaultColors.menu, ...colors.menu },\n  };\n\n  const mergedSizes = {\n    lineWidth: { ...defaultSizes.lineWidth, ...sizes.lineWidth },\n    lineHeight: sizes.lineHeight ?? defaultSizes.lineHeight,\n    lineGap: sizes.lineGap ?? defaultSizes.lineGap,\n    menuWidth: sizes.menuWidth ?? defaultSizes.menuWidth,\n  };\n\n  if (tocItems.length === 0) return null;\n\n  const handleClick = (id: string) => {\n    scrollToSection(id, scrollOffset);\n  };\n\n  return (\n    <div className={`fixed left-0 top-1/2 -translate-y-1/2 z-40 hidden lg:block ${className}`}>\n      {/* Invisible hover area for better UX */}\n      <div\n        className=\"absolute -left-20 top-1/2 -translate-y-1/2 w-32 h-96\"\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      />\n\n      <motion.div\n        className=\"relative\"\n        initial={{ opacity: 0, x: -20 }}\n        animate={{ opacity: 1, x: 0 }}\n        transition={{ duration: 0.3, delay: 0.5 }}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <div className=\"pl-2 md:pl-4 lg:pl-6\">\n          <div className=\"relative\">\n            {/* Collapsed state: minimal lines */}\n            <AnimatePresence>\n              {!isHovered && (\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{\n                    opacity: 0,\n                    x: 20,\n                    transition: { duration: 0.15, ease: 'easeOut' },\n                  }}\n                  transition={{ duration: 0.15 }}\n                  className=\"absolute top-1/2 left-0 -translate-y-1/2\"\n                  style={{ display: 'flex', flexDirection: 'column', gap: mergedSizes.lineGap }}\n                >\n                  {tocItems.map((item, index) => (\n                    <motion.button\n                      key={item.id}\n                      onClick={() => handleClick(item.id)}\n                      className=\"block rounded-sm transition-opacity duration-150 hover:opacity-70\"\n                      style={{\n                        width: getLineWidth(item.level, mergedSizes.lineWidth),\n                        height: mergedSizes.lineHeight,\n                        backgroundColor: getLineColor(item.level, mergedColors.line),\n                      }}\n                      whileTap={{ scale: 0.95 }}\n                      tabIndex={-1}\n                      animate={{\n                        x: isHovered ? 20 : 0,\n                        transition: {\n                          duration: 0.15,\n                          delay: index * 0.02,\n                          ease: 'easeOut',\n                        },\n                      }}\n                    />\n                  ))}\n                </motion.div>\n              )}\n            </AnimatePresence>\n\n            {/* Expanded state: full menu */}\n            <AnimatePresence>\n              {isHovered && (\n                <motion.div\n                  initial={{\n                    opacity: 0,\n                    x: -20,\n                    scale: 0.9,\n                    borderRadius: 0,\n                  }}\n                  animate={{\n                    opacity: 1,\n                    x: 0,\n                    scale: 1,\n                    borderRadius: 6,\n                  }}\n                  exit={{\n                    opacity: 0,\n                    x: -20,\n                    scale: 0.9,\n                    transition: { duration: 0.15, ease: 'easeOut' },\n                  }}\n                  transition={{\n                    duration: 0.2,\n                    delay: 0.05,\n                    ease: 'easeOut',\n                  }}\n                  className=\"absolute top-1/2 left-0 -translate-y-1/2 backdrop-blur-sm shadow-md p-3\"\n                  style={{\n                    width: mergedSizes.menuWidth,\n                    backgroundColor: mergedColors.menu.background,\n                    boxShadow: `0 0 0 1px ${mergedColors.menu.border}`,\n                  }}\n                >\n                  <nav className=\"space-y-0.5\">\n                    {tocItems.map((item) => {\n                      const baseLevel = Math.min(...headingLevels);\n                      const indent = (item.level - baseLevel) * 12;\n\n                      return (\n                        <MenuItem\n                          key={item.id}\n                          item={item}\n                          indent={indent}\n                          colors={mergedColors.menu}\n                          onClick={() => handleClick(item.id)}\n                        />\n                      );\n                    })}\n                  </nav>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n"]}

package/dist/MorphingToc.mjs

@@ -0,0 +1,227 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { useTocItems } from './useTocItems';
+import { scrollToSection } from './scrollToSection';
+
+function MenuItem({ item, indent, colors, onClick }) {
+  const [isHovered, setIsHovered] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: "block w-full text-left px-2 py-1 rounded text-sm cursor-pointer",
+      style: {
+        paddingLeft: `${8 + indent}px`,
+        color: isHovered ? colors.textHover : colors.text,
+        backgroundColor: isHovered ? colors.itemHover : "transparent"
+      },
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsx("span", { className: "block truncate", children: item.title })
+    }
+  );
+}
+const defaultColors = {
+  line: {
+    h1: "#475569",
+    h2: "#94a3b8",
+    h3: "#cbd5e1",
+    h4: "#cbd5e1",
+    default: "#cbd5e1"
+  },
+  menu: {
+    background: "rgba(255, 255, 255, 0.95)",
+    border: "rgba(203, 213, 225, 0.3)",
+    text: "#475569",
+    textHover: "#0f172a",
+    itemHover: "#f8fafc"
+  }
+};
+const defaultSizes = {
+  lineWidth: {
+    h1: "1.5rem",
+    h2: "1rem",
+    h3: "0.75rem",
+    h4: "0.5rem",
+    default: "0.5rem"
+  },
+  lineHeight: "1px",
+  lineGap: "0.5rem",
+  menuWidth: "16rem"
+};
+function getLineColor(level, colors = {}) {
+  const merged = { ...defaultColors.line, ...colors };
+  switch (level) {
+    case 1:
+      return merged.h1;
+    case 2:
+      return merged.h2;
+    case 3:
+      return merged.h3;
+    case 4:
+      return merged.h4;
+    default:
+      return merged.default;
+  }
+}
+function getLineWidth(level, sizes = {}) {
+  const merged = { ...defaultSizes.lineWidth, ...sizes };
+  switch (level) {
+    case 1:
+      return merged.h1;
+    case 2:
+      return merged.h2;
+    case 3:
+      return merged.h3;
+    case 4:
+      return merged.h4;
+    default:
+      return merged.default;
+  }
+}
+function MorphingToc({
+  className = "",
+  scrollOffset = 80,
+  headingLevels = [2, 3, 4],
+  skipFirstH1 = true,
+  containerSelector,
+  colors = {},
+  sizes = {}
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const tocItems = useTocItems({
+    headingLevels,
+    skipFirstH1,
+    containerSelector
+  });
+  const mergedColors = {
+    line: { ...defaultColors.line, ...colors.line },
+    menu: { ...defaultColors.menu, ...colors.menu }
+  };
+  const mergedSizes = {
+    lineWidth: { ...defaultSizes.lineWidth, ...sizes.lineWidth },
+    lineHeight: sizes.lineHeight ?? defaultSizes.lineHeight,
+    lineGap: sizes.lineGap ?? defaultSizes.lineGap,
+    menuWidth: sizes.menuWidth ?? defaultSizes.menuWidth
+  };
+  if (tocItems.length === 0) return null;
+  const handleClick = (id) => {
+    scrollToSection(id, scrollOffset);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `fixed left-0 top-1/2 -translate-y-1/2 z-40 hidden lg:block ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute -left-20 top-1/2 -translate-y-1/2 w-32 h-96",
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "relative",
+        initial: { opacity: 0, x: -20 },
+        animate: { opacity: 1, x: 0 },
+        transition: { duration: 0.3, delay: 0.5 },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: /* @__PURE__ */ jsx("div", { className: "pl-2 md:pl-4 lg:pl-6", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: !isHovered && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: {
+                opacity: 0,
+                x: 20,
+                transition: { duration: 0.15, ease: "easeOut" }
+              },
+              transition: { duration: 0.15 },
+              className: "absolute top-1/2 left-0 -translate-y-1/2",
+              style: { display: "flex", flexDirection: "column", gap: mergedSizes.lineGap },
+              children: tocItems.map((item, index) => /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  onClick: () => handleClick(item.id),
+                  className: "block rounded-sm transition-opacity duration-150 hover:opacity-70",
+                  style: {
+                    width: getLineWidth(item.level, mergedSizes.lineWidth),
+                    height: mergedSizes.lineHeight,
+                    backgroundColor: getLineColor(item.level, mergedColors.line)
+                  },
+                  whileTap: { scale: 0.95 },
+                  tabIndex: -1,
+                  animate: {
+                    x: isHovered ? 20 : 0,
+                    transition: {
+                      duration: 0.15,
+                      delay: index * 0.02,
+                      ease: "easeOut"
+                    }
+                  }
+                },
+                item.id
+              ))
+            }
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: {
+                opacity: 0,
+                x: -20,
+                scale: 0.9,
+                borderRadius: 0
+              },
+              animate: {
+                opacity: 1,
+                x: 0,
+                scale: 1,
+                borderRadius: 6
+              },
+              exit: {
+                opacity: 0,
+                x: -20,
+                scale: 0.9,
+                transition: { duration: 0.15, ease: "easeOut" }
+              },
+              transition: {
+                duration: 0.2,
+                delay: 0.05,
+                ease: "easeOut"
+              },
+              className: "absolute top-1/2 left-0 -translate-y-1/2 backdrop-blur-sm shadow-md p-3",
+              style: {
+                width: mergedSizes.menuWidth,
+                backgroundColor: mergedColors.menu.background,
+                boxShadow: `0 0 0 1px ${mergedColors.menu.border}`
+              },
+              children: /* @__PURE__ */ jsx("nav", { className: "space-y-0.5", children: tocItems.map((item) => {
+                const baseLevel = Math.min(...headingLevels);
+                const indent = (item.level - baseLevel) * 12;
+                return /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    item,
+                    indent,
+                    colors: mergedColors.menu,
+                    onClick: () => handleClick(item.id)
+                  },
+                  item.id
+                );
+              }) })
+            }
+          ) })
+        ] }) })
+      }
+    )
+  ] });
+}
+
+export { MorphingToc };
+//# sourceMappingURL=MorphingToc.mjs.map
+//# sourceMappingURL=MorphingToc.mjs.map

package/dist/MorphingToc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MorphingToc.tsx"],"names":[],"mappings":"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","file":"MorphingToc.mjs","sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { useTocItems } from './useTocItems';\nimport { scrollToSection } from './scrollToSection';\nimport type { MorphingTocProps, MorphingTocColors, MorphingTocSizes, TocItem } from './types';\n\ninterface MenuItemProps {\n  item: TocItem;\n  indent: number;\n  colors: NonNullable<MorphingTocColors['menu']>;\n  onClick: () => void;\n}\n\nfunction MenuItem({ item, indent, colors, onClick }: MenuItemProps) {\n  const [isHovered, setIsHovered] = useState(false);\n\n  return (\n    <button\n      onClick={onClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className=\"block w-full text-left px-2 py-1 rounded text-sm cursor-pointer\"\n      style={{\n        paddingLeft: `${8 + indent}px`,\n        color: isHovered ? colors.textHover : colors.text,\n        backgroundColor: isHovered ? colors.itemHover : 'transparent',\n      }}\n      tabIndex={-1}\n    >\n      <span className=\"block truncate\">{item.title}</span>\n    </button>\n  );\n}\n\nconst defaultColors: Required<MorphingTocColors> = {\n  line: {\n    h1: '#475569',\n    h2: '#94a3b8',\n    h3: '#cbd5e1',\n    h4: '#cbd5e1',\n    default: '#cbd5e1',\n  },\n  menu: {\n    background: 'rgba(255, 255, 255, 0.95)',\n    border: 'rgba(203, 213, 225, 0.3)',\n    text: '#475569',\n    textHover: '#0f172a',\n    itemHover: '#f8fafc',\n  },\n};\n\nconst defaultSizes: Required<MorphingTocSizes> = {\n  lineWidth: {\n    h1: '1.5rem',\n    h2: '1rem',\n    h3: '0.75rem',\n    h4: '0.5rem',\n    default: '0.5rem',\n  },\n  lineHeight: '1px',\n  lineGap: '0.5rem',\n  menuWidth: '16rem',\n};\n\nfunction getLineColor(level: number, colors: MorphingTocColors['line'] = {}): string {\n  const merged = { ...defaultColors.line, ...colors };\n  switch (level) {\n    case 1:\n      return merged.h1!;\n    case 2:\n      return merged.h2!;\n    case 3:\n      return merged.h3!;\n    case 4:\n      return merged.h4!;\n    default:\n      return merged.default!;\n  }\n}\n\nfunction getLineWidth(level: number, sizes: MorphingTocSizes['lineWidth'] = {}): string {\n  const merged = { ...defaultSizes.lineWidth, ...sizes };\n  switch (level) {\n    case 1:\n      return merged.h1!;\n    case 2:\n      return merged.h2!;\n    case 3:\n      return merged.h3!;\n    case 4:\n      return merged.h4!;\n    default:\n      return merged.default!;\n  }\n}\n\nexport function MorphingToc({\n  className = '',\n  scrollOffset = 80,\n  headingLevels = [2, 3, 4],\n  skipFirstH1 = true,\n  containerSelector,\n  colors = {},\n  sizes = {},\n}: MorphingTocProps) {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const tocItems = useTocItems({\n    headingLevels,\n    skipFirstH1,\n    containerSelector,\n  });\n\n  const mergedColors = {\n    line: { ...defaultColors.line, ...colors.line },\n    menu: { ...defaultColors.menu, ...colors.menu },\n  };\n\n  const mergedSizes = {\n    lineWidth: { ...defaultSizes.lineWidth, ...sizes.lineWidth },\n    lineHeight: sizes.lineHeight ?? defaultSizes.lineHeight,\n    lineGap: sizes.lineGap ?? defaultSizes.lineGap,\n    menuWidth: sizes.menuWidth ?? defaultSizes.menuWidth,\n  };\n\n  if (tocItems.length === 0) return null;\n\n  const handleClick = (id: string) => {\n    scrollToSection(id, scrollOffset);\n  };\n\n  return (\n    <div className={`fixed left-0 top-1/2 -translate-y-1/2 z-40 hidden lg:block ${className}`}>\n      {/* Invisible hover area for better UX */}\n      <div\n        className=\"absolute -left-20 top-1/2 -translate-y-1/2 w-32 h-96\"\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      />\n\n      <motion.div\n        className=\"relative\"\n        initial={{ opacity: 0, x: -20 }}\n        animate={{ opacity: 1, x: 0 }}\n        transition={{ duration: 0.3, delay: 0.5 }}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <div className=\"pl-2 md:pl-4 lg:pl-6\">\n          <div className=\"relative\">\n            {/* Collapsed state: minimal lines */}\n            <AnimatePresence>\n              {!isHovered && (\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{\n                    opacity: 0,\n                    x: 20,\n                    transition: { duration: 0.15, ease: 'easeOut' },\n                  }}\n                  transition={{ duration: 0.15 }}\n                  className=\"absolute top-1/2 left-0 -translate-y-1/2\"\n                  style={{ display: 'flex', flexDirection: 'column', gap: mergedSizes.lineGap }}\n                >\n                  {tocItems.map((item, index) => (\n                    <motion.button\n                      key={item.id}\n                      onClick={() => handleClick(item.id)}\n                      className=\"block rounded-sm transition-opacity duration-150 hover:opacity-70\"\n                      style={{\n                        width: getLineWidth(item.level, mergedSizes.lineWidth),\n                        height: mergedSizes.lineHeight,\n                        backgroundColor: getLineColor(item.level, mergedColors.line),\n                      }}\n                      whileTap={{ scale: 0.95 }}\n                      tabIndex={-1}\n                      animate={{\n                        x: isHovered ? 20 : 0,\n                        transition: {\n                          duration: 0.15,\n                          delay: index * 0.02,\n                          ease: 'easeOut',\n                        },\n                      }}\n                    />\n                  ))}\n                </motion.div>\n              )}\n            </AnimatePresence>\n\n            {/* Expanded state: full menu */}\n            <AnimatePresence>\n              {isHovered && (\n                <motion.div\n                  initial={{\n                    opacity: 0,\n                    x: -20,\n                    scale: 0.9,\n                    borderRadius: 0,\n                  }}\n                  animate={{\n                    opacity: 1,\n                    x: 0,\n                    scale: 1,\n                    borderRadius: 6,\n                  }}\n                  exit={{\n                    opacity: 0,\n                    x: -20,\n                    scale: 0.9,\n                    transition: { duration: 0.15, ease: 'easeOut' },\n                  }}\n                  transition={{\n                    duration: 0.2,\n                    delay: 0.05,\n                    ease: 'easeOut',\n                  }}\n                  className=\"absolute top-1/2 left-0 -translate-y-1/2 backdrop-blur-sm shadow-md p-3\"\n                  style={{\n                    width: mergedSizes.menuWidth,\n                    backgroundColor: mergedColors.menu.background,\n                    boxShadow: `0 0 0 1px ${mergedColors.menu.border}`,\n                  }}\n                >\n                  <nav className=\"space-y-0.5\">\n                    {tocItems.map((item) => {\n                      const baseLevel = Math.min(...headingLevels);\n                      const indent = (item.level - baseLevel) * 12;\n\n                      return (\n                        <MenuItem\n                          key={item.id}\n                          item={item}\n                          indent={indent}\n                          colors={mergedColors.menu}\n                          onClick={() => handleClick(item.id)}\n                        />\n                      );\n                    })}\n                  </nav>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n"]}

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { MorphingToc } from './MorphingToc.mjs';
+export { useTocItems } from './useTocItems.mjs';
+export { scrollToSection } from './scrollToSection.mjs';
+export { a as MorphingTocColors, M as MorphingTocProps, b as MorphingTocSizes, T as TocItem, U as UseTocItemsOptions } from './types-Dol3SnRo.mjs';
+import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { MorphingToc } from './MorphingToc.js';
+export { useTocItems } from './useTocItems.js';
+export { scrollToSection } from './scrollToSection.js';
+export { a as MorphingTocColors, M as MorphingTocProps, b as MorphingTocSizes, T as TocItem, U as UseTocItemsOptions } from './types-Dol3SnRo.js';
+import 'react/jsx-runtime';

package/dist/index.js

@@ -0,0 +1,23 @@
+"use client";
+'use strict';
+
+var MorphingToc = require('./MorphingToc');
+var useTocItems = require('./useTocItems');
+var scrollToSection = require('./scrollToSection');
+
+
+
+Object.defineProperty(exports, "MorphingToc", {
+  enumerable: true,
+  get: function () { return MorphingToc.MorphingToc; }
+});
+Object.defineProperty(exports, "useTocItems", {
+  enumerable: true,
+  get: function () { return useTocItems.useTocItems; }
+});
+Object.defineProperty(exports, "scrollToSection", {
+  enumerable: true,
+  get: function () { return scrollToSection.scrollToSection; }
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/index.mjs

@@ -0,0 +1,6 @@
+"use client";
+export { MorphingToc } from './MorphingToc';
+export { useTocItems } from './useTocItems';
+export { scrollToSection } from './scrollToSection';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}

package/dist/scrollToSection.d.mts

@@ -0,0 +1,3 @@
+declare function scrollToSection(id: string, offset?: number): void;
+
+export { scrollToSection };

package/dist/scrollToSection.d.ts

@@ -0,0 +1,3 @@
+declare function scrollToSection(id: string, offset?: number): void;
+
+export { scrollToSection };

package/dist/scrollToSection.js

@@ -0,0 +1,17 @@
+'use strict';
+
+function scrollToSection(id, offset = 80) {
+  const element = document.getElementById(id);
+  if (element) {
+    const elementPosition = element.getBoundingClientRect().top;
+    const offsetPosition = elementPosition + window.pageYOffset - offset;
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth"
+    });
+  }
+}
+
+exports.scrollToSection = scrollToSection;
+//# sourceMappingURL=scrollToSection.js.map
+//# sourceMappingURL=scrollToSection.js.map

package/dist/scrollToSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scrollToSection.ts"],"names":[],"mappings":";;AAAO,SAAS,eAAA,CAAgB,EAAA,EAAY,MAAA,GAAiB,EAAA,EAAU;AACrE,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA;AAE1C,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,eAAA,GAAkB,OAAA,CAAQ,qBAAA,EAAsB,CAAE,GAAA;AACxD,IAAA,MAAM,cAAA,GAAiB,eAAA,GAAkB,MAAA,CAAO,WAAA,GAAc,MAAA;AAE9D,IAAA,MAAA,CAAO,QAAA,CAAS;AAAA,MACd,GAAA,EAAK,cAAA;AAAA,MACL,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,EACH;AACF","file":"scrollToSection.js","sourcesContent":["export function scrollToSection(id: string, offset: number = 80): void {\n  const element = document.getElementById(id);\n\n  if (element) {\n    const elementPosition = element.getBoundingClientRect().top;\n    const offsetPosition = elementPosition + window.pageYOffset - offset;\n\n    window.scrollTo({\n      top: offsetPosition,\n      behavior: 'smooth',\n    });\n  }\n}\n"]}

package/dist/scrollToSection.mjs

@@ -0,0 +1,15 @@
+function scrollToSection(id, offset = 80) {
+  const element = document.getElementById(id);
+  if (element) {
+    const elementPosition = element.getBoundingClientRect().top;
+    const offsetPosition = elementPosition + window.pageYOffset - offset;
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth"
+    });
+  }
+}
+
+export { scrollToSection };
+//# sourceMappingURL=scrollToSection.mjs.map
+//# sourceMappingURL=scrollToSection.mjs.map

package/dist/scrollToSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scrollToSection.ts"],"names":[],"mappings":"AAAO,SAAS,eAAA,CAAgB,EAAA,EAAY,MAAA,GAAiB,EAAA,EAAU;AACrE,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA;AAE1C,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,eAAA,GAAkB,OAAA,CAAQ,qBAAA,EAAsB,CAAE,GAAA;AACxD,IAAA,MAAM,cAAA,GAAiB,eAAA,GAAkB,MAAA,CAAO,WAAA,GAAc,MAAA;AAE9D,IAAA,MAAA,CAAO,QAAA,CAAS;AAAA,MACd,GAAA,EAAK,cAAA;AAAA,MACL,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,EACH;AACF","file":"scrollToSection.mjs","sourcesContent":["export function scrollToSection(id: string, offset: number = 80): void {\n  const element = document.getElementById(id);\n\n  if (element) {\n    const elementPosition = element.getBoundingClientRect().top;\n    const offsetPosition = elementPosition + window.pageYOffset - offset;\n\n    window.scrollTo({\n      top: offsetPosition,\n      behavior: 'smooth',\n    });\n  }\n}\n"]}

package/dist/types-Dol3SnRo.d.mts

@@ -0,0 +1,62 @@
+interface TocItem {
+    id: string;
+    title: string;
+    level: number;
+}
+interface MorphingTocColors {
+    /** Colors for the collapsed state (lines) */
+    line?: {
+        h1?: string;
+        h2?: string;
+        h3?: string;
+        h4?: string;
+        default?: string;
+    };
+    /** Colors for the expanded state (menu) */
+    menu?: {
+        background?: string;
+        border?: string;
+        text?: string;
+        textHover?: string;
+        itemHover?: string;
+    };
+}
+interface MorphingTocSizes {
+    /** Line widths for each heading level */
+    lineWidth?: {
+        h1?: string;
+        h2?: string;
+        h3?: string;
+        h4?: string;
+        default?: string;
+    };
+    /** Height of each line */
+    lineHeight?: string;
+    /** Spacing between lines */
+    lineGap?: string;
+    /** Width of the expanded menu */
+    menuWidth?: string;
+}
+interface MorphingTocProps {
+    /** CSS class name for the root container */
+    className?: string;
+    /** Scroll offset from top in pixels (accounts for fixed headers) */
+    scrollOffset?: number;
+    /** Which heading levels to include (default: [2, 3, 4]) */
+    headingLevels?: number[];
+    /** Whether to skip the first h1 element (typically the page title) */
+    skipFirstH1?: boolean;
+    /** CSS selector to scope heading search (default: searches entire document) */
+    containerSelector?: string;
+    /** Custom color configuration */
+    colors?: MorphingTocColors;
+    /** Custom size configuration */
+    sizes?: MorphingTocSizes;
+}
+interface UseTocItemsOptions {
+    headingLevels?: number[];
+    skipFirstH1?: boolean;
+    containerSelector?: string;
+}
+
+export type { MorphingTocProps as M, TocItem as T, UseTocItemsOptions as U, MorphingTocColors as a, MorphingTocSizes as b };

package/dist/types-Dol3SnRo.d.ts

@@ -0,0 +1,62 @@
+interface TocItem {
+    id: string;
+    title: string;
+    level: number;
+}
+interface MorphingTocColors {
+    /** Colors for the collapsed state (lines) */
+    line?: {
+        h1?: string;
+        h2?: string;
+        h3?: string;
+        h4?: string;
+        default?: string;
+    };
+    /** Colors for the expanded state (menu) */
+    menu?: {
+        background?: string;
+        border?: string;
+        text?: string;
+        textHover?: string;
+        itemHover?: string;
+    };
+}
+interface MorphingTocSizes {
+    /** Line widths for each heading level */
+    lineWidth?: {
+        h1?: string;
+        h2?: string;
+        h3?: string;
+        h4?: string;
+        default?: string;
+    };
+    /** Height of each line */
+    lineHeight?: string;
+    /** Spacing between lines */
+    lineGap?: string;
+    /** Width of the expanded menu */
+    menuWidth?: string;
+}
+interface MorphingTocProps {
+    /** CSS class name for the root container */
+    className?: string;
+    /** Scroll offset from top in pixels (accounts for fixed headers) */
+    scrollOffset?: number;
+    /** Which heading levels to include (default: [2, 3, 4]) */
+    headingLevels?: number[];
+    /** Whether to skip the first h1 element (typically the page title) */
+    skipFirstH1?: boolean;
+    /** CSS selector to scope heading search (default: searches entire document) */
+    containerSelector?: string;
+    /** Custom color configuration */
+    colors?: MorphingTocColors;
+    /** Custom size configuration */
+    sizes?: MorphingTocSizes;
+}
+interface UseTocItemsOptions {
+    headingLevels?: number[];
+    skipFirstH1?: boolean;
+    containerSelector?: string;
+}
+
+export type { MorphingTocProps as M, TocItem as T, UseTocItemsOptions as U, MorphingTocColors as a, MorphingTocSizes as b };

package/dist/useTocItems.d.mts

@@ -0,0 +1,5 @@
+import { U as UseTocItemsOptions, T as TocItem } from './types-Dol3SnRo.mjs';
+
+declare function useTocItems(options?: UseTocItemsOptions): TocItem[];
+
+export { useTocItems };

package/dist/useTocItems.d.ts

@@ -0,0 +1,5 @@
+import { U as UseTocItemsOptions, T as TocItem } from './types-Dol3SnRo.js';
+
+declare function useTocItems(options?: UseTocItemsOptions): TocItem[];
+
+export { useTocItems };

package/dist/useTocItems.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var react = require('react');
+
+const defaultOptions = {
+  headingLevels: [2, 3, 4],
+  skipFirstH1: true,
+  containerSelector: ""
+};
+function useTocItems(options = {}) {
+  const [tocItems, setTocItems] = react.useState([]);
+  const { headingLevels, skipFirstH1, containerSelector } = {
+    ...defaultOptions,
+    ...options
+  };
+  const headingLevelsKey = react.useMemo(() => headingLevels.join(","), [headingLevels]);
+  react.useEffect(() => {
+    const container = containerSelector ? document.querySelector(containerSelector) : document;
+    if (!container) {
+      setTocItems([]);
+      return;
+    }
+    const selector = headingLevels.map((level) => `h${level}`).join(", ");
+    const headings = container.querySelectorAll(selector);
+    const items = [];
+    const usedIds = /* @__PURE__ */ new Set();
+    let skippedFirstH1 = false;
+    headings.forEach((heading) => {
+      const level = parseInt(heading.tagName.charAt(1));
+      const title = heading.textContent || "";
+      if (skipFirstH1 && level === 1 && !skippedFirstH1) {
+        skippedFirstH1 = true;
+        return;
+      }
+      let id = heading.id;
+      if (!id) {
+        const baseId = title.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").trim();
+        id = baseId;
+        let counter = 1;
+        while (usedIds.has(id)) {
+          id = `${baseId}-${counter}`;
+          counter++;
+        }
+        heading.id = id;
+      }
+      usedIds.add(id);
+      items.push({
+        id,
+        title,
+        level
+      });
+    });
+    setTocItems(items);
+  }, [headingLevelsKey, skipFirstH1, containerSelector]);
+  return tocItems;
+}
+
+exports.useTocItems = useTocItems;
+//# sourceMappingURL=useTocItems.js.map
+//# sourceMappingURL=useTocItems.js.map

package/dist/useTocItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useTocItems.ts"],"names":["useState","useMemo","useEffect"],"mappings":";;;;AAGA,MAAM,cAAA,GAA+C;AAAA,EACnD,aAAA,EAAe,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAAA,EACvB,WAAA,EAAa,IAAA;AAAA,EACb,iBAAA,EAAmB;AACrB,CAAA;AAEO,SAAS,WAAA,CAAY,OAAA,GAA8B,EAAC,EAAc;AACvE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,cAAA,CAAoB,EAAE,CAAA;AAEtD,EAAA,MAAM,EAAE,aAAA,EAAe,WAAA,EAAa,iBAAA,EAAkB,GAAI;AAAA,IACxD,GAAG,cAAA;AAAA,IACH,GAAG;AAAA,GACL;AAGA,EAAA,MAAM,gBAAA,GAAmBC,cAAQ,MAAM,aAAA,CAAc,KAAK,GAAG,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAE/E,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAA,GAAY,iBAAA,GACd,QAAA,CAAS,aAAA,CAAc,iBAAiB,CAAA,GACxC,QAAA;AAEJ,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA,WAAA,CAAY,EAAE,CAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,QAAA,GAAW,aAAA,CAAc,GAAA,CAAI,CAAC,KAAA,KAAU,IAAI,KAAK,CAAA,CAAE,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AACpE,IAAA,MAAM,QAAA,GAAW,SAAA,CAAU,gBAAA,CAAiB,QAAQ,CAAA;AACpD,IAAA,MAAM,QAAmB,EAAC;AAC1B,IAAA,MAAM,OAAA,uBAAc,GAAA,EAAY;AAChC,IAAA,IAAI,cAAA,GAAiB,KAAA;AAErB,IAAA,QAAA,CAAS,OAAA,CAAQ,CAAC,OAAA,KAAY;AAC5B,MAAA,MAAM,QAAQ,QAAA,CAAS,OAAA,CAAQ,OAAA,CAAQ,MAAA,CAAO,CAAC,CAAC,CAAA;AAChD,MAAA,MAAM,KAAA,GAAQ,QAAQ,WAAA,IAAe,EAAA;AAGrC,MAAA,IAAI,WAAA,IAAe,KAAA,KAAU,CAAA,IAAK,CAAC,cAAA,EAAgB;AACjD,QAAA,cAAA,GAAiB,IAAA;AACjB,QAAA;AAAA,MACF;AAGA,MAAA,IAAI,KAAK,OAAA,CAAQ,EAAA;AACjB,MAAA,IAAI,CAAC,EAAA,EAAI;AACP,QAAA,MAAM,MAAA,GAAS,KAAA,CACZ,WAAA,EAAY,CACZ,OAAA,CAAQ,WAAA,EAAa,EAAE,CAAA,CACvB,OAAA,CAAQ,MAAA,EAAQ,GAAG,CAAA,CACnB,IAAA,EAAK;AAER,QAAA,EAAA,GAAK,MAAA;AACL,QAAA,IAAI,OAAA,GAAU,CAAA;AACd,QAAA,OAAO,OAAA,CAAQ,GAAA,CAAI,EAAE,CAAA,EAAG;AACtB,UAAA,EAAA,GAAK,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AACzB,UAAA,OAAA,EAAA;AAAA,QACF;AAEA,QAAA,OAAA,CAAQ,EAAA,GAAK,EAAA;AAAA,MACf;AAEA,MAAA,OAAA,CAAQ,IAAI,EAAE,CAAA;AAEd,MAAA,KAAA,CAAM,IAAA,CAAK;AAAA,QACT,EAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACD,CAAA;AAAA,IACH,CAAC,CAAA;AAED,IAAA,WAAA,CAAY,KAAK,CAAA;AAAA,EACnB,CAAA,EAAG,CAAC,gBAAA,EAAkB,WAAA,EAAa,iBAAiB,CAAC,CAAA;AAErD,EAAA,OAAO,QAAA;AACT","file":"useTocItems.js","sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport type { TocItem, UseTocItemsOptions } from './types';\n\nconst defaultOptions: Required<UseTocItemsOptions> = {\n  headingLevels: [2, 3, 4],\n  skipFirstH1: true,\n  containerSelector: '',\n};\n\nexport function useTocItems(options: UseTocItemsOptions = {}): TocItem[] {\n  const [tocItems, setTocItems] = useState<TocItem[]>([]);\n\n  const { headingLevels, skipFirstH1, containerSelector } = {\n    ...defaultOptions,\n    ...options,\n  };\n\n  // Stable reference for headingLevels to avoid unnecessary re-renders\n  const headingLevelsKey = useMemo(() => headingLevels.join(','), [headingLevels]);\n\n  useEffect(() => {\n    const container = containerSelector\n      ? document.querySelector(containerSelector)\n      : document;\n\n    if (!container) {\n      setTocItems([]);\n      return;\n    }\n\n    const selector = headingLevels.map((level) => `h${level}`).join(', ');\n    const headings = container.querySelectorAll(selector);\n    const items: TocItem[] = [];\n    const usedIds = new Set<string>();\n    let skippedFirstH1 = false;\n\n    headings.forEach((heading) => {\n      const level = parseInt(heading.tagName.charAt(1));\n      const title = heading.textContent || '';\n\n      // Skip the first h1 if configured\n      if (skipFirstH1 && level === 1 && !skippedFirstH1) {\n        skippedFirstH1 = true;\n        return;\n      }\n\n      // Generate unique ID if heading doesn't have one\n      let id = heading.id;\n      if (!id) {\n        const baseId = title\n          .toLowerCase()\n          .replace(/[^\\w\\s-]/g, '')\n          .replace(/\\s+/g, '-')\n          .trim();\n\n        id = baseId;\n        let counter = 1;\n        while (usedIds.has(id)) {\n          id = `${baseId}-${counter}`;\n          counter++;\n        }\n\n        heading.id = id;\n      }\n\n      usedIds.add(id);\n\n      items.push({\n        id,\n        title,\n        level,\n      });\n    });\n\n    setTocItems(items);\n  }, [headingLevelsKey, skipFirstH1, containerSelector]);\n\n  return tocItems;\n}\n"]}

package/dist/useTocItems.mjs

@@ -0,0 +1,58 @@
+import { useState, useMemo, useEffect } from 'react';
+
+const defaultOptions = {
+  headingLevels: [2, 3, 4],
+  skipFirstH1: true,
+  containerSelector: ""
+};
+function useTocItems(options = {}) {
+  const [tocItems, setTocItems] = useState([]);
+  const { headingLevels, skipFirstH1, containerSelector } = {
+    ...defaultOptions,
+    ...options
+  };
+  const headingLevelsKey = useMemo(() => headingLevels.join(","), [headingLevels]);
+  useEffect(() => {
+    const container = containerSelector ? document.querySelector(containerSelector) : document;
+    if (!container) {
+      setTocItems([]);
+      return;
+    }
+    const selector = headingLevels.map((level) => `h${level}`).join(", ");
+    const headings = container.querySelectorAll(selector);
+    const items = [];
+    const usedIds = /* @__PURE__ */ new Set();
+    let skippedFirstH1 = false;
+    headings.forEach((heading) => {
+      const level = parseInt(heading.tagName.charAt(1));
+      const title = heading.textContent || "";
+      if (skipFirstH1 && level === 1 && !skippedFirstH1) {
+        skippedFirstH1 = true;
+        return;
+      }
+      let id = heading.id;
+      if (!id) {
+        const baseId = title.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").trim();
+        id = baseId;
+        let counter = 1;
+        while (usedIds.has(id)) {
+          id = `${baseId}-${counter}`;
+          counter++;
+        }
+        heading.id = id;
+      }
+      usedIds.add(id);
+      items.push({
+        id,
+        title,
+        level
+      });
+    });
+    setTocItems(items);
+  }, [headingLevelsKey, skipFirstH1, containerSelector]);
+  return tocItems;
+}
+
+export { useTocItems };
+//# sourceMappingURL=useTocItems.mjs.map
+//# sourceMappingURL=useTocItems.mjs.map

package/dist/useTocItems.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useTocItems.ts"],"names":[],"mappings":";;AAGA,MAAM,cAAA,GAA+C;AAAA,EACnD,aAAA,EAAe,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAAA,EACvB,WAAA,EAAa,IAAA;AAAA,EACb,iBAAA,EAAmB;AACrB,CAAA;AAEO,SAAS,WAAA,CAAY,OAAA,GAA8B,EAAC,EAAc;AACvE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA,CAAoB,EAAE,CAAA;AAEtD,EAAA,MAAM,EAAE,aAAA,EAAe,WAAA,EAAa,iBAAA,EAAkB,GAAI;AAAA,IACxD,GAAG,cAAA;AAAA,IACH,GAAG;AAAA,GACL;AAGA,EAAA,MAAM,gBAAA,GAAmB,QAAQ,MAAM,aAAA,CAAc,KAAK,GAAG,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAE/E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAA,GAAY,iBAAA,GACd,QAAA,CAAS,aAAA,CAAc,iBAAiB,CAAA,GACxC,QAAA;AAEJ,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA,WAAA,CAAY,EAAE,CAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,QAAA,GAAW,aAAA,CAAc,GAAA,CAAI,CAAC,KAAA,KAAU,IAAI,KAAK,CAAA,CAAE,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AACpE,IAAA,MAAM,QAAA,GAAW,SAAA,CAAU,gBAAA,CAAiB,QAAQ,CAAA;AACpD,IAAA,MAAM,QAAmB,EAAC;AAC1B,IAAA,MAAM,OAAA,uBAAc,GAAA,EAAY;AAChC,IAAA,IAAI,cAAA,GAAiB,KAAA;AAErB,IAAA,QAAA,CAAS,OAAA,CAAQ,CAAC,OAAA,KAAY;AAC5B,MAAA,MAAM,QAAQ,QAAA,CAAS,OAAA,CAAQ,OAAA,CAAQ,MAAA,CAAO,CAAC,CAAC,CAAA;AAChD,MAAA,MAAM,KAAA,GAAQ,QAAQ,WAAA,IAAe,EAAA;AAGrC,MAAA,IAAI,WAAA,IAAe,KAAA,KAAU,CAAA,IAAK,CAAC,cAAA,EAAgB;AACjD,QAAA,cAAA,GAAiB,IAAA;AACjB,QAAA;AAAA,MACF;AAGA,MAAA,IAAI,KAAK,OAAA,CAAQ,EAAA;AACjB,MAAA,IAAI,CAAC,EAAA,EAAI;AACP,QAAA,MAAM,MAAA,GAAS,KAAA,CACZ,WAAA,EAAY,CACZ,OAAA,CAAQ,WAAA,EAAa,EAAE,CAAA,CACvB,OAAA,CAAQ,MAAA,EAAQ,GAAG,CAAA,CACnB,IAAA,EAAK;AAER,QAAA,EAAA,GAAK,MAAA;AACL,QAAA,IAAI,OAAA,GAAU,CAAA;AACd,QAAA,OAAO,OAAA,CAAQ,GAAA,CAAI,EAAE,CAAA,EAAG;AACtB,UAAA,EAAA,GAAK,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AACzB,UAAA,OAAA,EAAA;AAAA,QACF;AAEA,QAAA,OAAA,CAAQ,EAAA,GAAK,EAAA;AAAA,MACf;AAEA,MAAA,OAAA,CAAQ,IAAI,EAAE,CAAA;AAEd,MAAA,KAAA,CAAM,IAAA,CAAK;AAAA,QACT,EAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACD,CAAA;AAAA,IACH,CAAC,CAAA;AAED,IAAA,WAAA,CAAY,KAAK,CAAA;AAAA,EACnB,CAAA,EAAG,CAAC,gBAAA,EAAkB,WAAA,EAAa,iBAAiB,CAAC,CAAA;AAErD,EAAA,OAAO,QAAA;AACT","file":"useTocItems.mjs","sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport type { TocItem, UseTocItemsOptions } from './types';\n\nconst defaultOptions: Required<UseTocItemsOptions> = {\n  headingLevels: [2, 3, 4],\n  skipFirstH1: true,\n  containerSelector: '',\n};\n\nexport function useTocItems(options: UseTocItemsOptions = {}): TocItem[] {\n  const [tocItems, setTocItems] = useState<TocItem[]>([]);\n\n  const { headingLevels, skipFirstH1, containerSelector } = {\n    ...defaultOptions,\n    ...options,\n  };\n\n  // Stable reference for headingLevels to avoid unnecessary re-renders\n  const headingLevelsKey = useMemo(() => headingLevels.join(','), [headingLevels]);\n\n  useEffect(() => {\n    const container = containerSelector\n      ? document.querySelector(containerSelector)\n      : document;\n\n    if (!container) {\n      setTocItems([]);\n      return;\n    }\n\n    const selector = headingLevels.map((level) => `h${level}`).join(', ');\n    const headings = container.querySelectorAll(selector);\n    const items: TocItem[] = [];\n    const usedIds = new Set<string>();\n    let skippedFirstH1 = false;\n\n    headings.forEach((heading) => {\n      const level = parseInt(heading.tagName.charAt(1));\n      const title = heading.textContent || '';\n\n      // Skip the first h1 if configured\n      if (skipFirstH1 && level === 1 && !skippedFirstH1) {\n        skippedFirstH1 = true;\n        return;\n      }\n\n      // Generate unique ID if heading doesn't have one\n      let id = heading.id;\n      if (!id) {\n        const baseId = title\n          .toLowerCase()\n          .replace(/[^\\w\\s-]/g, '')\n          .replace(/\\s+/g, '-')\n          .trim();\n\n        id = baseId;\n        let counter = 1;\n        while (usedIds.has(id)) {\n          id = `${baseId}-${counter}`;\n          counter++;\n        }\n\n        heading.id = id;\n      }\n\n      usedIds.add(id);\n\n      items.push({\n        id,\n        title,\n        level,\n      });\n    });\n\n    setTocItems(items);\n  }, [headingLevelsKey, skipFirstH1, containerSelector]);\n\n  return tocItems;\n}\n"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "morphing-toc",
+  "version": "0.1.0",
+  "description": "A React table of contents component that shows minimal lines and morphs into a full menu on hover",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && node scripts/ensure-use-client.js",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "motion": ">=11.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "table-of-contents",
+    "toc",
+    "navigation",
+    "animation",
+    "framer-motion",
+    "motion",
+    "morphing"
+  ],
+  "author": "Antoine Pirard",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antoinepirard/morphing-toc"
+  },
+  "homepage": "https://antoinepirard.com/open-source/morphing-toc"
+}