omegon 0.6.0

package/extensions/render/composition/render.mjs

@@ -0,0 +1,246 @@
+#!/usr/bin/env node
+/**
+ * render.mjs — CLI entry point for the composition render pipeline.
+ * Browser-free React → still/GIF/MP4 using Satori + resvg + gifenc.
+ *
+ * Usage:
+ *   node render.mjs --composition <path> --mode still|gif|mp4
+ *     [--frame <n>] [--width <px>] [--height <px>] [--fps <n>]
+ *     [--duration <frames>] [--output <path>] [--props <json>]
+ *
+ * All output is written to stdout as JSON: {ok:true,...} or {ok:false,error}.
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, readdirSync } from 'node:fs';
+import { resolve, dirname, extname, basename } from 'node:path';
+import { tmpdir } from 'node:os';
+import { spawnSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+// ---------------------------------------------------------------------------
+// Arg parsing
+// ---------------------------------------------------------------------------
+
+function parseArgs(argv) {
+  const args = {};
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg.startsWith('--')) {
+      const key = arg.slice(2);
+      const val = argv[i + 1] && !argv[i + 1].startsWith('--') ? argv[++i] : 'true';
+      args[key] = val;
+    }
+  }
+  return args;
+}
+
+const args = parseArgs(process.argv.slice(2));
+
+const compositionPath = args.composition;
+const mode           = (args.mode || 'still').toLowerCase();
+const startFrame     = parseInt(args.frame    ?? '0',   10);
+const width          = parseInt(args.width    ?? '1920', 10);
+const height         = parseInt(args.height   ?? '1080', 10);
+const fps            = parseInt(args.fps      ?? '30',  10);
+const duration       = parseInt(args.duration ?? '1',   10); // frames
+const outputPath     = args.output ?? './out.png';
+let   userProps      = {};
+
+try {
+  if (args.props) userProps = JSON.parse(args.props);
+} catch {
+  fail('--props must be valid JSON');
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function ok(extra) {
+  console.log(JSON.stringify({ ok: true, ...extra }));
+  process.exit(0);
+}
+
+function fail(error) {
+  console.log(JSON.stringify({ ok: false, error: String(error) }));
+  process.exit(1);
+}
+
+if (!compositionPath) fail('--composition is required');
+
+// ---------------------------------------------------------------------------
+// Font loading
+// ---------------------------------------------------------------------------
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname  = dirname(__filename);
+const fontsDir   = resolve(__dirname, 'fonts');
+
+function loadFonts() {
+  const fonts = [];
+  let entries;
+  try {
+    entries = readdirSync(fontsDir);
+  } catch {
+    return fonts; // no fonts dir — satori will use system defaults
+  }
+
+  for (const file of entries) {
+    if (extname(file).toLowerCase() !== '.ttf') continue;
+    const namePart = basename(file, '.ttf'); // e.g. "Inter-Bold"
+    const [family, weightStr] = namePart.split('-');
+    const weightMap = {
+      thin:        100, extralight: 200, light: 300,
+      regular:     400, medium:     500, semibold: 600,
+      bold:        700, extrabold:  800, black:    900,
+    };
+    const weight = weightMap[(weightStr ?? 'regular').toLowerCase()] ?? 400;
+    const style  = namePart.toLowerCase().includes('italic') ? 'italic' : 'normal';
+    try {
+      const data = readFileSync(resolve(fontsDir, file));
+      fonts.push({ name: family, data: data.buffer, weight, style });
+    } catch {
+      // skip unreadable fonts
+    }
+  }
+  return fonts;
+}
+
+// ---------------------------------------------------------------------------
+// Import user composition via jiti (handles .tsx / .ts / .js)
+// ---------------------------------------------------------------------------
+
+async function loadComposition(path) {
+  const { createJiti } = await import('jiti');
+  const jiti = createJiti(import.meta.url, { jsx: true });
+  const absPath = resolve(process.cwd(), path);
+  const mod = await jiti.import(absPath);
+  // Support both default export and named Component export
+  const Component = mod?.default ?? mod?.Component;
+  if (typeof Component !== 'function') {
+    throw new Error(`Composition at "${path}" must have a default export that is a React component function`);
+  }
+  return Component;
+}
+
+// ---------------------------------------------------------------------------
+// Render a single frame → raw RGBA Uint8Array
+// ---------------------------------------------------------------------------
+
+async function renderFrame(Component, frameIndex, fonts, React, satori, Resvg) {
+  const frameProps = {
+    frame: frameIndex,
+    fps,
+    durationInFrames: duration,
+    width,
+    height,
+    props: userProps,
+  };
+
+  // Build the React element (no JSX — render.mjs is plain .mjs)
+  const element = React.createElement(Component, frameProps);
+
+  const svg = await satori(element, { width, height, fonts });
+
+  const resvg = new Resvg(svg, {
+    fitTo: { mode: 'width', value: width },
+  });
+  const rendered = resvg.render();
+  return rendered; // ResvgRenderImage with .asPng() and .pixels (RGBA Uint8Array)
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+async function main() {
+  const fonts     = loadFonts();
+  const Component = await loadComposition(compositionPath);
+
+  // Lazy-import heavy deps after validation
+  const React           = (await import('react')).default;
+  const { default: satori } = await import('satori');
+  const { Resvg }       = await import('@resvg/resvg-js');
+
+  // -------------------------------------------------------------------------
+  // STILL mode
+  // -------------------------------------------------------------------------
+  if (mode === 'still') {
+    const rendered = await renderFrame(Component, startFrame, fonts, React, satori, Resvg);
+    const png      = rendered.asPng();
+    const outPath  = resolve(process.cwd(), outputPath);
+    writeFileSync(outPath, png);
+    ok({ path: outPath, sizeBytes: png.byteLength });
+  }
+
+  // -------------------------------------------------------------------------
+  // GIF mode
+  // -------------------------------------------------------------------------
+  else if (mode === 'gif') {
+    const gifencMod = await import('gifenc');
+    const gifencExports = gifencMod.default ?? gifencMod['module.exports'] ?? gifencMod;
+    const { GIFEncoder, quantize, applyPalette } = gifencExports;
+
+    const gif      = GIFEncoder();
+    const delayMs  = Math.round(1000 / fps);
+
+    for (let f = 0; f < duration; f++) {
+      const rendered = await renderFrame(Component, f, fonts, React, satori, Resvg);
+      // pixels is a Uint8Array of RGBA bytes, width×height×4
+      const pixels = new Uint8Array(rendered.pixels);
+      const palette = quantize(pixels, 256, { format: 'rgba4444' });
+      const index   = applyPalette(pixels, palette, 'rgba4444');
+      gif.writeFrame(index, width, height, { palette, delay: delayMs });
+    }
+
+    gif.finish();
+    const data    = gif.bytesView();
+    const outPath = resolve(process.cwd(), outputPath);
+    writeFileSync(outPath, data);
+    ok({ path: outPath, sizeBytes: data.byteLength });
+  }
+
+  // -------------------------------------------------------------------------
+  // MP4 mode
+  // -------------------------------------------------------------------------
+  else if (mode === 'mp4') {
+    const tmp      = resolve(tmpdir(), `pi-render-${Date.now()}`);
+    mkdirSync(tmp, { recursive: true });
+
+    const padLen = String(duration - 1).length;
+
+    for (let f = 0; f < duration; f++) {
+      const rendered  = await renderFrame(Component, f, fonts, React, satori, Resvg);
+      const png       = rendered.asPng();
+      const frameName = String(f).padStart(padLen, '0') + '.png';
+      writeFileSync(resolve(tmp, frameName), png);
+    }
+
+    const outPath = resolve(process.cwd(), outputPath);
+    const result  = spawnSync('ffmpeg', [
+      '-y',
+      '-framerate', String(fps),
+      '-i', resolve(tmp, `%0${padLen}d.png`),
+      '-c:v', 'libx264',
+      '-pix_fmt', 'yuv420p',
+      '-movflags', '+faststart',
+      outPath,
+    ], { stdio: 'pipe' });
+
+    if (result.status !== 0) {
+      const stderr = result.stderr?.toString() ?? 'unknown ffmpeg error';
+      fail(`ffmpeg failed: ${stderr}`);
+    }
+
+    ok({ path: outPath, sizeBytes: readFileSync(outPath).byteLength });
+  }
+
+  // -------------------------------------------------------------------------
+  // Unknown mode
+  // -------------------------------------------------------------------------
+  else {
+    fail(`Unknown --mode "${mode}". Valid values: still, gif, mp4`);
+  }
+}
+
+main().catch((err) => fail(err?.message ?? String(err)));

package/extensions/render/composition/test-comp.tsx

@@ -0,0 +1,87 @@
+/**
+ * test-comp.tsx — minimal smoke-test composition.
+ *
+ * Renders a progress bar animating from 0% → 100% over durationInFrames.
+ * Uses Verdant palette: bg #0a0a0a, teal #7ec8c8, text #e0e0e0.
+ * Props-based (no Remotion hooks).
+ */
+
+import React from 'react';
+import type { FrameProps } from './types.js';
+
+export default function TestComp({
+  frame,
+  durationInFrames,
+  width,
+  height,
+}: FrameProps): React.ReactElement {
+  const progress = durationInFrames > 1 ? frame / (durationInFrames - 1) : 1;
+  const pct = Math.round(progress * 100);
+  const barWidth = Math.round(progress * (width - 80));
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width,
+        height,
+        background: '#0a0a0a',
+        fontFamily: 'Inter, sans-serif',
+        color: '#e0e0e0',
+      }}
+    >
+      {/* Title */}
+      <div
+        style={{
+          display: 'flex',
+          fontSize: 32,
+          fontWeight: 700,
+          marginBottom: 40,
+          color: '#7ec8c8',
+          letterSpacing: 2,
+        }}
+      >
+        pi-kit render pipeline
+      </div>
+
+      {/* Bar track */}
+      <div
+        style={{
+          display: 'flex',
+          width: width - 80,
+          height: 24,
+          background: '#1a1a1a',
+          borderRadius: 12,
+          overflow: 'hidden',
+        }}
+      >
+        {/* Bar fill */}
+        <div
+          style={{
+            display: 'flex',
+            width: barWidth,
+            height: 24,
+            background: '#7ec8c8',
+            borderRadius: 12,
+          }}
+        />
+      </div>
+
+      {/* Percentage label */}
+      <div
+        style={{
+          display: 'flex',
+          marginTop: 20,
+          fontSize: 24,
+          color: '#e0e0e0',
+          fontVariantNumeric: 'tabular-nums',
+        }}
+      >
+        {pct}%
+      </div>
+    </div>
+  );
+}

