@kubuild/renderer 0.0.1 → 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 (53) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +105 -0
  3. package/dist/action-dispatcher.d.ts +42 -0
  4. package/dist/action-dispatcher.d.ts.map +1 -0
  5. package/dist/action-runners/api-request.d.ts +77 -0
  6. package/dist/action-runners/api-request.d.ts.map +1 -0
  7. package/dist/action-runners/index.d.ts +24 -0
  8. package/dist/action-runners/index.d.ts.map +1 -0
  9. package/dist/action-runners/modal-manager.d.ts +68 -0
  10. package/dist/action-runners/modal-manager.d.ts.map +1 -0
  11. package/dist/action-runners/navigation-utils.d.ts +49 -0
  12. package/dist/action-runners/navigation-utils.d.ts.map +1 -0
  13. package/dist/action-runners/toast-container.d.ts +20 -0
  14. package/dist/action-runners/toast-container.d.ts.map +1 -0
  15. package/dist/action-runners/toast-manager.d.ts +74 -0
  16. package/dist/action-runners/toast-manager.d.ts.map +1 -0
  17. package/dist/action-runners/ui-feedback.d.ts +33 -0
  18. package/dist/action-runners/ui-feedback.d.ts.map +1 -0
  19. package/dist/animation.d.ts +26 -0
  20. package/dist/animation.d.ts.map +1 -0
  21. package/dist/code-generator.d.ts +47 -0
  22. package/dist/code-generator.d.ts.map +1 -0
  23. package/dist/error-boundary.d.ts +2 -0
  24. package/dist/error-boundary.d.ts.map +1 -1
  25. package/dist/form-context.d.ts +114 -0
  26. package/dist/form-context.d.ts.map +1 -0
  27. package/dist/index.cjs +184 -2044
  28. package/dist/index.cjs.map +1 -1
  29. package/dist/index.d.ts +7 -0
  30. package/dist/index.d.ts.map +1 -1
  31. package/dist/index.js +184 -1990
  32. package/dist/index.js.map +1 -1
  33. package/dist/nodes/editable-text.d.ts +15 -0
  34. package/dist/nodes/editable-text.d.ts.map +1 -0
  35. package/dist/nodes/form-nodes.d.ts +153 -0
  36. package/dist/nodes/form-nodes.d.ts.map +1 -0
  37. package/dist/nodes/html-embed.d.ts +15 -0
  38. package/dist/nodes/html-embed.d.ts.map +1 -0
  39. package/dist/nodes/index.d.ts +5 -0
  40. package/dist/nodes/index.d.ts.map +1 -0
  41. package/dist/nodes/media-utils.d.ts +17 -0
  42. package/dist/nodes/media-utils.d.ts.map +1 -0
  43. package/dist/preview-adapter.d.ts +1 -1
  44. package/dist/preview-adapter.d.ts.map +1 -1
  45. package/dist/renderer.d.ts +4 -24
  46. package/dist/renderer.d.ts.map +1 -1
  47. package/dist/renderers/index.d.ts +2 -0
  48. package/dist/renderers/index.d.ts.map +1 -0
  49. package/dist/renderers/render-node-content.d.ts +66 -0
  50. package/dist/renderers/render-node-content.d.ts.map +1 -0
  51. package/dist/styles.d.ts +8 -3
  52. package/dist/styles.d.ts.map +1 -1
  53. package/package.json +13 -14
