@hirokisakabe/pom 5.0.1 → 5.2.0

package/README.md

@@ -196,6 +196,23 @@ For detailed node documentation, see [Nodes Reference](./docs/nodes.md).
 
 <img src="./docs/images/pyramid.png" alt="Pyramid example" width="600">
 
+## Auto-Fit
+
+When content exceeds the slide height, pom automatically adjusts it to fit within the slide. This is enabled by default.
+
+Adjustments are applied in the following priority order:
+
+1. Reduce table row heights
+2. Reduce text font sizes
+3. Reduce gap / padding
+4. Uniform scaling (fallback)
+
+To disable:
+
+```typescript
+const pptx = await buildPptx(xml, { w: 1280, h: 720 }, { autoFit: false });
+```
+
 ## Documentation
 
 | Document                                         | Description                             |

package/dist/autoFit/autoFit.d.ts

@@ -0,0 +1,15 @@
+import type { POMNode } from "../types.ts";
+/**
+ * スライドのオーバーフローを検出し、段階的に調整してスライド内に収める。
+ *
+ * 調整の優先順:
+ * 1. テーブル行高さ縮小
+ * 2. フォントサイズ縮小
+ * 3. gap/padding 縮小
+ * 4. 全体スケーリング（フォールバック）
+ */
+export declare function autoFitSlide(node: POMNode, slideSize: {
+    w: number;
+    h: number;
+}): Promise<void>;
+//# sourceMappingURL=autoFit.d.ts.map

package/dist/autoFit/autoFit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoFit.d.ts","sourceRoot":"","sources":["../../src/autoFit/autoFit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAsD3C;;;;;;;;GAQG;AACH,wBAAsB,YAAY,CAChC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAClC,OAAO,CAAC,IAAI,CAAC,CA6Bf"}

package/dist/autoFit/autoFit.js

@@ -0,0 +1,73 @@
+import { calcYogaLayout } from "../calcYogaLayout/calcYogaLayout.js";
+import { freeYogaTree } from "./freeYogaTree.js";
+import { reduceTableRowHeight } from "./strategies/reduceTableRowHeight.js";
+import { reduceFontSize } from "./strategies/reduceFontSize.js";
+import { reduceGapAndPadding } from "./strategies/reduceGapAndPadding.js";
+import { uniformScale } from "./strategies/uniformScale.js";
+/** オーバーフロー判定の許容マージン（0.5%） */
+const OVERFLOW_TOLERANCE = 1.005;
+const strategies = [
+    reduceTableRowHeight,
+    reduceFontSize,
+    reduceGapAndPadding,
+    uniformScale,
+];
+/**
+ * 通常の slideSize でレイアウト計算し、コンテンツの占有高さを取得する。
+ *
+ * ルートの yogaNode の子要素の (top + height) の最大値を計算し、
+ * ルートの padding.bottom を加算してコンテンツの占有高さとする。
+ * h="max" や flexGrow の影響を受けず、正確なコンテンツ高さを返す。
+ */
+async function measureContentHeight(node, slideSize) {
+    await calcYogaLayout(node, slideSize);
+    const rootYoga = node.yogaNode;
+    const childCount = rootYoga.getChildCount();
+    if (childCount === 0) {
+        return rootYoga.getComputedHeight();
+    }
+    let maxBottom = 0;
+    for (let i = 0; i < childCount; i++) {
+        const child = rootYoga.getChild(i);
+        const childLayout = child.getComputedLayout();
+        const bottom = childLayout.top + childLayout.height;
+        if (bottom > maxBottom) {
+            maxBottom = bottom;
+        }
+    }
+    // ルートの paddingBottom を加算
+    const paddingBottom = rootYoga.getComputedPadding(2); // EDGE_BOTTOM = 2
+    return maxBottom + paddingBottom;
+}
+/**
+ * スライドのオーバーフローを検出し、段階的に調整してスライド内に収める。
+ *
+ * 調整の優先順:
+ * 1. テーブル行高さ縮小
+ * 2. フォントサイズ縮小
+ * 3. gap/padding 縮小
+ * 4. 全体スケーリング（フォールバック）
+ */
+export async function autoFitSlide(node, slideSize) {
+    for (const strategy of strategies) {
+        freeYogaTree(node);
+        const contentHeight = await measureContentHeight(node, slideSize);
+        if (contentHeight <= slideSize.h * OVERFLOW_TOLERANCE) {
+            break;
+        }
+        const ratio = slideSize.h / contentHeight;
+        const changed = strategy(node, ratio);
+        if (!changed) {
+            continue;
+        }
+    }
+    // 最終的にオーバーフローが解消されたか確認
+    freeYogaTree(node);
+    const finalHeight = await measureContentHeight(node, slideSize);
+    if (finalHeight > slideSize.h * OVERFLOW_TOLERANCE) {
+        console.warn(`[pom] autoFit: content height (${Math.round(finalHeight)}px) exceeds slide height (${slideSize.h}px) after all adjustments.`);
+    }
+    // 最終レイアウト（正しい slideSize で）
+    freeYogaTree(node);
+    await calcYogaLayout(node, slideSize);
+}

