@json-render/image 0.1.0

package/dist/index.mjs

@@ -0,0 +1,19 @@
+import {
+  renderToPng,
+  renderToSvg,
+  standardComponents
+} from "./chunk-KQSKKHJA.mjs";
+import {
+  schema
+} from "./chunk-A67OT34V.mjs";
+import {
+  standardComponentDefinitions
+} from "./chunk-PMEELRVP.mjs";
+export {
+  renderToPng,
+  renderToSvg,
+  schema,
+  standardComponentDefinitions,
+  standardComponents
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/render-DyXCSaYW.d.mts

@@ -0,0 +1,40 @@
+import { SatoriOptions } from 'satori';
+import { UIElement, Spec } from '@json-render/core';
+import { ReactNode, ComponentType } from 'react';
+
+interface ComponentRenderProps<P = Record<string, unknown>> {
+    element: UIElement<string, P>;
+    children?: ReactNode;
+    emit: (event: string) => void;
+}
+type ComponentRenderer<P = Record<string, unknown>> = ComponentType<ComponentRenderProps<P>>;
+type ComponentRegistry = Record<string, ComponentRenderer<any>>;
+
+declare const standardComponents: ComponentRegistry;
+
+interface RenderOptions {
+    registry?: ComponentRegistry;
+    includeStandard?: boolean;
+    state?: Record<string, unknown>;
+    fonts?: SatoriOptions["fonts"];
+    /** Override the Frame width. When omitted, uses the Frame component's width prop. */
+    width?: number;
+    /** Override the Frame height. When omitted, uses the Frame component's height prop. */
+    height?: number;
+}
+/**
+ * Render a json-render spec to an SVG string.
+ *
+ * Uses Satori to convert the spec's component tree into SVG.
+ * No additional dependencies are needed beyond satori.
+ */
+declare function renderToSvg(spec: Spec, options?: RenderOptions): Promise<string>;
+/**
+ * Render a json-render spec to a PNG buffer.
+ *
+ * Requires `@resvg/resvg-js` to be installed as a peer dependency.
+ * The SVG is first generated via Satori, then rasterized to PNG.
+ */
+declare function renderToPng(spec: Spec, options?: RenderOptions): Promise<Uint8Array>;
+
+export { type ComponentRenderProps as C, type RenderOptions as R, type ComponentRenderer as a, type ComponentRegistry as b, renderToPng as c, renderToSvg as r, standardComponents as s };

package/dist/render-DyXCSaYW.d.ts

@@ -0,0 +1,40 @@
+import { SatoriOptions } from 'satori';
+import { UIElement, Spec } from '@json-render/core';
+import { ReactNode, ComponentType } from 'react';
+
+interface ComponentRenderProps<P = Record<string, unknown>> {
+    element: UIElement<string, P>;
+    children?: ReactNode;
+    emit: (event: string) => void;
+}
+type ComponentRenderer<P = Record<string, unknown>> = ComponentType<ComponentRenderProps<P>>;
+type ComponentRegistry = Record<string, ComponentRenderer<any>>;
+
+declare const standardComponents: ComponentRegistry;
+
+interface RenderOptions {
+    registry?: ComponentRegistry;
+    includeStandard?: boolean;
+    state?: Record<string, unknown>;
+    fonts?: SatoriOptions["fonts"];
+    /** Override the Frame width. When omitted, uses the Frame component's width prop. */
+    width?: number;
+    /** Override the Frame height. When omitted, uses the Frame component's height prop. */
+    height?: number;
+}
+/**
+ * Render a json-render spec to an SVG string.
+ *
+ * Uses Satori to convert the spec's component tree into SVG.
+ * No additional dependencies are needed beyond satori.
+ */
+declare function renderToSvg(spec: Spec, options?: RenderOptions): Promise<string>;
+/**
+ * Render a json-render spec to a PNG buffer.
+ *
+ * Requires `@resvg/resvg-js` to be installed as a peer dependency.
+ * The SVG is first generated via Satori, then rasterized to PNG.
+ */
+declare function renderToPng(spec: Spec, options?: RenderOptions): Promise<Uint8Array>;
+
+export { type ComponentRenderProps as C, type RenderOptions as R, type ComponentRenderer as a, type ComponentRegistry as b, renderToPng as c, renderToSvg as r, standardComponents as s };

package/dist/render.d.mts

@@ -0,0 +1,4 @@
+import 'satori';
+import '@json-render/core';
+export { R as RenderOptions, c as renderToPng, r as renderToSvg, s as standardComponents } from './render-DyXCSaYW.mjs';
+import 'react';

package/dist/render.d.ts

@@ -0,0 +1,4 @@
+import 'satori';
+import '@json-render/core';
+export { R as RenderOptions, c as renderToPng, r as renderToSvg, s as standardComponents } from './render-DyXCSaYW.js';
+import 'react';

package/dist/render.js

@@ -0,0 +1,380 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/render.tsx
+var render_exports = {};
+__export(render_exports, {
+  renderToPng: () => renderToPng,
+  renderToSvg: () => renderToSvg,
+  standardComponents: () => standardComponents
+});
+module.exports = __toCommonJS(render_exports);
+var import_satori = __toESM(require("satori"));
+var import_core = require("@json-render/core");
+
+// src/components/standard.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var headingSizes = {
+  h1: 48,
+  h2: 36,
+  h3: 28,
+  h4: 22
+};
+var headingWeights = {
+  h1: 700,
+  h2: 700,
+  h3: 600,
+  h4: 600
+};
+function cleanStyle(raw) {
+  const out = {};
+  for (const k in raw) {
+    if (raw[k] !== void 0 && raw[k] !== null) {
+      out[k] = raw[k];
+    }
+  }
+  return out;
+}
+function FrameComponent({
+  element,
+  children
+}) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: cleanStyle({
+        display: p.display ?? "flex",
+        flexDirection: p.flexDirection ?? "column",
+        width: p.width,
+        height: p.height,
+        backgroundColor: p.backgroundColor ?? "white",
+        padding: p.padding,
+        alignItems: p.alignItems,
+        justifyContent: p.justifyContent
+      }),
+      children
+    }
+  );
+}
+function BoxComponent({
+  element,
+  children
+}) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: p.flexDirection ?? "column",
+        padding: p.padding,
+        paddingTop: p.paddingTop,
+        paddingBottom: p.paddingBottom,
+        paddingLeft: p.paddingLeft,
+        paddingRight: p.paddingRight,
+        margin: p.margin,
+        backgroundColor: p.backgroundColor,
+        borderWidth: p.borderWidth,
+        borderColor: p.borderColor,
+        borderRadius: p.borderRadius,
+        borderStyle: p.borderWidth ? "solid" : void 0,
+        flex: p.flex,
+        width: p.width,
+        height: p.height,
+        alignItems: p.alignItems,
+        justifyContent: p.justifyContent,
+        position: p.position,
+        top: p.top,
+        left: p.left,
+        right: p.right,
+        bottom: p.bottom,
+        overflow: p.overflow
+      }),
+      children
+    }
+  );
+}
+function RowComponent({
+  element,
+  children
+}) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: "row",
+        gap: p.gap,
+        alignItems: p.alignItems,
+        justifyContent: p.justifyContent,
+        padding: p.padding,
+        flex: p.flex,
+        flexWrap: p.wrap ? "wrap" : void 0
+      }),
+      children
+    }
+  );
+}
+function ColumnComponent({
+  element,
+  children
+}) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: "column",
+        gap: p.gap,
+        alignItems: p.alignItems,
+        justifyContent: p.justifyContent,
+        padding: p.padding,
+        flex: p.flex
+      }),
+      children
+    }
+  );
+}
+function HeadingComponent({
+  element
+}) {
+  const p = element.props;
+  const level = p.level ?? "h2";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: cleanStyle({
+        display: "flex",
+        fontSize: headingSizes[level] ?? 36,
+        fontWeight: headingWeights[level] ?? 700,
+        color: p.color ?? "black",
+        textAlign: p.align ?? "left",
+        letterSpacing: p.letterSpacing,
+        lineHeight: p.lineHeight ?? 1.2
+      }),
+      children: p.text
+    }
+  );
+}
+function TextComponent({
+  element
+}) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: cleanStyle({
+        display: "flex",
+        fontSize: p.fontSize ?? 16,
+        color: p.color ?? "black",
+        textAlign: p.align ?? "left",
+        fontWeight: p.fontWeight === "bold" ? 700 : 400,
+        fontStyle: p.fontStyle ?? "normal",
+        lineHeight: p.lineHeight ?? 1.4,
+        letterSpacing: p.letterSpacing,
+        textDecoration: p.textDecoration
+      }),
+      children: p.text
+    }
+  );
+}
+function ImageComponent({
+  element
+}) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      src: p.src,
+      width: p.width ?? void 0,
+      height: p.height ?? void 0,
+      style: cleanStyle({
+        borderRadius: p.borderRadius,
+        objectFit: p.objectFit ?? "contain"
+      })
+    }
+  );
+}
+function DividerComponent({
+  element
+}) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        width: "100%",
+        borderBottom: `${p.thickness ?? 1}px solid ${p.color ?? "#e5e7eb"}`,
+        marginTop: p.marginTop ?? 8,
+        marginBottom: p.marginBottom ?? 8
+      }
+    }
+  );
+}
+function SpacerComponent({
+  element
+}) {
+  const p = element.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", height: p.height ?? 20 } });
+}
+var standardComponents = {
+  Frame: FrameComponent,
+  Box: BoxComponent,
+  Row: RowComponent,
+  Column: ColumnComponent,
+  Heading: HeadingComponent,
+  Text: TextComponent,
+  Image: ImageComponent,
+  Divider: DividerComponent,
+  Spacer: SpacerComponent
+};
+
+// src/render.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var noopEmit = () => {
+};
+function renderElement(elementKey, spec, registry, stateModel, repeatItem, repeatIndex, repeatBasePath) {
+  const element = spec.elements[elementKey];
+  if (!element) return null;
+  const ctx = {
+    stateModel,
+    repeatItem,
+    repeatIndex,
+    repeatBasePath
+  };
+  if (element.visible !== void 0) {
+    if (!(0, import_core.evaluateVisibility)(element.visible, ctx)) {
+      return null;
+    }
+  }
+  const resolvedProps = (0, import_core.resolveElementProps)(
+    element.props,
+    ctx
+  );
+  const resolvedElement = { ...element, props: resolvedProps };
+  const Component = registry[resolvedElement.type];
+  if (!Component) return null;
+  if (resolvedElement.repeat) {
+    const items = (0, import_core.getByPath)(stateModel, resolvedElement.repeat.statePath) ?? [];
+    const fragments = items.map((item, index) => {
+      const key = resolvedElement.repeat.key && typeof item === "object" && item !== null ? String(
+        item[resolvedElement.repeat.key] ?? index
+      ) : String(index);
+      const childPath = `${resolvedElement.repeat.statePath}/${index}`;
+      const children2 = resolvedElement.children?.map(
+        (childKey) => renderElement(
+          childKey,
+          spec,
+          registry,
+          stateModel,
+          item,
+          index,
+          childPath
+        )
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { element: resolvedElement, emit: noopEmit, children: children2 }, key);
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fragments });
+  }
+  const children = resolvedElement.children?.map(
+    (childKey) => renderElement(
+      childKey,
+      spec,
+      registry,
+      stateModel,
+      repeatItem,
+      repeatIndex,
+      repeatBasePath
+    )
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { element: resolvedElement, emit: noopEmit, children: children && children.length > 0 ? children : void 0 }, elementKey);
+}
+function getDimensions(spec, options = {}) {
+  if (options.width && options.height) {
+    return { width: options.width, height: options.height };
+  }
+  const rootElement = spec.elements[spec.root];
+  const props = rootElement?.props;
+  return {
+    width: options.width ?? props?.width ?? 1200,
+    height: options.height ?? props?.height ?? 630
+  };
+}
+function buildTree(spec, options = {}) {
+  const {
+    registry: customRegistry,
+    includeStandard = true,
+    state = {}
+  } = options;
+  const mergedState = {
+    ...spec.state,
+    ...state
+  };
+  const registry = {
+    ...includeStandard ? standardComponents : {},
+    ...customRegistry
+  };
+  const root = renderElement(spec.root, spec, registry, mergedState);
+  return root ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+}
+async function renderToSvg(spec, options = {}) {
+  const tree = buildTree(spec, options);
+  const { width, height } = getDimensions(spec, options);
+  return (0, import_satori.default)(tree, {
+    width,
+    height,
+    fonts: options.fonts ?? []
+  });
+}
+async function renderToPng(spec, options = {}) {
+  const svg = await renderToSvg(spec, options);
+  let Resvg;
+  try {
+    const mod = await import("@resvg/resvg-js");
+    Resvg = mod.Resvg;
+  } catch {
+    throw new Error(
+      "@resvg/resvg-js is required for PNG output. Install it with: npm install @resvg/resvg-js"
+    );
+  }
+  const resvg = new Resvg(svg);
+  const pngData = resvg.render();
+  return pngData.asPng();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  renderToPng,
+  renderToSvg,
+  standardComponents
+});
+//# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/render.tsx","../src/components/standard.tsx"],"sourcesContent":["import React from \"react\";\nimport satori, { type SatoriOptions } from \"satori\";\nimport type { Spec, UIElement } from \"@json-render/core\";\nimport {\n  resolveElementProps,\n  evaluateVisibility,\n  getByPath,\n  type PropResolutionContext,\n} from \"@json-render/core\";\nimport { standardComponents } from \"./components/standard\";\nimport type { ComponentRegistry } from \"./types\";\n\nexport { standardComponents };\n\nexport interface RenderOptions {\n  registry?: ComponentRegistry;\n  includeStandard?: boolean;\n  state?: Record<string, unknown>;\n  fonts?: SatoriOptions[\"fonts\"];\n  /** Override the Frame width. When omitted, uses the Frame component's width prop. */\n  width?: number;\n  /** Override the Frame height. When omitted, uses the Frame component's height prop. */\n  height?: number;\n}\n\nconst noopEmit = () => {};\n\nfunction renderElement(\n  elementKey: string,\n  spec: Spec,\n  registry: ComponentRegistry,\n  stateModel: Record<string, unknown>,\n  repeatItem?: unknown,\n  repeatIndex?: number,\n  repeatBasePath?: string,\n): React.ReactElement | null {\n  const element = spec.elements[elementKey];\n  if (!element) return null;\n\n  const ctx: PropResolutionContext = {\n    stateModel,\n    repeatItem,\n    repeatIndex,\n    repeatBasePath,\n  };\n\n  if (element.visible !== undefined) {\n    if (!evaluateVisibility(element.visible, ctx)) {\n      return null;\n    }\n  }\n\n  const resolvedProps = resolveElementProps(\n    element.props as Record<string, unknown>,\n    ctx,\n  );\n  const resolvedElement: UIElement = { ...element, props: resolvedProps };\n\n  const Component = registry[resolvedElement.type];\n  if (!Component) return null;\n\n  if (resolvedElement.repeat) {\n    const items =\n      (getByPath(stateModel, resolvedElement.repeat.statePath) as\n        | unknown[]\n        | undefined) ?? [];\n\n    const fragments = items.map((item, index) => {\n      const key =\n        resolvedElement.repeat!.key && typeof item === \"object\" && item !== null\n          ? String(\n              (item as Record<string, unknown>)[resolvedElement.repeat!.key!] ??\n                index,\n            )\n          : String(index);\n\n      const childPath = `${resolvedElement.repeat!.statePath}/${index}`;\n      const children = resolvedElement.children?.map((childKey) =>\n        renderElement(\n          childKey,\n          spec,\n          registry,\n          stateModel,\n          item,\n          index,\n          childPath,\n        ),\n      );\n\n      return (\n        <Component key={key} element={resolvedElement} emit={noopEmit}>\n          {children}\n        </Component>\n      );\n    });\n\n    return <>{fragments}</>;\n  }\n\n  const children = resolvedElement.children?.map((childKey) =>\n    renderElement(\n      childKey,\n      spec,\n      registry,\n      stateModel,\n      repeatItem,\n      repeatIndex,\n      repeatBasePath,\n    ),\n  );\n\n  return (\n    <Component key={elementKey} element={resolvedElement} emit={noopEmit}>\n      {children && children.length > 0 ? children : undefined}\n    </Component>\n  );\n}\n\ninterface ImageDimensions {\n  width: number;\n  height: number;\n}\n\nfunction getDimensions(\n  spec: Spec,\n  options: RenderOptions = {},\n): ImageDimensions {\n  if (options.width && options.height) {\n    return { width: options.width, height: options.height };\n  }\n\n  const rootElement = spec.elements[spec.root];\n  const props = rootElement?.props as Record<string, unknown> | undefined;\n\n  return {\n    width: options.width ?? (props?.width as number) ?? 1200,\n    height: options.height ?? (props?.height as number) ?? 630,\n  };\n}\n\nfunction buildTree(\n  spec: Spec,\n  options: RenderOptions = {},\n): React.ReactElement {\n  const {\n    registry: customRegistry,\n    includeStandard = true,\n    state = {},\n  } = options;\n\n  const mergedState: Record<string, unknown> = {\n    ...spec.state,\n    ...state,\n  };\n\n  const registry: ComponentRegistry = {\n    ...(includeStandard ? standardComponents : {}),\n    ...customRegistry,\n  };\n\n  const root = renderElement(spec.root, spec, registry, mergedState);\n  return root ?? <></>;\n}\n\n/**\n * Render a json-render spec to an SVG string.\n *\n * Uses Satori to convert the spec's component tree into SVG.\n * No additional dependencies are needed beyond satori.\n */\nexport async function renderToSvg(\n  spec: Spec,\n  options: RenderOptions = {},\n): Promise<string> {\n  const tree = buildTree(spec, options);\n  const { width, height } = getDimensions(spec, options);\n\n  return satori(tree as React.ReactNode, {\n    width,\n    height,\n    fonts: options.fonts ?? [],\n  });\n}\n\n/**\n * Render a json-render spec to a PNG buffer.\n *\n * Requires `@resvg/resvg-js` to be installed as a peer dependency.\n * The SVG is first generated via Satori, then rasterized to PNG.\n */\nexport async function renderToPng(\n  spec: Spec,\n  options: RenderOptions = {},\n): Promise<Uint8Array> {\n  const svg = await renderToSvg(spec, options);\n\n  let Resvg: typeof import(\"@resvg/resvg-js\").Resvg;\n  try {\n    const mod = await import(\"@resvg/resvg-js\");\n    Resvg = mod.Resvg;\n  } catch {\n    throw new Error(\n      \"@resvg/resvg-js is required for PNG output. Install it with: npm install @resvg/resvg-js\",\n    );\n  }\n\n  const resvg = new Resvg(svg);\n  const pngData = resvg.render();\n  return pngData.asPng();\n}\n","import React from \"react\";\nimport type { ComponentRenderProps, ComponentRegistry } from \"../types\";\nimport type { StandardComponentProps } from \"../catalog\";\n\nconst headingSizes: Record<string, number> = {\n  h1: 48,\n  h2: 36,\n  h3: 28,\n  h4: 22,\n};\n\nconst headingWeights: Record<string, number> = {\n  h1: 700,\n  h2: 700,\n  h3: 600,\n  h4: 600,\n};\n\n/**\n * Satori crashes on explicit `undefined` style values (e.g. `padding: undefined`).\n * Strip them so only defined properties are passed.\n */\nfunction cleanStyle(raw: Record<string, unknown>): React.CSSProperties {\n  const out: Record<string, unknown> = {};\n  for (const k in raw) {\n    if (raw[k] !== undefined && raw[k] !== null) {\n      out[k] = raw[k];\n    }\n  }\n  return out as React.CSSProperties;\n}\n\n// =============================================================================\n// Root\n// =============================================================================\n\nfunction FrameComponent({\n  element,\n  children,\n}: ComponentRenderProps<StandardComponentProps<\"Frame\">>) {\n  const p = element.props;\n\n  return (\n    <div\n      style={cleanStyle({\n        display: p.display ?? \"flex\",\n        flexDirection: p.flexDirection ?? \"column\",\n        width: p.width,\n        height: p.height,\n        backgroundColor: p.backgroundColor ?? \"white\",\n        padding: p.padding,\n        alignItems: p.alignItems,\n        justifyContent: p.justifyContent,\n      })}\n    >\n      {children}\n    </div>\n  );\n}\n\n// =============================================================================\n// Layout Components\n// =============================================================================\n\nfunction BoxComponent({\n  element,\n  children,\n}: ComponentRenderProps<StandardComponentProps<\"Box\">>) {\n  const p = element.props;\n\n  return (\n    <div\n      style={cleanStyle({\n        display: \"flex\",\n        flexDirection: p.flexDirection ?? \"column\",\n        padding: p.padding,\n        paddingTop: p.paddingTop,\n        paddingBottom: p.paddingBottom,\n        paddingLeft: p.paddingLeft,\n        paddingRight: p.paddingRight,\n        margin: p.margin,\n        backgroundColor: p.backgroundColor,\n        borderWidth: p.borderWidth,\n        borderColor: p.borderColor,\n        borderRadius: p.borderRadius,\n        borderStyle: p.borderWidth ? \"solid\" : undefined,\n        flex: p.flex,\n        width: p.width,\n        height: p.height,\n        alignItems: p.alignItems,\n        justifyContent: p.justifyContent,\n        position: p.position,\n        top: p.top,\n        left: p.left,\n        right: p.right,\n        bottom: p.bottom,\n        overflow: p.overflow,\n      })}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction RowComponent({\n  element,\n  children,\n}: ComponentRenderProps<StandardComponentProps<\"Row\">>) {\n  const p = element.props;\n\n  return (\n    <div\n      style={cleanStyle({\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: p.gap,\n        alignItems: p.alignItems,\n        justifyContent: p.justifyContent,\n        padding: p.padding,\n        flex: p.flex,\n        flexWrap: p.wrap ? \"wrap\" : undefined,\n      })}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction ColumnComponent({\n  element,\n  children,\n}: ComponentRenderProps<StandardComponentProps<\"Column\">>) {\n  const p = element.props;\n\n  return (\n    <div\n      style={cleanStyle({\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: p.gap,\n        alignItems: p.alignItems,\n        justifyContent: p.justifyContent,\n        padding: p.padding,\n        flex: p.flex,\n      })}\n    >\n      {children}\n    </div>\n  );\n}\n\n// =============================================================================\n// Content Components\n// =============================================================================\n\nfunction HeadingComponent({\n  element,\n}: ComponentRenderProps<StandardComponentProps<\"Heading\">>) {\n  const p = element.props;\n  const level = p.level ?? \"h2\";\n\n  return (\n    <div\n      style={cleanStyle({\n        display: \"flex\",\n        fontSize: headingSizes[level] ?? 36,\n        fontWeight: headingWeights[level] ?? 700,\n        color: p.color ?? \"black\",\n        textAlign: p.align ?? \"left\",\n        letterSpacing: p.letterSpacing,\n        lineHeight: p.lineHeight ?? 1.2,\n      })}\n    >\n      {p.text}\n    </div>\n  );\n}\n\nfunction TextComponent({\n  element,\n}: ComponentRenderProps<StandardComponentProps<\"Text\">>) {\n  const p = element.props;\n\n  return (\n    <div\n      style={cleanStyle({\n        display: \"flex\",\n        fontSize: p.fontSize ?? 16,\n        color: p.color ?? \"black\",\n        textAlign: p.align ?? \"left\",\n        fontWeight: p.fontWeight === \"bold\" ? 700 : 400,\n        fontStyle: p.fontStyle ?? \"normal\",\n        lineHeight: p.lineHeight ?? 1.4,\n        letterSpacing: p.letterSpacing,\n        textDecoration: p.textDecoration,\n      })}\n    >\n      {p.text}\n    </div>\n  );\n}\n\nfunction ImageComponent({\n  element,\n}: ComponentRenderProps<StandardComponentProps<\"Image\">>) {\n  const p = element.props;\n\n  return (\n    <img\n      src={p.src}\n      width={p.width ?? undefined}\n      height={p.height ?? undefined}\n      style={cleanStyle({\n        borderRadius: p.borderRadius,\n        objectFit: p.objectFit ?? \"contain\",\n      })}\n    />\n  );\n}\n\n// =============================================================================\n// Decorative Components\n// =============================================================================\n\nfunction DividerComponent({\n  element,\n}: ComponentRenderProps<StandardComponentProps<\"Divider\">>) {\n  const p = element.props;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        width: \"100%\",\n        borderBottom: `${p.thickness ?? 1}px solid ${p.color ?? \"#e5e7eb\"}`,\n        marginTop: p.marginTop ?? 8,\n        marginBottom: p.marginBottom ?? 8,\n      }}\n    />\n  );\n}\n\nfunction SpacerComponent({\n  element,\n}: ComponentRenderProps<StandardComponentProps<\"Spacer\">>) {\n  const p = element.props;\n\n  return <div style={{ display: \"flex\", height: p.height ?? 20 }} />;\n}\n\n// =============================================================================\n// Registry\n// =============================================================================\n\nexport const standardComponents: ComponentRegistry = {\n  Frame: FrameComponent,\n  Box: BoxComponent,\n  Row: RowComponent,\n  Column: ColumnComponent,\n  Heading: HeadingComponent,\n  Text: TextComponent,\n  Image: ImageComponent,\n  Divider: DividerComponent,\n  Spacer: SpacerComponent,\n};\n"],"mappings":"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","names":["import_jsx_runtime","children","satori"]}

