51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53:T3113,"use client" import * as React from "react" import { useFrame } from "@react-three/fiber" import * as THREE from "three" import { SceneContainer, type SceneContainerProps, } from "@/components/threecn/scene-container" import { useShadcnTheme, type ThemeMode, } from "@/components/hooks/use-shadcn-theme" /** Rounded platform the pitch sits on. */ const SLAB_W = 7.8 const SLAB_H = 5.2 const SLAB_R = 0.55 const SLAB_DEPTH = 0.16 /** Playing field (105m × 68m scaled down), markings derive from FIFA metrics. */ const PITCH_W = 6.8 const PITCH_H = PITCH_W * (68 / 105) const M = PITCH_W / 105 // meters → scene units const PEN_DEPTH = 16.5 * M const PEN_WIDTH = 40.32 * M const GOAL_AREA_DEPTH = 5.5 * M const GOAL_AREA_WIDTH = 18.32 * M const SPOT_DIST = 11 * M const CIRCLE_R = 9.15 * M const GOAL_W = 7.32 * M const GOAL_H = 2.44 * M const GOAL_D = 0.18 /** How far mountains spread and how strongly detail noise crags them. */ const SIGMA = 1.6 const INV_2S2 = 1 / (2 * SIGMA * SIGMA) /** Squashes the across-pitch axis so mountains stretch over the full width. */ const Z_WEIGHT = 0.45 const LINE_Y = 0.012 function hash2(ix: number, iz: number) { const s = Math.sin(ix * 127.1 + iz * 311.7) * 43758.5453 return s - Math.floor(s) } /** Bilinear value noise in [0, 1]. */ function vnoise(x: number, z: number) { const ix = Math.floor(x) const iz = Math.floor(z) const fx = x - ix const fz = z - iz const ux = fx * fx * (3 - 2 * fx) const uz = fz * fz * (3 - 2 * fz) const a = hash2(ix, iz) const b = hash2(ix + 1, iz) const c = hash2(ix, iz + 1) const d = hash2(ix + 1, iz + 1) return a + (b - a) * ux + (c - a) * uz + (a - b - c + d) * ux * uz } /** Ridged fractal noise — sharp crests, craggy slopes. */ function ridgedFbm(x: number, z: number) { let sum = 0 let amp = 0.5 let freq = 1 let px = x let pz = z for (let o = 0; o < 4; o++) { const n = 1 - Math.abs(2 * vnoise(px * freq, pz * freq) - 1) sum += n * n * amp amp *= 0.5 freq *= 2.1 // Rotate each octave so the lattice never lines up into visible bands. const rx = px * 0.7648 - pz * 0.6442 pz = px * 0.6442 + pz * 0.7648 + 13.7 px = rx + 7.3 } return sum // ≈ [0, 1] } function insideSlab(x: number, z: number) { const dx = Math.abs(x) - (SLAB_W / 2 - SLAB_R) const dz = Math.abs(z) - (SLAB_H / 2 - SLAB_R) if (dx <= 0 || dz <= 0) { return Math.abs(x) <= SLAB_W / 2 && Math.abs(z) <= SLAB_H / 2 } return dx * dx + dz * dz <= SLAB_R * SLAB_R } /** All field markings + both goals as one LineSegments position buffer. */ function buildMarkings(): Float32Array { const out: number[] = [] const seg = (x1: number, z1: number, x2: number, z2: number) => { out.push(x1, LINE_Y, z1, x2, LINE_Y, z2) } const rect = (cx: number, hw: number, hh: number) => { seg(cx - hw, -hh, cx + hw, -hh) seg(cx + hw, -hh, cx + hw, hh) seg(cx + hw, hh, cx - hw, hh) seg(cx - hw, hh, cx - hw, -hh) } const arc = ( cx: number, cz: number, r: number, a0: number, a1: number, n: number ) => { for (let i = 0; i < n; i++) { const t0 = a0 + ((a1 - a0) * i) / n const t1 = a0 + ((a1 - a0) * (i + 1)) / n seg( cx + r * Math.cos(t0), cz + r * Math.sin(t0), cx + r * Math.cos(t1), cz + r * Math.sin(t1) ) } } // Touchlines, halfway line, center circle and spot. rect(0, PITCH_W / 2, PITCH_H / 2) seg(0, -PITCH_H / 2, 0, PITCH_H / 2) arc(0, 0, CIRCLE_R, 0, Math.PI * 2, 64) arc(0, 0, 0.025, 0, Math.PI * 2, 8) for (const side of [-1, 1]) { const goalLine = (side * PITCH_W) / 2 // Penalty and goal areas (rectangles opening into the field). const penX = goalLine - (side * PEN_DEPTH) / 2 rect(penX, PEN_DEPTH / 2, PEN_WIDTH / 2) const gaX = goalLine - (side * GOAL_AREA_DEPTH) / 2 rect(gaX, GOAL_AREA_DEPTH / 2, GOAL_AREA_WIDTH / 2) // Penalty spot + arc ("the D") bulging toward midfield. const spotX = goalLine - side * SPOT_DIST arc(spotX, 0, 0.025, 0, Math.PI * 2, 8) const phi = Math.acos((PEN_DEPTH - SPOT_DIST) / CIRCLE_R) const mid = side > 0 ? Math.PI : 0 arc(spotX, 0, CIRCLE_R, mid - phi, mid + phi, 20) // Goal: a wireframe box sitting behind the goal line. const x0 = goalLine const x1 = goalLine + side * GOAL_D const w = GOAL_W / 2 const box = (x: number) => { out.push(x, 0, -w, x, GOAL_H, -w) out.push(x, 0, w, x, GOAL_H, w) out.push(x, GOAL_H, -w, x, GOAL_H, w) out.push(x, 0, -w, x, 0, w) } box(x0) box(x1) for (const zc of [-w, w]) { out.push(x0, 0, zc, x1, 0, zc) out.push(x0, GOAL_H, zc, x1, GOAL_H, zc) } } return Float32Array.from(out) } type Grid = { positions: Float32Array colors: Float32Array /** Static craggy detail per point. */ crag: Float32Array /** Falloff to zero outside the touchlines, so mountains stay on the field. */ envelope: Float32Array count: number } function buildGrid(density: number): Grid { const nx = density const nz = Math.round((density * SLAB_H) / SLAB_W) const positions: number[] = [] const crag: number[] = [] const envelope: number[] = [] for (let i = 0; i < nx; i++) { for (let j = 0; j < nz; j++) { const x = (i / (nx - 1) - 0.5) * SLAB_W const z = (j / (nz - 1) - 0.5) * SLAB_H if (!insideSlab(x, z)) continue positions.push(x, 0, z) crag.push(ridgedFbm(x * 1.7 + 31.4, z * 1.7 + 17.9)) const inX = PITCH_W / 2 - Math.abs(x) const inZ = PITCH_H / 2 - Math.abs(z) const m = Math.min(inX, inZ) / 0.55 const c = Math.min(1, Math.max(0, m)) envelope.push(c * c * (3 - 2 * c)) } } const count = positions.length / 3 return { positions: Float32Array.from(positions), colors: new Float32Array(count * 3), crag: Float32Array.from(crag), envelope: Float32Array.from(envelope), count, } } function Pitch({ speed, height, density, colorA, colorB, theme, }: { speed: number height: number density: number colorA: string colorB: string theme: ThemeMode }) { const { bgColor, foregroundColor, borderColor, mutedColor, isDark } = useShadcnTheme(theme) const pointsRef = React.useRef(null) const tmpColor = React.useMemo(() => new THREE.Color(), []) const teamA = React.useMemo(() => new THREE.Color(colorA), [colorA]) const teamB = React.useMemo(() => new THREE.Color(colorB), [colorB]) const white = React.useMemo(() => new THREE.Color("#ffffff"), []) const grid = React.useMemo(() => buildGrid(density), [density]) const markings = React.useMemo(() => buildMarkings(), []) const slabGeometry = React.useMemo(() => { const s = new THREE.Shape() const w = SLAB_W / 2 const h = SLAB_H / 2 const r = SLAB_R s.moveTo(-w + r, -h) s.lineTo(w - r, -h) s.absarc(w - r, -h + r, r, -Math.PI / 2, 0, false) s.lineTo(w, h - r) s.absarc(w - r, h - r, r, 0, Math.PI / 2, false) s.lineTo(-w + r, h) s.absarc(-w + r, h - r, r, Math.PI / 2, Math.PI, false) s.lineTo(-w, -h + r) s.absarc(-w + r, -h + r, r, Math.PI, Math.PI * 1.5, false) const geo = new THREE.ExtrudeGeometry(s, { depth: SLAB_DEPTH, bevelEnabled: false, }) geo.rotateX(-Math.PI / 2) geo.translate(0, -0.002, 0) return geo }, []) React.useEffect(() => { const current = slabGeometry return () => current.dispose() }, [slabGeometry]) // The platform stays dark in both modes (a dark stage suits the momentum // mountains); in light mode it reads as a dark card on a light page, so the // lines/dots swap to the light end of the palette for contrast. const slabColor = React.useMemo( () => isDark ? bgColor.clone().lerp(foregroundColor, 0.06) : foregroundColor.clone().lerp(bgColor, 0.12), [bgColor, foregroundColor, isDark] ) const lineColor = isDark ? foregroundColor : bgColor const baseDotColor = isDark ? borderColor : mutedColor useFrame(({ clock }) => { const points = pointsRef.current if (!points) return const t = clock.getElapsedTime() * speed // Each team's momentum breathes on its own rhythm, and its mountain // wanders around its half — the front line between them keeps shifting. const sA = 0.675 + 0.325 * Math.sin(t * 0.29 + 1.3) const sB = 0.675 + 0.325 * Math.sin(t * 0.37 + 4.1) const cxA = -0.95 + 0.5 * Math.sin(t * 0.13) const czA = 0.5 * Math.sin(t * 0.21 + 2) const cxB = 0.95 + 0.5 * Math.sin(t * 0.17 + 0.7) const czB = 0.5 * Math.sin(t * 0.11 + 5) // Write through the live geometry attributes (they wrap grid's buffers). const posAttr = points.geometry.attributes.position as THREE.BufferAttribute const colAttr = points.geometry.attributes.color as THREE.BufferAttribute const positions = posAttr.array as Float32Array const colors = colAttr.array as Float32Array const { crag, envelope, count } = grid for (let i = 0; i < count; i++) { const x = positions[i * 3] const z = positions[i * 3 + 2] const dA = (x - cxA) * (x - cxA) + (z - czA) * (z - czA) * Z_WEIGHT const dB = (x - cxB) * (x - cxB) + (z - czB) * (z - czB) * Z_WEIGHT const gA = sA * Math.exp(-dA * INV_2S2) const gB = sB * Math.exp(-dB * INV_2S2) const detail = 0.35 + 0.65 * crag[i] const shimmer = 1 + 0.04 * Math.sin(t * 1.3 + x * 1.9 + z * 2.4) const h = Math.max(gA, gB) * detail * envelope[i] * height * shimmer positions[i * 3 + 1] = h + 0.015 // Blue where team A dominates, red where team B does; crests whiten. const total = gA + gB const mix = total > 1e-5 ? gB / total : 0.5 const k = Math.min(1, Math.max(0, (mix - 0.5) * 3 + 0.5)) tmpColor.copy(teamA).lerp(teamB, k) const lift = Math.min(1, h / (Math.max(height, 1e-5) * 0.75)) tmpColor.lerpColors( baseDotColor, tmpColor, Math.min(1, 0.15 + 0.85 * Math.min(1, lift * 1.4)) ) const crest = Math.max(0, lift - 0.55) / 0.45 tmpColor.lerp(white, Math.min(0.85, crest * crest * 0.85)) colors[i * 3] = tmpColor.r colors[i * 3 + 1] = tmpColor.g colors[i * 3 + 2] = tmpColor.b } posAttr.needsUpdate = true colAttr.needsUpdate = true }) return ( ) } export type PitchMomentumProps = { /** Animation speed multiplier. */ speed?: number /** Peak height of the momentum mountains. */ height?: number /** Points across the platform's length (grid resolution). */ density?: number /** Color of the first team's mountain. */ colorA?: string /** Color of the second team's mountain. */ colorB?: string className?: string theme?: ThemeMode environment?: SceneContainerProps["environment"] } /** * A soccer pitch rendered as a dense field of dots, where two rival particle * mountains — one per team — surge, wander and clash as momentum swings. * Crests whiten where the fronts collide; the field markings and platform * follow your theme tokens. */ export function PitchMomentum({ speed = 1, height = 1.7, density = 230, colorA = "#60a5fa", colorB = "#dc2626", className, theme = "auto", environment = "night", }: PitchMomentumProps) { return ( ) } 54:T17ce,"use client" import * as React from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import { cn } from "@/lib/utils" import { useShadcnTheme, type ThemeMode, } from "@/components/hooks/use-shadcn-theme" export type EnvironmentPreset = "studio" | "city" | "dawn" | "night" type LightRig = { ambient: { color: string; intensity: number } key: { color: string; intensity: number; position: [number, number, number] } fill: { color: string; intensity: number; position: [number, number, number] } rim: { color: string; intensity: number; position: [number, number, number] } } /** * Offline lighting rigs. We avoid drei's because it * fetches HDRIs from a CDN — scenes must work with zero external assets. */ const RIGS: Record = { studio: { ambient: { color: "#ffffff", intensity: 0.6 }, key: { color: "#ffffff", intensity: 2.2, position: [5, 6, 5] }, fill: { color: "#dfe3ff", intensity: 0.8, position: [-6, 2, 4] }, rim: { color: "#ffffff", intensity: 1.4, position: [0, 4, -6] }, }, city: { ambient: { color: "#c7d2fe", intensity: 0.7 }, key: { color: "#e0e7ff", intensity: 1.8, position: [4, 7, 4] }, fill: { color: "#a5b4fc", intensity: 0.9, position: [-5, 1, 5] }, rim: { color: "#818cf8", intensity: 1.2, position: [-2, 3, -6] }, }, dawn: { ambient: { color: "#fde2c8", intensity: 0.5 }, key: { color: "#ffb27a", intensity: 2.0, position: [6, 4, 4] }, fill: { color: "#9fb4ff", intensity: 0.7, position: [-5, 2, 4] }, rim: { color: "#ffd9a8", intensity: 1.0, position: [0, 5, -5] }, }, night: { ambient: { color: "#1e1b4b", intensity: 0.4 }, key: { color: "#a78bfa", intensity: 1.6, position: [4, 5, 4] }, fill: { color: "#4338ca", intensity: 0.6, position: [-5, 1, 4] }, rim: { color: "#7c3aed", intensity: 1.6, position: [-2, 3, -6] }, }, } function Rig({ preset, fog, theme, }: { preset: EnvironmentPreset fog: boolean theme: ThemeMode }) { const { bgColor } = useShadcnTheme(theme) const rig = RIGS[preset] return ( <> {fog ? : null} ) } /** * Track whether an element is near the viewport. WebGL contexts are a scarce * resource (browsers cap them at ~8-16), so scenes only hold one while they are * on (or close to) screen. The generous `rootMargin` pre-mounts a scene just * before it scrolls into view, avoiding a blank first frame. */ function useInView( ref: React.RefObject, rootMargin: string ): boolean { const [inView, setInView] = React.useState(false) React.useEffect(() => { const el = ref.current if (!el) return if (typeof IntersectionObserver === "undefined") { // No observer available: render eagerly rather than never mounting. // eslint-disable-next-line react-hooks/set-state-in-effect setInView(true) return } const observer = new IntersectionObserver( ([entry]) => setInView(entry.isIntersecting), { rootMargin } ) observer.observe(el) return () => observer.disconnect() }, [ref, rootMargin]) return inView } export type SceneContainerProps = { className?: string theme?: ThemeMode environment?: EnvironmentPreset fog?: boolean /** Camera position, defaults to a gentle 3/4 view. */ camera?: [number, number, number] /** Vertical field of view. */ fov?: number children?: React.ReactNode /** Rendered as an HTML overlay above the canvas (not inside the 3D scene). */ overlay?: React.ReactNode /** * Drag to orbit the camera (rotate only — zoom and pan disabled). Defaults to * true. Set false if the scene provides its own controls. */ orbit?: boolean /** * Mount the WebGL canvas only while it is near the viewport, and tear it down * once it scrolls away. Keeps a grid of many scenes from exhausting the * browser's WebGL context limit and stops `useFrame` from running offscreen. * Defaults to true. Set false for a scene that must always render (e.g. a * persistent hero background). */ lazy?: boolean } /** * The canvas wrapper every threecn scene builds on. Sets up a transparent * canvas (so your CSS background shows through), responsive DPR, a themed * lighting rig and optional fog. */ export function SceneContainer({ className, theme = "auto", environment = "studio", fog = false, camera = [0, 0, 6], fov = 45, children, overlay, orbit = true, lazy = true, }: SceneContainerProps) { const wrapRef = React.useRef(null) const inView = useInView(wrapRef, "300px") const active = lazy ? inView : true return (

