deckjsx 0.5.0 → 0.7.0

package/README.md

@@ -7,18 +7,19 @@ The intended architecture is:
 
 ```text
 JSX
-  -> Presentation IR
-  -> Backend
-       |- PptxGenJS backend
-       `- OOXML direct backend (future)
+  -> Author Tree
+  -> Semantic Author Graph
+  -> Output Projection
+  -> Output Writer
 ```
 
 This project is being designed as a compiler, not as a thin `PptxGenJS` wrapper.
-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 API uses a class-based compiler with callback-based `.slide()`, `.compile()`, `.project()`, and
+`.render()`. Authoring uses typed JSX elements with CSS-like style and class semantics.
 
 The implementation preserves the compiler model with explicit module boundaries for authoring,
-style normalization, layout, IR, backend emission, and Node runtime output.
+semantic graph construction, style resolution, output projection, writer adapters, and runtime
+output.
 
 ## Install
 
@@ -26,64 +27,75 @@ style normalization, layout, IR, backend emission, and Node runtime output.
 npm install deckjsx
 ```
 
-The package currently targets Node.js output and ships a `pptxgenjs` backend.
+The package currently targets PPTX output and ships a temporary `pptxgenjs` writer adapter.
 
 ## Usage
 
 ```tsx
-import { Deck, Slide } from "deckjsx";
+import { Deck } from "deckjsx";
 
 const deck = new Deck({
   layout: { width: 13.333, height: 7.5, unit: "in" },
   meta: { title: "Quarterly Review", author: "deckjsx" },
 });
 
-deck.add(({ composition }) => (
-  <Slide name={`Slide ${composition.slideIndex + 1}`} style={{ backgroundColor: "#F8FAFC" }}>
-    <main
-      style={{
-        x: 0.7,
-        y: 0.5,
-        width: 11.9,
-        height: 6.3,
-        display: "grid",
-        gridTemplateRows: ["0.9in", "1fr", "0.4in"],
-        rowGap: 0.25,
-      }}
-    >
-      <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" }}
-        >
-          {composition.slideIndex + 1} / {composition.totalSlides}
-        </p>
-      </footer>
-    </main>
-  </Slide>
-));
-
-const ir = deck.render();
-await deck.output({ backend: "pptxgenjs", output: "quarterly-review.pptx" });
+deck.slide(
+  { name: "Quarterly Review", style: { backgroundColor: "#F8FAFC" } },
+  ({ composition }) => (
+    <>
+      <main
+        style={{
+          x: 0.7,
+          y: 0.5,
+          width: 11.9,
+          height: 6.3,
+          display: "grid",
+          gridTemplateRows: ["0.9in", "1fr", "0.4in"],
+          rowGap: 0.25,
+        }}
+      >
+        <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 projected document model, and render PPTX
+            files.
+          </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",
+            }}
+          >
+            {composition.slideIndex + 1} / {composition.totalSlides}
+          </p>
+        </footer>
+      </main>
+    </>
+  ),
+);
+
+const project = deck.project();
+await deck.render({ 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.
+Use `deck.compile()` for authoring semantics, `deck.project()` for output-facing inspection, and
+`deck.render({ output })` when writing a PowerPoint file.
 
 ## JSX elements
 
@@ -118,7 +130,13 @@ Image elements compile to images and require either `src` or `data`:
 ```
 
 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.
+nodes. Inline rich text uses `span` inside text-like elements:
+
+```tsx
+<p>
+  Revenue grew <span style={{ color: "#16A34A", fontWeight: 700 }}>12%</span>.
+</p>
+```
 
 ## View Layout Semantics
 

package/dist/adapter-NxGlM8_c.d.mts

@@ -0,0 +1,22 @@
+import { rn as Diagnostics } from "./index-C-LDA3Lj.mjs";
+import { F as OutputFormat, L as ProjectionFormat, s as PptxPackageModel, z as RenderedArtifact } from "./pptx-DaSXvESd.mjs";
+
+//#region src/adapter.d.ts
+type RenderOptions = {
+  readonly output?: string;
+};
+type WriterAdapterResult<TFormat extends OutputFormat = OutputFormat> = {
+  readonly diagnostics: Diagnostics;
+  readonly artifact?: RenderedArtifact<TFormat>;
+};
+type WriterAdapter<TProjection = unknown, TFormat extends OutputFormat = OutputFormat> = {
+  readonly kind: "deckjsx.writerAdapter";
+  readonly name: string;
+  readonly projectionFormat: ProjectionFormat;
+  readonly format: TFormat;
+  readonly options: RenderOptions;
+  render(projection: TProjection): Promise<WriterAdapterResult<TFormat>>;
+};
+declare function pptxgenjs(options?: RenderOptions): WriterAdapter<PptxPackageModel, "pptx">;
+//#endregion
+export { pptxgenjs as i, WriterAdapter as n, WriterAdapterResult as r, RenderOptions as t };