@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/content/editingConflicts.ts

@@ -0,0 +1,223 @@
+// The CONFLICT interceptor: when a save is refused because the draft's write chain moved on
+// (someone else saved this draft — code CONFLICT, 412 at the trust boundary), the autosave parks
+// itself and this service raises a modal over the workbench: FORK the local copy into a fresh
+// draft, or ROLL BACK to what the store holds. A service of the workbench like the autosave and
+// the notices — owned by no panel, plain DOM on the body, armed only in the real workbench.
+import { DiContainer, SingleDiToken } from '@mosetta/di';
+import { ContentKind, EditingSession, ILoadedDraft, IPageDoc } from '@mosetta/content';
+import { PREVIEW_TYPE_TOKEN } from '@mosetta/runtime/client';
+import { fullServerTileId } from '@mosetta/server-action/core';
+import {
+  ensureServerActionClient,
+  IServerDataHandle,
+  SERVER_DATA_MANAGER,
+} from '@mosetta/server-action/client';
+import type { ITileReference } from '@mosetta/core';
+import { ContentActionResult, forkPageDraftToken, loadPageDraftToken } from './contentCommon';
+import { EditingNotices, noticesOf } from './editingNotices';
+
+type TForkInput = { name: string; page: IPageDoc; kind?: ContentKind };
+type TForkOutput = ContentActionResult<{ draftId: string; page: IPageDoc }>;
+type TReloadInput = { name: string; draftId: string; kind?: ContentKind };
+type TReloadOutput = ContentActionResult<{ draft: ILoadedDraft<IPageDoc> }>;
+
+const STYLE = `
+.mosetta-conflict { position: fixed; inset: 0; z-index: 2147483090; display: flex; align-items: center;
+  justify-content: center; background: rgb(24 24 27 / 45%); }
+.mosetta-conflict__card { width: 380px; max-width: calc(100vw - 48px); padding: 20px; border-radius: 8px;
+  background: #ffffff; color: #18181b; font: 13px/1.55 ui-sans-serif, system-ui, sans-serif;
+  box-shadow: 0 12px 32px rgb(0 0 0 / 25%); }
+.mosetta-conflict__title { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
+.mosetta-conflict__text { margin: 0 0 16px; color: #3f3f46; }
+.mosetta-conflict__actions { display: flex; gap: 8px; justify-content: flex-end; }
+.mosetta-conflict__button { padding: 6px 12px; border: 1px solid #d4d4d8; border-radius: 6px;
+  background: #ffffff; color: #18181b; font: inherit; cursor: pointer; }
+.mosetta-conflict__button:hover { background: #f4f4f5; }
+.mosetta-conflict__button--fork { border-color: #2563eb; background: #2563eb; color: #ffffff; }
+.mosetta-conflict__button--fork:hover { background: #1d4ed8; }
+.mosetta-conflict__error { margin: 12px 0 0; color: #dc2626; }
+`;
+
+export class EditingConflicts {
+  private overlay: HTMLElement | null = null;
+
+  private errorLine: HTMLElement | null = null;
+
+  private forkInFlight = false;
+
+  private reloadInFlight = false;
+
+  /** the SESSION the in-flight resolution belongs to — the facade routes at access time, and a
+   * canvas switch mid-request must not open the result into the other canvas's session */
+  private resolveInto: { openPage: EditingSession['openPage']; pageName: string; kind: ContentKind } | null = null;
+
+  constructor(
+    private readonly session: EditingSession,
+    private readonly fork: IServerDataHandle<TForkOutput, TForkInput>,
+    private readonly reload: IServerDataHandle<TReloadOutput, TReloadInput>,
+    private readonly notices: EditingNotices | null,
+  ) {
+    this.session.subscribe(this.onSessionChanged);
+    this.fork.subscribe(this.onForkSettled);
+    this.reload.subscribe(this.onReloadSettled);
+  }
+
+  private readonly onSessionChanged = (): void => {
+    const state = this.session.snapshot();
+    if (state.saveFailure === 'CONFLICT' && state.doc && state.pageName !== null && state.draftId !== null) {
+      this.show();
+      return;
+    }
+    // any resolution clears the failure (openPage resets it) — the modal must follow
+    if (state.saveFailure !== 'CONFLICT') this.hide();
+  };
+
+  private readonly onFork = (): void => {
+    if (this.forkInFlight) return;
+    const { kind, pageName, doc } = this.session.snapshot();
+    if (pageName === null || !doc) return;
+    this.forkInFlight = true;
+    this.resolveInto = { openPage: this.session.openPage.bind(this.session), pageName, kind };
+    this.fork.snapshot().start!({ name: pageName, page: doc, kind });
+  };
+
+  private readonly onRollback = (): void => {
+    if (this.reloadInFlight) return;
+    const { kind, pageName, draftId } = this.session.snapshot();
+    if (pageName === null || draftId === null) return;
+    this.reloadInFlight = true;
+    this.resolveInto = { openPage: this.session.openPage.bind(this.session), pageName, kind };
+    this.reload.snapshot().start!({ name: pageName, draftId, kind });
+  };
+
+  private readonly onForkSettled = (): void => {
+    const data = this.fork.snapshot();
+    if (data.isLoading() || !this.forkInFlight) return;
+    this.forkInFlight = false;
+    if (data.isSuccess()) {
+      if (!data.serverData.ok) {
+        this.showError(data.serverData.code);
+        return;
+      }
+      if (this.resolveInto) {
+        const { draftId, page } = data.serverData;
+        // the local copy lives on under its fresh identity; opening it clears the failure → hides
+        this.resolveInto.openPage(this.resolveInto.pageName, draftId, page, this.resolveInto.kind);
+        this.notices?.show('fork', 'Forked into your own draft');
+      }
+      return;
+    }
+    if (data.isError()) this.showError(data.serverError.code);
+  };
+
+  private readonly onReloadSettled = (): void => {
+    const data = this.reload.snapshot();
+    if (data.isLoading() || !this.reloadInFlight) return;
+    this.reloadInFlight = false;
+    if (data.isSuccess()) {
+      if (!data.serverData.ok) {
+        // the draft may be GONE (someone published or discarded it) — nothing to roll back onto
+        this.showError(data.serverData.code === 'NO_DRAFT'
+          ? 'the draft is gone from the store — fork your copy instead'
+          : data.serverData.code);
+        return;
+      }
+      if (this.resolveInto) {
+        const { draft } = data.serverData;
+        this.resolveInto.openPage(draft.name, draft.id, draft.doc, this.resolveInto.kind);
+        this.notices?.show('undo', 'Rolled back to the saved draft');
+      }
+      return;
+    }
+    if (data.isError()) this.showError(data.serverError.code);
+  };
+
+  private show(): void {
+    if (this.overlay?.isConnected) return;
+    const style = document.createElement('style');
+    style.textContent = STYLE;
+    document.head.appendChild(style);
+
+    this.overlay = document.createElement('div');
+    this.overlay.className = 'mosetta-conflict';
+    this.overlay.setAttribute('data-test-id', 'conflict-modal');
+
+    const card = document.createElement('div');
+    card.className = 'mosetta-conflict__card';
+    const title = document.createElement('p');
+    title.className = 'mosetta-conflict__title';
+    title.textContent = 'This draft was saved by someone else';
+    const text = document.createElement('p');
+    text.className = 'mosetta-conflict__text';
+    text.textContent = 'Your copy and the stored draft have diverged. Fork to keep working on your own copy, '
+      + 'or roll back to the stored draft — your unsaved changes will be lost.';
+
+    const actions = document.createElement('div');
+    actions.className = 'mosetta-conflict__actions';
+    const rollback = document.createElement('button');
+    rollback.type = 'button';
+    rollback.className = 'mosetta-conflict__button';
+    rollback.setAttribute('data-test-id', 'conflict-rollback-button');
+    rollback.textContent = 'Roll back my changes';
+    rollback.addEventListener('click', this.onRollback);
+    const forkButton = document.createElement('button');
+    forkButton.type = 'button';
+    forkButton.className = 'mosetta-conflict__button mosetta-conflict__button--fork';
+    forkButton.setAttribute('data-test-id', 'conflict-fork-button');
+    forkButton.textContent = 'Fork my copy';
+    forkButton.addEventListener('click', this.onFork);
+    actions.append(rollback, forkButton);
+
+    this.errorLine = document.createElement('p');
+    this.errorLine.className = 'mosetta-conflict__error';
+    this.errorLine.setAttribute('data-test-id', 'conflict-error');
+    this.errorLine.style.display = 'none';
+
+    card.append(title, text, actions, this.errorLine);
+    this.overlay.appendChild(card);
+    document.body.appendChild(this.overlay);
+  }
+
+  private showError(message: string): void {
+    if (!this.errorLine) return;
+    this.errorLine.textContent = message;
+    this.errorLine.style.display = 'block';
+  }
+
+  private hide(): void {
+    this.overlay?.remove();
+    this.overlay = null;
+    this.errorLine = null;
+  }
+}
+
+export const EDITING_CONFLICTS_TOKEN = new SingleDiToken<EditingConflicts>('EDITING_CONFLICTS_TOKEN');
+
+/**
+ * Armed the way the autosave is (whichever widget touches the session first), and only in the
+ * real workbench: a palette specimen never saves, so it can never conflict — but its window is
+ * the editor's, and a modal from a demo would cover the real work.
+ */
+export function ensureEditingConflicts(di: DiContainer, session: EditingSession, reference: ITileReference): void {
+  if (typeof window === 'undefined') return;
+  if (di.hasByToken(EDITING_CONFLICTS_TOKEN)) return;
+  if (di.hasByToken(PREVIEW_TYPE_TOKEN) && di.getByToken(PREVIEW_TYPE_TOKEN) !== null) return;
+  ensureServerActionClient(di);
+  const manager = di.getByToken(SERVER_DATA_MANAGER);
+  const moduleOf = (name: string | undefined) => fullServerTileId({
+    namespace: reference.namespace,
+    version: reference.version,
+    name: name ?? reference.name,
+  });
+  const fork = manager.createManual<TForkInput, TForkOutput>({
+    fullId: moduleOf(forkPageDraftToken.serverModuleName),
+    actionName: forkPageDraftToken.actionName,
+    invalidates: forkPageDraftToken.invalidates ?? [],
+  });
+  const reload = manager.createManual<TReloadInput, TReloadOutput>({
+    fullId: moduleOf(loadPageDraftToken.serverModuleName),
+    actionName: loadPageDraftToken.actionName,
+    invalidates: loadPageDraftToken.invalidates ?? [],
+  });
+  di.registerValueOfToken(EDITING_CONFLICTS_TOKEN, new EditingConflicts(session, fork, reload, noticesOf(di)));
+}

