slides-grab 1.2.1 → 1.2.3

package/src/design-styles.js

@@ -0,0 +1,55 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { RAW_DESIGN_STYLES } from './design-styles-data.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export const DESIGN_STYLES_SOURCE = Object.freeze({
+  name: 'PPT Design Collections',
+  repo: 'corazzon/pptx-design-styles',
+  url: 'https://github.com/corazzon/pptx-design-styles',
+  previewUrl: 'https://corazzon.github.io/pptx-design-styles/preview/modern-pptx-designs-30.html',
+  references: [
+    'README.md',
+    'preview/modern-pptx-designs-30.html',
+    'references/styles.md',
+  ],
+  license: 'MIT',
+  citation: 'Design collections derived from corazzon/pptx-design-styles. Styles 31–35 are slides-grab originals.',
+});
+
+const DESIGN_STYLES = RAW_DESIGN_STYLES.map((style) => Object.freeze({
+  ...style,
+  source: DESIGN_STYLES_SOURCE,
+}));
+
+const DESIGN_STYLES_BY_ID = new Map(DESIGN_STYLES.map((style) => [style.id, style]));
+
+export function listDesignStyles() {
+  return DESIGN_STYLES;
+}
+
+export function getDesignStyle(styleId) {
+  if (!styleId) {
+    return null;
+  }
+  return DESIGN_STYLES_BY_ID.get(styleId) ?? null;
+}
+
+export function requireDesignStyle(styleId) {
+  const style = getDesignStyle(styleId);
+  if (!style) {
+    throw new Error(`Unknown style "${styleId}". Run "slides-grab list-styles" to inspect the bundled collection.`);
+  }
+  return style;
+}
+
+export function getPreviewHtmlPath() {
+  return resolve(__dirname, '..', 'templates', 'design-styles', 'preview.html');
+}
+
+export function buildStylePreviewHtml() {
+  return readFileSync(getPreviewHtmlPath(), 'utf-8');
+}

package/src/editor/codex-edit.js

@@ -1,13 +1,24 @@
 import { readFileSync } from 'node:fs';
 import { mkdir } from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import { dirname, join } from 'node:path';
 import sharp from 'sharp';
 
 import { getPackageRoot } from '../resolve.js';
 
+const require = createRequire(import.meta.url);
+const {
+  DEFAULT_SLIDE_MODE,
+  getSlideModeConfig,
+} = require('../slide-mode.cjs');
+
 export const SLIDE_SIZE = { width: 960, height: 540 };
+export function getSlideSize(slideMode = DEFAULT_SLIDE_MODE) {
+  return getSlideModeConfig(slideMode).framePx;
+}
 
 const PPT_DESIGN_SKILL_PATH = join(getPackageRoot(), 'skills', 'slides-grab-design', 'SKILL.md');
