@hirokisakabe/pom 1.1.3 → 1.3.0

package/README.md

@@ -60,24 +60,138 @@ await pptx.writeFile({ fileName: "presentation.pptx" });
 
 ## Available Nodes
 
-| Node         | Description                                    |
-| ------------ | ---------------------------------------------- |
-| text         | Text with font styling and bullet points       |
-| image        | Images from file path, URL, or base64          |
-| table        | Tables with customizable columns and rows      |
-| shape        | PowerPoint shapes (roundRect, ellipse, etc.)   |
-| chart        | Charts (bar, line, pie, area, doughnut, radar) |
-| timeline     | Timeline/roadmap visualizations                |
-| matrix       | 2x2 positioning maps                           |
-| tree         | Organization charts and decision trees         |
-| flow         | Flowcharts with nodes and edges                |
-| processArrow | Chevron-style process diagrams                 |
-| box          | Container for single child with padding        |
-| vstack       | Vertical stack layout                          |
-| hstack       | Horizontal stack layout                        |
+| Node         | Description                                           |
+| ------------ | ----------------------------------------------------- |
+| text         | Text with font styling, decoration, and bullet points |
+| image        | Images from file path, URL, or base64                 |
+| table        | Tables with customizable columns and rows             |
+| shape        | PowerPoint shapes (roundRect, ellipse, etc.)          |
+| chart        | Charts (bar, line, pie, area, doughnut, radar)        |
+| timeline     | Timeline/roadmap visualizations                       |
+| matrix       | 2x2 positioning maps                                  |
+| tree         | Organization charts and decision trees                |
+| flow         | Flowcharts with nodes and edges                       |
+| processArrow | Chevron-style process diagrams                        |
+| box          | Container for single child with padding               |
+| vstack       | Vertical stack layout                                 |
+| hstack       | Horizontal stack layout                               |
 
 For detailed node documentation, see [Nodes Reference](./docs/nodes.md).
 
+## Components
+
+pom provides a `defineComponent` helper for creating reusable component templates. Components are simple functions that take props and return a `POMNode` — no runtime magic, no new node types.
+
+```typescript
+import { defineComponent, mergeTheme, POMNode, Theme } from "@hirokisakabe/pom";
+
+// Define a reusable card component
+const SectionCard = defineComponent<{
+  title: string;
+  content: POMNode; // Slot: any POMNode
+  theme?: Partial<Theme>; // Theme override
+}>((props) => {
+  const t = mergeTheme(props.theme);
+  return {
+    type: "box",
+    padding: t.spacing.md,
+    backgroundColor: "FFFFFF",
+    border: { color: t.colors.border, width: 1 },
+    borderRadius: 8,
+    children: {
+      type: "vstack",
+      gap: t.spacing.sm,
+      children: [
+        {
+          type: "text",
+          text: props.title,
+          fontPx: t.fontPx.heading,
+          bold: true,
+        },
+        props.content,
+      ],
+    },
+  };
+});
+
+// Use the component
+const slide: POMNode = {
+  type: "vstack",
+  w: 1280,
+  h: 720,
+  padding: 48,
+  gap: 24,
+  children: [
+    SectionCard({
+      title: "Revenue",
+      content: { type: "text", text: "$1,000,000" },
+    }),
+    SectionCard({
+      title: "Custom Theme",
+      content: { type: "text", text: "Styled card" },
+      theme: { colors: { border: "CBD5E1" } },
+    }),
+  ],
+};
+```
+
+Components support:
+
+- **Slots**: Pass `POMNode` or `POMNode[]` as props for content injection
+- **Theme**: Use `mergeTheme()` for colors, spacing, and font size overrides
+- **Nesting**: Components can call other components
+- **JSON / LLM**: Use `expandComponents()` to resolve component references in JSON
+
+### Using Components with LLM-generated JSON
+
+When an LLM outputs JSON containing `{ type: "component", name: "...", props: {...} }`, use `expandComponentSlides()` to resolve them before building:
+
+```typescript
+import {
+  buildPptx,
+  defineComponent,
+  expandComponentSlides,
+} from "@hirokisakabe/pom";
+
+// Register components
+const SectionCard = defineComponent<{ title: string; content: unknown }>(
+  (props) => ({
+    type: "box",
+    padding: 16,
+    children: {
+      type: "vstack",
+      gap: 8,
+      children: [
+        { type: "text", text: props.title, bold: true },
+        props.content,
+      ],
+    },
+  }),
+);
+
+const registry = { SectionCard };
+
+// LLM output (JSON with component references)
+const llmOutput = [
+  {
+    type: "vstack",
+    w: 1280,
+    h: 720,
+    children: [
+      {
+        type: "component",
+        name: "SectionCard",
+        props: { title: "KPI", content: { type: "text", text: "$1M" } },
+      },
+    ],
+  },
+];
+
+// Expand → Build
+const slides = expandComponentSlides(llmOutput, registry);
+const pptx = await buildPptx(slides, { w: 1280, h: 720 });
+```
+
 ## Documentation
 
 | Document                                        | Description                             |
