@open-slide/core 1.0.0 → 1.0.2

package/dist/{build-DC3FTpWO.js → build-DqfKmw9h.js}

@@ -1,5 +1,5 @@
-import "./design-BUML7uvZ.js";
-import { createViteConfig } from "./config-Cuw0mC5h.js";
+import "./design-C13iz9_4.js";
+import { createViteConfig } from "./config-CN7J0RDO.js";
 import path from "node:path";
 import { build as build$1, mergeConfig } from "vite";
 

package/dist/cli/bin.js

@@ -57,15 +57,15 @@ async function run(argv) {
 	program.name("open-slide").description("Author slides — we handle the Vite/React stack.").version(version, "-v, --version", "print version").helpOption("-h, --help", "show help").showHelpAfterError(chalk.dim("(run `open-slide --help` for usage)"));
 	program.command("dev").description("Start the dev server").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").option("--no-skills-check", "skip the built-in skills drift check").action(async (flags) => {
 		if (flags.skillsCheck !== false) await runSkillsDriftCheck(resolveBuiltinSkillsDir());
-		const { dev } = await import("../dev-BuWsdYvn.js");
+		const { dev } = await import("../dev-jWxtWHAG.js");
 		await dev(flags);
 	});
 	program.command("build").description("Build a static site").option("--out-dir <dir>", "output directory (defaults to `dist`)").action(async (flags) => {
-		const { build } = await import("../build-DC3FTpWO.js");
+		const { build } = await import("../build-DqfKmw9h.js");
 		await build(flags);
 	});
 	program.command("preview").description("Preview the production build").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").action(async (flags) => {
