@medeo-plugin/plugin-screenshot 1.0.0 → 1.0.2

package/src/src/ui/settings.ts

@@ -0,0 +1,140 @@
+// Settings and setup: the macOS screen-recording grant (with a button that asks for it),
+// shortcuts, where screenshots are saved. The worker owns the values; this page only edits.
+import { capture, channel, i18n } from '@medeo-plugin/sdk';
+import type { FromSettings, SettingsState, ToSettings } from '../protocol.ts';
+import { SHORTCUTS, type Settings, type ShortcutKey } from '../settings.ts';
+import { fromKey, symbols, valid } from '../shortcuts.ts';
+
+const $ = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
+const post = (m: FromSettings) => channel.post(m);
+let t: Record<string, string> = {};
+const tr = (key: string, params: Record<string, string | number> = {}) => (t[key] ?? key).replace(/\{(\w+)\}/g, (_, k) => String(params[k] ?? ''));
+let state: SettingsState | null = null;
+let recording: ShortcutKey | null = null;
+let screen = 'not_checked';
+
+const el = <K extends keyof HTMLElementTagNameMap>(tag: K, cls?: string, text?: string) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text !== undefined) e.textContent = text; return e; };
+
+function row(label: string, note: string | null, ...controls: HTMLElement[]) {
+  const r = el('div', 'line'); const left = el('div', 'label');
+  left.append(el('span', '', label)); if (note) left.append(el('small', '', note));
+  const right = el('div', 'controls'); right.append(...controls);
+  r.append(left, right); return r;
+}
+
+function button(text: string, testid: string, onClick: () => void, cls = 'pill') {
+  const b = el('button', cls, text); b.dataset.testid = testid; b.addEventListener('click', onClick); return b;
+}
+
+function shortcutControl(key: ShortcutKey) {
+  const value = state!.settings[key];
+  const box = el('div', 'shortcut');
+  const rec = el('button', `keys${recording === key ? ' recording' : ''}`, recording === key ? tr('shortcut.press') : value ? symbols(value) : tr('shortcut.none'));
+  rec.dataset.testid = `screenshot.settings.${key}`;
+  rec.addEventListener('click', () => { recording = recording === key ? null : key; render(); });
+  box.append(rec);
+  if (value) box.append(button(tr('shortcut.clear'), `screenshot.settings.${key}.clear`, () => { recording = null; void post({ type: 'set', patch: { [key]: null } }); }, 'link'));
+  const error = state!.errors[key];
+  if (error) box.append(el('small', 'error', tr(`shortcut.error.${error}`)));
+  return box;
+}
+
+function render() {
+  const root = $('settings'); root.replaceChildren();
+  if (!state) return;
+  // Permission card first: nothing works without it.
+  const perm = el('section', `card perm ${screen === 'granted' ? 'ok' : 'warn'}`); perm.dataset.testid = 'screenshot.settings.permission';
+  const head = el('div', 'perm-head');
+  head.append(el('b', '', tr('perm.title')), el('span', `badge ${screen === 'granted' ? 'ok' : 'warn'}`, tr(`perm.state.${screen === 'granted' ? 'granted' : screen === 'not_checked' || screen === 'unknown' ? 'unknown' : 'missing'}`)));
+  perm.append(head, el('p', '', tr(screen === 'granted' ? 'perm.ok' : 'perm.body')));
+  if (screen !== 'granted') {
+    const actions = el('div', 'actions');
+    actions.append(button(tr('perm.request'), 'screenshot.settings.permission.request', () => void requestPermission(), 'cta'),
+      button(tr('perm.open'), 'screenshot.settings.permission.open', () => void post({ type: 'open-privacy' })));
+    perm.append(actions, el('small', 'muted', tr('perm.restart')));
+  }
+  root.append(perm);
+
+  const keys = el('section', 'card');
+  keys.append(el('h3', '', tr('section.shortcuts')), ...SHORTCUTS.map(k => row(tr(`shortcut.${k}`), tr(`shortcut.${k}.note`), shortcutControl(k))));
+  root.append(keys);
+
+  const output = el('section', 'card');
+  output.append(el('h3', '', tr('section.output')),
+    row(tr('output.enter'), tr('output.enter.note'), choice('screenshot.settings.enterAction', state.settings.enterAction, [['copy', tr('output.copy')], ['save', tr('output.save')]], v => ({ enterAction: v }))),
+    row(tr('output.format'), null, choice('screenshot.settings.format', state.settings.format, [['png', 'PNG'], ['jpeg', 'JPEG']], v => ({ format: v }))),
+    row(tr('output.downscale'), tr('output.downscale.note'), check('screenshot.settings.downscale', state.settings.downscale, v => ({ downscale: v }))));
+  root.append(output);
+
+  const save = el('section', 'card');
+  const path = el('code', 'path', state.saveDir); path.title = state.saveDir; path.dataset.testid = 'screenshot.settings.folder';
+  const toggle = check('screenshot.settings.openAfterSave', state.settings.openAfterSave, v => ({ openAfterSave: v }));
+  save.append(el('h3', '', tr('section.save')),
+    row(tr('save.folder'), null, path, button(tr('save.change'), 'screenshot.settings.folder.change', () => void post({ type: 'choose-folder' })), button(tr('save.reveal'), 'screenshot.settings.folder.reveal', () => void post({ type: 'reveal-folder' }))),
+    row(tr('save.open'), tr('save.open.note'), toggle));
+  root.append(save);
+
+  const foot = el('div', 'foot');
+  foot.append(el('small', 'muted', tr('foot.tips')), button(tr('action.capture'), 'screenshot.settings.capture', () => void post({ type: 'capture' }), 'cta'));
+  root.append(foot);
+}
+
+function check(testid: string, value: boolean, patch: (v: boolean) => Partial<Settings>) {
+  const box = el('input') as HTMLInputElement; box.type = 'checkbox'; box.className = 'switch'; box.checked = value; box.dataset.testid = testid;
+  box.addEventListener('change', () => void post({ type: 'set', patch: patch(box.checked) }));
+  return box;
+}
+function choice<T extends string>(testid: string, value: T, items: [T, string][], patch: (v: T) => Partial<Settings>) {
+  const g = el('div', 'seg'); g.dataset.testid = testid;
+  for (const [v, label] of items) {
+    const b = el('button', `seg-item${v === value ? ' on' : ''}`, label); b.dataset.value = v;
+    b.addEventListener('click', () => void post({ type: 'set', patch: patch(v) }));
+    g.append(b);
+  }
+  return g;
+}
+
+async function refreshPermission(refresh = true) {
+  // The status call answers "loading" until the native helper has looked.
+  let s = await capture.status(refresh).catch(() => null);
+  for (let i = 0; i < 20 && s?.status === 'loading'; i++) { await new Promise(r => setTimeout(r, 250)); s = await capture.status(false).catch(() => null); }
+  screen = s?.os?.screen_capture ?? 'unknown';
+  render();
+}
+
+async function requestPermission() {
+  // Asks macOS for Medeo's screen-recording grant (the system dialog the first time; after a
+  // refusal macOS only lets the user turn it on in System Settings).
+  let s = await capture.sources(true, true).catch(() => null);
+  for (let i = 0; i < 40 && s?.status === 'loading'; i++) { await new Promise(r => setTimeout(r, 250)); s = await capture.sources(false).catch(() => null); }
+  await refreshPermission(true);
+  if (screen !== 'granted') void post({ type: 'open-privacy' });
+}
+
+function toast(tone: 'success' | 'error', key: string) {
+  const box = $('toast'); box.textContent = tr(key); box.className = `toast ${tone}`; box.hidden = false;
+  clearTimeout((toast as any).timer); (toast as any).timer = setTimeout(() => { box.hidden = true; }, 2200);
+}
+
+export async function startSettings() {
+  t = await i18n.catalog().catch(() => ({}));
+  document.title = tr('settings.title');
+  i18n.onDidChangeLocale(async () => { t = await i18n.catalog().catch(() => t); document.title = tr('settings.title'); render(); });
+  channel.onMessage<ToSettings>(m => {
+    if (m?.type === 'settings') { state = m.state; render(); }
+    else if (m?.type === 'toast') toast(m.tone, m.key);
+  });
+  addEventListener('keydown', e => {
+    if (!recording) return;
+    e.preventDefault();
+    if (e.key === 'Escape') { recording = null; render(); return; }
+    const acc = fromKey(e);
+    if (!acc) return;
+    const key = recording; recording = null;
+    if (!valid(acc)) { toast('error', 'shortcut.error.invalid'); render(); return; }
+    void post({ type: 'set', patch: { [key]: acc } });
+  });
+  addEventListener('focus', () => void refreshPermission(true));
+  await post({ type: 'settings-ready' });
+  await refreshPermission(true);
+}

