deckjsx 0.1.1 → 0.2.0

package/README.md

@@ -1,6 +1,7 @@
 # deckjsx
 
-`deckjsx` is a TypeScript library for generating presentation files from JSX through a compiler pipeline.
+`deckjsx` is a TypeScript library for generating presentation files from JSX through a compiler
+pipeline.
 
 The intended architecture is:
 
@@ -13,7 +14,8 @@ JSX
 ```
 
 This project is being designed as a compiler, not as a thin `PptxGenJS` wrapper.
-The current API direction is a class-based compiler with callback-based `.add()`, `.render()`, and `.output()`, and JSX authoring centered on a `style` object prop.
+The API uses a class-based compiler with callback-based `.add()`, `.render()`, and `.output()`.
+Authoring uses typed JSX elements with a `style` object prop.
 
 The implementation preserves the compiler model with explicit module boundaries for authoring,
 style normalization, layout, IR, backend emission, and Node runtime output.
@@ -29,7 +31,7 @@ The package currently targets Node.js output and ships a `pptxgenjs` backend.
 ## Usage
 
 ```tsx
-import { Deck, Slide, Text, View } from "deckjsx";
+import { Deck, Slide } from "deckjsx";
 
 const deck = new Deck({
   layout: { width: 13.333, height: 7.5, unit: "in" },
@@ -38,38 +40,41 @@ const deck = new Deck({
 
 deck.add(({ slideIndex, totalSlides }) => (
   <Slide name={`Slide ${slideIndex + 1}`} style={{ backgroundColor: "#F8FAFC" }}>
-    <Text
+    <main
       style={{
         x: 0.7,
         y: 0.5,
-        width: 8.5,
-        height: 0.6,
-        fontSize: 28,
-        fontWeight: 700,
-        color: "#0F172A",
-      }}
-    >
-      Quarterly Review
-    </Text>
-    <View
-      style={{
-        x: 0.7,
-        y: 1.4,
         width: 11.9,
-        height: 4.8,
+        height: 6.3,
         display: "grid",
-        gridTemplateColumns: "1fr 1fr",
-        columnGap: 0.35,
+        gridTemplateRows: ["0.9in", "1fr", "0.4in"],
+        rowGap: 0.25,
       }}
     >
-      <Text style={{ fontSize: 18, color: "#334155", fit: "shrink" }}>
-        Author slides with TSX primitives, inspect the generated IR, and emit PPTX files through the
-        backend boundary.
-      </Text>
-      <Text style={{ fontSize: 18, color: "#334155", fit: "shrink" }}>
-        {slideIndex + 1} / {totalSlides}
-      </Text>
-    </View>
+      <header>
+        <h1 style={{ width: "100%", height: 0.6, fontSize: 28, fontWeight: 700, color: "#0F172A" }}>
+          Quarterly Review
+        </h1>
+      </header>
+
+      <section style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 0.35 }}>
+        <p style={{ fontSize: 18, color: "#334155", fit: "shrink" }}>
+          Author slides with typed JSX, inspect the generated IR, and emit PPTX files through the
+          backend boundary.
+        </p>
+        <figure style={{ backgroundColor: "#E0F2FE", borderRadius: 0.15, padding: 0.25 }}>
+          <img src="chart.png" style={{ width: "100%", height: "100%", fit: "contain" }} />
+        </figure>
+      </section>
+
+      <footer>
+        <p
+          style={{ width: "100%", height: 0.3, fontSize: 11, color: "#64748B", textAlign: "right" }}
+        >
+          {slideIndex + 1} / {totalSlides}
+        </p>
+      </footer>
+    </main>
   </Slide>
 ));
 
@@ -80,6 +85,64 @@ 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.
 
+## JSX elements
+
+`deckjsx` supports both the original capitalized components and a typed HTML-like JSX surface.
+
+View-like elements compile to grouped layout containers:
+
+```tsx
+<main>
+  <header />
+  <section />
+  <article />
+  <aside />
+  <nav />
+  <footer />
+  <figure />
+</main>
+```
+
+Text-like elements compile to text boxes:
+
+```tsx
+<h1>Title</h1>
+<h2>Section</h2>
+<p>Body copy</p>
+```
+
+Image elements compile to images and require either `src` or `data`:
+
+```tsx
+<img src="diagram.png" style={{ width: 4, height: 2.5, fit: "contain" }} />
+```
+
+Primitive string and number children inside view-like elements are normalized to implicit text
+nodes. Inline rich text with `span` is intentionally reserved for a later release.
+
+## 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 ImageProps, A as CssFlexBasis, At as ViewProps, B as CssGridTrack, C as ContentJsxChild, Ct as TextJsxChild, D as CssAspectRatio, Dt as TextTabStopAuthoring, E as CssAlignSelf, Et as TextTabStopAlignment, F as CssGridPlacement, G as CssPosition, H as CssJustifySelf, I as CssGridShorthand, J as DeckLength, K as CssVisibility, L as CssGridTemplate, M as CssFlexWrap, N as CssGridAutoFlow, O as CssBoxSizing, Ot as TextTabStopLength, P as CssGridLine, Q as ImageCropValue, R as CssGridTemplateAreas, S as ContentAuthorNode, St as TextFit, T as CssAlignItems, Tt as TextStyle, U as CssObjectPosition, V as CssJustifyContent, W as CssOverflow, X as DeckPointLength, Y as DeckOptions, Z as ImageCropAuthoring, _ as AuthorNodeMap, _t as StackAlignment, a as Fragment, at as IntrinsicTextTag, b as BackendName, bt as StrokeLineCap, c as Slide, ct as LayoutMode, d as createElement, dt as ShapeStyle, et as ImageStyle, f as isAuthorNode, ft as SlideContext, g as AuthorNodeKind, gt as Spacing, h as AuthorNode, ht as SlideStyle, it as IntrinsicPProps, j as CssFlexDirection, jt as ViewStyle, k as CssDisplay, kt as VerticalAlign, l as Text, lt as OutputConfig, m as isSlideNode, mt as SlideProps, n as JsxKey, nt as IntrinsicDivProps, o as Image, ot as IntrinsicViewTag, p as isContentNode, pt as SlideFactory, q as DeckJsxIntrinsicElements, rt as IntrinsicImgProps, s as Shape, st as JsxNode, tt as ImplementedBackendName, u as View, ut as ShapeProps, v as AuthorNodeProps, vt as StackAxis, w as CssAlignContent, wt as TextProps, x as BorderStyle, xt as StrokeLineJoin, y as AuthorNodePropsMap, yt as StrokeDashType, z as CssGridTemplateShorthand } from "./jsx-runtime-BWV9tOov.mjs";
 
 //#region src/ir/index.d.ts
 type PresentationIR = {
@@ -260,8 +260,11 @@ declare global {
     interface ElementChildrenAttribute {
       children: {};
     }
-    interface IntrinsicElements {}
+    interface IntrinsicAttributes {
+      key?: JsxKey;
+    }
+    interface IntrinsicElements extends DeckJsxIntrinsicElements {}
   }
 }
 //#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 DeckJsxIntrinsicElements, 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 IntrinsicDivProps, type IntrinsicImgProps, type IntrinsicPProps, type IntrinsicTextTag, type IntrinsicViewTag, 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-lqMAdW2X.mjs";
 import { createRequire } from "node:module";
 import { mkdir, writeFile } from "node:fs/promises";
 import { dirname } from "node:path";

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-BWV9tOov.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-lqMAdW2X.mjs";
 import { jsx, jsxs } from "./jsx-runtime.mjs";
 export { Fragment, jsx, jsx as jsxDEV, jsxs };

package/dist/jsx-lqMAdW2X.mjs

@@ -0,0 +1,175 @@
+//#region src/jsx.ts
+const VIEW_INTRINSIC_TAGS = new Set([
+	"article",
+	"aside",
+	"div",
+	"figure",
+	"footer",
+	"header",
+	"main",
+	"nav",
+	"section"
+]);
+const TEXT_INTRINSIC_TAGS = new Set([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"p"
+]);
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+function isViewIntrinsicTag(value) {
+	return VIEW_INTRINSIC_TAGS.has(value);
+}
+function isTextIntrinsicTag(value) {
+	return TEXT_INTRINSIC_TAGS.has(value);
+}
+function isJsxNode(value) {
+	return value === null || value === void 0 || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || isAuthorNode(value) || Array.isArray(value) && value.every((item) => isJsxNode(item));
+}
+function isTextJsxNode(value) {
+	return value === null || value === void 0 || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || Array.isArray(value) && value.every((item) => isTextJsxNode(item));
+}
+function requireJsxNode(value) {
+	if (isJsxNode(value)) return value;
+	throw new Error("JSX children must be deckjsx nodes or primitive text values.");
+}
+function requireTextJsxNode(value) {
+	if (isTextJsxNode(value)) return value;
+	throw new Error("Text-like intrinsic children must be primitive text values.");
+}
+function flattenChildren(input) {
+	if (Array.isArray(input)) return input.flatMap((item) => flattenChildren(item));
+	return [input];
+}
+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 {
+		props: nodeProps,
+		children: rawChildren === void 0 ? [] : flattenChildren(rawChildren)
+	};
+}
+function splitLeafProps(props) {
+	const { children: _rawChildren, ...nodeProps } = props;
+	return nodeProps;
+}
+function collectRawChildren(propsObject, children) {
+	if (children.length === 0) return propsObject.children;
+	if (children.length === 1) return children[0];
+	return children;
+}
+function implicitTextNode(value) {
+	if (typeof value === "string" && value.trim().length === 0) return null;
+	const text = typeof value === "string" && /[\n\r\t]/.test(value) ? value.trim() : String(value);
+	if (text.length === 0) return null;
+	return Text({ children: text });
+}
+function normalizeViewIntrinsicChildren(value) {
+	if (value === void 0) return;
+	return flattenChildren(value).map((child) => {
+		if (typeof child === "string" || typeof child === "number") return implicitTextNode(child);
+		return child;
+	});
+}
+function intrinsicElement(type, propsObject, children) {
+	const rawChildren = collectRawChildren(propsObject, children);
+	const { children: _children, ...nodeProps } = propsObject;
+	if (isViewIntrinsicTag(type)) {
+		const viewChildren = requireJsxNode(rawChildren);
+		return View({
+			...nodeProps,
+			children: normalizeViewIntrinsicChildren(viewChildren)
+		});
+	}
+	if (isTextIntrinsicTag(type)) return Text({
+		...nodeProps,
+		children: requireTextJsxNode(rawChildren)
+	});
+	if (rawChildren !== void 0) throw new Error("<img> is a leaf element and does not accept children.");
+	if (typeof propsObject.src !== "string" && typeof propsObject.data !== "string") throw new Error("<img> requires either src or data.");
+	return Image(nodeProps);
+}
+function createElement(type, props, ...children) {
+	if (typeof type === "string") {
+		if (isViewIntrinsicTag(type) || isTextIntrinsicTag(type) || type === "img") return intrinsicElement(type, isRecord(props) ? props : {}, children);
+		throw new Error(`Intrinsic element is not supported: <${type}>.`);
+	}
+	if (typeof type !== "function") throw new Error("JSX element type must be a function component.");
+	const propsObject = isRecord(props) ? props : {};
+	return type({
+		...propsObject,
+		children: children.length === 0 ? requireJsxNode(propsObject.children) : children.length === 1 ? requireJsxNode(children[0]) : children.map((child) => requireJsxNode(child))
+	});
+}
+function Fragment(props) {
+	return props.children ?? null;
+}
+function Slide(props) {
+	const authored = splitContentProps(props);
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "slide",
+		props: authored.props,
+		children: authored.children
+	};
+}
+function View(props) {
+	const authored = splitContentProps(props);
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "view",
+		props: authored.props,
+		children: authored.children
+	};
+}
+function Text(props) {
+	const authored = splitTextProps(props);
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "text",
+		props: authored.props,
+		children: authored.children
+	};
+}
+function Image(props) {
+	return {
+		$$typeof: "deckjsx.author-node",
+		kind: "image",
+		props: splitLeafProps(props),
+		children: []
+	};
+}
+function 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";
+}
+function isAuthorNode(value) {
+	if (!isRecord(value)) return false;
+	return value.$$typeof === "deckjsx.author-node" && isAuthorNodeKind(value.kind) && isRecord(value.props) && Array.isArray(value.children);
+}
+function isSlideNode(value) {
+	return isAuthorNode(value) && value.kind === "slide";
+}
+function isContentNode(value) {
+	return isAuthorNode(value) && value.kind !== "slide";
+}
+//#endregion
+export { Text as a, isAuthorNode as c, Slide as i, isContentNode as l, Image as n, View as o, Shape as r, createElement as s, Fragment as t, isSlideNode as u };

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