-		const { preview } = await import("../preview-CIcG-lP3.js");
+		const { preview } = await import("../preview-CSA05Gfm.js");
 		await preview(flags);
 	});
 	program.command("sync:skills").description("Sync built-in skills from @open-slide/core into this workspace").option("--dry-run", "show what would change without writing").action(async (flags) => {

package/dist/{config-Cuw0mC5h.js → config-CN7J0RDO.js}

@@ -1,4 +1,4 @@
-import { defaultDesign } from "./design-BUML7uvZ.js";
+import { defaultDesign } from "./design-C13iz9_4.js";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";

package/dist/{design-BUML7uvZ.js → design-C13iz9_4.js}

@@ -8,7 +8,7 @@ function designToCssVars(d) {
 		"--osd-font-body": d.fonts.body,
 		"--osd-size-hero": `${d.typeScale.hero}px`,
 		"--osd-size-body": `${d.typeScale.body}px`,
-		"--osd-radius-md": `${d.radius.md}px`
+		"--osd-radius": `${d.radius}px`
 	};
 }
 function cssVarsToString(vars) {
@@ -28,7 +28,7 @@ const defaultDesign = {
 		hero: 168,
 		body: 36
 	},
-	radius: { md: 12 }
+	radius: 12
 };
 
 //#endregion

package/dist/{dev-BuWsdYvn.js → dev-jWxtWHAG.js}

@@ -1,5 +1,5 @@
-import "./design-BUML7uvZ.js";
-import { createViteConfig } from "./config-Cuw0mC5h.js";
+import "./design-C13iz9_4.js";
+import { createViteConfig } from "./config-CN7J0RDO.js";
 import { createServer, mergeConfig } from "vite";
 
 //#region src/cli/dev.ts

package/dist/index.d.ts

@@ -34,14 +34,11 @@ type DesignTypeScale = {
   hero: number;
   body: number;
 };
-type DesignRadius = {
-  md: number;
-};
 type DesignSystem = {
   palette: DesignPalette;
   fonts: DesignFonts;
   typeScale: DesignTypeScale;
-  radius: DesignRadius;
+  radius: number;
 };
 declare function designToCssVars(d: DesignSystem): Record<string, string>;
 declare function cssVarsToString(vars: Record<string, string>): string;
@@ -63,4 +60,4 @@ declare const CANVAS_WIDTH = 1920;
 declare const CANVAS_HEIGHT = 1080;
 
 //#endregion
-export { CANVAS_HEIGHT, CANVAS_WIDTH, DesignFonts, DesignPalette, DesignRadius, DesignSystem, DesignTypeScale, ImagePlaceholder, ImagePlaceholderProps, OpenSlideConfig, Page, SlideMeta, SlideModule, cssVarsToString, defaultDesign, designToCssVars };
+export { CANVAS_HEIGHT, CANVAS_WIDTH, DesignFonts, DesignPalette, DesignSystem, DesignTypeScale, ImagePlaceholder, ImagePlaceholderProps, OpenSlideConfig, Page, SlideMeta, SlideModule, cssVarsToString, defaultDesign, designToCssVars };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { cssVarsToString, defaultDesign, designToCssVars } from "./design-BUML7uvZ.js";
+import { cssVarsToString, defaultDesign, designToCssVars } from "./design-C13iz9_4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/app/components/image-placeholder.tsx

package/dist/{preview-CIcG-lP3.js → preview-CSA05Gfm.js}

@@ -1,5 +1,5 @@
-import "./design-BUML7uvZ.js";
-import { createViteConfig } from "./config-Cuw0mC5h.js";
+import "./design-C13iz9_4.js";
+import { createViteConfig } from "./config-CN7J0RDO.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 
 //#region src/cli/preview.ts

package/dist/vite/index.js

@@ -1,4 +1,4 @@
-import "../design-BUML7uvZ.js";
-import { createViteConfig } from "../config-Cuw0mC5h.js";
+import "../design-C13iz9_4.js";
+import { createViteConfig } from "../config-CN7J0RDO.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {

package/skills/create-slide/SKILL.md

@@ -58,7 +58,7 @@ If the deck topic naturally calls for specific real images the user must supply
 
 Pick one coherent palette / type scale / aesthetic and hold it across every page. The full set of constraints (palette structure, type scale, padding, aesthetic options) lives in `slide-authoring` — apply it.
 
-If the user wants the slide to remain tweakable from the Design panel afterwards, declare a top-level `const design: DesignSystem = { … }` at the top of `index.tsx` (after imports) using the chosen palette / type scale, and reference `design.X` from inline styles. The "Design system" section of `slide-authoring` covers the format and available tokens.
+**Default: declare a top-level `export const design: DesignSystem = { … }`** at the top of `index.tsx` (after imports) using the chosen palette / type scale, and reference the values via `var(--osd-X)` from inline styles. This keeps the slide tweakable from the Design panel after generation, which is what the user almost always wants. Only skip the `design` const for a one-off slide whose palette is intentionally locked and not meant to be re-themed — in that case, fall back to the local `palette` constants pattern. The "Design system" section of `slide-authoring` covers the format and available tokens.
 
 Consult the `frontend-design` skill for deeper aesthetic guidance if the user wants something bold.
 

package/skills/slide-authoring/SKILL.md

@@ -125,7 +125,7 @@ export const design: DesignSystem = {
     body: '-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif',
   },
   typeScale: { hero: 168, body: 36 },
-  radius:    { md: 12 },
+  radius:    12,
 };
 ```
 
@@ -137,9 +137,9 @@ There are **two consumption surfaces**, and you should mix them inside the same
 
 - **`var(--osd-X)` for visual properties (color, font, font-size, radius)** — these get instant updates while the user drags a slider in the Design panel, before any file write.
   ```tsx
