@widgetic/editor 4.0.11 → 4.1.0

package/dist/components/ic/shared/RecentItemsSection.svelte

@@ -13,9 +13,14 @@
   // Import Check icon from design system
   import { Check } from '@widgetic/design-system/icons';
   import icTrash from '../../../assets/icons/ic-browser/trash.svg?url';
-  
+  import { useEditorLanguage } from '../../../i18n/language';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
+
   export let recentItems: any[] = [];
-  export let title = "Recently used";
+  /** The title of the section. Without one, the editor's own word, in the language of the page. */
+  export let title: string | undefined = undefined;
   export let onItemSelect: (item: any) => void;
   export let onItemDelete: (item: any, event: Event) => void;
   export let isItemSelected: (item: any) => boolean;
@@ -36,7 +41,7 @@
 
 {#if recentItems.length > 0}
   <div class="px-4 pt-4 pb-4 widgetic-colors">
-    <h5 class="subtext text-grey7">{title}</h5>
+    <h5 class="subtext text-grey7">{title ?? $t('editor.list.recentlyUsed')}</h5>
     
     {#if displayMode === 'list'}
       <div class="grid grid-cols-1">
@@ -59,7 +64,7 @@
               data-item={getItemKey(item)}
             >
               <div class="flex items-center flex-1 min-w-0 group">
-                <Check class="mr-2 h-6 w-6 flex-shrink-0 {selected ? 'text-white' : 'text-sage-green opacity-0'}"/>
+                <Check class="me-2 h-6 w-6 flex-shrink-0 {selected ? 'text-white' : 'text-sage-green opacity-0'}"/>
                 <div class="flex-1 overflow-hidden">
                   {#if typeof renderedItem === 'string'}
                     <span class="text-[24px]">{renderedItem}</span>
@@ -78,7 +83,7 @@
                       onItemDelete(item, e);
                     }}
                   >
-                    <img src={icTrash} alt="Delete" class="w-4 h-4" />
+                    <img src={icTrash} alt={$t('editor.list.deleteItem')} class="w-4 h-4" />
                   </button>
                 {/if}
               </div>
@@ -97,7 +102,7 @@
               data-item={getItemKey(item)}
             >
               <div class="flex items-center flex-1 min-w-0 group">
-                <Check class="mr-2 h-6 w-6 flex-shrink-0 {selected ? 'text-white' : 'text-sage-green opacity-0'}"/>
+                <Check class="me-2 h-6 w-6 flex-shrink-0 {selected ? 'text-white' : 'text-sage-green opacity-0'}"/>
                 <div class="flex-1 overflow-hidden">
                   {#if typeof renderedItem === 'string'}
                     <span class="text-[24px]">{renderedItem}</span>
@@ -116,7 +121,7 @@
                       onItemDelete(item, e);
                     }}
                   >
-                    <img src={icTrash} alt="Delete" class="w-4 h-4" />
+                    <img src={icTrash} alt={$t('editor.list.deleteItem')} class="w-4 h-4" />
                   </button>
                 {/if}
               </div>
