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