package/dist/autoFit/freeYogaTree.d.ts

@@ -0,0 +1,7 @@
+import type { POMNode } from "../types.ts";
+/**
+ * POMNode ツリー内の全 yogaNode を解放し、参照をクリアする。
+ * calcYogaLayout を再実行する前に呼び出すこと。
+ */
+export declare function freeYogaTree(node: POMNode): void;
+//# sourceMappingURL=freeYogaTree.d.ts.map

package/dist/autoFit/freeYogaTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"freeYogaTree.d.ts","sourceRoot":"","sources":["../../src/autoFit/freeYogaTree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG3C;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAwBhD"}

package/dist/autoFit/freeYogaTree.js

@@ -0,0 +1,29 @@
+import { walkPOMTree } from "./walkTree.js";
+/**
+ * POMNode ツリー内の全 yogaNode を解放し、参照をクリアする。
+ * calcYogaLayout を再実行する前に呼び出すこと。
+ */
+export function freeYogaTree(node) {
+    // 子から先に解放する（yoga-layout は親が子を参照しているため）
+    const nodes = [];
+    walkPOMTree(node, (n) => nodes.push(n));
+    // 逆順（リーフから）で解放
+    for (let i = nodes.length - 1; i >= 0; i--) {
+        const n = nodes[i];
+        if (n.yogaNode) {
+            // 親から切り離してから解放
+            const owner = n.yogaNode.getParent();
+            if (owner) {
+                const childCount = owner.getChildCount();
+                for (let j = 0; j < childCount; j++) {
+                    if (owner.getChild(j) === n.yogaNode) {
+                        owner.removeChild(n.yogaNode);
+                        break;
+                    }
+                }
+            }
+            n.yogaNode.free();
+            n.yogaNode = undefined;
+        }
+    }
+}

package/dist/autoFit/strategies/reduceFontSize.d.ts

@@ -0,0 +1,8 @@
+import type { POMNode } from "../../types.ts";
+/**
+ * テキスト系ノードの fontSize を縮小する。
+ * 対象: text, ul, ol, shape
+ * @returns 変更があった場合 true
+ */
+export declare function reduceFontSize(node: POMNode, targetRatio: number): boolean;
+//# sourceMappingURL=reduceFontSize.d.ts.map

package/dist/autoFit/strategies/reduceFontSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduceFontSize.d.ts","sourceRoot":"","sources":["../../../src/autoFit/strategies/reduceFontSize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9C;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CA4D1E"}

package/dist/autoFit/strategies/reduceFontSize.js