package/dist/index.cjs CHANGED
@@ -1,320 +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
- ComponentErrorBoundary: () => ComponentErrorBoundary,
24
- DEFAULT_BREAKPOINTS: () => DEFAULT_BREAKPOINTS,
25
- DEFAULT_CSS_RESET: () => DEFAULT_CSS_RESET,
26
- DEFAULT_RENDER_CONTEXT: () => DEFAULT_RENDER_CONTEXT,
27
- DEFAULT_VIEWPORT_CONFIGS: () => DEFAULT_VIEWPORT_CONFIGS,
28
- EditableText: () => EditableText,
29
- HtmlEmbedView: () => HtmlEmbedView,
30
- KubuildPreviewViewport: () => KubuildPreviewViewport,
31
- KubuildRenderer: () => KubuildRenderer,
32
- NodeRenderer: () => NodeRenderer,
33
- PreviewViewportAdapter: () => PreviewViewportAdapter,
34
- RenderContextProvider: () => RenderContextProvider,
35
- collectStateStylesCss: () => collectStateStylesCss,
36
- createMinimalRenderContext: () => createMinimalRenderContext,
37
- createRenderContext: () => createRenderContext,
38
- dispatchAction: () => dispatchAction,
39
- isActionRegistered: () => isActionRegistered,
40
- resolveActionPayload: () => resolveActionPayload,
41
- resolveActionPayloadDetailed: () => resolveActionPayloadDetailed,
42
- resolveAssetSync: () => resolveAssetSync,
43
- resolveNodeStyles: () => resolveNodeStyles,
44
- resolveVariable: () => resolveVariable,
45
- resolveViewportContainerStyle: () => resolveViewportContainerStyle,
46
- resolveViewportDimensions: () => resolveViewportDimensions,
47
- resolveViewportFromWidth: () => resolveViewportFromWidth,
48
- styleDefinitionToCssDeclarations: () => styleDefinitionToCssDeclarations,
49
- transformEmbedHtml: () => transformEmbedHtml,
50
- useRenderContext: () => useRenderContext
51
- });
52
- module.exports = __toCommonJS(index_exports);
53
-
54
- // src/renderer.tsx
55
- var import_react3 = require("react");
56
- var import_schema3 = require("@kubuild/schema");
57
- var import_components2 = require("@kubuild/components");
58
-
59
- // src/render-context.tsx
60
- var import_react = require("react");
61
- var import_core = require("@kubuild/core");
62
- var import_schema = require("@kubuild/schema");
63
- var import_jsx_runtime = require("react/jsx-runtime");
64
- var DEFAULT_RENDER_CONTEXT = Object.freeze({});
65
- var RenderContextReact = (0, import_react.createContext)(DEFAULT_RENDER_CONTEXT);
66
- function createRenderContext(options) {
67
- if (!options) {
68
- return DEFAULT_RENDER_CONTEXT;
69
- }
70
- const frozenVariables = options.variables ? Object.freeze({ ...options.variables }) : void 0;
71
- return Object.freeze({
72
- variables: frozenVariables,
73
- ...options.assetProvider ? { assetProvider: options.assetProvider } : {},
74
- ...options.actionRegistry ? { actionRegistry: options.actionRegistry } : {},
75
- ...options.onDiagnostic ? { onDiagnostic: options.onDiagnostic } : {}
76
- });
77
- }
78
- function createMinimalRenderContext(options) {
79
- const assetsMap = new Map(Object.entries(options?.assets ?? {}));
80
- const actionsMap = new Map(Object.entries(options?.actions ?? {}));
81
- const assetProvider = {
82
- resolve: (assetIdOrUri) => {
83
- return assetsMap.get(assetIdOrUri) || assetIdOrUri;
84
- }
85
- };
86
- const actionRegistry = {
87
- get: (type) => actionsMap.get(type),
88
- register: (type, handler) => {
89
- actionsMap.set(type, handler);
90
- },
91
- unregister: (type) => {
92
- actionsMap.delete(type);
93
- }
94
- };
95
- return createRenderContext({
96
- variables: options?.variables,
97
- assetProvider,
98
- actionRegistry,
99
- onDiagnostic: options?.onDiagnostic
100
- });
101
- }
102
- var RenderContextProvider = ({ value, children }) => {
103
- const contextValue = (0, import_react.useMemo)(() => value || DEFAULT_RENDER_CONTEXT, [value]);
104
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderContextReact.Provider, { value: contextValue, children });
105
- };
106
- function useRenderContext() {
107
- return (0, import_react.useContext)(RenderContextReact);
108
- }
109
- function resolveAssetSync(assetProvider, assetIdOrUri) {
110
- if (!assetProvider || !assetIdOrUri) {
111
- return void 0;
112
- }
113
- try {
114
- const result = assetProvider.resolve(assetIdOrUri);
115
- return typeof result === "string" ? result : void 0;
116
- } catch {
117
- return void 0;
118
- }
119
- }
120
- function resolveVariable(context, value) {
121
- if (value === null || value === void 0) {
122
- return value;
123
- }
124
- if ((0, import_schema.isVariableBinding)(value)) {
125
- return (0, import_core.resolveBinding)(value, context).value;
126
- }
127
- if (typeof value === "string" && value.includes("{{")) {
128
- return value.replace(/\{\{\s*([\w.-]+)\s*\}\}/g, (match, key) => {
129
- const outcome = (0, import_core.resolveBinding)({ key }, context);
130
- if (outcome.status === "resolved") {
131
- return String(outcome.value);
132
- }
133
- return match;
134
- });
135
- }
136
- return value;
137
- }
138
- function resolveActionPayloadDetailed(context, payload) {
139
- if (!payload || typeof payload !== "object") {
140
- return { value: payload, invalidPaths: [] };
141
- }
142
- const invalidPaths = [];
143
- const resolveValueRecursively = (val, path) => {
144
- if (val === null || val === void 0) {
145
- return val;
146
- }
147
- if ((0, import_schema.isVariableBinding)(val)) {
148
- const outcome = (0, import_core.resolveBinding)(val, context);
149
- if (outcome.status === "empty") {
150
- invalidPaths.push(path);
151
- }
152
- return outcome.value;
153
- }
154
- if (typeof val === "string") {
155
- if (val.includes("{{")) {
156
- return val.replace(/\{\{\s*([\w.-]+)\s*\}\}/g, (match, key) => {
157
- const outcome = (0, import_core.resolveBinding)({ key }, context);
158
- if (outcome.status !== "resolved") {
159
- invalidPaths.push(path);
160
- return match;
161
- }
162
- return String(outcome.value);
163
- });
164
- }
165
- return val;
166
- }
167
- if (Array.isArray(val)) {
168
- return val.map((item, index) => resolveValueRecursively(item, `${path}[${index}]`));
169
- }
170
- if (typeof val === "object") {
171
- const copy = {};
172
- for (const [k, v] of Object.entries(val)) {
173
- copy[k] = resolveValueRecursively(v, path ? `${path}.${k}` : k);
174
- }
175
- return copy;
176
- }
177
- return val;
178
- };
179
- const resolved = {};
180
- for (const [key, value] of Object.entries(payload)) {
181
- resolved[key] = resolveValueRecursively(value, key);
182
- }
183
- return { value: resolved, invalidPaths };
184
- }
185
- function resolveActionPayload(context, payload) {
186
- return resolveActionPayloadDetailed(context, payload).value;
187
- }
188
- function isActionRegistered(actionRegistry, actionType) {
189
- if (!actionRegistry || !actionType) {
190
- return false;
191
- }
192
- return Boolean(actionRegistry.get(actionType));
193
- }
194
- function dispatchAction(options) {
195
- const { action, nodeId, document, context, onDiagnostic } = options;
196
- if (!(0, import_schema.isActionBinding)(action)) {
197
- const diagnostic = {
198
- code: "INVALID_ACTION_PAYLOAD",
199
- actionType: typeof action?.type === "string" ? action.type : "unknown",
200
- nodeId,
201
- message: `Invalid action binding on node ${nodeId || "unknown"}.`
202
- };
203
- onDiagnostic?.(diagnostic);
204
- context?.onDiagnostic?.(diagnostic);
205
- return false;
206
- }
207
- const handler = context?.actionRegistry?.get(action.type);
208
- if (!handler) {
209
- const diagnostic = {
210
- code: "UNKNOWN_ACTION",
211
- actionType: action.type,
212
- nodeId,
213
- message: `No action handler registered for action type "${action.type}".`
214
- };
215
- onDiagnostic?.(diagnostic);
216
- context?.onDiagnostic?.(diagnostic);
217
- return false;
218
- }
219
- const { value: resolvedPayload, invalidPaths } = resolveActionPayloadDetailed(context, action.payload);
220
- if (invalidPaths.length > 0) {
221
- const diagnostic = {
222
- code: "INVALID_ACTION_BINDING",
223
- actionType: action.type,
224
- nodeId,
225
- message: `Action "${action.type}" payload has unresolved binding path(s) [${invalidPaths.join(
226
- ", "
227
- )}] on node ${nodeId || "unknown"}; handler was not invoked.`,
228
- invalidPaths
229
- };
230
- onDiagnostic?.(diagnostic);
231
- context?.onDiagnostic?.(diagnostic);
232
- return false;
233
- }
234
- const executionContext = {
235
- nodeId,
236
- document,
237
- variables: context?.variables
238
- };
239
- try {
240
- const result = handler(resolvedPayload, executionContext);
241
- if (result && typeof result.catch === "function") {
242
- result.catch((error) => {
243
- const diagnostic = {
244
- code: "ACTION_EXECUTION_ERROR",
245
- actionType: action.type,
246
- nodeId,
247
- message: `Action "${action.type}" handler threw an asynchronous error: ${error instanceof Error ? error.message : String(error)}`,
248
- error
249
- };
250
- onDiagnostic?.(diagnostic);
251
- context?.onDiagnostic?.(diagnostic);
252
- });
253
- }
254
- return true;
255
- } catch (error) {
256
- const diagnostic = {
257
- code: "ACTION_EXECUTION_ERROR",
258
- actionType: action.type,
259
- nodeId,
260
- message: `Action "${action.type}" handler threw a synchronous error: ${error instanceof Error ? error.message : String(error)}`,
261
- error
262
- };
263
- onDiagnostic?.(diagnostic);
264
- context?.onDiagnostic?.(diagnostic);
265
- return false;
266
- }
267
- }
268
-
269
- // src/renderer.tsx
270
- var import_core3 = require("@kubuild/core");
271
- var import_lucide_react = require("lucide-react");
272
-
273
- // src/styles.ts
274
- function resolveNodeStyles(styles, viewport = "desktop") {
275
- if (!styles) return {};
276
- const base = styles.base || {};
277
- const override = styles[viewport] || {};
278
- return { ...base, ...override };
279
- }
280
- function escapeCssValue(value) {
281
- return String(value).replace(/[{};]+/g, "");
282
- }
283
- function escapeCssIdent(value) {
284
- return value.replace(/["\\\]]/g, "\\$&");
285
- }
286
- function styleDefinitionToCssDeclarations(styleDefinition) {
287
- if (!styleDefinition || typeof styleDefinition !== "object") return "";
288
- const declarations = [];
289
- for (const [key, value] of Object.entries(styleDefinition)) {
290
- if (value === null || value === void 0 || value === "") continue;
291
- const property = key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
292
- declarations.push(`${property}: ${escapeCssValue(value)};`);
293
- }
294
- return declarations.join(" ");
295
- }
296
- function collectStateStylesCss(document) {
297
- if (!document?.document) return "";
298
- const rules = [];
299
- const walk = (node) => {
300
- const states = node.styles?.states;
301
- if (states && typeof states === "object") {
302
- for (const [state, styleDefinition] of Object.entries(states)) {
303
- const declarations = styleDefinitionToCssDeclarations(
304
- styleDefinition
305
- );
306
- if (!declarations) continue;
307
- const safeState = /^::?[a-zA-Z-]+$/.test(state) ? state : null;
308
- if (!safeState) continue;
309
- rules.push(`[data-kubuild-node="${escapeCssIdent(node.id)}"]${safeState} { ${declarations} }`);
310
- }
311
- }
312
- node.children?.forEach(walk);
313
- };
314
- walk(document.document);
315
- return rules.join("\n");
316
- }
317
- 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=`
318
3
  *, *::before, *::after {
319
4
  box-sizing: border-box;
320
5
  }
@@ -340,1745 +25,200 @@ input, button, textarea, select {
340
25
  p, h1, h2, h3, h4, h5, h6 {
341
26
  overflow-wrap: break-word;
342
27
  }
343
- `.trim();
344
-
345
- // src/error-boundary.tsx
346
- var import_react2 = require("react");
347
- var import_jsx_runtime2 = require("react/jsx-runtime");
348
- var ComponentErrorBoundary = class extends import_react2.Component {
349
- constructor(props) {
350
- super(props);
351
- this.state = { hasError: false };
352
- }
353
- static getDerivedStateFromError(error) {
354
- return { hasError: true, error };
355
- }
356
- componentDidCatch(error, errorInfo) {
357
- if (this.props.onError) {
358
- this.props.onError(error, errorInfo);
359
- }
360
- }
361
- render() {
362
- if (this.state.hasError) {
363
- const { nodeId, componentType, mode = "runtime" } = this.props;
364
- const errorMessage = this.state.error?.message || "Unknown render error";
365
- if (mode === "editor") {
366
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
367
- "div",
368
- {
369
- "data-kubuild-node": nodeId,
370
- "data-kubuild-error": componentType,
371
- style: {
372
- padding: "12px 16px",
373
- margin: "4px 0",
374
- backgroundColor: "#fef2f2",
375
- border: "1px solid #ef4444",
376
- borderRadius: "6px",
377
- color: "#b91c1c",
378
- fontFamily: "system-ui, -apple-system, sans-serif",
379
- fontSize: "13px",
380
- lineHeight: "1.4"
381
- },
382
- children: [
383
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: [
384
- "\u26A0\uFE0F Component Render Error: <",
385
- componentType,
386
- ">"
387
- ] }),
388
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: "11px", color: "#7f1d1d", wordBreak: "break-all" }, children: [
389
- "Node ID: ",
390
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: nodeId }),
391
- " \u2014 ",
392
- errorMessage
393
- ] })
394
- ]
395
- }
396
- );
397
- }
398
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
399
- "div",
400
- {
401
- "data-kubuild-node": nodeId,
402
- "data-kubuild-error": componentType,
403
- style: { display: "none" },
404
- "aria-hidden": "true"
405
- }
406
- );
407
- }
408
- return this.props.children;
409
- }
410
- };
411
-
412
- // src/prop-resolution.ts
413
- var import_schema2 = require("@kubuild/schema");
414
- var import_components = require("@kubuild/components");
415
- var import_core2 = require("@kubuild/core");
416
- function emptyValueFor(primitiveType) {
417
- switch (primitiveType) {
418
- case "string":
419
- return "";
420
- case "number":
421
- return 0;
422
- case "boolean":
423
- return false;
424
- }
28
+ `.trim();var At=`
29
+ /* Entrance / AOS Keyframes */
30
+ @keyframes kb-anim-fade {
31
+ from { opacity: 0; }
32
+ to { opacity: 1; }
425
33
  }
426
- function resolveBindableField(node, field, definition, context, diagnostics) {
427
- const rawValue = node.props?.[field.name];
428
- const expectedType = (0, import_components.primitiveTypeForField)(field);
429
- if (expectedType === void 0 || rawValue === void 0) {
430
- return rawValue;
431
- }
432
- const fallbackValue = definition.defaultProps?.[field.name] ?? field.defaultValue ?? emptyValueFor(expectedType);
433
- if ((0, import_schema2.isVariableBinding)(rawValue)) {
434
- const outcome = (0, import_core2.resolveBinding)(rawValue, context);
435
- if (typeof outcome.value === expectedType) {
436
- return outcome.value;
437
- }
438
- diagnostics.push({
439
- code: "INCOMPATIBLE_BINDING_TYPE",
440
- nodeId: node.id,
441
- propName: field.name,
442
- expectedType,
443
- actualType: typeof outcome.value,
444
- message: `Prop "${field.name}" on node "${node.id}" expected a ${expectedType} but resolved binding "${rawValue.key}" produced a ${typeof outcome.value}.`
445
- });
446
- return fallbackValue;
447
- }
448
- if (expectedType === "string" && typeof rawValue === "string" && rawValue.includes("{{")) {
449
- return resolveVariable(context, rawValue);
450
- }
451
- return rawValue;
34
+ @keyframes kb-anim-fade-up {
35
+ from { opacity: 0; transform: translateY(24px); }
36
+ to { opacity: 1; transform: translateY(0); }
452
37
  }
453
- function resolvePropsForNode(node, definition, context) {
454
- const rawProps = node.props || {};
455
- if (!definition || !definition.propFields || definition.propFields.length === 0) {
456
- return { props: rawProps, diagnostics: [] };
457
- }
458
- const diagnostics = [];
459
- const resolved = { ...rawProps };
460
- for (const field of definition.propFields) {
461
- if ((0, import_components.primitiveTypeForField)(field) === void 0) {
462
- continue;
463
- }
464
- resolved[field.name] = resolveBindableField(node, field, definition, context, diagnostics);
465
- }
466
- return { props: resolved, diagnostics };
38
+ @keyframes kb-anim-fade-down {
39
+ from { opacity: 0; transform: translateY(-24px); }
40
+ to { opacity: 1; transform: translateY(0); }
467
41
  }
468
-
469
- // src/renderer.tsx
470
- var import_jsx_runtime3 = require("react/jsx-runtime");
471
- function toPascalCase(str) {
472
- if (!str) return "";
473
- return str.replace(/[-_](\w)/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase());
42
+ @keyframes kb-anim-fade-left {
43
+ from { opacity: 0; transform: translateX(24px); }
44
+ to { opacity: 1; transform: translateX(0); }
474
45
  }
475
- function getYouTubeId(url) {
476
- if (!url || typeof url !== "string") return null;
477
- const match = url.match(
478
- /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i
479
- );
480
- return match ? match[1] : null;
46
+ @keyframes kb-anim-fade-right {
47
+ from { opacity: 0; transform: translateX(-24px); }
48
+ to { opacity: 1; transform: translateX(0); }
481
49
  }
482
- function getVimeoId(url) {
483
- if (!url || typeof url !== "string") return null;
484
- const match = url.match(
485
- /(?:vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|))(\d+)/i
486
- );
487
- return match ? match[3] : null;
50
+ @keyframes kb-anim-zoom-in {
51
+ from { opacity: 0; transform: scale(0.92); }
52
+ to { opacity: 1; transform: scale(1); }
488
53
  }
489
- function aspectRatioToCss(ratio) {
490
- if (ratio === "16:9") return "16 / 9";
491
- if (ratio === "4:3") return "4 / 3";
492
- if (ratio === "1:1") return "1 / 1";
493
- if (ratio === "9:16") return "9 / 16";
494
- if (typeof ratio === "string" && ratio !== "auto") return ratio.replace(":", " / ");
495
- return void 0;
54
+ @keyframes kb-anim-zoom-out {
55
+ from { opacity: 0; transform: scale(1.08); }
56
+ to { opacity: 1; transform: scale(1); }
496
57
  }
497
- var EditableText = ({
498
- as = "p",
499
- id,
500
- className,
501
- style,
502
- value,
503
- isEditable,
504
- nodeId,
505
- onClick,
506
- onChange,
507
- ...rest
508
- }) => {
509
- const isEditingRef = (0, import_react3.useRef)(false);
510
- const Tag = as;
511
- if (!isEditable) {
512
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
513
- Tag,
514
- {
515
- id,
516
- className,
517
- style,
518
- onClick,
519
- "data-kubuild-node": nodeId,
520
- ...rest,
521
- children: value
522
- }
523
- );
524
- }
525
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
526
- Tag,
527
- {
528
- id,
529
- className,
530
- style: {
531
- ...style,
532
- outline: "none",
533
- cursor: "text"
534
- },
535
- contentEditable: true,
536
- suppressContentEditableWarning: true,
537
- "data-kubuild-node": nodeId,
538
- onClick: (e) => {
539
- onClick?.(e);
540
- },
541
- onFocus: () => {
542
- isEditingRef.current = true;
543
- },
544
- onInput: (e) => {
545
- const text = e.currentTarget.textContent ?? "";
546
- onChange?.(text, false);
547
- },
548
- onBlur: (e) => {
549
- isEditingRef.current = false;
550
- const text = e.currentTarget.textContent ?? "";
551
- onChange?.(text, true);
552
- },
553
- onKeyDown: (e) => {
554
- if (e.key === "Escape") {
555
- e.currentTarget.blur();
556
- }
557
- },
558
- ...rest,
559
- children: value
560
- }
561
- );
562
- };
563
- var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react3.useLayoutEffect : import_react3.useEffect;
564
- function transformEmbedHtml(rawHtml) {
565
- if (!rawHtml) return "";
566
- return rawHtml.replace(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi, (_match, attrs, cssContent) => {
567
- let transformedCss = cssContent;
568
- transformedCss = transformedCss.replace(/(^|[\s,{}])body(?=[\s,{])/g, "$1:host, body");
569
- transformedCss = transformedCss.replace(/(^|[\s,{}])html(?=[\s,{])/g, "$1:host, html");
570
- return `<style${attrs}>
571
- :host { display: block; }
572
- ${transformedCss}</style>`;
573
- });
58
+ @keyframes kb-anim-slide-up {
59
+ from { transform: translateY(100%); }
60
+ to { transform: translateY(0); }
574
61
  }
575
- var HtmlEmbedView = ({
576
- id,
577
- style,
578
- onClick,
579
- dataKubuildNode,
580
- html,
581
- role
582
- }) => {
583
- const hostRef = (0, import_react3.useRef)(null);
584
- const shadowRootRef = (0, import_react3.useRef)(null);
585
- const scopedHtml = (0, import_react3.useMemo)(() => transformEmbedHtml(html), [html]);
586
- useIsomorphicLayoutEffect(() => {
587
- const host = hostRef.current;
588
- if (!host) return;
589
- if (typeof host.attachShadow === "function") {
590
- if (!shadowRootRef.current) {
591
- if (host.shadowRoot) {
592
- shadowRootRef.current = host.shadowRoot;
593
- } else {
594
- try {
595
- shadowRootRef.current = host.attachShadow({ mode: "open" });
596
- } catch {
597
- shadowRootRef.current = host.shadowRoot;
598
- }
599
- }
600
- }
601
- if (shadowRootRef.current) {
602
- shadowRootRef.current.innerHTML = scopedHtml;
603
- return;
604
- }
605
- }
606
- host.innerHTML = scopedHtml;
607
- }, [scopedHtml]);
608
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
609
- "div",
610
- {
611
- ref: hostRef,
612
- id,
613
- style,
614
- onClick,
615
- "data-kubuild-node": dataKubuildNode,
616
- role,
617
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
618
- "template",
619
- {
620
- shadowrootmode: "open",
621
- dangerouslySetInnerHTML: { __html: scopedHtml }
622
- }
623
- )
624
- }
625
- );
626
- };
627
- function NodeRenderer({
628
- node,
629
- document,
630
- registry,
631
- context: propContext,
632
- viewport = "desktop",
633
- mode = "runtime",
634
- onNodeClick,
635
- onDiagnostic,
636
- onActionDispatch,
637
- onNodePropChange,
638
- instanceSuffix = ""
639
- }) {
640
- const context = propContext || DEFAULT_RENDER_CONTEXT;
641
- const styles = resolveNodeStyles(node.styles, viewport);
642
- const props = node.props || {};
643
- const definition = registry.get(node.type);
644
- const domId = instanceSuffix ? `${node.id}${instanceSuffix}` : node.id;
645
- const { props: resolvedProps, diagnostics } = resolvePropsForNode(node, definition, context);
646
- diagnostics.forEach((diagnostic) => {
647
- onDiagnostic?.(diagnostic);
648
- context?.onDiagnostic?.(diagnostic);
649
- });
650
- const handleClick = (e) => {
651
- e.stopPropagation();
652
- if (onNodeClick) {
653
- onNodeClick(node.id, e);
654
- }
655
- if (props.action && !props.disabled) {
656
- dispatchAction({
657
- action: props.action,
658
- nodeId: node.id,
659
- document,
660
- context,
661
- onDiagnostic
662
- });
663
- if (onActionDispatch && (0, import_schema3.isActionBinding)(props.action)) {
664
- onActionDispatch(props.action.type, resolveActionPayload(context, props.action.payload), node.id);
665
- }
666
- }
667
- };
668
- const childrenElements = node.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
669
- NodeRenderer,
670
- {
671
- node: child,
672
- document,
673
- registry,
674
- context,
675
- viewport,
676
- mode,
677
- onNodeClick,
678
- onDiagnostic,
679
- onActionDispatch,
680
- onNodePropChange,
681
- instanceSuffix
682
- },
683
- `${child.id}${instanceSuffix}`
684
- ));
685
- const renderNodeContent = () => {
686
- if (definition?.renderer && typeof definition.renderer === "function") {
687
- const CustomRenderer = definition.renderer;
688
- try {
689
- if (typeof CustomRenderer === "function" && !CustomRenderer.prototype?.isReactComponent) {
690
- return CustomRenderer({
691
- node,
692
- document,
693
- props: resolvedProps,
694
- styles,
695
- context,
696
- children: childrenElements,
697
- onClick: handleClick
698
- });
699
- }
700
- } catch (err) {
701
- throw err;
702
- }
703
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
704
- CustomRenderer,
705
- {
706
- node,
707
- document,
708
- props: resolvedProps,
709
- styles,
710
- context,
711
- onClick: handleClick,
712
- children: childrenElements
713
- }
714
- );
715
- }
716
- switch (node.type) {
717
- case "page":
718
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: domId, style: styles, onClick: handleClick, "data-kubuild-node": node.id, children: childrenElements });
719
- case "section":
720
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
721
- "section",
722
- {
723
- id: domId,
724
- style: styles,
725
- onClick: handleClick,
726
- "data-kubuild-node": node.id,
727
- "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0,
728
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
729
- children: childrenElements
730
- }
731
- );
732
- case "container":
733
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
734
- "div",
735
- {
736
- id: domId,
737
- style: styles,
738
- onClick: handleClick,
739
- "data-kubuild-node": node.id,
740
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
741
- children: childrenElements
742
- }
743
- );
744
- case "columns":
745
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
746
- "div",
747
- {
748
- id: domId,
749
- style: styles,
750
- onClick: handleClick,
751
- "data-kubuild-node": node.id,
752
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
753
- children: childrenElements
754
- }
755
- );
756
- case "heading": {
757
- const rawLevel = typeof resolvedProps.level === "number" ? resolvedProps.level : typeof props.level === "number" ? props.level : 2;
758
- const clampedLevel = Math.min(Math.max(rawLevel, 1), 6);
759
- const text = String(resolvedProps.text ?? "");
760
- const Tag = `h${clampedLevel}`;
761
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
762
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
763
- EditableText,
764
- {
765
- as: Tag,
766
- id: domId,
767
- style: styles,
768
- value: text,
769
- isEditable,
770
- nodeId: node.id,
771
- onClick: handleClick,
772
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
773
- "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0
774
- }
775
- );
776
- }
777
- case "text": {
778
- const content2 = String(resolvedProps.content ?? "");
779
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.content);
780
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
781
- EditableText,
782
- {
783
- as: "p",
784
- id: domId,
785
- style: styles,
786
- value: content2,
787
- isEditable,
788
- nodeId: node.id,
789
- onClick: handleClick,
790
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "content", val, isBlur),
791
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
792
- }
793
- );
794
- }
795
- case "paragraph": {
796
- const text = String(resolvedProps.text ?? resolvedProps.content ?? props.text ?? props.content ?? "");
797
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text) && !(0, import_schema3.isVariableBinding)(props.content);
798
- const propName = props.content !== void 0 ? "content" : "text";
799
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
800
- EditableText,
801
- {
802
- as: "p",
803
- id: domId,
804
- style: styles,
805
- value: text,
806
- isEditable,
807
- nodeId: node.id,
808
- onClick: handleClick,
809
- onChange: (val, isBlur) => onNodePropChange?.(node.id, propName, val, isBlur),
810
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
811
- }
812
- );
813
- }
814
- case "link": {
815
- const text = String(resolvedProps.text ?? props.text ?? "");
816
- const rawHref = typeof resolvedProps.href === "string" ? resolvedProps.href : typeof props.href === "string" ? props.href : void 0;
817
- const href = rawHref ? (0, import_core3.sanitizeUrl)(rawHref, "#") : "#";
818
- const rawTarget = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
819
- const rawRel = typeof resolvedProps.rel === "string" ? resolvedProps.rel : void 0;
820
- const rel = rawTarget === "_blank" && !rawRel ? "noopener noreferrer" : rawRel;
821
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
822
- if (isEditable) {
823
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
824
- EditableText,
825
- {
826
- as: "a",
827
- id: domId,
828
- href: void 0,
829
- target: rawTarget,
830
- rel,
831
- style: styles,
832
- value: text,
833
- isEditable,
834
- nodeId: node.id,
835
- onClick: handleClick,
836
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
837
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
838
- }
839
- );
840
- }
841
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
842
- "a",
843
- {
844
- id: domId,
845
- href,
846
- target: rawTarget,
847
- rel,
848
- style: styles,
849
- onClick: handleClick,
850
- "data-kubuild-node": node.id,
851
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
852
- children: text
853
- }
854
- );
855
- }
856
- case "blockquote": {
857
- const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : props.text !== void 0 ? String(props.text) : "";
858
- const rawCite = typeof resolvedProps.cite === "string" ? resolvedProps.cite : typeof props.cite === "string" ? props.cite : void 0;
859
- const safeCite = rawCite ? (0, import_core3.sanitizeUrl)(rawCite) : void 0;
860
- const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
861
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
862
- if (hasChildren) {
863
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
864
- "blockquote",
865
- {
866
- id: domId,
867
- cite: safeCite,
868
- style: styles,
869
- onClick: handleClick,
870
- "data-kubuild-node": node.id,
871
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
872
- children: [
873
- text ? isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
874
- EditableText,
875
- {
876
- as: "p",
877
- value: text,
878
- isEditable,
879
- nodeId: node.id,
880
- onClick: handleClick,
881
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
882
- }
883
- ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: text }) : null,
884
- childrenElements
885
- ]
886
- }
887
- );
888
- }
889
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
890
- EditableText,
891
- {
892
- as: "blockquote",
893
- id: domId,
894
- cite: safeCite,
895
- style: styles,
896
- value: text,
897
- isEditable,
898
- nodeId: node.id,
899
- onClick: handleClick,
900
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
901
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
902
- }
903
- );
904
- }
905
- case "badge": {
906
- const text = String(resolvedProps.text ?? props.text ?? "Badge");
907
- const variant = typeof resolvedProps.variant === "string" ? resolvedProps.variant : "default";
908
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
909
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
910
- EditableText,
911
- {
912
- as: "span",
913
- id: domId,
914
- style: styles,
915
- value: text,
916
- isEditable,
917
- nodeId: node.id,
918
- "data-variant": variant,
919
- onClick: handleClick,
920
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
921
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
922
- }
923
- );
924
- }
925
- case "code-block": {
926
- const code = String(resolvedProps.code ?? props.code ?? "");
927
- const language = typeof resolvedProps.language === "string" ? resolvedProps.language : typeof props.language === "string" ? props.language : void 0;
928
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.code);
929
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
930
- "pre",
931
- {
932
- id: domId,
933
- style: styles,
934
- onClick: handleClick,
935
- "data-kubuild-node": node.id,
936
- "data-language": language,
937
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
938
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
939
- EditableText,
940
- {
941
- as: "code",
942
- className: language ? `language-${language}` : void 0,
943
- style: { fontFamily: "inherit", color: "inherit", display: "block", whiteSpace: "pre" },
944
- value: code,
945
- isEditable,
946
- nodeId: node.id,
947
- onClick: handleClick,
948
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "code", val, isBlur)
949
- }
950
- )
951
- }
952
- );
953
- }
954
- case "list": {
955
- const rawTag = resolvedProps.tag;
956
- const Tag = rawTag === "ol" ? "ol" : "ul";
957
- const rawListStyle = resolvedProps.listStyleType;
958
- const listStyleType = rawListStyle === "custom-icon" ? "none" : rawListStyle;
959
- const listStyles = {
960
- ...styles,
961
- ...listStyleType ? { listStyleType } : {}
962
- };
963
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
964
- Tag,
965
- {
966
- id: domId,
967
- style: listStyles,
968
- onClick: handleClick,
969
- "data-kubuild-node": node.id,
970
- "data-list-style": rawListStyle,
971
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
972
- children: childrenElements
973
- }
974
- );
975
- }
976
- case "list-item": {
977
- const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : "";
978
- const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
979
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
980
- if (hasChildren) {
981
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
982
- "li",
983
- {
984
- id: domId,
985
- style: styles,
986
- onClick: handleClick,
987
- "data-kubuild-node": node.id,
988
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
989
- children: [
990
- text ? isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
991
- EditableText,
992
- {
993
- as: "span",
994
- value: text,
995
- isEditable,
996
- nodeId: node.id,
997
- onClick: handleClick,
998
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
999
- }
1000
- ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: text }) : null,
1001
- childrenElements
1002
- ]
1003
- }
1004
- );
1005
- }
1006
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1007
- EditableText,
1008
- {
1009
- as: "li",
1010
- id: domId,
1011
- style: styles,
1012
- value: text,
1013
- isEditable,
1014
- nodeId: node.id,
1015
- onClick: handleClick,
1016
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
1017
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1018
- }
1019
- );
1020
- }
1021
- case "table": {
1022
- const isStriped = resolvedProps.striped === true;
1023
- const isBordered = resolvedProps.bordered !== false;
1024
- const isCompact = resolvedProps.compact === true;
1025
- const tableStyles = {
1026
- width: "100%",
1027
- borderCollapse: "collapse",
1028
- ...styles,
1029
- ...isBordered ? { border: styles.border || "1px solid #e2e8f0" } : {}
1030
- };
1031
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1032
- "table",
1033
- {
1034
- id: domId,
1035
- style: tableStyles,
1036
- onClick: handleClick,
1037
- "data-kubuild-node": node.id,
1038
- "data-striped": isStriped ? "true" : void 0,
1039
- "data-bordered": isBordered ? "true" : void 0,
1040
- "data-compact": isCompact ? "true" : void 0,
1041
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1042
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: childrenElements })
1043
- }
1044
- );
1045
- }
1046
- case "table-row": {
1047
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1048
- "tr",
1049
- {
1050
- id: domId,
1051
- style: styles,
1052
- onClick: handleClick,
1053
- "data-kubuild-node": node.id,
1054
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1055
- children: childrenElements
1056
- }
1057
- );
1058
- }
1059
- case "table-cell": {
1060
- const rawTag = resolvedProps.tag;
1061
- const Tag = rawTag === "th" ? "th" : "td";
1062
- const colSpan = typeof resolvedProps.colSpan === "number" && resolvedProps.colSpan > 1 ? resolvedProps.colSpan : void 0;
1063
- const rowSpan = typeof resolvedProps.rowSpan === "number" && resolvedProps.rowSpan > 1 ? resolvedProps.rowSpan : void 0;
1064
- const text = resolvedProps.text !== void 0 ? String(resolvedProps.text) : "";
1065
- const hasChildren = Boolean(childrenElements && childrenElements.length > 0);
1066
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.text);
1067
- const cellStyles = {
1068
- padding: "8px 12px",
1069
- border: "1px solid #e2e8f0",
1070
- textAlign: "left",
1071
- ...styles,
1072
- ...Tag === "th" ? {
1073
- fontWeight: styles.fontWeight || "600",
1074
- backgroundColor: styles.backgroundColor || "#f8fafc"
1075
- } : {}
1076
- };
1077
- if (hasChildren) {
1078
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1079
- Tag,
1080
- {
1081
- id: domId,
1082
- colSpan,
1083
- rowSpan,
1084
- style: cellStyles,
1085
- onClick: handleClick,
1086
- "data-kubuild-node": node.id,
1087
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1088
- children: [
1089
- text ? isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1090
- EditableText,
1091
- {
1092
- as: "span",
1093
- value: text,
1094
- isEditable,
1095
- nodeId: node.id,
1096
- onClick: handleClick,
1097
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur)
1098
- }
1099
- ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: text }) : null,
1100
- childrenElements
1101
- ]
1102
- }
1103
- );
1104
- }
1105
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1106
- EditableText,
1107
- {
1108
- as: Tag,
1109
- id: domId,
1110
- colSpan,
1111
- rowSpan,
1112
- style: cellStyles,
1113
- value: text,
1114
- isEditable,
1115
- nodeId: node.id,
1116
- onClick: handleClick,
1117
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "text", val, isBlur),
1118
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1119
- }
1120
- );
1121
- }
1122
- case "image": {
1123
- const rawSrc = typeof resolvedProps.src === "string" && resolvedProps.src.length > 0 ? resolvedProps.src : void 0;
1124
- const directSrc = rawSrc ?? void 0;
1125
- const asset = (0, import_schema3.isAssetReference)(props.asset) ? props.asset : void 0;
1126
- const resolvedSrc = !directSrc && asset && context?.assetProvider ? resolveAssetSync(context.assetProvider, asset.assetId) : void 0;
1127
- const fallbackSrc = asset?.fallbackUrl;
1128
- const rawUrl = directSrc || resolvedSrc || fallbackSrc;
1129
- const safeSrc = rawUrl ? (0, import_core3.sanitizeUrl)(rawUrl, "", { allowBlobMedia: true }) : void 0;
1130
- const alt = typeof resolvedProps.alt === "string" ? resolvedProps.alt : "";
1131
- const loading = resolvedProps.loading === "eager" ? "eager" : "lazy";
1132
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1133
- "img",
1134
- {
1135
- id: domId,
1136
- src: safeSrc || void 0,
1137
- alt,
1138
- role: alt.length === 0 ? "presentation" : void 0,
1139
- loading,
1140
- width: resolvedProps.width,
1141
- height: resolvedProps.height,
1142
- style: styles,
1143
- onClick: handleClick,
1144
- "data-kubuild-node": node.id
1145
- }
1146
- );
1147
- }
1148
- case "video": {
1149
- const rawSrc = typeof resolvedProps.src === "string" ? resolvedProps.src : typeof props.src === "string" ? props.src : "";
1150
- const provider = typeof resolvedProps.provider === "string" ? resolvedProps.provider : typeof props.provider === "string" ? props.provider : "auto";
1151
- const rawPoster = typeof resolvedProps.poster === "string" ? resolvedProps.poster : typeof props.poster === "string" ? props.poster : void 0;
1152
- const poster = rawPoster ? (0, import_core3.sanitizeUrl)(rawPoster) : void 0;
1153
- const controls = resolvedProps.controls !== false && props.controls !== false;
1154
- const autoplay = resolvedProps.autoplay === true || props.autoplay === true;
1155
- const loop = resolvedProps.loop === true || props.loop === true;
1156
- const muted = resolvedProps.muted === true || props.muted === true;
1157
- const aspectRatio = aspectRatioToCss(resolvedProps.aspectRatio ?? props.aspectRatio ?? "16:9");
1158
- const ytId = provider === "youtube" ? getYouTubeId(rawSrc) || rawSrc : provider === "auto" ? getYouTubeId(rawSrc) : null;
1159
- const vimeoId = provider === "vimeo" ? getVimeoId(rawSrc) || rawSrc : provider === "auto" ? getVimeoId(rawSrc) : null;
1160
- const videoStyles = {
1161
- width: "100%",
1162
- maxWidth: "100%",
1163
- display: "block",
1164
- ...aspectRatio ? { aspectRatio } : {},
1165
- ...styles
1166
- };
1167
- if (ytId) {
1168
- const autoplayParam = autoplay ? "1" : "0";
1169
- const loopParam = loop ? `1&playlist=${ytId}` : "0";
1170
- const muteParam = muted ? "1" : "0";
1171
- const controlsParam = controls ? "1" : "0";
1172
- const embedUrl = `https://www.youtube.com/embed/${ytId}?autoplay=${autoplayParam}&loop=${loopParam}&mute=${muteParam}&controls=${controlsParam}`;
1173
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1174
- "div",
1175
- {
1176
- id: domId,
1177
- style: { ...videoStyles, position: "relative", overflow: "hidden" },
1178
- onClick: handleClick,
1179
- "data-kubuild-node": node.id,
1180
- "data-video-provider": "youtube",
1181
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1182
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1183
- "iframe",
1184
- {
1185
- src: embedUrl,
1186
- title: "YouTube video",
1187
- style: { width: "100%", height: "100%", border: "none", minHeight: "240px" },
1188
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
1189
- allowFullScreen: true
1190
- }
1191
- )
1192
- }
1193
- );
1194
- }
1195
- if (vimeoId) {
1196
- const autoplayParam = autoplay ? "1" : "0";
1197
- const loopParam = loop ? "1" : "0";
1198
- const muteParam = muted ? "1" : "0";
1199
- const embedUrl = `https://player.vimeo.com/video/${vimeoId}?autoplay=${autoplayParam}&loop=${loopParam}&muted=${muteParam}`;
1200
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1201
- "div",
1202
- {
1203
- id: domId,
1204
- style: { ...videoStyles, position: "relative", overflow: "hidden" },
1205
- onClick: handleClick,
1206
- "data-kubuild-node": node.id,
1207
- "data-video-provider": "vimeo",
1208
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0,
1209
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1210
- "iframe",
1211
- {
1212
- src: embedUrl,
1213
- title: "Vimeo video",
1214
- style: { width: "100%", height: "100%", border: "none", minHeight: "240px" },
1215
- allow: "autoplay; fullscreen; picture-in-picture",
1216
- allowFullScreen: true
1217
- }
1218
- )
1219
- }
1220
- );
1221
- }
1222
- const safeSrc = (0, import_core3.sanitizeUrl)(rawSrc, "", { allowBlobMedia: true });
1223
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1224
- "video",
1225
- {
1226
- id: domId,
1227
- src: safeSrc || void 0,
1228
- poster: poster || void 0,
1229
- controls,
1230
- autoPlay: autoplay,
1231
- loop,
1232
- muted,
1233
- style: videoStyles,
1234
- onClick: handleClick,
1235
- "data-kubuild-node": node.id,
1236
- "data-video-provider": "html5",
1237
- playsInline: true,
1238
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1239
- }
1240
- );
1241
- }
1242
- case "icon": {
1243
- 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";
1244
- const size = typeof resolvedProps.size === "number" ? resolvedProps.size : typeof props.size === "number" ? props.size : 24;
1245
- const color = typeof resolvedProps.color === "string" ? resolvedProps.color : typeof props.color === "string" ? props.color : "currentColor";
1246
- const strokeWidth = typeof resolvedProps.strokeWidth === "number" ? resolvedProps.strokeWidth : typeof props.strokeWidth === "number" ? props.strokeWidth : 2;
1247
- const pascalName = toPascalCase(name);
1248
- const IconComponent = import_lucide_react.icons[pascalName];
1249
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1250
- "span",
1251
- {
1252
- id: domId,
1253
- style: { display: "inline-flex", alignItems: "center", justifyContent: "center", color, ...styles },
1254
- onClick: handleClick,
1255
- "data-kubuild-node": node.id,
1256
- "data-icon-name": name,
1257
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : "img",
1258
- "aria-label": typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : name,
1259
- 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" }) })
1260
- }
1261
- );
1262
- }
1263
- case "html-embed": {
1264
- const rawHtml = typeof resolvedProps.html === "string" ? resolvedProps.html : typeof props.html === "string" ? props.html : "";
1265
- const sanitized = (0, import_core3.sanitizeHtml)(rawHtml);
1266
- if (mode === "editor" && !rawHtml.trim()) {
1267
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1268
- "div",
1269
- {
1270
- id: domId,
1271
- style: {
1272
- padding: "16px",
1273
- border: "2px dashed #94a3b8",
1274
- borderRadius: "8px",
1275
- backgroundColor: "#f8fafc",
1276
- color: "#64748b",
1277
- textAlign: "center",
1278
- fontSize: "13px",
1279
- fontFamily: "sans-serif",
1280
- ...styles
1281
- },
1282
- onClick: handleClick,
1283
- "data-kubuild-node": node.id,
1284
- children: [
1285
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontWeight: 600 }, children: "</> HTML Embed" }),
1286
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", marginTop: "4px" }, children: "Click to configure HTML code in Inspector Panel" })
1287
- ]
1288
- }
1289
- );
1290
- }
1291
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1292
- HtmlEmbedView,
1293
- {
1294
- id: domId,
1295
- style: styles,
1296
- onClick: handleClick,
1297
- dataKubuildNode: node.id,
1298
- html: sanitized,
1299
- role: typeof resolvedProps.role === "string" ? resolvedProps.role : void 0
1300
- }
1301
- );
1302
- }
1303
- case "button": {
1304
- const label = String(resolvedProps.label ?? "Button");
1305
- const disabled = resolvedProps.disabled === true;
1306
- const rawHref = typeof resolvedProps.href === "string" ? resolvedProps.href : void 0;
1307
- const href = rawHref ? (0, import_core3.sanitizeUrl)(rawHref, "#") : void 0;
1308
- const rawTarget = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
1309
- const rawRel = typeof resolvedProps.rel === "string" ? resolvedProps.rel : void 0;
1310
- const rel = rawTarget === "_blank" && !rawRel ? "noopener noreferrer" : rawRel;
1311
- const action = (0, import_schema3.isActionBinding)(props.action) ? props.action : void 0;
1312
- const actionResolved = action ? isActionRegistered(context?.actionRegistry, action.type) : void 0;
1313
- const actionAttrs = action ? { "data-kubuild-action": action.type, "data-kubuild-action-resolved": actionResolved } : {};
1314
- const ariaLabel = typeof resolvedProps.ariaLabel === "string" ? resolvedProps.ariaLabel : void 0;
1315
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.label);
1316
- const rawButtonType = typeof resolvedProps.buttonType === "string" ? resolvedProps.buttonType : "button";
1317
- const buttonType = rawButtonType === "submit" || rawButtonType === "reset" ? rawButtonType : "button";
1318
- if (href && !disabled) {
1319
- if (isEditable) {
1320
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1321
- EditableText,
1322
- {
1323
- as: "a",
1324
- id: domId,
1325
- href: mode === "editor" ? void 0 : href,
1326
- target: rawTarget,
1327
- rel,
1328
- style: styles,
1329
- value: label,
1330
- isEditable,
1331
- nodeId: node.id,
1332
- onClick: handleClick,
1333
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur),
1334
- "aria-label": ariaLabel,
1335
- tabIndex: 0,
1336
- ...actionAttrs
1337
- }
1338
- );
1339
- }
1340
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1341
- "a",
1342
- {
1343
- id: domId,
1344
- href,
1345
- target: rawTarget,
1346
- rel,
1347
- style: styles,
1348
- onClick: handleClick,
1349
- "data-kubuild-node": node.id,
1350
- "aria-label": ariaLabel,
1351
- tabIndex: 0,
1352
- ...actionAttrs,
1353
- children: label
1354
- }
1355
- );
1356
- }
1357
- if (isEditable) {
1358
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1359
- EditableText,
1360
- {
1361
- as: "button",
1362
- id: domId,
1363
- type: mode === "editor" ? "button" : buttonType,
1364
- disabled,
1365
- "aria-disabled": disabled ? true : void 0,
1366
- "aria-label": ariaLabel,
1367
- tabIndex: disabled ? -1 : 0,
1368
- style: styles,
1369
- value: label,
1370
- isEditable,
1371
- nodeId: node.id,
1372
- onClick: disabled ? void 0 : handleClick,
1373
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur),
1374
- ...actionAttrs
1375
- }
1376
- );
1377
- }
1378
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1379
- "button",
1380
- {
1381
- id: domId,
1382
- type: mode === "editor" ? "button" : buttonType,
1383
- disabled,
1384
- "aria-disabled": disabled ? true : void 0,
1385
- "aria-label": ariaLabel,
1386
- tabIndex: disabled ? -1 : 0,
1387
- style: styles,
1388
- onClick: disabled ? void 0 : handleClick,
1389
- "data-kubuild-node": node.id,
1390
- ...actionAttrs,
1391
- children: label
1392
- }
1393
- );
1394
- }
1395
- case "form": {
1396
- const action = typeof resolvedProps.action === "string" ? resolvedProps.action : void 0;
1397
- const method = typeof resolvedProps.method === "string" ? resolvedProps.method : "POST";
1398
- const target = typeof resolvedProps.target === "string" ? resolvedProps.target : void 0;
1399
- const autoComplete = typeof resolvedProps.autoComplete === "string" ? resolvedProps.autoComplete : void 0;
1400
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1401
- const handleSubmit = (e) => {
1402
- if (mode === "editor") {
1403
- e.preventDefault();
1404
- }
1405
- };
1406
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1407
- "form",
1408
- {
1409
- id: domId,
1410
- name,
1411
- action: action && mode !== "editor" ? (0, import_core3.sanitizeUrl)(action, "") : void 0,
1412
- method,
1413
- target,
1414
- autoComplete,
1415
- style: styles,
1416
- onClick: handleClick,
1417
- onSubmit: handleSubmit,
1418
- "data-kubuild-node": node.id,
1419
- role: "form",
1420
- "aria-label": name,
1421
- children: childrenElements
1422
- }
1423
- );
1424
- }
1425
- case "input": {
1426
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1427
- const inputType = typeof resolvedProps.type === "string" ? resolvedProps.type : "text";
1428
- const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
1429
- const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
1430
- const required = resolvedProps.required === true;
1431
- const disabled = resolvedProps.disabled === true;
1432
- const readOnly = resolvedProps.readOnly === true;
1433
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1434
- "input",
1435
- {
1436
- id: domId,
1437
- type: inputType,
1438
- name,
1439
- placeholder,
1440
- defaultValue,
1441
- required,
1442
- disabled,
1443
- readOnly,
1444
- style: styles,
1445
- onClick: handleClick,
1446
- "data-kubuild-node": node.id
1447
- }
1448
- );
1449
- }
1450
- case "textarea": {
1451
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1452
- const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
1453
- const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
1454
- const rows = typeof resolvedProps.rows === "number" ? resolvedProps.rows : 4;
1455
- const required = resolvedProps.required === true;
1456
- const disabled = resolvedProps.disabled === true;
1457
- const readOnly = resolvedProps.readOnly === true;
1458
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1459
- "textarea",
1460
- {
1461
- id: domId,
1462
- name,
1463
- placeholder,
1464
- defaultValue,
1465
- rows,
1466
- required,
1467
- disabled,
1468
- readOnly,
1469
- style: styles,
1470
- onClick: handleClick,
1471
- "data-kubuild-node": node.id
1472
- }
1473
- );
1474
- }
1475
- case "select": {
1476
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1477
- const placeholder = typeof resolvedProps.placeholder === "string" ? resolvedProps.placeholder : void 0;
1478
- const defaultValue = resolvedProps.defaultValue !== void 0 ? String(resolvedProps.defaultValue) : void 0;
1479
- const required = resolvedProps.required === true;
1480
- const disabled = resolvedProps.disabled === true;
1481
- let optionsList = [];
1482
- const rawOptions = resolvedProps.options ?? props.options;
1483
- if (Array.isArray(rawOptions)) {
1484
- optionsList = rawOptions.map((opt) => {
1485
- if (typeof opt === "object" && opt !== null) {
1486
- const record = opt;
1487
- return {
1488
- label: String(record.label ?? record.value ?? ""),
1489
- value: String(record.value ?? record.label ?? "")
1490
- };
1491
- }
1492
- return { label: String(opt), value: String(opt) };
1493
- });
1494
- } else if (typeof rawOptions === "string") {
1495
- try {
1496
- const parsed = JSON.parse(rawOptions);
1497
- if (Array.isArray(parsed)) {
1498
- optionsList = parsed.map((opt) => {
1499
- if (typeof opt === "object" && opt !== null) {
1500
- const record = opt;
1501
- return {
1502
- label: String(record.label ?? record.value ?? ""),
1503
- value: String(record.value ?? record.label ?? "")
1504
- };
1505
- }
1506
- return { label: String(opt), value: String(opt) };
1507
- });
1508
- }
1509
- } catch {
1510
- }
1511
- }
1512
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1513
- "select",
1514
- {
1515
- id: domId,
1516
- name,
1517
- defaultValue,
1518
- required,
1519
- disabled,
1520
- style: styles,
1521
- onClick: handleClick,
1522
- "data-kubuild-node": node.id,
1523
- children: [
1524
- placeholder && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", disabled: required, children: placeholder }),
1525
- optionsList.map((opt, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: opt.value, children: opt.label }, `${opt.value}-${idx}`))
1526
- ]
1527
- }
1528
- );
1529
- }
1530
- case "checkbox": {
1531
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1532
- const label = String(resolvedProps.label ?? "Checkbox");
1533
- const value = resolvedProps.value !== void 0 ? String(resolvedProps.value) : "yes";
1534
- const defaultChecked = resolvedProps.defaultChecked === true;
1535
- const required = resolvedProps.required === true;
1536
- const disabled = resolvedProps.disabled === true;
1537
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.label);
1538
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1539
- "label",
1540
- {
1541
- id: domId,
1542
- style: styles,
1543
- onClick: handleClick,
1544
- "data-kubuild-node": node.id,
1545
- children: [
1546
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1547
- "input",
1548
- {
1549
- type: "checkbox",
1550
- name,
1551
- value,
1552
- defaultChecked,
1553
- required,
1554
- disabled,
1555
- style: { cursor: disabled ? "not-allowed" : "pointer" }
1556
- }
1557
- ),
1558
- isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1559
- EditableText,
1560
- {
1561
- as: "span",
1562
- value: label,
1563
- isEditable,
1564
- nodeId: node.id,
1565
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur)
1566
- }
1567
- ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
1568
- ]
1569
- }
1570
- );
1571
- }
1572
- case "radio": {
1573
- const name = typeof resolvedProps.name === "string" ? resolvedProps.name : void 0;
1574
- const label = String(resolvedProps.label ?? "Radio");
1575
- const value = resolvedProps.value !== void 0 ? String(resolvedProps.value) : "option";
1576
- const defaultChecked = resolvedProps.defaultChecked === true;
1577
- const required = resolvedProps.required === true;
1578
- const disabled = resolvedProps.disabled === true;
1579
- const isEditable = mode === "editor" && !(0, import_schema3.isVariableBinding)(props.label);
1580
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1581
- "label",
1582
- {
1583
- id: domId,
1584
- style: styles,
1585
- onClick: handleClick,
1586
- "data-kubuild-node": node.id,
1587
- children: [
1588
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1589
- "input",
1590
- {
1591
- type: "radio",
1592
- name,
1593
- value,
1594
- defaultChecked,
1595
- required,
1596
- disabled,
1597
- style: { cursor: disabled ? "not-allowed" : "pointer" }
1598
- }
1599
- ),
1600
- isEditable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1601
- EditableText,
1602
- {
1603
- as: "span",
1604
- value: label,
1605
- isEditable,
1606
- nodeId: node.id,
1607
- onChange: (val, isBlur) => onNodePropChange?.(node.id, "label", val, isBlur)
1608
- }
1609
- ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
1610
- ]
1611
- }
1612
- );
1613
- }
1614
- case "collection": {
1615
- const sourceKey = typeof props.sourceKey === "string" ? props.sourceKey : void 0;
1616
- const itemAlias = typeof props.itemAlias === "string" && props.itemAlias.length > 0 ? props.itemAlias : "item";
1617
- const indexKey = `${itemAlias}Index`;
1618
- const sourceValue = sourceKey ? (0, import_core3.resolveBinding)({ key: sourceKey }, context).value : void 0;
1619
- if (!Array.isArray(sourceValue)) {
1620
- const collectionDiagnostic = {
1621
- code: "INVALID_COLLECTION_SOURCE",
1622
- nodeId: node.id,
1623
- propName: "sourceKey",
1624
- message: `Collection node "${node.id}" expected an array at variable path "${sourceKey ?? "(missing sourceKey)"}" but found ${sourceValue === void 0 ? "nothing" : typeof sourceValue}.`
1625
- };
1626
- onDiagnostic?.(collectionDiagnostic);
1627
- context?.onDiagnostic?.(collectionDiagnostic);
1628
- if (mode === "editor") {
1629
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1630
- "div",
1631
- {
1632
- id: domId,
1633
- "data-kubuild-node": node.id,
1634
- "data-kubuild-collection-invalid": node.type,
1635
- style: {
1636
- ...styles,
1637
- border: "2px dashed #f59e0b",
1638
- backgroundColor: "#fffbeb",
1639
- color: "#92400e",
1640
- padding: "12px",
1641
- borderRadius: "6px",
1642
- fontFamily: "system-ui, -apple-system, sans-serif"
1643
- },
1644
- onClick: handleClick,
1645
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, fontSize: "13px" }, children: [
1646
- "\u{1F4E6} Collection: expected an array at ",
1647
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: sourceKey ?? "(missing sourceKey)" })
1648
- ] })
1649
- }
1650
- );
1651
- }
1652
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: domId, "data-kubuild-node": node.id, style: styles, onClick: handleClick, "aria-hidden": "true" });
1653
- }
1654
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: domId, "data-kubuild-node": node.id, style: styles, onClick: handleClick, children: sourceValue.map((item, index) => {
1655
- const childContext = {
1656
- ...context,
1657
- variables: { ...context?.variables ?? {}, [itemAlias]: item, [indexKey]: index }
1658
- };
1659
- const itemSuffix = `${instanceSuffix}--${index}`;
1660
- return node.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1661
- NodeRenderer,
1662
- {
1663
- node: child,
1664
- document,
1665
- registry,
1666
- context: childContext,
1667
- viewport,
1668
- mode,
1669
- onNodeClick,
1670
- onDiagnostic,
1671
- onActionDispatch,
1672
- onNodePropChange,
1673
- instanceSuffix: itemSuffix
1674
- },
1675
- `${child.id}${itemSuffix}`
1676
- ));
1677
- }) });
1678
- }
1679
- default:
1680
- if (mode === "editor") {
1681
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1682
- "div",
1683
- {
1684
- id: domId,
1685
- "data-kubuild-node": node.id,
1686
- "data-kubuild-unknown": node.type,
1687
- style: {
1688
- ...styles,
1689
- border: "2px dashed #f59e0b",
1690
- backgroundColor: "#fffbeb",
1691
- color: "#92400e",
1692
- padding: "12px",
1693
- borderRadius: "6px",
1694
- fontFamily: "system-ui, -apple-system, sans-serif"
1695
- },
1696
- onClick: handleClick,
1697
- children: [
1698
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, fontSize: "13px", marginBottom: "4px" }, children: [
1699
- "\u{1F9E9} Unknown Component: ",
1700
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: node.type })
1701
- ] }),
1702
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "11px", color: "#b45309", marginBottom: childrenElements ? "8px" : 0 }, children: [
1703
- "Node ID: ",
1704
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: node.id })
1705
- ] }),
1706
- childrenElements
1707
- ]
1708
- }
1709
- );
1710
- }
1711
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1712
- "div",
1713
- {
1714
- id: domId,
1715
- "data-kubuild-node": node.id,
1716
- "data-kubuild-unknown": node.type,
1717
- style: styles,
1718
- onClick: handleClick,
1719
- children: childrenElements
1720
- }
1721
- );
1722
- }
1723
- };
1724
- let content;
1725
- try {
1726
- content = renderNodeContent();
1727
- } catch (error) {
1728
- if (mode === "editor") {
1729
- content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1730
- "div",
1731
- {
1732
- "data-kubuild-node": node.id,
1733
- "data-kubuild-error": node.type,
1734
- style: {
1735
- padding: "12px 16px",
1736
- margin: "4px 0",
1737
- backgroundColor: "#fef2f2",
1738
- border: "1px solid #ef4444",
1739
- borderRadius: "6px",
1740
- color: "#b91c1c",
1741
- fontFamily: "system-ui, -apple-system, sans-serif",
1742
- fontSize: "13px",
1743
- lineHeight: "1.4"
1744
- },
1745
- children: [
1746
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: [
1747
- "\u26A0\uFE0F Component Render Error: <",
1748
- node.type,
1749
- ">"
1750
- ] }),
1751
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "11px", color: "#7f1d1d", wordBreak: "break-all" }, children: [
1752
- "Node ID: ",
1753
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: node.id }),
1754
- " \u2014 ",
1755
- error instanceof Error ? error.message : String(error)
1756
- ] })
1757
- ]
1758
- }
1759
- );
1760
- } else {
1761
- content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1762
- "div",
1763
- {
1764
- "data-kubuild-node": node.id,
1765
- "data-kubuild-error": node.type,
1766
- style: { display: "none" },
1767
- "aria-hidden": "true"
1768
- }
1769
- );
1770
- }
1771
- }
1772
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComponentErrorBoundary, { nodeId: node.id, componentType: node.type, mode, children: content });
62
+ @keyframes kb-anim-slide-down {
63
+ from { transform: translateY(-100%); }
64
+ to { transform: translateY(0); }
65
+ }
66
+ @keyframes kb-anim-slide-left {
67
+ from { transform: translateX(100%); }
68
+ to { transform: translateX(0); }
69
+ }
70
+ @keyframes kb-anim-slide-right {
71
+ from { transform: translateX(-100%); }
72
+ to { transform: translateX(0); }
73
+ }
74
+ @keyframes kb-anim-flip-up {
75
+ from { opacity: 0; transform: perspective(600px) rotateX(45deg); }
76
+ to { opacity: 1; transform: perspective(600px) rotateX(0deg); }
77
+ }
78
+ @keyframes kb-anim-flip-down {
79
+ from { opacity: 0; transform: perspective(600px) rotateX(-45deg); }
80
+ to { opacity: 1; transform: perspective(600px) rotateX(0deg); }
1773
81
  }
