@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/theme/preset-stylesheet.js

@@ -0,0 +1,52 @@
+/**
+ * The theme-preset stylesheet contract shared by two sides that must never
+ * drift: the build step that emits immutable preset CSS onto the shared assets
+ * domain (`assets.vibes.dev/theme/{catalogVersion}/preset-{id}.css`), and the
+ * app shell that SSRs the `<link>` to it. Both derive the catalog version and
+ * the path from THIS module, so a generated file and the URL that points at it
+ * always agree.
+ *
+ * A preset stylesheet is fully self-contained first-paint theming with NO inline
+ * script: explicit `:root` / `.dark` blocks for the resolved-mode case (the mode
+ * SSR hook stamps `data-mode` / `.dark` on `<html>`), plus a
+ * `@media (prefers-color-scheme: dark)` block for the first-ever-visit `system`
+ * case where the server could not resolve the OS preference.
+ */
+import { generateThemeCSS } from "./theme-colors.js";
+import { getEnabledThemePresets, normalizeThemePresets } from "./theme-presets.js";
+/** The enabled built-in preset catalog — the exact set the assets domain serves. */
+export function builtInThemePresetCatalog() {
+    return getEnabledThemePresets(normalizeThemePresets(null));
+}
+/** FNV-1a over a string — a tiny, crypto-free, deterministic 32-bit hash. */
+function fnv1a(input) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < input.length; i++) {
+        hash ^= input.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return (hash >>> 0).toString(36);
+}
+/**
+ * A content hash of the rendered stylesheets, used as the immutable path segment.
+ * It changes whenever the presets or CSS renderer change, so the URL cache-busts itself — no manual
+ * version bump, and the generator and the shell compute it identically.
+ */
+export function themeCatalogVersion(catalog = builtInThemePresetCatalog()) {
+    return `v${fnv1a(JSON.stringify(catalog.map((preset) => [preset.id, generatePresetStylesheet(preset)])))}`;
+}
+/** Full immutable stylesheet for one preset, system-dark fallback included. */
+export function generatePresetStylesheet(preset) {
+    // generateThemeCSS owns the single shared system-mode fallback. Keeping that
+    // law in one helper prevents account-served and static preset CSS from
+    // disagreeing about which explicit light/dark states opt out.
+    return `${generateThemeCSS(preset.colors, preset.customCss).trimEnd()}\n`;
+}
+/** Relative path (under the assets root) for a preset's stylesheet. */
+export function themePresetStylesheetPath(presetId, catalogVersion = themeCatalogVersion()) {
+    return `theme/${catalogVersion}/preset-${presetId}.css`;
+}
+/** Absolute href on the shared assets origin for a preset's stylesheet. */
+export function themePresetStylesheetHref(assetsOrigin, presetId, catalogVersion = themeCatalogVersion()) {
+    return `${assetsOrigin.replace(/\/$/, '')}/${themePresetStylesheetPath(presetId, catalogVersion)}`;
+}

package/dist/lib/components/theme/presets/theme-preset-builtins.accent-base.d.ts

@@ -0,0 +1,28 @@
+import { type BuiltInThemePreset } from './theme-preset-builtins.utils.ts';
+type AccentTone = {
+    background: string;
+    foreground: string;
+    cardFrom: string;
+    cardTo: string;
+    cardForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    muted: string;
+    mutedForeground: string;
+    ring: string;
+    highlight?: string;
+    highlightForeground?: string;
+};
+export type AccentConfig = {
+    id: string;
+    name: string;
+    description: string;
+    light: AccentTone;
+    dark: AccentTone;
+};
+export declare function createAccentPreset(config: AccentConfig): BuiltInThemePreset;
+export {};

package/dist/lib/components/theme/presets/theme-preset-builtins.accent-base.js

