deckjsx 0.1.1 → 0.1.2

package/README.md

@@ -80,6 +80,29 @@ await deck.output({ backend: "pptxgenjs", output: "quarterly-review.pptx" });
 Use `deck.render()` for tests, snapshots, and backend-independent inspection. Use
 `deck.output({ backend: "pptxgenjs", output })` when writing a PowerPoint file.
 
+## View Layout Semantics
+
+`View` is a containing block for its children. Child `x`, `y`, `left`, `top`, `right`,
+`bottom`, `width`, and `height` values are resolved relative to the parent `View`, not
+the slide, so authors can build panels with local coordinates. Percentage lengths use
+the parent frame as their reference.
+
+```tsx
+<View style={{ x: 1, y: 1, width: 6, height: 3 }}>
+  <Text style={{ x: "10%", y: "20%", width: "50%", height: "25%" }}>local percent frame</Text>
+  <Text style={{ left: "55%", top: "10%", right: "10%", bottom: "60%" }}>inset frame</Text>
+</View>
+```
+
+For `display: "flex"` and `display: "grid"`, normal-flow children are laid out inside
+the content frame after padding. `gap`, `flexGrow`, percentage widths, `fr` grid tracks,
+and simple `gridColumn` / `gridRow` spans resolve to concrete slide coordinates during
+rendering. Absolutely positioned children inside flex or grid containers also use the
+container content frame, including padding, as their containing block.
+
+Use direct slide children when you want slide-global absolute placement. Use children
+inside a `View` when you want a local, web-like layout region.
+
 ## Development
 
 ```bash

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { $ as OutputConfig, A as CssGridLine, B as CssOverflow, C as CssAspectRatio, D as CssFlexDirection, E as CssFlexBasis, F as CssGridTemplateShorthand, G as DeckPointLength, H as CssVisibility, I as CssGridTrack, J as ImageProps, K as ImageCropAuthoring, L as CssJustifyContent, M as CssGridShorthand, N as CssGridTemplate, O as CssFlexWrap, P as CssGridTemplateAreas, Q as LayoutMode, R as CssJustifySelf, S as CssAlignSelf, T as CssDisplay, U as DeckLength, V as CssPosition, W as DeckOptions, X as ImplementedBackendName, Y as ImageStyle, Z as JsxNode, _ as BorderStyle, _t as TextTabStopAuthoring, a as Text, at as SlideStyle, b as CssAlignContent, bt as ViewProps, c as isAuthorNode, ct as StackAxis, d as AuthorNode, dt as StrokeLineJoin, et as ShapeProps, f as AuthorNodeKind, ft as TextFit, g as BackendName, gt as TextTabStopAlignment, h as AuthorNodePropsMap, ht as TextStyle, i as Slide, it as SlideProps, j as CssGridPlacement, k as CssGridAutoFlow, l as isContentNode, lt as StrokeDashType, m as AuthorNodeProps, mt as TextProps, n as Image, nt as SlideContext, o as View, ot as Spacing, p as AuthorNodeMap, pt as TextJsxChild, q as ImageCropValue, r as Shape, rt as SlideFactory, s as createElement, st as StackAlignment, t as Fragment, tt as ShapeStyle, u as isSlideNode, ut as StrokeLineCap, v as ContentAuthorNode, vt as TextTabStopLength, w as CssBoxSizing, x as CssAlignItems, xt as ViewStyle, y as ContentJsxChild, yt as VerticalAlign, z as CssObjectPosition } from "./jsx-CrQPDEqU.mjs";
+import { $ as ImageStyle, A as CssFlexBasis, B as CssGridTrack, C as ContentJsxChild, Ct as VerticalAlign, D as CssAspectRatio, E as CssAlignSelf, F as CssGridPlacement, G as CssPosition, H as CssJustifySelf, I as CssGridShorthand, J as DeckOptions, K as CssVisibility, L as CssGridTemplate, M as CssFlexWrap, N as CssGridAutoFlow, O as CssBoxSizing, P as CssGridLine, Q as ImageProps, R as CssGridTemplateAreas, S as ContentAuthorNode, St as TextTabStopLength, T as CssAlignItems, Tt as ViewStyle, U as CssObjectPosition, V as CssJustifyContent, W as CssOverflow, X as ImageCropAuthoring, Y as DeckPointLength, Z as ImageCropValue, _ as AuthorNodeMap, _t as TextJsxChild, a as Fragment, at as ShapeStyle, b as BackendName, bt as TextTabStopAlignment, c as Slide, ct as SlideProps, d as createElement, dt as StackAlignment, et as ImplementedBackendName, f as isAuthorNode, ft as StackAxis, g as AuthorNodeKind, gt as TextFit, h as AuthorNode, ht as StrokeLineJoin, it as ShapeProps, j as CssFlexDirection, k as CssDisplay, l as Text, lt as SlideStyle, m as isSlideNode, mt as StrokeLineCap, n as JsxKey, nt as LayoutMode, o as Image, ot as SlideContext, p as isContentNode, pt as StrokeDashType, q as DeckLength, rt as OutputConfig, s as Shape, st as SlideFactory, tt as JsxNode, u as View, ut as Spacing, v as AuthorNodeProps, vt as TextProps, w as CssAlignContent, wt as ViewProps, x as BorderStyle, xt as TextTabStopAuthoring, y as AuthorNodePropsMap, yt as TextStyle, z as CssGridTemplateShorthand } from "./jsx-runtime-BfZK5259.mjs";
 
 //#region src/ir/index.d.ts
 type PresentationIR = {
@@ -260,8 +260,11 @@ declare global {
     interface ElementChildrenAttribute {
       children: {};
     }
+    interface IntrinsicAttributes {
+      key?: JsxKey;
+    }
     interface IntrinsicElements {}
   }
 }
 //#endregion
-export { type AuthorNode, type AuthorNodeKind, type AuthorNodeMap, type AuthorNodeProps, type AuthorNodePropsMap, type BackendArtifact, type BackendName, type BackgroundImageLayerIR, type BackgroundLayerIR, type BaseNodeIR, type BorderStyle, type CompileBackend, type ContentAuthorNode, type ContentJsxChild, type CssAlignContent, type CssAlignItems, type CssAlignSelf, type CssAspectRatio, type CssBoxSizing, type CssDisplay, type CssFlexBasis, type CssFlexDirection, type CssFlexWrap, type CssGridAutoFlow, type CssGridLine, type CssGridPlacement, type CssGridShorthand, type CssGridTemplate, type CssGridTemplateAreas, type CssGridTemplateShorthand, type CssGridTrack, type CssJustifyContent, type CssJustifySelf, type CssObjectPosition, type CssOverflow, type CssPosition, type CssVisibility, Deck, type DeckLength, type DeckOptions, type DeckPointLength, EMU_PER_INCH, type EdgeStrokeIR, type FillIR, Fragment, type FrameIR, type GroupIR, type HyperlinkIR, Image, type ImageCropAuthoring, type ImageCropIR, type ImageCropValue, type ImageIR, type ImageProps, type ImageSourceIR, type ImageStyle, type ImplementedBackendName, type JsxNode, type LayoutMode, type LinearGradientFillIR, type LinearGradientStopIR, type NodeIR, type ObjectPositionIR, type OutputConfig, POINTS_PER_INCH, type PresentationIR, type RadialGradientFillIR, type ShadowIR, Shape, type ShapeIR, type ShapeProps, type ShapeStyle, type SizeIR, Slide, type SlideContext, type SlideFactory, type SlideIR, type SlideProps, type SlideStyle, type SolidFillIR, type Spacing, type StackAlignment, type StackAxis, type StrokeDashType, type StrokeIR, type StrokeLineCap, type StrokeLineJoin, Text, type TextBulletListIR, type TextContentIR, type TextFit, type TextIR, type TextJsxChild, type TextListIR, type TextNoListIR, type TextNumberListIR, type TextProps, type TextStyle, type TextStyleIR, type TextTabStopAlignment, type TextTabStopAuthoring, type TextTabStopIR, type TextTabStopLength, type VerticalAlign, View, type ViewProps, type ViewStyle, createElement, isAuthorNode, isContentNode, isSlideNode, pptxgenjsBackend };
+export { type AuthorNode, type AuthorNodeKind, type AuthorNodeMap, type AuthorNodeProps, type AuthorNodePropsMap, type BackendArtifact, type BackendName, type BackgroundImageLayerIR, type BackgroundLayerIR, type BaseNodeIR, type BorderStyle, type CompileBackend, type ContentAuthorNode, type ContentJsxChild, type CssAlignContent, type CssAlignItems, type CssAlignSelf, type CssAspectRatio, type CssBoxSizing, type CssDisplay, type CssFlexBasis, type CssFlexDirection, type CssFlexWrap, type CssGridAutoFlow, type CssGridLine, type CssGridPlacement, type CssGridShorthand, type CssGridTemplate, type CssGridTemplateAreas, type CssGridTemplateShorthand, type CssGridTrack, type CssJustifyContent, type CssJustifySelf, type CssObjectPosition, type CssOverflow, type CssPosition, type CssVisibility, Deck, type DeckLength, type DeckOptions, type DeckPointLength, EMU_PER_INCH, type EdgeStrokeIR, type FillIR, Fragment, type FrameIR, type GroupIR, type HyperlinkIR, Image, type ImageCropAuthoring, type ImageCropIR, type ImageCropValue, type ImageIR, type ImageProps, type ImageSourceIR, type ImageStyle, type ImplementedBackendName, type JsxKey, type JsxNode, type LayoutMode, type LinearGradientFillIR, type LinearGradientStopIR, type NodeIR, type ObjectPositionIR, type OutputConfig, POINTS_PER_INCH, type PresentationIR, type RadialGradientFillIR, type ShadowIR, Shape, type ShapeIR, type ShapeProps, type ShapeStyle, type SizeIR, Slide, type SlideContext, type SlideFactory, type SlideIR, type SlideProps, type SlideStyle, type SolidFillIR, type Spacing, type StackAlignment, type StackAxis, type StrokeDashType, type StrokeIR, type StrokeLineCap, type StrokeLineJoin, Text, type TextBulletListIR, type TextContentIR, type TextFit, type TextIR, type TextJsxChild, type TextListIR, type TextNoListIR, type TextNumberListIR, type TextProps, type TextStyle, type TextStyleIR, type TextTabStopAlignment, type TextTabStopAuthoring, type TextTabStopIR, type TextTabStopLength, type VerticalAlign, View, type ViewProps, type ViewStyle, createElement, isAuthorNode, isContentNode, isSlideNode, pptxgenjsBackend };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as Text, c as isAuthorNode, i as Slide, l as isContentNode, n as Image, o as View, r as Shape, s as createElement, t as Fragment, u as isSlideNode } from "./jsx-5H4Zgl79.mjs";
+import { a as Text, c as isAuthorNode, i as Slide, l as isContentNode, n as Image, o as View, r as Shape, s as createElement, t as Fragment, u as isSlideNode } from "./jsx-Cj45FgcC.mjs";
 import { createRequire } from "node:module";
 import { mkdir, writeFile } from "node:fs/promises";
 import { dirname } from "node:path";

package/dist/{jsx-5H4Zgl79.mjs → jsx-Cj45FgcC.mjs}

@@ -13,15 +13,24 @@ function flattenChildren(input) {
 	if (Array.isArray(input)) return input.flatMap((item) => flattenChildren(item));
 	return [input];
 }
-function authorNode(kind, props) {
+function splitContentProps(props) {
+	const { children: rawChildren, ...nodeProps } = props;
+	return {
+		props: nodeProps,
+		children: rawChildren === void 0 ? [] : flattenChildren(rawChildren)
+	};
+}
+function splitTextProps(props) {
 	const { children: rawChildren, ...nodeProps } = props;
 	return {
-		$$typeof: "deckjsx.author-node",
-		kind,
 		props: nodeProps,
 		children: rawChildren === void 0 ? [] : flattenChildren(rawChildren)
 	};
 }
+function splitLeafProps(props) {
+	const { children: _rawChildren, ...nodeProps } = props;
+	return nodeProps;
+}
 function createElement(type, props, ...children) {
 	if (typeof type === "string") throw new Error(`Intrinsic elements are not supported: <${type}>.`);
 	if (typeof type !== "function") throw new Error("JSX element type must be a function component.");
@@ -35,19 +44,47 @@ function Fragment(props) {
 	return props.children ?? null;
 }
 function Slide(props) {
-	return authorNode("slide", props);
+	const authored = splitContentProps(props);
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "slide",
+		props: authored.props,
+		children: authored.children
+	};
 }
 function View(props) {
-	return authorNode("view", props);
+	const authored = splitContentProps(props);
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "view",
+		props: authored.props,
+		children: authored.children
+	};
 }
 function Text(props) {
-	return authorNode("text", props);
+	const authored = splitTextProps(props);
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "text",
+		props: authored.props,
+		children: authored.children
+	};
 }
 function Image(props) {
-	return authorNode("image", props);
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "image",
+		props: splitLeafProps(props),
+		children: []
+	};
 }
 function Shape(props) {
-	return authorNode("shape", props);
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "shape",
+		props: splitLeafProps(props),
+		children: []
+	};
 }
 function isAuthorNodeKind(value) {
 	return value === "slide" || value === "view" || value === "text" || value === "image" || value === "shape";

package/dist/jsx-dev-runtime.d.mts

@@ -1,3 +1,2 @@
-import { t as Fragment } from "./jsx-CrQPDEqU.mjs";
-import { JSX, jsx, jsxs } from "./jsx-runtime.mjs";
+import { a as Fragment, i as jsxs, r as jsx, t as JSX } from "./jsx-runtime-BfZK5259.mjs";
 export { Fragment, type JSX, jsx, jsx as jsxDEV, jsxs };

package/dist/jsx-dev-runtime.mjs

@@ -1,3 +1,3 @@
-import { t as Fragment } from "./jsx-5H4Zgl79.mjs";
+import { t as Fragment } from "./jsx-Cj45FgcC.mjs";
 import { jsx, jsxs } from "./jsx-runtime.mjs";
 export { Fragment, jsx, jsx as jsxDEV, jsxs };

package/dist/{jsx-CrQPDEqU.d.mts → jsx-runtime-BfZK5259.d.mts}

@@ -339,12 +339,25 @@ type AuthorNodePropsMap = {
   shape: ShapeNodeProps;
 };
 type AuthorNodeProps<K extends AuthorNodeKind> = AuthorNodePropsMap[K];
-type AuthorNode<K extends AuthorNodeKind = AuthorNodeKind> = { [NodeKind in K]: {
+type BaseAuthorNode<K extends AuthorNodeKind, P, C> = {
   readonly $$typeof: "deckjsx.author-node";
-  readonly kind: NodeKind;
-  readonly props: AuthorNodeProps<NodeKind>;
-  readonly children: ReadonlyArray<JsxNode>;
-} }[K];
+  readonly kind: K;
+  readonly props: P;
+  readonly children: ReadonlyArray<C>;
+};
+interface SlideAuthorNode extends BaseAuthorNode<"slide", SlideNodeProps, ContentJsxChild> {}
+interface ViewAuthorNode extends BaseAuthorNode<"view", ViewNodeProps, ContentJsxChild> {}
+interface TextAuthorNode extends BaseAuthorNode<"text", TextNodeProps, TextJsxChild> {}
+interface ImageAuthorNode extends BaseAuthorNode<"image", ImageNodeProps, never> {}
+interface ShapeAuthorNode extends BaseAuthorNode<"shape", ShapeNodeProps, never> {}
+type AuthorNodeByKind = {
+  slide: SlideAuthorNode;
+  view: ViewAuthorNode;
+  text: TextAuthorNode;
+  image: ImageAuthorNode;
+  shape: ShapeAuthorNode;
+};
+type AuthorNode<K extends AuthorNodeKind = AuthorNodeKind> = AuthorNodeByKind[K];
 //#endregion
 //#region src/jsx.d.ts
 type ComponentProps = {
@@ -372,4 +385,24 @@ declare function isAuthorNode(value: unknown): value is AuthorNode;
 declare function isSlideNode(value: unknown): value is AuthorNode<"slide">;
 declare function isContentNode(value: unknown): value is ContentAuthorNode;
 //#endregion
-export { OutputConfig as $, CssGridLine as A, CssOverflow as B, CssAspectRatio as C, CssFlexDirection as D, CssFlexBasis as E, CssGridTemplateShorthand as F, DeckPointLength as G, CssVisibility as H, CssGridTrack as I, ImageProps as J, ImageCropAuthoring as K, CssJustifyContent as L, CssGridShorthand as M, CssGridTemplate as N, CssFlexWrap as O, CssGridTemplateAreas as P, LayoutMode as Q, CssJustifySelf as R, CssAlignSelf as S, CssDisplay as T, DeckLength as U, CssPosition as V, DeckOptions as W, ImplementedBackendName as X, ImageStyle as Y, JsxNode as Z, BorderStyle as _, TextTabStopAuthoring as _t, Text as a, SlideStyle as at, CssAlignContent as b, ViewProps as bt, isAuthorNode as c, StackAxis as ct, AuthorNode as d, StrokeLineJoin as dt, ShapeProps as et, AuthorNodeKind as f, TextFit as ft, BackendName as g, TextTabStopAlignment as gt, AuthorNodePropsMap as h, TextStyle as ht, Slide as i, SlideProps as it, CssGridPlacement as j, CssGridAutoFlow as k, isContentNode as l, StrokeDashType as lt, AuthorNodeProps as m, TextProps as mt, Image as n, SlideContext as nt, View as o, Spacing as ot, AuthorNodeMap as p, TextJsxChild as pt, ImageCropValue as q, Shape as r, SlideFactory as rt, createElement as s, StackAlignment as st, Fragment as t, ShapeStyle as tt, isSlideNode as u, StrokeLineCap as ut, ContentAuthorNode as v, TextTabStopLength as vt, CssBoxSizing as w, CssAlignItems as x, ViewStyle as xt, ContentJsxChild as y, VerticalAlign as yt, CssObjectPosition as z };
+//#region src/jsx-runtime.d.ts
+type JsxKey = string | number | bigint;
+type JsxComponent<P, R extends JsxNode> = (props: P) => R;
+type JsxProps<P> = P extends {
+  children?: unknown;
+} ? Omit<P, "children"> & Partial<Pick<P, "children">> : P;
+declare function jsx<P, R extends JsxNode>(type: JsxComponent<P, R>, props: JsxProps<P> | null, key?: JsxKey): R;
+declare function jsx(type: string, props: Record<string, unknown> | null, key?: JsxKey): never;
+declare const jsxs: typeof jsx;
+declare namespace JSX {
+  type Element = ContentJsxChild;
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+  interface IntrinsicAttributes {
+    key?: JsxKey;
+  }
+  interface IntrinsicElements {}
+}
+//#endregion
+export { ImageStyle as $, CssFlexBasis as A, CssGridTrack as B, ContentJsxChild as C, VerticalAlign as Ct, CssAspectRatio as D, CssAlignSelf as E, CssGridPlacement as F, CssPosition as G, CssJustifySelf as H, CssGridShorthand as I, DeckOptions as J, CssVisibility as K, CssGridTemplate as L, CssFlexWrap as M, CssGridAutoFlow as N, CssBoxSizing as O, CssGridLine as P, ImageProps as Q, CssGridTemplateAreas as R, ContentAuthorNode as S, TextTabStopLength as St, CssAlignItems as T, ViewStyle as Tt, CssObjectPosition as U, CssJustifyContent as V, CssOverflow as W, ImageCropAuthoring as X, DeckPointLength as Y, ImageCropValue as Z, AuthorNodeMap as _, TextJsxChild as _t, Fragment as a, ShapeStyle as at, BackendName as b, TextTabStopAlignment as bt, Slide as c, SlideProps as ct, createElement as d, StackAlignment as dt, ImplementedBackendName as et, isAuthorNode as f, StackAxis as ft, AuthorNodeKind as g, TextFit as gt, AuthorNode as h, StrokeLineJoin as ht, jsxs as i, ShapeProps as it, CssFlexDirection as j, CssDisplay as k, Text as l, SlideStyle as lt, isSlideNode as m, StrokeLineCap as mt, JsxKey as n, LayoutMode as nt, Image as o, SlideContext as ot, isContentNode as p, StrokeDashType as pt, DeckLength as q, jsx as r, OutputConfig as rt, Shape as s, SlideFactory as st, JSX as t, JsxNode as tt, View as u, Spacing as ut, AuthorNodeProps as v, TextProps as vt, CssAlignContent as w, ViewProps as wt, BorderStyle as x, TextTabStopAuthoring as xt, AuthorNodePropsMap as y, TextStyle as yt, CssGridTemplateShorthand as z };

package/dist/jsx-runtime.d.mts

@@ -1,19 +1,2 @@
-import { Z as JsxNode, t as Fragment, y as ContentJsxChild } from "./jsx-CrQPDEqU.mjs";
-
-//#region src/jsx-runtime.d.ts
-type JsxComponent<P, R extends JsxNode> = (props: P) => R;
-type JsxProps<P> = P extends {
-  children?: unknown;
-} ? Omit<P, "children"> & Partial<Pick<P, "children">> : P;
-declare function jsx<P, R extends JsxNode>(type: JsxComponent<P, R>, props: JsxProps<P> | null, key?: string): R;
-declare function jsx(type: string, props: Record<string, unknown> | null, key?: string): never;
-declare const jsxs: typeof jsx;
-declare namespace JSX {
-  type Element = ContentJsxChild;
-  interface ElementChildrenAttribute {
-    children: {};
-  }
-  interface IntrinsicElements {}
-}
-//#endregion
-export { Fragment, JSX, jsx, jsxs };
+import { a as Fragment, i as jsxs, n as JsxKey, r as jsx, t as JSX } from "./jsx-runtime-BfZK5259.mjs";
+export { Fragment, JSX, JsxKey, jsx, jsxs };

package/dist/jsx-runtime.mjs

@@ -1,4 +1,4 @@
-import { s as createElement, t as Fragment } from "./jsx-5H4Zgl79.mjs";
+import { s as createElement, t as Fragment } from "./jsx-Cj45FgcC.mjs";
 //#region src/jsx-runtime.ts
 function jsx(type, props, _key) {
 	return createElement(type, props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckjsx",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Generate PowerPoint presentations from TSX/JSX through a compiler pipeline.",
   "license": "MIT",
   "author": "deckjsx contributors",
@@ -27,6 +27,7 @@
     "dev": "vp pack --watch",
     "test": "vp test",
     "check": "vp check",
+    "verify:render": "bun run scripts/verify-render.ts",
     "prepublishOnly": "vp run build"
   },
   "dependencies": {