package/src/tests/logic.test.mjs

@@ -0,0 +1,101 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { fromPoints, resize, move, hitHandle, windowAt, placeToolbar, round, intersect } from '../src/geometry.ts';
+import { fileName, stamp, expandHome } from '../src/naming.ts';
+import { normalize, DEFAULTS } from '../src/settings.ts';
+import { valid, fromKey, symbols } from '../src/shortcuts.ts';
+import { split, CHUNK, joinLines } from '../src/protocol.ts';
+import { formatNumber, constrain } from '../src/annotations.ts';
+
+const D = { x: 0, y: 0, w: 1000, h: 800 };
+
+test('drag rectangle is normalized and clamped to the display', () => {
+  assert.deepEqual(fromPoints({ x: 300, y: 200 }, { x: 100, y: 50 }, D), { x: 100, y: 50, w: 200, h: 150 });
+  assert.deepEqual(fromPoints({ x: 900, y: 700 }, { x: 1200, y: 900 }, D), { x: 900, y: 700, w: 100, h: 100 });
+});
+
+test('shift square follows the longer side but stays on the display', () => {
+  assert.deepEqual(fromPoints({ x: 100, y: 100 }, { x: 300, y: 150 }, D, true), { x: 100, y: 100, w: 200, h: 200 });
+  assert.deepEqual(fromPoints({ x: 100, y: 100 }, { x: 0, y: 90 }, D, true), { x: 0, y: 0, w: 100, h: 100 });
+  const r = fromPoints({ x: 900, y: 100 }, { x: 1000, y: 600 }, D, true);
+  assert.equal(r.w, r.h); assert.ok(r.x + r.w <= 1000);
+});
+
+test('resize flips past the opposite edge, move stops at the edges', () => {
+  const s = { x: 100, y: 100, w: 100, h: 100 };
+  assert.deepEqual(resize(s, 'e', { x: 50, y: 0 }, D), { x: 50, y: 100, w: 50, h: 100 });
+  assert.deepEqual(resize(s, 'se', { x: 400, y: 300 }, D), { x: 100, y: 100, w: 300, h: 200 });
+  assert.deepEqual(move(s, -500, 2000, D), { x: 0, y: 700, w: 100, h: 100 });
+});
+
+test('handles prefer corners', () => {
+  const s = { x: 100, y: 100, w: 8, h: 8 };
+  assert.equal(hitHandle(s, { x: 101, y: 101 }), 'nw');
+  assert.equal(hitHandle({ x: 0, y: 0, w: 100, h: 100 }, { x: 50, y: 98 }), 's');
+  assert.equal(hitHandle({ x: 0, y: 0, w: 100, h: 100 }, { x: 50, y: 50 }), null);
+});
+
+test('front window wins, else the display', () => {
+  const front = { x: 10, y: 10, w: 100, h: 100 }, back = { x: 0, y: 0, w: 500, h: 500 };
+  assert.equal(windowAt([front, back], { x: 50, y: 50 }, D), front);
+  assert.equal(windowAt([front, back], { x: 300, y: 300 }, D), back);
+  assert.equal(windowAt([front, back], { x: 900, y: 700 }, D), D);
+});
+
+test('toolbar goes below, then above, then inside', () => {
+  const size = { w: 400, h: 40 };
+  assert.deepEqual(placeToolbar({ x: 500, y: 100, w: 300, h: 200 }, size, D), { x: 400, y: 308, above: false });
+  assert.equal(placeToolbar({ x: 0, y: 500, w: 300, h: 290 }, size, D).above, true);
+  const full = placeToolbar(D, size, D);
+  assert.ok(full.y + 40 <= 800 && full.x >= 4);
+});
+
+test('round and intersect', () => {
+  assert.deepEqual(round({ x: 1.4, y: 1.6, w: 10.2, h: 10.2 }), { x: 1, y: 2, w: 11, h: 10 });
+  assert.equal(intersect({ x: 0, y: 0, w: 10, h: 10 }, { x: 20, y: 0, w: 5, h: 5 }), null);
+});
+
+test('file names never overwrite', () => {
+  const d = new Date(2026, 10, 9, 14, 5, 1);
+  assert.equal(stamp(d), '20261109_140501');
+  const taken = new Set(['Medeo_20261109_140501.png', 'Medeo_20261109_140501_1.png']);
+  assert.equal(fileName('Medeo', d, n => taken.has(n)), 'Medeo_20261109_140501_2.png');
+  assert.equal(expandHome('~/Pictures/x', '/Users/a', '/f'), '/Users/a/Pictures/x');
+  assert.equal(expandHome('relative', '/Users/a', '/f'), '/f');
+});
+
+test('settings fall back to defaults and never bind one shortcut twice', () => {
+  assert.deepEqual(normalize(null), DEFAULTS);
+  assert.deepEqual(normalize({ shortcutArea: 'A', saveDir: 3, format: 'gif' }), DEFAULTS);
+  assert.equal(normalize({ shortcutArea: null }).shortcutArea, null);
+  assert.equal(normalize({ shortcutArea: 'Alt+A', shortcutQuick: 'alt+a' }).shortcutQuick, null);
+  assert.equal(normalize({ shortcutOcr: 'Command+Shift+T' }).shortcutOcr, 'Command+Shift+T');
+  assert.equal(normalize({ shortcutCapture: 'Alt+A' }).shortcutArea, 'Alt+A');
+  assert.equal(normalize({ enterAction: 'save', format: 'jpeg', downscale: true }).format, 'jpeg');
+});
+
+test('number formats and shift constraint', () => {
+  assert.deepEqual([1, 4, 9, 14, 2026].map(n => formatNumber(n, 'roman')), ['I', 'IV', 'IX', 'XIV', 'MMXXVI']);
+  assert.deepEqual([1, 26, 27, 52].map(n => formatNumber(n, 'alpha')), ['A', 'Z', 'AA', 'AZ']);
+  assert.equal(formatNumber(3, 'alphaLower'), 'c');
+  const p = constrain({ x: 0, y: 0 }, { x: 100, y: 10 }, 'line');
+  assert.ok(Math.abs(p.y) < 1e-9 && Math.abs(p.x - Math.hypot(100, 10)) < 1e-9);
+  assert.deepEqual(constrain({ x: 0, y: 0 }, { x: 30, y: -50 }, 'rect'), { x: 50, y: -50 });
+});
+
+test('OCR lines come back in reading order', () => {
+  const lines = [{ t: 'world', x: 0.5, y: 0.8, h: 0.1 }, { t: 'second', x: 0.1, y: 0.5, h: 0.1 }, { t: 'hello', x: 0.1, y: 0.81, h: 0.1 }];
+  assert.equal(joinLines(lines), 'hello world\nsecond');
+});
+
+test('shortcuts', () => {
+  assert.ok(valid('Alt+A')); assert.ok(valid('F1')); assert.ok(!valid('Shift+A')); assert.ok(!valid('A')); assert.ok(!valid('Alt+Shift'));
+  assert.equal(fromKey({ code: 'KeyA', altKey: true, ctrlKey: false, shiftKey: true, metaKey: false }), 'Alt+Shift+A');
+  assert.equal(fromKey({ code: 'AltLeft', altKey: true, ctrlKey: false, shiftKey: false, metaKey: false }), null);
+  assert.equal(symbols('Shift+Alt+A'), '⌥⇧A');
+});
+
+test('chunks reassemble', () => {
+  const s = 'x'.repeat(CHUNK * 2 + 5);
+  assert.equal(split(s).length, 3); assert.equal(split(s).join(''), s); assert.deepEqual(split(''), ['']);
+});