@@ -54,6 +54,8 @@ type TextJsxChild = string | number | boolean | null | undefined | TextJsxChildA
 type ContentAuthorNode = AuthorNode<"view" | "text" | "image" | "shape">;
 interface ContentJsxChildArray extends ReadonlyArray<ContentJsxChild> {}
 type ContentJsxChild = AuthorNode | boolean | null | undefined | ContentJsxChildArray;
+interface ViewIntrinsicJsxChildArray extends ReadonlyArray<ViewIntrinsicJsxChild> {}
+type ViewIntrinsicJsxChild = ContentJsxChild | string | number | ViewIntrinsicJsxChildArray;
 interface JsxNodeArray extends ReadonlyArray<JsxNode> {}
 type JsxNode = AuthorNode | string | number | boolean | null | undefined | JsxNodeArray;
 type BaseAuthorProps = {
@@ -310,9 +312,13 @@ type TextProps = TextNodeProps & {
 };
 type ImageNodeProps = {
   style?: ImageStyle;
-  src?: string;
+} & ImageStyle & ({
+  src: string;
   data?: string;
-} & ImageStyle;
+} | {
+  src?: string;
+  data: string;
+});
 type ImageProps = ImageNodeProps & {
   children?: never;
 };
@@ -339,12 +345,37 @@ 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];
+type IntrinsicDivProps = ViewNodeProps & {
+  children?: ViewIntrinsicJsxChild;
+};
+type IntrinsicPProps = TextNodeProps & {
+  children?: TextJsxChild;
+};
+type IntrinsicImgProps = ImageProps;
+type IntrinsicViewTag = "article" | "aside" | "div" | "figure" | "footer" | "header" | "main" | "nav" | "section";
+type IntrinsicTextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+type DeckJsxIntrinsicElements = {
+  img: IntrinsicImgProps;
+} & { [Tag in IntrinsicViewTag]: IntrinsicDivProps } & { [Tag in IntrinsicTextTag]: IntrinsicPProps };
 //#endregion
 //#region src/jsx.d.ts
 type ComponentProps = {
@@ -359,6 +390,9 @@ type ElementChildArgs<P> = P extends {
 declare function createElement<P extends {
   children?: unknown;
 }, R extends JsxNode>(type: (props: P) => R, props: (Omit<P, "children"> & Partial<Pick<P, "children">>) | null, ...children: ElementChildArgs<P>): R;
+declare function createElement(type: IntrinsicViewTag, props: (Omit<IntrinsicDivProps, "children"> & Partial<Pick<IntrinsicDivProps, "children">>) | null, ...children: ElementChildArgs<IntrinsicDivProps>): AuthorNode<"view">;
+declare function createElement(type: IntrinsicTextTag, props: (Omit<IntrinsicPProps, "children"> & Partial<Pick<IntrinsicPProps, "children">>) | null, ...children: ElementChildArgs<IntrinsicPProps>): AuthorNode<"text">;
+declare function createElement(type: "img", props: IntrinsicImgProps): AuthorNode<"image">;
 declare function createElement(type: string, props: ComponentProps | null): never;
 declare function Fragment(props: {
   children?: ContentJsxChild;
@@ -372,4 +406,27 @@ 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: IntrinsicViewTag, props: JsxProps<IntrinsicDivProps> | null, key?: JsxKey): JsxNode;
+declare function jsx(type: IntrinsicTextTag, props: JsxProps<IntrinsicPProps> | null, key?: JsxKey): JsxNode;
+declare function jsx(type: "img", props: IntrinsicImgProps, key?: JsxKey): JsxNode;
+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 extends DeckJsxIntrinsicElements {}
+}
+//#endregion
+export { ImageProps as $, CssFlexBasis as A, ViewProps as At, CssGridTrack as B, ContentJsxChild as C, TextJsxChild as Ct, CssAspectRatio as D, TextTabStopAuthoring as Dt, CssAlignSelf as E, TextTabStopAlignment as Et, CssGridPlacement as F, CssPosition as G, CssJustifySelf as H, CssGridShorthand as I, DeckLength as J, CssVisibility as K, CssGridTemplate as L, CssFlexWrap as M, CssGridAutoFlow as N, CssBoxSizing as O, TextTabStopLength as Ot, CssGridLine as P, ImageCropValue as Q, CssGridTemplateAreas as R, ContentAuthorNode as S, TextFit as St, CssAlignItems as T, TextStyle as Tt, CssObjectPosition as U, CssJustifyContent as V, CssOverflow as W, DeckPointLength as X, DeckOptions as Y, ImageCropAuthoring as Z, AuthorNodeMap as _, StackAlignment as _t, Fragment as a, IntrinsicTextTag as at, BackendName as b, StrokeLineCap as bt, Slide as c, LayoutMode as ct, createElement as d, ShapeStyle as dt, ImageStyle as et, isAuthorNode as f, SlideContext as ft, AuthorNodeKind as g, Spacing as gt, AuthorNode as h, SlideStyle as ht, jsxs as i, IntrinsicPProps as it, CssFlexDirection as j, ViewStyle as jt, CssDisplay as k, VerticalAlign as kt, Text as l, OutputConfig as lt, isSlideNode as m, SlideProps as mt, JsxKey as n, IntrinsicDivProps as nt, Image as o, IntrinsicViewTag as ot, isContentNode as p, SlideFactory as pt, DeckJsxIntrinsicElements as q, jsx as r, IntrinsicImgProps as rt, Shape as s, JsxNode as st, JSX as t, ImplementedBackendName as tt, View as u, ShapeProps as ut, AuthorNodeProps as v, StackAxis as vt, CssAlignContent as w, TextProps as wt, BorderStyle as x, StrokeLineJoin as xt, AuthorNodePropsMap as y, StrokeDashType 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-BWV9tOov.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-lqMAdW2X.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.2.0",
   "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": {

package/dist/jsx-5H4Zgl79.mjs

@@ -1,66 +0,0 @@
-//#region src/jsx.ts
-function isRecord(value) {
-	return typeof value === "object" && value !== null;
-}
-function isJsxNode(value) {
-	return value === null || value === void 0 || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || isAuthorNode(value) || Array.isArray(value) && value.every((item) => isJsxNode(item));
-}
-function requireJsxNode(value) {
-	if (isJsxNode(value)) return value;
-	throw new Error("JSX children must be deckjsx nodes or primitive text values.");
-}
-function flattenChildren(input) {
-	if (Array.isArray(input)) return input.flatMap((item) => flattenChildren(item));
-	return [input];
-}
-function authorNode(kind, props) {
-	const { children: rawChildren, ...nodeProps } = props;
-	return {
-		$$typeof: "deckjsx.author-node",
-		kind,
-		props: nodeProps,
-		children: rawChildren === void 0 ? [] : flattenChildren(rawChildren)
-	};
-}
-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.");
-	const propsObject = isRecord(props) ? props : {};
-	return type({
-		...propsObject,
-		children: children.length === 0 ? requireJsxNode(propsObject.children) : children.length === 1 ? requireJsxNode(children[0]) : children.map((child) => requireJsxNode(child))
-	});
-}
-function Fragment(props) {
-	return props.children ?? null;
-}
-function Slide(props) {
-	return authorNode("slide", props);
-}
-function View(props) {
-	return authorNode("view", props);
-}
-function Text(props) {
-	return authorNode("text", props);
-}
-function Image(props) {
-	return authorNode("image", props);
-}
-function Shape(props) {
-	return authorNode("shape", props);
-}
-function isAuthorNodeKind(value) {
-	return value === "slide" || value === "view" || value === "text" || value === "image" || value === "shape";
-}
-function isAuthorNode(value) {
-	if (!isRecord(value)) return false;
-	return value.$$typeof === "deckjsx.author-node" && isAuthorNodeKind(value.kind) && isRecord(value.props) && Array.isArray(value.children);
-}
-function isSlideNode(value) {
-	return isAuthorNode(value) && value.kind === "slide";
-}
-function isContentNode(value) {
-	return isAuthorNode(value) && value.kind !== "slide";
-}
-//#endregion
-export { Text as a, isAuthorNode as c, Slide as i, isContentNode as l, Image as n, View as o, Shape as r, createElement as s, Fragment as t, isSlideNode as u };