@@ -0,0 +1,73 @@
+import { createBuiltInPreset } from "./theme-preset-builtins.utils.js";
+function buildCardGradientCss(light, dark) {
+    return [
+        '.bg-card {',
+        `  background-image: linear-gradient(135deg, ${light.cardFrom} 0%, ${light.cardTo} 100%);`,
+        '}',
+        '.dark .bg-card {',
+        `  background-image: linear-gradient(135deg, ${dark.cardFrom} 0%, ${dark.cardTo} 100%);`,
+        '}'
+    ].join('\n');
+}
+export function createAccentPreset(config) {
+    return createBuiltInPreset(config.id, config.name, config.description, {
+        light: {
+            '--background': config.light.background,
+            '--foreground': config.light.foreground,
+            '--card': config.light.cardTo,
+            '--card-foreground': config.light.cardForeground,
+            '--popover': config.light.cardTo,
+            '--popover-foreground': config.light.cardForeground,
+            '--primary': config.light.primary,
+            '--primary-foreground': config.light.primaryForeground,
+            '--secondary': config.light.secondary,
+            '--secondary-foreground': config.light.secondaryForeground,
+            '--accent': config.light.accent,
+            '--accent-foreground': config.light.accentForeground,
+            '--muted': config.light.muted,
+            '--muted-foreground': config.light.mutedForeground,
+            '--ring': config.light.ring,
+            '--sidebar': config.light.background,
+            '--sidebar-foreground': config.light.foreground,
+            '--sidebar-primary': config.light.primary,
+            '--sidebar-primary-foreground': config.light.primaryForeground,
+            '--sidebar-accent': config.light.accent,
+            '--sidebar-accent-foreground': config.light.accentForeground,
+            '--sidebar-ring': config.light.ring,
+            '--highlight': config.light.highlight ?? config.light.primary,
+            '--highlight-foreground': config.light.highlightForeground ?? config.light.primaryForeground,
+            '--brand': config.light.primary,
+            '--brand-fill': config.light.primary,
+            '--brand-foreground': config.light.primaryForeground
+        },
+        dark: {
+            '--background': config.dark.background,
+            '--foreground': config.dark.foreground,
+            '--card': config.dark.cardTo,
+            '--card-foreground': config.dark.cardForeground,
+            '--popover': config.dark.cardTo,
+            '--popover-foreground': config.dark.cardForeground,
+            '--primary': config.dark.primary,
+            '--primary-foreground': config.dark.primaryForeground,
+            '--secondary': config.dark.secondary,
+            '--secondary-foreground': config.dark.secondaryForeground,
+            '--accent': config.dark.accent,
+            '--accent-foreground': config.dark.accentForeground,
+            '--muted': config.dark.muted,
+            '--muted-foreground': config.dark.mutedForeground,
+            '--ring': config.dark.ring,
+            '--sidebar': config.dark.background,
+            '--sidebar-foreground': config.dark.foreground,
+            '--sidebar-primary': config.dark.primary,
+            '--sidebar-primary-foreground': config.dark.primaryForeground,
+            '--sidebar-accent': config.dark.accent,
+            '--sidebar-accent-foreground': config.dark.accentForeground,
+            '--sidebar-ring': config.dark.ring,
+            '--highlight': config.dark.highlight ?? config.dark.primary,
+            '--highlight-foreground': config.dark.highlightForeground ?? config.dark.primaryForeground,
+            '--brand': config.dark.primary,
+            '--brand-fill': config.dark.primary,
+            '--brand-foreground': config.dark.primaryForeground
+        }
+    }, buildCardGradientCss(config.light, config.dark));
+}

package/dist/lib/components/theme/presets/theme-preset-builtins.accent-cool.d.ts

@@ -0,0 +1,2 @@
+import type { BuiltInThemePreset } from './theme-preset-builtins.utils.ts';
+export declare const COOL_ACCENT_THEME_PRESETS: BuiltInThemePreset[];

package/dist/lib/components/theme/presets/theme-preset-builtins.accent-cool.js