@@ -0,0 +1,56 @@
+import { walkPOMTree } from "../walkTree.js";
+const MIN_FONT_SIZE = 10;
+const MIN_SCALE = 0.6;
+/**
+ * テキスト系ノードの fontSize を縮小する。
+ * 対象: text, ul, ol, shape
+ * @returns 変更があった場合 true
+ */
+export function reduceFontSize(node, targetRatio) {
+    const ratio = Math.max(targetRatio, MIN_SCALE);
+    let changed = false;
+    walkPOMTree(node, (n) => {
+        switch (n.type) {
+            case "text":
+            case "shape":
+            case "ul":
+            case "ol": {
+                if (n.fontSize !== undefined) {
+                    const newSize = Math.max(MIN_FONT_SIZE, Math.round(n.fontSize * ratio));
+                    if (newSize !== n.fontSize) {
+                        n.fontSize = newSize;
+                        changed = true;
+                    }
+                }
+                break;
+            }
+        }
+        // ul/ol の li 要素の fontSize も縮小
+        if (n.type === "ul" || n.type === "ol") {
+            for (const item of n.items) {
+                if (item.fontSize !== undefined) {
+                    const newSize = Math.max(MIN_FONT_SIZE, Math.round(item.fontSize * ratio));
+                    if (newSize !== item.fontSize) {
+                        item.fontSize = newSize;
+                        changed = true;
+                    }
+                }
+            }
+        }
+        // table セルの fontSize も縮小
+        if (n.type === "table") {
+            for (const row of n.rows) {
+                for (const cell of row.cells) {
+                    if (cell.fontSize !== undefined) {
+                        const newSize = Math.max(MIN_FONT_SIZE, Math.round(cell.fontSize * ratio));
+                        if (newSize !== cell.fontSize) {
+                            cell.fontSize = newSize;
+                            changed = true;
+                        }
+                    }
+                }
+            }
+        }
+    });
+    return changed;
+}

package/dist/autoFit/strategies/reduceGapAndPadding.d.ts

@@ -0,0 +1,7 @@
+import type { POMNode } from "../../types.ts";
+/**
+ * gap と padding を縮小する。
+ * @returns 変更があった場合 true
+ */
+export declare function reduceGapAndPadding(node: POMNode, targetRatio: number): boolean;
+//# sourceMappingURL=reduceGapAndPadding.d.ts.map

package/dist/autoFit/strategies/reduceGapAndPadding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduceGapAndPadding.d.ts","sourceRoot":"","sources":["../../../src/autoFit/strategies/reduceGapAndPadding.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAO9C;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,MAAM,GAClB,OAAO,CAuCT"}

package/dist/autoFit/strategies/reduceGapAndPadding.js

@@ -0,0 +1,46 @@
+import { walkPOMTree } from "../walkTree.js";
+const MIN_GAP = 2;
+const MIN_PADDING = 2;
+const MIN_SCALE = 0.25;
+/**
+ * gap と padding を縮小する。
+ * @returns 変更があった場合 true
+ */
+export function reduceGapAndPadding(node, targetRatio) {
+    const ratio = Math.max(targetRatio, MIN_SCALE);
+    let changed = false;
+    walkPOMTree(node, (n) => {
+        // gap の縮小（vstack, hstack）
+        if ((n.type === "vstack" || n.type === "hstack") && n.gap !== undefined) {
+            const newGap = Math.max(MIN_GAP, Math.round(n.gap * ratio));
+            if (newGap !== n.gap) {
+                n.gap = newGap;
+                changed = true;
+            }
+        }
+        // padding の縮小
+        if (n.padding !== undefined) {
+            if (typeof n.padding === "number") {
+                const newPadding = Math.max(MIN_PADDING, Math.round(n.padding * ratio));
+                if (newPadding !== n.padding) {
+                    n.padding = newPadding;
+                    changed = true;
+                }
+            }
+            else {
+                const dirs = ["top", "right", "bottom", "left"];
+                for (const dir of dirs) {
+                    const val = n.padding[dir];
+                    if (val !== undefined) {
+                        const newVal = Math.max(MIN_PADDING, Math.round(val * ratio));
+                        if (newVal !== val) {
+                            n.padding[dir] = newVal;
+                            changed = true;
+                        }
+                    }
+                }
+            }
+        }
+    });
+    return changed;
+}

package/dist/autoFit/strategies/reduceTableRowHeight.d.ts

@@ -0,0 +1,7 @@
+import type { POMNode } from "../../types.ts";
+/**
+ * テーブルの defaultRowHeight と各行の height を縮小する。
+ * @returns 変更があった場合 true
+ */
+export declare function reduceTableRowHeight(node: POMNode, targetRatio: number): boolean;
+//# sourceMappingURL=reduceTableRowHeight.d.ts.map

