{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/zdSP21m7UwAxPqjq0Y3X/hj0ut8f9MCGeEOLSHnyq/TableOfContents.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";// Throttle function to limit scroll events.\nfunction throttle(func,delay){let lastFunc;let lastRan;return function(...args){if(!lastRan){func(...args);lastRan=Date.now();}else{clearTimeout(lastFunc);lastFunc=setTimeout(function(){if(Date.now()-lastRan>=delay){func(...args);lastRan=Date.now();}},delay-(Date.now()-lastRan));}};}// Container style for the TOC.\nconst containerStyle={height:\"100%\",padding:\"0px\",backgroundColor:\"transparent\",overflowY:\"auto\",display:\"flex\",flexDirection:\"column\",alignItems:\"flex-start\",borderLeft:\"1px solid #e6e6e7\"};// Unordered list style: remove bullet points.\nconst ulStyle={listStyle:\"none\",padding:\"0px\",margin:\"0px\"};// Base style for each list item.\nconst listItemStyle=level=>({cursor:\"pointer\",// padding: level === 1 ? \"10px 15px\" : \"6px 20px\",\n    paddingTop:level===1?\"5px\":\"5px\",paddingLeft:level===1?\"10px\":\"20px\",// borderLeft: \"1px solid #e6e6e7\",\n    margin:\"4px 0\",color:\"#5c5a5a\",backgroundColor:\"transparent\",fontSize:level===1?\"13px\":\"13px\",fontWeight:level===1?600:400,fontFamily:\"Inter, sans-serif\",transition:\"color 0.2s ease\",display:\"flex\",alignItems:\"center\"});// Hover style.\nconst listItemHoverStyle={color:\"#414040\"};// Active header style with a left-side indicator.\nconst activeItemStyle=level=>({...listItemStyle(level),fontWeight:level===1?500:500,color:\"#007bff\",borderColor:\"#414040\"});export default function TableOfContents(props){const{name,content_id}=props;// State for groups (H2 with H3 children).\nconst[groups,setGroups]=useState([]);// State for open (expanded) groups.\nconst[openGroups,setOpenGroups]=useState([]);// State for the active header id.\nconst[activeHeaderId,setActiveHeaderId]=useState(null);// Track programmatic scroll to avoid conflicts.\nconst[isProgrammaticScroll,setIsProgrammaticScroll]=useState(false);// Collect headers and group them.\nuseEffect(()=>{const collectHeaders=()=>{const contentDiv=document.getElementById(content_id);if(!contentDiv)return[];// Get H2 and H3 elements.\nconst headerElements=contentDiv.querySelectorAll(\"h2, h3\");const headers=Array.from(headerElements).map(header=>({text:header.textContent||\"\",offsetTop:header.offsetTop,level:header.tagName===\"H2\"?1:2}));// Group headers: every H2 starts a new group.\nconst groups=[];let currentGroup=null;headers.forEach(header=>{if(header.level===1){currentGroup={h2:header,h3s:[]};groups.push(currentGroup);}else if(header.level===2&&currentGroup){currentGroup.h3s.push(header);}});return groups;};setGroups(collectHeaders());},[content_id]);// Flatten groups for active header detection.\nconst flattenedHeaders=useMemo(()=>{let arr=[];groups.forEach((group,groupIndex)=>{arr.push({id:`h2-${groupIndex}`,offsetTop:group.h2.offsetTop,level:1,groupIndex});group.h3s.forEach((h3,idx)=>{arr.push({id:`h3-${groupIndex}-${idx}`,offsetTop:h3.offsetTop,level:2,groupIndex});});});return arr;},[groups]);// Listen for scroll events (window level) to update the active header.\nuseEffect(()=>{const onScroll=throttle(()=>{if(isProgrammaticScroll){setIsProgrammaticScroll(false);return;}const currentPosition=window.scrollY+window.innerHeight/2-300;const active=flattenedHeaders.find((header,index)=>{const next=flattenedHeaders[index+1];return currentPosition>=header.offsetTop&&(!next||currentPosition<next.offsetTop);});setActiveHeaderId(active?active.id:null);// Auto-expand group if an H3 is active.\nif(active&&active.level===2&&!openGroups.includes(active.groupIndex)){setOpenGroups(prev=>[...prev,active.groupIndex]);}},200);window.addEventListener(\"scroll\",onScroll);return()=>window.removeEventListener(\"scroll\",onScroll);},[flattenedHeaders,isProgrammaticScroll,openGroups]);// Smooth scrolling function.\nconst scrollToHeader=offsetTop=>{setIsProgrammaticScroll(true);window.scrollTo({top:offsetTop,behavior:\"smooth\"});};// Toggle accordion group open/close.\nconst toggleGroup=(groupIndex,offsetTop)=>{setIsProgrammaticScroll(true);setOpenGroups(prev=>prev.includes(groupIndex)?prev.filter(i=>i!==groupIndex):[...prev,groupIndex]);window.scrollTo({top:offsetTop,behavior:\"smooth\"});};return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,children:/*#__PURE__*/_jsx(\"ul\",{style:ulStyle,children:groups.map((group,groupIndex)=>{const h2Id=`h2-${groupIndex}`;const isActiveH2=activeHeaderId===h2Id;const isOpen=openGroups.includes(groupIndex);return /*#__PURE__*/_jsxs(\"li\",{style:{marginBottom:\"8px\"},children:[/*#__PURE__*/_jsx(\"div\",{onClick:()=>toggleGroup(groupIndex,group.h2.offsetTop),style:isActiveH2?activeItemStyle(1):listItemStyle(1),onMouseEnter:e=>{e.currentTarget.style.color=listItemHoverStyle.color;},onMouseLeave:e=>{e.currentTarget.style.color=listItemStyle(1).color;},children:/*#__PURE__*/_jsx(\"span\",{children:group.h2.text})}),isOpen&&group.h3s.length>0&&/*#__PURE__*/_jsx(\"ul\",{style:{...ulStyle},children:group.h3s.map((h3,idx)=>{const h3Id=`h3-${groupIndex}-${idx}`;const isActiveH3=activeHeaderId===h3Id;return /*#__PURE__*/_jsx(\"li\",{onClick:()=>scrollToHeader(h3.offsetTop),style:isActiveH3?activeItemStyle(2):listItemStyle(2),onMouseEnter:e=>{e.currentTarget.style.color=listItemHoverStyle.color;},onMouseLeave:e=>{e.currentTarget.style.color=listItemStyle(2).color;},children:h3.text},idx);})})]},groupIndex);})})});}addPropertyControls(TableOfContents,{name:{title:\"Name\",type:ControlType.String,defaultValue:\"Table of Contents\"},content_id:{title:\"content_id\",type:ControlType.String,defaultValue:\"blog_article_content\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TableOfContents\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TableOfContents.map"],
  "mappings": "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",
  "names": ["throttle", "func", "delay", "lastFunc", "lastRan", "args", "containerStyle", "ulStyle", "listItemStyle", "level", "listItemHoverStyle", "activeItemStyle", "TableOfContents", "props", "name", "content_id", "groups", "setGroups", "ye", "openGroups", "setOpenGroups", "activeHeaderId", "setActiveHeaderId", "isProgrammaticScroll", "setIsProgrammaticScroll", "ue", "contentDiv", "headerElements", "headers", "header", "currentGroup", "flattenedHeaders", "se", "arr", "group", "groupIndex", "h3", "idx", "onScroll", "currentPosition", "window", "active", "index", "next", "prev", "scrollToHeader", "offsetTop", "toggleGroup", "i", "p", "h2Id", "isActiveH2", "isOpen", "u", "e", "h3Id", "addPropertyControls", "ControlType"]
}