@widgetic/creator 0.3.68 → 0.3.69

package/dist/CreatorApp.svelte

@@ -5672,6 +5672,52 @@
 	}
 
 	// ─── Create new canvas ───────────────────────────────────────────────────────
+	/** New-widget opens on a local canvas. The DB row is created on the first real edit. */
+	let canvasRowDeferred = false;
+	let canvasRowCreatePromise: Promise<string | null> | null = null;
+
+	async function ensureCanvasRowForFirstEdit(): Promise<string | null> {
+		const existingId = typeof canvasId === 'string' ? canvasId.trim() : '';
+		if (existingId) return existingId;
+		if (canvasRowCreatePromise) return canvasRowCreatePromise;
+		canvasRowCreatePromise = (async () => {
+			if (!canvasesClient || !$userSession.user) {
+				console.warn('[CreatorApp] First edit not persisted — canvas client is not ready');
+				return null;
+			}
+			try {
+				const usedNames = new Set(userCanvases.map((c) => (c.name || '').trim()).filter(Boolean));
+				let canvasIndex = userCanvases.length + 1;
+				let newName = `Canvas ${canvasIndex}`;
+				while (usedNames.has(newName)) {
+					canvasIndex += 1;
+					newName = `Canvas ${canvasIndex}`;
+				}
+				const createdRaw = await canvasesClient.createCanvas({
+					createCanvasRequest: { persistenceKey: newName }
+				});
+				const createdId = unwrapCreatedCanvasId(createdRaw);
+				if (!createdId) {
+					console.warn('[CreatorApp] First-edit canvas create response missing id');
+					return null;
+				}
+				userCanvases = [{ id: createdId, name: newName, hasContent: true }, ...userCanvases];
+				rememberCanvasId(createdId);
+				activeCanvasName = newName;
+				canvasRowDeferred = false;
+				syncEmbeddedCanvasUrl(createdId);
+				console.log('[CreatorApp] Canvas row created on first edit', createdId);
+				return createdId;
+			} catch (err) {
+				console.error('[CreatorApp] Failed to create canvas on first edit:', err);
+				return null;
+			} finally {
+				canvasRowCreatePromise = null;
+			}
+		})();
+		return canvasRowCreatePromise;
+	}
+
 	async function createNewCanvas(options: { skipSaveCurrent?: boolean } = {}): Promise<string | null> {
 		if (!canvasesClient || !$userSession.user) {
 			console.warn('[WidgetCreator] createNewCanvas skipped — missing client or user');
@@ -5776,24 +5822,10 @@
 		selectedWidgetId = null;
 		selectedWidget = null;
 		beginBlankCanvasSession('site New widget');
-		// console.log('[CreatorApp] New widget: blank canvas only — widget record is created on Convert (F3)');
-		const clientsReady = await waitForAuthenticatedCanvasClient();
-		if (!clientsReady) {
-			console.error('[CreatorApp] Auth/clients not ready — blank canvas without new canvas row');
-		} else {
-			const newCanvasId = await createNewCanvas({ skipSaveCurrent: true });
-			if (!newCanvasId) {
-				showToast('error', 'Could not create a blank canvas', {
-					description: 'Try reloading the page to get a fresh canvas.',
-					duration: 8000
-				});
-			} else {
-				// Replace `new_widget=1` with the concrete canvas_id so a page refresh
-				// reloads THIS canvas (and its sketch) instead of re-running the
-				// new-widget bootstrap and creating yet another blank canvas row.
-				syncEmbeddedCanvasUrl(newCanvasId);
-			}
-		}
+		rememberCanvasId(null);
+		canvasRowDeferred = true;
+		// No DB row yet. Autosave creates one on the first edit that has shapes.
+		// An untouched new-widget refresh stays on new_widget=1 and writes nothing.
 		// F3: New-widget flow starts with an EMPTY canvas — no widget record, no
 		// WidgetShape, no auto-opened Widget Details. The widget record is created
 		// only when the user sketches something and clicks "Convert to Widget".
@@ -7229,6 +7261,7 @@
 				typeof crypto !== 'undefined' && crypto.randomUUID
 					? crypto.randomUUID()
 					: `${Date.now()}-new-widget`;
+			if (!canvasId) await ensureCanvasRowForFirstEdit();
 			const response = await widgetsClient.createWidget(
 				{
 					newWidget: {
@@ -13923,6 +13956,13 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			});
 		}
 
+		// A new-widget session has no row until the user actually adds something.
+		// Empty autosaves (open, refresh, unmount of a blank canvas) stay local.
+		if (canvasRowDeferred && !canvasId && objectCount > 0) {
+			await ensureCanvasRowForFirstEdit();
+			if (canvasId) saveCanvasState(canvasId, json);
+		}
+
 		// Save to API via SDK with sequence race protection
 		if (canvasId && canvasesClient) {
 			const currentSeq = ++autosaveSequence;
@@ -14123,6 +14163,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				?? `ConvertedW-${Date.now()}`;
 
 			authStatus = 'Creating widget from design...';
+			if (!canvasId) await ensureCanvasRowForFirstEdit();
 			const idempotencyKey = crypto?.randomUUID?.() ?? `${Date.now()}-convert`;
 			const response = await widgetsClient.createWidget(
 				{

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -146,20 +146,6 @@
 	const VERSION_MENU_PAD_REM = 0.6;
 	/** Menu shows at most 5 rows before scrolling. */
 	const VERSION_MENU_MAX_ROWS = 5;
-	/** Fabric corner handles sit on the shape corners and must stay clickable through the bar. */
-	const HANDLE_NOTCH_PX = 14;
-
-	function headerNotchClip(barWidth: number, shapeWidth: number): string {
-		const notch = HANDLE_NOTCH_PX;
-		const height = DRAG_BAR_H;
-		const y = height - notch;
-		const shapeRight = Math.min(barWidth, Math.max(shapeWidth, notch * 2));
-		if (shapeRight >= barWidth - 1) {
-			return `polygon(0px 0px, ${barWidth}px 0px, ${barWidth}px ${y}px, ${barWidth - notch}px ${y}px, ${barWidth - notch}px ${height}px, ${notch}px ${height}px, ${notch}px ${y}px, 0px ${y}px)`;
-		}
-		const rightInner = Math.max(notch + 1, shapeRight - notch);
-		return `polygon(0px 0px, ${barWidth}px 0px, ${barWidth}px ${height}px, ${shapeRight}px ${height}px, ${shapeRight}px ${y}px, ${rightInner}px ${y}px, ${rightInner}px ${height}px, ${notch}px ${height}px, ${notch}px ${y}px, 0px ${y}px)`;
-	}
 
 	type ShapeRect = {
 		widgetId: string;
@@ -701,14 +687,14 @@
 				<div
 					class="widget-shape-drag-bar pointer-events-auto absolute left-0 right-0 top-0 z-10 flex items-center gap-1 rounded-t-md border border-b-0 px-1.5 shadow-sm select-none [&_button:focus]:outline-none [&_button:focus]:shadow-none [&_button:focus-visible]:outline-none [&_button:focus-visible]:shadow-none
 						{isPrimary ? 'bg-red-100' : 'bg-white'} {isSelected ? 'border-blue-400' : 'border-gray-300'}"
-					style="height: {DRAG_BAR_H}px; cursor: grab; min-width: {showExpandedChrome ? MIN_EXPANDED_CHROME_WIDTH : 0}px; clip-path: {headerNotchClip(chromeWidth, overlay.width)};"
+					style="height: {DRAG_BAR_H}px; cursor: grab; min-width: {showExpandedChrome ? MIN_EXPANDED_CHROME_WIDTH : 0}px;"
 					title="Drag widget"
 					onpointerdown={(e) => startShapeDrag(e, overlay.widgetId)}
 				>
 					{#if isPrimary}
 						<div
 							class="widget-shape-primary-stroke pointer-events-none absolute z-20 bg-[#DC2626]"
-							style="left: 0; width: {overlay.width}px; top: {DRAG_BAR_H - IFRAME_INSET_PX - 1}px; height: 2px; clip-path: inset(0 {HANDLE_NOTCH_PX}px 0 {HANDLE_NOTCH_PX}px);"
+							style="left: 0; width: {overlay.width}px; top: {DRAG_BAR_H - IFRAME_INSET_PX - 1}px; height: 2px;"
 						></div>
 					{/if}
 					<span class="widget-shape-drag-grip shrink-0 text-xs leading-none text-gray-400" aria-hidden="true">⠿</span>

package/package.json

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