@verbaly/studio 0.54.0 → 0.56.0

package/dist/panel/Health.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  interface Entry {
+    level: 'ok' | 'warn' | 'error';
+    check: string;
+    message: string;
+    fix?: string;
+  }
+
+  interface Props {
+    entries: Entry[];
+    ok: boolean;
+    onClose: () => void;
+  }
+
+  const { entries, ok, onClose }: Props = $props();
+
+  // doctor names the part of the compiler that answered; this says what it means for your project
+  const TITLE: Record<string, string> = {
+    config: 'Your settings',
+    cli: 'The verbaly command',
+    catalogs: 'Your catalogs',
+    routing: 'Where the language lives in your urls',
+    plugin: 'The piece that wires your build',
+    types: 'The generated types',
+    sources: 'Reading your code',
+    orphans: 'Keys nothing in your code uses',
+    bundle: 'What the browser downloads',
+    translations: 'The translations themselves',
+  };
+
+  const bad = $derived(entries.filter((e) => e.level !== 'ok').length);
+</script>
+
+<section class="health" aria-label="Health">
+  <header>
+    <h2>{ok ? 'Nothing is broken' : `${bad} of ${entries.length} need you`}</h2>
+    <p>
+      This is the same check <code>npx verbaly doctor</code> runs, read out loud. It looks at your
+      settings, your catalogs and the way your build is wired, and it never changes anything.
+    </p>
+    <button class="close" onclick={onClose}>Back to the messages</button>
+  </header>
+
+  <ul>
+    <!-- doctor can report the same check twice, so the position is the only unique key here -->
+    {#each entries as entry, i (i)}
+      <li data-level={entry.level}>
+        <span class="mark" aria-hidden="true">
+          {#if entry.level === 'ok'}
+            <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3.4 8.4 3 3 6.2-6.8" /></svg>
+          {:else if entry.level === 'warn'}
+            <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M8 4v5" /><path d="M8 12h.01" /></svg>
+          {:else}
+            <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8" /></svg>
+          {/if}
+        </span>
+        <span class="body">
+          <b>{TITLE[entry.check] ?? entry.check}</b>
+          <span class="msg">{entry.message}</span>
+          {#if entry.fix}
+            <span class="fix">{entry.fix}</span>
+          {/if}
+        </span>
+        <span class="sr">{entry.level}</span>
+      </li>
+    {/each}
+  </ul>
+</section>
+
+<style>
+  .health {
+    flex: 1;
+    min-width: 0;
+    overflow-y: auto;
+    background: var(--paper);
+  }
+
+  header {
+    padding: 28px 24px 20px;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 21px;
+    font-weight: 500;
+    letter-spacing: -0.014em;
+    color: var(--ink);
+  }
+
+  header p {
+    margin: 8px 0 0;
+    max-width: 64ch;
+    font-size: 13px;
+    color: var(--muted);
+  }
+
+  .close {
+    margin-top: 16px;
+    padding: 5px 12px;
+    border: 1px solid var(--rule-strong);
+    border-radius: var(--radius);
+    background: var(--paper);
+    color: var(--body);
+    font: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+  }
+
+  .close:hover {
+    background: var(--ground);
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 24px;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .mark {
+    width: 20px;
+    height: 20px;
+    flex: none;
+    margin-top: 1px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--done-tint);
+    color: var(--done);
+  }
+
+  [data-level='warn'] .mark {
+    background: var(--missing-tint);
+    color: var(--missing);
+  }
+
+  [data-level='error'] .mark {
+    background: var(--broken-tint);
+    color: var(--broken);
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  b {
+    font-size: 13.5px;
+    font-weight: 500;
+    color: var(--ink);
+  }
+
+  .msg {
+    font-size: 13px;
+    color: var(--body);
+  }
+
+  /* the remedy is the whole point of a diagnosis, so it never hides behind a disclosure */
+  .fix {
+    margin-top: 4px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--draft);
+  }
+
+  .sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+</style>

package/dist/panel/Marks.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { MessageState } from './model';
+
+  // Each ink carries its own mark, so the ladder reads in greyscale and to a colourblind eye.
+  const { state }: { state: MessageState } = $props();
+
+  const WORD: Record<MessageState, string> = {
+    done: 'translated',
+    draft: 'written by a machine',
+    missing: 'not translated, shows in your source language',
+    broken: 'breaks your site',
+  };
+</script>
+
+{#if state === 'done'}
+  <svg viewBox="0 0 22 22" width="15" height="15" aria-hidden="true">
+    <path d="M5 11h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+  </svg>
+{:else if state === 'missing'}
+  <svg viewBox="0 0 22 22" width="15" height="15" aria-hidden="true" fill="none">
+    <path
+      d="M6 12.5 11 7l5 5.5"
+      stroke="currentColor"
+      stroke-width="1.7"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M11 8v7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
+  </svg>
+{:else if state === 'draft'}
+  <svg viewBox="0 0 22 22" width="15" height="15" aria-hidden="true" fill="none">
+    <path
+      d="M4.5 12.5c1.6-2.2 3.2-2.2 4.8 0s3.2 2.2 4.8 0 3.2-2.2 4.8 0"
+      stroke="currentColor"
+      stroke-width="1.7"
+      stroke-linecap="round"
+    />
+  </svg>
+{:else}
+  <svg viewBox="0 0 22 22" width="15" height="15" aria-hidden="true">
+    <path d="M11 6v6.4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+    <circle cx="11" cy="16" r="1.2" fill="currentColor" />
+  </svg>
+{/if}
+<span class="sr">{WORD[state]}</span>
+
+<style>
+  .sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+</style>

package/dist/panel/Panel.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">
+  import HealthView from './Health.svelte';
+  import Rail from './Rail.svelte';
+  import RowView from './Row.svelte';
+  import { applyState, health, visible, type Panel } from './model';
+  import Actions from './Actions.svelte';
+  import type { Check, StudioApi } from './api';
+
+  interface Props {
+    panel: Panel;
+    api: StudioApi;
+  }
+
+  const { panel, api }: Props = $props();
+
+  let editing: string | null = $state(null);
+  let note: { text: string; file: string } | null = $state(null);
+  let pending: { locale: string; keys: string[] } | null = $state(null);
+  let view: 'messages' | 'health' = $state('messages');
+  let checks: { ok: boolean; entries: Check[] } | null = $state(null);
+
+  // doctor reads the disk, so it is asked once at boot and again whenever you open the view
+  async function openHealth() {
+    view = 'health';
+    const result = await api.health();
+    if (result.error) {
+      note = { text: result.error, file: '' };
+      return;
+    }
+    if (result.value) checks = result.value;
+  }
+
+  $effect(() => {
+    void api.health().then((result) => {
+      if (result.value) checks = result.value;
+    });
+  });
+
+  // a command rewrote the catalogs, so the panel re-reads them instead of patching key by key
+  async function refresh(said: string) {
+    const answer = await api.state();
+    if (answer.error || !answer.value) {
+      note = { text: answer.error ?? '[verbaly] the server sent no state', file: '' };
+      return;
+    }
+    // the open editor and the undo both point at keys this run may have moved under them
+    editing = null;
+    pending = null;
+    applyState(panel, answer.value);
+    note = { text: said, file: '' };
+    const next = await api.health();
+    if (next.value) checks = next.value;
+  }
+
+  // the flag says who wrote the text, so both directions are a write and both report what moved
+  async function setRead(locale: string, keys: string[] | undefined, undo: boolean) {
+    const result = await api.setRead(locale, keys, undo);
+    if (result.error) {
+      note = { text: result.error, file: '' };
+      return;
+    }
+    const moved = new Set(result.value?.keys ?? []);
+    for (const row of panel.rows) {
+      if (!moved.has(row.key)) continue;
+      const cell = row.cells.find((c) => c.locale === locale);
+      if (cell?.text) cell.state = undo ? 'draft' : 'done';
+    }
+    pending = undo ? null : { locale, keys: result.value?.keys ?? [] };
+  }
+
+  // the row shows what the server refused; the panel only celebrates what it accepted
+  async function save(locale: string, key: string, text: string): Promise<string | null> {
+    const result = await api.save(locale, key, text);
+    if (result.error) return result.error;
+    const row = panel.rows.find((r) => r.key === key);
+    const cell = row?.cells.find((c) => c.locale === locale);
+    if (cell) {
+      cell.text = text;
+      cell.state = text ? 'done' : 'missing';
+      cell.issue = undefined;
+    }
+    note = { text, file: `${locale}.json` };
+    return null;
+  }
+
+  // `state` would shadow the rune, so the filter is named for what it reads like at the call site
+  let only: 'all' | 'look' | 'missing' | 'draft' | 'broken' = $state('all');
+  let text: string = $state('');
+  // null means nobody has picked yet, so the default follows the project instead of freezing at mount
+  let picked: string[] | null = $state(null);
+
+  const targets = $derived(panel.locales.filter((locale) => locale !== panel.sourceLocale));
+  const shown = $derived(picked ?? targets.slice(0, 1));
+
+  const rail = $derived(health(panel));
+  const rows = $derived(visible(panel.rows, { text, state: only, locales: shown }));
+
+  // every count is over the languages actually shown, so the rail never promises rows a filter hides
+  const counts = $derived.by(() => {
+    const out: Record<string, number> = { all: 0, look: 0, missing: 0, draft: 0, broken: 0 };
+    for (const id of ['all', 'look', 'missing', 'draft', 'broken'] as const) {
+      out[id] = visible(panel.rows, { text, state: id, locales: shown }).length;
+    }
+    return out;
+  });
+
+  // a virtual window is a slice here: it measured 0.000 ms on the real catalog, so no library
+  const STEP = 60;
+  let limit: number = $state(STEP);
+  $effect(() => {
+    void text;
+    void only;
+    void shown;
+    limit = STEP;
+  });
+
+  function onScroll(event: Event) {
+    const el = event.currentTarget as HTMLElement;
+    if (el.scrollTop + el.clientHeight > el.scrollHeight - 600 && limit < rows.length) {
+      limit += STEP;
+    }
+  }
+
+  function toggle(locale: string) {
+    picked = shown.includes(locale)
+      ? shown.filter((other: string) => other !== locale)
+      : [...shown, locale];
+  }
+</script>
+
+<div class="shell">
+  <header class="bar">
+    <span class="brand">verbaly <b>studio</b></span>
+    <input
+      class="search"
+      type="search"
+      bind:value={text}
+      placeholder="Search the text, not the key"
+      aria-label="Search the text, not the key"
+    />
+    <span class="root" title={panel.root}>{panel.root}</span>
+  </header>
+
+  {#if panel.problems.length}
+    <ul class="problems">
+      {#each panel.problems as problem (problem.scope + problem.message)}
+        <li><code>{problem.scope}</code> {problem.message}</li>
+      {/each}
+    </ul>
+  {/if}
+
+  <div class="body">
+    <Rail
+      health={rail}
+      {shown}
+      state={only}
+      {counts}
+      {pending}
+      checks={checks ? { bad: checks.entries.filter((e) => e.level !== 'ok').length } : null}
+      onToggle={toggle}
+      onState={(next) => (only = next)}
+      onRead={(locale) => setRead(locale, undefined, false)}
+      onUndo={() => pending && setRead(pending.locale, pending.keys, true)}
+      onHealth={openHealth}
+    >
+      {#snippet actions()}
+        <Actions {api} {shown} onDone={refresh} />
+      {/snippet}
+    </Rail>
+
+    {#if view === 'health'}
+      <HealthView
+        entries={checks?.entries ?? []}
+        ok={checks?.ok ?? true}
+        onClose={() => (view = 'messages')}
+      />
+    {:else}
+    <main class="table" onscroll={onScroll}>
+      {#if !shown.length}
+        <p class="note">Tick a language in the rail to see its translations.</p>
+      {:else if !rows.length}
+        <p class="note">Nothing matches. Every message here is in the state you asked for.</p>
+      {:else}
+        {#each rows.slice(0, limit) as row (row.key)}
+          <RowView {row} {shown} {editing} onEdit={(id) => (editing = id)} onSave={save} />
+        {/each}
+        {#if limit < rows.length}
+          <p class="note">{rows.length - limit} more below</p>
+        {/if}
+      {/if}
+    </main>
+    {/if}
+  </div>
+
+  {#if note}
+    <p class="snack" role="status">
+      <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="m3.4 8.4 3 3 6.2-6.8" />
+      </svg>
+      {#if note.file}Saved in <code>{note.file}</code>{:else}{note.text}{/if}
+      <button onclick={() => (note = null)}>Dismiss</button>
+    </p>
+  {/if}
+</div>
+
+<style>
+  .shell {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  /* the bar stays ink in both themes: the one brand colour cannot vanish on a theme switch */
+  .bar {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: none;
+    padding: 0 16px;
+    height: 48px;
+    background: var(--bar);
+    color: var(--on-bar);
+    /* the bar keeps its value in both themes, so in dark it needs an edge: it measured 1.01:1 */
+    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.12);
+  }
+
+  .brand {
+    font-size: 13px;
+    letter-spacing: 0.02em;
+    opacity: 0.75;
+    white-space: nowrap;
+  }
+
+  .brand b {
+    opacity: 1;
+    font-weight: 600;
+  }
+
+  .search {
+    flex: 1;
+    max-width: 520px;
+    padding: 6px 12px;
+    border: 1px solid rgb(255 255 255 / 0.16);
+    border-radius: var(--radius);
+    background: rgb(255 255 255 / 0.06);
+    color: var(--on-bar);
+    font: inherit;
+    font-size: 13px;
+  }
+
+  .search::placeholder {
+    color: rgb(255 255 255 / 0.45);
+  }
+
+  .search:focus-visible {
+    outline: 2px solid var(--done);
+    outline-offset: 1px;
+  }
+
+  .root {
+    margin-left: auto;
+    font-family: var(--mono);
+    font-size: 11.5px;
+    opacity: 0.55;
+    max-width: 30ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .problems {
+    margin: 0;
+    padding: 8px 16px;
+    list-style: none;
+    background: var(--broken-tint);
+    color: var(--broken);
+    font-size: 12.5px;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .table {
+    flex: 1;
+    min-width: 0;
+    overflow-y: auto;
+    background: var(--paper);
+  }
+
+  .note {
+    margin: 0;
+    padding: 24px 20px;
+    color: var(--muted);
+    font-size: 13px;
+  }
+
+  /* the one thing that moves: it reports a write that really happened, and it waits to be dismissed */
+  .snack {
+    position: absolute;
+    left: 50%;
+    bottom: 24px;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 0;
+    height: 44px;
+    padding: 0 12px 0 20px;
+    background: var(--bar);
+    color: var(--on-bar);
+    border-radius: var(--radius);
+    font-size: 13px;
+    white-space: nowrap;
+    box-shadow: 0 2px 6px rgb(6 16 5 / 0.18), 0 34px 64px -28px rgb(6 16 5 / 0.4);
+  }
+
+  .snack svg {
+    color: #8ed67f;
+  }
+
+  .snack button {
+    height: 30px;
+    padding: 0 12px;
+    border: 0;
+    border-radius: 4px;
+    background: rgb(255 255 255 / 0.14);
+    color: inherit;
+    font: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+  }
+</style>

package/dist/panel/Panel.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte';
+import type { Panel } from './model';
+import type { StudioApi } from './api';
+
+// Written by hand, like @verbaly/svelte's Trans.svelte.d.ts: the build copies the component as
+// source and there is no svelte2tsx step in this repo.
+declare const PanelView: Component<{
+  panel: Panel;
+  api: StudioApi;
+}>;
+
+export default PanelView;