waybetter 0.1.0 → 0.6.0

package/dist/shell/frame/chromeTheme.js

@@ -0,0 +1,81 @@
+// The app's own window in the active theme: the theme's palette and its chrome/mono fonts become
+// the shell's `--wb-c-*` (tabs, address bar, titlebar, menus) and the panel's `--wb-p-*` tokens,
+// which shell.css (and the app's panel CSS) read with Night Ink as the fallback. Pure (tests,
+// shell, panel). The app turns its theme documents into a `ChromeTheme` (site.themes.chrome).
+/** The shell's own interface font (what an inheriting chrome role falls back to outside the page). */
+export const SHELL_UI_FONT = "'Geist Variable', system-ui, sans-serif";
+export const SHELL_MONO_FONT = "'Geist Mono Variable', ui-monospace, monospace";
+function hexToRgb(hex) {
+    const n = parseInt(hex.slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+const toHex = (rgb) => `#${rgb.map(v => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, '0')).join('')}`;
+export function luminance(hex) {
+    const [r, g, b] = hexToRgb(hex).map(v => { const c = v / 255; return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+export function contrast(a, b) {
+    const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
+    return (x + 0.05) / (y + 0.05);
+}
+export function mix(a, b, t) {
+    const [x, y] = [hexToRgb(a), hexToRgb(b)];
+    return toHex(x.map((v, i) => v + (y[i] - v) * t));
+}
+const channels = (hex) => hexToRgb(hex).join(' ');
+/** Moves `color` toward `pole` until it reads at `ratio` on `surface`. */
+function legible(color, surface, ratio) {
+    if (contrast(color, surface) >= ratio)
+        return color;
+    const pole = luminance(surface) > 0.18 ? '#000000' : '#ffffff';
+    for (let t = 0.1; t <= 1; t += 0.1) {
+        const next = mix(color, pole, t);
+        if (contrast(next, surface) >= ratio)
+            return next;
+    }
+    return pole;
+}
+/**
+ * CSS custom properties for the chrome in `theme`. A theme that keeps the site's colors changes
+ * only the fonts; `own` keeps wayBetter's own style entirely (empty result).
+ */
+export function chromeVars(theme, own = false) {
+    if (own)
+        return {};
+    const vars = {};
+    // The chrome inherits the theme's interface font (a web font of the site is not available here: then Geist).
+    if (theme.chromeFont)
+        vars['--wb-f-chrome'] = theme.chromeFont;
+    if (theme.monoFont)
+        vars['--wb-f-mono'] = theme.monoFont;
+    const colors = theme.colors;
+    if (!colors)
+        return vars;
+    const { bg, surface, elevated, border, text, muted, accent } = colors;
+    const dark = luminance(bg) < luminance(text);
+    const ink = legible(mix(accent, text, 0.55), elevated, 4.5);
+    Object.assign(vars, {
+        // Shell chrome: the ground under the tabs is the theme's column background.
+        '--wb-c-ground': bg, '--wb-c-chrome': surface, '--wb-c-field': mix(surface, elevated, 0.45),
+        '--wb-c-raised': elevated, '--wb-c-raised-2': mix(elevated, border, 0.45),
+        '--wb-c-line': border, '--wb-c-line-soft': mix(border, bg, 0.45), '--wb-c-line-strong': mix(border, text, 0.14),
+        '--wb-c-text': text, '--wb-c-text-2': mix(text, muted, 0.4), '--wb-c-muted': muted, '--wb-c-faint': mix(muted, bg, 0.38),
+        '--wb-c-text-rgb': channels(text), '--wb-c-accent': accent, '--wb-c-accent-rgb': channels(accent), '--wb-c-accent-ink': ink,
+        '--wb-c-scheme': dark ? 'dark' : 'light',
+        ...(dark ? {} : { '--wb-c-shadow-pop': `0 18px 44px -14px rgba(${hexToRgb(mix(text, bg, 0.2)).join(', ')}, .28), 0 3px 10px rgba(0, 0, 0, .08)` }),
+        // Panel.
+        '--wb-p-ground': bg, '--wb-p-chrome': mix(bg, surface, 0.5), '--wb-p-card': surface, '--wb-p-field': mix(surface, elevated, 0.5), '--wb-p-raise': elevated,
+        '--wb-p-line': border, '--wb-p-line-soft': mix(border, bg, 0.4), '--wb-p-line-strong': mix(border, text, 0.16),
+        '--wb-p-text': text, '--wb-p-text-2': mix(text, muted, 0.3), '--wb-p-muted': muted, '--wb-p-faint': mix(muted, bg, 0.35),
+        '--wb-p-accent': accent, '--wb-p-accent-rgb': channels(accent), '--wb-p-accent-ink': contrast(accent, '#ffffff') >= contrast(accent, bg) ? '#ffffff' : bg,
+        '--wb-p-text-rgb': channels(text), '--wb-p-popover': elevated, '--wb-p-thumb': `linear-gradient(180deg, ${mix(elevated, text, 0.08)}, ${elevated})`,
+        '--wb-p-track': mix(elevated, border, 0.5), '--wb-p-knob': mix(muted, text, 0.3),
+    });
+    return vars;
+}
+/** Every variable chromeVars may set (to clear them when a pane returns to the global theme). */
+export const CHROME_VAR_NAMES = Object.keys(chromeVars({
+    colors: { bg: '#000000', surface: '#111111', elevated: '#222222', border: '#333333', text: '#ffffff', muted: '#999999', accent: '#1d9bf0' },
+    chromeFont: 'A', monoFont: 'B',
+})).concat('--wb-c-shadow-pop');
+//# sourceMappingURL=chromeTheme.js.map

package/dist/shell/frame/chromeTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chromeTheme.js","sourceRoot":"","sources":["../../../../../../shell/src/frame/chromeTheme.ts"],"names":[],"mappings":"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","sourcesContent":["// The app's own window in the active theme: the theme's palette and its chrome/mono fonts become\n// the shell's `--wb-c-*` (tabs, address bar, titlebar, menus) and the panel's `--wb-p-*` tokens,\n// which shell.css (and the app's panel CSS) read with Night Ink as the fallback. Pure (tests,\n// shell, panel). The app turns its theme documents into a `ChromeTheme` (site.themes.chrome).\n\n/** The shell's own interface font (what an inheriting chrome role falls back to outside the page). */\nexport const SHELL_UI_FONT = \"'Geist Variable', system-ui, sans-serif\";\nexport const SHELL_MONO_FONT = \"'Geist Mono Variable', ui-monospace, monospace\";\n\n/** A theme as the chrome needs it: seven colors (none: the site's own colors) and two font stacks. */\nexport type ChromeTheme = {\n  colors?: { bg: string; surface: string; elevated: string; border: string; text: string; muted: string; accent: string } | null;\n  /** The chrome's font stack when the theme sets one other than SHELL_UI_FONT. */\n  chromeFont?: string | null;\n  /** The mono font stack when the theme sets one. */\n  monoFont?: string | null;\n};\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const n = parseInt(hex.slice(1), 16);\n  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];\n}\nconst toHex = (rgb: number[]) => `#${rgb.map(v => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, '0')).join('')}`;\nexport function luminance(hex: string): number {\n  const [r, g, b] = hexToRgb(hex).map(v => { const c = v / 255; return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; }) as [number, number, number];\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\nexport function contrast(a: string, b: string): number {\n  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m) as [number, number];\n  return (x + 0.05) / (y + 0.05);\n}\nexport function mix(a: string, b: string, t: number): string {\n  const [x, y] = [hexToRgb(a), hexToRgb(b)];\n  return toHex(x.map((v, i) => v + (y[i]! - v) * t));\n}\n\nconst channels = (hex: string) => hexToRgb(hex).join(' ');\n\n/** Moves `color` toward `pole` until it reads at `ratio` on `surface`. */\nfunction legible(color: string, surface: string, ratio: number): string {\n  if (contrast(color, surface) >= ratio) return color;\n  const pole = luminance(surface) > 0.18 ? '#000000' : '#ffffff';\n  for (let t = 0.1; t <= 1; t += 0.1) { const next = mix(color, pole, t); if (contrast(next, surface) >= ratio) return next; }\n  return pole;\n}\n\n/**\n * CSS custom properties for the chrome in `theme`. A theme that keeps the site's colors changes\n * only the fonts; `own` keeps wayBetter's own style entirely (empty result).\n */\nexport function chromeVars(theme: ChromeTheme, own = false): Record<string, string> {\n  if (own) return {};\n  const vars: Record<string, string> = {};\n  // The chrome inherits the theme's interface font (a web font of the site is not available here: then Geist).\n  if (theme.chromeFont) vars['--wb-f-chrome'] = theme.chromeFont;\n  if (theme.monoFont) vars['--wb-f-mono'] = theme.monoFont;\n  const colors = theme.colors;\n  if (!colors) return vars;\n  const { bg, surface, elevated, border, text, muted, accent } = colors;\n  const dark = luminance(bg) < luminance(text);\n  const ink = legible(mix(accent, text, 0.55), elevated, 4.5);\n  Object.assign(vars, {\n    // Shell chrome: the ground under the tabs is the theme's column background.\n    '--wb-c-ground': bg, '--wb-c-chrome': surface, '--wb-c-field': mix(surface, elevated, 0.45),\n    '--wb-c-raised': elevated, '--wb-c-raised-2': mix(elevated, border, 0.45),\n    '--wb-c-line': border, '--wb-c-line-soft': mix(border, bg, 0.45), '--wb-c-line-strong': mix(border, text, 0.14),\n    '--wb-c-text': text, '--wb-c-text-2': mix(text, muted, 0.4), '--wb-c-muted': muted, '--wb-c-faint': mix(muted, bg, 0.38),\n    '--wb-c-text-rgb': channels(text), '--wb-c-accent': accent, '--wb-c-accent-rgb': channels(accent), '--wb-c-accent-ink': ink,\n    '--wb-c-scheme': dark ? 'dark' : 'light',\n    ...(dark ? {} : { '--wb-c-shadow-pop': `0 18px 44px -14px rgba(${hexToRgb(mix(text, bg, 0.2)).join(', ')}, .28), 0 3px 10px rgba(0, 0, 0, .08)` }),\n    // Panel.\n    '--wb-p-ground': bg, '--wb-p-chrome': mix(bg, surface, 0.5), '--wb-p-card': surface, '--wb-p-field': mix(surface, elevated, 0.5), '--wb-p-raise': elevated,\n    '--wb-p-line': border, '--wb-p-line-soft': mix(border, bg, 0.4), '--wb-p-line-strong': mix(border, text, 0.16),\n    '--wb-p-text': text, '--wb-p-text-2': mix(text, muted, 0.3), '--wb-p-muted': muted, '--wb-p-faint': mix(muted, bg, 0.35),\n    '--wb-p-accent': accent, '--wb-p-accent-rgb': channels(accent), '--wb-p-accent-ink': contrast(accent, '#ffffff') >= contrast(accent, bg) ? '#ffffff' : bg,\n    '--wb-p-text-rgb': channels(text), '--wb-p-popover': elevated, '--wb-p-thumb': `linear-gradient(180deg, ${mix(elevated, text, 0.08)}, ${elevated})`,\n    '--wb-p-track': mix(elevated, border, 0.5), '--wb-p-knob': mix(muted, text, 0.3),\n  });\n  return vars;\n}\n\n/** Every variable chromeVars may set (to clear them when a pane returns to the global theme). */\nexport const CHROME_VAR_NAMES = Object.keys(chromeVars({\n  colors: { bg: '#000000', surface: '#111111', elevated: '#222222', border: '#333333', text: '#ffffff', muted: '#999999', accent: '#1d9bf0' },\n  chromeFont: 'A', monoFont: 'B',\n})).concat('--wb-c-shadow-pop');\n"]}

package/dist/shell/frame/deck.css

@@ -0,0 +1,209 @@
+/*
+ * Decks: the deck tab. A 40px deck bar, then a row of column cards. Each card is a 46px
+ * header over a body that a site tab webview covers exactly (so the body is square and flush with
+ * the window bottom; only the header is ours). Night Ink tokens from shell.css.
+ */
+.bt-deck { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--bt-ground); color: var(--bt-text); overflow: hidden; }
+
+/* The deck's dockview tab: unread total. */
+.bt-tab-unread { flex: none; min-width: 16px; height: 16px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--bt-accent); color: #fff; font: 700 10px/16px var(--bt-mono); text-align: center; }
+
+/* Deck bar ---------------------------------------------------------------------------------- */
+.bt-deck-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding-block: 0; padding-inline: 14px 10px; }
+.bt-deck-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, rgba(79, 107, 255, .28), rgba(34, 211, 238, .18)); box-shadow: inset 0 0 0 1px rgba(159, 211, 255, .18); color: #bfe0ff; }
+.bt-deck-mark .bt-glyph { width: 13px; height: 13px; }
+.bt-deck-name { font: 650 13.5px/1 var(--bt-ui); letter-spacing: -.01em; }
+.bt-deck-count { color: var(--bt-faint); font: 500 11.5px/1 var(--bt-ui); }
+.bt-deck-total { padding: 4px 8px; border-radius: 999px; background: var(--bt-accent-soft); color: var(--bt-accent-ink); font: 600 11px/1 var(--bt-mono); box-shadow: inset 0 0 0 1px rgba(29, 155, 240, .28); }
+.bt-deck-fill { flex: 1; }
+.bt-deck-pager { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bt-field); box-shadow: inset 0 0 0 1px var(--bt-line-soft); }
+.bt-deck-pager .bt-icon { width: 24px; height: 24px; border-radius: 999px; }
+.bt-deck-pager .bt-glyph { width: 13px; height: 13px; }
+.bt-deck-dot { width: 18px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
+.bt-deck-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 999px; background: var(--bt-line-strong); transition: width var(--bt-t2) var(--bt-ease-out), margin var(--bt-t2) var(--bt-ease-out), background-color var(--bt-t1) var(--bt-ease); }
+.bt-deck-dot:hover::after { background: var(--bt-muted); }
+.bt-deck-dot.is-on::after { width: 14px; margin-left: -7px; background: var(--bt-accent); } /* rtl-ok: centred with left: 50% */
+.bt-deck-memory { color: var(--bt-muted); font: 500 11px/1 var(--bt-mono); padding: 5px 8px; border-radius: 7px; background: rgba(238, 240, 247, .04); }
+.bt-deck-action { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-block: 0; padding-inline: 9px 11px; border: 0; border-radius: 8px; background: rgba(238, 240, 247, .05); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, .06); color: var(--bt-text-2); font: 550 12.5px/1 var(--bt-ui); cursor: pointer; transition: background-color var(--bt-t1) var(--bt-ease), color var(--bt-t1) var(--bt-ease); }
+.bt-deck-action .bt-glyph { width: 14px; height: 14px; }
+.bt-deck-action:hover { background: rgba(238, 240, 247, .09); color: var(--bt-text); }
+.bt-deck-action.is-on { background: var(--bt-accent-soft); box-shadow: inset 0 0 0 1px rgba(29, 155, 240, .38); color: var(--bt-accent-ink); }
+.bt-deck-settings { width: 28px; height: 28px; }
+.bt-deck-settings .bt-glyph { width: 15px; height: 15px; }
+
+/* Columns row ------------------------------------------------------------------------------- */
+.bt-deck-row { position: relative; flex: 1; min-height: 0; margin: 0 8px; }
+.bt-col, .bt-compose {
+  position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; box-sizing: border-box;
+  border-radius: 12px 12px 0 0; background: var(--bt-chrome); box-shadow: inset 0 0 0 1px var(--bt-line-soft);
+  --bt-col-account: var(--bt-accent);
+}
+/* Motion never transforms a column's body: the webview is placed on the body's rectangle, so only
+   opacity (the card) and the header move. */
+.bt-col { animation: bt-fade-in var(--bt-t3) var(--bt-ease-out) both; }
+.bt-col > .bt-col-head { animation: bt-col-in var(--bt-t3) var(--bt-ease-out) both; }
+.bt-col.is-leaving { animation: bt-col-out 180ms var(--bt-ease) forwards; pointer-events: none; }
+.bt-col.is-leaving > .bt-col-head { animation: bt-col-head-out 180ms var(--bt-ease) forwards; }
+@keyframes bt-col-in { from { opacity: 0; transform: translateY(8px); } }
+@keyframes bt-col-out { to { opacity: 0; } }
+@keyframes bt-col-head-out { to { transform: translateY(-6px); } }
+
+.bt-col-head, .bt-compose-head {
+  position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding-block: 0; padding-inline: 8px 6px;
+  border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--bt-line-soft);
+  background: linear-gradient(180deg, rgba(238, 240, 247, .025), transparent);
+}
+/* The focused column: an accent line on top and a lifted header. */
+.bt-col-head::before, .bt-compose-head::before {
+  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
+  background: var(--bt-brush); opacity: 0; transform: scaleX(.6); transition: opacity var(--bt-t2) var(--bt-ease), transform var(--bt-t3) var(--bt-ease-out);
+}
+.bt-col.is-focused .bt-col-head::before, .bt-compose-head::before { opacity: 1; transform: none; }
+.bt-col.is-focused { box-shadow: inset 0 0 0 1px rgba(29, 155, 240, .32); }
+.bt-col.is-focused .bt-col-head { background: linear-gradient(180deg, rgba(29, 155, 240, .08), rgba(29, 155, 240, 0)); }
+
+.bt-col-glyph {
+  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; padding: 0; border: 0;
+  background: color-mix(in srgb, var(--bt-col-account) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bt-col-account) 30%, transparent);
+  color: color-mix(in srgb, var(--bt-col-account) 55%, #ffffff);
+}
+.bt-col-glyph .bt-glyph { width: 15px; height: 15px; }
+.bt-col-back { cursor: pointer; background: rgba(238, 240, 247, .07); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, .1); color: var(--bt-text); transition: background-color var(--bt-t1) var(--bt-ease); }
+.bt-col-back:hover { background: rgba(238, 240, 247, .12); }
+.bt-col-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.bt-col-titles strong { font: 650 13.5px/1.1 var(--bt-ui); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bt-col-titles span { color: var(--bt-muted); font: 450 11.5px/1.1 var(--bt-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bt-col-fill { flex: 1; min-width: 4px; }
+.bt-col-unread {
+  flex: none; min-width: 22px; height: 20px; padding: 0 7px; box-sizing: border-box; border: 0; border-radius: 999px; cursor: pointer;
+  background: var(--bt-accent); color: #fff; font: 700 11px/20px var(--bt-mono); letter-spacing: -.02em;
+  box-shadow: 0 0 0 3px rgba(29, 155, 240, .16), 0 4px 12px -4px rgba(29, 155, 240, .8);
+  animation: bt-unread-in var(--bt-t3) var(--bt-ease-out);
+}
+.bt-col-unread:hover { filter: brightness(1.12); }
+@keyframes bt-unread-in { from { transform: scale(.6); opacity: 0; } }
+.bt-col-account { display: grid; place-items: center; flex: none; padding: 2px; border-radius: 999px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--bt-col-account) 70%, transparent); }
+.bt-col-btn { width: 28px; height: 28px; border-radius: 8px; color: var(--bt-muted); }
+.bt-col-btn .bt-glyph { width: 15px; height: 15px; }
+.bt-col-btn:hover { color: var(--bt-text); }
+.bt-col-btn.is-active { color: var(--bt-accent-ink); background: var(--bt-accent-soft); }
+.bt-col-key { position: absolute; inset-inline-end: 6px; top: 4px; color: var(--bt-faint); font: 600 9px/1 var(--bt-mono); opacity: 0; transition: opacity var(--bt-t1) var(--bt-ease); pointer-events: none; }
+.bt-col-head:hover .bt-col-key { opacity: .8; }
+.bt-col-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
+.bt-col-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--bt-accent), transparent); animation: bt-col-load 1.1s var(--bt-ease) infinite; }
+@keyframes bt-col-load { from { left: -40%; } to { left: 100%; } }
+.bt-col-body { position: relative; flex: 1; min-height: 0; background: #000; }
+.bt-col-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--bt-faint); font: 500 12px/1 var(--bt-ui); }
+
+/* Compose dock ------------------------------------------------------------------------------ */
+.bt-compose { right: 0; animation: bt-fade-in var(--bt-t3) var(--bt-ease-out) both; box-shadow: inset 0 0 0 1px rgba(29, 155, 240, .28), -18px 0 40px -24px rgba(0, 0, 0, .8); }
+.bt-compose > .bt-compose-head { animation: bt-slide-in var(--bt-t3) var(--bt-ease-out) both; }
+.bt-compose-glyph { --bt-col-account: var(--bt-accent); }
+.bt-compose-accounts { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bt-field); }
+.bt-compose-accounts button { display: grid; place-items: center; padding: 2px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; opacity: .55; transition: opacity var(--bt-t1) var(--bt-ease); }
+.bt-compose-accounts button:hover { opacity: .9; }
+.bt-compose-accounts button.is-on { opacity: 1; box-shadow: 0 0 0 1.5px var(--bt-accent); }
+
+/* Popovers (filters, column menu) --------------------------------------------------------------- */
+.bt-deck-pop { gap: 2px; }
+.bt-deck-pop-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 10px; }
+.bt-deck-pop-head .bt-glyph { width: 15px; height: 15px; color: var(--bt-accent); }
+.bt-deck-pop-head strong { font: 650 13px/1 var(--bt-ui); }
+.bt-deck-pop-head span { margin-inline-start: auto; color: var(--bt-faint); font: 500 11.5px/1 var(--bt-ui); max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bt-deck-terms { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 6px; }
+.bt-deck-input { height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--bt-field); box-shadow: inset 0 0 0 1px var(--bt-line); color: var(--bt-text); font: 450 12.5px/1 var(--bt-mono); outline: none; user-select: text; }
+.bt-deck-input:focus { box-shadow: var(--bt-ring); }
+.bt-deck-chips { display: flex; flex-wrap: wrap; gap: 5px; max-height: 120px; overflow-y: auto; scrollbar-width: thin; }
+.bt-deck-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 24px; padding-block: 0; padding-inline: 9px 2px; border-radius: 999px; background: rgba(238, 240, 247, .06); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, .07); font: 500 12px/1 var(--bt-ui); }
+.bt-deck-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bt-deck-chip.is-regex { font-family: var(--bt-mono); color: #d7c6ff; background: rgba(168, 85, 247, .12); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .25); }
+.bt-menu .bt-deck-chip button { width: 20px; height: 20px; padding: 0; justify-content: center; border-radius: 999px; }
+.bt-deck-chip .bt-glyph { width: 11px; height: 11px; }
+.bt-deck-check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
+.bt-deck-check:hover { background: var(--bt-hover); }
+.bt-deck-check input { position: absolute; opacity: 0; pointer-events: none; }
+.bt-deck-check-box { display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--bt-line-strong); color: transparent; transition: background-color var(--bt-t1) var(--bt-ease); }
+.bt-deck-check-box .bt-glyph { width: 11px; height: 11px; stroke-width: 2.4; }
+.bt-deck-check input:checked + .bt-deck-check-box { background: var(--bt-accent); box-shadow: none; color: #fff; }
+.bt-deck-check input:focus-visible + .bt-deck-check-box { box-shadow: var(--bt-ring); }
+.bt-deck-check-text { display: flex; flex-direction: column; gap: 3px; }
+.bt-deck-check-text strong { font: 550 12.5px/1.1 var(--bt-ui); }
+.bt-deck-check-text small { color: var(--bt-muted); font: 400 11.5px/1.2 var(--bt-ui); }
+.bt-deck-widths { display: flex; align-items: center; gap: 2px; padding-block: 4px; padding-inline: 10px 6px; color: var(--bt-muted); font: 500 12px/1 var(--bt-ui); }
+.bt-deck-widths > span { margin-inline-end: auto; }
+.bt-menu .bt-deck-widths button { height: 24px; padding: 0 6px; border-radius: 6px; color: var(--bt-muted); font: 500 11px/1 var(--bt-mono); }
+.bt-menu .bt-deck-widths button.is-on { background: var(--bt-accent-soft); color: var(--bt-accent-ink); }
+
+/* Buttons ----------------------------------------------------------------------------------- */
+.bt-deck-primary, .bt-deck-secondary {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; cursor: pointer;
+  font: 600 13px/1 var(--bt-ui); transition: filter var(--bt-t1) var(--bt-ease), background-color var(--bt-t1) var(--bt-ease);
+}
+.bt-deck-primary { background: var(--bt-accent); color: #fff; box-shadow: 0 6px 18px -8px rgba(29, 155, 240, .9), inset 0 1px 0 rgba(255, 255, 255, .18); }
+.bt-deck-primary:hover:not(:disabled) { filter: brightness(1.08); }
+.bt-deck-primary:disabled { opacity: .45; cursor: default; }
+.bt-deck-primary .bt-glyph { width: 15px; height: 15px; stroke-width: 2.2; }
+.bt-deck-secondary { background: rgba(238, 240, 247, .06); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, .08); color: var(--bt-text-2); }
+.bt-deck-secondary:hover:not(:disabled) { background: rgba(238, 240, 247, .1); color: var(--bt-text); }
+.bt-deck-secondary:disabled { opacity: .45; cursor: default; }
+
+/* Empty deck -------------------------------------------------------------------------------- */
+.bt-deck-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
+.bt-deck-empty h2 { margin: 6px 0 0; font: 700 22px/1.1 var(--bt-ui); letter-spacing: -.02em; }
+.bt-deck-empty p { margin: 0; max-width: 420px; color: var(--bt-muted); font: 400 13.5px/1.5 var(--bt-ui); }
+.bt-deck-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
+.bt-deck-empty-keys { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; justify-content: center; margin-top: 10px !important; font-size: 12px !important; color: var(--bt-faint) !important; }
+.bt-deck-empty-keys > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.bt-deck-empty-art { display: flex; gap: 6px; height: 64px; align-items: flex-end; }
+.bt-deck-empty-art span { width: 30px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, rgba(79, 107, 255, .5), rgba(34, 211, 238, .12)); box-shadow: inset 0 0 0 1px rgba(159, 211, 255, .2); animation: bt-rise var(--bt-t3) var(--bt-ease-out) both; }
+.bt-deck-empty-art span:nth-child(1) { height: 64px; }
+.bt-deck-empty-art span:nth-child(2) { height: 52px; }
+.bt-deck-empty-art span:nth-child(3) { height: 58px; }
+.bt-deck-empty-art span:nth-child(4) { height: 44px; background: linear-gradient(180deg, rgba(168, 85, 247, .5), rgba(168, 85, 247, .1)); }
+
+/* Add column dialog ------------------------------------------------------------------------- */
+.bt-addcol { width: min(680px, 100%); max-height: min(84vh, 640px); overflow-y: auto; }
+.bt-addcol-head { display: flex; align-items: baseline; gap: 8px; padding-block: 18px 6px; padding-inline: 20px 16px; }
+.bt-addcol-head h2 { margin: 0; font: 700 17px/1.1 var(--bt-ui); letter-spacing: -.015em; }
+.bt-addcol-head > span { color: var(--bt-muted); font-size: 12.5px; }
+.bt-addcol-head .bt-icon { margin-inline-start: auto; align-self: center; }
+.bt-addcol-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 16px 6px; }
+.bt-addcol-type {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 96px; padding: 12px; border: 0; border-radius: 11px; cursor: pointer; text-align: start;
+  background: rgba(238, 240, 247, .035); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, .06); color: var(--bt-text-2);
+  transition: background-color var(--bt-t1) var(--bt-ease), box-shadow var(--bt-t1) var(--bt-ease), transform var(--bt-t2) var(--bt-ease-out);
+}
+.bt-addcol-type:hover { background: rgba(238, 240, 247, .06); }
+.bt-addcol-type:active { transform: scale(.985); }
+.bt-addcol-type.is-on { background: var(--bt-accent-soft); box-shadow: inset 0 0 0 1.5px rgba(29, 155, 240, .6); color: var(--bt-text); }
+.bt-addcol-type strong { font: 650 13.5px/1.1 var(--bt-ui); color: var(--bt-text); }
+.bt-addcol-type small { color: var(--bt-muted); font: 400 11.5px/1.35 var(--bt-ui); }
+.bt-addcol-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(238, 240, 247, .06); color: var(--bt-muted); }
+.bt-addcol-type.is-on .bt-addcol-icon { background: rgba(29, 155, 240, .22); color: #bfe0ff; }
+.bt-addcol-icon .bt-glyph { width: 15px; height: 15px; }
+.bt-addcol-value { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 4px; }
+.bt-addcol-value label, .bt-addcol-label { color: var(--bt-faint); font: 600 10.5px/1 var(--bt-ui); letter-spacing: .08em; text-transform: uppercase; }
+.bt-addcol-field { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--bt-field); box-shadow: inset 0 0 0 1px var(--bt-line); }
+.bt-addcol-field:focus-within { box-shadow: var(--bt-ring); }
+.bt-addcol-field.is-bad { box-shadow: 0 0 0 1px rgba(229, 72, 77, .7); }
+.bt-addcol-field .bt-glyph { color: var(--bt-muted); }
+.bt-addcol-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--bt-text); font: 500 14px/1 var(--bt-mono); outline: none; user-select: text; }
+.bt-addcol-field input::placeholder { color: var(--bt-faint); }
+.bt-addcol-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.bt-addcol-chips button { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(238, 240, 247, .06); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, .08); color: var(--bt-text-2); font: 500 12px/1 var(--bt-mono); cursor: pointer; }
+.bt-addcol-chips button[aria-selected=true] { background: var(--bt-accent-soft); color: var(--bt-accent-ink); box-shadow: inset 0 0 0 1px rgba(29, 155, 240, .35); }
+.bt-addcol-error { margin: 0; color: #ff9a9e; font-size: 12px; }
+.bt-addcol-accounts { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 8px; }
+.bt-addcol-accounts > div { display: flex; flex-wrap: wrap; gap: 6px; }
+.bt-addcol-account { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding-block: 0; padding-inline: 6px 12px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(238, 240, 247, .04); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, .07); color: var(--bt-text-2); font: 550 12.5px/1 var(--bt-ui); }
+.bt-addcol-account:hover { background: rgba(238, 240, 247, .08); }
+.bt-addcol-account.is-on { box-shadow: inset 0 0 0 1.5px var(--bt-col-account); color: var(--bt-text); background: color-mix(in srgb, var(--bt-col-account) 12%, transparent); }
+.bt-addcol-account em { color: var(--bt-faint); font: italic 400 11px/1 var(--bt-ui); }
+.bt-addcol-foot { display: flex; align-items: center; gap: 14px; padding: 12px 16px 16px; color: var(--bt-muted); font-size: 11.5px; }
+.bt-addcol-foot > span { display: inline-flex; align-items: center; gap: 6px; }
+@media (max-width: 620px) { .bt-addcol-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .bt-col, .bt-col > .bt-col-head, .bt-col.is-leaving, .bt-compose, .bt-compose > .bt-compose-head, .bt-col-unread, .bt-deck-empty-art span { animation: none !important; }
+  .bt-col.is-leaving { opacity: 0; }
+}

