@atom63/slides 0.3.0 → 0.4.1

package/dist/index.d.ts

@@ -1158,6 +1158,26 @@ declare const syllabusMdxComponents: {
     caption: ({ className, ...props }: react.ComponentProps<"caption">) => react_jsx_runtime.JSX.Element;
 };
 
+declare const BUILTIN_THEMES: readonly ["dark", "terminal", "editorial", "neon", "bold"];
+type BuiltinTheme = (typeof BUILTIN_THEMES)[number];
+/**
+ * Validate and resolve a `theme` value from deck metadata.
+ *
+ * Returns the theme name if it is one of the {@link BUILTIN_THEMES}, or
+ * `undefined` if the value is absent, unknown, or not a string. This is the
+ * canonical validation path — use it wherever you'd otherwise write an inline
+ * `BUILTIN_THEMES.includes(...)` guard.
+ *
+ * @example
+ * ```ts
+ * const theme = resolveTheme(deck.meta)
+ * // → 'dark' | 'terminal' | 'editorial' | 'neon' | 'bold' | undefined
+ * ```
+ */
+declare function resolveTheme(meta: {
+    theme?: unknown;
+} | undefined): BuiltinTheme | undefined;
+
 interface SlidesPlayerProps {
     deck: SlideDeckItem;
     initialSlide?: number;
@@ -1281,4 +1301,4 @@ declare function useSlideRenderMode(): SlideRenderMode;
 /** Signals to the syllabus page that a <Syllabus> block was actually rendered. */
 declare const SyllabusDetectContext: react.Context<(() => void) | null>;
 
-export { Accent, Avatar, Badge, Bleed, Body, BodyLines, Box, CONFIG_GAP_PX, Cell, Center, ClosingSlide, Collage, ColorBlock, Columns, CoverSlide, Demo, Display, Divider, FRAME_PADDING_PX, FigureMark, Fill, FullBleedCoverSlide, FullBleedGallery, FullBleedSlide, Grid, Headline, HeroBento, Highlight, Icon, Image, ImageDuoSlide, ImageSlide, ImageTrioSlide, InlineCode, Item, Label, List, Live, MediaTrio, Mono, Position, Quote, QuoteSlide, QuoteWithMedia, Reveal, Row, SLIDE_FRAME_WATERMARK_PX, Section, SectionMarker, SectionSlide, SlideCodeBlock, type SlideConfigPadding, type SlideConfigTypographyScale, SlideDeckItem, type SlideGateProvider, SlideLayout, SlidePaddingContext, type SlideRenderMode, SlideRenderModeContext, SlidesPlayer, type SlidesPlayerProps, Spacer, Split, SplitHalf, SplitWithStat, Stack, StatBento, StatementSlide, Subtitle, Syllabus, SyllabusDetectContext, TYPOGRAPHY_SCALE_VALUES, TalkTrack, TextLead, TimelineBento, Title, Trio, Video, slideMdxComponents, syllabusMdxComponents, useSlideConfig, useSlidePadding, useSlideRenderMode };
+export { Accent, Avatar, BUILTIN_THEMES, Badge, Bleed, Body, BodyLines, Box, type BuiltinTheme, CONFIG_GAP_PX, Cell, Center, ClosingSlide, Collage, ColorBlock, Columns, CoverSlide, Demo, Display, Divider, FRAME_PADDING_PX, FigureMark, Fill, FullBleedCoverSlide, FullBleedGallery, FullBleedSlide, Grid, Headline, HeroBento, Highlight, Icon, Image, ImageDuoSlide, ImageSlide, ImageTrioSlide, InlineCode, Item, Label, List, Live, MediaTrio, Mono, Position, Quote, QuoteSlide, QuoteWithMedia, Reveal, Row, SLIDE_FRAME_WATERMARK_PX, Section, SectionMarker, SectionSlide, SlideCodeBlock, type SlideConfigPadding, type SlideConfigTypographyScale, SlideDeckItem, type SlideGateProvider, SlideLayout, SlidePaddingContext, type SlideRenderMode, SlideRenderModeContext, SlidesPlayer, type SlidesPlayerProps, Spacer, Split, SplitHalf, SplitWithStat, Stack, StatBento, StatementSlide, Subtitle, Syllabus, SyllabusDetectContext, TYPOGRAPHY_SCALE_VALUES, TalkTrack, TextLead, TimelineBento, Title, Trio, Video, resolveTheme, slideMdxComponents, syllabusMdxComponents, useSlideConfig, useSlidePadding, useSlideRenderMode };

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accent, Avatar, Badge, Bleed, Body, BodyLines, Box, CONFIG_GAP_PX, Cell, Center, ClosingSlide, Collage, ColorBlock, Columns, CoverSlide, Demo, Display, Divider, FRAME_PADDING_PX, FigureMark, Fill, FullBleedCoverSlide, FullBleedGallery, FullBleedSlide, Grid, Headline, HeroBento, Highlight, Icon, Image, ImageDuoSlide, ImageSlide, ImageTrioSlide, InlineCode, Item, Label, List, Live, MediaTrio, Mono, Position, Quote, QuoteSlide, QuoteWithMedia, Reveal, Row, SLIDE_FRAME_WATERMARK_PX, Section, SectionMarker, SectionSlide, SlideCodeBlock, SlidePaddingContext, SlideRenderModeContext, SlidesPlayer, Spacer, Split, SplitHalf, SplitWithStat, Stack, StatBento, StatementSlide, Subtitle, Syllabus, SyllabusDetectContext, TYPOGRAPHY_SCALE_VALUES, TalkTrack, TextLead, TimelineBento, Title, Trio, Video, getTemplate, listTemplates, slideMdxComponents, syllabusMdxComponents, templateNames, templateRegistry, useSlideConfig, useSlidePadding, useSlideRenderMode } from './chunk-AD3ZOVWR.js';
+export { Accent, Avatar, BUILTIN_THEMES, Badge, Bleed, Body, BodyLines, Box, CONFIG_GAP_PX, Cell, Center, ClosingSlide, Collage, ColorBlock, Columns, CoverSlide, Demo, Display, Divider, FRAME_PADDING_PX, FigureMark, Fill, FullBleedCoverSlide, FullBleedGallery, FullBleedSlide, Grid, Headline, HeroBento, Highlight, Icon, Image, ImageDuoSlide, ImageSlide, ImageTrioSlide, InlineCode, Item, Label, List, Live, MediaTrio, Mono, Position, Quote, QuoteSlide, QuoteWithMedia, Reveal, Row, SLIDE_FRAME_WATERMARK_PX, Section, SectionMarker, SectionSlide, SlideCodeBlock, SlidePaddingContext, SlideRenderModeContext, SlidesPlayer, Spacer, Split, SplitHalf, SplitWithStat, Stack, StatBento, StatementSlide, Subtitle, Syllabus, SyllabusDetectContext, TYPOGRAPHY_SCALE_VALUES, TalkTrack, TextLead, TimelineBento, Title, Trio, Video, getTemplate, listTemplates, resolveTheme, slideMdxComponents, syllabusMdxComponents, templateNames, templateRegistry, useSlideConfig, useSlidePadding, useSlideRenderMode } from './chunk-FNPEZIX4.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atom63/slides",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   },
   "homepage": "https://github.com/atom63/slides/tree/main/packages/slides#readme",
   "type": "module",
