@widgetic/editor 4.0.10 → 4.1.0

package/dist/i18n/messages.d.ts

@@ -0,0 +1,241 @@
+/**
+ * Every word the editor shows to the person using it, in English: the one place to read them, and the keys a page can
+ * replace with the `messages` of the editor.
+ *
+ * A message is plain text. `{name}` is a value the editor puts in; `{count, plural, one {# file} other {# files}}` picks
+ * the form that fits a number in the page's language. `\{`, `\}`, `\#` and `\\` write those characters themselves. See
+ * `@widgetic/design-system/i18n` for the whole format.
+ *
+ * Keys are grouped by where the words appear. A key that is left out of a page's `messages` keeps the English text below,
+ * so a language can be added a screen at a time.
+ *
+ * Words that are NOT here, on purpose:
+ *  - what the widget says about itself: the names, descriptions and options of its settings are written by the person who
+ *    made the widget, and are shown as they were written;
+ *  - what the File Browser and the rich text editor inside this editor say: they have their own catalogs
+ *    (`FILE_BROWSER_MESSAGES`, `SHAD_EDITOR_MESSAGES`), and the same `messages` object can carry all three;
+ *  - text the editor writes into the composition: the title of a new item ("Item 03"), the name of a composition that has
+ *    none ("Untitled Composition"). Those are saved with the composition, so they do not change with the language.
+ */
+export declare const EDITOR_MESSAGES: {
+    readonly 'editor.app.loading': "Loading editor…";
+    readonly 'editor.app.tryAgain': "Try again";
+    readonly 'editor.app.retry': "Retry";
+    readonly 'editor.failure.widgetNotPublished': "Publish the widget before editing a composition.";
+    readonly 'editor.failure.sessionEndedWhileSaving': "Your session has ended, so your changes could not be saved. Reload the page to continue.";
+    readonly 'editor.failure.sessionEnded': "Your session has ended. Reload the page to continue.";
+    readonly 'editor.failure.compositionNotFound': "This composition could not be found.";
+    readonly 'editor.failure.noAccess': "You do not have access to this composition.";
+    readonly 'editor.failure.noWidget': "This composition has no widget.";
+    readonly 'editor.failure.widgetNotFound': "The widget this composition is made with could not be found.";
+    readonly 'editor.failure.saveNeedsConnection': "Your changes could not be saved. Check the connection and try again.";
+    readonly 'editor.failure.loadNeedsConnection': "The editor could not be loaded. Check the connection and try again.";
+    readonly 'editor.failure.saveFailed': "Your changes could not be saved.";
+    readonly 'editor.failure.loadFailed': "The editor could not be loaded.";
+    readonly 'editor.failure.settingsLoadFailed': "The editor settings could not be loaded. Try again.";
+    readonly 'editor.failure.noSettings': "No editable settings found. Generate and publish the widget first.";
+    /** A line under a message that has an error code: "Error code: CONFIG_NOT_FOUND". The code is not translated. */
+    readonly 'editor.failure.errorCode': "Error code: {code}";
+    readonly 'editor.props.title': "Edit Properties";
+    readonly 'editor.props.designTab': "Design";
+    readonly 'editor.props.contentTab': "Content";
+    /** The title of the card of settings that belong to no item, when the widget gave it none. */
+    readonly 'editor.props.contentCard': "Content";
+    readonly 'editor.props.save': "Save";
+    readonly 'editor.props.saving': "Saving";
+    readonly 'editor.props.noConfiguration': "No schema configuration available";
+    readonly 'editor.props.noDesignSchema': "No design schema available";
+    readonly 'editor.props.noSchemaData': "No schema data available";
+    readonly 'editor.props.noComponents': "No components defined in schema";
+    readonly 'editor.props.noProperties': "No properties available";
+    readonly 'editor.props.addItem': "Add new";
+    readonly 'editor.props.deleteItem': "Delete item";
+    readonly 'editor.embed.title': "Edit Options";
+    readonly 'editor.embed.loading': "Loading...";
+    readonly 'editor.embed.noCode': "No embed code available";
+    readonly 'editor.embed.codeHeader': "Embed code";
+    readonly 'editor.embed.headerArea': "Embed code header area";
+    readonly 'editor.embed.readMore': "Read more about embedding";
+    readonly 'editor.embed.copy': "Copy to clipboard";
+    /** The pop-ups after a copy: the title of the one that worked is the same for the editor's pop-up and the header's. */
+    readonly 'editor.embed.copied': "Copied to clipboard";
+    readonly 'editor.embed.copiedHint': "Paste it anywhere on your site.";
+    readonly 'editor.embed.copiedDone': "Content copied successfully.";
+    readonly 'editor.embed.copyFailed': "Copy failed";
+    readonly 'editor.embed.copyFailedHint': "Please try manual selection";
+    readonly 'editor.preview.title': "Preview";
+    readonly 'editor.preview.dragHandle': "Drag preview";
+    readonly 'editor.preview.desktop': "Desktop preview";
+    readonly 'editor.preview.mobile': "Mobile preview";
+    /** The first letters of "width" and "height", beside the two boxes where the size of the preview is typed. */
+    readonly 'editor.preview.widthShort': "W";
+    readonly 'editor.preview.heightShort': "H";
+    readonly 'editor.preview.noUrl': "no URL";
+    readonly 'editor.preview.copyUrl': "Copy URL";
+    readonly 'editor.preview.refresh': "Refresh preview";
+    readonly 'editor.preview.fitToPanel': "Fit preview to panel";
+    readonly 'editor.preview.mobileViewport': "Mobile viewport";
+    readonly 'editor.preview.desktopViewport': "Desktop viewport (full window)";
+    readonly 'editor.preview.openInNewTab': "Open in new tab";
+    readonly 'editor.preview.newTab': "↗ New tab";
+    readonly 'editor.preview.selectWidget': "Select a widget to preview";
+    /** What the name of a widget is when it has none. */
+    readonly 'editor.preview.widgetName': "Widget";
+    readonly 'editor.preview.notPublished': "Not published yet";
+    readonly 'editor.preview.publishToPreview': "Publish the widget in Widget Creator to preview it here.";
+    readonly 'editor.preview.frameTitle': "Widget preview";
+    readonly 'editor.preview.frameTitleNamed': "Widget preview – {name}";
+    readonly 'editor.preview.unavailable': "Preview Unavailable";
+    readonly 'editor.preview.loadFailedPreview': "Failed to load widget preview.";
+    readonly 'editor.preview.retry': "Retry";
+    readonly 'editor.preview.retryBuild': "Retry Build";
+    readonly 'editor.preview.retryPreview': "Retry Preview";
+    readonly 'editor.preview.fixErrors': "Fix Errors";
+    readonly 'editor.preview.viewErrors': "View Errors";
+    readonly 'editor.preview.runtimeError': "Widget runtime error";
+    readonly 'editor.preview.compilationErrors': "Code Has Compilation Errors";
+    /** `{status}` is the HTTP status the preview page answered with. */
+    readonly 'editor.preview.compilationErrorsDetail': "The generated code has syntax or compilation errors (HTTP {status}).";
+    readonly 'editor.preview.noCodeYet': "No Code Generated Yet";
+    readonly 'editor.preview.noPreview': "No Preview Available";
+    readonly 'editor.preview.building': "Building Preview...";
+    readonly 'editor.preview.loadingWidget': "Loading widget…";
+    readonly 'editor.preview.loadingPreview': "Loading Preview…";
+    readonly 'editor.preview.checkingWidget': "Checking widget on Worker…";
+    readonly 'editor.preview.applyingSettings': "Applying composition settings…";
+    readonly 'editor.preview.connecting': "Connecting to the widget preview…";
+    readonly 'editor.preview.generatingCode': "Generating code…";
+    readonly 'editor.list.recentlyUsed': "Recently used";
+    readonly 'editor.list.more': "More";
+    readonly 'editor.list.searchResults': "Search results";
+    readonly 'editor.list.loadingMore': "Loading more items...";
+    readonly 'editor.list.deleteItem': "Delete";
+    /** The tabs above a list of fonts or vectors. */
+    readonly 'editor.category.all': "All";
+    readonly 'editor.category.mine': "Mine";
+    readonly 'editor.category.sansSerif': "Sans Serif";
+    readonly 'editor.category.serif': "Serif";
+    readonly 'editor.category.script': "Script";
+    readonly 'editor.category.other': "Other";
+    readonly 'editor.category.icons': "Icons";
+    readonly 'editor.category.emojis': "Emojis";
+    readonly 'editor.category.clipart': "Clipart";
+    readonly 'editor.font.select': "Select font...";
+    readonly 'editor.font.title': "Fonts";
+    readonly 'editor.font.search': "Search fonts...";
+    readonly 'editor.font.list': "Font list";
+    readonly 'editor.font.loading': "Loading fonts";
+    readonly 'editor.font.noneFound': "No fonts found";
+    readonly 'editor.font.noneAvailable': "No fonts available";
+    readonly 'editor.font.remove': "Remove font";
+    readonly 'editor.font.weight': "Font Weight";
+    /** The name a screen reader gives the list of weights a font has, when its menu is open. */
+    readonly 'editor.font.weightList': "Font weights";
+    /** The look of a weight that has a name of its own; `{weight}` is one of the names below ("Bold Italic"). */
+    readonly 'editor.fontWeight.withItalic': "{weight} Italic";
+    readonly 'editor.fontWeight.italic': "Italic";
+    readonly 'editor.fontWeight.thin': "Thin";
+    readonly 'editor.fontWeight.extraLight': "ExtraLight";
+    readonly 'editor.fontWeight.light': "Light";
+    readonly 'editor.fontWeight.regular': "Regular";
+    readonly 'editor.fontWeight.medium': "Medium";
+    readonly 'editor.fontWeight.semiBold': "SemiBold";
+    readonly 'editor.fontWeight.bold': "Bold";
+    readonly 'editor.fontWeight.extraBold': "ExtraBold";
+    readonly 'editor.fontWeight.black': "Black";
+    readonly 'editor.vector.select': "Select vector...";
+    readonly 'editor.vector.title': "Vectors";
+    readonly 'editor.vector.search': "Search vectors...";
+    readonly 'editor.vector.list': "Vector list";
+    readonly 'editor.vector.noneFound': "No vectors found";
+    readonly 'editor.vector.noneAvailable': "No vectors available";
+    readonly 'editor.file.useFile': "Use file";
+    readonly 'editor.file.useImage': "Use image";
+    readonly 'editor.file.useVideo': "Use video";
+    readonly 'editor.file.useAudio': "Use audio";
+    readonly 'editor.file.useDocument': "Use document";
+    readonly 'editor.file.addFile': "Add file...";
+    readonly 'editor.file.addImage': "Add image...";
+    readonly 'editor.file.addVideo': "Add video...";
+    readonly 'editor.file.addAudio': "Add audio...";
+    readonly 'editor.file.addDocument': "Add docs...";
+    readonly 'editor.file.play': "Play";
+    readonly 'editor.file.pause': "Pause";
+    readonly 'editor.file.notFound': "File not found";
+    readonly 'editor.file.emptyFolder': "Empty folder";
+    readonly 'editor.file.clear': "Clear file";
+    readonly 'editor.file.dialogTitle': "Select file";
+    readonly 'editor.file.closeDialog': "Close file browser";
+    readonly 'editor.color.noRecent': "No recent colors";
+    readonly 'editor.color.picker': "Color picker";
+    readonly 'editor.date.pick': "Pick a date";
+    readonly 'editor.date.pickRange': "Pick a date range";
+    readonly 'editor.date.invalid': "Invalid date";
+    readonly 'editor.date.selectMonth': "Select month";
+    readonly 'editor.date.selectYear': "Select year";
+    /**
+     * The name a screen reader gives the calendar of one date. The library writes the month and year after it ("Date
+     * October 2026"), so a short noun is best.
+     */
+    readonly 'editor.date.calendarLabel': "Date";
+    /** The same for the calendar of a range of dates ("Date range October - November 2026"). */
+    readonly 'editor.date.rangeCalendarLabel': "Date range";
+    /** The name a screen reader gives the buttons of a calendar that show the month before and the month after. */
+    readonly 'editor.date.previousMonth': "Previous month";
+    readonly 'editor.date.nextMonth': "Next month";
+    /** What is typed in the three boxes of a date: the hint inside the box, and its name for a screen reader. */
+    readonly 'editor.dateField.dayHint': "DD";
+    readonly 'editor.dateField.monthHint': "MM";
+    readonly 'editor.dateField.yearHint': "YYYY";
+    readonly 'editor.dateField.dayLabel': "Day input";
+    readonly 'editor.dateField.monthLabel': "Month input";
+    readonly 'editor.dateField.yearLabel': "Year input";
+    readonly 'editor.dropdown.select': "Select an option";
+    readonly 'editor.switch.off': "Off";
+    readonly 'editor.switch.on': "On";
+    readonly 'editor.tags.add': "Add tag...";
+    /** The two letters beside the position of a point in a picture: how far across, and how far down. */
+    readonly 'editor.position.x': "X:";
+    readonly 'editor.position.y': "Y:";
+    /** The buttons of the nine places on a screen; `{position}` is one of the names below. */
+    readonly 'editor.fixedPosition.set': "Set position to {position}";
+    readonly 'editor.fixedPosition.topLeft': "top-left";
+    readonly 'editor.fixedPosition.topCenter': "top-center";
+    readonly 'editor.fixedPosition.topRight': "top-right";
+    readonly 'editor.fixedPosition.centerLeft': "center-left";
+    readonly 'editor.fixedPosition.centerCenter': "center-center";
+    readonly 'editor.fixedPosition.centerRight': "center-right";
+    readonly 'editor.fixedPosition.bottomLeft': "bottom-left";
+    readonly 'editor.fixedPosition.bottomCenter': "bottom-center";
+    readonly 'editor.fixedPosition.bottomRight': "bottom-right";
+    /** The corners of a box: the name of the group, of each of the four boxes, and of the lock between them. */
+    readonly 'editor.corners.group': "Corner radius";
+    readonly 'editor.corners.topLeft': "Top left corner radius";
+    readonly 'editor.corners.topRight': "Top right corner radius";
+    readonly 'editor.corners.bottomLeft': "Bottom left corner radius";
+    readonly 'editor.corners.bottomRight': "Bottom right corner radius";
+    readonly 'editor.corners.lock': "Lock corner radius values";
+    readonly 'editor.corners.unlock': "Unlock corner radius values";
+    readonly 'editor.textArea.toolbar': "Text formatting toolbar";
+    readonly 'editor.textArea.toggleBold': "Toggle bold";
+    readonly 'editor.textArea.toggleItalic': "Toggle italic";
+    readonly 'editor.textArea.toggleUnderline': "Toggle underline";
+    readonly 'editor.textArea.toggleLink': "Toggle link";
+    readonly 'editor.textArea.text': "Text";
+    readonly 'editor.textArea.paragraph': "Paragraph";
+    readonly 'editor.textArea.heading1': "H1";
+    readonly 'editor.textArea.heading2': "H2";
+    readonly 'editor.textArea.heading3': "H3";
+    readonly 'editor.textArea.bulletList': "Bullet List";
+    readonly 'editor.textArea.numberedList': "Numbered List";
+    readonly 'editor.textArea.checkList': "Check List";
+    /** The name a screen reader gives the list of text styles (paragraph, headings) when its menu is open. */
+    readonly 'editor.textArea.textStyles': "Text styles";
+    /** The name a screen reader gives the list of list styles (bullets, numbers, checks) when its menu is open. */
+    readonly 'editor.textArea.listStyles': "List styles";
+    /** The question the browser asks when a link is added. */
+    readonly 'editor.textArea.enterUrl': "Enter URL";
+    readonly 'editor.schema.subtitleFont': "Subtitle Font";
+};
+/** The name of one message. */
+export type EditorMessageKey = keyof typeof EDITOR_MESSAGES;