package/tiles/content/editingHotkeys.ts

@@ -0,0 +1,59 @@
+// Ctrl+Z / Ctrl+Shift+Z (and their Cmd twins) for the editing session — a service of the
+// workbench, brought into being the way the session and the autosave are: by whichever widget
+// touches the session first, owned by none of them (a closed panel takes nothing with it).
+//
+// Armed ONLY in the real workbench (PREVIEW_TYPE null): a palette specimen runs its own session
+// in the same window, and a listener per specimen would undo in every demo at once.
+import { DiContainer, SingleDiToken } from '@mosetta/di';
+import { EditingSession } from '@mosetta/content';
+import { PREVIEW_TYPE_TOKEN } from '@mosetta/runtime/client';
+import { EditingNotices, noticesOf } from './editingNotices';
+
+/**
+ * Whether the event was born inside a form control or anything contenteditable — such a field
+ * keeps its own native undo/copy/paste, and the session never hears about it. Duck-typed on
+ * purpose: `instanceof HTMLElement` names one realm's class, and an element from another realm
+ * is no instance of it.
+ */
+export function fieldOwnsEvent(target: unknown): boolean {
+  const element = target as { tagName?: unknown; isContentEditable?: unknown } | null;
+  if (element?.isContentEditable === true) return true;
+  return typeof element?.tagName === 'string' && /^(input|textarea|select)$/i.test(element.tagName);
+}
+
+export class EditingHotkeys {
+  constructor(
+    private readonly session: EditingSession,
+    private readonly notices: EditingNotices | null,
+  ) {
+    window.addEventListener('keydown', this.onKeyDown);
+  }
+
+  private readonly onKeyDown = (event: KeyboardEvent): void => {
+    if (fieldOwnsEvent(event.target)) return;
+    // Escape leaves the move mode — the one mode with nothing else to leave it by keyboard
+    if (event.key === 'Escape' && this.session.snapshot().movingNodeId !== null) {
+      event.preventDefault();
+      this.session.cancelMove();
+      return;
+    }
+    if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 'z') return;
+    event.preventDefault();
+    // a notice only for a step that HAPPENED — an empty stack stays silent
+    const before = this.session.snapshot().doc;
+    if (event.shiftKey) this.session.redo();
+    else this.session.undo();
+    if (this.session.snapshot().doc === before) return;
+    if (event.shiftKey) this.notices?.show('redo', 'Redone');
+    else this.notices?.show('undo', 'Undone');
+  };
+}
+
+export const EDITING_HOTKEYS_TOKEN = new SingleDiToken<EditingHotkeys>('EDITING_HOTKEYS_TOKEN');
+
+export function ensureEditingHotkeys(di: DiContainer, session: EditingSession): void {
+  if (typeof window === 'undefined') return; // ssr render has no keys to listen for
+  if (di.hasByToken(EDITING_HOTKEYS_TOKEN)) return;
+  if (di.hasByToken(PREVIEW_TYPE_TOKEN) && di.getByToken(PREVIEW_TYPE_TOKEN) !== null) return;
+  di.registerValueOfToken(EDITING_HOTKEYS_TOKEN, new EditingHotkeys(session, noticesOf(di)));
+}

