@widgetic/editor 4.0.6 → 4.0.8

package/README.md

@@ -9,7 +9,7 @@ Based on the Widget's design schema and content schema it generates 2 panels of
 
 1. add the component as a dependency in the npm package of the project
 2. import the component in the project: 
-`import PropsEditor from '@widgetic/props-editor';`
+`import PropsEditor from '@widgetic/editor';`
 3. load the design and content schemas and pass them as props to the component:
 ```js
 let designSchemaUrl = '/design-debug-schema.json';
@@ -71,6 +71,17 @@ npm i --legacy-peer-deps
 Note: use --legacy-peer-deps if you get peer dependency errors
 as our project uses svelte 5 and some of the dependencies are still using svelte 4.
 
+### Sibling packages
+
+This app compiles sibling `@widgetic/*` source in dev through the dev-alias
+setup `@widgetic/dev-tools` owns. The alias tables, the `$lib` remap, and
+everything else the mapping needs come from the installed
+`@widgetic/dev-tools` dependency. An ordinary `npm install` is the whole
+setup — there is no linking step.
+
+The why and the silent-degrade failure mode live in
+[the dev-tools README](../dev-tools/README.md).
+
 ## Start the development server
 
 ```bash

package/dist/components/WidgetPreview.svelte

@@ -10,6 +10,8 @@
 		resize: { width: number; height: number };
 		mobileViewport: { width: number; height: number };
 		desktopViewport: void;
+		deviceView: { mobile: boolean };
+		fitToArea: void;
 		iframeLoad: Event;
 		iframeError: Event;
 		retry: void;
@@ -63,6 +65,9 @@
 	export let enableDrag: boolean = false;
 	/** W×H number inputs in the chrome header, live-synced with resize. */
 	export let showDimensionInputs: boolean = false;
+	/** Desktop / mobile pair in the chrome header, before the dimension inputs. */
+	export let showChromeDeviceToggle: boolean = false;
+	export let deviceMobile: boolean = false;
 	/**
 	 * concentric — always resize from center (widget-creator / Canvas).
 	 * corner — opposite corner fixed; hold Alt for concentric (composition page).
@@ -192,6 +197,14 @@
 		});
 	}
 
+	/** Place the preview shell at an explicit stage coordinate (composition pair layout). */
+	export function setShellPosition(left: number, top: number): void {
+		previewShellLeft = left;
+		previewShellTop = top;
+		previewPositionReady = true;
+		console.log('[WidgetPreview] Set shell position', { left, top });
+	}
+
 	function ensurePreviewPosition(): void {
 		if (previewPositionReady) return;
 		resetPreviewPosition();
@@ -604,6 +617,7 @@
 
 	function handleFitToAreaClick() {
 		fitToContainer();
+		if (debugMode) console.debug('[WidgetPreview] Fit to area:', { width: resizeWidth, height: resizeHeight });
 		dispatch('fitToArea');
 	}
 
@@ -876,8 +890,35 @@
 							<span class="preview-chrome-drag-grip shrink-0 text-gray-400 text-xs leading-none" title="Drag preview" aria-hidden="true">⠿</span>
 						{/if}
 						<span class="preview-chrome-title text-[11px] font-semibold uppercase tracking-wide text-gray-500 shrink-0">Preview</span>
+						{#if showChromeDeviceToggle}
+							<div
+								class="preview-chrome-device-toggle ml-auto flex shrink-0 items-center overflow-hidden rounded border border-gray-300"
+								onpointerdown={(event) => event.stopPropagation()}
+							>
+								<button
+									type="button"
+									class="preview-chrome-device-desktop flex h-6 w-6 items-center justify-center {!deviceMobile ? 'bg-gray-100 text-gray-800' : 'bg-white text-gray-400'} hover:text-gray-800 focus:outline-none focus-visible:outline-none"
+									aria-label="Desktop preview"
+									aria-pressed={!deviceMobile}
+									onclick={() => dispatch('deviceView', { mobile: false })}
+									onpointerdown={(event) => event.stopPropagation()}
+								>
+									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+								</button>
+								<button
+									type="button"
+									class="preview-chrome-device-mobile flex h-6 w-6 items-center justify-center border-l border-gray-300 {deviceMobile ? 'bg-gray-100 text-gray-800' : 'bg-white text-gray-400'} hover:text-gray-800 focus:outline-none focus-visible:outline-none"
+									aria-label="Mobile preview"
+									aria-pressed={deviceMobile}
+									onclick={() => dispatch('deviceView', { mobile: true })}
+									onpointerdown={(event) => event.stopPropagation()}
+								>
+									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+								</button>
+							</div>
+						{/if}
 						{#if showDimensionInputs}
-							<div class="preview-chrome-dimensions ml-auto flex items-center gap-1.5">
+							<div class="preview-chrome-dimensions flex items-center gap-1.5 {showChromeDeviceToggle ? '' : 'ml-auto'}">
 								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
 									<span>W</span>
 									<input

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

@@ -45,6 +45,8 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
     enableResize?: boolean;
     /** Drag only via the preview chrome header (keeps iframe interactive). */ enableDrag?: boolean;
     /** W×H number inputs in the chrome header, live-synced with resize. */ showDimensionInputs?: boolean;
+    /** Desktop / mobile pair in the chrome header, before the dimension inputs. */ showChromeDeviceToggle?: boolean;
+    deviceMobile?: boolean;
     /**
          * concentric — always resize from center (widget-creator / Canvas).
          * corner — opposite corner fixed; hold Alt for concentric (composition page).
@@ -62,6 +64,7 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
         maxHeight: number;
     };
     resetPreviewPosition?: () => void;
+    setShellPosition?: (left: number, top: number) => void;
     nudgeIframePaint?: () => void;
     fitToContainer?: () => void;
     sendMessageToPreview?: (message: Record<string, unknown>) => void;
@@ -85,6 +88,10 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
         height: number;
     }>;
     desktopViewport: CustomEvent<void>;
+    deviceView: CustomEvent<{
+        mobile: boolean;
+    }>;
+    fitToArea: CustomEvent<void>;
     iframeLoad: CustomEvent<Event>;
     iframeError: CustomEvent<Event>;
     retry: CustomEvent<void>;
@@ -99,6 +106,7 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
         maxHeight: number;
     };
     resetPreviewPosition: () => void;
+    setShellPosition: (left: number, top: number) => void;
     nudgeIframePaint: () => void;
     fitToContainer: () => void;
     sendMessageToPreview: (message: Record<string, unknown>) => void;