-  "description": "Host-agnostic MDX slide presentation engine — an opinionated template grammar + token theming for building decks in MDX.",
+  "description": "Write presentations as MDX — a template grammar + token theming designed for coding agents to author decks, with a browser GUI to steer them.",
   "keywords": [
     "slides",
     "presentation",
@@ -21,7 +21,11 @@
     "deck",
     "slideshow",
     "tailwind",
-    "design-system"
+    "design-system",
+    "ai",
+    "agent",
+    "coding-agent",
+    "claude"
   ],
   "publishConfig": {
     "access": "public",
@@ -72,6 +76,9 @@
     },
     "./themes/bold": {
       "default": "./src/styles/themes/bold.css"
+    },
+    "./themes": {
+      "default": "./src/styles/themes.css"
     }
   },
   "sideEffects": [
@@ -87,7 +94,8 @@
     "src/styles/themes/neon.css",
     "src/styles/themes/bold.css",
     "src/editor/styles.css",
-    "src/editor/styles.d.ts"
+    "src/editor/styles.d.ts",
+    "src/styles/themes.css"
   ],
   "dependencies": {
     "@base-ui/react": "^1.3.0",
@@ -136,11 +144,11 @@
     "typescript": "~5.8.3",
     "vite": "^7.1.5",
     "vitest": "^4.1.8",
-    "@atom63/biome-config": "0.1.0",
-    "@atom63/tsconfig": "0.1.0"
+    "@atom63/tsconfig": "0.1.0",
+    "@atom63/biome-config": "0.1.0"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "node scripts/gen-theme-bundle.mjs && tsup",
     "dev": "tsup --watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",

package/src/editor/styles.css

@@ -212,6 +212,11 @@
   height: 100%;
 }
 
