@verbaly/studio 0.56.1 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verbaly/studio",
-  "version": "0.56.1",
+  "version": "0.57.0",
   "description": "Local review server for Verbaly: read, edit and approve translations over the JSON files already in your repo. No account, no database.",
   "keywords": [
     "i18n",
@@ -26,17 +26,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    },
-    "./ui": {
-      "types": "./dist/panel/index.ts",
-      "import": "./dist/panel/index.ts"
-    },
-    "./Panel.svelte": {
-      "types": "./dist/panel/Panel.svelte.d.ts",
-      "svelte": "./dist/panel/Panel.svelte",
-      "default": "./dist/panel/Panel.svelte"
-    },
-    "./tokens.css": "./dist/panel/tokens.css"
+    }
   },
   "bin": {
     "verbaly-studio": "./dist/cli.js"
@@ -53,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@verbaly/compiler": "^0.56.1"
+    "@verbaly/compiler": "^0.57.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
@@ -62,22 +52,10 @@
     "svelte-check": "^4.7.6",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.3.0",
-    "verbaly": "^0.56.1"
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0",
-    "verbaly": "^0.56.1"
-  },
-  "peerDependenciesMeta": {
-    "svelte": {
-      "optional": true
-    },
-    "verbaly": {
-      "optional": true
-    }
+    "verbaly": "^0.57.0"
   },
   "scripts": {
-    "build": "tsdown && vite build && node scripts/copy-panel.mjs",
+    "build": "tsdown && vite build",
     "dev": "vite",
     "test": "vitest run --passWithNoTests",
     "typecheck": "tsc --noEmit && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings"

package/dist/panel/Actions.svelte

@@ -1,255 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { ACTION, messages } from './words';
-  import type { Job, Plan, StudioApi } from './api';
-
-  interface Props {
-    api: StudioApi;
-    scanning: boolean;
-    targets: number;
-    shown: string[];
-    onDone: (said: string) => Promise<void> | void;
-  }
-
-  const { api, scanning, targets, shown, onDone }: Props = $props();
-
-  type Phase =
-    | { at: 'idle' }
-    | { at: 'finding' }
-    | { at: 'planning' }
-    | { at: 'plan'; plan: Plan }
-    | { at: 'running'; job: Job }
-    | { at: 'said'; text: string; bad: boolean };
-
-  // the annotation goes on the rune: on the declaration, phase narrows to its first member
-  let phase = $state<Phase>({ at: 'idle' });
-  const busy = $derived(phase.at === 'finding' || phase.at === 'planning' || phase.at === 'running');
-
-  function said(text: string, bad = false) {
-    phase = { at: 'said', text, bad };
-  }
-
-  async function find() {
-    phase = { at: 'finding' };
-    const answer = await api.extract();
-    if (answer.error || !answer.value) return said(answer.error ?? 'no answer', true);
-    const { found } = answer.value;
-    if (!found) return said(ACTION.nothingNew);
-    const wrote = `${messages(found)} your code uses and your catalogs did not have`;
-    await onDone(wrote);
-    said(wrote);
-  }
-
-  async function plan() {
-    phase = { at: 'planning' };
-    const answer = await api.plan(shown);
-    if (answer.error || !answer.value) return said(answer.error ?? 'no answer', true);
-    if (!answer.value.total) return said(ACTION.nothingMissing);
-    phase = { at: 'plan', plan: answer.value };
-  }
-
-  // the bar is asked, never pushed: translate writes partial results, so a reload must not lose it
-  async function poll(id: string) {
-    const answer = await api.job(id);
-    if (answer.error || !answer.value) return said(answer.error ?? 'no answer', true);
-    const job = answer.value;
-    if (job.state === 'running') {
-      phase = { at: 'running', job };
-      return;
-    }
-    // every translation a machine wrote is a draft, and the panel has to say so out loud
-    const wrote = `${messages(job.done)} translated, unread until you read them`;
-    await onDone(wrote);
-    said(job.state === 'failed' ? (job.message ?? 'the run failed') : wrote, job.state === 'failed');
-  }
-
-  async function go() {
-    const answer = await api.translate(shown);
-    if (answer.error || !answer.value) return said(answer.error ?? 'no answer', true);
-    phase = { at: 'running', job: answer.value };
-  }
-
-  // a run outlives the page that started it, so the bar comes back instead of the job hiding
-  onMount(() => {
-    void api.job().then((answer) => {
-      if (answer.value && phase.at === 'idle') phase = { at: 'running', job: answer.value };
-    });
-  });
-
-  $effect(() => {
-    if (phase.at !== 'running') return;
-    const id = phase.job.id;
-    const timer = setInterval(() => void poll(id), 1000);
-    return () => clearInterval(timer);
-  });
-
-  // a disabled control still owes you the reason, and the reason is not always the same one
-  const why = $derived(
-    !targets ? ACTION.onlyLocale : shown.length ? ACTION.translateWhy : ACTION.pickFirst,
-  );
-
-  const share = $derived(
-    phase.at === 'running' && phase.job.total ? phase.job.done / phase.job.total : 0,
-  );
-</script>
-
-<section class="acts" aria-label="Commands">
-  <h2 class="cap">Commands</h2>
-
-  {#if phase.at === 'plan'}
-    <div class="bill">
-      <p class="lede">{messages(phase.plan.total)} in {Object.keys(phase.plan.pending).join(', ')}</p>
-      <p class="why">{ACTION.translateWhy}</p>
-      <div class="pair">
-        <button class="go" onclick={go}>{ACTION.translate}</button>
-        <button class="plain" onclick={() => (phase = { at: 'idle' })}>{ACTION.cancel}</button>
-      </div>
-    </div>
-  {:else if phase.at === 'running'}
-    <div class="bill">
-      <p class="lede">{ACTION.running} {phase.job.locale ?? ''}</p>
-      <div class="track"><span class="fill" style="width: {Math.round(share * 100)}%"></span></div>
-      <p class="why">{phase.job.done} of {phase.job.total}</p>
-    </div>
-  {:else}
-    <button class="act" disabled={busy || !scanning} onclick={find}>
-      <span class="name">{phase.at === 'finding' ? ACTION.working : ACTION.find}</span>
-      <span class="why">{scanning ? ACTION.findWhy : ACTION.scanOff}</span>
-    </button>
-    <button class="act" disabled={busy || !shown.length} onclick={plan}>
-      <span class="name">{ACTION.translate}</span>
-      <span class="why">{why}</span>
-    </button>
-  {/if}
-
-  {#if phase.at === 'said'}
-    <p class="said" class:bad={phase.bad}>{phase.text}</p>
-  {/if}
-</section>
-
-<style>
-  .acts {
-    margin-bottom: 22px;
-  }
-
-  .cap {
-    margin: 0 0 8px;
-    padding: 0 6px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--muted);
-  }
-
-  .act {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    width: 100%;
-    margin-bottom: 4px;
-    padding: 7px 8px;
-    border: 0;
-    border-radius: var(--radius);
-    background: none;
-    font: inherit;
-    color: var(--body);
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .act:hover:not(:disabled) {
-    background: var(--hollow);
-  }
-
-  .act:disabled {
-    cursor: default;
-  }
-
-  /* only the name dims: the line under it is where a disabled button says why it is disabled */
-  .act:disabled .name {
-    opacity: 0.55;
-  }
-
-  .name {
-    font-size: 13px;
-    color: var(--ink);
-  }
-
-  .why {
-    margin: 0;
-    font-size: 11.5px;
-    line-height: 1.35;
-    color: var(--muted);
-  }
-
-  .bill {
-    padding: 10px;
-    border: 1px solid var(--rule);
-    border-radius: var(--radius);
-    background: var(--paper);
-  }
-
-  .lede {
-    margin: 0 0 4px;
-    font-size: 13px;
-    color: var(--ink);
-  }
-
-  .pair {
-    display: flex;
-    gap: 6px;
-    margin-top: 10px;
-  }
-
-  .go {
-    flex: 1;
-    padding: 5px 10px;
-    border: 0;
-    border-radius: var(--radius);
-    background: var(--done);
-    /* paper turns with the theme, so the label stays legible on both greens */
-    color: var(--paper);
-    font: inherit;
-    font-size: 12px;
-    cursor: pointer;
-  }
-
-  .plain {
-    padding: 5px 10px;
-    border: 1px solid var(--rule-strong);
-    border-radius: var(--radius);
-    background: none;
-    color: var(--body);
-    font: inherit;
-    font-size: 12px;
-    cursor: pointer;
-  }
-
-  /* the one thing on this screen that moves, because it reports a run that is really happening */
-  .track {
-    height: 4px;
-    margin: 8px 0 6px;
-    border-radius: 999px;
-    background: var(--hollow);
-    overflow: hidden;
-  }
-
-  .fill {
-    display: block;
-    height: 100%;
-    background: var(--done);
-    transition: width 0.3s linear;
-  }
-
-  .said {
-    margin: 6px 0 0;
-    padding: 0 8px;
-    font-size: 11.5px;
-    color: var(--muted);
-  }
-
-  .said.bad {
-    color: var(--broken);
-  }
-</style>

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>