waybetter 0.1.0 → 0.6.0

package/dist/shell/frame/accountModel.js

@@ -0,0 +1,67 @@
+// What a click in the titlebar account switcher does (pure; unit-tested under node).
+//
+// One click on an account shows that account: a visible pane of it is focused, otherwise its home
+// feed (or the site's sign-in when it is not signed in) opens in a new pane beside the focused one.
+// Only a modifier click or the row's "Open in new tab" forces a new tab. The default account
+// (`ProfileSettings.active`, kept for profiles.json compatibility) is only where new tabs open.
+import { addProfile, tabProfile } from "../profileModel.js";
+import { tx } from "./i18n.js";
+/** Where a click on this account lands: its feed once signed in, the site's sign-in otherwise. */
+export function accountStartUrl(profile, pages) {
+    return profile.account?.signedIn ? pages.homeUrl : pages.loginUrl;
+}
+/** The account the focused tab runs in (the app's panel has none: the default account). */
+export function focusedAccount(settings, panes, activeId) {
+    const pane = panes.find(item => item.id === activeId);
+    return tabProfile(settings, pane && pane.kind !== 'panel' ? pane.profile : settings.active);
+}
+/**
+ * The click's result. `force` (Shift/Ctrl-click, "Open in new tab") always opens a new tab in the
+ * focused group. Otherwise a visible web pane of the account is focused (the focused one first, then
+ * a pane on the site), and only when there is none does a new pane open beside the focused one.
+ */
+export function accountAction(settings, panes, activeId, profileId, options) {
+    const profile = tabProfile(settings, profileId);
+    const url = accountStartUrl(profile, options);
+    if (options.force)
+        return { type: 'open', url, profile: profile.id, where: 'tab' };
+    const onSite = options.isSiteUrl ?? (() => false);
+    const mine = panes.filter(pane => pane.kind === 'web' && pane.visible && tabProfile(settings, pane.profile).id === profile.id);
+    const target = mine.find(pane => pane.id === activeId) ?? mine.find(pane => !!pane.url && onSite(pane.url)) ?? mine[0];
+    if (target)
+        return { type: 'focus', paneId: target.id };
+    return { type: 'open', url, profile: profile.id, where: 'beside' };
+}
+/** "Use for new tabs": the only thing `active` means now. Unknown ids change nothing. */
+export const setDefaultAccount = (settings, id) => settings.profiles.some(profile => profile.id === id) && settings.active !== id ? { ...settings, active: id } : settings;
+/** "Add account": a fresh profile for the site's sign-in. It does not become the default. */
+export function addAccountProfile(settings, id) {
+    const next = addProfile(settings, '', id, key => tx(key, undefined, '') || undefined);
+    return { settings: { ...next, active: settings.active }, profile: next.active };
+}
+/** Open tabs per account id (for "N tabs" and for closing them before a remove). */
+export function tabsByAccount(settings, panes) {
+    const result = new Map();
+    for (const pane of panes) {
+        if (pane.kind !== 'web')
+            continue;
+        const id = tabProfile(settings, pane.profile).id;
+        result.set(id, [...(result.get(id) ?? []), pane.id]);
+    }
+    return result;
+}
+/** Roving focus in the menu: wraps around; Home/End jump to the ends. */
+export function moveFocus(index, key, count) {
+    if (count <= 0)
+        return -1;
+    if (key === 'Home')
+        return 0;
+    if (key === 'End')
+        return count - 1;
+    if (key === 'ArrowDown')
+        return index < 0 ? 0 : (index + 1) % count;
+    if (key === 'ArrowUp')
+        return index < 0 ? count - 1 : (index - 1 + count) % count;
+    return index;
+}
+//# sourceMappingURL=accountModel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accountModel.js","sourceRoot":"","sources":["../../../../../../shell/src/frame/accountModel.ts"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,EAAE;AACF,kGAAkG;AAClG,oGAAoG;AACpG,6FAA6F;AAC7F,gGAAgG;AAEhG,OAAO,EAAE,UAAU,EAAE,UAAU,EAAsC,MAAM,oBAAoB,CAAC;AAChG,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAoB/B,kGAAkG;AAClG,MAAM,UAAU,eAAe,CAAC,OAAgB,EAAE,KAAiD;IACjG,OAAO,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AACpE,CAAC;AAED,2FAA2F;AAC3F,MAAM,UAAU,cAAc,CAAC,QAAyB,EAAE,KAA0B,EAAE,QAAmC;IACvH,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;IACtD,OAAO,UAAU,CAAC,QAAQ,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC9F,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAyB,EACzB,KAA0B,EAC1B,QAAmC,EACnC,SAAiB,EACjB,OAA2C;IAE3C,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAChD,MAAM,GAAG,GAAG,eAAe,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC9C,IAAI,OAAO,CAAC,KAAK;QAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IACnF,MAAM,MAAM,GAAG,OAAO,CAAC,SAAS,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC;IAC/H,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;IACvH,IAAI,MAAM;QAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IACxD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACrE,CAAC;AAED,yFAAyF;AACzF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAU,EAAmB,EAAE,CAC1F,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;AAE1H,6FAA6F;AAC7F,MAAM,UAAU,iBAAiB,CAAC,QAAyB,EAAE,EAAW;IACtE,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC;IACtF,OAAO,EAAE,QAAQ,EAAE,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAClF,CAAC;AAED,oFAAoF;AACpF,MAAM,UAAU,aAAa,CAAC,QAAyB,EAAE,KAA0B;IACjF,MAAM,MAAM,GAAG,IAAI,GAAG,EAAoB,CAAC;IAC3C,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK;YAAE,SAAS;QAClC,MAAM,EAAE,GAAG,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;QACjD,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,SAAS,CAAC,KAAa,EAAE,GAAW,EAAE,KAAa;IACjE,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC,CAAC;IAC1B,IAAI,GAAG,KAAK,MAAM;QAAE,OAAO,CAAC,CAAC;IAC7B,IAAI,GAAG,KAAK,KAAK;QAAE,OAAO,KAAK,GAAG,CAAC,CAAC;IACpC,IAAI,GAAG,KAAK,WAAW;QAAE,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC;IACpE,IAAI,GAAG,KAAK,SAAS;QAAE,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC;IAClF,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// What a click in the titlebar account switcher does (pure; unit-tested under node).\n//\n// One click on an account shows that account: a visible pane of it is focused, otherwise its home\n// feed (or the site's sign-in when it is not signed in) opens in a new pane beside the focused one.\n// Only a modifier click or the row's \"Open in new tab\" forces a new tab. The default account\n// (`ProfileSettings.active`, kept for profiles.json compatibility) is only where new tabs open.\n\nimport { addProfile, tabProfile, type Profile, type ProfileSettings } from '../profileModel.ts';\nimport { tx } from './i18n.ts';\n\n/** A tab as the switcher sees it: its account and whether it is on screen right now. */\nexport type PaneInfo = {\n  id: string;\n  kind: 'web' | 'start' | 'panel';\n  /** Profile id as stored on the tab (missing or unknown = default). */\n  profile?: string;\n  url?: string;\n  /** Shown on screen (the visible tab of its group). */\n  visible: boolean;\n};\n\nexport type AccountAction =\n  | { type: 'focus'; paneId: string }\n  | { type: 'open'; url: string; profile: string; where: 'beside' | 'tab' };\n\n/** The site's pages an account click opens (`site.homeUrl`, `site.loginUrl`, `site.isSiteUrl`). */\nexport type AccountPages = { homeUrl: string; loginUrl: string; isSiteUrl?: (url: string) => boolean };\n\n/** Where a click on this account lands: its feed once signed in, the site's sign-in otherwise. */\nexport function accountStartUrl(profile: Profile, pages: Pick<AccountPages, 'homeUrl' | 'loginUrl'>): string {\n  return profile.account?.signedIn ? pages.homeUrl : pages.loginUrl;\n}\n\n/** The account the focused tab runs in (the app's panel has none: the default account). */\nexport function focusedAccount(settings: ProfileSettings, panes: readonly PaneInfo[], activeId: string | null | undefined): Profile {\n  const pane = panes.find(item => item.id === activeId);\n  return tabProfile(settings, pane && pane.kind !== 'panel' ? pane.profile : settings.active);\n}\n\n/**\n * The click's result. `force` (Shift/Ctrl-click, \"Open in new tab\") always opens a new tab in the\n * focused group. Otherwise a visible web pane of the account is focused (the focused one first, then\n * a pane on the site), and only when there is none does a new pane open beside the focused one.\n */\nexport function accountAction(\n  settings: ProfileSettings,\n  panes: readonly PaneInfo[],\n  activeId: string | null | undefined,\n  profileId: string,\n  options: { force?: boolean } & AccountPages,\n): AccountAction {\n  const profile = tabProfile(settings, profileId);\n  const url = accountStartUrl(profile, options);\n  if (options.force) return { type: 'open', url, profile: profile.id, where: 'tab' };\n  const onSite = options.isSiteUrl ?? (() => false);\n  const mine = panes.filter(pane => pane.kind === 'web' && pane.visible && tabProfile(settings, pane.profile).id === profile.id);\n  const target = mine.find(pane => pane.id === activeId) ?? mine.find(pane => !!pane.url && onSite(pane.url)) ?? mine[0];\n  if (target) return { type: 'focus', paneId: target.id };\n  return { type: 'open', url, profile: profile.id, where: 'beside' };\n}\n\n/** \"Use for new tabs\": the only thing `active` means now. Unknown ids change nothing. */\nexport const setDefaultAccount = (settings: ProfileSettings, id: string): ProfileSettings =>\n  settings.profiles.some(profile => profile.id === id) && settings.active !== id ? { ...settings, active: id } : settings;\n\n/** \"Add account\": a fresh profile for the site's sign-in. It does not become the default. */\nexport function addAccountProfile(settings: ProfileSettings, id?: string): { settings: ProfileSettings; profile: string } {\n  const next = addProfile(settings, '', id, key => tx(key, undefined, '') || undefined);\n  return { settings: { ...next, active: settings.active }, profile: next.active };\n}\n\n/** Open tabs per account id (for \"N tabs\" and for closing them before a remove). */\nexport function tabsByAccount(settings: ProfileSettings, panes: readonly PaneInfo[]): Map<string, string[]> {\n  const result = new Map<string, string[]>();\n  for (const pane of panes) {\n    if (pane.kind !== 'web') continue;\n    const id = tabProfile(settings, pane.profile).id;\n    result.set(id, [...(result.get(id) ?? []), pane.id]);\n  }\n  return result;\n}\n\n/** Roving focus in the menu: wraps around; Home/End jump to the ends. */\nexport function moveFocus(index: number, key: string, count: number): number {\n  if (count <= 0) return -1;\n  if (key === 'Home') return 0;\n  if (key === 'End') return count - 1;\n  if (key === 'ArrowDown') return index < 0 ? 0 : (index + 1) % count;\n  if (key === 'ArrowUp') return index < 0 ? count - 1 : (index - 1 + count) % count;\n  return index;\n}\n"]}