package/dist/autoFit/strategies/reduceTableRowHeight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduceTableRowHeight.d.ts","sourceRoot":"","sources":["../../../src/autoFit/strategies/reduceTableRowHeight.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9C;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,MAAM,GAClB,OAAO,CAiCT"}

package/dist/autoFit/strategies/reduceTableRowHeight.js

@@ -0,0 +1,32 @@
+import { walkPOMTree } from "../walkTree.js";
+const MIN_ROW_HEIGHT = 20;
+const MIN_SCALE = 0.5;
+/**
+ * テーブルの defaultRowHeight と各行の height を縮小する。
+ * @returns 変更があった場合 true
+ */
+export function reduceTableRowHeight(node, targetRatio) {
+    const ratio = Math.max(targetRatio, MIN_SCALE);
+    let changed = false;
+    walkPOMTree(node, (n) => {
+        if (n.type !== "table")
+            return;
+        if (n.defaultRowHeight !== undefined) {
+            const newHeight = Math.max(MIN_ROW_HEIGHT, Math.round(n.defaultRowHeight * ratio));
+            if (newHeight !== n.defaultRowHeight) {
+                n.defaultRowHeight = newHeight;
+                changed = true;
+            }
+        }
+        for (const row of n.rows) {
+            if (row.height !== undefined) {
+                const newHeight = Math.max(MIN_ROW_HEIGHT, Math.round(row.height * ratio));
+                if (newHeight !== row.height) {
+                    row.height = newHeight;
+                    changed = true;
+                }
+            }
+        }
+    });
+    return changed;
+}

package/dist/autoFit/strategies/uniformScale.d.ts

@@ -0,0 +1,7 @@
+import type { POMNode } from "../../types.ts";
+/**
+ * 全サイズ関連プロパティを一律スケーリングする（フォールバック）。
+ * @returns 変更があった場合 true
+ */
+export declare function uniformScale(node: POMNode, targetRatio: number): boolean;
+//# sourceMappingURL=uniformScale.d.ts.map

package/dist/autoFit/strategies/uniformScale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uniformScale.d.ts","sourceRoot":"","sources":["../../../src/autoFit/strategies/uniformScale.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAS9C;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAyGxE"}

package/dist/autoFit/strategies/uniformScale.js

