@widgetic/creator 0.3.56 → 0.3.58

package/dist/CreatorApp.svelte

@@ -3591,12 +3591,12 @@
 	const buildSha = import.meta.env.VITE_BUILD_SHA || 'local';
 	const buildLabel = `v${appVersion} · ${buildSha}`;
 	
-	// Default coder: host prop (site embed) wins. Fallback Flash for speed.
+	// Default coder: host prop (site embed) wins. Fallback = first catalog model (DeepSeek V4.1 Flash on Baseten).
 	const hostCoderModelId = (defaultCoderModelId || '').trim() || null;
 	const hostPlannerRaw = (defaultPlannerModelId || '').trim();
 	const hostPlannerModelId =
 		!hostPlannerRaw || /^(none|skip)$/i.test(hostPlannerRaw) ? null : hostPlannerRaw;
-	let defaultModelId = hostCoderModelId || 'baseten-glm-5.3-fast';
+	let defaultModelId = hostCoderModelId || 'baseten-deepseek-v4.1-flash';
 	
 	// Available LLM models for code generation
 	interface LLMModelOption {
@@ -3607,18 +3607,18 @@
 		supportsVision?: boolean;
 	}
 	
-	// Default fallback models in case API fails (one from each provider)
+	// Default fallback models in case API fails (order mirrors llm-models.catalog.json)
 	const fallbackModels: LLMModelOption[] = [
+		{ id: 'baseten-deepseek-v4.1-flash', name: 'DeepSeek V4.1 Flash (Baseten)', provider: 'Baseten', description: 'V4.1 Flash via Baseten Model APIs', supportsVision: true },
 		{ id: 'baseten-glm-5.3-fast', name: 'GLM 5.3 Fast (Baseten)', provider: 'Baseten', description: 'Lower-latency GLM 5.3 on Baseten Fast capacity', supportsVision: true },
 		{ id: 'baseten-glm-5.3-flash', name: 'GLM 5.3 Flash (Baseten)', provider: 'Baseten', description: 'Cheaper GLM via Baseten Model APIs', supportsVision: true },
 		{ id: 'zhipu-glm-5.3-flash', name: 'GLM 5.3 Flash (Z.ai)', provider: 'Zhipu', description: 'Cheapest vision + coding model', supportsVision: true },
+		{ id: 'deepseek-v4.1-flash', name: 'DeepSeek V4.1 Flash (DeepSeek API)', provider: 'DeepSeek', description: 'V4.1 Flash via DeepSeek direct API', supportsVision: true },
 		{ id: 'deepseek-v4-pro', name: 'DeepSeek V4 Pro', provider: 'DeepSeek', description: 'Frontier coding model, 1M context', supportsVision: false },
-		{ id: 'deepseek-v4-flash', name: 'DeepSeek V4 Flash', provider: 'DeepSeek', description: 'Fast and cost-efficient', supportsVision: false },
-		{ id: 'openai-gpt-5.4', name: 'GPT-5.4 (OpenAI)', provider: 'OpenAI', description: 'Affordable model for coding', supportsVision: true },
-		{ id: 'openai-gpt-5.5', name: 'GPT-5.5 (OpenAI)', provider: 'OpenAI', description: 'Frontier model for complex work', supportsVision: true },
+		{ id: 'deepseek-v4-flash', name: 'DeepSeek V4 Flash', provider: 'DeepSeek', description: 'Legacy id; routes to V4.1 Flash', supportsVision: true },
 		{ id: 'openai-codex-3.2', name: 'Codex 3.2 (OpenAI)', provider: 'OpenAI', description: 'Coding-specialized model', supportsVision: false },
-		{ id: 'gemini-3-flash', name: 'Gemini 3 Flash (Google)', provider: 'Google', description: 'Google\'s fast Gemini model', supportsVision: true },
-		{ id: 'anthropic-claude-sonnet-4.6', name: 'Claude Sonnet 4.6 (Anthropic)', provider: 'Anthropic', description: 'Best balance of intelligence, speed, and cost', supportsVision: true },
+		{ id: 'openai-gpt-5.5', name: 'GPT-5.5 (OpenAI)', provider: 'OpenAI', description: 'Frontier model for complex work', supportsVision: true },
+		{ id: 'gemini-3.8-flash', name: 'Gemini 3.8 Flash (Google)', provider: 'Google', description: 'Most capable Gemini Flash', supportsVision: true },
 	];
 	
 	// Models loaded from API (single source of truth)
