@kubuild/renderer 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +105 -0
  2. package/dist/action-dispatcher.d.ts +42 -0
  3. package/dist/action-dispatcher.d.ts.map +1 -0
  4. package/dist/action-runners/api-request.d.ts +77 -0
  5. package/dist/action-runners/api-request.d.ts.map +1 -0
  6. package/dist/action-runners/index.d.ts +24 -0
  7. package/dist/action-runners/index.d.ts.map +1 -0
  8. package/dist/action-runners/modal-manager.d.ts +68 -0
  9. package/dist/action-runners/modal-manager.d.ts.map +1 -0
  10. package/dist/action-runners/navigation-utils.d.ts +49 -0
  11. package/dist/action-runners/navigation-utils.d.ts.map +1 -0
  12. package/dist/action-runners/toast-container.d.ts +20 -0
  13. package/dist/action-runners/toast-container.d.ts.map +1 -0
  14. package/dist/action-runners/toast-manager.d.ts +74 -0
  15. package/dist/action-runners/toast-manager.d.ts.map +1 -0
  16. package/dist/action-runners/ui-feedback.d.ts +33 -0
  17. package/dist/action-runners/ui-feedback.d.ts.map +1 -0
  18. package/dist/error-boundary.d.ts +2 -0
  19. package/dist/error-boundary.d.ts.map +1 -1
  20. package/dist/form-context.d.ts +114 -0
  21. package/dist/form-context.d.ts.map +1 -0
  22. package/dist/index.cjs +99 -2690
  23. package/dist/index.cjs.map +1 -1
  24. package/dist/index.d.ts +5 -0
  25. package/dist/index.d.ts.map +1 -1
  26. package/dist/index.js +99 -2627
  27. package/dist/index.js.map +1 -1
  28. package/dist/nodes/editable-text.d.ts +15 -0
  29. package/dist/nodes/editable-text.d.ts.map +1 -0
  30. package/dist/nodes/form-nodes.d.ts +153 -0
  31. package/dist/nodes/form-nodes.d.ts.map +1 -0
  32. package/dist/nodes/html-embed.d.ts +15 -0
  33. package/dist/nodes/html-embed.d.ts.map +1 -0
  34. package/dist/nodes/index.d.ts +5 -0
  35. package/dist/nodes/index.d.ts.map +1 -0
  36. package/dist/nodes/media-utils.d.ts +17 -0
  37. package/dist/nodes/media-utils.d.ts.map +1 -0
  38. package/dist/preview-adapter.d.ts +1 -1
  39. package/dist/preview-adapter.d.ts.map +1 -1
  40. package/dist/renderer.d.ts +4 -24
  41. package/dist/renderer.d.ts.map +1 -1
  42. package/dist/renderers/index.d.ts +2 -0
  43. package/dist/renderers/index.d.ts.map +1 -0
  44. package/dist/renderers/render-node-content.d.ts +66 -0
  45. package/dist/renderers/render-node-content.d.ts.map +1 -0
  46. package/package.json +4 -4
  47. package/dist/index.mjs +0 -44754
  48. package/dist/index.mjs.map +0 -1
