feat(editor): F4.3 the editor's frame and surface; a switch's cloud read and written

packages/editor (React 18, Vite) draws a document as Java FILIUS does: Java's
default hardware icons, the device button of JSidebarButton, cables as
JCablePanel's quadratic curve between the buttons' middles, wireless cables
dashed, documentation items below. The surface moves with mouse and finger
(the pointer captured only once it moved) and zooms with Ctrl and the
wheel, a trackpad pinch, two fingers and the zoom bar; the first view shows
all. German and English catalogs with Java's device names, the dashboard's
colour tokens, the bridge with its origin check. packages/doc gets the
drawing's light view of a document.

Java's Switch.cloud (the Internet in the examples) was lost on reading; it
is now read, kept in the model and written, with FlsOracle and the corpus,
written and exported checks renewed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/editor/src/i18n/i18n.tsx

@@ -0,0 +1,30 @@
+// The editor's visible texts, German and English (plan §7.5): English keys,
+// the words in i18n/{de,en}.json — where Java FILIUS has a word for a thing,
+// Java's (MessagesBundle), so that the terms on worksheets fit. The language
+// comes from the dashboard over the bridge.
+
+import { createContext, useContext, type ReactNode } from 'react';
+import de from './de.json';
+import en from './en.json';
+
+export type Language = 'de' | 'en';
+export const CATALOGS: Readonly<Record<Language, Readonly<Record<string, string>>>> = { de, en };
+
+export type Translate = (key: string, values?: Readonly<Record<string, string | number>>) => string;
+
+/** The text of a key in a language, its {placeholders} filled; the key itself where the catalog has none. */
+export function translate(language: Language, key: string, values: Readonly<Record<string, string | number>> = {}): string {
+  const text = CATALOGS[language][key] ?? key;
+  return text.replace(/\{(\w+)\}/g, (whole, name: string) => (name in values ? String(values[name]) : whole));
+}
+
+const LanguageContext = createContext<Language>('de');
+
+export function LanguageProvider({ language, children }: { readonly language: Language; readonly children: ReactNode }) {
+  return <LanguageContext.Provider value={language}>{children}</LanguageContext.Provider>;
+}
+
+export function useTranslate(): Translate {
+  const language = useContext(LanguageContext);
+  return (key, values) => translate(language, key, values);
+}