{"version":3,"file":"TableofContent.DkaCod1j.mjs","names":["useMemo","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/uEET3szaKTDX89QbX1OO/spSK7tmXXEdfJoaPnA3i/TableofContent.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useMemo,useState,startTransition}from\"react\";function scaleFontSize(value,factor){if(value==null)return value;if(typeof value===\"number\")return value*factor;if(typeof value!==\"string\")return value;const trimmed=value.trim();const num=parseFloat(trimmed);if(!Number.isFinite(num))return value;const unit=trimmed.replace(String(num),\"\")||\"px\";return`${num*factor}${unit}`;}/**\n * TableOfContents\n *\n * @framerIntrinsicWidth 280\n * @framerIntrinsicHeight 120\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function TableOfContents(props){const{includeH2,includeH3,includeH4,includeH5,h2Font,h3Font,h4Font,h5Font,h2Color,h3Color,h4Color,h5Color,activeColor,hoverColor,indentH3,indentH4,indentH5,itemGap,groupGap,scopeSelector,navbarSelector,fallbackOffset,style}=props;const h2FontSmaller=useMemo(()=>{return{...h2Font,fontSize:scaleFontSize(h2Font?.fontSize,.9)};},[h2Font]);const isStatic=useIsStaticRenderer();const[sections,setSections]=useState([]);const[activeId,setActiveId]=useState(null);const[activeSection,setActiveSection]=useState(null);const enabledChildLevels=useMemo(()=>{const out=[];if(includeH3)out.push(\"H3\");if(includeH4)out.push(\"H4\");if(includeH5)out.push(\"H5\");return out;},[includeH3,includeH4,includeH5]);useEffect(()=>{if(isStatic)return;if(typeof document===\"undefined\")return;const scopeRoot=scopeSelector?document.querySelector(scopeSelector):null;const scanRoot=scopeRoot||document;const headings=Array.from(scanRoot.querySelectorAll(\"h2, h3, h4, h5\"));const result=[];let currentH2=null;headings.forEach((el,index)=>{const existingId=el.getAttribute(\"id\");const id=existingId&&existingId.trim().length>0?existingId:`heading-${index}`;el.setAttribute(\"id\",id);const level=el.tagName;if(level===\"H2\"){currentH2={id,text:el.textContent||\"\",children:[]};result.push(currentH2);}else if(currentH2){currentH2.children.push({id,text:el.textContent||\"\",level});}});startTransition(()=>setSections(result));// 🔥 Scroll Spy\nconst observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){const id=entry.target.id;startTransition(()=>setActiveId(id));const parent=result.find(sec=>sec.id===id||sec.children.some(c=>c.id===id));if(parent){startTransition(()=>setActiveSection(parent.id));}}});},{rootMargin:\"-10% 0px -60% 0px\",threshold:0});headings.forEach(el=>observer.observe(el));return()=>observer.disconnect();},[isStatic,scopeSelector]);// ✅ Scroll có offset (fix navbar che)\nconst scrollToId=useCallback((id,isH2=false)=>{if(typeof document===\"undefined\"||typeof window===\"undefined\")return;const el=document.getElementById(id);if(!el)return;const navbar=navbarSelector?document.querySelector(navbarSelector):null;const offset=navbar?.offsetHeight||fallbackOffset;const y=el.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top:y,behavior:\"smooth\"});startTransition(()=>setActiveId(id));if(isH2){startTransition(()=>setActiveSection(id));}},[fallbackOffset,navbarSelector]);const baseStyle=useMemo(()=>({cursor:\"pointer\",transition:\"color 0.2s ease\"}),[]);const getColor=useCallback((id,base)=>activeId===id?activeColor:base,[activeColor,activeId]);const visibleSections=useMemo(()=>{if(!includeH2)return[];return sections;},[includeH2,sections]);const showCanvasPlaceholder=isStatic&&visibleSections.length===0;const getFontForLevel=useCallback(level=>{if(level===\"H2\")return h2Font;if(level===\"H3\")return h3Font;if(level===\"H4\")return h4Font;return h5Font;},[h2Font,h3Font,h4Font,h5Font]);const getBaseColorForLevel=useCallback(level=>{if(level===\"H2\")return h2Color;if(level===\"H3\")return h3Color;if(level===\"H4\")return h4Color;return h5Color;},[h2Color,h3Color,h4Color,h5Color]);return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",minWidth:5,minHeight:5,lineHeight:1.6,...style},children:[showCanvasPlaceholder?/*#__PURE__*/_jsx(\"div\",{style:{...baseStyle,...h2FontSmaller,color:h2Color,minHeight:20,userSelect:\"none\",pointerEvents:\"none\"},children:\"Table of contents\"}):null,visibleSections.map(section=>/*#__PURE__*/_jsxs(\"div\",{style:{marginBottom:groupGap},children:[/*#__PURE__*/_jsxs(\"div\",{onClick:()=>scrollToId(section.id,true),style:{...baseStyle,...h2FontSmaller,color:getColor(section.id,h2Color)},onMouseEnter:e=>e.currentTarget.style.color=hoverColor,onMouseLeave:e=>e.currentTarget.style.color=getColor(section.id,h2Color),children:[/*#__PURE__*/_jsx(\"span\",{style:{fontSize:\"0.9em\",marginRight:\"0.5em\"},children:\"•\"}),/*#__PURE__*/_jsx(\"span\",{children:section.text})]}),activeSection===section.id&&/*#__PURE__*/_jsx(\"div\",{style:{marginTop:itemGap},children:section.children.filter(child=>enabledChildLevels.includes(child.level)).map(child=>{const font=getFontForLevel(child.level);const baseColor=getBaseColorForLevel(child.level);const indent=child.level===\"H3\"?indentH3:child.level===\"H4\"?indentH4:indentH5;return /*#__PURE__*/_jsx(\"div\",{onClick:()=>scrollToId(child.id),style:{...baseStyle,...font,marginTop:itemGap,marginLeft:indent,color:getColor(child.id,baseColor)},onMouseEnter:e=>e.currentTarget.style.color=hoverColor,onMouseLeave:e=>e.currentTarget.style.color=getColor(child.id,baseColor),children:child.text},child.id);})})]},section.id))]});}addPropertyControls(TableOfContents,{scopeSelector:{type:ControlType.String,title:\"Scope Selector\",defaultValue:\"\",placeholder:\"e.g. [data-framer-name='Content']\"},includeH2:{type:ControlType.Boolean,title:\"H2\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},includeH3:{type:ControlType.Boolean,title:\"H3\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},includeH4:{type:ControlType.Boolean,title:\"H4\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},includeH5:{type:ControlType.Boolean,title:\"H5\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},h2Font:{type:ControlType.Font,title:\"H2 Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},h3Font:{type:ControlType.Font,title:\"H3 Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},h4Font:{type:ControlType.Font,title:\"H4 Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},h5Font:{type:ControlType.Font,title:\"H5 Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"13px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},h2Color:{type:ControlType.Color,title:\"H2 Color\",defaultValue:\"#000000\"},h3Color:{type:ControlType.Color,title:\"H3 Color\",defaultValue:\"#000000\"},h4Color:{type:ControlType.Color,title:\"H4 Color\",defaultValue:\"#000000\"},h5Color:{type:ControlType.Color,title:\"H5 Color\",defaultValue:\"#000000\"},activeColor:{type:ControlType.Color,title:\"Active\",defaultValue:\"#FF8F36\"},hoverColor:{type:ControlType.Color,title:\"Hover\",defaultValue:\"#FF8F36\"},indentH3:{type:ControlType.Number,title:\"Indent H3\",defaultValue:12,min:0,max:80,step:1,unit:\"px\"},indentH4:{type:ControlType.Number,title:\"Indent H4\",defaultValue:30,min:0,max:80,step:1,unit:\"px\"},indentH5:{type:ControlType.Number,title:\"Indent H5\",defaultValue:48,min:0,max:120,step:1,unit:\"px\"},itemGap:{type:ControlType.Number,title:\"Item Gap\",defaultValue:8,min:0,max:40,step:1,unit:\"px\"},groupGap:{type:ControlType.Number,title:\"Group Gap\",defaultValue:12,min:0,max:60,step:1,unit:\"px\"},navbarSelector:{type:ControlType.String,title:\"Navbar Selector\",defaultValue:\".navbar\"},fallbackOffset:{type:ControlType.Number,title:\"Fallback Offset\",defaultValue:80,min:0,max:240,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TableOfContents\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"280\",\"framerIntrinsicHeight\":\"120\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TableofContent.map"],"mappings":"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"}