@deckio/deck-engine 0.1.0

package/themes/dark.css

@@ -0,0 +1,151 @@
+/*
+ * DECKIO — Dark Theme
+ *
+ * The original dark palette — deep midnight blues with electric accents.
+ * Optimized for ambient lighting and screen presentations.
+ *
+ * CSS custom properties → Tailwind utility bridge via @theme inline.
+ */
+@import "tailwindcss";
+
+:root {
+  color-scheme: dark;
+
+  /* ── 1. Core Semantic Colors ─────────────────────────────────────────── */
+  --background:              #080b10;
+  --foreground:              #e6edf3;
+  --card:                    #0d1117;
+  --card-foreground:         #e6edf3;
+  --primary:                 #58a6ff;
+  --primary-foreground:      #ffffff;
+  --secondary:               #161b22;
+  --secondary-foreground:    #e6edf3;
+  --muted:                   #21262d;
+  --muted-foreground:        #8b949e;
+  --accent:                  #58a6ff;
+  --accent-foreground:       #ffffff;
+  --destructive:             #f85149;
+  --destructive-foreground:  #ffffff;
+  --border:                  #30363d;
+  --input:                   #30363d;
+  --ring:                    rgba(88, 166, 255, 0.4);
+  --radius:                  10px;
+
+  /* ── 2. Decorative Palette ───────────────────────────────────────────── */
+  --blue-glow:    #1f6feb;
+  --purple:       #bc8cff;
+  --purple-deep:  #6e40c9;
+  --pink:         #f778ba;
+  --cyan:         #56d4dd;
+  --green:        #3fb950;
+
+  /* ── 3. Derived Overlays & Glows ─────────────────────────────────────── */
+  --surface-overlay:         rgba(22, 27, 34, 0.8);
+  --surface-overlay-heavy:   rgba(22, 27, 34, 0.95);
+  --background-overlay:      rgba(13, 17, 23, 0.85);
+  --border-subtle:           rgba(48, 54, 61, 0.6);
+  --glow-primary:            rgba(31, 111, 235, 0.2);
+  --glow-primary-strong:     rgba(31, 111, 235, 0.22);
+  --glow-primary-shadow:     rgba(31, 111, 235, 0.18);
+  --glow-ring:               rgba(121, 192, 255, 0.18);
+  --glow-accent:             rgba(88, 166, 255, 0.10);
+  --glow-purple:             rgba(188, 140, 255, 0.10);
+  --glow-cyan:               rgba(86, 212, 221, 0.08);
+  --dot-color:               rgba(139, 148, 158, 0.25);
+  --destructive-subtle:      rgba(248, 81, 73, 0.04);
+  --shadow-elevated:         0 8px 24px rgba(0, 0, 0, 0.4);
+
+  /* ── 4. Presentation Layout ──────────────────────────────────────────── */
+  --slide-bg:            var(--background);
+  --content-max-width:   1280px;
+  --content-gutter:      72px;
+
+  /* ── 5. Typography Scale ─────────────────────────────────────────────── */
+  --font-family:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-size-2xs:         10px;
+  --font-size-xs:          11px;
+  --font-size-sm:          12px;
+  --font-size-md:          13px;
+  --font-size-base:        16px;
+  --font-size-lg:          20px;
+  --font-size-xl:          24px;
+  --font-size-2xl:         32px;
+  --font-size-display:     clamp(40px, 6vw, 64px);
+
+  --font-weight-light:     300;
+  --font-weight-regular:   400;
+  --font-weight-medium:    500;
+  --font-weight-semibold:  600;
+  --font-weight-bold:      700;
+  --font-weight-extrabold: 800;
+
+  --letter-spacing-tight:   -2px;
+  --letter-spacing-normal:  0;
+  --letter-spacing-wide:    0.5px;
+  --letter-spacing-wider:   2.5px;
+  --letter-spacing-widest:  3px;
+
+  --line-height-tight:     1.2;
+  --line-height-normal:    1.5;
+  --line-height-relaxed:   1.75;
+
+  /* ── 6. Spacing Scale (4 px base) ────────────────────────────────────── */
+  --space-0:    0px;
+  --space-0-5:  2px;
+  --space-1:    4px;
+  --space-1-5:  6px;
+  --space-2:    8px;
+  --space-3:    12px;
+  --space-4:    16px;
+  --space-5:    20px;
+  --space-6:    24px;
+  --space-8:    32px;
+  --space-10:   40px;
+  --space-11:   44px;
+  --space-12:   48px;
+  --space-14:   56px;
+
+  /* ── 7. Border Radius Scale ──────────────────────────────────────────── */
+  --radius-sm:    4px;
+  --radius-md:    6px;
+  --radius-lg:    10px;
+  --radius-xl:    20px;
+  --radius-full:  50%;
+
+  /* ── 8. Z-Index Scale ────────────────────────────────────────────────── */
+  --z-content:   2;
+  --z-bar:       100;
+  --z-nav:       200;
+  --z-progress:  300;
+  --z-overlay:   9999;
+
+  /* ── 9. Transitions ──────────────────────────────────────────────────── */
+  --transition-fast:     0.15s ease;
+  --transition-base:     0.25s ease;
+  --transition-slow:     0.4s ease;
+  --ease-slide:          cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-slide:      0.6s;
+  --duration-progress:   0.5s;
+}
+
+/* ── Tailwind ↔ CSS variable bridge ── */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius: var(--radius);
+}

