@rigel-cms/rigel 1.0.0 → 1.1.0

package/src/editor/lib/MarkdownEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import { onDestroy, tick } from "svelte";
   import { EditorState, TextSelection } from "prosemirror-state";
   import { EditorView } from "prosemirror-view";
@@ -39,14 +40,14 @@
     view.focus();
   }
   const marks = [
-    { name: "Bold", icon: "textB", type: "strong" },
-    { name: "Italic", icon: "textItalic", type: "em" },
-    { name: "Code", icon: "code", type: "code" },
+    { name: "richtext.bold", icon: "textB", type: "strong" },
+    { name: "richtext.italic", icon: "textItalic", type: "em" },
+    { name: "richtext.code", icon: "code", type: "code" },
   ] as const;
   const blocks = [
-    { name: "Bullet list", icon: "listBullets", type: "bullet_list" },
-    { name: "Numbered list", icon: "listNumbers", type: "ordered_list" },
-    { name: "Quote", icon: "quotes", type: "blockquote" },
+    { name: "richtext.bulletList", icon: "listBullets", type: "bullet_list" },
+    { name: "richtext.numberedList", icon: "listNumbers", type: "ordered_list" },
+    { name: "richtext.quote", icon: "quotes", type: "blockquote" },
   ] as const;
   const format = $derived(state?.selection.$from.parent.type.name === "heading" ? `h${state.selection.$from.parent.attrs.level}` : state?.selection.$from.parent.type.name ?? "paragraph");
 
@@ -57,7 +58,7 @@
 
   function load(source: string) {
     const doc = parseVisualMarkdown(source);
-    warning = doc ? "" : "This Markdown contains formatting the visual editor cannot safely preserve. Edit the original source below; nothing has been converted.";
+    warning = doc ? "" : $t("richtext.unsupportedMarkdown");
     if (!doc) { mode = "source"; return false; }
     state = EditorState.create({ doc, plugins: exampleSetup({ schema, menuBar: false }) });
     view?.updateState(state);
@@ -148,7 +149,7 @@
 
   function link(remove = false) {
     if (!view) return;
-    if (!remove && (!safeMarkdownUrl(linkUrl) || !linkUrl)) { linkError = "Enter a safe http, https, mailto or relative URL."; return; }
+    if (!remove && (!safeMarkdownUrl(linkUrl) || !linkUrl)) { linkError = $t("richtext.safeUrlError"); return; }
     const { from, to, empty } = view.state.selection;
     let tr = view.state.tr;
     if (empty) tr = remove ? tr.removeStoredMark(schema.marks.link) : tr.addStoredMark(schema.marks.link.create({ href: linkUrl }));
@@ -164,36 +165,36 @@
 <div class="markdown-editor body-editor">
   <div class="markdown-heading">
     <div class="field-label" id={`${id}-label`}>{label}</div>
-    <div class="markdown-modes" role="group" aria-label={`${label} editing mode`}>
-      <button type="button" aria-pressed={mode === "visual"} onclick={visual}>Visual</button>
-      <button type="button" aria-pressed={mode === "source"} onclick={() => { mode = "source"; linkOpen = false; }}>Markdown</button>
+    <div class="markdown-modes" role="group" aria-label={$t("richtext.editingMode", { label })}>
+      <button type="button" aria-pressed={mode === "visual"} onclick={visual}>{$t("richtext.visual")}</button>
+      <button type="button" aria-pressed={mode === "source"} onclick={() => { mode = "source"; linkOpen = false; }}>{$t("richtext.markdown")}</button>
     </div>
   </div>
   {#if warning}<p class="markdown-warning" role="status">{warning}</p>{/if}
   <div class="markdown-visual" hidden={mode !== "visual"}>
-    <div class="body-toolbar formatting-toolbar" role="group" aria-label={`${label} formatting`}>
-      <Select ariaLabel="Text style" data-tooltip="Text style" value={format} options={[{ value: "paragraph", label: "Paragraph" }, ...[1, 2, 3, 4, 5, 6].map(level => ({ value: `h${level}`, label: `Heading ${level}` })), { value: "code_block", label: "Code block" }].map(option => ({ ...option, disabled: !!state && format !== option.value && !formatCommand(option.value)(state) }))} onchange={next => command(formatCommand(String(next)))} />
-      <div class="format-group" role="group" aria-label="Text formatting">
+    <div class="body-toolbar formatting-toolbar" role="group" aria-label={$t("richtext.formatting", { label })}>
+      <Select ariaLabel={$t("richtext.textStyle")} data-tooltip={$t("richtext.textStyle")} value={format} options={[{ value: "paragraph", label: $t("richtext.paragraph") }, ...[1, 2, 3, 4, 5, 6].map(level => ({ value: `h${level}`, label: $t("richtext.heading", { level }) })), { value: "code_block", label: $t("richtext.codeBlock") }].map(option => ({ ...option, disabled: !!state && format !== option.value && !formatCommand(option.value)(state) }))} onchange={next => command(formatCommand(String(next)))} />
+      <div class="format-group" role="group" aria-label={$t("richtext.textFormatting")}>
         {#each marks as item}
-          <button type="button" aria-label={item.name} data-tooltip={item.name} aria-pressed={activeMark(item.type)} disabled={!state || !toggleMark(schema.marks[item.type])(state)} onmousedown={event => event.preventDefault()} onclick={() => command(toggleMark(schema.marks[item.type]))}><Icon name={item.icon} size={18} /></button>
+          <button type="button" aria-label={$t(item.name)} data-tooltip={$t(item.name)} aria-pressed={activeMark(item.type)} disabled={!state || !toggleMark(schema.marks[item.type])(state)} onmousedown={event => event.preventDefault()} onclick={() => command(toggleMark(schema.marks[item.type]))}><Icon name={item.icon} size={18} /></button>
         {/each}
       </div>
-      <div class="format-group" role="group" aria-label="Lists and quote">
+      <div class="format-group" role="group" aria-label={$t("richtext.listsAndQuote")}>
         {#each blocks as item}
-          <button type="button" aria-label={item.name} data-tooltip={item.name} aria-pressed={activeBlock(item.type)} disabled={!state || !blockCommand(item.type)(state)} onmousedown={event => event.preventDefault()} onclick={() => command(blockCommand(item.type))}><Icon name={item.icon} size={18} /></button>
+          <button type="button" aria-label={$t(item.name)} data-tooltip={$t(item.name)} aria-pressed={activeBlock(item.type)} disabled={!state || !blockCommand(item.type)(state)} onmousedown={event => event.preventDefault()} onclick={() => command(blockCommand(item.type))}><Icon name={item.icon} size={18} /></button>
         {/each}
       </div>
-      <button bind:this={linkButton} type="button" aria-label="Link" data-tooltip="Link" aria-pressed={activeMark("link")} aria-expanded={linkOpen} aria-controls={`${id}-link`} disabled={!state || !toggleMark(schema.marks.link)(state)} onmousedown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
+      <button bind:this={linkButton} type="button" aria-label={$t("richtext.link")} data-tooltip={$t("richtext.link")} aria-pressed={activeMark("link")} aria-expanded={linkOpen} aria-controls={`${id}-link`} disabled={!state || !toggleMark(schema.marks.link)(state)} onmousedown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
       <ImagePicker toolbar onopen={() => { imageSelection = view?.state.selection.getBookmark(); linkOpen = false; }} onpick={insertImage} onclose={() => { imageSelection = undefined; }} />
     </div>
     {#if linkOpen}
-      <div class="markdown-link" id={`${id}-link`} role="group" aria-label="Edit link" onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; linkButton.focus(); } if (event.key === "Enter") { event.preventDefault(); link(); } }}>
-        <label for={`${id}-url`}>Link URL</label>
+      <div class="markdown-link" id={`${id}-link`} role="group" aria-label={$t("richtext.editLink")} onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; linkButton.focus(); } if (event.key === "Enter") { event.preventDefault(); link(); } }}>
+        <label for={`${id}-url`}>{$t("richtext.linkUrl")}</label>
         <div class="markdown-link-controls">
           <input id={`${id}-url`} type="text" placeholder="https://…" bind:this={linkInput} bind:value={linkUrl} aria-invalid={!!linkError} aria-describedby={linkError ? `${id}-error` : undefined} />
