@widgetic/editor 4.0.6 → 4.0.8

package/dist/components/editors/PropsEditor.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={false} />
+
 <script lang="ts">
     /**
      * PropsEditor Component
@@ -13,7 +15,16 @@
     // Svelte imports
     import { onMount, onDestroy, createEventDispatcher, afterUpdate } from 'svelte';
     const dispatch = createEventDispatcher();
-    import { writable, get } from 'svelte/store';
+    import { writable, get, type Writable } from 'svelte/store';
+    import type {
+        ContentSchemaItemView,
+        ContentSchemaPropertyView,
+        ContentSchemaView,
+        DesignSchemaComponentView,
+        DesignSchemaPropertyGroupView,
+        DesignSchemaPropertyView,
+        DesignSchemaView,
+    } from '../../schemaViews.js';
 
     /**
      * COMPONENTS IMPORTS
@@ -59,10 +70,12 @@
       TagsInputController,
       DateFieldInputController
     } from '../ic';
+    import type { InputControllerConfig } from '../ic';
 
     /**
      * 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';
@@ -81,15 +94,6 @@
      */
     type InputValue = string | number | boolean | any | null;
 
-    interface PropertyGroup {
-      name: string;
-      properties: Array<Property>;
-      visibilityCondition?: {
-        dependsOn: string | string[];
-        condition: string;
-      };
-    }
-
     // Add this interface near the other interfaces at the top of the file
     interface ContentProperty {
       id: string;
@@ -114,9 +118,10 @@
     // Dimensions
     export let width: string = "450px";
     export let height: string = "720px";
-    // Schemas
-    export let designSchema: any = null;
-    export let contentSchema: any | undefined = undefined;
+    // Schemas — typed against the package's canonical schema views
+    // (`$lib/schemaViews`), the same shapes the consumers normalize to.
+    export let designSchema: DesignSchemaView | null = null;
+    export let contentSchema: ContentSchemaView | undefined = undefined;
     export let itemTemplate: any = null; // Store template for new items
     // Tab titles
     export let designTabTitle: string = 'Design';
@@ -135,6 +140,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 +166,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
 
@@ -191,7 +216,7 @@
     const DRAG_SHIFT_X = 24; // shift mirror left so cursor is over drag handle
 
     // Helper function to get visible groups
-    function getVisibleGroups(components: Array<{ propertyGroups: PropertyGroup[] }>): PropertyGroup[] {
+    function getVisibleGroups(components: DesignSchemaComponentView[]): PropertyGroup[] {
       return components?.reduce((acc: PropertyGroup[], component) => {
         const visibleGroups = component.propertyGroups.filter((group: PropertyGroup) => 
           shouldShowPropertyGroup(group, component.propertyGroups[0].properties, 'design')
@@ -205,7 +230,7 @@
 
     // Update the function with proper type annotations
     function getAccordionItemPosition(
-      component: { propertyGroups: PropertyGroup[] }, 
+      component: DesignSchemaComponentView, 
       propertyGroup: PropertyGroup, 
       groupIndex: number
     ): 'first' | 'middle' | 'last' | 'only' {
@@ -928,8 +953,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) {
@@ -1331,7 +1359,44 @@
         return '';
     }
 
-    function renderInputController(schema: string, property: any, propertyIndex: number, isFirstGroup: boolean, contentItemId?: string) {
+    /**
+     * The bag `renderInputController()` builds for one controller instance.
+     * Declared keys are what PropsEditor itself always supplies; the index
+     * signature carries the schema-driven constraint keys (`min`, `max`,
+     * `options`, …) whose set depends on the property definition.
+     * `describeInputController` picks from this bag per controller kind, so
+     * anything a controller never reads never reaches it.
+     */
+    interface InputControllerProps {
+      id: string;
+      value: InputValue;
+      opacity?: number;
+      onChange: (value: InputValue) => void;
+      onOpacityChange: (opacity: number) => void;
+      portalTarget: string | HTMLElement;
+      header?: { label: string; helpText?: string };
+      config: InputControllerConfig;
+      controllerId: string;
+      openDropdowns: Writable<Set<string>>;
+      toggleDropdown: (id: string) => void;
+      onFocus: () => void;
+      [schemaKey: string]: any;
+    }
+
+    /**
+     * What `renderInputController()` hands the template.
+     * `component` is a 20-member union of controller component types — typing
+     * it as the union makes `<svelte:component this={...}>` collapse attribute
+     * checking to `never` (every prop errors); `any` restores the spread's
+     * intended looseness.
+     */
+    interface RenderedInputController {
+      component: any; // union of controller components — see comment above
+      props: InputControllerProps;
+      header: { label: string; helpText: string };
+    }
+
+    function renderInputController(schema: string, property: any, propertyIndex: number, isFirstGroup: boolean, contentItemId?: string): RenderedInputController {
         const basePropertyId = property.id || property.name;
         const propertyId = contentItemId ? `${contentItemId}__${basePropertyId}` : basePropertyId;
         const controllerId = `${schema}-${propertyId}`;
@@ -1342,7 +1407,7 @@
                 component: null,
                 props: { id: controllerId },
                 header: { label: basePropertyId, helpText: '' }
-            };
+            } as RenderedInputController;
         }
         const InputControllerComponent = getInputControllerComponent(inputController.type.toLowerCase());
 
@@ -1366,17 +1431,11 @@
 
         const { description, label, ...restInputController } = inputController;
 
-        // Only set shouldFocus on initial mount or explicit focus request
-        const shouldFocus = activeControllerId === controllerId;
-
         // Add special handling for position controller
         const additionalProps = inputController.type.toLowerCase() === 'position' 
             ? { onDragStateChange: (dragging: boolean) => isDragging = dragging } 
             : {};
 
-        // Add visibility dependency tracking
-        const hasVisibilityCondition = property.visibilityCondition !== undefined;
-        
         return {
             component: InputControllerComponent,
             props: {
@@ -1405,7 +1464,6 @@
                         openDropdowns.set(new Set([id]));
                     }
                 },
-                shouldFocus,
                 onFocus: () => {
                     const newControllerId = `${schema}-${propertyId}`;
                     if (schema === 'design' && lastFocusedDesignController !== newControllerId) {
@@ -1427,8 +1485,7 @@
                             groupName: schema
                         });
                     }
-                },
-                'data-visibility-dependent': hasVisibilityCondition
+                }
             },
             header: {
                 label: String(inputController.type || '').toLowerCase() === 'font'
@@ -1475,6 +1532,106 @@
       }
     }
     