package/themes/light.css

@@ -0,0 +1,152 @@
+/*
+ * DECKIO — Light Theme
+ *
+ * Clean, professional light palette for well-lit rooms and projected screens.
+ * High contrast ratios ensure readability at distance.
+ * Crisp white surfaces with a refined blue accent.
+ *
+ * CSS custom properties → Tailwind utility bridge via @theme inline.
+ */
+@import "tailwindcss";
+
+:root {
+  color-scheme: light;
+
+  /* ── 1. Core Semantic Colors ─────────────────────────────────────────── */
+  --background:              #ffffff;
+  --foreground:              #1a1a2e;
+  --card:                    #f8f9fb;
+  --card-foreground:         #1a1a2e;
+  --primary:                 #0969da;
+  --primary-foreground:      #ffffff;
+  --secondary:               #f1f3f5;
+  --secondary-foreground:    #1f2328;
+  --muted:                   #e9ecef;
+  --muted-foreground:        #636c76;
+  --accent:                  #0969da;
+  --accent-foreground:       #ffffff;
+  --destructive:             #cf222e;
+  --destructive-foreground:  #ffffff;
+  --border:                  #d1d9e0;
+  --input:                   #d1d9e0;
+  --ring:                    rgba(9, 105, 218, 0.4);
+  --radius:                  10px;
+
+  /* ── 2. Decorative Palette ───────────────────────────────────────────── */
+  --blue-glow:    #0969da;
+  --purple:       #8250df;
+  --purple-deep:  #6639ba;
+  --pink:         #bf3989;
+  --cyan:         #0891b2;
+  --green:        #1a7f37;
+
+  /* ── 3. Derived Overlays & Glows ─────────────────────────────────────── */
+  --surface-overlay:         rgba(255, 255, 255, 0.85);
+  --surface-overlay-heavy:   rgba(255, 255, 255, 0.95);
+  --background-overlay:      rgba(248, 249, 251, 0.90);
+  --border-subtle:           rgba(209, 217, 224, 0.6);
+  --glow-primary:            rgba(9, 105, 218, 0.08);
+  --glow-primary-strong:     rgba(9, 105, 218, 0.12);
+  --glow-primary-shadow:     rgba(9, 105, 218, 0.10);
+  --glow-ring:               rgba(9, 105, 218, 0.12);
+  --glow-accent:             rgba(9, 105, 218, 0.06);
+  --glow-purple:             rgba(130, 80, 223, 0.06);
+  --glow-cyan:               rgba(8, 145, 178, 0.05);
+  --dot-color:               rgba(99, 108, 118, 0.15);
+  --destructive-subtle:      rgba(207, 34, 46, 0.04);
+  --shadow-elevated:         0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* ── 4. Presentation Layout ──────────────────────────────────────────── */
+  --slide-bg:            var(--background);
+  --content-max-width:   1280px;
+  --content-gutter:      72px;
+
+  /* ── 5. Typography Scale ─────────────────────────────────────────────── */
+  --font-family:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-size-2xs:         10px;
+  --font-size-xs:          11px;
+  --font-size-sm:          12px;
+  --font-size-md:          13px;
+  --font-size-base:        16px;
+  --font-size-lg:          20px;
+  --font-size-xl:          24px;
+  --font-size-2xl:         32px;
+  --font-size-display:     clamp(40px, 6vw, 64px);
+
+  --font-weight-light:     300;
+  --font-weight-regular:   400;
+  --font-weight-medium:    500;
+  --font-weight-semibold:  600;
+  --font-weight-bold:      700;
+  --font-weight-extrabold: 800;
+
+  --letter-spacing-tight:   -2px;
+  --letter-spacing-normal:  0;
+  --letter-spacing-wide:    0.5px;
+  --letter-spacing-wider:   2.5px;
+  --letter-spacing-widest:  3px;
+
+  --line-height-tight:     1.2;
+  --line-height-normal:    1.5;
+  --line-height-relaxed:   1.75;
+
+  /* ── 6. Spacing Scale (4 px base) ────────────────────────────────────── */
+  --space-0:    0px;
+  --space-0-5:  2px;
+  --space-1:    4px;
+  --space-1-5:  6px;
+  --space-2:    8px;
+  --space-3:    12px;
+  --space-4:    16px;
+  --space-5:    20px;
+  --space-6:    24px;
+  --space-8:    32px;
+  --space-10:   40px;
+  --space-11:   44px;
+  --space-12:   48px;
+  --space-14:   56px;
+
+  /* ── 7. Border Radius Scale ──────────────────────────────────────────── */
+  --radius-sm:    4px;
+  --radius-md:    6px;
+  --radius-lg:    10px;
+  --radius-xl:    20px;
+  --radius-full:  50%;
+
+  /* ── 8. Z-Index Scale ────────────────────────────────────────────────── */
+  --z-content:   2;
+  --z-bar:       100;
+  --z-nav:       200;
+  --z-progress:  300;
+  --z-overlay:   9999;
+
+  /* ── 9. Transitions ──────────────────────────────────────────────────── */
+  --transition-fast:     0.15s ease;
+  --transition-base:     0.25s ease;
+  --transition-slow:     0.4s ease;
+  --ease-slide:          cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-slide:      0.6s;
+  --duration-progress:   0.5s;
+}
+
+/* ── Tailwind ↔ CSS variable bridge ── */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius: var(--radius);
+}