-          <button type="button" aria-label="Apply link" data-tooltip="Apply link" onclick={() => link()}><Icon name="check" size={16} /></button>
-          <button type="button" aria-label="Remove link" data-tooltip="Remove link" disabled={!activeMark("link")} onclick={() => link(true)}><Icon name="linkBreak" size={16} /></button>
-          <button type="button" aria-label="Close link" data-tooltip="Close link" onclick={() => { linkOpen = false; linkButton.focus(); }}><Icon name="x" size={16} /></button>
+          <button type="button" aria-label={$t("richtext.applyLink")} data-tooltip={$t("richtext.applyLink")} onclick={() => link()}><Icon name="check" size={16} /></button>
+          <button type="button" aria-label={$t("richtext.removeLink")} data-tooltip={$t("richtext.removeLink")} disabled={!activeMark("link")} onclick={() => link(true)}><Icon name="linkBreak" size={16} /></button>
+          <button type="button" aria-label={$t("richtext.closeLink")} data-tooltip={$t("richtext.closeLink")} onclick={() => { linkOpen = false; linkButton.focus(); }}><Icon name="x" size={16} /></button>
         </div>
         {#if linkError}<p id={`${id}-error`} role="alert">{linkError}</p>{/if}
       </div>
@@ -201,6 +202,6 @@
     <div class="md-preview rich-text" bind:this={host}></div>
   </div>
   {#if mode === "source"}
-    <textarea class="mono" rows="14" aria-label={`${label} Markdown source`} value={value} oninput={(event) => { warning = ""; emit(event.currentTarget.value); }}></textarea>
+    <textarea class="mono" rows="14" aria-label={$t("richtext.markdownSource", { label })} value={value} oninput={(event) => { warning = ""; emit(event.currentTarget.value); }}></textarea>
   {/if}
 </div>

package/src/editor/lib/MediaPicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import Icon from "./Icon.svelte";
   import { tick } from "svelte";
   import ImagePicker from "./ImagePicker.svelte";
@@ -6,7 +7,7 @@
   import type { EmbedData } from "../blocks/embed";
   import type { VideoData } from "../blocks/video";
 
-  let { triggerLabel = "Insert media", hiddenTrigger = false, onimage, onvideo, onembed, onopen, onclose = () => {} }: {
+  let { triggerLabel, hiddenTrigger = false, onimage, onvideo, onembed, onopen, onclose = () => {} }: {
     triggerLabel?: string;
     hiddenTrigger?: boolean;
     onimage?: () => void;
@@ -62,10 +63,10 @@
 
 </script>
 
-{#if !hiddenTrigger}<button bind:this={trigger} data-media-trigger type="button" aria-label={triggerLabel} data-tooltip={triggerLabel} aria-haspopup="menu" popovertarget={`${id}-media`} onmousedown={event => event.preventDefault()} onclick={event => { event.preventDefault(); toggleMenu(); }}><Icon name="image" size={18} /></button>{/if}
-<div bind:this={menu} id={`${id}-media`} class="block-menu media-menu" popover role="menu" aria-label="Insert media">
-  <button type="button" role="menuitem" onclick={() => pick("image")}><Icon name="image" size={16} />Image</button>
-  <button type="button" role="menuitem" onclick={() => pick("video")}><Icon name="filmStrip" size={16} />Video</button>
+{#if !hiddenTrigger}<button bind:this={trigger} data-media-trigger type="button" aria-label={triggerLabel ?? $t("media.insertMedia")} data-tooltip={triggerLabel ?? $t("media.insertMedia")} aria-haspopup="menu" popovertarget={`${id}-media`} onmousedown={event => event.preventDefault()} onclick={event => { event.preventDefault(); toggleMenu(); }}><Icon name="image" size={18} /></button>{/if}
+<div bind:this={menu} id={`${id}-media`} class="block-menu media-menu" popover role="menu" aria-label={$t("media.insertMedia")}>
+  <button type="button" role="menuitem" onclick={() => pick("image")}><Icon name="image" size={16} />{$t("media.image")}</button>
+  <button type="button" role="menuitem" onclick={() => pick("video")}><Icon name="filmStrip" size={16} />{$t("media.video")}</button>
   <button type="button" role="menuitem" onclick={() => pick("youtube")}><Icon name="youtubeLogo" size={16} />YouTube</button>
   <button type="button" role="menuitem" onclick={() => pick("vimeo")}><Icon name="playCircle" size={16} />Vimeo</button>
 </div>

package/src/editor/lib/MenuEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import { tick } from "svelte";
   import type { MenuItem } from "../../manifest/menu";
   import { editMenuItem, menuRows, moveMenuItem } from "./menu-tree";
@@ -68,8 +69,8 @@
   function move(id: string, targetId: string | null, position: "before" | "after" | "inside") {
     try {
       oninput(moveMenuItem(items, id, targetId, position, maxDepth));
-      message = "Menu item moved";
-    } catch (error) { message = error instanceof Error ? error.message : "Cannot move item"; }
+      message = $t("fields.menuItemMoved");
+    } catch (error) { message = error instanceof Error ? error.message : $t("fields.menuCannotMoveItem"); }
     dragging = null;
     target = "";
   }
@@ -82,10 +83,10 @@
   }
   function add(parentId: string | null = null) {
     const parent = rows.find((row) => row.item.id === parentId);
-    if (parent && parent.depth >= maxDepth) { message = `Maximum ${maxDepth} levels`; return; }
-    const item: MenuItem = { id: crypto.randomUUID(), label: "New item", url: "/", children: [] };
+    if (parent && parent.depth >= maxDepth) { message = $t("fields.menuMaximumLevels", { maxDepth }); return; }
+    const item: MenuItem = { id: crypto.randomUUID(), label: $t("fields.menuNewItem"), url: "/", children: [] };
     oninput(parentId ? editMenuItem(items, parentId, (p) => ({ ...p, children: [...p.children, item] })) : [...items, item]);
-    message = "Menu item added";
+    message = $t("fields.menuItemAdded");
     void open(item.id);
   }
   function remove(item: MenuItem) {
@@ -96,70 +97,70 @@
   }
 </script>
 
-<svelte:window onpointermove={dragPointer} onpointerup={finishDrag} onpointercancel={cancelDrag} onkeydown={(event) => { if (event.key === 'Escape' && pointer) { cancelDrag(); message = 'Move cancelled'; } }} />
-<section class="menu-editor" aria-label="Menu items" bind:this={host}>
-  <nav class="menu-path" aria-label="Menu path">
-    <button type="button" data-menu-path="" onclick={() => open(null)}>Menu items</button>
+<svelte:window onpointermove={dragPointer} onpointerup={finishDrag} onpointercancel={cancelDrag} onkeydown={(event) => { if (event.key === 'Escape' && pointer) { cancelDrag(); message = $t('fields.menuMoveCancelled'); } }} />
+<section class="menu-editor" aria-label={$t("fields.menuItems")} bind:this={host}>
+  <nav class="menu-path" aria-label={$t("fields.menuPath")}>
+    <button type="button" data-menu-path="" onclick={() => open(null)}>{$t("fields.menuItems")}</button>
     {#each chain as row}
       <Icon name="caretRight" size={12} />
-      <button type="button" data-menu-path={row.item.id} aria-current={row.item.id === selectedId ? 'step' : undefined} onclick={() => open(row.item.id)}>{row.item.label || "Untitled item"}</button>
+      <button type="button" data-menu-path={row.item.id} aria-current={row.item.id === selectedId ? 'step' : undefined} onclick={() => open(row.item.id)}>{row.item.label || $t("fields.menuUntitledItem")}</button>
     {/each}
   </nav>
   <p class="menu-message" role="status" aria-live="polite">{message}</p>
   <div class="menu-panes">
     {#each panes as parent, index (parent?.item.id ?? '')}
-      <section class="menu-pane" class:active={index === panes.length - 1} data-menu-parent={parent?.item.id ?? ''} aria-label={parent ? `${parent.item.label || 'Untitled item'} details` : 'Menu items'}>
+      <section class="menu-pane" class:active={index === panes.length - 1} data-menu-parent={parent?.item.id ?? ''} aria-label={parent ? $t("fields.menuItemDetails", { label: parent.item.label || $t("fields.menuUntitledItem") }) : $t("fields.menuItems")}>
         <div class="menu-pane-head">
-          <h3>{parent?.item.label || (parent ? "Untitled item" : "Menu items")}</h3>
+          <h3>{parent?.item.label || $t(parent ? "fields.menuUntitledItem" : "fields.menuItems")}</h3>
           {#if parent}
             <details class="menu-actions">
-              <summary aria-label={`Actions for ${parent.item.label}`}><Icon name="dotsThreeOutlineVertical" /></summary>
+              <summary aria-label={$t("fields.menuItemActions", { label: parent.item.label })}><Icon name="dotsThreeOutlineVertical" /></summary>
               <div>
-                <button type="button" disabled={!parent.previous} onclick={() => parent.previous && move(parent.item.id, parent.previous, 'before')}>Up</button>
-                <button type="button" disabled={!parent.next} onclick={() => parent.next && move(parent.item.id, parent.next, 'after')}>Down</button>
-                <button type="button" disabled={!parent.previous || parent.depth + Math.max(...menuRows([parent.item]).map(row => row.depth)) > maxDepth} onclick={() => parent.previous && move(parent.item.id, parent.previous, 'inside')}>Indent</button>
-                <button type="button" disabled={!parent.parentId} onclick={() => parent.parentId && move(parent.item.id, parent.parentId, 'after')}>Outdent</button>
-                <button type="button" class="menu-remove" onclick={() => remove(parent.item)}>Remove</button>
+                <button type="button" disabled={!parent.previous} onclick={() => parent.previous && move(parent.item.id, parent.previous, 'before')}>{$t("fields.menuUp")}</button>
+                <button type="button" disabled={!parent.next} onclick={() => parent.next && move(parent.item.id, parent.next, 'after')}>{$t("fields.menuDown")}</button>
+                <button type="button" disabled={!parent.previous || parent.depth + Math.max(...menuRows([parent.item]).map(row => row.depth)) > maxDepth} onclick={() => parent.previous && move(parent.item.id, parent.previous, 'inside')}>{$t("fields.menuIndent")}</button>
+                <button type="button" disabled={!parent.parentId} onclick={() => parent.parentId && move(parent.item.id, parent.parentId, 'after')}>{$t("fields.menuOutdent")}</button>
+                <button type="button" class="menu-remove" onclick={() => remove(parent.item)}>{$t("fields.remove")}</button>
               </div>
             </details>
           {/if}
         </div>
         {#if parent}
           <div class="menu-fields">
-            <label><span>Label</span><input type="text" aria-label={`Label for ${parent.item.id}`} value={parent.item.label} oninput={event => change(parent.item.id, 'label', event.currentTarget.value)} /></label>
-            <label><span>URL</span><input type="text" aria-label={`URL for ${parent.item.id}`} value={parent.item.url} placeholder="/about or https://example.com" oninput={event => change(parent.item.id, 'url', event.currentTarget.value)} /></label>
-            <label class="inline"><input type="checkbox" role="switch" class="switch" checked={parent.item.newTab ?? false} onchange={event => oninput(editMenuItem(items, parent.item.id, item => ({ ...item, newTab: event.currentTarget.checked })))} /><span>Open in new tab</span></label>
+            <label><span>{$t("fields.menuLabel")}</span><input type="text" aria-label={$t("fields.menuLabelFor", { id: parent.item.id })} value={parent.item.label} oninput={event => change(parent.item.id, 'label', event.currentTarget.value)} /></label>
+            <label><span>{$t("fields.menuUrl")}</span><input type="text" aria-label={$t("fields.menuUrlFor", { id: parent.item.id })} value={parent.item.url} placeholder={$t("fields.menuUrlPlaceholder")} oninput={event => change(parent.item.id, 'url', event.currentTarget.value)} /></label>
+            <label class="inline"><input type="checkbox" role="switch" class="switch" checked={parent.item.newTab ?? false} onchange={event => oninput(editMenuItem(items, parent.item.id, item => ({ ...item, newTab: event.currentTarget.checked })))} /><span>{$t("fields.menuOpenInNewTab")}</span></label>
           </div>
-          <h4>Items</h4>
+          <h4>{$t("fields.menuGroupItems")}</h4>
         {/if}
         <div class="menu-list">
           {#each (parent ? parent.item.children : items) as item (item.id)}
             <div class="menu-item" class:is-dragging={dragging === item.id} class:drop-before={target === item.id + 'before'} class:drop-after={target === item.id + 'after'} class:selected={chain[index]?.item.id === item.id} data-menu-id={item.id} data-parent-id={parent?.item.id ?? ''} data-depth={index + 1}>
-              <button type="button" class="menu-drag" aria-label={`Drag ${item.label}`} onpointerdown={event => startDrag(event, item.id)} onlostpointercapture={cancelDrag}><Icon name="listBullets" /></button>
-              <button type="button" class="menu-open" aria-label={`Open ${item.label || 'Untitled item'}`} aria-expanded={chain[index]?.item.id === item.id} onclick={() => open(item.id)}>
-                <span><span class="menu-label">{item.label || "Untitled item"}</span><span class="menu-url">{item.url}</span></span>
+              <button type="button" class="menu-drag" aria-label={$t("fields.menuDragItem", { label: item.label })} onpointerdown={event => startDrag(event, item.id)} onlostpointercapture={cancelDrag}><Icon name="listBullets" /></button>
+              <button type="button" class="menu-open" aria-label={$t("fields.menuOpenItem", { label: item.label || $t("fields.menuUntitledItem") })} aria-expanded={chain[index]?.item.id === item.id} onclick={() => open(item.id)}>
+                <span><span class="menu-label">{item.label || $t("fields.menuUntitledItem")}</span><span class="menu-url">{item.url}</span></span>
                 {#if item.children.length}<span class="menu-count">{item.children.length}</span>{/if}
                 <Icon name="caretRight" size={12} />
               </button>
             </div>
           {:else}
-            <p class="menu-empty">{parent ? "No items in this group." : "No menu items yet."}</p>
+            <p class="menu-empty">{$t(parent ? "fields.menuEmptyGroup" : "fields.menuEmpty")}</p>
           {/each}
         </div>
-        <button type="button" class="menu-add" disabled={!!parent && parent.depth >= maxDepth} onclick={() => add(parent?.item.id ?? null)}><Icon name="plus" />{parent ? "Add child" : "Add item"}</button>
-        {#if parent && parent.depth >= maxDepth}<p class="hint">Maximum {maxDepth} levels.</p>{/if}
+        <button type="button" class="menu-add" disabled={!!parent && parent.depth >= maxDepth} onclick={() => add(parent?.item.id ?? null)}><Icon name="plus" />{$t(parent ? "fields.menuAddChild" : "fields.addItem")}</button>
+        {#if parent && parent.depth >= maxDepth}<p class="hint">{$t("fields.menuMaximumLevelsHint", { maxDepth })}</p>{/if}
       </section>
     {/each}
   </div>
 </section>
 {#if removing}
-  <ActionDialog title={`Remove “${removing.label}”?`} description="This removes the item and all its children from the draft. Press Save to persist the change." confirmLabel="Remove" danger onconfirm={() => {
+  <ActionDialog title={$t("fields.menuRemoveTitle", { label: removing.label })} description={$t("fields.menuRemoveDescription")} confirmLabel={$t("fields.remove")} danger onconfirm={() => {
     if (removing) {
       const parentId = rows.find(row => row.item.id === removing?.id)?.parentId ?? null;
       oninput(editMenuItem(items, removing.id, () => null));
       void open(parentId);
     }
-    message = "Menu item removed";
+    message = $t("fields.menuItemRemoved");
   }} onclose={() => { removing = null; }} />
 {/if}
 

package/src/editor/lib/PreviewFrame.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import { tick, untrack } from "svelte";
   import { fetchPreview } from "./preview-frame";
+  import { subscribeMediaLabels } from "./embed-preview";
 
   let { url, title, frame = $bindable(), reloadToken = 0, onload, onloading, onerror }: {
     url: string;
@@ -22,18 +24,19 @@
     const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
     const controller = new AbortController();
     const { signal } = controller;
+    let stopMediaLabels: (() => void) | undefined;
     source = null;
     loading = true;
     revealed = false;
     untrack(onloading);
-    function fail(message = "The prepared page could not be loaded. Check its URL and framing headers.") {
+    function fail(message = $t("richtext.preparedPageLoadError")) {
       if (signal.aborted) return;
       controller.abort();
       clearTimeout(timeout);
       loading = false;
       onerror(message);
     }
-    const timeout = setTimeout(() => fail("The preview took too long to load. Check its URL and try again."), 20000);
+    const timeout = setTimeout(() => fail($t("richtext.previewTimeout")), 20000);
     function wait(ms: number) {
       return new Promise<void>(resolve => {
         const finish = () => { clearTimeout(timer); signal.removeEventListener("abort", finish); resolve(); };
@@ -57,11 +60,13 @@
         onload();
         await tick();
         if (signal.aborted || iframe !== frame) return;
+        stopMediaLabels?.();
+        stopMediaLabels = subscribeMediaLabels(doc.body);
         clearTimeout(timeout);
         loading = false;
         revealed = true;
       } catch (cause) {
-        fail(cause instanceof Error ? cause.message : "Preview unavailable");
+        fail(cause instanceof Error ? cause.message : $t("richtext.previewUnavailable"));
       }
     }
     const handlers = { ready, fail: () => fail() };
@@ -69,9 +74,9 @@
     else fetchPreview(target, signal).then(srcdoc => {
       if (!signal.aborted) source = { srcdoc, ...handlers };
     }).catch(cause => {
-      fail(cause instanceof Error ? cause.message : "Preview unavailable");
+      fail(cause instanceof Error ? cause.message : $t("richtext.previewUnavailable"));
     });
-    return () => { controller.abort(); clearTimeout(timeout); };
+    return () => { stopMediaLabels?.(); controller.abort(); clearTimeout(timeout); };
   });
 </script>
 
@@ -82,6 +87,6 @@
     {/key}
   {/if}
   {#if loading}
-    <div class="preview-loading" role="status"><span class="preview-spinner" aria-hidden="true"></span>Loading preview…</div>
+    <div class="preview-loading" role="status"><span class="preview-spinner" aria-hidden="true"></span>{$t("richtext.loadingPreview")}</div>
   {/if}
 </div>

package/src/editor/lib/PropertiesTabs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   let { tab = $bindable("content") }: { tab?: "content" | "seo" } = $props();
   function onkey(event: KeyboardEvent) {
     if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
@@ -8,8 +9,8 @@
   }
 </script>
 
-<div class="panel-tabs" role="tablist" aria-label="Properties">
+<div class="panel-tabs" role="tablist" aria-label={$t("fields.properties")}>
   {#each ["content", "seo"] as value}
-    <button type="button" role="tab" id={`properties-tab-${value}`} aria-controls={`properties-${value}`} aria-selected={tab === value} tabindex={tab === value ? 0 : -1} data-tab={value} onclick={() => (tab = value as "content" | "seo")} onkeydown={onkey}>{value === "content" ? "Content" : "SEO"}</button>
+    <button type="button" role="tab" id={`properties-tab-${value}`} aria-controls={`properties-${value}`} aria-selected={tab === value} tabindex={tab === value ? 0 : -1} data-tab={value} onclick={() => (tab = value as "content" | "seo")} onkeydown={onkey}>{$t(value === "content" ? "fields.content" : "fields.seo")}</button>
   {/each}
 </div>

package/src/editor/lib/PublishDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import Icon from "./Icon.svelte";
   import type { PublishReview } from "./github-backend";
   let { review, loading, busy, error, message, onrefresh, onconfirm, onclose }: {
@@ -16,31 +17,31 @@
 
 <dialog bind:this={dialog} class="rigel rigel-modal-backdrop publish-dialog" aria-labelledby="publish-title" aria-describedby="publish-description" oncancel={(event) => { event.preventDefault(); if (!busy) onclose(); }}>
   <form class="rigel-modal" onsubmit={(event) => { event.preventDefault(); onconfirm(); }} aria-busy={loading || busy}>
-    <div class="publish-head"><h2 id="publish-title">Publish saved changes</h2><button type="button" class="icon-btn" aria-label="Close publish review" disabled={busy} onclick={onclose}><Icon name="x" size={16} /></button></div>
-    <p id="publish-description">Publish includes <strong>all saved changes on the drafts branch</strong>, including files outside CMS content folders. Unsaved edits are never included or saved automatically.</p>
-    {#if loading}<p role="status">Loading the complete file review…</p>{/if}
+    <div class="publish-head"><h2 id="publish-title">{$t("connection.publishTitle")}</h2><button type="button" class="icon-btn" aria-label={$t("connection.closePublishReview")} disabled={busy} onclick={onclose}><Icon name="x" size={16} /></button></div>
+    <p id="publish-description">{#each $t("connection.publishDescription", { scope: "{scope}" }).split("{scope}") as part, index}{#if index}<strong>{$t("connection.publishScope")}</strong>{/if}{part}{/each}</p>
+    {#if loading}<p role="status">{$t("connection.loadingReview")}</p>{/if}
     {#if review}
-      <p><strong>{review.repo}</strong><br /><span class="publish-branch">{review.branch}</span> to <span class="publish-branch">{review.publishBranch}</span>, as one squash commit.</p>
+      <p><strong>{review.repo}</strong><br />{#each $t("connection.publishBranches", { branch: "{branch}", publishBranch: "{publishBranch}" }).split(/(\{branch\}|\{publishBranch\})/) as part}{#if part === "{branch}"}<span class="publish-branch">{review.branch}</span>{:else if part === "{publishBranch}"}<span class="publish-branch">{review.publishBranch}</span>{:else}{part}{/if}{/each}</p>
       {#if review.needsSync}
-        <p>The publishing branch has changes not in drafts, including earlier squash publishes. First, explicitly sync it into drafts using GitHub’s normal merge. This does not publish. Conflicts stop the sync. Then review the updated files again before publishing.</p>
-        <p>These are the current tree differences, not the final publish list:</p>
+        <p>{$t("connection.syncDescription")}</p>
+        <p>{$t("connection.treeDifferences")}</p>
       {/if}
-      <p id="publish-file-count"><strong>{review.files.length} {review.files.length === 1 ? "file" : "files"}</strong></p>
+      <p id="publish-file-count"><strong>{$t("connection.fileCount", { count: review.files.length })}</strong></p>
       {#if review.files.length}
-        <ul class="publish-files" tabindex="0" aria-label="All changed files" aria-describedby="publish-file-count">
+        <ul class="publish-files" tabindex="0" aria-label={$t("connection.allChangedFiles")} aria-describedby="publish-file-count">
           {#each review.files as file (file.filename)}
-            <li><span class="publish-file-status">{file.status}</span><span>{file.filename}{#if file.previous_filename}<small>Previously: {file.previous_filename}</small>{/if}</span></li>
+            <li><span class="publish-file-status">{$t(`connection.fileStatus.${file.status}`)}</span><span>{file.filename}{#if file.previous_filename}<small>{$t("connection.previousFilename", { filename: file.previous_filename })}</small>{/if}</span></li>
           {/each}
         </ul>
-      {:else}<p>No saved changes to publish. The branch trees are identical.</p>{/if}
-      <p class="hint">Both branch revisions are checked again before publishing. GitHub pins the draft revision, but cannot atomically lock the target revision; a target update in the final instant can still race. Required checks, reviews and branch protections apply.</p>
+      {:else}<p>{$t("connection.noSavedChanges")}</p>{/if}
+      <p class="hint">{$t("connection.publishSafety")}</p>
     {/if}
     {#if error}<p class="error" role="alert">{error}</p>{/if}
     {#if message}<p role="status">{message}</p>{/if}
     <div class="publish-actions">
-      <button type="button" bind:this={cancel} class="outlined" disabled={busy} onclick={onclose}>{message ? "Close" : "Cancel"}</button>
-      {#if !message}<button type="button" class="outlined" disabled={loading || busy} onclick={onrefresh}>Review again</button>{/if}
-      {#if review && !message}<button id="confirm-publish" type="submit" class="primary" disabled={loading || busy || !review.files.length}>{busy ? "Working…" : review.needsSync ? "Sync drafts first" : "Confirm publish"}</button>{/if}
+      <button type="button" bind:this={cancel} class="outlined" disabled={busy} onclick={onclose}>{message ? $t("connection.close") : $t("connection.cancel")}</button>
+      {#if !message}<button type="button" class="outlined" disabled={loading || busy} onclick={onrefresh}>{$t("connection.reviewAgain")}</button>{/if}
+      {#if review && !message}<button id="confirm-publish" type="submit" class="primary" disabled={loading || busy || !review.files.length}>{busy ? $t("connection.working") : review.needsSync ? $t("connection.syncDraftsFirst") : $t("connection.confirmPublish")}</button>{/if}
     </div>
   </form>
 </dialog>

package/src/editor/lib/ReferenceSelect.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import type { ReferenceOption } from "../../manifest/references";
   import Select from "./Select.svelte";
 
@@ -13,5 +14,5 @@
   const missing = $derived(selected.filter(id => !options.some(option => option.value === id)));
 </script>
 
-<Select {label} {multiple} value={multiple ? selected : selected[0] ?? ""} options={[...(!multiple ? [{ value: "", label: `Select ${label.toLowerCase()}…` }] : []), ...options, ...missing.map(id => ({ value: id, label: `Unavailable (${id})` }))]} {onchange} />
-{#if !options.length}<p class="hint">No entries have been declared yet.</p>{/if}
+<Select {label} {multiple} value={multiple ? selected : selected[0] ?? ""} options={[...(!multiple ? [{ value: "", label: $t("fields.selectLabel", { label: label.toLowerCase() }) }] : []), ...options, ...missing.map(id => ({ value: id, label: $t("fields.unavailableReference", { id }) }))]} {onchange} />
+{#if !options.length}<p class="hint">{$t("fields.noEntries")}</p>{/if}

package/src/editor/lib/SchemaField.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import ImagePicker from "./ImagePicker.svelte";
   import MarkdownEditor from "./MarkdownEditor.svelte";
   import SchemaField from "./SchemaField.svelte";
@@ -35,7 +36,8 @@
   const itemSchema = $derived(field.type === "array" ? itemFields(schema, field) : []);
   const objectSchema = $derived(field.type === "object" ? objectFields(schema, field) : []);
   const options = $derived(field.type === "reference" ? referenceOptions(documents, field.to ?? []) : []);
-  const label = $derived(`${field.label}${field.required ? " *" : ""}${devMode ? ` (${field.key})` : ""}`);
+  const fieldLabel = $derived(field.labelKey ? $t(field.labelKey) : field.label);
+  const label = $derived(`${fieldLabel}${field.required ? " *" : ""}${devMode ? ` (${field.key})` : ""}`);
 
   function normalizeColor(input: string): string {
     const hex = input.trim().replace(/^#/, "");
@@ -60,8 +62,8 @@
   <div class="schema-field">
     <label for={id}><span>{label}</span></label>
     <div class="schema-color">
-      <input type="color" aria-label={`${field.label} picker`} value={/^#[0-9a-f]{6}$/.test(color) ? color : "#000000"} oninput={(event) => onvalue(event.currentTarget.value)} />
-      <input id={id} type="text" aria-label={`${field.label} hex value`} value={typeof value === "string" ? value : ""} placeholder="#000000" spellcheck={false} oninput={(event) => onvalue(event.currentTarget.value)} onblur={(event) => onvalue(normalizeColor(event.currentTarget.value))} />
+      <input type="color" aria-label={$t("fields.colorPicker", { label: fieldLabel })} value={/^#[0-9a-f]{6}$/.test(color) ? color : "#000000"} oninput={(event) => onvalue(event.currentTarget.value)} />
+      <input id={id} type="text" aria-label={$t("fields.colorHexValue", { label: fieldLabel })} value={typeof value === "string" ? value : ""} placeholder="#000000" spellcheck={false} oninput={(event) => onvalue(event.currentTarget.value)} onblur={(event) => onvalue(normalizeColor(event.currentTarget.value))} />
     </div>
   </div>
 {:else if field.type === "code"}
@@ -74,7 +76,7 @@
     <label for={id}><span>{label}</span></label>
     <div class="secret-input">
       <input id={id} type={revealed ? "text" : "password"} value={typeof value === "string" ? value : ""} placeholder={field.placeholder ?? ""} autocomplete="off" spellcheck={false} oninput={(event) => onvalue(event.currentTarget.value)} />
-      <button type="button" aria-label={`${revealed ? "Hide" : "Show"} ${field.label}`} aria-controls={id} aria-pressed={revealed} onclick={() => revealed = !revealed}><Icon name={revealed ? "eyeSlash" : "eye"} size={18} /></button>
+      <button type="button" aria-label={$t(revealed ? "fields.hideValue" : "fields.showValue", { label: fieldLabel })} aria-controls={id} aria-pressed={revealed} onclick={() => revealed = !revealed}><Icon name={revealed ? "eyeSlash" : "eye"} size={18} /></button>
     </div>
   </div>
 {:else if field.type === "text"}
@@ -83,7 +85,7 @@
     <textarea rows="3" value={typeof value === "string" ? value : ""} oninput={(event) => onvalue(event.currentTarget.value)}></textarea>
   </label>
 {:else if field.type === "markdown"}
-  <MarkdownEditor label={field.label} value={typeof value === "string" ? value : ""} oninput={(next) => onvalue(next)} />
+  <MarkdownEditor label={fieldLabel} value={typeof value === "string" ? value : ""} oninput={(next) => onvalue(next)} />
 {:else if field.type === "image"}
   <div class="schema-field">
     <span class="schema-label">{label}</span>
@@ -102,7 +104,7 @@
 {:else if field.type === "date"}
   <DatePicker {label} value={typeof value === "string" ? value : ""} required={field.required} onchange={next => onvalue(next || undefined)} />
 {:else if field.type === "reference"}
-  <Select {label} value={value && typeof value === "object" ? String((value as Record<string, unknown>)._ref ?? "") : ""} options={[{ value: "", label: "Choose…" }, ...options.map(option => ({ value: option.id, label: String(option.data.title ?? option.data.name ?? option.slug) }))]} onchange={next => onvalue(next ? { _ref: String(next) } : undefined)} />
+  <Select {label} value={value && typeof value === "object" ? String((value as Record<string, unknown>)._ref ?? "") : ""} options={[{ value: "", label: $t("fields.choose") }, ...options.map(option => ({ value: option.id, label: String(option.data.title ?? option.data.name ?? option.slug) }))]} onchange={next => onvalue(next ? { _ref: String(next) } : undefined)} />
 {:else if field.type === "object"}
   <fieldset class="schema-object">
     <legend>{label}</legend>
@@ -124,13 +126,13 @@
     {#each itemList as item, index (`${base}.${item && typeof item === "object" ? (item as Record<string, unknown>)._key ?? index : index}`)}
       <div class="schema-item" data-schema-path={`${base}.${item && typeof item === "object" ? (item as Record<string, unknown>)._key ?? index : index}`}>
         <div class="schema-item-head">
-          <span>Item {index + 1}</span>
+          <span>{$t("fields.itemNumber", { number: index + 1 })}</span>
           <span class="schema-key">{(item && typeof item === "object" ? (item as Record<string, unknown>)._key : "") ?? ""}</span>
           <div class="schema-item-actions">
-            <button type="button" aria-label={`Move ${field.label} item ${index + 1} up`} data-tooltip="Move up" disabled={index === 0} onclick={() => onvalue(moveItem(itemList, index, -1))}>↑</button>
-            <button type="button" aria-label={`Move ${field.label} item ${index + 1} down`} data-tooltip="Move down" disabled={index === itemList.length - 1} onclick={() => onvalue(moveItem(itemList, index, 1))}>↓</button>
-            <button type="button" aria-label={`Duplicate ${field.label} item ${index + 1}`} data-tooltip="Duplicate" onclick={() => onvalue(duplicateItem(itemList, index))}>⧉</button>
-            <button type="button" aria-label={`Remove ${field.label} item ${index + 1}`} data-tooltip="Remove" onclick={() => onvalue(itemList.filter((_, position) => position !== index))}>×</button>
+            <button type="button" aria-label={$t("fields.moveItemUp", { label: fieldLabel, number: index + 1 })} data-tooltip={$t("fields.moveUp")} disabled={index === 0} onclick={() => onvalue(moveItem(itemList, index, -1))}>↑</button>
+            <button type="button" aria-label={$t("fields.moveItemDown", { label: fieldLabel, number: index + 1 })} data-tooltip={$t("fields.moveDown")} disabled={index === itemList.length - 1} onclick={() => onvalue(moveItem(itemList, index, 1))}>↓</button>
+            <button type="button" aria-label={$t("fields.duplicateItem", { label: fieldLabel, number: index + 1 })} data-tooltip={$t("fields.duplicate")} onclick={() => onvalue(duplicateItem(itemList, index))}>⧉</button>
+            <button type="button" aria-label={$t("fields.removeItem", { label: fieldLabel, number: index + 1 })} data-tooltip={$t("fields.remove")} onclick={() => onvalue(itemList.filter((_, position) => position !== index))}>×</button>
           </div>
         </div>
         {#if itemSchema.length}
@@ -146,11 +148,11 @@
             />
           {/each}
         {:else}
-          <input type="text" aria-label={`${field.label} item ${index + 1}`} value={typeof item === "string" ? item : ""} oninput={(event) => setItem(index, event.currentTarget.value)} />
+          <input type="text" aria-label={$t("fields.itemLabel", { label: fieldLabel, number: index + 1 })} value={typeof item === "string" ? item : ""} oninput={(event) => setItem(index, event.currentTarget.value)} />
         {/if}
       </div>
     {/each}
-    <button type="button" class="outlined" onclick={() => onvalue([...itemList, itemSchema.length ? blankItem(itemSchema) : field.items?.some((item) => item.type === "reference") ? { _key: newKey(), _ref: "" } : ""])}>Add item</button>
+    <button type="button" class="outlined" onclick={() => onvalue([...itemList, itemSchema.length ? blankItem(itemSchema) : field.items?.some((item) => item.type === "reference") ? { _key: newKey(), _ref: "" } : ""])}>{$t("fields.addItem")}</button>
   </div>
 {/if}
 </div>