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