@@ -157,14 +162,14 @@
                 {#if isCustomItem(item) && !hideTrashIcon}
                   <button 
                     type="button"
-                    class="absolute top-1 right-1 p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors bg-white"
+                    class="absolute top-1 end-1 p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors bg-white"
                     tabindex="-1"
                     onclick={(e) => {
                       e.stopPropagation();
                       onItemDelete(item, e);
                     }}
                   >
-                    <img src={icTrash} alt="Delete" class="w-3 h-3" />
+                    <img src={icTrash} alt={$t('editor.list.deleteItem')} class="w-3 h-3" />
                   </button>
                 {/if}
               </div>
@@ -195,14 +200,14 @@
                 {#if isCustomItem(item) && !hideTrashIcon}
                   <button 
                     type="button"
-                    class="absolute top-1 right-1 p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors bg-white"
+                    class="absolute top-1 end-1 p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors bg-white"
                     tabindex="-1"
                     onclick={(e) => {
                       e.stopPropagation();
                       onItemDelete(item, e);
                     }}
                   >
-                    <img src={icTrash} alt="Delete" class="w-3 h-3" />
+                    <img src={icTrash} alt={$t('editor.list.deleteItem')} class="w-3 h-3" />
                   </button>
                 {/if}
               </div>

package/dist/components/ic/shared/RecentItemsSection.svelte.d.ts

@@ -13,7 +13,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const RecentItemsSection: $$__sveltets_2_IsomorphicComponent<{
     recentItems?: any[];
-    title?: string;
+    /** The title of the section. Without one, the editor's own word, in the language of the page. */ title?: string | undefined;
     onItemSelect: (item: any) => void;
     onItemDelete: (item: any, event: Event) => void;
     isItemSelected: (item: any) => boolean;

package/dist/composition/compositionEditorController.d.ts

@@ -25,6 +25,8 @@
  *     the size of the widget embedded on a site).
  *   - After `dispose()` nothing more happens: no request goes out, and answers still on their way are ignored.
  */
+import type { Translate } from '@widgetic/design-system/i18n';
+import type { EditorMessageKey } from '../i18n/messages.js';
 import type { CompositionApi } from './compositionApi.js';
 import { type JsonRecord } from './compositionHelpers.js';
 /** Time to wait after the last edit before saving by itself. */
@@ -140,16 +142,23 @@ export interface CompositionEditorOptions {
     onPreviewMessage?: (message: PreviewMessage) => void;
     /** Writes the editor's own notes (a failure worth knowing about). Default: the console. */
     logger?: Pick<Console, 'warn' | 'error'>;
+    /**
+     * Says the editor's own sentences (why there is no preview, why there is nothing to edit) in the page's language.
+     * A sentence is made when what it tells happens, and stays in the language it was made in until it is replaced.
+     * Default: English.
+     */
+    translate?: Translate<EditorMessageKey>;
 }
 /** What went wrong, from whatever was thrown. */
 export declare function describeFailure(error: unknown): EditorFailure;
-/** A failure in words for the person using the editor. */
-export declare function failureMessage(failure: EditorFailure, doing: 'load' | 'save'): string;
+/** A failure in words for the person using the editor, in the language of `translate` (English when it is left out). */
+export declare function failureMessage(failure: EditorFailure, doing: 'load' | 'save', translate?: Translate<EditorMessageKey>): string;
 export declare class CompositionEditorController {
     private readonly options;
     private readonly timers;
     private readonly now;
     private readonly logger;
+    private readonly translate;
     private readonly autosaveDelayMs;
     private readonly autosaveRetryDelaysMs;
     private readonly abortController;

package/dist/composition/compositionEditorController.js

@@ -25,6 +25,7 @@
  *     the size of the widget embedded on a site).
  *   - After `dispose()` nothing more happens: no request goes out, and answers still on their way are ignored.
  */
+import { translateEnglish } from '../i18n/translate.js';
 import { buildPropsEditorContentSchema, compositionWidgetId, contentItemsToEditorValueMap, ensureSubtitleFontInDesignSchema, extractContentItemsFromCompositionRaw, extractContentValuesFromCompositionRaw, flattenContentItemsForPreview, flattenDesignValuesForPreview, getCompositionEmbedSettings, mergeContentItemsWithSchema, mergeMissingContentValues, normalizeContentSchemaFromApiResponse, normalizeDesignSchemaFromApiResponse, parseEmbedDimension, seedMissingFontFaces } from './compositionHelpers.js';
 /** Time to wait after the last edit before saving by itself. */
 export const DEFAULT_AUTOSAVE_DELAY_MS = 2500;
@@ -50,6 +51,8 @@ function isCompositionApiError(error) {
         typeof candidate?.code === 'string' &&
         typeof candidate?.status === 'number');
 }
+/** What a failure says when whatever was thrown said nothing. It is for the page's code, not for the person using the editor (see `failureMessage`). */
+const GENERIC_FAILURE_MESSAGE = 'Something went wrong.';
 /** What went wrong, from whatever was thrown. */
 export function describeFailure(error) {
     if (isCompositionApiError(error)) {
@@ -63,43 +66,48 @@ export function describeFailure(error) {
         };
     }
     return {
-        message: error instanceof Error && error.message ? error.message : 'Something went wrong.',
+        message: error instanceof Error && error.message ? error.message : GENERIC_FAILURE_MESSAGE,
         code: 'UNKNOWN',
         status: 0,
         retryable: false,
         sessionEnded: false
     };
 }
-/** A failure in words for the person using the editor. */
-export function failureMessage(failure, doing) {
+/** A failure in words for the person using the editor, in the language of `translate` (English when it is left out). */
+export function failureMessage(failure, doing, translate = translateEnglish) {
     if (failure.code === 'WIDGET_NOT_PUBLISHED')
-        return 'Publish the widget before editing a composition.';
+        return translate('editor.failure.widgetNotPublished');
+    if (failure.code === 'COMPOSITION_HAS_NO_WIDGET')
+        return translate('editor.failure.noWidget');
     if (failure.sessionEnded) {
         return doing === 'save'
-            ? 'Your session has ended, so your changes could not be saved. Reload the page to continue.'
-            : 'Your session has ended. Reload the page to continue.';
+            ? translate('editor.failure.sessionEndedWhileSaving')
+            : translate('editor.failure.sessionEnded');
     }
     if (failure.status === 404)
-        return 'This composition could not be found.';
+        return translate('editor.failure.compositionNotFound');
     if (failure.status === 403)
-        return 'You do not have access to this composition.';
+        return translate('editor.failure.noAccess');
     if (failure.retryable) {
         return doing === 'save'
-            ? 'Your changes could not be saved. Check the connection and try again.'
-            : 'The editor could not be loaded. Check the connection and try again.';
-    }
-    return (failure.message ||
-        (doing === 'save' ? 'Your changes could not be saved.' : 'The editor could not be loaded.'));
+            ? translate('editor.failure.saveNeedsConnection')
+            : translate('editor.failure.loadNeedsConnection');
+    }
+    // What the API said is shown as it came. What the editor said for it ("Something went wrong.") is not: that sentence
+    // is English, so the person is told in their own language that the editor could not do what it was asked.
+    const apiMessage = failure.message === GENERIC_FAILURE_MESSAGE ? '' : failure.message;
+    return (apiMessage ||
+        (doing === 'save' ? translate('editor.failure.saveFailed') : translate('editor.failure.loadFailed')));
 }
 /** A refusal that makes every other answer worthless: the session is over, or it may not see this composition. */
 function refusesAccess(failure) {
     return failure.sessionEnded || failure.status === 403;
 }
 /** Why there is no preview, in words for a person. */
-function previewFailureMessage(failure) {
+function previewFailureMessage(failure, translate) {
     if (failure.status === 404)
-        return 'The widget this composition is made with could not be found.';
-    return failureMessage(failure, 'load');
+        return translate('editor.failure.widgetNotFound');
+    return failureMessage(failure, 'load', translate);
 }
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -122,6 +130,7 @@ export class CompositionEditorController {
     timers;
     now;
     logger;
+    translate;
     autosaveDelayMs;
     autosaveRetryDelaysMs;
     abortController = new AbortController();
@@ -156,6 +165,7 @@ export class CompositionEditorController {
         };
         this.now = options.now ?? Date.now;
         this.logger = options.logger ?? console;
+        this.translate = options.translate ?? translateEnglish;
         this.autosaveDelayMs = options.autosaveDelayMs ?? DEFAULT_AUTOSAVE_DELAY_MS;
         this.autosaveRetryDelaysMs = options.autosaveRetryDelaysMs ?? DEFAULT_AUTOSAVE_RETRY_DELAYS_MS;
         this.state = {
@@ -295,7 +305,7 @@ export class CompositionEditorController {
             name: String(composition.name || 'Untitled Composition'),
             widgetId,
             preview,
-            previewError: previewFailure ? previewFailureMessage(previewFailure) : null,
+            previewError: previewFailure ? previewFailureMessage(previewFailure, this.translate) : null,
             designSchema: schemas.designSchema,
             contentSchema: schemas.contentSchema,
             schemasLoading: false,
@@ -334,7 +344,7 @@ export class CompositionEditorController {
         // Either schema may be missing, but not both.
         const designSchema = designFailure
             ? (previous?.designSchema ?? null)
-            : ensureSubtitleFontInDesignSchema(normalizeDesignSchemaFromApiResponse(valueOf(designResult)));
+            : ensureSubtitleFontInDesignSchema(normalizeDesignSchemaFromApiResponse(valueOf(designResult)), this.translate('editor.schema.subtitleFont'));
         const contentSchema = contentFailure
             ? (previous?.contentSchema ?? null)
             : normalizeContentSchemaFromApiResponse(valueOf(contentResult));
@@ -342,8 +352,8 @@ export class CompositionEditorController {
         let schemasError = null;
         if (!designSchema && !contentSchema) {
             schemasError = failure
-                ? 'The editor settings could not be loaded. Try again.'
-                : 'No editable settings found. Generate and publish the widget first.';
+                ? this.translate('editor.failure.settingsLoadFailed')
+                : this.translate('editor.failure.noSettings');
         }
         return { designSchema, contentSchema, schemasError, failure };
     }
@@ -355,7 +365,9 @@ export class CompositionEditorController {
             type: 'error',
             during: 'schemas',
             failure: schemas.failure ?? {
-                message: schemas.schemasError,
+                // For the page's code (a log, a report), not for the person using the editor: it stays English, like what
+                // the API says, however the page set the language. The person is told `schemasError`.
+                message: translateEnglish('editor.failure.noSettings'),
                 code: 'NO_EDITABLE_SETTINGS',
                 status: 0,
                 retryable: false,

package/dist/composition/compositionHelpers.d.ts

@@ -31,8 +31,10 @@ export declare function normalizeDesignSchemaFromApiResponse(designResponse: unk
  * Gives a design schema that has a title font but no subtitle font a subtitle font beside the title's (a copy of
  * it), so widgets that read `subtitleFont` can be edited. A schema that already has one, or has no title font to
  * copy, is returned as it is.
+ *
+ * `description` is what the new font is called on the screen: the editor's own word, so the page's language can give it.
  */
-export declare function ensureSubtitleFontInDesignSchema(schema: unknown): unknown;
+export declare function ensureSubtitleFontInDesignSchema(schema: unknown, description?: string): unknown;
 /** The content schema as the editor draws it, or `null` when there is none. */
 export declare function normalizeContentSchemaFromApiResponse(contentResponse: unknown): any;
 /**

package/dist/composition/compositionHelpers.js

@@ -66,8 +66,10 @@ export function normalizeDesignSchemaFromApiResponse(designResponse) {
  * Gives a design schema that has a title font but no subtitle font a subtitle font beside the title's (a copy of
  * it), so widgets that read `subtitleFont` can be edited. A schema that already has one, or has no title font to
  * copy, is returned as it is.
+ *
+ * `description` is what the new font is called on the screen: the editor's own word, so the page's language can give it.
  */
-export function ensureSubtitleFontInDesignSchema(schema) {
+export function ensureSubtitleFontInDesignSchema(schema, description = 'Subtitle Font') {
     if (!schema)
         return schema;
     try {
@@ -96,7 +98,7 @@ export function ensureSubtitleFontInDesignSchema(schema) {
             ...structuredClone(titleProp),
             id: 'subtitleFont',
             name: 'subtitleFont',
-            description: 'Subtitle Font'
+            description
         };
         const titleIndex = firstComponent.properties.findIndex((prop) => (prop?.name || prop?.id) ===
             (titleProp.name ||

package/dist/i18n/index.d.ts

@@ -0,0 +1,4 @@
+export { EDITOR_MESSAGES, type EditorMessageKey } from './messages.js';
+export { ALL_EDITOR_MESSAGES, EDITOR_CATALOGS, checkEditorMessages, provideEditorLanguage, useEditorLanguage, type EditorLanguage, type EditorLanguageHandle } from './language.js';
+export { translateEnglish } from './translate.js';
+export { categoryLabel, fixedPositionLabel, fontWeightLabel } from './labels.js';

package/dist/i18n/index.js

@@ -0,0 +1,4 @@
+export { EDITOR_MESSAGES } from './messages.js';
+export { ALL_EDITOR_MESSAGES, EDITOR_CATALOGS, checkEditorMessages, provideEditorLanguage, useEditorLanguage } from './language.js';
+export { translateEnglish } from './translate.js';
+export { categoryLabel, fixedPositionLabel, fontWeightLabel } from './labels.js';

package/dist/i18n/labels.d.ts

@@ -0,0 +1,15 @@
+import type { Translate } from '@widgetic/design-system/i18n';
+import type { EditorMessageKey } from './messages.js';
+/**
+ * Some things the editor keeps by an English name (the tab "Sans Serif" that was last open, the weight "Bold Italic" that
+ * is saved with a font) and shows to a person by a name in their language. The name that is kept does not change with the
+ * language: these functions only turn it into what is shown, and show a name they do not know as it is.
+ */
+type Translator = Translate<EditorMessageKey>;
+/** The tab of a list of fonts or vectors, by the name the list keeps it under ("Sans Serif"). */
+export declare function categoryLabel(category: string, t: Translator): string;
+/** A weight of a font, by the name that is saved ("Bold", "Medium Italic", "Italic"). A name the editor does not know is shown as it is. */
+export declare function fontWeightLabel(weight: string, t: Translator): string;
+/** The name of one of the nine places on a screen, by the name the widget keeps it under ("top-left"). */
+export declare function fixedPositionLabel(position: string, t: Translator): string;
+export {};

package/dist/i18n/labels.js

@@ -0,0 +1,57 @@
+/** `own[name]`, only when `name` is the table's own entry (a weight called "constructor" is not a method of the table). */
+function ownEntry(table, name) {
+    return Object.prototype.hasOwnProperty.call(table, name) ? table[name] : undefined;
+}
+const CATEGORY_KEYS = {
+    All: 'editor.category.all',
+    Mine: 'editor.category.mine',
+    'Sans Serif': 'editor.category.sansSerif',
+    Serif: 'editor.category.serif',
+    Script: 'editor.category.script',
+    Other: 'editor.category.other',
+    Icons: 'editor.category.icons',
+    Emojis: 'editor.category.emojis',
+    Clipart: 'editor.category.clipart'
+};
+/** The tab of a list of fonts or vectors, by the name the list keeps it under ("Sans Serif"). */
+export function categoryLabel(category, t) {
+    const key = ownEntry(CATEGORY_KEYS, category);
+    return key ? t(key) : category;
+}
+const WEIGHT_KEYS = {
+    Thin: 'editor.fontWeight.thin',
+    ExtraLight: 'editor.fontWeight.extraLight',
+    Light: 'editor.fontWeight.light',
+    Regular: 'editor.fontWeight.regular',
+    Medium: 'editor.fontWeight.medium',
+    SemiBold: 'editor.fontWeight.semiBold',
+    Bold: 'editor.fontWeight.bold',
+    ExtraBold: 'editor.fontWeight.extraBold',
+    Black: 'editor.fontWeight.black'
+};
+/** A weight of a font, by the name that is saved ("Bold", "Medium Italic", "Italic"). A name the editor does not know is shown as it is. */
+export function fontWeightLabel(weight, t) {
+    if (weight === 'Italic')
+        return t('editor.fontWeight.italic');
+    const italic = /^(\S+) Italic$/.exec(weight);
+    const baseKey = ownEntry(WEIGHT_KEYS, italic ? italic[1] : weight);
+    if (!baseKey)
+        return weight;
+    return italic ? t('editor.fontWeight.withItalic', { weight: t(baseKey) }) : t(baseKey);
+}
+const POSITION_KEYS = {
+    'top-left': 'editor.fixedPosition.topLeft',
+    'top-center': 'editor.fixedPosition.topCenter',
+    'top-right': 'editor.fixedPosition.topRight',
+    'center-left': 'editor.fixedPosition.centerLeft',
+    'center-center': 'editor.fixedPosition.centerCenter',
+    'center-right': 'editor.fixedPosition.centerRight',
+    'bottom-left': 'editor.fixedPosition.bottomLeft',
+    'bottom-center': 'editor.fixedPosition.bottomCenter',
+    'bottom-right': 'editor.fixedPosition.bottomRight'
+};
+/** The name of one of the nine places on a screen, by the name the widget keeps it under ("top-left"). */
+export function fixedPositionLabel(position, t) {
+    const key = ownEntry(POSITION_KEYS, position);
+    return key ? t(key) : position;
+}

package/dist/i18n/language.d.ts

@@ -0,0 +1,228 @@
+import { SHAD_EDITOR_MESSAGES } from '@widgetic/design-system/shad-editor';
+export type { EditorCatalogs, EditorLanguage, EditorLanguageHandle } from './languageKit.js';
+/**
+ * The language of an editor on a page. The editor has two packages inside it (the File Browser that picks a file, and
+ * the rich text editor of the text boxes), each with its own catalog; a page gives ONE flat `messages` object and the
+ * editor hands each package the keys that are its own. See `languageKit.ts` for how, and for what a test can swap.
+ */
+/** The catalogs of the editor and of the packages inside it. A key belongs to one of them. */
+export declare const EDITOR_CATALOGS: {
+    readonly editor: {
+        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.";
+        readonly 'editor.failure.errorCode': "Error code: {code}";
+        readonly 'editor.props.title': "Edit Properties";
+        readonly 'editor.props.designTab': "Design";
+        readonly 'editor.props.contentTab': "Content";
+        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";
+        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";
+        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";
+        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";
+        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";
+        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";
+        readonly 'editor.font.weightList': "Font weights";
+        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";
+        readonly 'editor.date.calendarLabel': "Date";
+        readonly 'editor.date.rangeCalendarLabel': "Date range";
+        readonly 'editor.date.previousMonth': "Previous month";
+        readonly 'editor.date.nextMonth': "Next month";
+        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...";
+        readonly 'editor.position.x': "X:";
+        readonly 'editor.position.y': "Y:";
+        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";
+        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";
+        readonly 'editor.textArea.textStyles': "Text styles";
+        readonly 'editor.textArea.listStyles': "List styles";
+        readonly 'editor.textArea.enterUrl': "Enter URL";
+        readonly 'editor.schema.subtitleFont': "Subtitle Font";
+    };
+    readonly fileBrowser: any;
+    readonly shadEditor: any;
+};
+/** Every message of the editor and of the packages inside it, as one catalog: what a page's `messages` may have a key of. */
+export declare const ALL_EDITOR_MESSAGES: Readonly<Record<string, string>>;
+/**
+ * Checks a page's `messages` against all the editor's catalogs without showing anything: a key that does not exist (with
+ * the nearest real one), a value that is not text, a template that does not parse, or one that asks for a value the message
+ * is never given. An empty list means every message will be used. For a test or a build step of the page.
+ */
+export declare const checkEditorMessages: (messages: SHAD_EDITOR_MESSAGES) => SHAD_EDITOR_MESSAGES[];
+/**
+ * Called by the root component of an editor while it is created, so everything inside it speaks the page's language.
+ * The context belongs to one root component, so two editors on a page can speak two languages.
+ */
+export declare const provideEditorLanguage: (initial: SHAD_EDITOR_MESSAGES) => import("./languageKit.js").EditorLanguageHandle;
+/**
+ * Called by a part of the editor while it is created. Gives its words as stores, so a part that is already on the screen
+ * changes when the page sets the language again. Outside an editor (a control used on its own) it speaks English.
+ */
+export declare const useEditorLanguage: () => import("./languageKit.js").EditorLanguage;