+/* DeckSurface edit-mode wrapper — pass-through so it doesn't affect layout. */
+.a63-surface-edit {
+  display: contents;
+}
+
 /* Floating Edit button — top-right corner of present view. */
 .a63-surface__edit {
   position: absolute;
@@ -481,3 +486,39 @@
   font-size: 0.82rem;
   color: #555;
 }
+
+/* ─── ThemePicker — deck token theme select ──────────────────────────────── */
+/* Controls `theme:` frontmatter (deck visual theme). Distinct from the
+   Light/Dark preview-canvas toggle which only affects the editor background. */
+.a63-editor__theme-picker-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.a63-editor__theme-picker-text {
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.a63-editor__theme-select {
+  padding: 0.2rem 0.4rem;
+  border: 1px solid rgba(127, 127, 127, 0.4);
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font-size: 0.72rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.a63-editor__theme-select:hover {
+  background: rgba(127, 127, 127, 0.12);
+}
+
+.a63-editor__theme-select:focus-visible {
+  outline: 2px solid rgba(59, 130, 246, 0.7);
+  outline-offset: 1px;
+}

package/src/styles/themes.css

@@ -0,0 +1,245 @@
+/* GENERATED by scripts/gen-theme-bundle.mjs — do not edit by hand. Source: src/styles/themes/<name>.css */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&display=swap');
+
+/* GENERATED by scripts/gen-theme-bundle.mjs — do not edit by hand. Source: src/styles/themes/dark.css */
+/* =============================================================================
+   @atom63/slides — DARK THEME
+
+   A dark palette for the slide player. Import it AFTER the default tokens to
+   flip the whole deck (slides + chrome) to dark — every --theme-slide-* and
+   chrome token derives from this base palette via color-mix, so overriding the
+   palette is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/dark";       // override → dark
+       import "@atom63/slides/styles";
+
+   Want a runtime light/dark toggle instead of a hard import? Re-scope the rule
+   below from `:root` to e.g. `[data-slides-theme="dark"]` in your own CSS.
+   Want a custom theme? Override any of these tokens in your own stylesheet.
+   ============================================================================= */
+[data-slides-theme="dark"] {
+  /* ── Base palette (dark) ─────────────────────────────────────────────── */
+  --background: rgba(20, 20, 22, 1);
+  --foreground: rgba(237, 237, 240, 1);
+  --card: rgba(28, 28, 31, 1);
+  --popover: rgba(28, 28, 31, 1);
+  --popover-foreground: rgba(237, 237, 240, 1);
+  --light: rgba(252, 252, 252, 1);
+  --dark: rgba(12, 12, 14, 1);
+  --muted: rgba(40, 40, 44, 1);
+  --muted-foreground: rgba(160, 160, 166, 1);
+  --secondary: rgba(40, 40, 44, 1);
+  --secondary-foreground: rgba(210, 210, 215, 1);
+  --border: rgba(74, 74, 80, 1);
+  --input: rgba(62, 62, 68, 1);
+  --ring: rgba(90, 90, 98, 1);
+  --accent: color-mix(in srgb, rgba(48, 48, 53, 1), transparent 20%);
+  --accent-foreground: rgba(237, 237, 240, 1);
+  --primary: rgba(80, 150, 255, 1);
+  --primary-foreground: rgba(8, 14, 24, 1);
+  --destructive: rgba(240, 96, 92, 1);
+
+  /* ── Slide surfaces that read better tuned explicitly on dark ────────── */
+  --theme-slide-stage-bg: rgba(12, 12, 14, 1);
+  --theme-slide-stage-slide-ring: rgba(255, 255, 255, 0.06);
+  --theme-slide-surface: rgba(34, 34, 38, 1);
+  --theme-slide-code-bg: rgba(34, 34, 38, 1);
+  --theme-switch-track-shadow: inset 0 1px rgb(0 0 0 / 0.2);
+}
+/* GENERATED by scripts/gen-theme-bundle.mjs — do not edit by hand. Source: src/styles/themes/terminal.css */
+/* =============================================================================
+   @atom63/slides — TERMINAL THEME
+
+   A dark, monospace "terminal" palette for the slide player — GitHub-dark greys
+   with a phosphor-green signal color and JetBrains Mono everywhere. Import it
+   AFTER the default tokens to flip the whole deck (slides + chrome) to this look;
+   every --theme-slide-* and chrome token derives from this base palette, so
+   overriding the palette + font tokens is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/terminal";   // override → terminal
+       import "@atom63/slides/styles";
+
+   A theme is ONLY a :root override of the documented tokens — no per-theme
+   component code. Override any of these tokens in your own stylesheet to tweak.
+
+   Palette adapted from zarazhangrui/frontend-slides (MIT).
+   ============================================================================= */
+[data-slides-theme="terminal"] {
+  /* ── Base palette (terminal) ─────────────────────────────────────────── */
+  --background: #0d1117;
+  --foreground: #c9d1d9;
+  --card: #161b22;
+  --popover: #161b22;
+  --popover-foreground: #c9d1d9;
+  --muted: #161b22;
+  --muted-foreground: #8b949e;
+  --secondary: #161b22;
+  --secondary-foreground: #c9d1d9;
+  --border: #30363d;
+  --input: #30363d;
+  --ring: #39d353;
+  --accent: #1f2630;
+  --accent-foreground: #c9d1d9;
+  --primary: #39d353;
+  --primary-foreground: #0d1117;
+  --destructive: #f85149;
+
+  /* ── Fonts — mono everything, that's the terminal vibe ───────────────── */
+  --font-sans: "JetBrains Mono", ui-monospace, monospace;
+  --font-serif: "JetBrains Mono", ui-monospace, monospace;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* ── Slide surfaces tuned for the terminal look ──────────────────────── */
+  --theme-slide-stage-bg: #010409;
+  --theme-slide-surface: #161b22;
+  --theme-slide-code-bg: #161b22;
+  --theme-slide-accent: #39d353;
+}
+/* GENERATED by scripts/gen-theme-bundle.mjs — do not edit by hand. Source: src/styles/themes/editorial.css */
+/* =============================================================================
+   @atom63/slides — EDITORIAL THEME
+
+   A light, serif "paper & ink" palette for the slide player — warm off-white
+   stock, near-black ink, a deep editorial red signal, and Cormorant serif
+   headlines. Import it AFTER the default tokens to flip the whole deck (slides +
+   chrome) to this look; every --theme-slide-* and chrome token derives from this
+   base palette, so overriding the palette + font tokens is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/editorial";  // override → editorial
+       import "@atom63/slides/styles";
+
+   A theme is ONLY a :root override of the documented tokens — no per-theme
+   component code. Override any of these tokens in your own stylesheet to tweak.
+
+   Palette adapted from zarazhangrui/frontend-slides (MIT).
+   ============================================================================= */
+[data-slides-theme="editorial"] {
+  /* ── Base palette (editorial) ────────────────────────────────────────── */
+  --background: #faf9f7;
+  --foreground: #1a1a1a;
+  --card: #ffffff;
+  --popover: #ffffff;
+  --popover-foreground: #1a1a1a;
+  --muted: #efece6;
+  --muted-foreground: #6b6258;
+  --secondary: #efece6;
+  --secondary-foreground: #4a4038;
+  --border: #e2dcd2;
+  --input: #d9d2c6;
+  --ring: #c41e3a;
+  --accent: #efe7dc;
+  --accent-foreground: #1a1a1a;
+  --primary: #c41e3a;
+  --primary-foreground: #fff7f5;
+  --destructive: #c41e3a;
+
+  /* ── Fonts — serif headlines & body; mono stays default ──────────────── */
+  --font-sans: "Cormorant", Georgia, serif;
+  --font-serif: "Cormorant", Georgia, serif;
+
+  /* ── Slide surfaces tuned for the paper & ink look ───────────────────── */
+  --theme-slide-stage-bg: #ece8e1;
+  --theme-slide-surface: #ffffff;
+  --theme-slide-quote-color: #2a2a2a;
+}
+/* GENERATED by scripts/gen-theme-bundle.mjs — do not edit by hand. Source: src/styles/themes/neon.css */
+/* =============================================================================
+   @atom63/slides — NEON THEME
+
+   A dark "cyber" palette for the slide player — deep navy with a cyan signal and
+   magenta destructive. Palette-led (no special webfont, to keep it light).
+   Import it AFTER the default tokens to flip the whole deck (slides + chrome) to
+   this look; every --theme-slide-* and chrome token derives from this base
+   palette, so overriding the palette is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/neon";       // override → neon
+       import "@atom63/slides/styles";
+
+   A theme is ONLY a :root override of the documented tokens — no per-theme
+   component code. Override any of these tokens in your own stylesheet to tweak.
+
+   Palette adapted from zarazhangrui/frontend-slides (MIT).
+   ============================================================================= */
+[data-slides-theme="neon"] {
+  /* ── Base palette (neon) ─────────────────────────────────────────────── */
+  --background: #0a0f1c;
+  --foreground: #e6f0ff;
+  --card: #111829;
+  --popover: #111829;
+  --popover-foreground: #e6f0ff;
+  --muted: #141b2e;
+  --muted-foreground: #8da2c0;
+  --secondary: #141b2e;
+  --secondary-foreground: #cfe0ff;
+  --border: #243049;
+  --input: #243049;
+  --ring: #00ffcc;
+  --accent: #16203a;
+  --accent-foreground: #e6f0ff;
+  --primary: #00ffcc;
+  --primary-foreground: #04121a;
+  --destructive: #ff00aa;
+
+  /* ── Fonts — defaults (this is a palette-only theme) ─────────────────── */
+
+  /* ── Slide surfaces tuned for the cyber look ─────────────────────────── */
+  --theme-slide-stage-bg: #05080f;
+  --theme-slide-surface: #111829;
+  --theme-slide-code-bg: #111829;
+  --theme-slide-accent: #00ffcc;
+  --theme-slide-quote-color: #b9e8ff;
+}
+/* GENERATED by scripts/gen-theme-bundle.mjs — do not edit by hand. Source: src/styles/themes/bold.css */
+/* =============================================================================
+   @atom63/slides — BOLD THEME
+
+   A dark, high-impact palette for the slide player — charcoal greys with a
+   bright orange signal and a strong Archivo sans for headlines. Import it AFTER
+   the default tokens to flip the whole deck (slides + chrome) to this look;
+   every --theme-slide-* and chrome token derives from this base palette, so
+   overriding the palette + font tokens is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/bold";       // override → bold
+       import "@atom63/slides/styles";
+
+   A theme is ONLY a :root override of the documented tokens — no per-theme
+   component code. Override any of these tokens in your own stylesheet to tweak.
+
+   Palette adapted from zarazhangrui/frontend-slides (MIT).
+   ============================================================================= */
+[data-slides-theme="bold"] {
+  /* ── Base palette (bold) ─────────────────────────────────────────────── */
+  --background: #1a1a1a;
+  --foreground: #ffffff;
+  --card: #242424;
+  --popover: #242424;
+  --popover-foreground: #ffffff;
+  --muted: #2a2a2a;
+  --muted-foreground: #a0a0a0;
+  --secondary: #2a2a2a;
+  --secondary-foreground: #e0e0e0;
+  --border: #3a3a3a;
+  --input: #3a3a3a;
+  --ring: #ff5722;
+  --accent: #2e2e2e;
+  --accent-foreground: #ffffff;
+  --primary: #ff5722;
+  --primary-foreground: #1a1a1a;
+  --destructive: #ff5722;
+
+  /* ── Fonts — strong sans headlines; serif & mono stay default ────────── */
+  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
+
+  /* ── Slide surfaces tuned for the high-impact look ───────────────────── */
+  --theme-slide-stage-bg: #0e0e0e;
+  --theme-slide-surface: #242424;
+  --theme-slide-code-bg: #242424;
+  --theme-slide-accent: #ff5722;
+}