package/dist/index.js CHANGED
@@ -1,269 +1,5 @@
1
- // src/renderer.tsx
2
- import { useRef, useLayoutEffect, useEffect, useMemo as useMemo2 } from "react";
3
- import { isAssetReference, isActionBinding as isActionBinding2, isVariableBinding as isVariableBinding3 } from "@kubuild/schema";
4
- import { createDefaultComponentRegistry } from "@kubuild/components";
5
-
6
- // src/render-context.tsx
7
- import { createContext, useContext, useMemo } from "react";
8
- import { resolveBinding } from "@kubuild/core";
9
- import { isVariableBinding, isActionBinding } from "@kubuild/schema";
10
- import { jsx } from "react/jsx-runtime";
11
- var DEFAULT_RENDER_CONTEXT = Object.freeze({});
12
- var RenderContextReact = createContext(DEFAULT_RENDER_CONTEXT);
13
- function createRenderContext(options) {
14
- if (!options) {
15
- return DEFAULT_RENDER_CONTEXT;
16
- }
17
- const frozenVariables = options.variables ? Object.freeze({ ...options.variables }) : void 0;
18
- return Object.freeze({
19
- variables: frozenVariables,
20
- ...options.assetProvider ? { assetProvider: options.assetProvider } : {},
21
- ...options.actionRegistry ? { actionRegistry: options.actionRegistry } : {},
22
- ...options.onDiagnostic ? { onDiagnostic: options.onDiagnostic } : {}
23
- });
24
- }
25
- function createMinimalRenderContext(options) {
26
- const assetsMap = new Map(Object.entries(options?.assets ?? {}));
27
- const actionsMap = new Map(Object.entries(options?.actions ?? {}));
28
- const assetProvider = {
29
- resolve: (assetIdOrUri) => {
30
- return assetsMap.get(assetIdOrUri) || assetIdOrUri;
31
- }
32
- };
33
- const actionRegistry = {
34
- get: (type) => actionsMap.get(type),
35
- register: (type, handler) => {
36
- actionsMap.set(type, handler);
37
- },
38
- unregister: (type) => {
39
- actionsMap.delete(type);
40
- }
41
- };
42
- return createRenderContext({
43
- variables: options?.variables,
44
- assetProvider,
45
- actionRegistry,
46
- onDiagnostic: options?.onDiagnostic
47
- });
48
- }
49
- var RenderContextProvider = ({ value, children }) => {
50
- const contextValue = useMemo(() => value || DEFAULT_RENDER_CONTEXT, [value]);
51
- return /* @__PURE__ */ jsx(RenderContextReact.Provider, { value: contextValue, children });
52
- };
53
- function useRenderContext() {
54
- return useContext(RenderContextReact);
55
- }
56
- function resolveAssetSync(assetProvider, assetIdOrUri) {
57
- if (!assetProvider || !assetIdOrUri) {
58
- return void 0;
59
- }
60
- try {
61
- const result = assetProvider.resolve(assetIdOrUri);
62
- return typeof result === "string" ? result : void 0;
63
- } catch {
64
- return void 0;
65
- }
66
- }
67
- function resolveVariable(context, value) {
68
- if (value === null || value === void 0) {
69
- return value;
70
- }
71
- if (isVariableBinding(value)) {
72
- return resolveBinding(value, context).value;
73
- }
74
- if (typeof value === "string" && value.includes("{{")) {
75
- return value.replace(/\{\{\s*([\w.-]+)\s*\}\}/g, (match, key) => {
76
- const outcome = resolveBinding({ key }, context);
77
- if (outcome.status === "resolved") {
78
- return String(outcome.value);
79
- }
80
- return match;
81
- });
82
- }
83
- return value;
84
- }
85
- function resolveActionPayloadDetailed(context, payload) {
86
- if (!payload || typeof payload !== "object") {
87
- return { value: payload, invalidPaths: [] };
88
- }
89
- const invalidPaths = [];
90
- const resolveValueRecursively = (val, path) => {
91
- if (val === null || val === void 0) {
92
- return val;
93
- }
94
- if (isVariableBinding(val)) {
95
- const outcome = resolveBinding(val, context);
96
- if (outcome.status === "empty") {
97
- invalidPaths.push(path);
98
- }
99
- return outcome.value;
100
- }
101
- if (typeof val === "string") {
102
- if (val.includes("{{")) {
103
- return val.replace(/\{\{\s*([\w.-]+)\s*\}\}/g, (match, key) => {
104
- const outcome = resolveBinding({ key }, context);
105
- if (outcome.status !== "resolved") {
106
- invalidPaths.push(path);
107
- return match;
108
- }
109
- return String(outcome.value);
110
- });
111
- }
112
- return val;
113
- }
114
- if (Array.isArray(val)) {
115
- return val.map((item, index) => resolveValueRecursively(item, `${path}[${index}]`));
116
- }
117
- if (typeof val === "object") {
118
- const copy = {};
119
- for (const [k, v] of Object.entries(val)) {
120
- copy[k] = resolveValueRecursively(v, path ? `${path}.${k}` : k);
121
- }
122
- return copy;
123
- }
124
- return val;
125
- };
126
- const resolved = {};
127
- for (const [key, value] of Object.entries(payload)) {
128
- resolved[key] = resolveValueRecursively(value, key);
129
- }
130
- return { value: resolved, invalidPaths };
131
- }
132
- function resolveActionPayload(context, payload) {
133
- return resolveActionPayloadDetailed(context, payload).value;
134
- }
135
- function isActionRegistered(actionRegistry, actionType) {
136
- if (!actionRegistry || !actionType) {
137
- return false;
138
- }
139
- return Boolean(actionRegistry.get(actionType));
140
- }
141
- function dispatchAction(options) {
142
- const { action, nodeId, document, context, onDiagnostic } = options;
143
- if (!isActionBinding(action)) {
144
- const diagnostic = {
145
- code: "INVALID_ACTION_PAYLOAD",
146
- actionType: typeof action?.type === "string" ? action.type : "unknown",
147
- nodeId,
148
- message: `Invalid action binding on node ${nodeId || "unknown"}.`
149
- };
150
- onDiagnostic?.(diagnostic);
151
- context?.onDiagnostic?.(diagnostic);
152
- return false;
153
- }
154
- const handler = context?.actionRegistry?.get(action.type);
155
- if (!handler) {
156
- const diagnostic = {
157
- code: "UNKNOWN_ACTION",
158
- actionType: action.type,
159
- nodeId,
160
- message: `No action handler registered for action type "${action.type}".`
161
- };
162
- onDiagnostic?.(diagnostic);
163
- context?.onDiagnostic?.(diagnostic);
164
- return false;
165
- }
166
- const { value: resolvedPayload, invalidPaths } = resolveActionPayloadDetailed(context, action.payload);
167
- if (invalidPaths.length > 0) {
168
- const diagnostic = {
169
- code: "INVALID_ACTION_BINDING",
170
- actionType: action.type,
171
- nodeId,
172
- message: `Action "${action.type}" payload has unresolved binding path(s) [${invalidPaths.join(
173
- ", "
174
- )}] on node ${nodeId || "unknown"}; handler was not invoked.`,
175
- invalidPaths
176
- };
177
- onDiagnostic?.(diagnostic);
178
- context?.onDiagnostic?.(diagnostic);
179
- return false;
180
- }
181
- const executionContext = {
182
- nodeId,
183
- document,
184
- variables: context?.variables
185
- };
186
- try {
187
- const result = handler(resolvedPayload, executionContext);
188
- if (result && typeof result.catch === "function") {
189
- result.catch((error) => {
190
- const diagnostic = {
191
- code: "ACTION_EXECUTION_ERROR",
192
- actionType: action.type,
193
- nodeId,
194
- message: `Action "${action.type}" handler threw an asynchronous error: ${error instanceof Error ? error.message : String(error)}`,
195
- error
196
- };
197
- onDiagnostic?.(diagnostic);
198
- context?.onDiagnostic?.(diagnostic);
199
- });
200
- }
201
- return true;
202
- } catch (error) {
203
- const diagnostic = {
204
- code: "ACTION_EXECUTION_ERROR",
205
- actionType: action.type,
206
- nodeId,
207
- message: `Action "${action.type}" handler threw a synchronous error: ${error instanceof Error ? error.message : String(error)}`,
208
- error
209
- };
210
- onDiagnostic?.(diagnostic);
211
- context?.onDiagnostic?.(diagnostic);
212
- return false;
213
- }
214
- }
215
-
216
- // src/renderer.tsx
217
- import { resolveBinding as resolveBinding3, sanitizeUrl, sanitizeHtml } from "@kubuild/core";
218
- import { icons as lucideIcons, Package, Puzzle, AlertTriangle as AlertTriangle2 } from "lucide-react";
219
-
220
- // src/styles.ts
221
- function resolveNodeStyles(styles, viewport = "desktop") {
222
- if (!styles) return {};
223
- const base = styles.base || {};
224
- const override = styles[viewport] || {};
225
- return { ...base, ...override };
226
- }
227
- function escapeCssValue(value) {
228
- return String(value).replace(/[{};]+/g, "");
229
- }
230
- function escapeCssIdent(value) {
231
- return value.replace(/["\\\]]/g, "\\$&");
232
- }
233
- function styleDefinitionToCssDeclarations(styleDefinition, options) {
234
- if (!styleDefinition || typeof styleDefinition !== "object") return "";
235
- const declarations = [];
236
- const suffix = options?.important ? " !important" : "";
237
- for (const [key, value] of Object.entries(styleDefinition)) {
238
- if (value === null || value === void 0 || value === "") continue;
239
- const property = key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
240
- declarations.push(`${property}: ${escapeCssValue(value)}${suffix};`);
241
- }
242
- return declarations.join(" ");
243
- }
244
- function collectStateStylesCss(document, options = { important: true }) {
245
- if (!document?.document) return "";
246
- const rules = [];
247
- const walk = (node) => {
248
- const states = node.styles?.states;
249
- if (states && typeof states === "object") {
250
- for (const [state, styleDefinition] of Object.entries(states)) {
251
- const declarations = styleDefinitionToCssDeclarations(
252
- styleDefinition,
253
- { important: options.important !== false }
254
- );
255
- if (!declarations) continue;
256
- const safeState = /^::?[a-zA-Z-]+$/.test(state) ? state : null;
257
- if (!safeState) continue;
258
- rules.push(`[data-kubuild-node="${escapeCssIdent(node.id)}"]${safeState} { ${declarations} }`);
259
- }
260
- }
261
- node.children?.forEach(walk);
262
- };
263
- walk(document.document);
264
- return rules.join("\n");
265
- }
266
- var DEFAULT_CSS_RESET = `
1
+ import{isActionBinding as no}from"@kubuild/schema";import{createDefaultComponentRegistry as oo}from"@kubuild/components";import{createContext as _t,useContext as jt,useMemo as zt}from"react";import{resolveBinding as pe}from"@kubuild/core";import{isVariableBinding as _e,isActionBinding as Ut}from"@kubuild/schema";import{jsx as Kt}from"react/jsx-runtime";var ie=Object.freeze({}),je=_t(ie);function Wt(r){if(!r)return ie;let e=r.variables?Object.freeze({...r.variables}):void 0;return Object.freeze({variables:e,...r.assetProvider?{assetProvider:r.assetProvider}:{},...r.actionRegistry?{actionRegistry:r.actionRegistry}:{},...r.onDiagnostic?{onDiagnostic:r.onDiagnostic}:{}})}function vo(r){let e=new Map(Object.entries(r?.assets??{})),i=new Map(Object.entries(r?.actions??{})),o={resolve:t=>e.get(t)||t},n={get:t=>i.get(t),register:(t,l)=>{i.set(t,l)},unregister:t=>{i.delete(t)}};return Wt({variables:r?.variables,assetProvider:o,actionRegistry:n,onDiagnostic:r?.onDiagnostic})}var ze=({value:r,children:e})=>{let i=zt(()=>r||ie,[r]);return Kt(je.Provider,{value:i,children:e})};function Ue(){return jt(je)}function Re(r,e){if(!(!r||!e))try{let i=r.resolve(e);return typeof i=="string"?i:void 0}catch{return}}function We(r,e){return e==null?e:_e(e)?pe(e,r).value:typeof e=="string"&&e.includes("{{")?e.replace(/\{\{\s*([\w.-]+)\s*\}\}/g,(i,o)=>{let n=pe({key:o},r);return n.status==="resolved"?String(n.value):i}):e}function Ke(r,e){if(!e||typeof e!="object")return{value:e,invalidPaths:[]};let i=[],o=(t,l)=>{if(t==null)return t;if(_e(t)){let f=pe(t,r);return f.status==="empty"&&i.push(l),f.value}if(typeof t=="string")return t.includes("{{")?t.replace(/\{\{\s*([\w.-]+)\s*\}\}/g,(f,p)=>{let u=pe({key:p},r);return u.status!=="resolved"?(i.push(l),f):String(u.value)}):t;if(Array.isArray(t))return t.map((f,p)=>o(f,`${l}[${p}]`));if(typeof t=="object"){let f={};for(let[p,u]of Object.entries(t))f[p]=o(u,l?`${l}.${p}`:p);return f}return t},n={};for(let[t,l]of Object.entries(e))n[t]=o(l,t);return{value:n,invalidPaths:i}}function Ye(r,e){return Ke(r,e).value}function Xe(r,e){return!r||!e?!1:!!r.get(e)}function Ge(r){let{action:e,nodeId:i,document:o,context:n,onDiagnostic:t}=r;if(!Ut(e)){let d={code:"INVALID_ACTION_PAYLOAD",actionType:typeof e?.type=="string"?e.type:"unknown",nodeId:i,message:`Invalid action binding on node ${i||"unknown"}.`};return t?.(d),n?.onDiagnostic?.(d),!1}let l=n?.actionRegistry?.get(e.type);if(!l){let d={code:"UNKNOWN_ACTION",actionType:e.type,nodeId:i,message:`No action handler registered for action type "${e.type}".`};return t?.(d),n?.onDiagnostic?.(d),!1}let{value:f,invalidPaths:p}=Ke(n,e.payload);if(p.length>0){let d={code:"INVALID_ACTION_BINDING",actionType:e.type,nodeId:i,message:`Action "${e.type}" payload has unresolved binding path(s) [${p.join(", ")}] on node ${i||"unknown"}; handler was not invoked.`,invalidPaths:p};return t?.(d),n?.onDiagnostic?.(d),!1}let u={nodeId:i,document:o,variables:n?.variables};try{let d=l(f,u);return d&&typeof d.catch=="function"&&d.catch(s=>{let a={code:"ACTION_EXECUTION_ERROR",actionType:e.type,nodeId:i,message:`Action "${e.type}" handler threw an asynchronous error: ${s instanceof Error?s.message:String(s)}`,error:s};t?.(a),n?.onDiagnostic?.(a)}),!0}catch(d){let s={code:"ACTION_EXECUTION_ERROR",actionType:e.type,nodeId:i,message:`Action "${e.type}" handler threw a synchronous error: ${d instanceof Error?d.message:String(d)}`,error:d};return t?.(s),n?.onDiagnostic?.(s),!1}}import{AlertTriangle as ro}from"lucide-react";function Je(r,e="desktop"){if(!r)return{};let i=r.base||{},o=r[e]||{};return{...i,...o}}function Yt(r){return String(r).replace(/[{};]+/g,"")}function Xt(r){return r.replace(/["\\\]]/g,"\\$&")}function te(r,e){if(!r||typeof r!="object")return"";let i=[],o=e?.important?" !important":"";for(let[n,t]of Object.entries(r)){if(t==null||t==="")continue;let l=n.replace(/[A-Z]/g,f=>`-${f.toLowerCase()}`);i.push(`${l}: ${Yt(t)}${o};`)}return i.join(" ")}function Ze(r,e={important:!0}){if(!r?.document)return"";let i=[],o=n=>{let t=n.styles?.states;if(t&&typeof t=="object")for(let[l,f]of Object.entries(t)){let p=te(f,{important:e.important!==!1});if(!p)continue;let u=/^::?[a-zA-Z-]+$/.test(l)?l:null;u&&i.push(`[data-kubuild-node="${Xt(n.id)}"]${u} { ${p} }`)}n.children?.forEach(o)};return o(r.document),i.join(`
2
+ `)}var Qe=`
267
3
  *, *::before, *::after {
268
4
  box-sizing: border-box;
269
5
  }
@@ -289,10 +25,7 @@ input, button, textarea, select {
289
25
  p, h1, h2, h3, h4, h5, h6 {
290
26
  overflow-wrap: break-word;
291
27
  }
292
- `.trim();
293
-
294
- // src/animation.ts
295
- var ANIMATION_KEYFRAMES_CSS = `
28
+ `.trim();var Gt=`
296
29
  /* Entrance / AOS Keyframes */
297
30
  @keyframes kb-anim-fade {
298
31
  from { opacity: 0; }
@@ -368,2385 +101,124 @@ var ANIMATION_KEYFRAMES_CSS = `
368
101
  0%, 100% { opacity: 0.75; }
369
102
  50% { opacity: 1; }
370
103
  }
371
- `.trim();
372
- function escapeCssIdent2(value) {
373
- return value.replace(/["\\\]]/g, "\\$&");
374
- }
375
- function getHoverEffectCss(nodeId, hoverEffect) {
376
- const safeId = escapeCssIdent2(nodeId);
377
- const rules = [];
378
- switch (hoverEffect) {
379
- case "lift":
380
- rules.push(
381
- `[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; }`,
382
- `[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; }`
383
- );
384
- break;
385
- case "scale":
386
- rules.push(
387
- `[data-kubuild-node="${safeId}"] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform; }`,
388
- `[data-kubuild-node="${safeId}"]:hover { transform: scale(1.04) !important; }`
389
- );
390
- break;
391
- case "glow":
392
- rules.push(
393
- `[data-kubuild-node="${safeId}"] { transition: box-shadow 0.25s ease !important; }`,
394
- `[data-kubuild-node="${safeId}"]:hover { box-shadow: 0 0 20px 2px rgba(59, 130, 246, 0.5) !important; }`
395
- );
396
- break;
397
- case "tilt":
398
- rules.push(
399
- `[data-kubuild-node="${safeId}"] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform; }`,
400
- `[data-kubuild-node="${safeId}"]:hover { transform: rotate(2deg) scale(1.02) !important; }`
401
- );
402
- break;
403
- default:
404
- break;
405
- }
406
- return rules;
407
- }
408
- function getLoopEffectCss(nodeId, loopEffect) {
409
- const safeId = escapeCssIdent2(nodeId);
410
- const rules = [];
411
- switch (loopEffect) {
412
- case "pulse":
413
- rules.push(
414
- `[data-kubuild-node="${safeId}"] { animation: kb-loop-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; }`
415
- );
416
- break;
417
- case "bounce":
418
- rules.push(
419
- `[data-kubuild-node="${safeId}"] { animation: kb-loop-bounce 1.5s ease-in-out infinite !important; }`
420
- );
421
- break;
422
- case "spin":
423
- rules.push(
424
- `[data-kubuild-node="${safeId}"] { animation: kb-loop-spin 3s linear infinite !important; }`
425
- );
426
- break;
427
- case "float":
428
- rules.push(
429
- `[data-kubuild-node="${safeId}"] { animation: kb-loop-float 3s ease-in-out infinite !important; }`
430
- );
431
- break;
432
- case "shimmer":
433
- rules.push(
434
- `[data-kubuild-node="${safeId}"] { animation: kb-loop-shimmer 2s ease-in-out infinite !important; }`
435
- );
436
- break;
437
- default:
438
- break;
439
- }
440
- return rules;
441
- }
442
- function getEntranceAnimationCss(nodeId, anim) {
443
- if (!anim.type || anim.type === "none") return [];
444
- const safeId = escapeCssIdent2(nodeId);
445
- const duration = typeof anim.duration === "number" ? anim.duration : 600;
446
- const delay = typeof anim.delay === "number" ? anim.delay : 0;
447
- const easing = anim.easing || "ease-out";
448
- return [
449
- `[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; }`
450
- ];
451
- }
452
- function collectAnimationStylesCss(document) {
453
- if (!document?.document) return "";
454
- const rules = [];
455
- let hasAnyAnimation = false;
456
- const walk = (node) => {
457
- const anim = node.animation;
458
- if (anim) {
459
- if (anim.hoverEffect && anim.hoverEffect !== "none") {
460
- rules.push(...getHoverEffectCss(node.id, anim.hoverEffect));
461
- hasAnyAnimation = true;
462
- }
463
- if (anim.loopEffect && anim.loopEffect !== "none") {
464
- rules.push(...getLoopEffectCss(node.id, anim.loopEffect));
465
- hasAnyAnimation = true;
466
- }
467
- if (anim.type && anim.type !== "none") {
468
- rules.push(...getEntranceAnimationCss(node.id, anim));
469
- hasAnyAnimation = true;
470
- }
471
- }
472
- node.children?.forEach(walk);
473
- };
474
- walk(document.document);
475
- if (!hasAnyAnimation) return "";
476
- return `${ANIMATION_KEYFRAMES_CSS}
477
-
478
- ${rules.join("\n")}`;
479
- }
480
- function replayNodeAnimation(nodeId, rootElement) {
481
- const root = rootElement || (typeof window !== "undefined" ? window.document : null);
482
- if (!root) return false;
483
- const el = root.querySelector(`[data-kubuild-node="${escapeCssIdent2(nodeId)}"]`);
484
- if (!el) return false;
485
- const currentAnimation = el.style.animation;
486
- el.style.animation = "none";
487
- void el.offsetWidth;
488
- el.style.animation = currentAnimation;
489
- el.dispatchEvent(new CustomEvent("kubuild:replay-animation", { bubbles: true, detail: { nodeId } }));
490
- return true;
491
- }
492
-
493
- // src/error-boundary.tsx
494
- import { Component } from "react";
495
- import { AlertTriangle } from "lucide-react";
496
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
497
- var ComponentErrorBoundary = class extends Component {
498
- constructor(props) {
499
- super(props);
500
- this.state = { hasError: false };
501
- }
502
- static getDerivedStateFromError(error) {
503
- return { hasError: true, error };
504
- }
505
- componentDidCatch(error, errorInfo) {
506
- if (this.props.onError) {
507
- this.props.onError(error, errorInfo);
508
- }
509
- }
510
- render() {
511
- if (this.state.hasError) {
512
- const { nodeId, componentType, mode = "runtime" } = this.props;
513
- const errorMessage = this.state.error?.message || "Unknown render error";
514
- if (mode === "editor") {
515
- return /* @__PURE__ */ jsxs(
516
- "div",
517
- {
518
- "data-kubuild-node": nodeId,
519
- "data-kubuild-error": componentType,
520
- style: {
521
- padding: "12px 16px",
522
- margin: "4px 0",
523
- backgroundColor: "#fef2f2",
524
- border: "1px solid #ef4444",
525
- borderRadius: "6px",
526
- color: "#b91c1c",
527
- fontFamily: "system-ui, -apple-system, sans-serif",
528
- fontSize: "13px",
529
- lineHeight: "1.4"
530
- },
531
- children: [
532
- /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600, marginBottom: "4px", display: "flex", alignItems: "center", gap: "6px" }, children: [
533
- /* @__PURE__ */ jsx2(AlertTriangle, { size: 14, "aria-hidden": "true" }),
534
- /* @__PURE__ */ jsxs("span", { children: [
535
- "Component Render Error: <",
536
- componentType,
537
- ">"
538
- ] })
539
- ] }),
540
- /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: "#7f1d1d", wordBreak: "break-all" }, children: [
541
- "Node ID: ",
542
- /* @__PURE__ */ jsx2("code", { children: nodeId }),
543
- " \u2014 ",
544
- errorMessage
545
- ] })
546
- ]
547
- }
548
- );
549
- }
550
- return /* @__PURE__ */ jsx2(
551
- "div",
552
- {
553
- "data-kubuild-node": nodeId,
554
- "data-kubuild-error": componentType,
555
- style: { display: "none" },
556
- "aria-hidden": "true"
557
- }
558
- );
559
- }
560
- return this.props.children;
561
- }
562
- };
563
-
564
- // src/prop-resolution.ts
565
- import { isVariableBinding as isVariableBinding2 } from "@kubuild/schema";
566
- import { primitiveTypeForField } from "@kubuild/components";
567
- import { resolveBinding as resolveBinding2 } from "@kubuild/core";
568
- function emptyValueFor(primitiveType) {
569
- switch (primitiveType) {
570
- case "string":
571
- return "";
572
- case "number":
573
- return 0;
574
- case "boolean":
575
- return false;
576
- }
577
- }
578
- function resolveBindableField(node, field, definition, context, diagnostics) {
579
- const rawValue = node.props?.[field.name];
580
- const expectedType = primitiveTypeForField(field);
581
- if (expectedType === void 0 || rawValue === void 0) {
582
- return rawValue;
583
- }
584
- const fallbackValue = definition.defaultProps?.[field.name] ?? field.defaultValue ?? emptyValueFor(expectedType);
585
- if (isVariableBinding2(rawValue)) {
586
- const outcome = resolveBinding2(rawValue, context);
587
- if (typeof outcome.value === expectedType) {
588
- return outcome.value;
589
- }
590
- diagnostics.push({
591
- code: "INCOMPATIBLE_BINDING_TYPE",
592
- nodeId: node.id,
593
- propName: field.name,
594
- expectedType,
595
- actualType: typeof outcome.value,
596
- message: `Prop "${field.name}" on node "${node.id}" expected a ${expectedType} but resolved binding "${rawValue.key}" produced a ${typeof outcome.value}.`
597
- });
598
- return fallbackValue;
599
- }
600
- if (expectedType === "string" && typeof rawValue === "string" && rawValue.includes("{{")) {
601
- return resolveVariable(context, rawValue);
602
- }
603
- return rawValue;
604
- }
605
- function resolvePropsForNode(node, definition, context) {
606
- const rawProps = node.props || {};
607
- if (!definition || !definition.propFields || definition.propFields.length === 0) {
608
- return { props: rawProps, diagnostics: [] };
609
- }
610
- const diagnostics = [];
611
- const resolved = { ...rawProps };
612
- for (const field of definition.propFields) {
613
- if (primitiveTypeForField(field) === void 0) {
614
- continue;
615
- }
616
- resolved[field.name] = resolveBindableField(node, field, definition, context, diagnostics);
617
- }
618
- return { props: resolved, diagnostics };
619
- }
620
-
621
- // src/renderer.tsx
622
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
623
- function toPascalCase(str) {
624
- if (!str) return "";
625
- return str.replace(/[-_](\w)/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase());
626
- }
627
- function getYouTubeId(url) {
628
- if (!url || typeof url !== "string") return null;
629
- const match = url.match(
630
- /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i
631
- );
632
- return match ? match[1] : null;
633
- }
634
- function getVimeoId(url) {
635
- if (!url || typeof url !== "string") return null;
636
- const match = url.match(
637
- /(?:vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|))(\d+)/i
638
- );
639
- return match ? match[3] : null;
640
- }
641
- function aspectRatioToCss(ratio) {
642
- if (ratio === "16:9") return "16 / 9";
643
- if (ratio === "4:3") return "4 / 3";
644
- if (ratio === "1:1") return "1 / 1";
645
- if (ratio === "9:16") return "9 / 16";
646
- if (typeof ratio === "string" && ratio !== "auto") return ratio.replace(":", " / ");
647
- return void 0;
648
- }
649
- var EditableText = ({
650
- as = "p",
651
- id,
652
- className,
653
- style,
654
- value,
655
- isEditable,
656
- nodeId,
657
- onClick,
658
- onChange,
659
- ...rest
660
- }) => {
661
- const isEditingRef = useRef(false);
662
- const Tag = as;
663
- if (!isEditable) {
664
- return /* @__PURE__ */ jsx3(
665
- Tag,
666
- {
667
- id,
668
- className,
669
- style,
670
- onClick,
671
- "data-kubuild-node": nodeId,
672
- ...rest,
673
- children: value
674
- }
675
- );
676
- }
677
- return /* @__PURE__ */ jsx3(
678
- Tag,
679
- {
680
- id,
681
- className,
682
- style: {
683
- ...style,
684
- outline: "none",
685
- cursor: "text"
686
- },
687
- contentEditable: true,
688
- suppressContentEditableWarning: true,
689
- "data-kubuild-node": nodeId,
690
- onClick: (e) => {
691
- onClick?.(e);
692
- },
693
- onFocus: () => {
694
- isEditingRef.current = true;
695
- },
696
- onInput: (e) => {
697
- const text = e.currentTarget.textContent ?? "";
698
- onChange?.(text, false);
699
- },
700
- onBlur: (e) => {
701
- isEditingRef.current = false;
702
- const text = e.currentTarget.textContent ?? "";
703
- onChange?.(text, true);
704
- },
705
- onKeyDown: (e) => {
706
- if (e.key === "Escape") {
707
- e.currentTarget.blur();
708
- }
709
- },
710
- ...rest,
711
- children: value
712
- }
713
- );
714
- };
715
- var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
716
- function transformEmbedHtml(rawHtml) {
717
- if (!rawHtml) return "";
718
- return rawHtml.replace(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi, (_match, attrs, cssContent) => {
719
- let transformedCss = cssContent;
720
- transformedCss = transformedCss.replace(/(^|[\s,{}])body(?=[\s,{])/g, "$1:host, body");
721
- transformedCss = transformedCss.replace(/(^|[\s,{}])html(?=[\s,{])/g, "$1:host, html");
722
- return `<style${attrs}>
723
- :host { display: block; }
724
- ${transformedCss}</style>`;
725
- });
726
- }
727
- var HtmlEmbedView = ({
728
- id,
729
- style,
730
- onClick,
731
- dataKubuildNode,
732
- html,
733
- role
734
- }) => {
735
- const hostRef = useRef(null);
736
- const shadowRootRef = useRef(null);
737
- const scopedHtml = useMemo2(() => transformEmbedHtml(html), [html]);
738
- useIsomorphicLayoutEffect(() => {
739
- const host = hostRef.current;
740
- if (!host) return;
741
- if (typeof host.attachShadow === "function") {
742
- if (!shadowRootRef.current) {
743
- if (host.shadowRoot) {
744
- shadowRootRef.current = host.shadowRoot;
745
- } else {
746
- try {
747
- shadowRootRef.current = host.attachShadow({ mode: "open" });
748
- } catch {
749
- shadowRootRef.current = host.shadowRoot;
750
- }
751
- }
752
- }
753
- if (shadowRootRef.current) {
754
- shadowRootRef.current.innerHTML = scopedHtml;
755
- return;
756
- }
757
- }
758
- host.innerHTML = scopedHtml;
759
- }, [scopedHtml]);
760
- return /* @__PURE__ */ jsx3(
761
- "div",
762
- {
763
- ref: hostRef,
764
- id,
765
- style,
766
- onClick,
767
- "data-kubuild-node": dataKubuildNode,
768
- role,
769
- children: /* @__PURE__ */ jsx3(
770
- "template",
771
- {
772
- shadowrootmode: "open",
773
- dangerouslySetInnerHTML: { __html: scopedHtml }
774
- }
775
- )
776
- }
777
- );
778
- };
779
- function NodeRenderer({
780
- node,
781
- document,
782
- registry,
783
- context: propContext,
784
- viewport = "desktop",
785
- mode = "runtime",
786
- onNodeClick,
787
- onDiagnostic,
788
- onActionDispatch,
789
- onNodePropChange,
790
- instanceSuffix = ""
791
- }) {
792
- const context = propContext || DEFAULT_RENDER_CONTEXT;
793
- const styles = resolveNodeStyles(node.styles, viewport);
794
- const props = node.props || {};
795
- const definition = registry.get(node.type);
796
- const domId = instanceSuffix ? `${node.id}${instanceSuffix}` : node.id;
797
- const { props: resolvedProps, diagnostics } = resolvePropsForNode(node, definition, context);
798
- diagnostics.forEach((diagnostic) => {
799
- onDiagnostic?.(diagnostic);
800
- context?.onDiagnostic?.(diagnostic);
801
- });
802
- const handleClick = (e) => {
803
- e.stopPropagation();
804
- if (onNodeClick) {
805
- onNodeClick(node.id, e);
806
- }
807
- if (props.action && !props.disabled) {
808
- dispatchAction({
809
- action: props.action,
810
- nodeId: node.id,
811
- document,
812
- context,
813
- onDiagnostic
814
- });
815
- if (onActionDispatch && isActionBinding2(props.action)) {
816
- onActionDispatch(props.action.type, resolveActionPayload(context, props.action.payload), node.id);
817
- }
818
- }
819
- };
820
- const childrenElements = node.children?.map((child) => /* @__PURE__ */ jsx3(
821
- NodeRenderer,
822
- {
823
- node: child,
824
- document,
825
- registry,
826
- context,
827
- viewport,
828
- mode,
829
- onNodeClick,
830
- onDiagnostic,
831
- onActionDispatch,
832
- onNodePropChange,
833
- instanceSuffix
834
- },
835
- `${child.id}${instanceSuffix}`
836
- ));
837
- const renderNodeContent = () => {
838
- if (definition?.renderer && typeof definition.renderer === "function") {
839
- const CustomRenderer = definition.renderer;
840
- try {
841
- if (typeof CustomRenderer === "function" && !CustomRenderer.prototype?.isReactComponent) {
842
- return CustomRenderer({
843
- node,
844
- document,
845
- props: resolvedProps,
846
- styles,
847
- context,
848
- children: childrenElements,
849
- onClick: handleClick
850
- });
851
- }
852
- } catch (err) {
853
- throw err;
854
- }
855
- return /* @__PURE__ */ jsx3(
856
- CustomRenderer,
857
- {
858
- node,
859
- document,
860
- props: resolvedProps,
861
- styles,
862
- context,
863
- onClick: handleClick,
864
- children: childrenElements
865
- }
866
- );
867
- }
868
- switch (node.type) {
869
- case "page":
870
- return /* @__PURE__ */ jsx3("div", { id: domId, style: styles, onClick: handleClick, "data-kubuild-node": node.id, children: childrenElements });
871
- case "section":
872
- return /* @__PURE__ */ jsx3(
873
- "section",
874
- {
875
- id: domId,
876
- style: styles,
877
- onClick: handleClick,
878
- "data-kubuild-node": node.id,
879
- "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0,
880
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
881
- children: childrenElements
882
- }
883
- );
884
- case "container":
885
- return /* @__PURE__ */ jsx3(
886
- "div",
887
- {
888
- id: domId,
889
- style: styles,
890
- onClick: handleClick,
891
- "data-kubuild-node": node.id,
892
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
893
- children: childrenElements
894
- }
895
- );
896
- case "columns":
897
- return /* @__PURE__ */ jsx3(
898
- "div",
899
- {
900
- id: domId,
901
- style: styles,
902
- onClick: handleClick,
903
- "data-kubuild-node": node.id,
904
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
905
- children: childrenElements
906
- }
907
- );
908
- case "heading": {
909
- const rawLevel = typeof resolvedProps.level === "number" ? resolvedProps.level : typeof props.level === "number" ? props.level : 2;
910
- const clampedLevel = Math.min(Math.max(rawLevel, 1), 6);
911
- const text = String(resolvedProps.text ?? "");
912
- const Tag = `h${clampedLevel}`;
913
- const isEditable = mode === "editor" && !isVariableBinding3(props.text);
914
- return /* @__PURE__ */ jsx3(
915
- EditableText,
916
- {
917
- as: Tag,
918
- id: domId,
919
- style: styles,
920
- value: text,
921
- isEditable,
922
- nodeId: node.id,
923
- onClick: handleClick,
924
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
925
- "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0
926
- }
927
- );
928
- }
929
- case "text": {
930
- const content2 = String(resolvedProps.content ?? "");
931
- const isEditable = mode === "editor" && !isVariableBinding3(props.content);
932
- return /* @__PURE__ */ jsx3(
933
- EditableText,
934
- {
935
- as: "p",
936
- id: domId,
937
- style: styles,
938
- value: content2,
939
- isEditable,
940
- nodeId: node.id,
941
- onClick: handleClick,
942
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "content", val, isBlur),
943
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
944
- }
945
- );
946
- }
947
- case "paragraph": {
948
- const text = String(resolvedProps.text ?? resolvedProps.content ?? props.text ?? props.content ?? "");
949
- const isEditable = mode === "editor" && !isVariableBinding3(props.text) && !isVariableBinding3(props.content);
950
- const propName = props.content !== void 0 ? "content" : "text";
951
- return /* @__PURE__ */ jsx3(
952
- EditableText,
953
- {
954
- as: "p",
955
- id: domId,
956
- style: styles,
957
- value: text,
958
- isEditable,
959
- nodeId: node.id,
960
- onClick: handleClick,
961
- onChange: (val, isBlur) => onNodePropChange?.(node.id, propName, val, isBlur),
962
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
963
- }
964
- );
965
- }
966
- case "link": {
967
- const text = String(resolvedProps.text ?? props.text ?? "");
968
- const rawHref = typeof resolvedProps.href === "string" ? resolvedProps.href : typeof props.href === "string" ? props.href : void 0;
969
- const href = rawHref ? sanitizeUrl(rawHref, "#") : "#";
970
- const rawTarget = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
971
- const rawRel = typeof resolvedProps.rel === "string" ? resolvedProps.rel : void 0;
972
- const rel = rawTarget === "_blank" && !rawRel ? "noopener noreferrer" : rawRel;
973
- const isEditable = mode === "editor" && !isVariableBinding3(props.text);
974
- if (isEditable) {
975
- return /* @__PURE__ */ jsx3(
976
- EditableText,
977
- {
978
- as: "a",
979
- id: domId,
980
- href: void 0,
981
- target: rawTarget,
982
- rel,
983
- style: styles,
984
- value: text,
985
- isEditable,
986
- nodeId: node.id,
987
- onClick: handleClick,
988
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
989
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
990
- }
991
- );
992
- }
993
- return /* @__PURE__ */ jsx3(
994
- "a",
995
- {
996
- id: domId,
997
- href,
998
- target: rawTarget,
999
- rel,
1000
- style: styles,
1001
- onClick: handleClick,
1002
- "data-kubuild-node": node.id,
1003
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1004
- children: text
1005
- }
1006
- );
1007
- }
1008
- case "blockquote": {
1009
- const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : props.text !== void 0 ? String(props.text) : "";
1010
- const rawCite = typeof resolvedProps.cite === "string" ? resolvedProps.cite : typeof props.cite === "string" ? props.cite : void 0;
1011
- const safeCite = rawCite ? sanitizeUrl(rawCite) : void 0;
1012
- const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
1013
- const isEditable = mode === "editor" && !isVariableBinding3(props.text);
1014
- if (hasChildren) {
1015
- return /* @__PURE__ */ jsxs2(
1016
- "blockquote",
1017
- {
1018
- id: domId,
1019
- cite: safeCite,
1020
- style: styles,
1021
- onClick: handleClick,
1022
- "data-kubuild-node": node.id,
1023
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1024
- children: [
1025
- text ? isEditable ? /* @__PURE__ */ jsx3(
1026
- EditableText,
1027
- {
1028
- as: "p",
1029
- value: text,
1030
- isEditable,
1031
- nodeId: node.id,
1032
- onClick: handleClick,
1033
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
1034
- }
1035
- ) : /* @__PURE__ */ jsx3("p", { children: text }) : null,
1036
- childrenElements
1037
- ]
1038
- }
1039
- );
1040
- }
1041
- return /* @__PURE__ */ jsx3(
1042
- EditableText,
1043
- {
1044
- as: "blockquote",
1045
- id: domId,
1046
- cite: safeCite,
1047
- style: styles,
1048
- value: text,
1049
- isEditable,
1050
- nodeId: node.id,
1051
- onClick: handleClick,
1052
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
1053
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1054
- }
1055
- );
1056
- }
1057
- case "badge": {
1058
- const text = String(resolvedProps.text ?? props.text ?? "Badge");
1059
- const variant = typeof resolvedProps.variant === "string" ? resolvedProps.variant : "default";
1060
- const isEditable = mode === "editor" && !isVariableBinding3(props.text);
1061
- return /* @__PURE__ */ jsx3(
1062
- EditableText,
1063
- {
1064
- as: "span",
1065
- id: domId,
1066
- style: styles,
1067
- value: text,
1068
- isEditable,
1069
- nodeId: node.id,
1070
- "data-variant": variant,
1071
- onClick: handleClick,
1072
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
1073
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1074
- }
1075
- );
1076
- }
1077
- case "code-block": {
1078
- const code = String(resolvedProps.code ?? props.code ?? "");
1079
- const language = typeof resolvedProps.language === "string" ? resolvedProps.language : typeof props.language === "string" ? props.language : void 0;
1080
- const isEditable = mode === "editor" && !isVariableBinding3(props.code);
1081
- return /* @__PURE__ */ jsx3(
1082
- "pre",
1083
- {
1084
- id: domId,
1085
- style: styles,
1086
- onClick: handleClick,
1087
- "data-kubuild-node": node.id,
1088
- "data-language": language,
1089
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1090
- children: /* @__PURE__ */ jsx3(
1091
- EditableText,
1092
- {
1093
- as: "code",
1094
- className: language ? `language-${language}` : void 0,
1095
- style: { fontFamily: "inherit", color: "inherit", display: "block", whiteSpace: "pre" },
1096
- value: code,
1097
- isEditable,
1098
- nodeId: node.id,
1099
- onClick: handleClick,
1100
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "code", val, isBlur)
1101
- }
1102
- )
1103
- }
1104
- );
1105
- }
1106
- case "list": {
1107
- const rawTag = resolvedProps.tag;
1108
- const Tag = rawTag === "ol" ? "ol" : "ul";
1109
- const rawListStyle = resolvedProps.listStyleType;
1110
- const listStyleType = rawListStyle === "custom-icon" ? "none" : rawListStyle;
1111
- const listStyles = {
1112
- ...styles,
1113
- ...listStyleType ? { listStyleType } : {}
1114
- };
1115
- return /* @__PURE__ */ jsx3(
1116
- Tag,
1117
- {
1118
- id: domId,
1119
- style: listStyles,
1120
- onClick: handleClick,
1121
- "data-kubuild-node": node.id,
1122
- "data-list-style": rawListStyle,
1123
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1124
- children: childrenElements
1125
- }
1126
- );
1127
- }
1128
- case "list-item": {
1129
- const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : "";
1130
- const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
1131
- const isEditable = mode === "editor" && !isVariableBinding3(props.text);
1132
- if (hasChildren) {
1133
- return /* @__PURE__ */ jsxs2(
1134
- "li",
1135
- {
1136
- id: domId,
1137
- style: styles,
1138
- onClick: handleClick,
1139
- "data-kubuild-node": node.id,
1140
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1141
- children: [
1142
- text ? isEditable ? /* @__PURE__ */ jsx3(
1143
- EditableText,
1144
- {
1145
- as: "span",
1146
- value: text,
1147
- isEditable,
1148
- nodeId: node.id,
1149
- onClick: handleClick,
1150
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
1151
- }
1152
- ) : /* @__PURE__ */ jsx3("span", { children: text }) : null,
1153
- childrenElements
1154
- ]
1155
- }
1156
- );
1157
- }
1158
- return /* @__PURE__ */ jsx3(
1159
- EditableText,
1160
- {
1161
- as: "li",
1162
- id: domId,
1163
- style: styles,
1164
- value: text,
1165
- isEditable,
1166
- nodeId: node.id,
1167
- onClick: handleClick,
1168
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
1169
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1170
- }
1171
- );
1172
- }
1173
- case "table": {
1174
- const isStriped = resolvedProps.striped === true;
1175
- const isBordered = resolvedProps.bordered !== false;
1176
- const isCompact = resolvedProps.compact === true;
1177
- const tableStyles = {
1178
- width: "100%",
1179
- borderCollapse: "collapse",
1180
- ...styles,
1181
- ...isBordered ? { border: styles.border || "1px solid #e2e8f0" } : {}
1182
- };
1183
- return /* @__PURE__ */ jsx3(
1184
- "table",
1185
- {
1186
- id: domId,
1187
- style: tableStyles,
1188
- onClick: handleClick,
1189
- "data-kubuild-node": node.id,
1190
- "data-striped": isStriped ? "true" : void 0,
1191
- "data-bordered": isBordered ? "true" : void 0,
1192
- "data-compact": isCompact ? "true" : void 0,
1193
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1194
- children: /* @__PURE__ */ jsx3("tbody", { children: childrenElements })
1195
- }
1196
- );
1197
- }
1198
- case "table-row": {
1199
- return /* @__PURE__ */ jsx3(
1200
- "tr",
1201
- {
1202
- id: domId,
1203
- style: styles,
1204
- onClick: handleClick,
1205
- "data-kubuild-node": node.id,
1206
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1207
- children: childrenElements
1208
- }
1209
- );
1210
- }
1211
- case "table-cell": {
1212
- const rawTag = resolvedProps.tag;
1213
- const Tag = rawTag === "th" ? "th" : "td";
1214
- const colSpan = typeof resolvedProps.colSpan === "number" && resolvedProps.colSpan > 1 ? resolvedProps.colSpan : void 0;
1215
- const rowSpan = typeof resolvedProps.rowSpan === "number" && resolvedProps.rowSpan > 1 ? resolvedProps.rowSpan : void 0;
1216
- const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : "";
1217
- const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
1218
- const isEditable = mode === "editor" && !isVariableBinding3(props.text);
1219
- const cellStyles = {
1220
- padding: "8px 12px",
1221
- border: "1px solid #e2e8f0",
1222
- textAlign: "left",
1223
- ...styles,
1224
- ...Tag === "th" ? {
1225
- fontWeight: styles.fontWeight || "600",
1226
- backgroundColor: styles.backgroundColor || "#f8fafc"
1227
- } : {}
1228
- };
1229
- if (hasChildren) {
1230
- return /* @__PURE__ */ jsxs2(
1231
- Tag,
1232
- {
1233
- id: domId,
1234
- colSpan,
1235
- rowSpan,
1236
- style: cellStyles,
1237
- onClick: handleClick,
1238
- "data-kubuild-node": node.id,
1239
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1240
- children: [
1241
- text ? isEditable ? /* @__PURE__ */ jsx3(
1242
- EditableText,
1243
- {
1244
- as: "span",
1245
- value: text,
1246
- isEditable,
1247
- nodeId: node.id,
1248
- onClick: handleClick,
1249
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
1250
- }
1251
- ) : /* @__PURE__ */ jsx3("span", { children: text }) : null,
1252
- childrenElements
1253
- ]
1254
- }
1255
- );
1256
- }
1257
- return /* @__PURE__ */ jsx3(
1258
- EditableText,
1259
- {
1260
- as: Tag,
1261
- id: domId,
1262
- colSpan,
1263
- rowSpan,
1264
- style: cellStyles,
1265
- value: text,
1266
- isEditable,
1267
- nodeId: node.id,
1268
- onClick: handleClick,
1269
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
1270
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1271
- }
1272
- );
1273
- }
1274
- case "image": {
1275
- const rawSrc = typeof resolvedProps.src === "string" && resolvedProps.src.length > 0 ? resolvedProps.src : void 0;
1276
- const directSrc = rawSrc ?? void 0;
1277
- const asset = isAssetReference(props.asset) ? props.asset : void 0;
1278
- const resolvedSrc = !directSrc && asset && context?.assetProvider ? resolveAssetSync(context.assetProvider, asset.assetId) : void 0;
1279
- const fallbackSrc = asset?.fallbackUrl;
1280
- const rawUrl = directSrc || resolvedSrc || fallbackSrc;
1281
- const safeSrc = rawUrl ? sanitizeUrl(rawUrl, "", { allowBlobMedia: true }) : void 0;
1282
- const alt = typeof resolvedProps.alt === "string" ? resolvedProps.alt : "";
1283
- const loading = resolvedProps.loading === "eager" ? "eager" : "lazy";
1284
- return /* @__PURE__ */ jsx3(
1285
- "img",
1286
- {
1287
- id: domId,
1288
- src: safeSrc || void 0,
1289
- alt,
1290
- role: alt.length === 0 ? "presentation" : void 0,
1291
- loading,
1292
- width: resolvedProps.width,
1293
- height: resolvedProps.height,
1294
- style: styles,
1295
- onClick: handleClick,
1296
- "data-kubuild-node": node.id
1297
- }
1298
- );
1299
- }
1300
- case "video": {
1301
- const rawSrc = typeof resolvedProps.src === "string" ? resolvedProps.src : typeof props.src === "string" ? props.src : "";
1302
- const provider = typeof resolvedProps.provider === "string" ? resolvedProps.provider : typeof props.provider === "string" ? props.provider : "auto";
1303
- const rawPoster = typeof resolvedProps.poster === "string" ? resolvedProps.poster : typeof props.poster === "string" ? props.poster : void 0;
1304
- const poster = rawPoster ? sanitizeUrl(rawPoster) : void 0;
1305
- const controls = resolvedProps.controls !== false && props.controls !== false;
1306
- const autoplay = resolvedProps.autoplay === true || props.autoplay === true;
1307
- const loop = resolvedProps.loop === true || props.loop === true;
1308
- const muted = resolvedProps.muted === true || props.muted === true;
1309
- const aspectRatio = aspectRatioToCss(resolvedProps.aspectRatio ?? props.aspectRatio ?? "16:9");
1310
- const ytId = provider === "youtube" ? getYouTubeId(rawSrc) || rawSrc : provider === "auto" ? getYouTubeId(rawSrc) : null;
1311
- const vimeoId = provider === "vimeo" ? getVimeoId(rawSrc) || rawSrc : provider === "auto" ? getVimeoId(rawSrc) : null;
1312
- const videoStyles = {
1313
- width: "100%",
1314
- maxWidth: "100%",
1315
- display: "block",
1316
- ...aspectRatio ? { aspectRatio } : {},
1317
- ...styles
1318
- };
1319
- if (ytId) {
1320
- const autoplayParam = autoplay ? "1" : "0";
1321
- const loopParam = loop ? `1&playlist=${ytId}` : "0";
1322
- const muteParam = muted ? "1" : "0";
1323
- const controlsParam = controls ? "1" : "0";
1324
- const embedUrl = `https://www.youtube.com/embed/${ytId}?autoplay=${autoplayParam}&loop=${loopParam}&mute=${muteParam}&controls=${controlsParam}`;
1325
- return /* @__PURE__ */ jsx3(
1326
- "div",
1327
- {
1328
- id: domId,
1329
- style: { ...videoStyles, position: "relative", overflow: "hidden" },
1330
- onClick: handleClick,
1331
- "data-kubuild-node": node.id,
1332
- "data-video-provider": "youtube",
1333
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1334
- children: /* @__PURE__ */ jsx3(
1335
- "iframe",
1336
- {
1337
- src: embedUrl,
1338
- title: "YouTube video",
1339
- style: { width: "100%", height: "100%", border: "none", minHeight: "240px" },
1340
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
1341
- allowFullScreen: true
1342
- }
1343
- )
1344
- }
1345
- );
1346
- }
1347
- if (vimeoId) {
1348
- const autoplayParam = autoplay ? "1" : "0";
1349
- const loopParam = loop ? "1" : "0";
1350
- const muteParam = muted ? "1" : "0";
1351
- const embedUrl = `https://player.vimeo.com/video/${vimeoId}?autoplay=${autoplayParam}&loop=${loopParam}&muted=${muteParam}`;
1352
- return /* @__PURE__ */ jsx3(
1353
- "div",
1354
- {
1355
- id: domId,
1356
- style: { ...videoStyles, position: "relative", overflow: "hidden" },
1357
- onClick: handleClick,
1358
- "data-kubuild-node": node.id,
1359
- "data-video-provider": "vimeo",
1360
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1361
- children: /* @__PURE__ */ jsx3(
1362
- "iframe",
1363
- {
1364
- src: embedUrl,
1365
- title: "Vimeo video",
1366
- style: { width: "100%", height: "100%", border: "none", minHeight: "240px" },
1367
- allow: "autoplay; fullscreen; picture-in-picture",
1368
- allowFullScreen: true
1369
- }
1370
- )
1371
- }
1372
- );
1373
- }
1374
- const safeSrc = sanitizeUrl(rawSrc, "", { allowBlobMedia: true });
1375
- return /* @__PURE__ */ jsx3(
1376
- "video",
1377
- {
1378
- id: domId,
1379
- src: safeSrc || void 0,
1380
- poster: poster || void 0,
1381
- controls,
1382
- autoPlay: autoplay,
1383
- loop,
1384
- muted,
1385
- style: videoStyles,
1386
- onClick: handleClick,
1387
- "data-kubuild-node": node.id,
1388
- "data-video-provider": "html5",
1389
- playsInline: true,
1390
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1391
- }
1392
- );
1393
- }
1394
- case "icon": {
1395
- 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";
1396
- const size = typeof resolvedProps.size === "number" ? resolvedProps.size : typeof props.size === "number" ? props.size : 24;
1397
- const color = typeof resolvedProps.color === "string" ? resolvedProps.color : typeof props.color === "string" ? props.color : "currentColor";
1398
- const strokeWidth = typeof resolvedProps.strokeWidth === "number" ? resolvedProps.strokeWidth : typeof props.strokeWidth === "number" ? props.strokeWidth : 2;
1399
- const pascalName = toPascalCase(name);
1400
- const IconComponent = lucideIcons[pascalName];
1401
- return /* @__PURE__ */ jsx3(
1402
- "span",
1403
- {
1404
- id: domId,
1405
- style: { display: "inline-flex", alignItems: "center", justifyContent: "center", color, ...styles },
1406
- onClick: handleClick,
1407
- "data-kubuild-node": node.id,
1408
- "data-icon-name": name,
1409
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : "img",
1410
- "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : name,
1411
- children: IconComponent ? /* @__PURE__ */ jsx3(IconComponent, { size, color, strokeWidth }) : /* @__PURE__ */ jsx3("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("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" }) })
1412
- }
1413
- );
1414
- }
1415
- case "html-embed": {
1416
- const rawHtml = typeof resolvedProps.html === "string" ? resolvedProps.html : typeof props.html === "string" ? props.html : "";
1417
- const sanitized = sanitizeHtml(rawHtml);
1418
- if (mode === "editor" && !rawHtml.trim()) {
1419
- return /* @__PURE__ */ jsxs2(
1420
- "div",
1421
- {
1422
- id: domId,
1423
- style: {
1424
- padding: "16px",
1425
- border: "2px dashed #94a3b8",
1426
- borderRadius: "8px",
1427
- backgroundColor: "#f8fafc",
1428
- color: "#64748b",
1429
- textAlign: "center",
1430
- fontSize: "13px",
1431
- fontFamily: "sans-serif",
1432
- ...styles
1433
- },
1434
- onClick: handleClick,
1435
- "data-kubuild-node": node.id,
1436
- children: [
1437
- /* @__PURE__ */ jsx3("span", { style: { fontWeight: 600 }, children: "</> HTML Embed" }),
1438
- /* @__PURE__ */ jsx3("div", { style: { fontSize: "11px", marginTop: "4px" }, children: "Click to configure HTML code in Inspector Panel" })
1439
- ]
1440
- }
1441
- );
1442
- }
1443
- return /* @__PURE__ */ jsx3(
1444
- HtmlEmbedView,
1445
- {
1446
- id: domId,
1447
- style: styles,
1448
- onClick: handleClick,
1449
- dataKubuildNode: node.id,
1450
- html: sanitized,
1451
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1452
- }
1453
- );
1454
- }
1455
- case "button": {
1456
- const label = String(resolvedProps.label ?? "Button");
1457
- const disabled = resolvedProps.disabled === true;
1458
- const rawHref = typeof resolvedProps.href === "string" ? resolvedProps.href : void 0;
1459
- const href = rawHref ? sanitizeUrl(rawHref, "#") : void 0;
1460
- const rawTarget = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
1461
- const rawRel = typeof resolvedProps.rel === "string" ? resolvedProps.rel : void 0;
1462
- const rel = rawTarget === "_blank" && !rawRel ? "noopener noreferrer" : rawRel;
1463
- const action = isActionBinding2(props.action) ? props.action : void 0;
1464
- const actionResolved = action ? isActionRegistered(context?.actionRegistry, action.type) : void 0;
1465
- const actionAttrs = action ? { "data-kubuild-action": action.type, "data-kubuild-action-resolved": actionResolved } : {};
1466
- const ariaLabel = typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0;
1467
- const isEditable = mode === "editor" && !isVariableBinding3(props.label);
1468
- const rawButtonType = typeof resolvedProps.buttonType === "string" ? resolvedProps.buttonType : "button";
1469
- const buttonType = rawButtonType === "submit" || rawButtonType === "reset" ? rawButtonType : "button";
1470
- if (href && !disabled) {
1471
- if (isEditable) {
1472
- return /* @__PURE__ */ jsx3(
1473
- EditableText,
1474
- {
1475
- as: "a",
1476
- id: domId,
1477
- href: mode === "editor" ? void 0 : href,
1478
- target: rawTarget,
1479
- rel,
1480
- style: styles,
1481
- value: label,
1482
- isEditable,
1483
- nodeId: node.id,
1484
- onClick: handleClick,
1485
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur),
1486
- "aria-label": ariaLabel,
1487
- tabIndex: 0,
1488
- ...actionAttrs
1489
- }
1490
- );
1491
- }
1492
- return /* @__PURE__ */ jsx3(
1493
- "a",
1494
- {
1495
- id: domId,
1496
- href,
1497
- target: rawTarget,
1498
- rel,
1499
- style: styles,
1500
- onClick: handleClick,
1501
- "data-kubuild-node": node.id,
1502
- "aria-label": ariaLabel,
1503
- tabIndex: 0,
1504
- ...actionAttrs,
1505
- children: label
1506
- }
1507
- );
1508
- }
1509
- if (isEditable) {
1510
- return /* @__PURE__ */ jsx3(
1511
- EditableText,
1512
- {
1513
- as: "button",
1514
- id: domId,
1515
- type: mode === "editor" ? "button" : buttonType,
1516
- disabled,
1517
- "aria-disabled": disabled ? true : void 0,
1518
- "aria-label": ariaLabel,
1519
- tabIndex: disabled ? -1 : 0,
1520
- style: styles,
1521
- value: label,
1522
- isEditable,
1523
- nodeId: node.id,
1524
- onClick: disabled ? void 0 : handleClick,
1525
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur),
1526
- ...actionAttrs
1527
- }
1528
- );
1529
- }
1530
- return /* @__PURE__ */ jsx3(
1531
- "button",
1532
- {
1533
- id: domId,
1534
- type: mode === "editor" ? "button" : buttonType,
1535
- disabled,
1536
- "aria-disabled": disabled ? true : void 0,
1537
- "aria-label": ariaLabel,
1538
- tabIndex: disabled ? -1 : 0,
1539
- style: styles,
1540
- onClick: disabled ? void 0 : handleClick,
1541
- "data-kubuild-node": node.id,
1542
- ...actionAttrs,
1543
- children: label
1544
- }
1545
- );
1546
- }
1547
- case "form": {
1548
- const action = typeof resolvedProps.action === "string" ? resolvedProps.action : void 0;
1549
- const method = typeof resolvedProps.method === "string" ? resolvedProps.method : "POST";
1550
- const target = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
1551
- const autoComplete = typeof resolvedProps.autoComplete === "string" ? resolvedProps.autoComplete : void 0;
1552
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1553
- const handleSubmit = (e) => {
1554
- if (mode === "editor") {
1555
- e.preventDefault();
1556
- }
1557
- };
1558
- return /* @__PURE__ */ jsx3(
1559
- "form",
1560
- {
1561
- id: domId,
1562
- name,
1563
- action: action && mode !== "editor" ? sanitizeUrl(action, "") : void 0,
1564
- method,
1565
- target,
1566
- autoComplete,
1567
- style: styles,
1568
- onClick: handleClick,
1569
- onSubmit: handleSubmit,
1570
- "data-kubuild-node": node.id,
1571
- role: "form",
1572
- "aria-label": name,
1573
- children: childrenElements
1574
- }
1575
- );
1576
- }
1577
- case "input": {
1578
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1579
- const inputType = typeof resolvedProps.type === "string" ? resolvedProps.type : "text";
1580
- const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
1581
- const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
1582
- const required = resolvedProps.required === true;
1583
- const disabled = resolvedProps.disabled === true;
1584
- const readOnly = resolvedProps.readOnly === true;
1585
- return /* @__PURE__ */ jsx3(
1586
- "input",
1587
- {
1588
- id: domId,
1589
- type: inputType,
1590
- name,
1591
- placeholder,
1592
- defaultValue,
1593
- required,
1594
- disabled,
1595
- readOnly,
1596
- style: styles,
1597
- onClick: handleClick,
1598
- "data-kubuild-node": node.id
1599
- }
1600
- );
1601
- }
1602
- case "textarea": {
1603
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1604
- const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
1605
- const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
1606
- const rows = typeof resolvedProps.rows === "number" ? resolvedProps.rows : 4;
1607
- const required = resolvedProps.required === true;
1608
- const disabled = resolvedProps.disabled === true;
1609
- const readOnly = resolvedProps.readOnly === true;
1610
- return /* @__PURE__ */ jsx3(
1611
- "textarea",
1612
- {
1613
- id: domId,
1614
- name,
1615
- placeholder,
1616
- defaultValue,
1617
- rows,
1618
- required,
1619
- disabled,
1620
- readOnly,
1621
- style: styles,
1622
- onClick: handleClick,
1623
- "data-kubuild-node": node.id
1624
- }
1625
- );
1626
- }
1627
- case "select": {
1628
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1629
- const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
1630
- const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
1631
- const required = resolvedProps.required === true;
1632
- const disabled = resolvedProps.disabled === true;
1633
- let optionsList = [];
1634
- const rawOptions = resolvedProps.options ?? props.options;
1635
- if (Array.isArray(rawOptions)) {
1636
- optionsList = rawOptions.map((opt) => {
1637
- if (typeof opt === "object" && opt !== null) {
1638
- const record = opt;
1639
- return {
1640
- label: String(record.label ?? record.value ?? ""),
1641
- value: String(record.value ?? record.label ?? "")
1642
- };
1643
- }
1644
- return { label: String(opt), value: String(opt) };
1645
- });
1646
- } else if (typeof rawOptions === "string") {
1647
- try {
1648
- const parsed = JSON.parse(rawOptions);
1649
- if (Array.isArray(parsed)) {
1650
- optionsList = parsed.map((opt) => {
1651
- if (typeof opt === "object" && opt !== null) {
1652
- const record = opt;
1653
- return {
1654
- label: String(record.label ?? record.value ?? ""),
1655
- value: String(record.value ?? record.label ?? "")
1656
- };
1657
- }
1658
- return { label: String(opt), value: String(opt) };
1659
- });
1660
- }
1661
- } catch {
1662
- }
1663
- }
1664
- return /* @__PURE__ */ jsxs2(
1665
- "select",
1666
- {
1667
- id: domId,
1668
- name,
1669
- defaultValue,
1670
- required,
1671
- disabled,
1672
- style: styles,
1673
- onClick: handleClick,
1674
- "data-kubuild-node": node.id,
1675
- children: [
1676
- placeholder && /* @__PURE__ */ jsx3("option", { value: "", disabled: required, children: placeholder }),
1677
- optionsList.map((opt, idx) => /* @__PURE__ */ jsx3("option", { value: opt.value, children: opt.label }, `${opt.value}-${idx}`))
1678
- ]
1679
- }
1680
- );
1681
- }
1682
- case "checkbox": {
1683
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1684
- const label = String(resolvedProps.label ?? "Checkbox");
1685
- const value = resolvedProps.value !== void 0 ? String(resolvedProps.value) : "yes";
1686
- const defaultChecked = resolvedProps.defaultChecked === true;
1687
- const required = resolvedProps.required === true;
1688
- const disabled = resolvedProps.disabled === true;
1689
- const isEditable = mode === "editor" && !isVariableBinding3(props.label);
1690
- return /* @__PURE__ */ jsxs2(
1691
- "label",
1692
- {
1693
- id: domId,
1694
- style: styles,
1695
- onClick: handleClick,
1696
- "data-kubuild-node": node.id,
1697
- children: [
1698
- /* @__PURE__ */ jsx3(
1699
- "input",
1700
- {
1701
- type: "checkbox",
1702
- name,
1703
- value,
1704
- defaultChecked,
1705
- required,
1706
- disabled,
1707
- style: { cursor: disabled ? "not-allowed" : "pointer" }
1708
- }
1709
- ),
1710
- isEditable ? /* @__PURE__ */ jsx3(
1711
- EditableText,
1712
- {
1713
- as: "span",
1714
- value: label,
1715
- isEditable,
1716
- nodeId: node.id,
1717
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur)
1718
- }
1719
- ) : /* @__PURE__ */ jsx3("span", { children: label })
1720
- ]
1721
- }
1722
- );
1723
- }
1724
- case "radio": {
1725
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1726
- const label = String(resolvedProps.label ?? "Radio");
1727
- const value = resolvedProps.value !== void 0 ? String(resolvedProps.value) : "option";
1728
- const defaultChecked = resolvedProps.defaultChecked === true;
1729
- const required = resolvedProps.required === true;
1730
- const disabled = resolvedProps.disabled === true;
1731
- const isEditable = mode === "editor" && !isVariableBinding3(props.label);
1732
- return /* @__PURE__ */ jsxs2(
1733
- "label",
1734
- {
1735
- id: domId,
1736
- style: styles,
1737
- onClick: handleClick,
1738
- "data-kubuild-node": node.id,
1739
- children: [
1740
- /* @__PURE__ */ jsx3(
1741
- "input",
1742
- {
1743
- type: "radio",
1744
- name,
1745
- value,
1746
- defaultChecked,
1747
- required,
1748
- disabled,
1749
- style: { cursor: disabled ? "not-allowed" : "pointer" }
1750
- }
1751
- ),
1752
- isEditable ? /* @__PURE__ */ jsx3(
1753
- EditableText,
1754
- {
1755
- as: "span",
1756
- value: label,
1757
- isEditable,
1758
- nodeId: node.id,
1759
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur)
1760
- }
1761
- ) : /* @__PURE__ */ jsx3("span", { children: label })
1762
- ]
1763
- }
1764
- );
1765
- }
1766
- case "collection": {
1767
- const sourceKey = typeof props.sourceKey === "string" ? props.sourceKey : void 0;
1768
- const itemAlias = typeof props.itemAlias === "string" && props.itemAlias.length > 0 ? props.itemAlias : "item";
1769
- const indexKey = `${itemAlias}Index`;
1770
- const sourceValue = sourceKey ? resolveBinding3({ key: sourceKey }, context).value : void 0;
1771
- if (!Array.isArray(sourceValue)) {
1772
- const collectionDiagnostic = {
1773
- code: "INVALID_COLLECTION_SOURCE",
1774
- nodeId: node.id,
1775
- propName: "sourceKey",
1776
- message: `Collection node "${node.id}" expected an array at variable path "${sourceKey ?? "(missing sourceKey)"}" but found ${sourceValue === void 0 ? "nothing" : typeof sourceValue}.`
1777
- };
1778
- onDiagnostic?.(collectionDiagnostic);
1779
- context?.onDiagnostic?.(collectionDiagnostic);
1780
- if (mode === "editor") {
1781
- return /* @__PURE__ */ jsx3(
1782
- "div",
1783
- {
1784
- id: domId,
1785
- "data-kubuild-node": node.id,
1786
- "data-kubuild-collection-invalid": node.type,
1787
- style: {
1788
- ...styles,
1789
- border: "2px dashed #f59e0b",
1790
- backgroundColor: "#fffbeb",
1791
- color: "#92400e",
1792
- padding: "12px",
1793
- borderRadius: "6px",
1794
- fontFamily: "system-ui, -apple-system, sans-serif"
1795
- },
1796
- onClick: handleClick,
1797
- children: /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, fontSize: "13px", display: "flex", alignItems: "center", gap: "6px" }, children: [
1798
- /* @__PURE__ */ jsx3(Package, { size: 14, "aria-hidden": "true" }),
1799
- /* @__PURE__ */ jsxs2("span", { children: [
1800
- "Collection: expected an array at ",
1801
- /* @__PURE__ */ jsx3("code", { children: sourceKey ?? "(missing sourceKey)" })
1802
- ] })
1803
- ] })
1804
- }
1805
- );
1806
- }
1807
- return /* @__PURE__ */ jsx3("div", { id: domId, "data-kubuild-node": node.id, style: styles, onClick: handleClick, "aria-hidden": "true" });
1808
- }
1809
- return /* @__PURE__ */ jsx3("div", { id: domId, "data-kubuild-node": node.id, style: styles, onClick: handleClick, children: sourceValue.map((item, index) => {
1810
- const childContext = {
1811
- ...context,
1812
- variables: { ...context?.variables ?? {}, [itemAlias]: item, [indexKey]: index }
1813
- };
1814
- const itemSuffix = `${instanceSuffix}--${index}`;
1815
- return node.children?.map((child) => /* @__PURE__ */ jsx3(
1816
- NodeRenderer,
1817
- {
1818
- node: child,
1819
- document,
1820
- registry,
1821
- context: childContext,
1822
- viewport,
1823
- mode,
1824
- onNodeClick,
1825
- onDiagnostic,
1826
- onActionDispatch,
1827
- onNodePropChange,
1828
- instanceSuffix: itemSuffix
1829
- },
1830
- `${child.id}${itemSuffix}`
1831
- ));
1832
- }) });
1833
- }
1834
- default:
1835
- if (mode === "editor") {
1836
- return /* @__PURE__ */ jsxs2(
1837
- "div",
1838
- {
1839
- id: domId,
1840
- "data-kubuild-node": node.id,
1841
- "data-kubuild-unknown": node.type,
1842
- style: {
1843
- ...styles,
1844
- border: "2px dashed #f59e0b",
1845
- backgroundColor: "#fffbeb",
1846
- color: "#92400e",
1847
- padding: "12px",
1848
- borderRadius: "6px",
1849
- fontFamily: "system-ui, -apple-system, sans-serif"
1850
- },
1851
- onClick: handleClick,
1852
- children: [
1853
- /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, fontSize: "13px", marginBottom: "4px", display: "flex", alignItems: "center", gap: "6px" }, children: [
1854
- /* @__PURE__ */ jsx3(Puzzle, { size: 14, "aria-hidden": "true" }),
1855
- /* @__PURE__ */ jsxs2("span", { children: [
1856
- "Unknown Component: ",
1857
- /* @__PURE__ */ jsx3("code", { children: node.type })
1858
- ] })
1859
- ] }),
1860
- /* @__PURE__ */ jsxs2("div", { style: { fontSize: "11px", color: "#b45309", marginBottom: childrenElements ? "8px" : 0 }, children: [
1861
- "Node ID: ",
1862
- /* @__PURE__ */ jsx3("code", { children: node.id })
1863
- ] }),
1864
- childrenElements
1865
- ]
1866
- }
1867
- );
1868
- }
1869
- return /* @__PURE__ */ jsx3(
1870
- "div",
1871
- {
1872
- id: domId,
1873
- "data-kubuild-node": node.id,
1874
- "data-kubuild-unknown": node.type,
1875
- style: styles,
1876
- onClick: handleClick,
1877
- children: childrenElements
1878
- }
1879
- );
1880
- }
1881
- };
1882
- let content;
1883
- try {
1884
- content = renderNodeContent();
1885
- } catch (error) {
1886
- if (mode === "editor") {
1887
- content = /* @__PURE__ */ jsxs2(
1888
- "div",
1889
- {
1890
- "data-kubuild-node": node.id,
1891
- "data-kubuild-error": node.type,
1892
- style: {
1893
- padding: "12px 16px",
1894
- margin: "4px 0",
1895
- backgroundColor: "#fef2f2",
1896
- border: "1px solid #ef4444",
1897
- borderRadius: "6px",
1898
- color: "#b91c1c",
1899
- fontFamily: "system-ui, -apple-system, sans-serif",
1900
- fontSize: "13px",
1901
- lineHeight: "1.4"
1902
- },
1903
- children: [
1904
- /* @__PURE__ */ jsxs2("div", { style: { fontWeight: 600, marginBottom: "4px", display: "flex", alignItems: "center", gap: "6px" }, children: [
1905
- /* @__PURE__ */ jsx3(AlertTriangle2, { size: 14, "aria-hidden": "true" }),
1906
- /* @__PURE__ */ jsxs2("span", { children: [
1907
- "Component Render Error: <",
1908
- node.type,
1909
- ">"
1910
- ] })
1911
- ] }),
1912
- /* @__PURE__ */ jsxs2("div", { style: { fontSize: "11px", color: "#7f1d1d", wordBreak: "break-all" }, children: [
1913
- "Node ID: ",
1914
- /* @__PURE__ */ jsx3("code", { children: node.id }),
1915
- " \u2014 ",
1916
- error instanceof Error ? error.message : String(error)
1917
- ] })
1918
- ]
1919
- }
1920
- );
1921
- } else {
1922
- content = /* @__PURE__ */ jsx3(
1923
- "div",
1924
- {
1925
- "data-kubuild-node": node.id,
1926
- "data-kubuild-error": node.type,
1927
- style: { display: "none" },
1928
- "aria-hidden": "true"
1929
- }
1930
- );
1931
- }
1932
- }
1933
- return /* @__PURE__ */ jsx3(ComponentErrorBoundary, { nodeId: node.id, componentType: node.type, mode, children: content });
1934
- }
1935
- var KubuildRenderer = ({
1936
- document,
1937
- registry = createDefaultComponentRegistry(),
1938
- context,
1939
- viewport = "desktop",
1940
- mode = "runtime",
1941
- className,
1942
- onNodeClick,
1943
- onDiagnostic,
1944
- onActionDispatch,
1945
- onNodePropChange
1946
- }) => {
1947
- if (!document || !document.document) {
1948
- return /* @__PURE__ */ jsx3("div", { className, children: "Empty Document" });
1949
- }
1950
- return /* @__PURE__ */ jsx3(RenderContextProvider, { value: context, children: /* @__PURE__ */ jsxs2("div", { className: `kubuild-canvas-root ${className || ""}`, children: [
1951
- (() => {
1952
- const css = collectStateStylesCss(document);
1953
- return css ? /* @__PURE__ */ jsx3("style", { "data-kubuild-state-styles": true, children: css }) : null;
1954
- })(),
1955
- (() => {
1956
- const animCss = collectAnimationStylesCss(document);
1957
- return animCss ? /* @__PURE__ */ jsx3("style", { "data-kubuild-animation-styles": true, children: animCss }) : null;
1958
- })(),
1959
- /* @__PURE__ */ jsx3(
1960
- NodeRenderer,
1961
- {
1962
- node: document.document,
1963
- document,
1964
- registry,
1965
- context,
1966
- viewport,
1967
- mode,
1968
- onNodeClick,
1969
- onDiagnostic,
1970
- onActionDispatch,
1971
- onNodePropChange
1972
- }
1973
- )
1974
- ] }) });
1975
- };
104
+ `.trim();function fe(r){return r.replace(/["\\\]]/g,"\\$&")}function Jt(r,e){let i=fe(r),o=[];switch(e){case"lift":o.push(`[data-kubuild-node="${i}"] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important; will-change: transform; }`,`[data-kubuild-node="${i}"]: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":o.push(`[data-kubuild-node="${i}"] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform; }`,`[data-kubuild-node="${i}"]:hover { transform: scale(1.04) !important; }`);break;case"glow":o.push(`[data-kubuild-node="${i}"] { transition: box-shadow 0.25s ease !important; }`,`[data-kubuild-node="${i}"]:hover { box-shadow: 0 0 20px 2px rgba(59, 130, 246, 0.5) !important; }`);break;case"tilt":o.push(`[data-kubuild-node="${i}"] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform; }`,`[data-kubuild-node="${i}"]:hover { transform: rotate(2deg) scale(1.02) !important; }`);break;default:break}return o}function Zt(r,e){let i=fe(r),o=[];switch(e){case"pulse":o.push(`[data-kubuild-node="${i}"] { animation: kb-loop-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; }`);break;case"bounce":o.push(`[data-kubuild-node="${i}"] { animation: kb-loop-bounce 1.5s ease-in-out infinite !important; }`);break;case"spin":o.push(`[data-kubuild-node="${i}"] { animation: kb-loop-spin 3s linear infinite !important; }`);break;case"float":o.push(`[data-kubuild-node="${i}"] { animation: kb-loop-float 3s ease-in-out infinite !important; }`);break;case"shimmer":o.push(`[data-kubuild-node="${i}"] { animation: kb-loop-shimmer 2s ease-in-out infinite !important; }`);break;default:break}return o}function Qt(r,e){if(!e.type||e.type==="none")return[];let i=fe(r),o=typeof e.duration=="number"?e.duration:600,n=typeof e.delay=="number"?e.delay:0,t=e.easing||"ease-out";return[`[data-kubuild-node="${i}"] { animation-name: kb-anim-${e.type} !important; animation-duration: ${o}ms !important; animation-delay: ${n}ms !important; animation-timing-function: ${t} !important; animation-fill-mode: both !important; }`]}function me(r){if(!r?.document)return"";let e=[],i=!1,o=n=>{let t=n.animation;t&&(t.hoverEffect&&t.hoverEffect!=="none"&&(e.push(...Jt(n.id,t.hoverEffect)),i=!0),t.loopEffect&&t.loopEffect!=="none"&&(e.push(...Zt(n.id,t.loopEffect)),i=!0),t.type&&t.type!=="none"&&(e.push(...Qt(n.id,t)),i=!0)),n.children?.forEach(o)};return o(r.document),i?`${Gt}
1976
105
 
