@kubuild/renderer 0.7.0 → 0.8.1

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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,YAAY,EACZ,IAAI,EAML,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGlF,OAAO,EACL,aAAa,EAGb,UAAU,EACX,MAAM,mBAAmB,CAAC;AAmB3B,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1C,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9G,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChG,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,cAAc,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,aAAa,KAAK,KAAK,CAAC,YAAY,CAAC;CAC5G;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAyClG;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAkE7F;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA8QjG;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAyE3F;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAwG5F;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAe7D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA2N5F;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAqX3F;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAiHjG;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAgCxF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAuCvF"}
+{"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.ts

@@ -1,4 +1,4 @@
-import { PageDocument, ResponsiveStyles } from '@kubuild/schema';
+import { PageDocument, Node, ResponsiveStyles, type BreakpointName } from '@kubuild/schema';
 import React from 'react';
 /**
  * Normalizes CSS and Kubuild style properties into standard, valid React.CSSProperties.
@@ -11,7 +11,63 @@ import React from 'react';
  * - Linear and radial gradients: gradient, backgroundGradient, backgroundImage
  */
 export declare function normalizeStyleObject(raw: Record<string, unknown> | undefined): React.CSSProperties;
-export declare function resolveNodeStyles(styles?: ResponsiveStyles, viewport?: 'desktop' | 'tablet' | 'mobile'): 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.

package/dist/styles.d.ts.map

@@ -1 +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;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GACvC,KAAK,CAAC,aAAa,CAuHrB;AAED,wBAAgB,iBAAiB,CAC/B,MAAM,CAAC,EAAE,gBAAgB,EACzB,QAAQ,GAAE,SAAS,GAAG,QAAQ,GAAG,QAAoB,GACpD,KAAK,CAAC,aAAa,CAMrB;AAiBD;;;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,CAmBR;AAED;;;;;;;;;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"}
+{"version":3,"file":"styles.d.ts","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.ts

@@ -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.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubuild/renderer",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Pure recursive React renderer for KUBUILD page documents",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -41,19 +41,19 @@
   "homepage": "https://github.com/kustora/kubuild#readme",
   "dependencies": {
     "lucide-react": "^1.33.0",
-    "@kubuild/components": "0.7.0",
-    "@kubuild/core": "0.7.0",
-    "@kubuild/schema": "0.7.0"
+    "@kubuild/core": "0.8.1",
+    "@kubuild/schema": "0.8.1",
+    "@kubuild/components": "0.8.1"
   },
   "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",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tsup": "^8.3.6",
     "typescript": "^6.0.0",
     "vitest": "^3.0.5"