package/themes/shadcn.css

@@ -0,0 +1,212 @@
+/*
+ * DECKIO — shadcn/ui Theme
+ *
+ * Clean, system-grade aesthetic using the official shadcn/ui light palette.
+ * oklch color space for perceptual uniformity.
+ * Neutral base, subtle borders, rounded corners, muted surfaces.
+ *
+ * CSS custom properties → Tailwind utility bridge via @theme inline.
+ */
+@import "tailwindcss";
+
+:root {
+  color-scheme: light;
+
+  /* ── 1. Core Semantic Colors (shadcn/ui light — oklch) ───────────────── */
+  --background:              oklch(1 0 0);
+  --foreground:              oklch(0.145 0 0);
+  --card:                    oklch(1 0 0);
+  --card-foreground:         oklch(0.145 0 0);
+  --primary:                 oklch(0.205 0 0);
+  --primary-foreground:      oklch(0.985 0 0);
+  --secondary:               oklch(0.97 0 0);
+  --secondary-foreground:    oklch(0.205 0 0);
+  --muted:                   oklch(0.97 0 0);
+  --muted-foreground:        oklch(0.556 0 0);
+  --accent:                  oklch(0.97 0 0);
+  --accent-foreground:       oklch(0.205 0 0);
+  --destructive:             oklch(0.577 0.245 27.325);
+  --destructive-foreground:  oklch(0.985 0 0);
+  --border:                  oklch(0.922 0 0);
+  --input:                   oklch(0.922 0 0);
+  --ring:                    oklch(0.708 0 0);
+  --radius:                  0.625rem;
+
+  /* ── 2. Decorative Palette (oklch) ───────────────────────────────────── */
+  --blue-glow:    oklch(0.623 0.214 259.815);
+  --purple:       oklch(0.627 0.265 303.9);
+  --purple-deep:  oklch(0.536 0.245 301.924);
+  --pink:         oklch(0.656 0.241 354.308);
+  --cyan:         oklch(0.715 0.143 215.221);
+  --green:        oklch(0.723 0.219 149.579);
+
+  /* ── 3. Derived Overlays & Glows ─────────────────────────────────────── */
+  --surface-overlay:         oklch(1 0 0 / 90%);
+  --surface-overlay-heavy:   oklch(1 0 0 / 97%);
+  --background-overlay:      oklch(0.985 0 0 / 90%);
+  --border-subtle:           oklch(0.922 0 0 / 60%);
+  --glow-primary:            oklch(0.205 0 0 / 5%);
+  --glow-primary-strong:     oklch(0.205 0 0 / 8%);
+  --glow-primary-shadow:     oklch(0.205 0 0 / 6%);
+  --glow-ring:               oklch(0.708 0 0 / 15%);
+  --glow-accent:             oklch(0.556 0 0 / 5%);
+  --glow-purple:             oklch(0.627 0.265 303.9 / 5%);
+  --glow-cyan:               oklch(0.715 0.143 215.221 / 5%);
+  --dot-color:               oklch(0.556 0 0 / 15%);
+  --destructive-subtle:      oklch(0.577 0.245 27.325 / 4%);
+  --shadow-elevated:         0 8px 24px oklch(0 0 0 / 8%);
+
+  /* ── 4. Presentation Layout ──────────────────────────────────────────── */
+  --slide-bg:            var(--background);
+  --content-max-width:   1280px;
+  --content-gutter:      72px;
+
+  /* ── 5. Typography Scale ─────────────────────────────────────────────── */
+  --font-family:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-size-2xs:         10px;
+  --font-size-xs:          11px;
+  --font-size-sm:          12px;
+  --font-size-md:          13px;
+  --font-size-base:        16px;
+  --font-size-lg:          20px;
+  --font-size-xl:          24px;
+  --font-size-2xl:         32px;
+  --font-size-display:     clamp(40px, 6vw, 64px);
+
+  --font-weight-light:     300;
+  --font-weight-regular:   400;
+  --font-weight-medium:    500;
+  --font-weight-semibold:  600;
+  --font-weight-bold:      700;
+  --font-weight-extrabold: 800;
+
+  --letter-spacing-tight:   -2px;
+  --letter-spacing-normal:  0;
+  --letter-spacing-wide:    0.5px;
+  --letter-spacing-wider:   2.5px;
+  --letter-spacing-widest:  3px;
+
+  --line-height-tight:     1.2;
+  --line-height-normal:    1.5;
+  --line-height-relaxed:   1.75;
+
+  /* ── 6. Spacing Scale (4 px base) ────────────────────────────────────── */
+  --space-0:    0px;
+  --space-0-5:  2px;
+  --space-1:    4px;
+  --space-1-5:  6px;
+  --space-2:    8px;
+  --space-3:    12px;
+  --space-4:    16px;
+  --space-5:    20px;
+  --space-6:    24px;
+  --space-8:    32px;
+  --space-10:   40px;
+  --space-11:   44px;
+  --space-12:   48px;
+  --space-14:   56px;
+
+  /* ── 7. Border Radius Scale ──────────────────────────────────────────── */
+  --radius-sm:    4px;
+  --radius-md:    6px;
+  --radius-lg:    10px;
+  --radius-xl:    20px;
+  --radius-full:  50%;
+
+  /* ── 8. Z-Index Scale ────────────────────────────────────────────────── */
+  --z-content:   2;
+  --z-bar:       100;
+  --z-nav:       200;
+  --z-progress:  300;
+  --z-overlay:   9999;
+
+  /* ── 9. Transitions ──────────────────────────────────────────────────── */
+  --transition-fast:     0.15s ease;
+  --transition-base:     0.25s ease;
+  --transition-slow:     0.4s ease;
+  --ease-slide:          cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-slide:      0.6s;
+  --duration-progress:   0.5s;
+
+  /* ── shadcn-specific tokens ──────────────────────────────────────────── */
+  --popover:              oklch(1 0 0);
+  --popover-foreground:   oklch(0.145 0 0);
+  --chart-1:              oklch(0.646 0.222 41.116);
+  --chart-2:              oklch(0.6 0.118 184.704);
+  --chart-3:              oklch(0.398 0.07 227.392);
+  --chart-4:              oklch(0.828 0.189 84.429);
+  --chart-5:              oklch(0.769 0.188 70.08);
+}
+
+.dark {
+  color-scheme: dark;
+
+  /* ── 1. Core Semantic Colors (shadcn/ui dark — oklch) ────────────────── */
+  --background:              oklch(0.145 0 0);
+  --foreground:              oklch(0.985 0 0);
+  --card:                    oklch(0.145 0 0);
+  --card-foreground:         oklch(0.985 0 0);
+  --primary:                 oklch(0.985 0 0);
+  --primary-foreground:      oklch(0.205 0 0);
+  --secondary:               oklch(0.269 0 0);
+  --secondary-foreground:    oklch(0.985 0 0);
+  --muted:                   oklch(0.269 0 0);
+  --muted-foreground:        oklch(0.708 0 0);
+  --accent:                  oklch(0.269 0 0);
+  --accent-foreground:       oklch(0.985 0 0);
+  --destructive:             oklch(0.396 0.141 25.723);
+  --destructive-foreground:  oklch(0.985 0 0);
+  --border:                  oklch(0.269 0 0);
+  --input:                   oklch(0.269 0 0);
+  --ring:                    oklch(0.439 0 0);
+  --radius:                  0.625rem;
+
+  /* ── 3. Derived Overlays & Glows (dark) ─────────────────────────────── */
+  --surface-overlay:         oklch(0.145 0 0 / 90%);
+  --surface-overlay-heavy:   oklch(0.145 0 0 / 97%);
+  --background-overlay:      oklch(0.18 0 0 / 90%);
+  --border-subtle:           oklch(0.269 0 0 / 60%);
+  --glow-primary:            oklch(0.985 0 0 / 5%);
+  --glow-primary-strong:     oklch(0.985 0 0 / 8%);
+  --glow-primary-shadow:     oklch(0.985 0 0 / 6%);
+  --glow-ring:               oklch(0.439 0 0 / 15%);
+  --glow-accent:             oklch(0.708 0 0 / 5%);
+  --glow-purple:             oklch(0.627 0.265 303.9 / 5%);
+  --glow-cyan:               oklch(0.715 0.143 215.221 / 5%);
+  --dot-color:               oklch(0.708 0 0 / 15%);
+  --destructive-subtle:      oklch(0.396 0.141 25.723 / 4%);
+  --shadow-elevated:         0 8px 24px oklch(0 0 0 / 30%);
+
+  /* ── shadcn-specific tokens (dark) ──────────────────────────────────── */
+  --popover:              oklch(0.145 0 0);
+  --popover-foreground:   oklch(0.985 0 0);
+  --chart-1:              oklch(0.488 0.243 264.376);
+  --chart-2:              oklch(0.696 0.17 162.48);
+  --chart-3:              oklch(0.769 0.188 70.08);
+  --chart-4:              oklch(0.627 0.265 303.9);
+  --chart-5:              oklch(0.645 0.246 16.439);
+}
+
+/* ── Tailwind ↔ CSS variable bridge ── */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --radius: var(--radius);
+}