package/src/ui/entry.ts

@@ -0,0 +1,4 @@
+// One bundle for both pages; the page says which one it is.
+import { startOverlay } from '../src/ui/overlay.ts';
+import { startSettings } from '../src/ui/settings.ts';
+if (document.body.dataset.page === 'settings') void startSettings(); else void startOverlay();

package/src/ui/icons/align-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M7 10h10M4 14h16M7 18h10"/></svg>

package/src/ui/icons/align-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 10h10M4 14h16M4 18h10"/></svg>

package/src/ui/icons/align-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M10 10h10M4 14h16M10 18h10"/></svg>

package/src/ui/icons/arrow-double.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M15 8l4 4-4 4M9 8l-4 4 4 4"/></svg>

package/src/ui/icons/arrow-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15"/><path d="M13 6l6 6-6 6" stroke-width="2.2"/></svg>

package/src/ui/icons/arrow-single.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15"/><path d="M14 7l5 5-5 5"/></svg>

package/src/ui/icons/arrow-tail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h13"/><path d="M14 7l5 5-5 5"/><circle cx="5" cy="12" r="2.2" fill="#000" stroke="none"/></svg>

package/src/ui/icons/arrow-thick.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5h11V6.5l7 5.5-7 5.5v-4H3z" fill="#000" stroke="none"/></svg>