package/dist/i18n/messages.js

@@ -0,0 +1,253 @@
+/**
+ * Every word the editor shows to the person using it, in English: the one place to read them, and the keys a page can
+ * replace with the `messages` of the editor.
+ *
+ * A message is plain text. `{name}` is a value the editor puts in; `{count, plural, one {# file} other {# files}}` picks
+ * the form that fits a number in the page's language. `\{`, `\}`, `\#` and `\\` write those characters themselves. See
+ * `@widgetic/design-system/i18n` for the whole format.
+ *
+ * Keys are grouped by where the words appear. A key that is left out of a page's `messages` keeps the English text below,
+ * so a language can be added a screen at a time.
+ *
+ * Words that are NOT here, on purpose:
+ *  - what the widget says about itself: the names, descriptions and options of its settings are written by the person who
+ *    made the widget, and are shown as they were written;
+ *  - what the File Browser and the rich text editor inside this editor say: they have their own catalogs
+ *    (`FILE_BROWSER_MESSAGES`, `SHAD_EDITOR_MESSAGES`), and the same `messages` object can carry all three;
+ *  - text the editor writes into the composition: the title of a new item ("Item 03"), the name of a composition that has
+ *    none ("Untitled Composition"). Those are saved with the composition, so they do not change with the language.
+ */
+export const EDITOR_MESSAGES = {
+    // ===== The editor as a whole: the card that says it is loading, and the buttons that try again =====
+    'editor.app.loading': 'Loading editor…',
+    'editor.app.tryAgain': 'Try again',
+    'editor.app.retry': 'Retry',
+    // ===== What went wrong, and what to do about it =====
+    'editor.failure.widgetNotPublished': 'Publish the widget before editing a composition.',
+    'editor.failure.sessionEndedWhileSaving': 'Your session has ended, so your changes could not be saved. Reload the page to continue.',
+    'editor.failure.sessionEnded': 'Your session has ended. Reload the page to continue.',
+    'editor.failure.compositionNotFound': 'This composition could not be found.',
+    'editor.failure.noAccess': 'You do not have access to this composition.',
+    'editor.failure.noWidget': 'This composition has no widget.',
+    'editor.failure.widgetNotFound': 'The widget this composition is made with could not be found.',
+    'editor.failure.saveNeedsConnection': 'Your changes could not be saved. Check the connection and try again.',
+    'editor.failure.loadNeedsConnection': 'The editor could not be loaded. Check the connection and try again.',
+    'editor.failure.saveFailed': 'Your changes could not be saved.',
+    'editor.failure.loadFailed': 'The editor could not be loaded.',
+    'editor.failure.settingsLoadFailed': 'The editor settings could not be loaded. Try again.',
+    'editor.failure.noSettings': 'No editable settings found. Generate and publish the widget first.',
+    /** A line under a message that has an error code: "Error code: CONFIG_NOT_FOUND". The code is not translated. */
+    'editor.failure.errorCode': 'Error code: {code}',
+    // ===== The settings editor =====
+    'editor.props.title': 'Edit Properties',
+    'editor.props.designTab': 'Design',
+    'editor.props.contentTab': 'Content',
+    /** The title of the card of settings that belong to no item, when the widget gave it none. */
+    'editor.props.contentCard': 'Content',
+    'editor.props.save': 'Save',
+    'editor.props.saving': 'Saving',
+    'editor.props.noConfiguration': 'No schema configuration available',
+    'editor.props.noDesignSchema': 'No design schema available',
+    'editor.props.noSchemaData': 'No schema data available',
+    'editor.props.noComponents': 'No components defined in schema',
+    'editor.props.noProperties': 'No properties available',
+    'editor.props.addItem': 'Add new',
+    'editor.props.deleteItem': 'Delete item',
+    // ===== The embed options =====
+    'editor.embed.title': 'Edit Options',
+    'editor.embed.loading': 'Loading...',
+    'editor.embed.noCode': 'No embed code available',
+    'editor.embed.codeHeader': 'Embed code',
+    'editor.embed.headerArea': 'Embed code header area',
+    'editor.embed.readMore': 'Read more about embedding',
+    'editor.embed.copy': 'Copy to clipboard',
+    /** The pop-ups after a copy: the title of the one that worked is the same for the editor's pop-up and the header's. */
+    'editor.embed.copied': 'Copied to clipboard',
+    'editor.embed.copiedHint': 'Paste it anywhere on your site.',
+    'editor.embed.copiedDone': 'Content copied successfully.',
+    'editor.embed.copyFailed': 'Copy failed',
+    'editor.embed.copyFailedHint': 'Please try manual selection',
+    // ===== The preview of the widget =====
+    'editor.preview.title': 'Preview',
+    'editor.preview.dragHandle': 'Drag preview',
+    'editor.preview.desktop': 'Desktop preview',
+    'editor.preview.mobile': 'Mobile preview',
+    /** The first letters of "width" and "height", beside the two boxes where the size of the preview is typed. */
+    'editor.preview.widthShort': 'W',
+    'editor.preview.heightShort': 'H',
+    'editor.preview.noUrl': 'no URL',
+    'editor.preview.copyUrl': 'Copy URL',
+    'editor.preview.refresh': 'Refresh preview',
+    'editor.preview.fitToPanel': 'Fit preview to panel',
+    'editor.preview.mobileViewport': 'Mobile viewport',
+    'editor.preview.desktopViewport': 'Desktop viewport (full window)',
+    'editor.preview.openInNewTab': 'Open in new tab',
+    'editor.preview.newTab': '↗ New tab',
+    'editor.preview.selectWidget': 'Select a widget to preview',
+    /** What the name of a widget is when it has none. */
+    'editor.preview.widgetName': 'Widget',
+    'editor.preview.notPublished': 'Not published yet',
+    'editor.preview.publishToPreview': 'Publish the widget in Widget Creator to preview it here.',
+    'editor.preview.frameTitle': 'Widget preview',
+    'editor.preview.frameTitleNamed': 'Widget preview – {name}',
+    'editor.preview.unavailable': 'Preview Unavailable',
+    'editor.preview.loadFailedPreview': 'Failed to load widget preview.',
+    'editor.preview.retry': 'Retry',
+    'editor.preview.retryBuild': 'Retry Build',
+    'editor.preview.retryPreview': 'Retry Preview',
+    'editor.preview.fixErrors': 'Fix Errors',
+    'editor.preview.viewErrors': 'View Errors',
+    'editor.preview.runtimeError': 'Widget runtime error',
+    'editor.preview.compilationErrors': 'Code Has Compilation Errors',
+    /** `{status}` is the HTTP status the preview page answered with. */
+    'editor.preview.compilationErrorsDetail': 'The generated code has syntax or compilation errors (HTTP {status}).',
+    'editor.preview.noCodeYet': 'No Code Generated Yet',
+    'editor.preview.noPreview': 'No Preview Available',
+    'editor.preview.building': 'Building Preview...',
+    'editor.preview.loadingWidget': 'Loading widget…',
+    'editor.preview.loadingPreview': 'Loading Preview…',
+    'editor.preview.checkingWidget': 'Checking widget on Worker…',
+    'editor.preview.applyingSettings': 'Applying composition settings…',
+    'editor.preview.connecting': 'Connecting to the widget preview…',
+    'editor.preview.generatingCode': 'Generating code…',
+    // ===== Lists of fonts and vectors: the words they share =====
+    'editor.list.recentlyUsed': 'Recently used',
+    'editor.list.more': 'More',
+    'editor.list.searchResults': 'Search results',
+    'editor.list.loadingMore': 'Loading more items...',
+    'editor.list.deleteItem': 'Delete',
+    /** The tabs above a list of fonts or vectors. */
+    'editor.category.all': 'All',
+    'editor.category.mine': 'Mine',
+    'editor.category.sansSerif': 'Sans Serif',
+    'editor.category.serif': 'Serif',
+    'editor.category.script': 'Script',
+    'editor.category.other': 'Other',
+    'editor.category.icons': 'Icons',
+    'editor.category.emojis': 'Emojis',
+    'editor.category.clipart': 'Clipart',
+    // ===== Fonts =====
+    'editor.font.select': 'Select font...',
+    'editor.font.title': 'Fonts',
+    'editor.font.search': 'Search fonts...',
+    'editor.font.list': 'Font list',
+    'editor.font.loading': 'Loading fonts',
+    'editor.font.noneFound': 'No fonts found',
+    'editor.font.noneAvailable': 'No fonts available',
+    'editor.font.remove': 'Remove font',
+    'editor.font.weight': 'Font Weight',
+    /** The name a screen reader gives the list of weights a font has, when its menu is open. */
+    'editor.font.weightList': 'Font weights',
+    /** The look of a weight that has a name of its own; `{weight}` is one of the names below ("Bold Italic"). */
+    'editor.fontWeight.withItalic': '{weight} Italic',
+    'editor.fontWeight.italic': 'Italic',
+    'editor.fontWeight.thin': 'Thin',
+    'editor.fontWeight.extraLight': 'ExtraLight',
+    'editor.fontWeight.light': 'Light',
+    'editor.fontWeight.regular': 'Regular',
+    'editor.fontWeight.medium': 'Medium',
+    'editor.fontWeight.semiBold': 'SemiBold',
+    'editor.fontWeight.bold': 'Bold',
+    'editor.fontWeight.extraBold': 'ExtraBold',
+    'editor.fontWeight.black': 'Black',
+    // ===== Vectors (icons, emojis and clipart) =====
+    'editor.vector.select': 'Select vector...',
+    'editor.vector.title': 'Vectors',
+    'editor.vector.search': 'Search vectors...',
+    'editor.vector.list': 'Vector list',
+    'editor.vector.noneFound': 'No vectors found',
+    'editor.vector.noneAvailable': 'No vectors available',
+    // ===== Files =====
+    'editor.file.useFile': 'Use file',
+    'editor.file.useImage': 'Use image',
+    'editor.file.useVideo': 'Use video',
+    'editor.file.useAudio': 'Use audio',
+    'editor.file.useDocument': 'Use document',
+    'editor.file.addFile': 'Add file...',
+    'editor.file.addImage': 'Add image...',
+    'editor.file.addVideo': 'Add video...',
+    'editor.file.addAudio': 'Add audio...',
+    'editor.file.addDocument': 'Add docs...',
+    'editor.file.play': 'Play',
+    'editor.file.pause': 'Pause',
+    'editor.file.notFound': 'File not found',
+    'editor.file.emptyFolder': 'Empty folder',
+    'editor.file.clear': 'Clear file',
+    'editor.file.dialogTitle': 'Select file',
+    'editor.file.closeDialog': 'Close file browser',
+    // ===== Colours =====
+    'editor.color.noRecent': 'No recent colors',
+    'editor.color.picker': 'Color picker',
+    // ===== Dates =====
+    'editor.date.pick': 'Pick a date',
+    'editor.date.pickRange': 'Pick a date range',
+    'editor.date.invalid': 'Invalid date',
+    'editor.date.selectMonth': 'Select month',
+    'editor.date.selectYear': 'Select year',
+    /**
+     * The name a screen reader gives the calendar of one date. The library writes the month and year after it ("Date
+     * October 2026"), so a short noun is best.
+     */
+    'editor.date.calendarLabel': 'Date',
+    /** The same for the calendar of a range of dates ("Date range October - November 2026"). */
+    'editor.date.rangeCalendarLabel': 'Date range',
+    /** The name a screen reader gives the buttons of a calendar that show the month before and the month after. */
+    'editor.date.previousMonth': 'Previous month',
+    'editor.date.nextMonth': 'Next month',
+    /** What is typed in the three boxes of a date: the hint inside the box, and its name for a screen reader. */
+    'editor.dateField.dayHint': 'DD',
+    'editor.dateField.monthHint': 'MM',
+    'editor.dateField.yearHint': 'YYYY',
+    'editor.dateField.dayLabel': 'Day input',
+    'editor.dateField.monthLabel': 'Month input',
+    'editor.dateField.yearLabel': 'Year input',
+    // ===== Small controls =====
+    'editor.dropdown.select': 'Select an option',
+    'editor.switch.off': 'Off',
+    'editor.switch.on': 'On',
+    'editor.tags.add': 'Add tag...',
+    /** The two letters beside the position of a point in a picture: how far across, and how far down. */
+    'editor.position.x': 'X:',
+    'editor.position.y': 'Y:',
+    /** The buttons of the nine places on a screen; `{position}` is one of the names below. */
+    'editor.fixedPosition.set': 'Set position to {position}',
+    'editor.fixedPosition.topLeft': 'top-left',
+    'editor.fixedPosition.topCenter': 'top-center',
+    'editor.fixedPosition.topRight': 'top-right',
+    'editor.fixedPosition.centerLeft': 'center-left',
+    'editor.fixedPosition.centerCenter': 'center-center',
+    'editor.fixedPosition.centerRight': 'center-right',
+    'editor.fixedPosition.bottomLeft': 'bottom-left',
+    'editor.fixedPosition.bottomCenter': 'bottom-center',
+    'editor.fixedPosition.bottomRight': 'bottom-right',
+    /** The corners of a box: the name of the group, of each of the four boxes, and of the lock between them. */
+    'editor.corners.group': 'Corner radius',
+    'editor.corners.topLeft': 'Top left corner radius',
+    'editor.corners.topRight': 'Top right corner radius',
+    'editor.corners.bottomLeft': 'Bottom left corner radius',
+    'editor.corners.bottomRight': 'Bottom right corner radius',
+    'editor.corners.lock': 'Lock corner radius values',
+    'editor.corners.unlock': 'Unlock corner radius values',
+    // ===== The text box =====
+    'editor.textArea.toolbar': 'Text formatting toolbar',
+    'editor.textArea.toggleBold': 'Toggle bold',
+    'editor.textArea.toggleItalic': 'Toggle italic',
+    'editor.textArea.toggleUnderline': 'Toggle underline',
+    'editor.textArea.toggleLink': 'Toggle link',
+    'editor.textArea.text': 'Text',
+    'editor.textArea.paragraph': 'Paragraph',
+    'editor.textArea.heading1': 'H1',
+    'editor.textArea.heading2': 'H2',
+    'editor.textArea.heading3': 'H3',
+    'editor.textArea.bulletList': 'Bullet List',
+    'editor.textArea.numberedList': 'Numbered List',
+    'editor.textArea.checkList': 'Check List',
+    /** The name a screen reader gives the list of text styles (paragraph, headings) when its menu is open. */
+    'editor.textArea.textStyles': 'Text styles',
+    /** The name a screen reader gives the list of list styles (bullets, numbers, checks) when its menu is open. */
+    'editor.textArea.listStyles': 'List styles',
+    /** The question the browser asks when a link is added. */
+    'editor.textArea.enterUrl': 'Enter URL',
+    // ===== Words the editor adds to the widget's own schema =====
+    'editor.schema.subtitleFont': 'Subtitle Font'
+};