+    /**
+     * Narrows the render bag down to exactly the props the chosen controller
+     * declares. Each pick literal is contextually typed against that
+     * controller's declared props interface, so passing a key the controller
+     * never reads — or forgetting a required one — is a compile error here
+     * instead of a silent no-op at runtime.
+     */
+    function describeInputController(component: ReturnType<typeof getInputControllerComponent> | null, props: InputControllerProps): ControllerDescriptor | null {
+      switch (component) {
+        case TextInputController: return { kind: 'textinput', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            config: props.config, type: props.type, placeholder: props.placeholder,
+            description: props.description, onFocus: props.onFocus } };
+        case TextAreaPreviewInputController: return { kind: 'textarea', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            config: props.config, description: props.description, portalTarget: props.portalTarget } };
+        case NumberInputController: return { kind: 'number', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, description: props.description, onFocus: props.onFocus } };
+        case SliderInputController: return { kind: 'slider', props: {
+            height: props.height, elementsGap: props.elementsGap, thumbSize: props.thumbSize,
+            sliderType: props.sliderType, barHeight: props.barHeight, label: props.label,
+            value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, min: props.min, max: props.max, step: props.step,
+            onFocus: props.onFocus, autofocus: props.autofocus } };
+        case SliderRangeInputController: return { kind: 'sliderrange', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, min: props.min, max: props.max, step: props.step,
+            onFocus: props.onFocus } };
+        case DropdownInputController: return { kind: 'dropdown', props: {
+            label: props.label, defaultSelectedLabel: props.defaultSelectedLabel, value: props.value,
+            onChange: props.onChange, config: props.config, options: props.options,
+            description: props.description, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            onFocus: props.onFocus } };
+        case DatePickerInputController: return { kind: 'datepicker', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            description: props.description, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            onFocus: props.onFocus } };
+        case DateFieldInputController: return { kind: 'datefield', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, onFocus: props.onFocus } };
+        case RangeCalendarInputController: return { kind: 'rangecalendar', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            helpText: props.helpText, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            onFocus: props.onFocus } };
+        case SwitchInputController: return { kind: 'switch', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            description: props.description, onFocus: props.onFocus } };
+        case ColorPickerInputController: return { kind: 'colorpicker', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            controllerId: props.controllerId, id: props.id, config: props.config,
+            helpText: props.helpText, saveRecentColors: props.saveRecentColors,
+            showOpacityControls: props.showOpacityControls, autofocus: props.autofocus,
+            portalTarget: props.portalTarget, pickerSize: props.pickerSize,
+            sliderWidth: props.sliderWidth, opacity: props.opacity, showRing: props.showRing,
+            onFocus: props.onFocus, onOpacityChange: props.onOpacityChange } };
+        case CheckboxInputController: return { kind: 'checkbox', props: {
+            value: props.value, onChange: props.onChange, config: props.config,
+            description: props.description, onFocus: props.onFocus, options: props.options } };
+        case RadioGroupInputController: return { kind: 'radiogroup', props: {
+            value: props.value, onChange: props.onChange, config: props.config,
+            description: props.description, onFocus: props.onFocus, options: props.options } };
+        case FontInputController: return { kind: 'font', props: {
+            label: props.label, style: props.style, value: props.value, onChange: props.onChange,
+            description: props.description, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            hideRecentFromList: props.hideRecentFromList, hideTrashIcon: props.hideTrashIcon } };
+        case PositionInputController: return { kind: 'position', props: {
+            value: props.value, onChange: props.onChange, onFocus: props.onFocus,
+            maskThumb: props.maskThumb, onDragStateChange: props.onDragStateChange } };
+        case BrowserInputController: return { kind: 'browser', props: {
+            header: props.header, label: props.label, value: props.value,
+            onChange: props.onChange, portalTarget: props.portalTarget, config: props.config } };
+        case FixedPositionInputController: return { kind: 'fixedposition', props: {
+            value: props.value, onChange: props.onChange, onFocus: props.onFocus, id: props.id } };
+        case VectorInputController: return { kind: 'vector', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            description: props.description, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            onFocus: props.onFocus, hideRecentFromList: props.hideRecentFromList,
+            hideTrashIcon: props.hideTrashIcon } };
+        case AngleInputController: return { kind: 'angle', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, onFocus: props.onFocus } };
+        case TimeInputController: return { kind: 'time', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            helpText: props.helpText, onFocus: props.onFocus } };
+        case RoundedCornersInputController: return { kind: 'roundedcorners', props: {
+            value: props.value, onChange: props.onChange, helpText: props.helpText,
+            onFocus: props.onFocus } };
+        case TagsInputController: return { kind: 'tags', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, onFocus: props.onFocus } };
+        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());
     
