{"version":3,"file":"shared-lib.DA3TPXo_.mjs","names":["useRef","useState","useLayoutEffect","useEffect","metadata","metadata","siteMetadata","metadataVersion","__FramerMetadata__","siteMetadata"],"sources":["https:/framerusercontent.com/modules/oQk14E8Ar7JXjnVOhZW2/Ygqsjts2Sbpy048b5pV8/TextWrap_Prod.js","https:/framerusercontent.com/modules/m8dwkoeQsKx1vlVQUlCx/cfnJ79Ph8VmejFgIvnqS/siteMetadata.js","https:/framerusercontent.com/modules/nLGCaTC8uUd2IDC24i6Y/l0iQkypzjDXQniGemFuf/a2NxIGbTT.js","https:/framerusercontent.com/modules/q7lPkls6N93NfGZe9g8p/FIdqawcu1OwiMuk916aO/fz_Xb9rQb.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useEffect,useLayoutEffect,useRef,useState}from\"react\";import{motion,MotionConfig,useReducedMotion}from\"framer-motion\";// Changelog 1.17: connected slots keep one vertical position with or without a text effect,\n// Per Word or Per Line, in the editor and on the published site (see InlineLayer).\n// Changelog 1.18: Per Line keeps the same settled x positions as no effect and Per Word on\n// centered and right-aligned text (see flushLine in buildEffectContent).\n/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n *\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 450\n * @framerIntrinsicHeight auto\n */export default function TextWrap(props){const{layers=[],text=\"\",slot=\"[]\",font,color,layerGap,scale=1,layerAlign,transform,wrap=\"auto\",balance,truncate,lines,userSelect,tag=\"h1\",effects,style}=props;const Tag=tag;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const fitWidth=isFitSize(style?.width);// Instances saved before 1.3 carry the removed Balance boolean: true → balance, false → auto\nconst textWrap=wrap===\"auto\"&&balance===true?\"balance\":wrap;const parts=text.split(slot);const scaledFont=scaleFont(font,scale);const containerRef=useRef(null);const{play,staticVisible,canvasLike,replayKey}=useEnterEffectTrigger(effects,containerRef,props,isCanvas);const reducedMotion=useReducedMotion();const tokenRefs=useRef([]);const tokenRefCallbacks=useRef([]);const lineIndices=useLineGroups(effects?.per===\"line\",containerRef,tokenRefs);const content=effects?buildEffectContent(parts,layers,slot,layerAlign,layerGap,scale,effects,play,staticVisible,canvasLike,replayKey,reducedMotion,tokenRefs,tokenRefCallbacks,lineIndices):buildPlainContent(parts,layers,slot,layerAlign,layerGap,scale);return /*#__PURE__*/_jsx(Tag,{\"data-build\":\"text-wrap-prod-20261004-02\",ref:containerRef,// Not \"framer-text-wrap-container\": Text Wrap 1.1 and older inject a global\n// `.framer-text-wrap-container div { display: inline-block !important }`. The Framer\n// canvas is one shared document, so any older instance on the canvas would\n// restyle this one's connected layers. A distinct class keeps it out of reach.\nclassName:\"framer-text-wrap\",style:{...scaledFont,margin:0,color:color||\"#666666\",textAlign:font?.textAlign||style?.textAlign||\"left\",fontWeight:font?.fontWeight||400,userSelect:userSelect===\"none\"?\"none\":\"auto\",textWrap,textTransform:transform,whiteSpace:fitWidth?\"nowrap\":\"pre-wrap\",width:fitWidth?\"max-content\":undefined,...truncate?{display:\"-webkit-box\",WebkitLineClamp:lines,WebkitBoxOrient:\"vertical\",overflow:\"hidden\",textOverflow:\"ellipsis\"}:{display:\"block\"},...style},children:content});}function scaleFont(font,scale){if(!font||scale===1)return font;const fontSize=font.fontSize;if(fontSize===undefined||fontSize===null)return font;return{...font,fontSize:typeof fontSize===\"number\"?fontSize*scale:`calc((${fontSize}) * ${scale})`};}const useIsoLayoutEffect=typeof window!==\"undefined\"?useLayoutEffect:useEffect;// Peel a trailing non-whitespace run (no spaces) for slot glue. Empty when the\n// string already ends in whitespace or is empty — meaning a real word boundary.\nfunction peelTrailingGlued(value){if(!value||!/\\S$/.test(value))return{rest:value,glued:\"\"};const m=value.match(/^(.*?)(\\S+)$/);return m?{rest:m[1],glued:m[2]}:{rest:value,glued:\"\"};}// Peel a leading non-whitespace run for slot glue. Empty when the string already\n// starts with whitespace or is empty.\nfunction peelLeadingGlued(value){if(!value||!/^\\S/.test(value))return{glued:\"\",rest:value};const m=value.match(/^(\\S+)([\\s\\S]*)$/);return m?{glued:m[1],rest:m[2]}:{glued:\"\",rest:value};}// Slot insertion with immediately-adjacent punctuation/letters glued to the slot\n// as one wrap word (e.g. `[]:` or `price[]`). A nowrap wrapper keeps balance/pretty/auto\n// from orphaning the colon onto the next line without its slot.\nfunction buildPlainContent(parts,layers,slot,layerAlign,layerGap,scale){const content=[];const partsMut=parts.slice();for(let i=0;iparts.length-1){for(let i=parts.length-1;i{for(const piece of value.split(/(\\s+)/)){if(piece===\"\")continue;units.push(/^\\s+$/.test(piece)?{kind:\"space\",value:piece}:{kind:\"word\",value:piece});}};const partsMut=parts.slice();for(let i=0;iparts.length-1){for(let i=parts.length-1;i{});useIsoLayoutEffect(()=>{if(!enabled){measureRef.current=()=>{};setLineIndices(prev=>prev===null?prev:null);return;}const measure=()=>{const refs=tokenRefs.current;// Incomplete trees (mid remount from flat → whole-line) must not publish a\n// partial [0,0,…] grouping — that thrash remounts forever.\nif(!refs.length||refs.some(el=>!el))return;const root=containerRef.current;const rootTop=root?root.getBoundingClientRect().top:0;let visual=-1;let previousTop=0;let first=true;// Viewport tops relative to the text root — immune to offsetParent changes when\n// whole-line EnterTokens become `display:block` wrappers around measure spans.\nconst next=refs.map(el=>{const top=el.getBoundingClientRect().top-rootTop;const height=el.getBoundingClientRect().height||el.offsetHeight||1;if(first||Math.abs(top-previousTop)>height/2)visual++;first=false;previousTop=top;return visual;});setLineIndices(prev=>prev&&prev.length===next.length&&prev.every((v,i)=>v===next[i])?prev:next);};measureRef.current=measure;const node=containerRef.current;const resize=typeof ResizeObserver!==\"undefined\"&&node?new ResizeObserver(measure):null;if(node)resize?.observe(node);const fonts=document.fonts;fonts?.ready?.then(measure);fonts?.addEventListener?.(\"loadingdone\",measure);// Synchronous first measurement (see the identical fix in InlineLayer above) — the\n// words/slots are already in the DOM by this point in the commit, so grouping is\n// correct before the browser's first paint. No enter flash from a wrong initial grouping.\nmeasure();return()=>{resize?.disconnect();fonts?.removeEventListener?.(\"loadingdone\",measure);};},[enabled]);// Re-measure after every render too (text/prop/layout changes), same idiom as InlineLayer.\nuseIsoLayoutEffect(()=>{measureRef.current();});return lineIndices;}const ENTER_DEFAULTS={opacity:0,scale:1,blur:5,rotationMode:\"2d\",rotate2D:0,rotate3D:{x:0,y:0,z:0},offsetX:0,offsetY:10,transition:{type:\"tween\",duration:.4,delay:.05,ease:[.15,.75,.5,1]}};// Hidden/shown motion values plus the per-index stagger delay for one word/line token.\n// Transform + filter never affect layout size, so a connected layer inside a token keeps\n// its line-box placement through the whole entrance, at any opacity/scale/blur/offset/rotation.\nfunction enterMotionProps(enter,outerDelay,index,play,staticVisible,reducedMotion){const merged={...ENTER_DEFAULTS,...enter,rotate3D:{...ENTER_DEFAULTS.rotate3D,...enter?.rotate3D}};const is3D=merged.rotationMode===\"3d\";const hidden={opacity:merged.opacity,scale:merged.scale,x:merged.offsetX,y:merged.offsetY,filter:`blur(${merged.blur}px)`,...is3D?{rotateX:merged.rotate3D.x,rotateY:merged.rotate3D.y,rotateZ:merged.rotate3D.z}:{rotate:merged.rotate2D}};const shown={opacity:1,scale:1,x:0,y:0,filter:\"blur(0px)\",...is3D?{rotateX:0,rotateY:0,rotateZ:0}:{rotate:0}};if(staticVisible||reducedMotion)return{initial:false,animate:shown,transition:{duration:0}};const{delay:stagger=0,...transitionRest}=merged.transition||{};return{initial:hidden,animate:play?shown:hidden,transition:{...transitionRest,delay:Math.max(0,outerDelay||0)+stagger*index}};}// Outer layout span owns the box used for wrap + line measurement. Inner motion span\n// carries every enter transform (opacity/scale/blur/2D|3D rotate/offsets) with an explicit\n// center origin; transforms never touch layout.\n// 1.17: per-word tokens are plain `inline-block`s that inherit the Font line-height, so a\n// token's one inner line box is geometrically the same line box the text has with no\n// effect (same strut, same baseline, same `vertical-align: middle` reference). Earlier\n// inline-flex tokens (with `lineHeight: normal` on the motion span) turned InlineLayer into\n// a flex item, where `vertical-align` does nothing and the strut differs — that moved\n// connected slots and nudged line heights whenever an effect was on. `nowrap` keeps\n// prefix|slot|suffix glue on one line. asLine tokens stay 1lh blocks (1.14/1.16 contract).\nconst TOKEN_LAYOUT_STYLE={display:\"inline-block\",whiteSpace:\"nowrap\",verticalAlign:\"baseline\"};function tokenMotionStyle(enter,busy,asLine=false){const is3D=enter?.rotationMode===\"3d\";return{display:asLine?\"block\":\"inline-block\",whiteSpace:asLine?undefined:\"nowrap\",width:asLine?\"100%\":undefined,// Fill the outer 1lh asLine box so 3D/2D origin stays centered on the Font\n// line box (not on tall Framer slot wrappers that paint outside it). Per-word\n// inline-blocks are exactly one Font line tall, so their origin is centered too.\nheight:asLine?\"100%\":undefined,transformOrigin:\"50% 50%\",transformPerspective:is3D?800:undefined,transformStyle:is3D?\"preserve-3d\":undefined,willChange:busy?\"transform, opacity, filter\":undefined,backfaceVisibility:is3D?\"hidden\":undefined};}// Marks the motion span so InlineLayer can lift its enter transform for one synchronous\n// measurement (see measureWithoutEnterTransforms).\nconst MOTION_ATTR=\"data-tw-motion\";function tokenLayoutStyle(asLine){// asLine blocks stack as siblings — parent line-height no longer opens gaps between\n// them. Lock each block to exactly one Font line-height (`1lh`) so Framer editor slot\n// wrappers cannot inflate some rows. Slot paint overflows visibly (overflow:visible)\n// but does not change inter-line distance — editor canvas and publish stay in parity.\nreturn asLine?{display:\"block\",width:\"100%\",lineHeight:\"inherit\",height:\"1lh\",overflow:\"visible\"}:TOKEN_LAYOUT_STYLE;}function EnterToken({enter,outerDelay,index,play,staticVisible,canvasLike,reducedMotion,innerRef,asLine=false,children}){// Pause is a settled canvas state, not an animation state. Rendering a plain span here\n// prevents Framer Motion from completing or restarting an entrance when Playground\n// changes On canvas from Play to Pause, while keeping every token immediately visible.\nif(staticVisible){// Same plain single span as 1.10 — nothing is moving, so no motion span is needed.\nreturn /*#__PURE__*/_jsx(\"span\",{ref:innerRef,\"data-tw-effect-token\":index,\"data-tw-line\":asLine?\"1\":undefined,style:tokenLayoutStyle(asLine),children:children});}if(canvasLike){return /*#__PURE__*/_jsx(CanvasEnterToken,{enter:enter,outerDelay:outerDelay,index:index,play:play,staticVisible:staticVisible,reducedMotion:reducedMotion,innerRef:innerRef,asLine:asLine,children:children});}return /*#__PURE__*/_jsx(MotionEnterToken,{enter:enter,outerDelay:outerDelay,index:index,play:play,staticVisible:staticVisible,reducedMotion:reducedMotion,innerRef:innerRef,asLine:asLine,children:children});}// Tracks enter in-flight (for will-change only; slot placement no longer depends on it).\n// Glue prefix/suffix are siblings of InlineLayer inside this token (horizontal); the whole\n// visual line for `asLine` still lives inside the motion span so lines move as one unit.\nfunction MotionEnterToken({enter,outerDelay,index,play,staticVisible,reducedMotion,innerRef,asLine=false,children}){const motionProps=enterMotionProps(enter,outerDelay,index,play,staticVisible,reducedMotion);// Busy while hidden or in-flight. Cleared on settle.\nconst[busy,setBusy]=useState(()=>!(staticVisible||reducedMotion));useEffect(()=>{if(staticVisible||reducedMotion){setBusy(false);return;}// Only re-busy when play/visibility actually changes — NOT when Framer reallocates\n// `enter` / `outerDelay` object identities on every editor canvas render.\nif(play)setBusy(true);},[play,staticVisible,reducedMotion]);const layout=tokenLayoutStyle(asLine);const motionStyle=tokenMotionStyle(enter,busy,asLine);return /*#__PURE__*/_jsx(\"span\",{ref:innerRef,\"data-tw-effect-token\":index,\"data-tw-line\":asLine?\"1\":undefined,\"data-tw-busy\":busy?\"1\":undefined,style:layout,children:/*#__PURE__*/_jsx(motion.span,{[MOTION_ATTR]:\"\",style:motionStyle,...motionProps,onAnimationStart:()=>setBusy(true),onAnimationComplete:()=>{if(play)setBusy(false);},children:children})});}// Framer's editor Canvas can provide a static MotionConfig. Override only that inherited\n// static flag locally so the exact same Framer Motion easing/spring contract advances on\n// canvas-like editing surfaces. The keyed remount still supplies an exact fresh entrance.\nfunction CanvasEnterToken({enter,outerDelay,index,play,staticVisible,reducedMotion,innerRef,asLine=false,children}){return /*#__PURE__*/_jsx(MotionConfig,{isStatic:false,children:/*#__PURE__*/_jsx(MotionEnterToken,{enter:enter,outerDelay:outerDelay,index:index,play:play,staticVisible:staticVisible,reducedMotion:reducedMotion,innerRef:innerRef,asLine:asLine,children:children})});}// A `motion.span` (framer-motion) only re-attaches a *changed* ref callback unreliably across\n// re-renders — a fresh inline closure per render silently stops receiving the DOM node after\n// the first render (confirmed in isolation; a stable callback identity does not have this\n// problem). So each flat token position gets one persistent callback, created once and reused\n// every render, that always writes into the CURRENT `tokenRefs.current` array by closing over\n// the stable `tokenRefs` ref object itself rather than a per-render local array.\nfunction getStableTokenRef(tokenRefs,tokenRefCallbacks,index){let cb=tokenRefCallbacks.current[index];if(!cb){cb=el=>{tokenRefs.current[index]=el;};tokenRefCallbacks.current[index]=cb;}return cb;}// Per word: each word/slot is its own EnterToken (stagger by sequential index). Slot glue\n// is prefix | InlineLayer(node) | suffix as horizontal siblings inside the token (plain\n// content / good-ref layout), so punctuation stays inline and still shares the enter\n// transform. Per line: after visual lines are measured, every word/space/slot on the same\n// rendered line is wrapped in ONE EnterToken (`asLine`) so X/Y/scale/rotate apply to the\n// whole line as a unit — not N synchronized per-word transforms. Measuring hold still\n// prevents the first Play commit from locking flat (per-word) stagger forever.\nfunction buildEffectContent(parts,layers,slot,layerAlign,layerGap,scale,effects,play,staticVisible,canvasLike,replayKey,reducedMotion,tokenRefs,tokenRefCallbacks,lineIndices){const units=tokenizeForEffects(parts,layers,slot);const perLine=effects.per===\"line\";// Canvas Play starts `play=true` on the first commit. Measuring visual lines needs the\n// tokens laid out first; if motion mounted with the interim flat (per-word) index it\n// would keep that stagger forever. Hold play and key on \"pending\" until lineIndices\n// exists, then remount once with real whole-line units.\nconst measuring=perLine&&lineIndices===null;const tokenPlay=play&&!measuring;// Flat per-word (and per-line measuring) path: one EnterToken per word/slot.\nconst renderFlat=()=>{const out=[];let wordSeq=0;for(const[ui,u]of units.entries()){if(u.kind===\"space\"){out.push(u.value);continue;}const flatIndex=wordSeq++;const setRef=getStableTokenRef(tokenRefs,tokenRefCallbacks,flatIndex);const mountKey=measuring?\"m\":\"w\";if(u.kind===\"word\"){out.push(/*#__PURE__*/_jsx(EnterToken,{innerRef:setRef,enter:effects.enter,outerDelay:effects.delay,index:flatIndex,play:tokenPlay,staticVisible:staticVisible,canvasLike:canvasLike,reducedMotion:reducedMotion,children:u.value},`w-${ui}-${replayKey}-${mountKey}`));}else{// REVERT layout path: glue as horizontal siblings of InlineLayer (plain-content\n// / good-ref era), not prefix|block-slot|suffix inside InlineLayer's flex child.\n// Nesting a block-level connected layer between text nodes inside an\n// inline-block was the vertical stack (comma under plugins). Motion still\n// wraps prefix+InlineLayer+suffix so punct animates with the slot (1.13).\nout.push(/*#__PURE__*/_jsxs(EnterToken,{innerRef:setRef,enter:effects.enter,outerDelay:effects.delay,index:flatIndex,play:tokenPlay,staticVisible:staticVisible,canvasLike:canvasLike,reducedMotion:reducedMotion,children:[u.prefix,/*#__PURE__*/_jsx(InlineLayer,{align:layerAlign,gap:layerGap,scale:scale,children:u.node}),u.suffix]},`${u.key}-${replayKey}-${mountKey}`));}}tokenRefs.current.length=wordSeq;tokenRefCallbacks.current.length=wordSeq;return out;};if(!perLine||measuring){return renderFlat();}// Whole-line units: walk units in order, assign each non-space token its measured line,\n// and flush a line EnterToken whenever the visual line index changes. Spaces stay with\n// the line they follow (or the next line if they lead).\nconst out=[];let wordSeq=0;let currentLine=-1;let lineKids=[];let lineHasToken=false;const flushLine=()=>{if(!lineHasToken&&lineKids.length===0)return;// 1.18: drop the wrap-point space at the end of each line block. In the plain text\n// that space hangs past the line edge (`pre-wrap` soft wrap) and takes no width, but at\n// the end of a block Chrome keeps it, so centered/right lines sat half/one space left of\n// no effect and per word. Line breaks (\"\\n\") are kept.\nconst last=lineKids[lineKids.length-1];if(typeof last===\"string\"){const trimmed=last.replace(/[^\\S\\n]+$/,\"\");if(trimmed)lineKids[lineKids.length-1]=trimmed;else lineKids.pop();}out.push(/*#__PURE__*/_jsx(EnterToken,{asLine:true,enter:effects.enter,outerDelay:effects.delay,index:Math.max(0,currentLine),play:tokenPlay,staticVisible:staticVisible,canvasLike:canvasLike,reducedMotion:reducedMotion,children:lineKids},`line-${currentLine}-${replayKey}`));lineKids=[];lineHasToken=false;};for(const[ui,u]of units.entries()){if(u.kind===\"space\"){lineKids.push(u.value);continue;}const flatIndex=wordSeq++;const line=lineIndices[flatIndex]!==undefined?lineIndices[flatIndex]:flatIndex;if(currentLine===-1)currentLine=line;if(line!==currentLine){flushLine();currentLine=line;}const setRef=getStableTokenRef(tokenRefs,tokenRefCallbacks,flatIndex);if(u.kind===\"word\"){lineKids.push(/*#__PURE__*/_jsx(\"span\",{ref:setRef,\"data-tw-measure\":flatIndex,style:{display:\"inline-block\"},children:u.value},`mw-${ui}`));}else{// Same horizontal glue contract as per-word: prefix | InlineLayer(node) | suffix.\nlineKids.push(/*#__PURE__*/_jsxs(\"span\",{ref:setRef,\"data-tw-measure\":flatIndex,style:TOKEN_LAYOUT_STYLE,children:[u.prefix,/*#__PURE__*/_jsx(InlineLayer,{align:layerAlign,gap:layerGap,scale:scale,children:u.node}),u.suffix]},`${u.key}-L`));}lineHasToken=true;}flushLine();tokenRefs.current.length=wordSeq;tokenRefCallbacks.current.length=wordSeq;return out;}// Trigger state for the whole effect: On appear plays once right after mount; Layer in view\n// plays once the chosen point (Top/Center/Bottom) crosses the viewport's bottom edge, and\n// (with Replay) resets only once the layer is fully out of view — never mid-scroll. Motion's\n// own `initial` prop already renders the hidden pose synchronously on first paint, so there is\n// no enter flash regardless of which trigger fires it.\nfunction useEnterEffectTrigger(effects,containerRef,props,isCanvas){const trigger=effects?.trigger??\"appear\";const start=effects?.start??\"top\";const replay=effects?.replay??false;const onCanvas=effects?.onCanvas??\"play\";const[mounted,setMounted]=useState(false);const[inStart,setInStart]=useState(false);const[playgroundCanvas,setPlaygroundCanvas]=useState(false);const[replayKey,setReplayKey]=useState(0);const canvasLike=isCanvas||playgroundCanvas;useEffect(()=>{setMounted(true);},[]);// Playground edit mode is not guaranteed to report Framer's Canvas RenderTarget.\n// Its standing host contract is a compatible-canvas ancestor outside the live preview.\nuseIsoLayoutEffect(()=>{const node=containerRef.current;const inCanvasHost=!!node?.closest?.(\"[data-sp-root], [data-sp-compatible-canvas]\");const inLivePreview=!!node?.closest?.(\"[data-sp-live]\");const next=inCanvasHost&&!inLivePreview;setPlaygroundCanvas(current=>current===next?current:next);});// Remount entrance tokens when designer-facing values change — not when Framer\n// reallocates prop object identities every editor canvas render (`style` / `font` /\n// `effects` / `layers` array). Identity thrash remounted tokens continuously, kept\n// them busy, and froze slot line-height neutralization (editor-only uneven gaps).\nconst enter=effects?.enter;const canvasReplayFingerprint=[onCanvas,effects?.per,effects?.trigger,effects?.start,effects?.replay?1:0,effects?.delay,enter?.opacity,enter?.scale,enter?.blur,enter?.rotationMode,enter?.rotate2D,enter?.rotate3D?.x,enter?.rotate3D?.y,enter?.rotate3D?.z,enter?.offsetX,enter?.offsetY,enter?.transition?.type,enter?.transition?.duration,enter?.transition?.delay,props.text,props.slot,Array.isArray(props.layers)?props.layers.length:0,props.font?.fontSize,props.font?.fontFamily,props.font?.fontWeight,props.font?.lineHeight,props.font?.letterSpacing,props.font?.textAlign,props.color,props.layerGap,props.scale,props.layerAlign,props.transform,props.wrap,props.balance===true?1:0,props.truncate?1:0,props.lines,props.userSelect,props.tag,props.style?.width,props.style?.height].join(\"|\");useIsoLayoutEffect(()=>{if(!effects||!canvasLike||onCanvas!==\"play\")return;setReplayKey(value=>value+1);},[canvasLike,onCanvas,canvasReplayFingerprint]);useEffect(()=>{if(!effects||trigger!==\"layer in view\")return;const node=containerRef.current;if(!node)return;if(typeof IntersectionObserver===\"undefined\"){setInStart(true);return;}const rect=node.getBoundingClientRect();const offset=start===\"top\"?0:start===\"center\"?rect.height/2:rect.height;const startObserver=new IntersectionObserver(([entry])=>{if(entry.isIntersecting)setInStart(true);},{rootMargin:`0px 0px -${Math.max(0,Math.round(offset))}px 0px`});startObserver.observe(node);let visibilityObserver=null;if(replay){visibilityObserver=new IntersectionObserver(([entry])=>{if(!entry.isIntersecting)setInStart(false);});visibilityObserver.observe(node);}return()=>{startObserver.disconnect();visibilityObserver?.disconnect();};},[effects,trigger,start,replay]);if(!effects)return{play:false,staticVisible:false,canvasLike,replayKey};if(canvasLike){return onCanvas===\"pause\"?{play:false,staticVisible:true,canvasLike,replayKey}:{play:true,staticVisible:false,canvasLike,replayKey};}return{play:trigger===\"layer in view\"?inStart:mounted,staticVisible:false,canvasLike,replayKey};}function isFitSize(value){return value===undefined||value===null||value===\"auto\"||value===\"max-content\"||value===\"fit-content\";}// Ascent share of the font's content area, per font. Used to find where a text's baseline sits inside its client rect.\nconst ascentShare={};function getAscentShare(cs){const key=`${cs.fontStyle} ${cs.fontWeight} ${cs.fontFamily}`;if(ascentShare[key]===undefined){const ctx=document.createElement(\"canvas\").getContext(\"2d\");if(!ctx)return .8;ctx.font=`${cs.fontStyle} ${cs.fontWeight} 100px ${cs.fontFamily}`;const m=ctx.measureText(\"Hxg\");ascentShare[key]=m.fontBoundingBoxAscent/(m.fontBoundingBoxAscent+m.fontBoundingBoxDescent);}return ascentShare[key];}// Baseline (viewport y) of the first visible text inside a connected layer, or null when the layer has none.\nfunction firstTextBaseline(layer){const walker=document.createTreeWalker(layer,NodeFilter.SHOW_TEXT);for(let node=walker.nextNode();node;node=walker.nextNode()){const parent=node.parentElement;const value=node.nodeValue;if(!parent||!value||!value.trim()||/^(STYLE|SCRIPT)$/.test(parent.tagName))continue;const cs=getComputedStyle(parent);if(cs.visibility===\"hidden\"||cs.display===\"none\"||parseFloat(cs.opacity)===0)continue;const range=document.createRange();range.selectNodeContents(node);const rect=range.getClientRects()[0];if(!rect||rect.width<2)continue;return rect.top+rect.height*getAscentShare(cs);}return null;}// Run `read` with every enclosing enter-effect transform lifted. Reads and restores happen in\n// the same synchronous task, so nothing is ever painted without the transform and Framer\n// Motion's next frame is untouched. This makes the measurement identical whether the slot\n// sits in plain text, a per-word token or a per-line token, mid-entrance or settled, with any\n// offset/scale/2D/3D rotation — no \"busy\" freeze and no stale value after the entrance ends.\nfunction measureWithoutEnterTransforms(node,read){const lifted=[];const root=node.closest(\".framer-text-wrap\");for(let el=node.parentElement;el&&el!==root;el=el.parentElement){if(el.hasAttribute(MOTION_ATTR)&&el.style.transform){lifted.push([el,el.style.transform]);el.style.transform=\"none\";}}try{return read();}finally{for(const[el,value]of lifted)el.style.transform=value;}}// Connected layer slot (1.17 structure).\n//\n// SPAN + INLINE-FLEX avoid the
nesting error. Nothing below the inner zoom span is\n// restyled, so the layer renders exactly as it was designed on the canvas.\n//\n// anchor inline-flex, height 0, vertical-align: middle ← the only thing in the text line\n// offset the slot's box, placed relative to the anchor ← Middle: centered; Baseline: offset\n// zoom inline-flex, Scale control ← connected layer lives here\n//\n// Line height: the anchor's margin box is zero tall and sits half an x-height above the\n// baseline — inside the Font line box — so a connected layer of any height can never grow\n// its line (1.4) and needs no measuring to get there (no first-paint flash, 1.5). The layer\n// overflows the anchor visibly and keeps its full paint and hit area.\n//\n// Vertical position is decided by CSS relative to the *text line*, never by the wrappers the\n// slot is inside: `vertical-align: middle` puts the anchor at baseline + ½ x-height of the\n// surrounding text in plain text, inside per-word inline-block tokens and inside per-line\n// blocks alike (they all inherit the same font and line-height), and in the editor or on a\n// published site alike.\n// Middle — the slot is centered on the anchor (`align-items: center`). Pure CSS.\n// Baseline — the slot's first visible text baseline sits on the text baseline, whatever the\n// order inside the layer (image first, text first, absolutely positioned label).\n// That distance from the slot's top (`textTop`) is the only measured value; it\n// is a property of the slot's content, not of where the line is, and it is\n// measured with enter transforms lifted, so it is the same with or without\n// effects. Slots without text sit with their bottom on the baseline (CSS only).\nfunction InlineLayer({children,align=\"baseline\",gap=0,scale=1}){const offsetRef=useRef(null);const zoomRef=useRef(null);const textTopRef=useRef(null);const scheduleRef=useRef(()=>{});const[textTop,setTextTop]=useState(null);const isBaseline=align===\"baseline\";textTopRef.current=textTop;useIsoLayoutEffect(()=>{const box=offsetRef.current;const zoom=zoomRef.current;if(!isBaseline||!box||!zoom){scheduleRef.current=()=>{};return;}let frame=0;const measure=()=>{frame=0;const next=measureWithoutEnterTransforms(box,()=>{const layoutH=box.offsetHeight;if(!layoutH)return null;const rect=box.getBoundingClientRect();// Uniform scale from outside the component (Framer canvas zoom).\nconst outer=rect.height/layoutH||1;const text=firstTextBaseline(zoom);if(text===null)return null;// Relative to the connected layer's own (possibly hover-transformed) box, so\n// Magnetic Hover style transforms on the layer itself are ignored.\nconst slot=zoom.firstElementChild||zoom;return Math.round((text-slot.getBoundingClientRect().top)/outer*100)/100;});const prev=textTopRef.current;if(next===null?prev!==null:prev===null||Math.abs(next-prev)>=.25){textTopRef.current=next;setTextTop(next);}};const schedule=()=>{if(!frame)frame=requestAnimationFrame(measure);};scheduleRef.current=schedule;const resize=typeof ResizeObserver!==\"undefined\"?new ResizeObserver(schedule):null;resize?.observe(box);const mutation=new MutationObserver(records=>{// Magnetic Hover rewrites a