@@ -0,0 +1,108 @@
+import { walkPOMTree } from "../walkTree.js";
+const MIN_SCALE = 0.5;
+function scaleNumber(value, ratio, min) {
+    return Math.max(min, Math.round(value * ratio));
+}
+/**
+ * 全サイズ関連プロパティを一律スケーリングする（フォールバック）。
+ * @returns 変更があった場合 true
+ */
+export function uniformScale(node, targetRatio) {
+    const ratio = Math.max(targetRatio, MIN_SCALE);
+    let changed = false;
+    walkPOMTree(node, (n) => {
+        // fontSize
+        if ("fontSize" in n && typeof n.fontSize === "number") {
+            const newVal = scaleNumber(n.fontSize, ratio, 8);
+            if (newVal !== n.fontSize) {
+                n.fontSize = newVal;
+                changed = true;
+            }
+        }
+        // gap (vstack/hstack)
+        if ((n.type === "vstack" || n.type === "hstack") && n.gap !== undefined) {
+            const newVal = scaleNumber(n.gap, ratio, 1);
+            if (newVal !== n.gap) {
+                n.gap = newVal;
+                changed = true;
+            }
+        }
+        // padding
+        if (n.padding !== undefined) {
+            if (typeof n.padding === "number") {
+                const newVal = scaleNumber(n.padding, ratio, 1);
+                if (newVal !== n.padding) {
+                    n.padding = newVal;
+                    changed = true;
+                }
+            }
+            else {
+                const dirs = ["top", "right", "bottom", "left"];
+                for (const dir of dirs) {
+                    const val = n.padding[dir];
+                    if (val !== undefined) {
+                        const newVal = scaleNumber(val, ratio, 1);
+                        if (newVal !== val) {
+                            n.padding[dir] = newVal;
+                            changed = true;
+                        }
+                    }
+                }
+            }
+        }
+        // table: defaultRowHeight, row.height
+        if (n.type === "table") {
+            if (n.defaultRowHeight !== undefined) {
+                const newVal = scaleNumber(n.defaultRowHeight, ratio, 16);
+                if (newVal !== n.defaultRowHeight) {
+                    n.defaultRowHeight = newVal;
+                    changed = true;
+                }
+            }
+            for (const row of n.rows) {
+                if (row.height !== undefined) {
+                    const newVal = scaleNumber(row.height, ratio, 16);
+                    if (newVal !== row.height) {
+                        row.height = newVal;
+                        changed = true;
+                    }
+                }
+            }
+        }
+        // ul/ol items fontSize
+        if (n.type === "ul" || n.type === "ol") {
+            for (const item of n.items) {
+                if (item.fontSize !== undefined) {
+                    const newVal = scaleNumber(item.fontSize, ratio, 8);
+                    if (newVal !== item.fontSize) {
+                        item.fontSize = newVal;
+                        changed = true;
+                    }
+                }
+            }
+        }
+        // icon size
+        if (n.type === "icon" && n.size !== undefined) {
+            const newVal = scaleNumber(n.size, ratio, 8);
+            if (newVal !== n.size) {
+                n.size = newVal;
+                changed = true;
+            }
+        }
+        // table cells fontSize
+        if (n.type === "table") {
+            for (const row of n.rows) {
+                for (const cell of row.cells) {
+                    if (cell.fontSize !== undefined) {
+                        const newVal = scaleNumber(cell.fontSize, ratio, 8);
+                        if (newVal !== cell.fontSize) {
+                            cell.fontSize = newVal;
+                            changed = true;
+                        }
+                    }
+                }
+            }
+        }
+    });
+    return changed;
+}

package/dist/autoFit/walkTree.d.ts

@@ -0,0 +1,6 @@
+import type { POMNode } from "../types.ts";
+/**
+ * POMNode ツリーを再帰的に走査し、各ノードに visitor を適用する
+ */
+export declare function walkPOMTree(node: POMNode, visitor: (node: POMNode) => void): void;
+//# sourceMappingURL=walkTree.d.ts.map

package/dist/autoFit/walkTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walkTree.d.ts","sourceRoot":"","sources":["../../src/autoFit/walkTree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAC/B,IAAI,CAeN"}

package/dist/autoFit/walkTree.js

@@ -0,0 +1,18 @@
+/**
+ * POMNode ツリーを再帰的に走査し、各ノードに visitor を適用する
+ */
+export function walkPOMTree(node, visitor) {
+    visitor(node);
+    switch (node.type) {
+        case "box":
+            walkPOMTree(node.children, visitor);
+            break;
+        case "vstack":
+        case "hstack":
+        case "layer":
+            for (const child of node.children) {
+                walkPOMTree(child, visitor);
+            }
+            break;
+    }
+}

package/dist/buildPptx.d.ts

@@ -7,5 +7,6 @@ export declare function buildPptx(xml: string, slideSize: {
 }, options?: {
     master?: SlideMasterOptions;
     textMeasurement?: TextMeasurementMode;
+    autoFit?: boolean;
 }): 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":"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"}
+{"version":3,"file":"buildPptx.d.ts","sourceRoot":"","sources":["../src/buildPptx.ts"],"names":[],"mappings":"AAEA,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;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,wCAyBF"}

package/dist/buildPptx.js

@@ -1,3 +1,4 @@
+import { autoFitSlide } from "./autoFit/autoFit.js";
 import { calcYogaLayout } from "./calcYogaLayout/calcYogaLayout.js";
 import { setTextMeasurementMode, } from "./calcYogaLayout/measureText.js";
 import { parseXml } from "./parseXml/parseXml.js";
