@kubuild/renderer 0.8.1 → 0.8.2

package/dist/renderers/render-node-content.d.cts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { PageDocument, Node } from '@kubuild/schema';
+import type { ComponentRegistry, ComponentDefinition } from '@kubuild/components';
+import { RenderContext, Diagnostic } from '../render-context.cjs';
+export interface RenderNodeContentOptions {
+    node: Node;
+    document: PageDocument;
+    registry: ComponentRegistry;
+    context: RenderContext;
+    viewport: 'desktop' | 'tablet' | 'mobile';
+    mode: 'editor' | 'runtime';
+    styles: React.CSSProperties;
+    props: Record<string, unknown>;
+    resolvedProps: Record<string, unknown>;
+    definition?: ComponentDefinition;
+    domId: string;
+    childrenElements?: React.ReactNode;
+    handleClick: (e: React.MouseEvent) => void;
+    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;
+    selectedNodeId?: string | null;
+    instanceSuffix?: string;
+    isModalOpen?: boolean;
+    renderChildNode: (child: Node, instanceSuffix?: string, itemContext?: RenderContext) => React.ReactElement;
+}
+/**
+ * Renders custom component if registered in ComponentRegistry.
+ */
+export declare function renderCustomComponent(options: RenderNodeContentOptions): React.ReactElement | null;
+/**
+ * Layout nodes: page, section, container, columns
+ */
+export declare function renderLayoutNode(options: RenderNodeContentOptions): React.ReactElement | null;
+/**
+ * Typography nodes: heading, text, paragraph, link, blockquote, badge, code-block
+ */
+export declare function renderTypographyNode(options: RenderNodeContentOptions): React.ReactElement | null;
+/**
+ * List nodes: list, list-item
+ */
+export declare function renderListNode(options: RenderNodeContentOptions): React.ReactElement | null;
+/**
+ * Table nodes: table, table-row, table-cell
+ */
+export declare function renderTableNode(options: RenderNodeContentOptions): React.ReactElement | null;
+/**
+ * Creates an inline SVG data-URI placeholder for image nodes when no image URL
+ * is available (e.g. in editor mode when bound to a variable with an empty sample value).
+ * Renders an accessible, non-broken visual box on canvas and ensures <img> keeps a valid src.
+ */
+export declare function createPlaceholderImage(label?: string): string;
+/**
+ * Media nodes: image, video, icon, html-embed
+ */
+export declare function renderMediaNode(options: RenderNodeContentOptions): React.ReactElement | null;
+/**
+ * Form nodes: button, form, input, textarea, select, checkbox, radio
+ */
+export declare function renderFormNode(options: RenderNodeContentOptions): React.ReactElement | null;
+/**
+ * Collection node: collection
+ */
+export declare function renderCollectionNode(options: RenderNodeContentOptions): React.ReactElement | null;
+/**
+ * Fallback node for unregistered / unknown types.
+ */
+export declare function renderFallbackNode(options: RenderNodeContentOptions): React.ReactElement;
+/**
+ * Master dispatcher function for rendering node content based on node type.
+ */
+export declare function renderNodeContent(options: RenderNodeContentOptions): React.ReactElement;
+//# sourceMappingURL=render-node-content.d.cts.map

package/dist/renderers/render-node-content.d.cts.map

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

package/dist/renderers/render-node-content.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PageDocument, Node } from '@kubuild/schema';
 import type { ComponentRegistry, ComponentDefinition } from '@kubuild/components';