@@ -3644,10 +3644,18 @@
 					supportsVision: m.supportsVision === true,
 				}));
 				
-				// Model LIST + default coder come from GET /models (API / Doppler).
+				// Model LIST from GET /models. Selection: host pin → first listed
+				// (catalog puts DeepSeek V4.1 Flash Baseten first) → API default → fallback.
 				const apiCoderId = (response as any).defaultModelId || (response as any).data?.defaultModelId;
 				const firstListedId = availableModels[0]?.id;
-				defaultModelId = hostCoderModelId || apiCoderId || firstListedId || defaultModelId;
+				const listedIds = new Set(availableModels.map((m) => m.id));
+				const pickListed = (id: string | null | undefined) =>
+					id && listedIds.has(id) ? id : null;
+				defaultModelId =
+					pickListed(hostCoderModelId) ||
+					pickListed(firstListedId) ||
+					pickListed(apiCoderId) ||
+					defaultModelId;
 				userSelectedModelId = defaultModelId;
 				console.log('[WidgetCreator] Default coder model', {
 					defaultModelId,
@@ -3723,6 +3731,11 @@
 	
 	// Get selected model object
 	$: selectedModel = availableModels.find(m => m.id === selectedModelId) || availableModels[0];
+	$: modelDropdownItems = availableModels.map((model) => ({
+		id: model.id,
+		name: model.name,
+		badge: model.provider,
+	}));
 	
 	// Handle model selection (only used in debug mode)
 	function handleModelSelect(modelId: string) {
@@ -13234,22 +13247,21 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				<div class="generation-chat-sticky-header shrink-0 z-20 bg-white border-b border-gray-200">
 					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<div class="generation-models-header flex items-center justify-end gap-2 px-2 py-1.5 bg-gray-50">
-						<span class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide shrink-0">Model</span>
 						<div class="coder-model-selector flex items-center justify-end min-w-0">
-							<select
-								class="coder-model-dropdown w-max max-w-full text-[11px] border border-gray-300 rounded px-1.5 py-0.5 bg-white text-gray-700 cursor-pointer focus:outline-none focus:border-blue-400"
-								style="width: {Math.max(18, (availableModels.reduce((longest, model) => model.name.length > longest.length ? model.name : longest, '').length) + 3)}ch"
-								value={userSelectedModelId}
-								onchange={(e) => handleModelSelect(e.currentTarget.value)}
-							>
-								{#if modelsLoading}
-									<option value="" disabled>Loading...</option>
-								{:else}
-									{#each availableModels as model (model.id)}
-										<option value={model.id}>{model.name}</option>
-									{/each}
-								{/if}
-							</select>
+							<SelectorDropdown
+								class="coder-model-dropdown"
+								label="Model"
+								labelPosition="inline"
+								items={modelDropdownItems}
+								selectedId={userSelectedModelId}
+								placeholder={modelsLoading ? 'Loading…' : 'Select model'}
+								nameWidth="240px"
+								accentColor="#314F2F"
+								showNewButton={false}
+								allowRename={false}
+								loading={modelsLoading}
+								onselect={(item) => handleModelSelect(item.id)}
+							/>
 						</div>
 					</div>
 				</div>

package/dist/components/WidgetDetails.svelte

@@ -3644,6 +3644,7 @@
 						bind:this={widgetPreviewComponentRef}
 						mode="controlled"
 						enableResize={true}
+						resizeMode="concentric"
 						autoFitStage={showPreviewModal}
 						src={iframeSrc || getFallbackPreviewUrl()}
 						displayUrl={directPreviewUrl || iframeSrc}

package/package.json

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