@hirokisakabe/pom 1.4.0 → 2.0.0

package/README.md

@@ -1,6 +1,8 @@
 # pom
 
-**pom (PowerPoint Object Model)** is a library for declaratively describing PowerPoint presentations (pptx) in TypeScript. It is designed for use cases where JSON in POM format generated by AI is converted into PowerPoint files.
+**pom (PowerPoint Object Model)** is a library for declaratively describing PowerPoint presentations (pptx) in TypeScript. It is designed for use cases where XML in POM format generated by AI is converted into PowerPoint files.
+
+> **[Try it online](https://pom-playground.vercel.app/)** — XML Playground
 
 ## Requirements
 
@@ -19,39 +21,23 @@ npm install @hirokisakabe/pom
 ## Quick Start
 
 ```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: "Presentation Title",
-      fontPx: 48,
-      bold: true,
-    },
-    {
-      type: "text",
-      text: "Subtitle",
-      fontPx: 24,
-      color: "666666",
-    },
-  ],
-};
-
-const pptx = await buildPptx([slide], { w: 1280, h: 720 });
+import { buildPptx } from "@hirokisakabe/pom";
+
+const xml = `
+<VStack w="100%" h="max" padding="48" gap="24" alignItems="start">
+  <Text fontPx="48" bold="true">Presentation Title</Text>
+  <Text fontPx="24" color="666666">Subtitle</Text>
+</VStack>
+`;
+
+const pptx = await buildPptx(xml, { w: 1280, h: 720 });
 await pptx.writeFile({ fileName: "presentation.pptx" });
 ```
 
 ## Features
 
-- **Type-safe**: Strict type definitions with TypeScript
-- **Declarative**: Describe slides with JSON-like objects
+- **Schema-validated**: XML input validated with Zod schemas at runtime
+- **Declarative**: Describe slides with XML
 - **PowerPoint First**: Native support for Shape features
 - **Flexible Layout**: Automatic layout with VStack/HStack/Box
 - **Pixel Units**: Intuitive pixel-based sizing (internally converted to inches)
@@ -78,156 +64,15 @@ await pptx.writeFile({ fileName: "presentation.pptx" });
 
 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 });
