@atom63/slides 0.2.0 → 0.4.0

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;
@@ -263,3 +268,257 @@
 .a63-editor__present:hover {
   background: rgba(127, 127, 127, 0.12);
 }
+
+/* ─── SlotForm — registry-driven prop editor ─────────────────────────────── */
+.a63-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.a63-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.a63-form__label-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.2rem;
+}
+
+.a63-form__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  letter-spacing: 0.01em;
+}
+
+.a63-form__required {
+  color: #b91c1c;
+}
+
+.a63-form__input,
+.a63-form__textarea {
+  width: 100%;
+  padding: 0.35rem 0.5rem;
+  border: 1px solid rgba(127, 127, 127, 0.35);
+  border-radius: 0.375rem;
+  background: #fff;
+  color: #1a1a1a;
+  font-size: 0.8rem;
+  font-family: inherit;
+  line-height: 1.4;
+  outline: none;
+  transition: border-color 0.12s ease;
+}
+
+.a63-form__input:focus,
+.a63-form__textarea:focus {
+  border-color: rgba(59, 130, 246, 0.7);
+}
+
+.a63-form__textarea {
+  resize: vertical;
+  min-height: 4.5rem;
+}
+
+.a63-form__slots-note {
+  margin-top: 0.25rem;
+  padding: 0.4rem 0.55rem;
+  border-radius: 0.375rem;
+  background: rgba(127, 127, 127, 0.08);
+  font-size: 0.72rem;
+  color: #555;
+  line-height: 1.4;
+}
+
+.a63-form__unknown {
+  padding: 0.75rem;
+  font-size: 0.8rem;
+  color: #b91c1c;
+}
+
+/* TemplatePicker — loss warning + dismiss button */
+.a63-form__picker-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-top: 0.35rem;
+  padding: 0.4rem 0.55rem;
+  border-radius: 0.375rem;
+  background: rgba(180, 83, 9, 0.1);
+  border: 1px solid rgba(180, 83, 9, 0.3);
+  font-size: 0.72rem;
+  color: #92400e;
+  line-height: 1.4;
+}
+
+.a63-form__picker-warning span {
+  flex: 1;
+  min-width: 0;
+}
+
+.a63-form__picker-dismiss {
+  flex: none;
+  background: transparent;
+  border: none;
+  padding: 0 0.25rem;
+  color: inherit;
+  font-size: 0.9rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.a63-form__picker-dismiss:hover {
+  opacity: 1;
+}
+
+/* ─── Source | Form sub-toggle ───────────────────────────────────────────── */
+.a63-editor__subtoggle {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(127, 127, 127, 0.4);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.a63-editor__subtoggle-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.55rem;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 0.72rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.a63-editor__subtoggle-btn + .a63-editor__subtoggle-btn {
+  border-left: 1px solid rgba(127, 127, 127, 0.4);
+}
+
+.a63-editor__subtoggle-btn[aria-pressed='true'] {
+  background: rgba(59, 130, 246, 0.15);
+  color: #1d4ed8;
+}
+
+.a63-editor__subtoggle-btn:hover:not([aria-pressed='true']) {
+  background: rgba(127, 127, 127, 0.1);
+}
+
+/* ─── Form panel (right pane in Form mode) ───────────────────────────────── */
+.a63-editor__form-panel {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Slide stepper — prev/next nav inside the form panel */
+.a63-editor__slide-stepper {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.75rem;
+  border-bottom: 1px solid rgba(127, 127, 127, 0.18);
+  flex: none;
+}
+
+.a63-editor__stepper-label {
+  flex: 1;
+  text-align: center;
+  font-size: 0.72rem;
+  font-weight: 600;
+  opacity: 0.7;
+}
+
+.a63-editor__stepper-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 1px solid rgba(127, 127, 127, 0.4);
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.a63-editor__stepper-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.a63-editor__stepper-btn:not(:disabled):hover {
+  background: rgba(127, 127, 127, 0.1);
+}
+
+.a63-editor__form-fields {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.a63-editor__form-opaque {
+  padding: 1rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.a63-editor__form-opaque p {
+  font-size: 0.82rem;
+  color: #555;
+}
+
+.a63-editor__form-empty {
+  padding: 1rem 0.75rem;
+  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;
+}