slides-grab 1.2.5 → 1.3.0

package/README-ko.md

@@ -0,0 +1,256 @@
+# slides-grab 한국어 README
+
+<p align="center">AI가 만든 HTML 슬라이드에서 원하는 영역을 직접 선택하고, 그 영역을 다시 AI에게 편집시킬 수 있는 에이전트 우선 발표 자료 프레임워크입니다.</p>
+
+<p align="center">
+  <a href="README.md">English README</a> | <strong>한국어</strong>
+</p>
+
+<p align="center">
+  <a href="https://github.com/vkehfdl1/slides-grab/releases/download/v0.0.1-demo/demo.mp4">
+    <img src="docs/assets/demo.gif" alt="slides-grab 데모" width="720">
+  </a>
+</p>
+
+<p align="center">
+  <strong>👉 slides-grab으로 무엇을 만들 수 있는지 확인하세요:</strong>
+  <a href="https://vkehfdl1.github.io/slides-grab/"><strong>라이브 쇼케이스 갤러리</strong></a><br>
+  slides-grab으로 만든 실제 발표 자료를 열고 슬라이드를 넘겨볼 수 있습니다.
+</p>
+
+---
+
+## 빠른 시작
+
+slides-grab은 슬라이드를 HTML과 CSS로 작성하고, 브라우저 기반 편집기에서 영역을 드래그해 수정 요청을 보낸 뒤 PDF 또는 실험적/불안정한 PPTX·Figma용 PPTX로 내보내는 도구입니다.
+
+AI 코딩 에이전트에 아래 안내 중 하나를 붙여넣어 설치를 시작할 수 있습니다.
+
+**Claude Code:**
+
+```text
+Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/claude.md and follow every step.
+```
+
+**Codex:**
+
+```text
+Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/codex.md and follow every step.
+```
+
+저장소를 직접 개발하거나 수정하려면 다음을 실행합니다.
+
+```bash
+git clone https://github.com/vkehfdl1/slides-grab.git && cd slides-grab
+npm ci && npx playwright install chromium
+```
+
+> Node.js **20 이상**이 필요합니다.
+
+### 설치: 저장소를 클론하지 않는 방법
+
+CLI와 공유 에이전트 스킬만 사용하려면 npm 패키지를 설치하면 됩니다.
+
+```bash
+npm install slides-grab
+npx playwright install chromium
+npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
+```
+
+이 방법은 일반적인 사용에 충분합니다. slides-grab 자체를 수정하거나 기여하려는 경우에만 저장소를 클론하세요.
+
+## 왜 slides-grab인가요?
+
+많은 AI 도구가 슬라이드 HTML을 생성하지만, 사용자가 화면에서 **수정하고 싶은 부분을 직접 가리키고** 그 자리에서 반복 편집할 수 있게 해 주는 도구는 드뭅니다. slides-grab은 다음 흐름을 제공합니다.
+
+- **Plan** — 에이전트가 주제나 파일을 바탕으로 슬라이드 아웃라인을 만듭니다.
+- **Design** — 에이전트가 각 슬라이드를 독립적인 HTML 파일로 작성합니다.
+- **Edit** — 브라우저 편집기에서 bbox 영역 선택, 직접 텍스트 편집, 에이전트 기반 재작성을 수행합니다.
+- **Export** — 한 명령으로 PDF를 만들고, 실험적/불안정한 PPTX 또는 Figma 가져오기용 PPTX도 생성할 수 있습니다.
+
+## CLI 명령어
+
+워크플로 명령은 `--slides-dir <path>`를 지원하며 기본값은 `slides`입니다.
+
+새 클론에서는 `--help`, `list-templates`, `list-styles`, `preview-styles` 같은 탐색 명령은 덱 없이도 동작합니다. `edit`, `build-viewer`, `validate`, `convert`, `pdf`는 `slide-*.html` 파일이 들어 있는 슬라이드 작업공간이 필요합니다.
+
+```bash
+slides-grab edit              # 시각적 슬라이드 편집기 실행
+slides-grab build-viewer      # 단일 viewer.html 생성
+slides-grab validate          # Playwright 기반 슬라이드 HTML 검증
+slides-grab convert           # 실험적/불안정한 PPTX로 내보내기
+slides-grab convert --resolution 2160p  # 고해상도 래스터 PPTX 내보내기
+slides-grab figma             # Figma Slides 가져오기용 실험적/불안정한 PPTX 생성
+slides-grab pdf               # 캡처 모드 PDF 내보내기(기본값)
+slides-grab pdf --resolution 2160p  # 고해상도 이미지 기반 PDF 내보내기
+slides-grab pdf --mode print  # 검색/선택 가능한 텍스트 PDF 내보내기
+slides-grab png               # 슬라이드별 PNG 렌더링(기본 2160p)
+slides-grab png --slide-mode card-news  # 인스타그램용 정사각형 PNG 렌더링
+slides-grab image --prompt "..."    # 로컬 슬라이드 이미지 생성
+slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck  # yt-dlp로 동영상 에셋 다운로드
+slides-grab tldraw            # .tldr 다이어그램을 슬라이드 크기의 로컬 SVG로 렌더링
+slides-grab list-templates    # 사용 가능한 슬라이드 템플릿 표시
+slides-grab list-styles       # 번들된 35개 디자인 스타일 표시
+slides-grab preview-styles    # 35개 스타일 미리보기 갤러리를 브라우저에서 열기
+```
+
+## 디자인 스타일 모음
+
+slides-grab은 [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles)에서 파생된 30개 스타일과 slides-grab 고유 스타일 5개, 총 35개 디자인 스타일을 제공합니다. 에이전트에게 특정 스타일을 요청하거나 완전히 커스텀 디자인을 요청할 수 있습니다.
+
+```bash
+slides-grab list-styles
+slides-grab preview-styles
+```
+
+## 에셋 규칙
+
+슬라이드에서 사용하는 로컬 이미지와 동영상은 `<slides-dir>/assets/`에 저장하고 각 `slide-XX.html`에서는 `./assets/<file>` 형식으로 참조하세요.
+
+- 권장 이미지: `<img src="./assets/example.png" alt="...">`
+- 권장 동영상: `<video src="./assets/demo.mp4" poster="./assets/demo-poster.png"></video>`
+- 허용: 완전한 자체 포함 슬라이드를 위한 `data:` URL
+- 저장된 슬라이드에서 금지: 원격 `http(s)://` 이미지 URL
+- 지원하지 않음: `/Users/...` 또는 `C:\...` 같은 절대 파일 경로
+- 저장된 슬라이드에서 지원하지 않음: 원격 동영상 URL. 먼저 `<slides-dir>/assets/`로 다운로드하세요.
+
+내보내기 전에 다음 명령으로 누락된 로컬 에셋과 권장하지 않는 경로 형식을 확인하세요.
+
+```bash
+slides-grab validate --slides-dir <path>
+```
+
+## 이미지 생성
+
+`slides-grab image`는 프롬프트로 슬라이드용 이미지를 생성하고 결과를 `<slides-dir>/assets/`에 저장한 뒤 HTML에서 사용할 `./assets/<file>` 참조를 출력합니다.
+
+```bash
+codex login
+slides-grab image --slides-dir decks/my-deck --prompt "Editorial hero image of a robotics warehouse at dawn"
+```
+
+기본 이미지 생성 공급자는 로컬 Codex ChatGPT 로그인(`~/.codex/auth.json`)을 재사용할 수 있습니다. 선택적으로 `--provider codex`에는 `OPENAI_API_KEY`, `--provider nano-banana`에는 `GOOGLE_API_KEY` 또는 `GEMINI_API_KEY`가 필요할 수 있습니다.
+
+> 경고: 일부 이미지 생성 경로는 지원되지 않는 비공개 백엔드 또는 계정 권한에 의존할 수 있으므로, 실패하면 웹 검색과 로컬 다운로드 방식으로 대체하세요.
+
+내보내기 전에는 항상 `slides-grab validate --slides-dir <path>`를 실행해 누락된 로컬 에셋과 권장하지 않는 경로 형식을 먼저 확인하세요.
+
+`slides-grab pdf`는 이제 기본적으로 `--mode capture`를 사용합니다. 이 모드는 렌더링된 각 슬라이드를 PDF 안에 래스터 이미지로 캡처해 시각적 충실도를 높입니다. 브라우저 텍스트를 검색하거나 선택할 수 있는 PDF가 더 중요하다면 `--mode print`를 사용하세요.
+
+슬라이드에 `<video>`가 포함되어 있으면 PDF 내보내기는 라이브 자동 재생 프레임 대신 동영상의 poster/썸네일 정지 이미지를 사용합니다. 안정적인 출력이 필요하면 `poster="./assets/<file>"`를 지정하는 방식을 권장합니다.
+
+`slides-grab pdf`와 `slides-grab convert`는 더 선명한 결과물을 위해 기본적으로 `2160p` / `4k` 래스터 출력을 사용합니다. 더 작거나 빠른 산출물이 필요하면 `--resolution <preset>`으로 `720p`, `1080p`, `1440p`, `2160p`, `4k` 중 하나를 지정할 수 있습니다.
+
+### 웹 동영상을 덱 에셋으로 다운로드
+
+원본 동영상이 YouTube 또는 `yt-dlp`가 지원하는 다른 페이지에 있다면 먼저 덱의 assets 폴더로 다운로드하세요.
+
+```bash
+slides-grab fetch-video \
+  --url https://www.youtube.com/watch?v=EXAMPLE \
+  --slides-dir decks/my-deck \
+  --output-name hero-video
+```
+
+이 명령은 저장된 파일 경로와 슬라이드 HTML에 붙여 넣을 `./assets/<file>` 참조를 출력합니다. `PATH`에서 동작하는 `yt-dlp` 바이너리가 필요합니다.
+
+## 여러 덱 작업 흐름
+
+먼저 `decks/my-deck/`에 덱을 만들거나 생성한 뒤 다음처럼 작업할 수 있습니다.
+
+```bash
+slides-grab edit       --slides-dir decks/my-deck
+slides-grab validate   --slides-dir decks/my-deck
+slides-grab pdf        --slides-dir decks/my-deck --output decks/my-deck.pdf
+slides-grab pdf        --slides-dir decks/my-deck --mode print --output decks/my-deck-searchable.pdf
+slides-grab png        --slides-dir decks/my-deck --output-dir decks/my-deck/out-png
+slides-grab convert    --slides-dir decks/my-deck --output decks/my-deck.pptx
+slides-grab figma      --slides-dir decks/my-deck --output decks/my-deck-figma.pptx
+```
+
+> **주의:** `slides-grab convert`와 `slides-grab figma`는 현재 **실험적/불안정한** 기능입니다. 출력은 최선의 결과이며 PowerPoint 또는 Figma에서 수동 정리가 필요할 수 있습니다.
+
+## 카드뉴스 작업 흐름
+
+인스타그램식 카드뉴스는 720pt × 720pt 정사각형 프레임을 사용합니다. 모든 단계에서 `--mode card-news` 또는 `--slide-mode card-news`를 맞춰 사용하고, 최종 배포물은 `slides-grab png`를 우선 권장합니다.
+
+```bash
+slides-grab edit     --slides-dir decks/my-cards --mode card-news
+slides-grab validate --slides-dir decks/my-cards --mode card-news
+slides-grab png      --slides-dir decks/my-cards --slide-mode card-news --resolution 2160p
+slides-grab pdf      --slides-dir decks/my-cards --slide-mode card-news --output decks/my-cards.pdf
+slides-grab convert  --slides-dir decks/my-cards --mode card-news --output decks/my-cards.pptx
+```
+
+## Tldraw 다이어그램 에셋
+
+정확한 슬라이드 영역에 맞고 내보내기에 안전한 로컬 SVG 다이어그램을 새로 만들고 싶다면 `slides-grab tldraw`를 사용하세요. 이 명령은 현재 형식의 `.tldr` 파일과 store-snapshot JSON을 지원합니다. 오래된 pre-records `.tldr` 파일은 먼저 최신 `tldraw` 빌드에서 다시 열고 저장해야 합니다.
+
+```bash
+slides-grab tldraw \
+  --input decks/my-deck/assets/system.tldr \
+  --output decks/my-deck/assets/system.svg \
+  --width 640 \
+  --height 320 \
+  --padding 16
+```
+
+생성된 SVG는 일반 로컬 이미지처럼 슬라이드 HTML에서 참조하세요.
+
+```html
+<img src="./assets/system.svg" alt="System architecture diagram">
+```
+
+내장 `diagram-tldraw` 템플릿은 이 작업 흐름을 시작하기 위한 간단한 출발점입니다.
+
+## Figma 작업 흐름
+
+```bash
+slides-grab figma --slides-dir decks/my-deck --output decks/my-deck-figma.pptx
+```
+
+이 명령은 HTML→PPTX 파이프라인을 재사용해 Figma Slides의 `Import`로 수동 가져오기 할 수 있는 `.pptx` 덱을 만듭니다. Figma에 직접 업로드하지 않습니다. Figma 내보내기 경로는 **실험적/불안정**하며 최선의 결과만 기대해야 합니다.
+
+## 설치 가이드
+
+자세한 에이전트별 설치 안내는 아래 문서를 참고하세요.
+
+- [Claude 상세 가이드](docs/installation/claude.md)
+- [Codex 상세 가이드](docs/installation/codex.md)
+
+## npm 패키지
+
+독립 실행형 CLI와 스킬 사용을 위해 npm 패키지로도 사용할 수 있습니다.
+
+```bash
+npm install slides-grab
+```
+
+Vercel Agent Skills로 공유 에이전트 스킬을 설치하려면 다음을 실행하세요.
+
+```bash
+npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
+```
+
+이 npm 설치 경로는 일반적인 사용에 충분합니다. slides-grab 자체를 수정하거나 기여하려는 경우에만 저장소를 클론하세요.
+
+## 프로젝트 구조
+
+```text
+bin/              CLI 진입점
+src/editor/       시각 편집기(HTML + JS 클라이언트 모듈)
+scripts/          빌드, 검증, 변환, 편집기 서버 스크립트
+templates/        슬라이드 HTML 템플릿(cover, content, chart 등)
+src/              디자인 스타일 데이터, 스타일 설정, 경로 해석
+skills/           공유 가능한 에이전트 스킬과 참고 문서
+docs/             설치 및 사용 가이드
+showcase/         GitHub Pages로 배포되는 정적 갤러리
+```
+
+## 라이선스
+
+[MIT](LICENSE)
+
+## 감사의 말
+
+이 프로젝트는 Builder Josh의 [ppt_team_agent](https://github.com/uxjoseph/ppt_team_agent)를 바탕으로 만들어졌습니다. 감사드립니다!

package/README.md

@@ -1,5 +1,7 @@
 <h1 align="center">slides-grab</h1>
 
+<p align="center"><a href="README-ko.md">한국어 README</a> | <a href="README.md">English</a></p>
+
 <p align="center">Select context for agents directly from AI-generated HTML slides</p>
 
 <p align="center">
@@ -17,11 +19,17 @@ The editor is pure javascript file. You can easily add up new features like addi
 </p>
 
 <p align="center">
-  <a href="https://github.com/vkehfdl1/slides-grab/releases/download/v0.0.1-demo/demo.mp4">
+  <a href="https://github.com/NomaDamas/slides-grab/releases/download/v0.0.1-demo/demo.mp4">
     <img src="docs/assets/demo.gif" alt="slides-grab demo" width="720">
   </a>
 </p>
 
+<p align="center">
+  <strong>👉 See what slides-grab can do:</strong>
+  <a href="https://nomadamas.github.io/slides-grab/"><strong>Live Showcase Gallery</strong></a><br>
+  Real presentations built with slides-grab — open any deck and flip through the slides.
+</p>
+
 ---
 
 ## Quick Start
@@ -33,23 +41,23 @@ Paste one of these into your coding agent:
 **Claude Code:**
 
 ```
-Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/claude.md and follow every step.
+Read https://raw.githubusercontent.com/NomaDamas/slides-grab/main/docs/installation/claude.md and follow every step.
 ```
 
 **Codex:**
 
 ```
-Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/codex.md and follow every step.
+Read https://raw.githubusercontent.com/NomaDamas/slides-grab/main/docs/installation/codex.md and follow every step.
 ```
 
 Or use the repo directly if you want to develop on slides-grab itself:
 
 ```bash
-git clone https://github.com/vkehfdl1/slides-grab.git && cd slides-grab
+git clone https://github.com/NomaDamas/slides-grab.git && cd slides-grab
 npm ci && npx playwright install chromium
 ```
 
-> Requires **Node.js >= 18**.
+> Requires **Node.js >= 20**.
 
 ### No-clone install
 
@@ -86,7 +94,7 @@ slides-grab pdf --resolution 2160p  # Higher-resolution image-backed PDF export
 slides-grab pdf --mode print  # Export searchable/selectable text PDF
 slides-grab png               # Render one PNG per slide (default 2160p)
 slides-grab png --slide-mode card-news  # Render square 1:1 PNGs for Instagram
-slides-grab image --prompt "..."    # Generate a local slide image with Nano Banana Pro
+slides-grab image --prompt "..."    # Generate a local slide image with god-tibo-imagen by default (uses your local Codex ChatGPT login — no API key required)
 slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck  # Download a local video asset with yt-dlp
 slides-grab tldraw           # Render a .tldr diagram into a slide-sized local SVG asset
 slides-grab list-templates    # Show available slide templates
@@ -116,14 +124,23 @@ Slides should store local image and video files in `<slides-dir>/assets/` and re
 - Unsupported: absolute filesystem paths such as `/Users/...` or `C:\\...`
 - Unsupported for saved slides: remote video URLs; download them into `<slides-dir>/assets/` first
 
-For bespoke generated imagery, prefer Nano Banana Pro:
+For bespoke generated imagery, slides-grab bundles **god-tibo-imagen** as the default provider. It reuses your local Codex ChatGPT login (`~/.codex/auth.json`), so **no separate OpenAI/Google API key is required** — you only need a Codex CLI ChatGPT login on an account that is entitled to image generation:
 
 ```bash
-export GOOGLE_API_KEY=...
+codex login            # one-time setup if not already logged in
 slides-grab image --slides-dir decks/my-deck --prompt "Editorial hero image of a robotics warehouse at dawn"
 ```
 
-The command saves the result into `<slides-dir>/assets/` and prints the portable `./assets/<file>` reference to use from slide HTML. If `GOOGLE_API_KEY` (or `GEMINI_API_KEY`) is unavailable, ask for a Google API key or fall back to web search + local download into `assets/`.
+The command saves the result into `<slides-dir>/assets/` and prints the portable `./assets/<file>` reference to use from slide HTML.
+
+> ⚠️ **WARNING**: god-tibo-imagen calls an unsupported private Codex backend that may break without notice. It also requires a Codex/ChatGPT account that is entitled to image generation; not all ChatGPT accounts have this entitlement.
+
+Optional alternative providers via `--provider`:
+
+- `--provider codex` (alias `openai`): Codex/OpenAI `gpt-image-2`. Requires `OPENAI_API_KEY`. Maps `--aspect-ratio` to the nearest supported OpenAI image size (`16:9` defaults to a landscape `1536x1024` request).
+- `--provider nano-banana` (alias `gemini`): Google `gemini-3-pro-image-preview`. Requires `GOOGLE_API_KEY` (or `GEMINI_API_KEY`). Supports `--image-size 2K|4K`.
+
+If the default god-tibo-imagen call fails, slides-grab automatically falls back to whichever optional provider has credentials available; otherwise it asks you to fall back to web search + local download into `assets/`.
 
 Run `slides-grab validate --slides-dir <path>` before export to catch missing local assets and discouraged path forms.
 
@@ -235,6 +252,7 @@ templates/        Slide HTML templates (cover, content, chart, ...)
 src/              Design styles data, style config, path resolution
 skills/           Shared Vercel-installable agent skills + references
 docs/             Installation & usage guides
+showcase/         Static gallery deployed to GitHub Pages (https://nomadamas.github.io/slides-grab/)
 ```
 
 ## License

package/bin/ppt-agent.js

@@ -227,19 +227,31 @@ program
 
 program
   .command('image')
-  .description('Generate a local slide image asset with Nano Banana Pro')
+  .description('Generate a local slide image asset (default: god-tibo-imagen via your Codex ChatGPT login — no OpenAI/Google API key required)')
   .option('--prompt <text>', 'Prompt for image generation')
   .option('--slides-dir <path>', 'Slide directory', 'slides')
   .option('--output <path>', 'Optional output path inside <slides-dir>/assets/')
   .option('--name <slug>', 'Optional asset basename without extension')
-  .option('--model <id>', 'Model id (default: gemini-3-pro-image-preview)')
-  .option('--aspect-ratio <ratio>', 'Aspect ratio (default: 16:9)')
-  .option('--image-size <size>', 'Image size preset: 2K or 4K (default: 4K)')
+  .option('--provider <name>', 'Image provider: god-tibo (default), codex (OpenAI), or nano-banana. Aliases: codex-cli → god-tibo, openai → codex, gemini → nano-banana')
+  .option('--model <id>', 'Model id (default: gpt-5.4 for god-tibo, gpt-image-2 for codex, gemini-3-pro-image-preview for nano-banana)')
+  .option('--aspect-ratio <ratio>', 'Aspect ratio; for god-tibo it is injected as a prompt hint, for codex it maps to the nearest supported OpenAI size (default: 16:9)')
+  .option('--image-size <size>', 'Nano Banana image size preset: 2K or 4K (default: 4K)')
+  .addHelpText('after', [
+    '',
+    'Auth:',
+    '  Default (god-tibo): run `codex login` once to populate ~/.codex/auth.json. No OpenAI/Google API key required;',
+    '                      requires a Codex/ChatGPT account entitled to image generation.',
+    '  Codex/OpenAI provider: set OPENAI_API_KEY.',
+    '  Nano Banana provider: set GOOGLE_API_KEY or GEMINI_API_KEY.',
+    '',
+    'WARNING: god-tibo-imagen calls an unsupported private Codex backend that may break without notice.',
+  ].join('\n'))
   .action(async (options = {}) => {
     const args = ['--slides-dir', options.slidesDir];
     if (options.prompt) args.push('--prompt', String(options.prompt));
     if (options.output) args.push('--output', String(options.output));
     if (options.name) args.push('--name', String(options.name));
+    if (options.provider) args.push('--provider', String(options.provider));
     if (options.model) args.push('--model', String(options.model));
     if (options.aspectRatio) args.push('--aspect-ratio', String(options.aspectRatio));
     if (options.imageSize) args.push('--image-size', String(options.imageSize));
@@ -319,6 +331,115 @@ program
     }
   });
 
+program
+  .command('import-design')
+  .description('Fetch a remote DESIGN.md (https only) and save it locally as a custom slide design source')
+  .argument('<url>', 'HTTPS URL to a DESIGN.md / markdown design system file')
+  .option('--output <path>', 'Output path for the saved file', 'DESIGN.md')
+  .option('--max-bytes <number>', 'Maximum allowed response size in bytes', '262144')
+  .option('--timeout-ms <number>', 'Fetch timeout in milliseconds', '15000')
+  .action(async (url, options = {}) => {
+    try {
+      const { fetchDesignMarkdown, formatImportedDesignMarkdown, saveImportedDesign } =
+        await import('../src/design-import.js');
+      const maxBytes = Number(options.maxBytes) || 262144;
+      const timeoutMs = Number(options.timeoutMs) || 15000;
+      const result = await fetchDesignMarkdown(url, { maxBytes, timeoutMs });
+      const markdown = formatImportedDesignMarkdown({
+        url: result.url,
+        content: result.text,
+        fetchedAt: result.fetchedAt,
+      });
+      const savedPath = saveImportedDesign({ outputPath: options.output, markdown });
+      console.log(`Saved ${result.bytes} bytes to ${savedPath}`);
+      console.log(
+        'Saved web-flavored design source. Next convert it to DESIGN.slides.md, then set ' +
+        '"style: ./DESIGN.slides.md" in your slide-outline.md.',
+      );
+    } catch (error) {
+      reportCliError(error);
+    }
+  });
+
+program
+  .command('show-design')
+  .description('Parse a local design markdown file (DESIGN.slides.md preferred, falls back to DESIGN.md) or a bundled style id and print the slides-grab design summary the agent will use')
+  .argument('<ref>', 'Path to DESIGN.slides.md / DESIGN.md / a directory containing one, or a bundled style id (e.g. glassmorphism)')
+  .action(async (ref) => {
+    try {
+      const { loadDesignStyleRef, detectLocalDesignMarkdown } = await import('../src/design-styles.js');
+      const { renderDesignStyleForPrompt } = await import('../src/design-md-parser.js');
+      const { existsSync, statSync } = await import('node:fs');
+      const { dirname, resolve } = await import('node:path');
+
+      let effectiveRef = ref;
+      let detection = null;
+      let explicitWebShadowed = false;
+      const absoluteRef = resolve(ref);
+      if (existsSync(absoluteRef) && statSync(absoluteRef).isDirectory()) {
+        detection = detectLocalDesignMarkdown({ baseDir: absoluteRef });
+        if (!detection.path) {
+          console.error(`No DESIGN.slides.md or DESIGN.md found in directory "${ref}".`);
+          process.exitCode = 1;
+          return;
+        }
+        effectiveRef = detection.path;
+      } else if (existsSync(absoluteRef) && statSync(absoluteRef).isFile() && absoluteRef.endsWith('/DESIGN.md')) {
+        const siblingDetection = detectLocalDesignMarkdown({ baseDir: dirname(absoluteRef) });
+        if (siblingDetection.kind === 'slides') {
+          detection = siblingDetection;
+          explicitWebShadowed = true;
+          effectiveRef = siblingDetection.path;
+        }
+      }
+
+      const style = loadDesignStyleRef(effectiveRef);
+      if (!style) {
+        console.error(`No design style or design markdown file found at "${ref}".`);
+        process.exitCode = 1;
+        return;
+      }
+      const isCustom = style?.source?.type === 'design-md';
+      if (isCustom) {
+        if (detection) {
+          const activeName = detection.kind === 'slides' ? 'DESIGN.slides.md' : 'DESIGN.md';
+          const otherPresent = detection.kind === 'slides' && detection.webPath;
+          console.log(`# Active file: ${activeName} (${detection.path})`);
+          if (otherPresent) {
+            const explicitPrefix = explicitWebShadowed ? ' explicit DESIGN.md reference was redirected;' : '';
+            console.log(`# Note:${explicitPrefix} DESIGN.md is also present at ${detection.webPath} but is shadowed by DESIGN.slides.md.`);
+          } else if (detection.kind === 'web') {
+            console.log('# Note: only the web-flavored DESIGN.md was found. Consider converting it to DESIGN.slides.md before generating slides (see skills/slides-grab-plan/references/design-md-to-slides-conversion.md).');
+          }
+          console.log('');
+        }
+        console.log(renderDesignStyleForPrompt(style));
+      } else {
+        console.log(`# Bundled style: ${style.title} (${style.id})`);
+        console.log(`Mood: ${style.mood}`);
+        console.log(`Best for: ${style.bestFor}`);
+        if (Array.isArray(style.background)) {
+          console.log('\n## Background');
+          for (const b of style.background) console.log(`- ${b}`);
+        }
+        if (Array.isArray(style.colors)) {
+          console.log('\n## Colors');
+          for (const c of style.colors) console.log(`- ${c.role}: ${c.label} (${c.hex})`);
+        }
+        if (Array.isArray(style.fonts)) {
+          console.log('\n## Typography');
+          for (const f of style.fonts) console.log(`- ${f}`);
+        }
+        if (Array.isArray(style.layout)) {
+          console.log('\n## Layout');
+          for (const l of style.layout) console.log(`- ${l}`);
+        }
+      }
+    } catch (error) {
+      reportCliError(error);
+    }
+  });
+
 program
   .command('show-template')
   .description('Print the contents of a template file')

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "slides-grab",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "Agent-first presentation framework — plan, design, and visually edit HTML slides with Claude Code or Codex, then export to PDF or experimental/unstable PPTX/Figma formats",
   "license": "MIT",
   "author": "vkehfdl1",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vkehfdl1/slides-grab.git"