package/src/ui/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19L18 6"/><path d="M10 6h8v8"/></svg>

package/src/ui/icons/beautify.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z" fill="#000" stroke="none"/><path d="M18.5 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z" fill="#000" stroke="none"/></svg>

package/src/ui/icons/bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4.5h6a3.75 3.75 0 010 7.5H7zM7 12h7a3.75 3.75 0 010 7.5H7z" stroke-width="2.2"/></svg>

package/src/ui/icons/censor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="1.5"/><rect x="9.3" y="4" width="5.3" height="5.3" fill="#000" stroke="none"/><rect x="4" y="9.3" width="5.3" height="5.3" fill="#000" stroke="none"/><rect x="14.6" y="9.3" width="5.4" height="5.3" fill="#000" stroke="none"/><rect x="9.3" y="14.6" width="5.3" height="5.4" fill="#000" stroke="none"/></svg>

package/src/ui/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg>

package/src/ui/icons/copy-doc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5.5A1.5 1.5 0 0014.5 4h-9A1.5 1.5 0 004 5.5v9A1.5 1.5 0 005.5 16H8"/></svg>

package/src/ui/icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5.5A1.5 1.5 0 0014.5 4h-9A1.5 1.5 0 004 5.5v9A1.5 1.5 0 005.5 16H8"/></svg>