@@ -0,0 +1,114 @@
+import { createAccentPreset } from "./theme-preset-builtins.accent-base.js";
+export const COOL_ACCENT_THEME_PRESETS = [
+    createAccentPreset({
+        id: 'shadcn-blue',
+        name: 'Blue',
+        description: 'Rich blue tones with cool, high-contrast surfaces',
+        light: {
+            background: '#f5f8ff',
+            foreground: '#132a4a',
+            cardFrom: '#ffffff',
+            cardTo: '#e8f0ff',
+            cardForeground: '#102445',
+            primary: '#1d4ed8',
+            primaryForeground: '#eef4ff',
+            secondary: '#e8f0ff',
+            secondaryForeground: '#173572',
+            accent: '#dbe7ff',
+            accentForeground: '#173572',
+            muted: '#edf3ff',
+            mutedForeground: '#425a80',
+            ring: '#3b82f6'
+        },
+        dark: {
+            background: '#0b1730',
+            foreground: '#dde8ff',
+            cardFrom: '#0f1f3f',
+            cardTo: '#132a55',
+            cardForeground: '#e2ebff',
+            primary: '#93c5fd',
+            primaryForeground: '#11274d',
+            secondary: '#19325f',
+            secondaryForeground: '#dce8ff',
+            accent: '#21448a',
+            accentForeground: '#e2ebff',
+            muted: '#19325f',
+            mutedForeground: '#9bb8ea',
+            ring: '#60a5fa'
+        }
+    }),
+    createAccentPreset({
+        id: 'shadcn-emerald',
+        name: 'Emerald',
+        description: 'Fresh green depth with balanced complementary contrast',
+        light: {
+            background: '#f2fbf7',
+            foreground: '#123629',
+            cardFrom: '#ffffff',
+            cardTo: '#ddf6ea',
+            cardForeground: '#113528',
+            primary: '#047857',
+            primaryForeground: '#ebfff7',
+            secondary: '#ddf6ea',
+            secondaryForeground: '#0f513f',
+            accent: '#c8eddc',
+            accentForeground: '#0f513f',
+            muted: '#e7f9f0',
+            mutedForeground: '#3c6b5b',
+            ring: '#059669'
+        },
+        dark: {
+            background: '#07251f',
+            foreground: '#d6f5e7',
+            cardFrom: '#0b3a2f',
+            cardTo: '#0e4a3d',
+            cardForeground: '#dcf8eb',
+            primary: '#6ee7b7',
+            primaryForeground: '#084032',
+            secondary: '#115244',
+            secondaryForeground: '#d6f5e7',
+            accent: '#1a6a56',
+            accentForeground: '#def9ec',
+            muted: '#115244',
+            mutedForeground: '#8fd8b6',
+            ring: '#34d399'
+        }
+    }),
+    createAccentPreset({
+        id: 'shadcn-violet',
+        name: 'Violet',
+        description: 'Deep violet palette with clear complementary contrast',
+        light: {
+            background: '#f8f5ff',
+            foreground: '#2f1f55',
+            cardFrom: '#ffffff',
+            cardTo: '#ebe2ff',
+            cardForeground: '#2f1f55',
+            primary: '#6d28d9',
+            primaryForeground: '#f5f0ff',
+            secondary: '#ebe2ff',
+            secondaryForeground: '#51239d',
+            accent: '#ddd0ff',
+            accentForeground: '#51239d',
+            muted: '#f0e9ff',
+            mutedForeground: '#5f4c86',
+            ring: '#8b5cf6'
+        },
+        dark: {
+            background: '#1d1434',
+            foreground: '#ece3ff',
+            cardFrom: '#2f1d55',
+            cardTo: '#3e2671',
+            cardForeground: '#efe8ff',
+            primary: '#c4b5fd',
+            primaryForeground: '#34215f',
+            secondary: '#55308f',
+            secondaryForeground: '#ece3ff',
+            accent: '#7242c0',
+            accentForeground: '#f0e7ff',
+            muted: '#55308f',
+            mutedForeground: '#c5b3ef',
+            ring: '#a78bfa'
+        }
+    })
+];

package/dist/lib/components/theme/presets/theme-preset-builtins.accent-warm.d.ts

@@ -0,0 +1,2 @@
+import type { BuiltInThemePreset } from './theme-preset-builtins.utils.ts';
+export declare const WARM_ACCENT_THEME_PRESETS: BuiltInThemePreset[];

package/dist/lib/components/theme/presets/theme-preset-builtins.accent-warm.js

