/* components.jsx - shared data, theme hooks and small UI primitives */ const THEMES = [ { id: "blue", name: "Blue / Original", short: "Blue", sub: "Cyan -> Blue -> Violet", note: "The core Devis Lab signal: cool, digital, optimistic.", status: "core", asset: "blue", c1: "#00D4CB", c2: "#2563EB", c3: "#7C3AED", logoCyan: "#00D4CB", logoAccent: "#2563EB", logoEnd: "#7C3AED", logoSparkle: "#BFFFF8", logoSparkleStrong: "#0EA5E9", pixelBase1: "#00D4CB", pixelBase2: "#2563EB", pixelBase3: "#7C3AED", pixelSignal: "#00F0C8", soft: "rgba(37,99,235,0.09)", ring: "rgba(0,212,203,0.28)", }, { id: "magenta", name: "Magenta", short: "Magenta", sub: "Pink -> Magenta -> Berry", note: "Creative, bright and maker-friendly for playful experiments.", status: "experiment", asset: "magenta", c1: "#F472B6", c2: "#EC4899", c3: "#BE185D", logoCyan: "#F472B6", logoAccent: "#EC4899", logoEnd: "#BE185D", logoSparkle: "#FFD6EC", logoSparkleStrong: "#EC4899", pixelBase1: "#FF6FBF", pixelBase2: "#EC4899", pixelBase3: "#8B5CF6", pixelSignal: "#00F0C8", soft: "rgba(236,72,153,0.09)", ring: "rgba(244,114,182,0.28)", }, { id: "green", name: "Green / Teal", short: "Green", sub: "Mint -> Teal -> Emerald", note: "Fresh, focused and useful for productivity or automation tools.", status: "support", asset: "green", c1: "#34D399", c2: "#10B981", c3: "#059669", logoCyan: "#34D399", logoAccent: "#10B981", logoEnd: "#059669", logoSparkle: "#D9FFE9", logoSparkleStrong: "#10B981", pixelBase1: "#7CFFD4", pixelBase2: "#22D3A6", pixelBase3: "#14B8A6", pixelSignal: "#8AFFE0", soft: "rgba(16,185,129,0.09)", ring: "rgba(52,211,153,0.28)", }, { id: "sunset", name: "Sunset", short: "Sunset", sub: "Amber -> Orange -> Red", note: "Warm, punchy and good for launches, side quests and demos.", status: "experiment", asset: "sunset", c1: "#F59E0B", c2: "#F97316", c3: "#EF4444", logoCyan: "#F59E0B", logoAccent: "#F97316", logoEnd: "#EF4444", logoSparkle: "#FFE7B8", logoSparkleStrong: "#F97316", pixelBase1: "#FFB02E", pixelBase2: "#FF7A1A", pixelBase3: "#F43F5E", pixelSignal: "#00F0C8", soft: "rgba(249,115,22,0.10)", ring: "rgba(245,158,11,0.28)", }, { id: "violet", name: "Violet", short: "Violet", sub: "Lavender -> Violet -> Deep", note: "Studio-like, AI-friendly and slightly more serious.", status: "support", asset: "violet", c1: "#A78BFA", c2: "#7C3AED", c3: "#5B21B6", logoCyan: "#A78BFA", logoAccent: "#7C3AED", logoEnd: "#5B21B6", logoSparkle: "#EEE4FF", logoSparkleStrong: "#7C3AED", pixelBase1: "#B99CFF", pixelBase2: "#7C3AED", pixelBase3: "#2563EB", pixelSignal: "#00F0C8", soft: "rgba(124,58,237,0.10)", ring: "rgba(167,139,250,0.30)", }, ]; const THEME_ALIASES = { brand: "blue", forest: "green", }; function getTheme(themeId) { const normalized = THEME_ALIASES[themeId] || themeId; return THEMES.find((x) => x.id === normalized) || THEMES[0]; } const BRAND_FIXED = [ { name: "Ink", hex: "#0D132B", note: "Primary text / dark surfaces" }, { name: "Blue", hex: "#2563EB", note: "Brand accent / primary action" }, { name: "Violet", hex: "#7C3AED", note: "Brand accent / depth" }, { name: "Cyan", hex: "#00D4CB", note: "Brand accent / highlight" }, { name: "Mist", hex: "#F1F3F6", note: "Light surface / neutral" }, ]; const IDENTITY_MODES = { original: { label: "Primary Mark", claim: "Built to ship.", headline: "Clear signal.\nPlayful systems.\nBuilt to ship.", eyebrow: "Primary signal", description: "The official Devis Lab mark for product pages, banners and public identity.", bannerLine: "official signal for product pages", mode: "Core lab", }, pixel: { label: "Pixel Mode", claim: "Lab experiments.", headline: "Tiny pixels.\nBig signal.\nLab experiments.", eyebrow: "Pixel mode", description: "A playful mode for quick experiments, fan pages and AI lab moments.", bannerLine: "playful pixels for lab moments", mode: "Experiment", }, geometric: { label: "Studio Mark", claim: "Same signal.", headline: "Sharper geometry.\nStudio polish.\nSame signal.", eyebrow: "Studio mode", description: "A calmer geometric mode for premium studio contexts and cleaner layouts.", bannerLine: "clean geometry for studio polish", mode: "Support", }, monochrome: { label: "Utility Mono", claim: "Maximum clarity.", headline: "Tiny surfaces.\nOne color.\nMaximum clarity.", eyebrow: "Utility mode", description: "A contrast-safe utility mark for favicons, masks, docs and tiny badges.", bannerLine: "one-color clarity for tiny surfaces", mode: "Utility", }, }; function getIdentityMode(direction) { return IDENTITY_MODES[direction] || IDENTITY_MODES.original; } function applyThemeVariables(themeId) { const t = getTheme(themeId); document.documentElement.dataset.accent = t.id; const r = document.documentElement.style; r.setProperty("--accent-1", t.c1); r.setProperty("--accent-2", t.c2); r.setProperty("--accent-3", t.c3); r.setProperty("--logo-cyan", t.logoCyan); r.setProperty("--logo-accent", t.logoAccent); r.setProperty("--logo-end", t.logoEnd); r.setProperty("--logo-sparkle", t.logoSparkle); r.setProperty("--logo-sparkle-strong", t.logoSparkleStrong); r.setProperty("--wordmark-dot", t.logoSparkleStrong || t.logoAccent || t.c2); r.setProperty("--wordmark-lab-start", t.logoCyan); r.setProperty("--wordmark-lab-mid", t.logoAccent); r.setProperty("--wordmark-lab-end", t.logoEnd); r.setProperty("--pixel-theme-tint", t.logoSparkleStrong || t.logoAccent || t.c2); r.setProperty("--pixel-base-1", t.pixelBase1 || t.logoCyan); r.setProperty("--pixel-base-2", t.pixelBase2 || t.logoAccent); r.setProperty("--pixel-base-3", t.pixelBase3 || t.logoEnd); r.setProperty("--pixel-signal", t.pixelSignal || "#00F0C8"); r.setProperty("--pixel-signal-soft", `color-mix(in oklab, ${t.pixelSignal || "#00F0C8"}, transparent 74%)`); r.setProperty("--signal-dot", t.logoSparkleStrong || t.logoAccent || t.c2); r.setProperty("--signal-core", t.logoSparkleStrong || t.logoAccent || t.c2); r.setProperty("--signal-core-glow", `color-mix(in oklab, ${t.logoSparkleStrong || t.logoAccent || t.c2}, transparent 70%)`); r.setProperty("--accent-soft", t.soft); r.setProperty("--accent-ring", t.ring); r.setProperty("--glow-1", `color-mix(in oklab, ${t.c1}, transparent 70%)`); r.setProperty("--glow-2", `color-mix(in oklab, ${t.c2}, transparent 68%)`); r.setProperty("--glow-3", `color-mix(in oklab, ${t.c3}, transparent 66%)`); r.setProperty("--brand-grad", `linear-gradient(120deg, ${t.c1}, ${t.c2} 50%, ${t.c3})`); r.setProperty("--github-banner-file", `"github-banner-${t.asset}.svg"`); return t; } function applyModeVariables(mode) { document.documentElement.dataset.mode = mode; } function useApplyTheme(themeId) { React.useEffect(() => { applyThemeVariables(themeId); }, [themeId]); } function useApplyMode(mode) { React.useEffect(() => { applyModeVariables(mode); }, [mode]); } function faviconVariantForDirection(direction = "original") { if (typeof normalizeLogoVariant === "function") return normalizeLogoVariant(direction); return { original: "primary", refined: "primary", geometric: "studio", monochrome: "utility" }[direction] || direction || "primary"; } function buildDevisFaviconSvg({ themeId = "blue", direction = "original", mode = "dark" } = {}) { const theme = getTheme(themeId); const variant = faviconVariantForDirection(direction); const dark = mode !== "light"; const bg = dark ? "#070A1A" : "#EEF3F8"; const panel = dark ? "#0D132B" : "#FFFFFF"; const border = dark ? "rgba(255,255,255,.16)" : "rgba(13,19,43,.14)"; const mono = dark ? "#F8FAFC" : "#0D132B"; const paint = variant === "utility" ? mono : "url(#mark)"; const sparkle = variant === "utility" ? mono : theme.logoSparkleStrong; const cap = variant === "pixel" ? "square" : "round"; const join = variant === "pixel" ? "miter" : "round"; const strokeWidth = variant === "pixel" ? 5.4 : 6.2; const pixelCore = ` `; const coreSvg = variant === "pixel" ? pixelCore : ``; const extraPixels = variant === "pixel" ? ` ` : ` `; return ` ${extraPixels} ${coreSvg} `; } function useApplyFavicon(themeId, direction, mode) { React.useEffect(() => { const svg = buildDevisFaviconSvg({ themeId, direction, mode }); const href = `data:image/svg+xml,${encodeURIComponent(svg)}`; const link = document.querySelector('link[data-devis-icon="favicon"]') || document.querySelector('link[rel="icon"]') || document.createElement("link"); link.setAttribute("rel", "icon"); link.setAttribute("type", "image/svg+xml"); link.setAttribute("href", href); link.setAttribute("data-devis-icon", "favicon"); if (!link.parentNode) document.head.appendChild(link); const apple = document.querySelector('link[data-devis-icon="apple"]') || document.createElement("link"); apple.setAttribute("rel", "apple-touch-icon"); apple.setAttribute("href", href); apple.setAttribute("data-devis-icon", "apple"); if (!apple.parentNode) document.head.appendChild(apple); }, [themeId, direction, mode]); } const SOUND_STORAGE_KEY = "devisSoundEnabled"; const INTERACTION_SOUND_PRESETS = { primary: { type: "sine", freqs: [440, 660], duration: .12, gain: .035 }, pixel: { type: "square", freqs: [880, 1320], duration: .07, gain: .022 }, studio: { type: "triangle", freqs: [523.25, 784], duration: .14, gain: .03 }, utility: { type: "triangle", freqs: [220], duration: .06, gain: .026 }, accent: { type: "sine", freqs: [660], duration: .075, gain: .024 }, mood: { type: "sine", freqs: [520], duration: .045, gain: .018 }, dark: { type: "triangle", freqs: [196], duration: .075, gain: .024 }, light: { type: "sine", freqs: [740], duration: .07, gain: .022 }, }; const interactionAudioState = { ctx: null, enabled: false, }; function initInteractionAudio() { if (typeof window === "undefined") return null; const AudioCtor = window.AudioContext || window.webkitAudioContext; if (!AudioCtor) return null; if (!interactionAudioState.ctx) { interactionAudioState.ctx = new AudioCtor(); } if (interactionAudioState.ctx.state === "suspended") { interactionAudioState.ctx.resume?.(); } return interactionAudioState.ctx; } function setSoundEnabled(enabled) { interactionAudioState.enabled = !!enabled; try { window.localStorage?.setItem(SOUND_STORAGE_KEY, enabled ? "1" : "0"); } catch (err) {} if (enabled) initInteractionAudio(); } function getStoredSoundEnabled() { try { return window.localStorage?.getItem(SOUND_STORAGE_KEY) === "1"; } catch (err) { return false; } } function playInteractionPreset(name) { if (!interactionAudioState.enabled) return; const ctx = initInteractionAudio(); const preset = INTERACTION_SOUND_PRESETS[name] || INTERACTION_SOUND_PRESETS.mood; if (!ctx) return; const now = ctx.currentTime; const master = ctx.createGain(); master.gain.setValueAtTime(0, now); master.gain.linearRampToValueAtTime(preset.gain, now + .006); master.gain.exponentialRampToValueAtTime(.0008, now + preset.duration); master.connect(ctx.destination); preset.freqs.forEach((freq, index) => { const osc = ctx.createOscillator(); const oscGain = ctx.createGain(); osc.type = preset.type; osc.frequency.setValueAtTime(freq, now + index * .018); osc.frequency.exponentialRampToValueAtTime(freq * (index ? 1.015 : 1.04), now + preset.duration); oscGain.gain.setValueAtTime(index ? .68 : 1, now); osc.connect(oscGain); oscGain.connect(master); osc.start(now + index * .018); osc.stop(now + preset.duration + .018); }); } function playLogoModeSound(mode) { playInteractionPreset(faviconVariantForDirection(mode)); } function playAccentSound() { playInteractionPreset("accent"); } function playSurfaceSound(surface) { playInteractionPreset(surface === "light" ? "light" : "dark"); } function playMoodSound() { playInteractionPreset("mood"); } function useInteractionSoundToggle() { const [enabled, setEnabled] = React.useState(false); React.useEffect(() => { const stored = getStoredSoundEnabled(); interactionAudioState.enabled = stored; setEnabled(stored); }, []); const toggle = React.useCallback(() => { setEnabled((current) => { const next = !current; setSoundEnabled(next); if (next) playInteractionPreset("light"); return next; }); }, []); return [enabled, toggle]; } function useScrollCompact(threshold = 36) { const [compact, setCompact] = React.useState(false); React.useEffect(() => { let current = false; const update = () => { const next = window.scrollY > threshold; if (next !== current) { current = next; setCompact(next); } }; update(); window.addEventListener("scroll", update, { passive: true }); return () => window.removeEventListener("scroll", update); }, [threshold]); return compact; } function SoundToggleButton({ enabled, onToggle, compact = false }) { return ( ); } function ActiveThemeSignal({ theme, mode, className = "" }) { return (