package/dist/render.mjs

@@ -0,0 +1,11 @@
+import {
+  renderToPng,
+  renderToSvg,
+  standardComponents
+} from "./chunk-KQSKKHJA.mjs";
+export {
+  renderToPng,
+  renderToSvg,
+  standardComponents
+};
+//# sourceMappingURL=render.mjs.map

package/dist/render.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/server.d.mts

@@ -0,0 +1,53 @@
+import * as _json_render_core from '@json-render/core';
+import { Catalog, InferCatalogComponents, InferComponentProps } from '@json-render/core';
+export { Spec, StateModel } from '@json-render/core';
+export { StandardComponentDefinitions, StandardComponentProps, standardComponentDefinitions } from './catalog.mjs';
+import 'zod';
+
+/**
+ * The schema for @json-render/image
+ *
+ * Defines:
+ * - Spec: A flat tree of elements with keys, types, props, and children references
+ * - Catalog: Components with props schemas
+ *
+ * Reuses the same { root, elements } spec format as the React and React PDF renderers.
+ */
+declare const schema: _json_render_core.Schema<{
+    spec: _json_render_core.SchemaType<"object", {
+        root: _json_render_core.SchemaType<"string", unknown>;
+        elements: _json_render_core.SchemaType<"record", _json_render_core.SchemaType<"object", {
+            type: _json_render_core.SchemaType<"ref", string>;
+            props: _json_render_core.SchemaType<"propsOf", string>;
+            children: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"string", unknown>>;
+            visible: _json_render_core.SchemaType<"any", unknown>;
+        }>>;
+    }>;
+    catalog: _json_render_core.SchemaType<"object", {
+        components: _json_render_core.SchemaType<"map", {
+            props: _json_render_core.SchemaType<"zod", unknown>;
+            slots: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"string", unknown>>;
+            description: _json_render_core.SchemaType<"string", unknown>;
+            example: _json_render_core.SchemaType<"any", unknown>;
+        }>;
+    }>;
+}>;
+type ImageSchema = typeof schema;
+type ImageSpec<TCatalog> = typeof schema extends {
+    createCatalog: (catalog: TCatalog) => {
+        _specType: infer S;
+    };
+} ? S : never;
+
+type SetState = (updater: (prev: Record<string, unknown>) => Record<string, unknown>) => void;
+interface ComponentContext<C extends Catalog, K extends keyof InferCatalogComponents<C>> {
+    props: InferComponentProps<C, K>;
+    children?: React.ReactNode;
+    emit: (event: string) => void;
+}
+type ComponentFn<C extends Catalog, K extends keyof InferCatalogComponents<C>> = (ctx: ComponentContext<C, K>) => React.ReactNode;
+type Components<C extends Catalog> = {
+    [K in keyof InferCatalogComponents<C>]: ComponentFn<C, K>;
+};
+
+export { type ComponentContext, type ComponentFn, type Components, type ImageSchema, type ImageSpec, type SetState, schema };