1774
- var KubuildRenderer = ({
1775
- document,
1776
- registry = (0, import_components2.createDefaultComponentRegistry)(),
1777
- context,
1778
- viewport = "desktop",
1779
- mode = "runtime",
1780
- className,
1781
- onNodeClick,
1782
- onDiagnostic,
1783
- onActionDispatch,
1784
- onNodePropChange
1785
- }) => {
1786
- if (!document || !document.document) {
1787
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: "Empty Document" });
1788
- }
1789
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderContextProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `kubuild-canvas-root ${className || ""}`, children: [
1790
- (() => {
1791
- const css = collectStateStylesCss(document);
1792
- return css ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { "data-kubuild-state-styles": true, children: css }) : null;
1793
- })(),
1794
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1795
- NodeRenderer,
1796
- {
1797
- node: document.document,
1798
- document,
1799
- registry,
1800
- context,
1801
- viewport,
1802
- mode,
1803
- onNodeClick,
1804
- onDiagnostic,
1805
- onActionDispatch,
1806
- onNodePropChange
1807
- }
1808
- )
1809
- ] }) });
1810
- };
1811
82
 
1812
- // src/preview-adapter.tsx
1813
- var import_react4 = require("react");
1814
- var import_jsx_runtime4 = require("react/jsx-runtime");
1815
- var DEFAULT_VIEWPORT_CONFIGS = Object.freeze({
1816
- desktop: {
1817
- width: "100%",
1818
- maxWidth: "1280px",
1819
- minHeight: "600px",
1820
- label: "Desktop (1280px)",
1821
- isFluid: true
1822
- },
1823
- tablet: {
1824
- width: "768px",
1825
- height: "1024px",
1826
- minHeight: "600px",
1827
- label: "Tablet (768 \xD7 1024)",
1828
- isFluid: false
1829
- },
1830
- mobile: {
1831
- width: "375px",
1832
- height: "667px",
1833
- minHeight: "500px",
1834
- label: "Mobile (375 \xD7 667)",
1835
- isFluid: false
1836
- }
1837
- });
1838
- var DEFAULT_BREAKPOINTS = Object.freeze({
1839
- mobile: 480,
1840
- tablet: 768,
1841
- desktop: 1024
1842
- });
1843
- function resolveViewportFromWidth(width, breakpoints) {
1844
- const resolved = { ...DEFAULT_BREAKPOINTS, ...breakpoints };
1845
- if (width <= resolved.mobile) {
1846
- return "mobile";
1847
- }
1848
- if (width <= resolved.tablet) {
1849
- return "tablet";
1850
- }
1851
- return "desktop";
83
+ /* Continuous Loop Keyframes */
84
+ @keyframes kb-loop-pulse {
85
+ 0%, 100% { transform: scale(1); opacity: 1; }
86
+ 50% { transform: scale(1.05); opacity: 0.9; }
87
+ }
88
+ @keyframes kb-loop-bounce {
89
+ 0%, 100% { transform: translateY(0); }
90
+ 50% { transform: translateY(-8px); }
91
+ }
92
+ @keyframes kb-loop-spin {
93
+ from { transform: rotate(0deg); }
94
+ to { transform: rotate(360deg); }
1852
95
  }
1853
- function resolveViewportDimensions(viewport, customConfigs) {
1854
- const baseConfig = DEFAULT_VIEWPORT_CONFIGS[viewport] || DEFAULT_VIEWPORT_CONFIGS.desktop;
1855
- const custom = customConfigs?.[viewport];
1856
- return { ...baseConfig, ...custom };
96
+ @keyframes kb-loop-float {
97
+ 0%, 100% { transform: translateY(0); }
98
+ 50% { transform: translateY(-6px); }
1857
99
  }
1858
- function resolveViewportContainerStyle(viewport, customConfigs, customScale) {
1859
- const config = resolveViewportDimensions(viewport, customConfigs);
1860
- const scale = customScale ?? config.scale ?? 1;
1861
- const toCssVal = (v) => typeof v === "number" ? `${v}px` : v;
1862
- const style = {
1863
- width: toCssVal(config.width),
1864
- maxWidth: toCssVal(config.maxWidth),
1865
- minWidth: toCssVal(config.minWidth),
1866
- height: toCssVal(config.height),
1867
- minHeight: toCssVal(config.minHeight),
1868
- maxHeight: toCssVal(config.maxHeight),
1869
- aspectRatio: config.aspectRatio,
1870
- transition: "width 0.2s ease, max-width 0.2s ease, height 0.2s ease"
1871
- };
1872
- if (scale !== 1) {
1873
- style.transform = `scale(${scale})`;
1874
- style.transformOrigin = "top center";
1875
- }
1876
- return style;
100
+ @keyframes kb-loop-shimmer {
101
+ 0%, 100% { opacity: 0.75; }
102
+ 50% { opacity: 1; }
1877
103
  }
1878
- var PreviewViewportAdapter = ({
1879
- document,
1880
- viewport = "desktop",
1881
- onViewportChange,
1882
- viewportConfigs,
1883
- breakpoints,
1884
- registry,
1885
- context,
1886
- mode = "runtime",
1887
- showChrome = false,
1888
- chromeTitle,
1889
- editorOverlay,
1890
- scale,
1891
- className,
1892
- style,
1893
- canvasClassName,
1894
- canvasStyle,
1895
- onNodeClick,
1896
- onDiagnostic,
1897
- onActionDispatch
1898
- }) => {
1899
- const currentConfig = (0, import_react4.useMemo)(
1900
- () => resolveViewportDimensions(viewport, viewportConfigs),
1901
- [viewport, viewportConfigs]
1902
- );
1903
- const containerStyle = (0, import_react4.useMemo)(
1904
- () => resolveViewportContainerStyle(viewport, viewportConfigs, scale),
1905
- [viewport, viewportConfigs, scale]
1906
- );
1907
- const mergedCanvasStyle = (0, import_react4.useMemo)(
1908
- () => ({
1909
- ...containerStyle,
1910
- ...canvasStyle,
1911
- position: "relative",
1912
- boxSizing: "border-box"
1913
- }),
1914
- [containerStyle, canvasStyle]
1915
- );
1916
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
1917
- "div",
1918
- {
1919
- "data-kubuild-preview-container": true,
1920
- "data-viewport": viewport,
1921
- className: `kubuild-preview-viewport-adapter ${className || ""}`,
1922
- style: {
1923
- display: "flex",
1924
- flexDirection: "column",
1925
- alignItems: "center",
1926
- justifyContent: "flex-start",
1927
- width: "100%",
1928
- height: "100%",
1929
- boxSizing: "border-box",
1930
- ...style
1931
- },
1932
- children: [
1933
- showChrome && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
1934
- "div",
1935
- {
1936
- "data-kubuild-preview-chrome": true,
1937
- style: {
1938
- display: "flex",
1939
- alignItems: "center",
1940
- justifyContent: "space-between",
1941
- width: "100%",
1942
- maxWidth: containerStyle.maxWidth || containerStyle.width,
1943
- padding: "8px 12px",
1944
- marginBottom: "8px",
1945
- backgroundColor: "#1e293b",
1946
- color: "#f8fafc",
1947
- borderRadius: "8px",
1948
- fontSize: "12px",
1949
- fontFamily: "system-ui, -apple-system, sans-serif",
1950
- boxSizing: "border-box"
1951
- },
1952
- children: [
1953
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1954
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontWeight: 600 }, children: chromeTitle || document.metadata?.title || "Preview" }),
1955
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1956
- "span",
1957
- {
1958
- "data-testid": "viewport-badge",
1959
- style: {
1960
- fontSize: "10px",
1961
- padding: "2px 6px",
1962
- borderRadius: "4px",
1963
- backgroundColor: "#334155",
1964
- color: "#94a3b8",
1965
- textTransform: "uppercase",
1966
- fontWeight: 700
1967
- },
1968
- children: viewport
1969
- }
1970
- ),
1971
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "11px", color: "#64748b" }, children: currentConfig.label || `${currentConfig.width} \xD7 ${currentConfig.height || "auto"}` })
1972
- ] }),
1973
- onViewportChange && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1974
- "div",
1975
- {
1976
- "data-testid": "viewport-switcher",
1977
- style: { display: "flex", gap: "4px", backgroundColor: "#0f172a", padding: "2px", borderRadius: "6px" },
1978
- children: ["desktop", "tablet", "mobile"].map((device) => {
1979
- const isActive = viewport === device;
1980
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1981
- "button",
1982
- {
1983
- type: "button",
1984
- "data-testid": `viewport-btn-${device}`,
1985
- onClick: () => onViewportChange(device),
1986
- style: {
1987
- padding: "4px 10px",
1988
- fontSize: "11px",
1989
- fontWeight: 500,
1990
- borderRadius: "4px",
1991
- border: "none",
1992
- cursor: "pointer",
1993
- textTransform: "capitalize",
1994
- backgroundColor: isActive ? "#3b82f6" : "transparent",
1995
- color: isActive ? "#ffffff" : "#94a3b8",
1996
- transition: "all 0.15s ease"
1997
- },
1998
- children: device
1999
- },
2000
- device
2001
- );
2002
- })
2003
- }
2004
- )
2005
- ]
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}
105
+
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);
2006
112
  }
