50: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"] 51: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"] 52:T3fd6,"use client"; import { motion } from "motion/react"; import * as React from "react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export interface PastelPalette { /** Outer soft gradient — top stop. */ base: string; /** Outer soft gradient — bottom stop. */ baseAlt: string; /** Card surface fill. */ surface: string; /** Nested surface (stat, input, chips) fill. */ surfaceSoft: string; /** Primary accent — filled button, active chip, stat figure. */ primary: string; /** Text/icon color that sits on `primary`. */ onPrimary: string; /** Secondary accent — tints the second floating orb. */ accent: string; /** Heading + body text. */ text: string; /** Muted / secondary text. */ muted: string; /** Hairline borders around the card and nested surfaces. */ border: string; } export interface PastelPreset { /** Stable id used for controlled selection and React keys. */ id: string; /** Chip label shown in the switcher. */ label: string; /** Token set applied when this preset is active. */ palette: PastelPalette; } /** Built-in hue families — a candy spread across cool + warm pastels. */ const PRESETS: PastelPreset[] = [ { id: "mint", label: "Mint", palette: { base: "#eafbf3", baseAlt: "#d6f3e8", surface: "#f7fffb", surfaceSoft: "#e9f9f1", primary: "#4fd1a5", onPrimary: "#ffffff", accent: "#8fe0cd", text: "#2f5d4f", muted: "#6f9488", border: "#cfeee1", }, }, { id: "peach", label: "Peach", palette: { base: "#fff2ec", baseAlt: "#ffe1d3", surface: "#fff9f6", surfaceSoft: "#ffece3", primary: "#ff9e7d", onPrimary: "#ffffff", accent: "#ffc7a6", text: "#6b3f34", muted: "#a9776a", border: "#ffd8c7", }, }, { id: "lavender", label: "Lavender", palette: { base: "#f3effc", baseAlt: "#e6ddfa", surface: "#faf8ff", surfaceSoft: "#efe9fc", primary: "#a78bfa", onPrimary: "#ffffff", accent: "#c9b8fb", text: "#4a3d6b", muted: "#8073a6", border: "#ded3f5", }, }, { id: "sky", label: "Sky", palette: { base: "#ecf5ff", baseAlt: "#d7eaff", surface: "#f6fbff", surfaceSoft: "#e6f2ff", primary: "#6cb8f6", onPrimary: "#ffffff", accent: "#a3d3f9", text: "#33506b", muted: "#6f92ac", border: "#cee6fb", }, }, ]; export interface PastelProps extends Omit, "onChange"> { /** Controlled active preset id (matches a preset's `id`). */ variant?: string; /** Initial preset id when uncontrolled. @default "mint" (first preset) */ defaultVariant?: string; /** Fires with the next preset id whenever the switcher changes. */ onVariantChange?: (id: string) => void; /** Override the built-in preset set (chips + palettes). @default the four built-in hue families */ presets?: PastelPreset[]; /** Token overrides merged over the active preset — makes any palette reachable. */ colors?: Partial; /** Orb-drift speed multiplier. @default 1 */ speed?: number; /** Floating-orb opacity/presence multiplier. @default 1 */ intensity?: number; /** Freeze the orbs at their resting pose. @default false */ paused?: boolean; /** Subtle film grain over the card. @default true */ grain?: boolean; /** Small pill above the heading. @default "Just for you" */ tagline?: string; /** Rounded display heading. @default "Sweet spot" */ heading?: string; /** Body line under the heading. @default "Soft surfaces, gentle color. Pick a hue." */ description?: string; /** Stat figure. @default "24" */ statValue?: string; /** Stat unit / label. @default "day streak" */ statLabel?: string; /** Small outline tag. @default "cozy" */ tag?: string; /** Filled button label. @default "Get started" */ primaryLabel?: string; /** Soft button label. @default "Maybe later" */ secondaryLabel?: string; /** Accessible label for the panel region. @default "Soft pastel theme preset" */ label?: string; /** Accessible label for the switcher group. @default "Hue family" */ switcherLabel?: string; } interface Orb { left: number; top: number; size: number; hue: "primary" | "accent"; dx: number; dy: number; dur: number; delay: number; } /** Deterministic PRNG so the orb scatter matches on server and client. */ function mulberry32(seed: number): () => number { let a = seed >>> 0; return () => { a |= 0; a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } /** Tiny fractal-noise tile for the optional grain — static, so SSR-safe. */ const GRAIN_URL = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"; /** * Pastel — a self-contained soft-pastel theme preset. A generously rounded card * with a heading, body, stat, tag, and two buttons, painted in a low-contrast * candy palette over a dreamy tinted gradient, with soft shadows and a couple of * gently drifting color orbs behind the content. A keyboard-operable radiogroup * of hue chips (Mint / Peach / Lavender / Sky) re-tokens the whole panel live; * the palette is fully exposed via `presets` and `colors`. Reduced motion (and * `paused`) pins the orbs to a calm static pose — no drift, never a blank frame. */ export function Pastel({ variant, defaultVariant, onVariantChange, presets, colors, speed = 1, intensity = 1, paused = false, grain = true, tagline = "Just for you", heading = "Sweet spot", description = "Soft surfaces, gentle color. Pick a hue.", statValue = "24", statLabel = "day streak", tag = "cozy", primaryLabel = "Get started", secondaryLabel = "Maybe later", label = "Soft pastel theme preset", switcherLabel = "Hue family", className, style, ...rest }: PastelProps) { const reducedMotion = useReducedMotion(); const list = presets && presets.length > 0 ? presets : PRESETS; const isControlled = variant !== undefined; const [internal, setInternal] = React.useState(defaultVariant ?? list[0].id); const activeId = isControlled ? variant : internal; const active = list.find((p) => p.id === activeId) ?? list[0]; const t: PastelPalette = { ...active.palette, ...colors }; const spd = Math.max(0.1, speed); const amt = Math.max(0, intensity); const still = reducedMotion || paused; const orbs = React.useMemo(() => { const rnd = mulberry32(0x9a57); return [ { hue: "primary" as const, base: 0 }, { hue: "accent" as const, base: 1 }, { hue: "primary" as const, base: 2 }, ].map(({ hue }) => ({ hue, left: 8 + rnd() * 64, top: 6 + rnd() * 60, size: 120 + rnd() * 90, dx: (rnd() * 2 - 1) * 22, dy: (rnd() * 2 - 1) * 18, dur: 9 + rnd() * 6, delay: rnd() * 2.5, })); }, []); const activeIdx = Math.max( 0, list.findIndex((p) => p.id === activeId) ); const chipRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const select = React.useCallback( (i: number) => { const next = list[i]; if (!next) return; if (!isControlled) setInternal(next.id); onVariantChange?.(next.id); }, [list, isControlled, onVariantChange] ); const onSwitcherKey = React.useCallback( (e: React.KeyboardEvent) => { let next = activeIdx; switch (e.key) { case "ArrowRight": case "ArrowDown": next = (activeIdx + 1) % list.length; break; case "ArrowLeft": case "ArrowUp": next = (activeIdx - 1 + list.length) % list.length; break; case "Home": next = 0; break; case "End": next = list.length - 1; break; default: return; } e.preventDefault(); select(next); chipRefs.current[next]?.focus(); }, [activeIdx, list, select] ); const vars = { "--pp": t.primary, "--pon": t.onPrimary, "--pacc": t.accent, "--psurface": t.surface, "--psoft": t.surfaceSoft, "--ptext": t.text, "--pmuted": t.muted, "--pborder": t.border, background: `linear-gradient(160deg, ${t.base} 0%, ${t.baseAlt} 100%)`, } as React.CSSProperties; const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--pp)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--psurface)]"; return (

{/* Drifting soft orbs — decorative. */}

{orbs.map((o, i) => ( ))}

{/* Card surface. */}

{tagline}

{heading}

{description}

{/* Stat + tag */}

{statValue} {statLabel}

{tag}

{/* Buttons */}

{/* Hue switcher — a real radiogroup with roving focus. */}

{list.map((p, i) => { const selected = p.id === active.id; return ( ); })}

{/* Optional film grain over the whole card. */} {grain && (

)}

); } 4f:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@crucible","registryDependencies":["https://crucibleui.com/r/use-reduced-motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/themes/pastel/pastel.tsx","content":"$52","type":"registry:ui","target":"components/crucible/pastel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]