@widgetic/editor 4.1.0 → 4.1.3

package/README.md

@@ -1,5 +1,7 @@
 ### WIDGET PROPERTIES EDITOR
 
+> **Internal building block.** This package is part of Widgetic's own apps and is not a supported integration surface. Partners: use [`@widgetic/ui-sdk`](https://www.npmjs.com/package/@widgetic/ui-sdk) instead.
+
 
 A Svelte Component Module that will be loaded and used to edit the widget properties: design and content.
 

package/dist/components/PreviewChromeControls.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+	export let style = '';
+	/** Desktop is the unpressed state of the phone icon. */
+	export let mobile = false;
+	export let showDevices = true;
+	export let showDimensions = true;
+	export let widthValue = '';
+	export let heightValue = '';
+	export let minWidth = 120;
+	export let minHeight = 80;
+	export let onDevice: (mobile: boolean) => void = () => {};
+	export let onWidth: (value: string) => void = () => {};
+	export let onHeight: (value: string) => void = () => {};
+	export let desktopLabel = 'Desktop preview';
+	export let mobileLabel = 'Mobile preview';
+	export let widthLabel = 'W';
+	export let heightLabel = 'H';
+</script>
+
+<div class="preview-chrome-controls flex items-center gap-2 {className}" style={style}>
+	{#if showDevices}
+		<div class="preview-chrome-device-toggle flex shrink-0 items-center overflow-hidden rounded border border-gray-300">
+			<button
+				type="button"
+				class="preview-chrome-device-desktop flex h-6 w-6 items-center justify-center {!mobile ? 'bg-gray-100 text-gray-800' : 'bg-white text-gray-400'} hover:text-gray-800 focus:outline-none focus-visible:outline-none"
+				aria-label={desktopLabel}
+				aria-pressed={!mobile}
+				onclick={() => onDevice(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-s border-gray-300 {mobile ? 'bg-gray-100 text-gray-800' : 'bg-white text-gray-400'} hover:text-gray-800 focus:outline-none focus-visible:outline-none"
+				aria-label={mobileLabel}
+				aria-pressed={mobile}
+				onclick={() => onDevice(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 showDimensions}
+		<div class="preview-chrome-dimensions flex items-center gap-1.5">
+			<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
+				<span>{widthLabel}</span>
+				<input
+					type="number"
+					min={minWidth}
+					class="preview-dim-input w-14 h-6 rounded border border-gray-300 bg-white px-1 text-[11px] text-gray-800 focus:outline-none focus:border-blue-400 focus-visible:outline-none"
+					value={widthValue}
+					oninput={(event) => onWidth(event.currentTarget.value)}
+					onpointerdown={(event) => event.stopPropagation()}
+				/>
+			</label>
+			<span class="text-[10px] text-gray-400">×</span>
+			<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
+				<span>{heightLabel}</span>
+				<input
+					type="number"
+					min={minHeight}
+					class="preview-dim-input w-14 h-6 rounded border border-gray-300 bg-white px-1 text-[11px] text-gray-800 focus:outline-none focus:border-blue-400 focus-visible:outline-none"
+					value={heightValue}
+					oninput={(event) => onHeight(event.currentTarget.value)}
+					onpointerdown={(event) => event.stopPropagation()}
+				/>
+			</label>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.preview-chrome-controls button:focus,
+	.preview-chrome-controls button:focus-visible,
+	.preview-chrome-controls input:focus,
+	.preview-chrome-controls input:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+</style>

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

@@ -0,0 +1,35 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PreviewChromeControls: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    /** Desktop is the unpressed state of the phone icon. */ mobile?: boolean;
+    showDevices?: boolean;
+    showDimensions?: boolean;
+    widthValue?: string;
+    heightValue?: string;
+    minWidth?: number;
+    minHeight?: number;
+    onDevice?: (mobile: boolean) => void;
+    onWidth?: (value: string) => void;
+    onHeight?: (value: string) => void;
+    desktopLabel?: string;
+    mobileLabel?: string;
+    widthLabel?: string;
+    heightLabel?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PreviewChromeControls = InstanceType<typeof PreviewChromeControls>;
+export default PreviewChromeControls;

package/dist/components/WidgetPreview.svelte

@@ -3,6 +3,7 @@
 	import { GenerateLoader } from '@widgetic/design-system/components';
 	import { lockPointerStyle } from '../utils/shadowDom';
 	import { useEditorLanguage } from '../i18n/language';
+	import PreviewChromeControls from './PreviewChromeControls.svelte';
 
 	// The words of the editor in the language of the page: the editor above this one chose it (see `provideEditorLanguage`).
 	const { t } = useEditorLanguage();
@@ -121,10 +122,8 @@
 	const MIN_WIDTH = 120;
 	const MIN_HEIGHT = 80;
 	const HANDLE_MARGIN = 6;
-	/** Inset padding so resize handles stay inside bounds */
-	const RESIZE_PAD_X = 12;
-	const RESIZE_PAD_TOP = 12;
-	const RESIZE_PAD_BOTTOM = 12;
+	/** Inset so resize handles stay inside bounds. 0 sits the frame on the stage edge. */
+	export let edgeInset = 12;
 	const PREVIEW_CHROME_HEADER_H = 36;
 	const PREVIEW_STROKE = '#3b82f6';
 	const PREVIEW_STROKE_ALT = '#f97316';
@@ -159,8 +158,8 @@
 		}
 		if (hasFixedBounds && boundsWidth != null && boundsHeight != null) {
 			return {
-				maxWidth: Math.max(MIN_WIDTH, boundsWidth - RESIZE_PAD_X * 2),
-				maxHeight: Math.max(MIN_HEIGHT, boundsHeight - RESIZE_PAD_TOP - RESIZE_PAD_BOTTOM - chromeH),
+				maxWidth: Math.max(MIN_WIDTH, boundsWidth - edgeInset * 2),
+				maxHeight: Math.max(MIN_HEIGHT, boundsHeight - edgeInset - edgeInset - chromeH),
 			};
 		}
 		return { maxWidth: 720, maxHeight: 420 };
@@ -176,17 +175,17 @@
 		shellWidth: number,
 		shellHeight: number
 	): { left: number; top: number } {
-		const maxLeft = Math.max(RESIZE_PAD_X, stageWidth - shellWidth - RESIZE_PAD_X);
-		const maxTop = Math.max(RESIZE_PAD_TOP, stageHeight - shellHeight - RESIZE_PAD_BOTTOM);
+		const maxLeft = Math.max(edgeInset, stageWidth - shellWidth - edgeInset);
+		const maxTop = Math.max(edgeInset, stageHeight - shellHeight - edgeInset);
 		// rtl-ok: the half of the stage is named by its place on the screen, see the prop
 		if (defaultStageAlign === 'right-half') {
 			const rightHalfCenterX = stageWidth * 0.75;
-			const left = clampDimension(rightHalfCenterX - shellWidth / 2, RESIZE_PAD_X, maxLeft);
-			const top = clampDimension((stageHeight - shellHeight) / 2, RESIZE_PAD_TOP, maxTop);
+			const left = clampDimension(rightHalfCenterX - shellWidth / 2, edgeInset, maxLeft);
+			const top = clampDimension((stageHeight - shellHeight) / 2, edgeInset, maxTop);
 			return { left, top };
 		}
-		const left = clampDimension((stageWidth - shellWidth) / 2, RESIZE_PAD_X, maxLeft);
-		const top = clampDimension((stageHeight - shellHeight) / 2, RESIZE_PAD_TOP, maxTop);
+		const left = clampDimension((stageWidth - shellWidth) / 2, edgeInset, maxLeft);
+		const top = clampDimension((stageHeight - shellHeight) / 2, edgeInset, maxTop);
 		return { left, top };
 	}
 
@@ -271,10 +270,10 @@
 
 		function onPointerMove(e: PointerEvent) {
 			if (!stageEl) return;
-			const maxLeft = Math.max(RESIZE_PAD_X, stageEl.clientWidth - shellWidth - RESIZE_PAD_X);
-			const maxTop = Math.max(RESIZE_PAD_TOP, stageEl.clientHeight - shellHeight - RESIZE_PAD_BOTTOM);
-			previewShellLeft = clampDimension(startLeft + (e.clientX - startX), RESIZE_PAD_X, maxLeft);
-			previewShellTop = clampDimension(startTop + (e.clientY - startY), RESIZE_PAD_TOP, maxTop);
+			const maxLeft = Math.max(edgeInset, stageEl.clientWidth - shellWidth - edgeInset);
+			const maxTop = Math.max(edgeInset, stageEl.clientHeight - shellHeight - edgeInset);
+			previewShellLeft = clampDimension(startLeft + (e.clientX - startX), edgeInset, maxLeft);
+			previewShellTop = clampDimension(startTop + (e.clientY - startY), edgeInset, maxTop);
 		}
 
 		function endDrag() {
@@ -365,7 +364,7 @@
 	$: showResizeHandles = enableResize && (mode === 'controlled' ? isContentReady : iframeLoaded);
 	$: hasFixedBounds = boundsWidth != null && boundsHeight != null;
 	$: containerPaddingStyle = enableResize
-		? `padding: ${RESIZE_PAD_TOP}px ${RESIZE_PAD_X}px ${RESIZE_PAD_BOTTOM}px ${RESIZE_PAD_X}px;`
+		? `padding: ${edgeInset}px ${edgeInset}px ${edgeInset}px ${edgeInset}px;`
 		: !hasFixedBounds && !compactChrome && (showUrlBar || mode === 'controlled')
 			? `padding: ${HANDLE_MARGIN}px;`
 			: '';
@@ -926,66 +925,29 @@
 							<span class="preview-chrome-drag-grip shrink-0 text-gray-400 text-xs leading-none" title={$t('editor.preview.dragHandle')} aria-hidden="true">⠿</span>
 						{/if}
 						<span class="preview-chrome-title text-[11px] font-semibold uppercase tracking-wide text-gray-500 shrink-0">{$t('editor.preview.title')}</span>
-						{#if showChromeDeviceToggle}
-							<div
-								class="preview-chrome-device-toggle ms-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={$t('editor.preview.desktop')}
-									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-s 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={$t('editor.preview.mobile')}
-									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 flex items-center gap-1.5 {showChromeDeviceToggle ? '' : 'ms-auto'}">
-								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
-									<span>{$t('editor.preview.widthShort')}</span>
-									<input
-										type="number"
-										min={MIN_WIDTH}
-										class="preview-dim-input w-14 h-6 rounded border border-gray-300 bg-white px-1 text-[11px] text-gray-800 focus:outline-none focus:border-blue-400 focus-visible:outline-none"
-										value={widthInputValue}
-										oninput={(e) => {
-											widthInputValue = e.currentTarget.value;
-											applyDimensionFromInput('width', e.currentTarget.value);
-										}}
-										onpointerdown={(e) => e.stopPropagation()}
-									/>
-								</label>
-								<span class="text-[10px] text-gray-400">×</span>
-								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
-									<span>{$t('editor.preview.heightShort')}</span>
-									<input
-										type="number"
-										min={MIN_HEIGHT}
-										class="preview-dim-input w-14 h-6 rounded border border-gray-300 bg-white px-1 text-[11px] text-gray-800 focus:outline-none focus:border-blue-400 focus-visible:outline-none"
-										value={heightInputValue}
-										oninput={(e) => {
-											heightInputValue = e.currentTarget.value;
-											applyDimensionFromInput('height', e.currentTarget.value);
-										}}
-										onpointerdown={(e) => e.stopPropagation()}
-									/>
-								</label>
-							</div>
-						{/if}
+						<PreviewChromeControls
+							class="{showChromeDeviceToggle || showDimensionInputs ? 'ms-auto' : ''}"
+							mobile={deviceMobile}
+							showDevices={showChromeDeviceToggle}
+							showDimensions={showDimensionInputs}
+							widthValue={widthInputValue}
+							heightValue={heightInputValue}
+							minWidth={MIN_WIDTH}
+							minHeight={MIN_HEIGHT}
+							desktopLabel={$t('editor.preview.desktop')}
+							mobileLabel={$t('editor.preview.mobile')}
+							widthLabel={$t('editor.preview.widthShort')}
+							heightLabel={$t('editor.preview.heightShort')}
+							onDevice={(nextMobile) => dispatch('deviceView', { mobile: nextMobile })}
+							onWidth={(value) => {
+								widthInputValue = value;
+								applyDimensionFromInput('width', value);
+							}}
+							onHeight={(value) => {
+								heightInputValue = value;
+								applyDimensionFromInput('height', value);
+							}}
+						/>
 					</div>
 				{/if}
 

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

@@ -66,6 +66,7 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
     resizeWidth?: number | null;
     resizeHeight?: number | null;
     iframeEl?: HTMLIFrameElement | null;
+    /** Inset so resize handles stay inside bounds. 0 sits the frame on the stage edge. */ edgeInset?: number;
     getResizeLimits?: () => {
         maxWidth: number;
         maxHeight: number;

package/dist/components/editors/CompositionEditorApp.svelte

@@ -30,6 +30,8 @@
 	import { shareTextDirection, type TextDirection } from '@widgetic/design-system/components/textDirection';
 	import { leftOnThisScreen } from '../../utils/dockPlacement';
 	import { provideEditorLanguage } from '../../i18n/language.js';
+	import type { PartnerPickFileFn } from '../../pickFileContext.js';
+	import type { StoreFileUrlFn } from '../../fileStorageUrlContext.js';
 	import PropsEditor from './PropsEditor.svelte';
 	import WidgetPreview from '../WidgetPreview.svelte';
 	import { setGoogleFontsApiKey } from '../../config';
@@ -74,6 +76,15 @@
 	 * library. Without it the files are the ones of the Widgetic library the token can see.
 	 */
 	export let mediaLibrary: MediaLibraryProvider | undefined = undefined;
+	/** When given, file fields call this instead of opening the built-in File Browser. */
+	export let pickFile: PartnerPickFileFn | undefined = undefined;
+	/** When given, resolves the url stored with a picked file (partner `mediaLibrary.urlResolver`). */
+	export let storeFileUrl: StoreFileUrlFn | undefined = undefined;
+	/**
+	 * When true, dragging or typing a preview size changes the preview on screen but does not change the embed width and
+	 * height saved with the composition.
+	 */
+	export let lockPreviewSize = false;
 	/** The key the font pickers list Google Fonts with. Without one only the fonts that need no key are listed. */
 	export let googleFontsApiKey = '';
 	/** Wait this long after the last change before saving by itself; `0` turns saving by itself off. Read once, when the editor starts. */
@@ -130,6 +141,7 @@
 		compositionId,
 		api,
 		autosaveDelayMs,
+		lockPreviewSize,
 		// The sentences the controller makes (why there is no preview) are made in the language of the moment.
 		translate: (key, values) => get(language.t)(key, values),
 		// The preview page hears about every change as it happens (and everything, once its page has loaded).
@@ -508,6 +520,8 @@
 			initialDesignValues={state.designValues}
 			initialContentValues={propsEditorContentValues}
 			mediaLibrary={mediaLibrary ?? defaultMediaLibrary}
+			{pickFile}
+			{storeFileUrl}
 			width="{EDITOR_WIDTH_PX}px"
 			height="{floatingEditorHeight}px"
 			showDragHandle={true}

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

@@ -1,6 +1,8 @@
 import { type MediaLibraryProvider } from '@widgetic/file-browser';
 import type { MessageOverrides } from '@widgetic/design-system/i18n';
 import { type TextDirection } from '@widgetic/design-system/components/textDirection';
+import type { PartnerPickFileFn } from '../../pickFileContext.js';
+import type { StoreFileUrlFn } from '../../fileStorageUrlContext.js';
 import { type TokenReason } from '../../composition/compositionApi.js';
 import { type CompositionEditorState, type EditorFailure } from '../../composition/compositionEditorController.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -32,6 +34,12 @@ declare const CompositionEditorApp: $$__sveltets_2_IsomorphicComponent<{
          * Where the file picker gets its files, when they are not the Widgetic library: the partner's own media
          * library. Without it the files are the ones of the Widgetic library the token can see.
          */ mediaLibrary?: MediaLibraryProvider | undefined;
+    /** When given, file fields call this instead of opening the built-in File Browser. */ pickFile?: PartnerPickFileFn | undefined;
+    /** When given, resolves the url stored with a picked file (partner `mediaLibrary.urlResolver`). */ storeFileUrl?: StoreFileUrlFn | undefined;
+    /**
+         * When true, dragging or typing a preview size changes the preview on screen but does not change the embed width and
+         * height saved with the composition.
+         */ lockPreviewSize?: boolean;
     /** The key the font pickers list Google Fonts with. Without one only the fonts that need no key are listed. */ googleFontsApiKey?: string;
     /** Wait this long after the last change before saving by itself; `0` turns saving by itself off. Read once, when the editor starts. */ autosaveDelayMs?: number | undefined;
     /** Writes what the layout does to the console. */ debug?: boolean;

package/dist/components/editors/PropsEditor.svelte

@@ -90,6 +90,8 @@
     } from '../../utils/shadowDom';
     import { config as appConfig } from '../../config';
     import { provideEditorMediaLibrary } from '../../mediaLibraryContext';
+    import { provideEditorPickFile, type PartnerPickFileFn } from '../../pickFileContext';
+    import { provideEditorStoreFileUrl, type StoreFileUrlFn } from '../../fileStorageUrlContext';
     import { useEditorLanguage } from '../../i18n/language';
     import type { MediaLibraryProvider } from '@widgetic/file-browser';
 
@@ -181,8 +183,14 @@
      * storage (a CMS, an S3 bucket, a DAM) can be used with no Widgetic storage at all.
      */
     export let mediaLibrary: MediaLibraryProvider | undefined = undefined;
+    /** When given, file fields call this instead of opening the built-in File Browser. */
+    export let pickFile: PartnerPickFileFn | undefined = undefined;
+    /** When given, resolves the url stored with a picked file (partner `mediaLibrary.urlResolver`). */
+    export let storeFileUrl: StoreFileUrlFn | undefined = undefined;
     // The file controls are created from the schema several components down: give them the library through context.
     provideEditorMediaLibrary(() => mediaLibrary);
+    provideEditorPickFile(() => pickFile);
+    provideEditorStoreFileUrl(() => storeFileUrl);
 
     // The words of the editor in the language of the page: the editor above this one chose it (see `provideEditorLanguage`).
     const { t } = useEditorLanguage();

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

@@ -1,4 +1,6 @@
 import type { ContentSchemaView, DesignSchemaView } from '../../schemaViews.js';
+import { type PartnerPickFileFn } from '../../pickFileContext';
+import { type StoreFileUrlFn } from '../../fileStorageUrlContext';
 import type { MediaLibraryProvider } from '@widgetic/file-browser';
 /**
      * STYLES from Widgetic Design System
@@ -52,6 +54,8 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
          * `MediaLibraryProvider` they list, upload, rename and delete through its functions instead, so a partner's own
          * storage (a CMS, an S3 bucket, a DAM) can be used with no Widgetic storage at all.
          */ mediaLibrary?: MediaLibraryProvider | undefined;
+    /** When given, file fields call this instead of opening the built-in File Browser. */ pickFile?: PartnerPickFileFn | undefined;
+    /** When given, resolves the url stored with a picked file (partner `mediaLibrary.urlResolver`). */ storeFileUrl?: StoreFileUrlFn | undefined;
     updateDesignValue?: (propertyId: string, value: any) => void;
     setPosition?: (left: number, top: number) => void;
     getPosition?: () => {

package/dist/components/ic/BrowserInputController.svelte

@@ -32,10 +32,12 @@
   import { onDestroy, tick } from 'svelte';
 
   // Shadcn UI Components
-  import { Portal, Tooltip } from '@widgetic/design-system/components';
+  import { Portal, Tooltip, showToast } from '@widgetic/design-system/components';
   import { ThumbHashImage } from "@widgetic/design-system/components";
   import { FileBrowser, setFileBrowserUploadConfig, persistentSelectStore } from '@widgetic/file-browser';
   import { useEditorMediaLibrary } from '../../mediaLibraryContext';
+  import { useEditorPickFile, type PartnerPickFile } from '../../pickFileContext';
+  import { useEditorStoreFileUrl } from '../../fileStorageUrlContext';
   import { useEditorLanguage } from '../../i18n/language';
   import type { EditorMessageKey } from '../../i18n/messages';
   import type { Translate } from '@widgetic/design-system/i18n';
@@ -74,6 +76,9 @@
   // The media library the editor above was given (a partner's own storage, for instance), read through a getter
   // because it reaches this component through context.
   const getEditorMediaLibrary = useEditorMediaLibrary();
+  const getEditorPickFile = useEditorPickFile();
+  const getEditorStoreFileUrl = useEditorStoreFileUrl();
+  let pickAbortController: AbortController | null = null;
 
   // The words of the editor in the language of the page, and the share of them that belongs to the File Browser inside it.
   const { t, fileBrowser: fileBrowserLanguage } = useEditorLanguage();
@@ -218,7 +223,56 @@
     }
   }
 
+  function acceptPatternsForField(): string[] {
+    if (!fileTypes?.length || fileTypes.includes('*')) return ['*/*'];
+    return fileTypes;
+  }
+
+  async function storedUrlFor(file: PartnerPickFile): Promise<string> {
+    const storeFileUrl = getEditorStoreFileUrl();
+    if (!storeFileUrl) return file.url;
+    try {
+      return await storeFileUrl(file);
+    } catch (error) {
+      console.warn('[editor] storeFileUrl failed; using the file url.', error);
+      return file.url;
+    }
+  }
+
+  async function applyPickedFile(selectedFile: PartnerPickFile) {
+    const url = await storedUrlFor(selectedFile);
+    const nextValue: FileValue = {
+      id: selectedFile.id,
+      file: selectedFile.name || '',
+      url,
+      hash: selectedFile.hash
+    };
+    value = nextValue;
+    onChange(nextValue);
+  }
+
   async function openFileBrowser() {
+    const pickFile = getEditorPickFile();
+    if (pickFile) {
+      pickAbortController?.abort();
+      pickAbortController = new AbortController();
+      const signal = pickAbortController.signal;
+      try {
+        const picked = await pickFile({ accept: acceptPatternsForField(), multiple: false, signal });
+        if (signal.aborted) return;
+        const selectedFile = picked?.[0];
+        if (!selectedFile) return;
+        await applyPickedFile(selectedFile);
+      } catch (error) {
+        if (signal.aborted) return;
+        const name = error instanceof Error ? error.name : '';
+        if (name === 'AbortError') return;
+        console.error('[editor] pickFile failed:', error);
+        showToast('error', $t('editor.file.pickFailed'));
+      }
+      return;
+    }
+
     try {
       syncFileBrowserUploadConfigIfEmbedded();
       // console.log('BrowserInputController: opening file browser', {
@@ -240,7 +294,7 @@
     setPortalHostInteractive(false);
   }
 
-  function handleFileBrowserSelect(event: CustomEvent<{ files?: Array<FileValue & { name?: string; thumbnail?: string }> }>) {
+  async function handleFileBrowserSelect(event: CustomEvent<{ files?: Array<FileValue & { name?: string; thumbnail?: string }> }>) {
     try {
       const selectedFile = event.detail?.files?.[0];
       if (!selectedFile) {
@@ -248,21 +302,12 @@
         return;
       }
 
-      const nextValue: FileValue = {
+      await applyPickedFile({
         id: selectedFile.id,
-        file: selectedFile.file || selectedFile.name || '',
+        name: selectedFile.name || selectedFile.file || '',
         url: selectedFile.url,
         hash: selectedFile.hash
-      };
-
-      // console.log('BrowserInputController: selected file', {
-        // id: nextValue.id,
-        // file: nextValue.file,
-        // url: nextValue.url
-      // });
-
-      value = nextValue;
-      onChange(nextValue);
+      });
       closeFileBrowser();
     } catch (error) {
       console.error('BrowserInputController: failed to select file', error);
@@ -292,6 +337,8 @@
   }
 
   onDestroy(() => {
+    pickAbortController?.abort();
+    pickAbortController = null;
     clearTimeout(showHelpTimeout);
     setPortalHostInteractive(false);
     if (audioElement) {

package/dist/composition/compositionEditorController.d.ts

@@ -148,6 +148,11 @@ export interface CompositionEditorOptions {
      * Default: English.
      */
     translate?: Translate<EditorMessageKey>;
+    /**
+     * When true, resizing the preview changes how it is drawn but never updates the embed width and height that are saved
+     * with the composition (the partner owns embed size elsewhere).
+     */
+    lockPreviewSize?: boolean;
 }
 /** What went wrong, from whatever was thrown. */
 export declare function describeFailure(error: unknown): EditorFailure;

package/dist/composition/compositionEditorController.js

@@ -515,6 +515,14 @@ export class CompositionEditorController {
         // (The preview reports the size it was just given, too: that is not a new size.)
         if (previewWidth === this.state.previewWidth && previewHeight === this.state.previewHeight)
             return;
+        if (this.options.lockPreviewSize === true) {
+            this.patch({
+                previewWidth,
+                previewHeight,
+                deviceView: 'desktop'
+            });
+            return;
+        }
         const embedChanged = previewWidth !== this.state.embedWidth || previewHeight !== this.state.embedHeight;
         this.patch({
             previewWidth,

package/dist/fileStorageUrlContext.d.ts

@@ -0,0 +1,6 @@
+import type { PartnerPickFile } from './pickFileContext';
+/** Resolves the address stored with a composition for a picked file (partner `mediaLibrary.urlResolver`). */
+export type StoreFileUrlFn = (file: PartnerPickFile) => Promise<string>;
+export type StoreFileUrlGetter = () => StoreFileUrlFn | undefined;
+export declare function provideEditorStoreFileUrl(getStoreFileUrl: StoreFileUrlGetter): void;
+export declare function useEditorStoreFileUrl(): StoreFileUrlGetter;

package/dist/fileStorageUrlContext.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+const STORE_FILE_URL_CONTEXT_KEY = Symbol.for('widgetic.editor.storeFileUrl');
+export function provideEditorStoreFileUrl(getStoreFileUrl) {
+    setContext(STORE_FILE_URL_CONTEXT_KEY, getStoreFileUrl);
+}
+export function useEditorStoreFileUrl() {
+    try {
+        return getContext(STORE_FILE_URL_CONTEXT_KEY) ?? (() => undefined);
+    }
+    catch {
+        return () => undefined;
+    }
+}

package/dist/i18n/language.d.ts

@@ -145,6 +145,7 @@ export declare const EDITOR_CATALOGS: {
         readonly 'editor.file.notFound': "File not found";
         readonly 'editor.file.emptyFolder': "Empty folder";
         readonly 'editor.file.clear': "Clear file";
+        readonly 'editor.file.pickFailed': "Could not choose a file. Try again.";
         readonly 'editor.file.dialogTitle': "Select file";
         readonly 'editor.file.closeDialog': "Close file browser";
         readonly 'editor.color.noRecent': "No recent colors";

package/dist/i18n/messages.d.ts

@@ -164,6 +164,7 @@ export declare const EDITOR_MESSAGES: {
     readonly 'editor.file.notFound': "File not found";
     readonly 'editor.file.emptyFolder': "Empty folder";
     readonly 'editor.file.clear': "Clear file";
+    readonly 'editor.file.pickFailed': "Could not choose a file. Try again.";
     readonly 'editor.file.dialogTitle': "Select file";
     readonly 'editor.file.closeDialog': "Close file browser";
     readonly 'editor.color.noRecent': "No recent colors";

package/dist/i18n/messages.js

@@ -173,6 +173,7 @@ export const EDITOR_MESSAGES = {
     'editor.file.notFound': 'File not found',
     'editor.file.emptyFolder': 'Empty folder',
     'editor.file.clear': 'Clear file',
+    'editor.file.pickFailed': 'Could not choose a file. Try again.',
     'editor.file.dialogTitle': 'Select file',
     'editor.file.closeDialog': 'Close file browser',
     // ===== Colours =====

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export type { ContentSchemaItemView, ContentSchemaPropertyView, ContentSchemaVie
 export { default as PropsEditor } from './components/editors/PropsEditor.svelte';
 export { default as FontInputController } from './components/ic/FontInputController.svelte';
 export { default as WidgetPreview } from './components/WidgetPreview.svelte';
+export { default as PreviewChromeControls } from './components/PreviewChromeControls.svelte';
 export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
 export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';
 export { default as EmbedEditor } from './components/editors/EmbedEditor.svelte';

package/dist/index.js

@@ -4,6 +4,7 @@
 export { default as PropsEditor } from './components/editors/PropsEditor.svelte';
 export { default as FontInputController } from './components/ic/FontInputController.svelte';
 export { default as WidgetPreview } from './components/WidgetPreview.svelte';
+export { default as PreviewChromeControls } from './components/PreviewChromeControls.svelte';
 export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
 export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';
 // Embed Editor

package/dist/pickFileContext.d.ts

@@ -0,0 +1,19 @@
+/** One file the partner's picker returns (same shape as the media library's `MediaLibraryFile`). */
+export interface PartnerPickFile {
+    id: string;
+    name: string;
+    url: string;
+    mimeType?: string;
+    size?: number;
+    thumbnail?: string;
+    hash?: string;
+}
+export interface PartnerPickFileRequest {
+    accept: string[];
+    multiple: boolean;
+    signal: AbortSignal;
+}
+export type PartnerPickFileFn = (request: PartnerPickFileRequest) => Promise<PartnerPickFile[]>;
+export type PickFileGetter = () => PartnerPickFileFn | undefined;
+export declare function provideEditorPickFile(getPickFile: PickFileGetter): void;
+export declare function useEditorPickFile(): PickFileGetter;

package/dist/pickFileContext.js

@@ -0,0 +1,19 @@
+/**
+ * Hands the partner's `pickFile` hook from the editor down to file field controls.
+ *
+ * Same pattern as {@link mediaLibraryContext}: `PropsEditor` receives `pickFile`, and the file controls read it through
+ * context instead of threading a prop through the controller renderer.
+ */
+import { getContext, setContext } from 'svelte';
+const PICK_FILE_CONTEXT_KEY = Symbol.for('widgetic.editor.pickFile');
+export function provideEditorPickFile(getPickFile) {
+    setContext(PICK_FILE_CONTEXT_KEY, getPickFile);
+}
+export function useEditorPickFile() {
+    try {
+        return getContext(PICK_FILE_CONTEXT_KEY) ?? (() => undefined);
+    }
+    catch {
+        return () => undefined;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.1.0",
+	"version": "4.1.3",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",