package/src/ui/icons/ellipse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="12" rx="8.5" ry="7"/></svg>

package/src/ui/icons/fill-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2" fill="#000" stroke="none"/></svg>

package/src/ui/icons/fill-stroke.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/></svg>

package/src/ui/icons/fill-strokeFill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><rect x="4" y="5" width="16" height="14" rx="2" fill="#000" opacity=".35" stroke="none"/></svg>

package/src/ui/icons/highlight.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z" fill="#000" opacity=".35" stroke="none"/><rect x="7" y="7" width="10" height="10" rx="1.5" fill="#000" stroke="none"/></svg>

package/src/ui/icons/invert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 3.5a8.5 8.5 0 010 17z" fill="#000" stroke="none"/></svg>

package/src/ui/icons/italic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4.5h8M6 19.5h8M14 4.5l-4 15"/></svg>

package/src/ui/icons/line-dashed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4M10 12h4M17 12h4" stroke-width="2.4"/></svg>

package/src/ui/icons/line-dotted.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h.01M8.5 12h.01M13 12h.01M17.5 12h.01M21 12h.01" stroke-width="3"/></svg>

package/src/ui/icons/line-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18" stroke-width="2.4"/></svg>

package/src/ui/icons/line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19L19 5"/></svg>

package/src/ui/icons/marker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 15l-3 3h5l1.5-1.5"/><path d="M8 13l7-9 5 4-8 8z"/><path d="M4 21h16" stroke-width="2.4"/></svg>

