@widgetic/creator 0.3.49

package/dist/CreatorApp.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { CreatorAppProps } from './creator-types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CreatorApp: $$__sveltets_2_IsomorphicComponent<{
+    /** Embedded mode props (site integration) */ embedded?: CreatorAppProps["embedded"];
+    canvasId?: CreatorAppProps["canvasId"];
+    projectId?: CreatorAppProps["projectId"];
+    workspaceType?: CreatorAppProps["workspaceType"];
+    organizationId?: CreatorAppProps["organizationId"];
+    initialWidgetId?: CreatorAppProps["initialWidgetId"];
+    initialCompositionId?: CreatorAppProps["initialCompositionId"];
+    initialStep?: CreatorAppProps["initialStep"];
+    forceCreateNewWidget?: CreatorAppProps["forceCreateNewWidget"];
+    apiUrl?: CreatorAppProps["apiUrl"];
+    widgetBuilderUrl?: CreatorAppProps["widgetBuilderUrl"];
+    initialDebugMode?: CreatorAppProps["initialDebugMode"];
+    defaultCoderModelId?: CreatorAppProps["defaultCoderModelId"];
+    defaultPlannerModelId?: CreatorAppProps["defaultPlannerModelId"];
+    showWidgetsList?: CreatorAppProps["showWidgetsList"];
+    /** Opt-in Dexie L1 — host (site / standalone) passes true. */ enableLocalCache?: CreatorAppProps["enableLocalCache"];
+    onPublishComplete?: CreatorAppProps["onPublishComplete"];
+    onBack?: CreatorAppProps["onBack"];
+    onWidgetRenamed?: CreatorAppProps["onWidgetRenamed"];
+    class?: string;
+    style?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CreatorApp = InstanceType<typeof CreatorApp>;
+export default CreatorApp;

