@json-render/image 0.1.0

package/dist/chunk-KQSKKHJA.mjs

@@ -0,0 +1,348 @@
+// src/render.tsx
+import satori from "satori";
+import {
+  resolveElementProps,
+  evaluateVisibility,
+  getByPath
+} from "@json-render/core";
+
+// src/components/standard.tsx
+import { jsx } from "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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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
+import { Fragment, jsx as jsx2 } from "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 (!evaluateVisibility(element.visible, ctx)) {
+      return null;
+    }
+  }
+  const resolvedProps = resolveElementProps(
+    element.props,
+    ctx
+  );
+  const resolvedElement = { ...element, props: resolvedProps };
+  const Component = registry[resolvedElement.type];
+  if (!Component) return null;
+  if (resolvedElement.repeat) {
+    const items = 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__ */ jsx2(Component, { element: resolvedElement, emit: noopEmit, children: children2 }, key);
+    });
+    return /* @__PURE__ */ jsx2(Fragment, { children: fragments });
+  }
+  const children = resolvedElement.children?.map(
+    (childKey) => renderElement(
+      childKey,
+      spec,
+      registry,
+      stateModel,
+      repeatItem,
+      repeatIndex,
+      repeatBasePath
+    )
+  );
+  return /* @__PURE__ */ jsx2(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__ */ jsx2(Fragment, {});
+}
+async function renderToSvg(spec, options = {}) {
+  const tree = buildTree(spec, options);
+  const { width, height } = getDimensions(spec, options);
+  return satori(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();
+}
+
+export {
+  standardComponents,
+  renderToSvg,
+  renderToPng
+};
+//# sourceMappingURL=chunk-KQSKKHJA.mjs.map

package/dist/chunk-KQSKKHJA.mjs.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":";AACA,OAAO,YAAoC;AAE3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;;;ACmCH;AAvCJ,IAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMA,SAAS,WAAW,KAAmD;AACrE,QAAM,MAA+B,CAAC;AACtC,aAAW,KAAK,KAAK;AACnB,QAAI,IAAI,CAAC,MAAM,UAAa,IAAI,CAAC,MAAM,MAAM;AAC3C,UAAI,CAAC,IAAI,IAAI,CAAC;AAAA,IAChB;AAAA,EACF;AACA,SAAO;AACT;AAMA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AACF,GAA0D;AACxD,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,QAChB,SAAS,EAAE,WAAW;AAAA,QACtB,eAAe,EAAE,iBAAiB;AAAA,QAClC,OAAO,EAAE;AAAA,QACT,QAAQ,EAAE;AAAA,QACV,iBAAiB,EAAE,mBAAmB;AAAA,QACtC,SAAS,EAAE;AAAA,QACX,YAAY,EAAE;AAAA,QACd,gBAAgB,EAAE;AAAA,MACpB,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAMA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AACF,GAAwD;AACtD,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,QAChB,SAAS;AAAA,QACT,eAAe,EAAE,iBAAiB;AAAA,QAClC,SAAS,EAAE;AAAA,QACX,YAAY,EAAE;AAAA,QACd,eAAe,EAAE;AAAA,QACjB,aAAa,EAAE;AAAA,QACf,cAAc,EAAE;AAAA,QAChB,QAAQ,EAAE;AAAA,QACV,iBAAiB,EAAE;AAAA,QACnB,aAAa,EAAE;AAAA,QACf,aAAa,EAAE;AAAA,QACf,cAAc,EAAE;AAAA,QAChB,aAAa,EAAE,cAAc,UAAU;AAAA,QACvC,MAAM,EAAE;AAAA,QACR,OAAO,EAAE;AAAA,QACT,QAAQ,EAAE;AAAA,QACV,YAAY,EAAE;AAAA,QACd,gBAAgB,EAAE;AAAA,QAClB,UAAU,EAAE;AAAA,QACZ,KAAK,EAAE;AAAA,QACP,MAAM,EAAE;AAAA,QACR,OAAO,EAAE;AAAA,QACT,QAAQ,EAAE;AAAA,QACV,UAAU,EAAE;AAAA,MACd,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AACF,GAAwD;AACtD,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,QAChB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK,EAAE;AAAA,QACP,YAAY,EAAE;AAAA,QACd,gBAAgB,EAAE;AAAA,QAClB,SAAS,EAAE;AAAA,QACX,MAAM,EAAE;AAAA,QACR,UAAU,EAAE,OAAO,SAAS;AAAA,MAC9B,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAA2D;AACzD,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,QAChB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK,EAAE;AAAA,QACP,YAAY,EAAE;AAAA,QACd,gBAAgB,EAAE;AAAA,QAClB,SAAS,EAAE;AAAA,QACX,MAAM,EAAE;AAAA,MACV,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAMA,SAAS,iBAAiB;AAAA,EACxB;AACF,GAA4D;AAC1D,QAAM,IAAI,QAAQ;AAClB,QAAM,QAAQ,EAAE,SAAS;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,QAChB,SAAS;AAAA,QACT,UAAU,aAAa,KAAK,KAAK;AAAA,QACjC,YAAY,eAAe,KAAK,KAAK;AAAA,QACrC,OAAO,EAAE,SAAS;AAAA,QAClB,WAAW,EAAE,SAAS;AAAA,QACtB,eAAe,EAAE;AAAA,QACjB,YAAY,EAAE,cAAc;AAAA,MAC9B,CAAC;AAAA,MAEA,YAAE;AAAA;AAAA,EACL;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AACF,GAAyD;AACvD,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,QAChB,SAAS;AAAA,QACT,UAAU,EAAE,YAAY;AAAA,QACxB,OAAO,EAAE,SAAS;AAAA,QAClB,WAAW,EAAE,SAAS;AAAA,QACtB,YAAY,EAAE,eAAe,SAAS,MAAM;AAAA,QAC5C,WAAW,EAAE,aAAa;AAAA,QAC1B,YAAY,EAAE,cAAc;AAAA,QAC5B,eAAe,EAAE;AAAA,QACjB,gBAAgB,EAAE;AAAA,MACpB,CAAC;AAAA,MAEA,YAAE;AAAA;AAAA,EACL;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AACF,GAA0D;AACxD,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,EAAE;AAAA,MACP,OAAO,EAAE,SAAS;AAAA,MAClB,QAAQ,EAAE,UAAU;AAAA,MACpB,OAAO,WAAW;AAAA,QAChB,cAAc,EAAE;AAAA,QAChB,WAAW,EAAE,aAAa;AAAA,MAC5B,CAAC;AAAA;AAAA,EACH;AAEJ;AAMA,SAAS,iBAAiB;AAAA,EACxB;AACF,GAA4D;AAC1D,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,cAAc,GAAG,EAAE,aAAa,CAAC,YAAY,EAAE,SAAS,SAAS;AAAA,QACjE,WAAW,EAAE,aAAa;AAAA,QAC1B,cAAc,EAAE,gBAAgB;AAAA,MAClC;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,gBAAgB;AAAA,EACvB;AACF,GAA2D;AACzD,QAAM,IAAI,QAAQ;AAElB,SAAO,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,QAAQ,EAAE,UAAU,GAAG,GAAG;AAClE;AAMO,IAAM,qBAAwC;AAAA,EACnD,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AACV;;;AD9KQ,SAMG,UANH,OAAAA,YAAA;AAjER,IAAM,WAAW,MAAM;AAAC;AAExB,SAAS,cACP,YACA,MACA,UACA,YACA,YACA,aACA,gBAC2B;AAC3B,QAAM,UAAU,KAAK,SAAS,UAAU;AACxC,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,MAA6B;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,QAAQ,YAAY,QAAW;AACjC,QAAI,CAAC,mBAAmB,QAAQ,SAAS,GAAG,GAAG;AAC7C,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,QAAQ;AAAA,IACR;AAAA,EACF;AACA,QAAM,kBAA6B,EAAE,GAAG,SAAS,OAAO,cAAc;AAEtE,QAAM,YAAY,SAAS,gBAAgB,IAAI;AAC/C,MAAI,CAAC,UAAW,QAAO;AAEvB,MAAI,gBAAgB,QAAQ;AAC1B,UAAM,QACH,UAAU,YAAY,gBAAgB,OAAO,SAAS,KAErC,CAAC;AAErB,UAAM,YAAY,MAAM,IAAI,CAAC,MAAM,UAAU;AAC3C,YAAM,MACJ,gBAAgB,OAAQ,OAAO,OAAO,SAAS,YAAY,SAAS,OAChE;AAAA,QACG,KAAiC,gBAAgB,OAAQ,GAAI,KAC5D;AAAA,MACJ,IACA,OAAO,KAAK;AAElB,YAAM,YAAY,GAAG,gBAAgB,OAAQ,SAAS,IAAI,KAAK;AAC/D,YAAMC,YAAW,gBAAgB,UAAU;AAAA,QAAI,CAAC,aAC9C;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aACE,gBAAAC,KAAC,aAAoB,SAAS,iBAAiB,MAAM,UAClD,UAAAD,aADa,GAEhB;AAAA,IAEJ,CAAC;AAED,WAAO,gBAAAC,KAAA,YAAG,qBAAU;AAAA,EACtB;AAEA,QAAM,WAAW,gBAAgB,UAAU;AAAA,IAAI,CAAC,aAC9C;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,gBAAAA,KAAC,aAA2B,SAAS,iBAAiB,MAAM,UACzD,sBAAY,SAAS,SAAS,IAAI,WAAW,UADhC,UAEhB;AAEJ;AAOA,SAAS,cACP,MACA,UAAyB,CAAC,GACT;AACjB,MAAI,QAAQ,SAAS,QAAQ,QAAQ;AACnC,WAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACxD;AAEA,QAAM,cAAc,KAAK,SAAS,KAAK,IAAI;AAC3C,QAAM,QAAQ,aAAa;AAE3B,SAAO;AAAA,IACL,OAAO,QAAQ,SAAU,OAAO,SAAoB;AAAA,IACpD,QAAQ,QAAQ,UAAW,OAAO,UAAqB;AAAA,EACzD;AACF;AAEA,SAAS,UACP,MACA,UAAyB,CAAC,GACN;AACpB,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,QAAQ,CAAC;AAAA,EACX,IAAI;AAEJ,QAAM,cAAuC;AAAA,IAC3C,GAAG,KAAK;AAAA,IACR,GAAG;AAAA,EACL;AAEA,QAAM,WAA8B;AAAA,IAClC,GAAI,kBAAkB,qBAAqB,CAAC;AAAA,IAC5C,GAAG;AAAA,EACL;AAEA,QAAM,OAAO,cAAc,KAAK,MAAM,MAAM,UAAU,WAAW;AACjE,SAAO,QAAQ,gBAAAA,KAAA,YAAE;AACnB;AAQA,eAAsB,YACpB,MACA,UAAyB,CAAC,GACT;AACjB,QAAM,OAAO,UAAU,MAAM,OAAO;AACpC,QAAM,EAAE,OAAO,OAAO,IAAI,cAAc,MAAM,OAAO;AAErD,SAAO,OAAO,MAAyB;AAAA,IACrC;AAAA,IACA;AAAA,IACA,OAAO,QAAQ,SAAS,CAAC;AAAA,EAC3B,CAAC;AACH;AAQA,eAAsB,YACpB,MACA,UAAyB,CAAC,GACL;AACrB,QAAM,MAAM,MAAM,YAAY,MAAM,OAAO;AAE3C,MAAI;AACJ,MAAI;AACF,UAAM,MAAM,MAAM,OAAO,iBAAiB;AAC1C,YAAQ,IAAI;AAAA,EACd,QAAQ;AACN,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,QAAQ,IAAI,MAAM,GAAG;AAC3B,QAAM,UAAU,MAAM,OAAO;AAC7B,SAAO,QAAQ,MAAM;AACvB;","names":["jsx","children","jsx"]}

package/dist/chunk-PMEELRVP.mjs

@@ -0,0 +1,183 @@
+// src/catalog.ts
+import { z } from "zod";
+var standardComponentDefinitions = {
+  // ==========================================================================
+  // Root
+  // ==========================================================================
+  Frame: {
+    props: z.object({
+      width: z.number(),
+      height: z.number(),
+      backgroundColor: z.string().nullable(),
+      padding: z.number().nullable(),
+      display: z.enum(["flex", "none"]).nullable(),
+      flexDirection: z.enum(["row", "column"]).nullable(),
+      alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).nullable(),
+      justifyContent: z.enum([
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around"
+      ]).nullable()
+    }),
+    slots: ["default"],
+    description: "Root image container. Defines the output image dimensions and background. Must be the root element.",
+    example: { width: 1200, height: 630, backgroundColor: "#ffffff" }
+  },
+  // ==========================================================================
+  // Layout Components
+  // ==========================================================================
+  Box: {
+    props: z.object({
+      padding: z.number().nullable(),
+      paddingTop: z.number().nullable(),
+      paddingBottom: z.number().nullable(),
+      paddingLeft: z.number().nullable(),
+      paddingRight: z.number().nullable(),
+      margin: z.number().nullable(),
+      backgroundColor: z.string().nullable(),
+      borderWidth: z.number().nullable(),
+      borderColor: z.string().nullable(),
+      borderRadius: z.number().nullable(),
+      flex: z.number().nullable(),
+      width: z.union([z.number(), z.string()]).nullable(),
+      height: z.union([z.number(), z.string()]).nullable(),
+      alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).nullable(),
+      justifyContent: z.enum([
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around"
+      ]).nullable(),
+      flexDirection: z.enum(["row", "column"]).nullable(),
+      position: z.enum(["relative", "absolute"]).nullable(),
+      top: z.number().nullable(),
+      left: z.number().nullable(),
+      right: z.number().nullable(),
+      bottom: z.number().nullable(),
+      overflow: z.enum(["visible", "hidden"]).nullable()
+    }),
+    slots: ["default"],
+    description: "Generic container with padding, margin, background, border, and flex alignment. Supports absolute positioning.",
+    example: {
+      padding: 20,
+      backgroundColor: "#f9f9f9",
+      borderRadius: 8,
+      alignItems: "center"
+    }
+  },
+  Row: {
+    props: z.object({
+      gap: z.number().nullable(),
+      alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).nullable(),
+      justifyContent: z.enum([
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around"
+      ]).nullable(),
+      padding: z.number().nullable(),
+      flex: z.number().nullable(),
+      wrap: z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "Horizontal flex layout. Use for placing elements side by side.",
+    example: { gap: 10, alignItems: "center" }
+  },
+  Column: {
+    props: z.object({
+      gap: z.number().nullable(),
+      alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).nullable(),
+      justifyContent: z.enum([
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around"
+      ]).nullable(),
+      padding: z.number().nullable(),
+      flex: z.number().nullable()
+    }),
+    slots: ["default"],
+    description: "Vertical flex layout. Use for stacking elements top to bottom.",
+    example: { gap: 8, padding: 10 }
+  },
+  // ==========================================================================
+  // Content Components
+  // ==========================================================================
+  Heading: {
+    props: z.object({
+      text: z.string(),
+      level: z.enum(["h1", "h2", "h3", "h4"]).nullable(),
+      color: z.string().nullable(),
+      align: z.enum(["left", "center", "right"]).nullable(),
+      letterSpacing: z.union([z.number(), z.string()]).nullable(),
+      lineHeight: z.number().nullable()
+    }),
+    slots: [],
+    description: "Heading text at various levels. h1 is largest, h4 is smallest.",
+    example: { text: "Hello World", level: "h1", color: "#000000" }
+  },
+  Text: {
+    props: z.object({
+      text: z.string(),
+      fontSize: z.number().nullable(),
+      color: z.string().nullable(),
+      align: z.enum(["left", "center", "right"]).nullable(),
+      fontWeight: z.enum(["normal", "bold"]).nullable(),
+      fontStyle: z.enum(["normal", "italic"]).nullable(),
+      lineHeight: z.number().nullable(),
+      letterSpacing: z.union([z.number(), z.string()]).nullable(),
+      textDecoration: z.enum(["none", "underline", "line-through"]).nullable()
+    }),
+    slots: [],
+    description: "Body text with configurable size, color, weight, and alignment.",
+    example: { text: "Some content here.", fontSize: 16, color: "#333333" }
+  },
+  Image: {
+    props: z.object({
+      src: z.string(),
+      width: z.number().nullable(),
+      height: z.number().nullable(),
+      borderRadius: z.number().nullable(),
+      objectFit: z.enum(["contain", "cover", "fill", "none"]).nullable()
+    }),
+    slots: [],
+    description: "Image from a URL. Specify width and/or height to control size. For placeholder images use https://picsum.photos/{width}/{height}?random={n}.",
+    example: {
+      src: "https://picsum.photos/400/300?random=1",
+      width: 400,
+      height: 300
+    }
+  },
+  // ==========================================================================
+  // Decorative Components
+  // ==========================================================================
+  Divider: {
+    props: z.object({
+      color: z.string().nullable(),
+      thickness: z.number().nullable(),
+      marginTop: z.number().nullable(),
+      marginBottom: z.number().nullable()
+    }),
+    slots: [],
+    description: "Horizontal line separator between content sections.",
+    example: { color: "#e5e7eb", thickness: 1 }
+  },
+  Spacer: {
+    props: z.object({
+      height: z.number().nullable()
+    }),
+    slots: [],
+    description: "Empty vertical space between elements.",
+    example: { height: 20 }
+  }
+};
+
+export {
+  standardComponentDefinitions
+};
+//# sourceMappingURL=chunk-PMEELRVP.mjs.map