1977
- // src/preview-adapter.tsx
1978
- import { useMemo as useMemo3 } from "react";
1979
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
1980
- var DEFAULT_VIEWPORT_CONFIGS = Object.freeze({
1981
- desktop: {
1982
- width: "100%",
1983
- maxWidth: "1280px",
1984
- minHeight: "600px",
1985
- label: "Desktop (1280px)",
1986
- isFluid: true
1987
- },
1988
- tablet: {
1989
- width: "768px",
1990
- height: "1024px",
1991
- minHeight: "600px",
1992
- label: "Tablet (768 \xD7 1024)",
1993
- isFluid: false
1994
- },
1995
- mobile: {
1996
- width: "375px",
1997
- height: "667px",
1998
- minHeight: "500px",
1999
- label: "Mobile (375 \xD7 667)",
2000
- isFluid: false
2001
- }
2002
- });
2003
- var DEFAULT_BREAKPOINTS = Object.freeze({
2004
- mobile: 480,
2005
- tablet: 768,
2006
- desktop: 1024
2007
- });
2008
- function resolveViewportFromWidth(width, breakpoints) {
2009
- const resolved = { ...DEFAULT_BREAKPOINTS, ...breakpoints };
2010
- if (width <= resolved.mobile) {
2011
- return "mobile";
2012
- }
2013
- if (width <= resolved.tablet) {
2014
- return "tablet";
2015
- }
2016
- return "desktop";
2017
- }
2018
- function resolveViewportDimensions(viewport, customConfigs) {
2019
- const baseConfig = DEFAULT_VIEWPORT_CONFIGS[viewport] || DEFAULT_VIEWPORT_CONFIGS.desktop;
2020
- const custom = customConfigs?.[viewport];
2021
- return { ...baseConfig, ...custom };
2022
- }
2023
- function resolveViewportContainerStyle(viewport, customConfigs, customScale) {
2024
- const config = resolveViewportDimensions(viewport, customConfigs);
2025
- const scale = customScale ?? config.scale ?? 1;
2026
- const toCssVal = (v) => typeof v === "number" ? `${v}px` : v;
2027
- const style = {
2028
- width: toCssVal(config.width),
2029
- maxWidth: toCssVal(config.maxWidth),
2030
- minWidth: toCssVal(config.minWidth),
2031
- height: toCssVal(config.height),
2032
- minHeight: toCssVal(config.minHeight),
2033
- maxHeight: toCssVal(config.maxHeight),
2034
- aspectRatio: config.aspectRatio,
2035
- transition: "width 0.2s ease, max-width 0.2s ease, height 0.2s ease"
2036
- };
2037
- if (scale !== 1) {
2038
- style.transform = `scale(${scale})`;
2039
- style.transformOrigin = "top center";
2040
- }
2041
- return style;
2042
- }
2043
- var PreviewViewportAdapter = ({
2044
- document,
2045
- viewport = "desktop",
2046
- onViewportChange,
2047
- viewportConfigs,
2048
- breakpoints,
2049
- registry,
2050
- context,
2051
- mode = "runtime",
2052
- showChrome = false,
2053
- chromeTitle,
2054
- editorOverlay,
2055
- scale,
2056
- className,
2057
- style,
2058
- canvasClassName,
2059
- canvasStyle,
2060
- onNodeClick,
2061
- onDiagnostic,
2062
- onActionDispatch
2063
- }) => {
2064
- const currentConfig = useMemo3(
2065
- () => resolveViewportDimensions(viewport, viewportConfigs),
2066
- [viewport, viewportConfigs]
2067
- );
2068
- const containerStyle = useMemo3(
2069
- () => resolveViewportContainerStyle(viewport, viewportConfigs, scale),
2070
- [viewport, viewportConfigs, scale]
2071
- );
2072
- const mergedCanvasStyle = useMemo3(
2073
- () => ({
2074
- ...containerStyle,
2075
- ...canvasStyle,
2076
- position: "relative",
2077
- boxSizing: "border-box"
2078
- }),
2079
- [containerStyle, canvasStyle]
2080
- );
2081
- return /* @__PURE__ */ jsxs3(
2082
- "div",
2083
- {
2084
- "data-kubuild-preview-container": true,
2085
- "data-viewport": viewport,
2086
- className: `kubuild-preview-viewport-adapter ${className || ""}`,
2087
- style: {
2088
- display: "flex",
2089
- flexDirection: "column",
2090
- alignItems: "center",
2091
- justifyContent: "flex-start",
2092
- width: "100%",
2093
- height: "100%",
2094
- boxSizing: "border-box",
2095
- ...style
2096
- },
2097
- children: [
2098
- showChrome && /* @__PURE__ */ jsxs3(
2099
- "div",
2100
- {
2101
- "data-kubuild-preview-chrome": true,
2102
- style: {
2103
- display: "flex",
2104
- alignItems: "center",
2105
- justifyContent: "space-between",
2106
- width: "100%",
2107
- maxWidth: containerStyle.maxWidth || containerStyle.width,
2108
- padding: "8px 12px",
2109
- marginBottom: "8px",
2110
- backgroundColor: "#1e293b",
2111
- color: "#f8fafc",
2112
- borderRadius: "8px",
2113
- fontSize: "12px",
2114
- fontFamily: "system-ui, -apple-system, sans-serif",
2115
- boxSizing: "border-box"
2116
- },
2117
- children: [
2118
- /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
2119
- /* @__PURE__ */ jsx4("span", { style: { fontWeight: 600 }, children: chromeTitle || document.metadata?.title || "Preview" }),
2120
- /* @__PURE__ */ jsx4(
2121
- "span",
2122
- {
2123
- "data-testid": "viewport-badge",
2124
- style: {
2125
- fontSize: "10px",
2126
- padding: "2px 6px",
2127
- borderRadius: "4px",
2128
- backgroundColor: "#334155",
2129
- color: "#94a3b8",
2130
- textTransform: "uppercase",
2131
- fontWeight: 700
2132
- },
2133
- children: viewport
2134
- }
2135
- ),
2136
- /* @__PURE__ */ jsx4("span", { style: { fontSize: "11px", color: "#64748b" }, children: currentConfig.label || `${currentConfig.width} \xD7 ${currentConfig.height || "auto"}` })
2137
- ] }),
2138
- onViewportChange && /* @__PURE__ */ jsx4(
2139
- "div",
2140
- {
2141
- "data-testid": "viewport-switcher",
2142
- style: { display: "flex", gap: "4px", backgroundColor: "#0f172a", padding: "2px", borderRadius: "6px" },
2143
- children: ["desktop", "tablet", "mobile"].map((device) => {
2144
- const isActive = viewport === device;
2145
- return /* @__PURE__ */ jsx4(
2146
- "button",
2147
- {
2148
- type: "button",
2149
- "data-testid": `viewport-btn-${device}`,
2150
- onClick: () => onViewportChange(device),
2151
- style: {
2152
- padding: "4px 10px",
2153
- fontSize: "11px",
2154
- fontWeight: 500,
2155
- borderRadius: "4px",
2156
- border: "none",
2157
- cursor: "pointer",
2158
- textTransform: "capitalize",
2159
- backgroundColor: isActive ? "#3b82f6" : "transparent",
2160
- color: isActive ? "#ffffff" : "#94a3b8",
2161
- transition: "all 0.15s ease"
2162
- },
2163
- children: device
2164
- },
2165
- device
2166
- );
2167
- })
2168
- }
2169
- )
2170
- ]
106
+ ${e.join(`
107
+ `)}`:""}function Co(r,e){let i=e||(typeof window<"u"?window.document:null);if(!i)return!1;let o=i.querySelector(`[data-kubuild-node="${fe(r)}"]`);if(!o)return!1;let n=o.style.animation;return o.style.animation="none",o.offsetWidth,o.style.animation=n,o.dispatchEvent(new CustomEvent("kubuild:replay-animation",{bubbles:!0,detail:{nodeId:r}})),!0}import{Component as en}from"react";import{AlertTriangle as tn}from"lucide-react";import{jsx as ke,jsxs as ge}from"react/jsx-runtime";var be=class extends en{constructor(e){super(e),this.state={hasError:!1}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}componentDidCatch(e,i){this.props.onError&&this.props.onError(e,i),this.props.onDiagnostic&&this.props.onDiagnostic({code:"ACTION_EXECUTION_ERROR",actionType:"render",nodeId:this.props.nodeId,message:`Render error in <${this.props.componentType}> (ID: ${this.props.nodeId}): ${e.message}`,error:e})}render(){if(this.state.hasError){let{nodeId:e,componentType:i,mode:o="runtime"}=this.props,n=this.state.error?.message||"Unknown render error";return o==="editor"?ge("div",{"data-kubuild-node":e,"data-kubuild-error":i,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:[ge("div",{style:{fontWeight:600,marginBottom:"4px",display:"flex",alignItems:"center",gap:"6px"},children:[ke(tn,{size:14,"aria-hidden":"true"}),ge("span",{children:["Component Render Error: <",i,">"]})]}),ge("div",{style:{fontSize:"11px",color:"#7f1d1d",wordBreak:"break-all"},children:["Node ID: ",ke("code",{children:e})," \u2014 ",n]})]}):ke("div",{"data-kubuild-node":e,"data-kubuild-error":i,style:{display:"none"},"aria-hidden":"true"})}return this.props.children}};import{isVariableBinding as nn}from"@kubuild/schema";import{primitiveTypeForField as et}from"@kubuild/components";import{resolveBinding as on}from"@kubuild/core";function rn(r){switch(r){case"string":return"";case"number":return 0;case"boolean":return!1}}function sn(r,e,i,o,n){let t=r.props?.[e.name],l=et(e);if(l===void 0||t===void 0)return t;let f=i.defaultProps?.[e.name]??e.defaultValue??rn(l);if(nn(t)){let p=on(t,o);return typeof p.value===l?p.value:(n.push({code:"INCOMPATIBLE_BINDING_TYPE",nodeId:r.id,propName:e.name,expectedType:l,actualType:typeof p.value,message:`Prop "${e.name}" on node "${r.id}" expected a ${l} but resolved binding "${t.key}" produced a ${typeof p.value}.`}),f)}return l==="string"&&typeof t=="string"&&t.includes("{{")?We(o,t):t}function tt(r,e,i){let o=r.props||{};if(!e||!e.propFields||e.propFields.length===0)return{props:o,diagnostics:[]};let n=[],t={...o};for(let l of e.propFields)et(l)!==void 0&&(t[l.name]=sn(r,l,e,i,n));return{props:t,diagnostics:n}}import Ln from"react";import{isAssetReference as qn,isVariableBinding as F}from"@kubuild/schema";import{icons as Vt,Package as _n,Puzzle as jn,AlertTriangle as zn}from"lucide-react";import{resolveBinding as Un,sanitizeUrl as Z,sanitizeHtml as Wn}from"@kubuild/core";import{createContext as Sn,useContext as bt,useState as ae,useCallback as V,useRef as mt,useMemo as le,useEffect as yt}from"react";import{applyFieldTransform as gt,validateFieldValue as Tn,validateForm as En,ActionPipelineExecutor as Pn}from"@kubuild/core";import{isSafeActionUrl as an}from"@kubuild/schema";import{ActionCancellationError as Ce,ActionTimeoutError as $e}from"@kubuild/core";var J=class extends Error{status;statusText;url;method;data;headers;response;isTimeout;isCancelled;isNetworkError;stepId;cause;constructor(e,i){super(e),this.name="ApiRequestError",this.status=i?.status,this.statusText=i?.statusText,this.url=i?.url,this.method=i?.method,this.data=i?.data,this.headers=i?.headers,this.response=i?.response,this.isTimeout=i?.isTimeout??!1,this.isCancelled=i?.isCancelled??!1,this.isNetworkError=i?.isNetworkError??!1,this.stepId=i?.stepId,this.cause=i?.cause}};function ln(r,e,i){if(!r||typeof r!="string")throw new J("API request URL is required",{url:r});let o=r.trim();if(!an(o))throw new J(`Disallowed or unsafe protocol in API request URL: "${o}"`,{url:o});let n=o;if(i&&!o.startsWith("http://")&&!o.startsWith("https://")&&!o.startsWith("//")){let t=i.endsWith("/")?i.slice(0,-1):i,l=o.startsWith("/")?o:`/${o}`;n=`${t}${l}`}if(e&&typeof e=="object"&&Object.keys(e).length>0){let[t,l]=n.split("?"),f=new URLSearchParams(l||"");for(let[u,d]of Object.entries(e))d!=null&&(Array.isArray(d)?d.forEach(s=>f.append(u,String(s))):f.set(u,String(d)));let p=f.toString();n=p?`${t}?${p}`:t}return n}function dn(r,e,i,o={}){let n=r.toUpperCase(),t={...o};if(n==="GET"||n==="HEAD")return{body:void 0,headers:t};if(e==null)return{body:void 0,headers:t};let l=Object.keys(t).find(u=>u.toLowerCase()==="content-type"),f=l?t[l]:void 0,p=(i||"").toLowerCase();if(p==="form-data"||p==="formdata"||p==="multipart"||f&&f.includes("multipart/form-data")){if(typeof FormData<"u"&&e instanceof FormData)return l&&delete t[l],{body:e,headers:t};if(typeof FormData<"u"&&typeof e=="object"&&e!==null){let u=new FormData;for(let[d,s]of Object.entries(e))s!=null&&(typeof Blob<"u"&&s instanceof Blob?u.append(d,s):Array.isArray(s)?s.forEach(a=>u.append(d,typeof a=="object"?JSON.stringify(a):String(a))):typeof s=="object"?u.append(d,JSON.stringify(s)):u.append(d,String(s)));return l&&delete t[l],{body:u,headers:t}}}if(p==="urlencoded"||p==="url-encoded"||f&&f.includes("application/x-www-form-urlencoded")){if(typeof URLSearchParams<"u"&&e instanceof URLSearchParams)return l||(t["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8"),{body:e,headers:t};if(typeof e=="object"&&e!==null){let u=new URLSearchParams;for(let[d,s]of Object.entries(e))s!=null&&(Array.isArray(s)?s.forEach(a=>u.append(d,String(a))):u.append(d,String(s)));return l||(t["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8"),{body:u,headers:t}}if(typeof e=="string")return l||(t["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8"),{body:e,headers:t}}if(p==="raw"||p==="text")return l||(t["Content-Type"]="text/plain;charset=UTF-8"),{body:typeof e=="string"?e:String(e),headers:t};if(typeof e=="object"&&e!==null)return l||(t["Content-Type"]="application/json"),{body:JSON.stringify(e),headers:t};if(typeof e=="string"){if(!l)try{JSON.parse(e),t["Content-Type"]="application/json"}catch{t["Content-Type"]="text/plain;charset=UTF-8"}return{body:e,headers:t}}return{body:String(e),headers:t}}async function cn(r){let e=r.headers.get("content-type")||"",i=await r.text();if(!i||i.trim()==="")return null;if(e.includes("application/json")||e.includes("+json"))try{return JSON.parse(i)}catch{return i}let o=i.trim();if(o.startsWith("{")&&o.endsWith("}")||o.startsWith("[")&&o.endsWith("]"))try{return JSON.parse(o)}catch{return i}return i}function we(r){let e=r?.defaultTimeout,i=r?.baseUrl,o=r?.headers;return async function(t,l,f){let p=l.fetchFn||r?.fetchFn||(typeof globalThis<"u"&&typeof globalThis.fetch=="function"?globalThis.fetch:typeof fetch<"u"?fetch:void 0);if(!p)throw new J("No fetch implementation available for API request runner",{stepId:t.id});let u=t.payload||{},d=String(u.method||"GET").toUpperCase(),s=u.timeout??e,a=u.baseUrl??i,c=ln(String(u.url||""),u.queryParams,a),m={...o||{},...u.headers||{}},{body:b,headers:y}=dn(d,u.body,u.bodyFormat||u.bodyType,m),h=new AbortController,v,x=()=>{h.abort(f?.reason)};if(f){if(f.aborted)throw new Ce(f.reason instanceof Error?f.reason.message:"API request cancelled",t.id);f.addEventListener("abort",x,{once:!0})}s!==void 0&&s>0&&(v=setTimeout(()=>{h.abort(new $e(`API request timed out after ${s}ms`,s,t.id))},s));try{let g=await p(c,{method:d,headers:y,body:b,signal:h.signal}),w={};g.headers&&typeof g.headers.forEach=="function"&&g.headers.forEach((S,E)=>{w[E.toLowerCase()]=S});let R=await cn(g),$={ok:g.ok,status:g.status,statusText:g.statusText,headers:w,data:R,body:R,url:g.url||c};if(!g.ok){let S=(typeof R=="object"&&R!==null&&"message"in R?String(R.message):void 0)||(typeof R=="string"&&R.length<200?R:void 0)||`HTTP ${g.status} ${g.statusText||"Error"}`;throw new J(`API request failed: ${S}`,{status:g.status,statusText:g.statusText,url:c,method:d,data:R,headers:w,response:$,stepId:t.id})}return $}catch(g){if(g instanceof J)throw g;if(h.signal.aborted){let R=h.signal.reason;if(R instanceof $e||R instanceof Error&&R.name==="ActionTimeoutError"||R instanceof Ce||R instanceof Error&&R.name==="ActionCancellationError")throw R;if(g instanceof Error&&(g.name==="AbortError"||g.name==="TimeoutError"))throw v===void 0&&f?.aborted?new Ce("API request cancelled",t.id):new $e(`API request timed out after ${s}ms`,s??0,t.id)}let w=g instanceof Error?g.message:String(g);throw new J(`Network error during API request: ${w}`,{url:c,method:d,isNetworkError:!0,stepId:t.id,cause:g})}finally{v!==void 0&&clearTimeout(v),f&&f.removeEventListener("abort",x)}}}var nt=we();import{useState as un,useEffect as pn}from"react";var fn=0,Se=class{toasts=[];listeners=new Set;timers=new Map;showToast(e){let i=typeof e=="string"?{message:e}:e,o=i.id||`toast_${Date.now()}_${++fn}`,n=i.type||i.variant||"info",t=i.duration!==void 0?Math.max(0,i.duration):4e3,l=i.position||"top-right",f=i.dismissible!==!1;this.timers.has(o)&&(clearTimeout(this.timers.get(o)),this.timers.delete(o));let p={id:o,type:n,message:i.message,title:i.title,duration:t,position:l,dismissible:f,createdAt:Date.now(),dismiss:()=>this.dismissToast(o)};if(this.toasts=this.toasts.filter(u=>u.id!==o).concat(p),t>0){let u=setTimeout(()=>{this.dismissToast(o)},t);this.timers.set(o,u)}return this.notify(),p}dismissToast(e){this.timers.has(e)&&(clearTimeout(this.timers.get(e)),this.timers.delete(e));let i=this.toasts.length;this.toasts=this.toasts.filter(o=>o.id!==e),this.toasts.length!==i&&this.notify()}clearToasts(){for(let e of this.timers.values())clearTimeout(e);this.timers.clear(),this.toasts=[],this.notify()}getToasts(){return[...this.toasts]}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){let e=this.getToasts();for(let i of this.listeners)try{i(e)}catch(o){console.error("Error in toast listener callback:",o)}}},Q=new Se;function ot(r=Q){let[e,i]=un(()=>r.getToasts());return pn(()=>(i(r.getToasts()),r.subscribe(o=>{i(o)})),[r]),{toasts:e,showToast:o=>r.showToast(o),dismissToast:o=>r.dismissToast(o),clearToasts:()=>r.clearToasts()}}import{useState as rt,useEffect as it,useCallback as Te}from"react";var Ee=class{modals=new Map;activeStack=[];listeners=new Set;openModal(e){if(!e||typeof e!="string")return;let i=e.trim();if(i){if(this.modals.set(i,!0),this.activeStack=this.activeStack.filter(o=>o!==i).concat(i),typeof window<"u"&&typeof window.dispatchEvent=="function")try{let o=new CustomEvent("kubuild:modal:open",{detail:{modalId:i},bubbles:!0});window.dispatchEvent(o)}catch{}this.notify()}}closeModal(e){if(e&&typeof e=="string"){let i=e.trim();if(this.modals.set(i,!1),this.activeStack=this.activeStack.filter(o=>o!==i),typeof window<"u"&&typeof window.dispatchEvent=="function")try{let o=new CustomEvent("kubuild:modal:close",{detail:{modalId:i},bubbles:!0});window.dispatchEvent(o)}catch{}}else{let i=this.activeStack.pop();if(i){if(this.modals.set(i,!1),typeof window<"u"&&typeof window.dispatchEvent=="function")try{let o=new CustomEvent("kubuild:modal:close",{detail:{modalId:i},bubbles:!0});window.dispatchEvent(o)}catch{}}else for(let o of this.modals.keys())this.modals.set(o,!1)}this.notify()}toggleModal(e){return this.isModalOpen(e)?(this.closeModal(e),!1):(this.openModal(e),!0)}isModalOpen(e){return e?!!this.modals.get(e.trim()):!1}getState(){let e={};for(let[i,o]of this.modals.entries())e[i]=o;return e}getActiveModals(){return[...this.activeStack]}reset(){this.modals.clear(),this.activeStack=[],this.notify()}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){let e=this.getState();for(let i of this.listeners)try{i(e)}catch(o){console.error("Error in modal listener callback:",o)}}},se=new Ee;function Yo(r,e=se){let[i,o]=rt(()=>e.isModalOpen(r));it(()=>(o(e.isModalOpen(r)),e.subscribe(f=>{o(!!f[r])})),[r,e]);let n=Te(()=>e.openModal(r),[r,e]),t=Te(()=>e.closeModal(r),[r,e]),l=Te(()=>e.toggleModal(r),[r,e]);return{isOpen:i,open:n,close:t,toggle:l}}function Xo(r=se){let[e,i]=rt(()=>r.getState());return it(()=>(i(r.getState()),r.subscribe(o=>{i(o)})),[r]),{modals:e,activeModals:r.getActiveModals(),isOpen:o=>!!e[o],openModal:o=>r.openModal(o),closeModal:o=>r.closeModal(o),toggleModal:o=>r.toggleModal(o)}}var st=(r,e)=>{let i=r.payload||{},o=String(i.message||"").trim();if(!o)throw new Error("Toast message cannot be empty");let n=i.type||i.variant||"info",t=i.duration!==void 0?i.duration:4e3,l=i.position||"top-right",f=i.title?String(i.title):void 0,u=(e.toastManager||Q).showToast({message:o,type:n,duration:t,position:l,title:f});return{id:u.id,message:u.message,type:u.type,title:u.title,duration:u.duration,position:u.position}},at=(r,e)=>{let i=r.payload||{},o=i.modalId||i.modalNodeId||i.targetNodeId||i.nodeId,n=o?String(o).trim():"";if(!n)throw new Error("Modal ID or Modal Node ID is required for open_modal action");if((e.modalManager||se).openModal(n),e.state&&typeof e.state=="object"){let l=e.state.modals||{};e.state.modals={...l,[n]:!0},e.state[n]=!0}return e.variables&&typeof e.variables=="object"&&(e.variables[`modal_${n}_open`]=!0),{modalId:n,open:!0}},lt=(r,e)=>{let i=r.payload||{},o=i.modalId||i.modalNodeId||i.targetNodeId||i.nodeId,n=o?String(o).trim():void 0;if((e.modalManager||se).closeModal(n),n){if(e.state&&typeof e.state=="object"){let l=e.state.modals||{};e.state.modals={...l,[n]:!1},e.state[n]=!1}e.variables&&typeof e.variables=="object"&&(e.variables[`modal_${n}_open`]=!1)}else e.state&&typeof e.state=="object"&&(e.state.modals={});return{modalId:n||"all",open:!1}};import{isSafeActionUrl as mn}from"@kubuild/schema";async function gn(r,e){if(e?.copyFn)return await e.copyFn(r),!0;if(typeof navigator<"u"&&navigator.clipboard&&typeof navigator.clipboard.writeText=="function")try{return await navigator.clipboard.writeText(r),!0}catch{}if(typeof document<"u")try{let i=document.createElement("textarea");i.value=r,i.setAttribute("readonly",""),i.style.position="fixed",i.style.top="-9999px",i.style.left="-9999px",i.style.opacity="0",document.body.appendChild(i),i.focus(),i.select();let o=document.execCommand("copy");if(document.body.removeChild(i),o)return!0}catch{}return!1}var dt=(r,e)=>{let i=r.payload||{},o=String(i.url||"").trim();if(!o)throw new Error("Navigation URL cannot be empty");if(!mn(o))throw new Error(`Disallowed or unsafe protocol in navigation URL: "${o}"`);let n=i.target||"_self",t=i.replace??!1,l=i.behavior||"smooth",f=i.scroll??!0;if(o.startsWith("#")){if(typeof document<"u"){try{let u=document.querySelector(o)||document.getElementById(o.slice(1));u&&typeof u.scrollIntoView=="function"&&u.scrollIntoView({behavior:f===!1?"auto":l,block:"start"})}catch{}if(typeof window<"u"&&window.location)try{window.location.hash=o}catch{}}return{url:o,target:"_self",replace:t,scroll:f,behavior:l,navigated:!0,isAnchor:!0}}if(n==="_blank")return typeof window<"u"&&typeof window.open=="function"&&window.open(o,"_blank","noopener,noreferrer"),{url:o,target:n,replace:t,scroll:f,behavior:l,navigated:!0,isAnchor:!1};let p=typeof e.onNavigate=="function"&&e.onNavigate||typeof e.navigateFn=="function"&&e.navigateFn;return p?(p(o,{target:n,replace:t,scroll:f,behavior:l}),{url:o,target:n,replace:t,scroll:f,behavior:l,navigated:!0,isAnchor:!1}):(typeof window<"u"&&window.location&&(t?window.location.replace(o):window.location.assign(o)),{url:o,target:n,replace:t,scroll:f,behavior:l,navigated:!0,isAnchor:!1})},ct=async(r,e)=>{let i=r.payload||{},o=i.text!==void 0?i.text:i.value!==void 0?i.value:"",n=typeof o=="object"&&o!==null?JSON.stringify(o):String(o??""),t=typeof e.copyFn=="function"?e.copyFn:typeof e.clipboardFn=="function"?e.clipboardFn:void 0;return await gn(n,{copyFn:t}),i.notify!==!1&&(i.notify===!0||i.toastMessage)&&(e.toastManager||Q).showToast({message:i.toastMessage||"Copied to clipboard!",type:"success",duration:3e3}),{text:n,copied:!0}},ut=(r,e)=>{let o=(r.payload||{}).formId||(typeof e.formId=="string"?e.formId:void 0);if(typeof e.resetForm=="function"&&e.resetForm(),e.form&&typeof e.form=="object")for(let n of Object.keys(e.form))e.form[n]="";if(typeof document<"u")try{let n=o?document.getElementById(o):document.querySelector("form");n&&typeof n.reset=="function"&&n.reset()}catch{}return{formId:o,reset:!0}};import{useMemo as bn}from"react";import{CheckCircle2 as yn,AlertCircle as hn,AlertTriangle as vn,Info as xn,X as Rn}from"lucide-react";import{Fragment as $n,jsx as G,jsxs as Pe}from"react/jsx-runtime";var kn={"top-right":{top:"16px",right:"16px",alignItems:"flex-end"},"top-left":{top:"16px",left:"16px",alignItems:"flex-start"},"top-center":{top:"16px",left:"50%",transform:"translateX(-50%)",alignItems:"center"},"bottom-right":{bottom:"16px",right:"16px",alignItems:"flex-end"},"bottom-left":{bottom:"16px",left:"16px",alignItems:"flex-start"},"bottom-center":{bottom:"16px",left:"50%",transform:"translateX(-50%)",alignItems:"center"}},pt={success:{bg:"#f0fdf4",border:"#bbf7d0",text:"#166534",titleText:"#14532d",iconColor:"#16a34a",Icon:yn},error:{bg:"#fef2f2",border:"#fecaca",text:"#991b1b",titleText:"#7f1d1d",iconColor:"#dc2626",Icon:hn},warning:{bg:"#fffbeb",border:"#fde68a",text:"#92400e",titleText:"#78350f",iconColor:"#d97706",Icon:vn},info:{bg:"#eff6ff",border:"#bfdbfe",text:"#1e40af",titleText:"#1e3a8a",iconColor:"#2563eb",Icon:xn}},Cn=({toast:r})=>{let e=pt[r.type]||pt.info,i=e.Icon;return Pe("div",{role:"alert","aria-live":"polite","data-testid":`toast-${r.id}`,"data-toast-type":r.type,style:{display:"flex",alignItems:"flex-start",gap:"12px",width:"100%",maxWidth:"380px",minWidth:"280px",padding:"12px 14px",backgroundColor:e.bg,border:`1px solid ${e.border}`,borderRadius:"8px",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",color:e.text,fontSize:"14px",lineHeight:"1.4",pointerEvents:"auto",animation:"kubuildToastIn 200ms cubic-bezier(0.16, 1, 0.3, 1)",wordBreak:"break-word",boxSizing:"border-box",transition:"all 200ms ease"},children:[G("div",{style:{flexShrink:0,marginTop:"2px",color:e.iconColor},children:G(i,{size:18,color:e.iconColor})}),Pe("div",{style:{flex:1,minWidth:0},children:[r.title&&G("div",{style:{fontWeight:600,fontSize:"14px",marginBottom:"2px",color:e.titleText},children:r.title}),G("div",{style:{color:e.text},children:r.message})]}),r.dismissible&&G("button",{type:"button","aria-label":"Close notification",onClick:r.dismiss,"data-testid":`toast-dismiss-${r.id}`,style:{flexShrink:0,background:"none",border:"none",cursor:"pointer",padding:"2px",marginLeft:"4px",color:e.text,opacity:.7,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"4px"},children:G(Rn,{size:16})})]})},ft=({manager:r=Q,position:e,className:i,maxVisible:o=5})=>{let{toasts:n}=ot(r),t=bn(()=>{if(e)return{[e]:n.filter(f=>(f.position||"top-right")===e)};let l={"top-right":[],"top-left":[],"top-center":[],"bottom-right":[],"bottom-left":[],"bottom-center":[]};return n.forEach(f=>{let p=f.position||"top-right";l[p].push(f)}),l},[n,e]);return n.length===0?null:Pe($n,{children:[G("style",{children:`
108
+ @keyframes kubuildToastIn {
109
+ from {
110
+ opacity: 0;
111
+ transform: translateY(-8px) scale(0.96);
2171
112
  }
2172
- ),
2173
- /* @__PURE__ */ jsxs3(
2174
- "div",
2175
- {
2176
- "data-kubuild-preview-canvas": true,
2177
- "data-viewport": viewport,
2178
- className: `kubuild-preview-canvas ${canvasClassName || ""}`,
2179
- style: mergedCanvasStyle,
2180
- children: [
2181
- /* @__PURE__ */ jsx4(
2182
- KubuildRenderer,
2183
- {
2184
- document,
2185
- registry,
2186
- context,
2187
- viewport,
2188
- mode,
2189
- onNodeClick,
2190
- onDiagnostic,
2191
- onActionDispatch
2192
- }
2193
- ),
2194
- editorOverlay && /* @__PURE__ */ jsx4(
2195
- "div",
2196
- {
2197
- "data-kubuild-preview-overlay": true,
2198
- style: {
2199
- position: "absolute",
2200
- top: 0,
2201
- left: 0,
2202
- right: 0,
2203
- bottom: 0,
2204
- pointerEvents: "none",
2205
- zIndex: 10
2206
- },
2207
- children: editorOverlay
2208
- }
2209
- )
2210
- ]
2211
- }
2212
- )
2213
- ]
2214
- }
2215
- );
2216
- };
2217
- var KubuildPreviewViewport = PreviewViewportAdapter;
2218
-
2219
- // src/code-generator.ts
2220
- function escapeHtml(str) {
2221
- if (str === null || str === void 0) return "";
2222
- return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
2223
- }
2224
- function escapeAttr(str) {
2225
- return escapeHtml(str);
2226
- }
2227
- function getYouTubeId2(url) {
2228
- if (!url || typeof url !== "string") return null;
2229
- const match = url.match(
2230
- /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i
2231
- );
2232
- return match ? match[1] : null;
2233
- }
2234
- function getVimeoId2(url) {
2235
- if (!url || typeof url !== "string") return null;
2236
- const match = url.match(
2237
- /(?:vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|))(\d+)/i
2238
- );
2239
- return match ? match[3] : null;
2240
- }
2241
- function renderNodeToHtml(node, indentLevel, options) {
2242
- const indent = " ".repeat(indentLevel * (options.indentSize ?? 2));
2243
- const innerIndent = " ".repeat((indentLevel + 1) * (options.indentSize ?? 2));
2244
- const props = node.props || {};
2245
- const children = node.children || [];
2246
- const includeNodeClass = options.includeNodeClasses !== false;
2247
- const nodeClass = includeNodeClass ? `kb-node-${node.id}` : "";
2248
- const buildClass = (...classes) => {
2249
- return classes.filter(Boolean).join(" ");
2250
- };
2251
- const idAttr = props.id ? ` id="${escapeAttr(props.id)}"` : "";
2252
- switch (node.type) {
2253
- case "page": {
2254
- const tag = options.rootTag || "main";
2255
- const cls = buildClass("kb-page", nodeClass);
2256
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2257
- if (!childHtml) {
2258
- return `${indent}<${tag} class="${cls}"${idAttr}></${tag}>`;
2259
- }
2260
- return `${indent}<${tag} class="${cls}"${idAttr}>
2261
- ${childHtml}
2262
- ${indent}</${tag}>`;
2263
- }
2264
- case "section": {
2265
- const ariaLabel = props.ariaLabel ? ` aria-label="${escapeAttr(props.ariaLabel)}"` : "";
2266
- const cls = buildClass("kb-section", nodeClass);
2267
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2268
- if (!childHtml) {
2269
- return `${indent}<section class="${cls}"${idAttr}${ariaLabel}></section>`;
2270
- }
2271
- return `${indent}<section class="${cls}"${idAttr}${ariaLabel}>
2272
- ${childHtml}
2273
- ${indent}</section>`;
2274
- }
2275
- case "container": {
2276
- const cls = buildClass("kb-container", nodeClass);
2277
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2278
- if (!childHtml) {
2279
- return `${indent}<div class="${cls}"${idAttr}></div>`;
2280
- }
2281
- return `${indent}<div class="${cls}"${idAttr}>
2282
- ${childHtml}
2283
- ${indent}</div>`;
2284
- }
2285
- case "columns": {
2286
- const cls = buildClass("kb-columns", nodeClass);
2287
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2288
- if (!childHtml) {
2289
- return `${indent}<div class="${cls}"${idAttr}></div>`;
2290
- }
2291
- return `${indent}<div class="${cls}"${idAttr}>
2292
- ${childHtml}
2293
- ${indent}</div>`;
2294
- }
2295
- case "heading": {
2296
- let level = "h2";
2297
- if (typeof props.level === "string" && /^h[1-6]$/i.test(props.level)) {
2298
- level = props.level.toLowerCase();
2299
- } else if (typeof props.level === "number" && props.level >= 1 && props.level <= 6) {
2300
- level = `h${props.level}`;
2301
- } else if (typeof props.tag === "string" && /^h[1-6]$/i.test(props.tag)) {
2302
- level = props.tag.toLowerCase();
2303
- }
2304
- const text = props.text ?? props.value ?? props.content ?? "Heading";
2305
- const cls = buildClass("kb-heading", nodeClass);
2306
- return `${indent}<${level} class="${cls}"${idAttr}>${escapeHtml(text)}</${level}>`;
2307
- }
2308
- case "paragraph": {
2309
- const text = props.text ?? props.value ?? props.content ?? "";
2310
- const cls = buildClass("kb-paragraph", nodeClass);
2311
- return `${indent}<p class="${cls}"${idAttr}>${escapeHtml(text)}</p>`;
2312
- }
2313
- case "text": {
2314
- const tag = props.as || "p";
2315
- const text = props.text ?? props.value ?? props.content ?? "";
2316
- const cls = buildClass("kb-text", nodeClass);
2317
- return `${indent}<${tag} class="${cls}"${idAttr}>${escapeHtml(text)}</${tag}>`;
2318
- }
2319
- case "link": {
2320
- const href = props.href ? ` href="${escapeAttr(props.href)}"` : ' href="#"';
2321
- const target = props.target ? ` target="${escapeAttr(props.target)}"` : "";
2322
- const rel = props.rel ? ` rel="${escapeAttr(props.rel)}"` : target.includes("_blank") ? ' rel="noopener noreferrer"' : "";
2323
- const text = props.text ?? props.label ?? props.value;
2324
- const cls = buildClass("kb-link", nodeClass);
2325
- if (children.length > 0) {
2326
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2327
- return `${indent}<a class="${cls}"${idAttr}${href}${target}${rel}>
2328
- ${childHtml}
2329
- ${indent}</a>`;
2330
- }
2331
- return `${indent}<a class="${cls}"${idAttr}${href}${target}${rel}>${escapeHtml(text ?? "Link")}</a>`;
2332
- }
2333
- case "blockquote": {
2334
- const cite = props.cite ? ` cite="${escapeAttr(props.cite)}"` : "";
2335
- const quote = props.quote ?? props.text ?? props.value;
2336
- const author = props.author ?? props.citeAuthor;
2337
- const cls = buildClass("kb-blockquote", nodeClass);
2338
- if (quote || author) {
2339
- const quoteHtml = quote ? `${innerIndent}<p>${escapeHtml(quote)}</p>` : "";
2340
- const authorHtml = author ? `${innerIndent}<cite>${escapeHtml(author)}</cite>` : "";
2341
- const parts = [quoteHtml, authorHtml].filter(Boolean).join("\n");
2342
- return `${indent}<blockquote class="${cls}"${idAttr}${cite}>
2343
- ${parts}
2344
- ${indent}</blockquote>`;
2345
- }
2346
- if (children.length > 0) {
2347
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2348
- return `${indent}<blockquote class="${cls}"${idAttr}${cite}>
2349
- ${childHtml}
2350
- ${indent}</blockquote>`;
2351
- }
2352
- return `${indent}<blockquote class="${cls}"${idAttr}${cite}></blockquote>`;
2353
- }
2354
- case "badge": {
2355
- const text = props.text ?? props.label ?? props.value ?? "Badge";
2356
- const cls = buildClass("kb-badge", nodeClass);
2357
- return `${indent}<span class="${cls}"${idAttr}>${escapeHtml(text)}</span>`;
2358
- }
2359
- case "code-block": {
2360
- const code = props.code ?? props.text ?? props.value ?? "";
2361
- const lang = props.language || props.lang;
2362
- const langClass = lang ? ` class="language-${escapeAttr(lang)}"` : "";
2363
- const cls = buildClass("kb-code-block", nodeClass);
2364
- return `${indent}<pre class="${cls}"${idAttr}><code${langClass}>${escapeHtml(code)}</code></pre>`;
2365
- }
2366
- case "divider": {
2367
- const cls = buildClass("kb-divider", nodeClass);
2368
- const text = props.text ?? props.label;
2369
- if (text) {
2370
- return `${indent}<div class="${cls}"${idAttr} role="separator"><span>${escapeHtml(text)}</span></div>`;
2371
- }
2372
- return `${indent}<hr class="${cls}"${idAttr} />`;
2373
- }
2374
- case "spacer": {
2375
- const cls = buildClass("kb-spacer", nodeClass);
2376
- return `${indent}<div class="${cls}"${idAttr} aria-hidden="true"></div>`;
2377
- }
2378
- case "image": {
2379
- const src = props.src ? ` src="${escapeAttr(props.src)}"` : ' src=""';
2380
- const alt = props.alt ? ` alt="${escapeAttr(props.alt)}"` : ' alt=""';
2381
- const loading = props.loading ? ` loading="${escapeAttr(props.loading)}"` : ' loading="lazy"';
2382
- const cls = buildClass("kb-image", nodeClass);
2383
- return `${indent}<img class="${cls}"${idAttr}${src}${alt}${loading} />`;
2384
- }
2385
- case "video": {
2386
- const src = props.src || "";
2387
- const ytId = getYouTubeId2(src);
2388
- const vmId = getVimeoId2(src);
2389
- const cls = buildClass("kb-video", nodeClass);
2390
- if (ytId) {
2391
- return `${indent}<div class="kb-video-wrapper ${nodeClass}"${idAttr}>
2392
- ${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>
2393
- ${indent}</div>`;
2394
- }
2395
- if (vmId) {
2396
- return `${indent}<div class="kb-video-wrapper ${nodeClass}"${idAttr}>
2397
- ${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>
2398
- ${indent}</div>`;
2399
- }
2400
- const poster = props.poster ? ` poster="${escapeAttr(props.poster)}"` : "";
2401
- const controls = props.controls !== false ? " controls" : "";
2402
- const autoplay = props.autoplay ? " autoplay" : "";
2403
- const loop = props.loop ? " loop" : "";
2404
- const muted = props.muted ? " muted" : "";
2405
- const videoSrc = src ? ` src="${escapeAttr(src)}"` : "";
2406
- return `${indent}<video class="${cls}"${idAttr}${videoSrc}${poster}${controls}${autoplay}${loop}${muted}></video>`;
2407
- }
2408
- case "icon": {
2409
- const name = props.name || props.icon || "star";
2410
- const ariaLabel = props.ariaLabel ? ` aria-label="${escapeAttr(props.ariaLabel)}"` : ' aria-hidden="true"';
2411
- const cls = buildClass("kb-icon", nodeClass);
2412
- return `${indent}<span class="${cls}"${idAttr}${ariaLabel} data-icon="${escapeAttr(name)}"></span>`;
2413
- }
2414
- case "html-embed": {
2415
- const rawHtml = props.html ?? props.content ?? "";
2416
- const cls = buildClass("kb-html-embed", nodeClass);
2417
- if (!rawHtml) {
2418
- return `${indent}<div class="${cls}"${idAttr}></div>`;
2419
- }
2420
- return `${indent}<div class="${cls}"${idAttr}>
2421
- ${innerIndent}${rawHtml}
2422
- ${indent}</div>`;
2423
- }
2424
- case "button": {
2425
- const label = props.label ?? props.text ?? props.value ?? "Button";
2426
- const type = props.type ? ` type="${escapeAttr(props.type)}"` : ' type="button"';
2427
- const disabled = props.disabled ? " disabled" : "";
2428
- const cls = buildClass("kb-button", nodeClass);
2429
- if (props.href) {
2430
- const href = ` href="${escapeAttr(props.href)}"`;
2431
- const target = props.target ? ` target="${escapeAttr(props.target)}"` : "";
2432
- return `${indent}<a class="${cls}"${idAttr}${href}${target}>${escapeHtml(label)}</a>`;
2433
- }
2434
- return `${indent}<button class="${cls}"${idAttr}${type}${disabled}>${escapeHtml(label)}</button>`;
2435
- }
2436
- case "form": {
2437
- const action = props.action ? ` action="${escapeAttr(props.action)}"` : "";
2438
- const method = props.method ? ` method="${escapeAttr(props.method)}"` : ' method="POST"';
2439
- const cls = buildClass("kb-form", nodeClass);
2440
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2441
- if (!childHtml) {
2442
- return `${indent}<form class="${cls}"${idAttr}${action}${method}></form>`;
2443
- }
2444
- return `${indent}<form class="${cls}"${idAttr}${action}${method}>
2445
- ${childHtml}
2446
- ${indent}</form>`;
2447
- }
2448
- case "input": {
2449
- const type = props.type ? ` type="${escapeAttr(props.type)}"` : ' type="text"';
2450
- const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
2451
- const placeholder = props.placeholder ? ` placeholder="${escapeAttr(props.placeholder)}"` : "";
2452
- const value = props.value !== void 0 ? ` value="${escapeAttr(props.value)}"` : "";
2453
- const required = props.required ? " required" : "";
2454
- const disabled = props.disabled ? " disabled" : "";
2455
- const cls = buildClass("kb-input", nodeClass);
2456
- return `${indent}<input class="${cls}"${idAttr}${type}${name}${placeholder}${value}${required}${disabled} />`;
2457
- }
2458
- case "textarea": {
2459
- const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
2460
- const placeholder = props.placeholder ? ` placeholder="${escapeAttr(props.placeholder)}"` : "";
2461
- const rows = props.rows ? ` rows="${escapeAttr(props.rows)}"` : ' rows="4"';
2462
- const value = props.value ?? props.defaultValue ?? "";
2463
- const required = props.required ? " required" : "";
2464
- const disabled = props.disabled ? " disabled" : "";
2465
- const cls = buildClass("kb-textarea", nodeClass);
2466
- return `${indent}<textarea class="${cls}"${idAttr}${name}${placeholder}${rows}${required}${disabled}>${escapeHtml(value)}</textarea>`;
2467
- }
2468
- case "select": {
2469
- const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
2470
- const required = props.required ? " required" : "";
2471
- const disabled = props.disabled ? " disabled" : "";
2472
- const cls = buildClass("kb-select", nodeClass);
2473
- const optionsList = Array.isArray(props.options) ? props.options : [];
2474
- const optionIndent = " ".repeat((indentLevel + 1) * (options.indentSize ?? 2));
2475
- const optionsHtml = optionsList.map((opt) => {
2476
- const optVal = typeof opt === "object" ? opt.value : opt;
2477
- const optLabel = typeof opt === "object" ? opt.label : opt;
2478
- const selected = props.value === optVal || props.defaultValue === optVal ? " selected" : "";
2479
- return `${optionIndent}<option value="${escapeAttr(optVal)}"${selected}>${escapeHtml(optLabel)}</option>`;
2480
- }).join("\n");
2481
- if (!optionsHtml) {
2482
- return `${indent}<select class="${cls}"${idAttr}${name}${required}${disabled}></select>`;
2483
- }
2484
- return `${indent}<select class="${cls}"${idAttr}${name}${required}${disabled}>
2485
- ${optionsHtml}
2486
- ${indent}</select>`;
2487
- }
2488
- case "checkbox": {
2489
- const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
2490
- const checked = props.checked || props.defaultChecked ? " checked" : "";
2491
- const label = props.label ?? props.text ?? "";
2492
- const cls = buildClass("kb-checkbox-label", nodeClass);
2493
- return `${indent}<label class="${cls}"${idAttr}><input type="checkbox"${name}${checked} /><span>${escapeHtml(label)}</span></label>`;
2494
- }
2495
- case "radio": {
2496
- const name = props.name ? ` name="${escapeAttr(props.name)}"` : "";
2497
- const value = props.value ? ` value="${escapeAttr(props.value)}"` : "";
2498
- const checked = props.checked || props.defaultChecked ? " checked" : "";
2499
- const label = props.label ?? props.text ?? "";
2500
- const cls = buildClass("kb-radio-label", nodeClass);
2501
- return `${indent}<label class="${cls}"${idAttr}><input type="radio"${name}${value}${checked} /><span>${escapeHtml(label)}</span></label>`;
2502
- }
2503
- case "list": {
2504
- const tag = props.tag === "ol" || props.type === "ol" || props.ordered ? "ol" : "ul";
2505
- const cls = buildClass("kb-list", nodeClass);
2506
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2507
- if (!childHtml) {
2508
- return `${indent}<${tag} class="${cls}"${idAttr}></${tag}>`;
2509
- }
2510
- return `${indent}<${tag} class="${cls}"${idAttr}>
2511
- ${childHtml}
2512
- ${indent}</${tag}>`;
2513
- }
2514
- case "list-item": {
2515
- const text = props.text ?? props.value;
2516
- const cls = buildClass("kb-list-item", nodeClass);
2517
- if (children.length > 0) {
2518
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2519
- return `${indent}<li class="${cls}"${idAttr}>
2520
- ${childHtml}
2521
- ${indent}</li>`;
2522
- }
2523
- return `${indent}<li class="${cls}"${idAttr}>${escapeHtml(text ?? "List item")}</li>`;
2524
- }
2525
- case "table": {
2526
- const cls = buildClass("kb-table", nodeClass);
2527
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2528
- if (!childHtml) {
2529
- return `${indent}<table class="${cls}"${idAttr}></table>`;
2530
- }
2531
- return `${indent}<table class="${cls}"${idAttr}>
2532
- ${childHtml}
2533
- ${indent}</table>`;
2534
- }
2535
- case "table-row": {
2536
- const cls = buildClass("kb-table-row", nodeClass);
2537
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2538
- if (!childHtml) {
2539
- return `${indent}<tr class="${cls}"${idAttr}></tr>`;
2540
- }
2541
- return `${indent}<tr class="${cls}"${idAttr}>
2542
- ${childHtml}
2543
- ${indent}</tr>`;
2544
- }
2545
- case "table-cell": {
2546
- const isHeader = props.isHeader || props.type === "header" || props.tag === "th";
2547
- const tag = isHeader ? "th" : "td";
2548
- const colSpan = props.colSpan && Number(props.colSpan) > 1 ? ` colspan="${escapeAttr(props.colSpan)}"` : "";
2549
- const rowSpan = props.rowSpan && Number(props.rowSpan) > 1 ? ` rowspan="${escapeAttr(props.rowSpan)}"` : "";
2550
- const text = props.text ?? props.value ?? "";
2551
- const cls = buildClass("kb-table-cell", nodeClass);
2552
- if (children.length > 0) {
2553
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2554
- return `${indent}<${tag} class="${cls}"${idAttr}${colSpan}${rowSpan}>
2555
- ${childHtml}
2556
- ${indent}</${tag}>`;
2557
- }
2558
- return `${indent}<${tag} class="${cls}"${idAttr}${colSpan}${rowSpan}>${escapeHtml(text)}</${tag}>`;
2559
- }
2560
- case "collection": {
2561
- const cls = buildClass("kb-collection", nodeClass);
2562
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2563
- if (!childHtml) {
2564
- return `${indent}<div class="${cls}"${idAttr}></div>`;
2565
- }
2566
- return `${indent}<div class="${cls}"${idAttr}>
2567
- ${childHtml}
2568
- ${indent}</div>`;
2569
- }
2570
- default: {
2571
- const cls = buildClass(`kb-${node.type}`, nodeClass);
2572
- const childHtml = children.map((child) => renderNodeToHtml(child, indentLevel + 1, options)).join("\n");
2573
- if (!childHtml) {
2574
- return `${indent}<div class="${cls}"${idAttr}></div>`;
2575
- }
2576
- return `${indent}<div class="${cls}"${idAttr}>
2577
- ${childHtml}
2578
- ${indent}</div>`;
2579
- }
2580
- }
2581
- }
2582
- function generateSemanticHtml(docOrNode, options = {}) {
2583
- const rootNode = "document" in docOrNode ? docOrNode.document : docOrNode;
2584
- if (!rootNode) return "";
2585
- return renderNodeToHtml(rootNode, 0, options);
2586
- }
2587
- function formatCssRule(selector, declarationsStr, indent = "") {
2588
- if (!declarationsStr.trim()) return "";
2589
- const rules = declarationsStr.split(";").map((r) => r.trim()).filter(Boolean);
2590
- if (rules.length === 0) return "";
2591
- const indentedRules = rules.map((r) => `${indent} ${r};`).join("\n");
2592
- return `${indent}${selector} {
2593
- ${indentedRules}
2594
- ${indent}}`;
2595
- }
2596
- function generateDocumentCss(docOrNode, options = {}) {
2597
- const rootNode = "document" in docOrNode ? docOrNode.document : docOrNode;
2598
- if (!rootNode) return "";
2599
- const classPrefix = options.classPrefix || "kb-node-";
2600
- const baseRules = [];
2601
- const tabletRules = [];
2602
- const mobileRules = [];
2603
- const stateRules = [];
2604
- const walk = (node) => {
2605
- const selector = `.${classPrefix}${node.id}`;
2606
- if (node.styles) {
2607
- const baseStyles = {
2608
- ...node.styles.base || {},
2609
- ...node.styles.desktop || {}
2610
- };
2611
- const baseDecls = styleDefinitionToCssDeclarations(baseStyles);
2612
- if (baseDecls) {
2613
- baseRules.push(formatCssRule(selector, baseDecls));
2614
- }
2615
- if (node.styles.tablet) {
2616
- const tabletDecls = styleDefinitionToCssDeclarations(node.styles.tablet);
2617
- if (tabletDecls) {
2618
- tabletRules.push(formatCssRule(selector, tabletDecls, " "));
2619
- }
2620
- }
2621
- if (node.styles.mobile) {
2622
- const mobileDecls = styleDefinitionToCssDeclarations(node.styles.mobile);
2623
- if (mobileDecls) {
2624
- mobileRules.push(formatCssRule(selector, mobileDecls, " "));
2625
- }
2626
- }
2627
- if (node.styles.states && typeof node.styles.states === "object") {
2628
- for (const [state, styleDef] of Object.entries(node.styles.states)) {
2629
- if (!styleDef) continue;
2630
- const safeState = /^::?[a-zA-Z-]+$/.test(state) ? state : null;
2631
- if (!safeState) continue;
2632
- const stateDecls = styleDefinitionToCssDeclarations(styleDef);
2633
- if (stateDecls) {
2634
- stateRules.push(formatCssRule(`${selector}${safeState}`, stateDecls));
113
+ to {
114
+ opacity: 1;
115
+ transform: translateY(0) scale(1);
2635
116
  }
2636
117
  }
2637
- }
2638
- }
2639
- node.children?.forEach(walk);
2640
- };
2641
- walk(rootNode);
2642
- const sections = [];
2643
- if (options.includeReset !== false) {
2644
- sections.push(`/* ==========================================================================
118
+ `}),Object.entries(t).map(([l,f])=>{if(!f||f.length===0)return null;let p=f.slice(-o);return G("div",{"data-testid":`toast-container-${l}`,className:i,style:{position:"fixed",zIndex:99999,display:"flex",flexDirection:"column",gap:"8px",maxWidth:"calc(100vw - 32px)",pointerEvents:"none",...kn[l]},children:p.map(u=>G(Cn,{toast:u},u.id))},l)})]})};function wn(r){return{api_request:r?.apiRequest?we(r.apiRequest):nt,show_toast:st,open_modal:at,close_modal:lt,navigate:dt,copy_clipboard:ct,reset_form:ut,...r?.handlers||{}}}function ye(r,e){let i=wn(e);for(let[o,n]of Object.entries(i))(!r.hasHandler(o)||e?.handlers?.[o]||e?.apiRequest)&&r.registerHandler(o,n);return r}import{jsx as In}from"react/jsx-runtime";var Ne=Sn(null);function Nn(r,e){let i=new Set([...Object.keys(r),...Object.keys(e)]);for(let o of i)if(r[o]!==e[o])return!0;return!1}var ht=({formId:r,formConfig:e,initialValues:i,onSubmit:o,onSuccess:n,onError:t,actions:l,nodeId:f,document:p,onDiagnostic:u,children:d})=>{let s=Ue(),a=le(()=>r||e?.formId||f||"kubuild-form",[r,e?.formId,f]),c=le(()=>({...e?.initialValues||{},...i||{}}),[e?.initialValues,i]),[m,b]=ae(c),[y,h]=ae(c),[v,x]=ae({}),[g,w]=ae({}),[R,$]=ae(!1),S=mt(new Map),E=mt({values:y,errors:v,touched:g,initialValues:m,isSubmitting:R,formConfig:e});yt(()=>{E.current={values:y,errors:v,touched:g,initialValues:m,isSubmitting:R,formConfig:e}});let ne=V(k=>{if(!k||!k.name)return()=>{};let N={name:k.name,rules:k.rules||[],validateOn:k.validateOn||"blur",label:k.label,defaultValue:k.defaultValue,transform:k.transform,disabled:k.disabled,required:k.required};return S.current.set(k.name,N),k.defaultValue!==void 0&&(E.current.values[k.name]===void 0&&(E.current.values[k.name]=k.defaultValue),h(P=>P[k.name]===void 0?{...P,[k.name]:k.defaultValue}:P)),()=>{S.current.delete(k.name)}},[]),H=V(k=>S.current.get(k),[]),z=V((k,N)=>{let P=S.current.get(k),L=E.current.values,Y=N!==void 0?N:L[k];P?.transform&&(Y=gt(Y,P.transform));let O=[...P?.rules||[]];return P?.required&&!O.some(I=>I.type==="required")&&O.unshift({type:"required",message:`${P.label||k} is required`}),Tn(Y,O,L)},[]),B=V(k=>{let N=k||E.current.values,P=Array.from(S.current.values());return En(N,P)},[]),K=V((k,N)=>{x(P=>{if(N)return{...P,[k]:N};if(P[k]===void 0)return P;let L={...P};return delete L[k],L})},[]),Ae=V(k=>{x({...k})},[]),De=V((k,N,P)=>{let L=S.current.get(k),Y=N;L?.transform&&(Y=gt(N,L.transform)),h(_=>({..._,[k]:Y}));let O=L?.validateOn||e?.validateOn||"blur";if(P!==void 0?P:O==="change"){let _=z(k,Y);K(k,_)}},[e?.validateOn,z,K]),Oe=V((k,N=!0,P)=>{w(I=>({...I,[k]:N}));let Y=S.current.get(k)?.validateOn||e?.validateOn||"blur";if(P!==void 0?P:Y==="blur"&&N){let I=z(k);K(k,I)}},[e?.validateOn,z,K]),Ve=V((k,N=!1)=>{h(P=>N?{...k}:{...P,...k})},[]),ue=V(k=>{$(k)},[]),oe=V(k=>{let N=k||m;k&&b(k),h({...N}),x({}),w({}),$(!1)},[m]),Me=V(async k=>{if(k&&typeof k.preventDefault=="function"&&k.preventDefault(),E.current.isSubmitting)return!1;let N=E.current.values,P={};for(let O of S.current.keys())P[O]=!0;w(P);let L=B(N);if(x(L),!(Object.keys(L).length===0)){if(t?.(L),e?.scrollToFirstError!==!1&&typeof window<"u"&&typeof p<"u"){let I=Object.keys(L)[0];if(I)try{let _=window.document.querySelector(`[name="${I}"], [data-field="${I}"]`);_&&(_.scrollIntoView({behavior:"smooth",block:"center"}),_.focus?.())}catch{}}return!1}$(!0);try{if(l&&l.length>0){let O=l.filter(I=>I.trigger==="submit"&&I.enabled!==!1);if(O.length>0){let I=new Pn;ye(I);for(let _ of O){let re=await I.execute(_,{context:{form:N,variables:s?.variables?{...s.variables}:{},nodeId:f,document:p}});if(!re.success){let Le=re.error instanceof Error?re.error.message:String(re.error||"Submit pipeline failed"),qe={code:"ACTION_EXECUTION_ERROR",actionType:_.steps[0]?.type||"submit",nodeId:f,message:`Form submit pipeline failed: ${Le}`,error:re.error};return u?.(qe),s?.onDiagnostic?.(qe),t?.({_form:Le}),$(!1),!1}}}}return o&&await o(N,{formId:a,setSubmitting:ue,resetForm:oe,setErrors:x}),n?.(N),e?.resetOnSubmit&&oe(),!0}catch(O){let I=O instanceof Error?O.message:String(O),_={code:"ACTION_EXECUTION_ERROR",actionType:"submit",nodeId:f,message:`Form submit execution error: ${I}`,error:O};return u?.(_),s?.onDiagnostic?.(_),t?.({_form:I}),!1}finally{$(!1)}},[e,l,f,p,u,s,o,n,t,a,ue,oe,B]),He=le(()=>Object.keys(v).length===0,[v]),Be=le(()=>Nn(y,m),[y,m]),qt=le(()=>({formId:a,formConfig:e,initialValues:m,values:y,errors:v,touched:g,isSubmitting:R,isValid:He,dirty:Be,setFieldValue:De,setFieldTouched:Oe,setFieldError:K,setErrors:Ae,setValues:Ve,setSubmitting:ue,resetForm:oe,validateField:z,validateForm:B,handleFormSubmit:Me,registerField:ne,getFieldBinding:H}),[a,e,m,y,v,g,R,He,Be,De,Oe,K,Ae,Ve,ue,oe,z,B,Me,ne,H]);return In(Ne.Provider,{value:qt,children:d})};function X(){return bt(Ne)}function $r(){return bt(Ne)}function wr(){let r=X();return{isSubmitting:r?.isSubmitting??!1,isValid:r?.isValid??!0,dirty:r?.dirty??!1,errors:r?.errors??{}}}function Sr(r,e){let i=X();i&&r&&i.registerField(e||{name:r}),yt(()=>{if(!i||!r)return;let a=i.registerField(e||{name:r});return()=>{a()}},[i,r,e]);let o=i?.values[r]!==void 0?i.values[r]:e?.defaultValue,n=i?.errors[r],t=!!i?.touched[r],l=!!(n&&t),f=V((a,c)=>{i?.setFieldValue(r,a,c)},[i,r]),p=V((a=!0,c)=>{i?.setFieldTouched(r,a,c)},[i,r]),u=V(a=>{i?.setFieldError(r,a)},[i,r]),d=V(a=>{if(a&&typeof a=="object"&&"target"in a&&a.target){let c=a.target;if(c.type==="checkbox")f(c.checked);else if(c.type==="number"){let m=c.value===""?"":Number(c.value);f(m)}else f(c.value)}else f(a)},[f]),s=V(()=>{p(!0)},[p]);return{value:o,error:n,touched:t,isInvalid:l,setValue:f,setTouched:p,setError:u,onChange:d,onBlur:s}}import{useRef as Fn}from"react";import{jsx as vt}from"react/jsx-runtime";var j=({as:r="p",id:e,className:i,style:o,value:n,isEditable:t,nodeId:l,onClick:f,onChange:p,...u})=>{let d=Fn(!1),s=r;return t?vt(s,{id:e,className:i,style:{...o,outline:"none",cursor:"text"},contentEditable:!0,suppressContentEditableWarning:!0,"data-kubuild-node":l,onClick:a=>{f?.(a)},onFocus:()=>{d.current=!0},onInput:a=>{let c=a.currentTarget.textContent??"";p?.(c,!1)},onBlur:a=>{d.current=!1;let c=a.currentTarget.textContent??"";p?.(c,!0)},onKeyDown:a=>{a.key==="Escape"&&a.currentTarget.blur()},...u,children:n}):vt(s,{id:e,className:i,style:o,onClick:f,"data-kubuild-node":l,...u,children:n})};import{useRef as xt,useLayoutEffect as An,useEffect as Dn,useMemo as On}from"react";import{jsx as Rt}from"react/jsx-runtime";var Vn=typeof window<"u"?An:Dn;function Mn(r){return r?r.replace(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi,(e,i,o)=>{let n=o;return n=n.replace(/(^|[\s,{}])body(?=[\s,{])/g,"$1:host, body"),n=n.replace(/(^|[\s,{}])html(?=[\s,{])/g,"$1:host, html"),`<style${i}>
119
+ :host { display: block; }
120
+ ${n}</style>`}):""}var kt=({id:r,style:e,onClick:i,dataKubuildNode:o,html:n,role:t})=>{let l=xt(null),f=xt(null),p=On(()=>Mn(n),[n]);return Vn(()=>{let u=l.current;if(u){if(typeof u.attachShadow=="function"){if(!f.current)if(u.shadowRoot)f.current=u.shadowRoot;else try{f.current=u.attachShadow({mode:"open"})}catch{f.current=u.shadowRoot}if(f.current){f.current.innerHTML=p;return}}u.innerHTML=p}},[p]),Rt("div",{ref:l,id:r,style:e,onClick:i,"data-kubuild-node":o,role:t,children:Rt("template",{shadowrootmode:"open",dangerouslySetInnerHTML:{__html:p}})})};import{useEffect as de}from"react";import Ct,{useEffect as Hn}from"react";import{ActionPipelineExecutor as Bn}from"@kubuild/core";async function D(r){let{node:e,trigger:i,document:o,context:n,formContext:t,extraContext:l,onDiagnostic:f,onActionDispatch:p,executor:u}=r;if(!e.actions||!Array.isArray(e.actions)||e.actions.length===0)return{executed:!1,success:!0};let d=e.actions.filter(c=>c.trigger===i&&c.enabled!==!1);if(d.length===0)return{executed:!1,success:!0};let s=u||new Bn;ye(s);let a={form:t?{...t.values}:{},variables:n?.variables?{...n.variables}:{},nodeId:e.id,document:o,toastManager:n?.toastManager,modalManager:n?.modalManager,...l||{}};for(let c of d){let m=await s.execute(c,{context:a});if(p&&c.steps.length>0&&p(c.steps[0].type,c.steps[0].payload,e.id),!m.success){let b=m.error instanceof Error?m.error.message:String(m.error||`Action pipeline "${c.id}" failed`),y={code:"ACTION_EXECUTION_ERROR",actionType:c.steps[0]?.type||i,nodeId:e.id,message:b,error:m.error};return f?.(y),n?.onDiagnostic?.(y),{executed:!0,success:!1,error:m.error}}}return{executed:!0,success:!0}}function $t(r,e){if(!r.actions?.some(t=>t.trigger==="load"&&t.enabled!==!1))return;let o=Ct?.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE||Ct?.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;if(o?.H||o?.ReactCurrentDispatcher?.current)try{Hn(()=>{e.mode!=="editor"&&D({node:r,trigger:"load",document:e.document,context:e.context,formContext:e.formContext,onDiagnostic:e.onDiagnostic,onActionDispatch:e.onActionDispatch})},[r,e.document,e.context,e.formContext,e.onDiagnostic,e.onActionDispatch,e.mode])}catch{}}import{jsx as M,jsxs as he}from"react/jsx-runtime";var wt=({id:r,name:e,action:i,method:o="POST",target:n,autoComplete:t,style:l,onClick:f,mode:p,dataKubuildNode:u,children:d})=>{let s=X();return M("form",{id:r,name:e,action:i,method:o,target:n,autoComplete:t,style:l,onClick:f,onSubmit:m=>{if(p==="editor"){m.preventDefault();return}s&&s.handleFormSubmit(m)},onReset:()=>{s&&s.resetForm()},"data-kubuild-node":u,role:"form","aria-label":e,children:d})},St=({id:r,name:e,type:i="text",placeholder:o,defaultValue:n,required:t,disabled:l,readOnly:f,rules:p,validateOn:u,transform:d,style:s,onClick:a,actions:c,nodeId:m,document:b,renderContext:y,onDiagnostic:h,onActionDispatch:v,dataKubuildNode:x})=>{let g=X();if(g&&e&&g.registerField({name:e,defaultValue:n,required:t,disabled:l,rules:p||[],validateOn:u,transform:d}),de(()=>{if(!g||!e)return;let B=g.registerField({name:e,defaultValue:n,required:t,disabled:l,rules:p||[],validateOn:u,transform:d});return()=>{B()}},[g,e,n,t,l,p,u,d]),!g||!e)return M("input",{id:r,type:i,name:e,placeholder:o,defaultValue:n!==void 0?String(n):void 0,required:t,disabled:l,readOnly:f,style:s,onClick:a,"data-kubuild-node":x});let w=g.values[e],R=w!=null?String(w):n!=null?String(n):"",$=g.errors[e],S=!!g.touched[e],E=!!($&&S);return M("input",{id:r,type:i,name:e,placeholder:o,value:R,onChange:B=>{let K=B.target.value;i==="number"&&(K=B.target.value===""?"":Number(B.target.value)),g.setFieldValue(e,K),c&&c.length>0&&D({node:{id:m||r||e,type:"input",actions:c},trigger:"change",document:b,context:y,formContext:g,extraContext:{fieldName:e,fieldValue:K},onDiagnostic:h,onActionDispatch:v})},onBlur:()=>{g.setFieldTouched(e,!0),c&&c.length>0&&D({node:{id:m||r||e,type:"input",actions:c},trigger:"blur",document:b,context:y,formContext:g,extraContext:{fieldName:e,fieldValue:g.values[e]},onDiagnostic:h,onActionDispatch:v})},onFocus:()=>{c&&c.length>0&&D({node:{id:m||r||e,type:"input",actions:c},trigger:"focus",document:b,context:y,formContext:g,extraContext:{fieldName:e,fieldValue:g.values[e]},onDiagnostic:h,onActionDispatch:v})},required:t,disabled:l,readOnly:f,style:s,onClick:a,"data-kubuild-node":x,"data-field":e,"data-invalid":E?"true":void 0,"aria-invalid":E?!0:void 0,"aria-errormessage":$?`${r}-error`:void 0})},Tt=({id:r,name:e,placeholder:i,defaultValue:o,rows:n=4,required:t,disabled:l,readOnly:f,rules:p,validateOn:u,transform:d,style:s,onClick:a,actions:c,nodeId:m,document:b,renderContext:y,onDiagnostic:h,onActionDispatch:v,dataKubuildNode:x})=>{let g=X();if(g&&e&&g.registerField({name:e,defaultValue:o,required:t,disabled:l,rules:p||[],validateOn:u,transform:d}),de(()=>{if(!g||!e)return;let B=g.registerField({name:e,defaultValue:o,required:t,disabled:l,rules:p||[],validateOn:u,transform:d});return()=>{B()}},[g,e,o,t,l,p,u,d]),!g||!e)return M("textarea",{id:r,name:e,placeholder:i,defaultValue:o!==void 0?String(o):void 0,rows:n,required:t,disabled:l,readOnly:f,style:s,onClick:a,"data-kubuild-node":x});let w=g.values[e],R=w!=null?String(w):o!=null?String(o):"",$=g.errors[e],S=!!g.touched[e],E=!!($&&S);return M("textarea",{id:r,name:e,placeholder:i,rows:n,value:R,onChange:B=>{g.setFieldValue(e,B.target.value),c&&c.length>0&&D({node:{id:m||r||e,type:"textarea",actions:c},trigger:"change",document:b,context:y,formContext:g,extraContext:{fieldName:e,fieldValue:B.target.value},onDiagnostic:h,onActionDispatch:v})},onBlur:()=>{g.setFieldTouched(e,!0),c&&c.length>0&&D({node:{id:m||r||e,type:"textarea",actions:c},trigger:"blur",document:b,context:y,formContext:g,extraContext:{fieldName:e,fieldValue:g.values[e]},onDiagnostic:h,onActionDispatch:v})},onFocus:()=>{c&&c.length>0&&D({node:{id:m||r||e,type:"textarea",actions:c},trigger:"focus",document:b,context:y,formContext:g,extraContext:{fieldName:e,fieldValue:g.values[e]},onDiagnostic:h,onActionDispatch:v})},required:t,disabled:l,readOnly:f,style:s,onClick:a,"data-kubuild-node":x,"data-field":e,"data-invalid":E?"true":void 0,"aria-invalid":E?!0:void 0,"aria-errormessage":$?`${r}-error`:void 0})},Et=({id:r,name:e,placeholder:i,defaultValue:o,required:n,disabled:t,rules:l,validateOn:f,optionsList:p,style:u,onClick:d,actions:s,nodeId:a,document:c,renderContext:m,onDiagnostic:b,onActionDispatch:y,dataKubuildNode:h})=>{let v=X();if(v&&e&&v.registerField({name:e,defaultValue:o,required:n,disabled:t,rules:l||[],validateOn:f}),de(()=>{if(!v||!e)return;let H=v.registerField({name:e,defaultValue:o,required:n,disabled:t,rules:l||[],validateOn:f});return()=>{H()}},[v,e,o,n,t,l,f]),!v||!e)return he("select",{id:r,name:e,defaultValue:o!==void 0?String(o):"",required:n,disabled:t,style:u,onClick:d,"data-kubuild-node":h,children:[i&&M("option",{value:"",disabled:!0,children:i}),p.map((H,z)=>M("option",{value:H.value,children:H.label},z))]});let x=v.values[e],g=x!=null?String(x):o!=null?String(o):"",w=v.errors[e],R=!!v.touched[e],$=!!(w&&R);return he("select",{id:r,name:e,value:g,onChange:H=>{v.setFieldValue(e,H.target.value),s&&s.length>0&&D({node:{id:a||r||e,type:"select",actions:s},trigger:"change",document:c,context:m,formContext:v,extraContext:{fieldName:e,fieldValue:H.target.value},onDiagnostic:b,onActionDispatch:y})},onBlur:()=>{v.setFieldTouched(e,!0),s&&s.length>0&&D({node:{id:a||r||e,type:"select",actions:s},trigger:"blur",document:c,context:m,formContext:v,extraContext:{fieldName:e,fieldValue:v.values[e]},onDiagnostic:b,onActionDispatch:y})},onFocus:()=>{s&&s.length>0&&D({node:{id:a||r||e,type:"select",actions:s},trigger:"focus",document:c,context:m,formContext:v,extraContext:{fieldName:e,fieldValue:v.values[e]},onDiagnostic:b,onActionDispatch:y})},required:n,disabled:t,style:u,onClick:d,"data-kubuild-node":h,"data-field":e,"data-invalid":$?"true":void 0,"aria-invalid":$?!0:void 0,"aria-errormessage":w?`${r}-error`:void 0,children:[i&&M("option",{value:"",disabled:!0,children:i}),p.map((H,z)=>M("option",{value:H.value,children:H.label},z))]})},Pt=({id:r,name:e,label:i="",defaultChecked:o=!1,required:n,disabled:t,rules:l,validateOn:f,style:p,onClick:u,actions:d,nodeId:s,document:a,renderContext:c,onDiagnostic:m,onActionDispatch:b,dataKubuildNode:y,isEditable:h,onNodePropChange:v})=>{let x=X();x&&e&&x.registerField({name:e,defaultValue:o,required:n,disabled:t,rules:l||[],validateOn:f}),de(()=>{if(!x||!e)return;let $=x.registerField({name:e,defaultValue:o,required:n,disabled:t,rules:l||[],validateOn:f});return()=>{$()}},[x,e,o,n,t,l,f]);let g=x&&e&&x.values[e]!==void 0?!!x.values[e]:o;return he("label",{id:r,style:p,onClick:u,"data-kubuild-node":y,children:[M("input",{type:"checkbox",name:e,checked:g,onChange:$=>{x&&e&&(x.setFieldValue(e,$.target.checked),d&&d.length>0&&D({node:{id:s||r||e,type:"checkbox",actions:d},trigger:"change",document:a,context:c,formContext:x,extraContext:{fieldName:e,fieldValue:$.target.checked},onDiagnostic:m,onActionDispatch:b}))},onBlur:()=>{x&&e&&(x.setFieldTouched(e,!0),d&&d.length>0&&D({node:{id:s||r||e,type:"checkbox",actions:d},trigger:"blur",document:a,context:c,formContext:x,extraContext:{fieldName:e,fieldValue:g},onDiagnostic:m,onActionDispatch:b}))},required:n,disabled:t,style:{cursor:t?"not-allowed":"pointer"},"data-field":e}),h?M(j,{as:"span",value:i,isEditable:h,nodeId:y||"",onChange:($,S)=>v?.(y||"","label",$,S)}):M("span",{children:i})]})},Nt=({id:r,name:e,label:i="",value:o="",defaultChecked:n=!1,required:t,disabled:l,rules:f,validateOn:p,style:u,onClick:d,actions:s,nodeId:a,document:c,renderContext:m,onDiagnostic:b,onActionDispatch:y,dataKubuildNode:h,isEditable:v,onNodePropChange:x})=>{let g=X();g&&e&&g.registerField({name:e,defaultValue:n?o:void 0,required:t,disabled:l,rules:f||[],validateOn:p}),de(()=>{if(!g||!e)return;let S=g.registerField({name:e,defaultValue:n?o:void 0,required:t,disabled:l,rules:f||[],validateOn:p});return()=>{S()}},[g,e,n,o,t,l,f,p]);let w=g&&e&&g.values[e]!==void 0?g.values[e]===o:n;return he("label",{id:r,style:u,onClick:d,"data-kubuild-node":h,children:[M("input",{type:"radio",name:e,value:o,checked:w,onChange:()=>{g&&e&&(g.setFieldValue(e,o),s&&s.length>0&&D({node:{id:a||r||e,type:"radio",actions:s},trigger:"change",document:c,context:m,formContext:g,extraContext:{fieldName:e,fieldValue:o},onDiagnostic:b,onActionDispatch:y}))},onBlur:()=>{g&&e&&(g.setFieldTouched(e,!0),s&&s.length>0&&D({node:{id:a||r||e,type:"radio",actions:s},trigger:"blur",document:c,context:m,formContext:g,extraContext:{fieldName:e,fieldValue:o},onDiagnostic:b,onActionDispatch:y}))},required:t,disabled:l,style:{cursor:l?"not-allowed":"pointer"},"data-field":e}),v?M(j,{as:"span",value:i,isEditable:v,nodeId:h||"",onChange:(S,E)=>x?.(h||"","label",S,E)}):M("span",{children:i})]})},It=({id:r,buttonType:e,disabled:i,ariaLabel:o,style:n,onClick:t,actions:l,node:f,document:p,renderContext:u,onDiagnostic:d,onActionDispatch:s,dataKubuildNode:a,actionAttrs:c,children:m})=>{let b=X(),y=b?.isSubmitting===!0,h=i||e==="submit"&&y;return M("button",{id:r,type:e,disabled:h,"aria-disabled":h?!0:void 0,"aria-label":o,"aria-busy":e==="submit"&&y?!0:void 0,tabIndex:h?-1:0,style:n,onClick:h?void 0:async x=>{if(h)return;if(e==="submit"){if(b&&!await b.handleFormSubmit(x))return}else e==="reset"&&b&&b.resetForm();let g=f||{id:a||r||"button",type:"button",actions:l};g.actions&&g.actions.length>0&&await D({node:g,trigger:"click",document:p,context:u,formContext:b,onDiagnostic:d,onActionDispatch:s}),t&&t(x)},"data-kubuild-node":a,...c,children:m})};function Ft(r){return r?r.replace(/[-_](\w)/g,(e,i)=>i.toUpperCase()).replace(/^\w/,e=>e.toUpperCase()):""}function At(r){if(!r||typeof r!="string")return null;let e=r.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i);return e?e[1]:null}function Dt(r){if(!r||typeof r!="string")return null;let e=r.match(/(?:vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|))(\d+)/i);return e?e[3]:null}function Ot(r){if(r==="16:9")return"16 / 9";if(r==="4:3")return"4 / 3";if(r==="1:1")return"1 / 1";if(r==="9:16")return"9 / 16";if(typeof r=="string"&&r!=="auto")return r.replace(":"," / ")}import{jsx as C,jsxs as U}from"react/jsx-runtime";function Kn(r){let{node:e,document:i,definition:o,resolvedProps:n,styles:t,context:l,childrenElements:f,handleClick:p}=r;if(o?.renderer&&typeof o.renderer=="function"){let u=o.renderer;return typeof u=="function"&&!u.prototype?.isReactComponent?u({node:e,document:i,props:n,styles:t,context:l,children:f,onClick:p}):C(u,{node:e,document:i,props:n,styles:t,context:l,onClick:p,children:f})}return null}function Yn(r){let{node:e,domId:i,styles:o,resolvedProps:n,props:t,handleClick:l,childrenElements:f}=r;switch(e.type){case"page":return C("div",{id:i,style:o,onClick:l,"data-kubuild-node":e.id,children:f});case"section":{let p=typeof n.ariaLabel=="string"?n.ariaLabel:typeof t.ariaLabel=="string"?t.ariaLabel:void 0;return C("section",{id:i,style:o,onClick:l,"data-kubuild-node":e.id,"aria-label":p,children:f})}case"container":return C("div",{id:i,style:o,onClick:l,"data-kubuild-node":e.id,children:f});case"columns":return C("div",{id:i,style:o,onClick:l,"data-kubuild-node":e.id,children:f});default:return null}}function Xn(r){let{node:e,domId:i,styles:o,resolvedProps:n,props:t,mode:l,handleClick:f,onNodePropChange:p,childrenElements:u}=r;switch(e.type){case"heading":{let d=typeof n.level=="number"?n.level:1,s=`h${Math.min(Math.max(d,1),6)}`||"h1",a=String(n.text??n.content??t.text??t.content??""),c=l==="editor"&&!F(t.text)&&!F(t.content);return C(j,{as:s,id:i,style:o,value:a,isEditable:c,nodeId:e.id,onClick:f,onChange:(m,b)=>p?.(e.id,"text",m,b)})}case"text":{let d=String(n.text??n.content??t.text??t.content??""),s=typeof n.as=="string"?n.as:typeof t.as=="string"?t.as:typeof n.tag=="string"?n.tag:typeof t.tag=="string"?t.tag:(t.content!==void 0||n.content!==void 0)&&t.text===void 0&&n.text===void 0?"p":"span",a=l==="editor"&&!F(t.text)&&!F(t.content);return C(j,{as:s,id:i,style:o,value:d,isEditable:a,nodeId:e.id,onClick:f,onChange:(c,m)=>p?.(e.id,"text",c,m)})}case"paragraph":{let d=String(n.text??n.content??t.text??t.content??""),s=l==="editor"&&!F(t.text)&&!F(t.content);return C(j,{as:"p",id:i,style:o,value:d,isEditable:s,nodeId:e.id,onClick:f,onChange:(a,c)=>p?.(e.id,"text",a,c)})}case"link":{let d=String(n.text??n.label??n.content??t.text??t.label??t.content??""),s=typeof n.href=="string"?n.href:"#",a=typeof n.target=="string"?n.target:void 0,c=l==="editor"&&!F(t.text)&&!F(t.label)&&!F(t.content),m=typeof n.rel=="string"?n.rel:a==="_blank"?"noopener noreferrer":void 0,b=l==="editor"?void 0:Z(s,"#"),y=h=>{l==="editor"&&h.preventDefault(),f(h)};return c?C(j,{as:"a",id:i,style:o,value:d,isEditable:c,nodeId:e.id,onClick:y,onChange:(h,v)=>{let x="text"in t?"text":"label";p?.(e.id,x,h,v)},href:b,target:a,rel:m}):C("a",{id:i,style:o,href:b,target:a,rel:m,onClick:y,"data-kubuild-node":e.id,children:d})}case"blockquote":{let d=typeof n.quote=="string"?n.quote:typeof n.text=="string"?n.text:typeof t.quote=="string"?t.quote:typeof t.text=="string"?t.text:void 0,s=typeof n.cite=="string"?n.cite:typeof t.cite=="string"?t.cite:void 0,a=l==="editor"&&!F(t.quote)&&!F(t.text),c={borderLeft:"4px solid #cbd5e1",paddingLeft:"1rem",margin:"1rem 0",fontStyle:"italic",color:"#475569",...o};return U("blockquote",{id:i,style:c,onClick:f,"data-kubuild-node":e.id,cite:s,children:[d!==void 0?a?C(j,{as:"p",value:d,isEditable:a,nodeId:e.id,onChange:(m,b)=>{let y="quote"in t?"quote":"text";p?.(e.id,y,m,b)}}):C("p",{children:d}):null,u,s&&U("cite",{style:{display:"block",fontStyle:"normal",fontSize:"0.875rem",marginTop:"0.5rem",color:"#64748b"},children:["\u2014 ",s]})]})}case"badge":{let d=String(n.text??n.label??t.text??t.label??""),s=typeof n.variant=="string"?n.variant:typeof t.variant=="string"?t.variant:"default",a=l==="editor"&&!F(t.text)&&!F(t.label);return C("span",{id:i,style:o,onClick:f,"data-kubuild-node":e.id,"data-variant":s,"data-badge-variant":s,children:a?C(j,{as:"span",value:d,isEditable:a,nodeId:e.id,onChange:(c,m)=>{let b="text"in t?"text":"label";p?.(e.id,b,c,m)}}):d})}case"code-block":{let d=String(n.code??t.code??""),s=typeof n.language=="string"?n.language:typeof t.language=="string"?t.language:"plaintext";return l==="editor"?C("pre",{id:i,style:o,onClick:f,"data-kubuild-node":e.id,"data-language":s,children:C("code",{className:`language-${s}`,contentEditable:!0,suppressContentEditableWarning:!0,onBlur:a=>p?.(e.id,"code",a.currentTarget.textContent??"",!0),children:d})}):C("pre",{id:i,style:o,onClick:f,"data-kubuild-node":e.id,"data-language":s,children:C("code",{className:`language-${s}`,children:d})})}default:return null}}function Gn(r){let{node:e,domId:i,styles:o,resolvedProps:n,props:t,mode:l,handleClick:f,onNodePropChange:p,childrenElements:u}=r;switch(e.type){case"list":{let s=(n.tag||t.tag)==="ol"||n.ordered===!0||t.ordered===!0?"ol":"ul",a=typeof n.listStyleType=="string"?n.listStyleType:typeof n.listStyle=="string"?n.listStyle:typeof t.listStyleType=="string"?t.listStyleType:typeof t.listStyle=="string"?t.listStyle:void 0,c=a==="custom-icon"||a==="none"?"none":a,m={...o,...c?{listStyleType:c}:{}};return C(s,{id:i,style:m,onClick:f,"data-kubuild-node":e.id,"data-list-style":a,children:u})}case"list-item":{let d=n.text!==void 0?String(n.text):t.text!==void 0?String(t.text):void 0,s=l==="editor"&&!F(t.text)&&d!==void 0;return U("li",{id:i,style:o,onClick:f,"data-kubuild-node":e.id,children:[d!==void 0&&(s?C(j,{as:"span",value:d,isEditable:s,nodeId:e.id,onChange:(a,c)=>p?.(e.id,"text",a,c)}):d),u]})}default:return null}}function Jn(r){let{node:e,domId:i,styles:o,resolvedProps:n,props:t,mode:l,handleClick:f,onNodePropChange:p,childrenElements:u}=r;switch(e.type){case"table":{let d=typeof n.cellPadding=="number"?n.cellPadding:void 0,s=typeof n.cellSpacing=="number"?n.cellSpacing:void 0,a=typeof n.border=="number"?n.border:void 0,c=n.striped===!0||t.striped===!0,m=n.bordered===!0||t.bordered===!0,b=n.hover===!0||t.hover===!0,y=n.compact===!0||t.compact===!0;return C("table",{id:i,style:o,cellPadding:d,cellSpacing:s,border:a,onClick:f,"data-kubuild-node":e.id,"data-striped":c?"true":void 0,"data-bordered":m?"true":void 0,"data-hover":b?"true":void 0,"data-compact":y?"true":void 0,children:C("tbody",{children:u})})}case"table-row":return C("tr",{id:i,style:o,onClick:f,"data-kubuild-node":e.id,children:u});case"table-cell":{let s=n.tag==="th"||t.tag==="th"||n.isHeader===!0||t.isHeader===!0||n.cellType==="header"||t.cellType==="header"||n.type==="th"||t.type==="th"?"th":"td",a=typeof n.colSpan=="number"?n.colSpan:typeof t.colSpan=="number"?t.colSpan:void 0,c=typeof n.rowSpan=="number"?n.rowSpan:typeof t.rowSpan=="number"?t.rowSpan:void 0,m=n.text!==void 0?String(n.text):t.text!==void 0?String(t.text):void 0,b=l==="editor"&&!F(t.text)&&m!==void 0;return U(s,{id:i,colSpan:a,rowSpan:c,style:o,onClick:f,"data-kubuild-node":e.id,children:[m!==void 0&&(b?C(j,{as:"span",value:m,isEditable:b,nodeId:e.id,onChange:(y,h)=>p?.(e.id,"text",y,h)}):m),u]})}default:return null}}function Zn(r){let{node:e,domId:i,styles:o,resolvedProps:n,props:t,context:l,mode:f,handleClick:p}=r;switch(e.type){case"image":{let u=n.src!==void 0?n.src:t.src!==void 0?t.src:t.asset,d;qn(u)?d=Re(l?.assetProvider,u.assetId)||u.fallbackUrl:typeof u=="string"&&(d=Re(l?.assetProvider,u)||u);let s=typeof n.alt=="string"?n.alt:typeof t.alt=="string"?t.alt:"",a=typeof n.fit=="string"?n.fit:void 0,c=n.loading==="eager"?"eager":"lazy",m=typeof n.width=="number"?n.width:void 0,b=typeof n.height=="number"?n.height:void 0,y=d?Z(d,""):void 0,h={...o,...a?{objectFit:a}:{}};return C("img",{id:i,src:y,alt:s,role:s===""?"presentation":void 0,loading:c,width:m,height:b,style:h,onClick:p,"data-kubuild-node":e.id})}case"video":{let u=n.src??n.url??t.src??t.url,d=typeof u=="string"?u:void 0,s=typeof n.poster=="string"?n.poster:void 0,a=n.controls!==!1,c=n.autoplay===!0,m=n.loop===!0,b=n.muted===!0,y=n.playsInline!==!1,h=n.aspectRatio,v={position:"relative",width:o.width||"100%",...h?{aspectRatio:Ot(h)}:{},...o},x=d?At(d):null,g=d?Dt(d):null;if(x){let $=`https://www.youtube.com/embed/${x}?autoplay=${c?1:0}&loop=${m?1:0}&mute=${b?1:0}&controls=${a?1:0}`,S=Z($,"");return C("div",{id:i,"data-video-provider":"youtube",style:v,onClick:p,"data-kubuild-node":e.id,children:C("iframe",{src:S,title:"YouTube video player",style:{width:"100%",height:"100%",border:0},allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0})})}if(g){let $=`https://player.vimeo.com/video/${g}?autoplay=${c?1:0}&loop=${m?1:0}&muted=${b?1:0}`,S=Z($,"");return C("div",{id:i,"data-video-provider":"vimeo",style:v,onClick:p,"data-kubuild-node":e.id,children:C("iframe",{src:S,title:"Vimeo video player",style:{width:"100%",height:"100%",border:0},allow:"autoplay; fullscreen; picture-in-picture",allowFullScreen:!0})})}let w=d?Z(d,""):void 0,R=s?Z(s,""):void 0;return C("video",{id:i,src:w,poster:R,controls:a,autoPlay:c,loop:m,muted:b,playsInline:y,style:v,onClick:p,"data-kubuild-node":e.id})}case"icon":{let u=typeof n.name=="string"?n.name:"Square",d=typeof n.size=="number"?n.size:24,s=typeof n.color=="string"?n.color:"currentColor",a=typeof n.strokeWidth=="number"?n.strokeWidth:2,c=Ft(u),m=Vt[c]||Vt[u]||_n;return C("span",{id:i,"data-icon-name":u,style:{display:"inline-flex",alignItems:"center",justifyContent:"center",...o},onClick:p,"data-kubuild-node":e.id,children:C(m,{size:d,color:s,strokeWidth:a})})}case"html-embed":{let u=typeof n.html=="string"?n.html:"",s=n.sanitize!==!1?Wn(u):u;return!s.trim()&&f==="editor"?C("div",{id:i,style:{...o,minHeight:"60px",border:"1px dashed #94a3b8",borderRadius:"4px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"#f8fafc",color:"#64748b",fontSize:"0.875rem"},onClick:p,"data-kubuild-node":e.id,children:C("span",{children:"</> HTML Embed \u2014 Click to configure HTML code in Inspector Panel"})}):C(kt,{id:i,style:o,html:s,onClick:p,dataKubuildNode:e.id})}default:return null}}function Qn(r){let{node:e,domId:i,styles:o,resolvedProps:n,props:t,context:l,mode:f,document:p,onDiagnostic:u,onActionDispatch:d,handleClick:s,onNodePropChange:a,childrenElements:c}=r;switch(e.type){case"button":{let m=String(n.label??n.text??n.content??t.label??t.text??t.content??"Button"),b=typeof n.href=="string"?n.href:typeof t.href=="string"?t.href:void 0,y=typeof n.target=="string"?n.target:typeof t.target=="string"?t.target:void 0,h=n.buttonType??n.type??t.buttonType??t.type,v=typeof h=="string"&&["submit","reset","button"].includes(h)?h:"button",x=n.disabled===!0||t.disabled===!0,g=typeof n.ariaLabel=="string"?n.ariaLabel:void 0,w=f==="editor"&&!F(t.label)&&!F(t.text),R=typeof n.rel=="string"?n.rel:typeof t.rel=="string"?t.rel:y==="_blank"?"noopener noreferrer":void 0,$={};if(t.action&&!x){let S=typeof t.action=="object"?t.action.type:t.action;if($["data-kubuild-action"]=S,l?.actionRegistry){let E=Xe(l.actionRegistry,S);$["data-kubuild-action-resolved"]=E?"true":"false"}}if(b&&!x){let S=f==="editor"?void 0:Z(b,"#");return C("a",{id:i,href:S,target:y,rel:R,tabIndex:0,style:o,onClick:s,"data-kubuild-node":e.id,"aria-label":g,...$,children:m})}return w?C(j,{as:"button",id:i,type:f==="editor"?"button":v,disabled:x,"aria-disabled":x?!0:void 0,"aria-label":g,tabIndex:x?-1:0,style:o,value:m,isEditable:w,nodeId:e.id,onClick:x?void 0:s,onChange:(S,E)=>a?.(e.id,"label",S,E),...$}):C(It,{id:i,buttonType:f==="editor"?"button":v,disabled:x,ariaLabel:g,style:o,onClick:x?void 0:s,actions:e.actions,node:e,document:p,renderContext:l,onDiagnostic:u,onActionDispatch:d,dataKubuildNode:e.id,actionAttrs:$,children:m})}case"form":{let m=typeof n.action=="string"?n.action:void 0,b=typeof n.method=="string"?n.method:"POST",y=typeof n.target=="string"?n.target:void 0,h=typeof n.autoComplete=="string"?n.autoComplete:void 0,v=typeof n.name=="string"?n.name:void 0,x=e.formConfig,g={formId:x?.formId||t.formId||v||e.id,resetOnSubmit:n.resetOnSubmit===!0||(x?.resetOnSubmit??!1),scrollToFirstError:n.scrollToFirstError!==!1&&(x?.scrollToFirstError??!0),validateOn:n.validateOn||x?.validateOn||"blur",initialValues:n.initialValues||x?.initialValues};return C(ht,{formId:g.formId,formConfig:g,initialValues:g.initialValues,actions:e.actions,nodeId:e.id,document:p,onDiagnostic:u,children:C(wt,{id:i,name:v,action:m&&f!=="editor"?Z(m,""):void 0,method:b,target:y,autoComplete:h,style:o,onClick:s,mode:f,dataKubuildNode:e.id,children:c})})}case"input":{let m=typeof n.name=="string"?n.name:void 0,b=typeof n.type=="string"?n.type:"text",y=typeof n.placeholder=="string"?n.placeholder:void 0,h=n.defaultValue!==void 0?n.defaultValue:void 0,v=n.required===!0,x=n.disabled===!0,g=n.readOnly===!0,w=e.formConfig?.rules||n.rules||t.rules||[],R=n.validateOn||t.validateOn,$=n.transform||t.transform;return C(St,{id:i,name:m,type:b,placeholder:y,defaultValue:h,required:v,disabled:x,readOnly:g,rules:w,validateOn:R,transform:$,style:o,onClick:s,actions:e.actions,nodeId:e.id,document:p,renderContext:l,onDiagnostic:u,onActionDispatch:d,dataKubuildNode:e.id})}case"textarea":{let m=typeof n.name=="string"?n.name:void 0,b=typeof n.placeholder=="string"?n.placeholder:void 0,y=n.defaultValue!==void 0?n.defaultValue:void 0,h=typeof n.rows=="number"?n.rows:4,v=n.required===!0,x=n.disabled===!0,g=n.readOnly===!0,w=e.formConfig?.rules||n.rules||t.rules||[],R=n.validateOn||t.validateOn,$=n.transform||t.transform;return C(Tt,{id:i,name:m,placeholder:b,defaultValue:y,rows:h,required:v,disabled:x,readOnly:g,rules:w,validateOn:R,transform:$,style:o,onClick:s,actions:e.actions,nodeId:e.id,document:p,renderContext:l,onDiagnostic:u,onActionDispatch:d,dataKubuildNode:e.id})}case"select":{let m=typeof n.name=="string"?n.name:void 0,b=typeof n.placeholder=="string"?n.placeholder:void 0,y=n.defaultValue!==void 0?n.defaultValue:void 0,h=n.required===!0,v=n.disabled===!0,x=e.formConfig?.rules||n.rules||t.rules||[],g=n.validateOn||t.validateOn,w=[],R=n.options??t.options;if(Array.isArray(R))w=R.map($=>{if(typeof $=="object"&&$!==null){let S=$;return{label:String(S.label??S.value??""),value:String(S.value??S.label??"")}}return{label:String($),value:String($)}});else if(typeof R=="string")try{let $=JSON.parse(R);Array.isArray($)&&(w=$.map(S=>{if(typeof S=="object"&&S!==null){let E=S;return{label:String(E.label??E.value??""),value:String(E.value??E.label??"")}}return{label:String(S),value:String(S)}}))}catch{}return C(Et,{id:i,name:m,placeholder:b,defaultValue:y,required:h,disabled:v,rules:x,validateOn:g,optionsList:w,style:o,onClick:s,actions:e.actions,nodeId:e.id,document:p,renderContext:l,onDiagnostic:u,onActionDispatch:d,dataKubuildNode:e.id})}case"checkbox":{let m=typeof n.name=="string"?n.name:void 0,b=String(n.label??"Checkbox"),y=n.value!==void 0?String(n.value):"yes",h=n.defaultChecked===!0,v=n.required===!0,x=n.disabled===!0,g=e.formConfig?.rules||n.rules||t.rules||[],w=n.validateOn||t.validateOn,R=f==="editor"&&!F(t.label);return C(Pt,{id:i,name:m,label:b,value:y,defaultChecked:h,required:v,disabled:x,rules:g,validateOn:w,style:o,onClick:s,actions:e.actions,nodeId:e.id,document:p,renderContext:l,onDiagnostic:u,onActionDispatch:d,dataKubuildNode:e.id,isEditable:R,onNodePropChange:a})}case"radio":{let m=typeof n.name=="string"?n.name:void 0,b=String(n.label??"Radio"),y=n.value!==void 0?String(n.value):"option",h=n.defaultChecked===!0,v=n.required===!0,x=n.disabled===!0,g=n.rules||t.rules||[],w=n.validateOn||t.validateOn,R=f==="editor"&&!F(t.label);return C(Nt,{id:i,name:m,label:b,value:y,defaultChecked:h,required:v,disabled:x,rules:g,validateOn:w,style:o,onClick:s,actions:e.actions,nodeId:e.id,document:p,renderContext:l,onDiagnostic:u,onActionDispatch:d,dataKubuildNode:e.id,isEditable:R,onNodePropChange:a})}default:return null}}function eo(r){let{node:e,domId:i,styles:o,props:n,context:t,mode:l,handleClick:f,onDiagnostic:p,renderChildNode:u}=r;if(e.type!=="collection")return null;let d=typeof n.sourceKey=="string"?n.sourceKey:void 0,s=typeof n.itemAlias=="string"&&n.itemAlias.length>0?n.itemAlias:"item",a=`${s}Index`,c=d?Un({key:d},t).value:void 0;if(!Array.isArray(c)){let b={code:"INVALID_COLLECTION_SOURCE",nodeId:e.id,propName:"sourceKey",message:`Collection node "${e.id}" expected an array at variable path "${d??"(missing sourceKey)"}" but found ${c===void 0?"nothing":typeof c}.`};return p?.(b),t?.onDiagnostic?.(b),l==="editor"?U("div",{id:i,"data-kubuild-node":e.id,"data-kubuild-collection-invalid":e.type,style:{...o,border:"2px dashed #f59e0b",backgroundColor:"#fffbeb",padding:"12px",color:"#b45309",fontSize:"0.875rem",borderRadius:"4px"},onClick:f,children:[U("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"8px"},children:[C(zn,{size:16}),C("strong",{children:"Collection: expected an array"})]}),U("div",{children:["Source path ",C("code",{children:d??"(none)"})," did not resolve to an array. Found"," ",C("code",{children:c===void 0?"nothing":typeof c}),"."]})]}):C("div",{id:i,"data-kubuild-node":e.id,style:{display:"contents"},"data-kubuild-empty-collection":"invalid-source"})}let m=e.children||[];return m.length===0||c.length===0?C("div",{id:i,style:o,onClick:f,"data-kubuild-node":e.id,"data-kubuild-collection-empty":c.length===0?"true":void 0,children:c.length===0&&l==="editor"&&U("div",{style:{padding:"12px",border:"1px dashed #cbd5e1",borderRadius:"4px",color:"#94a3b8",fontSize:"0.875rem",textAlign:"center"},children:["Empty Collection (",C("code",{children:d})," has 0 items)"]})}):C("div",{id:i,style:o,onClick:f,"data-kubuild-node":e.id,children:c.map((b,y)=>{let h={...t,variables:{...t.variables,[s]:b,[a]:y}},v=`__iter_${y}`;return C(Ln.Fragment,{children:m.map(x=>u(x,v,h))},`collection-item-${y}`)})})}function to(r){let{node:e,domId:i,styles:o,handleClick:n,mode:t,childrenElements:l}=r;return t==="editor"?U("div",{id:i,style:{...o,border:"2px dashed #e2e8f0",padding:"16px",backgroundColor:"#f8fafc"},onClick:n,"data-kubuild-node":e.id,"data-kubuild-unknown":e.type,children:[U("div",{style:{display:"flex",alignItems:"center",gap:"8px",color:"#64748b"},children:[C(jn,{size:16}),U("span",{children:["Unknown Component: ",e.type]}),U("span",{style:{fontSize:"12px",color:"#94a3b8"},children:["(",e.id,")"]})]}),l]}):C("div",{id:i,style:o,onClick:n,"data-kubuild-node":e.id,"data-kubuild-unknown":e.type,children:l})}function Mt(r){let e=Kn(r);if(e)return e;let i=Yn(r);if(i)return i;let o=Xn(r);if(o)return o;let n=Gn(r);if(n)return n;let t=Jn(r);if(t)return t;let l=Zn(r);if(l)return l;let f=Qn(r);if(f)return f;let p=eo(r);return p||to(r)}import{jsx as W,jsxs as ce}from"react/jsx-runtime";function Ie({node:r,document:e,registry:i,context:o,viewport:n="desktop",mode:t="runtime",onNodeClick:l,onDiagnostic:f,onActionDispatch:p,onNodePropChange:u,instanceSuffix:d=""}){let s=o||ie,a=Je(r.styles,n),c=r.props||{},m=i.get(r.type),b=d?`${r.id}${d}`:r.id,{props:y,diagnostics:h}=tt(r,m,s);h.forEach(R=>{f?.(R),s?.onDiagnostic?.(R)}),$t(r,{document:e,context:s,onDiagnostic:f,onActionDispatch:p,mode:t});let v=async R=>{R.stopPropagation(),l&&l(r.id,R),r.actions&&r.actions.length>0&&!c.disabled&&await D({node:r,trigger:"click",document:e,context:s,onDiagnostic:f,onActionDispatch:p}),c.action&&!c.disabled&&(Ge({action:c.action,nodeId:r.id,document:e,context:s,onDiagnostic:f}),p&&no(c.action)&&p(c.action.type,Ye(s,c.action.payload),r.id))},x=r.children?.map(R=>W(Ie,{node:R,document:e,registry:i,context:s,viewport:n,mode:t,onNodeClick:l,onDiagnostic:f,onActionDispatch:p,onNodePropChange:u,instanceSuffix:d},`${R.id}${d}`)),g=(R,$="",S=s)=>W(Ie,{node:R,document:e,registry:i,context:S,viewport:n,mode:t,onNodeClick:l,onDiagnostic:f,onActionDispatch:p,onNodePropChange:u,instanceSuffix:`${d}${$}`},`${R.id}${d}${$}`),w;try{w=Mt({node:r,document:e,registry:i,context:s,viewport:n,mode:t,styles:a,props:c,resolvedProps:y,definition:m,domId:b,childrenElements:x,handleClick:v,onNodeClick:l,onDiagnostic:f,onActionDispatch:p,onNodePropChange:u,instanceSuffix:d,renderChildNode:g})}catch(R){t==="editor"?w=ce("div",{"data-kubuild-node":r.id,"data-kubuild-error":r.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:[ce("div",{style:{fontWeight:600,marginBottom:"4px",display:"flex",alignItems:"center",gap:"6px"},children:[W(ro,{size:14,"aria-hidden":"true"}),ce("span",{children:["Component Render Error: <",r.type,">"]})]}),ce("div",{style:{fontSize:"11px",color:"#7f1d1d",wordBreak:"break-all"},children:["Node ID: ",W("code",{children:r.id})," \u2014 ",R instanceof Error?R.message:String(R)]})]}):w=W("div",{"data-kubuild-node":r.id,"data-kubuild-error":r.type,style:{display:"none"},"aria-hidden":"true"})}return W(be,{nodeId:r.id,componentType:r.type,mode:t,onDiagnostic:f,children:w})}var Ht=({document:r,registry:e=oo(),context:i,viewport:o="desktop",mode:n="runtime",className:t,showToastContainer:l=!0,onNodeClick:f,onDiagnostic:p,onActionDispatch:u,onNodePropChange:d})=>!r||!r.document?W("div",{className:t,children:"Empty Document"}):W(ze,{value:i,children:ce("div",{className:`kubuild-canvas-root ${t||""}`,children:[(()=>{let s=Ze(r);return s?W("style",{"data-kubuild-state-styles":!0,children:s}):null})(),(()=>{let s=me(r);return s?W("style",{"data-kubuild-animation-styles":!0,children:s}):null})(),W(Ie,{node:r.document,document:r,registry:e,context:i,viewport:o,mode:n,onNodeClick:f,onDiagnostic:p,onActionDispatch:u,onNodePropChange:d}),l&&W(ft,{})]})});import{useMemo as Fe}from"react";import{jsx as ee,jsxs as ve}from"react/jsx-runtime";var Bt=Object.freeze({desktop:{width:"100%",maxWidth:"1280px",minHeight:"600px",label:"Desktop (1280px)",isFluid:!0},tablet:{width:"768px",height:"1024px",minHeight:"600px",label:"Tablet (768 \xD7 1024)",isFluid:!1},mobile:{width:"375px",height:"667px",minHeight:"500px",label:"Mobile (375 \xD7 667)",isFluid:!1}}),io=Object.freeze({mobile:480,tablet:768,desktop:1024});function Ai(r,e){let i={...io,...e};return r<=i.mobile?"mobile":r<=i.tablet?"tablet":"desktop"}function Lt(r,e){let i=Bt[r]||Bt.desktop,o=e?.[r];return{...i,...o}}function so(r,e,i){let o=Lt(r,e),n=i??o.scale??1,t=f=>typeof f=="number"?`${f}px`:f,l={width:t(o.width),maxWidth:t(o.maxWidth),minWidth:t(o.minWidth),height:t(o.height),minHeight:t(o.minHeight),maxHeight:t(o.maxHeight),aspectRatio:o.aspectRatio,transition:"width 0.2s ease, max-width 0.2s ease, height 0.2s ease"};return n!==1&&(l.transform=`scale(${n})`,l.transformOrigin="top center"),l}var ao=({document:r,viewport:e="desktop",onViewportChange:i,viewportConfigs:o,breakpoints:n,registry:t,context:l,mode:f="runtime",showChrome:p=!1,chromeTitle:u,editorOverlay:d,scale:s,className:a,style:c,canvasClassName:m,canvasStyle:b,onNodeClick:y,onDiagnostic:h,onActionDispatch:v})=>{let x=Fe(()=>Lt(e,o),[e,o]),g=Fe(()=>so(e,o,s),[e,o,s]),w=Fe(()=>({...g,...b,position:"relative",boxSizing:"border-box"}),[g,b]);return ve("div",{"data-kubuild-preview-container":!0,"data-viewport":e,className:`kubuild-preview-viewport-adapter ${a||""}`,style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",width:"100%",height:"100%",boxSizing:"border-box",...c},children:[p&&ve("div",{"data-kubuild-preview-chrome":!0,style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",maxWidth:g.maxWidth||g.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:[ve("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[ee("span",{style:{fontWeight:600},children:u||r.metadata?.title||"Preview"}),ee("span",{"data-testid":"viewport-badge",style:{fontSize:"10px",padding:"2px 6px",borderRadius:"4px",backgroundColor:"#334155",color:"#94a3b8",textTransform:"uppercase",fontWeight:700},children:e}),ee("span",{style:{fontSize:"11px",color:"#64748b"},children:x.label||`${x.width} \xD7 ${x.height||"auto"}`})]}),i&&ee("div",{"data-testid":"viewport-switcher",style:{display:"flex",gap:"4px",backgroundColor:"#0f172a",padding:"2px",borderRadius:"6px"},children:["desktop","tablet","mobile"].map(R=>{let $=e===R;return ee("button",{type:"button","data-testid":`viewport-btn-${R}`,onClick:()=>i(R),style:{padding:"4px 10px",fontSize:"11px",fontWeight:500,borderRadius:"4px",border:"none",cursor:"pointer",textTransform:"capitalize",backgroundColor:$?"#3b82f6":"transparent",color:$?"#ffffff":"#94a3b8",transition:"all 0.15s ease"},children:R},R)})})]}),ve("div",{"data-kubuild-preview-canvas":!0,"data-viewport":e,className:`kubuild-preview-canvas ${m||""}`,style:w,children:[ee(Ht,{document:r,registry:t,context:l,viewport:e,mode:f,onNodeClick:y,onDiagnostic:h,onActionDispatch:v}),d&&ee("div",{"data-kubuild-preview-overlay":!0,style:{position:"absolute",top:0,left:0,right:0,bottom:0,pointerEvents:"none",zIndex:10},children:d})]})]})},Di=ao;function A(r){return r==null?"":String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function T(r){return A(r)}function lo(r){if(!r||typeof r!="string")return null;let e=r.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i);return e?e[1]:null}function co(r){if(!r||typeof r!="string")return null;let e=r.match(/(?:vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|))(\d+)/i);return e?e[3]:null}function q(r,e,i){let o=" ".repeat(e*(i.indentSize??2)),n=" ".repeat((e+1)*(i.indentSize??2)),t=r.props||{},l=r.children||[],p=i.includeNodeClasses!==!1?`kb-node-${r.id}`:"",u=(...s)=>s.filter(Boolean).join(" "),d=t.id?` id="${T(t.id)}"`:"";switch(r.type){case"page":{let s=i.rootTag||"main",a=u("kb-page",p),c=l.map(m=>q(m,e+1,i)).join(`
121
+ `);return c?`${o}<${s} class="${a}"${d}>
122
+ ${c}
123
+ ${o}</${s}>`:`${o}<${s} class="${a}"${d}></${s}>`}case"section":{let s=t.ariaLabel?` aria-label="${T(t.ariaLabel)}"`:"",a=u("kb-section",p),c=l.map(m=>q(m,e+1,i)).join(`
124
+ `);return c?`${o}<section class="${a}"${d}${s}>
125
+ ${c}
126
+ ${o}</section>`:`${o}<section class="${a}"${d}${s}></section>`}case"container":{let s=u("kb-container",p),a=l.map(c=>q(c,e+1,i)).join(`
127
+ `);return a?`${o}<div class="${s}"${d}>
128
+ ${a}
129
+ ${o}</div>`:`${o}<div class="${s}"${d}></div>`}case"columns":{let s=u("kb-columns",p),a=l.map(c=>q(c,e+1,i)).join(`
130
+ `);return a?`${o}<div class="${s}"${d}>
131
+ ${a}
132
+ ${o}</div>`:`${o}<div class="${s}"${d}></div>`}case"heading":{let s="h2";typeof t.level=="string"&&/^h[1-6]$/i.test(t.level)?s=t.level.toLowerCase():typeof t.level=="number"&&t.level>=1&&t.level<=6?s=`h${t.level}`:typeof t.tag=="string"&&/^h[1-6]$/i.test(t.tag)&&(s=t.tag.toLowerCase());let a=t.text??t.value??t.content??"Heading",c=u("kb-heading",p);return`${o}<${s} class="${c}"${d}>${A(a)}</${s}>`}case"paragraph":{let s=t.text??t.value??t.content??"",a=u("kb-paragraph",p);return`${o}<p class="${a}"${d}>${A(s)}</p>`}case"text":{let s=t.as||"p",a=t.text??t.value??t.content??"",c=u("kb-text",p);return`${o}<${s} class="${c}"${d}>${A(a)}</${s}>`}case"link":{let s=t.href?` href="${T(t.href)}"`:' href="#"',a=t.target?` target="${T(t.target)}"`:"",c=t.rel?` rel="${T(t.rel)}"`:a.includes("_blank")?' rel="noopener noreferrer"':"",m=t.text??t.label??t.value,b=u("kb-link",p);if(l.length>0){let y=l.map(h=>q(h,e+1,i)).join(`
133
+ `);return`${o}<a class="${b}"${d}${s}${a}${c}>
134
+ ${y}
135
+ ${o}</a>`}return`${o}<a class="${b}"${d}${s}${a}${c}>${A(m??"Link")}</a>`}case"blockquote":{let s=t.cite?` cite="${T(t.cite)}"`:"",a=t.quote??t.text??t.value,c=t.author??t.citeAuthor,m=u("kb-blockquote",p);if(a||c){let b=a?`${n}<p>${A(a)}</p>`:"",y=c?`${n}<cite>${A(c)}</cite>`:"",h=[b,y].filter(Boolean).join(`
136
+ `);return`${o}<blockquote class="${m}"${d}${s}>
137
+ ${h}
138
+ ${o}</blockquote>`}if(l.length>0){let b=l.map(y=>q(y,e+1,i)).join(`
139
+ `);return`${o}<blockquote class="${m}"${d}${s}>
140
+ ${b}
141
+ ${o}</blockquote>`}return`${o}<blockquote class="${m}"${d}${s}></blockquote>`}case"badge":{let s=t.text??t.label??t.value??"Badge",a=u("kb-badge",p);return`${o}<span class="${a}"${d}>${A(s)}</span>`}case"code-block":{let s=t.code??t.text??t.value??"",a=t.language||t.lang,c=a?` class="language-${T(a)}"`:"",m=u("kb-code-block",p);return`${o}<pre class="${m}"${d}><code${c}>${A(s)}</code></pre>`}case"divider":{let s=u("kb-divider",p),a=t.text??t.label;return a?`${o}<div class="${s}"${d} role="separator"><span>${A(a)}</span></div>`:`${o}<hr class="${s}"${d} />`}case"spacer":{let s=u("kb-spacer",p);return`${o}<div class="${s}"${d} aria-hidden="true"></div>`}case"image":{let s=t.src?` src="${T(t.src)}"`:' src=""',a=t.alt?` alt="${T(t.alt)}"`:' alt=""',c=t.loading?` loading="${T(t.loading)}"`:' loading="lazy"',m=u("kb-image",p);return`${o}<img class="${m}"${d}${s}${a}${c} />`}case"video":{let s=t.src||"",a=lo(s),c=co(s),m=u("kb-video",p);if(a)return`${o}<div class="kb-video-wrapper ${p}"${d}>
142
+ ${n}<iframe src="https://www.youtube-nocookie.com/embed/${T(a)}" title="${T(t.title||"Video player")}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
143
+ ${o}</div>`;if(c)return`${o}<div class="kb-video-wrapper ${p}"${d}>
144
+ ${n}<iframe src="https://player.vimeo.com/video/${T(c)}" title="${T(t.title||"Video player")}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
145
+ ${o}</div>`;let b=t.poster?` poster="${T(t.poster)}"`:"",y=t.controls!==!1?" controls":"",h=t.autoplay?" autoplay":"",v=t.loop?" loop":"",x=t.muted?" muted":"",g=s?` src="${T(s)}"`:"";return`${o}<video class="${m}"${d}${g}${b}${y}${h}${v}${x}></video>`}case"icon":{let s=t.name||t.icon||"star",a=t.ariaLabel?` aria-label="${T(t.ariaLabel)}"`:' aria-hidden="true"',c=u("kb-icon",p);return`${o}<span class="${c}"${d}${a} data-icon="${T(s)}"></span>`}case"html-embed":{let s=t.html??t.content??"",a=u("kb-html-embed",p);return s?`${o}<div class="${a}"${d}>
146
+ ${n}${s}
147
+ ${o}</div>`:`${o}<div class="${a}"${d}></div>`}case"button":{let s=t.label??t.text??t.value??"Button",a=t.type?` type="${T(t.type)}"`:' type="button"',c=t.disabled?" disabled":"",m=u("kb-button",p);if(t.href){let b=` href="${T(t.href)}"`,y=t.target?` target="${T(t.target)}"`:"";return`${o}<a class="${m}"${d}${b}${y}>${A(s)}</a>`}return`${o}<button class="${m}"${d}${a}${c}>${A(s)}</button>`}case"form":{let s=t.action?` action="${T(t.action)}"`:"",a=t.method?` method="${T(t.method)}"`:' method="POST"',c=u("kb-form",p),m=l.map(b=>q(b,e+1,i)).join(`
148
+ `);return m?`${o}<form class="${c}"${d}${s}${a}>
149
+ ${m}
150
+ ${o}</form>`:`${o}<form class="${c}"${d}${s}${a}></form>`}case"input":{let s=t.type?` type="${T(t.type)}"`:' type="text"',a=t.name?` name="${T(t.name)}"`:"",c=t.placeholder?` placeholder="${T(t.placeholder)}"`:"",m=t.value!==void 0?` value="${T(t.value)}"`:"",b=t.required?" required":"",y=t.disabled?" disabled":"",h=u("kb-input",p);return`${o}<input class="${h}"${d}${s}${a}${c}${m}${b}${y} />`}case"textarea":{let s=t.name?` name="${T(t.name)}"`:"",a=t.placeholder?` placeholder="${T(t.placeholder)}"`:"",c=t.rows?` rows="${T(t.rows)}"`:' rows="4"',m=t.value??t.defaultValue??"",b=t.required?" required":"",y=t.disabled?" disabled":"",h=u("kb-textarea",p);return`${o}<textarea class="${h}"${d}${s}${a}${c}${b}${y}>${A(m)}</textarea>`}case"select":{let s=t.name?` name="${T(t.name)}"`:"",a=t.required?" required":"",c=t.disabled?" disabled":"",m=u("kb-select",p),b=Array.isArray(t.options)?t.options:[],y=" ".repeat((e+1)*(i.indentSize??2)),h=b.map(v=>{let x=typeof v=="object"?v.value:v,g=typeof v=="object"?v.label:v,w=t.value===x||t.defaultValue===x?" selected":"";return`${y}<option value="${T(x)}"${w}>${A(g)}</option>`}).join(`
151
+ `);return h?`${o}<select class="${m}"${d}${s}${a}${c}>
152
+ ${h}
153
+ ${o}</select>`:`${o}<select class="${m}"${d}${s}${a}${c}></select>`}case"checkbox":{let s=t.name?` name="${T(t.name)}"`:"",a=t.checked||t.defaultChecked?" checked":"",c=t.label??t.text??"",m=u("kb-checkbox-label",p);return`${o}<label class="${m}"${d}><input type="checkbox"${s}${a} /><span>${A(c)}</span></label>`}case"radio":{let s=t.name?` name="${T(t.name)}"`:"",a=t.value?` value="${T(t.value)}"`:"",c=t.checked||t.defaultChecked?" checked":"",m=t.label??t.text??"",b=u("kb-radio-label",p);return`${o}<label class="${b}"${d}><input type="radio"${s}${a}${c} /><span>${A(m)}</span></label>`}case"list":{let s=t.tag==="ol"||t.type==="ol"||t.ordered?"ol":"ul",a=u("kb-list",p),c=l.map(m=>q(m,e+1,i)).join(`
154
+ `);return c?`${o}<${s} class="${a}"${d}>
155
+ ${c}
156
+ ${o}</${s}>`:`${o}<${s} class="${a}"${d}></${s}>`}case"list-item":{let s=t.text??t.value,a=u("kb-list-item",p);if(l.length>0){let c=l.map(m=>q(m,e+1,i)).join(`
157
+ `);return`${o}<li class="${a}"${d}>
158
+ ${c}
159
+ ${o}</li>`}return`${o}<li class="${a}"${d}>${A(s??"List item")}</li>`}case"table":{let s=u("kb-table",p),a=l.map(c=>q(c,e+1,i)).join(`
160
+ `);return a?`${o}<table class="${s}"${d}>
161
+ ${a}
162
+ ${o}</table>`:`${o}<table class="${s}"${d}></table>`}case"table-row":{let s=u("kb-table-row",p),a=l.map(c=>q(c,e+1,i)).join(`
163
+ `);return a?`${o}<tr class="${s}"${d}>
164
+ ${a}
165
+ ${o}</tr>`:`${o}<tr class="${s}"${d}></tr>`}case"table-cell":{let a=t.isHeader||t.type==="header"||t.tag==="th"?"th":"td",c=t.colSpan&&Number(t.colSpan)>1?` colspan="${T(t.colSpan)}"`:"",m=t.rowSpan&&Number(t.rowSpan)>1?` rowspan="${T(t.rowSpan)}"`:"",b=t.text??t.value??"",y=u("kb-table-cell",p);if(l.length>0){let h=l.map(v=>q(v,e+1,i)).join(`
166
+ `);return`${o}<${a} class="${y}"${d}${c}${m}>
167
+ ${h}
168
+ ${o}</${a}>`}return`${o}<${a} class="${y}"${d}${c}${m}>${A(b)}</${a}>`}case"collection":{let s=u("kb-collection",p),a=l.map(c=>q(c,e+1,i)).join(`
169
+ `);return a?`${o}<div class="${s}"${d}>
170
+ ${a}
171
+ ${o}</div>`:`${o}<div class="${s}"${d}></div>`}default:{let s=u(`kb-${r.type}`,p),a=l.map(c=>q(c,e+1,i)).join(`
172
+ `);return a?`${o}<div class="${s}"${d}>
173
+ ${a}
174
+ ${o}</div>`:`${o}<div class="${s}"${d}></div>`}}}function uo(r,e={}){let i="document"in r?r.document:r;return i?q(i,0,e):""}function xe(r,e,i=""){if(!e.trim())return"";let o=e.split(";").map(t=>t.trim()).filter(Boolean);if(o.length===0)return"";let n=o.map(t=>`${i} ${t};`).join(`
175
+ `);return`${i}${r} {
176
+ ${n}
177
+ ${i}}`}function po(r,e={}){let i="document"in r?r.document:r;if(!i)return"";let o=e.classPrefix||"kb-node-",n=[],t=[],l=[],f=[],p=a=>{let c=`.${o}${a.id}`;if(a.styles){let m={...a.styles.base||{},...a.styles.desktop||{}},b=te(m);if(b&&n.push(xe(c,b)),a.styles.tablet){let y=te(a.styles.tablet);y&&t.push(xe(c,y," "))}if(a.styles.mobile){let y=te(a.styles.mobile);y&&l.push(xe(c,y," "))}if(a.styles.states&&typeof a.styles.states=="object")for(let[y,h]of Object.entries(a.styles.states)){if(!h)continue;let v=/^::?[a-zA-Z-]+$/.test(y)?y:null;if(!v)continue;let x=te(h);x&&f.push(xe(`${c}${v}`,x))}}a.children?.forEach(p)};p(i);let u=[];e.includeReset!==!1&&u.push(`/* ==========================================================================
2645
178
  Baseline Reset & Typography Standards
2646
179
  ========================================================================== */
2647
- ${DEFAULT_CSS_RESET}`);
2648
- }
2649
- if (baseRules.length > 0) {
2650
- sections.push(`/* ==========================================================================
180
+ ${Qe}`),n.length>0&&u.push(`/* ==========================================================================
2651
181
  Component Styles
2652
182
  ========================================================================== */
2653
- ${baseRules.join("\n\n")}`);
2654
- }
2655
- if (stateRules.length > 0) {
2656
- sections.push(`/* ==========================================================================
183
+ ${n.join(`
184
+
185
+ `)}`),f.length>0&&u.push(`/* ==========================================================================
2657
186
  Interactive & Hover States
2658
187
  ========================================================================== */
2659
- ${stateRules.join("\n\n")}`);
2660
- }
2661
- if (tabletRules.length > 0) {
2662
- sections.push(`/* ==========================================================================
188
+ ${f.join(`
189
+
190
+ `)}`),t.length>0&&u.push(`/* ==========================================================================
2663
191
  Tablet Breakpoint (max-width: 1024px)
2664
192
  ========================================================================== */
2665
193
  @media (max-width: 1024px) {
2666
- ${tabletRules.join("\n\n")}
2667
- }`);
2668
- }
2669
- if (mobileRules.length > 0) {
2670
- sections.push(`/* ==========================================================================
194
+ ${t.join(`
195
+
196
+ `)}
197
+ }`),l.length>0&&u.push(`/* ==========================================================================
2671
198
  Mobile Breakpoint (max-width: 640px)
2672
199
  ========================================================================== */
2673
200
  @media (max-width: 640px) {
2674
- ${mobileRules.join("\n\n")}
2675
- }`);
2676
- }
2677
- const pageDoc = "document" in docOrNode ? docOrNode : { schema: "stora.page", version: "1.0.0", document: rootNode };
2678
- const animStyles = collectAnimationStylesCss(pageDoc);
2679
- if (animStyles) {
2680
- sections.push(`/* ==========================================================================
201
+ ${l.join(`
202
+
203
+ `)}
204
+ }`);let d="document"in r?r:{schema:"stora.page",version:"1.0.0",document:i},s=me(d);return s&&u.push(`/* ==========================================================================
2681
205
  Animations & Motion Keyframes
2682
206
  ========================================================================== */
2683
- ${animStyles}`);
2684
- }
2685
- return sections.join("\n\n");
2686
- }
2687
- function generateStandaloneHtml(doc, options = {}) {
2688
- const title = escapeHtml(doc.metadata?.title || "KUBUILD Page");
2689
- const description = doc.metadata?.description ? escapeAttr(doc.metadata.description) : "";
2690
- const author = doc.metadata?.author ? escapeAttr(doc.metadata.author) : "";
2691
- const lang = options.lang || "en";
2692
- const css = generateDocumentCss(doc, options.cssOptions);
2693
- const html = generateSemanticHtml(doc, options.htmlOptions);
2694
- const metaDescription = description ? ` <meta name="description" content="${description}">
2695
- ` : "";
2696
- const metaAuthor = author ? ` <meta name="author" content="${author}">
2697
- ` : "";
2698
- return `<!DOCTYPE html>
2699
- <html lang="${lang}">
207
+ ${s}`),u.join(`
208
+
209
+ `)}function Bi(r,e={}){let i=A(r.metadata?.title||"KUBUILD Page"),o=r.metadata?.description?T(r.metadata.description):"",n=r.metadata?.author?T(r.metadata.author):"",t=e.lang||"en",l=po(r,e.cssOptions),f=uo(r,e.htmlOptions),p=o?` <meta name="description" content="${o}">
210
+ `:"",u=n?` <meta name="author" content="${n}">
211
+ `:"";return`<!DOCTYPE html>
212
+ <html lang="${t}">
2700
213
  <head>
2701
214
  <meta charset="UTF-8">
2702
215
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
2703
- <title>${title}</title>
2704
- ${metaDescription}${metaAuthor} <style>
2705
- ${css}
216
+ <title>${i}</title>
217
+ ${p}${u} <style>
218
+ ${l}
2706
219
  </style>
2707
220
  </head>
2708
221
  <body>
2709
- ${html}
222
+ ${f}
2710
223
  </body>
2711
- </html>`;
2712
- }
2713
- export {
2714
- ANIMATION_KEYFRAMES_CSS,
2715
- ComponentErrorBoundary,
2716
- DEFAULT_BREAKPOINTS,
2717
- DEFAULT_CSS_RESET,
2718
- DEFAULT_RENDER_CONTEXT,
2719
- DEFAULT_VIEWPORT_CONFIGS,
2720
- EditableText,
2721
- HtmlEmbedView,
2722
- KubuildPreviewViewport,
2723
- KubuildRenderer,
2724
- NodeRenderer,
2725
- PreviewViewportAdapter,
2726
- RenderContextProvider,
2727
- collectAnimationStylesCss,
2728
- collectStateStylesCss,
2729
- createMinimalRenderContext,
2730
- createRenderContext,
2731
- dispatchAction,
2732
- generateDocumentCss,
2733
- generateSemanticHtml,
2734
- generateStandaloneHtml,
2735
- getEntranceAnimationCss,
2736
- getHoverEffectCss,
2737
- getLoopEffectCss,
2738
- isActionRegistered,
2739
- replayNodeAnimation,
2740
- resolveActionPayload,
2741
- resolveActionPayloadDetailed,
2742
- resolveAssetSync,
2743
- resolveNodeStyles,
2744
- resolveVariable,
2745
- resolveViewportContainerStyle,
2746
- resolveViewportDimensions,
2747
- resolveViewportFromWidth,
2748
- styleDefinitionToCssDeclarations,
2749
- transformEmbedHtml,
2750
- useRenderContext
2751
- };
2752
- //# sourceMappingURL=index.js.map
224
+ </html>`}export{Gt as ANIMATION_KEYFRAMES_CSS,J as ApiRequestError,be as ComponentErrorBoundary,io as DEFAULT_BREAKPOINTS,Qe as DEFAULT_CSS_RESET,ie as DEFAULT_RENDER_CONTEXT,Bt as DEFAULT_VIEWPORT_CONFIGS,j as EditableText,Pt as FormCheckboxNode,wt as FormContainerNode,St as FormInputNode,Nt as FormRadioNode,Ne as FormRuntimeContext,ht as FormRuntimeProvider,Et as FormSelectNode,It as FormSubmitButtonNode,Tt as FormTextareaNode,kt as HtmlEmbedView,Di as KubuildPreviewViewport,Ht as KubuildRenderer,Ee as ModalManager,Ie as NodeRenderer,ao as PreviewViewportAdapter,ze as RenderContextProvider,Cn as ToastCard,ft as ToastContainer,Se as ToastManager,nt as apiRequestRunner,Ot as aspectRatioToCss,ln as buildApiUrl,lt as closeModalRunner,me as collectAnimationStylesCss,Ze as collectStateStylesCss,ct as copyClipboardRunner,gn as copyToClipboard,we as createApiRequestHandler,wn as createDefaultActionRunners,vo as createMinimalRenderContext,Wt as createRenderContext,Ge as dispatchAction,D as executeNodeActions,po as generateDocumentCss,uo as generateSemanticHtml,Bi as generateStandaloneHtml,Qt as getEntranceAnimationCss,Jt as getHoverEffectCss,Zt as getLoopEffectCss,Dt as getVimeoId,At as getYouTubeId,Xe as isActionRegistered,se as modalManager,dt as navigateRunner,at as openModalRunner,dn as prepareRequestBody,ye as registerDefaultActionRunners,eo as renderCollectionNode,Kn as renderCustomComponent,to as renderFallbackNode,Qn as renderFormNode,Yn as renderLayoutNode,Gn as renderListNode,Zn as renderMediaNode,Mt as renderNodeContent,Jn as renderTableNode,Xn as renderTypographyNode,Co as replayNodeAnimation,ut as resetFormRunner,Ye as resolveActionPayload,Ke as resolveActionPayloadDetailed,Re as resolveAssetSync,Je as resolveNodeStyles,We as resolveVariable,so as resolveViewportContainerStyle,Lt as resolveViewportDimensions,Ai as resolveViewportFromWidth,st as showToastRunner,te as styleDefinitionToCssDeclarations,Ft as toPascalCase,Q as toastManager,Mn as transformEmbedHtml,$r as useFormContext,Sr as useFormField,X as useFormRuntime,wr as useFormStatus,Yo as useModal,Xo as useModals,$t as useNodeLoadActions,Ue as useRenderContext,ot as useToasts};