64:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 66:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 67:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 68:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 69:T42b9,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // RopewalkLayTwist — an ambient card background modeling rope laying in a // traditional ropewalk: three pre-twisted yarns are drawn together at a // fixed convergence point ("the top") where a counter-rotation locks them // into one rope, which is continuously hauled off and wound onto a take-up // drum. Source: ropewalk cordage manufacture (yarn-twist and rope-lay run // in opposite directions, which is what keeps a finished rope torque- // balanced and un-kinked). // // TWO ROTATIONS, deliberately not the same rate: // - LAY rotation — how fast the 3 strands spiral into the rope at the // convergence point — is governed by feedDist / L (lay length). // - WRAP rate — how fast completed rope winds around the drum's own // circumference — is governed by feedDist / C (drum circumference). // Both are driven by the SAME feedDist (one continuous haul-off clock, // never reset), but L and C are unrelated lengths, so the two rotations // run at different, independently-tunable periods. (A build note: an // earlier draft of this spec assumed the same rate for both, which // produced a drum that would take ~25s to show a single wrap at card // scale — fixed here by decoupling the two periods properly, matching // the spec's own "alive at rest within 5s" requirement instead of its // literal shared-omega description.) // // STRANDS (pre-convergence, x in [0, topX]): each is a travelling cosine // wave y = midY + strandR * cos(2π*x/L - 2π*feedDist/L + phase_i), phase_i // = i * 2π/3. This both twists the strands (three-lobed) and slides that // twist rightward at exactly FEED px/s, matching the haul-off speed. // Z-order/opacity per strand comes from cos(phase) at the convergence // point: whichever strand is nearest full amplitude (+1, "toward viewer") // draws last, at higher opacity. // // ROPE (post-convergence): a single stroked path from the convergence // point to the drum, with a faint periodic luminance ripple at the same // wavelength L, reading as twisted structure rather than a flat cable. // // DRUM: a ring-recycling system. Every completed drum layer (a run of // WRAPS_PER_LAYER full wraps) is tracked by an absolute integer index. // Only the most recent MAX_LAYERS layers are ever rendered, each easing // toward its current display radius (innermost = oldest of the visible // set); a layer aging out of that window eases its opacity to 0 over // LAYER_FADE_MS while the rest ease one slot inward — "the oldest layer // fades to make room" from the spec, done continuously rather than as a // hard cut. The layer still being wound sits one slot further out than // the newest completed layer and fills in as: a single sweeping arc for // its very first wrap (0 -> 2π), then rising opacity (not a redundant // sweep) for each additional wrap in that layer, since further wraps at // an unchanged radius are genuinely indistinguishable from the first. // --------------------------------------------------------------------------- type RGB = [number, number, number]; function parseColor(raw: string): RGB | null { const s = raw.trim(); if (s.startsWith("#")) { const hex = s.slice(1); if (hex.length === 3) { const r = parseInt(hex[0]! + hex[0], 16); const g = parseInt(hex[1]! + hex[1], 16); const b = parseInt(hex[2]! + hex[2], 16); return Number.isNaN(r + g + b) ? null : [r, g, b]; } if (hex.length >= 6) { const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); return Number.isNaN(r + g + b) ? null : [r, g, b]; } return null; } const m = s.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/); return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null; } function rgbStr(v: RGB, alpha: number): string { return `rgba(${v[0]},${v[1]},${v[2]},${Math.max(0, Math.min(1, alpha))})`; } const NOMINAL_MIN_DIM = 160; // px — the size the raw constants below assume const L0 = 64; // lay length (helical period along the feed axis), px const FEED0 = 26; // haul-off speed, px/s const STRAND_R0 = 9; // strand helix radius, px const LAYER_STEP0 = 6; // radial spacing between drum layers, px const TOP_X_FRAC = 0.3; // convergence point x, fraction of width const DRUM_PAD0 = 16; // gap between drum outer edge and the right edge, px const WRAPS_PER_LAYER = 3; const MAX_LAYERS = 4; const LAYER_FADE_S = 2; // seconds for a recycled layer to fade to 0 const RADIUS_EASE = 6; // 1/s — how fast a ring eases toward its target radius const RIPPLE_ALPHA = 0.22; // rope-body luminance ripple amplitude interface RingState { absIdx: number; radius: number; targetRadius: number; opacity: number; targetOpacity: number; } export interface RopewalkLayTwistProps { /** component height in px. Default 160. */ height?: number; /** accessible label for the decorative root. Default "Rope forming" */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function RopewalkLayTwist({ height = 160, label = "Rope forming", className = "", }: RopewalkLayTwistProps) { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let fg: RGB = [0, 0, 0]; let muted: RGB = [128, 128, 128]; let border: RGB = [128, 128, 128]; let borderAlpha = 1; let background: RGB = [255, 255, 255]; const readTokens = () => { const root = getComputedStyle(document.documentElement); fg = parseColor(root.getPropertyValue("--foreground")) ?? fg; muted = parseColor(root.getPropertyValue("--ns-muted")) ?? muted; border = parseColor(root.getPropertyValue("--border")) ?? border; background = parseColor(root.getPropertyValue("--background")) ?? background; const m = root.getPropertyValue("--border").match(/rgba?$[^)]*,\s*([\d.]+)\s*$/); borderAlpha = m ? Number(m[1]) : 1; }; let width = 0; let sized = false; let minDim = NOMINAL_MIN_DIM; let scale = 1; let L = L0; let FEED = FEED0; let strandR = STRAND_R0; let layerStep = LAYER_STEP0; let topX = 0; let midY = 0; let baseRadius = 0; let drumCx = 0; let circumference = 1; const resize = () => { const rect = canvas.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) { sized = false; return; } width = rect.width; const h = rect.height; minDim = Math.min(width, h); scale = Math.max(0.55, Math.min(2.2, minDim / NOMINAL_MIN_DIM)); L = L0 * scale; FEED = FEED0 * scale; strandR = STRAND_R0 * scale; layerStep = LAYER_STEP0 * scale; midY = h / 2; baseRadius = minDim * 0.12; const maxOuterRadius = baseRadius + (MAX_LAYERS + 1) * layerStep; const pad = DRUM_PAD0 * scale; drumCx = width - pad - maxOuterRadius; topX = Math.min(width * TOP_X_FRAC, Math.max(20, drumCx - 24)); circumference = 2 * Math.PI * baseRadius; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.max(1, Math.round(rect.width * dpr)); canvas.height = Math.max(1, Math.round(rect.height * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); sized = true; }; // -- persistent state --------------------------------------------------- let feedDist = 0; // px hauled off, monotonic, never reset let newestCompletedLayer = -1; // absolute index of newest fully-wound layer const rings: RingState[] = []; const slotRadius = (slot: number) => baseRadius + slot * layerStep; // called whenever newestCompletedLayer advances by exactly one — keeps // the visible ring window (the most recent MAX_LAYERS layers) current // and starts recycling the layer that just aged out of it. const promoteLayer = () => { rings.push({ absIdx: newestCompletedLayer, radius: baseRadius + (MAX_LAYERS + 1) * layerStep, // starts at the active-ring position targetRadius: slotRadius(MAX_LAYERS - 1), opacity: 1, targetOpacity: 1, }); const oldestVisible = newestCompletedLayer - MAX_LAYERS + 1; for (const r of rings) { if (r.absIdx < oldestVisible) { r.targetOpacity = 0; } else { const slot = MAX_LAYERS - 1 - (newestCompletedLayer - r.absIdx); r.targetRadius = slotRadius(slot); } } }; const stepRings = (dt: number) => { const rEase = 1 - Math.exp(-RADIUS_EASE * dt); const oEase = 1 - Math.exp(-(1 / LAYER_FADE_S) * dt); for (let i = rings.length - 1; i >= 0; i--) { const r = rings[i]!; r.radius += (r.targetRadius - r.radius) * rEase; r.opacity += (r.targetOpacity - r.opacity) * oEase; if (r.targetOpacity === 0 && r.opacity < 0.01) rings.splice(i, 1); } }; const strandColor = (t: number, alpha: number) => { // t in [0,1]: 0 = furthest strand (--ns-muted), 1 = nearest (--foreground) const c: RGB = [ Math.round(muted[0] + (fg[0] - muted[0]) * t), Math.round(muted[1] + (fg[1] - muted[1]) * t), Math.round(muted[2] + (fg[2] - muted[2]) * t), ]; return rgbStr(c, alpha); }; const draw = () => { if (!sized) return; const rect = canvas.getBoundingClientRect(); const h = rect.height; ctx.clearRect(0, 0, rect.width, h); const layPhase = (2 * Math.PI * feedDist) / L; // -- 3 strands, back-to-front by their cos(phase) at convergence ----- const strandOrder = [0, 1, 2].sort((a, b) => { const ca = Math.cos((a * 2 * Math.PI) / 3 - layPhase); const cb = Math.cos((b * 2 * Math.PI) / 3 - layPhase); return ca - cb; // ascending: furthest (most negative) drawn first }); const STEP_PX = 4; for (const i of strandOrder) { const phase = (i * 2 * Math.PI) / 3; const frontness = (Math.cos(phase - layPhase) + 1) / 2; // 0..1 ctx.beginPath(); let started = false; for (let x = 0; x <= topX; x += STEP_PX) { const y = midY + strandR * Math.cos((2 * Math.PI * x) / L - layPhase + phase); if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); } } ctx.strokeStyle = strandColor(frontness, 0.5 + 0.4 * frontness); ctx.lineWidth = 1.4 * scale; ctx.lineCap = "round"; ctx.stroke(); } // -- the laid rope, convergence point to drum ------------------------- const ropeEndX = drumCx - baseRadius; ctx.beginPath(); ctx.moveTo(topX, midY); ctx.lineTo(ropeEndX, midY); ctx.strokeStyle = rgbStr(fg, 0.85); ctx.lineWidth = 2.4 * scale; ctx.lineCap = "round"; ctx.stroke(); // periodic luminance ripple riding the rope body — twist structure, // never itself a separate hue. for (let x = topX; x < ropeEndX; x += 3) { const ripple = Math.cos((2 * Math.PI * x) / L - layPhase); if (ripple <= 0.4) continue; ctx.fillStyle = rgbStr(background, RIPPLE_ALPHA * ripple); ctx.fillRect(x, midY - 1.2 * scale, 3, 2.4 * scale); } // -- drum ------------------------------------------------------------- ctx.beginPath(); ctx.arc(drumCx, midY, baseRadius, 0, Math.PI * 2); ctx.strokeStyle = rgbStr(border, borderAlpha); ctx.lineWidth = 1; ctx.stroke(); for (const r of rings) { if (r.opacity <= 0.01) continue; ctx.beginPath(); ctx.arc(drumCx, midY, r.radius, 0, Math.PI * 2); ctx.strokeStyle = rgbStr(fg, 0.75 * r.opacity); ctx.lineWidth = Math.max(1, layerStep * 0.6); ctx.stroke(); } // active (still-filling) layer const wrapProgressTotal = feedDist / circumference; const wrapsCompletedInt = Math.floor(wrapProgressTotal); const partialWrap = wrapProgressTotal - wrapsCompletedInt; const currentLayerWraps = ((wrapsCompletedInt % WRAPS_PER_LAYER) + WRAPS_PER_LAYER) % WRAPS_PER_LAYER; const activeRadius = baseRadius + (MAX_LAYERS + 1) * layerStep; if (currentLayerWraps === 0) { // first wrap of a fresh layer: a genuine sweeping arc, 0 -> 2π ctx.beginPath(); ctx.arc(drumCx, midY, activeRadius, -Math.PI / 2, -Math.PI / 2 + partialWrap * Math.PI * 2); ctx.strokeStyle = rgbStr(fg, 0.85); ctx.lineWidth = Math.max(1, layerStep * 0.6); ctx.stroke(); } else { // subsequent wraps at the same radius are indistinguishable from // the first — represented as rising opacity, not a redundant sweep. const fillFrac = (currentLayerWraps + partialWrap) / WRAPS_PER_LAYER; ctx.beginPath(); ctx.arc(drumCx, midY, activeRadius, 0, Math.PI * 2); ctx.strokeStyle = rgbStr(fg, 0.5 + 0.4 * fillFrac); ctx.lineWidth = Math.max(1, layerStep * 0.6); ctx.stroke(); } }; let raf = 0; let last = 0; let visible = true; const loop = (now: number) => { if (!visible || document.hidden) { raf = 0; return; } const dt = last ? Math.min(0.25, (now - last) / 1000) : 1 / 60; last = now; feedDist += FEED * dt; const wrapsCompletedInt = Math.floor(feedDist / circumference); const totalCompletedLayers = Math.floor(wrapsCompletedInt / WRAPS_PER_LAYER); while (totalCompletedLayers > newestCompletedLayer + 1) { newestCompletedLayer += 1; promoteLayer(); } if (totalCompletedLayers === newestCompletedLayer + 1) { newestCompletedLayer += 1; promoteLayer(); } stepRings(dt); draw(); raf = requestAnimationFrame(loop); }; const start = () => { if (raf || reduced) return; last = 0; raf = requestAnimationFrame(loop); }; const stop = () => { cancelAnimationFrame(raf); raf = 0; }; const mo = new MutationObserver(() => { readTokens(); if (reduced) draw(); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); let resizeTimer: ReturnType | null = null; const onResize = () => { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { resizeTimer = null; readTokens(); resize(); draw(); }, 120); }; const ro = new ResizeObserver(onResize); ro.observe(canvas); const io = new IntersectionObserver( (entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible) start(); else stop(); }, { threshold: 0 } ); io.observe(canvas); const onVis = () => { if (document.hidden) stop(); else if (visible) start(); }; document.addEventListener("visibilitychange", onVis); // no paint before the first token read readTokens(); resize(); if (reduced) { // LAY_QUARTER_PHASE — strand phase frozen at π/2 (the 3 strands at // their most visually separated moment, pre-convergence) while the // drum already shows 2 full layers plus a half-filled 3rd, so both // the twist mechanism and the accumulation are legible in one frame. const wrapsForTwoLayers = 2 * WRAPS_PER_LAYER + WRAPS_PER_LAYER * 0.5; const rawFeedForWraps = wrapsForTwoLayers * circumference; const quarterPhaseOffset = L * 0.25; const layTurns = Math.round((rawFeedForWraps - quarterPhaseOffset) / L); feedDist = layTurns * L + quarterPhaseOffset; const wrapsCompletedInt = Math.floor(feedDist / circumference); const totalCompletedLayers = Math.floor(wrapsCompletedInt / WRAPS_PER_LAYER); while (totalCompletedLayers > newestCompletedLayer) { newestCompletedLayer += 1; promoteLayer(); } for (const r of rings) { r.radius = r.targetRadius; r.opacity = r.targetOpacity; } draw(); } else { draw(); start(); } return () => { stop(); if (resizeTimer) clearTimeout(resizeTimer); mo.disconnect(); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [height]); return (

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/ropewalk-lay-twist/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/ropewalk-lay-twist.tsx"}],"className":"h-[70svh] min-h-80"}]]}]