-```
-
-## XML Input
-
-`parseXml` allows you to describe slides in XML instead of JSON. XML tags (PascalCase) are mapped to POM node types, and attribute values are automatically type-coerced using Zod schemas.
-
-```typescript
-import { parseXml, buildPptx } from "@hirokisakabe/pom";
-
-const xml = `
-<VStack gap="16" padding="32">
-  <Text fontPx="32" bold="true">売上レポート</Text>
-  <HStack gap="16">
-    <Chart chartType="bar" w="400" h="300"
-      data='[{ "name": "Q1", "labels": ["1月","2月","3月"], "values": [100,120,90] }]'
-    />
-    <Text fontPx="18" color="00AA00">前年比 +15%</Text>
-  </HStack>
-</VStack>
-`;
-
-const nodes = parseXml(xml);
-const pptx = await buildPptx(nodes, { w: 1280, h: 720 });
-```
-
-Unknown tags are treated as component nodes (`{ type: "component", name: tagName, props: {...} }`), which can be resolved with `expandComponents()`.
-
-For more details, see [LLM Integration - XML Format](./docs/llm-integration.md#xml-format).
-
 ## Documentation
 
-| Document                                        | Description                             |
-| ----------------------------------------------- | --------------------------------------- |
-| [Nodes Reference](./docs/nodes.md)              | Complete reference for all node types   |
-| [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            |
+| Document                                         | Description                             |
+| ------------------------------------------------ | --------------------------------------- |
+| [Nodes Reference](./docs/nodes.md)               | Complete reference for all node types   |
+| [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)     | Compact XML reference for LLM prompts   |
+| [Playground](https://pom-playground.vercel.app/) | Try pom XML in the browser              |
 
 ## License
 

package/dist/buildPptx.d.ts

@@ -1,7 +1,7 @@
 import { TextMeasurementMode } from "./calcYogaLayout/measureText.ts";
-import { POMNode, SlideMasterOptions } from "./types.ts";
+import { SlideMasterOptions } from "./types.ts";
 export type { TextMeasurementMode };
-export declare function buildPptx(nodes: POMNode[], slideSize: {
+export declare function buildPptx(xml: string, slideSize: {
     w: number;
     h: number;
 }, options?: {

package/dist/buildPptx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildPptx.d.ts","sourceRoot":"","sources":["../src/buildPptx.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAAE,OAAO,EAAkB,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEzE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC,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;IACR,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC,wCAoBF"}
+{"version":3,"file":"buildPptx.d.ts","sourceRoot":"","sources":["../src/buildPptx.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAIzC,OAAO,EAAkB,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC,wBAAsB,SAAS,CAC7B,GAAG,EAAE,MAAM,EACX,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,OAAO,CAAC,EAAE;IACR,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC,wCAqBF"}

package/dist/buildPptx.js

@@ -1,8 +1,9 @@
 import { calcYogaLayout } from "./calcYogaLayout/calcYogaLayout.js";
 import { setTextMeasurementMode, } from "./calcYogaLayout/measureText.js";
+import { parseXml } from "./parseXml.js";
 import { renderPptx } from "./renderPptx/renderPptx.js";
 import { toPositioned } from "./toPositioned/toPositioned.js";
-export async function buildPptx(nodes, slideSize, options) {
+export async function buildPptx(xml, slideSize, options) {
     // テキスト計測モードを設定（デフォルトは auto）
     if (options?.textMeasurement) {
         setTextMeasurementMode(options.textMeasurement);
@@ -10,6 +11,7 @@ export async function buildPptx(nodes, slideSize, options) {
     else {
         setTextMeasurementMode("auto");
     }
+    const nodes = parseXml(xml);
     const positionedPages = [];
     for (const node of nodes) {
         await calcYogaLayout(node, slideSize);

package/dist/calcYogaLayout/fontLoader.d.ts

@@ -2,13 +2,6 @@
  * opentype.js を使用したフォント読み込みモジュール
  * Node.js とブラウザ両方で動作する
  */
-import { Font } from "opentype.js";
-/**
- * フォントを取得する（キャッシュ付き）
- * @param weight フォントウェイト ("normal" or "bold")
- * @returns opentype.js の Font オブジェクト
- */
-export declare function getFont(weight: "normal" | "bold"): Font;
 /**
  * 指定したテキストの幅を計測する
  * @param text 計測するテキスト

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

@@ -1 +1 @@
-{"version":3,"file":"fontLoader.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/fontLoader.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAiB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AA6B7C;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI,CAqBvD;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,QAAQ,GAAG,MAAM,GACxB,MAAM,CAGR"}
+{"version":3,"file":"fontLoader.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/fontLoader.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA2DH;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,QAAQ,GAAG,MAAM,GACxB,MAAM,CAGR"}

package/dist/calcYogaLayout/fontLoader.js

@@ -30,7 +30,7 @@ function base64ToArrayBuffer(base64) {
  * @param weight フォントウェイト ("normal" or "bold")
  * @returns opentype.js の Font オブジェクト
  */
-export function getFont(weight) {
+function getFont(weight) {
     const cacheKey = weight;
     // キャッシュがあればそれを返す
     const cached = fontCache.get(cacheKey);

package/dist/calcYogaLayout/measureText.d.ts

@@ -9,10 +9,6 @@ export type TextMeasurementMode = "opentype" | "fallback" | "auto";
  * テキスト計測モードを設定する
  */
 export declare function setTextMeasurementMode(mode: TextMeasurementMode): void;
-/**
- * 現在のテキスト計測モードを取得する
- */
-export declare function getTextMeasurementMode(): TextMeasurementMode;
 /**
  * テキストを折り返し付きでレイアウトし、そのサイズを測定する
  */

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;AAEF,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AAoHnE;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAEtE;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAE5D;AAcD;;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,CAmBA"}
+{"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;AAEF,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AAoHnE;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAEtE;AAcD;;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,CAmBA"}

package/dist/calcYogaLayout/measureText.js

@@ -102,12 +102,6 @@ let currentMode = "auto";
 export function setTextMeasurementMode(mode) {
     currentMode = mode;
 }
-/**
- * 現在のテキスト計測モードを取得する
- */
-export function getTextMeasurementMode() {
-    return currentMode;
-}
 /**
  * fontWeight を "normal" | "bold" に正規化する
  */

package/dist/index.d.ts

@@ -1,8 +1,5 @@
-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";
-export { parseXml } from "./parseXml.ts";
+export { ParseXmlError } from "./parseXml.ts";
+export type { SlideMasterOptions, SlideMasterBackground, SlideMasterMargin, MasterObject, MasterTextObject, MasterImageObject, MasterRectObject, MasterLineObject, SlideNumberOptions, } from "./types.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;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;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,YAAY,EACV,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,YAAY,CAAC"}

package/dist/index.js

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