@widgetic/editor 4.0.10 → 4.1.0

package/dist/components/editors/CompositionEditorApp.svelte

@@ -0,0 +1,562 @@
+<script lang="ts">
+	/**
+	 * The composition editor: the settings of one Widgetic composition, beside a live preview of its widget.
+	 *
+	 * It loads the composition, the address of its widget's preview and both schemas through the Widgetic API
+	 * with the token `getAccessToken` gives (an editor session token is enough: that is what a partner's page
+	 * has for its managed users), draws the settings editor and the preview, and saves what is changed: by itself
+	 * a moment after the last change, and when "Save" is pressed.
+	 *
+	 * The page that holds it hears about it through events:
+	 *   ready  { name, widgetId }     the editor is on the screen
+	 *   dirty  { dirty }              there is, or is no longer, work that is not saved
+	 *   saved  { composition, savedAt }
+	 *   error  { during, failure, fatal }   during is 'load', 'schemas' or 'save'
+	 *   deviceView { deviceView }     the preview is looked at as 'desktop' or 'mobile' now (a button of the
+	 *                                 preview, a size the user gave it, or `setDeviceView`)
+	 *
+	 * A page with controls of its own for what the editor shows can use `setDeviceView` (the same toggle as the
+	 * preview's buttons) and, when it saved the composition's embed settings itself, `adoptEmbedSettings`.
+	 *
+	 * Closing it: `await flush()` first, then remove the component. Removing it cancels whatever is on its way,
+	 * and edits that were not saved are lost.
+	 *
+	 * The component is made for ONE composition: to edit another one, make another component.
+	 */
+	import { createEventDispatcher, onDestroy, onMount, tick } from 'svelte';
+	import { get, writable } from 'svelte/store';
+	import { createWidgeticMediaLibrary, type MediaLibraryProvider } from '@widgetic/file-browser';
+	import type { MessageOverrides } from '@widgetic/design-system/i18n';
+	import { shareTextDirection, type TextDirection } from '@widgetic/design-system/components/textDirection';
+	import { leftOnThisScreen } from '../../utils/dockPlacement';
+	import { provideEditorLanguage } from '../../i18n/language.js';
+	import PropsEditor from './PropsEditor.svelte';
+	import WidgetPreview from '../WidgetPreview.svelte';
+	import { setGoogleFontsApiKey } from '../../config';
+	import FontManager from '../../utils/FontManager';
+	import { createCompositionApi, type TokenReason } from '../../composition/compositionApi.js';
+	import {
+		CompositionEditorController,
+		failureMessage,
+		type CompositionEditorEvent,
+		type CompositionEditorState,
+		type EditorFailure,
+		type PreviewMessage,
+		type PropertyChange
+	} from '../../composition/compositionEditorController.js';
+
+	const dispatch = createEventDispatcher<{
+		ready: { name: string; widgetId: string };
+		dirty: { dirty: boolean };
+		saved: { composition: Record<string, unknown>; savedAt: number };
+		error: { during: 'load' | 'schemas' | 'save'; failure: EditorFailure; fatal: boolean };
+		deviceView: { deviceView: 'desktop' | 'mobile' };
+	}>();
+
+	let className = '';
+	export { className as class };
+	export let style = '';
+
+	/** The composition to edit. */
+	export let compositionId: string;
+	/** The Widgetic API's address, with its version: `https://api.widgetic.com/v1`. */
+	export let apiBasePath: string;
+	/**
+	 * Gives the token to call the API with. Asked before every request, so a host that keeps its token fresh is
+	 * always used up to date; asked again with `'expired'` when the API refuses a token, after which the request
+	 * is sent once more if the token that comes back is a different one. That second call also gets the token that
+	 * was refused (`refusedToken`), so a page can tell the refusal of its current token from the late refusal of
+	 * one it has already replaced, when several requests are refused together.
+	 */
+	export let getAccessToken: (reason: TokenReason, refusedToken?: string) => Promise<string> | string;
+	/**
+	 * 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.
+	 */
+	export let mediaLibrary: MediaLibraryProvider | undefined = undefined;
+	/** 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. */
+	export let autosaveDelayMs: number | undefined = undefined;
+	/** Writes what the layout does to the console. */
+	export let debug = false;
+	/**
+	 * The language of the editor: a BCP 47 tag ("de", "pt-BR") that sets how plurals, numbers and dates are written.
+	 * Without it, English. The words themselves come from `messages`.
+	 */
+	export let locale: string | null | undefined = undefined;
+	/**
+	 * The words of the editor in the language of the page: any of the keys of `EDITOR_MESSAGES` (and of the File
+	 * Browser's and the rich text editor's catalogs, which are inside the editor). One flat object; a key left out keeps
+	 * its English text. See `checkEditorMessages` to test it.
+	 */
+	export let messages: MessageOverrides | null | undefined = undefined;
+	/**
+	 * Which way the editor is read: "ltr" or "rtl". The page that puts it on screen sets `dir` on an element around it and the
+	 * browser turns the layout around; this prop says the same to the parts that wrap a library which writes a `dir` of its own
+	 * (the menus, the scroll areas, the File Browser and the rich text editor inside it), and to the code that places the settings
+	 * editor and the preview: with "rtl" the settings editor is on the right of the middle and the preview on its left.
+	 * It is NOT worked out from `locale`: an editor on a page that is laid out left to right can speak Arabic and still be left
+	 * to right. Left out, the editor is read the way the screen around it is, and left to right when nothing around it says.
+	 * Can change while the editor is open.
+	 */
+	export let dir: TextDirection | undefined = undefined;
+
+	// --- the direction ----------------------------------------------------------------------------------
+
+	// Every part below reads the direction from Svelte's context (the File Browser and the rich text editor too), and follows
+	// when the page changes `dir`. `textDirection` is the answer, for the editor's own decisions.
+	const givenDirection = writable<TextDirection | undefined>(dir);
+	const textDirection = shareTextDirection(givenDirection);
+	$: givenDirection.set(dir);
+
+	// --- the language -----------------------------------------------------------------------------------
+
+	// Every part of the editor reads its words from here (and the File Browser and the rich text editor inside it from
+	// what this hands them). Setting `locale` or `messages` again changes what is on the screen.
+	const language = provideEditorLanguage({ locale, messages });
+	const { t } = language;
+	$: language.update({ locale, messages });
+
+	// --- the controller -------------------------------------------------------------------------------
+
+	// A wrong address or token function throws here, when the editor is made: it is a mistake in the page, not a failure to handle.
+	// The token function is read when it is called, so a page that gives a new one later is heard.
+	const api = createCompositionApi({
+		apiBasePath,
+		getAccessToken: (reason, refusedToken) => getAccessToken(reason, refusedToken)
+	});
+	const controller = new CompositionEditorController({
+		compositionId,
+		api,
+		autosaveDelayMs,
+		// 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).
+		onPreviewMessage: (message: PreviewMessage) =>
+			previewRef?.sendMessageToPreview?.({ ...message })
+	});
+
+	let state: CompositionEditorState = controller.getState();
+	// What the props editor is given is only replaced when it really is another object: the props editor takes a
+	// replaced prop for a change, whether the value differs or not.
+	let propsEditorContentSchema: any = controller.getPropsEditorContentSchema();
+	let propsEditorContentValues: Record<string, unknown> = controller.getPropsEditorContentValues();
+
+	// The view the page was last told about, so it hears of a change once, whoever made it.
+	let announcedDeviceView = state.deviceView;
+
+	const stopWatchingState = controller.subscribe((next) => {
+		state = next;
+		const contentSchema = controller.getPropsEditorContentSchema();
+		if (contentSchema !== propsEditorContentSchema) propsEditorContentSchema = contentSchema;
+		const contentValues = controller.getPropsEditorContentValues();
+		if (contentValues !== propsEditorContentValues) propsEditorContentValues = contentValues;
+		if (next.deviceView !== announcedDeviceView) {
+			announcedDeviceView = next.deviceView;
+			dispatch('deviceView', { deviceView: next.deviceView });
+		}
+	});
+
+	const stopWatchingEvents = controller.onEvent((event: CompositionEditorEvent) => {
+		switch (event.type) {
+			case 'ready':
+				dispatch('ready', {
+					name: controller.getState().name,
+					widgetId: controller.getState().widgetId
+				});
+				break;
+			case 'dirty':
+				dispatch('dirty', { dirty: event.dirty });
+				break;
+			case 'saved':
+				dispatch('saved', { composition: event.composition, savedAt: event.savedAt });
+				break;
+			case 'error':
+				dispatch('error', { during: event.during, failure: event.failure, fatal: event.fatal });
+				break;
+		}
+	});
+
+	// --- what the page can ask of it ------------------------------------------------------------------
+
+	/** Saves what is unsaved now. Resolves `true` when nothing is left unsaved afterwards. */
+	export function save(): Promise<boolean> {
+		return controller.save('manual');
+	}
+
+	/** Saves everything unsaved and waits until it is. Resolves `true` when nothing is left unsaved. Call it before removing the editor. */
+	export function flush(): Promise<boolean> {
+		return controller.flush();
+	}
+
+	/** Whether there is work that is not saved. */
+	export function isDirty(): boolean {
+		return controller.getState().dirty;
+	}
+
+	/** What the editor knows now (the composition's values, whether it is saving, the last error...). */
+	export function getState(): CompositionEditorState {
+		return controller.getState();
+	}
+
+	/** Loads the composition again. Edits that are not saved are lost. */
+	export function reload(): Promise<void> {
+		return controller.load();
+	}
+
+	/**
+	 * Looks at the preview as a phone (`'mobile'`) or at the size that is saved (`'desktop'`): what the preview's own
+	 * buttons do. Nothing becomes unsaved. Does nothing before the editor is ready.
+	 */
+	export function setDeviceView(deviceView: 'desktop' | 'mobile'): void {
+		setDevicePreview(deviceView === 'mobile');
+	}
+
+	/**
+	 * Tells the editor that the page saved the composition's embed settings itself, so a later save does not put
+	 * the ones the editor loaded back. Call it after `flush()`, with the settings the API now holds.
+	 */
+	export function adoptEmbedSettings(settings: Record<string, unknown>): void {
+		controller.adoptEmbedSettings(settings);
+		// (The preview may have a new size: the pair is placed again.)
+		void tick().then(() => dockFloatingEditorOnce());
+	}
+
+	// --- the preview ----------------------------------------------------------------------------------
+
+	let previewRef: {
+		sendMessageToPreview?: (message: Record<string, unknown>) => void;
+		setShellPosition?: (left: number, top: number) => void;
+	} | null = null;
+	let previewHydrating = false;
+	let isContentReady = false;
+
+	$: previewSrc = state.preview?.previewUrl ?? null;
+	$: previewLoading = state.phase === 'idle' || state.phase === 'loading';
+	$: isMobilePreview = state.deviceView === 'mobile';
+	// "Loading editor…" sits in the middle while the composition loads, and where the editor is about to appear after.
+	$: loadingCardPosition =
+		state.phase === 'ready' ? 'start-4 top-4' : 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
+	// A preview address that has just arrived is a page still to load: the preview says so until its frame has loaded.
+	$: startHydrating(previewSrc);
+
+	function startHydrating(address: string | null) {
+		previewHydrating = Boolean(address);
+		isContentReady = false;
+	}
+
+	async function handlePreviewIframeLoad() {
+		log('Preview frame loaded');
+		controller.syncPreview();
+		await tick();
+		requestAnimationFrame(() => {
+			previewHydrating = false;
+			isContentReady = true;
+		});
+	}
+
+	function handlePreviewResize(
+		event: CustomEvent<{ width: number; height: number; source?: string }>
+	) {
+		// A box smaller than the preview shrinks the preview to fit; that is the box's doing, not a size the user chose,
+		// so it is not saved (the composition would change just by being opened in a small window).
+		if (event.detail.source === 'clamp') {
+			log('The preview was shrunk to fit its box; the saved size is unchanged', event.detail);
+			return;
+		}
+		controller.setPreviewSize(event.detail.width, event.detail.height);
+	}
+
+	function setDevicePreview(mobile: boolean) {
+		controller.setDeviceView(mobile ? 'mobile' : 'desktop');
+		void tick().then(() => dockFloatingEditorOnce());
+	}
+
+	// --- the props editor -----------------------------------------------------------------------------
+
+	let propsEditorRef: {
+		setPosition?: (left: number, top: number) => void;
+		getPosition?: () => { left: number; top: number };
+	} | null = null;
+
+	function handleEditorPropertyChange(event: CustomEvent<PropertyChange>) {
+		const { schema, propertyId, value, itemId } = event.detail;
+		controller.changeProperty({ schema, propertyId, value, itemId });
+	}
+
+	function handleEditorContentItemsChanged(event: CustomEvent<{ items: unknown[] }>) {
+		controller.changeContentItems(event.detail.items);
+	}
+
+	// The Widgetic library, as the file picker's source, when the page brings none of its own.
+	$: widgetId = state.widgetId;
+	$: defaultMediaLibrary =
+		!mediaLibrary && widgetId ? createDefaultMediaLibrary(widgetId) : undefined;
+
+	function createDefaultMediaLibrary(forWidgetId: string): MediaLibraryProvider {
+		return createWidgeticMediaLibrary({
+			apiBasePath,
+			getAccessToken: (reason, refusedToken) => getAccessToken(reason, refusedToken),
+			contextType: 'content-property',
+			source: 'file-browser-upload',
+			widgetId: forWidgetId,
+			// An editor session cannot use the resumable upload: files over its limit are refused in words instead of with a 403.
+			allowResumableUploads: false
+		});
+	}
+
+	$: if (googleFontsApiKey) setGoogleFontsApiKey(googleFontsApiKey);
+
+	// --- the layout: settings editor beside the middle, preview on the other side of it -------------
+	// (the editor on the left and the preview on the right of a left to right screen; the other way round on a right to left one)
+
+	const EDITOR_WIDTH_PX = 450;
+	const EDITOR_PADDING = 20;
+	const EDITOR_MIN_HEIGHT = 360;
+	const PREVIEW_CHROME_HEIGHT = 36;
+
+	let editorShellEl: HTMLElement | null = null;
+	let floatingEditorHeight = 640;
+
+	$: schemasAvailable = Boolean(state.designSchema || state.contentSchema);
+	$: editorVisible =
+		state.phase === 'ready' && !state.schemasLoading && !state.schemasError && schemasAvailable;
+	// Placed once the editor is on the screen, not on every change: it must not jump back while it is being dragged.
+	// It is placed again when the screen turns around, because the pair is the mirror of itself.
+	$: if (editorVisible && $textDirection) requestDock();
+
+	function log(message: string, details?: unknown) {
+		if (!debug) return;
+		if (details === undefined) console.log(`[CompositionEditorApp] ${message}`);
+		else console.log(`[CompositionEditorApp] ${message}`, details);
+	}
+
+	function clampEditorHeight(containerHeight: number): number {
+		return Math.max(EDITOR_MIN_HEIGHT, containerHeight - EDITOR_PADDING * 2);
+	}
+
+	function requestDock() {
+		void tick().then(() => requestAnimationFrame(() => dockFloatingEditorOnce()));
+	}
+
+	/** Editor on one side of the middle, preview on the other, each EDITOR_PADDING from the middle: the editor starts the line, the preview follows it. */
+	function dockFloatingEditorOnce() {
+		if (!editorShellEl) return;
+		try {
+			const shellWidth = editorShellEl.clientWidth || window.innerWidth;
+			const shellHeight = editorShellEl.clientHeight || window.innerHeight;
+			floatingEditorHeight = clampEditorHeight(shellHeight);
+
+			const middleX = Math.round(shellWidth / 2);
+			const previewHeight = state.previewHeight + PREVIEW_CHROME_HEIGHT;
+			const leftEditor = leftOnThisScreen($textDirection, Math.max(EDITOR_PADDING, middleX - EDITOR_PADDING - EDITOR_WIDTH_PX), EDITOR_WIDTH_PX, shellWidth);
+			const topEditor = EDITOR_PADDING;
+			const leftPreview = leftOnThisScreen($textDirection, middleX + EDITOR_PADDING, state.previewWidth, shellWidth);
+			const topPreview = Math.max(EDITOR_PADDING, Math.round((shellHeight - previewHeight) / 2));
+
+			void tick().then(() => {
+				propsEditorRef?.setPosition?.(leftEditor, topEditor);
+				previewRef?.setShellPosition?.(leftPreview, topPreview);
+			});
+			log('Docked the editor and the preview', {
+				direction: $textDirection,
+				height: floatingEditorHeight,
+				middleX,
+				leftEditor,
+				topEditor,
+				leftPreview,
+				topPreview
+			});
+		} catch (error) {
+			console.error('[CompositionEditorApp] Placing the editor and the preview failed:', error);
+		}
+	}
+
+	/** When the box the editor is in changes size: the height follows, and the pair is placed again. */
+	function syncFloatingEditorHeight() {
+		if (!editorShellEl) return;
+		floatingEditorHeight = clampEditorHeight(editorShellEl.clientHeight || window.innerHeight);
+		dockFloatingEditorOnce();
+	}
+
+	// --- life -----------------------------------------------------------------------------------------
+
+	let shellObserver: ResizeObserver | null = null;
+
+	onMount(() => {
+		void controller.load();
+
+		window.addEventListener('resize', syncFloatingEditorHeight);
+		if (editorShellEl && typeof ResizeObserver !== 'undefined') {
+			shellObserver = new ResizeObserver(() => syncFloatingEditorHeight());
+			shellObserver.observe(editorShellEl);
+		}
+	});
+
+	onDestroy(() => {
+		// (Also runs when the page is rendered on a server, where there is no window.)
+		if (typeof window !== 'undefined')
+			window.removeEventListener('resize', syncFloatingEditorHeight);
+		shellObserver?.disconnect();
+		stopWatchingState();
+		stopWatchingEvents();
+		controller.dispose();
+		// The font stylesheets the editor put in the page's <head> go with it (a page of somebody else's is left as found)
+		FontManager.releasePageResources();
+	});
+</script>
+
+<div
+	class="composition-editor-ct relative h-full min-h-0 w-full overflow-hidden {className}"
+	dir={$textDirection}
+	{style}
+	bind:this={editorShellEl}
+>
+	<!-- Keep preview resize handles in their own layer below the floating editor. -->
+	<div
+		class="composition-editor-preview-area absolute inset-0 z-0 flex min-h-0 min-w-0 bg-[#f3f4f6]"
+	>
+		<!--
+			This editor can run inside a partner's page, and a widget is code written by somebody else. The preview may
+			run its scripts, keep its own storage (allow-same-origin), open links in a new tab and submit forms, and
+			nothing more: no top navigation (it cannot send the visitor's tab away), no alert/confirm dialogs, no
+			downloads; of the page's permissions it may only write to the clipboard.
+		-->
+		<WidgetPreview
+			bind:this={previewRef}
+			class="composition-widget-preview h-full w-full"
+			mode="controlled"
+			sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+			allow="clipboard-write"
+			enableResize={true}
+			enableDrag={true}
+			showDimensionInputs={true}
+			showChromeDeviceToggle={true}
+			deviceMobile={isMobilePreview}
+			on:deviceView={(event) => setDevicePreview(event.detail.mobile)}
+			resizeMode="corner"
+			defaultStageAlign="center"
+			compactChrome={true}
+			showUrlBar={false}
+			src={previewSrc}
+			displayUrl={previewSrc}
+			resizeWidth={state.previewWidth}
+			resizeHeight={state.previewHeight}
+			{previewLoading}
+			{previewHydrating}
+			previewError={state.previewError}
+			{isContentReady}
+			on:iframeLoad={handlePreviewIframeLoad}
+			on:resize={handlePreviewResize}
+		/>
+	</div>
+
+	{#if state.phase === 'failed' && state.loadError}
+		<!-- Nothing can be shown behind this one (no composition, so no editor and no preview), so it sits in the middle. -->
+		<div
+			role="alert"
+			class="composition-editor-error absolute left-1/2 top-1/2 z-30 flex w-max max-w-sm -translate-x-1/2 -translate-y-1/2 flex-col gap-2 rounded-lg border border-red-200 bg-white p-4 shadow-sm"
+		>
+			<p class="text-sm text-red-600">{failureMessage(state.loadError, 'load', $t)}</p>
+			<button
+				type="button"
+				class="retry-load-btn w-fit cursor-pointer rounded-lg bg-blue-100 px-2 py-1 text-xs text-blue-700 hover:bg-blue-200 focus:outline-none focus-visible:outline-none"
+				on:click={() => {
+					void controller.load();
+				}}
+			>
+				{$t('editor.app.tryAgain')}
+			</button>
+		</div>
+	{:else if state.phase !== 'ready' || state.schemasLoading}
+		<div
+			role="status"
+			class="composition-editor-loading absolute z-30 rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm {loadingCardPosition}"
+		>
+			{$t('editor.app.loading')}
+		</div>
+	{:else if state.schemasError}
+		<div
+			role="alert"
+			class="composition-editor-error absolute start-4 top-4 z-30 flex max-w-sm flex-col gap-2 rounded-lg border border-red-200 bg-white p-4 shadow-sm"
+		>
+			<span class="text-xs text-red-600">{state.schemasError}</span>
+			<button
+				type="button"
+				class="retry-schemas-btn w-fit cursor-pointer rounded-lg bg-blue-100 px-2 py-1 text-xs text-blue-700 hover:bg-blue-200 focus:outline-none focus-visible:outline-none"
+				on:click={() => {
+					void controller.reloadSchemas();
+				}}
+			>
+				{$t('editor.app.retry')}
+			</button>
+		</div>
+	{:else if schemasAvailable}
+		<!--
+			The panel is placed from the left edge of the editor's area, so it says `position: absolute` itself: the class of the
+			same name loses to the `relative` the panel's own root carries, and a relative box moves from where it sits in the flow,
+			which is the left edge only on a left to right screen (on a right to left one it sits at the right edge, and a `left` of
+			720px puts it 720px beyond that: out of sight).
+		-->
+		<PropsEditor
+			bind:this={propsEditorRef}
+			class="composition-props-editor absolute z-20 shadow-lg"
+			style="position: absolute; left: {EDITOR_PADDING}px; top: {EDITOR_PADDING}px; /* rtl-ok: the dock puts the panel in pixels from the left edge as soon as it is on screen (see dockFloatingEditorOnce) */"
+			designSchema={state.designSchema}
+			contentSchema={propsEditorContentSchema}
+			initialDesignValues={state.designValues}
+			initialContentValues={propsEditorContentValues}
+			mediaLibrary={mediaLibrary ?? defaultMediaLibrary}
+			width="{EDITOR_WIDTH_PX}px"
+			height="{floatingEditorHeight}px"
+			showDragHandle={true}
+			enableDrag={true}
+			showSaveButton={true}
+			saveDirty={state.dirty}
+			saveSaving={state.saving}
+			defaultTab="content"
+			on:propertyChange={handleEditorPropertyChange}
+			on:contentItemsChanged={handleEditorContentItemsChanged}
+			on:save={() => {
+				void controller.save('manual');
+			}}
+		/>
+	{/if}
+
+	{#if state.phase === 'ready' && state.saveError}
+		<div
+			role="alert"
+			class="composition-editor-save-error absolute bottom-4 start-4 z-30 flex max-w-sm flex-col gap-2 rounded-lg border border-red-200 bg-white p-4 shadow-sm"
+		>
+			<p class="text-sm text-red-600">{failureMessage(state.saveError, 'save', $t)}</p>
+			<button
+				type="button"
+				class="retry-save-btn w-fit cursor-pointer rounded-lg bg-blue-100 px-2 py-1 text-xs text-blue-700 hover:bg-blue-200 focus:outline-none focus-visible:outline-none"
+				on:click={() => {
+					void controller.save('manual');
+				}}
+			>
+				{$t('editor.app.tryAgain')}
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* The props editor's own classes are out of reach of this component, so they are styled from the box it sits in. */
+	.composition-editor-ct :global(.composition-props-editor .ic-input-ct) {
+		width: 152px !important;
+	}
+	.composition-editor-ct :global(.composition-props-editor .input-controller > div:last-child) {
+		width: 152px !important;
+	}
+	.composition-editor-ct :global(.composition-props-editor .color-input-main-container) {
+		width: 152px !important;
+	}
+	.composition-editor-ct :global(.composition-props-editor .input-controller-header .subtext) {
+		overflow: visible;
+		text-overflow: unset;
+		white-space: nowrap;
+	}
+</style>

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

@@ -0,0 +1,95 @@
+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 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> {
+    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 CompositionEditorApp: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    /** The composition to edit. */ compositionId: string;
+    /** The Widgetic API's address, with its version: `https://api.widgetic.com/v1`. */ apiBasePath: string;
+    /**
+         * Gives the token to call the API with. Asked before every request, so a host that keeps its token fresh is
+         * always used up to date; asked again with `'expired'` when the API refuses a token, after which the request
+         * is sent once more if the token that comes back is a different one. That second call also gets the token that
+         * was refused (`refusedToken`), so a page can tell the refusal of its current token from the late refusal of
+         * one it has already replaced, when several requests are refused together.
+         */ getAccessToken: (reason: TokenReason, refusedToken?: string) => Promise<string> | string;
+    /**
+         * 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;
+    /** 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;
+    /**
+         * The language of the editor: a BCP 47 tag ("de", "pt-BR") that sets how plurals, numbers and dates are written.
+         * Without it, English. The words themselves come from `messages`.
+         */ locale?: string | null | undefined;
+    /**
+         * The words of the editor in the language of the page: any of the keys of `EDITOR_MESSAGES` (and of the File
+         * Browser's and the rich text editor's catalogs, which are inside the editor). One flat object; a key left out keeps
+         * its English text. See `checkEditorMessages` to test it.
+         */ messages?: MessageOverrides | null | undefined;
+    /**
+         * Which way the editor is read: "ltr" or "rtl". The page that puts it on screen sets `dir` on an element around it and the
+         * browser turns the layout around; this prop says the same to the parts that wrap a library which writes a `dir` of its own
+         * (the menus, the scroll areas, the File Browser and the rich text editor inside it), and to the code that places the settings
+         * editor and the preview: with "rtl" the settings editor is on the right of the middle and the preview on its left.
+         * It is NOT worked out from `locale`: an editor on a page that is laid out left to right can speak Arabic and still be left
+         * to right. Left out, the editor is read the way the screen around it is, and left to right when nothing around it says.
+         * Can change while the editor is open.
+         */ dir?: TextDirection | undefined;
+    save?: () => Promise<boolean>;
+    flush?: () => Promise<boolean>;
+    isDirty?: () => boolean;
+    getState?: () => CompositionEditorState;
+    reload?: () => Promise<void>;
+    setDeviceView?: (deviceView: "desktop" | "mobile") => void;
+    adoptEmbedSettings?: (settings: Record<string, unknown>) => void;
+}, {
+    ready: CustomEvent<{
+        name: string;
+        widgetId: string;
+    }>;
+    dirty: CustomEvent<{
+        dirty: boolean;
+    }>;
+    saved: CustomEvent<{
+        composition: Record<string, unknown>;
+        savedAt: number;
+    }>;
+    error: CustomEvent<{
+        during: "load" | "schemas" | "save";
+        failure: EditorFailure;
+        fatal: boolean;
+    }>;
+    deviceView: CustomEvent<{
+        deviceView: "desktop" | "mobile";
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    save: () => Promise<boolean>;
+    flush: () => Promise<boolean>;
+    isDirty: () => boolean;
+    getState: () => CompositionEditorState;
+    reload: () => Promise<void>;
+    setDeviceView: (deviceView: "desktop" | "mobile") => void;
+    adoptEmbedSettings: (settings: Record<string, unknown>) => void;
+}, string>;
+type CompositionEditorApp = InstanceType<typeof CompositionEditorApp>;
+export default CompositionEditorApp;