-  <div style={{ background: 'var(--osd-bg)', color: 'var(--osd-text)', borderRadius: 'var(--osd-radius-md)', fontFamily: 'var(--osd-font-body)', fontSize: 'var(--osd-size-body)' }}>
+  <div style={{ background: 'var(--osd-bg)', color: 'var(--osd-text)', borderRadius: 'var(--osd-radius)', fontFamily: 'var(--osd-font-body)', fontSize: 'var(--osd-size-body)' }}>
   ```
-  Available vars: `--osd-bg`, `--osd-text`, `--osd-accent`, `--osd-font-display`, `--osd-font-body`, `--osd-size-hero`, `--osd-size-body`, `--osd-radius-md`.
+  Available vars: `--osd-bg`, `--osd-text`, `--osd-accent`, `--osd-font-display`, `--osd-font-body`, `--osd-size-hero`, `--osd-size-body`, `--osd-radius`.
 
 - **Direct `design.X` reads** — when you need a JS number for arithmetic or to label something in the UI. These update via HMR after the panel commits the file, not while dragging.
   ```tsx
@@ -148,7 +148,7 @@ There are **two consumption surfaces**, and you should mix them inside the same
 
 The dev UI has a **Design** button in the slide header (next to Inspect). Edits update an in-memory draft and the live-preview overlay; a floating Save / Discard bar at the bottom of the canvas commits or reverts. The const stays the single source of truth — production builds bake the saved values.
 