package/dist/components/EditableName.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { Tooltip } from '@widgetic/canvas/components';
+
+	export let name: string = '';
+	export let placeholder: string = 'Unnamed';
+	export let tooltipText: string = 'Double-click to rename';
+	export let tooltipPosition: 'above' | 'below' | 'left' | 'right' = 'above';
+	let className = '';
+	export { className as class };
+	export let style = '';
+
+	const dispatch = createEventDispatcher();
+
+	let isEditing = false;
+	let inputValue = '';
+
+	function startEditing() {
+		isEditing = true;
+		inputValue = name || '';
+	}
+
+	function cancelEditing() {
+		isEditing = false;
+		inputValue = '';
+	}
+
+	function commitEdit() {
+		if (!isEditing) return;
+		const trimmed = inputValue.trim();
+		isEditing = false;
+
+		if (!trimmed || trimmed === name) {
+			inputValue = '';
+			return;
+		}
+
+		dispatch('rename', { newName: trimmed });
+		inputValue = '';
+	}
+
+	function focusAndSelect(node: HTMLInputElement, editing: boolean) {
+		function apply(shouldEdit: boolean) {
+			if (shouldEdit) {
+				requestAnimationFrame(() => {
+					node.focus();
+					node.select();
+				});
+			}
+		}
+		apply(editing);
+		return {
+			update(newEditing: boolean) {
+				apply(newEditing);
+			}
+		};
+	}
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<Tooltip text={isEditing ? '' : tooltipText} position={tooltipPosition}>
+<div
+	class="editable-name-ct flex items-center gap-1 min-w-0 {className}"
+	{style}
+	ondblclick={() => startEditing()}
+>
+	<input
+		class="editable-name-input font-semibold rounded px-1 py-0.5 text-sm outline-none transition-colors {isEditing ? 'border border-blue-400 bg-white focus:ring-1 focus:ring-blue-500' : 'border border-transparent bg-transparent cursor-default'}"
+		style="min-width: 60px; flex: 1 1 auto; {!isEditing ? 'pointer-events: none;' : ''}"
+		type="text"
+		value={isEditing ? inputValue : (name || placeholder)}
+		readonly={!isEditing}
+		tabindex={isEditing ? 0 : -1}
+		use:focusAndSelect={isEditing}
+		oninput={(e) => { if (isEditing) inputValue = e.currentTarget.value; }}
+		onkeydown={(e) => {
+			if (!isEditing) return;
+			e.stopPropagation();
+			if (e.key === 'Enter') commitEdit();
+			if (e.key === 'Escape') cancelEditing();
+		}}
+		onblur={() => { if (isEditing) commitEdit(); }}
+	/>
+	{#if !isEditing}
+		<span class="editable-name-pencil flex-shrink-0 text-gray-400 opacity-0 text-xs cursor-pointer transition-opacity">✏️</span>
+	{/if}
+</div>
+</Tooltip>
+
+<style>
+	.editable-name-ct:hover .editable-name-pencil {
+		opacity: 1;
+	}
+</style>

package/dist/components/EditableName.svelte.d.ts

@@ -0,0 +1,27 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const EditableName: $$__sveltets_2_IsomorphicComponent<{
+    name?: string;
+    placeholder?: string;
+    tooltipText?: string;
+    tooltipPosition?: "above" | "below" | "left" | "right";
+    class?: string;
+    style?: string;
+}, {
+    rename: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type EditableName = InstanceType<typeof EditableName>;
+export default EditableName;

package/dist/components/SelectorDropdown.svelte

@@ -0,0 +1,238 @@
+<script lang="ts" context="module">
+	export interface DropdownItem {
+		id: string;
+		name: string;
+		badge?: string;
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * SelectorDropdown.svelte
+	 *
+	 * Reusable dropdown selector (canvas-style) with:
+	 *  - Selected item name (click = toggle, dblclick = rename)
+	 *  - Chevron toggle button
+	 *  - "+ New" button
+	 *  - Dropdown list with checkbox, name, id badge, delete button
+	 *  - Click-outside closes
+	 */
+	import { onMount, onDestroy, tick } from 'svelte';
+
+	let className = '';
+	export { className as class };
+	export let style = '';
+
+	export let items: DropdownItem[] = [];
+	export let selectedId: string | null = null;
+	export let label = '';
+	export let labelPosition: 'above' | 'inline' = 'above';
+	export let placeholder = 'Select...';
+	export let newButtonLabel = 'New';
+	export let accentColor = '#314F2F';
+	export let nameWidth = '160px';
+	export let loading = false;
+	export let showNewButton = true;
+	export let allowRename = true;
+
+	export let onselect: ((item: DropdownItem) => void) | undefined = undefined;
+	export let ondelete: ((item: DropdownItem) => void) | undefined = undefined;
+	export let onnew: (() => void) | undefined = undefined;
+	export let onrename: ((id: string, newName: string) => void) | undefined = undefined;
+
+	let open = false;
+	let renaming = false;
+	let renameValue = '';
+	let renameInputEl: HTMLInputElement | null = null;
+	let rootEl: HTMLElement;
+
+	$: selectedItem = items.find(i => i.id === selectedId) || null;
+	$: selectedName = selectedItem?.name || placeholder;
+
+	function toggle(e: MouseEvent) {
+		e.stopPropagation();
+		if (renaming) return;
+		open = !open;
+	}
+
+	function handleSelect(item: DropdownItem, e: MouseEvent) {
+		e.stopPropagation();
+		open = false;
+		onselect?.(item);
+	}
+
+	function handleDelete(item: DropdownItem, e: MouseEvent) {
+		e.stopPropagation();
+		ondelete?.(item);
+	}
+
+	function handleNew(e: MouseEvent) {
+		e.stopPropagation();
+		open = false;
+		onnew?.();
+	}
+
+	async function startRename(e: MouseEvent) {
+		e.stopPropagation();
+		if (!allowRename || !selectedItem) return;
+		renaming = true;
+		renameValue = selectedItem.name;
+		await tick();
+		renameInputEl?.focus();
+		renameInputEl?.select();
+	}
+
+	function commitRename() {
+		if (!renaming) return;
+		renaming = false;
+		if (selectedItem && renameValue.trim() && renameValue.trim() !== selectedItem.name) {
+			onrename?.(selectedItem.id, renameValue.trim());
+		}
+	}
+
+	function handleRenameKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			commitRename();
+		} else if (e.key === 'Escape') {
+			renaming = false;
+		}
+	}
+
+	function handleOutsideClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (rootEl && !rootEl.contains(target)) {
+			open = false;
+			if (renaming) commitRename();
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener('click', handleOutsideClick);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('click', handleOutsideClick);
+	});
+
+	const accentBg = (color: string) => `rgba(${parseInt(color.slice(1,3),16)},${parseInt(color.slice(3,5),16)},${parseInt(color.slice(5,7),16)},0.08)`;
+	const accentBorder = (color: string) => `rgba(${parseInt(color.slice(1,3),16)},${parseInt(color.slice(3,5),16)},${parseInt(color.slice(5,7),16)},0.3)`;
+</script>
+
+<div class="selector-dropdown-group flex items-center gap-1.5 relative {className}" style="{labelPosition === 'above' ? 'padding-top: 1rem;' : ''} {style}" bind:this={rootEl}>
+	<!-- Label: above (legacy) or inline before selector -->
+	{#if label && labelPosition === 'above'}
+		<span class="selector-dropdown-label absolute top-0 left-0 pl-2 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap" style="color: {accentColor};">{label}</span>
+	{:else if label && labelPosition === 'inline'}
+		<span class="selector-dropdown-label shrink-0 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap" style="color: {accentColor};">{label}</span>
+	{/if}
+
+	<div class="selector-dropdown-area relative">
+		<!-- Selector box -->
+		<div class="selector-dropdown-box flex items-stretch border border-gray-300 rounded-md bg-white overflow-hidden transition-all {open ? 'border-gray-400' : 'hover:border-gray-400'}" style={open ? `box-shadow: 0 0 0 2px ${accentBg(accentColor)};` : ''}>
+			<div class="selector-dropdown-name flex items-center shrink-0" style="width: {nameWidth};">
+				{#if renaming}
+					<!-- svelte-ignore a11y_autofocus -->
+					<input
+						bind:this={renameInputEl}
+						bind:value={renameValue}
+						class="selector-dropdown-rename-input w-full text-[13px] font-medium text-gray-800 px-2.5 py-1 border-0 outline-none bg-transparent leading-snug"
+						onblur={commitRename}
+						onkeydown={handleRenameKeydown}
+						autofocus
+					/>
+				{:else}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<span
+						class="selector-dropdown-selected-text text-[13px] font-medium text-gray-800 px-2.5 py-1 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis block leading-snug"
+						style="width: {nameWidth};"
+						title={allowRename && selectedItem ? `Double-click to rename · ${selectedId || ''}` : (selectedId || '')}
+						onclick={toggle}
+						ondblclick={startRename}
+					>
+						{selectedName}{#if loading}<span class="text-gray-400 ml-1 animate-pulse text-[10px]">…</span>{/if}
+					</span>
+				{/if}
+			</div>
+			<button
+				class="selector-dropdown-trigger flex items-center justify-center w-[26px] shrink-0 border-0 border-l border-gray-200 bg-transparent cursor-pointer text-gray-500 transition-colors hover:bg-gray-200 hover:text-gray-700 {open ? 'bg-gray-200 text-gray-900' : ''}"
+				onclick={toggle}
+				title="Toggle list"
+			>
+				<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="transition-transform {open ? 'rotate-180' : ''}">
+					<path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	<!-- "+ New" button -->
+	{#if showNewButton}
+		<button
+			class="selector-dropdown-new-btn flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded border cursor-pointer whitespace-nowrap transition-colors"
+			style="color: {accentColor}; background: {accentBg(accentColor)}; border-color: {accentBorder(accentColor)};"
+			onclick={handleNew}
+			title="{newButtonLabel}"
+		>
+			<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+				<path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+			</svg>
+			{newButtonLabel}
+		</button>
+	{/if}
+
+	<!-- Dropdown list -->
+	{#if open}
+	<div class="selector-dropdown-list absolute top-[calc(100%+4px)] left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden p-1" style="z-index: 100;">
+		<div class="selector-dropdown-items max-h-80 overflow-y-auto overflow-x-hidden scrollbar-thin">
+			{#each items as entry (entry.id)}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="selector-dropdown-item group flex items-center gap-2 px-2 py-1.5 cursor-pointer rounded transition-colors {entry.id === selectedId ? '' : 'hover:bg-gray-50'}"
+					style={entry.id === selectedId ? `background: ${accentBg(accentColor)};` : ''}
+					onclick={(e) => handleSelect(entry, e)}
+				>
+					<!-- Checkbox -->
+					<div class="selector-dropdown-item-check shrink-0 flex items-center">
+						{#if entry.id === selectedId}
+							<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+								<rect x="1" y="1" width="10" height="10" rx="2" fill={accentColor} stroke={accentColor} stroke-width="1"/>
+								<path d="M3.5 6L5.5 8L8.5 4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+							</svg>
+						{:else}
+							<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+								<rect x="1.5" y="1.5" width="9" height="9" rx="1.5" stroke="#d1d5db" stroke-width="1"/>
+							</svg>
+						{/if}
+					</div>
+					<!-- Info -->
+					<div class="selector-dropdown-item-info flex flex-col flex-1 min-w-0">
+						<span class="selector-dropdown-item-name text-[13px] font-medium text-gray-900 truncate">{entry.name}</span>
+						{#if entry.badge}
+							<span class="selector-dropdown-item-badge text-[11px] text-gray-400 truncate">{entry.badge}</span>
+						{/if}
+					</div>
+					<!-- Delete -->
+					{#if ondelete}
+						<button
+							class="selector-dropdown-item-delete shrink-0 w-5 h-5 flex items-center justify-center rounded text-gray-300 hover:text-red-500 hover:bg-red-50 transition-colors"
+							title="Delete"
+							onclick={(e) => handleDelete(entry, e)}
+						>
+							<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+								<path d="M1 1L9 9M9 1L1 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+							</svg>
+						</button>
+					{/if}
+				</div>
+			{:else}
+				<div class="selector-dropdown-empty text-xs text-gray-400 px-2 py-3 text-center">
+					{loading ? 'Loading...' : 'No items found'}
+				</div>
+			{/each}
+		</div>
+	</div>
+	{/if}
+</div>

package/dist/components/SelectorDropdown.svelte.d.ts

@@ -0,0 +1,41 @@
+export interface DropdownItem {
+    id: string;
+    name: string;
+    badge?: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SelectorDropdown: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    items?: DropdownItem[];
+    selectedId?: string | null;
+    label?: string;
+    labelPosition?: "above" | "inline";
+    placeholder?: string;
+    newButtonLabel?: string;
+    accentColor?: string;
+    nameWidth?: string;
+    loading?: boolean;
+    showNewButton?: boolean;
+    allowRename?: boolean;
+    onselect?: ((item: DropdownItem) => void) | undefined;
+    ondelete?: ((item: DropdownItem) => void) | undefined;
+    onnew?: (() => void) | undefined;
+    onrename?: ((id: string, newName: string) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SelectorDropdown = InstanceType<typeof SelectorDropdown>;
+export default SelectorDropdown;