package/dist/i18n/translate.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The English `t` of the editor, for code that has no component around it (the controller of the composition editor makes
+ * its sentences with it until the page gives another translator). The editor's screens get their words, in the page's
+ * language, from `useEditorLanguage` (see `language.ts`).
+ */
+export declare const translateEnglish: any;

package/dist/i18n/translate.js

@@ -0,0 +1,8 @@
+import { createI18n } from '@widgetic/design-system/i18n';
+import { EDITOR_MESSAGES } from './messages.js';
+/**
+ * The English `t` of the editor, for code that has no component around it (the controller of the composition editor makes
+ * its sentences with it until the page gives another translator). The editor's screens get their words, in the page's
+ * language, from `useEditorLanguage` (see `language.ts`).
+ */
+export const { translateEnglish } = createI18n({ catalog: EDITOR_MESSAGES, label: 'Editor' });

package/dist/index.d.ts

@@ -5,3 +5,7 @@ export { default as WidgetPreview } from './components/WidgetPreview.svelte';
 export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
 export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';
 export { default as EmbedEditor } from './components/editors/EmbedEditor.svelte';
+export { default as CompositionEditorApp } from './components/editors/CompositionEditorApp.svelte';
+export { CompositionApiError, createCompositionApi, type CompositionApi, type CompositionApiOptions, type CompositionPreviewInfo, type SaveCompositionBody, type TokenReason } from './composition/compositionApi.js';
+export { failureMessage, type CompositionEditorEvent, type CompositionEditorState, type DeviceView, type EditorFailure } from './composition/compositionEditorController.js';
+export { EDITOR_MESSAGES, ALL_EDITOR_MESSAGES, checkEditorMessages, provideEditorLanguage, useEditorLanguage, type EditorLanguage, type EditorLanguageHandle, type EditorMessageKey } from './i18n/index.js';

