@widgetic/creator 0.3.50 → 0.3.51

package/dist/CreatorApp.svelte.d.ts

@@ -25,6 +25,7 @@ declare const CreatorApp: $$__sveltets_2_IsomorphicComponent<{
     apiUrl?: CreatorAppProps["apiUrl"];
     widgetBuilderUrl?: CreatorAppProps["widgetBuilderUrl"];
     initialDebugMode?: CreatorAppProps["initialDebugMode"];
+    initialAdvancedFeatures?: CreatorAppProps["initialAdvancedFeatures"];
     defaultCoderModelId?: CreatorAppProps["defaultCoderModelId"];
     defaultPlannerModelId?: CreatorAppProps["defaultPlannerModelId"];
     showWidgetsList?: CreatorAppProps["showWidgetsList"];

package/dist/components/WidgetDetails.svelte

@@ -868,6 +868,8 @@
 	const LEFT_COL_DEFAULT_PERCENT = 58;
 	const LEFT_COL_MIN_PERCENT = 32;
 	const LEFT_COL_MAX_PERCENT = 72;
+	const COL_RESIZER_PX = 10;
+	const PREVIEW_COL_MIN_PX = 240;
 	/** Chat-first layout: preview column starts collapsed and opens on generate. */
 	let previewColumnCollapsed = true;
 	let lastAutoExpandForGenerating = false;
@@ -891,6 +893,23 @@
 		expandPreviewColumn();
 	}
 
