@tobq/boardclip 0.0.0-stage → 2.1.108

package/site/shared/vendor/fonts/README.md

@@ -0,0 +1,19 @@
+# Vendored icon font: Material Symbols Rounded
+
+- `material-symbols-rounded.woff2` (561,004 bytes, sha256
+  `8fbf735bcf81756bdc32d66e4f04b189b3fa49fd30c50b06faa89834ca94c51a`), Apache-2.0
+  (https://github.com/google/material-design-icons/blob/master/LICENSE).
+- Source (2026-10-07): the Google Fonts css2 API, fetched with a Chrome 132 User-Agent so it
+  answers with one woff2:
+  `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block`
+  -> `https://fonts.gstatic.com/s/materialsymbolsrounded/v376/syl7-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvLgyidOK7BDB_Qb9vUdV6_gjDK-P2puF_Zs-obHph2-jOcZTKPqw.woff2`
+- Axes: only what the canon pins on `.mi` (clipboard-popup.css): opsz 20, wght 400, GRAD 0
+  fixed; FILL 0..1 kept variable (FILL 1 is the state signal, `--icon-fill`).
+
+Declared ONCE, by the `@font-face` at the top of `site/shared/clipboard-popup.css`, which every
+app window and the website load. `font-display: block`, so a window never shows the ligature
+words ("settings", "close") while the font loads, and nothing waits on Google Fonts.
+
+Re-vendor: fetch the same css2 URL with a current Chrome User-Agent (a different axis set needs
+the `.mi` rule changed too), download the woff2 it names over this file, update the size, hash
+and date above.

package/viewer-preload.js

@@ -0,0 +1,51 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+// Bridge for the in-app image viewer window (viewer.html). Main pushes the
+// image + theme via 'viewer-init'; the clip menu reuses the SAME mutation IPC
+// channels the popup uses (pin/group-assign/numpad-assign/...), so the two
+// surfaces cannot drift.
+let clipId = null;
+
+contextBridge.exposeInMainWorld('viewerApi', {
+  onInit: (callback) => {
+    ipcRenderer.on('viewer-init', (_, init) => {
+      clipId = init && init.id;
+      callback(init || {});
+    });
+  },
+  // Light snapshot (items/groups/numpad map) for the shared clip menu.
+  state: () => ipcRenderer.invoke('clip-window-state', clipId),
+  pin: (id, rev) => ipcRenderer.invoke('pin', id, rev),
+  groupCreate: (name) => ipcRenderer.invoke('group-create', name),
+  groupAssign: (id, group, rev) => ipcRenderer.invoke('group-assign', id, group, rev),
+  numpadAssign: (id, slot, rev) => ipcRenderer.invoke('numpad-assign', id, slot, rev),
+  numpadUnassign: (slot) => ipcRenderer.invoke('numpad-unassign', slot),
+  setClipTitle: (id, title, rev) => ipcRenderer.invoke('set-clip-title', id, title, rev),
+  deleteItems: (targets) => ipcRenderer.invoke('delete-items', targets), // [{ id, rev }]
+  copyImagePath: (id) => ipcRenderer.invoke('copy-image-path', id),
+  openImageExternal: (id) => ipcRenderer.invoke('open-image-external', id),
+  // Drag this image out as a file (native drag of a temporary copy).
+  startDrag: () => ipcRenderer.send('start-drag', [clipId]),
+  close: () => ipcRenderer.send('viewer-close'),
+  // The bar's height + resolved colours, for the native window controls.
+  windowChrome: (chrome) => ipcRenderer.send('window-chrome', chrome),
+  // Ctrl/Cmd+= / - / 0, claimed in main before the app menu: zoom the image.
+  onZoomKey: (callback) => {
+    const listener = (_, act) => callback(act);
+    ipcRenderer.on('image-zoom-key', listener);
+    return () => ipcRenderer.removeListener('image-zoom-key', listener);
+  },
+  getColorScheme: () => ipcRenderer.invoke('get-color-scheme'),
+  onColorSchemeChanged: (callback) => {
+    const listener = (_, scheme) => callback(scheme);
+    ipcRenderer.on('color-scheme-changed', listener);
+    return () => ipcRenderer.removeListener('color-scheme-changed', listener);
+  },
+  // Appearance (accent, density, corners, theme mode, this window's surface):
+  // one event whenever any of it changes - a setting, another device, the OS accent.
+  onAppearanceChanged: (callback) => {
+    const listener = (_, look) => callback(look || {});
+    ipcRenderer.on('appearance-changed', listener);
+    return () => ipcRenderer.removeListener('appearance-changed', listener);
+  },
+});

package/viewer.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>Image</title>
+<script>
+  document.documentElement.dataset.theme = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+</script>
+<link rel="stylesheet" href="site/shared/clipboard-popup.css">
+<link rel="stylesheet" href="site/shared/clipboard-window.css">
+<style>
+  /* Viewer window shell only; the viewer itself + tokens come from the shared
+     clipboard-popup.css + Core.createImageViewer (single source), the window
+     base (reset, font, background, glass scrim) from clipboard-window.css. */
+  #viewerHost { height:100%; }
+</style></head><body>
+<div id="viewerHost"></div>
+<div class="toast" id="toast">Copied</div>
+<script src="site/shared/clip-search.js"></script>
+<script src="site/shared/clipboard-ui-core.js"></script>
+<script>
+const Core = window.BoardClipCore;
+const host = document.getElementById('viewerHost');
+const toast = document.getElementById('toast');
+let toastTimer = null;
+function showToast(msg) { toast.textContent = msg || 'Copied'; toast.classList.add('show'); clearTimeout(toastTimer); toastTimer = setTimeout(() => toast.classList.remove('show'), 1200); }
+
+// Theme: follow the app's theme_mode setting + live system changes (same as editor.html).
+let themeMode = 'system';
+let systemDark = matchMedia('(prefers-color-scheme: dark)').matches;
+function refreshTheme() { Core.applyTheme(document.documentElement, themeMode, systemDark); }
+if (window.viewerApi.getColorScheme) window.viewerApi.getColorScheme().then((s) => { systemDark = s !== 'light'; refreshTheme(); }).catch(() => {});
+if (window.viewerApi.onColorSchemeChanged) window.viewerApi.onColorSchemeChanged((s) => { systemDark = s !== 'light'; refreshTheme(); });
+// Later appearance changes (a setting here or on another device, the OS
+// accent, the glass scope) arrive as the same payload as init.
+if (window.viewerApi.onAppearanceChanged) window.viewerApi.onAppearanceChanged((look) => {
+  if (look.themeMode) { themeMode = (look.themeMode === 'light' || look.themeMode === 'dark') ? look.themeMode : 'system'; refreshTheme(); }
+  Core.applyAppearance(document.documentElement, look);
+});
+
+let viewer = null;
+let clipId = null;
+// Light state snapshot backing the shared clip menu (items for numpad previews,
+// groups tree, pin state). Refetched right before the menu opens + after every
+// mutation, so it is always current without a live push channel.
+let state = { item: null, items: [], groups: [], aiGroup: 'AI' };
+async function refreshState() {
+  state = await window.viewerApi.state();
+  if (state && state.item && viewer) viewer.setTitle(Core.titleOf(state.item) || 'Image');
+  // Title-bar tag strip: the clip's groups + the "+" picker (images always
+  // exist as clips, so no commit-on-add here; a null item hides the strip).
+  if (viewer) viewer.setTags(state ? state.item : null);
+}
+
+// The SAME shared controller the popup uses drives the menu dispatch (pin/
+// group/numpad/rename/delete/save/open-external), against an adapter backed by
+// the viewer IPC. context 'viewer' swaps "Open image" for "Open externally".
+// Mutations send the rev of the clip this window shows; a stale one is refused.
+const clipRevOf = (id) => { const it = state.items.find((x) => Core.itemId(x) === id); return it ? it.rev : undefined; };
+const revGuard = (run, fallback) => Core.guardRevision(run, { toast: showToast, refresh: () => refreshState(), fallback });
+const adapter = {
+  menuContext: 'viewer',
+  itemById: (id) => state.items.find((it) => Core.itemId(it) === id) || null,
+  allItems: () => state.items,
+  groupNames: () => state.groups,
+  numpadMap: () => Core.numpadMap(state.items),
+  protectedGroups: () => new Set([state.aiGroup]),
+  pin: (id) => revGuard(() => window.viewerApi.pin(id, clipRevOf(id)), false),
+  toggleGroup: (id, group) => revGuard(() => window.viewerApi.groupAssign(id, group, clipRevOf(id)), false),
+  createGroup: (name) => window.viewerApi.groupCreate(name),
+  numpadAssign: (id, slot) => revGuard(() => window.viewerApi.numpadAssign(id, slot, clipRevOf(id)), false),
+  numpadUnassign: (slot) => window.viewerApi.numpadUnassign(slot),
+  setClipTitle: (id, title) => revGuard(() => window.viewerApi.setClipTitle(id, title, clipRevOf(id)), false),
+  // Delete closes the window (the popup shows the Undo toast on its side).
+  deleteClips: async (ids) => {
+    const done = await revGuard(async () => { await window.viewerApi.deleteItems(Core.revisionTargets(ids, clipRevOf)); return true; }, false);
+    if (done) window.viewerApi.close();
+    return [];
+  },
+  openImageExternal: (item) => window.viewerApi.openImageExternal(Core.itemId(item)),
+  saveImage: async (item) => { const d = await window.viewerApi.copyImagePath(Core.itemId(item)); return d && d.path ? 'Path copied' : null; },
+  toast: (msg) => showToast(msg),
+  render: () => {},
+  refresh: () => refreshState(),
+};
+const controller = Core.createClipController(adapter);
+document.addEventListener('click', (e) => controller.onClick(e));
+
+async function openMenu(x, y) {
+  await refreshState();
+  if (!state.item) return;
+  controller.openClipMenu(Core.itemId(state.item), x, y);
+}
+
+window.viewerApi.onInit(async (init) => {
+  themeMode = (init.themeMode === 'light' || init.themeMode === 'dark') ? init.themeMode : 'system';
+  refreshTheme();
+  Core.applyAppearance(document.documentElement, init);
+  clipId = init.id;
+  host.innerHTML = '';
+  viewer = Core.createImageViewer({
+    src: init.src,
+    title: init.title || 'Image',
+    nativeControls: true,
+    onMenu: (x, y) => openMenu(x, y),
+    onClose: () => window.viewerApi.close(),
+    // Drag the image out (title-bar handle; the image itself at fit size or
+    // with Alt): a native file drag of a temporary copy, done by main.
+    onDragOut: window.viewerApi.startDrag ? () => window.viewerApi.startDrag() : null,
+  });
+  host.appendChild(viewer.el);
+  // The OS's own window controls: the bar reserves their room and reports its
+  // colours, so the caption buttons match it (main's setTitleBarOverlay).
+  Core.attachWindowControls(init.windowControls, window.viewerApi.windowChrome);
+  viewer.focus();
+  refreshState();
+});
+// Ctrl/Cmd+= / - / 0 zoom the image (main claims them before the app menu).
+if (window.viewerApi.onZoomKey) window.viewerApi.onZoomKey((act) => { if (viewer) viewer.zoomKey(act); });
+
+// Right-click anywhere → the same clip menu (parity with popup rows).
+document.addEventListener('contextmenu', (e) => {
+  e.preventDefault();
+  openMenu(e.clientX, e.clientY);
+});
+// Escape falls through the viewer root (its handler covers the stage); catch
+// stray focus targets here too. Dialogs/menu capture their own Escape first.
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') { e.preventDefault(); window.viewerApi.close(); }
+});
+</script>
+</body></html>