@kubuild/renderer 0.0.1 → 0.1.0

package/dist/index.js

@@ -215,7 +215,7 @@ function dispatchAction(options) {
 
 // src/renderer.tsx
 import { resolveBinding as resolveBinding3, sanitizeUrl, sanitizeHtml } from "@kubuild/core";
-import { icons as lucideIcons } from "lucide-react";
+import { icons as lucideIcons, Package, Puzzle, AlertTriangle as AlertTriangle2 } from "lucide-react";
 
 // src/styles.ts
 function resolveNodeStyles(styles, viewport = "desktop") {
@@ -230,17 +230,18 @@ function escapeCssValue(value) {
 function escapeCssIdent(value) {
   return value.replace(/["\\\]]/g, "\\$&");
 }
-function styleDefinitionToCssDeclarations(styleDefinition) {
+function styleDefinitionToCssDeclarations(styleDefinition, options) {
   if (!styleDefinition || typeof styleDefinition !== "object") return "";
   const declarations = [];
+  const suffix = options?.important ? " !important" : "";
   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)};`);
+    declarations.push(`${property}: ${escapeCssValue(value)}${suffix};`);
   }
   return declarations.join(" ");
 }
-function collectStateStylesCss(document) {
+function collectStateStylesCss(document, options = { important: true }) {
   if (!document?.document) return "";
   const rules = [];
   const walk = (node) => {
@@ -248,7 +249,8 @@ function collectStateStylesCss(document) {
     if (states && typeof states === "object") {
       for (const [state, styleDefinition] of Object.entries(states)) {
         const declarations = styleDefinitionToCssDeclarations(
-          styleDefinition
+          styleDefinition,
+          { important: options.important !== false }
         );
         if (!declarations) continue;
         const safeState = /^::?[a-zA-Z-]+$/.test(state) ? state : null;
@@ -289,8 +291,208 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 `.trim();
 
+// src/animation.ts
+var ANIMATION_KEYFRAMES_CSS = `
+/* Entrance / AOS Keyframes */
+@keyframes kb-anim-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes kb-anim-fade-up {
+  from { opacity: 0; transform: translateY(24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes kb-anim-fade-down {
+  from { opacity: 0; transform: translateY(-24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes kb-anim-fade-left {
+  from { opacity: 0; transform: translateX(24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes kb-anim-fade-right {
+  from { opacity: 0; transform: translateX(-24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes kb-anim-zoom-in {
+  from { opacity: 0; transform: scale(0.92); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes kb-anim-zoom-out {
+  from { opacity: 0; transform: scale(1.08); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes kb-anim-slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+@keyframes kb-anim-slide-down {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+@keyframes kb-anim-slide-left {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+@keyframes kb-anim-slide-right {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+@keyframes kb-anim-flip-up {
+  from { opacity: 0; transform: perspective(600px) rotateX(45deg); }
+  to { opacity: 1; transform: perspective(600px) rotateX(0deg); }
+}
+@keyframes kb-anim-flip-down {
+  from { opacity: 0; transform: perspective(600px) rotateX(-45deg); }
+  to { opacity: 1; transform: perspective(600px) rotateX(0deg); }
+}
+
+/* Continuous Loop Keyframes */
+@keyframes kb-loop-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.9; }
+}
+@keyframes kb-loop-bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+@keyframes kb-loop-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@keyframes kb-loop-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+@keyframes kb-loop-shimmer {
+  0%, 100% { opacity: 0.75; }
+  50% { opacity: 1; }
+}
+`.trim();
+function escapeCssIdent2(value) {
+  return value.replace(/["\\\]]/g, "\\$&");
+}
+function getHoverEffectCss(nodeId, hoverEffect) {
+  const safeId = escapeCssIdent2(nodeId);
+  const rules = [];
+  switch (hoverEffect) {
+    case "lift":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important; will-change: transform; }`,
+        `[data-kubuild-node="${safeId}"]:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; }`
+      );
+      break;
+    case "scale":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform; }`,
+        `[data-kubuild-node="${safeId}"]:hover { transform: scale(1.04) !important; }`
+      );
+      break;
+    case "glow":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { transition: box-shadow 0.25s ease !important; }`,
+        `[data-kubuild-node="${safeId}"]:hover { box-shadow: 0 0 20px 2px rgba(59, 130, 246, 0.5) !important; }`
+      );
+      break;
+    case "tilt":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform; }`,
+        `[data-kubuild-node="${safeId}"]:hover { transform: rotate(2deg) scale(1.02) !important; }`
+      );
+      break;
+    default:
+      break;
+  }
+  return rules;
+}
+function getLoopEffectCss(nodeId, loopEffect) {
+  const safeId = escapeCssIdent2(nodeId);
+  const rules = [];
+  switch (loopEffect) {
+    case "pulse":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { animation: kb-loop-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; }`
+      );
+      break;
+    case "bounce":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { animation: kb-loop-bounce 1.5s ease-in-out infinite !important; }`
+      );
+      break;
+    case "spin":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { animation: kb-loop-spin 3s linear infinite !important; }`
+      );
+      break;
+    case "float":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { animation: kb-loop-float 3s ease-in-out infinite !important; }`
+      );
+      break;
+    case "shimmer":
+      rules.push(
+        `[data-kubuild-node="${safeId}"] { animation: kb-loop-shimmer 2s ease-in-out infinite !important; }`
+      );
+      break;
+    default:
+      break;
+  }
+  return rules;
+}
+function getEntranceAnimationCss(nodeId, anim) {
+  if (!anim.type || anim.type === "none") return [];
+  const safeId = escapeCssIdent2(nodeId);
+  const duration = typeof anim.duration === "number" ? anim.duration : 600;
+  const delay = typeof anim.delay === "number" ? anim.delay : 0;
+  const easing = anim.easing || "ease-out";
+  return [
+    `[data-kubuild-node="${safeId}"] { animation-name: kb-anim-${anim.type} !important; animation-duration: ${duration}ms !important; animation-delay: ${delay}ms !important; animation-timing-function: ${easing} !important; animation-fill-mode: both !important; }`
+  ];
+}
+function collectAnimationStylesCss(document) {
+  if (!document?.document) return "";
+  const rules = [];
+  let hasAnyAnimation = false;
+  const walk = (node) => {
+    const anim = node.animation;
+    if (anim) {
+      if (anim.hoverEffect && anim.hoverEffect !== "none") {
+        rules.push(...getHoverEffectCss(node.id, anim.hoverEffect));
+        hasAnyAnimation = true;
+      }
+      if (anim.loopEffect && anim.loopEffect !== "none") {
+        rules.push(...getLoopEffectCss(node.id, anim.loopEffect));
+        hasAnyAnimation = true;
+      }
+      if (anim.type && anim.type !== "none") {
+        rules.push(...getEntranceAnimationCss(node.id, anim));
+        hasAnyAnimation = true;
+      }
+    }
+    node.children?.forEach(walk);
+  };
+  walk(document.document);
+  if (!hasAnyAnimation) return "";
+  return `${ANIMATION_KEYFRAMES_CSS}
+
+${rules.join("\n")}`;
+}
+function replayNodeAnimation(nodeId, rootElement) {
+  const root = rootElement || (typeof window !== "undefined" ? window.document : null);
+  if (!root) return false;
+  const el = root.querySelector(`[data-kubuild-node="${escapeCssIdent2(nodeId)}"]`);
+  if (!el) return false;
+  const currentAnimation = el.style.animation;
+  el.style.animation = "none";
+  void el.offsetWidth;
+  el.style.animation = currentAnimation;
+  el.dispatchEvent(new CustomEvent("kubuild:replay-animation", { bubbles: true, detail: { nodeId } }));
+  return true;
+}
+
 // src/error-boundary.tsx
 import { Component } from "react";
+import { AlertTriangle } from "lucide-react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var ComponentErrorBoundary = class extends Component {
   constructor(props) {
@@ -327,10 +529,13 @@ var ComponentErrorBoundary = class extends Component {
               lineHeight: "1.4"
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: [
-                "\u26A0\uFE0F Component Render Error: <",
-                componentType,
-                ">"
+              /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600, marginBottom: "4px", display: "flex", alignItems: "center", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx2(AlertTriangle, { size: 14, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Component Render Error: <",
+                  componentType,
+                  ">"
+                ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: "#7f1d1d", wordBreak: "break-all" }, children: [
                 "Node ID: ",
@@ -1589,9 +1794,12 @@ function NodeRenderer({
                   fontFamily: "system-ui, -apple-system, sans-serif"
                 },
                 onClick: handleClick,
-                children: /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, fontSize: "13px" }, children: [
-                  "\u{1F4E6} Collection: expected an array at ",
-                  /* @__PURE__ */ jsx3("code", { children: sourceKey ?? "(missing sourceKey)" })
+                children: /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, fontSize: "13px", display: "flex", alignItems: "center", gap: "6px" }, children: [
+                  /* @__PURE__ */ jsx3(Package, { size: 14, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxs2("span", { children: [
+                    "Collection: expected an array at ",
+                    /* @__PURE__ */ jsx3("code", { children: sourceKey ?? "(missing sourceKey)" })
+                  ] })
                 ] })
               }
             );
@@ -1642,9 +1850,12 @@ function NodeRenderer({
               },
               onClick: handleClick,
               children: [
-                /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, fontSize: "13px", marginBottom: "4px" }, children: [
-                  "\u{1F9E9} Unknown Component: ",
-                  /* @__PURE__ */ jsx3("code", { children: node.type })
+                /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, fontSize: "13px", marginBottom: "4px", display: "flex", alignItems: "center", gap: "6px" }, children: [
+                  /* @__PURE__ */ jsx3(Puzzle, { size: 14, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxs2("span", { children: [
+                    "Unknown Component: ",
+                    /* @__PURE__ */ jsx3("code", { children: node.type })
+                  ] })
                 ] }),
                 /* @__PURE__ */ jsxs2("div", { style: { fontSize: "11px", color: "#b45309", marginBottom: childrenElements ? "8px" : 0 }, children: [
                   "Node ID: ",
@@ -1690,10 +1901,13 @@ function NodeRenderer({
             lineHeight: "1.4"
           },
           children: [
-            /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: [
-              "\u26A0\uFE0F Component Render Error: <",
-              node.type,
-              ">"
+            /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, marginBottom: "4px", display: "flex", alignItems: "center", gap: "6px" }, children: [
+              /* @__PURE__ */ jsx3(AlertTriangle2, { size: 14, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs2("span", { children: [
+                "Component Render Error: <",
+                node.type,
+                ">"
+              ] })
             ] }),
             /* @__PURE__ */ jsxs2("div", { style: { fontSize: "11px", color: "#7f1d1d", wordBreak: "break-all" }, children: [
               "Node ID: ",
@@ -1738,6 +1952,10 @@ var KubuildRenderer = ({
       const css = collectStateStylesCss(document);
       return css ? /* @__PURE__ */ jsx3("style", { "data-kubuild-state-styles": true, children: css }) : null;
     })(),
+    (() => {
+      const animCss = collectAnimationStylesCss(document);
+      return animCss ? /* @__PURE__ */ jsx3("style", { "data-kubuild-animation-styles": true, children: animCss }) : null;
+    })(),
     /* @__PURE__ */ jsx3(
       NodeRenderer,
       {
@@ -1997,7 +2215,503 @@ var PreviewViewportAdapter = ({
   );
 };
 var KubuildPreviewViewport = PreviewViewportAdapter;
+
+// src/code-generator.ts
+function escapeHtml(str) {
+  if (str === null || str === void 0) return "";
+  return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function escapeAttr(str) {
+  return escapeHtml(str);
+}
+function getYouTubeId2(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 getVimeoId2(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 renderNodeToHtml(node, indentLevel, options) {
+  const indent = " ".repeat(indentLevel * (options.indentSize ?? 2));
+  const innerIndent = " ".repeat((indentLevel + 1) * (options.indentSize ?? 2));
+  const props = node.props || {};
+  const children = node.children || [];
+  const includeNodeClass = options.includeNodeClasses !== false;
+  const nodeClass = includeNodeClass ? `kb-node-${node.id}` : "";
+  const buildClass = (...classes) => {
+    return classes.filter(Boolean).join(" ");
+  };
+  const idAttr = props.id ? ` id="${escapeAttr(props.id)}"` : "";
+  switch (node.type) {
+    case "page": {
+      const tag = options.rootTag || "main";
+      const cls = buildClass("kb-page", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<${tag} class="${cls}"${idAttr}></${tag}>`;
+      }
+      return `${indent}<${tag} class="${cls}"${idAttr}>
+${childHtml}
+${indent}</${tag}>`;
+    }
+    case "section": {
+      const ariaLabel = props.ariaLabel ? ` aria-label="${escapeAttr(props.ariaLabel)}"` : "";
+      const cls = buildClass("kb-section", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<section class="${cls}"${idAttr}${ariaLabel}></section>`;
+      }
+      return `${indent}<section class="${cls}"${idAttr}${ariaLabel}>
+${childHtml}
+${indent}</section>`;
+    }
+    case "container": {
+      const cls = buildClass("kb-container", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<div class="${cls}"${idAttr}></div>`;
+      }
+      return `${indent}<div class="${cls}"${idAttr}>
+${childHtml}
+${indent}</div>`;
+    }
+    case "columns": {
+      const cls = buildClass("kb-columns", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<div class="${cls}"${idAttr}></div>`;
+      }
+      return `${indent}<div class="${cls}"${idAttr}>
+${childHtml}
+${indent}</div>`;
+    }
+    case "heading": {
+      let level = "h2";
+      if (typeof props.level === "string" && /^h[1-6]$/i.test(props.level)) {
+        level = props.level.toLowerCase();
+      } else if (typeof props.level === "number" && props.level >= 1 && props.level <= 6) {
+        level = `h${props.level}`;
+      } else if (typeof props.tag === "string" && /^h[1-6]$/i.test(props.tag)) {
+        level = props.tag.toLowerCase();
+      }
+      const text = props.text ?? props.value ?? props.content ?? "Heading";
+      const cls = buildClass("kb-heading", nodeClass);
+      return `${indent}<${level} class="${cls}"${idAttr}>${escapeHtml(text)}</${level}>`;
+    }
+    case "paragraph": {
+      const text = props.text ?? props.value ?? props.content ?? "";
+      const cls = buildClass("kb-paragraph", nodeClass);
+      return `${indent}<p class="${cls}"${idAttr}>${escapeHtml(text)}</p>`;
+    }
+    case "text": {
+      const tag = props.as || "p";
+      const text = props.text ?? props.value ?? props.content ?? "";
+      const cls = buildClass("kb-text", nodeClass);
+      return `${indent}<${tag} class="${cls}"${idAttr}>${escapeHtml(text)}</${tag}>`;
+    }
+    case "link": {
+      const href = props.href ? ` href="${escapeAttr(props.href)}"` : ' href="#"';
+      const target = props.target ? ` target="${escapeAttr(props.target)}"` : "";
+      const rel = props.rel ? ` rel="${escapeAttr(props.rel)}"` : target.includes("_blank") ? ' rel="noopener noreferrer"' : "";
+      const text = props.text ?? props.label ?? props.value;
+      const cls = buildClass("kb-link", nodeClass);
+      if (children.length > 0) {
+        const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+        return `${indent}<a class="${cls}"${idAttr}${href}${target}${rel}>
+${childHtml}
+${indent}</a>`;
+      }
+      return `${indent}<a class="${cls}"${idAttr}${href}${target}${rel}>${escapeHtml(text ?? "Link")}</a>`;
+    }
+    case "blockquote": {
+      const cite = props.cite ? ` cite="${escapeAttr(props.cite)}"` : "";
+      const quote = props.quote ?? props.text ?? props.value;
+      const author = props.author ?? props.citeAuthor;
+      const cls = buildClass("kb-blockquote", nodeClass);
+      if (quote || author) {
+        const quoteHtml = quote ? `${innerIndent}<p>${escapeHtml(quote)}</p>` : "";
+        const authorHtml = author ? `${innerIndent}<cite>${escapeHtml(author)}</cite>` : "";
+        const parts = [quoteHtml, authorHtml].filter(Boolean).join("\n");
+        return `${indent}<blockquote class="${cls}"${idAttr}${cite}>
+${parts}
+${indent}</blockquote>`;
+      }
+      if (children.length > 0) {
+        const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+        return `${indent}<blockquote class="${cls}"${idAttr}${cite}>
+${childHtml}
+${indent}</blockquote>`;
+      }
+      return `${indent}<blockquote class="${cls}"${idAttr}${cite}></blockquote>`;
+    }
+    case "badge": {
+      const text = props.text ?? props.label ?? props.value ?? "Badge";
+      const cls = buildClass("kb-badge", nodeClass);
+      return `${indent}<span class="${cls}"${idAttr}>${escapeHtml(text)}</span>`;
+    }
+    case "code-block": {
+      const code = props.code ?? props.text ?? props.value ?? "";
+      const lang = props.language || props.lang;
+      const langClass = lang ? ` class="language-${escapeAttr(lang)}"` : "";
+      const cls = buildClass("kb-code-block", nodeClass);
+      return `${indent}<pre class="${cls}"${idAttr}><code${langClass}>${escapeHtml(code)}</code></pre>`;
+    }
+    case "divider": {
+      const cls = buildClass("kb-divider", nodeClass);
+      const text = props.text ?? props.label;
+      if (text) {
+        return `${indent}<div class="${cls}"${idAttr} role="separator"><span>${escapeHtml(text)}</span></div>`;
+      }
+      return `${indent}<hr class="${cls}"${idAttr} />`;
+    }
+    case "spacer": {
+      const cls = buildClass("kb-spacer", nodeClass);
+      return `${indent}<div class="${cls}"${idAttr} aria-hidden="true"></div>`;
+    }
+    case "image": {
+      const src = props.src ? ` src="${escapeAttr(props.src)}"` : ' src=""';
+      const alt = props.alt ? ` alt="${escapeAttr(props.alt)}"` : ' alt=""';
+      const loading = props.loading ? ` loading="${escapeAttr(props.loading)}"` : ' loading="lazy"';
+      const cls = buildClass("kb-image", nodeClass);
+      return `${indent}<img class="${cls}"${idAttr}${src}${alt}${loading} />`;
+    }
+    case "video": {
+      const src = props.src || "";
+      const ytId = getYouTubeId2(src);
+      const vmId = getVimeoId2(src);
+      const cls = buildClass("kb-video", nodeClass);
+      if (ytId) {
+        return `${indent}<div class="kb-video-wrapper ${nodeClass}"${idAttr}>
+${innerIndent}<iframe src="https://www.youtube-nocookie.com/embed/${escapeAttr(ytId)}" title="${escapeAttr(props.title || "Video player")}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+${indent}</div>`;
+      }
+      if (vmId) {
+        return `${indent}<div class="kb-video-wrapper ${nodeClass}"${idAttr}>
+${innerIndent}<iframe src="https://player.vimeo.com/video/${escapeAttr(vmId)}" title="${escapeAttr(props.title || "Video player")}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+${indent}</div>`;
+      }
+      const poster = props.poster ? ` poster="${escapeAttr(props.poster)}"` : "";
+      const controls = props.controls !== false ? " controls" : "";
+      const autoplay = props.autoplay ? " autoplay" : "";
+      const loop = props.loop ? " loop" : "";
+      const muted = props.muted ? " muted" : "";
+      const videoSrc = src ? ` src="${escapeAttr(src)}"` : "";
+      return `${indent}<video class="${cls}"${idAttr}${videoSrc}${poster}${controls}${autoplay}${loop}${muted}></video>`;
+    }
+    case "icon": {
+      const name = props.name || props.icon || "star";
+      const ariaLabel = props.ariaLabel ? ` aria-label="${escapeAttr(props.ariaLabel)}"` : ' aria-hidden="true"';
+      const cls = buildClass("kb-icon", nodeClass);
+      return `${indent}<span class="${cls}"${idAttr}${ariaLabel} data-icon="${escapeAttr(name)}"></span>`;
+    }
+    case "html-embed": {
+      const rawHtml = props.html ?? props.content ?? "";
+      const cls = buildClass("kb-html-embed", nodeClass);
+      if (!rawHtml) {
+        return `${indent}<div class="${cls}"${idAttr}></div>`;
+      }
+      return `${indent}<div class="${cls}"${idAttr}>
+${innerIndent}${rawHtml}
+${indent}</div>`;
+    }
+    case "button": {
+      const label = props.label ?? props.text ?? props.value ?? "Button";
+      const type = props.type ? ` type="${escapeAttr(props.type)}"` : ' type="button"';
+      const disabled = props.disabled ? " disabled" : "";
+      const cls = buildClass("kb-button", nodeClass);
+      if (props.href) {
+        const href = ` href="${escapeAttr(props.href)}"`;
+        const target = props.target ? ` target="${escapeAttr(props.target)}"` : "";
+        return `${indent}<a class="${cls}"${idAttr}${href}${target}>${escapeHtml(label)}</a>`;
+      }
+      return `${indent}<button class="${cls}"${idAttr}${type}${disabled}>${escapeHtml(label)}</button>`;
+    }
+    case "form": {
+      const action = props.action ? ` action="${escapeAttr(props.action)}"` : "";
+      const method = props.method ? ` method="${escapeAttr(props.method)}"` : ' method="POST"';
+      const cls = buildClass("kb-form", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<form class="${cls}"${idAttr}${action}${method}></form>`;
+      }
+      return `${indent}<form class="${cls}"${idAttr}${action}${method}>
+${childHtml}
+${indent}</form>`;
+    }
+    case "input": {
+      const type = props.type ? ` type="${escapeAttr(props.type)}"` : ' type="text"';
+      const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
+      const placeholder = props.placeholder ? ` placeholder="${escapeAttr(props.placeholder)}"` : "";
+      const value = props.value !== void 0 ? ` value="${escapeAttr(props.value)}"` : "";
+      const required = props.required ? " required" : "";
+      const disabled = props.disabled ? " disabled" : "";
+      const cls = buildClass("kb-input", nodeClass);
+      return `${indent}<input class="${cls}"${idAttr}${type}${name}${placeholder}${value}${required}${disabled} />`;
+    }
+    case "textarea": {
+      const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
+      const placeholder = props.placeholder ? ` placeholder="${escapeAttr(props.placeholder)}"` : "";
+      const rows = props.rows ? ` rows="${escapeAttr(props.rows)}"` : ' rows="4"';
+      const value = props.value ?? props.defaultValue ?? "";
+      const required = props.required ? " required" : "";
+      const disabled = props.disabled ? " disabled" : "";
+      const cls = buildClass("kb-textarea", nodeClass);
+      return `${indent}<textarea class="${cls}"${idAttr}${name}${placeholder}${rows}${required}${disabled}>${escapeHtml(value)}</textarea>`;
+    }
+    case "select": {
+      const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
+      const required = props.required ? " required" : "";
+      const disabled = props.disabled ? " disabled" : "";
+      const cls = buildClass("kb-select", nodeClass);
+      const optionsList = Array.isArray(props.options) ? props.options : [];
+      const optionIndent = " ".repeat((indentLevel + 1) * (options.indentSize ?? 2));
+      const optionsHtml = optionsList.map((opt) => {
+        const optVal = typeof opt === "object" ? opt.value : opt;
+        const optLabel = typeof opt === "object" ? opt.label : opt;
+        const selected = props.value === optVal || props.defaultValue === optVal ? " selected" : "";
+        return `${optionIndent}<option value="${escapeAttr(optVal)}"${selected}>${escapeHtml(optLabel)}</option>`;
+      }).join("\n");
+      if (!optionsHtml) {
+        return `${indent}<select class="${cls}"${idAttr}${name}${required}${disabled}></select>`;
+      }
+      return `${indent}<select class="${cls}"${idAttr}${name}${required}${disabled}>
+${optionsHtml}
+${indent}</select>`;
+    }
+    case "checkbox": {
+      const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
+      const checked = props.checked || props.defaultChecked ? " checked" : "";
+      const label = props.label ?? props.text ?? "";
+      const cls = buildClass("kb-checkbox-label", nodeClass);
+      return `${indent}<label class="${cls}"${idAttr}><input type="checkbox"${name}${checked} /><span>${escapeHtml(label)}</span></label>`;
+    }
+    case "radio": {
+      const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
+      const value = props.value ? ` value="${escapeAttr(props.value)}"` : "";
+      const checked = props.checked || props.defaultChecked ? " checked" : "";
+      const label = props.label ?? props.text ?? "";
+      const cls = buildClass("kb-radio-label", nodeClass);
+      return `${indent}<label class="${cls}"${idAttr}><input type="radio"${name}${value}${checked} /><span>${escapeHtml(label)}</span></label>`;
+    }
+    case "list": {
+      const tag = props.tag === "ol" || props.type === "ol" || props.ordered ? "ol" : "ul";
+      const cls = buildClass("kb-list", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<${tag} class="${cls}"${idAttr}></${tag}>`;
+      }
+      return `${indent}<${tag} class="${cls}"${idAttr}>
+${childHtml}
+${indent}</${tag}>`;
+    }
+    case "list-item": {
+      const text = props.text ?? props.value;
+      const cls = buildClass("kb-list-item", nodeClass);
+      if (children.length > 0) {
+        const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+        return `${indent}<li class="${cls}"${idAttr}>
+${childHtml}
+${indent}</li>`;
+      }
+      return `${indent}<li class="${cls}"${idAttr}>${escapeHtml(text ?? "List item")}</li>`;
+    }
+    case "table": {
+      const cls = buildClass("kb-table", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<table class="${cls}"${idAttr}></table>`;
+      }
+      return `${indent}<table class="${cls}"${idAttr}>
+${childHtml}
+${indent}</table>`;
+    }
+    case "table-row": {
+      const cls = buildClass("kb-table-row", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<tr class="${cls}"${idAttr}></tr>`;
+      }
+      return `${indent}<tr class="${cls}"${idAttr}>
+${childHtml}
+${indent}</tr>`;
+    }
+    case "table-cell": {
+      const isHeader = props.isHeader || props.type === "header" || props.tag === "th";
+      const tag = isHeader ? "th" : "td";
+      const colSpan = props.colSpan && Number(props.colSpan) > 1 ? ` colspan="${escapeAttr(props.colSpan)}"` : "";
+      const rowSpan = props.rowSpan && Number(props.rowSpan) > 1 ? ` rowspan="${escapeAttr(props.rowSpan)}"` : "";
+      const text = props.text ?? props.value ?? "";
+      const cls = buildClass("kb-table-cell", nodeClass);
+      if (children.length > 0) {
+        const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+        return `${indent}<${tag} class="${cls}"${idAttr}${colSpan}${rowSpan}>
+${childHtml}
+${indent}</${tag}>`;
+      }
+      return `${indent}<${tag} class="${cls}"${idAttr}${colSpan}${rowSpan}>${escapeHtml(text)}</${tag}>`;
+    }
+    case "collection": {
+      const cls = buildClass("kb-collection", nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<div class="${cls}"${idAttr}></div>`;
+      }
+      return `${indent}<div class="${cls}"${idAttr}>
+${childHtml}
+${indent}</div>`;
+    }
+    default: {
+      const cls = buildClass(`kb-${node.type}`, nodeClass);
+      const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
+      if (!childHtml) {
+        return `${indent}<div class="${cls}"${idAttr}></div>`;
+      }
+      return `${indent}<div class="${cls}"${idAttr}>
+${childHtml}
+${indent}</div>`;
+    }
+  }
+}
+function generateSemanticHtml(docOrNode, options = {}) {
+  const rootNode = "document" in docOrNode ? docOrNode.document : docOrNode;
+  if (!rootNode) return "";
+  return renderNodeToHtml(rootNode, 0, options);
+}
+function formatCssRule(selector, declarationsStr, indent = "") {
+  if (!declarationsStr.trim()) return "";
+  const rules = declarationsStr.split(";").map((r) => r.trim()).filter(Boolean);
+  if (rules.length === 0) return "";
+  const indentedRules = rules.map((r) => `${indent}  ${r};`).join("\n");
+  return `${indent}${selector} {
+${indentedRules}
+${indent}}`;
+}
+function generateDocumentCss(docOrNode, options = {}) {
+  const rootNode = "document" in docOrNode ? docOrNode.document : docOrNode;
+  if (!rootNode) return "";
+  const classPrefix = options.classPrefix || "kb-node-";
+  const baseRules = [];
+  const tabletRules = [];
+  const mobileRules = [];
+  const stateRules = [];
+  const walk = (node) => {
+    const selector = `.${classPrefix}${node.id}`;
+    if (node.styles) {
+      const baseStyles = {
+        ...node.styles.base || {},
+        ...node.styles.desktop || {}
+      };
+      const baseDecls = styleDefinitionToCssDeclarations(baseStyles);
+      if (baseDecls) {
+        baseRules.push(formatCssRule(selector, baseDecls));
+      }
+      if (node.styles.tablet) {
+        const tabletDecls = styleDefinitionToCssDeclarations(node.styles.tablet);
+        if (tabletDecls) {
+          tabletRules.push(formatCssRule(selector, tabletDecls, "  "));
+        }
+      }
+      if (node.styles.mobile) {
+        const mobileDecls = styleDefinitionToCssDeclarations(node.styles.mobile);
+        if (mobileDecls) {
+          mobileRules.push(formatCssRule(selector, mobileDecls, "  "));
+        }
+      }
+      if (node.styles.states && typeof node.styles.states === "object") {
+        for (const [state, styleDef] of Object.entries(node.styles.states)) {
+          if (!styleDef) continue;
+          const safeState = /^::?[a-zA-Z-]+$/.test(state) ? state : null;
+          if (!safeState) continue;
+          const stateDecls = styleDefinitionToCssDeclarations(styleDef);
+          if (stateDecls) {
+            stateRules.push(formatCssRule(`${selector}${safeState}`, stateDecls));
+          }
+        }
+      }
+    }
+    node.children?.forEach(walk);
+  };
+  walk(rootNode);
+  const sections = [];
+  if (options.includeReset !== false) {
+    sections.push(`/* ==========================================================================
+   Baseline Reset & Typography Standards
+   ========================================================================== */
+${DEFAULT_CSS_RESET}`);
+  }
+  if (baseRules.length > 0) {
+    sections.push(`/* ==========================================================================
+   Component Styles
+   ========================================================================== */
+${baseRules.join("\n\n")}`);
+  }
+  if (stateRules.length > 0) {
+    sections.push(`/* ==========================================================================
+   Interactive & Hover States
+   ========================================================================== */
+${stateRules.join("\n\n")}`);
+  }
+  if (tabletRules.length > 0) {
+    sections.push(`/* ==========================================================================
+   Tablet Breakpoint (max-width: 1024px)
+   ========================================================================== */
+@media (max-width: 1024px) {
+${tabletRules.join("\n\n")}
+}`);
+  }
+  if (mobileRules.length > 0) {
+    sections.push(`/* ==========================================================================
+   Mobile Breakpoint (max-width: 640px)
+   ========================================================================== */
+@media (max-width: 640px) {
+${mobileRules.join("\n\n")}
+}`);
+  }
+  const pageDoc = "document" in docOrNode ? docOrNode : { schema: "stora.page", version: "1.0.0", document: rootNode };
+  const animStyles = collectAnimationStylesCss(pageDoc);
+  if (animStyles) {
+    sections.push(`/* ==========================================================================
+   Animations & Motion Keyframes
+   ========================================================================== */
+${animStyles}`);
+  }
+  return sections.join("\n\n");
+}
+function generateStandaloneHtml(doc, options = {}) {
+  const title = escapeHtml(doc.metadata?.title || "KUBUILD Page");
+  const description = doc.metadata?.description ? escapeAttr(doc.metadata.description) : "";
+  const author = doc.metadata?.author ? escapeAttr(doc.metadata.author) : "";
+  const lang = options.lang || "en";
+  const css = generateDocumentCss(doc, options.cssOptions);
+  const html = generateSemanticHtml(doc, options.htmlOptions);
+  const metaDescription = description ? `  <meta name="description" content="${description}">
+` : "";
+  const metaAuthor = author ? `  <meta name="author" content="${author}">
+` : "";
+  return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+${metaDescription}${metaAuthor}  <style>
+${css}
+  </style>
+</head>
+<body>
+${html}
+</body>
+</html>`;
+}
 export {
+  ANIMATION_KEYFRAMES_CSS,
   ComponentErrorBoundary,
   DEFAULT_BREAKPOINTS,
   DEFAULT_CSS_RESET,
@@ -2010,11 +2724,19 @@ export {
   NodeRenderer,
   PreviewViewportAdapter,
   RenderContextProvider,
+  collectAnimationStylesCss,
   collectStateStylesCss,
   createMinimalRenderContext,
   createRenderContext,
   dispatchAction,
+  generateDocumentCss,
+  generateSemanticHtml,
+  generateStandaloneHtml,
+  getEntranceAnimationCss,
+  getHoverEffectCss,
+  getLoopEffectCss,
   isActionRegistered,
+  replayNodeAnimation,
   resolveActionPayload,
   resolveActionPayloadDetailed,
   resolveAssetSync,