@verbaly/studio 0.55.0 → 0.56.1

package/dist/panel/Row.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+  import Marks from './Marks.svelte';
+  import { preview } from './validate';
+  import { SIGNAL, STATE } from './words';
+  import type { Cell, Row } from './model';
+
+  interface Props {
+    row: Row;
+    shown: string[];
+    editing: string | null;
+    onEdit: (id: string | null) => void;
+    onSave: (locale: string, key: string, text: string) => Promise<string | null>;
+  }
+
+  const { row, shown, editing, onEdit, onSave }: Props = $props();
+  const cells = $derived(row.cells.filter((cell) => shown.includes(cell.locale)));
+  // the row's own state is the worst of the languages you are comparing, so the tile never lies
+  const worst = $derived(
+    (['broken', 'missing', 'draft', 'done'] as const).find((s) =>
+      cells.some((c) => c.state === s),
+    ) ?? 'done',
+  );
+
+  let draft: string = $state('');
+  let saving: boolean = $state(false);
+  let refused: string | null = $state(null);
+
+  const live = $derived(preview(row.source, draft));
+  const id = (cell: Cell) => `${cell.locale} ${row.key}`;
+
+  function open(cell: Cell) {
+    draft = cell.text;
+    refused = null;
+    onEdit(id(cell));
+  }
+
+  async function commit(cell: Cell) {
+    if (saving) return;
+    saving = true;
+    refused = await onSave(cell.locale, row.key, draft);
+    saving = false;
+    if (!refused) onEdit(null);
+  }
+
+  function keys(event: KeyboardEvent, cell: Cell) {
+    if (event.key === 'Escape') onEdit(null);
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      void commit(cell);
+    }
+  }
+</script>
+
+<article class="row" class:open={cells.some((c) => editing === id(c))} data-worst={worst}>
+  <span class="tile" data-state={worst}><Marks state={worst} /></span>
+
+  <span class="row-t">
+    <span class="src">{row.source}</span>
+
+    {#each cells as cell (cell.locale)}
+      {#if editing === id(cell)}
+        <span class="tl edit">
+          <span class="disc" data-state={cell.state}>{cell.locale}</span>
+          <!-- svelte-ignore a11y_autofocus -->
+          <textarea
+            class="tf"
+            bind:value={draft}
+            autofocus
+            rows="2"
+            aria-label="Translation for {cell.locale}"
+            onkeydown={(event) => keys(event, cell)}
+          ></textarea>
+        </span>
+        <span class="editbar">
+          {#each live.params as param (param.name)}
+            <span class="pm" class:gone={param.inSource && !param.inTarget}
+              >{param.inSource && !param.inTarget ? '+' : ''}&#123;{param.name}&#125;</span
+            >
+          {/each}
+          {#each live.problems as problem (problem)}
+            <span class="vmsg">{problem}</span>
+          {/each}
+          <!-- the preview is a subset of the gate, so the server only speaks when it saw more -->
+          {#if refused && !live.problems.length}
+            <span class="vmsg">{refused}</span>
+          {/if}
+          <button class="btn sm" disabled={saving} onclick={() => commit(cell)}>
+            {saving ? 'Saving' : 'Save'}
+          </button>
+          <button class="btn sm quiet" onclick={() => onEdit(null)}>Cancel</button>
+          <span class="keys">Enter saves · Esc closes</span>
+        </span>
+      {:else}
+        <span class="tl">
+          <span class="disc" data-state={cell.state}>{cell.locale}</span>
+          {#if cell.text}
+            <button class="tv" onclick={() => open(cell)} title={cell.text}>{cell.text}</button>
+          {:else}
+            <button class="tv none" onclick={() => open(cell)}>{STATE.missing.long}</button>
+          {/if}
+          {#each cell.signals as signal (signal)}
+            <span class="sig" title={SIGNAL[signal] ?? signal}>{SIGNAL[signal] ?? signal}</span>
+          {/each}
+        </span>
+      {/if}
+    {/each}
+  </span>
+</article>
+
+<style>
+  .row {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    min-height: 64px;
+    padding: 12px 20px;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .row:hover {
+    background: var(--ground);
+  }
+
+  .row.open {
+    background: var(--paper);
+    box-shadow: inset 3px 0 0 var(--done);
+    outline: 1px solid var(--rule);
+    outline-offset: -1px;
+  }
+
+  .tile {
+    width: 26px;
+    height: 26px;
+    flex: none;
+    margin-top: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+  }
+
+  .tile[data-state='done'] {
+    color: var(--rule-strong);
+  }
+  .tile[data-state='draft'] {
+    background: var(--draft-tint);
+    color: var(--draft);
+  }
+  .tile[data-state='missing'] {
+    background: var(--missing-tint);
+    color: var(--missing);
+  }
+  .tile[data-state='broken'] {
+    background: var(--broken);
+    color: var(--paper);
+  }
+
+  .row-t {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  /* the original is context: one line, clipped, quieter than the thing you came to correct */
+  .src {
+    font-size: 13.5px;
+    line-height: 1.3;
+    color: var(--muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tl {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .tl.edit {
+    align-items: flex-start;
+  }
+
+  /* a flag is not a language and Windows will not draw one: a disc with the code, in its state */
+  .disc {
+    width: 20px;
+    height: 20px;
+    flex: none;
+    transform: translateY(3px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--hollow);
+    color: var(--body);
+    font-family: var(--mono);
+    font-size: 9px;
+    letter-spacing: -0.02em;
+  }
+
+  .disc[data-state='done'] {
+    background: var(--done-tint);
+    color: var(--done);
+  }
+  .disc[data-state='draft'] {
+    background: var(--draft-tint);
+    color: var(--draft);
+  }
+  .disc[data-state='missing'] {
+    background: var(--missing-tint);
+    color: var(--missing);
+  }
+  .disc[data-state='broken'] {
+    background: var(--broken-tint);
+    color: var(--broken);
+  }
+
+  .tv {
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    text-align: left;
+    font-family: var(--serif);
+    font-size: 17px;
+    line-height: 1.35;
+    color: var(--ink);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: text;
+  }
+
+  /* a signal is a margin note, never a state: it points, it does not judge */
+  .sig {
+    flex: none;
+    font-size: 11px;
+    color: var(--draft);
+    background: var(--draft-tint);
+    border-radius: 4px;
+    padding: 1px 6px;
+    white-space: nowrap;
+  }
+
+  .tv.none {
+    font-family: var(--sans);
+    font-size: 13px;
+    font-style: italic;
+    color: var(--missing);
+  }
+
+  .tf {
+    flex: 1;
+    min-width: 0;
+    font-family: var(--serif);
+    font-size: 17px;
+    line-height: 1.45;
+    color: var(--ink);
+    background: var(--paper);
+    border: 1px solid var(--done);
+    border-radius: var(--radius);
+    padding: 6px 10px;
+    resize: vertical;
+  }
+
+  .tf:focus-visible {
+    outline: 2px solid color-mix(in oklab, var(--done) 26%, transparent);
+    outline-offset: 1px;
+  }
+
+  .editbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+    flex-wrap: wrap;
+  }
+
+  /* a param is a chip so you can see it survive, and the one that did not is dashed and red */
+  .pm {
+    font-family: var(--mono);
+    font-size: 12.5px;
+    color: var(--body);
+    background: var(--hollow);
+    border-radius: 4px;
+    padding: 1px 5px;
+  }
+
+  .pm.gone {
+    background: var(--broken-tint);
+    border: 1px dashed var(--broken);
+    color: var(--broken);
+  }
+
+  .vmsg {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12.5px;
+    color: var(--broken);
+    background: var(--broken-tint);
+    border-radius: var(--radius);
+    padding: 4px 9px;
+  }
+
+  .btn {
+    height: 30px;
+    padding: 0 12px;
+    border: 1px solid var(--done);
+    border-radius: var(--radius);
+    background: var(--done);
+    color: var(--paper);
+    font: inherit;
+    font-size: 12.5px;
+    font-weight: 500;
+    cursor: pointer;
+  }
+
+  .btn.quiet {
+    background: var(--paper);
+    color: var(--body);
+    border-color: var(--rule-strong);
+    font-weight: 400;
+  }
+
+  .btn:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  .keys {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--muted);
+  }
+</style>

package/dist/panel/api.ts

@@ -0,0 +1,82 @@
+import { ask, type Answer } from './wire';
+import type { RawState } from './model';
+
+// Everything the panel can ask for, as one object it is handed rather than one it imports.
+export interface Saved {
+  locale: string;
+  key: string;
+  clearedDraft: boolean;
+}
+
+export interface ReadResult {
+  locale: string;
+  approved: number;
+  keys: string[];
+}
+
+export interface Check {
+  level: 'ok' | 'warn' | 'error';
+  check: string;
+  message: string;
+  fix?: string;
+}
+
+export interface Health {
+  ok: boolean;
+  entries: Check[];
+}
+
+export interface Added {
+  added: Record<string, string[]>;
+  found: number;
+  messages: number;
+}
+
+export interface Plan {
+  pending: Record<string, string[]>;
+  total: number;
+}
+
+export interface Job {
+  id: string;
+  kind: 'translate';
+  state: 'running' | 'done' | 'failed';
+  total: number;
+  done: number;
+  locale?: string;
+  message?: string;
+}
+
+export interface StudioApi {
+  state(): Promise<Answer<RawState>>;
+  health(): Promise<Answer<Health>>;
+  save(locale: string, key: string, text: string): Promise<Answer<Saved>>;
+  setRead(locale: string, keys: string[] | undefined, undo: boolean): Promise<Answer<ReadResult>>;
+  extract(): Promise<Answer<Added>>;
+  // the plan is its own call so that seeing the cost can never start the spending
+  plan(locales: string[]): Promise<Answer<Plan>>;
+  translate(locales: string[]): Promise<Answer<Job>>;
+  job(id?: string): Promise<Answer<Job | null>>;
+}
+
+export function serverApi(token: string): StudioApi {
+  return {
+    state: () => ask<RawState>(token, '/api/state'),
+    health: () => ask<Health>(token, '/api/health'),
+    save: (locale, key, text) =>
+      ask<Saved>(token, `/api/message/${encodeURIComponent(locale)}/${encodeURIComponent(key)}`, {
+        method: 'PUT',
+        body: { text },
+      }),
+    setRead: (locale, keys, undo) =>
+      ask<ReadResult>(token, '/api/approve', { method: 'POST', body: { locale, keys, undo } }),
+    extract: () => ask<Added>(token, '/api/extract', { method: 'POST' }),
+    plan: (locales) => {
+      const query = locales.map((locale) => `locale=${encodeURIComponent(locale)}`).join('&');
+      return ask<Plan>(token, `/api/translate${query ? `?${query}` : ''}`);
+    },
+    translate: (locales) => ask<Job>(token, '/api/translate', { method: 'POST', body: { locales } }),
+    // without an id it asks what is running, which is how a reloaded page finds its bar again
+    job: (id) => ask<Job | null>(token, id ? `/api/job/${encodeURIComponent(id)}` : '/api/job'),
+  };
+}

package/dist/panel/index.ts

@@ -0,0 +1,18 @@
+// What a host needs to render the panel: the component itself is @verbaly/studio/Panel.svelte.
+export { applyState, health, toPanel, visible } from './model';
+export type { Cell, Filter, LocaleHealth, MessageState, Panel, RawState, Row } from './model';
+export { serverApi } from './api';
+export type {
+  Added,
+  Check,
+  Health,
+  Job,
+  Plan,
+  ReadResult,
+  Saved,
+  StudioApi,
+} from './api';
+export type { Answer } from './wire';
+export { preview } from './validate';
+export type { Preview } from './validate';
+export { FILTER, MARK_AS_READ, SIGNAL, STATE, UNDO } from './words';

package/dist/panel/model.ts

@@ -0,0 +1,163 @@
+// The shapes the panel reads: StudioState restated, so the UI never imports Node code.
+export type MessageState = 'done' | 'draft' | 'missing' | 'broken';
+
+export interface Cell {
+  locale: string;
+  text: string;
+  state: MessageState;
+  issue?: string;
+  signals: string[];
+}
+
+export interface Row {
+  key: string;
+  source: string;
+  cells: Cell[];
+  origins: string[];
+}
+
+export interface LocaleHealth {
+  locale: string;
+  source: boolean;
+  total: number;
+  done: number;
+  draft: number;
+  missing: number;
+  broken: number;
+}
+
+export interface Panel {
+  root: string;
+  scanning: boolean;
+  sourceLocale: string;
+  locales: string[];
+  rows: Row[];
+  problems: { scope: string; message: string }[];
+}
+
+type Catalogs = Record<string, Record<string, unknown>>;
+
+export interface RawState {
+  root: string;
+  dir: string;
+  sourceLocale: string;
+  locales: string[];
+  // include: [] means scanning is off, which is not the same as having found nothing
+  scanning: boolean;
+  catalogs: Catalogs;
+  origins: Record<string, string[]>;
+  drafts: Record<string, string[]>;
+  triage: Record<string, Record<string, { signal: string; text: string }[]>>;
+  check: { broken: { locale: string; key: string; severity: string; issue: string }[] };
+  problems: { scope: string; message: string }[];
+}
+
+// a catalog arrives in the shape its file has, so the panel flattens it to read
+function flatten(tree: Record<string, unknown>, prefix = '', out: Record<string, string> = {}) {
+  for (const [key, value] of Object.entries(tree)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (typeof value === 'string') out[path] = value;
+    else if (value && typeof value === 'object' && !Array.isArray(value)) {
+      flatten(value as Record<string, unknown>, path, out);
+    }
+  }
+  return out;
+}
+
+export function toPanel(raw: RawState): Panel {
+  const flat: Record<string, Record<string, string>> = {};
+  for (const locale of raw.locales) flat[locale] = flatten(raw.catalogs[locale] ?? {});
+
+  // the separator is the escape, never the byte: a raw NUL makes git call this file binary
+  const broken = new Map<string, string>();
+  for (const entry of raw.check.broken) {
+    if (entry.severity === 'error') broken.set(`${entry.locale}\u0000${entry.key}`, entry.issue);
+  }
+  const drafts = new Map<string, Set<string>>();
+  for (const [locale, keys] of Object.entries(raw.drafts)) drafts.set(locale, new Set(keys));
+
+  const source = flat[raw.sourceLocale] ?? {};
+  const targets = raw.locales.filter((locale) => locale !== raw.sourceLocale);
+
+  const rows: Row[] = Object.keys(source).map((key) => ({
+    key,
+    source: source[key] ?? '',
+    origins: raw.origins[key] ?? [],
+    cells: targets.map((locale) => {
+      const text = flat[locale]?.[key] ?? '';
+      const issue = broken.get(`${locale}\u0000${key}`);
+      const state: MessageState = issue
+        ? 'broken'
+        : !text
+          ? 'missing'
+          : drafts.get(locale)?.has(key)
+            ? 'draft'
+            : 'done';
+      const signals = (raw.triage?.[locale]?.[key] ?? []).map((reason) => reason.signal);
+      return { locale, text, state, issue, signals };
+    }),
+  }));
+
+  return {
+    root: raw.root,
+    scanning: raw.scanning,
+    sourceLocale: raw.sourceLocale,
+    locales: raw.locales,
+    rows,
+    problems: raw.problems,
+  };
+}
+
+// a projection of the rows, never stored: a saved cell has to move the rail in the same breath
+export function health(panel: Panel): LocaleHealth[] {
+  return panel.locales.map((locale) => {
+    const total = panel.rows.length;
+    if (locale === panel.sourceLocale) {
+      return { locale, source: true, total, done: total, draft: 0, missing: 0, broken: 0 };
+    }
+    const count = { done: 0, draft: 0, missing: 0, broken: 0 };
+    for (const row of panel.rows) {
+      const cell = row.cells.find((c) => c.locale === locale);
+      if (cell) count[cell.state]++;
+    }
+    return { locale, source: false, total, ...count };
+  });
+}
+
+// A command rewrote the catalogs, so every row comes back rather than being patched key by key.
+export function applyState(panel: Panel, raw: RawState): void {
+  Object.assign(panel, toPanel(raw));
+}
+
+export type Empty = 'noCatalogs' | 'oneLocale' | 'pickOne' | 'noMatch';
+
+// An empty screen that names what to click instead of what is true is the worst first run.
+export function emptyReason(panel: Panel, shown: string[], rows: Row[]): Empty | null {
+  if (!panel.rows.length) return 'noCatalogs';
+  if (panel.locales.length < 2) return 'oneLocale';
+  if (!shown.length) return 'pickOne';
+  if (!rows.length) return 'noMatch';
+  return null;
+}
+
+export interface Filter {
+  text: string;
+  state: MessageState | 'all' | 'look';
+  locales: string[];
+}
+
+// One pass over every row: measured at 0.9 ms on 1573 messages, so nothing here is memoized.
+export function visible(rows: Row[], filter: Filter): Row[] {
+  const needle = filter.text.trim().toLowerCase();
+  const shown = new Set(filter.locales);
+  return rows.filter((row) => {
+    const cells = row.cells.filter((cell) => shown.has(cell.locale));
+    if (filter.state === 'look' && !cells.some((cell) => cell.signals.length)) return false;
+    if (filter.state !== 'all' && filter.state !== 'look') {
+      if (!cells.some((cell) => cell.state === filter.state)) return false;
+    }
+    if (!needle) return true;
+    if (row.source.toLowerCase().includes(needle)) return true;
+    return cells.some((cell) => cell.text.toLowerCase().includes(needle));
+  });
+}

package/dist/panel/tokens.css

@@ -0,0 +1,106 @@
+/* The Studio's own layer, on one class: a host puts it on a wrapper, the command on <html>. */
+.verbaly-studio {
+  --paper: #f8fbf7;
+  --ground: #eff4ee;
+  --hollow: #e5ede4;
+  --rule: #d7dfd5;
+  --rule-strong: #828d80;
+  --muted: #636c61;
+  --body: #374036;
+  --ink: #061005;
+  /* the bar never turns: lime on paper is 1.2:1 and the one brand colour cannot vanish on a theme */
+  --bar: #131e12;
+  --on-bar: #f8fbf7;
+
+  --broken: #b43931;
+  --broken-tint: #eee0db;
+  --missing: #8e5a04;
+  --missing-tint: #e9e4d5;
+  --draft: #2267ad;
+  --draft-tint: #dae6ed;
+  --done: #2e7428;
+  --done-tint: #dce8da;
+
+  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
+  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
+
+  --rail: 232px;
+  --radius: 6px;
+}
+
+/* The panel had a dark palette and no way to reach it, so it opened light on a dark machine. */
+@media (prefers-color-scheme: dark) {
+  .verbaly-studio:not([data-theme='light']) {
+    --paper: #10170f;
+    --ground: #161e15;
+    --hollow: #1d271c;
+    --rule: #2a352a;
+    --rule-strong: #6f7a6d;
+    --muted: #9aa598;
+    --body: #d3dbd1;
+    --ink: #f2f7f1;
+
+    --broken: #f08a82;
+    --broken-tint: #3a211f;
+    --missing: #dcae4e;
+    --missing-tint: #352c16;
+    --draft: #7db6e8;
+    --draft-tint: #172a3a;
+    --done: #79c46f;
+    --done-tint: #182c16;
+  }
+}
+
+/* an embedder sets the attribute, which is why it wins over the machine in both directions */
+.verbaly-studio[data-theme='dark'] {
+  --paper: #10170f;
+  --ground: #161e15;
+  --hollow: #1d271c;
+  --rule: #2a352a;
+  --rule-strong: #6f7a6d;
+  --muted: #9aa598;
+  --body: #d3dbd1;
+  --ink: #f2f7f1;
+
+  --broken: #f08a82;
+  --broken-tint: #3a211f;
+  --missing: #dcae4e;
+  --missing-tint: #352c16;
+  --draft: #7db6e8;
+  --draft-tint: #172a3a;
+  --done: #79c46f;
+  --done-tint: #182c16;
+}
+
+.verbaly-studio,
+.verbaly-studio *,
+.verbaly-studio *::before,
+.verbaly-studio *::after {
+  box-sizing: border-box;
+}
+
+.verbaly-studio {
+  color: var(--body);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+.verbaly-studio code,
+.verbaly-studio kbd {
+  font-family: var(--mono);
+  font-size: 0.92em;
+}
+
+/* Nothing loops and nothing moves on its own: only what reports a real process animates. */
+@media (prefers-reduced-motion: reduce) {
+  .verbaly-studio,
+  .verbaly-studio *,
+  .verbaly-studio *::before,
+  .verbaly-studio *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}