-import { RenderContext, Diagnostic } from '../render-context';
+import { RenderContext, Diagnostic } from '../render-context.js';
 export interface RenderNodeContentOptions {
     node: Node;
     document: PageDocument;

package/dist/renderers/render-node-content.d.ts.map

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

package/dist/styles.d.cts

@@ -0,0 +1,95 @@
+import { PageDocument, Node, ResponsiveStyles, type BreakpointName } from '@kubuild/schema';
+import React from 'react';
+/**
+ * Normalizes CSS and Kubuild style properties into standard, valid React.CSSProperties.
+ * Resolves:
+ * - CSS Grid properties: gridTemplateColumns, gridTemplateRows, gridAutoFlow, gridColumn, gridRow, colSpan, rowSpan
+ * - Auto Layout flex properties: flexDirection, flexWrap, justifyContent, alignItems, gap, etc.
+ * - Child sizing modes: 'fit-content' (hug), 'fill' (flex: 1 1 0%, width: 100%)
+ * - 4-corner border radius: borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius
+ * - Backdrop blur: backdropFilter, backdropBlur, WebkitBackdropFilter
+ * - Linear and radial gradients: gradient, backgroundGradient, backgroundImage
+ */
+export declare function normalizeStyleObject(raw: Record<string, unknown> | undefined): React.CSSProperties;
+/**
+ * How the renderer applies `styles.desktop` / `styles.tablet` / `styles.mobile` (STORA-540).
+ *
+ * - `'viewport'`: merge `base` with the single layer named by the `viewport` prop into the
+ *   inline style. Used by the editor canvas, where each device frame previews one viewport
+ *   regardless of the real browser width.
+ * - `'css'`: inline style is `base` only; breakpoint layers are emitted as `@media` rules
+ *   scoped to `[data-kubuild-node="…"]`, so the real browser width picks the layer. Output
+ *   depends only on the document, so server and client render identical markup.
+ */
+export type ResponsiveMode = 'css' | 'viewport';
+export declare function resolveNodeStyles(styles?: ResponsiveStyles, viewport?: BreakpointName): React.CSSProperties;
+/** Normalized `base` layer only — the inline style used by `responsive: 'css'`. */
+export declare function resolveBaseNodeStyles(styles?: ResponsiveStyles): React.CSSProperties;
+/**
+ * Split a node's responsive styles into the always-on `base` style plus, per breakpoint,
+ * only the declarations that differ from it.
+ *
+ * Each override is computed on the *normalized* merge (`base` + layer), i.e. exactly what
+ * `resolveNodeStyles(styles, breakpoint)` returns, so CSS output reproduces the
+ * `viewport`-mode result at every width. A property present in `base` but dropped by the
+ * merge (e.g. the implicit `flex` that `width: 'fill'` adds) is reset with `unset`.
+ */
+export declare function resolveResponsiveStyleLayers(styles?: ResponsiveStyles): {
+    base: Record<string, unknown>;
+    overrides: Partial<Record<BreakpointName, Record<string, unknown>>>;
+};
+export interface ResponsiveCssRule {
+    nodeId: string;
+    declarations: string;
+}
+/**
+ * Walk a node tree and collect per-breakpoint override declarations in tree order.
+ * Shared by the runtime renderer (`collectResponsiveStylesCss`) and the static code
+ * generator, so both emit the same overrides under the same media queries (STORA-542).
+ */
+export declare function collectResponsiveCssRules(root: Node | undefined | null, options?: {
+    important?: boolean;
+}): Record<BreakpointName, ResponsiveCssRule[]>;
+/** Scoped attribute selector matching the element the renderer tags with a node id. */
+export declare function nodeAttributeSelector(nodeId: string): string;
+/**
+ * Produce the `@media` stylesheet for `responsive: 'css'` (STORA-540), e.g.
+ *
+ *   @media (max-width: 767.98px) {
+ *     [data-kubuild-node="grid-1"] { grid-template-columns: 1fr !important; }
+ *   }
+ *
+ * Declarations use `!important` because the `base` layer (and component defaults) are
+ * inline styles, which otherwise beat any stylesheet rule. Pseudo-state rules from
+ * `collectStateStylesCss` still win while active since `[…]:hover` is more specific.
+ * The output is a pure function of the document (no `window`/`matchMedia` access), so
+ * SSR and hydration produce byte-identical `<style>` content.
+ */
+export declare function collectResponsiveStylesCss(document: PageDocument | undefined | null, options?: {
+    important?: boolean;
+}): string;
+/**
+ * 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, options?: {
+    important?: boolean;
+}): 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 !important; }
+ *
+ * Scoped via the canonical `data-kubuild-node` attribute so styles never leak
+ * between nodes and work identically in editor canvas and runtime preview.
+ * Uses `!important` to reliably override the component's inline base style attributes.
+ */
+export declare function collectStateStylesCss(document: PageDocument | undefined | null, options?: {
+    important?: boolean;
+}): string;
+/**
+ * Modern baseline CSS Reset for consistent rendering across viewports and browsers.
+ */
+export declare const DEFAULT_CSS_RESET: string;
+//# sourceMappingURL=styles.d.cts.map

package/dist/styles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.cts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,gBAAgB,EAGhB,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GACvC,KAAK,CAAC,aAAa,CAuHrB;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,UAAU,CAAC;AAEhD,wBAAgB,iBAAiB,CAC/B,MAAM,CAAC,EAAE,gBAAgB,EACzB,QAAQ,GAAE,cAA0B,GACnC,KAAK,CAAC,aAAa,CAMrB;AAED,mFAAmF;AACnF,wBAAgB,qBAAqB,CAAC,MAAM,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAGpF;AAMD;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CAAC,MAAM,CAAC,EAAE,gBAAgB,GAAG;IACvE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACrE,CAsBA;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,EAC7B,OAAO,GAAE;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAO,GACpC,MAAM,CAAC,cAAc,EAAE,iBAAiB,EAAE,CAAC,CAuB7C;AAED,uFAAuF;AACvF,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAE5D;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,EACzC,OAAO,GAAE;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAwB,GACrD,MAAM,CAeR;AAkFD;;;GAGG;AACH,wBAAgB,gCAAgC,CAC9C,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EACpD,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,GAChC,MAAM,CAMR;AA2BD;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,EACzC,OAAO,GAAE;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAwB,GACrD,MAAM,CAwBR;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,QA0BtB,CAAC"}

package/dist/theme.d.cts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import { type PageDocument, type Theme } from '@kubuild/schema';
+import type { RenderContext } from '@kubuild/core';
+/**
+ * Document theme (STORA-551) with the host's runtime override (`RenderContext.theme`, e.g. a
+ * per-tenant brand color) layered on top. Neither input is mutated.
+ */
+export declare function resolveRuntimeTheme(document: Pick<PageDocument, 'theme'> | undefined | null, context?: Pick<RenderContext, 'theme'> | null): Theme;
+/**
+ * Theme tokens as a React inline-style object of CSS custom properties
+ * (`{ '--kb-color-primary': '#2563eb' }`). Unsafe keys/values are dropped, so this is safe
+ * to call on an unvalidated host override.
+ */
+export declare function themeToCssProperties(theme: Partial<Theme> | undefined | null): React.CSSProperties;
+/**
+ * Theme tokens as CSS declarations (`--kb-color-primary: #2563eb;`) for a stylesheet rule,
+ * e.g. `:root { ... }` in generated/exported HTML.
+ */
+export declare function themeToCssDeclarations(theme: Partial<Theme> | undefined | null): string;
+//# sourceMappingURL=theme.d.cts.map

package/dist/theme.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.cts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAoC,KAAK,YAAY,EAAE,KAAK,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAClG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,IAAI,EACxD,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,IAAI,GAC5C,KAAK,CAEP;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,GAAG,IAAI,GACvC,KAAK,CAAC,aAAa,CAMrB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAIvF"}

package/dist/tracking/tracking-manager.d.cts

@@ -0,0 +1,40 @@
+import type { TrackingConfig } from '@kubuild/schema';
+declare global {
+    interface Window {
+        fbq?: (...args: unknown[]) => void;
+        _fbq?: unknown;
+        gtag?: (...args: unknown[]) => void;
+        dataLayer?: unknown[];
+        ttq?: {
+            track: (event: string, params?: Record<string, unknown>, options?: Record<string, unknown>) => void;
+            page: () => void;
+            load: (pixelId: string) => void;
+            [key: string]: unknown;
+        };
+    }
+}
+/**
+ * Injects official client-side tracking scripts (Meta Pixel, Google Analytics 4, TikTok Pixel).
+ * Returns a cleanup function that removes injected scripts when component unmounts or tracking is disabled.
+ */
+export declare function injectTrackingScripts(config?: TrackingConfig): () => void;
+/**
+ * Removes all injected tracking scripts from the document head.
+ */
+export declare function removeTrackingScripts(): void;
+/**
+ * Official Meta Pixel Standard Events.
+ * Any other event name should be dispatched using `fbq('trackCustom', ...)`
+ */
+export declare const META_STANDARD_EVENTS: Set<string>;
+export interface FireBrowserPixelOptions {
+    eventId?: string;
+    config?: TrackingConfig;
+    provider?: 'all' | 'meta' | 'google' | 'gtm' | 'tiktok' | 'custom' | string;
+    eventType?: 'standard' | 'custom';
+}
+/**
+ * Dispatches an event to the browser pixel scripts if installed and active.
+ */
+export declare function fireBrowserPixel(eventName: string, params?: Record<string, unknown>, options?: FireBrowserPixelOptions): void;
+//# sourceMappingURL=tracking-manager.d.cts.map

package/dist/tracking/tracking-manager.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-manager.d.cts","sourceRoot":"","sources":["../../src/tracking/tracking-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;QACnC,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;QACpC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;QACtB,GAAG,CAAC,EAAE;YACJ,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC9B,IAAI,CAAC;YACV,IAAI,EAAE,MAAM,IAAI,CAAC;YACjB,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;YAChC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH;CACF;AAID;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,MAAM,IAAI,CA4JzE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAM5C;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,aAmB/B,CAAC;AAEH,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC5E,SAAS,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,OAAO,CAAC,EAAE,uBAAuB,GAChC,IAAI,CA0EN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubuild/renderer",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Pure recursive React renderer for KUBUILD page documents",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,9 +8,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "files": [
@@ -41,9 +46,9 @@
   "homepage": "https://github.com/kustora/kubuild#readme",
   "dependencies": {
     "lucide-react": "^1.33.0",
-    "@kubuild/core": "0.8.1",
-    "@kubuild/schema": "0.8.1",
-    "@kubuild/components": "0.8.1"
+    "@kubuild/components": "0.8.2",
+    "@kubuild/schema": "0.8.2",
+    "@kubuild/core": "0.8.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -59,7 +64,7 @@
     "vitest": "^3.0.5"
   },
   "scripts": {
-    "build": "tsup && tsc --emitDeclarationOnly",
+    "build": "tsup && tsc --emitDeclarationOnly && node ../../scripts/emit-cjs-dts.mjs",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",