-When to use it: any time the slide should remain tweakable from the panel after generation. When to *not* use it: one-off slides whose palette is intentionally fixed (then use the local `palette` constants pattern from the starter template). Both styles can coexist across slides — the panel only operates on the *currently viewed* slide.
+**Default to using it.** Every new slide should declare a `design` const so it stays tweakable from the panel after generation — this is the expected baseline. Only fall back to the local `palette` constants pattern (see starter template) for a one-off slide whose palette is intentionally locked and not meant to be re-themed. Both styles can coexist across slides — the panel only operates on the *currently viewed* slide.
 
 Format constraints (for the panel's AST writer):
 - Must be `[export] const design: DesignSystem = { … }` (or `as DesignSystem` / `satisfies DesignSystem`) at module top level.
@@ -158,49 +158,64 @@ Format constraints (for the panel's AST writer):
 ## Starter template
 
 ```tsx
-import type { Page, SlideMeta } from '@open-slide/core';
+import type { DesignSystem, Page, SlideMeta } from '@open-slide/core';
 
-const palette = {
-  bg: '#0f172a',
-  text: '#f8fafc',
-  accent: '#fbbf24',
-  muted: '#94a3b8',
+export const design: DesignSystem = {
+  palette: { bg: '#0f172a', text: '#f8fafc', accent: '#fbbf24' },
+  fonts: {
+    display: 'system-ui, -apple-system, sans-serif',
+    body: 'system-ui, -apple-system, sans-serif',
+  },
+  typeScale: { hero: 180, body: 40 },
 };
 
+// Extra colors / sizes outside the DesignSystem shape stay as plain consts.
+const muted = '#94a3b8';
+
 const fill = {
   width: '100%',
   height: '100%',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
+  fontFamily: 'var(--osd-font-body)',
 } as const;
 
 const Cover: Page = () => (
   <div
     style={{
       ...fill,
-      background: palette.bg,
-      color: palette.text,
+      background: 'var(--osd-bg)',
+      color: 'var(--osd-text)',
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
       padding: '0 160px',
     }}
   >
-    <div style={{ fontSize: 28, color: palette.accent, letterSpacing: '0.2em' }}>
+    <div style={{ fontSize: 28, color: 'var(--osd-accent)', letterSpacing: '0.2em' }}>
       CHAPTER 01
     </div>
-    <h1 style={{ fontSize: 180, fontWeight: 900, margin: '32px 0', lineHeight: 1.05 }}>
+    <h1
+      style={{
+        fontFamily: 'var(--osd-font-display)',
+        fontSize: 'var(--osd-size-hero)',
+        fontWeight: 900,
+        margin: '32px 0',
+        lineHeight: 1.05,
+      }}
+    >
       The Big Idea
     </h1>
-    <p style={{ fontSize: 40, color: palette.muted, maxWidth: 1200 }}>
+    <p style={{ fontSize: 'var(--osd-size-body)', color: muted, maxWidth: 1200 }}>
       A short subtitle that explains what this slide is about.
     </p>
   </div>
 );
 
 const Content: Page = () => (
-  <div style={{ ...fill, background: palette.bg, color: palette.text, padding: 120 }}>
-    <h2 style={{ fontSize: 80, fontWeight: 800, margin: 0 }}>Section heading</h2>
-    <ul style={{ fontSize: 40, lineHeight: 1.6, marginTop: 64, paddingLeft: 48 }}>
+  <div style={{ ...fill, background: 'var(--osd-bg)', color: 'var(--osd-text)', padding: 120 }}>
+    <h2 style={{ fontFamily: 'var(--osd-font-display)', fontSize: 80, fontWeight: 800, margin: 0 }}>
+      Section heading
+    </h2>
+    <ul style={{ fontSize: 'var(--osd-size-body)', lineHeight: 1.6, marginTop: 64, paddingLeft: 48 }}>
       <li>One clear point per line</li>
       <li>Keep to 3–5 bullets</li>
       <li>Let the space breathe</li>
@@ -264,7 +279,7 @@ Size the placeholder to the slot it occupies. Pass `width`/`height` when the lay
 - [ ] **For every page, sum (font_size × line_height × lines) + gaps + 2×padding ≤ 1080px.** If close, split the page. No `overflow: auto` escape hatches.
 - [ ] No bullet wraps to a second line at the chosen font size.
 - [ ] One coherent visual direction across every page (palette + type scale).
-- [ ] If the slide should be tweakable from the Design panel, it declares a top-level `const design: DesignSystem = { … }` and references `design.X` from inline styles.
+- [ ] Slide declares a top-level `export const design: DesignSystem = { … }` and references the values via `var(--osd-X)` (use `design.X` only when you need a JS number for arithmetic). Only omit the `design` const for a one-off slide whose palette is intentionally locked.
 - [ ] One idea per page.
 - [ ] All imported assets exist on disk under `slides/<id>/assets/`.
 - [ ] Every `<ImagePlaceholder>` corresponds to a real image the user must supply — not decorative filler. If it could be replaced by typography or layout, it should be.

package/src/app/components/style-panel/style-panel.tsx

@@ -158,15 +158,15 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
       <Section title="Shape">
         <SliderField
           label="Radius"
-          value={draft.radius.md}
+          value={draft.radius}
           min={0}
           max={80}
           step={1}
           suffix="px"
           onChange={(n) =>
             update((d) => {
-              d.radius.md = n;
-            }, 'design:radius.md')
+              d.radius = n;
+            }, 'design:radius')
           }
         />
       </Section>

package/src/app/lib/design.ts

@@ -14,15 +14,11 @@ export type DesignTypeScale = {
   body: number;
 };
 
-export type DesignRadius = {
-  md: number;
-};
-
 export type DesignSystem = {
   palette: DesignPalette;
   fonts: DesignFonts;
   typeScale: DesignTypeScale;
-  radius: DesignRadius;
+  radius: number;
 };
 
 export function designToCssVars(d: DesignSystem): Record<string, string> {
@@ -34,7 +30,7 @@ export function designToCssVars(d: DesignSystem): Record<string, string> {
     '--osd-font-body': d.fonts.body,
     '--osd-size-hero': `${d.typeScale.hero}px`,
     '--osd-size-body': `${d.typeScale.body}px`,
-    '--osd-radius-md': `${d.radius.md}px`,
+    '--osd-radius': `${d.radius}px`,
   };
 }
 
@@ -58,7 +54,5 @@ export const defaultDesign: DesignSystem = {
     hero: 168,
     body: 36,
   },
-  radius: {
-    md: 12,
-  },
+  radius: 12,
 };