package/dist/shell/frame/accountSwitcher.css

@@ -0,0 +1,91 @@
+/* Titlebar account switcher menu and the per-pane account marker (AccountSwitcher.tsx, WebPanel.tsx).
+   Tokens come from shell.css (:root --bt-*). */
+
+.bt-acct-menu { width: 340px; max-height: calc(100vh - 64px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bt-line-strong) transparent; }
+
+.bt-acct-head { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 8px; }
+.bt-acct-head strong { font: 600 13px/1.2 var(--bt-ui); color: var(--bt-text); }
+.bt-acct-head span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font: 400 12px/1.3 var(--bt-ui); color: var(--bt-muted); }
+.bt-acct-head .bt-kbd { height: 16px; min-width: 0; font: 500 10.5px/1 var(--bt-ui); }
+
+/* One account: the whole row is the main action; "…" sits at the right edge. */
+.bt-acct-row { position: relative; display: flex; flex-direction: column; border-radius: 10px; }
+.bt-acct-line { position: relative; display: flex; align-items: center; }
+.bt-acct-row.is-focused { background: rgb(var(--bt-accent-rgb) / .08); box-shadow: inset 0 0 0 1px rgb(var(--bt-accent-rgb) / .22); }
+.bt-acct-row.is-focused::before {
+  content: ''; position: absolute; inset-inline-start: -5px; top: 12px; height: 24px; width: 3px; border-start-start-radius: 0; border-start-end-radius: 3px; border-end-end-radius: 3px; border-end-start-radius: 0; background: var(--bt-accent);
+}
+.bt-acct-row.is-open { background: rgb(var(--bt-text-rgb) / .035); }
+
+.bt-menu .bt-acct-main { flex: 1; min-width: 0; height: auto; gap: 11px; padding-block: 8px; padding-inline: 8px 40px; border-radius: 10px; }
+.bt-menu .bt-acct-main:focus-visible { box-shadow: var(--bt-ring); }
+.bt-acct-avatar { position: relative; display: inline-grid; flex: none; }
+.bt-acct-avatar.is-signed-out .bt-avatar, .bt-acct-avatar.is-new .bt-avatar { filter: saturate(.35); opacity: .7; }
+.bt-acct-avatar.is-signed-out::after, .bt-acct-avatar.is-new::after {
+  content: ''; position: absolute; inset-inline-end: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
+  background: var(--bt-faint); box-shadow: 0 0 0 2px var(--bt-raised);
+}
+
+.bt-acct-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
+.bt-acct-name { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 13.5px/1.15 var(--bt-ui); color: var(--bt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bt-acct-meta { font: 400 12px/1.2 var(--bt-ui); color: var(--bt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.bt-acct-meta.is-signed-out, .bt-acct-meta.is-new { color: #f0b14a; }
+.bt-acct-count { color: var(--bt-muted); }
+.bt-acct-badge {
+  flex: none; padding: 2px 6px; border-radius: 999px; background: rgb(var(--bt-text-rgb) / .07); color: var(--bt-text-2);
+  font: 500 10.5px/1.2 var(--bt-ui); letter-spacing: .01em;
+}
+
+/* What the click will do, revealed on hover/focus so the row reads as one obvious action. */
+/* Hidden until then, so a long @handle / status gets the full width. */
+.bt-acct-hint { display: none; align-items: center; gap: 5px; flex: none; color: var(--bt-accent-ink); font: 500 11.5px/1 var(--bt-ui); animation: bt-acct-hint-in var(--bt-t1) var(--bt-ease-out); }
+@keyframes bt-acct-hint-in { from { opacity: 0; transform: translateX(-3px); } }
+.bt-acct-hint .bt-glyph { width: 13px; height: 13px; }
+.bt-acct-row.is-focused .bt-acct-hint { display: inline-flex; color: var(--bt-accent-ink); }
+.bt-acct-main:hover .bt-acct-hint, .bt-acct-main:focus-visible .bt-acct-hint { display: inline-flex; color: var(--bt-accent-ink); }
+
+.bt-menu .bt-acct-more {
+  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; justify-content: center;
+  color: var(--bt-muted); opacity: 0; transition: opacity var(--bt-t1) var(--bt-ease);
+}
+.bt-acct-more svg { width: 16px; height: 16px; fill: currentColor; }
+.bt-acct-row:hover .bt-acct-more, .bt-acct-row:focus-within .bt-acct-more, .bt-acct-more[aria-expanded=true] { opacity: 1; }
+.bt-menu .bt-acct-more:hover, .bt-menu .bt-acct-more[aria-expanded=true] { color: var(--bt-text); background: var(--bt-press); }
+/* Hover hint and "…" share the right edge: the hint moves left of it. */
+.bt-acct-row:hover .bt-acct-hint { margin-inline-end: 2px; }
+
+/* Row actions: inline under the row (no second floating layer over the native panes). */
+.bt-acct-sub { display: flex; flex-direction: column; gap: 1px; margin-block: 0 6px; margin-inline: 49px 6px; padding-top: 2px; border-top: 1px solid var(--bt-line-soft); }
+.bt-menu .bt-acct-sub button { height: 30px; font-size: 12.5px; }
+.bt-acct-sub .bt-glyph { width: 15px; height: 15px; }
+.bt-acct-sub .bt-menu-keys { font-size: 11px; }
+.bt-menu .bt-acct-sub button[aria-checked=true]:disabled { color: var(--bt-text-2); }
+.bt-menu .bt-acct-sub button[aria-checked=true]:disabled > .bt-glyph { color: var(--bt-accent); opacity: 1; }
+.bt-menu .bt-acct-danger { color: #ff8a80; }
+.bt-menu .bt-acct-danger > .bt-glyph { color: #ff8a80; }
+
+.bt-acct-confirm {
+  display: flex; flex-direction: column; gap: 10px; margin: 2px 6px 6px; padding: 10px 12px; border-radius: 9px;
+  background: rgba(229, 72, 77, .08); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .25); color: var(--bt-text-2); font: 400 12.5px/1.45 var(--bt-ui);
+}
+.bt-acct-confirm strong { color: var(--bt-text); font-weight: 600; }
+.bt-acct-confirm div { display: flex; gap: 6px; }
+.bt-menu .bt-acct-confirm button { height: 28px; padding: 0 12px; font-weight: 600; font-size: 12.5px; }
+.bt-menu .bt-acct-remove { background: var(--bt-danger); color: #fff; }
+.bt-menu .bt-acct-remove:hover:not(:disabled), .bt-menu .bt-acct-remove:focus-visible { background: #d93d42; }
+.bt-menu .bt-acct-cancel { background: var(--bt-hover); }
+
+.bt-menu .bt-acct-add { height: auto; gap: 11px; padding: 8px; border-radius: 10px; }
+.bt-menu .bt-acct-add:focus-visible { box-shadow: var(--bt-ring); }
+.bt-acct-add .bt-acct-name { color: var(--bt-text-2); }
+.bt-acct-add-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bt-line-strong); color: var(--bt-muted); }
+.bt-acct-add-icon .bt-glyph { width: 15px; height: 15px; }
+.bt-menu .bt-acct-add:hover .bt-acct-add-icon { box-shadow: inset 0 0 0 1px rgb(var(--bt-accent-rgb) / .6); color: var(--bt-accent-ink); }
+
+.bt-acct-error { padding: 6px 10px; color: #ff8a80; font: 12px/1.4 var(--bt-ui); }
+
+/* Each pane's account, left of its address bar (same color as the tab's account dot). */
+.bt-pane-account {
+  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin-inline-start: 4px; border-radius: 50%;
+  box-shadow: 0 0 0 1.5px var(--bt-pane-account, var(--bt-line-strong));
+}

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

@@ -0,0 +1,44 @@
+import { type I18n, type Messages, type Params } from '../../runtime/i18n.ts';
+/** One language the app has a catalog for (a row of the app's generated `languages.json`). */
+export type AppLanguage = {
+    code: string;
+    name: string;
+    englishName: string;
+    dir: 'ltr' | 'rtl';
+    status: 'source' | 'machine' | 'reviewed';
+    /** `supported`: automatic language choices may resolve to it. `community`: only when picked explicitly. */
+    tier: 'supported' | 'community';
+    reviewers: string[];
+    fallback?: string;
+    /** Share of English messages this catalog translates (its fallback's included), 0..1. */
+    coverage: number;
+};
+export type AppI18nOptions = {
+    /** English: the framework's messages with the app's over them. */
+    source: Messages;
+    /** Every language with a catalog, English first. */
+    languages: readonly AppLanguage[];
+    /** React's hook (`import { useSyncExternalStore } from 'react'`), for `useT` and `useLocale`. */
+    useSyncExternalStore<Snapshot>(subscribe: (listener: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: () => Snapshot): Snapshot;
+    /** A development build: untranslated and malformed messages are logged. */
+    dev?: boolean;
+};
+export type AppI18n<Key extends string> = {
+    i18n: I18n<Key>;
+    /** Registers how catalogs load (the app's lazy imports; tests may pass a map). */
+    setCatalogLoader(load: (locale: string) => Promise<Messages | null>): void;
+    /** The message for `key` in the active language. */
+    t(key: Key, params?: Params): string;
+    /** For keys assembled at runtime (feature ids, section names): `fallback` when the key is unknown. */
+    tx(key: string, params?: Params, fallback?: string): string;
+    /** Re-renders the calling component when the language changes; returns `t`. */
+    useT(): (key: Key, params?: Params) => string;
+    /** The active locale (re-renders on change). */
+    useLocale(): string;
+    /** "3 minutes ago" style text for a timestamp in the active language. */
+    relativeTime(then: number, now?: number): string;
+    /** A date (and time) in the active language: `formatDate(iso, { dateStyle: 'medium' })`. */
+    formatDate(value: string | number | Date, options?: Intl.DateTimeFormatOptions): string;
+    formatNumber(value: number, options?: Intl.NumberFormatOptions): string;
+};
+export declare function createAppI18n<Key extends string>(options: AppI18nOptions): AppI18n<Key>;

package/dist/shell/frame/appI18n.js

@@ -0,0 +1,64 @@
+// An app's i18n instance for its shell webview (the shell frame, the panel, its own windows):
+// English (the app's catalog over the framework's) is always loaded, other catalogs load on
+// demand through the loader the app registers (its bundler's lazy imports), and components call
+// `useT()` so a language switch re-renders them in place. The frame is bound to the instance.
+//
+//   export const { i18n, t, tx, useT, setCatalogLoader } = createAppI18n<MessageKey>({
+//     source: { ...frameworkEn.messages, ...appEn.messages }, languages, useSyncExternalStore, dev: import.meta.env.DEV,
+//   });
+//
+// Keys are typed by the app (`MessageKey`: its English catalog's keys and the framework's). The
+// app passes React's `useSyncExternalStore`, so this module has no dependency of its own and the
+// app's pure modules that use `t` stay testable under node.
+import { createI18n } from "../../runtime/i18n.js";
+import { setShellI18n } from "./i18n.js";
+export function createAppI18n(options) {
+    let loader = null;
+    const i18n = createI18n({
+        source: options.source,
+        available: options.languages.map(language => language.code),
+        fallbacks: Object.fromEntries(options.languages.filter(language => language.fallback).map(language => [language.code, language.fallback])),
+        load: locale => loader?.(locale) ?? null,
+        onMissing: options.dev
+            ? (key, locale, reason) => { if (reason !== 'key' || locale === 'en')
+                console.warn(`[i18n] ${reason} ${locale}: ${key}`);
+            else
+                console.debug(`[i18n] untranslated ${locale}: ${key}`); }
+            : undefined,
+    });
+    // The wayBetter shell frame and panel speak through this instance.
+    setShellI18n(i18n);
+    const { useSyncExternalStore } = options;
+    const t = (key, params) => i18n.t(key, params);
+    const subscribe = (listener) => i18n.onChange(listener);
+    const snapshot = () => i18n.locale;
+    return {
+        i18n,
+        setCatalogLoader(load) { loader = load; },
+        t,
+        tx: (key, params, fallback) => i18n.tx(key, params, fallback),
+        useT() {
+            useSyncExternalStore(subscribe, snapshot, snapshot);
+            return t;
+        },
+        useLocale: () => useSyncExternalStore(subscribe, snapshot, snapshot),
+        relativeTime(then, now = Date.now()) {
+            const seconds = Math.round((then - now) / 1000);
+            const abs = Math.abs(seconds);
+            if (abs < 45)
+                return i18n.relative(0, 'second');
+            if (abs < 3600)
+                return i18n.relative(Math.round(seconds / 60), 'minute');
+            if (abs < 86400)
+                return i18n.relative(Math.round(seconds / 3600), 'hour');
+            if (abs < 86400 * 30)
+                return i18n.relative(Math.round(seconds / 86400), 'day');
+            if (abs < 86400 * 365)
+                return i18n.relative(Math.round(seconds / (86400 * 30)), 'month');
+            return i18n.relative(Math.round(seconds / (86400 * 365)), 'year');
+        },
+        formatDate: (value, formatOptions = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) => i18n.date(value, formatOptions),
+        formatNumber: (value, formatOptions) => i18n.number(value, formatOptions),
+    };
+}
+//# sourceMappingURL=appI18n.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appI18n.js","sourceRoot":"","sources":["../../../../../../shell/src/frame/appI18n.ts"],"names":[],"mappings":"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","sourcesContent":["// An app's i18n instance for its shell webview (the shell frame, the panel, its own windows):\n// English (the app's catalog over the framework's) is always loaded, other catalogs load on\n// demand through the loader the app registers (its bundler's lazy imports), and components call\n// `useT()` so a language switch re-renders them in place. The frame is bound to the instance.\n//\n//   export const { i18n, t, tx, useT, setCatalogLoader } = createAppI18n<MessageKey>({\n//     source: { ...frameworkEn.messages, ...appEn.messages }, languages, useSyncExternalStore, dev: import.meta.env.DEV,\n//   });\n//\n// Keys are typed by the app (`MessageKey`: its English catalog's keys and the framework's). The\n// app passes React's `useSyncExternalStore`, so this module has no dependency of its own and the\n// app's pure modules that use `t` stay testable under node.\n\nimport { createI18n, type I18n, type Messages, type Params } from '../../../runtime/src/i18n.ts';\nimport { setShellI18n } from './i18n.ts';\n\n/** One language the app has a catalog for (a row of the app's generated `languages.json`). */\nexport type AppLanguage = {\n  code: string;\n  name: string;\n  englishName: string;\n  dir: 'ltr' | 'rtl';\n  status: 'source' | 'machine' | 'reviewed';\n  /** `supported`: automatic language choices may resolve to it. `community`: only when picked explicitly. */\n  tier: 'supported' | 'community';\n  reviewers: string[];\n  fallback?: string;\n  /** Share of English messages this catalog translates (its fallback's included), 0..1. */\n  coverage: number;\n};\n\nexport type AppI18nOptions = {\n  /** English: the framework's messages with the app's over them. */\n  source: Messages;\n  /** Every language with a catalog, English first. */\n  languages: readonly AppLanguage[];\n  /** React's hook (`import { useSyncExternalStore } from 'react'`), for `useT` and `useLocale`. */\n  useSyncExternalStore<Snapshot>(subscribe: (listener: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: () => Snapshot): Snapshot;\n  /** A development build: untranslated and malformed messages are logged. */\n  dev?: boolean;\n};\n\nexport type AppI18n<Key extends string> = {\n  i18n: I18n<Key>;\n  /** Registers how catalogs load (the app's lazy imports; tests may pass a map). */\n  setCatalogLoader(load: (locale: string) => Promise<Messages | null>): void;\n  /** The message for `key` in the active language. */\n  t(key: Key, params?: Params): string;\n  /** For keys assembled at runtime (feature ids, section names): `fallback` when the key is unknown. */\n  tx(key: string, params?: Params, fallback?: string): string;\n  /** Re-renders the calling component when the language changes; returns `t`. */\n  useT(): (key: Key, params?: Params) => string;\n  /** The active locale (re-renders on change). */\n  useLocale(): string;\n  /** \"3 minutes ago\" style text for a timestamp in the active language. */\n  relativeTime(then: number, now?: number): string;\n  /** A date (and time) in the active language: `formatDate(iso, { dateStyle: 'medium' })`. */\n  formatDate(value: string | number | Date, options?: Intl.DateTimeFormatOptions): string;\n  formatNumber(value: number, options?: Intl.NumberFormatOptions): string;\n};\n\nexport function createAppI18n<Key extends string>(options: AppI18nOptions): AppI18n<Key> {\n  let loader: ((locale: string) => Promise<Messages | null>) | null = null;\n  const i18n = createI18n<Key>({\n    source: options.source,\n    available: options.languages.map(language => language.code),\n    fallbacks: Object.fromEntries(options.languages.filter(language => language.fallback).map(language => [language.code, language.fallback!])),\n    load: locale => loader?.(locale) ?? null,\n    onMissing: options.dev\n      ? (key, locale, reason) => { if (reason !== 'key' || locale === 'en') console.warn(`[i18n] ${reason} ${locale}: ${key}`); else console.debug(`[i18n] untranslated ${locale}: ${key}`); }\n      : undefined,\n  });\n  // The wayBetter shell frame and panel speak through this instance.\n  setShellI18n(i18n);\n\n  const { useSyncExternalStore } = options;\n  const t = (key: Key, params?: Params) => i18n.t(key, params);\n  const subscribe = (listener: () => void) => i18n.onChange(listener);\n  const snapshot = () => i18n.locale;\n  return {\n    i18n,\n    setCatalogLoader(load) { loader = load; },\n    t,\n    tx: (key, params, fallback) => i18n.tx(key, params, fallback),\n    useT() {\n      useSyncExternalStore(subscribe, snapshot, snapshot);\n      return t;\n    },\n    useLocale: () => useSyncExternalStore(subscribe, snapshot, snapshot),\n    relativeTime(then, now = Date.now()) {\n      const seconds = Math.round((then - now) / 1000);\n      const abs = Math.abs(seconds);\n      if (abs < 45) return i18n.relative(0, 'second');\n      if (abs < 3600) return i18n.relative(Math.round(seconds / 60), 'minute');\n      if (abs < 86400) return i18n.relative(Math.round(seconds / 3600), 'hour');\n      if (abs < 86400 * 30) return i18n.relative(Math.round(seconds / 86400), 'day');\n      if (abs < 86400 * 365) return i18n.relative(Math.round(seconds / (86400 * 30)), 'month');\n      return i18n.relative(Math.round(seconds / (86400 * 365)), 'year');\n    },\n    formatDate: (value, formatOptions = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) => i18n.date(value, formatOptions),\n    formatNumber: (value, formatOptions) => i18n.number(value, formatOptions),\n  };\n}\n"]}

package/dist/shell/frame/appMenu.css

@@ -0,0 +1,121 @@
+/* The app menu (AppMenu.tsx): the titlebar's "Settings and more" button, its menu and submenus.
+   Tokens come from shell.css (:root --bt-*), so it follows the chrome theme (and its first-frame
+   cache) like every other shell menu. Its width in the titlebar is reserved in --bt-tb-menu. */
+
+/* The button: the last thing before the caption buttons. */
+.bt-app-button {
+  align-self: center; display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; margin-right: 8px; padding: 0; box-sizing: border-box; /* rtl-ok: titlebar */
+  border: 1px solid transparent; border-radius: 15px; background: transparent; color: var(--bt-text-2); cursor: pointer;
+  transition: background-color var(--bt-t1) var(--bt-ease), border-color var(--bt-t1) var(--bt-ease), color var(--bt-t1) var(--bt-ease);
+}
+.bt-app-button:hover { background: var(--bt-hover); border-color: var(--bt-line-soft); color: var(--bt-text); }
+.bt-app-button[aria-expanded=true] { background: var(--bt-hover); border-color: rgb(var(--bt-accent-rgb) / .5); color: var(--bt-text); }
+.bt-app-button:focus-visible { outline: 0; box-shadow: var(--bt-ring); }
+.bt-shell .bt-app-button svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
+
+/* An app that shows no menu button (`<AppMenu trigger={false}/>`, the logo is the menu's home) reserves no room for it. */
+html:not(:has(.bt-app-button)) { --bt-tb-menu: 0px; }
+
+/* The logo at the start of the titlebar: the menu's second trigger (a 30px target around the 20px
+   mark; with its margins it takes the 50px the tab strip leaves in --bt-tb-left). */
+.bt-titlebar-logo {
+  align-self: center; display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; margin: 0 9px 0 11px; padding: 0; box-sizing: border-box; /* rtl-ok: titlebar */
+  border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; -webkit-user-drag: none;
+  transition: background-color var(--bt-t1) var(--bt-ease), border-color var(--bt-t1) var(--bt-ease);
+}
+.bt-titlebar-logo img { display: block; width: 20px; height: 20px; pointer-events: none; -webkit-user-drag: none; }
+.bt-titlebar-logo:hover { background: var(--bt-hover); border-color: var(--bt-line-soft); }
+.bt-titlebar-logo[aria-expanded=true] { background: var(--bt-hover); border-color: rgb(var(--bt-accent-rgb) / .5); }
+.bt-titlebar-logo:focus-visible { outline: 0; box-shadow: var(--bt-ring); }
+
+/* The menu and its submenus. `display: contents`: the layers are positioned on their own. */
+.bt-app-layers { display: contents; }
+.bt-menu.bt-app-menu {
+  width: 304px; max-width: calc(100vw - 16px); padding: 6px; overflow-y: auto; overscroll-behavior: contain;
+  scrollbar-width: thin; scrollbar-color: var(--bt-line-strong) transparent;
+}
+.bt-menu.bt-app-menu:focus { outline: 0; }
+.bt-menu.bt-app-sub {
+  width: max-content; min-width: 224px; max-width: min(320px, calc(100vw - 16px)); z-index: 1;
+  animation: bt-app-sub-in var(--bt-t1) var(--bt-ease-out);
+}
+@keyframes bt-app-sub-in { from { opacity: 0; transform: translateX(var(--bt-app-sub-from, 6px)); } }
+.bt-app-menu hr { flex: none; width: auto; align-self: stretch; }
+
+/* Rows: one highlight, wherever it comes from (the pointer moves the focus, as the arrows do);
+   a row whose submenu is open keeps it; the keyboard's focus also gets a hairline in the accent. */
+.bt-app-menu button { flex: none; width: 100%; min-width: 0; box-sizing: border-box; }
+.bt-app-menu button:hover:not(:disabled) { background: transparent; }
+.bt-app-menu button:focus:not(:disabled), .bt-app-menu button[aria-expanded=true] { background: var(--bt-hover); outline: 0; }
+.bt-app-menu button:focus-visible:not(:disabled) { box-shadow: inset 0 0 0 1px rgb(var(--bt-accent-rgb) / .6); }
+.bt-app-menu button:active:not(:disabled) { background: var(--bt-press); }
+.bt-app-menu button:focus > .bt-glyph, .bt-app-menu button[aria-expanded=true] > .bt-glyph { color: var(--bt-text); }
+
+/* The leading column: an icon, or the check of a choice (empty while it is not the one chosen). */
+.bt-app-check { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
+.bt-app-check .bt-glyph { width: 15px; height: 15px; color: var(--bt-accent); stroke-width: 2.1; }
+.bt-app-menu [aria-checked=true] .bt-menu-label { color: var(--bt-text); font-weight: 600; }
+
+/* The trailing column: a quiet value (the language in use, a version), the keys, the submenu arrow. */
+.bt-app-hint { flex: 0 1 auto; min-width: 0; max-width: 46%; margin-inline-start: auto; padding-inline-start: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bt-muted); font: 400 12px/1.3 var(--bt-ui); font-variant-numeric: tabular-nums; }
+.bt-app-menu .bt-menu-keys { flex: none; padding-inline-start: 12px; unicode-bidi: isolate; direction: ltr; }
+.bt-app-hint + .bt-menu-keys, .bt-app-menu .wb-dots + .bt-app-hint { margin-inline-start: 0; }
+.bt-app-menu .bt-app-chevron { width: 14px; height: 14px; margin-inline: 2px -4px; color: var(--bt-faint); }
+.bt-app-menu .bt-app-hint + .bt-app-chevron { margin-inline-start: -4px; }
+.bt-app-menu button:focus > .bt-app-chevron, .bt-app-menu button[aria-expanded=true] > .bt-app-chevron { color: var(--bt-text-2); }
+[dir="rtl"] .bt-app-menu .bt-app-chevron { transform: scaleX(-1); }
+.bt-app-menu .wb-dots { margin-inline-start: 8px; }
+
+/* Zoom: one line, − 100% + and a reset. The stepper reads left to right in every language. */
+.bt-app-zoom { display: flex; align-items: center; gap: 10px; height: 36px; flex: none; padding-inline: 10px 3px; color: var(--bt-text); }
+.bt-app-zoom > .bt-glyph { color: var(--bt-muted); }
+.bt-app-zoom.is-off > .bt-glyph, .bt-app-zoom.is-off .bt-menu-label, .bt-app-zoom.is-off .bt-app-zoom-value { color: var(--bt-faint); }
+.bt-app-zoom-step { display: flex; align-items: center; flex: none; height: 28px; border-radius: 9px; direction: ltr; background: rgb(var(--bt-text-rgb) / .04); box-shadow: inset 0 0 0 1px var(--bt-line); }
+.bt-app-menu .bt-app-zoom button { width: 30px; height: 28px; flex: none; padding: 0; justify-content: center; border-radius: 8px; color: var(--bt-text-2); }
+.bt-app-menu .bt-app-zoom button > .bt-glyph { width: 14px; height: 14px; color: inherit; }
+.bt-app-menu .bt-app-zoom button:focus { color: var(--bt-text); }
+.bt-app-menu .bt-app-zoom button[aria-disabled=true] { color: var(--bt-faint); cursor: default; }
+.bt-app-menu .bt-app-zoom button[aria-disabled=true]:active { background: var(--bt-hover); }
+.bt-app-zoom-value { min-width: 50px; padding: 0 2px; text-align: center; color: var(--bt-text); font: 500 12px/1 var(--bt-mono); font-variant-numeric: tabular-nums; }
+.bt-app-menu .bt-app-zoom .bt-app-zoom-reset { width: 28px; border-radius: 9px; }
+
+/* Words that are not a choice: the mode question, an empty list, an error. */
+.bt-app-note { display: flex; flex-direction: column; gap: 3px; max-width: 288px; padding: 8px 10px 7px; box-sizing: border-box; }
+.bt-app-note strong { color: var(--bt-text); font: 600 13px/1.3 var(--bt-ui); }
+.bt-app-note span { color: var(--bt-muted); font: 400 12px/1.4 var(--bt-ui); white-space: normal; }
+.bt-app-note.is-error span { color: var(--bt-danger); }
+
+/* The account menu's last row: the way here from where the account name is. */
+.bt-menu .bt-acct-settings { flex: none; height: 34px; gap: 11px; padding: 0 8px; border-radius: 10px; color: var(--bt-text-2); }
+.bt-menu .bt-acct-settings > .bt-glyph { width: 32px; height: 15px; }
+.bt-menu .bt-acct-settings:focus-visible { box-shadow: var(--bt-ring); }
+
+/* The titlebar's zoom chip: only while the pane in front is not at 100% (TitlebarExtras.tsx). */
+.bt-zoom-chip { font-family: var(--bt-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
+.bt-zoom-chip .bt-glyph { color: var(--bt-muted); }
+
+/* Safe mode, said in the titlebar for as long as it is on (TitlebarExtras.tsx): amber, and one click leaves it. */
+.bt-safe-chip { border-color: rgba(245, 158, 11, .38); background: rgba(245, 158, 11, .1); color: var(--bt-text); font-weight: 600; }
+.bt-safe-chip:hover { border-color: rgba(245, 158, 11, .6); background: rgba(245, 158, 11, .16); }
+.bt-safe-chip .bt-glyph { color: #f59e0b; }
+.bt-safe-leave { margin-inline-start: 2px; padding-inline-start: 9px; border-inline-start: 1px solid rgba(245, 158, 11, .35); color: var(--bt-text-2); font-weight: 500; }
+.bt-safe-chip:hover .bt-safe-leave { color: var(--bt-text); }
+.bt-safe-chip:disabled { opacity: .6; cursor: default; }
+.bt-app-sub .bt-app-note { max-width: 300px; }
+
+/* "Report a problem" (ReportDialog.tsx): the summary, exactly as it would be shared. */
+.bt-report { width: min(560px, 100%); max-height: min(86vh, 620px); display: flex; flex-direction: column; overflow: hidden; }
+.bt-report:focus { outline: 0; }
+.bt-report-head { display: flex; align-items: center; gap: 8px; padding-block: 16px 4px; padding-inline: 20px 12px; }
+.bt-report-head h2 { margin: 0; flex: 1; font: 700 17px/1.2 var(--bt-ui); letter-spacing: -.015em; color: var(--bt-text); }
+.bt-report-lede, .bt-report-note { margin: 0; padding: 0 20px; color: var(--bt-muted); font: 400 12.5px/1.5 var(--bt-ui); }
+.bt-report-note { padding-top: 10px; color: var(--bt-text-2); }
+.bt-report-text {
+  flex: 1 1 auto; min-height: 150px; margin: 12px 20px 0; padding: 12px 14px; box-sizing: border-box; resize: none; overflow: auto;
+  border: 1px solid var(--bt-line); border-radius: var(--bt-r3); background: var(--bt-field); color: var(--bt-text);
+  font: 400 12px/1.65 var(--bt-mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; text-align: left; /* rtl-ok: the report is English */
+}
+.bt-report-text:focus-visible { outline: 0; border-color: transparent; box-shadow: var(--bt-ring); }
+.bt-report-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; }
+.bt-report-copied { margin-inline-end: auto; color: var(--bt-muted); font: 500 12px/1 var(--bt-ui); }
+.bt-report-foot .bt-glyph { width: 15px; height: 15px; }

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

@@ -0,0 +1,38 @@
+export declare const BACKUP_FORMAT = "waybetter-backup";
+export declare const BACKUP_VERSION = 1;
+/** Sections the shell applies itself (the rest go to native `backup_apply`). */
+export declare const LOCAL_SECTIONS: readonly ["decks"];
+/** Backup sections in display order; their names are `wb.backup.section.<id>` in the catalogs. */
+export declare const SECTION_ORDER: string[];
+export declare const sectionLabel: (section: string) => string;
+type Json = Record<string, unknown>;
+/** Stable JSON (sorted keys) for equality. */
+export declare function canonical(value: unknown): string;
+/** Secret-looking keys (same rule as native `strip_secrets`); never exported, never imported. */
+export declare function isSecretKey(key: string): boolean;
+export declare function stripSecrets<T>(value: T): T;
+/** The shell's own sections: decks and deck settings (localStorage), never tab state. */
+export declare function localSections(input: {
+    decks: unknown[];
+    deckSettings: unknown;
+}): Json;
+export type SectionRow = {
+    section: string;
+    label: string;
+    /** `same`: nothing would change; `changed`: differs from this computer; `new`: nothing here yet. */
+    status: 'same' | 'changed' | 'new';
+    /** Short lines for the preview ("Nord → Paper", "+2 plugins", ...). */
+    details: string[];
+    /** Ticked by default: changed sections, except drafts (added only when asked). */
+    checked: boolean;
+};
+/** One preview row per section present in `incoming`, in display order. */
+export declare function diffSections(current: Json, incoming: Json): SectionRow[];
+/** Splits the ticked sections into what native code applies and what the shell applies. */
+export declare function pickSections(incoming: Json, chosen: Iterable<string>): {
+    native: Json;
+    local: Json;
+};
+/** "3 minutes ago" / "yesterday" for sync snapshot times, in the active language. */
+export declare function ago(ms: number, now?: number): string;
+export {};