@fluid-app/portal-sdk 0.1.369 → 0.1.371

package/dist/vite/builder-preview-entry.cjs

@@ -0,0 +1,573 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-9hOWP6kD.cjs");
+const require_src = require("../src-DCYVQ8hc.cjs");
+const require_authoring = require("../authoring-BBlBGYC5.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let react_dom_client = require("react-dom/client");
+//#region ../preview/src/components/WidgetSidebar.tsx
+function WidgetSidebar({ widgets, selectedIndex, onSelect }) {
+	const [isDark, setIsDark] = (0, react.useState)(() => document.documentElement.getAttribute("data-theme-mode") === "dark");
+	const toggleTheme = (0, react.useCallback)(() => {
+		const next = !isDark;
+		setIsDark(next);
+		document.documentElement.setAttribute("data-theme-mode", next ? "dark" : "light");
+	}, [isDark]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		className: "flex flex-col overflow-y-auto border-r border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-900",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-4 flex items-center justify-between border-b border-zinc-200 pb-3 dark:border-zinc-700",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+					className: "text-foreground text-[15px] font-bold",
+					children: "Custom Widget Preview"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					onClick: toggleTheme,
+					className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center rounded-md border-none bg-zinc-200 p-1.5 transition-colors dark:bg-zinc-700",
+					title: isDark ? "Switch to light mode" : "Switch to dark mode",
+					children: isDark ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "size-3.5" })
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground mb-2 text-[11px] font-semibold tracking-wider uppercase",
+				children: "Widgets"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ScrollArea, {
+				className: "min-h-0 flex-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-col gap-0.5",
+					children: widgets.map((w, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						onClick: () => onSelect(i),
+						className: `w-full cursor-pointer rounded-lg border px-3 py-2.5 text-left transition-colors ${i === selectedIndex ? "border-zinc-200 bg-white shadow-sm dark:border-zinc-600 dark:bg-zinc-800" : "border-transparent bg-transparent hover:bg-zinc-100 dark:hover:bg-zinc-800"}`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-foreground block text-[13px] font-medium",
+							children: w.displayName
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-muted-foreground mt-0.5 block text-[11px]",
+							children: w.type
+						})]
+					}, w.type))
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region ../preview/src/components/PreviewCanvas.tsx
+/** Catches render errors in widget code so the rest of the preview stays usable. */
+var WidgetErrorBoundary = class extends react.Component {
+	state = { error: null };
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidCatch(error, info) {
+		console.error("[builder-preview] Widget render error:", error, info);
+	}
+	render() {
+		if (this.state.error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rounded-lg border border-red-200 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mb-3 flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { className: "size-4 shrink-0 text-red-600 dark:text-red-400" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-sm font-semibold text-red-800 dark:text-red-300",
+						children: "Widget render error"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+					className: "mb-4 font-mono text-[13px] break-words whitespace-pre-wrap text-red-700 dark:text-red-400",
+					children: this.state.error.message
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+					variant: "outline",
+					size: "sm",
+					className: "border-red-200 text-red-800 hover:bg-red-100 dark:border-red-800 dark:text-red-300 dark:hover:bg-red-900",
+					onClick: () => {
+						this.setState({ error: null });
+						this.props.onRetry();
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RotateCcw, { className: "mr-1.5 size-3" }), "Retry"]
+				})
+			]
+		});
+		return this.props.children;
+	}
+};
+function PreviewCanvas({ widgetType, displayName, description, component: Component, props, onRetry }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
+		className: "flex flex-col overflow-hidden bg-zinc-100 dark:bg-zinc-800",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "border-b border-zinc-200 px-6 py-3.5 dark:border-zinc-700",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-foreground text-base font-semibold",
+				children: displayName
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-muted-foreground mt-0.5 text-xs",
+				children: description
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ScrollArea, {
+			className: "min-h-0 flex-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-full p-6",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetErrorBoundary, {
+					onRetry: onRetry ?? (() => {}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...props })
+				}, widgetType)
+			})
+		})]
+	});
+}
+//#endregion
+//#region ../preview/src/components/ScrubNumberField.tsx
+function ScrubNumberField({ label, value, min, max, step, onChange, shaded }) {
+	const [isDragging, setIsDragging] = (0, react.useState)(false);
+	const [isEditing, setIsEditing] = (0, react.useState)(false);
+	const dragRef = (0, react.useRef)({
+		x: 0,
+		startValue: 0
+	});
+	const containerRef = (0, react.useRef)(null);
+	const range = max - min;
+	const pct = range > 0 ? Math.min(100, Math.max(0, (value - min) / range * 100)) : 0;
+	const isOutOfRange = value < min || value > max;
+	const handlePointerDown = (0, react.useCallback)((e) => {
+		if (isEditing) return;
+		e.preventDefault();
+		containerRef.current?.setPointerCapture(e.pointerId);
+		dragRef.current = {
+			x: e.clientX,
+			startValue: value
+		};
+		setIsDragging(true);
+	}, [value, isEditing]);
+	const handlePointerMove = (0, react.useCallback)((e) => {
+		if (!isDragging) return;
+		const dx = e.clientX - dragRef.current.x;
+		const pxPerUnit = 300 / (range || 1);
+		const rawVal = dragRef.current.startValue + dx / pxPerUnit;
+		const rounded = Math.round(rawVal / step) * step;
+		onChange(Number(rounded.toFixed(step < 1 ? 2 : 0)));
+	}, [
+		isDragging,
+		step,
+		range,
+		onChange
+	]);
+	const handlePointerUp = (0, react.useCallback)((e) => {
+		if (isDragging) {
+			containerRef.current?.releasePointerCapture(e.pointerId);
+			setIsDragging(false);
+		}
+	}, [isDragging]);
+	const handleValueClick = (0, react.useCallback)((e) => {
+		e.stopPropagation();
+		setIsEditing(true);
+	}, []);
+	const commitInput = (0, react.useCallback)((raw) => {
+		const parsed = Number(raw) || 0;
+		onChange(Math.min(max, Math.max(min, parsed)));
+	}, [
+		onChange,
+		min,
+		max
+	]);
+	const handleInputBlur = (0, react.useCallback)((e) => {
+		setIsEditing(false);
+		commitInput(e.target.value);
+	}, [commitInput]);
+	const handleInputKeyDown = (0, react.useCallback)((e) => {
+		if (e.key === "Enter") {
+			setIsEditing(false);
+			commitInput(e.target.value);
+		}
+		if (e.key === "Escape") setIsEditing(false);
+	}, [commitInput]);
+	const rowBg = shaded ? "bg-zinc-200/80 dark:bg-zinc-700/80" : "bg-zinc-100 dark:bg-zinc-800";
+	const fillBg = shaded ? "bg-zinc-300 dark:bg-zinc-500" : "bg-zinc-300/80 dark:bg-zinc-600";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		className: `bp-scrub-row relative min-h-10 overflow-hidden rounded-lg ${rowBg}`,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerUp,
+		style: {
+			cursor: isEditing ? "text" : "ew-resize",
+			touchAction: "none"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `pointer-events-none absolute top-0 left-0 h-full transition-[width] duration-[50ms] ease-out ${fillBg}`,
+			style: { width: `${pct}%` }
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative flex min-h-10 w-full items-center justify-between px-3.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-foreground relative z-[1] text-[13px] font-medium whitespace-nowrap",
+				children: label
+			}), isEditing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "number",
+				defaultValue: value,
+				onBlur: handleInputBlur,
+				onKeyDown: handleInputKeyDown,
+				className: "bp-number-input text-foreground focus:border-primary relative z-[1] w-[72px] shrink-0 rounded-md border border-zinc-300 bg-zinc-100 px-2 py-1 text-right font-mono text-[13px] outline-none dark:border-zinc-600 dark:bg-zinc-800",
+				autoFocus: true,
+				step,
+				onPointerDown: (e) => e.stopPropagation(),
+				style: { cursor: "text" }
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `relative z-[1] min-w-12 shrink-0 cursor-text rounded px-2 py-0.5 pr-3.5 text-right font-mono text-[13px] whitespace-nowrap transition-colors hover:bg-black/5 dark:hover:bg-white/10 ${isOutOfRange ? "text-amber-500" : "text-muted-foreground"}`,
+				role: "button",
+				tabIndex: 0,
+				onClick: handleValueClick,
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						e.stopPropagation();
+						setIsEditing(true);
+					}
+				},
+				onPointerDown: (e) => e.stopPropagation(),
+				children: step < 1 ? value.toFixed(2) : Math.round(value)
+			})]
+		})]
+	});
+}
+//#endregion
+//#region ../preview/src/components/FieldRow.tsx
+function FieldRow({ field, value, onChange, shaded }) {
+	const rowClass = `flex items-center justify-between px-3.5 min-h-10 rounded-lg relative transition-colors ${shaded ? "bg-zinc-200/80 hover:bg-zinc-200 dark:bg-zinc-700/80 dark:hover:bg-zinc-700" : "bg-zinc-100 hover:bg-zinc-200/60 dark:bg-zinc-800 dark:hover:bg-zinc-700/60"}`;
+	if (field.type === "boolean") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `${rowClass} cursor-pointer`,
+		role: "button",
+		tabIndex: 0,
+		onClick: () => onChange(!value),
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onChange(!value);
+			}
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-muted-foreground mr-3 shrink-0 text-[13px] font-medium whitespace-nowrap",
+			children: field.label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors ${value ? "justify-end bg-zinc-900 dark:bg-indigo-500" : "justify-start bg-zinc-300 dark:bg-zinc-500"}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-4 rounded-full bg-white shadow-sm" })
+		})]
+	});
+	if (field.type === "select" && field.options) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: rowClass,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-muted-foreground mr-3 shrink-0 text-[13px] font-medium whitespace-nowrap",
+			children: field.label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+				value: String(value ?? ""),
+				onChange: (e) => {
+					const raw = e.target.value;
+					onChange(typeof value === "number" ? Number(raw) : raw);
+				},
+				className: "bp-select text-foreground cursor-pointer rounded-md bg-transparent px-2 py-1 pr-5 text-[13px] font-normal transition-colors outline-none focus:bg-zinc-200 dark:focus:bg-zinc-700",
+				children: field.options.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: opt.value,
+					children: opt.label
+				}, opt.value))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				className: "text-muted-foreground pointer-events-none -ml-4 shrink-0",
+				width: "10",
+				height: "10",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2.5",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 9l6 6 6-6" })
+			})]
+		})]
+	});
+	if (field.type === "number") {
+		const num = Number(value ?? 0);
+		const step = field.step ?? 1;
+		if (field.min != null && field.max != null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrubNumberField, {
+			label: field.label,
+			value: num,
+			min: field.min,
+			max: field.max,
+			step,
+			onChange: (v) => onChange(v),
+			shaded
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: rowClass,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-muted-foreground mr-3 shrink-0 text-[13px] font-medium whitespace-nowrap",
+				children: field.label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "number",
+				value: num,
+				onChange: (e) => onChange(e.target.value ? Number(e.target.value) : 0),
+				step,
+				className: "bp-number-input text-foreground focus:border-primary w-[72px] shrink-0 rounded-md border border-zinc-300 bg-transparent px-2 py-1 text-right font-mono text-[13px] outline-none dark:border-zinc-600"
+			})]
+		});
+	}
+	if (field.type === "color" || field.type === "colorPicker" || field.type === "text" && /color|tint|background|fill/i.test(field.label + field.key)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorField, {
+		field,
+		value,
+		onChange,
+		rowClass
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: rowClass,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-muted-foreground mr-3 shrink-0 text-[13px] font-medium whitespace-nowrap",
+			children: field.label
+		}), field.type === "textarea" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+			value: String(value ?? ""),
+			onChange: (e) => onChange(e.target.value),
+			className: "text-foreground min-h-14 w-[55%] min-w-20 resize-y rounded-md bg-transparent px-2 py-1 text-right text-[13px] transition-colors outline-none focus:bg-zinc-200 dark:focus:bg-zinc-700"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "text",
+			value: String(value ?? ""),
+			onChange: (e) => onChange(e.target.value),
+			className: "text-foreground w-[55%] min-w-20 rounded-md bg-transparent px-2 py-1 text-right text-[13px] transition-colors outline-none focus:bg-zinc-200 dark:focus:bg-zinc-700"
+		})]
+	});
+}
+/**
+* Color field with local state for the picker.
+* The native <input type="color"> fires onChange on every pixel drag.
+* We use local state for the live swatch preview and only commit to
+* the parent on text input change or when the picker closes (change event
+* on the hidden input fires on mouseup/close).
+*/
+function ColorField({ field, value, onChange, rowClass }) {
+	const pickerRef = (0, react.useRef)(null);
+	const colorVal = String(value ?? "#000000");
+	const normalized = /^#?[0-9a-fA-F]{3,8}$/.test(colorVal) ? colorVal.startsWith("#") ? colorVal : `#${colorVal}` : "#000000";
+	const [localColor, setLocalColor] = (0, react.useState)(normalized);
+	const isDragging = (0, react.useRef)(false);
+	if (!isDragging.current && localColor !== normalized) setLocalColor(normalized);
+	const handleTextChange = (0, react.useCallback)((e) => {
+		onChange(e.target.value);
+	}, [onChange]);
+	const handlePickerInput = (0, react.useCallback)((e) => {
+		isDragging.current = true;
+		setLocalColor(e.target.value);
+	}, []);
+	const handlePickerChange = (0, react.useCallback)((e) => {
+		isDragging.current = false;
+		onChange(e.target.value);
+	}, [onChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: rowClass,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-muted-foreground mr-3 shrink-0 text-[13px] font-medium whitespace-nowrap",
+			children: field.label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "text",
+					value: colorVal,
+					onChange: handleTextChange,
+					className: "text-foreground w-20 rounded-md bg-transparent px-2 py-1 text-right text-[13px] transition-colors outline-none focus:bg-zinc-200 dark:focus:bg-zinc-700"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "h-[22px] w-[22px] shrink-0 cursor-pointer rounded border-2 border-zinc-300 transition-colors hover:border-zinc-400 focus:border-zinc-400 focus:outline-none dark:border-zinc-600 dark:hover:border-zinc-500 dark:focus:border-zinc-500",
+					style: { background: localColor },
+					role: "button",
+					tabIndex: 0,
+					"aria-label": "Pick color",
+					onClick: () => pickerRef.current?.click(),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							pickerRef.current?.click();
+						}
+					}
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: pickerRef,
+					type: "color",
+					value: localColor,
+					onInput: handlePickerInput,
+					onChange: handlePickerChange,
+					className: "pointer-events-none absolute size-0 opacity-0"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region ../preview/src/components/CopyJsonButton.tsx
+function CopyJsonButton({ widgetType, props }) {
+	const [copied, setCopied] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		onClick: (0, react.useCallback)(() => {
+			const json = JSON.stringify({
+				type: widgetType,
+				props
+			}, null, 2);
+			navigator.clipboard.writeText(json).then(() => {
+				setCopied(true);
+				setTimeout(() => setCopied(false), 2e3);
+			}, () => {});
+		}, [widgetType, props]),
+		className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center rounded border-none bg-transparent p-1 transition-colors",
+		title: "Copy Current Widget JSON",
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3.5 text-green-500" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
+	});
+}
+//#endregion
+//#region ../preview/src/components/PropertyPanel.tsx
+function PropertyPanel({ displayName, widgetType, fields, props, onFieldChange, onReset }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col overflow-y-auto bg-zinc-100 p-3 dark:bg-zinc-800",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+			className: "flex min-h-0 flex-1 flex-col overflow-y-auto rounded-[14px] border border-zinc-200 bg-white shadow-[0_4px_24px_rgba(0,0,0,0.06),0_1px_4px_rgba(0,0,0,0.03)] dark:border-zinc-700 dark:bg-zinc-900",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between border-b border-zinc-200 px-[18px] py-4 dark:border-zinc-700",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-foreground text-[15px] font-bold",
+					children: displayName
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyJsonButton, {
+						widgetType,
+						props
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						onClick: onReset,
+						className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center rounded border-none bg-transparent p-1 transition-colors",
+						title: "Reset",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RotateCcw, { className: "size-3.5" })
+					})]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-col gap-2.5 p-3.5",
+				children: fields.map((field, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
+					field,
+					value: props[field.key],
+					onChange: (val) => onFieldChange(field.key, val),
+					shaded: i % 2 === 1
+				}, field.key))
+			})]
+		})
+	});
+}
+//#endregion
+//#region ../preview/src/BuilderPreviewApp.tsx
+const MemoizedSidebar = (0, react.memo)(WidgetSidebar);
+const MemoizedCanvas = (0, react.memo)(PreviewCanvas);
+const MemoizedPropertyPanel = (0, react.memo)(PropertyPanel);
+/**
+* Standalone widget preview page.
+*
+* Three-panel layout: widget list, live preview, property editor.
+* No auth, no fluid-admin, no iframe — just `pnpm dev` and open /builder-preview.
+*/
+function BuilderPreviewApp({ widgets }) {
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+	const selected = widgets[selectedIndex];
+	const [props, setProps] = (0, react.useState)(selected?.defaultProps ?? {});
+	const defaultPropsKey = selected ? JSON.stringify(selected.defaultProps) : "";
+	(0, react.useEffect)(() => {
+		if (selected) setProps(selected.defaultProps ?? {});
+	}, [selected?.type, defaultPropsKey]);
+	const handleSelectWidget = (0, react.useCallback)((index) => {
+		setSelectedIndex(index);
+		setProps(widgets[index]?.defaultProps ?? {});
+	}, [widgets]);
+	const handleFieldChange = (0, react.useCallback)((key, value) => {
+		setProps((prev) => ({
+			...prev,
+			[key]: value
+		}));
+	}, []);
+	const handleReset = (0, react.useCallback)(() => {
+		setProps(selected?.defaultProps ?? {});
+	}, [selected]);
+	const fields = (0, react.useMemo)(() => selected?.propertySchema?.fields ?? [], [selected?.propertySchema?.fields]);
+	if (widgets.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "text-muted-foreground flex h-screen flex-col items-center justify-center gap-3",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Puzzle, { className: "size-10 text-zinc-300 dark:text-zinc-600" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "text-foreground text-xl font-bold",
+				children: "Custom Widget Preview"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "text-sm",
+				children: [
+					"No widgets found. Add widgets to",
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+						className: "rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs dark:bg-zinc-800",
+						children: "customWidgets"
+					}),
+					" ",
+					"in",
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+						className: "rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs dark:bg-zinc-800",
+						children: "src/portal.config.ts"
+					}),
+					", or run:"
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+				className: "text-foreground rounded-lg bg-zinc-100 px-4 py-2 font-mono text-sm dark:bg-zinc-800",
+				children: "fluid widget create my-widget"
+			})
+		]
+	});
+	if (!selected) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "No widget selected" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "grid h-screen grid-cols-[220px_1fr_320px] overflow-hidden max-[900px]:grid-cols-1 max-[900px]:grid-rows-[auto_1fr_auto] min-[901px]:max-[1200px]:grid-cols-[180px_1fr_280px]",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedSidebar, {
+				widgets,
+				selectedIndex,
+				onSelect: handleSelectWidget
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedCanvas, {
+				widgetType: selected.type,
+				displayName: selected.displayName,
+				description: selected.description,
+				component: selected.component,
+				props,
+				onRetry: handleReset
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedPropertyPanel, {
+				displayName: selected.displayName,
+				widgetType: selected.type,
+				fields,
+				props,
+				onFieldChange: handleFieldChange,
+				onReset: handleReset
+			})
+		]
+	});
+}
+//#endregion
+//#region src/vite/builder-preview-entry.tsx
+function renderBuilderPreview(portalConfig) {
+	const sourcePackageExports = [];
+	const seenSourcePackageIds = /* @__PURE__ */ new Set();
+	for (const candidate of [
+		portalConfig.widgetPackage,
+		...Array.isArray(portalConfig.widgetPackages) ? portalConfig.widgetPackages : [],
+		portalConfig.default
+	]) {
+		if (!require_authoring.isSourceWidgetPackage(candidate) || seenSourcePackageIds.has(candidate.packageId)) continue;
+		seenSourcePackageIds.add(candidate.packageId);
+		sourcePackageExports.push(candidate);
+	}
+	const widgets = [...Array.isArray(portalConfig.customWidgets) ? portalConfig.customWidgets : [], ...require_authoring.sourceWidgetPackagesToManifests(sourcePackageExports)];
+	const root = document.getElementById("builder-preview-root");
+	if (root) (0, react_dom_client.createRoot)(root).render((0, react.createElement)(BuilderPreviewApp, { widgets }));
+}
+//#endregion
+exports.renderBuilderPreview = renderBuilderPreview;
+
+//# sourceMappingURL=builder-preview-entry.cjs.map