@@ -1581,37 +1738,16 @@
     }
     
     /**
-     * Interface definitions for content structure
+     * SCHEMA SHAPES — aliases of the package's canonical schema views
+     * (`$lib/schemaViews`, exported at the package root). PropsEditor used to
+     * declare stricter local duplicates, which made every array flowing from
+     * the open view props unassignable to them; the canonical names are the
+     * same types now, so the contract holds across the package boundary.
      */
-    interface Property {
-      id: string;
-      name?: string;
-      type: string;
-      defaultValue?: any;
-      value?: any;  // Add value property to interface
-      constraints?: Record<string, any>;
-      inputController: {
-        type: string;
-        description?: string;
-        helpText?: string;
-        config?: Record<string, any>;
-      };
-    }
-
-    interface ContentItem {
-      id: string;
-      properties: Array<Property>;
-      orderNumber?: number;
-      title?: string;
-    }
-
-    interface ContentSchema {
-      genericContent: {
-        title: string;
-        properties: Array<Property>;
-      };
-      contentItems: ContentItem[];
-    }
+    type Property = DesignSchemaPropertyView;
+    type PropertyGroup = DesignSchemaPropertyGroupView;
+    type ContentItem = ContentSchemaItemView;
+    type ContentSchema = ContentSchemaView;
     
     onMount(() => {
       const resizeObserver = new ResizeObserver(() => {
@@ -2034,7 +2170,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;
+            const liveOnItem =
+              key != null
+                ? // Items legitimately carry canonical per-key state alongside
+                  // `properties`; route through unknown to the index signature
+                  // honestly.
+                  (item as unknown as Record<string, unknown>)[key]
+                : undefined;
             props[key] = normalizeContentPropertyValue(
               pickLiveContentValue(
                 contentState[`${item.id}__${key}`],
@@ -2252,28 +2394,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 +2440,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 +2450,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 +2509,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 +2594,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 +2603,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 +2668,12 @@
                                       </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
+                                          })}
                                         />
                                       </div>
                                     </div>
@@ -2533,7 +2706,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 +2715,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 +2734,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 +2747,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 +2780,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 })}
                                           />
                                         </div>
                                       </div>
@@ -2650,8 +2820,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 +2844,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 +2878,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 })}
                                                   />
                                                 </div>
                                               </div>
@@ -2722,11 +2889,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 +2931,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 +2955,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 +2973,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 +3013,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;
       }