{active ? (

) : null} {overlay ?

{overlay}

: null}

) } 55:T1eb5,"use client" import * as React from "react" import { Color } from "three" /** * The set of theme-derived colors exposed to R3F scenes. * Every value is a live `THREE.Color`, ready to assign to a material. */ export type ShadcnThemeColors = { primaryColor: Color primaryForegroundColor: Color bgColor: Color foregroundColor: Color borderColor: Color mutedColor: Color accentColor: Color isDark: boolean } /** CSS custom properties read from `:root` / `.dark`. */ const CSS_VARS = { primaryColor: "--primary", primaryForegroundColor: "--primary-foreground", bgColor: "--background", foregroundColor: "--foreground", borderColor: "--border", mutedColor: "--muted-foreground", accentColor: "--accent", } as const /** * Neutral SSR defaults (a dark-ish indigo palette) used before the DOM is * available, so the first paint is never a flash of pure black. */ function createDefaults(): ShadcnThemeColors { return { primaryColor: new Color().setHSL(263 / 360, 0.7, 0.6), primaryForegroundColor: new Color().setHSL(0, 0, 0.98), bgColor: new Color().setHSL(240 / 360, 0.1, 0.039), foregroundColor: new Color().setHSL(0, 0, 0.98), borderColor: new Color().setHSL(240 / 360, 0.037, 0.159), mutedColor: new Color().setHSL(240 / 360, 0.05, 0.649), accentColor: new Color().setHSL(240 / 360, 0.037, 0.159), isDark: true, } } /** Matches a bare shadcn HSL triplet, e.g. "263 70% 50%" (optional "/ alpha"). */ const HSL_TRIPLET = /^-?[\d.]+\s+-?[\d.]+%\s+-?[\d.]+%(\s*\/\s*[\d.]+%?)?$/ /** * A lazily-created 1x1 canvas 2D context used to normalise arbitrary CSS * colors. The browser's own color parser resolves ANY format the CSS spec * supports — including `oklch()` (Tailwind v4 / recent shadcn), `color()`, * `hsl()`, `rgb()`, hex and named colors — and serialises the result back as * `#rrggbb` / `rgba(...)`, which `THREE.Color.setStyle` understands. */ let probeCtx: CanvasRenderingContext2D | null | undefined function getProbeCtx(): CanvasRenderingContext2D | null { if (probeCtx !== undefined) return probeCtx if (typeof document === "undefined") return (probeCtx = null) probeCtx = document.createElement("canvas").getContext("2d") return probeCtx } /** * Normalise any CSS color string to a form THREE can parse (or `null` if the * browser rejects it). Assigning an invalid color to `fillStyle` is a no-op, so * we probe with two different sentinels: if the result differs, the input was * valid and both reflect its normalised value; if it "sticks" to a sentinel, * the input was invalid. */ function normalizeColor(input: string): string | null { const ctx = getProbeCtx() if (!ctx) return null ctx.fillStyle = "#000" ctx.fillStyle = input const a = ctx.fillStyle ctx.fillStyle = "#fff" ctx.fillStyle = input const b = ctx.fillStyle return a === b ? a : null } /** * Parse a raw CSS color (as read from a custom property) into a `THREE.Color`. * * shadcn ships colors as bare HSL triplets ("263 70% 50%"), which we wrap in * `hsl(...)`. Everything else — `oklch()`, `rgb()`, `#hex`, `hsl()`, named — is * handed to the browser's parser via a canvas probe, so modern oklch-based * themes resolve correctly instead of silently falling back to the default. */ function parseColor(raw: string, target: Color): Color { const value = raw.trim() if (!value) return target const candidate = HSL_TRIPLET.test(value) ? `hsl(${value})` : value // Preferred path: let the browser resolve any CSS color format. const normalized = normalizeColor(candidate) if (normalized) { try { return target.setStyle(normalized) } catch { /* fall through to the manual paths below */ } } // Fallbacks for environments without a canvas (e.g. exotic SSR shims). const triplet = value.match(/^(-?[\d.]+)\s+(-?[\d.]+)%\s+(-?[\d.]+)%/) if (triplet) { const h = parseFloat(triplet[1]) / 360 const s = parseFloat(triplet[2]) / 100 const l = parseFloat(triplet[3]) / 100 return target.setHSL(h, s, l) } try { return target.setStyle(value) } catch { return target } } function readColors(previous?: ShadcnThemeColors): ShadcnThemeColors { if (typeof window === "undefined" || typeof document === "undefined") { return previous ?? createDefaults() } const root = document.documentElement const styles = getComputedStyle(root) const base = previous ?? createDefaults() const next: ShadcnThemeColors = { ...base, primaryColor: parseColor( styles.getPropertyValue(CSS_VARS.primaryColor), base.primaryColor.clone() ), primaryForegroundColor: parseColor( styles.getPropertyValue(CSS_VARS.primaryForegroundColor), base.primaryForegroundColor.clone() ), bgColor: parseColor( styles.getPropertyValue(CSS_VARS.bgColor), base.bgColor.clone() ), foregroundColor: parseColor( styles.getPropertyValue(CSS_VARS.foregroundColor), base.foregroundColor.clone() ), borderColor: parseColor( styles.getPropertyValue(CSS_VARS.borderColor), base.borderColor.clone() ), mutedColor: parseColor( styles.getPropertyValue(CSS_VARS.mutedColor), base.mutedColor.clone() ), accentColor: parseColor( styles.getPropertyValue(CSS_VARS.accentColor), base.accentColor.clone() ), isDark: root.classList.contains("dark"), } return next } export type ThemeMode = "auto" | "light" | "dark" /** * Bridges your shadcn/ui CSS variables into Three.js. * * - Reads `--primary`, `--background`, `--border`, ... on mount. * - Watches `` with a MutationObserver and re-reads on dark-mode * toggles (works with next-themes, which flips the `.dark` class). * - SSR-safe: returns neutral defaults until the DOM is ready. * * @param mode `"auto"` (default) tracks the document theme. `"light"` / `"dark"` * force a palette by temporarily toggling a detached probe element. */ export function useShadcnTheme(mode: ThemeMode = "auto"): ShadcnThemeColors { const [colors, setColors] = React.useState(() => createDefaults() ) React.useEffect(() => { if (typeof window === "undefined") return // These reads pull the live values out of an external system (the DOM's // computed CSS variables), which is a legitimate effect → state sync. if (mode !== "auto") { // eslint-disable-next-line react-hooks/set-state-in-effect setColors((prev) => readForcedMode(mode, prev)) return } // Initial read once mounted (handles hydration + system theme). setColors((prev) => readColors(prev)) const root = document.documentElement const observer = new MutationObserver(() => { setColors((prev) => readColors(prev)) }) observer.observe(root, { attributes: true, attributeFilter: ["class", "style", "data-theme"], }) return () => observer.disconnect() }, [mode]) return colors } /** * Read the palette as it would appear under a forced light/dark mode. * We synchronously toggle the `.dark` class on ``, read the computed * variables, then restore the original class in the same synchronous block. * getComputedStyle forces a style flush, so the values are accurate and the * browser never paints the intermediate state (no flicker). */ function readForcedMode( mode: "light" | "dark", previous: ShadcnThemeColors ): ShadcnThemeColors { if (typeof document === "undefined") return previous const root = document.documentElement const wasDark = root.classList.contains("dark") const wantDark = mode === "dark" if (wantDark !== wasDark) root.classList.toggle("dark", wantDark) const result = readColors(previous) if (wantDark !== wasDark) root.classList.toggle("dark", wasDark) return result } 50:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}],["$","li","@react-three/fiber",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/fiber"}]]}]}],["$","li","@react-three/drei",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/drei"}]]}]}]]}],["$","$L51",null,{"namespace":"@threecn","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/threecn/pitch-momentum.tsx","content":"$53","type":"registry:ui"},{"path":"components/threecn/scene-container.tsx","content":"$54","type":"registry:ui"},{"path":"components/hooks/use-shadcn-theme.ts","content":"$55","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]