+const EDITOR_CODEX_PROMPT_PATH = join(dirname(new URL(import.meta.url).pathname), 'editor-codex-prompt.md');
 const DETAILED_DESIGN_SKILL_PATH = join(getPackageRoot(), 'skills', 'slides-grab-design', 'references', 'detailed-design-rules.md');
 const BEAUTIFUL_SLIDE_DEFAULTS_PATH = join(getPackageRoot(), 'skills', 'slides-grab-design', 'references', 'beautiful-slide-defaults.md');
 const EDITOR_PPT_DESIGN_SECTION_HEADINGS = [
@@ -17,9 +28,13 @@ const EDITOR_PPT_DESIGN_SECTION_HEADINGS = [
 const DETAILED_DESIGN_SECTION_HEADINGS = [
   '## Base Settings',
   '## Text Usage Rules',
+  '## Icon Usage Rules',
   '## Workflow (Stage 2: Design + Human Review)',
   '## Important Notes',
 ];
+const DETAILED_DESIGN_REQUIRED_SECTION_HEADINGS = [
+  '## Icon Usage Rules',
+];
 const BEAUTIFUL_SLIDE_DEFAULTS_SECTION_HEADINGS = [
   '## Working Model',
   '## Beautiful Defaults for Slides',
@@ -48,6 +63,8 @@ const EDITOR_PPT_DESIGN_SKILL_FALLBACK = [
   '## Rules',
   '- Keep slide size 720pt x 405pt.',
   '- Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`).',
+  '- Prefer Lucide as the default icon library for slide UI elements, callouts, and supporting visuals.',
+  '- Do not default to emoji for iconography unless the brief explicitly asks for a playful or native-emoji tone.',
   '- Put local images and videos under `<slides-dir>/assets/` and reference them as `./assets/<file>`.',
   '- Allow `data:` URLs when the slide must be fully self-contained.',
   '- Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.',
@@ -86,15 +103,21 @@ const DETAILED_DESIGN_SKILL_FALLBACK = [
   '- All text must be inside <p>, <h1>-<h6>, <ul>, <ol>, or <li>.',
   '- Never place text directly in <div> or <span>.',
   '',
+  '## Icon Usage Rules',
+  '- Prefer Lucide as the default icon library for slide UI elements, callouts, and supporting visuals.',
+  '- Do not default to emoji for iconography; reserve emoji for cases where the brief explicitly wants a playful or native-emoji tone.',
+  '- Keep icon sizing, stroke weight, and color aligned with the deck\'s approved design tokens.',
+  '',
   '## Workflow (Stage 2: Design + Human Review)',
-  '- After slide generation or edits, run slides-grab build-viewer --slides-dir <path>.',
+  '- After slide generation or edits, run slides-grab validate --slides-dir <path>.',
+  '- Only after validation passes, run slides-grab build-viewer --slides-dir <path>.',
   '- Edit only the relevant HTML file during revision loops.',
   '- Prefer slides-grab image before remote image sourcing when a slide explicitly needs bespoke imagery.',
   '- Never start PPTX conversion without explicit approval.',
   '- Never forget to rebuild the viewer after slide changes.',
   '',
   '## Important Notes',
-  '- CSS gradients are not supported in PowerPoint conversion; replace them with background images.',
+  '- CSS gradients may not export cleanly to all formats; prefer solid colors or background images when possible.',
   '- Always include the Pretendard CDN link.',
   '- Use ./assets/<file> from each slide-XX.html for local images and videos, and avoid absolute filesystem paths.',
   '- Always include # prefix in CSS colors.',
@@ -225,16 +248,11 @@ function getEditorPptDesignSkillPrompt() {
     return cachedEditorPptDesignSkillPrompt;
   }
 
-  const prompt = loadMarkdownSections(
-    PPT_DESIGN_SKILL_PATH,
-    EDITOR_PPT_DESIGN_SECTION_HEADINGS,
-    EDITOR_PPT_DESIGN_SKILL_FALLBACK,
-  );
-
-  cachedEditorPptDesignSkillPrompt = pruneDuplicateLines(
-    prompt,
-    EDITOR_PPT_DESIGN_DUPLICATE_PATTERNS,
-  );
+  try {
+    cachedEditorPptDesignSkillPrompt = readFileSync(EDITOR_CODEX_PROMPT_PATH, 'utf8').trim();
+  } catch {
+    cachedEditorPptDesignSkillPrompt = EDITOR_PPT_DESIGN_SKILL_FALLBACK;
+  }
 
   return cachedEditorPptDesignSkillPrompt;
 }
@@ -285,14 +303,20 @@ function pruneDuplicateLines(markdown, patterns) {
   return filtered.join('\n').trim();
 }
 
-function loadMarkdownSections(markdownPath, headings, fallback) {
+function loadMarkdownSections(markdownPath, headings, fallback, options = {}) {
   try {
     const markdown = readFileSync(markdownPath, 'utf8');
+    const { requiredHeadings = [] } = options;
+    const sectionsByHeading = new Map(headings.map((heading) => [
+      heading,
+      extractMarkdownSection(markdown, heading),
+    ]));
     const sections = headings
-      .map((heading) => extractMarkdownSection(markdown, heading))
+      .map((heading) => sectionsByHeading.get(heading))
       .filter(Boolean);
+    const isMissingRequiredSection = requiredHeadings.some((requiredHeading) => !sectionsByHeading.get(requiredHeading));
 
-    return sections.length > 0
+    return sections.length > 0 && !isMissingRequiredSection
       ? sections.join('\n\n')
       : fallback;
   } catch {
@@ -309,6 +333,9 @@ function getStructuralDesignSkillPrompt() {
     DETAILED_DESIGN_SKILL_PATH,
     DETAILED_DESIGN_SECTION_HEADINGS,
     DETAILED_DESIGN_SKILL_FALLBACK,
+    {
+      requiredHeadings: DETAILED_DESIGN_REQUIRED_SECTION_HEADINGS,
+    },
   );
 
   return cachedStructuralDesignSkillPrompt;
@@ -335,11 +362,12 @@ export function getDetailedDesignSkillPrompt() {
   ].filter(Boolean).join('\n\n');
 }
 
-export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selections = [] }) {
+export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, slideMode = DEFAULT_SLIDE_MODE, selections = [] }) {
   const sanitizedPrompt = typeof userPrompt === 'string' ? userPrompt.trim() : '';
   if (!sanitizedPrompt) {
     throw new Error('Prompt must be a non-empty string.');
   }
+  const { coordinateSpaceLabel, sizeLabel } = getSlideModeConfig(slideMode);
 
   const normalizedSlidePath = typeof slidePath === 'string' && slidePath.trim() !== ''
     ? slidePath.trim()
@@ -361,30 +389,16 @@ export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selecti
     ];
   });
 
-  const pptDesignSkillPrompt = getEditorPptDesignSkillPrompt();
-  const skillLines = pptDesignSkillPrompt
-    ? [
-        'Project skill guidance (follow strictly):',
-        `Source: ${PPT_DESIGN_SKILL_PATH}`,
-        pptDesignSkillPrompt,
-        '',
-      ]
-    : [];
-  const detailedDesignSkillPrompt = getStructuralDesignSkillPrompt();
-  const detailedSkillLines = detailedDesignSkillPrompt
-    ? [
-        'Detailed design/export guardrails (selected from the full design system):',
-        `Primary source: ${DETAILED_DESIGN_SKILL_PATH}`,
-        detailedDesignSkillPrompt,
-        '',
-      ]
-    : [];
-  const slideArtDirectionPrompt = getSlideArtDirectionPrompt();
-  const slideArtDirectionLines = slideArtDirectionPrompt
+  const editorPrompt = getEditorPptDesignSkillPrompt()
+    .replaceAll('720pt x 405pt', sizeLabel)
+    .replace(
+      'Run `slides-grab validate --slides-dir <path>` after editing.',
+      `Run \`slides-grab validate --slides-dir <path>${slideMode === DEFAULT_SLIDE_MODE ? '' : ` --mode ${slideMode}`}\` after editing.`,
+    );
+  const editorPromptLines = editorPrompt
     ? [
-        'Slide art direction defaults (packaged guidance for beautiful HTML slides):',
-        `Primary source: ${BEAUTIFUL_SLIDE_DEFAULTS_PATH}`,
-        slideArtDirectionPrompt,
+        'Slide edit rules (follow strictly):',
+        editorPrompt,
         '',
       ]
     : [];
@@ -392,19 +406,17 @@ export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selecti
   return [
     `Edit ${normalizedSlidePath} only.`,
     '',
-    ...skillLines,
-    ...detailedSkillLines,
-    ...slideArtDirectionLines,
-    'User edit request:',
+    ...editorPromptLines,
+    'User edit request (this is the primary objective — follow it faithfully):',
     sanitizedPrompt,
     '',
-    'Selected regions on slide (960x540 coordinate space):',
+    `Selected regions on slide (${coordinateSpaceLabel} coordinate space):`,
     ...selectionLines,
     'Rules:',
     '- Edit only the requested slide HTML file among slide-*.html files.',
     '- Do not modify any other slide HTML files unless explicitly requested.',
     '- Keep existing structure/content unless the request requires a change.',
-    '- Keep slide dimensions at 720pt x 405pt.',
+    `- Keep slide dimensions at ${sizeLabel}.`,
     '- Keep text in semantic tags (<p>, <h1>-<h6>, <ul>, <ol>, <li>).',
     '- You may add or update supporting files required for the requested slide, including local images and videos under <slides-dir>/assets/ and tldraw source/export files used to generate those assets.',
     '- When the request needs bespoke imagery, prefer `slides-grab image --prompt "<prompt>" --slides-dir <path>` so Nano Banana Pro saves the asset under <slides-dir>/assets/.',

package/src/editor/editor-codex-prompt.md

@@ -0,0 +1,50 @@
+# Editor Codex Prompt — Slide Edit Rules
+
+This prompt is sent to Codex when the editor requests a single-slide edit.
+It is intentionally separate from the full design skill (SKILL.md) because
+the editor context assumes the deck design is already established.
+
+## Primary Objective
+The user's edit request is the primary objective. All rules below exist to support it, not override it. When a rule conflicts with the user's intent, follow the user.
+
+## Edit Workflow
+1. Read the target slide HTML file.
+2. Apply the user's edit request to the selected region.
+3. Run `slides-grab validate --slides-dir <path>` after editing.
+4. If validation fails, fix the HTML/CSS and re-run until it passes.
+5. Return after applying the change.
+
+## Slide Rules
+- Keep slide size appropriate for the current mode (`720pt x 405pt` for presentation, `720pt x 720pt` for card-news).
+- Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`).
+- Never place text directly in `<div>` or `<span>`.
+- Always include `#` prefix in CSS colors.
+- Always include the Pretendard webfont CDN link.
+
+## Asset Rules
+- Put local images and videos under `<slides-dir>/assets/` and reference as `./assets/<file>`.
+- Always include `alt` on `<img>` tags.
+- Allow `data:` URLs only when the slide must be fully self-contained.
+- Do not leave remote `http(s)://` image URLs in saved slide HTML; download into `./assets/`.
+- Do not use absolute filesystem paths in slide HTML.
+- Do not use non-body `background-image` for content imagery; use `<img>` instead.
+- Use `data-image-placeholder` to reserve space when no image is available yet.
+- When the request needs bespoke imagery, prefer `slides-grab image --prompt "<prompt>" --slides-dir <path>` so Nano Banana Pro saves the asset under `<slides-dir>/assets/`.
+- If `GOOGLE_API_KEY` / `GEMINI_API_KEY` is unavailable or the Nano Banana API fails, ask the user for a key or fall back to web search + download into `./assets/`.
+- For local videos, use `<video src="./assets/<file>">` with `poster="./assets/<file>"`.
+- If a video starts on YouTube or a supported page, use `slides-grab fetch-video --url <url> --slides-dir <path>` to download first.
+
+## Art Direction Defaults
+- Give each slide one job, one dominant visual anchor, one primary takeaway.
+- Keep copy short enough to scan in seconds.
+- Use whitespace, alignment, scale, cropping, and contrast before adding decorative chrome.
+- Prefer Lucide as the default icon library for slide UI elements, callouts, and supporting visuals.
+- Do not default to emoji for iconography unless the brief explicitly asks for a playful or native-emoji tone.
+- Default to cardless layouts unless a card improves structure.
+- Limit to two typefaces max and one accent color.
+
+## Do NOT
+- Re-open style selection or run `slides-grab preview-styles`.
+- Modify other slide HTML files unless explicitly requested.
+- Persist runtime-only editor/viewer injections (`<base>`, debug scripts, viewer wrappers).
+- Start PPTX/PDF conversion.

package/src/editor/js/editor-init.js

@@ -1,8 +1,8 @@
 // editor-init.js — Entry point: imports, event bindings, init()
 
-import { state, TOOL_MODE_DRAW, TOOL_MODE_SELECT } from './editor-state.js';
+import { state, TOOL_MODE_DRAW, TOOL_MODE_SELECT, setSlideFrame } from './editor-state.js';
 import {
-  btnPrev, btnNext, slideIframe, drawLayer, promptInput, modelSelect,
+  btnPrev, btnNext, slideIframe, slideWrapper, drawLayer, promptInput, modelSelect,
   btnSend, btnClearBboxes, slideCounter,
   toggleBold, toggleItalic, toggleUnderline, toggleStrike,
   alignLeft, alignCenter, alignRight,
@@ -256,10 +256,42 @@ slideIframe.addEventListener('load', () => {
   updateSendState();
 });
 
+function applySlideFrameCss(width, height) {
+  if (slideWrapper) {
+    slideWrapper.style.width = `${width}px`;
+    slideWrapper.style.height = `${height}px`;
+  }
+  if (slideIframe) {
+    slideIframe.style.width = `${width}px`;
+    slideIframe.style.height = `${height}px`;
+  }
+}
+
+async function loadEditorConfig() {
+  try {
+    const res = await fetch('/api/config');
+    if (!res.ok) return;
+    const cfg = await res.json();
+    const w = cfg?.framePx?.width;
+    const h = cfg?.framePx?.height;
+    if (w && h) {
+      setSlideFrame(w, h);
+      applySlideFrameCss(w, h);
+    }
+    if (cfg?.slideMode && document?.body) {
+      document.body.dataset.slideMode = cfg.slideMode;
+    }
+  } catch {
+    // Defaults (960x540) stay in effect.
+  }
+}
+
 // Init
 async function init() {
   setStatus('Loading slide list...');
 
+  await loadEditorConfig();
+
   try {
     const res = await fetch('/api/slides');
     if (!res.ok) {

package/src/editor/js/editor-state.js

@@ -1,7 +1,14 @@
 // editor-state.js — State variables, constants, Maps/Sets
 
-export const SLIDE_W = 960;
-export const SLIDE_H = 540;
+export let SLIDE_W = 960;
+export let SLIDE_H = 540;
+
+export function setSlideFrame(width, height) {
+  const w = Number(width);
+  const h = Number(height);
+  if (Number.isFinite(w) && w > 0) SLIDE_W = Math.round(w);
+  if (Number.isFinite(h) && h > 0) SLIDE_H = Math.round(h);
+}
 export const TOOL_MODE_DRAW = 'draw';
 export const TOOL_MODE_SELECT = 'select';
 export const POPOVER_TEXT = 'text';

package/src/editor/screenshot.js

@@ -17,8 +17,8 @@ export async function createScreenshotBrowser() {
  * Create a fresh screenshot page/context from an existing browser.
  * Caller must close the returned context.
  */
-export async function createScreenshotPage(browser) {
-  const context = await browser.newContext({ viewport: SCREENSHOT_SIZE });
+export async function createScreenshotPage(browser, screenshotSize = SCREENSHOT_SIZE) {
+  const context = await browser.newContext({ viewport: screenshotSize });
   const page = await context.newPage();
   return { context, page };
 }
@@ -34,6 +34,7 @@ export async function createScreenshotPage(browser) {
  * @param {boolean} [options.useHttp]       – if true, slidesDir is treated as a base URL
  */
 export async function captureSlideScreenshot(page, slideFile, screenshotPath, slidesDir, options = {}) {
+  const screenshotSize = options.screenshotSize || SCREENSHOT_SIZE;
   const slideUrl = options.useHttp
     ? `${slidesDir}/${slideFile}`
     : pathToFileURL(join(slidesDir, slideFile)).href;
@@ -64,7 +65,7 @@ export async function captureSlideScreenshot(page, slideFile, screenshotPath, sl
     const scale = Math.min(width / sourceWidth, height / sourceHeight);
 
     bodyStyle.transform = `scale(${scale})`;
-  }, SCREENSHOT_SIZE);
+  }, screenshotSize);
 
   await page.screenshot({
     path: screenshotPath,

package/src/export-resolution.cjs

@@ -1,8 +1,13 @@
-const RESOLUTION_PRESETS = Object.freeze({
-  '720p': { width: 1280, height: 720 },
-  '1080p': { width: 1920, height: 1080 },
-  '1440p': { width: 2560, height: 1440 },
-  '2160p': { width: 3840, height: 2160 },
+const {
+  DEFAULT_SLIDE_MODE,
+  getSlideModeConfig,
+} = require('./slide-mode.cjs');
+
+const RESOLUTION_HEIGHTS = Object.freeze({
+  '720p': 720,
+  '1080p': 1080,
+  '1440p': 1440,
+  '2160p': 2160,
 });
 
 const RESOLUTION_ALIASES = Object.freeze({
@@ -11,7 +16,7 @@ const RESOLUTION_ALIASES = Object.freeze({
 });
 
 function getResolutionChoices() {
-  return Object.keys(RESOLUTION_PRESETS);
+  return Object.keys(RESOLUTION_HEIGHTS);
 }
 
 function normalizeResolutionPreset(value, options = {}) {
@@ -33,25 +38,30 @@ function normalizeResolutionPreset(value, options = {}) {
   }
 
   const normalized = RESOLUTION_ALIASES[trimmed] || trimmed;
-  if (!RESOLUTION_PRESETS[normalized]) {
+  if (!RESOLUTION_HEIGHTS[normalized]) {
     throw new Error(`Unknown resolution "${value}". Expected one of: ${getResolutionChoices().join(', ')}, 4k`);
   }
 
   return normalized;
 }
 
-function getResolutionSize(value) {
+function getResolutionSize(value, slideMode = DEFAULT_SLIDE_MODE) {
   const normalized = normalizeResolutionPreset(value);
   if (!normalized) {
     return null;
   }
 
-  const preset = RESOLUTION_PRESETS[normalized];
-  return { width: preset.width, height: preset.height };
+  const height = RESOLUTION_HEIGHTS[normalized];
+  const { framePx } = getSlideModeConfig(slideMode);
+  const aspectRatio = framePx.width / framePx.height;
+  return {
+    width: Math.round(height * aspectRatio),
+    height,
+  };
 }
 
 module.exports = {
-  RESOLUTION_PRESETS,
+  RESOLUTION_PRESETS: RESOLUTION_HEIGHTS,
   getResolutionChoices,
   getResolutionSize,
   normalizeResolutionPreset,

package/src/figma.js

@@ -1,6 +1,13 @@
+import { createRequire } from 'node:module';
 import { mkdir } from 'node:fs/promises';
 import { basename, dirname, extname, join, resolve } from 'node:path';
 
+const require = createRequire(import.meta.url);
+const {
+  DEFAULT_SLIDE_MODE,
+  getSlideModeConfig,
+} = require('./slide-mode.cjs');
+
 export const DEFAULT_FIGMA_SUFFIX = '-figma.pptx';
 export const SLIDE_FILE_PATTERN = /^slide-.*\.html$/i;
 export const FIGMA_EXPORT_LAYOUT_NAME = 'SLIDES_GRAB_STANDARD';
@@ -36,11 +43,12 @@ export function getFigmaManualImportInstructions() {
   return 'Figma Slides -> Import -> select the generated .pptx file.';
 }
 
-export function configureFigmaExportPresentation(pres) {
+export function configureFigmaExportPresentation(pres, slideMode = DEFAULT_SLIDE_MODE) {
+  const { figmaSizeIn } = getSlideModeConfig(slideMode);
   pres.defineLayout({
     name: FIGMA_EXPORT_LAYOUT_NAME,
-    width: SLIDE_WIDTH_INCHES,
-    height: SLIDE_HEIGHT_INCHES,
+    width: figmaSizeIn.width,
+    height: figmaSizeIn.height,
   });
   pres.layout = FIGMA_EXPORT_LAYOUT_NAME;
   return pres;