package/tiles/content/editingNotices.ts

@@ -0,0 +1,105 @@
+// Transient NOTICES in the top-right corner — icon plus a line of text — for the gestures whose
+// outcome is otherwise invisible at the pointer: copy/cut/paste and undo/redo. A service of the
+// workbench like the autosave and the hotkeys, and deliberately PLAIN DOM: no panel may own the
+// layer (panels close), and a service that draws its own fixed container on the body needs no
+// react host and no module-scoped css — one injected style tag, prefixed class names.
+import { DiContainer, SingleDiToken } from '@mosetta/di';
+import { PREVIEW_TYPE_TOKEN } from '@mosetta/runtime/client';
+
+export type TNoticeKind = 'copy' | 'cut' | 'paste' | 'undo' | 'redo' | 'move' | 'fork' | 'link' | 'publish' | 'refuse' | 'delete';
+
+/** how long a notice stands before it fades */
+const NOTICE_MS = 2400;
+
+const STROKE = 'fill="none" stroke="currentColor" stroke-width="1.6"';
+
+// the same glyphs the canvas bar wears — one visual language for the action and its receipt
+const ICONS: Record<TNoticeKind, string> = {
+  copy: `<svg viewBox="0 0 16 16"><rect x="5.6" y="5.6" width="7.6" height="7.6" rx="1.4" ${STROKE}/>`
+    + `<path d="M3 10.4V4.4A1.6 1.6 0 0 1 4.6 2.8h6" ${STROKE}/></svg>`,
+  cut: `<svg viewBox="0 0 16 16"><circle cx="4" cy="4.2" r="2" ${STROKE}/><circle cx="4" cy="11.8" r="2" ${STROKE}/>`
+    + `<path d="M13.4 2.6L5.6 10.7M5.6 5.3l3.2 3.3M9.9 9.6l3.5 3.8" ${STROKE}/></svg>`,
+  paste: '<svg viewBox="0 0 16 16"><path d="M10.4 2.9h1.2A1.4 1.4 0 0 1 13 4.3v9A1.4 1.4 0 0 1 11.6 14.7H4.4'
+    + `A1.4 1.4 0 0 1 3 13.3v-9A1.4 1.4 0 0 1 4.4 2.9h1.2" ${STROKE}/>`
+    + `<rect x="5.5" y="1.4" width="5" height="2.9" rx="0.7" ${STROKE}/></svg>`,
+  undo: `<svg viewBox="0 0 16 16"><path d="M2 4.7v4h4" ${STROKE}/><path d="M14 11.3a6 6 0 0 0-10-4.4L2 8.7" ${STROKE}/></svg>`,
+  redo: `<svg viewBox="0 0 16 16"><path d="M14 4.7v4h-4" ${STROKE}/><path d="M2 11.3a6 6 0 0 1 10-4.4L14 8.7" ${STROKE}/></svg>`,
+  move: `<svg viewBox="0 0 16 16"><path d="M8 2.5v11M2.5 8h11" ${STROKE}/>`
+    + `<path d="M6 4.5L8 2.5l2 2M6 11.5L8 13.5l2-2M4.5 6L2.5 8l2 2M11.5 6L13.5 8l-2 2" ${STROKE}/></svg>`,
+  fork: `<svg viewBox="0 0 16 16"><circle cx="4" cy="3.5" r="1.8" ${STROKE}/><circle cx="12" cy="3.5" r="1.8" ${STROKE}/>`
+    + `<circle cx="8" cy="12.5" r="1.8" ${STROKE}/><path d="M4 5.3v1.2a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3V5.3M8 9.5v1.2" ${STROKE}/></svg>`,
+  link: `<svg viewBox="0 0 16 16"><path d="M6.8 9.2a3 3 0 0 0 4.2 0l2-2a3 3 0 0 0-4.2-4.2l-1 1" ${STROKE}/>`
+    + `<path d="M9.2 6.8a3 3 0 0 0-4.2 0l-2 2a3 3 0 0 0 4.2 4.2l1-1" ${STROKE}/></svg>`,
+  publish: `<svg viewBox="0 0 16 16"><path d="M8 12.6V4M4.6 7.2L8 3.6l3.4 3.6" ${STROKE}/><path d="M3 13.6h10" ${STROKE}/></svg>`,
+  refuse: `<svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="5.6" ${STROKE}/><path d="M4.4 4.4l7.2 7.2" ${STROKE}/></svg>`,
+  delete: `<svg viewBox="0 0 16 16"><path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.7 8.5h5.6l.7-8.5M6.7 7v3.7M9.3 7v3.7" ${STROKE}/></svg>`,
+};
+
+const STYLE = `
+.mosetta-notices { position: fixed; top: 12px; right: 12px; z-index: 2147483100; display: flex;
+  flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
+.mosetta-notice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px;
+  background: #27272a; color: #ffffff; font: 13px/18px ui-sans-serif, system-ui, sans-serif;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%); opacity: 0; transform: translateY(-6px);
+  transition: opacity 0.2s ease, transform 0.2s ease; }
+.mosetta-notice--shown { opacity: 1; transform: translateY(0); }
+.mosetta-notice__icon { display: flex; }
+.mosetta-notice__icon svg { width: 14px; height: 14px; display: block; }
+`;
+
+/** "Copied 2 blocks" and its kin — the counts every clipboard notice speaks in */
+export function blocksLabel(verb: string, count: number): string {
+  return `${verb} ${count} block${count === 1 ? '' : 's'}`;
+}
+
+export class EditingNotices {
+  private container: HTMLElement | null = null;
+
+  show(kind: TNoticeKind, text: string): void {
+    const toast = document.createElement('div');
+    toast.className = 'mosetta-notice';
+    toast.setAttribute('data-test-id', 'notice');
+    toast.setAttribute('data-notice-kind', kind);
+    const icon = document.createElement('span');
+    icon.className = 'mosetta-notice__icon';
+    icon.setAttribute('aria-hidden', 'true');
+    icon.innerHTML = ICONS[kind];
+    const label = document.createElement('span');
+    label.textContent = text;
+    toast.append(icon, label);
+    this.host().appendChild(toast);
+    // the shown class lands a frame later, so the slide-in transition has a state to start from.
+    // The WINDOW's rAF, not the bare global: this service runs wherever the workbench realm is
+    // mounted, and a bare name resolves against the module's own realm (node in the jsdom e2e)
+    window.requestAnimationFrame(() => toast.classList.add('mosetta-notice--shown'));
+    setTimeout(() => {
+      toast.classList.remove('mosetta-notice--shown');
+      setTimeout(() => toast.remove(), 300);
+    }, NOTICE_MS);
+  }
+
+  private host(): HTMLElement {
+    if (this.container?.isConnected) return this.container;
+    const style = document.createElement('style');
+    style.textContent = STYLE;
+    document.head.appendChild(style);
+    this.container = document.createElement('div');
+    this.container.className = 'mosetta-notices';
+    this.container.setAttribute('data-test-id', 'notices');
+    document.body.appendChild(this.container);
+    return this.container;
+  }
+}
+
+export const EDITING_NOTICES_TOKEN = new SingleDiToken<EditingNotices>('EDITING_NOTICES_TOKEN');
+
+/**
+ * The workbench's notices, or null where they must stay silent: server renders, and preview
+ * containers — a palette specimen performing its demo gestures must not toast over the editor.
+ */
+export function noticesOf(di: DiContainer): EditingNotices | null {
+  if (typeof window === 'undefined') return null;
+  if (di.hasByToken(PREVIEW_TYPE_TOKEN) && di.getByToken(PREVIEW_TYPE_TOKEN) !== null) return null;
+  if (!di.hasByToken(EDITING_NOTICES_TOKEN)) di.registerValueOfToken(EDITING_NOTICES_TOKEN, new EditingNotices());
+  return di.getByToken(EDITING_NOTICES_TOKEN);
+}