package/src/ui/icons/measure.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 15.5L15.5 3.5l5 5-12 12z"/><path d="M7 12l2 2M10 9l1.5 1.5M13 6l2 2"/></svg>

package/src/ui/icons/number.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M10.5 9l2-1.5V16.5"/></svg>

package/src/ui/icons/ocr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V5.5A1.5 1.5 0 015.5 4H8M16 4h2.5A1.5 1.5 0 0120 5.5V8M20 16v2.5a1.5 1.5 0 01-1.5 1.5H16M8 20H5.5A1.5 1.5 0 014 18.5V16"/><path d="M8 9h8M8 12h8M8 15h5"/></svg>

package/src/ui/icons/open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 14v4.5a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 014 18.5v-11A1.5 1.5 0 015.5 6H10"/></svg>

package/src/ui/icons/pencil.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20l1-4L16 5l3 3L8 19l-4 1z"/><path d="M14 7l3 3"/></svg>

package/src/ui/icons/rect.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="1.5"/></svg>

package/src/ui/icons/redo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14l5-5-5-5"/><path d="M20 9H9.5a5.5 5.5 0 000 11H13"/></svg>

package/src/ui/icons/sampler.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4.5l5.5 5.5"/><path d="M16.5 7.5L8 16l-3.5 1 1-3.5 8.5-8.5"/><path d="M13 3.5l7.5 7.5"/></svg>

package/src/ui/icons/save.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>

package/src/ui/icons/select.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5l12 7.2-5.4 1.3 3.2 6-2.4 1.3-3.2-6L6 17z"/></svg>

package/src/ui/icons/stamp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M8.5 14.2c.9 1.3 2.1 2 3.5 2s2.6-.7 3.5-2"/><path d="M9 9.5h.01M15 9.5h.01" stroke-width="2.6"/></svg>

package/src/ui/icons/text-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="3" fill="#000" opacity=".3" stroke="none"/><path d="M8 9h8M12 9v7"/></svg>

package/src/ui/icons/text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 6V4.5h14V6"/><path d="M12 4.5V19.5"/><path d="M9 19.5h6"/></svg>

package/src/ui/icons/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13"/></svg>

package/src/ui/icons/underline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4v7a5 5 0 0010 0V4"/><path d="M5 20h14"/></svg>

package/src/ui/icons/undo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14L4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 010 11H11"/></svg>

package/src/ui/index.html

@@ -0,0 +1,12 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="color-scheme" content="light dark"><link rel="stylesheet" href="style.css"><title>Screenshot</title></head>
+<body data-page="overlay" class="overlay">
+<canvas id="base"></canvas><canvas id="ann"></canvas><canvas id="ui" data-testid="screenshot.canvas"></canvas>
+<div id="tools" class="bar tools" data-testid="screenshot.toolbar" hidden></div>
+<div id="options" class="bar options" data-testid="screenshot.options" hidden></div>
+<div id="actions" class="bar actions" data-testid="screenshot.actions" hidden></div>
+<div id="popover" class="bar popover" data-testid="screenshot.popover" hidden></div>
+<div id="ocr" class="bar ocr" data-testid="screenshot.ocr" hidden></div>
+<div id="hint" class="hint" data-testid="screenshot.hint" hidden></div>
+<div id="toast" class="otoast" data-testid="screenshot.toast" hidden></div>
+<textarea id="text" class="text-editor" data-testid="screenshot.text" spellcheck="false" hidden></textarea>
+<script src="index.js" type="module"></script></body></html>

package/src/ui/settings.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="color-scheme" content="light dark"><link rel="stylesheet" href="/_medeo/theme.css"><link rel="stylesheet" href="style.css"><title>Screenshot</title></head>
+<body data-page="settings" class="settings-page">
+<main id="settings" data-testid="screenshot.settings"></main>
+<div id="toast" class="toast" role="status" data-testid="screenshot.toast" hidden></div>
+<script src="index.js" type="module"></script></body></html>

package/src/ui/style.css