package/dist/server.d.ts

@@ -0,0 +1,53 @@
+import * as _json_render_core from '@json-render/core';
+import { Catalog, InferCatalogComponents, InferComponentProps } from '@json-render/core';
+export { Spec, StateModel } from '@json-render/core';
+export { StandardComponentDefinitions, StandardComponentProps, standardComponentDefinitions } from './catalog.js';
+import 'zod';
+
+/**
+ * The schema for @json-render/image
+ *
+ * Defines:
+ * - Spec: A flat tree of elements with keys, types, props, and children references
+ * - Catalog: Components with props schemas
+ *
+ * Reuses the same { root, elements } spec format as the React and React PDF renderers.
+ */
+declare const schema: _json_render_core.Schema<{
+    spec: _json_render_core.SchemaType<"object", {
+        root: _json_render_core.SchemaType<"string", unknown>;
+        elements: _json_render_core.SchemaType<"record", _json_render_core.SchemaType<"object", {
+            type: _json_render_core.SchemaType<"ref", string>;
+            props: _json_render_core.SchemaType<"propsOf", string>;
+            children: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"string", unknown>>;
+            visible: _json_render_core.SchemaType<"any", unknown>;
+        }>>;
+    }>;
+    catalog: _json_render_core.SchemaType<"object", {
+        components: _json_render_core.SchemaType<"map", {
+            props: _json_render_core.SchemaType<"zod", unknown>;
+            slots: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"string", unknown>>;
+            description: _json_render_core.SchemaType<"string", unknown>;
+            example: _json_render_core.SchemaType<"any", unknown>;
+        }>;
+    }>;
+}>;
+type ImageSchema = typeof schema;
+type ImageSpec<TCatalog> = typeof schema extends {
+    createCatalog: (catalog: TCatalog) => {
+        _specType: infer S;
+    };
+} ? S : never;
+
+type SetState = (updater: (prev: Record<string, unknown>) => Record<string, unknown>) => void;
+interface ComponentContext<C extends Catalog, K extends keyof InferCatalogComponents<C>> {
+    props: InferComponentProps<C, K>;
+    children?: React.ReactNode;
+    emit: (event: string) => void;
+}
+type ComponentFn<C extends Catalog, K extends keyof InferCatalogComponents<C>> = (ctx: ComponentContext<C, K>) => React.ReactNode;
+type Components<C extends Catalog> = {
+    [K in keyof InferCatalogComponents<C>]: ComponentFn<C, K>;
+};
+
+export { type ComponentContext, type ComponentFn, type Components, type ImageSchema, type ImageSpec, type SetState, schema };