package/dist/index.js

@@ -8,3 +8,11 @@ export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
 export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';
 // Embed Editor
 export { default as EmbedEditor } from './components/editors/EmbedEditor.svelte';
+// Composition Editor: one Widgetic composition, loaded, edited beside a live preview, and saved through the API.
+export { default as CompositionEditorApp } from './components/editors/CompositionEditorApp.svelte';
+export { CompositionApiError, createCompositionApi } from './composition/compositionApi.js';
+export { failureMessage } from './composition/compositionEditorController.js';
+// The words of the editor, in the language of the page: the catalog of English messages, a check for a page's own
+// messages, and what a host that mounts PropsEditor, EmbedEditor or WidgetPreview on their own gives them (the composition
+// editor does it for itself, from its `locale` and `messages`).
+export { EDITOR_MESSAGES, ALL_EDITOR_MESSAGES, checkEditorMessages, provideEditorLanguage, useEditorLanguage } from './i18n/index.js';

package/dist/mediaLibraryContext.d.ts

@@ -0,0 +1,10 @@
+import type { MediaLibraryProvider } from '@widgetic/file-browser';
+/** Gives the current media library, or `undefined` for the File Browser's own (Widgetic account) storage. */
+export type MediaLibraryGetter = () => MediaLibraryProvider | undefined;
+/** Called while an editor component is being created: everything below it can reach the library with {@link useEditorMediaLibrary}. */
+export declare function provideEditorMediaLibrary(getMediaLibrary: MediaLibraryGetter): void;
+/**
+ * Called while a component is being created. Gives the function that tells which media library the editor above it was
+ * given. Outside an editor (a control used on its own) it always gives `undefined`, as the File Browser did before.
+ */
+export declare function useEditorMediaLibrary(): MediaLibraryGetter;

