@hirokisakabe/pom 0.1.5 → 0.1.6

package/README.md

@@ -1,11 +1,60 @@
 # pom
 
-**pom (PowerPoint Object Model)** は、PowerPoint プレゼンテーション（pptx）を TypeScript で宣言的に記述するためのライブラリです。
+**pom (PowerPoint Object Model)** は、PowerPoint プレゼンテーション（pptx）を TypeScript で宣言的に記述するためのライブラリです。生成 AI に出力させた POM 形式の JSON を、PowerPoint ファイルに変換するユースケースを想定しています。
+
+## 目次
+
+- [インストール](#インストール)
+- [クイックスタート](#クイックスタート)
+- [特徴](#特徴)
+- [ノード](#ノード)
+- [マスタースライド](#マスタースライド)
+- [LLM 連携](#llm-連携)
+- [ライセンス](#ライセンス)
+
+## インストール
+
+```bash
+npm install @hirokisakabe/pom
+```
+
+## クイックスタート
+
+```typescript
+import { buildPptx, POMNode } from "@hirokisakabe/pom";
+
+const slide: POMNode = {
+  type: "vstack",
+  w: "100%",
+  h: "max",
+  padding: 48,
+  gap: 24,
+  alignItems: "start",
+  children: [
+    {
+      type: "text",
+      text: "プレゼンテーションタイトル",
+      fontPx: 48,
+      bold: true,
+    },
+    {
+      type: "text",
+      text: "サブタイトル",
+      fontPx: 24,
+      color: "666666",
+    },
+  ],
+};
+
+const pptx = await buildPptx([slide], { w: 1280, h: 720 });
+await pptx.writeFile({ fileName: "presentation.pptx" });
+```
 
 ## 特徴
 
 - **型安全**: TypeScript による厳密な型定義
 - **宣言的**: JSON ライクなオブジェクトでスライドを記述
+- **PowerPoint ファースト**: Shape 機能をネイティブサポート
 - **柔軟なレイアウト**: VStack/HStack/Box による自動レイアウト
 - **ピクセル単位**: 直感的なピクセル単位での指定（内部でインチに変換）
 - **マスタースライド**: 全ページ共通のヘッダー・フッター・ページ番号を自動挿入
@@ -118,7 +167,54 @@
 - `rows` の `height` を省略すると `defaultRowHeight`（未指定なら32px）が適用されます。
 - セル背景やフォント装飾を `cells` の各要素で個別に指定できます。
 
-#### 4. Box
+#### 4. Shape
+
+図形を描画するノード。テキスト付き/なしで異なる表現が可能で、複雑なビジュアル効果をサポートしています。
+
+```typescript
+{
+  type: "shape";
+  shapeType: PptxGenJS.SHAPE_NAME;  // 例: "roundRect", "ellipse", "cloud", "star5" など
+  text?: string;                     // 図形内に表示するテキスト（オプション）
+  fill?: {
+    color?: string;
+    transparency?: number;
+  };
+  line?: {
+    color?: string;
+    width?: number;
+    dashType?: "solid" | "dash" | "dashDot" | "lgDash" | "lgDashDot" | "lgDashDotDot" | "sysDash" | "sysDot";
+  };
+  shadow?: {
+    type: "outer" | "inner";
+    opacity?: number;
+    blur?: number;
+    angle?: number;
+    offset?: number;
+    color?: string;
+  };
+  fontPx?: number;
+  fontColor?: string;
+  alignText?: "left" | "center" | "right";
+
+  // 共通プロパティ
+  w?: number | "max" | `${number}%`;
+  h?: number | "max" | `${number}%`;
+  ...
+}
+```
+
+**主な図形タイプの例:**
+
+- `roundRect`: 角丸長方形（タイトルボックス、カテゴリ表示）
+- `ellipse`: 楕円/円（ステップ番号、バッジ）
+- `cloud`: 雲型（コメント、重要ポイント）
+- `wedgeRectCallout`: 矢印付き吹き出し（注記）
+- `cloudCallout`: 雲吹き出し（コメント）
+- `star5`: 5つ星（強調、デコレーション）
+- `downArrow`: 下矢印（フロー図）
+
+#### 5. Box
 
 単一の子要素をラップする汎用コンテナ。
 
@@ -137,7 +233,7 @@
 }
 ```
 
-#### 5. VStack
+#### 6. VStack
 
 子要素を **縦方向** に並べる。
 
@@ -156,7 +252,7 @@
 }
 ```
 
-#### 6. HStack
+#### 7. HStack
 
 子要素を **横方向** に並べる。
 
@@ -175,53 +271,6 @@
 }
 ```
 
-#### 7. Shape
-
-図形を描画するノード。テキスト付き/なしで異なる表現が可能で、複雑なビジュアル効果をサポートしています。
-
-```typescript
-{
-  type: "shape";
-  shapeType: PptxGenJS.SHAPE_NAME;  // 例: "roundRect", "ellipse", "cloud", "star5" など
-  text?: string;                     // 図形内に表示するテキスト（オプション）
-  fill?: {
-    color?: string;
-    transparency?: number;
-  };
-  line?: {
-    color?: string;
-    width?: number;
-    dashType?: "solid" | "dash" | "dashDot" | "lgDash" | "lgDashDot" | "lgDashDotDot" | "sysDash" | "sysDot";
-  };
-  shadow?: {
-    type: "outer" | "inner";
-    opacity?: number;
-    blur?: number;
-    angle?: number;
-    offset?: number;
-    color?: string;
-  };
-  fontPx?: number;
-  fontColor?: string;
-  alignText?: "left" | "center" | "right";
-
-  // 共通プロパティ
-  w?: number | "max" | `${number}%`;
-  h?: number | "max" | `${number}%`;
-  ...
-}
-```
-
-**主な図形タイプの例:**
-
-- `roundRect`: 角丸長方形（タイトルボックス、カテゴリ表示）
-- `ellipse`: 楕円/円（ステップ番号、バッジ）
-- `cloud`: 雲型（コメント、重要ポイント）
-- `wedgeRectCallout`: 矢印付き吹き出し（注記）
-- `cloudCallout`: 雲吹き出し（コメント）
-- `star5`: 5つ星（強調、デコレーション）
-- `downArrow`: 下矢印（フロー図）
-
 ## マスタースライド
 
 全ページに共通のヘッダー・フッター・ページ番号を自動挿入できます。
@@ -399,3 +448,7 @@ await pptx.writeFile({ fileName: "sales-report.pptx" });
 | `inputVStackNodeSchema`         | VStackノード用                                 |
 | `inputHStackNodeSchema`         | HStackノード用                                 |
 | `inputMasterSlideOptionsSchema` | マスタースライド設定用                         |
+
+## ライセンス
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hirokisakabe/pom",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "PowerPoint Object Model - A declarative TypeScript library for creating PowerPoint presentations",
   "type": "module",
   "main": "./dist/index.js",
@@ -35,16 +35,24 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "vrt": "tsx vrt/runVrt.ts",
+    "vrt:update": "tsx vrt/runVrt.ts --update",
+    "vrt:docker": "docker compose run --rm vrt",
+    "vrt:docker:update": "docker compose run --rm vrt-update"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@types/image-size": "0.7.0",
+    "@types/pngjs": "6.0.5",
     "@vitest/ui": "^4.0.8",
     "eslint": "^9.39.1",
     "globals": "^16.5.0",
     "jiti": "2.6.1",
+    "pixelmatch": "7.1.0",
+    "pngjs": "7.0.0",
     "prettier": "3.6.2",
+    "tsx": "4.21.0",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.47.0",
     "vitest": "^4.0.8"