package/dist/chunk-PMEELRVP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/catalog.ts"],"sourcesContent":["import { z } from \"zod\";\n\n/**\n * Standard component definitions for image catalogs.\n *\n * These define the available image components with their Zod prop schemas.\n * All components render to Satori-compatible JSX (HTML-like elements with\n * inline CSS flexbox styles).\n */\nexport const standardComponentDefinitions = {\n  // ==========================================================================\n  // Root\n  // ==========================================================================\n\n  Frame: {\n    props: z.object({\n      width: z.number(),\n      height: z.number(),\n      backgroundColor: z.string().nullable(),\n      padding: z.number().nullable(),\n      display: z.enum([\"flex\", \"none\"]).nullable(),\n      flexDirection: z.enum([\"row\", \"column\"]).nullable(),\n      alignItems: z\n        .enum([\"flex-start\", \"center\", \"flex-end\", \"stretch\"])\n        .nullable(),\n      justifyContent: z\n        .enum([\n          \"flex-start\",\n          \"center\",\n          \"flex-end\",\n          \"space-between\",\n          \"space-around\",\n        ])\n        .nullable(),\n    }),\n    slots: [\"default\"],\n    description:\n      \"Root image container. Defines the output image dimensions and background. Must be the root element.\",\n    example: { width: 1200, height: 630, backgroundColor: \"#ffffff\" },\n  },\n\n  // ==========================================================================\n  // Layout Components\n  // ==========================================================================\n\n  Box: {\n    props: z.object({\n      padding: z.number().nullable(),\n      paddingTop: z.number().nullable(),\n      paddingBottom: z.number().nullable(),\n      paddingLeft: z.number().nullable(),\n      paddingRight: z.number().nullable(),\n      margin: z.number().nullable(),\n      backgroundColor: z.string().nullable(),\n      borderWidth: z.number().nullable(),\n      borderColor: z.string().nullable(),\n      borderRadius: z.number().nullable(),\n      flex: z.number().nullable(),\n      width: z.union([z.number(), z.string()]).nullable(),\n      height: z.union([z.number(), z.string()]).nullable(),\n      alignItems: z\n        .enum([\"flex-start\", \"center\", \"flex-end\", \"stretch\"])\n        .nullable(),\n      justifyContent: z\n        .enum([\n          \"flex-start\",\n          \"center\",\n          \"flex-end\",\n          \"space-between\",\n          \"space-around\",\n        ])\n        .nullable(),\n      flexDirection: z.enum([\"row\", \"column\"]).nullable(),\n      position: z.enum([\"relative\", \"absolute\"]).nullable(),\n      top: z.number().nullable(),\n      left: z.number().nullable(),\n      right: z.number().nullable(),\n      bottom: z.number().nullable(),\n      overflow: z.enum([\"visible\", \"hidden\"]).nullable(),\n    }),\n    slots: [\"default\"],\n    description:\n      \"Generic container with padding, margin, background, border, and flex alignment. Supports absolute positioning.\",\n    example: {\n      padding: 20,\n      backgroundColor: \"#f9f9f9\",\n      borderRadius: 8,\n      alignItems: \"center\",\n    },\n  },\n\n  Row: {\n    props: z.object({\n      gap: z.number().nullable(),\n      alignItems: z\n        .enum([\"flex-start\", \"center\", \"flex-end\", \"stretch\"])\n        .nullable(),\n      justifyContent: z\n        .enum([\n          \"flex-start\",\n          \"center\",\n          \"flex-end\",\n          \"space-between\",\n          \"space-around\",\n        ])\n        .nullable(),\n      padding: z.number().nullable(),\n      flex: z.number().nullable(),\n      wrap: z.boolean().nullable(),\n    }),\n    slots: [\"default\"],\n    description:\n      \"Horizontal flex layout. Use for placing elements side by side.\",\n    example: { gap: 10, alignItems: \"center\" },\n  },\n\n  Column: {\n    props: z.object({\n      gap: z.number().nullable(),\n      alignItems: z\n        .enum([\"flex-start\", \"center\", \"flex-end\", \"stretch\"])\n        .nullable(),\n      justifyContent: z\n        .enum([\n          \"flex-start\",\n          \"center\",\n          \"flex-end\",\n          \"space-between\",\n          \"space-around\",\n        ])\n        .nullable(),\n      padding: z.number().nullable(),\n      flex: z.number().nullable(),\n    }),\n    slots: [\"default\"],\n    description:\n      \"Vertical flex layout. Use for stacking elements top to bottom.\",\n    example: { gap: 8, padding: 10 },\n  },\n\n  // ==========================================================================\n  // Content Components\n  // ==========================================================================\n\n  Heading: {\n    props: z.object({\n      text: z.string(),\n      level: z.enum([\"h1\", \"h2\", \"h3\", \"h4\"]).nullable(),\n      color: z.string().nullable(),\n      align: z.enum([\"left\", \"center\", \"right\"]).nullable(),\n      letterSpacing: z.union([z.number(), z.string()]).nullable(),\n      lineHeight: z.number().nullable(),\n    }),\n    slots: [],\n    description:\n      \"Heading text at various levels. h1 is largest, h4 is smallest.\",\n    example: { text: \"Hello World\", level: \"h1\", color: \"#000000\" },\n  },\n\n  Text: {\n    props: z.object({\n      text: z.string(),\n      fontSize: z.number().nullable(),\n      color: z.string().nullable(),\n      align: z.enum([\"left\", \"center\", \"right\"]).nullable(),\n      fontWeight: z.enum([\"normal\", \"bold\"]).nullable(),\n      fontStyle: z.enum([\"normal\", \"italic\"]).nullable(),\n      lineHeight: z.number().nullable(),\n      letterSpacing: z.union([z.number(), z.string()]).nullable(),\n      textDecoration: z.enum([\"none\", \"underline\", \"line-through\"]).nullable(),\n    }),\n    slots: [],\n    description:\n      \"Body text with configurable size, color, weight, and alignment.\",\n    example: { text: \"Some content here.\", fontSize: 16, color: \"#333333\" },\n  },\n\n  Image: {\n    props: z.object({\n      src: z.string(),\n      width: z.number().nullable(),\n      height: z.number().nullable(),\n      borderRadius: z.number().nullable(),\n      objectFit: z.enum([\"contain\", \"cover\", \"fill\", \"none\"]).nullable(),\n    }),\n    slots: [],\n    description:\n      \"Image from a URL. Specify width and/or height to control size. For placeholder images use https://picsum.photos/{width}/{height}?random={n}.\",\n    example: {\n      src: \"https://picsum.photos/400/300?random=1\",\n      width: 400,\n      height: 300,\n    },\n  },\n\n  // ==========================================================================\n  // Decorative Components\n  // ==========================================================================\n\n  Divider: {\n    props: z.object({\n      color: z.string().nullable(),\n      thickness: z.number().nullable(),\n      marginTop: z.number().nullable(),\n      marginBottom: z.number().nullable(),\n    }),\n    slots: [],\n    description: \"Horizontal line separator between content sections.\",\n    example: { color: \"#e5e7eb\", thickness: 1 },\n  },\n\n  Spacer: {\n    props: z.object({\n      height: z.number().nullable(),\n    }),\n    slots: [],\n    description: \"Empty vertical space between elements.\",\n    example: { height: 20 },\n  },\n};\n\nexport type StandardComponentDefinitions = typeof standardComponentDefinitions;\n\nexport type StandardComponentProps<\n  K extends keyof StandardComponentDefinitions,\n> = StandardComponentDefinitions[K][\"props\"] extends { _output: infer O }\n  ? O\n  : z.output<StandardComponentDefinitions[K][\"props\"]>;\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+export { ComponentContext, ComponentFn, Components, ImageSchema, ImageSpec, SetState, schema } from './server.mjs';
+export { Spec, StateModel } from '@json-render/core';
+export { b as ComponentRegistry, C as ComponentRenderProps, a as ComponentRenderer, R as RenderOptions, c as renderToPng, r as renderToSvg, s as standardComponents } from './render-DyXCSaYW.mjs';
+export { StandardComponentDefinitions, StandardComponentProps, standardComponentDefinitions } from './catalog.mjs';
+import 'satori';
+import 'react';
+import 'zod';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { ComponentContext, ComponentFn, Components, ImageSchema, ImageSpec, SetState, schema } from './server.js';
+export { Spec, StateModel } from '@json-render/core';
+export { b as ComponentRegistry, C as ComponentRenderProps, a as ComponentRenderer, R as RenderOptions, c as renderToPng, r as renderToSvg, s as standardComponents } from './render-DyXCSaYW.js';
+export { StandardComponentDefinitions, StandardComponentProps, standardComponentDefinitions } from './catalog.js';
+import 'satori';
+import 'react';
+import 'zod';