package/themes/theme-loader.js

@@ -0,0 +1,47 @@
+/**
+ * Theme loader for deck-engine.
+ *
+ * Resolves theme names to CSS file paths and provides discovery.
+ * Themes are plain CSS files in this directory that set CSS custom
+ * properties consumed by the engine and mapped to Tailwind utilities
+ * via @theme inline blocks.
+ */
+import { readdirSync } from 'fs'
+import { dirname, join, resolve } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const BUILTIN_THEMES = ['dark', 'light', 'shadcn']
+const DEFAULT_THEME = 'dark'
+
+/**
+ * Returns the absolute path to a theme CSS file.
+ * Accepts a bare name ("dark") or a path to a custom CSS file.
+ */
+export function resolveTheme(theme) {
+  if (!theme) return resolve(__dirname, `${DEFAULT_THEME}.css`)
+
+  // Absolute or relative path — treat as custom theme
+  if (theme.endsWith('.css')) return resolve(theme)
+
+  // Built-in theme name
+  const file = resolve(__dirname, `${theme}.css`)
+  return file
+}
+
+/**
+ * Lists all built-in theme names (filenames without extension).
+ * Future community themes just need to be dropped into this directory.
+ */
+export function getAvailableThemes() {
+  try {
+    return readdirSync(__dirname)
+      .filter((f) => f.endsWith('.css'))
+      .map((f) => f.replace(/\.css$/, ''))
+  } catch {
+    return [...BUILTIN_THEMES]
+  }
+}
+
+export { DEFAULT_THEME, BUILTIN_THEMES }

