@widgetic/editor 4.0.5 → 4.0.7

package/dist/components/editors/EmbedEditor.svelte.d.ts

@@ -12,15 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const EmbedEditor: $$__sveltets_2_IsomorphicComponent<{
-    /**
-     * Component Configuration Props
-     * width/height: Control overall component dimensions
-     * headerHeight: Space allocated for embed code display section
-     * embedSchema: Defines customizable properties for the embedded widget
-     *
-     * Note: headerHeight affects the vertical space distribution between
-     * the embed code display and property editor sections
-     */ class?: string;
+    /** Component configuration — existing public props and methods are preserved. */ class?: string;
     style?: string;
     embedHeaderText?: string;
     embedCode?: string;
@@ -28,23 +20,21 @@ declare const EmbedEditor: $$__sveltets_2_IsomorphicComponent<{
     embedSchema: any;
     initialValues?: Record<string, any>;
     standalone?: boolean;
+    /** Show Save status control in the shared drag bar (composition embed overlay). */ showSaveButton?: boolean;
+    /** True when local embed option edits are not yet persisted. */ saveDirty?: boolean;
+    /** True while a save request is in flight. */ saveSaving?: boolean;
     updateValue?: (propertyId: string, value: any) => void;
     setPosition?: (left: number, top: number) => void;
-    getPosition?: () => {
-        left: number;
-        top: number;
-    };
+    getPosition?: () => any;
 }, {
+    save: CustomEvent<any>;
     propertyChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     updateValue: (propertyId: string, value: any) => void;
     setPosition: (left: number, top: number) => void;
-    getPosition: () => {
-        left: number;
-        top: number;
-    };
+    getPosition: () => any;
 }, string>;
 type EmbedEditor = InstanceType<typeof EmbedEditor>;
 export default EmbedEditor;

package/dist/components/editors/PropsEditor.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={false} />
+
 <script lang="ts">
     /**
      * PropsEditor Component
@@ -63,6 +65,7 @@
     /**
      * UTILS IMPORTS
      */
+    import InputControllerRenderer, { type ControllerDescriptor } from '../ic/InputControllerRenderer.svelte';
     import MediaManager from '../../utils/MediaManager';
     import FontManager from '../../utils/FontManager';
     import { config as appConfig } from '../../config';
@@ -135,6 +138,23 @@
     // Enable built-in drag (component manages its own absolute positioning)
     export let enableDrag = true;
 
+    /** Show Save status control in the top drag/header bar (composition page). */
+    export let showSaveButton = false;
+    /** True when local edits are not yet persisted. */
+    export let saveDirty = false;
+    /** True while a save request is in flight. */
+    export let saveSaving = false;
+
+    /** Optional content below the shared toolbar, before property fields. */
+    export let headerContent = undefined;
+    export let headerClass = '';
+    export let dragHandleClass = 'text-grey2';
+    export let title = 'Edit Properties';
+    /** Hide the default missing-schema message for header-only editors. */
+    export let showSchemaError = true;
+    /** Optional layout wrapper moved by this editor's built-in drag and position API. */
+    export let positionTarget = null;
+
     // Initial values from saved composition (merged over schema defaults)
     export let initialDesignValues: Record<string, any> = {};
     export let initialContentValues: Record<string, any> = {};
@@ -144,8 +164,11 @@
      */
     const CONTENT_PADDING = 16; // Outer padding for both tabs
     const CONTENT_INNER_PADDING = 16; // Inner padding for cards in Content tab
-    const HEADER_VERTICAL_PADDING = 24; // Padding for top and bottom of header
-    const HEADER_HEIGHT = 85; // 96px for header + 1px for separator
+    const DRAG_BAR_HEIGHT = 28; // Drag handle / Save row (absolute, overlays the header top)
+    const TABS_VERTICAL_PADDING = 14; // Breathing room above and below the tab list
+    const TABS_LIST_HEIGHT = 56; // Tabs.List height
+    // Drag bar band + gap + tabs + gap + 1px separator
+    const HEADER_HEIGHT = DRAG_BAR_HEIGHT + TABS_VERTICAL_PADDING * 2 + TABS_LIST_HEIGHT + 1;
     const EDITOR_STROKE_COLOR = '#e5e7eb'; // Color for editor stroke
     const EDITOR_STROKE_WIDTH = '1px'; // Thickness of editor stroke
 
@@ -928,8 +951,11 @@
      */
     onDestroy(() => {
       // Clean up drag listeners
-      document.removeEventListener('mousemove', handleDragMove);
-      document.removeEventListener('mouseup', handleDragEnd);
+      if (browser) {
+        document.removeEventListener('mousemove', handleDragMove);
+        document.removeEventListener('mouseup', handleDragEnd);
+        if (dragState.active) document.body.style.cursor = '';
+      }
 
       // Clean up scroll listeners
       if (designScrollViewport) {
@@ -1475,6 +1501,35 @@
       }
     }
     
+    /** Preserve the schema factory's props while narrowing each concrete render branch. */
+    function describeInputController(component: ReturnType<typeof getInputControllerComponent> | null, props: ReturnType<typeof renderInputController>['props']): ControllerDescriptor | null {
+      switch (component) {
+        case TextInputController: return { kind: 'textinput', props };
+        case TextAreaPreviewInputController: return { kind: 'textarea', props };
+        case NumberInputController: return { kind: 'number', props };
+        case SliderInputController: return { kind: 'slider', props };
+        case SliderRangeInputController: return { kind: 'sliderrange', props };
+        case DropdownInputController: return { kind: 'dropdown', props };
+        case DatePickerInputController: return { kind: 'datepicker', props };
+        case DateFieldInputController: return { kind: 'datefield', props };
+        case RangeCalendarInputController: return { kind: 'rangecalendar', props };
+        case SwitchInputController: return { kind: 'switch', props };
+        case ColorPickerInputController: return { kind: 'colorpicker', props };
+        case CheckboxInputController: return { kind: 'checkbox', props };
+        case RadioGroupInputController: return { kind: 'radiogroup', props };
+        case FontInputController: return { kind: 'font', props };
+        case PositionInputController: return { kind: 'position', props };
+        case BrowserInputController: return { kind: 'browser', props };
+        case FixedPositionInputController: return { kind: 'fixedposition', props };
+        case VectorInputController: return { kind: 'vector', props };
+        case AngleInputController: return { kind: 'angle', props };
+        case TimeInputController: return { kind: 'time', props };
+        case RoundedCornersInputController: return { kind: 'roundedcorners', props };
+        case TagsInputController: return { kind: 'tags', props };
+        default: return null;
+      }
+    }
+
     // Create a store for managing open dropdowns (only one should be open at a time)
     const openDropdowns = writable<Set<string>>(new Set());
     
@@ -1599,6 +1654,8 @@
     }
 
     interface ContentItem {
+      // Saved content may carry schema-defined values alongside its metadata.
+      [propertyName: string]: unknown;
       id: string;
       properties: Array<Property>;
       orderNumber?: number;
@@ -2252,28 +2309,43 @@
     let dragState = { active: false, startX: 0, startY: 0, initialLeft: 0, initialTop: 0 };
 
     function handleDragStart(e: MouseEvent) {
-      if (!enableDrag || !rootElement) return;
+      const target = positionTarget || rootElement;
+      if (!enableDrag || !target || e.button !== 0) return;
       e.preventDefault();
-
+      e.stopPropagation();
+
+      // Wrapped editors keep the measured size, including the parent's height clamp.
+      // Resolve percentage/centered placement before leaving flow, never parse it as pixels.
+      if (positionTarget) {
+        const rectangle = target.getBoundingClientRect();
+        const parent = target.offsetParent;
+        const parentRectangle = parent?.getBoundingClientRect() || { left: 0, top: 0 };
+        const left = rectangle.left - parentRectangle.left - (parent?.clientLeft || 0) + (parent?.scrollLeft || 0);
+        const top = rectangle.top - parentRectangle.top - (parent?.clientTop || 0) + (parent?.scrollTop || 0);
+        Object.assign(target.style, {
+          position: 'absolute', margin: '0', transform: 'none',
+          boxSizing: 'border-box', width: `${rectangle.width}px`, height: `${rectangle.height}px`,
+          left: `${left}px`, top: `${top}px`
+        });
+      }
       dragState = {
         active: true,
         startX: e.clientX,
         startY: e.clientY,
-        initialLeft: parseFloat(rootElement.style.left) || 0,
-        initialTop: parseFloat(rootElement.style.top) || 0
+        initialLeft: parseFloat(target.style.left) || 0,
+        initialTop: parseFloat(target.style.top) || 0
       };
-      rootElement.style.zIndex = '50';
+      target.style.zIndex = '50';
       document.addEventListener('mousemove', handleDragMove);
       document.addEventListener('mouseup', handleDragEnd);
       document.body.style.cursor = 'move';
     }
 
     function handleDragMove(e: MouseEvent) {
-      if (!dragState.active || !rootElement) return;
+      if (!dragState.active) return;
       const left = dragState.initialLeft + (e.clientX - dragState.startX);
       const top = dragState.initialTop + (e.clientY - dragState.startY);
-      rootElement.style.left = `${left}px`;
-      rootElement.style.top = `${top}px`;
+      setPosition(left, top);
       dispatch('move', { left, top });
     }
 
@@ -2283,10 +2355,7 @@
       document.removeEventListener('mousemove', handleDragMove);
       document.removeEventListener('mouseup', handleDragEnd);
       document.body.style.cursor = '';
-      dispatch('moveEnd', {
-        left: parseFloat(rootElement.style.left) || 0,
-        top: parseFloat(rootElement.style.top) || 0
-      });
+      dispatch('moveEnd', getPosition());
     }
 
     /** Public: update a design state value externally (used by EmbedEditor for dimension sync) */
@@ -2296,17 +2365,19 @@
 
     /** Public: set absolute position programmatically (used by parent for layout) */
     export function setPosition(left: number, top: number) {
-      if (!rootElement) return;
-      rootElement.style.left = `${left}px`;
-      rootElement.style.top = `${top}px`;
+      const target = positionTarget || rootElement;
+      if (!target) return;
+      target.style.left = `${left}px`;
+      target.style.top = `${top}px`;
     }
 
     /** Public: get current position */
     export function getPosition() {
-      if (!rootElement) return { left: 0, top: 0 };
+      const target = positionTarget || rootElement;
+      if (!target) return { left: 0, top: 0 };
       return {
-        left: parseFloat(rootElement.style.left) || 0,
-        top: parseFloat(rootElement.style.top) || 0
+        left: parseFloat(target.style.left) || 0,
+        top: parseFloat(target.style.top) || 0
       };
     }
 
@@ -2353,47 +2424,64 @@
         onValueChange={handleTabChange}
       >
       
-      {#if !designSchema && !contentSchema}
-        <div class="flex flex-col items-center justify-center h-full">
-          <div class="text-error text-lg font-medium">No schema configuration available</div>
-          <div class="text-grey5 subtext mt-1">Error code: CONFIG_NOT_FOUND</div>
-        </div>
-      {:else}
-        <!-- Drag Handle - Show outside header when no header exists -->
-        {#if showDragHandle && (!designSchema || !contentSchema)}
+      <!-- A single toolbar owns drag and Save for all editor variants. -->
+      {#if showDragHandle && (designSchema || contentSchema || headerContent)}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
-          <div class="absolute top-0 left-0 w-full flex justify-center z-[999]">
+          <div class="props-editor-drag-bar top-0 left-0 w-full flex h-7 shrink-0 items-center justify-center z-999 px-3 {headerContent ? 'relative ' + headerClass : 'absolute'}">
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div 
-              class="flex items-center justify-center h-6 cursor-move transition-all duration-200 widgetic-colors opacity-0 hover:opacity-100 drag-handle-container"
+              class="flex items-center justify-center h-7 cursor-move transition-all duration-200 widgetic-colors opacity-0 hover:opacity-100 drag-handle-container"
               onmousedown={handleDragStart}
             >
-              <DragHandle class="w-[66px] h-[24px] text-grey2 hover:text-grey3 transition-colors" />
+              <DragHandle class="w-16.5 h-6 {dragHandleClass} hover:text-grey3 transition-colors" />
             </div>
+            {#if showSaveButton}
+              {#if title}<span class="props-editor-title-label absolute left-6 top-1.75 pointer-events-none select-none text-[13px] font-bold leading-none text-[hsl(var(--grey5))]">{title}</span>{/if}
+              <button
+                type="button"
+                class="props-editor-save-btn absolute right-6 top-1 inline-flex h-5 w-19 items-center justify-center rounded-md text-[10px] font-semibold leading-none transition-colors focus:outline-none focus-visible:outline-none
+                  {saveSaving
+                    ? 'text-[hsl(var(--deep-forest-green))] bg-[hsl(var(--light-green))]'
+                    : saveDirty
+                      ? 'text-white bg-[hsl(var(--deep-forest-green))] hover:bg-[hsl(var(--dark))] hover:text-white'
+                      : 'text-[hsl(var(--grey5))] bg-grey2 inset-ring inset-ring-grey3/20 hover:inset-ring-deep-forest-green hover:bg-[hsl(var(--deep-forest-green))] hover:text-white'}"
+                disabled={saveSaving}
+                onclick={(e) => {
+                  e.stopPropagation();
+                  if (!saveSaving && saveDirty) dispatch('save');
+                }}
+                onmousedown={(e) => e.stopPropagation()}
+              >
+                <svg class="props-editor-save-icon absolute left-2 h-3 w-3 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                  <polyline points="17 21 17 13 7 13 7 21" />
+                  <polyline points="7 3 7 8 15 8" />
+                </svg>
+                <span class="props-editor-save-label">{saveSaving ? 'Saving' : 'Save'}</span>
+              </button>
+            {/if}
           </div>
         {/if}
 
+      {#if headerContent}
+        <div class="props-editor-header-content shrink-0 {headerClass}">{@render headerContent()}</div>
+      {/if}
+
+      {#if !designSchema && !contentSchema}
+        {#if showSchemaError}
+          <div class="props-editor-schema-error flex flex-col items-center justify-center h-full">
+            <div class="props-editor-error-title text-error text-lg font-medium">No schema configuration available</div>
+            <div class="props-editor-error-code text-grey5 subtext mt-1">Error code: CONFIG_NOT_FOUND</div>
+          </div>
+        {/if}
+      {:else}
         <!-- Tabs header with buttons and separator - only show if both schemas exist -->
         {#if designSchema && contentSchema}
           <div 
-            class="tabs-header h-[96px] flex items-start pt-6 px-6 pb-4 rounded-t-[var(--radius-large)] header-hover-area relative" 
+            class="tabs-header h-28 shrink-0 flex items-start pt-10.5 px-6 pb-3.5 rounded-t-large header-hover-area relative"
           >
-            <!-- Drag Handle - Show inside header when header exists -->
-            {#if showDragHandle}
-              <!-- svelte-ignore a11y_no_static_element_interactions -->
-              <div class="absolute top-0 left-0 w-full flex justify-center z-[999]">
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
-                <div 
-                  class="flex items-center justify-center h-6 cursor-move transition-all duration-200 widgetic-colors opacity-0 hover:opacity-100 drag-handle-container"
-                  onmousedown={handleDragStart}
-                >
-                  <DragHandle class="w-[66px] h-[24px] text-grey2 hover:text-grey3 transition-colors" />
-                </div>
-              </div>
-            {/if}
-
             <Tabs.List 
-              class="tabs-list w-full h-[56px] rounded-large bg-grey2 p-1" 
+              class="tabs-list w-full h-14 rounded-large bg-grey2 p-1"
             >
               <Tabs.Trigger
                 value="design" 
@@ -2421,7 +2509,7 @@
         {/if}
         
         <!-- Design Tab Content -->
-        <div class="tab-design-container flex-grow overflow-y-auto scroll-area widgetic-colors hidden" 
+        <div class="tab-design-container grow scroll-area widgetic-colors hidden {headerContent ? 'min-h-0 flex-1 overflow-hidden' : 'overflow-y-auto'}"
              class:hidden={currentTab !== 'design'} 
              style="max-height: {!designSchema || !contentSchema ? '100%' : `calc(100% - ${HEADER_HEIGHT}px)`}" 
              data-scrollable={$designScrollState.shouldShowScroll} 
@@ -2430,13 +2518,13 @@
             class="h-full"
             type="hover"
             scrollHideDelay={0}
-            scrollbarYClasses="flex touch-none select-none transition-colors w-[24px] px-2 bg-white {!designSchema || !contentSchema ? 'pt-6' : 'pt-4'} pb-6 [&>div]:w-[8px] [&>div]:bg-grey1 [&>div]:rounded-pill [&>div]:cursor-pointer [&>div]:transition-colors [&>div]:duration-250 [&>div]:hover:bg-grey2"
+            scrollbarYClasses="flex touch-none select-none transition-colors w-6 px-2 {headerContent ? 'bg-transparent' : 'bg-white'} {!designSchema || !contentSchema ? 'pt-7' : 'pt-4'} pb-6 [&>div]:w-2 [&>div]:bg-grey1 [&>div]:rounded-pill [&>div]:cursor-pointer [&>div]:transition-colors [&>div]:duration-250 [&>div]:hover:bg-grey2"
           >
             <div class="scroll-viewport" data-radix-scroll-area-viewport bind:this={designScrollViewport}>
-              <div class="px-6 {!designSchema || !contentSchema ? 'py-6' : 'pt-4 pb-6'}" bind:this={designContentWrapper}>
+              <div class="px-6 {!designSchema || !contentSchema ? 'pt-7 pb-6' : 'pt-4 pb-6'}" bind:this={designContentWrapper}>
                 <Tabs.Content 
                   value="design" 
-                  class="design-tab-content !mt-0 tabs-content-container w-full outline-none {isFirstLoad ? 'initial-load' : !isInitialTabLoad ? 'animate-slide-left' : ''}"
+                  class="design-tab-content mt-0! tabs-content-container w-full outline-none {isFirstLoad ? 'initial-load' : !isInitialTabLoad ? 'animate-slide-left' : ''}"
                   data-tab="design"
                   style="animation-duration: 300ms; transform: none;"
                 >
@@ -2495,12 +2583,13 @@
                                       </div>
                                       {/if}
                                       
-                                      <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0 ml-auto'}" style={isFontIc ? '' : 'width: 185px;'}>
-                                        <svelte:component 
-                                          this={InputComponent} 
-                                          {...props}
-                                          value={reactiveValue !== undefined ? reactiveValue : props.value}
-                                          shouldFocus={activeControllerId === props.id}
+                                      <div class="ic-input-ct {isFontIc ? 'w-full' : 'shrink-0 ml-auto'}" style={isFontIc ? '' : 'width: 185px;'}>
+                                        <InputControllerRenderer
+                                          controller={describeInputController(InputComponent, {
+                                            ...props,
+                                            value: reactiveValue !== undefined ? reactiveValue : props.value,
+                                            shouldFocus: activeControllerId === props.id
+                                          })}
                                         />
                                       </div>
                                     </div>
@@ -2533,7 +2622,7 @@
 
         <!-- Content Tab Content  -->
         {#if contentSchema}
-          <div class="tab-content-container flex-grow overflow-y-auto scroll-area widgetic-colors hidden" 
+          <div class="tab-content-container grow overflow-y-auto scroll-area widgetic-colors hidden"
                class:hidden={currentTab !== 'content'} 
                style="max-height: {!contentSchema || !designSchema ? '100%' : `calc(100% - ${HEADER_HEIGHT}px)`}" 
                data-scrollable={$contentScrollState.shouldShowScroll} 
@@ -2542,13 +2631,13 @@
               class="h-full"
               type="hover"
               scrollHideDelay={0}
-              scrollbarYClasses="flex touch-none select-none transition-colors w-[24px] px-2 bg-white {!designSchema || !contentSchema ? 'pt-6' : 'pt-4'} pb-6 [&>div]:w-[8px] [&>div]:bg-grey1 [&>div]:rounded-pill [&>div]:cursor-pointer [&>div]:transition-colors [&>div]:duration-250 [&>div]:hover:bg-grey2"
+              scrollbarYClasses="flex touch-none select-none transition-colors w-6 px-2 {headerContent ? 'bg-transparent' : 'bg-white'} {!designSchema || !contentSchema ? 'pt-7' : 'pt-4'} pb-6 [&>div]:w-2 [&>div]:bg-grey1 [&>div]:rounded-pill [&>div]:cursor-pointer [&>div]:transition-colors [&>div]:duration-250 [&>div]:hover:bg-grey2"
             >
               <div class="scroll-viewport" data-radix-scroll-area-viewport bind:this={contentScrollViewport}>
-                <div class="px-6 {!designSchema || !contentSchema ? 'pt-6 pb-6' : 'pt-4 pb-6'}" bind:this={contentWrapper}>
+                <div class="px-6 {!designSchema || !contentSchema ? 'pt-7 pb-6' : 'pt-4 pb-6'}" bind:this={contentWrapper}>
                   <Tabs.Content 
                     value="content" 
-                    class="content-tab-content !mt-0 tabs-content-container w-full {isFirstLoad ? 'initial-load' : !isInitialTabLoad ? 'animate-slide-right' : ''}" 
+                    class="content-tab-content mt-0! tabs-content-container w-full {isFirstLoad ? 'initial-load' : !isInitialTabLoad ? 'animate-slide-right' : ''}"
                     data-tab="content"
                     style="transform: none; position: relative; z-index: 1;"
                   >
@@ -2561,7 +2650,7 @@
                           onOpenChange={() => isGenericContentOpen = !isGenericContentOpen}
                         >
                           <Collapsible.Trigger class="generic-content-trigger w-full">
-                            <div class="flex items-center h-[52px]" style="padding-left: {CONTENT_INNER_PADDING}px; padding-right: {CONTENT_INNER_PADDING}px;">
+                            <div class="flex items-center h-13" style="padding-left: {CONTENT_INNER_PADDING}px; padding-right: {CONTENT_INNER_PADDING}px;">
                               <h3 class="body-medium text-grey7 flex-1 content-title">{contentSchema?.genericContent?.title || 'Content'}</h3>
                               <ChevronDown class="h-6 w-6 text-grey5 transition-transform chevron" />
                             </div>
@@ -2574,7 +2663,7 @@
                           <Collapsible.Content>
                             {#if isGenericContentOpen}
                             <Card.Content class="p-0 px-4">
-                              <div class="pt-[14px] pb-[16px]">
+                              <div class="pt-3.5 pb-4">
                                 <div class="properties-list flex flex-col" style="gap: 8px;">
                                   {#each contentSchema?.genericContent?.properties || [] as property, propertyIndex}
                                     {@const result = renderInputController(
@@ -2607,12 +2696,9 @@
                                           </div>
                                         {/if}
                                         
-                                        <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
-                                          <svelte:component 
-                                            this={InputComponent} 
-                                            {...props}
-                                            {header}
-                                            shouldFocus={activeControllerId === props.id}
+                                        <div class="ic-input-ct {isFontIc ? 'w-full' : 'shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
+                                          <InputControllerRenderer
+                                            controller={describeInputController(InputComponent, { ...props, header, shouldFocus: activeControllerId === props.id })}
                                           />
                                         </div>
                                       </div>
@@ -2650,8 +2736,8 @@
                                   onOpenChange={() => toggleItem(item.id)}
                                 >
                                   <Collapsible.Trigger class="content-item-trigger w-full">
-                                    <div class="flex items-center h-[52px] cursor-pointer widgetic-colors">
-                                      <div class="drag-handle flex items-center justify-center w-[56px] cursor-move hover:text-grey5">
+                                    <div class="flex items-center h-13 cursor-pointer widgetic-colors">
+                                      <div class="drag-handle flex items-center justify-center w-14 cursor-move hover:text-grey5">
                                         <IconGripVertical class="w-6 h-6 text-grey2 transition-colors duration-200" />
                                       </div>
                                       
@@ -2674,7 +2760,7 @@
                                   <Collapsible.Content>
                                     {#if isItemOpen(item.id)}
                                     <Card.Content class="p-0 px-4">
-                                      <div class="pt-[14px] pb-[16px]">
+                                      <div class="pt-3.5 pb-4">
                                         <div class="properties-list flex flex-col" style="gap: 8px;">
                                           {#each item.properties as property, propertyIndex}
                                             {@const result = renderInputController(
@@ -2708,12 +2794,9 @@
                                                   </div>
                                                 {/if}
                                                 
-                                                <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
-                                                  <svelte:component 
-                                                    this={InputComponent} 
-                                                    {...props}
-                                                    {header}
-                                                    shouldFocus={activeControllerId === props.id}
+                                                <div class="ic-input-ct {isFontIc ? 'w-full' : 'shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
+                                                  <InputControllerRenderer
+                                                    controller={describeInputController(InputComponent, { ...props, header, shouldFocus: activeControllerId === props.id })}
                                                   />
                                                 </div>
                                               </div>
@@ -2722,11 +2805,11 @@
                                         </div>
                                         
                                         <!-- Delete Item Button -->
-                                        <div class="mt-[16px] flex flex-col gap-2 relative z-10">
+                                        <div class="mt-4 flex flex-col gap-2 relative z-10">
                                           <!-- svelte-ignore a11y_mouse_events_have_key_events -->
                                           <button
                                             type="button"
-                                            class="widgetic-colors h-[34px] w-full flex items-center justify-center relative z-10 group"
+                                            class="widgetic-colors h-8.5 w-full flex items-center justify-center relative z-10 group"
                                             style="
                                               background-color: hsl(var(--error)) !important; 
                                               border-radius: var(--radius-small) !important;
@@ -2764,7 +2847,7 @@
                           <div class="content-add-item-ct mt-4">
                             <Button
                               variant="ghost"
-                              class="group w-full h-[52px] bg-grey1 hover:bg-grey2 active:scale-[0.98] border-2 border-grey2 rounded-medium"
+                              class="group w-full h-13 bg-grey1 hover:bg-grey2 active:scale-[0.98] border-2 border-grey2 rounded-medium"
                               style="transition: background-color 0.2s ease, transform 0.15s ease !important;"
                               onclick={handleAddNewItem}
                             >
@@ -2788,7 +2871,7 @@
         <div
           bind:this={fileBrowserPortalHost}
           id="props-editor-file-browser-portal"
-          class="props-editor-file-browser-portal pointer-events-none absolute inset-0 z-[999998]"
+          class="props-editor-file-browser-portal pointer-events-none absolute inset-0 z-999998"
         ></div>
       </Tabs.Root>
 </div>
@@ -2806,7 +2889,9 @@
       .props-editor-container:not(:has(.header-hover-area)) {
         position: relative;
       }
-      .props-editor-container:not(:has(.header-hover-area)):hover :global(.drag-handle-container) {
+      .props-editor-container:not(:has(.header-hover-area)):hover :global(.drag-handle-container),
+      .props-editor-container:has(.header-hover-area:hover) :global(.props-editor-drag-bar .drag-handle-container),
+      .props-editor-container :global(.props-editor-drag-bar:hover .drag-handle-container) {
         opacity: 1 !important;
       }
       :global(.drag-handle-container) {
@@ -2844,6 +2929,23 @@
       .props-editor-container:has(.tabs-header) {
         --has-both-schemas: 1rem;
       }
+
+      /* ── Save button (composition drag bar) ── */
+      /* Icon stays put next to the text; label is centered in the remaining space
+         with a small left bias so "Save" and "Saving" never shift the icon. */
+      .props-editor-save-label {
+        padding-left: 14px;
+        line-height: 1;
+      }
+      .props-editor-save-btn .props-editor-save-icon {
+        color: currentColor !important;
+        stroke: currentColor !important;
+      }
+      .props-editor-save-label,
+      :global(.props-editor-save-label) {
+        color: currentColor !important;
+        line-height: 1;
+      }
       :global(.content-items-wrapper) {
         padding-top: 1rem;
       }

package/dist/components/editors/PropsEditor.svelte.d.ts

@@ -33,6 +33,15 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
     defaultOpen?: boolean;
     showDragHandle?: boolean;
     enableDrag?: boolean;
+    /** Show Save status control in the top drag/header bar (composition page). */ showSaveButton?: boolean;
+    /** True when local edits are not yet persisted. */ saveDirty?: boolean;
+    /** True while a save request is in flight. */ saveSaving?: boolean;
+    /** Optional content below the shared toolbar, before property fields. */ headerContent?: any;
+    headerClass?: string;
+    dragHandleClass?: string;
+    title?: string;
+    /** Hide the default missing-schema message for header-only editors. */ showSchemaError?: boolean;
+    /** Optional layout wrapper moved by this editor's built-in drag and position API. */ positionTarget?: any;
     initialDesignValues?: Record<string, any>;
     initialContentValues?: Record<string, any>;
     updateDesignValue?: (propertyId: string, value: any) => void;
@@ -42,6 +51,7 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
         top: number;
     };
 }, {
+    save: CustomEvent<any>;
     updated: CustomEvent<any>;
     propertyChange: CustomEvent<any>;
     goToItem: CustomEvent<any>;

package/dist/components/ic/ColorPickerInputController.svelte

@@ -67,8 +67,6 @@
   export let onChange: (newValue: string) => void;  // Value change callback
   export let controllerId: string = '';
   export let id: string = '';
-  export let openDropdowns: any;
-  export let toggleDropdown: (id: string) => void;
   export let config: InputControllerConfig = {};    // Additional configuration
   export let helpText: string | undefined = undefined; // Help text for the input
 

package/dist/components/ic/ColorPickerInputController.svelte.d.ts

@@ -21,8 +21,6 @@ declare const ColorPickerInputController: $$__sveltets_2_IsomorphicComponent<{
     onChange: (newValue: string) => void;
     controllerId?: string;
     id?: string;
-    openDropdowns: any;
-    toggleDropdown: (id: string) => void;
     config?: InputControllerConfig;
     helpText?: string | undefined;
     saveRecentColors?: boolean;