package/dist/mediaLibraryContext.js

@@ -0,0 +1,30 @@
+/**
+ * Hands the File Browser's media library from the editor down to the file controls inside it.
+ *
+ * `PropsEditor` is given a `mediaLibrary` (a partner's own storage, for instance). The file control
+ * (`BrowserInputController`) sits several components below it and is created from a schema, so passing the library
+ * as a prop through every layer would mean threading it through the controller renderer too. A Svelte context
+ * reaches it directly, and stays separate for each editor on a page.
+ *
+ * What is stored is a function that reads the editor's `mediaLibrary` prop, not the library itself.
+ */
+import { getContext, setContext } from 'svelte';
+const MEDIA_LIBRARY_CONTEXT_KEY = Symbol.for('widgetic.editor.mediaLibrary');
+/** Called while an editor component is being created: everything below it can reach the library with {@link useEditorMediaLibrary}. */
+export function provideEditorMediaLibrary(getMediaLibrary) {
+    setContext(MEDIA_LIBRARY_CONTEXT_KEY, getMediaLibrary);
+}
+/**
+ * Called while a component is being created. Gives the function that tells which media library the editor above it was
+ * given. Outside an editor (a control used on its own) it always gives `undefined`, as the File Browser did before.
+ */
+export function useEditorMediaLibrary() {
+    try {
+        return getContext(MEDIA_LIBRARY_CONTEXT_KEY) ?? (() => undefined);
+    }
+    catch (error) {
+        // getContext only works while a component is being created; anywhere else there is no editor above to ask.
+        console.warn('[editor] useEditorMediaLibrary was called outside a component; using the default media library', error);
+        return () => undefined;
+    }
+}