+	function maxLeftColPercent(): number {
+		const twoCol =
+			typeof document !== 'undefined'
+				? (document.querySelector('.widget-details-two-col') as HTMLElement | null)
+				: null;
+		const width = twoCol?.clientWidth || detailsPanelWidth || DETAILS_PANEL_DEFAULT_WIDTH;
+		if (width <= 0) return LEFT_COL_MAX_PERCENT;
+		const maxLeftPx = Math.max(160, width - COL_RESIZER_PX - PREVIEW_COL_MIN_PX);
+		return Math.min(LEFT_COL_MAX_PERCENT, (maxLeftPx / width) * 100);
+	}
+
+	function clampLeftColPercent(percent: number): number {
+		const maxP = maxLeftColPercent();
+		const minP = Math.min(LEFT_COL_MIN_PERCENT, maxP);
+		return Math.min(maxP, Math.max(minP, percent));
+	}
+
 	function collapsePreviewColumn() {
 		previewColumnCollapsed = true;
 		if (widthBeforePreviewExpand > 0) {
@@ -911,10 +930,7 @@
 		const fittedWidth = Math.min(expandedWidth, Math.max(widthBeforePreviewExpand, maxRight - detailsPanelX));
 		detailsPanelWidth = Math.max(widthBeforePreviewExpand, fittedWidth);
 		const usable = Math.max(1, detailsPanelWidth);
-		leftColPercent = Math.min(
-			LEFT_COL_MAX_PERCENT,
-			Math.max(LEFT_COL_MIN_PERCENT, (widthBeforePreviewExpand / usable) * 100),
-		);
+		leftColPercent = clampLeftColPercent((widthBeforePreviewExpand / usable) * 100);
 		console.log('[WidgetDetails] Preview column expanded', {
 			from: widthBeforePreviewExpand,
 			to: detailsPanelWidth,
@@ -1461,7 +1477,9 @@
 	}
 
 	export function hasValidPreview(): boolean {
-		return !!iframeSrc && !previewError && !previewLoading;
+		// Iframe can already show a compiled preview while `previewLoading`/`previewError`
+		// still lag (e.g. iteration rebuild). Screenshot only needs a live contentWindow.
+		return !!previewIframe?.contentWindow;
 	}
 
 	export function getPreviewIframe(): HTMLIFrameElement | null {
@@ -1590,19 +1608,65 @@
 			notifyPreviewCompileErrorChanged();
 		}
 		flushPendingPreviewMessages();
-		if (currentStep === 'edit' || currentStep === 'embed') {
-			dispatch('previewLoaded', { step: currentStep });
-		}
+		dispatch('previewLoaded', { step: currentStep });
 		// Emit previewReady so the parent app can clear the "…loading preview…" status.
 		dispatch('previewReady', { widgetId: selectedWidgetId, step: currentStep });
 		// Fill available preview area once the widget confirms it is ready.
 		scheduleFitPreviewToArea();
 	}
 
+	function looksLikeHtmlMarkup(value: unknown): value is string {
+		return typeof value === 'string' && /<[a-z][\s\S]*>/i.test(value);
+	}
+
+	/** Same-origin preview iframes (Vite /__widget_builder__ proxy): restore bold/italic after widgets set textContent. */
+	function applyRichTextInPreviewIframe(message: Record<string, unknown>): void {
+		if (message.type !== 'widgetic:update') return;
+		const doc = previewIframe?.contentDocument;
+		if (!doc) return;
+		const apply = () => {
+			try {
+				const content = message.content as Record<string, unknown> | undefined;
+				if (content) {
+					for (const [key, value] of Object.entries(content)) {
+						if (!looksLikeHtmlMarkup(value)) continue;
+						doc.querySelectorAll(`[data-content="${CSS.escape(key)}"]`).forEach((el) => {
+							if (el instanceof HTMLImageElement || el instanceof HTMLInputElement) return;
+							el.innerHTML = value;
+						});
+					}
+				}
+				const items = message.contentItems as Array<Record<string, unknown>> | undefined;
+				if (Array.isArray(items)) {
+					for (const item of items) {
+						const itemEl = item?.id
+							? doc.querySelector(`[data-content-item="${CSS.escape(String(item.id))}"]`)
+							: null;
+						const scope = itemEl || doc;
+						for (const [key, value] of Object.entries(item || {})) {
+							if (key === 'id' || !looksLikeHtmlMarkup(value)) continue;
+							scope.querySelectorAll(`[data-content="${CSS.escape(key)}"]`).forEach((el) => {
+								if (el instanceof HTMLImageElement || el instanceof HTMLInputElement) return;
+								el.innerHTML = value;
+							});
+						}
+					}
+				}
+			} catch (error) {
+				console.warn('[WidgetDetails] Rich-text preview overlay skipped:', error);
+			}
+		};
+		requestAnimationFrame(() => {
+			apply();
+			setTimeout(apply, 50);
+		});
+	}
+
 	/** Send a postMessage to the widget preview iframe (for live property editing) */
 	export function sendMessageToPreview(message: Record<string, unknown>): void {
 		if (previewWidgetReady && previewIframe?.contentWindow) {
 			previewIframe.contentWindow.postMessage(message, '*');
+			applyRichTextInPreviewIframe(message);
 			return;
 		}
 		pendingPreviewMessages.push(message);
@@ -1944,9 +2008,15 @@
 			}
 		} else {
 			previewHydrating = false;
-			previewWidgetReady = true;
 			dispatch('previewReady', { widgetId: selectedWidgetId, step: currentStep });
-			// Create step: iframe load does not go through markPreviewWidgetReady — still fit-to-area.
+			// Create: wait for widgetic:ready so contentItems overlay is not sent before the widget listens.
+			if (!previewWidgetReady) {
+				if (previewReadyFallbackTimeout) clearTimeout(previewReadyFallbackTimeout);
+				previewReadyFallbackTimeout = setTimeout(() => {
+					console.warn('[WidgetDetails] Create step widgetic:ready fallback — applying overlay');
+					markPreviewWidgetReady();
+				}, 1500);
+			}
 			scheduleFitPreviewToArea();
 		}
 	}
@@ -2273,10 +2343,7 @@
 		const width = twoCol?.clientWidth || detailsPanelWidth || DETAILS_PANEL_DEFAULT_WIDTH;
 		if (width <= 0) return;
 		const deltaPercent = ((e.clientX - columnResizeStartX) / width) * 100;
