@widgetic/editor 4.0.1 → 4.0.2

package/dist/components/WidgetPreview.svelte

@@ -769,7 +769,7 @@
 					{/if}
 
 					{#if mode === 'controlled' && isGeneratingCode}
-						<GenerateLoader overlay title="Generating code…" size="lg" />
+						<GenerateLoader overlay title="Generating code…" subtitle="" size="lg" />
 					{/if}
 				</div>
 			</div>
@@ -783,7 +783,7 @@
 			{:else}
 				<div class="flex h-full flex-col items-center justify-center p-6 text-center text-sm text-gray-600">
 					{#if isGeneratingCode}
-						<GenerateLoader title="Generating code…" size="lg" />
+						<GenerateLoader title="Generating code…" subtitle="" size="lg" />
 					{:else if previewError === 'NO_CODE_YET'}
 						<div class="font-semibold text-lg text-gray-700 mb-2">No Code Generated Yet</div>
 					{:else if previewError}

package/dist/components/editors/PropsEditor.svelte

@@ -855,9 +855,11 @@
     };
 
     // Add this near other reactive declarations at the top level
-    $: if (Array.isArray(contentSchema?.contentItems) && contentSchema.contentItems.length > 0 && !itemTemplate) {
-        itemTemplate = JSON.parse(JSON.stringify(contentSchema.contentItems[0]));
-        // console.log('Template initialized:', itemTemplate);
+    $: if (Array.isArray(contentSchema?.contentItems)) {
+        const templateSource = contentSchema.contentItems.find((item: ContentItem) => Array.isArray(item.properties) && item.properties.length > 0);
+        if (templateSource) {
+            itemTemplate = JSON.parse(JSON.stringify(templateSource));
+        }
     }
 
     // Populate contentState with per-item values keyed as "itemId__propName".
@@ -872,10 +874,12 @@
                 if (contentState[key] === undefined) {
                     // Prefer the parent's canonical saved-value map over the
                     // schema mirror, which older compositions may not fill.
-                    const parentValue = parentItemValues?.[item.id]?.[prop.id || prop.name];
-                    const seed = parentValue !== undefined ? parentValue : prop.value;
-                    if (seed !== undefined) {
-                        patch[key] = seed;
+                    const propKey = prop.id || prop.name;
+                    const parentValue = parentItemValues?.[item.id]?.[propKey];
+                    const liveOnItem = propKey != null ? (item as Record<string, unknown>)[propKey] : undefined;
+                    const seed = pickLiveContentValue(parentValue, liveOnItem, prop.value);
+                    if (seed !== undefined && seed !== '') {
+                        patch[key] = seed as InputValue;
                         needsUpdate = true;
                     }
                 }
@@ -1328,9 +1332,17 @@
     function renderInputController(schema: string, property: any, propertyIndex: number, isFirstGroup: boolean, contentItemId?: string) {
         const basePropertyId = property.id || property.name;
         const propertyId = contentItemId ? `${contentItemId}__${basePropertyId}` : basePropertyId;
+        const controllerId = `${schema}-${propertyId}`;
         const { type, inputController } = property;
+        if (!inputController?.type) {
+            console.warn('[PropsEditor] Skipping property without inputController.type:', propertyId, property);
+            return {
+                component: null,
+                props: { id: controllerId },
+                header: { label: basePropertyId, helpText: '' }
+            };
+        }
         const InputControllerComponent = getInputControllerComponent(inputController.type.toLowerCase());
-        const controllerId = `${schema}-${propertyId}`;
 
         const stateValue = schema === 'design' ? designState[propertyId] : contentState[propertyId];
         let initialValue = stateValue !== undefined ? stateValue : (property.value !== undefined ? property.value : property.defaultValue);
@@ -1373,6 +1385,9 @@
                 onOpacityChange: (opacity: number) => updateState(schema, propertyId, initialValue, opacity),
                 portalTarget,
                 ...restInputController,
+                ...(String(inputController.type || '').toLowerCase() === 'font'
+                  ? { label: description || propertyId || '' }
+                  : {}),
                 ...property.constraints,
                 ...additionalProps,
                 config: inputController.config,
@@ -1712,74 +1727,75 @@
      * and appends it to the content items list
      */
     function formatDefaultItemTitle(itemNumber: number): string {
-      if (itemNumber < 10) return `Item 0${itemNumber}`;
-      return `Item ${itemNumber}`;
+      return formatNumberedTitle('Item', itemNumber);
     }
 
-    function formatSlideTitle(slideNumber: number): string {
-      return `Slide ${slideNumber}`;
+    /** "Tile 1", "Photo 12", "Item 03" → prefix used for the next auto title. */
+    function getNumberedTitlePrefix(title: string | undefined): string | null {
+      if (!title?.trim()) return null;
+      const match = title.trim().match(/^(.+?)\s+(\d+)$/);
+      return match?.[1] ?? null;
     }
 
-    function formatPhotoTitle(photoNumber: number): string {
-      return `Photo ${photoNumber}`;
-    }
-
-    function isAutoGeneratedItemTitle(title: string | undefined): boolean {
-      if (!title?.trim()) return true;
-      const trimmed = title.trim();
+    function isKnownGenericAutoTitle(title: string): boolean {
       return (
-        /^Item 0?\d+$/i.test(trimmed) ||
-        /^Slide \d+$/i.test(trimmed) ||
-        /^Photo \d+$/i.test(trimmed)
+        /^Item 0?\d+$/i.test(title) ||
+        /^Slide \d+$/i.test(title) ||
+        /^Photo \d+$/i.test(title) ||
+        /^Image \d+$/i.test(title)
       );
     }
 
-    function isSlideAutoTitle(title: string | undefined): boolean {
-      return !!title?.trim() && /^Slide \d+$/i.test(title.trim());
-    }
-
-    function isPhotoAutoTitle(title: string | undefined): boolean {
-      return !!title?.trim() && /^Photo \d+$/i.test(title.trim());
+    /** Most common "Name N" prefix in the list (Tile / Photo / Slide / Item / …). */
+    function detectDominantTitlePrefix(items: ContentItem[]): string {
+      const counts = new Map<string, number>();
+      for (const item of items) {
+        const prefix = getNumberedTitlePrefix(item.title);
+        if (!prefix) continue;
+        counts.set(prefix, (counts.get(prefix) || 0) + 1);
+      }
+      let bestPrefix = 'Item';
+      let bestCount = 0;
+      for (const [prefix, count] of counts) {
+        if (count > bestCount) {
+          bestPrefix = prefix;
+          bestCount = count;
+        }
+      }
+      return bestPrefix;
     }
 
-    function formatAutoItemTitle(title: string | undefined, position: number): string {
-      if (isSlideAutoTitle(title)) return formatSlideTitle(position);
-      if (isPhotoAutoTitle(title)) return formatPhotoTitle(position);
-      return formatDefaultItemTitle(position);
+    function formatNumberedTitle(prefix: string, itemNumber: number): string {
+      if (/^item$/i.test(prefix) && itemNumber < 10) return `Item 0${itemNumber}`;
+      return `${prefix} ${itemNumber}`;
     }
 
-    type AutoTitlePattern = 'photo' | 'slide' | 'item';
-
-    /** Pick Photo / Slide / Item naming from the dominant pattern in existing items. */
-    function detectDominantAutoTitlePattern(items: ContentItem[]): AutoTitlePattern {
-      let photoCount = 0;
-      let slideCount = 0;
-      let itemCount = 0;
-
-      for (const item of items) {
-        const title = item.title?.trim() || '';
-        if (/^Photo \d+$/i.test(title)) photoCount++;
-        else if (/^Slide \d+$/i.test(title)) slideCount++;
-        else if (/^Item 0?\d+$/i.test(title) || !title) itemCount++;
+    function isAutoGeneratedItemTitle(title: string | undefined, items?: ContentItem[]): boolean {
+      if (!title?.trim()) return true;
+      const trimmed = title.trim();
+      if (isKnownGenericAutoTitle(trimmed)) return true;
+      if (items && items.length) {
+        const prefix = getNumberedTitlePrefix(trimmed);
+        const dominant = detectDominantTitlePrefix(items);
+        return !!prefix && prefix.toLowerCase() === dominant.toLowerCase();
       }
+      return false;
+    }
 
-      if (photoCount > 0 && photoCount >= slideCount && photoCount >= itemCount) return 'photo';
-      if (slideCount > 0 && slideCount >= itemCount) return 'slide';
-      return 'item';
+    function formatAutoItemTitle(title: string | undefined, position: number): string {
+      const prefix = getNumberedTitlePrefix(title);
+      if (prefix) return formatNumberedTitle(prefix, position);
+      return formatDefaultItemTitle(position);
     }
 
     function formatNewItemTitle(items: ContentItem[]): string {
-      const nextNumber = items.length + 1;
-      const pattern = detectDominantAutoTitlePattern(items);
-      if (pattern === 'photo') return formatPhotoTitle(nextNumber);
-      if (pattern === 'slide') return formatSlideTitle(nextNumber);
-      return formatDefaultItemTitle(nextNumber);
+      return formatNumberedTitle(detectDominantTitlePrefix(items), items.length + 1);
     }
 
     function renumberAutoItemTitles(items: ContentItem[]): ContentItem[] {
       return items.map((item, index) => {
         const position = index + 1;
-        if (!isAutoGeneratedItemTitle(item.title)) {
+        if (!isAutoGeneratedItemTitle(item.title, items)) {
           return { ...item, orderNumber: position };
         }
         const nextTitle = formatAutoItemTitle(item.title, position);
@@ -1801,10 +1817,11 @@
           }
         }
       }
-      if (item.title && item.title.trim() && !isAutoGeneratedItemTitle(item.title)) {
+      const itemList = Array.isArray(contentSchema?.contentItems) ? contentSchema.contentItems : [];
+      if (item.title && item.title.trim() && !isAutoGeneratedItemTitle(item.title, itemList)) {
         return item.title;
       }
-      if (isAutoGeneratedItemTitle(item.title)) {
+      if (isAutoGeneratedItemTitle(item.title, itemList)) {
         return formatAutoItemTitle(item.title, index + 1);
       }
       return formatDefaultItemTitle(index + 1);
@@ -1868,13 +1885,20 @@
         } while (contentSchema.contentItems.some((item: ContentItem) => item.id === uniqueId));
         const newTitle = formatNewItemTitle(contentSchema.contentItems);
         // Create the new item (copy template or last item structure)
-        const template = contentSchema.contentItems[0];
+        const template =
+          (Array.isArray(contentSchema.contentItems) &&
+            contentSchema.contentItems.find((item: ContentItem) => Array.isArray(item.properties) && item.properties.length > 0)) ||
+          itemTemplate;
+        if (!template || !Array.isArray(template.properties) || template.properties.length === 0) {
+          console.warn('[Add] Cannot add item: template has no properties');
+          return;
+        }
         const newItem: ContentItem = {
           ...template,
           id: uniqueId,
           title: newTitle,
           orderNumber: contentSchema.contentItems.length + 1,
-          properties: template.properties.map((p: any) => ({ ...p })),
+          properties: cloneProperties(template.properties),
         };
         // Remove the new item if it exists elsewhere (shouldn't, but for safety)
         const nextItems = [...contentSchema.contentItems.filter((i: ContentItem) => i.id !== uniqueId), newItem];
@@ -1934,20 +1958,47 @@
       }
     }
 
-    // Helper function to clone properties
+    function unwrapContentMediaValue(raw: unknown): unknown {
+      if (raw && typeof raw === 'object' && 'url' in (raw as Record<string, unknown>)) {
+        return (raw as { url?: string }).url ?? '';
+      }
+      return raw;
+    }
+
+    function pickLiveContentValue(...candidates: unknown[]): unknown {
+      for (const candidate of candidates) {
+        const unwrapped = unwrapContentMediaValue(candidate);
+        if (unwrapped === undefined || unwrapped === null || unwrapped === '') continue;
+        return unwrapped;
+      }
+      return '';
+    }
+
+    function emptyValueForNewItemProperty(prop: any): unknown {
+      const icType = String(prop?.inputController?.type || '').toLowerCase();
+      if (['browser', 'image', 'file', 'video', 'audio'].includes(icType)) {
+        return '';
+      }
+      if (typeof prop?.defaultValue === 'boolean' || typeof prop?.defaultValue === 'number') {
+        return prop.defaultValue;
+      }
+      return '';
+    }
+
+    // Clone controller schema for a new item. Do not copy Unsplash/sample defaults
+    // into value — those overwrite live gallery URLs in the preview overlay.
     function cloneProperties(properties: Array<any>): Property[] {
       if (!properties || !Array.isArray(properties)) {
         return [];
       }
       
       return properties.map(prop => {
-        // Create a deep clone of each property
         const clonedProp: Property = {
           id: prop.id || prop.name,
           name: prop.name || prop.id,
           type: prop.type || 'string', // Ensure type is set
           defaultValue: prop.defaultValue,
-          value: prop.defaultValue,  // Reset to default value
+          value: emptyValueForNewItemProperty(prop),
           inputController: {
             type: prop.inputController?.type || 'text', // Ensure inputController.type is set
             description: prop.inputController?.description,
@@ -1979,8 +2030,13 @@
             const key = p.id || p.name;
             // Canonical state first; schema mirror/defaultValue are legacy
             // seeds for keys the editor never touched.
+            const liveOnItem = key != null ? (item as Record<string, unknown>)[key] : undefined;
             props[key] = normalizeContentPropertyValue(
-              contentState[`${item.id}__${key}`] ?? p.value ?? p.defaultValue
+              pickLiveContentValue(
+                contentState[`${item.id}__${key}`],
+                p.value,
+                liveOnItem
+              )
             );
           });
           // Carry opacity state so parent saves don't lose per-property
@@ -2415,24 +2471,27 @@
                                   {@const reactiveValue = designState[stateKey]}
                                   
                                   {#if isVisible}
+                                    {@const isFontIc = property.inputController.type.toLowerCase() === 'font'}
                                     <div 
-                                      class="ictrl input-controller flex items-center justify-between w-full p-0"
+                                      class="ictrl input-controller flex {isFontIc ? 'flex-col items-stretch' : 'items-center justify-between'} w-full p-0"
                                       data-state={$openDropdowns?.has(props.controllerId) ? 'open' : 'closed'}
-                                      class:double-height={property.inputController.type.toLowerCase() === 'font'}
+                                      class:double-height={isFontIc}
                                       class:position-height={property.inputController.type.toLowerCase() === 'position'}
                                       class:fixed-position-height={property.inputController.type.toLowerCase() === 'fixedposition'}
                                       class:text-area-preview-height={property.inputController.type.toLowerCase() === 'textarea' || property.inputController.type.toLowerCase() === 'textArea'}
                                       class:position-controller={property.inputController.type.toLowerCase() === 'position'}
                                       class:position-dragging={property.inputController.type.toLowerCase() === 'position' && isDragging}
                                     >
+                                      {#if !isFontIc}
                                       <div class="ic-header-ct flex-1 min-w-0">
                                         <InputControllerHeader 
                                           label={header.label}
                                           helpText={header.helpText}
                                         />
                                       </div>
+                                      {/if}
                                       
-                                      <div class="ic-input-ct flex-shrink-0 ml-auto" style="width: 185px;">
+                                      <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0 ml-auto'}" style={isFontIc ? '' : 'width: 185px;'}>
                                         <svelte:component 
                                           this={InputComponent} 
                                           {...props}
@@ -2525,17 +2584,16 @@
                                     {@const isVisible = shouldShowProperty(property, contentSchema?.genericContent?.properties || [], 'content')}
                                     
                                     {#if isVisible}
-                                      <div class="ictrl input-controller flex items-center justify-between w-full p-0 browser-input-wrapper"
-                                        class:double-height={property.inputController.type.toLowerCase() === 'font'}
+                                      {@const isFontIc = property.inputController.type.toLowerCase() === 'font'}
+                                      <div class="ictrl input-controller flex {isFontIc ? 'flex-col items-stretch' : 'items-center justify-between'} w-full p-0 browser-input-wrapper"
+                                        class:double-height={isFontIc}
                                       >
-                                        <!-- Left side - Label -->
-                                        {#if InputComponent !== BrowserInputController}
+                                        {#if !isFontIc && InputComponent !== BrowserInputController}
                                           <InputControllerHeader 
                                             label={header.label}
                                             helpText={header.helpText}
                                           />
-                                        {:else}
-                                          <!-- Special case for BrowserInputController -->
+                                        {:else if !isFontIc}
                                           <div class="flex-1 min-w-0 pr-4">
                                             <InputControllerHeader 
                                               label={header.label}
@@ -2544,8 +2602,7 @@
                                           </div>
                                         {/if}
                                         
-                                        <!-- Right side - Input Component -->
-                                        <div class="ic-input-ct flex-shrink-0" style="width: 185px;">
+                                        <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
                                           <svelte:component 
                                             this={InputComponent} 
                                             {...props}
@@ -2625,18 +2682,17 @@
                                             {@const header = result.header}
                                             {@const isVisible = shouldShowProperty(property, item.properties, 'content')}
                                             
-                                            {#if isVisible}
-                                              <div class="ictrl input-controller flex items-center justify-between w-full p-0 browser-input-wrapper"
-                                                class:double-height={property.inputController.type.toLowerCase() === 'font'}
+                                            {#if isVisible && InputComponent}
+                                              {@const isFontIc = (property.inputController?.type || '').toLowerCase() === 'font'}
+                                              <div class="ictrl input-controller flex {isFontIc ? 'flex-col items-stretch' : 'items-center justify-between'} w-full p-0 browser-input-wrapper"
+                                                class:double-height={isFontIc}
                                               >
-                                                <!-- Left side - Label -->
-                                                {#if InputComponent !== BrowserInputController}
+                                                {#if !isFontIc && InputComponent !== BrowserInputController}
                                                   <InputControllerHeader 
                                                     label={header.label}
                                                     helpText={header.helpText}
                                                   />
-                                                {:else}
-                                                  <!-- Special case for BrowserInputController -->
+                                                {:else if !isFontIc}
                                                   <div class="flex-1 min-w-0 pr-4">
                                                     <InputControllerHeader 
                                                       label={header.label}
@@ -2645,8 +2701,7 @@
                                                   </div>
                                                 {/if}
                                                 
-                                                <!-- Right side - Input Component -->
-                                                <div class="ic-input-ct flex-shrink-0" style="width: 185px;">
+                                                <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
                                                   <svelte:component 
                                                     this={InputComponent} 
                                                     {...props}
@@ -3370,7 +3425,9 @@
 
       /* Specific style for font controllers */
       :global(.input-controller.double-height) {
-        height: 104px !important;
+        height: auto !important;
+        min-height: 104px;
+        align-items: flex-start !important;
       }
 
       /* Ensure content containers maintain width */

package/dist/components/ic/BrowserInputController.svelte

@@ -650,8 +650,7 @@
 {#if isFileBrowserOpen}
   <Portal target={portalTarget}>
     <div
-      class="browser-input-file-browser-overlay pointer-events-auto absolute inset-0 z-[999999] flex flex-col overflow-hidden bg-black/40"
-      class:p-3={!fillEditorPanel}
+      class="browser-input-file-browser-overlay pointer-events-auto absolute inset-0 z-[999999] flex flex-col overflow-hidden bg-black/40 p-0"
     >
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -667,20 +666,22 @@
         class:shadow-none={fillEditorPanel}
         class:max-w-[520px]={!fillEditorPanel}
         class:flex-1={!fillEditorPanel}
+        class:min-h-[550px]={fillEditorPanel}
         class:self-center={!fillEditorPanel}
         class:mx-auto={!fillEditorPanel}
         class:rounded-large={!fillEditorPanel}
         class:shadow-2xl={!fillEditorPanel}
       >
-        <div class="browser-input-file-browser-header flex h-[57px] shrink-0 items-center justify-between border-b border-grey2 px-4 py-3">
+        <div class="browser-input-file-browser-header relative flex h-[48px] shrink-0 items-center border-b border-grey2 pl-4 pr-8">
           <span class="body-medium text-grey7">Select file</span>
           <button
             type="button"
-            class="browser-input-file-browser-close inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-grey2"
+            class="browser-input-file-browser-close inline-flex h-6 w-6 items-center justify-center p-0"
+            style="position:absolute;top:4px;right:4px;"
             on:click={closeFileBrowser}
             aria-label="Close file browser"
           >
-            <X class="h-4! w-4!" />
+            <X class="h-6! w-6!" />
           </button>
         </div>
 
@@ -705,6 +706,12 @@
 {/if}
 
 <style>
+  .browser-input-file-browser-close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+
   .browser-input-file-browser-dialog-animate {
     transform-origin: center center;
     animation: browser-input-fb-scale-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);