package/vite.js

@@ -0,0 +1,67 @@
+/**
+ * Vite plugin for deck-engine projects.
+ *
+ * The main entry (@deckio/deck-engine) is pre-bundled by Vite
+ * into a single module so SlideContext, SlideProvider, useSlides, Slide,
+ * Navigation, and BottomBar all share one React context instance.
+ *
+ * Sub-path exports (e.g. slides/GenericThankYouSlide) are served as raw
+ * source and import from the package name (not relative paths) so they
+ * also resolve to the pre-bundled context singleton.
+ *
+ * The plugin also integrates Tailwind CSS v4 via @tailwindcss/vite
+ * and injects the selected theme CSS from deck.config.js.
+ */
+import tailwindcss from '@tailwindcss/vite'
+import { resolveTheme, getAvailableThemes, DEFAULT_THEME, BUILTIN_THEMES } from './themes/theme-loader.js'
+
+// Re-export theme utilities for Node.js consumers
+export { resolveTheme, getAvailableThemes, DEFAULT_THEME, BUILTIN_THEMES }
+
+/**
+ * @param {object} [options]
+ * @param {string} [options.theme] - Theme name or path. Defaults to "dark".
+ */
+export function deckPlugin(options = {}) {
+  const themePath = resolveTheme(options.theme)
+
+  return {
+    name: 'deck-engine',
+    enforce: 'pre',
+    config() {
+      return {
+        resolve: {
+          dedupe: ['react', 'react-dom'],
+        },
+        // Tailwind CSS v4 is added via the companion tailwindPlugin()
+      }
+    },
+  }
+}
+
+/**
+ * Returns an array of Vite plugins for a deck-engine project:
+ * - deckPlugin (react dedup + theme injection)
+ * - @tailwindcss/vite plugins (Tailwind CSS v4 processing)
+ *
+ * Use this in vite.config.js when you want the full setup in one call.
+ *
+ * @param {object} [options]
+ * @param {string} [options.theme] - Theme name or path.
+ */
+export function deckPlugins(options = {}) {
+  return [
+    deckPlugin(options),
+    ...tailwindcss(),
+  ]
+}
+
+/**
+ * Returns the @tailwindcss/vite plugin for projects that want
+ * to compose their own plugin array.
+ */
+export function tailwindPlugin() {
+  return tailwindcss()
+}
+
+export default deckPlugin