@kubuild/renderer 0.0.1

package/dist/renderer.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { PageDocument, Node } from '@kubuild/schema';
+import { ComponentRegistry } from '@kubuild/components';
+import { RenderContext, Diagnostic } from './render-context';
+export interface EditableTextProps {
+    as?: string;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    value: string;
+    isEditable: boolean;
+    nodeId: string;
+    onClick?: (e: React.MouseEvent) => void;
+    onChange?: (val: string, isBlur: boolean) => void;
+    [key: string]: unknown;
+}
+export declare const EditableText: React.FC<EditableTextProps>;
+export declare function transformEmbedHtml(rawHtml: string): string;
+export interface HtmlEmbedViewProps {
+    id?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+    dataKubuildNode?: string;
+    html: string;
+    role?: string;
+}
+export declare const HtmlEmbedView: React.FC<HtmlEmbedViewProps>;
+export interface KubuildRendererProps {
+    document: PageDocument;
+    registry?: ComponentRegistry;
+    context?: RenderContext;
+    viewport?: 'desktop' | 'tablet' | 'mobile';
+    mode?: 'editor' | 'runtime';
+    className?: string;
+    onNodeClick?: (nodeId: string, event: React.MouseEvent) => void;
+    onDiagnostic?: (diagnostic: Diagnostic) => void;
+    onActionDispatch?: (actionType: string, payload: Record<string, unknown> | undefined, nodeId: string) => void;
+    onNodePropChange?: (nodeId: string, propName: string, value: unknown, isBlur?: boolean) => void;
+}
+export interface NodeRendererProps {
+    node: Node;
+    document: PageDocument;
+    registry: ComponentRegistry;
+    context?: RenderContext;
+    viewport?: 'desktop' | 'tablet' | 'mobile';
+    mode?: 'editor' | 'runtime';
+    onNodeClick?: (nodeId: string, event: React.MouseEvent) => void;
+    onDiagnostic?: (diagnostic: Diagnostic) => void;
+    onActionDispatch?: (actionType: string, payload: Record<string, unknown> | undefined, nodeId: string) => void;
+    onNodePropChange?: (nodeId: string, propName: string, value: unknown, isBlur?: boolean) => void;
+    /**
+     * Suffix appended to the HTML `id` attribute (never to `data-kubuild-node`, the
+     * canonical template-node reference) so a `collection` node's repeated child
+     * template produces unique DOM ids per iteration instead of duplicates.
+     */
+    instanceSuffix?: string;
+}
+export declare function NodeRenderer({ node, document, registry, context: propContext, viewport, mode, onNodeClick, onDiagnostic, onActionDispatch, onNodePropChange, instanceSuffix, }: NodeRendererProps): React.ReactElement;
+export declare const KubuildRenderer: React.FC<KubuildRendererProps>;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.tsx"],"names":[],"mappings":"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"}

package/dist/styles.d.ts

@@ -0,0 +1,23 @@
+import { PageDocument, ResponsiveStyles } from '@kubuild/schema';
+import React from 'react';
+export declare function resolveNodeStyles(styles?: ResponsiveStyles, viewport?: 'desktop' | 'tablet' | 'mobile'): React.CSSProperties;
+/**
+ * Serialize a style definition object into CSS declarations.
+ * camelCase keys are converted to kebab-case CSS properties.
+ */
+export declare function styleDefinitionToCssDeclarations(styleDefinition: Record<string, unknown> | undefined): string;
+/**
+ * Walk the document tree and produce scoped CSS rules for pseudo-state
+ * style layers (STORA-222). Each node with `styles.states` gets rules like:
+ *
+ *   [data-kubuild-node="node-1"]:hover { background-color: #1d4ed8; }
+ *
+ * Scoped via the canonical `data-kubuild-node` attribute so styles never leak
+ * between nodes and work identically in editor canvas and runtime preview.
+ */
+export declare function collectStateStylesCss(document: PageDocument | undefined | null): string;
+/**
+ * Modern baseline CSS Reset for consistent rendering across viewports and browsers.
+ */
+export declare const DEFAULT_CSS_RESET: string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAQ,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,iBAAiB,CAC/B,MAAM,CAAC,EAAE,gBAAgB,EACzB,QAAQ,GAAE,SAAS,GAAG,QAAQ,GAAG,QAAoB,GACpD,KAAK,CAAC,aAAa,CAKrB;AAiBD;;;GAGG;AACH,wBAAgB,gCAAgC,CAC9C,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GACnD,MAAM,CASR;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAuBvF;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,QA0BtB,CAAC"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@kubuild/renderer",
+  "version": "0.0.1",
+  "description": "Pure recursive React renderer for KUBUILD page documents",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "prepublishOnly": "pnpm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kustora/kubuild.git"
+  },
+  "keywords": [
+    "page-builder",
+    "visual-editor",
+    "low-code",
+    "website-builder",
+    "stora",
+    "kubuild"
+  ],
+  "author": "KUBUILD",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kustora/kubuild/issues"
+  },
+  "homepage": "https://github.com/kustora/kubuild#readme",
+  "dependencies": {
+    "@kubuild/components": "workspace:*",
+    "@kubuild/core": "workspace:*",
+    "@kubuild/schema": "workspace:*",
+    "lucide-react": "^1.33.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.6",
+    "typescript": "^6.0.0",
+    "vitest": "^3.0.5"
+  }
+}