@@ -0,0 +1,114 @@
+import { createAccentPreset } from "./theme-preset-builtins.accent-base.js";
+export const WARM_ACCENT_THEME_PRESETS = [
+    createAccentPreset({
+        id: 'shadcn-amber',
+        name: 'Amber',
+        description: 'Warm amber atmosphere with crisp readable text tones',
+        light: {
+            background: '#fffaf0',
+            foreground: '#4a2c0b',
+            cardFrom: '#ffffff',
+            cardTo: '#ffecc8',
+            cardForeground: '#4a2c0b',
+            primary: '#b45309',
+            primaryForeground: '#fff6e8',
+            secondary: '#ffecc8',
+            secondaryForeground: '#7c3f0a',
+            accent: '#ffe0a8',
+            accentForeground: '#7c3f0a',
+            muted: '#fff1d6',
+            mutedForeground: '#7c5a2a',
+            ring: '#d97706'
+        },
+        dark: {
+            background: '#2a1a05',
+            foreground: '#ffe8be',
+            cardFrom: '#3a2408',
+            cardTo: '#5a390d',
+            cardForeground: '#ffe8be',
+            primary: '#fbbf24',
+            primaryForeground: '#4a2a06',
+            secondary: '#6b450f',
+            secondaryForeground: '#ffe8be',
+            accent: '#915e12',
+            accentForeground: '#fff0cc',
+            muted: '#6b450f',
+            mutedForeground: '#f5c971',
+            ring: '#fbbf24'
+        }
+    }),
+    createAccentPreset({
+        id: 'shadcn-walnut',
+        name: 'Walnut',
+        description: 'Warm maple wood tones — professional, trustworthy, and refined',
+        light: {
+            background: '#fff9f2',
+            foreground: '#3d2314',
+            cardFrom: '#ffffff',
+            cardTo: '#f5e6d3',
+            cardForeground: '#3d2314',
+            primary: '#92400e',
+            primaryForeground: '#fff6e8',
+            secondary: '#fde8d4',
+            secondaryForeground: '#7c3f0a',
+            accent: '#f5c49c',
+            accentForeground: '#7c3f0a',
+            muted: '#fff1d6',
+            mutedForeground: '#8b5e3c',
+            ring: '#d97706'
+        },
+        dark: {
+            background: '#1c0f05',
+            foreground: '#f5e6d3',
+            cardFrom: '#2a1a08',
+            cardTo: '#3d2a12',
+            cardForeground: '#f5e6d3',
+            primary: '#fbbf24',
+            primaryForeground: '#3d2314',
+            secondary: '#6b450f',
+            secondaryForeground: '#f5e6d3',
+            accent: '#b45309',
+            accentForeground: '#fff6e8',
+            muted: '#5c3a15',
+            mutedForeground: '#f5c49c',
+            ring: '#fbbf24'
+        }
+    }),
+    createAccentPreset({
+        id: 'shadcn-rose',
+        name: 'Rose',
+        description: 'Rose-tinted depth with complementary plum foregrounds',
+        light: {
+            background: '#fff5f7',
+            foreground: '#4c1b2b',
+            cardFrom: '#ffffff',
+            cardTo: '#ffe1ea',
+            cardForeground: '#4c1b2b',
+            primary: '#be123c',
+            primaryForeground: '#fff1f5',
+            secondary: '#ffe1ea',
+            secondaryForeground: '#8f1538',
+            accent: '#ffd0df',
+            accentForeground: '#8f1538',
+            muted: '#ffeaf1',
+            mutedForeground: '#7c465b',
+            ring: '#e11d48'
+        },
+        dark: {
+            background: '#2c0f19',
+            foreground: '#ffdbe7',
+            cardFrom: '#451227',
+            cardTo: '#5a1732',
+            cardForeground: '#ffdfe9',
+            primary: '#fda4af',
+            primaryForeground: '#5a1732',
+            secondary: '#7d1d43',
+            secondaryForeground: '#ffdbe7',
+            accent: '#a82558',
+            accentForeground: '#ffe5ee',
+            muted: '#7d1d43',
+            mutedForeground: '#f3a9bc',
+            ring: '#fb7185'
+        }
+    })
+];

package/dist/lib/components/theme/presets/theme-preset-builtins.creative.d.ts

@@ -0,0 +1,2 @@
+import { type BuiltInThemePreset } from './theme-preset-builtins.utils.ts';
+export declare const CREATIVE_THEME_PRESETS: BuiltInThemePreset[];