deckjsx 0.1.2 → 0.2.1

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,41 @@ 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`,

package/dist/index.d.mts

@@ -1,5 +1,151 @@
-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";
+import { $ as ImageStyle, A as CssFlexDirection, At as ViewStyle, B as CssJustifyContent, C as CssAlignContent, Ct as TextProps, D as CssBoxSizing, Dt as TextTabStopLength, E as CssAspectRatio, Et as TextTabStopAuthoring, F as CssGridShorthand, Ft as AuthoredTag, G as CssVisibility, H as CssObjectPosition, I as CssGridTemplate, It as SectioningTag, J as DeckOptions, K as DeckJsxIntrinsicElements, L as CssGridTemplateAreas, M as CssGridAutoFlow, Mt as JsxKey, N as CssGridLine, Nt as SourceSpan, O as CssDisplay, Ot as VerticalAlign, P as CssGridPlacement, Pt as AuthoredComponent, Q as ImageProps, R as CssGridTemplateShorthand, S as ContentJsxChild, St as TextJsxChild, T as CssAlignSelf, Tt as TextTabStopAlignment, U as CssOverflow, V as CssJustifySelf, W as CssPosition, X as ImageCropAuthoring, Y as DeckPointLength, Z as ImageCropValue, _ as AuthorNodeProps, _t as StackAxis, a as createElement, at as IntrinsicViewTag, b as BorderStyle, bt as StrokeLineJoin, c as isSlideNode, ct as OutputConfig, d as Slide, dt as SlideContext, et as ImplementedBackendName, f as Text, ft as SlideFactory, g as AuthorNodeMap, gt as StackAlignment, h as AuthorNodeKind, ht as Spacing, i as Fragment, it as IntrinsicTextTag, j as CssFlexWrap, k as CssFlexBasis, kt as ViewProps, l as Image, lt as ShapeProps, m as AuthorNode, mt as SlideStyle, nt as IntrinsicImgProps, o as isAuthorNode, ot as JsxNode, p as View, pt as SlideProps, q as DeckLength, rt as IntrinsicPProps, s as isContentNode, st as LayoutMode, tt as IntrinsicDivProps, u as Shape, ut as ShapeStyle, v as AuthorNodePropsMap, vt as StrokeDashType, w as CssAlignItems, wt as TextStyle, x as ContentAuthorNode, xt as TextFit, y as BackendName, yt as StrokeLineCap, z as CssGridTrack } from "./jsx-runtime-ru5t8S3z.mjs";
 
+//#region src/diagnostics/errors.d.ts
+declare class DeckDiagnosticError extends Error {
+  readonly diagnostics: Diagnostics;
+  constructor(message: string, diagnostics: Diagnostics);
+}
+declare class SemanticGraphDiagnosticError extends DeckDiagnosticError {
+  constructor(diagnostics: Diagnostics);
+}
+//#endregion
+//#region src/diagnostics/format.d.ts
+declare function formatDiagnostic(diagnostic: Diagnostic): string;
+declare function formatDiagnostics(diagnostics: Diagnostics): string;
+//#endregion
+//#region src/diagnostics/index.d.ts
+type DiagnosticSeverity = "error" | "warning";
+type DiagnosticLabel = {
+  readonly message: string;
+  readonly path: string;
+  readonly sourceSpan?: SourceSpan;
+  readonly severity?: "primary" | "secondary";
+};
+type Diagnostic = {
+  readonly severity: DiagnosticSeverity;
+  readonly code: string;
+  readonly title: string;
+  readonly message?: string;
+  readonly labels: readonly DiagnosticLabel[];
+  readonly notes?: readonly string[];
+  readonly help?: readonly string[];
+};
+type Diagnostics = {
+  readonly items: readonly Diagnostic[];
+  readonly hasErrors: boolean;
+  readonly hasWarnings: boolean;
+};
+//#endregion
+//#region src/graph/types.d.ts
+type Brand<T, B extends string> = T & {
+  readonly __brand: B;
+};
+type GraphNodeId = Brand<string, "GraphNodeId">;
+type StyleEntityId = Brand<string, "StyleEntityId">;
+type AssetEntityId = Brand<string, "AssetEntityId">;
+type SemanticNodeKind = "container" | "document" | "image" | "shape" | "slide" | "text" | "textRun";
+type SemanticRole = {
+  readonly kind: "document";
+} | {
+  readonly kind: "slide";
+} | {
+  readonly kind: "genericContainer";
+} | {
+  readonly kind: "sectioning";
+  readonly tag: SectioningTag;
+} | {
+  readonly kind: "figure";
+} | {
+  readonly kind: "paragraph";
+} | {
+  readonly kind: "heading";
+  readonly level: 1 | 2 | 3 | 4 | 5 | 6;
+} | {
+  readonly kind: "image";
+} | {
+  readonly kind: "shape";
+};
+type SemanticOrigin = {
+  readonly kind: "authored" | "implicit";
+  readonly path: string;
+  readonly sourceSpan?: SourceSpan;
+  readonly reason?: "primitive-text-in-container";
+};
+type BaseSemanticNode = {
+  readonly id: GraphNodeId;
+  readonly kind: SemanticNodeKind;
+  readonly origin: SemanticOrigin;
+  readonly authoredTag?: AuthoredTag;
+  readonly authoredComponent?: AuthoredComponent;
+  readonly role?: SemanticRole;
+  readonly key?: JsxKey;
+  readonly styleRef?: StyleEntityId;
+};
+type SemanticDocumentNode = BaseSemanticNode & {
+  readonly kind: "document";
+  readonly children: readonly GraphNodeId[];
+};
+type SemanticSlideNode = BaseSemanticNode & {
+  readonly kind: "slide";
+  readonly name?: string;
+  readonly children: readonly GraphNodeId[];
+};
+type SemanticContainerNode = BaseSemanticNode & {
+  readonly kind: "container";
+  readonly children: readonly GraphNodeId[];
+};
+type SemanticTextNode = BaseSemanticNode & {
+  readonly kind: "text";
+  readonly inlineChildren: readonly GraphNodeId[];
+  readonly implicit?: boolean;
+};
+type SemanticTextRunNode = BaseSemanticNode & {
+  readonly kind: "textRun";
+  readonly text: string;
+};
+type SemanticImageNode = BaseSemanticNode & {
+  readonly kind: "image";
+  readonly assetRef?: AssetEntityId;
+};
+type SemanticShapeNode = BaseSemanticNode & {
+  readonly kind: "shape";
+};
+type SemanticNode = SemanticContainerNode | SemanticDocumentNode | SemanticImageNode | SemanticShapeNode | SemanticSlideNode | SemanticTextNode | SemanticTextRunNode;
+type StyleEntity = {
+  readonly id: StyleEntityId;
+  readonly target: SemanticNodeKind;
+  readonly authored: {
+    readonly style?: unknown;
+    readonly direct?: unknown;
+  };
+  readonly resolved?: unknown;
+};
+type AssetEntity = {
+  readonly id: AssetEntityId;
+  readonly kind: "image";
+  readonly source: {
+    readonly kind: "path";
+    readonly path: string;
+  } | {
+    readonly kind: "data";
+    readonly data: string;
+  };
+  readonly metadata: {
+    readonly mediaType?: string;
+    readonly byteLength?: number;
+    readonly widthPx?: number;
+    readonly heightPx?: number;
+    readonly contentHash?: string;
+  };
+  readonly resolution: "failed" | "resolved" | "unresolved";
+};
+type SemanticAuthorGraph = {
+  readonly documentId: GraphNodeId;
+  readonly nodes: ReadonlyMap<GraphNodeId, SemanticNode>;
+  readonly styles: ReadonlyMap<StyleEntityId, StyleEntity>;
+  readonly assets: ReadonlyMap<AssetEntityId, AssetEntity>;
+};
+//#endregion
 //#region src/ir/index.d.ts
 type PresentationIR = {
   version: "0.1";
@@ -171,6 +317,11 @@ type EdgeStrokeIR = {
 };
 type TextContentIR = {
   text: string;
+  runs?: ReadonlyArray<TextRunIR>;
+};
+type TextRunIR = {
+  text: string;
+  style?: TextStyleIR;
 };
 type TextTabStopIR = {
   positionIn: number;
@@ -238,11 +389,23 @@ type CompileBackend = {
 };
 //#endregion
 //#region src/deck.d.ts
+type CompileMode = "inspect" | "strict";
+type CompileInspectResult = {
+  readonly graph?: SemanticAuthorGraph;
+  readonly diagnostics: Diagnostics;
+};
 declare class Deck {
   #private;
   constructor(options: DeckOptions);
   add(slide: SlideFactory): this;
   render(): PresentationIR;
+  compile(): SemanticAuthorGraph;
+  compile(config: {
+    mode?: "strict";
+  }): SemanticAuthorGraph;
+  compile(config: {
+    mode: "inspect";
+  }): CompileInspectResult;
   output(config: OutputConfig): Promise<void>;
 }
 //#endregion
@@ -263,8 +426,8 @@ declare global {
     interface IntrinsicAttributes {
       key?: JsxKey;
     }
-    interface IntrinsicElements {}
+    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 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 };
+export { type AssetEntity, type AssetEntityId, type AuthorNode, type AuthorNodeKind, type AuthorNodeMap, type AuthorNodeProps, type AuthorNodePropsMap, type BackendArtifact, type BackendName, type BackgroundImageLayerIR, type BackgroundLayerIR, type BaseNodeIR, type BaseSemanticNode, type BorderStyle, type CompileBackend, type CompileInspectResult, type CompileMode, 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, DeckDiagnosticError, type DeckJsxIntrinsicElements, type DeckLength, type DeckOptions, type DeckPointLength, type Diagnostic, type DiagnosticLabel, type DiagnosticSeverity, type Diagnostics, EMU_PER_INCH, type EdgeStrokeIR, type FillIR, Fragment, type FrameIR, type GraphNodeId, 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 SemanticAuthorGraph, type SemanticContainerNode, type SemanticDocumentNode, SemanticGraphDiagnosticError, type SemanticImageNode, type SemanticNode, type SemanticNodeKind, type SemanticOrigin, type SemanticRole, type SemanticShapeNode, type SemanticSlideNode, type SemanticTextNode, type SemanticTextRunNode, 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 SourceSpan, type Spacing, type StackAlignment, type StackAxis, type StrokeDashType, type StrokeIR, type StrokeLineCap, type StrokeLineJoin, type StyleEntity, type StyleEntityId, Text, type TextBulletListIR, type TextContentIR, type TextFit, type TextIR, type TextJsxChild, type TextListIR, type TextNoListIR, type TextNumberListIR, type TextProps, type TextRunIR, type TextStyle, type TextStyleIR, type TextTabStopAlignment, type TextTabStopAuthoring, type TextTabStopIR, type TextTabStopLength, type VerticalAlign, View, type ViewProps, type ViewStyle, createElement, formatDiagnostic, formatDiagnostics, isAuthorNode, isContentNode, isSlideNode, pptxgenjsBackend };