@widgetic/editor 4.0.11 → 4.1.0

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

@@ -8,3 +8,4 @@ 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

@@ -12,3 +12,7 @@ export { default as EmbedEditor } from './components/editors/EmbedEditor.svelte'
 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/utils/dockPlacement.d.ts

@@ -0,0 +1,12 @@
+import type { TextDirection } from '@widgetic/design-system/components/textDirection';
+/**
+ * The `left` (in pixels, from the left edge of the editor's area) of a box that starts `startLeft` from the left edge of a
+ * left to right screen and is `width` wide, on the screen as it is read.
+ *
+ * On a left to right screen it is `startLeft` itself. On a right to left screen it is the box in the mirror: the box starts
+ * the same distance from the right edge, so what sat left of the middle sits right of it, with the same gap.
+ *
+ * The settings editor and the preview float over the editor's area and are put in place in pixels, because they can be
+ * dragged and resized. The mirror is made here, once, when they are docked, so nothing else about them has to know the direction.
+ */
+export declare function leftOnThisScreen(direction: TextDirection, startLeft: number, width: number, areaWidth: number): number;

package/dist/utils/dockPlacement.js

@@ -0,0 +1,13 @@
+/**
+ * The `left` (in pixels, from the left edge of the editor's area) of a box that starts `startLeft` from the left edge of a
+ * left to right screen and is `width` wide, on the screen as it is read.
+ *
+ * On a left to right screen it is `startLeft` itself. On a right to left screen it is the box in the mirror: the box starts
+ * the same distance from the right edge, so what sat left of the middle sits right of it, with the same gap.
+ *
+ * The settings editor and the preview float over the editor's area and are put in place in pixels, because they can be
+ * dragged and resized. The mirror is made here, once, when they are docked, so nothing else about them has to know the direction.
+ */
+export function leftOnThisScreen(direction, startLeft, width, areaWidth) {
+    return direction === 'rtl' ? areaWidth - startLeft - width : startLeft;
+}

package/dist/utils/fieldDirection.d.ts

@@ -0,0 +1,13 @@
+import { type TextDirection } from '@widgetic/design-system/components/textDirection';
+/**
+ * The `dir` of the value of a single-line field on a screen that is read in `screenDirection`:
+ * - an address (an email, a link): left to right on a right to left screen, nothing on a left to right one;
+ * - text a person types: read by its own first letter on a right to left screen (`auto`), nothing on a left to right one.
+ *   While the field is empty there is no first letter, and `auto` then reads left to right even on a right to left screen,
+ *   which would put the hint of the field (and the caret) at its left edge: an empty field takes the direction of the screen.
+ *
+ * A left to right screen is written no attribute at all, as it always was.
+ *
+ * @param hasValue Whether anything is typed in the field yet (default: yes).
+ */
+export declare function directionOfFieldValue(fieldType: string | undefined, screenDirection: TextDirection, hasValue?: boolean): 'auto' | 'ltr' | undefined;

package/dist/utils/fieldDirection.js

@@ -0,0 +1,25 @@
+import { dirForUserText } from '@widgetic/design-system/components/textDirection';
+/**
+ * The kinds of field whose value is an address, which is read left to right on every screen.
+ *
+ * The `type` a field is given is the name of its kind in the schema (`textInput` for a plain text field, `email`, `url`), not
+ * an HTML type, so only these two are addresses and everything else is text a person types. (A first version took `text` for
+ * the only text and read every field of a schema as an address: what a visitor typed in Arabic was set from the left.)
+ */
+const ADDRESS_FIELD_TYPES = new Set(['email', 'url']);
+/**
+ * The `dir` of the value of a single-line field on a screen that is read in `screenDirection`:
+ * - an address (an email, a link): left to right on a right to left screen, nothing on a left to right one;
+ * - text a person types: read by its own first letter on a right to left screen (`auto`), nothing on a left to right one.
+ *   While the field is empty there is no first letter, and `auto` then reads left to right even on a right to left screen,
+ *   which would put the hint of the field (and the caret) at its left edge: an empty field takes the direction of the screen.
+ *
+ * A left to right screen is written no attribute at all, as it always was.
+ *
+ * @param hasValue Whether anything is typed in the field yet (default: yes).
+ */
+export function directionOfFieldValue(fieldType, screenDirection, hasValue = true) {
+    if (fieldType && ADDRESS_FIELD_TYPES.has(fieldType.toLowerCase()))
+        return screenDirection === 'rtl' ? 'ltr' : undefined;
+    return hasValue ? dirForUserText(screenDirection) : undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.0.11",
+	"version": "4.1.0",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -36,7 +36,7 @@
 		"dev-sv": "NODE_ENV=development vite dev --port 5180",
 		"dev-open": "npm run dev -- --open",
 		"render-build": "bash render-build.sh",
-		"build": "npm run sync-embed-schema && NODE_ENV=production vite build",
+		"build": "npm run sync-embed-schema && NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 vite build",
 		"package": "svelte-package",
 		"package:watch": "svelte-package --watch",
 		"preview": "vite preview",