package/extensions/render/composition/types.ts

@@ -0,0 +1,24 @@
+/**
+ * Core types for the composition render pipeline.
+ * Browser-free React → video/image renderer using Satori + resvg + gifenc.
+ */
+
+/**
+ * Props injected into every frame component.
+ * Mirrors the Remotion useCurrentFrame() / useVideoConfig() pattern
+ * but passed directly as props instead of via hooks.
+ */
+export interface FrameProps {
+  /** Current frame index (0-based) */
+  frame: number;
+  /** Frames per second */
+  fps: number;
+  /** Total number of frames in the composition */
+  durationInFrames: number;
+  /** Canvas width in pixels */
+  width: number;
+  /** Canvas height in pixels */
+  height: number;
+  /** User-defined props passed through from the render tool */
+  props?: Record<string, unknown>;
+}

package/extensions/render/excalidraw/UPSTREAM.md

@@ -0,0 +1,81 @@
+# Excalidraw Factory Layer — Upstream Tracking
+
+## Source
+
+Vendored from [`@swiftlysingh/excalidraw-cli`](https://github.com/swiftlysingh/excalidraw-cli)
+- **Version at vendor time:** 1.1.0
+- **Commit:** `e1338e8342dfa740119aac5e83aab71673c70c68` (main, 2026-03-03)
+- **License:** MIT
+- **npm:** `@swiftlysingh/excalidraw-cli@1.1.0`
+
+## What We Vendored
+
+| Upstream File | Local File | Changes |
+|---|---|---|
+| `src/types/excalidraw.ts` | `types.ts` | Minimal — removed unused `ExcalidrawImage`, `ExcalidrawFileData`; added our `SemanticPurpose` and palette types |
+| `src/factory/element-factory.ts` | `elements.ts` | Merged node-factory, connection-factory, text-factory into single module; replaced `nanoid` with built-in `crypto.randomUUID`; added semantic palette integration |
+| `src/factory/node-factory.ts` | (merged into `elements.ts`) | — |
+| `src/factory/connection-factory.ts` | (merged into `elements.ts`) | — |
+| `src/factory/text-factory.ts` | (merged into `elements.ts`) | — |
+
+### Files NOT vendored (unnecessary for our use case)
+
+- `src/cli.ts` — CLI entry point
+- `src/parser/dsl-parser.ts` — DSL parser (`(Start) -> [Process]` syntax)
+- `src/parser/dot-parser.ts` — Graphviz DOT parser
+- `src/parser/json-parser.ts` — JSON input parser
+- `src/layout/elk-layout.ts` — ELK.js auto-layout (we do manual positioning)
+- `src/layout/arrow-router.ts` — Arrow routing (simplified inline)
+- `src/generator/excalidraw-generator.ts` — Full pipeline orchestrator
+- `src/factory/image-factory.ts` — Image element support
+
+## How to Sync with Upstream
+
+When upstream updates (or if something breaks):
+
+```bash
+# 1. Check what changed
+cd /tmp && git clone https://github.com/swiftlysingh/excalidraw-cli.git
+diff -u excalidraw-cli/src/types/excalidraw.ts \
+  ~/.pi/agent/git/github.com/cwilson613/pi-kit/extensions/render/excalidraw/types.ts
+
+# 2. Key files to diff:
+#    src/types/excalidraw.ts → types.ts
+#    src/factory/element-factory.ts → elements.ts (base element creation)
+#    src/factory/node-factory.ts → elements.ts (shape creation)
+#    src/factory/connection-factory.ts → elements.ts (arrow creation)
+#    src/factory/text-factory.ts → elements.ts (text creation)
+
+# 3. Watch for:
+#    - New required properties in ExcalidrawElementBase
+#    - Changed binding format (ExcalidrawArrowBinding)
+#    - New element types
+#    - Changed default values
+```
+
+## Excalidraw Format Version Risks
+
+The `.excalidraw` JSON format is defined by the Excalidraw project, not by excalidraw-cli.
+Key things that could break:
+
+1. **New required fields on elements** — Excalidraw sometimes adds mandatory fields.
+   Check: https://github.com/excalidraw/excalidraw/blob/master/packages/element/src/types.ts
+2. **Binding format changes** — Arrow bindings (`startBinding`/`endBinding`) have changed before.
+   The `mode: "orbit" | "point"` and `fixedPoint: [number, number]` format is current as of v0.18.
+3. **Version field** — Currently `"version": 2`. If they bump to 3, older files may not load.
+4. **`index` field** — Fractional indexing for element ordering. Currently alphabetic (`"a"`, `"ab"`).
+
+## Also Relevant
+
+- **Render pipeline** (`references/excalidraw/`): Uses `@excalidraw/excalidraw` from esm.sh CDN.
+  If the CDN version updates and introduces breaking changes to `exportToSvg`, the renderer breaks.
+  Pin version in `render_template.html` import URL to mitigate.
+- **Official skeleton API**: `@excalidraw/element` has `convertToExcalidrawElements()` but is
+  prerelease-only with a hard DOM canvas dependency. If they ship a stable Node-compatible version,
+  consider switching from vendored factories to the official API.
+
+## Last Synced
+
+- **Date:** 2026-03-03
+- **Upstream version:** 1.1.0
+- **By:** cwilson (omegon session)