package/tiles/content/formRoot.ts

@@ -0,0 +1,18 @@
+// Which root mounts a block's editor facet: the block's own library ships a root → it renders
+// its own blocks and their forms (a form written in another binding is shown by that binding);
+// otherwise the editor's own page root does. Shared by every host of editor facets — the settings
+// panel's form and a provider's chrome in the canvas corner.
+import { compareVersions, versionOfReference } from '@mosetta/content';
+import type { ICatalogEntry } from '@mosetta/content';
+import type { ITileReference } from '@mosetta/core';
+
+const namespaceOf = (reference: string) => /^_ns_(.+?)_t_/.exec(reference)?.[1] ?? '';
+
+export function formRootOf(components: readonly ICatalogEntry[], blockReference: string, editor: ITileReference): string {
+  // the catalog names a version dotted, an id spells it with underscores: compared as versions
+  const version = versionOfReference(blockReference);
+  const library = version === null ? undefined : components.find((c) => c.isRoot
+    && c.reference.namespace === namespaceOf(blockReference)
+    && compareVersions(c.reference.version, version) === 0)?.id;
+  return library ?? `_ns_${editor.namespace}_t_component_n_page_v_${editor.version}`;
+}

package/tiles/content/fuzzySearch.ts

@@ -0,0 +1,121 @@
+// A forgiving search for short names (blocks, layouts): pure functions, no react.
+//
+// It extends the pages panel's tiers (pagesSearch.matchPath: prefix → initials → substring →
+// scatter) with two kinds of forgiveness people need when typing fast:
+//
+//   WRONG KEYBOARD LAYOUT — the term typed with the Russian layout on is read as the Latin keys
+//     it was typed on, and the other way round: `руфвштп` finds heading, `йцук` finds qwer.
+//     Both spellings are tried; the one as typed wins a tie.
+//   TYPOS — when no tier accepts the term, a tier 4 accepts it within a small edit distance of
+//     the beginning of some word of the name (optimal string alignment: a swapped pair of
+//     neighbours is one edit): `haeding`, `hedaing`, `headng` all find heading. One edit for a
+//     term of 3–4 characters, two from 5; none below 3 — a two-letter term within one edit of
+//     everything would match everything.
+//
+// Every match carries the indices to highlight, like the tiers it extends.
+import { IPathMatch, matchPath, wordStarts } from '../pagesPanel/pagesSearch';
+
+const LATIN = 'qwertyuiop[]asdfghjkl;\'zxcvbnm,./`';
+const CYRILLIC = 'йцукенгшщзхъфывапролджэячсмитьбю.ё';
+
+const toLatin = new Map<string, string>();
+const toCyrillic = new Map<string, string>();
+for (let i = 0; i < LATIN.length; i += 1) {
+  toLatin.set(CYRILLIC[i], LATIN[i]);
+  toCyrillic.set(LATIN[i], CYRILLIC[i]);
+}
+
+/**
+ * The same keys read in the other layout: Cyrillic letters become the Latin keys they sit on,
+ * Latin keys become the Cyrillic letters. Characters of neither (digits, spaces) stay.
+ */
+export function otherLayout(text: string): string {
+  let out = '';
+  for (const ch of text.toLowerCase()) {
+    // a Cyrillic letter first: '.' is both a Cyrillic key (ю's neighbour) and a Latin one
+    out += toLatin.get(ch) ?? toCyrillic.get(ch) ?? ch;
+  }
+  return out;
+}
+
+/** edits between two strings — insert, delete, substitute, or swap two neighbours */
+export function editDistance(a: string, b: string): number {
+  const rows = a.length + 1;
+  const cols = b.length + 1;
+  const d: number[][] = Array.from({ length: rows }, (_, i) => Array.from({ length: cols }, (__, j) => (i === 0 ? j : j === 0 ? i : 0)));
+  for (let i = 1; i < rows; i += 1) {
+    for (let j = 1; j < cols; j += 1) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost);
+      if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) {
+        d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + 1);
+      }
+    }
+  }
+  return d[rows - 1][cols - 1];
+}
+
+/** how many edits a term of this length may carry */
+function allowedEdits(length: number): number {
+  if (length < 3) return 0;
+  return length <= 4 ? 1 : 2;
+}
+
+/**
+ * Tier 4: the term, give or take a few edits, is how a word of the name BEGINS — the beginning of
+ * the name, or of any word inside it (after a separator, at a camelCase hump).
+ */
+function typoMatch(text: string, term: string): IPathMatch | null {
+  const edits = allowedEdits(term.length);
+  if (edits === 0) return null;
+  const lower = text.toLowerCase();
+  let best: { distance: number; start: number; length: number } | null = null;
+  for (const start of wordStarts(text)) {
+    for (let length = Math.max(1, term.length - edits); length <= term.length + edits; length += 1) {
+      if (start + length > lower.length) break;
+      const distance = editDistance(term, lower.slice(start, start + length));
+      if (distance > edits) continue;
+      if (!best || distance < best.distance || (distance === best.distance && start < best.start)) {
+        best = { distance, start, length };
+      }
+    }
+  }
+  if (!best) return null;
+  return {
+    tier: 4,
+    score: best.distance * 10_000 + best.start * 100 + text.length,
+    indices: Array.from({ length: best.length }, (_, i) => best.start + i),
+  };
+}
+
+const better = (a: IPathMatch | null, b: IPathMatch | null): IPathMatch | null => {
+  if (!a) return b;
+  if (!b) return a;
+  return b.tier < a.tier || (b.tier === a.tier && b.score < a.score) ? b : a;
+};
+
+/** null = no match; otherwise the best match of the term as typed or in the other layout */
+export function matchFuzzy(text: string, term: string): IPathMatch | null {
+  const typed = term.trim().toLowerCase();
+  if (!typed) return { tier: 0, score: 0, indices: [] };
+  const spellings = [typed, otherLayout(typed)].filter((s, i, all) => all.indexOf(s) === i);
+  let best: IPathMatch | null = null;
+  spellings.forEach((spelling, i) => {
+    const match = matchPath(text, spelling) ?? typoMatch(text, spelling);
+    // the other layout loses a tie: what was typed is more likely what was meant
+    best = better(best, match && i > 0 ? { ...match, score: match.score + 1 } : match);
+  });
+  return best;
+}
+
+/** matches sorted best-first; ties break by score, then alphabetically */
+export function rankFuzzy<T>(items: readonly T[], term: string, textOf: (item: T) => string): Array<{ item: T; match: IPathMatch }> {
+  return items
+    .flatMap((item) => {
+      const match = matchFuzzy(textOf(item), term);
+      return match ? [{ item, match }] : [];
+    })
+    .sort((a, b) => a.match.tier - b.match.tier
+      || a.match.score - b.match.score
+      || textOf(a.item).localeCompare(textOf(b.item)));
+}

