@hirokisakabe/pom 0.1.3 → 0.1.5

package/README.md

@@ -8,6 +8,7 @@
 - **宣言的**: JSON ライクなオブジェクトでスライドを記述
 - **柔軟なレイアウト**: VStack/HStack/Box による自動レイアウト
 - **ピクセル単位**: 直感的なピクセル単位での指定（内部でインチに変換）
+- **マスタースライド**: 全ページ共通のヘッダー・フッター・ページ番号を自動挿入
 - **AI フレンドリー**: LLM がコード生成しやすいシンプルな構造
 
 ## ノード
@@ -48,7 +49,11 @@
   type: "text";
   text: string;
   fontPx?: number;
+  color?: string;
   alignText?: "left" | "center" | "right";
+  bold?: boolean;
+  fontFamily?: string;
+  lineSpacingMultiple?: number;
 
   // 共通プロパティ
   w?: number | "max" | `${number}%`;
@@ -57,6 +62,11 @@
 }
 ```
 
+- `color` で文字色を 16 進カラーコード（例: `"FF0000"`）として指定できます。
+- `bold` で太字を指定できます。
+- `fontFamily` でフォントファミリーを指定できます（デフォルト: `"Noto Sans JP"`）。
+- `lineSpacingMultiple` で行間倍率を指定できます（デフォルト: `1.3`）。
+
 #### 2. Image
 
 画像を表示するノード。
@@ -211,3 +221,181 @@
 - `cloudCallout`: 雲吹き出し（コメント）
 - `star5`: 5つ星（強調、デコレーション）
 - `downArrow`: 下矢印（フロー図）
+
+## マスタースライド
+
+全ページに共通のヘッダー・フッター・ページ番号を自動挿入できます。
+
+### 基本的な使い方
+
+```typescript
+import { buildPptx } from "@hirokisakabe/pom";
+
+const pptx = await buildPptx(
+  [page1, page2, page3],
+  { w: 1280, h: 720 },
+  {
+    master: {
+      header: {
+        type: "hstack",
+        h: 40,
+        padding: { left: 48, right: 48, top: 12, bottom: 0 },
+        justifyContent: "spaceBetween",
+        alignItems: "center",
+        backgroundColor: "0F172A",
+        children: [
+          {
+            type: "text",
+            text: "会社名",
+            fontPx: 14,
+            color: "FFFFFF",
+          },
+          {
+            type: "text",
+            text: "{{date}}",
+            fontPx: 12,
+            color: "E2E8F0",
+          },
+        ],
+      },
+      footer: {
+        type: "hstack",
+        h: 30,
+        padding: { left: 48, right: 48, top: 0, bottom: 8 },
+        justifyContent: "spaceBetween",
+        alignItems: "center",
+        children: [
+          {
+            type: "text",
+            text: "Confidential",
+            fontPx: 10,
+            color: "1E293B",
+          },
+          {
+            type: "text",
+            text: "Page {{page}} / {{totalPages}}",
+            fontPx: 10,
+            color: "1E293B",
+            alignText: "right",
+          },
+        ],
+      },
+      date: {
+        format: "YYYY/MM/DD", // または "locale"
+      },
+    },
+  },
+);
+```
+
+### マスタースライドのオプション
+
+```typescript
+type MasterSlideOptions = {
+  header?: POMNode; // ヘッダー（任意の POMNode を指定可能）
+  footer?: POMNode; // フッター（任意の POMNode を指定可能）
+  pageNumber?: {
+    position: "left" | "center" | "right"; // ページ番号の位置
+  };
+  date?: {
+    format: "YYYY/MM/DD" | "locale"; // 日付のフォーマット
+  };
+};
+```
+
+### プレースホルダー
+
+ヘッダー・フッター内のテキストで以下のプレースホルダーが使用できます：
+
+- `{{page}}`: 現在のページ番号
+- `{{totalPages}}`: 総ページ数
+- `{{date}}`: 日付（`date.format` で指定した形式）
+
+### 特徴
+
+- **柔軟性**: ヘッダー・フッターには任意の POMNode（VStack、HStack、Box など）を使用可能
+- **自動合成**: 各ページのコンテンツに自動的にヘッダー・フッターが追加されます
+- **動的置換**: プレースホルダーはページごとに自動的に置換されます
+- **後方互換性**: master オプションは省略可能で、既存コードへの影響はありません
+
+## LLM 連携
+
+pom は LLM（GPT-4o、Claude など）で生成した JSON からスライドを作成するユースケースに対応しています。
+
+### 入力用スキーマ
+
+`inputPomNodeSchema` を使って、LLM が生成した JSON を検証できます。
+
+```typescript
+import { inputPomNodeSchema, buildPptx, InputPOMNode } from "@hirokisakabe/pom";
+
+// LLMからのJSON出力を検証
+const jsonFromLLM = `{
+  "type": "vstack",
+  "padding": 48,
+  "gap": 24,
+  "children": [
+    { "type": "text", "text": "タイトル", "fontPx": 32, "bold": true },
+    { "type": "text", "text": "本文テキスト", "fontPx": 16 }
+  ]
+}`;
+
+const parsed = JSON.parse(jsonFromLLM);
+const result = inputPomNodeSchema.safeParse(parsed);
+
+if (result.success) {
+  // 検証成功 - PPTXを生成
+  const pptx = await buildPptx([result.data], { w: 1280, h: 720 });
+  await pptx.writeFile({ fileName: "output.pptx" });
+} else {
+  // 検証失敗 - エラー内容を確認
+  console.error("Validation failed:", result.error.format());
+}
+```
+
+### OpenAI Structured Outputs との連携
+
+OpenAI SDK の `zodResponseFormat` を使用して、LLM に直接スキーマ準拠の JSON を生成させることができます。
+
+```typescript
+import { inputPomNodeSchema, buildPptx } from "@hirokisakabe/pom";
+import OpenAI from "openai";
+import { zodResponseFormat } from "openai/helpers/zod";
+
+const openai = new OpenAI();
+
+const response = await openai.chat.completions.create({
+  model: "gpt-4o",
+  messages: [
+    {
+      role: "system",
+      content:
+        "あなたはプレゼンテーション作成アシスタントです。指定されたスキーマに従ってスライドのJSONを生成してください。",
+    },
+    {
+      role: "user",
+      content:
+        "売上報告のスライドを作成して。タイトルと3つの箇条書きを含めて。",
+    },
+  ],
+  response_format: zodResponseFormat(inputPomNodeSchema, "slide"),
+});
+
+const slideData = JSON.parse(response.choices[0].message.content!);
+const pptx = await buildPptx([slideData], { w: 1280, h: 720 });
+await pptx.writeFile({ fileName: "sales-report.pptx" });
+```
+
+### 利用可能な入力用スキーマ
+
+| スキーマ                        | 説明                                           |
+| ------------------------------- | ---------------------------------------------- |
+| `inputPomNodeSchema`            | メインのノードスキーマ（全ノードタイプを含む） |
+| `inputTextNodeSchema`           | テキストノード用                               |
+| `inputImageNodeSchema`          | 画像ノード用                                   |
+| `inputTableNodeSchema`          | テーブルノード用                               |
+| `inputShapeNodeSchema`          | 図形ノード用                                   |
+| `inputBoxNodeSchema`            | Boxノード用                                    |
+| `inputVStackNodeSchema`         | VStackノード用                                 |
+| `inputHStackNodeSchema`         | HStackノード用                                 |
+| `inputMasterSlideOptionsSchema` | マスタースライド設定用                         |

package/dist/buildPptx.d.ts

@@ -1,6 +1,8 @@
-import { POMNode } from "./types";
+import { POMNode, MasterSlideOptions } from "./types";
 export declare function buildPptx(nodes: POMNode[], slideSize: {
     w: number;
     h: number;
+}, options?: {
+    master?: MasterSlideOptions;
 }): Promise<import("pptxgenjs").default>;
 //# sourceMappingURL=buildPptx.d.ts.map

package/dist/buildPptx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildPptx.d.ts","sourceRoot":"","sources":["../src/buildPptx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAkB,MAAM,SAAS,CAAC;AAElD,wBAAsB,SAAS,CAC7B,KAAK,EAAE,OAAO,EAAE,EAChB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,wCAapC"}
+{"version":3,"file":"buildPptx.d.ts","sourceRoot":"","sources":["../src/buildPptx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAkB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAiGtE,wBAAsB,SAAS,CAC7B,KAAK,EAAE,OAAO,EAAE,EAChB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAE,wCAgB1C"}

package/dist/buildPptx.js

@@ -1,11 +1,75 @@
 import { calcYogaLayout } from "./calcYogaLayout/calcYogaLayout";
 import { renderPptx } from "./renderPptx/renderPptx";
 import { toPositioned } from "./toPositioned/toPositioned";
-export async function buildPptx(nodes, slideSize) {
+function replacePlaceholders(node, pageNumber, totalPages, date) {
+    if (node.type === "text") {
+        return {
+            ...node,
+            text: node.text
+                .replace(/\{\{page\}\}/g, String(pageNumber))
+                .replace(/\{\{totalPages\}\}/g, String(totalPages))
+                .replace(/\{\{date\}\}/g, date),
+        };
+    }
+    if (node.type === "box") {
+        return {
+            ...node,
+            children: replacePlaceholders(node.children, pageNumber, totalPages, date),
+        };
+    }
+    if (node.type === "vstack" || node.type === "hstack") {
+        return {
+            ...node,
+            children: node.children.map((child) => replacePlaceholders(child, pageNumber, totalPages, date)),
+        };
+    }
+    return node;
+}
+function composePage(content, master, pageNumber, totalPages) {
+    if (!master) {
+        return content;
+    }
+    const date = master.date?.format === "locale"
+        ? new Date().toLocaleDateString()
+        : new Date().toISOString().split("T")[0].replace(/-/g, "/");
+    const children = [];
+    // ヘッダーを追加
+    if (master.header) {
+        children.push(replacePlaceholders(master.header, pageNumber, totalPages, date));
+    }
+    // コンテンツを追加
+    children.push(content);
+    // フッターを追加
+    if (master.footer) {
+        children.push(replacePlaceholders(master.footer, pageNumber, totalPages, date));
+    }
+    // ページ番号を追加
+    if (master.pageNumber) {
+        const pageNumberNode = {
+            type: "text",
+            text: String(pageNumber),
+            fontPx: 12,
+            alignText: master.pageNumber.position,
+        };
+        children.push(pageNumberNode);
+    }
+    return {
+        type: "vstack",
+        w: "100%",
+        h: "100%",
+        alignItems: "stretch",
+        justifyContent: "start",
+        children,
+    };
+}
+export async function buildPptx(nodes, slideSize, options) {
     const positionedPages = [];
-    for (const node of nodes) {
-        await calcYogaLayout(node, slideSize);
-        const positioned = toPositioned(node);
+    const totalPages = nodes.length;
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        const composedNode = composePage(node, options?.master, i + 1, totalPages);
+        await calcYogaLayout(composedNode, slideSize);
+        const positioned = toPositioned(composedNode);
         positionedPages.push(positioned);
     }
     const pptx = renderPptx(positionedPages, slideSize);

package/dist/calcYogaLayout/measureText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"measureText.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/measureText.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAKF;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,cAAc,GACnB;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAoCA"}
+{"version":3,"file":"measureText.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/measureText.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAKF;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,cAAc,GACnB;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CA+CA"}

package/dist/calcYogaLayout/measureText.js

@@ -6,28 +6,37 @@ const ctx = canvas.getContext("2d");
  */
 export function measureText(text, maxWidthPx, opts) {
     applyFontStyle(opts);
-    const words = splitForWrap(text);
+    // まず改行で段落に分割
+    const paragraphs = text.split("\n");
     const lines = [];
-    let current = "";
-    let currentWidth = 0;
-    for (const word of words) {
-        const candidate = current ? current + word : word;
-        const w = ctx.measureText(candidate).width;
-        if (w <= maxWidthPx || !current) {
-            // まだ詰められる
-            current = candidate;
-            currentWidth = w;
+    for (const paragraph of paragraphs) {
+        // 空の段落（連続した改行）も1行としてカウント
+        if (paragraph === "") {
+            lines.push({ widthPx: 0 });
+            continue;
         }
-        else {
-            // 折り返す
+        const words = splitForWrap(paragraph);
+        let current = "";
+        let currentWidth = 0;
+        for (const word of words) {
+            const candidate = current ? current + word : word;
+            const w = ctx.measureText(candidate).width;
+            if (w <= maxWidthPx || !current) {
+                // まだ詰められる
+                current = candidate;
+                currentWidth = w;
+            }
+            else {
+                // 折り返す
+                lines.push({ widthPx: currentWidth });
+                current = word;
+                currentWidth = ctx.measureText(word).width;
+            }
+        }
+        if (current) {
             lines.push({ widthPx: currentWidth });
-            current = word;
-            currentWidth = ctx.measureText(word).width;
         }
     }
-    if (current) {
-        lines.push({ widthPx: currentWidth });
-    }
     const lineHeightRatio = opts.lineHeight ?? 1.3;
     const lineHeightPx = opts.fontSizePx * lineHeightRatio;
     const widthPx = lines.length ? Math.max(...lines.map((l) => l.widthPx)) : 0;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./types";
+export * from "./inputSchema";
 export { buildPptx } from "./buildPptx";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from "./types";
+export * from "./inputSchema";
 export { buildPptx } from "./buildPptx";