@@ -14,7 +15,12 @@ export async function buildPptx(xml, slideSize, options) {
     const nodes = parseXml(xml);
     const positionedPages = [];
     for (const node of nodes) {
-        await calcYogaLayout(node, slideSize);
+        if (options?.autoFit !== false) {
+            await autoFitSlide(node, slideSize);
+        }
+        else {
+            await calcYogaLayout(node, slideSize);
+        }
         const positioned = toPositioned(node);
         positionedPages.push(positioned);
     }

package/dist/calcYogaLayout/calcYogaLayout.js

@@ -87,6 +87,11 @@ async function buildPomWithYogaTree(node, parentYoga, parentNode) {
     const yn = yoga.Node.create();
     node.yogaNode = yn; // 対応する YogaNode をセット
     await applyStyleToYogaNode(node, yn);
+    // HStack/VStack の子要素に flexShrink=1 をデフォルト設定（CSS Flexbox と同じ挙動）
+    // 主軸方向で %サイズ + gap がある場合の overflow を防ぐ
+    if (parentNode?.type === "hstack" || parentNode?.type === "vstack") {
+        yn.setFlexShrink(1);
+    }
     // HStack の子要素で幅が指定されていない場合、デフォルトで均等分割
     // テーブルは setMeasureFunc でカラム幅合計を返すため除外
     if (parentNode?.type === "hstack" &&
@@ -201,6 +206,65 @@ async function applyStyleToYogaNode(node, yn) {
             }
         }
     }
+    // margin
+    if (node.margin !== undefined) {
+        if (typeof node.margin === "number") {
+            yn.setMargin(yoga.EDGE_TOP, node.margin);
+            yn.setMargin(yoga.EDGE_RIGHT, node.margin);
+            yn.setMargin(yoga.EDGE_BOTTOM, node.margin);
+            yn.setMargin(yoga.EDGE_LEFT, node.margin);
+        }
+        else {
+            if (node.margin.top !== undefined) {
+                yn.setMargin(yoga.EDGE_TOP, node.margin.top);
+            }
+            if (node.margin.right !== undefined) {
+                yn.setMargin(yoga.EDGE_RIGHT, node.margin.right);
+            }
+            if (node.margin.bottom !== undefined) {
+                yn.setMargin(yoga.EDGE_BOTTOM, node.margin.bottom);
+            }
+            if (node.margin.left !== undefined) {
+                yn.setMargin(yoga.EDGE_LEFT, node.margin.left);
+            }
+        }
+    }
+    // position
+    if (node.position === "absolute") {
+        yn.setPositionType(yoga.POSITION_TYPE_ABSOLUTE);
+    }
+    if (node.top !== undefined) {
+        yn.setPosition(yoga.EDGE_TOP, node.top);
+    }
+    if (node.right !== undefined) {
+        yn.setPosition(yoga.EDGE_RIGHT, node.right);
+    }
+    if (node.bottom !== undefined) {
+        yn.setPosition(yoga.EDGE_BOTTOM, node.bottom);
+    }
+    if (node.left !== undefined) {
+        yn.setPosition(yoga.EDGE_LEFT, node.left);
+    }
+    // alignSelf
+    if (node.alignSelf !== undefined) {
+        switch (node.alignSelf) {
+            case "auto":
+                yn.setAlignSelf(yoga.ALIGN_AUTO);
+                break;
+            case "start":
+                yn.setAlignSelf(yoga.ALIGN_FLEX_START);
+                break;
+            case "center":
+                yn.setAlignSelf(yoga.ALIGN_CENTER);
+                break;
+            case "end":
+                yn.setAlignSelf(yoga.ALIGN_FLEX_END);
+                break;
+            case "stretch":
+                yn.setAlignSelf(yoga.ALIGN_STRETCH);
+                break;
+        }
+    }
     switch (node.type) {
         case "box":
             // 特になし
@@ -498,4 +562,17 @@ function applyFlexProperties(node, yn, yoga) {
                 break;
         }
     }
+    if (node.flexWrap !== undefined) {
+        switch (node.flexWrap) {
+            case "nowrap":
+                yn.setFlexWrap(yoga.WRAP_NO_WRAP);
+                break;
+            case "wrap":
+                yn.setFlexWrap(yoga.WRAP_WRAP);
+                break;
+            case "wrapReverse":
+                yn.setFlexWrap(yoga.WRAP_WRAP_REVERSE);
+                break;
+        }
+    }
 }