@verbaly/studio 0.56.1 → 0.58.0

package/dist/panel/Health.svelte

@@ -1,184 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-<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

@@ -1,337 +0,0 @@
-<script lang="ts">
-  import HealthView from './Health.svelte';
-  import Rail from './Rail.svelte';
-  import RowView from './Row.svelte';
-  import { applyState, emptyReason, health, visible, type Panel } from './model';
-  import Actions from './Actions.svelte';
-  import type { Check, StudioApi } from './api';
-  import { EMPTY } from './words';
-
-  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 }));
-  const empty = $derived(emptyReason(panel, shown, rows));
-
-  // 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} scanning={panel.scanning} targets={targets.length} {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 empty}
-        <p class="note">{EMPTY[empty]}{empty === 'oneLocale' ? ` ${EMPTY.oneLocaleFix}` : ''}</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

@@ -1,12 +0,0 @@
-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;