4e: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"] 4f: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"] 50:Tba2,// snapcn UI Core · snapcn — https://snapcn.dev/docs/components import { useCurrentFrame, useVideoConfig } from "remotion"; import type { Step } from "./types"; export function framesFor( d: number | { seconds: number }, fps: number, ): number { return typeof d === "number" ? d : Math.round(d.seconds * fps); } export function revealCount( localFrame: number, fps: number, len: number, cps: number, ): number { const over = (len / cps) * fps; if (over <= 0) return len; return Math.max(0, Math.min(len, Math.floor((localFrame / over) * len))); } export function clamp01(t: number): number { return Math.max(0, Math.min(1, t)); } export function revealedText(full: string, count: number): string { const c = Math.max(0, Math.min(full.length, Math.floor(count))); return full.slice(0, c); } export interface TypewriterOptions { cps?: number; speed?: number; startFrame?: number; } export interface TypewriterState { text: string; count: number; done: boolean; typing: boolean; } export function useTypewriter( full: string, options: TypewriterOptions = {}, ): TypewriterState { const { cps = 20, speed = 1, startFrame = 0 } = options; const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const local = frame * speed - startFrame; const count = local <= 0 ? 0 : revealCount(local, fps, full.length, cps); return { text: revealedText(full, count), count, done: count >= full.length, typing: count > 0 && count < full.length, }; } export function useCurrentState( steps: Step[], defaultState: S, speed = 1, ): S { const effectiveFrame = useCurrentFrame() * speed; let current = defaultState; let bestAt = -Infinity; steps.forEach((step) => { if (step.at <= effectiveFrame && step.at >= bestAt) { bestAt = step.at; current = step.state; } }); return current; } export function useStateTransition( steps: Step[], defaultState: S, speed = 1, defaultDuration = 8, ): { from: S; to: S; progress: number } { const effectiveFrame = useCurrentFrame() * speed; const started = steps .map((step, index) => ({ step, index })) .sort((a, b) => a.step.at - b.step.at || a.index - b.index) .filter((e) => e.step.at <= effectiveFrame) // Same-`at` ties: the later array entry wins and the earlier tied // entries never display, so they can never act as a `from` state. .filter( (e, i, arr) => i === arr.length - 1 || arr[i + 1].step.at !== e.step.at, ); if (started.length === 0) return { from: defaultState, to: defaultState, progress: 1 }; const to = started[started.length - 1].step; const from = started.length >= 2 ? started[started.length - 2].step : null; const dur = to.duration ?? defaultDuration; const progress = dur > 0 ? clamp01((effectiveFrame - to.at) / dur) : 1; return { from: from ? from.state : defaultState, to: to.state, progress }; } 51:T1446,// snapcn UI Core · snapcn — https://snapcn.dev/docs/components "use client"; import type { ReactNode } from "react"; import { createContext, createElement, useContext } from "react"; export interface SnapCnTheme { background: string; foreground: string; card: string; cardForeground: string; popover: string; popoverForeground: string; primary: string; primaryForeground: string; secondary: string; secondaryForeground: string; muted: string; mutedForeground: string; accent: string; accentForeground: string; destructive: string; destructiveForeground: string; border: string; input: string; ring: string; radius: number; /** * The face every text component paints with, as a label from `fonts.ts` or a * CSS family the caller has loaded themselves. * * Optional and defaulted to nothing on purpose: unset, each component keeps * the face it was designed around, so adding this token changed no existing * render. Set it on `SnapCnUIProvider` and one value re-skins a whole * timeline — which is the only reason it lives on the theme rather than * staying a per-component prop. */ fontFamily?: string; } /** * The shadcn token set, as concrete values. * * ## These are a mirror of `app/globals.css`, and that is the whole point * * A component we ship lands next to somebody's `Button` and `Input`, and those * paint from the CSS custom properties in `globals.css`. A scene that paints * from a *different* set of greys is a scene that clashes with the app it was * installed into — which is exactly what happened here: this file was written * first, `globals.css` was later re-skinned warm, and for a while the site and * the videos it sells were two different products. * * So every value below is the **literal string** from the corresponding * `--token` in `app/globals.css` (`:root` for light, `.dark` for dark). Hex, not * oklch, purely so that drift is a string comparison — if the two files ever * disagree again, `pnpm run check:tokens` says so and prints the pairs. * * ## Why not just read `var(--token)`? * * Because a Remotion bundle has none of the app's CSS, so `var()` resolves to * nothing under the headless renderer and cannot be interpolated by `mixOklch` * at all (see the guard in `color.ts`). Concrete values are not a shortcut here, * they are the only thing that survives a render. Users on a different palette * override via `SnapCnUIProvider` or a component's `theme` prop. * * ## `radius` is the one value that flows the other way * * `globals.css` sets `--radius: 0.28rem` *so that* its `--radius-3xl` step lands * on this 10 — see the note beside it there. It is not drift; do not "fix" it. */ export const defaultLightTheme: SnapCnTheme = { background: "#faf9f6", // page — warm off-white foreground: "#141414", // text card: "#ffffff", // surface on the page cardForeground: "#141414", popover: "#ffffff", popoverForeground: "#141414", primary: "#3072db", // accent blue primaryForeground: "#ffffff", secondary: "#f2f0eb", // subtle fill secondaryForeground: "#141414", muted: "#f2f0eb", mutedForeground: "#6e6a63", // secondary text, leading icons accent: "#f2f0eb", // hover wash accentForeground: "#141414", destructive: "#d92d20", // `globals.css` defines no --destructive-foreground; white is the only thing // that reads on #d92d20, and shadcn's own default agrees. destructiveForeground: "#ffffff", border: "#d9d9d9", // hairline input: "#d9d9d9", ring: "#3072db", radius: 10, }; export const defaultDarkTheme: SnapCnTheme = { background: "#0a0a0b", // page — near-black foreground: "#fafafa", // text card: "#141417", // surface, a shade above the page cardForeground: "#fafafa", popover: "#141417", popoverForeground: "#fafafa", primary: "#3072db", // the same accent blue in both modes primaryForeground: "#ffffff", secondary: "#1d1d21", // subtle fill secondaryForeground: "#fafafa", muted: "#1b1b1f", mutedForeground: "#a1a1aa", // secondary text, leading icons accent: "#1d1d21", // hover wash accentForeground: "#fafafa", destructive: "#f97066", destructiveForeground: "#fafafa", border: "#26272b", // hairline — separation is borders, not shadows input: "#26272b", ring: "#3072db", radius: 10, }; interface SnapCnThemeContextValue { theme?: Partial; mode?: "light" | "dark"; } const SnapCnThemeContext = createContext({}); export interface SnapCnUIProviderProps { theme?: Partial; mode?: "light" | "dark"; children: ReactNode; } export function SnapCnUIProvider({ theme, mode, children, }: SnapCnUIProviderProps) { return createElement( SnapCnThemeContext.Provider, { value: { theme, mode } }, children, ); } export function useSnapCnTheme( override?: Partial, modeOverride?: "light" | "dark", ): SnapCnTheme { const ctx = useContext(SnapCnThemeContext); const mode = modeOverride ?? ctx.mode ?? "light"; const base = mode === "dark" ? defaultDarkTheme : defaultLightTheme; return { ...base, ...ctx.theme, ...override }; } 52:Td28,// snapcn UI Core · snapcn — https://snapcn.dev/docs/components "use client"; import { loadFont as loadGeist } from "@remotion/google-fonts/Geist"; import { loadFont as loadInstrumentSerif } from "@remotion/google-fonts/InstrumentSerif"; import { loadFont as loadInter } from "@remotion/google-fonts/Inter"; import { loadFont as loadMontserrat } from "@remotion/google-fonts/Montserrat"; import { loadFont as loadOutfit } from "@remotion/google-fonts/Outfit"; import { loadFont as loadSpaceGrotesk } from "@remotion/google-fonts/SpaceGrotesk"; /** * The type faces a scene's `fontFamily` may name. * * ## Why an allowlist and not a free string * * Every component in this registry loads its face through * `@remotion/google-fonts` rather than a CSS variable, for the reason spelled * out at the top of each one: a Remotion bundle has none of the app's CSS, so * `var(--font-…)` gets you the right face in the Player and a **fallback in the * mp4**. A bare family name handed to a component has exactly the same problem * — the browser preview finds it, the render does not, and the bug is invisible * until someone plays the file. * * So a name only counts as a font here if this module has loaded it. Values map * label → the real CSS family string `loadFont` returns, which is not always the * label ("Instrument Serif", not "InstrumentSerif"). * * ## A raw stack still works * * `resolveFont` passes anything it does not recognise straight through, so a * caller who has loaded their own face — a brand font, a local `@font-face` — * names it directly and gets it. The allowlist is the safe path, not the only one. * * ponytail: all six load at module scope, so a render fetches six latin subsets * whether or not the video uses them. Move to a lazy per-family `loadFont()` if * bundle time ever shows up in a render trace. */ export const FONTS: Record = { Inter: loadInter("normal", { weights: ["400", "500", "600", "700"], subsets: ["latin"], }).fontFamily, Geist: loadGeist("normal", { weights: ["400", "500", "600", "700"], subsets: ["latin"], }).fontFamily, "Space Grotesk": loadSpaceGrotesk("normal", { weights: ["400", "500", "600", "700"], subsets: ["latin"], }).fontFamily, Outfit: loadOutfit("normal", { weights: ["400", "500", "600", "700"], subsets: ["latin"], }).fontFamily, Montserrat: loadMontserrat("normal", { weights: ["400", "500", "600", "700"], subsets: ["latin"], }).fontFamily, // 400 is the only weight this family ships. Asking for 600 throws. "Instrument Serif": loadInstrumentSerif("normal", { weights: ["400"], subsets: ["latin"], }).fontFamily, }; /** * What a select control offers. `DEFAULT_FONT` first: a scene's own face is a * design decision, so the knob has to have an "off", and it has to be the * value it ships at. */ export const DEFAULT_FONT = "Default"; export const FONT_NAMES = [DEFAULT_FONT, ...Object.keys(FONTS)]; /** * Label → loaded CSS family. Anything unrecognised passes through unchanged, so * a caller's own stack is never swallowed. `undefined` in, `undefined` out — * that is the signal for "keep the component's own face". */ export const resolveFont = (name?: string): string | undefined => !name || name === DEFAULT_FONT ? undefined : (FONTS[name] ?? name); 53:Tbc5,// snapcn UI Core · snapcn — https://snapcn.dev/docs/components import { clampChroma, converter, formatRgb, interpolate, type Oklch, parse, type Rgb, } from "culori"; const toRgb = converter("rgb"); const toOklch = converter("oklch"); const BLACK: Rgb = { mode: "rgb", r: 0, g: 0, b: 0, alpha: 1 }; export function parseColor(c: string): Rgb { const s = c.trim(); if (s.startsWith("var(")) { if (process.env.NODE_ENV !== "production") { console.warn( `[snap-cn-ui] parseColor cannot resolve CSS variable "${s}" under Remotion's per-frame render. ` + "Animated colors must be concrete oklch/hex/rgb values supplied via the theme. " + "Falling back to the JS default.", ); } return { ...BLACK }; } const rgb = toRgb(parse(s)); if (!rgb) { if (process.env.NODE_ENV !== "production") { console.warn( `[snap-cn-ui] parseColor could not parse "${s}"; using black.`, ); } return { ...BLACK }; } return { mode: "rgb", r: rgb.r, g: rgb.g, b: rgb.b, alpha: rgb.alpha ?? 1 }; } export function oklchToRgb(l: number, c: number, h: number): Rgb { const mapped = clampChroma({ mode: "oklch", l, c, h }, "oklch", "rgb"); return toRgb(mapped); } export function rgbToOklch(rgb: Rgb): Oklch { const { l, c, h } = toOklch(rgb); return { mode: "oklch", l, c, h: Number.isFinite(h) ? h : 0 }; } function resolveColorString(s: string): string { const trimmed = s.trim(); if (trimmed.startsWith("var(")) { if (process.env.NODE_ENV !== "production") { console.warn( `[snap-cn-ui] mixOklch cannot resolve CSS variable "${trimmed}" under Remotion's per-frame render. ` + "Animated colors must be concrete oklch/hex/rgb values supplied via the theme. " + "Falling back to the JS default.", ); } return "#000"; } if (!parse(trimmed)) { if (process.env.NODE_ENV !== "production") { console.warn( `[snap-cn-ui] mixOklch could not parse "${trimmed}"; using black.`, ); } return "#000"; } return trimmed; } export function mixOklch(a: string, b: string, t: number): string { const mixed = clampChroma( interpolate([resolveColorString(a), resolveColorString(b)], "oklch")(t), "oklch", "rgb", ); return toCss(toRgb(mixed)); } export function toCss(color: Rgb): string { return formatRgb(color); } /** * A token at partial opacity — for scrims, veils and inner washes. * * A scrim written as a literal `rgba(0,0,0,0.4)` is lit for a light surface and * does nothing on a dark one; `withAlpha(t.foreground, 0.4)` follows the theme * and a user's override. Resolves through `parseColor`, so it inherits the same * `var()` guard — an unresolvable token degrades to black rather than an * invalid colour string mid-render. */ export function withAlpha(color: string, alpha: number): string { const { r, g, b } = parseColor(color); return formatRgb({ mode: "rgb", r, g, b, alpha }); } 54:T6db,// snapcn UI Core · snapcn — https://snapcn.dev/docs/components import { createContext, type ReactElement, type ReactNode, useContext, } from "react"; /** * One object in a scene — a card, a step, a message, a photo — handed to * whoever is editing the scene. * * A scene draws its objects itself: it knows where each one is on every frame. * Remotion Studio wants each one as something it can select, outline and edit * on its own. `Item` is the seam between the two. The scene wraps the root * element of each object in it: * * *
…
* * * With nothing above it — which is every `shadcn add` install and every render * on the site — it returns that element untouched: no wrapper, no extra DOM, no * behaviour. Inside a Studio Element, an `ItemHost` above it gets the element * and the object's index, and can put it inside the object's own `` * with the selection outline on that exact node, so the outline moves with the * object for its whole animation. */ export type ItemHost = (index: number, node: ReactElement) => ReactNode; const ItemHostContext = createContext(null); export const ItemHostProvider = ItemHostContext.Provider; export function Item({ index, primary = true, children, }: { /** Which of the scene's objects this is, in the order its props list them. */ index: number; /** * False on every copy but one, for a scene that draws the same object more * than once (a looping rail): an object has one outline. */ primary?: boolean; children: ReactElement; }): ReactNode { const host = useContext(ItemHostContext); return host && primary ? host(index, children) : children; } 4d:["$","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","remotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","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":"remotion"}]]}]}],["$","li","culori",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/culori","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":"culori"}]]}]}],["$","li","@remotion/google-fonts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40remotion%2Fgoogle-fonts","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":"@remotion/google-fonts"}]]}]}]]}],["$","$L4e",null,{"namespace":"@snapcn","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/snap-cn-ui/core/timeline.ts","content":"$50","type":"registry:lib","target":"lib/snap-cn-ui/timeline.ts"},{"path":"registry/snap-cn-ui/core/theme.ts","content":"$51","type":"registry:lib","target":"lib/snap-cn-ui/theme.ts"},{"path":"registry/snap-cn-ui/core/fonts.ts","content":"$52","type":"registry:lib","target":"lib/snap-cn-ui/fonts.ts"},{"path":"registry/snap-cn-ui/core/color.ts","content":"$53","type":"registry:lib","target":"lib/snap-cn-ui/color.ts"},{"path":"registry/snap-cn-ui/core/motion.ts","content":"// snapcn UI Core · snapcn — https://snapcn.dev/docs/components\nexport const easings = {\n linear: (t: number): number => t,\n out: (t: number): number => 1 - (1 - t) ** 3,\n in: (t: number): number => t * t * t,\n inOut: (t: number): number =>\n t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2,\n} as const;\n\nexport type EasingName = keyof typeof easings;\n\nexport const springs = {\n snappy: { damping: 18, stiffness: 220, mass: 0.7 },\n soft: { damping: 14, stiffness: 120, mass: 0.9 },\n bouncy: { damping: 10, stiffness: 180, mass: 0.8 },\n} as const;\n\nexport type SpringName = keyof typeof springs;\n","type":"registry:lib","target":"lib/snap-cn-ui/motion.ts"},{"path":"registry/snap-cn-ui/core/item.tsx","content":"$54","type":"registry:lib","target":"lib/snap-cn-ui/item.tsx"},{"path":"registry/snap-cn-ui/core/types.ts","content":"// snapcn UI Core · snapcn — https://snapcn.dev/docs/components\nexport interface Step {\n at: number;\n state: S;\n duration?: number;\n}\n","type":"registry:lib","target":"lib/snap-cn-ui/types.ts"},{"path":"registry/snap-cn-ui/core/index.ts","content":"// snapcn UI Core · snapcn — https://snapcn.dev/docs/components\nexport {\n mixOklch,\n oklchToRgb,\n parseColor,\n rgbToOklch,\n toCss,\n withAlpha,\n} from \"./color\";\nexport { FONT_NAMES, FONTS, resolveFont } from \"./fonts\";\nexport type { ItemHost } from \"./item\";\nexport { Item, ItemHostProvider } from \"./item\";\nexport type { EasingName, SpringName } from \"./motion\";\nexport { easings, springs } from \"./motion\";\nexport type { SnapCnTheme, SnapCnUIProviderProps } from \"./theme\";\nexport {\n defaultDarkTheme,\n defaultLightTheme,\n SnapCnUIProvider,\n useSnapCnTheme,\n} from \"./theme\";\nexport type { TypewriterOptions, TypewriterState } from \"./timeline\";\nexport {\n clamp01,\n framesFor,\n revealCount,\n revealedText,\n useCurrentState,\n useStateTransition,\n useTypewriter,\n} from \"./timeline\";\nexport type { Step } from \"./types\";\n","type":"registry:lib","target":"lib/snap-cn-ui/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]