@@ -86,6 +200,7 @@ For detailed node documentation, see [Nodes Reference](./docs/nodes.md).
 | [Master Slide](./docs/master-slide.md)          | Headers, footers, and page numbers      |
 | [Serverless Environments](./docs/serverless.md) | Text measurement options for serverless |
 | [LLM Integration](./docs/llm-integration.md)    | Guide for generating slides with AI/LLM |
+| [Components](./docs/nodes.md#components)        | Reusable component templates            |
 
 ## License
 

package/dist/calcYogaLayout/calcYogaLayout.js

@@ -35,6 +35,10 @@ async function prefetchAllImageSizes(node) {
 function collectImageSources(node) {
     const sources = [];
     function traverse(n) {
+        // backgroundImage の src を収集（全ノード共通）
+        if (n.backgroundImage) {
+            sources.push(n.backgroundImage.src);
+        }
         if (n.type === "image") {
             sources.push(n.src);
         }
@@ -73,7 +77,10 @@ async function buildPomWithYogaTree(node, parentYoga, parentNode) {
     node.yogaNode = yn; // 対応する YogaNode をセット
     await applyStyleToYogaNode(node, yn);
     // HStack の子要素で幅が指定されていない場合、デフォルトで均等分割
-    if (parentNode?.type === "hstack" && node.w === undefined) {
+    // テーブルは setMeasureFunc でカラム幅合計を返すため除外
+    if (parentNode?.type === "hstack" &&
+        node.w === undefined &&
+        node.type !== "table") {
         yn.setFlexGrow(1);
         yn.setFlexBasis(0);
     }

package/dist/component.d.ts

@@ -0,0 +1,90 @@
+import type { POMNode } from "./types.ts";
+/**
+ * 再利用可能なコンポーネントを定義する。
+ * Props を受け取り POMNode を返す関数を作成する。
+ *
+ * @example
+ * ```typescript
+ * const SectionCard = defineComponent<{
+ *   title: string;
+ *   content: POMNode;
+ *   color?: string;
+ * }>((props) => ({
+ *   type: "box",
+ *   padding: 20,
+ *   backgroundColor: "FFFFFF",
+ *   border: { color: "E2E8F0", width: 1 },
+ *   borderRadius: 8,
+ *   children: {
+ *     type: "vstack",
+ *     gap: 12,
+ *     children: [
+ *       {
+ *         type: "text",
+ *         text: props.title,
+ *         fontPx: 18,
+ *         bold: true,
+ *         color: props.color ?? "334155",
+ *       },
+ *       props.content,
+ *     ],
+ *   },
+ * }));
+ *
+ * // Usage:
+ * const node = SectionCard({
+ *   title: "KPI Summary",
+ *   content: { type: "text", text: "Revenue: $1M" },
+ * });
+ * ```
+ */
+export declare function defineComponent<Props>(render: (props: Props) => POMNode): (props: Props) => POMNode;
+/**
+ * テーマ設定の型。コンポーネントにスタイルの一括オーバーライドを提供する。
+ */
+export type Theme = {
+    colors?: {
+        primary?: string;
+        secondary?: string;
+        background?: string;
+        text?: string;
+        border?: string;
+        accent?: string;
+    };
+    spacing?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    fontPx?: {
+        title?: number;
+        heading?: number;
+        body?: number;
+        caption?: number;
+    };
+};
+type RequiredTheme = {
+    colors: Required<NonNullable<Theme["colors"]>>;
+    spacing: Required<NonNullable<Theme["spacing"]>>;
+    fontPx: Required<NonNullable<Theme["fontPx"]>>;
+};
+export declare const defaultTheme: RequiredTheme;
+/**
+ * デフォルトテーマとユーザー指定テーマをマージする。
+ */
+export declare function mergeTheme(theme?: Partial<Theme>): RequiredTheme;
+export type ComponentRegistry = Record<string, (props: any) => POMNode>;
+/**
+ * JSON 入力内のコンポーネントノードを展開して POMNode を返す。
+ * LLM が出力した JSON に `{ type: "component", name: "...", props: {...} }` が
+ * 含まれている場合、レジストリからコンポーネント関数を取得して展開する。
+ */
+export declare function expandComponents(input: unknown, registry: ComponentRegistry): POMNode;
+/**
+ * 複数スライドの JSON 入力内のコンポーネントノードを展開する。
+ */
+export declare function expandComponentSlides(inputs: unknown[], registry: ComponentRegistry): POMNode[];
+export {};
+//# sourceMappingURL=component.d.ts.map

package/dist/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,eAAe,CAAC,KAAK,EACnC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GAChC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAE3B;AAED;;GAEG;AACH,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IACF,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC/C,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACjD,MAAM,EAAE,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,aAsB1B,CAAC;AAEF;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,aAAa,CAMhE;AAGD,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,CAAC;AA0CxE;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,iBAAiB,GAC1B,OAAO,CAET;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,OAAO,EAAE,EACjB,QAAQ,EAAE,iBAAiB,GAC1B,OAAO,EAAE,CAEX"}

package/dist/component.js

@@ -0,0 +1,123 @@
+/**
+ * 再利用可能なコンポーネントを定義する。
+ * Props を受け取り POMNode を返す関数を作成する。
+ *
+ * @example
+ * ```typescript
+ * const SectionCard = defineComponent<{
+ *   title: string;
+ *   content: POMNode;
+ *   color?: string;
+ * }>((props) => ({
+ *   type: "box",
+ *   padding: 20,
+ *   backgroundColor: "FFFFFF",
+ *   border: { color: "E2E8F0", width: 1 },
+ *   borderRadius: 8,
+ *   children: {
+ *     type: "vstack",
+ *     gap: 12,
+ *     children: [
+ *       {
+ *         type: "text",
+ *         text: props.title,
+ *         fontPx: 18,
+ *         bold: true,
+ *         color: props.color ?? "334155",
+ *       },
+ *       props.content,
+ *     ],
+ *   },
+ * }));
+ *
+ * // Usage:
+ * const node = SectionCard({
+ *   title: "KPI Summary",
+ *   content: { type: "text", text: "Revenue: $1M" },
+ * });
+ * ```
+ */
+export function defineComponent(render) {
+    return render;
+}
+export const defaultTheme = {
+    colors: {
+        primary: "1D4ED8",
+        secondary: "64748B",
+        background: "F8FAFC",
+        text: "1E293B",
+        border: "E2E8F0",
+        accent: "0EA5E9",
+    },
+    spacing: {
+        xs: 4,
+        sm: 8,
+        md: 16,
+        lg: 24,
+        xl: 48,
+    },
+    fontPx: {
+        title: 32,
+        heading: 20,
+        body: 14,
+        caption: 11,
+    },
+};
+/**
+ * デフォルトテーマとユーザー指定テーマをマージする。
+ */
+export function mergeTheme(theme) {
+    return {
+        colors: { ...defaultTheme.colors, ...theme?.colors },
+        spacing: { ...defaultTheme.spacing, ...theme?.spacing },
+        fontPx: { ...defaultTheme.fontPx, ...theme?.fontPx },
+    };
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function expandNode(input, registry) {
+    if (Array.isArray(input)) {
+        return input.map((item) => expandNode(item, registry));
+    }
+    if (!isRecord(input)) {
+        return input;
+    }
+    if (input.type === "component") {
+        const name = input.name;
+        const fn = registry[name];
+        if (!fn) {
+            throw new Error(`Unknown component: "${name}"`);
+        }
+        const rawProps = isRecord(input.props) ? input.props : {};
+        const expandedProps = Object.fromEntries(Object.entries(rawProps).map(([key, value]) => [
+            key,
+            expandNode(value, registry),
+        ]));
+        return expandNode(fn(expandedProps), registry);
+    }
+    const result = {};
+    for (const [key, value] of Object.entries(input)) {
+        if (key === "children") {
+            result[key] = expandNode(value, registry);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+/**
+ * JSON 入力内のコンポーネントノードを展開して POMNode を返す。
+ * LLM が出力した JSON に `{ type: "component", name: "...", props: {...} }` が
+ * 含まれている場合、レジストリからコンポーネント関数を取得して展開する。
+ */
+export function expandComponents(input, registry) {
+    return expandNode(input, registry);
+}
+/**
+ * 複数スライドの JSON 入力内のコンポーネントノードを展開する。
+ */
+export function expandComponentSlides(inputs, registry) {
+    return inputs.map((input) => expandComponents(input, registry));
+}

package/dist/index.d.ts

@@ -2,4 +2,6 @@ export * from "./types.ts";
 export * from "./inputSchema.ts";
 export { buildPptx } from "./buildPptx.ts";
 export type { TextMeasurementMode } from "./buildPptx.ts";
+export { defineComponent, defaultTheme, mergeTheme, expandComponents, expandComponentSlides, } from "./component.ts";
+export type { Theme, ComponentRegistry } from "./component.ts";
 //# 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,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from "./types.js";
 export * from "./inputSchema.js";
 export { buildPptx } from "./buildPptx.js";
+export { defineComponent, defaultTheme, mergeTheme, expandComponents, expandComponentSlides, } from "./component.js";