@kubuild/renderer 0.0.1

package/dist/index.cjs

@@ -0,0 +1,2084 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ComponentErrorBoundary: () => ComponentErrorBoundary,
+  DEFAULT_BREAKPOINTS: () => DEFAULT_BREAKPOINTS,
+  DEFAULT_CSS_RESET: () => DEFAULT_CSS_RESET,
+  DEFAULT_RENDER_CONTEXT: () => DEFAULT_RENDER_CONTEXT,
+  DEFAULT_VIEWPORT_CONFIGS: () => DEFAULT_VIEWPORT_CONFIGS,
+  EditableText: () => EditableText,
+  HtmlEmbedView: () => HtmlEmbedView,
+  KubuildPreviewViewport: () => KubuildPreviewViewport,
+  KubuildRenderer: () => KubuildRenderer,
+  NodeRenderer: () => NodeRenderer,
+  PreviewViewportAdapter: () => PreviewViewportAdapter,
+  RenderContextProvider: () => RenderContextProvider,
+  collectStateStylesCss: () => collectStateStylesCss,
+  createMinimalRenderContext: () => createMinimalRenderContext,
+  createRenderContext: () => createRenderContext,
+  dispatchAction: () => dispatchAction,
+  isActionRegistered: () => isActionRegistered,
+  resolveActionPayload: () => resolveActionPayload,
+  resolveActionPayloadDetailed: () => resolveActionPayloadDetailed,
+  resolveAssetSync: () => resolveAssetSync,
+  resolveNodeStyles: () => resolveNodeStyles,
+  resolveVariable: () => resolveVariable,
+  resolveViewportContainerStyle: () => resolveViewportContainerStyle,
+  resolveViewportDimensions: () => resolveViewportDimensions,
+  resolveViewportFromWidth: () => resolveViewportFromWidth,
+  styleDefinitionToCssDeclarations: () => styleDefinitionToCssDeclarations,
+  transformEmbedHtml: () => transformEmbedHtml,
+  useRenderContext: () => useRenderContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/renderer.tsx
+var import_react3 = require("react");
+var import_schema3 = require("@kubuild/schema");
+var import_components2 = require("@kubuild/components");
+
+// src/render-context.tsx
+var import_react = require("react");
+var import_core = require("@kubuild/core");
+var import_schema = require("@kubuild/schema");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_RENDER_CONTEXT = Object.freeze({});
+var RenderContextReact = (0, import_react.createContext)(DEFAULT_RENDER_CONTEXT);
+function createRenderContext(options) {
+  if (!options) {
+    return DEFAULT_RENDER_CONTEXT;
+  }
+  const frozenVariables = options.variables ? Object.freeze({ ...options.variables }) : void 0;
+  return Object.freeze({
+    variables: frozenVariables,
+    ...options.assetProvider ? { assetProvider: options.assetProvider } : {},
+    ...options.actionRegistry ? { actionRegistry: options.actionRegistry } : {},
+    ...options.onDiagnostic ? { onDiagnostic: options.onDiagnostic } : {}
+  });
+}
+function createMinimalRenderContext(options) {
+  const assetsMap = new Map(Object.entries(options?.assets ?? {}));
+  const actionsMap = new Map(Object.entries(options?.actions ?? {}));
+  const assetProvider = {
+    resolve: (assetIdOrUri) => {
+      return assetsMap.get(assetIdOrUri) || assetIdOrUri;
+    }
+  };
+  const actionRegistry = {
+    get: (type) => actionsMap.get(type),
+    register: (type, handler) => {
+      actionsMap.set(type, handler);
+    },
+    unregister: (type) => {
+      actionsMap.delete(type);
+    }
+  };
+  return createRenderContext({
+    variables: options?.variables,
+    assetProvider,
+    actionRegistry,
+    onDiagnostic: options?.onDiagnostic
+  });
+}
+var RenderContextProvider = ({ value, children }) => {
+  const contextValue = (0, import_react.useMemo)(() => value || DEFAULT_RENDER_CONTEXT, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderContextReact.Provider, { value: contextValue, children });
+};
+function useRenderContext() {
+  return (0, import_react.useContext)(RenderContextReact);
+}
+function resolveAssetSync(assetProvider, assetIdOrUri) {
+  if (!assetProvider || !assetIdOrUri) {
+    return void 0;
+  }
+  try {
+    const result = assetProvider.resolve(assetIdOrUri);
+    return typeof result === "string" ? result : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function resolveVariable(context, value) {
+  if (value === null || value === void 0) {
+    return value;
+  }
+  if ((0, import_schema.isVariableBinding)(value)) {
+    return (0, import_core.resolveBinding)(value, context).value;
+  }
+  if (typeof value === "string" && value.includes("{{")) {
+    return value.replace(/\{\{\s*([\w.-]+)\s*\}\}/g, (match, key) => {
+      const outcome = (0, import_core.resolveBinding)({ key }, context);
+      if (outcome.status === "resolved") {
+        return String(outcome.value);
+      }
+      return match;
+    });
+  }
+  return value;
+}
+function resolveActionPayloadDetailed(context, payload) {
+  if (!payload || typeof payload !== "object") {
+    return { value: payload, invalidPaths: [] };
+  }
+  const invalidPaths = [];
+  const resolveValueRecursively = (val, path) => {
+    if (val === null || val === void 0) {
+      return val;
+    }
+    if ((0, import_schema.isVariableBinding)(val)) {
+      const outcome = (0, import_core.resolveBinding)(val, context);
+      if (outcome.status === "empty") {
+        invalidPaths.push(path);
+      }
+      return outcome.value;
+    }
+    if (typeof val === "string") {
+      if (val.includes("{{")) {
+        return val.replace(/\{\{\s*([\w.-]+)\s*\}\}/g, (match, key) => {
+          const outcome = (0, import_core.resolveBinding)({ key }, context);
+          if (outcome.status !== "resolved") {
+            invalidPaths.push(path);
+            return match;
+          }
+          return String(outcome.value);
+        });
+      }
+      return val;
+    }
+    if (Array.isArray(val)) {
+      return val.map((item, index) => resolveValueRecursively(item, `${path}[${index}]`));
+    }
+    if (typeof val === "object") {
+      const copy = {};
+      for (const [k, v] of Object.entries(val)) {
+        copy[k] = resolveValueRecursively(v, path ? `${path}.${k}` : k);
+      }
+      return copy;
+    }
+    return val;
+  };
+  const resolved = {};
+  for (const [key, value] of Object.entries(payload)) {
+    resolved[key] = resolveValueRecursively(value, key);
+  }
+  return { value: resolved, invalidPaths };
+}
+function resolveActionPayload(context, payload) {
+  return resolveActionPayloadDetailed(context, payload).value;
+}
+function isActionRegistered(actionRegistry, actionType) {
+  if (!actionRegistry || !actionType) {
+    return false;
+  }
+  return Boolean(actionRegistry.get(actionType));
+}
+function dispatchAction(options) {
+  const { action, nodeId, document, context, onDiagnostic } = options;
+  if (!(0, import_schema.isActionBinding)(action)) {
+    const diagnostic = {
+      code: "INVALID_ACTION_PAYLOAD",
+      actionType: typeof action?.type === "string" ? action.type : "unknown",
+      nodeId,
+      message: `Invalid action binding on node ${nodeId || "unknown"}.`
+    };
+    onDiagnostic?.(diagnostic);
+    context?.onDiagnostic?.(diagnostic);
+    return false;
+  }
+  const handler = context?.actionRegistry?.get(action.type);
+  if (!handler) {
+    const diagnostic = {
+      code: "UNKNOWN_ACTION",
+      actionType: action.type,
+      nodeId,
+      message: `No action handler registered for action type "${action.type}".`
+    };
+    onDiagnostic?.(diagnostic);
+    context?.onDiagnostic?.(diagnostic);
+    return false;
+  }
+  const { value: resolvedPayload, invalidPaths } = resolveActionPayloadDetailed(context, action.payload);
+  if (invalidPaths.length > 0) {
+    const diagnostic = {
+      code: "INVALID_ACTION_BINDING",
+      actionType: action.type,
+      nodeId,
+      message: `Action "${action.type}" payload has unresolved binding path(s) [${invalidPaths.join(
+        ", "
+      )}] on node ${nodeId || "unknown"}; handler was not invoked.`,
+      invalidPaths
+    };
+    onDiagnostic?.(diagnostic);
+    context?.onDiagnostic?.(diagnostic);
+    return false;
+  }
+  const executionContext = {
+    nodeId,
+    document,
+    variables: context?.variables
+  };
+  try {
+    const result = handler(resolvedPayload, executionContext);
+    if (result && typeof result.catch === "function") {
+      result.catch((error) => {
+        const diagnostic = {
+          code: "ACTION_EXECUTION_ERROR",
+          actionType: action.type,
+          nodeId,
+          message: `Action "${action.type}" handler threw an asynchronous error: ${error instanceof Error ? error.message : String(error)}`,
+          error
+        };
+        onDiagnostic?.(diagnostic);
+        context?.onDiagnostic?.(diagnostic);
+      });
+    }
+    return true;
+  } catch (error) {
+    const diagnostic = {
+      code: "ACTION_EXECUTION_ERROR",
+      actionType: action.type,
+      nodeId,
+      message: `Action "${action.type}" handler threw a synchronous error: ${error instanceof Error ? error.message : String(error)}`,
+      error
+    };
+    onDiagnostic?.(diagnostic);
+    context?.onDiagnostic?.(diagnostic);
+    return false;
+  }
+}
+
+// src/renderer.tsx
+var import_core3 = require("@kubuild/core");
+var import_lucide_react = require("lucide-react");
+
+// src/styles.ts
+function resolveNodeStyles(styles, viewport = "desktop") {
+  if (!styles) return {};
+  const base = styles.base || {};
+  const override = styles[viewport] || {};
+  return { ...base, ...override };
+}
+function escapeCssValue(value) {
+  return String(value).replace(/[{};]+/g, "");
+}
+function escapeCssIdent(value) {
+  return value.replace(/["\\\]]/g, "\\$&");
+}
+function styleDefinitionToCssDeclarations(styleDefinition) {
+  if (!styleDefinition || typeof styleDefinition !== "object") return "";
+  const declarations = [];
+  for (const [key, value] of Object.entries(styleDefinition)) {
+    if (value === null || value === void 0 || value === "") continue;
+    const property = key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+    declarations.push(`${property}: ${escapeCssValue(value)};`);
+  }
+  return declarations.join(" ");
+}
+function collectStateStylesCss(document) {
+  if (!document?.document) return "";
+  const rules = [];
+  const walk = (node) => {
+    const states = node.styles?.states;
+    if (states && typeof states === "object") {
+      for (const [state, styleDefinition] of Object.entries(states)) {
+        const declarations = styleDefinitionToCssDeclarations(
+          styleDefinition
+        );
+        if (!declarations) continue;
+        const safeState = /^::?[a-zA-Z-]+$/.test(state) ? state : null;
+        if (!safeState) continue;
+        rules.push(`[data-kubuild-node="${escapeCssIdent(node.id)}"]${safeState} { ${declarations} }`);
+      }
+    }
+    node.children?.forEach(walk);
+  };
+  walk(document.document);
+  return rules.join("\n");
+}
+var DEFAULT_CSS_RESET = `
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+`.trim();
+
+// src/error-boundary.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ComponentErrorBoundary = class extends import_react2.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      const { nodeId, componentType, mode = "runtime" } = this.props;
+      const errorMessage = this.state.error?.message || "Unknown render error";
+      if (mode === "editor") {
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            "data-kubuild-node": nodeId,
+            "data-kubuild-error": componentType,
+            style: {
+              padding: "12px 16px",
+              margin: "4px 0",
+              backgroundColor: "#fef2f2",
+              border: "1px solid #ef4444",
+              borderRadius: "6px",
+              color: "#b91c1c",
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              fontSize: "13px",
+              lineHeight: "1.4"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: [
+                "\u26A0\uFE0F Component Render Error: <",
+                componentType,
+                ">"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: "11px", color: "#7f1d1d", wordBreak: "break-all" }, children: [
+                "Node ID: ",
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: nodeId }),
+                " \u2014 ",
+                errorMessage
+              ] })
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          "data-kubuild-node": nodeId,
+          "data-kubuild-error": componentType,
+          style: { display: "none" },
+          "aria-hidden": "true"
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/prop-resolution.ts
+var import_schema2 = require("@kubuild/schema");
+var import_components = require("@kubuild/components");
+var import_core2 = require("@kubuild/core");
+function emptyValueFor(primitiveType) {
+  switch (primitiveType) {
+    case "string":
+      return "";
+    case "number":
+      return 0;
+    case "boolean":
+      return false;
+  }
+}
+function resolveBindableField(node, field, definition, context, diagnostics) {
+  const rawValue = node.props?.[field.name];
+  const expectedType = (0, import_components.primitiveTypeForField)(field);
+  if (expectedType === void 0 || rawValue === void 0) {
+    return rawValue;
+  }
+  const fallbackValue = definition.defaultProps?.[field.name] ?? field.defaultValue ?? emptyValueFor(expectedType);
+  if ((0, import_schema2.isVariableBinding)(rawValue)) {
+    const outcome = (0, import_core2.resolveBinding)(rawValue, context);
+    if (typeof outcome.value === expectedType) {
+      return outcome.value;
+    }
+    diagnostics.push({
+      code: "INCOMPATIBLE_BINDING_TYPE",
+      nodeId: node.id,
+      propName: field.name,
+      expectedType,
+      actualType: typeof outcome.value,
+      message: `Prop "${field.name}" on node "${node.id}" expected a ${expectedType} but resolved binding "${rawValue.key}" produced a ${typeof outcome.value}.`
+    });
+    return fallbackValue;
+  }
+  if (expectedType === "string" && typeof rawValue === "string" && rawValue.includes("{{")) {
+    return resolveVariable(context, rawValue);
+  }
+  return rawValue;
+}
+function resolvePropsForNode(node, definition, context) {
+  const rawProps = node.props || {};
+  if (!definition || !definition.propFields || definition.propFields.length === 0) {
+    return { props: rawProps, diagnostics: [] };
+  }
+  const diagnostics = [];
+  const resolved = { ...rawProps };
+  for (const field of definition.propFields) {
+    if ((0, import_components.primitiveTypeForField)(field) === void 0) {
+      continue;
+    }
+    resolved[field.name] = resolveBindableField(node, field, definition, context, diagnostics);
+  }
+  return { props: resolved, diagnostics };
+}
+
+// src/renderer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function toPascalCase(str) {
+  if (!str) return "";
+  return str.replace(/[-_](\w)/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase());
+}
+function getYouTubeId(url) {
+  if (!url || typeof url !== "string") return null;
+  const match = url.match(
+    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i
+  );
+  return match ? match[1] : null;
+}
+function getVimeoId(url) {
+  if (!url || typeof url !== "string") return null;
+  const match = url.match(
+    /(?:vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|))(\d+)/i
+  );
+  return match ? match[3] : null;
+}
+function aspectRatioToCss(ratio) {
+  if (ratio === "16:9") return "16 / 9";
+  if (ratio === "4:3") return "4 / 3";
+  if (ratio === "1:1") return "1 / 1";
+  if (ratio === "9:16") return "9 / 16";
+  if (typeof ratio === "string" && ratio !== "auto") return ratio.replace(":", " / ");
+  return void 0;
+}
+var EditableText = ({
+  as = "p",
+  id,
+  className,
+  style,
+  value,
+  isEditable,
+  nodeId,
+  onClick,
+  onChange,
+  ...rest
+}) => {
+  const isEditingRef = (0, import_react3.useRef)(false);
+  const Tag = as;
+  if (!isEditable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Tag,
+      {
+        id,
+        className,
+        style,
+        onClick,
+        "data-kubuild-node": nodeId,
+        ...rest,
+        children: value
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Tag,
+    {
+      id,
+      className,
+      style: {
+        ...style,
+        outline: "none",
+        cursor: "text"
+      },
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      "data-kubuild-node": nodeId,
+      onClick: (e) => {
+        onClick?.(e);
+      },
+      onFocus: () => {
+        isEditingRef.current = true;
+      },
+      onInput: (e) => {
+        const text = e.currentTarget.textContent ?? "";
+        onChange?.(text, false);
+      },
+      onBlur: (e) => {
+        isEditingRef.current = false;
+        const text = e.currentTarget.textContent ?? "";
+        onChange?.(text, true);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.currentTarget.blur();
+        }
+      },
+      ...rest,
+      children: value
+    }
+  );
+};
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react3.useLayoutEffect : import_react3.useEffect;
+function transformEmbedHtml(rawHtml) {
+  if (!rawHtml) return "";
+  return rawHtml.replace(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi, (_match, attrs, cssContent) => {
+    let transformedCss = cssContent;
+    transformedCss = transformedCss.replace(/(^|[\s,{}])body(?=[\s,{])/g, "$1:host, body");
+    transformedCss = transformedCss.replace(/(^|[\s,{}])html(?=[\s,{])/g, "$1:host, html");
+    return `<style${attrs}>
+:host { display: block; }
+${transformedCss}</style>`;
+  });
+}
+var HtmlEmbedView = ({
+  id,
+  style,
+  onClick,
+  dataKubuildNode,
+  html,
+  role
+}) => {
+  const hostRef = (0, import_react3.useRef)(null);
+  const shadowRootRef = (0, import_react3.useRef)(null);
+  const scopedHtml = (0, import_react3.useMemo)(() => transformEmbedHtml(html), [html]);
+  useIsomorphicLayoutEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    if (typeof host.attachShadow === "function") {
+      if (!shadowRootRef.current) {
+        if (host.shadowRoot) {
+          shadowRootRef.current = host.shadowRoot;
+        } else {
+          try {
+            shadowRootRef.current = host.attachShadow({ mode: "open" });
+          } catch {
+            shadowRootRef.current = host.shadowRoot;
+          }
+        }
+      }
+      if (shadowRootRef.current) {
+        shadowRootRef.current.innerHTML = scopedHtml;
+        return;
+      }
+    }
+    host.innerHTML = scopedHtml;
+  }, [scopedHtml]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref: hostRef,
+      id,
+      style,
+      onClick,
+      "data-kubuild-node": dataKubuildNode,
+      role,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "template",
+        {
+          shadowrootmode: "open",
+          dangerouslySetInnerHTML: { __html: scopedHtml }
+        }
+      )
+    }
+  );
+};
+function NodeRenderer({
+  node,
+  document,
+  registry,
+  context: propContext,
+  viewport = "desktop",
+  mode = "runtime",
+  onNodeClick,
+  onDiagnostic,
+  onActionDispatch,
+  onNodePropChange,
+  instanceSuffix = ""
+}) {
+  const context = propContext || DEFAULT_RENDER_CONTEXT;
+  const styles = resolveNodeStyles(node.styles, viewport);
+  const props = node.props || {};
+  const definition = registry.get(node.type);
+  const domId = instanceSuffix ? `${node.id}${instanceSuffix}` : node.id;
+  const { props: resolvedProps, diagnostics } = resolvePropsForNode(node, definition, context);
+  diagnostics.forEach((diagnostic) => {
+    onDiagnostic?.(diagnostic);
+    context?.onDiagnostic?.(diagnostic);
+  });
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (onNodeClick) {
+      onNodeClick(node.id, e);
+    }
+    if (props.action && !props.disabled) {
+      dispatchAction({
+        action: props.action,
+        nodeId: node.id,
+        document,
+        context,
+        onDiagnostic
+      });
+      if (onActionDispatch && (0, import_schema3.isActionBinding)(props.action)) {
+        onActionDispatch(props.action.type, resolveActionPayload(context, props.action.payload), node.id);
+      }
+    }
+  };
+  const childrenElements = node.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    NodeRenderer,
+    {
+      node: child,
+      document,
+      registry,
+      context,
+      viewport,
+      mode,
+      onNodeClick,
+      onDiagnostic,
+      onActionDispatch,
+      onNodePropChange,
+      instanceSuffix
+    },
+    `${child.id}${instanceSuffix}`
+  ));
+  const renderNodeContent = () => {
+    if (definition?.renderer && typeof definition.renderer === "function") {
+      const CustomRenderer = definition.renderer;
+      try {
+        if (typeof CustomRenderer === "function" && !CustomRenderer.prototype?.isReactComponent) {
+          return CustomRenderer({
+            node,
+            document,
+            props: resolvedProps,
+            styles,
+            context,
+            children: childrenElements,
+            onClick: handleClick
+          });
+        }
+      } catch (err) {
+        throw err;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        CustomRenderer,
+        {
+          node,
+          document,
+          props: resolvedProps,
+          styles,
+          context,
+          onClick: handleClick,
+          children: childrenElements
+        }
+      );
+    }
+    switch (node.type) {
+      case "page":
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: domId, style: styles, onClick: handleClick, "data-kubuild-node": node.id, children: childrenElements });
+      case "section":
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "section",
+          {
+            id: domId,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+            children: childrenElements
+          }
+        );
+      case "container":
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            id: domId,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+            children: childrenElements
+          }
+        );
+      case "columns":
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            id: domId,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+            children: childrenElements
+          }
+        );
+      case "heading": {
+        const rawLevel = typeof resolvedProps.level === "number" ? resolvedProps.level : typeof props.level === "number" ? props.level : 2;
+        const clampedLevel = Math.min(Math.max(rawLevel, 1), 6);
+        const text = String(resolvedProps.text ?? "");
+        const Tag = `h${clampedLevel}`;
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          EditableText,
+          {
+            as: Tag,
+            id: domId,
+            style: styles,
+            value: text,
+            isEditable,
+            nodeId: node.id,
+            onClick: handleClick,
+            onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
+            "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0
+          }
+        );
+      }
+      case "text": {
+        const content2 = String(resolvedProps.content ?? "");
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.content);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          EditableText,
+          {
+            as: "p",
+            id: domId,
+            style: styles,
+            value: content2,
+            isEditable,
+            nodeId: node.id,
+            onClick: handleClick,
+            onChange: (val, isBlur) => onNodePropChange?.(node.id, "content", val, isBlur),
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+          }
+        );
+      }
+      case "paragraph": {
+        const text = String(resolvedProps.text ?? resolvedProps.content ?? props.text ?? props.content ?? "");
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text) && !(0, import_schema3.isVariableBinding)(props.content);
+        const propName = props.content !== void 0 ? "content" : "text";
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          EditableText,
+          {
+            as: "p",
+            id: domId,
+            style: styles,
+            value: text,
+            isEditable,
+            nodeId: node.id,
+            onClick: handleClick,
+            onChange: (val, isBlur) => onNodePropChange?.(node.id, propName, val, isBlur),
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+          }
+        );
+      }
+      case "link": {
+        const text = String(resolvedProps.text ?? props.text ?? "");
+        const rawHref = typeof resolvedProps.href === "string" ? resolvedProps.href : typeof props.href === "string" ? props.href : void 0;
+        const href = rawHref ? (0, import_core3.sanitizeUrl)(rawHref, "#") : "#";
+        const rawTarget = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
+        const rawRel = typeof resolvedProps.rel === "string" ? resolvedProps.rel : void 0;
+        const rel = rawTarget === "_blank" && !rawRel ? "noopener noreferrer" : rawRel;
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
+        if (isEditable) {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            EditableText,
+            {
+              as: "a",
+              id: domId,
+              href: void 0,
+              target: rawTarget,
+              rel,
+              style: styles,
+              value: text,
+              isEditable,
+              nodeId: node.id,
+              onClick: handleClick,
+              onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
+              role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "a",
+          {
+            id: domId,
+            href,
+            target: rawTarget,
+            rel,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+            children: text
+          }
+        );
+      }
+      case "blockquote": {
+        const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : props.text !== void 0 ? String(props.text) : "";
+        const rawCite = typeof resolvedProps.cite === "string" ? resolvedProps.cite : typeof props.cite === "string" ? props.cite : void 0;
+        const safeCite = rawCite ? (0, import_core3.sanitizeUrl)(rawCite) : void 0;
+        const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
+        if (hasChildren) {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "blockquote",
+            {
+              id: domId,
+              cite: safeCite,
+              style: styles,
+              onClick: handleClick,
+              "data-kubuild-node": node.id,
+              role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+              children: [
+                text ? isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  EditableText,
+                  {
+                    as: "p",
+                    value: text,
+                    isEditable,
+                    nodeId: node.id,
+                    onClick: handleClick,
+                    onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: text }) : null,
+                childrenElements
+              ]
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          EditableText,
+          {
+            as: "blockquote",
+            id: domId,
+            cite: safeCite,
+            style: styles,
+            value: text,
+            isEditable,
+            nodeId: node.id,
+            onClick: handleClick,
+            onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+          }
+        );
+      }
+      case "badge": {
+        const text = String(resolvedProps.text ?? props.text ?? "Badge");
+        const variant = typeof resolvedProps.variant === "string" ? resolvedProps.variant : "default";
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          EditableText,
+          {
+            as: "span",
+            id: domId,
+            style: styles,
+            value: text,
+            isEditable,
+            nodeId: node.id,
+            "data-variant": variant,
+            onClick: handleClick,
+            onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+          }
+        );
+      }
+      case "code-block": {
+        const code = String(resolvedProps.code ?? props.code ?? "");
+        const language = typeof resolvedProps.language === "string" ? resolvedProps.language : typeof props.language === "string" ? props.language : void 0;
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.code);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "pre",
+          {
+            id: domId,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            "data-language": language,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              EditableText,
+              {
+                as: "code",
+                className: language ? `language-${language}` : void 0,
+                style: { fontFamily: "inherit", color: "inherit", display: "block", whiteSpace: "pre" },
+                value: code,
+                isEditable,
+                nodeId: node.id,
+                onClick: handleClick,
+                onChange: (val, isBlur) => onNodePropChange?.(node.id, "code", val, isBlur)
+              }
+            )
+          }
+        );
+      }
+      case "list": {
+        const rawTag = resolvedProps.tag;
+        const Tag = rawTag === "ol" ? "ol" : "ul";
+        const rawListStyle = resolvedProps.listStyleType;
+        const listStyleType = rawListStyle === "custom-icon" ? "none" : rawListStyle;
+        const listStyles = {
+          ...styles,
+          ...listStyleType ? { listStyleType } : {}
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Tag,
+          {
+            id: domId,
+            style: listStyles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            "data-list-style": rawListStyle,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+            children: childrenElements
+          }
+        );
+      }
+      case "list-item": {
+        const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : "";
+        const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
+        if (hasChildren) {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "li",
+            {
+              id: domId,
+              style: styles,
+              onClick: handleClick,
+              "data-kubuild-node": node.id,
+              role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+              children: [
+                text ? isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  EditableText,
+                  {
+                    as: "span",
+                    value: text,
+                    isEditable,
+                    nodeId: node.id,
+                    onClick: handleClick,
+                    onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: text }) : null,
+                childrenElements
+              ]
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          EditableText,
+          {
+            as: "li",
+            id: domId,
+            style: styles,
+            value: text,
+            isEditable,
+            nodeId: node.id,
+            onClick: handleClick,
+            onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+          }
+        );
+      }
+      case "table": {
+        const isStriped = resolvedProps.striped === true;
+        const isBordered = resolvedProps.bordered !== false;
+        const isCompact = resolvedProps.compact === true;
+        const tableStyles = {
+          width: "100%",
+          borderCollapse: "collapse",
+          ...styles,
+          ...isBordered ? { border: styles.border || "1px solid #e2e8f0" } : {}
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "table",
+          {
+            id: domId,
+            style: tableStyles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            "data-striped": isStriped ? "true" : void 0,
+            "data-bordered": isBordered ? "true" : void 0,
+            "data-compact": isCompact ? "true" : void 0,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: childrenElements })
+          }
+        );
+      }
+      case "table-row": {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "tr",
+          {
+            id: domId,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+            children: childrenElements
+          }
+        );
+      }
+      case "table-cell": {
+        const rawTag = resolvedProps.tag;
+        const Tag = rawTag === "th" ? "th" : "td";
+        const colSpan = typeof resolvedProps.colSpan === "number" && resolvedProps.colSpan > 1 ? resolvedProps.colSpan : void 0;
+        const rowSpan = typeof resolvedProps.rowSpan === "number" && resolvedProps.rowSpan > 1 ? resolvedProps.rowSpan : void 0;
+        const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : "";
+        const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
+        const cellStyles = {
+          padding: "8px 12px",
+          border: "1px solid #e2e8f0",
+          textAlign: "left",
+          ...styles,
+          ...Tag === "th" ? {
+            fontWeight: styles.fontWeight || "600",
+            backgroundColor: styles.backgroundColor || "#f8fafc"
+          } : {}
+        };
+        if (hasChildren) {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            Tag,
+            {
+              id: domId,
+              colSpan,
+              rowSpan,
+              style: cellStyles,
+              onClick: handleClick,
+              "data-kubuild-node": node.id,
+              role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+              children: [
+                text ? isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  EditableText,
+                  {
+                    as: "span",
+                    value: text,
+                    isEditable,
+                    nodeId: node.id,
+                    onClick: handleClick,
+                    onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: text }) : null,
+                childrenElements
+              ]
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          EditableText,
+          {
+            as: Tag,
+            id: domId,
+            colSpan,
+            rowSpan,
+            style: cellStyles,
+            value: text,
+            isEditable,
+            nodeId: node.id,
+            onClick: handleClick,
+            onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+          }
+        );
+      }
+      case "image": {
+        const rawSrc = typeof resolvedProps.src === "string" && resolvedProps.src.length > 0 ? resolvedProps.src : void 0;
+        const directSrc = rawSrc ?? void 0;
+        const asset = (0, import_schema3.isAssetReference)(props.asset) ? props.asset : void 0;
+        const resolvedSrc = !directSrc && asset && context?.assetProvider ? resolveAssetSync(context.assetProvider, asset.assetId) : void 0;
+        const fallbackSrc = asset?.fallbackUrl;
+        const rawUrl = directSrc || resolvedSrc || fallbackSrc;
+        const safeSrc = rawUrl ? (0, import_core3.sanitizeUrl)(rawUrl, "", { allowBlobMedia: true }) : void 0;
+        const alt = typeof resolvedProps.alt === "string" ? resolvedProps.alt : "";
+        const loading = resolvedProps.loading === "eager" ? "eager" : "lazy";
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "img",
+          {
+            id: domId,
+            src: safeSrc || void 0,
+            alt,
+            role: alt.length === 0 ? "presentation" : void 0,
+            loading,
+            width: resolvedProps.width,
+            height: resolvedProps.height,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id
+          }
+        );
+      }
+      case "video": {
+        const rawSrc = typeof resolvedProps.src === "string" ? resolvedProps.src : typeof props.src === "string" ? props.src : "";
+        const provider = typeof resolvedProps.provider === "string" ? resolvedProps.provider : typeof props.provider === "string" ? props.provider : "auto";
+        const rawPoster = typeof resolvedProps.poster === "string" ? resolvedProps.poster : typeof props.poster === "string" ? props.poster : void 0;
+        const poster = rawPoster ? (0, import_core3.sanitizeUrl)(rawPoster) : void 0;
+        const controls = resolvedProps.controls !== false && props.controls !== false;
+        const autoplay = resolvedProps.autoplay === true || props.autoplay === true;
+        const loop = resolvedProps.loop === true || props.loop === true;
+        const muted = resolvedProps.muted === true || props.muted === true;
+        const aspectRatio = aspectRatioToCss(resolvedProps.aspectRatio ?? props.aspectRatio ?? "16:9");
+        const ytId = provider === "youtube" ? getYouTubeId(rawSrc) || rawSrc : provider === "auto" ? getYouTubeId(rawSrc) : null;
+        const vimeoId = provider === "vimeo" ? getVimeoId(rawSrc) || rawSrc : provider === "auto" ? getVimeoId(rawSrc) : null;
+        const videoStyles = {
+          width: "100%",
+          maxWidth: "100%",
+          display: "block",
+          ...aspectRatio ? { aspectRatio } : {},
+          ...styles
+        };
+        if (ytId) {
+          const autoplayParam = autoplay ? "1" : "0";
+          const loopParam = loop ? `1&playlist=${ytId}` : "0";
+          const muteParam = muted ? "1" : "0";
+          const controlsParam = controls ? "1" : "0";
+          const embedUrl = `https://www.youtube.com/embed/${ytId}?autoplay=${autoplayParam}&loop=${loopParam}&mute=${muteParam}&controls=${controlsParam}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              id: domId,
+              style: { ...videoStyles, position: "relative", overflow: "hidden" },
+              onClick: handleClick,
+              "data-kubuild-node": node.id,
+              "data-video-provider": "youtube",
+              role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "iframe",
+                {
+                  src: embedUrl,
+                  title: "YouTube video",
+                  style: { width: "100%", height: "100%", border: "none", minHeight: "240px" },
+                  allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+                  allowFullScreen: true
+                }
+              )
+            }
+          );
+        }
+        if (vimeoId) {
+          const autoplayParam = autoplay ? "1" : "0";
+          const loopParam = loop ? "1" : "0";
+          const muteParam = muted ? "1" : "0";
+          const embedUrl = `https://player.vimeo.com/video/${vimeoId}?autoplay=${autoplayParam}&loop=${loopParam}&muted=${muteParam}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              id: domId,
+              style: { ...videoStyles, position: "relative", overflow: "hidden" },
+              onClick: handleClick,
+              "data-kubuild-node": node.id,
+              "data-video-provider": "vimeo",
+              role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "iframe",
+                {
+                  src: embedUrl,
+                  title: "Vimeo video",
+                  style: { width: "100%", height: "100%", border: "none", minHeight: "240px" },
+                  allow: "autoplay; fullscreen; picture-in-picture",
+                  allowFullScreen: true
+                }
+              )
+            }
+          );
+        }
+        const safeSrc = (0, import_core3.sanitizeUrl)(rawSrc, "", { allowBlobMedia: true });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "video",
+          {
+            id: domId,
+            src: safeSrc || void 0,
+            poster: poster || void 0,
+            controls,
+            autoPlay: autoplay,
+            loop,
+            muted,
+            style: videoStyles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            "data-video-provider": "html5",
+            playsInline: true,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+          }
+        );
+      }
+      case "icon": {
+        const name = typeof resolvedProps.name === "string" && resolvedProps.name.trim().length > 0 ? resolvedProps.name.trim() : typeof props.name === "string" && props.name.trim().length > 0 ? props.name.trim() : "star";
+        const size = typeof resolvedProps.size === "number" ? resolvedProps.size : typeof props.size === "number" ? props.size : 24;
+        const color = typeof resolvedProps.color === "string" ? resolvedProps.color : typeof props.color === "string" ? props.color : "currentColor";
+        const strokeWidth = typeof resolvedProps.strokeWidth === "number" ? resolvedProps.strokeWidth : typeof props.strokeWidth === "number" ? props.strokeWidth : 2;
+        const pascalName = toPascalCase(name);
+        const IconComponent = import_lucide_react.icons[pascalName];
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            id: domId,
+            style: { display: "inline-flex", alignItems: "center", justifyContent: "center", color, ...styles },
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            "data-icon-name": name,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : "img",
+            "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : name,
+            children: IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { size, color, strokeWidth }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) })
+          }
+        );
+      }
+      case "html-embed": {
+        const rawHtml = typeof resolvedProps.html === "string" ? resolvedProps.html : typeof props.html === "string" ? props.html : "";
+        const sanitized = (0, import_core3.sanitizeHtml)(rawHtml);
+        if (mode === "editor" && !rawHtml.trim()) {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              id: domId,
+              style: {
+                padding: "16px",
+                border: "2px dashed #94a3b8",
+                borderRadius: "8px",
+                backgroundColor: "#f8fafc",
+                color: "#64748b",
+                textAlign: "center",
+                fontSize: "13px",
+                fontFamily: "sans-serif",
+                ...styles
+              },
+              onClick: handleClick,
+              "data-kubuild-node": node.id,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontWeight: 600 }, children: "</> HTML Embed" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", marginTop: "4px" }, children: "Click to configure HTML code in Inspector Panel" })
+              ]
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          HtmlEmbedView,
+          {
+            id: domId,
+            style: styles,
+            onClick: handleClick,
+            dataKubuildNode: node.id,
+            html: sanitized,
+            role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
+          }
+        );
+      }
+      case "button": {
+        const label = String(resolvedProps.label ?? "Button");
+        const disabled = resolvedProps.disabled === true;
+        const rawHref = typeof resolvedProps.href === "string" ? resolvedProps.href : void 0;
+        const href = rawHref ? (0, import_core3.sanitizeUrl)(rawHref, "#") : void 0;
+        const rawTarget = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
+        const rawRel = typeof resolvedProps.rel === "string" ? resolvedProps.rel : void 0;
+        const rel = rawTarget === "_blank" && !rawRel ? "noopener noreferrer" : rawRel;
+        const action = (0, import_schema3.isActionBinding)(props.action) ? props.action : void 0;
+        const actionResolved = action ? isActionRegistered(context?.actionRegistry, action.type) : void 0;
+        const actionAttrs = action ? { "data-kubuild-action": action.type, "data-kubuild-action-resolved": actionResolved } : {};
+        const ariaLabel = typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0;
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.label);
+        const rawButtonType = typeof resolvedProps.buttonType === "string" ? resolvedProps.buttonType : "button";
+        const buttonType = rawButtonType === "submit" || rawButtonType === "reset" ? rawButtonType : "button";
+        if (href && !disabled) {
+          if (isEditable) {
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              EditableText,
+              {
+                as: "a",
+                id: domId,
+                href: mode === "editor" ? void 0 : href,
+                target: rawTarget,
+                rel,
+                style: styles,
+                value: label,
+                isEditable,
+                nodeId: node.id,
+                onClick: handleClick,
+                onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur),
+                "aria-label": ariaLabel,
+                tabIndex: 0,
+                ...actionAttrs
+              }
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "a",
+            {
+              id: domId,
+              href,
+              target: rawTarget,
+              rel,
+              style: styles,
+              onClick: handleClick,
+              "data-kubuild-node": node.id,
+              "aria-label": ariaLabel,
+              tabIndex: 0,
+              ...actionAttrs,
+              children: label
+            }
+          );
+        }
+        if (isEditable) {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            EditableText,
+            {
+              as: "button",
+              id: domId,
+              type: mode === "editor" ? "button" : buttonType,
+              disabled,
+              "aria-disabled": disabled ? true : void 0,
+              "aria-label": ariaLabel,
+              tabIndex: disabled ? -1 : 0,
+              style: styles,
+              value: label,
+              isEditable,
+              nodeId: node.id,
+              onClick: disabled ? void 0 : handleClick,
+              onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur),
+              ...actionAttrs
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            id: domId,
+            type: mode === "editor" ? "button" : buttonType,
+            disabled,
+            "aria-disabled": disabled ? true : void 0,
+            "aria-label": ariaLabel,
+            tabIndex: disabled ? -1 : 0,
+            style: styles,
+            onClick: disabled ? void 0 : handleClick,
+            "data-kubuild-node": node.id,
+            ...actionAttrs,
+            children: label
+          }
+        );
+      }
+      case "form": {
+        const action = typeof resolvedProps.action === "string" ? resolvedProps.action : void 0;
+        const method = typeof resolvedProps.method === "string" ? resolvedProps.method : "POST";
+        const target = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
+        const autoComplete = typeof resolvedProps.autoComplete === "string" ? resolvedProps.autoComplete : void 0;
+        const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
+        const handleSubmit = (e) => {
+          if (mode === "editor") {
+            e.preventDefault();
+          }
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "form",
+          {
+            id: domId,
+            name,
+            action: action && mode !== "editor" ? (0, import_core3.sanitizeUrl)(action, "") : void 0,
+            method,
+            target,
+            autoComplete,
+            style: styles,
+            onClick: handleClick,
+            onSubmit: handleSubmit,
+            "data-kubuild-node": node.id,
+            role: "form",
+            "aria-label": name,
+            children: childrenElements
+          }
+        );
+      }
+      case "input": {
+        const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
+        const inputType = typeof resolvedProps.type === "string" ? resolvedProps.type : "text";
+        const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
+        const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
+        const required = resolvedProps.required === true;
+        const disabled = resolvedProps.disabled === true;
+        const readOnly = resolvedProps.readOnly === true;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            id: domId,
+            type: inputType,
+            name,
+            placeholder,
+            defaultValue,
+            required,
+            disabled,
+            readOnly,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id
+          }
+        );
+      }
+      case "textarea": {
+        const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
+        const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
+        const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
+        const rows = typeof resolvedProps.rows === "number" ? resolvedProps.rows : 4;
+        const required = resolvedProps.required === true;
+        const disabled = resolvedProps.disabled === true;
+        const readOnly = resolvedProps.readOnly === true;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "textarea",
+          {
+            id: domId,
+            name,
+            placeholder,
+            defaultValue,
+            rows,
+            required,
+            disabled,
+            readOnly,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id
+          }
+        );
+      }
+      case "select": {
+        const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
+        const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
+        const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
+        const required = resolvedProps.required === true;
+        const disabled = resolvedProps.disabled === true;
+        let optionsList = [];
+        const rawOptions = resolvedProps.options ?? props.options;
+        if (Array.isArray(rawOptions)) {
+          optionsList = rawOptions.map((opt) => {
+            if (typeof opt === "object" && opt !== null) {
+              const record = opt;
+              return {
+                label: String(record.label ?? record.value ?? ""),
+                value: String(record.value ?? record.label ?? "")
+              };
+            }
+            return { label: String(opt), value: String(opt) };
+          });
+        } else if (typeof rawOptions === "string") {
+          try {
+            const parsed = JSON.parse(rawOptions);
+            if (Array.isArray(parsed)) {
+              optionsList = parsed.map((opt) => {
+                if (typeof opt === "object" && opt !== null) {
+                  const record = opt;
+                  return {
+                    label: String(record.label ?? record.value ?? ""),
+                    value: String(record.value ?? record.label ?? "")
+                  };
+                }
+                return { label: String(opt), value: String(opt) };
+              });
+            }
+          } catch {
+          }
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "select",
+          {
+            id: domId,
+            name,
+            defaultValue,
+            required,
+            disabled,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            children: [
+              placeholder && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", disabled: required, children: placeholder }),
+              optionsList.map((opt, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: opt.value, children: opt.label }, `${opt.value}-${idx}`))
+            ]
+          }
+        );
+      }
+      case "checkbox": {
+        const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
+        const label = String(resolvedProps.label ?? "Checkbox");
+        const value = resolvedProps.value !== void 0 ? String(resolvedProps.value) : "yes";
+        const defaultChecked = resolvedProps.defaultChecked === true;
+        const required = resolvedProps.required === true;
+        const disabled = resolvedProps.disabled === true;
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.label);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "label",
+          {
+            id: domId,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  name,
+                  value,
+                  defaultChecked,
+                  required,
+                  disabled,
+                  style: { cursor: disabled ? "not-allowed" : "pointer" }
+                }
+              ),
+              isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                EditableText,
+                {
+                  as: "span",
+                  value: label,
+                  isEditable,
+                  nodeId: node.id,
+                  onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur)
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
+            ]
+          }
+        );
+      }
+      case "radio": {
+        const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
+        const label = String(resolvedProps.label ?? "Radio");
+        const value = resolvedProps.value !== void 0 ? String(resolvedProps.value) : "option";
+        const defaultChecked = resolvedProps.defaultChecked === true;
+        const required = resolvedProps.required === true;
+        const disabled = resolvedProps.disabled === true;
+        const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.label);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "label",
+          {
+            id: domId,
+            style: styles,
+            onClick: handleClick,
+            "data-kubuild-node": node.id,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                {
+                  type: "radio",
+                  name,
+                  value,
+                  defaultChecked,
+                  required,
+                  disabled,
+                  style: { cursor: disabled ? "not-allowed" : "pointer" }
+                }
+              ),
+              isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                EditableText,
+                {
+                  as: "span",
+                  value: label,
+                  isEditable,
+                  nodeId: node.id,
+                  onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur)
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
+            ]
+          }
+        );
+      }
+      case "collection": {
+        const sourceKey = typeof props.sourceKey === "string" ? props.sourceKey : void 0;
+        const itemAlias = typeof props.itemAlias === "string" && props.itemAlias.length > 0 ? props.itemAlias : "item";
+        const indexKey = `${itemAlias}Index`;
+        const sourceValue = sourceKey ? (0, import_core3.resolveBinding)({ key: sourceKey }, context).value : void 0;
+        if (!Array.isArray(sourceValue)) {
+          const collectionDiagnostic = {
+            code: "INVALID_COLLECTION_SOURCE",
+            nodeId: node.id,
+            propName: "sourceKey",
+            message: `Collection node "${node.id}" expected an array at variable path "${sourceKey ?? "(missing sourceKey)"}" but found ${sourceValue === void 0 ? "nothing" : typeof sourceValue}.`
+          };
+          onDiagnostic?.(collectionDiagnostic);
+          context?.onDiagnostic?.(collectionDiagnostic);
+          if (mode === "editor") {
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                id: domId,
+                "data-kubuild-node": node.id,
+                "data-kubuild-collection-invalid": node.type,
+                style: {
+                  ...styles,
+                  border: "2px dashed #f59e0b",
+                  backgroundColor: "#fffbeb",
+                  color: "#92400e",
+                  padding: "12px",
+                  borderRadius: "6px",
+                  fontFamily: "system-ui, -apple-system, sans-serif"
+                },
+                onClick: handleClick,
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, fontSize: "13px" }, children: [
+                  "\u{1F4E6} Collection: expected an array at ",
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: sourceKey ?? "(missing sourceKey)" })
+                ] })
+              }
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: domId, "data-kubuild-node": node.id, style: styles, onClick: handleClick, "aria-hidden": "true" });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: domId, "data-kubuild-node": node.id, style: styles, onClick: handleClick, children: sourceValue.map((item, index) => {
+          const childContext = {
+            ...context,
+            variables: { ...context?.variables ?? {}, [itemAlias]: item, [indexKey]: index }
+          };
+          const itemSuffix = `${instanceSuffix}--${index}`;
+          return node.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            NodeRenderer,
+            {
+              node: child,
+              document,
+              registry,
+              context: childContext,
+              viewport,
+              mode,
+              onNodeClick,
+              onDiagnostic,
+              onActionDispatch,
+              onNodePropChange,
+              instanceSuffix: itemSuffix
+            },
+            `${child.id}${itemSuffix}`
+          ));
+        }) });
+      }
+      default:
+        if (mode === "editor") {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              id: domId,
+              "data-kubuild-node": node.id,
+              "data-kubuild-unknown": node.type,
+              style: {
+                ...styles,
+                border: "2px dashed #f59e0b",
+                backgroundColor: "#fffbeb",
+                color: "#92400e",
+                padding: "12px",
+                borderRadius: "6px",
+                fontFamily: "system-ui, -apple-system, sans-serif"
+              },
+              onClick: handleClick,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, fontSize: "13px", marginBottom: "4px" }, children: [
+                  "\u{1F9E9} Unknown Component: ",
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: node.type })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "11px", color: "#b45309", marginBottom: childrenElements ? "8px" : 0 }, children: [
+                  "Node ID: ",
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: node.id })
+                ] }),
+                childrenElements
+              ]
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            id: domId,
+            "data-kubuild-node": node.id,
+            "data-kubuild-unknown": node.type,
+            style: styles,
+            onClick: handleClick,
+            children: childrenElements
+          }
+        );
+    }
+  };
+  let content;
+  try {
+    content = renderNodeContent();
+  } catch (error) {
+    if (mode === "editor") {
+      content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          "data-kubuild-node": node.id,
+          "data-kubuild-error": node.type,
+          style: {
+            padding: "12px 16px",
+            margin: "4px 0",
+            backgroundColor: "#fef2f2",
+            border: "1px solid #ef4444",
+            borderRadius: "6px",
+            color: "#b91c1c",
+            fontFamily: "system-ui, -apple-system, sans-serif",
+            fontSize: "13px",
+            lineHeight: "1.4"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: [
+              "\u26A0\uFE0F Component Render Error: <",
+              node.type,
+              ">"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "11px", color: "#7f1d1d", wordBreak: "break-all" }, children: [
+              "Node ID: ",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: node.id }),
+              " \u2014 ",
+              error instanceof Error ? error.message : String(error)
+            ] })
+          ]
+        }
+      );
+    } else {
+      content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          "data-kubuild-node": node.id,
+          "data-kubuild-error": node.type,
+          style: { display: "none" },
+          "aria-hidden": "true"
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComponentErrorBoundary, { nodeId: node.id, componentType: node.type, mode, children: content });
+}
+var KubuildRenderer = ({
+  document,
+  registry = (0, import_components2.createDefaultComponentRegistry)(),
+  context,
+  viewport = "desktop",
+  mode = "runtime",
+  className,
+  onNodeClick,
+  onDiagnostic,
+  onActionDispatch,
+  onNodePropChange
+}) => {
+  if (!document || !document.document) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: "Empty Document" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderContextProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `kubuild-canvas-root ${className || ""}`, children: [
+    (() => {
+      const css = collectStateStylesCss(document);
+      return css ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { "data-kubuild-state-styles": true, children: css }) : null;
+    })(),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      NodeRenderer,
+      {
+        node: document.document,
+        document,
+        registry,
+        context,
+        viewport,
+        mode,
+        onNodeClick,
+        onDiagnostic,
+        onActionDispatch,
+        onNodePropChange
+      }
+    )
+  ] }) });
+};
+
+// src/preview-adapter.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_VIEWPORT_CONFIGS = Object.freeze({
+  desktop: {
+    width: "100%",
+    maxWidth: "1280px",
+    minHeight: "600px",
+    label: "Desktop (1280px)",
+    isFluid: true
+  },
+  tablet: {
+    width: "768px",
+    height: "1024px",
+    minHeight: "600px",
+    label: "Tablet (768 \xD7 1024)",
+    isFluid: false
+  },
+  mobile: {
+    width: "375px",
+    height: "667px",
+    minHeight: "500px",
+    label: "Mobile (375 \xD7 667)",
+    isFluid: false
+  }
+});
+var DEFAULT_BREAKPOINTS = Object.freeze({
+  mobile: 480,
+  tablet: 768,
+  desktop: 1024
+});
+function resolveViewportFromWidth(width, breakpoints) {
+  const resolved = { ...DEFAULT_BREAKPOINTS, ...breakpoints };
+  if (width <= resolved.mobile) {
+    return "mobile";
+  }
+  if (width <= resolved.tablet) {
+    return "tablet";
+  }
+  return "desktop";
+}
+function resolveViewportDimensions(viewport, customConfigs) {
+  const baseConfig = DEFAULT_VIEWPORT_CONFIGS[viewport] || DEFAULT_VIEWPORT_CONFIGS.desktop;
+  const custom = customConfigs?.[viewport];
+  return { ...baseConfig, ...custom };
+}
+function resolveViewportContainerStyle(viewport, customConfigs, customScale) {
+  const config = resolveViewportDimensions(viewport, customConfigs);
+  const scale = customScale ?? config.scale ?? 1;
+  const toCssVal = (v) => typeof v === "number" ? `${v}px` : v;
+  const style = {
+    width: toCssVal(config.width),
+    maxWidth: toCssVal(config.maxWidth),
+    minWidth: toCssVal(config.minWidth),
+    height: toCssVal(config.height),
+    minHeight: toCssVal(config.minHeight),
+    maxHeight: toCssVal(config.maxHeight),
+    aspectRatio: config.aspectRatio,
+    transition: "width 0.2s ease, max-width 0.2s ease, height 0.2s ease"
+  };
+  if (scale !== 1) {
+    style.transform = `scale(${scale})`;
+    style.transformOrigin = "top center";
+  }
+  return style;
+}
+var PreviewViewportAdapter = ({
+  document,
+  viewport = "desktop",
+  onViewportChange,
+  viewportConfigs,
+  breakpoints,
+  registry,
+  context,
+  mode = "runtime",
+  showChrome = false,
+  chromeTitle,
+  editorOverlay,
+  scale,
+  className,
+  style,
+  canvasClassName,
+  canvasStyle,
+  onNodeClick,
+  onDiagnostic,
+  onActionDispatch
+}) => {
+  const currentConfig = (0, import_react4.useMemo)(
+    () => resolveViewportDimensions(viewport, viewportConfigs),
+    [viewport, viewportConfigs]
+  );
+  const containerStyle = (0, import_react4.useMemo)(
+    () => resolveViewportContainerStyle(viewport, viewportConfigs, scale),
+    [viewport, viewportConfigs, scale]
+  );
+  const mergedCanvasStyle = (0, import_react4.useMemo)(
+    () => ({
+      ...containerStyle,
+      ...canvasStyle,
+      position: "relative",
+      boxSizing: "border-box"
+    }),
+    [containerStyle, canvasStyle]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      "data-kubuild-preview-container": true,
+      "data-viewport": viewport,
+      className: `kubuild-preview-viewport-adapter ${className || ""}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        ...style
+      },
+      children: [
+        showChrome && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            "data-kubuild-preview-chrome": true,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              maxWidth: containerStyle.maxWidth || containerStyle.width,
+              padding: "8px 12px",
+              marginBottom: "8px",
+              backgroundColor: "#1e293b",
+              color: "#f8fafc",
+              borderRadius: "8px",
+              fontSize: "12px",
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              boxSizing: "border-box"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontWeight: 600 }, children: chromeTitle || document.metadata?.title || "Preview" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "span",
+                  {
+                    "data-testid": "viewport-badge",
+                    style: {
+                      fontSize: "10px",
+                      padding: "2px 6px",
+                      borderRadius: "4px",
+                      backgroundColor: "#334155",
+                      color: "#94a3b8",
+                      textTransform: "uppercase",
+                      fontWeight: 700
+                    },
+                    children: viewport
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "11px", color: "#64748b" }, children: currentConfig.label || `${currentConfig.width} \xD7 ${currentConfig.height || "auto"}` })
+              ] }),
+              onViewportChange && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  "data-testid": "viewport-switcher",
+                  style: { display: "flex", gap: "4px", backgroundColor: "#0f172a", padding: "2px", borderRadius: "6px" },
+                  children: ["desktop", "tablet", "mobile"].map((device) => {
+                    const isActive = viewport === device;
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "data-testid": `viewport-btn-${device}`,
+                        onClick: () => onViewportChange(device),
+                        style: {
+                          padding: "4px 10px",
+                          fontSize: "11px",
+                          fontWeight: 500,
+                          borderRadius: "4px",
+                          border: "none",
+                          cursor: "pointer",
+                          textTransform: "capitalize",
+                          backgroundColor: isActive ? "#3b82f6" : "transparent",
+                          color: isActive ? "#ffffff" : "#94a3b8",
+                          transition: "all 0.15s ease"
+                        },
+                        children: device
+                      },
+                      device
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            "data-kubuild-preview-canvas": true,
+            "data-viewport": viewport,
+            className: `kubuild-preview-canvas ${canvasClassName || ""}`,
+            style: mergedCanvasStyle,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                KubuildRenderer,
+                {
+                  document,
+                  registry,
+                  context,
+                  viewport,
+                  mode,
+                  onNodeClick,
+                  onDiagnostic,
+                  onActionDispatch
+                }
+              ),
+              editorOverlay && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  "data-kubuild-preview-overlay": true,
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    pointerEvents: "none",
+                    zIndex: 10
+                  },
+                  children: editorOverlay
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var KubuildPreviewViewport = PreviewViewportAdapter;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ComponentErrorBoundary,
+  DEFAULT_BREAKPOINTS,
+  DEFAULT_CSS_RESET,
+  DEFAULT_RENDER_CONTEXT,
+  DEFAULT_VIEWPORT_CONFIGS,
+  EditableText,
+  HtmlEmbedView,
+  KubuildPreviewViewport,
+  KubuildRenderer,
+  NodeRenderer,
+  PreviewViewportAdapter,
+  RenderContextProvider,
+  collectStateStylesCss,
+  createMinimalRenderContext,
+  createRenderContext,
+  dispatchAction,
+  isActionRegistered,
+  resolveActionPayload,
+  resolveActionPayloadDetailed,
+  resolveAssetSync,
+  resolveNodeStyles,
+  resolveVariable,
+  resolveViewportContainerStyle,
+  resolveViewportDimensions,
+  resolveViewportFromWidth,
+  styleDefinitionToCssDeclarations,
+  transformEmbedHtml,
+  useRenderContext
+});
+//# sourceMappingURL=index.cjs.map