package/dist/utils/FontManager.d.ts

@@ -32,6 +32,8 @@ declare class FontManager {
     private static readonly WAIT_TIME;
     private static instance;
     private loadedFonts;
+    private addedHeadElements;
+    private pageWasReleased;
     private observers;
     private scrollTimeout;
     private apiKey;
@@ -49,9 +51,6 @@ declare class FontManager {
     private static readonly CACHE_KEY;
     private static readonly CACHE_DURATION;
     private static readonly LOADED_FONTS_KEY;
-    private static readonly LEGACY_CACHE_KEY;
-    private static readonly LEGACY_LOADED_FONTS_KEY;
-    private static readonly CACHE_CONTROL;
     private visibleFonts;
     private static initialPreloadComplete;
     private static preloadPromise;
@@ -106,7 +105,7 @@ declare class FontManager {
      */
     getPreInitializedObserver(): IntersectionObserver | null;
     /**
-     * Loads previously cached fonts from the durable L1 store (legacy localStorage fallback)
+     * Loads previously cached fonts from the durable L1 store
      */
     private loadCachedFonts;
     /**
@@ -121,6 +120,23 @@ declare class FontManager {
      * Checks if a font is available in Google Fonts
      */
     private isGoogleFont;
+    /**
+     * Puts an element in the page's <head> and remembers it, so that it can be taken away again
+     * ({@link removeAddedHeadElements}): the editor can be on somebody else's page, which it should leave as it found it.
+     */
+    private addToHead;
+    /**
+     * Takes out of the page's <head> everything this manager put there (the stylesheets of the fonts, their preload
+     * hints and the connection hint), and forgets which fonts were loaded, because they are not any more. The next
+     * font to be asked for puts its stylesheet back. The page's own links are never touched: only what was added here
+     * is removed.
+     */
+    removeAddedHeadElements(): void;
+    /**
+     * Leaves the page as the editor found it as far as fonts go. Meant for when the editor is taken away; does nothing
+     * if no font was ever asked for.
+     */
+    static releasePageResources(): void;
     /**
      * Inserts a font stylesheet into the document
      * @param family - Font family name
@@ -161,7 +177,7 @@ declare class FontManager {
      */
     private saveFontListToCache;
     /**
-     * Gets font list from the durable L1 cache (legacy localStorage fallback)
+     * Gets font list from the durable L1 cache
      */
     private getFontListFromCache;
     /**