+    "url": "git+https://github.com/NomaDamas/slides-grab.git"
   },
-  "homepage": "https://github.com/vkehfdl1/slides-grab#readme",
+  "homepage": "https://github.com/NomaDamas/slides-grab#readme",
   "bugs": {
-    "url": "https://github.com/vkehfdl1/slides-grab/issues"
+    "url": "https://github.com/NomaDamas/slides-grab/issues"
   },
   "keywords": [
     "presentation",
@@ -24,7 +24,7 @@
     "ppt"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "type": "module",
   "bin": {
@@ -37,6 +37,7 @@
     "scripts/download-video.js",
     "scripts/editor-server.js",
     "scripts/generate-image.js",
+    "src/god-tibo-imagen.js",
     "scripts/figma-export.js",
     "scripts/html2pdf.js",
     "scripts/html2pptx.js",
@@ -46,19 +47,22 @@
     "src/",
     "templates/",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "README-ko.md"
   ],
   "scripts": {
     "html2pptx": "node scripts/html2pptx.js",
     "build-viewer": "node scripts/build-viewer.js",
+    "build:showcase": "node showcase/scripts/build-manifest.js",
     "validate": "node scripts/validate-slides.js",
     "convert": "node convert.cjs",
-    "test": "node --test --test-concurrency=1 tests/design/design-styles.test.js tests/editor/editor-codex-edit.test.js tests/editor/editor-server.test.js tests/nano-banana/nano-banana.test.js tests/pdf/html2pdf.test.js tests/pdf/html2pdf.e2e.test.js tests/figma/figma-export.test.js tests/image-contract/image-contract.test.js tests/tldraw/render-tldraw.test.js tests/validation/validate-slides.test.js tests/viewer/build-viewer.test.js tests/skills/installable-skills.test.js tests/video/download-video.test.js",
+    "test": "node --test --test-concurrency=1 tests/docs/readme-ko.test.js tests/design/design-styles.test.js tests/design/design-md-parser.test.js tests/editor/editor-codex-edit.test.js tests/editor/edit-subprocess-abort.test.js tests/editor/editor-server.test.js tests/editor/editor-server-orphan-prevention.test.js tests/editor/editor-model-dispatch.test.js tests/god-tibo/god-tibo.test.js tests/nano-banana/nano-banana.test.js tests/pdf/html2pdf.test.js tests/pdf/html2pdf.e2e.test.js tests/figma/figma-export.test.js tests/image-contract/image-contract.test.js tests/tldraw/render-tldraw.test.js tests/validation/validate-slides.test.js tests/viewer/build-viewer.test.js tests/skills/installable-skills.test.js tests/video/download-video.test.js",
     "test:e2e": "node --test tests/editor/editor-ui.e2e.test.js tests/editor/editor-concurrency.e2e.test.js"
   },
   "dependencies": {
     "commander": "^12.1.0",
     "express": "^5.2.1",
+    "god-tibo-imagen": "0.2.0",
     "lucide-react": "^1.7.0",
     "pdf-lib": "^1.17.1",
     "playwright": "^1.40.0",