@rigel-cms/rigel 1.0.0 → 1.1.0

package/src/editor/lib/SchemaPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import SchemaField from "./SchemaField.svelte";
   import Icon from "./Icon.svelte";
   import PropertiesTabs from "./PropertiesTabs.svelte";
@@ -92,15 +93,15 @@
 
 <div class="schema-panel" bind:this={host}>
   {#if docType.shared}
-    <p class="shared-badge"><Icon name="info" size={12} /> {docType.demo ? "Field examples for testing. These values are separate from your website settings." : "Shared content. Changes appear on every page that references it."}</p>
+    <p class="shared-badge"><Icon name="info" size={12} /> {$t(docType.demo ? "fields.demoContentNotice" : "fields.sharedContentNotice")}</p>
   {/if}
   <div class:page-properties-header={!docType.shared}>
   {#if seoFields.length}<PropertiesTabs bind:tab />{/if}
   <section class="document-properties" hidden={tab !== "content"}>
-    <h3>{docType.shared ? "Content" : "Page properties"}</h3>
+    <h3>{$t(docType.shared ? "fields.content" : "fields.pageProperties")}</h3>
     {#if !docType.shared}
-      <label><span>URL slug</span><input type="text" value={String(values.slug ?? docId.slice(docType.name.length + 1))} oninput={(event) => onchange({ ...values, slug: event.currentTarget.value })} onblur={() => { if (Object.hasOwn(values, "slug")) onchange({ ...values, slug: slugify(String(values.slug)) }); }} /></label>
-      <p class="hint">Changes the URL, not the document identifier or filename. The website route must use the slug metadata.</p>
+      <label><span>{$t("fields.urlSlug")}</span><input type="text" value={String(values.slug ?? docId.slice(docType.name.length + 1))} oninput={(event) => onchange({ ...values, slug: event.currentTarget.value })} onblur={() => { if (Object.hasOwn(values, "slug")) onchange({ ...values, slug: slugify(String(values.slug)) }); }} /></label>
+      <p class="hint">{$t("fields.documentSlugHint")}</p>
     {/if}
     {#each docFields.filter(field => docType.shared || !isSeoField(field.key)) as field (field.key)}
       <div data-schema-path={field.key}>
@@ -111,40 +112,40 @@
   </div>
   <div id="properties-content" role={seoFields.length ? "tabpanel" : undefined} aria-labelledby={seoFields.length ? "properties-tab-content" : undefined} hidden={tab !== "content"}>
   {#if creating}
-    <p class="panel-note">New page. Save writes the JSON file; the route appears once the site has the file.</p>
+    <p class="panel-note">{$t("fields.newPageNotice")}</p>
   {/if}
   {#if sections.length || values.sections !== undefined}
     <section>
-      <h3>Structure</h3>
+      <h3>{$t("fields.structure")}</h3>
       <ul class="structure-list">
         {#each sections as section, index (section._key)}
           <li class:active={selected?.sectionKey === section._key}>
             <button type="button" class="structure-row" onclick={() => onselect({ docId, path: "", sectionKey: String(section._key) })}>
-              <span>{sectionLabel(schema, section._type)}</span>
+              <span>{sectionLabel(schema, section._type, $t("fields.section"))}</span>
               {#if devMode}<span class="schema-key">{section._key}</span>{/if}
             </button>
             <div class="structure-actions">
-              <button type="button" aria-label={`Move ${sectionLabel(schema, section._type)} up`} data-tooltip="Move up" disabled={index === 0} onclick={() => setSections(moveItem(sections, index, -1) as Record<string, unknown>[])}>↑</button>
-              <button type="button" aria-label={`Move ${sectionLabel(schema, section._type)} down`} data-tooltip="Move down" disabled={index === sections.length - 1} onclick={() => setSections(moveItem(sections, index, 1) as Record<string, unknown>[])}>↓</button>
-              <button type="button" aria-label={`Duplicate ${sectionLabel(schema, section._type)}`} data-tooltip="Duplicate" onclick={() => setSections(duplicateItem(sections, index) as Record<string, unknown>[])}>⧉</button>
-              <button type="button" aria-label={`Remove ${sectionLabel(schema, section._type)}`} data-tooltip="Remove" onclick={() => removeSection(index)}>×</button>
+              <button type="button" aria-label={$t("fields.moveSectionUp", { label: sectionLabel(schema, section._type) })} data-tooltip={$t("fields.moveUp")} disabled={index === 0} onclick={() => setSections(moveItem(sections, index, -1) as Record<string, unknown>[])}>↑</button>
+              <button type="button" aria-label={$t("fields.moveSectionDown", { label: sectionLabel(schema, section._type) })} data-tooltip={$t("fields.moveDown")} disabled={index === sections.length - 1} onclick={() => setSections(moveItem(sections, index, 1) as Record<string, unknown>[])}>↓</button>
+              <button type="button" aria-label={$t("fields.duplicateSection", { label: sectionLabel(schema, section._type) })} data-tooltip={$t("fields.duplicate")} onclick={() => setSections(duplicateItem(sections, index) as Record<string, unknown>[])}>⧉</button>
+              <button type="button" aria-label={$t("fields.removeSection", { label: sectionLabel(schema, section._type) })} data-tooltip={$t("fields.remove")} onclick={() => removeSection(index)}>×</button>
             </div>
           </li>
         {/each}
       </ul>
       <div class="add-section">
-        <Select ariaLabel="Section type to add" value={addType} onchange={next => { addType = String(next); }} options={[{ value: "", label: "Choose a section…" }, ...allowedTypes.map(type => ({ value: type.name, label: type.title }))]} />
-        <button type="button" class="outlined" disabled={!addType} onclick={addSection}>Add section</button>
+        <Select ariaLabel={$t("fields.sectionTypeToAdd")} value={addType} onchange={next => { addType = String(next); }} options={[{ value: "", label: $t("fields.chooseSection") }, ...allowedTypes.map(type => ({ value: type.name, label: type.title }))]} />
+        <button type="button" class="outlined" disabled={!addType} onclick={addSection}>{$t("fields.addSection")}</button>
       </div>
-      {#if pending.length}<p class="panel-note" role="status">{pending.length} new section{pending.length === 1 ? "" : "s"} will appear after Save.</p>{/if}
+      {#if pending.length}<p class="panel-note" role="status">{$t("fields.pendingSections", { count: pending.length })}</p>{/if}
     </section>
   {/if}
 
   {#if selectedSection || (selectedField && selected?.path.includes("."))}
   <section class="section-properties">
-    <h3>Section properties</h3>
+    <h3>{$t("fields.sectionProperties")}</h3>
     {#if selectedSection && selected?.sectionKey}
-      <p class="selected-path">{selectedField ? `${selectedField.label} · ` : ""}{selectedSection.title}</p>
+      <p class="selected-path">{selectedField ? `${selectedField.labelKey ? $t(selectedField.labelKey) : selectedField.label} · ` : ""}{selectedSection.title}</p>
       {#each selectedSection.fields as field (field.key)}
         {@const reference = field.type === "reference" ? sections.find((section) => section._key === selected?.sectionKey)?.[field.key] as { _ref?: string } | undefined : undefined}
         <div data-schema-path={`sections.${selected.sectionKey}.${field.key}`}>
@@ -158,12 +159,12 @@
             onvalue={(next) => onchange(replaceAt(values, `sections.${selected!.sectionKey}.${field.key}`, next))}
           />
           {#if reference?._ref && documents.some((doc) => doc.id === reference._ref)}
-            <button type="button" class="outlined" onclick={() => oneditdocument(reference._ref!)}>Edit {field.label.toLowerCase()} ↗</button>
+            <button type="button" class="outlined" onclick={() => oneditdocument(reference._ref!)}>{$t("fields.editReference", { label: field.label.toLowerCase() })}</button>
           {/if}
         </div>
       {/each}
     {:else if selectedField && selected}
-      <p class="selected-path">{selectedField.label}{selected.sectionKey ? ` · ${sectionLabel(schema, sections.find((section) => section._key === selected.sectionKey)?._type)}` : ""}</p>
+      <p class="selected-path">{selectedField.labelKey ? $t(selectedField.labelKey) : selectedField.label}{selected.sectionKey ? ` · ${sectionLabel(schema, sections.find((section) => section._key === selected.sectionKey)?._type, $t("fields.section"))}` : ""}</p>
       <SchemaField
         {schema}
         {documents}
@@ -181,7 +182,7 @@
   {#if seoFields.length}
     <div id="properties-seo" role="tabpanel" aria-labelledby="properties-tab-seo" hidden={tab !== "seo"}>
     <section class="seo-fields">
-      <h3>SEO</h3>
+      <h3>{$t("fields.seo")}</h3>
       {#each seoFields as field (field.key)}
         <div data-schema-path={field.key}>
           <SchemaField {schema} {documents} {devMode} {field} base={field.key} value={values[field.key]} onvalue={(next) => onchange(replaceAt(values, field.key, next))} />

package/src/editor/lib/Select.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import { tick } from "svelte";
   import Icon from "./Icon.svelte";
   import type { ICONS } from "./icons";
@@ -125,7 +126,7 @@
 <div class="custom-select" onfocusout={() => { if (open) requestAnimationFrame(() => { if (trigger.ownerDocument.activeElement?.tagName === "IFRAME") close(); }); }}>
   {#if label}<span class="select-label" id={`${id}-label`}>{label}</span>{/if}
   <button bind:this={trigger} type="button" class="select-trigger" class:icon-only={!!icon} role="combobox" aria-label={label ? undefined : ariaLabel} aria-labelledby={label ? `${id}-label` : undefined} aria-haspopup="listbox" aria-expanded={open} aria-controls={`${id}-list`} aria-activedescendant={open && active >= 0 ? `${id}-option-${active}` : undefined} popovertarget={`${id}-list`} data-tooltip={tooltip} data-tooltip-position={tooltipPosition} data-tooltip-align={tooltipAlign} {disabled} onclick={event => { event.preventDefault(); menu.matches(":popover-open") ? close() : void reveal(); }} onkeydown={onkey}>
-    {#if icon}<Icon name={icon} size={18} />{:else}<span>{text || (multiple ? `Select ${label.toLowerCase() || "options"}…` : "Choose…")}</span><Icon name="caretDown" size={12} />{/if}
+    {#if icon}<Icon name={icon} size={18} />{:else}<span>{text || (multiple ? label ? $t("fields.selectLabel", { label: label.toLowerCase() }) : $t("fields.selectOptions") : $t("fields.choose"))}</span><Icon name="caretDown" size={12} />{/if}
   </button>
   <select hidden aria-hidden="true" tabindex="-1" aria-label={ariaLabel} {multiple} {disabled} {value} onchange={event => { value = multiple ? Array.from(event.currentTarget.selectedOptions, option => option.value) : event.currentTarget.value; onchange(value); }}>
     {#each options as option (option.value)}<option value={option.value} disabled={option.disabled}>{option.label}</option>{/each}
@@ -137,6 +138,6 @@
         <span>{option.label}</span><span class="select-check" aria-hidden="true">{selected.includes(option.value) ? "✓" : ""}</span>
       </div>
     {/each}
-    {#if !options.length}<p class="select-empty">No options available.</p>{/if}
+    {#if !options.length}<p class="select-empty">{$t("fields.noOptions")}</p>{/if}
   </div>
 </div>

package/src/editor/lib/SeoGuidance.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
+  import { t } from "../i18n";
   let { field, value }: { field: string; value: unknown } = $props();
-  const limits = $derived(field === "metaTitle" ? { min: 50, max: 60, label: "SEO title" } : { min: 120, max: 160, label: "SEO description" });
+  const limits = $derived(field === "metaTitle" ? { min: 50, max: 60 } : { min: 120, max: 160 });
   const count = $derived(typeof value === "string" ? [...value].length : 0);
-  const status = $derived(!count ? "Not set" : count < limits.min ? "Too short" : count > limits.max ? "Too long" : "Recommended length");
+  const status = $derived($t(!count ? "fields.seoNotSet" : count < limits.min ? "fields.seoTooShort" : count > limits.max ? "fields.seoTooLong" : "fields.seoRecommendedLength"));
   const tone = $derived(!count ? "empty" : count > limits.max || count < limits.min / 2 ? "danger" : count < limits.min ? "warning" : "success");
 </script>
 
 {#if field === "metaTitle" || field === "description"}
   <div class="seo-length" data-seo-length={field} data-tone={tone}>
-    <div class="seo-length-track" role="meter" aria-label={`${limits.label} length`} aria-valuemin={0} aria-valuemax={Math.max(limits.max, count)} aria-valuenow={count} aria-valuetext={`${count} characters. ${status}. Recommended ${limits.min} to ${limits.max}.`} data-tooltip={status}>
+    <div class="seo-length-track" role="meter" aria-label={$t(field === "metaTitle" ? "fields.seoTitleLength" : "fields.seoDescriptionLength")} aria-valuemin={0} aria-valuemax={Math.max(limits.max, count)} aria-valuenow={count} aria-valuetext={$t("fields.seoLengthDetails", { count, status, min: limits.min, max: limits.max })} data-tooltip={status}>
       <span class="seo-length-fill" style:width={`${Math.min(count / limits.max * 100, 100)}%`}></span>
     </div>
     <div class="seo-length-summary hint">
-      <span>Recommended: {limits.min}–{limits.max} characters.</span>
+      <span>{$t("fields.seoRecommendedCharacters", { min: limits.min, max: limits.max })}</span>
       <span class="seo-length-count" aria-hidden="true">{count}/{limits.max}</span>
     </div>
   </div>
 {:else if field === "ogImage"}
-  <p class="hint">Recommended size: 1200 × 628 px.</p>
+  <p class="hint">{$t("fields.seoRecommendedImageSize")}</p>
 {/if}

package/src/editor/lib/Settings.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t, availableLocales, localeNames } from "../i18n";
   import { getKeys, setKeys, STOCK_PROVIDERS } from "./images";
   import type { RigelSettings } from "./settings";
   import type { Manifest } from "../../manifest/types";
@@ -24,14 +25,14 @@
   let keysError = $state("");
   let eraseError = $state("");
 
-  const panes: { id: PaneId; label: string }[] = [
-    { id: "appearance", label: "Appearance" },
-    { id: "editor", label: "Editor" },
-    { id: "connection", label: "Connection" },
-    { id: "media", label: "Media" },
-    { id: "language", label: "Language" },
-    { id: "advanced", label: "Advanced" },
-  ];
+  const panes: { id: PaneId; label: string }[] = $derived([
+    { id: "appearance", label: $t("shell.appearance") },
+    { id: "editor", label: $t("shell.editor") },
+    { id: "connection", label: $t("shell.connection") },
+    { id: "media", label: $t("shell.media") },
+    { id: "language", label: $t("shell.language") },
+    { id: "advanced", label: $t("shell.advanced") },
+  ]);
 
   const PANE_ICONS = {
     appearance: "palette",
@@ -47,7 +48,7 @@
       setKeys(Object.fromEntries(providerIds.map((id) => [id, keys[id]?.trim() || undefined])));
       keysError = "";
     } catch {
-      keysError = "API keys could not be saved in this browser. Allow browser storage and try again.";
+      keysError = $t("shell.apiKeysStorageError");
     }
   });
 </script>
@@ -58,10 +59,10 @@
   onclick={onclose}
   onkeydown={(e) => e.key === "Escape" && onclose()}
 >
-  <div class="rigel-modal settings-modal" role="dialog" aria-label="Settings" onclick={(e) => e.stopPropagation()}>
+  <div class="rigel-modal settings-modal" role="dialog" aria-label={$t("shell.settings")} onclick={(e) => e.stopPropagation()}>
     <div class="settings-head">
-      <h2>Settings</h2>
-      <button class="close" onclick={onclose} aria-label="Close">
+      <h2>{$t("shell.settings")}</h2>
+      <button class="close" onclick={onclose} aria-label={$t("shell.close")}>
         <Icon name="x" size={14} weight="bold" />
       </button>
     </div>
@@ -80,67 +81,67 @@
 
       <div class="settings-pane">
         {#if active === "appearance"}
-          <h3>Appearance</h3>
+          <h3>{$t("shell.appearance")}</h3>
           <fieldset>
-            <legend>Theme</legend>
+            <legend>{$t("shell.theme")}</legend>
             <div class="theme-options">
-              {#each ["system", "light", "dark"] as const as t}
+              {#each ["system", "light", "dark"] as const as theme}
                 <label class="theme-option">
-                  <input type="radio" bind:group={s.theme} value={t} />
-                  <span>{t[0].toUpperCase() + t.slice(1)}</span>
+                  <input type="radio" bind:group={s.theme} value={theme} />
+                  <span>{$t({ system: "shell.themeSystem", light: "shell.themeLight", dark: "shell.themeDark" }[theme])}</span>
                 </label>
               {/each}
             </div>
           </fieldset>
           <fieldset class="accessibility-options">
-            <legend>Accessibility</legend>
+            <legend>{$t("shell.accessibility")}</legend>
             <label class="inline">
               <input type="checkbox" role="switch" class="switch" bind:checked={s.highContrast} aria-describedby="high-contrast-hint" />
-              <span>High contrast mode</span>
+              <span>{$t("shell.highContrastMode")}</span>
             </label>
-            <p class="hint" id="high-contrast-hint">Stronger text and borders in both light and dark themes.</p>
+            <p class="hint" id="high-contrast-hint">{$t("shell.highContrastHint")}</p>
           </fieldset>
 
         {:else if active === "editor"}
-          <h3>Editor experience</h3>
+          <h3>{$t("shell.editorExperience")}</h3>
           <fieldset>
-            <legend>Article body editing</legend>
-            <label class="radio"><input type="radio" bind:group={s.userPref.editorExperience} value="sidebar" /><span>Sidebar</span></label>
-            <label class="radio"><input type="radio" bind:group={s.userPref.editorExperience} value="inline" /><span>Inline preview</span></label>
+            <legend>{$t("shell.articleBodyEditing")}</legend>
+            <label class="radio"><input type="radio" bind:group={s.userPref.editorExperience} value="sidebar" /><span>{$t("shell.sidebar")}</span></label>
+            <label class="radio"><input type="radio" bind:group={s.userPref.editorExperience} value="inline" /><span>{$t("shell.inlinePreview")}</span></label>
           </fieldset>
-          <p class="hint">Inline preview lets you click an article body and write directly on the page. Other fields stay in the sidebar. This preference saves in this browser; content still requires Save.</p>
+          <p class="hint">{$t("shell.editorExperienceHint")}</p>
         {:else if active === "connection"}
-          <h3>Connection</h3>
+          <h3>{$t("shell.connection")}</h3>
           {#if github}
             <dl class="connection-details">
-              <dt>GitHub account</dt>
-              <dd>{#if user}{user.name ?? user.login}<small>@{user.login}</small>{:else}No GitHub account connected.{/if}</dd>
-              <dt>Repository</dt>
+              <dt>{$t("shell.githubAccount")}</dt>
+              <dd>{#if user}{user.name ?? user.login}<small>@{user.login}</small>{:else}{$t("shell.noGithubAccount")}{/if}</dd>
+              <dt>{$t("shell.repository")}</dt>
               <dd>{github.repo}</dd>
-              <dt>Editing branch</dt>
+              <dt>{$t("shell.editingBranch")}</dt>
               <dd>{github.branch}</dd>
               {#if github.publishBranch}
-                <dt>Publishing branch</dt>
+                <dt>{$t("shell.publishingBranch")}</dt>
                 <dd>{github.publishBranch}</dd>
               {/if}
             </dl>
           {:else}
-            <p>Local mode</p>
-            <p class="hint">No GitHub account connected. Content saves to local files when you press Save.</p>
+            <p>{$t("shell.localMode")}</p>
+            <p class="hint">{$t("shell.localModeHint")}</p>
           {/if}
         {:else if active === "media"}
 
           <section class="media-settings-section">
-            <h3>Stock Photo Service API Keys</h3>
-            <p class="hint">Manage API keys for stock photo services. Keys save automatically in this browser only.</p>
+            <h3>{$t("shell.stockPhotoApiKeys")}</h3>
+            <p class="hint">{$t("shell.stockPhotoApiKeysHint")}</p>
             {#each providerIds as id (id)}
               {@const provider = STOCK_PROVIDERS[id]}
-              {@const keyLabel = `${provider.label} ${id === "unsplash" ? "Access Key" : "API key"}`}
+              {@const keyLabel = $t(id === "unsplash" ? "shell.providerAccessKey" : "shell.providerApiKey", { name: provider.label })}
               {@const invalid = !!keys[id]?.trim() && !new RegExp(`^${provider.pattern}$`).test(keys[id]!.trim())}
               <div class="stock-key">
                 <div class="stock-key-head">
                   <h4><label for={`rigel-key-${id}`}>{keyLabel}</label></h4>
-                  <a href={provider.keyURL} target="_blank" rel="noopener noreferrer">Get {id === "unsplash" ? "Access Key" : "API key"}</a>
+                  <a href={provider.keyURL} target="_blank" rel="noopener noreferrer">{$t(id === "unsplash" ? "shell.getAccessKey" : "shell.getApiKey")}</a>
                 </div>
                 <div class="secret-input">
                   <input
@@ -154,47 +155,46 @@
                     aria-invalid={invalid}
                     aria-describedby={invalid ? `rigel-key-${id}-error` : undefined}
                   />
-                  <button type="button" aria-label={`${revealed[id] ? "Hide" : "Show"} ${keyLabel}`} aria-controls={`rigel-key-${id}`} aria-pressed={revealed[id] ?? false} onclick={() => revealed[id] = !revealed[id]}>
+                  <button type="button" aria-label={$t(revealed[id] ? "shell.hideKey" : "shell.showKey", { name: keyLabel })} aria-controls={`rigel-key-${id}`} aria-pressed={revealed[id] ?? false} onclick={() => revealed[id] = !revealed[id]}>
                     <Icon name={revealed[id] ? "eyeSlash" : "eye"} size={18} />
                   </button>
                 </div>
-                {#if invalid}<p class="error" id={`rigel-key-${id}-error`}>Check the {keyLabel} format.</p>{/if}
+                {#if invalid}<p class="error" id={`rigel-key-${id}-error`}>{$t("shell.keyFormatError", { name: keyLabel })}</p>{/if}
               </div>
             {/each}
 
           </section>
 
         {:else if active === "language"}
-          <h3>Language</h3>
+          <h3>{$t("shell.language")}</h3>
           <fieldset>
-            <legend>Editor interface language</legend>
-            {#each ["en", "es", "ru"] as const as lang}
+            <legend>{$t("shell.editorInterfaceLanguage")}</legend>
+            {#each availableLocales as lang}
               <label class="radio">
                 <input type="radio" bind:group={s.language} value={lang} />
-                <span>{{ en: "English", es: "Español", ru: "Русский" }[lang]}{lang !== "en" ? " (soon)" : ""}</span>
+                <span>{localeNames[lang]}</span>
               </label>
             {/each}
           </fieldset>
-          <p class="hint">English is the only shipped locale today.</p>
 
         {:else}
-          <h3>Developer Mode</h3>
+          <h3>{$t("shell.developerMode")}</h3>
           <label class="inline">
             <input type="checkbox" role="switch" class="switch" bind:checked={s.devMode} />
-            <span>Enable dev mode</span>
+            <span>{$t("shell.enableDevMode")}</span>
           </label>
-          <p class="hint">Shows raw JSON of the current draft + field keys next to labels.</p>
+          <p class="hint">{$t("shell.devModeHint")}</p>
           <div class="clear-data">
-            <h3>Clear Data</h3>
-            <p class="hint">Rigel does not currently store file contents or thumbnails in a persistent browser cache.</p>
-            <button type="button" class="danger-btn" disabled>Clear File Cache</button>
-            <p class="hint">Erase Rigel settings, API keys and unsaved drafts from this browser. Files already saved to your repository are not affected.</p>
+            <h3>{$t("shell.clearData")}</h3>
+            <p class="hint">{$t("shell.fileCacheHint")}</p>
+            <button type="button" class="danger-btn" disabled>{$t("shell.clearFileCache")}</button>
+            <p class="hint">{$t("shell.eraseAllDataHint")}</p>
             <button type="button" class="danger-btn" disabled={saving} onclick={() => {
               eraseError = "";
               try { onerase(); }
-              catch { eraseError = "Could not erase browser data. Check browser storage permissions and try again."; }
-            }}>Erase All Data</button>
-            {#if saving}<p class="hint" role="status">Wait for the current save to finish.</p>{/if}
+              catch { eraseError = $t("shell.eraseDataError"); }
+            }}>{$t("shell.eraseAllData")}</button>
+            {#if saving}<p class="hint" role="status">{$t("shell.waitForSave")}</p>{/if}
             {#if eraseError}<p class="error" role="alert">{eraseError}</p>{/if}
           </div>
         {/if}

package/src/editor/lib/Shortcuts.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { t } from "../i18n";
   let { onclose }: { onclose: () => void } = $props();
 
-  const rows: [string, string][] = [
-    ["Search", "⌘/Ctrl + K"],
-    ["Close dialog", "Esc"],
-  ];
+  const rows: [string, string][] = $derived([
+    [$t("shell.search"), $t("shell.searchShortcut")],
+    [$t("shell.closeDialog"), $t("shell.escapeKey")],
+  ]);
 </script>
 
 <div
@@ -13,8 +14,8 @@
   onclick={onclose}
   onkeydown={(e) => e.key === "Escape" && onclose()}
 >
-  <div class="rigel-modal" role="dialog" aria-label="Keyboard shortcuts" onclick={(e) => e.stopPropagation()}>
-    <h2>Keyboard shortcuts</h2>
+  <div class="rigel-modal" role="dialog" aria-label={$t("shell.keyboardShortcuts")} onclick={(e) => e.stopPropagation()}>
+    <h2>{$t("shell.keyboardShortcuts")}</h2>
     <table class="keys">
       <tbody>
         {#each rows as [action, key]}

package/src/editor/lib/SitePreview.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import { untrack } from "svelte";
   import Icon from "./Icon.svelte";
   import { patchPreview, previewUrl, type PreviewConfig, type PreviewTarget } from "../../preview";
@@ -25,27 +26,27 @@
     try {
       const doc = frame?.contentDocument;
       doc?.addEventListener("contextmenu", event => { if (!devMode) event.preventDefault(); }, true);
-      if (!doc) throw new Error("The prepared page could not be loaded.");
-      if (!doc.querySelector('[data-rigel-text], [data-rigel-richtext], [data-rigel-image]')) throw new Error("This page has no prepared Rigel anchors.");
+      if (!doc) throw new Error($t("richtext.preparedPageUnavailable"));
+      if (!doc.querySelector('[data-rigel-text], [data-rigel-richtext], [data-rigel-image]')) throw new Error($t("richtext.noPreparedAnchors"));
       doc.addEventListener("click", event => event.preventDefault(), true);
       doc.addEventListener("submit", event => event.preventDefault(), true);
       loaded = true;
       patch();
-    } catch (cause) { error = cause instanceof Error ? cause.message : "Preview unavailable"; }
+    } catch (cause) { error = cause instanceof Error ? cause.message : $t("richtext.previewUnavailable"); }
   }
   $effect(() => { JSON.stringify(values); void body; patch(); });
 </script>
 
-<div class="site-preview" aria-label="Website preview">
+<div class="site-preview" aria-label={$t("richtext.websitePreview")}>
   <div class="preview-heading">
-    <strong>Website preview</strong>
-    {#if websitePath}<a class="icon-btn visual-live" href={websitePath} target="_blank" rel="noopener noreferrer" aria-label="Preview on website" data-tooltip="Preview on website"><Icon name="external" size={18} /></a>{/if}
+    <strong>{$t("richtext.websitePreview")}</strong>
+    {#if websitePath}<a class="icon-btn visual-live" href={websitePath} target="_blank" rel="noopener noreferrer" aria-label={$t("richtext.previewOnWebsite")} data-tooltip={$t("richtext.previewOnWebsite")}><Icon name="external" size={18} /></a>{/if}
   </div>
   {#if error}<p role="status" class="preview-error">{error}</p>{/if}
   {#if path}
-    {#key key}<PreviewFrame bind:frame url={path} title="Live website draft preview" {onload} onloading={() => { loaded = false; error = ""; }} onerror={(message) => { loaded = false; error = message; }} />{/key}
-    <small>Prepared template · Scripts, navigation and forms disabled. Unanchored fields and lists are not previewed.</small>
+    {#key key}<PreviewFrame bind:frame url={path} title={$t("richtext.liveDraftPreview")} {onload} onloading={() => { loaded = false; error = ""; }} onerror={(message) => { loaded = false; error = message; }} />{/key}
+    <small>{$t("richtext.preparedTemplateHint")}</small>
   {:else}
-    <p role="status">{target.kind === "menu" ? "Menu preview is not supported." : "No prepared preview URL is mapped to this content."}</p>
+    <p role="status">{target.kind === "menu" ? $t("richtext.menuPreviewUnsupported") : $t("richtext.noContentPreview")}</p>
   {/if}
 </div>

package/src/editor/lib/TopBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import Icon from "./Icon.svelte";
   import SidebarIcon from "./SidebarIcon.svelte";
   import { tick } from "svelte";
@@ -46,34 +47,34 @@
     for (const p of manifest.pages) {
       all.push({
         label: p.label,
-        hint: "Page",
+        hint: $t("shell.page"),
         action: () => onselect({ kind: "page", slug: p.slug }),
       });
     }
     for (const doc of manifest.documents ?? []) {
       all.push({
         label: String(doc.data.title ?? doc.data.name ?? doc.slug),
-        hint: `${doc.type} · ${doc.slug}`,
+        hint: $t("shell.searchItemHint", { name: doc.type, slug: doc.slug }),
         action: () => onselect({ kind: "document", type: doc.type, id: doc.id }),
       });
     }
     for (const c of manifest.collections ?? []) {
       all.push({
         label: c.label,
-        hint: "Collection",
+        hint: $t("shell.collection"),
         action: () => onselect({ kind: "collection", name: c.name }),
       });
       for (const po of c.posts) {
         all.push({
           label: String(po.frontmatter.title ?? po.slug),
-          hint: `${c.label} · ${po.slug}`,
+          hint: $t("shell.searchItemHint", { name: c.label, slug: po.slug }),
           action: () => onselect({ kind: "post", collection: c.name, slug: po.slug }),
         });
       }
     }
     if (manifest.menus) {
-      all.push({ label: "Menus", hint: "Collection", action: () => onselect({ kind: "menus" }) });
-      for (const m of manifest.menus.entries) all.push({ label: m.title, hint: `Menu · ${m.slug}`, action: () => onselect({ kind: "menu", slug: m.slug }) });
+      all.push({ label: $t("shell.menus"), hint: $t("shell.collection"), action: () => onselect({ kind: "menus" }) });
+      for (const m of manifest.menus.entries) all.push({ label: m.title, hint: $t("shell.searchMenuHint", { slug: m.slug }), action: () => onselect({ kind: "menu", slug: m.slug }) });
     }
     if (!q) return all.slice(0, 12);
     return all.filter((h) => h.label.toLowerCase().includes(q) || h.hint.toLowerCase().includes(q)).slice(0, 12);
@@ -112,9 +113,9 @@
 
 <svelte:window onkeydown={onKeydown} />
 
-<button class="search-trigger" aria-label="Search content" data-tooltip="Search content (⌘K)" onclick={() => { active = -1; open = true; }}>
+<button class="search-trigger" aria-label={$t("shell.searchContent")} data-tooltip={$t("shell.searchContentTooltip")} onclick={() => { active = -1; open = true; }}>
   <SidebarIcon name="magnifying-glass" />
-  <span class="sidebar-label">Search…</span>
+  <span class="sidebar-label">{$t("shell.searchPlaceholder")}</span>
   <kbd>⌘K</kbd>
 </button>
 
@@ -125,7 +126,7 @@
     onclick={() => (open = false)}
     onkeydown={(e) => e.key === "Escape" && (open = false)}
   >
-    <div class="palette" role="dialog" aria-label="Search content" onclick={(e) => e.stopPropagation()}>
+    <div class="palette" role="dialog" aria-label={$t("shell.searchContent")} onclick={(e) => e.stopPropagation()}>
       <div class="palette-search">
         <Icon name="magnifier" size={20} />
         <input
@@ -135,15 +136,15 @@
           aria-controls="rigel-search-results"
           aria-autocomplete="list"
           aria-activedescendant={active >= 0 && hits[active] ? `rigel-search-hit-${active}` : undefined}
-          aria-label="Search pages, collections, posts"
-          placeholder="Search pages, collections, posts…"
+          aria-label={$t("shell.searchPagesCollectionsPosts")}
+          placeholder={$t("shell.searchPagesCollectionsPostsPlaceholder")}
           bind:value={query}
           oninput={() => active = -1}
           bind:this={inputEl}
         />
-        <kbd>esc</kbd>
+        <kbd>{$t("shell.escapeKeyLowercase")}</kbd>
       </div>
-      <ul id="rigel-search-results" role="listbox" aria-label="Search results">
+      <ul id="rigel-search-results" role="listbox" aria-label={$t("shell.searchResults")}>
         {#each hits as h, i (h.hint + h.label)}
           <li role="presentation">
             <button id={`rigel-search-hit-${i}`} role="option" aria-selected={active === i} onfocus={() => active = i} onclick={() => trigger(h)}>
@@ -152,13 +153,13 @@
             </button>
           </li>
         {:else}
-          <li class="empty" role="presentation">No results</li>
+          <li class="empty" role="presentation">{$t("shell.noResults")}</li>
         {/each}
       </ul>
       <div class="palette-footer">
-        <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
-        <span><kbd>↵</kbd> open</span>
-        <span><kbd>esc</kbd> close</span>
+        <span><kbd>↑</kbd><kbd>↓</kbd> {$t("shell.searchNavigate")}</span>
+        <span><kbd>↵</kbd> {$t("shell.searchOpen")}</span>
+        <span><kbd>{$t("shell.escapeKeyLowercase")}</kbd> {$t("shell.searchClose")}</span>
       </div>
     </div>
   </div>

package/src/editor/lib/UnsavedChanges.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from "../i18n";
   import Icon from "./Icon.svelte";
   let { busy, error, onsave, ondiscard, oncancel }: { busy: boolean; error: string; onsave: () => void; ondiscard: () => void; oncancel: () => void } = $props();
   let dialog: HTMLDialogElement;
@@ -13,15 +14,15 @@
 <dialog bind:this={dialog} class="rigel rigel-modal-backdrop unsaved-dialog" aria-labelledby="unsaved-title" aria-describedby="unsaved-description" oncancel={(event) => { event.preventDefault(); if (!busy) oncancel(); }}>
   <div class="rigel-modal">
     <div class="unsaved-head">
-      <h2 id="unsaved-title">Unsaved changes</h2>
-      <button type="button" class="icon-btn" aria-label="Keep editing" disabled={busy} onclick={oncancel}><Icon name="x" size={16} /></button>
+      <h2 id="unsaved-title">{$t("connection.unsavedTitle")}</h2>
+      <button type="button" class="icon-btn" aria-label={$t("connection.keepEditing")} disabled={busy} onclick={oncancel}><Icon name="x" size={16} /></button>
     </div>
-    <p id="unsaved-description">You have unsaved changes. Save before leaving, or discard this draft?</p>
+    <p id="unsaved-description">{$t("connection.unsavedDescription")}</p>
     {#if error}<p role="alert">{error}</p>{/if}
     <div class="unsaved-actions">
-      <button type="button" bind:this={cancel} disabled={busy} onclick={oncancel}>Keep editing</button>
-      <button type="button" disabled={busy} onclick={ondiscard}>Discard changes</button>
-      <button type="button" class="primary" disabled={busy} onclick={onsave}>{busy ? 'Saving…' : 'Save and leave'}</button>
+      <button type="button" bind:this={cancel} disabled={busy} onclick={oncancel}>{$t("connection.keepEditing")}</button>
+      <button type="button" disabled={busy} onclick={ondiscard}>{$t("connection.discardChanges")}</button>
+      <button type="button" class="primary" disabled={busy} onclick={onsave}>{busy ? $t("connection.saving") : $t("connection.saveAndLeave")}</button>
     </div>
   </div>
 </dialog>