2007
- ),
2008
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
2009
- "div",
2010
- {
2011
- "data-kubuild-preview-canvas": true,
2012
- "data-viewport": viewport,
2013
- className: `kubuild-preview-canvas ${canvasClassName || ""}`,
2014
- style: mergedCanvasStyle,
2015
- children: [
2016
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2017
- KubuildRenderer,
2018
- {
2019
- document,
2020
- registry,
2021
- context,
2022
- viewport,
2023
- mode,
2024
- onNodeClick,
2025
- onDiagnostic,
2026
- onActionDispatch
2027
- }
2028
- ),
2029
- editorOverlay && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2030
- "div",
2031
- {
2032
- "data-kubuild-preview-overlay": true,
2033
- style: {
2034
- position: "absolute",
2035
- top: 0,
2036
- left: 0,
2037
- right: 0,
2038
- bottom: 0,
2039
- pointerEvents: "none",
2040
- zIndex: 10
2041
- },
2042
- children: editorOverlay
2043
- }
2044
- )
2045
- ]
113
+ to {
114
+ opacity: 1;
115
+ transform: translateY(0) scale(1);
2046
116
  }
2047
- )
2048
- ]
2049
- }
2050
- );
2051
- };
2052
- var KubuildPreviewViewport = PreviewViewportAdapter;
2053
- // Annotate the CommonJS export names for ESM import in node:
2054
- 0 && (module.exports = {
2055
- ComponentErrorBoundary,
2056
- DEFAULT_BREAKPOINTS,
2057
- DEFAULT_CSS_RESET,
2058
- DEFAULT_RENDER_CONTEXT,
2059
- DEFAULT_VIEWPORT_CONFIGS,
2060
- EditableText,
2061
- HtmlEmbedView,
2062
- KubuildPreviewViewport,
2063
- KubuildRenderer,
2064
- NodeRenderer,
2065
- PreviewViewportAdapter,
2066
- RenderContextProvider,
2067
- collectStateStylesCss,
2068
- createMinimalRenderContext,
2069
- createRenderContext,
2070
- dispatchAction,
2071
- isActionRegistered,
2072
- resolveActionPayload,
2073
- resolveActionPayloadDetailed,
2074
- resolveAssetSync,
2075
- resolveNodeStyles,
2076
- resolveVariable,
2077
- resolveViewportContainerStyle,
2078
- resolveViewportDimensions,
2079
- resolveViewportFromWidth,
2080
- styleDefinitionToCssDeclarations,
2081
- transformEmbedHtml,
2082
- useRenderContext
2083
- });
2084
- //# sourceMappingURL=index.cjs.map
117
+ }
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(`/* ==========================================================================
178
+ Baseline Reset & Typography Standards
179
+ ========================================================================== */
180
+ ${_e}`),n.length>0&&u.push(`/* ==========================================================================
181
+ Component Styles
182
+ ========================================================================== */
183
+ ${n.join(`
184
+
185
+ `)}`),f.length>0&&u.push(`/* ==========================================================================
186
+ Interactive & Hover States
187
+ ========================================================================== */
188
+ ${f.join(`
189
+
190
+ `)}`),t.length>0&&u.push(`/* ==========================================================================
191
+ Tablet Breakpoint (max-width: 1024px)
192
+ ========================================================================== */
193
+ @media (max-width: 1024px) {
194
+ ${t.join(`
195
+
196
+ `)}
197
+ }`),l.length>0&&u.push(`/* ==========================================================================
198
+ Mobile Breakpoint (max-width: 640px)
199
+ ========================================================================== */
200
+ @media (max-width: 640px) {
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(`/* ==========================================================================
205
+ Animations & Motion Keyframes
206
+ ========================================================================== */
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}">
213
+ <head>
214
+ <meta charset="UTF-8">
215
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
216
+ <title>${i}</title>
217
+ ${p}${u} <style>
218
+ ${l}
219
+ </style>
220
+ </head>
221
+ <body>
222
+ ${f}
223
+ </body>
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});