@verbaly/studio 0.56.1 → 0.57.0

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;

package/dist/panel/Rail.svelte

@@ -1,303 +0,0 @@
-<script lang="ts">
-  import { FILTER, MARK_AS_READ, UNDO } from './words';
-  import type { Snippet } from 'svelte';
-  import type { LocaleHealth, MessageState } from './model';
-
-  type Which = 'all' | 'look' | 'missing' | 'draft' | 'broken';
-
-  interface Props {
-    health: LocaleHealth[];
-    shown: string[];
-    state: Which;
-    counts: Record<string, number>;
-    pending: { locale: string; keys: string[] } | null;
-    onToggle: (locale: string) => void;
-    onState: (state: Which) => void;
-    onRead: (locale: string) => void;
-    onUndo: () => void;
-    checks: { bad: number } | null;
-    onHealth: () => void;
-    actions: Snippet;
-  }
-
-  const {
-    health,
-    shown,
-    state,
-    counts,
-    pending,
-    checks,
-    onToggle,
-    onState,
-    onRead,
-    onUndo,
-    onHealth,
-    actions,
-  }: Props = $props();
-
-  const ORDER: Which[] = ['all', 'look', 'missing', 'draft', 'broken'];
-
-  // the second line is the state, and it is what makes the rail worth more than a dropdown
-  function summary(h: LocaleHealth): string {
-    if (h.source) return 'the one you write';
-    if (h.broken) return `${h.broken} breaks your site`;
-    if (h.missing) return `${h.missing} missing`;
-    if (h.draft) return `${h.draft} nobody has read`;
-    return 'all read';
-  }
-
-  function tone(h: LocaleHealth): MessageState {
-    if (h.source) return 'done';
-    if (h.broken) return 'broken';
-    if (h.missing) return 'missing';
-    if (h.draft) return 'draft';
-    return 'done';
-  }
-</script>
-
-<nav class="rail" aria-label="Languages and filters">
-  <button class="nav" onclick={onHealth}>
-    <span>Health</span>
-    {#if checks}<span class="bad" class:clean={!checks.bad}>{checks.bad || "ok"}</span>{/if}
-  </button>
-
-  {@render actions()}
-
-  <h2 class="cap">Languages</h2>
-  <ul class="langs">
-    {#each health as h (h.locale)}
-      <li>
-        <label class="lang" class:source={h.source}>
-          <input
-            type="checkbox"
-            checked={shown.includes(h.locale)}
-            disabled={h.source}
-            onchange={() => onToggle(h.locale)}
-          />
-          <span class="meta">
-            <span class="name">{h.locale}</span>
-            <span class="state" data-state={tone(h)}>{summary(h)}</span>
-          </span>
-        </label>
-        {#if !h.source && h.draft > 0}
-          <!-- no confirming dialog: the action is reversible and undo lives right here, not in a toast -->
-          <button class="read" onclick={() => onRead(h.locale)}>
-            {MARK_AS_READ}
-            <span class="n">{h.draft}</span>
-          </button>
-        {/if}
-      </li>
-    {/each}
-  </ul>
-
-  {#if pending}
-    <p class="undo">
-      <span>{pending.keys.length} in {pending.locale} marked as read</span>
-      <button onclick={onUndo}>{UNDO}</button>
-    </p>
-  {/if}
-
-  <h2 class="cap">Show</h2>
-  <ul class="filters">
-    {#each ORDER as which (which)}
-      <li>
-        <button type="button" class:on={state === which} onclick={() => onState(which)}>
-          <span>{FILTER[which]}</span>
-          <span class="count">{counts[which] ?? 0}</span>
-        </button>
-      </li>
-    {/each}
-  </ul>
-</nav>
-
-<style>
-  .rail {
-    width: var(--rail);
-    flex: none;
-    padding: 18px 14px;
-    border-right: 1px solid var(--rule);
-    background: var(--ground);
-    overflow-y: auto;
-  }
-
-  .nav {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    margin-bottom: 18px;
-    padding: 7px 8px;
-    border: 0;
-    border-radius: var(--radius);
-    background: none;
-    font: inherit;
-    font-size: 13px;
-    color: var(--body);
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .nav:hover {
-    background: var(--hollow);
-  }
-
-  .bad {
-    margin-left: auto;
-    padding: 0 7px;
-    border-radius: 999px;
-    background: var(--broken-tint);
-    color: var(--broken);
-    font-family: var(--mono);
-    font-size: 11px;
-  }
-
-  .bad.clean {
-    background: var(--done-tint);
-    color: var(--done);
-  }
-
-  .cap {
-    margin: 0 0 8px;
-    padding: 0 6px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--muted);
-  }
-
-  ul {
-    margin: 0 0 22px;
-    padding: 0;
-    list-style: none;
-  }
-
-  .lang {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    padding: 7px 6px;
-    border-radius: var(--radius);
-    cursor: pointer;
-  }
-
-  .lang:hover {
-    background: var(--hollow);
-  }
-
-  .lang.source {
-    cursor: default;
-  }
-
-  .lang input {
-    margin: 4px 0 0;
-    accent-color: var(--done);
-  }
-
-  .meta {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .name {
-    font-family: var(--mono);
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--ink);
-  }
-
-  .state {
-    font-size: 11.5px;
-    color: var(--muted);
-  }
-
-  .state[data-state='broken'] {
-    color: var(--broken);
-  }
-  .state[data-state='missing'] {
-    color: var(--missing);
-  }
-  .state[data-state='draft'] {
-    color: var(--draft);
-  }
-
-  .read {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin: 2px 0 6px 30px;
-    padding: 3px 9px;
-    border: 1px solid var(--draft);
-    border-radius: 999px;
-    background: var(--draft-tint);
-    color: var(--draft);
-    font: inherit;
-    font-size: 11.5px;
-    cursor: pointer;
-  }
-
-  .read .n {
-    font-family: var(--mono);
-    opacity: 0.8;
-  }
-
-  /* undo lives in the rail and does not expire: for hundreds of messages a toast is not undo */
-  .undo {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: -14px 0 22px;
-    padding: 8px 10px;
-    border-radius: var(--radius);
-    background: var(--hollow);
-    font-size: 11.5px;
-    color: var(--body);
-  }
-
-  .undo button {
-    margin-left: auto;
-    padding: 3px 10px;
-    border: 1px solid var(--rule-strong);
-    border-radius: var(--radius);
-    background: var(--paper);
-    color: var(--ink);
-    font: inherit;
-    font-size: 11.5px;
-    cursor: pointer;
-  }
-
-  .filters button {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 6px 8px;
-    border: 0;
-    border-radius: var(--radius);
-    background: none;
-    font: inherit;
-    font-size: 13px;
-    color: var(--body);
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .filters button:hover {
-    background: var(--hollow);
-  }
-
-  .filters button.on {
-    background: var(--hollow);
-    color: var(--ink);
-    font-weight: 600;
-  }
-
-  /* the number is half the value: it says whether entering is worth it before you enter */
-  .count {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--muted);
-  }
-</style>