package/dist/shell/frame/deckStore.d.ts

@@ -0,0 +1,89 @@
+import { type ColumnFilters, type ColumnSource, type Deck, type DeckColumn } from '../deckModel.ts';
+export type { Deck, DeckColumn, ColumnFilters, ColumnSource };
+/** Flags a column may carry: the listed ones and the site's unlisted ones (native code checks them again). */
+export declare const columnFlagKeys: () => string[];
+export type DeckSettings = {
+    width: number;
+    density: 'compact' | 'comfortable';
+    /** Default flags for new columns (and every column that does not override them). */
+    flags: Record<string, boolean>;
+    /** Visible columns per page; the memory guard warns above DEFAULT_MAX_VISIBLE. */
+    maxVisible: number;
+    /** Columns on other pages drop to WebView2's low memory target. */
+    parkOffPage: boolean;
+};
+export declare const defaultDeckSettings: () => DeckSettings;
+export declare function normalizeDeckSettings(value: unknown): DeckSettings;
+type ColumnRuntime = {
+    url?: string;
+    title?: string;
+    loading?: boolean;
+    unread: number;
+};
+export declare const decks: {
+    list: Deck[];
+    /** `defaultDeckSettings()` once the site is set (createShell), then the saved ones (loadDecks). */
+    settings: DeckSettings;
+    /** Per column tab: what its webview last reported. */
+    runtime: Map<string, ColumnRuntime>;
+    /** Focused column per deck. */
+    focus: Map<string, string>;
+    page: Map<string, number>;
+    /** Mark-read / jump requests per column tab (the page acts when the number changes). */
+    seq: Map<string, {
+        read: number;
+        jump: number;
+    }>;
+    /** Compose dock per deck: open and in which profile. */
+    compose: Map<string, {
+        profile: string;
+    }>;
+    /** Last config sent per column tab (JSON), so unchanged configs are not re-sent. */
+    sent: Map<string, string>;
+    /** Column tabs whose config native code has: only these are laid out (their webview then starts
+     * with the site's chrome already hidden). */
+    ready: Set<string>;
+    loaded: boolean;
+};
+export declare function loadDecks(profiles?: readonly string[], fallbackProfile?: string): void;
+export declare function saveDecks(): void;
+export declare function setDeckSettings(next: DeckSettings): void;
+export declare const deckById: (id: string) => Deck | undefined;
+export declare const newId: (prefix: string) => string;
+export declare function updateDeck(id: string, change: (deck: Deck) => Deck): void;
+export declare function createDeck(name: string, columns?: Array<Pick<DeckColumn, 'profile' | 'source'> & Partial<DeckColumn>>): Deck;
+export declare function makeColumn(input: Pick<DeckColumn, 'profile' | 'source'> & Partial<DeckColumn>): DeckColumn;
+export declare function addColumn(deckId: string, input: Pick<DeckColumn, 'profile' | 'source'> & Partial<DeckColumn>, after?: string): DeckColumn;
+export declare function removeColumn(deckId: string, columnId: string): void;
+export declare function patchColumn(deckId: string, columnId: string, patch: Partial<DeckColumn>): void;
+export declare function shiftColumn(deckId: string, columnId: string, delta: number): void;
+export declare function forgetColumn(tabId: string): void;
+export declare const columnSourceUrl: (source: ColumnSource) => string | null;
+/** The config a column's page gets (validated natively). */
+export declare function columnConfig(column: DeckColumn): {
+    url: string;
+    kind: string;
+    density: "compact" | "comfortable";
+    filters: ColumnFilters;
+    flags: Record<string, boolean>;
+    unread: boolean;
+    readSeq: number;
+    jumpSeq: number;
+} | null;
+/** Sends a column its config when it changed (or always with `force`, e.g. on mount). */
+export declare function configureColumn(column: DeckColumn, force?: boolean): Promise<void>;
+/** The compose dock (`site.deck.compose`) is a column-like webview on the site's compose page. */
+export declare const composeTabId: (deckId: string) => string;
+export declare function configureCompose(deckId: string): Promise<void>;
+export declare function bump(column: DeckColumn, which: 'read' | 'jump'): void;
+export declare function setRuntime(tabId: string, patch: Partial<ColumnRuntime>): boolean;
+/** The deck and column a tab webview id belongs to (columns and compose docks), if any. */
+export declare function findColumnTab(tabId: string): {
+    deck: Deck;
+    column?: DeckColumn;
+    compose?: boolean;
+} | null;
+/** Workspaces: decks a restored workspace shows that are no longer here come back (by id). */
+export declare function ensureDecks(list: unknown[]): void;
+/** Settings import: the backup's decks and deck settings replace the ones here. */
+export declare function replaceDecks(list: unknown, settings: unknown): void;