package/tiles/content/mediaUpload.ts

@@ -0,0 +1,55 @@
+// The workbench's uploader: a File from a settings form → the host signs an upload for exactly
+// that file (MEDIA_UPLOAD_PATH: the store's key stays with the host) → the browser PUTs the file
+// straight to the store → the file's public URL. Registered ONCE in the workbench container under
+// MEDIA_UPLOAD_TOKEN; a hosted form (an Image or a Video block's facet) finds it through the
+// parent chain. A video of a hundred megabytes never passes through a server action.
+import { DiContainer } from '@mosetta/di';
+import { MEDIA_UPLOAD_TOKEN } from '@mosetta/react';
+import { MEDIA_UPLOAD_PATH, mediaIssue } from '@mosetta/content/media';
+
+interface ISignedUpload {
+  readonly upload?: { readonly method: string; readonly url: string; readonly headers: Readonly<Record<string, string>> };
+  readonly url?: string;
+  readonly error?: { readonly code?: string; readonly message?: string };
+}
+
+const refusal = (status: number, body: ISignedUpload | null): string => {
+  if (body?.error?.message) return body.error.message;
+  if (status === 401) return 'Your editing session has ended — reload the page to sign in again (nothing on the page is lost)';
+  if (status === 403) return 'You may not upload to this project';
+  return `The upload could not start (${status})`;
+};
+
+/** the PUT itself: XHR, not fetch — a large video needs its progress shown */
+function put(signed: NonNullable<ISignedUpload['upload']>, file: File, onProgress?: (fraction: number) => void): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(signed.method, signed.url);
+    for (const [name, value] of Object.entries(signed.headers)) xhr.setRequestHeader(name, value);
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable) onProgress?.(e.loaded / e.total);
+    };
+    xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error(`The store refused the file (${xhr.status})`)));
+    xhr.onerror = () => reject(new Error('The upload was interrupted — check the connection and try again'));
+    xhr.send(file);
+  });
+}
+
+export function ensureMediaUpload(di: DiContainer): void {
+  if (typeof window === 'undefined' || di.hasByToken(MEDIA_UPLOAD_TOKEN)) return;
+  di.registerValueOfToken(MEDIA_UPLOAD_TOKEN, {
+    async upload(file: File, onProgress?: (fraction: number) => void): Promise<string> {
+      const issue = mediaIssue(file.type, file.size);
+      if (issue) throw new Error(issue);
+      const res = await fetch(MEDIA_UPLOAD_PATH, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ name: file.name, type: file.type, size: file.size }),
+      });
+      const body = (await res.json().catch(() => null)) as ISignedUpload | null;
+      if (!res.ok || !body?.upload || !body.url) throw new Error(refusal(res.status, body));
+      await put(body.upload, file, onProgress);
+      return body.url;
+    },
+  });
+}

package/tiles/content/moduleSiblings.ts

@@ -0,0 +1,9 @@
+// A module's SIBLING by name: same namespace, same version — only the name swapped. How editor
+// blocks address each other for the dock's open-by-reference: a module knows its own reference
+// (useComponent), and its siblings shipped in the same build, so deriving is exact where a
+// hard-coded reference would rot with every version bump.
+import type { ITileReference } from '@mosetta/core';
+
+export function siblingReference({ namespace, version }: ITileReference, name: string): string {
+  return `_ns_${namespace}_t_component_n_${name}_v_${version}`;
+}