@@ -0,0 +1,105 @@
+:root {
+  color-scheme: light dark;
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", sans-serif;
+  --bar: rgba(255,255,255,.96); --bar-text: rgba(0,0,0,.82); --bar-hover: rgba(0,0,0,.06); --bar-on: rgba(59,130,246,.14); --bar-sep: rgba(0,0,0,.1);
+  --accent: #007AFF; --shadow: 0 8px 28px rgba(0,0,0,.28);
+}
+@media (prefers-color-scheme: dark) {
+  :root { --bar: rgba(38,38,40,.96); --bar-text: rgba(255,255,255,.88); --bar-hover: rgba(255,255,255,.08); --bar-on: rgba(59,130,246,.3); --bar-sep: rgba(255,255,255,.12); }
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+[hidden] { display: none !important; }
+button, input, textarea { font: inherit; color: inherit; }
+button { background: none; border: 0; cursor: default; }
+.icon { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
+
+/* ---- overlay ---- */
+body.overlay { width: 100vw; height: 100vh; overflow: hidden; background: transparent; font: 12px/1.4 var(--font); user-select: none; -webkit-user-select: none; }
+.overlay canvas { position: fixed; inset: 0; display: block; }
+#base, #ann { pointer-events: none; }
+#ui { cursor: crosshair; }
+.bar { position: fixed; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 10px; background: var(--bar); color: var(--bar-text); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
+.actions { flex-direction: column; }
+.actions .sep { width: 20px; height: 1px; margin: 3px 0; }
+.options { gap: 10px; padding: 5px 10px; min-height: 38px; }
+.tb { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; flex: none; }
+.tb .icon { width: 17px; height: 17px; }
+.tb.small { width: 26px; height: 26px; }
+.tb.small .icon { width: 15px; height: 15px; }
+.tb:hover { background: var(--bar-hover); }
+.tb.on { background: var(--bar-on); color: var(--accent); }
+.tb.lit { color: #F5B400; }
+.tb:disabled { opacity: .35; }
+.tb.primary { background: var(--accent); color: #fff; }
+.tb.primary:hover { filter: brightness(1.08); }
+.tb.color .swatch-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 2px var(--bar), 0 0 0 3px var(--bar-sep); }
+.sep { width: 1px; height: 20px; margin: 0 4px; background: var(--bar-sep); flex: none; }
+.seg { display: flex; gap: 1px; padding: 2px; border-radius: 7px; background: var(--bar-hover); }
+.seg-item { min-width: 26px; height: 24px; padding: 0 6px; border-radius: 5px; display: grid; place-items: center; font-weight: 600; font-size: 12px; }
+.seg-item .icon { width: 15px; height: 15px; }
+.seg-item.solo { background: var(--bar-hover); }
+.seg-item.on { background: var(--bar); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
+.slider { display: flex; align-items: center; gap: 6px; }
+.slider-name { opacity: .7; white-space: nowrap; }
+.slider input { width: 90px; accent-color: var(--accent); }
+.slider-value { width: 34px; text-align: right; font-variant-numeric: tabular-nums; opacity: .8; }
+.note { opacity: .65; white-space: nowrap; }
+.emojis { display: flex; flex-wrap: wrap; gap: 1px; max-width: 360px; }
+.emoji { width: 26px; height: 26px; border-radius: 6px; font-size: 17px; line-height: 26px; }
+.emoji:hover { background: var(--bar-hover); }
+.emoji.on { background: var(--bar-on); }
+.popover { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; z-index: 12; }
+.palette { display: grid; grid-template-columns: repeat(6, 22px); gap: 8px; }
+.swatch { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
+.swatch.on { box-shadow: 0 0 0 2px var(--bar), 0 0 0 4px var(--accent); }
+.custom { width: 100%; height: 24px; border: 0; padding: 0; background: none; }
+.gradients { display: grid; grid-template-columns: repeat(4, 34px); gap: 8px; }
+.gradient { width: 34px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
+.gradient.on { box-shadow: 0 0 0 2px var(--bar), 0 0 0 4px var(--accent); }
+.row-line { display: flex; align-items: center; gap: 6px; }
+.row-line input { accent-color: var(--accent); }
+.ocr { flex-direction: column; align-items: stretch; gap: 8px; width: 340px; padding: 10px 12px; z-index: 11; }
+.ocr-head { display: flex; align-items: center; justify-content: space-between; }
+.ocr-text { width: 100%; height: 200px; padding: 8px; border-radius: 7px; border: 1px solid var(--bar-sep); background: var(--bar-hover); font: 12.5px/1.5 var(--font); resize: vertical; outline: none; user-select: text; -webkit-user-select: text; }
+.ocr .cta { align-self: flex-end; padding: 5px 14px; border-radius: 6px; background: var(--accent); color: #fff; }
+.code { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px; background: var(--bar-hover); }
+.code-label { font-weight: 600; flex: none; }
+.code-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
+.muted { opacity: .65; }
+.hint { position: fixed; left: 16px; bottom: 16px; z-index: 5; padding: 8px 12px; border-radius: 8px; background: rgba(28,28,30,.72); color: rgba(255,255,255,.9); font-size: 12px; line-height: 1.7; pointer-events: none; }
+.hint.top { bottom: auto; top: 16px; }
+.otoast { position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 20; padding: 7px 14px; border-radius: 8px; background: rgba(28,28,30,.9); color: #fff; font-size: 12.5px; pointer-events: none; }
+.text-editor { position: fixed; z-index: 9; min-width: 40px; padding: 3px; border: 1px dashed var(--accent); border-radius: 3px; background: transparent; outline: none; resize: none; overflow: hidden; white-space: pre; line-height: 1.25; caret-color: var(--accent); }
+
+/* ---- settings ---- */
+body.settings-page { font: 13px/1.5 var(--font); background: var(--medeo-bg, Canvas); color: var(--medeo-text, CanvasText); padding: 20px; overflow-y: auto; }
+#settings { display: flex; flex-direction: column; gap: 14px; }
+.card { border-radius: 10px; padding: 14px 16px; background: rgba(127,127,127,.08); display: flex; flex-direction: column; gap: 10px; }
+.card h3 { font-size: 13px; font-weight: 600; }
+.perm.warn { background: rgba(245,158,11,.12); }
+.perm.ok { background: rgba(34,197,94,.1); }
+.perm-head { display: flex; align-items: center; justify-content: space-between; }
+.badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; }
+.badge.ok { background: rgba(34,197,94,.18); color: #15803d; }
+.badge.warn { background: rgba(245,158,11,.2); color: #b45309; }
+.actions { display: flex; gap: 8px; }
+.line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
+.label { display: flex; flex-direction: column; min-width: 0; }
+.label small, .muted { color: rgba(127,127,127,1); font-size: 11.5px; }
+.controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.path { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px ui-monospace, Menlo, monospace; opacity: .8; }
+.pill { padding: 4px 12px; border-radius: 6px; background: rgba(127,127,127,.16); white-space: nowrap; }
+.pill:hover { background: rgba(127,127,127,.24); }
+.cta { padding: 5px 14px; border-radius: 6px; background: var(--accent); color: #fff; white-space: nowrap; }
+.link { color: var(--accent); white-space: nowrap; }
+.shortcut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
+.keys { min-width: 92px; padding: 4px 10px; border-radius: 6px; background: rgba(127,127,127,.16); font-variant-numeric: tabular-nums; letter-spacing: .5px; }
+.keys.recording { box-shadow: 0 0 0 2px var(--accent); }
+.error { color: #dc2626; font-size: 11.5px; width: 100%; text-align: right; }
+.switch { width: 16px; height: 16px; accent-color: var(--accent); }
+.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
+.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 7px 14px; border-radius: 8px; background: rgba(17,24,39,.9); color: #fff; font-size: 12px; }
+.toast.error { background: #dc2626; }
+.settings-page .seg { display: flex; gap: 1px; padding: 2px; border-radius: 7px; background: rgba(127,127,127,.16); }
+.settings-page .seg-item { padding: 3px 12px; border-radius: 5px; }
+.settings-page .seg-item.on { background: var(--accent); color: #fff; }