@verbaly/studio 0.56.0 → 0.57.0

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>

package/dist/panel/Row.svelte

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

@@ -1,82 +0,0 @@
-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'),
-  };
-}