-		leftColPercent = Math.min(
-			LEFT_COL_MAX_PERCENT,
-			Math.max(LEFT_COL_MIN_PERCENT, columnResizeStartPercent + deltaPercent)
-		);
+		leftColPercent = clampLeftColPercent(columnResizeStartPercent + deltaPercent);
 		// Keep preview iframe inside the shrinking right column (avoid clipped "cut off" widgets).
 		requestAnimationFrame(() => {
 			clampPreviewToArea();
@@ -2363,15 +2430,27 @@
 		window.removeEventListener('blur', stopFn);
 	}
 
-	function startDetailsResize(e: MouseEvent) {
+	let detailsResizeEdge: 'se' | 'sw' | 'e' | 'w' | 's' = 'se';
+	let detailsResizeStartPanelX = 0;
+	let detailsResizeStartPanelY = 0;
+
+	function startDetailsResize(e: MouseEvent, edge: 'se' | 'sw' | 'e' | 'w' | 's' = 'se') {
 		e.preventDefault();
 		e.stopPropagation();
 		isResizingDetails = true;
+		detailsResizeEdge = edge;
 		detailsResizeStartX = e.clientX;
 		detailsResizeStartY = e.clientY;
 		detailsResizeStartWidth = detailsPanelWidth;
 		detailsResizeStartHeight = detailsPanelHeight || getDefaultDetailsPanelHeight();
-		document.body.style.cursor = 'nwse-resize';
+		detailsResizeStartPanelX = detailsPanelX;
+		detailsResizeStartPanelY = detailsPanelY;
+		const cursor =
+			edge === 'e' || edge === 'w' ? 'ew-resize'
+			: edge === 's' ? 'ns-resize'
+			: edge === 'sw' ? 'nesw-resize'
+			: 'nwse-resize';
+		document.body.style.cursor = cursor;
 		document.body.style.userSelect = 'none';
 		window.addEventListener('mousemove', onDetailsResize);
 		addGlobalStopListeners(stopDetailsResize);
@@ -2381,10 +2460,46 @@
 		if (!isResizingDetails) return;
 		const deltaX = e.clientX - detailsResizeStartX;
 		const deltaY = e.clientY - detailsResizeStartY;
-		const maxWidth = window.innerWidth - detailsPanelX - 20;
-		const maxHeight = window.innerHeight - detailsPanelY - 20;
-		detailsPanelWidth = Math.min(maxWidth, Math.max(DETAILS_PANEL_MIN_WIDTH, detailsResizeStartWidth + deltaX));
-		detailsPanelHeight = Math.min(maxHeight, Math.max(DETAILS_PANEL_MIN_HEIGHT, detailsResizeStartHeight + deltaY));
+		const minW = DETAILS_PANEL_MIN_WIDTH;
+		const minH = DETAILS_PANEL_MIN_HEIGHT;
+		const maxRight = window.innerWidth - 8;
+		const maxBottom = window.innerHeight - 8;
+
+		let nextW = detailsResizeStartWidth;
+		let nextH = detailsResizeStartHeight;
+		let nextX = detailsResizeStartPanelX;
+		let nextY = detailsResizeStartPanelY;
+
+		if (detailsResizeEdge === 'e' || detailsResizeEdge === 'se') {
+			nextW = detailsResizeStartWidth + deltaX;
+		}
+		if (detailsResizeEdge === 'w' || detailsResizeEdge === 'sw') {
+			nextW = detailsResizeStartWidth - deltaX;
+			nextX = detailsResizeStartPanelX + deltaX;
+		}
+		if (detailsResizeEdge === 's' || detailsResizeEdge === 'se' || detailsResizeEdge === 'sw') {
+			nextH = detailsResizeStartHeight + deltaY;
+		}
+
+		nextW = Math.max(minW, nextW);
+		nextH = Math.max(minH, nextH);
+		if (detailsResizeEdge === 'w' || detailsResizeEdge === 'sw') {
+			nextX = detailsResizeStartPanelX + (detailsResizeStartWidth - nextW);
+			if (nextX < 8) {
+				nextW -= (8 - nextX);
+				nextX = 8;
+			}
+		}
+		if (nextX + nextW > maxRight) nextW = maxRight - nextX;
+		if (nextY + nextH > maxBottom) nextH = maxBottom - nextY;
+
+		detailsPanelWidth = nextW;
+		detailsPanelHeight = nextH;
+		detailsPanelX = nextX;
+		detailsPanelY = nextY;
+		if (!previewColumnCollapsed) {
+			leftColPercent = clampLeftColPercent(leftColPercent);
+		}
 	}
 
 	function stopDetailsResize() {
@@ -2847,11 +2962,11 @@
 {#if selectedWidgetId}
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="widget-details-floating-panel pointer-events-auto fixed overflow-hidden
+	class="widget-details-floating-panel pointer-events-auto fixed
 		{showWidgetDetails ? 'flex flex-col' : 'hidden'}
 		{fillViewport
-			? 'bg-white rounded-none border-x border-b border-t-0 ring-0 shadow-none'
-			: 'bg-white/95 backdrop-blur-sm shadow-2xl rounded-xl border'}
+			? 'bg-white rounded-none border-x border-b border-t-0 ring-0 shadow-none overflow-hidden'
+			: 'bg-white/95 backdrop-blur-sm shadow-2xl rounded-xl border overflow-visible'}
 		{isFocusedPanel
 			? (fillViewport ? 'border-blue-400' : 'border-blue-400 ring-2 ring-blue-200/80')
 			: 'border-gray-300 opacity-[0.97]'}"
@@ -2866,7 +2981,7 @@
 			onpointerdown={startDetailsDrag}
 		>
 			<span
-				class="widget-details-name pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 max-w-[22%] truncate text-xs font-medium text-gray-600"
+				class="widget-details-name pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 max-w-[28%] truncate text-sm font-bold text-gray-800"
 				title={selectedWidget?.name || ''}
 			>
 				{selectedWidget?.name || (isDraftConvertPanel ? 'Widget Draft' : 'Widget')}
@@ -2925,7 +3040,7 @@
 				</div>
 			</div>
 
-			<div class="widget-details-debug-buttons flex items-center gap-1.5 shrink-0">
+			<div class="widget-details-debug-buttons flex items-center gap-1.5 shrink-0 pr-1">
 				<button
 					type="button"
 					onclick={() => previewColumnCollapsed ? expandPreviewColumn() : collapsePreviewColumn()}
@@ -2939,23 +3054,24 @@
 				>
 					{previewColumnCollapsed ? 'Open Preview' : 'Close Preview'}
 				</button>
-				<button
-					type="button"
-					onclick={handleCloseButtonClick}
-					onmousedown={(e) => e.stopPropagation()}
-					onpointerdown={(e) => e.stopPropagation()}
-					class="widget-details-close-bt w-6 h-6 flex items-center justify-center rounded-lg hover:bg-gray-200 text-gray-500 hover:text-gray-700 cursor-pointer transition-colors text-sm"
-					title="Close widget details"
-				>
-					✕
-				</button>
 			</div>
 		</div>
 	</div>
 
+	<button
+		type="button"
+		onclick={handleCloseButtonClick}
+		onmousedown={(e) => e.stopPropagation()}
+		onpointerdown={(e) => e.stopPropagation()}
+		class="widget-details-close-bt absolute -top-2.5 -right-2.5 z-30 w-7 h-7 flex items-center justify-center rounded-full bg-white border border-gray-300 shadow-md hover:bg-red-50 hover:border-red-300 hover:text-red-600 text-gray-500 cursor-pointer transition-colors text-sm"
+		title="Close widget details"
+	>
+		✕
+	</button>
+
 	<!-- Widget Details Content: Two-column layout -->
-	<div class="widget-details-content-wrapper relative m-2.5 min-w-0 min-h-0 flex-1">
-	<div class="widget-details-two-col flex h-full min-h-0 gap-0">
+	<div class="widget-details-content-wrapper relative m-2.5 min-w-0 min-h-0 flex-1 overflow-x-hidden">
+	<div class="widget-details-two-col flex h-full min-h-0 min-w-0 gap-0 overflow-x-hidden">
 
 	<!-- ═══ LEFT COLUMN: Step Content (scrollable) ═══ -->
 	<div
@@ -2995,17 +3111,17 @@
 
 	<!-- Scrollable step content -->
 	<div
-		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-b-lg {currentStep === 'edit' ? 'overflow-hidden' : 'overflow-hidden'}"
+		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-b-lg overflow-hidden overflow-x-hidden"
 		bind:this={contentContainerEl}
 	>
 	<div class="actions-panel widget-details-actions-panel relative flex flex-col flex-1 min-h-0">
 
 		<!-- Keep all steps mounted — switching tabs must not destroy chat / PropsEditor state -->
-		<div class="widget-details-create-step flex flex-col flex-1 min-h-0 overflow-hidden gap-2 p-2 {currentStep === 'create' ? '' : 'hidden'}">
+		<div class="widget-details-create-step flex flex-col flex-1 min-h-0 justify-start overflow-y-auto overflow-x-hidden scrollbar-thin gap-2 p-2 {currentStep === 'create' ? '' : 'hidden'}">
 			<slot name="code-generation" />
 			<slot name="publish-widget" />
 		</div>
-		<div class="widget-details-edit-step flex flex-col h-full min-h-0 overflow-hidden {currentStep === 'edit' ? '' : 'hidden'}">
+		<div class="widget-details-edit-step flex flex-col h-full min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin {currentStep === 'edit' ? '' : 'hidden'}">
 			<slot name="composition-editor" />
 		</div>
 		<div class="widget-details-embed-step flex flex-col gap-2 p-2 {currentStep === 'embed' ? '' : 'hidden'}">
@@ -3139,6 +3255,7 @@
 					{#if isGeneratingCode || previewLoading}
 						<GenerateLoader
 							title={isGeneratingCode ? 'Generating code…' : 'Building preview…'}
+							subtitle=""
 							size="md"
 						/>
 					{:else if previewError === 'DRAFT_PANEL'}
@@ -3190,6 +3307,17 @@
 								</div>
 							{/if}
 						</div>
+					{:else if lastGenerationFailed}
+						<div class="widget-preview-generation-error flex flex-col items-center justify-center text-center p-4">
+							<div class="text-3xl mb-2">⚠️</div>
+							<div class="font-medium text-sm text-red-600 mb-1">Code generation failed</div>
+							<div class="text-xs max-w-[220px] text-gray-600 mb-3">{lastGenerationError || 'Fix the prompt or attachments, then retry.'}</div>
+							<button
+								type="button"
+								onclick={() => { dispatch('generateNow', { widgetId: selectedWidgetId }); }}
+								class="generate-now-btn px-3 py-1.5 text-xs rounded border border-green-500 text-green-700 bg-white hover:bg-green-50 cursor-pointer font-medium"
+							>▶ Retry</button>
+						</div>
 					{:else if isLoadingDirectPreviewUrl || previewLoading}
 						<GenerateLoader title="Building Preview…" subtitle="Compiling widget code…" size="md" />
 					{:else}
@@ -3252,7 +3380,7 @@
 	</div> <!-- end of widget-details-content-wrapper -->
 
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class="absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize z-10 group" onmousedown={startDetailsResize} title="Resize panel">
+	<div class="widget-details-resize-se absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize z-20 group" onmousedown={(e) => startDetailsResize(e, 'se')} title="Resize panel">
 		<svg class="w-3 h-3 absolute bottom-0.5 right-0.5 text-gray-400 group-hover:text-gray-600 transition-colors" viewBox="0 0 6 6" fill="currentColor">
 			<circle cx="5" cy="1" r="0.7"/>
 			<circle cx="3" cy="3" r="0.7"/>
@@ -3262,6 +3390,25 @@
 			<circle cx="5" cy="5" r="0.7"/>
 		</svg>
 	</div>
+	{#if !fillViewport}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="widget-details-resize-sw absolute bottom-0 left-0 w-4 h-4 cursor-nesw-resize z-20 group" onmousedown={(e) => startDetailsResize(e, 'sw')} title="Resize panel">
+		<svg class="w-3 h-3 absolute bottom-0.5 left-0.5 text-gray-400 group-hover:text-gray-600 transition-colors rotate-90" viewBox="0 0 6 6" fill="currentColor">
+			<circle cx="5" cy="1" r="0.7"/>
+			<circle cx="3" cy="3" r="0.7"/>
+			<circle cx="5" cy="3" r="0.7"/>
+			<circle cx="1" cy="5" r="0.7"/>
+			<circle cx="3" cy="5" r="0.7"/>
+			<circle cx="5" cy="5" r="0.7"/>
+		</svg>
+	</div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="widget-details-resize-e absolute top-8 bottom-4 right-0 w-1.5 cursor-ew-resize z-20 hover:bg-blue-400/30" onmousedown={(e) => startDetailsResize(e, 'e')} title="Resize width"></div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="widget-details-resize-w absolute top-8 bottom-4 left-0 w-1.5 cursor-ew-resize z-20 hover:bg-blue-400/30" onmousedown={(e) => startDetailsResize(e, 'w')} title="Resize width"></div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="widget-details-resize-s absolute bottom-0 left-4 right-4 h-1.5 cursor-ns-resize z-20 hover:bg-blue-400/30" onmousedown={(e) => startDetailsResize(e, 's')} title="Resize height"></div>
+	{/if}
 </div>
 {/if}
 

package/dist/creator-types.d.ts

@@ -32,6 +32,12 @@ export interface CreatorAppProps {
      * Omit for standalone widget-creator (falls back to VITE_DEBUG_MODE / dev).
      */
     initialDebugMode?: boolean;
+    /**
+     * Extra canvas tools (undo/frame/image/library, zoom 1:1/fit/shortcuts).
+     * Independent of debugMode — Debug is staging-only UI.
+     * Site owns the header toggle; embed uses CustomEvent after mount.
+     */
+    initialAdvancedFeatures?: boolean;
     /**
      * Host-controlled default coder model id (e.g. `deepseek-v4-flash`).
      * Site reads its own env and passes this — no creator-app.js rebuild, no API-gateway default for the UI.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.50",
+	"version": "0.3.51",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",