@kgdiff/viewer 0.4.0 → 0.6.0

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,QAAQ,GAA4B;IAC/C,OAAO;IACP,SAAS;IACT,SAAS;IACT,WAAW;IACX,UAAU;CACX,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAG,QAAQ,EAAE,SAAkB,CAAC;KAClD,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACT,CAAC,KAAK,SAAS;IACb,CAAC,CAAC,2IAA2I;IAC7I,CAAC,CAAC,iBAAiB,CAAC,iCAAiC,CAAC,+BAA+B,CAAC,oCAAoC,CAAC,WAAW,CACzI;KACA,IAAI,CAAC,IAAI,CAAC,CAAC;AAEd,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoI9B,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2fZ,CAAC;AAEF,kGAAkG;AAClG,MAAM,IAAI,GACR,oJAAoJ,CAAC;AAkBvJ,kGAAkG;AAClG,MAAM,cAAc,GAA0C;IAC5D,IAAI,EAAE,SAAS,CAAC;;;;;;EAMhB;IACA,KAAK,EAAE,SAAS,CAAC;UACT,IAAI;;8CAEgC;IAC5C,aAAa,EAAE,SAAS,CAAC;UACjB,IAAI;;gFAEkE;IAC9E,eAAe,EAAE,SAAS,CAAC;UACnB,IAAI;;4BAEc;IAC1B,MAAM,EAAE,SAAS,CAAC;UACV,IAAI;;;;;;EAMZ;IACA,OAAO,EAAE,SAAS,CAAC;UACX,IAAI;mCACqB;IACjC,WAAW,EAAE,SAAS,CAAC;UACf,IAAI;mCACqB;IACjC,SAAS,EAAE,SAAS,CAAC;UACb,IAAI;;;0CAG4B;IACxC,MAAM,EAAE,SAAS,CAAC;UACV,IAAI;;;8JAGgJ;IAC5J,IAAI,EAAE,SAAS,CAAC;UACR,IAAI;mCACqB;IACjC,OAAO,EAAE,SAAS,CAAC;UACX,IAAI;;6CAE+B;IAC3C,KAAK,EAAE,SAAS,CAAC;UACT,IAAI;;kDAEoC;IAChD,OAAO,EAAE,SAAS,CAAC;UACX,IAAI;;;;mDAIqC;CAClD,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,OAAO,EAA6C,CAAC;AAE/E,+FAA+F;AAC/F,MAAM,UAAU,YAAY,CAAC,GAAa,EAAE,IAAiB;IAC3D,IAAI,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACnB,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IACjC,CAAC;IACD,IAAI,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5C,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1B,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,GAAa,EAAE,GAAW;IACjD,MAAM,KAAK,GAAI,GAAG,CAAC,WAAmD,EAAE,aAAa,CAAC;IACtF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC,EAAE,CAAC;IAC7C,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,OAAO,EAA2B,CAAC;AAEtD,mEAAmE;AACnE,MAAM,UAAU,UAAU,CAAC,GAAa;IACtC,IAAI,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;QAC9B,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACzB,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The theme as CSS (RFC 0001 §6; decision 1: CSS is the theme's single source of truth).
+ *
+ * Colors and fonts are custom properties named `--kgdiff-*`. The built-in themes (dark / light
+ * × default / color-blind palette, `getTheme` in @kgdiff/scene, whose contrast is tested there)
+ * are token sets a root applies on `:host` (`tokenSheet`). The canvas is drawn with the tokens
+ * as computed on the root (`themeFromStyle`), so a token the host overrides with ordinary CSS
+ * changes the panels and the canvas alike. Motion and the interaction tints are written as
+ * tokens too, for the panels; the canvas keeps the theme's own (they stay in JavaScript).
+ */
+import { type Theme } from '@kgdiff/scene';
+/**
+ * The public tokens (after `--kgdiff-`), each with where its value lives in a `Theme`: the
+ * manifest's CSS custom properties are generated from this list.
+ */
+export declare const TOKENS: readonly (readonly [token: string, path: string])[];
+/** Tokens that are not colors (taken as they are). */
+export declare const VERBATIM: ReadonlySet<string>;
+/** CSS custom properties for `theme` (a `:host` rule body). */
+export declare function themeVariables(theme: Theme): string;
+/** The built-in `theme` as a token set on `:host`, parsed once per document. */
+export declare function tokenSheet(theme: Theme, doc: Document): CSSStyleSheet;
+/**
+ * The theme the canvas draws with: `base` (the built-in theme of the root's token set) with
+ * every token the root's computed `style` sets to another value. Unchanged tokens keep the
+ * base's identity, so caches keyed by the theme survive; a value the canvas cannot draw is
+ * ignored with a warning.
+ */
+export declare function themeFromStyle(base: Theme, style: {
+    getPropertyValue(name: string): string;
+}): Theme;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAiB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAG1D;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EA6BrE,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,QAAQ,EAAE,WAAW,CAAC,MAAM,CAA4C,CAAC;AAgBtF,+DAA+D;AAC/D,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAqBnD;AAID,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,GAAG,aAAa,CAYrE;AAgCD;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,EACX,KAAK,EAAE;IAAE,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAChD,KAAK,CAwBP"}

package/dist/theme.js

@@ -0,0 +1,152 @@
+/**
+ * The theme as CSS (RFC 0001 §6; decision 1: CSS is the theme's single source of truth).
+ *
+ * Colors and fonts are custom properties named `--kgdiff-*`. The built-in themes (dark / light
+ * × default / color-blind palette, `getTheme` in @kgdiff/scene, whose contrast is tested there)
+ * are token sets a root applies on `:host` (`tokenSheet`). The canvas is drawn with the tokens
+ * as computed on the root (`themeFromStyle`), so a token the host overrides with ordinary CSS
+ * changes the panels and the canvas alike. Motion and the interaction tints are written as
+ * tokens too, for the panels; the canvas keeps the theme's own (they stay in JavaScript).
+ */
+import { contrastRatio } from '@kgdiff/scene';
+import { FAMILIES, sheetFor } from './styles.js';
+/**
+ * The public tokens (after `--kgdiff-`), each with where its value lives in a `Theme`: the
+ * manifest's CSS custom properties are generated from this list.
+ */
+export const TOKENS = [
+    ['background', 'canvas.background'],
+    ['grid', 'canvas.grid'],
+    ['panel', 'surface.panel'],
+    ['raised', 'surface.raised'],
+    ['overlay', 'surface.overlay'],
+    ['border', 'surface.border'],
+    ['border-strong', 'surface.borderStrong'],
+    ['control-border', 'surface.controlBorder'],
+    ['shadow', 'surface.shadow'],
+    ['text', 'text.primary'],
+    ['text-secondary', 'text.secondary'],
+    ['text-muted', 'text.muted'],
+    ['accent', 'accent.base'],
+    ['accent-strong', 'accent.strong'],
+    ['accent-soft', 'accent.soft'],
+    ['accent-text', 'accent.text'],
+    ['neutral', 'neutral.node'],
+    ['neutral-stroke', 'neutral.nodeStroke'],
+    ['neutral-edge', 'neutral.edge'],
+    ['neutral-label', 'neutral.label'],
+    ['font', 'font.family'],
+    ['font-mono', 'font.mono'],
+    ...FAMILIES.flatMap((f) => [
+        [f, `family.${f}.base`],
+        [`${f}-strong`, `family.${f}.strong`],
+        [`${f}-soft`, `family.${f}.soft`],
+        [`${f}-text`, `family.${f}.text`],
+    ]),
+];
+/** Tokens that are not colors (taken as they are). */
+export const VERBATIM = new Set(['shadow', 'font', 'font-mono']);
+function get(theme, path) {
+    let at = theme;
+    for (const key of path.split('.'))
+        at = at[key];
+    return at;
+}
+/** A copy of `tree` with `value` at `keys` (copy on write: untouched branches are shared). */
+function put(tree, keys, value) {
+    const [key = '', ...rest] = keys;
+    return { ...tree, [key]: rest.length > 0 ? put(tree[key], rest, value) : value };
+}
+/** CSS custom properties for `theme` (a `:host` rule body). */
+export function themeVariables(theme) {
+    const dark = theme.name === 'dark';
+    const vars = [['color-scheme', dark ? 'dark' : 'light']];
+    for (const [token, path] of TOKENS)
+        vars.push([token, get(theme, path)]);
+    vars.push(['fast', `${theme.motion.fast}ms`], ['base', `${theme.motion.base}ms`], ['slow', `${theme.motion.slow}ms`], ['ease', `cubic-bezier(${theme.motion.easing.join(', ')})`], 
+    // Derived interaction tints (not color-coded: hover / press / inputs / scrims).
+    ['hover', dark ? 'rgba(255,255,255,0.045)' : 'rgba(15,23,42,0.04)'], ['press', dark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.07)'], ['input', dark ? theme.surface.raised : '#F3F5F8'], ['selected', dark ? theme.surface.raised : '#F5F7FB'], ['scrim', dark ? 'rgba(5,7,11,0.56)' : 'rgba(15,23,42,0.18)'], ['skeleton', dark ? 'rgba(255,255,255,0.05)' : 'rgba(15,23,42,0.05)'], ['skeleton-hi', dark ? 'rgba(255,255,255,0.09)' : 'rgba(15,23,42,0.09)'], ['track', dark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.08)'], ['kbd', dark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.05)']);
+    return vars.map(([k, v]) => `${k === 'color-scheme' ? k : `--kgdiff-${k}`}: ${v};`).join(' ');
+}
+const sheets = new WeakMap();
+/** The built-in `theme` as a token set on `:host`, parsed once per document. */
+export function tokenSheet(theme, doc) {
+    let byTheme = sheets.get(doc);
+    if (!byTheme) {
+        byTheme = new Map();
+        sheets.set(doc, byTheme);
+    }
+    let sheet = byTheme.get(theme);
+    if (!sheet) {
+        sheet = sheetFor(doc, `:host { ${themeVariables(theme)} }`);
+        byTheme.set(theme, sheet);
+    }
+    return sheet;
+}
+let probe;
+const warned = new Set();
+/**
+ * `value` as a color the scene can parse (`#rrggbb`, `rgba()`), or null. A canvas normalizes
+ * whatever sRGB color syntax the browser knows (names, `hsl()`, `color-mix()`, …).
+ */
+function canvasColor(value) {
+    probe ??=
+        typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d');
+    let color = value;
+    if (probe) {
+        probe.fillStyle = '#000';
+        probe.fillStyle = value;
+        color = String(probe.fillStyle);
+        probe.fillStyle = '#fff';
+        probe.fillStyle = value;
+        if (String(probe.fillStyle) !== color)
+            return null;
+    }
+    try {
+        contrastRatio(color, color);
+        return color;
+    }
+    catch {
+        return null;
+    }
+}
+/** Themes built from computed tokens, by base theme and overrides (stable identities). */
+const built = new Map();
+/**
+ * The theme the canvas draws with: `base` (the built-in theme of the root's token set) with
+ * every token the root's computed `style` sets to another value. Unchanged tokens keep the
+ * base's identity, so caches keyed by the theme survive; a value the canvas cannot draw is
+ * ignored with a warning.
+ */
+export function themeFromStyle(base, style) {
+    const overrides = [];
+    for (const [token, path] of TOKENS) {
+        const raw = style.getPropertyValue(`--kgdiff-${token}`).trim();
+        if (!raw || raw === get(base, path))
+            continue;
+        const value = VERBATIM.has(token) ? raw : canvasColor(raw);
+        if (value === null) {
+            if (!warned.has(raw)) {
+                warned.add(raw);
+                console.warn(`[kgdiff] --kgdiff-${token}: ${raw} is not a color the canvas draws.`);
+            }
+        }
+        else if (value !== get(base, path))
+            overrides.push([path, value]);
+    }
+    if (overrides.length === 0)
+        return base;
+    const key = `${base.name}/${base.palette}|${overrides.join('|')}`;
+    let theme = built.get(key);
+    if (!theme) {
+        let tree = base;
+        for (const [path, value] of overrides)
+            tree = put(tree, path.split('.'), value);
+        theme = tree;
+        if (built.size >= 16)
+            built.clear();
+        built.set(key, theme);
+    }
+    return theme;
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,aAAa,EAAc,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAwD;IACzE,CAAC,YAAY,EAAE,mBAAmB,CAAC;IACnC,CAAC,MAAM,EAAE,aAAa,CAAC;IACvB,CAAC,OAAO,EAAE,eAAe,CAAC;IAC1B,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IAC5B,CAAC,SAAS,EAAE,iBAAiB,CAAC;IAC9B,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IAC5B,CAAC,eAAe,EAAE,sBAAsB,CAAC;IACzC,CAAC,gBAAgB,EAAE,uBAAuB,CAAC;IAC3C,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IAC5B,CAAC,MAAM,EAAE,cAAc,CAAC;IACxB,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IACpC,CAAC,YAAY,EAAE,YAAY,CAAC;IAC5B,CAAC,QAAQ,EAAE,aAAa,CAAC;IACzB,CAAC,eAAe,EAAE,eAAe,CAAC;IAClC,CAAC,aAAa,EAAE,aAAa,CAAC;IAC9B,CAAC,aAAa,EAAE,aAAa,CAAC;IAC9B,CAAC,SAAS,EAAE,cAAc,CAAC;IAC3B,CAAC,gBAAgB,EAAE,oBAAoB,CAAC;IACxC,CAAC,cAAc,EAAE,cAAc,CAAC;IAChC,CAAC,eAAe,EAAE,eAAe,CAAC;IAClC,CAAC,MAAM,EAAE,aAAa,CAAC;IACvB,CAAC,WAAW,EAAE,WAAW,CAAC;IAC1B,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACzB,CAAC,CAAC,EAAE,UAAU,CAAC,OAAO,CAAU;QAChC,CAAC,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAU;QAC9C,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAU;QAC1C,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAU;KAC3C,CAAC;CACH,CAAC;AAEF,sDAAsD;AACtD,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;AAItF,SAAS,GAAG,CAAC,KAAY,EAAE,IAAY;IACrC,IAAI,EAAE,GAAY,KAAK,CAAC;IACxB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,EAAE,GAAI,EAAW,CAAC,GAAG,CAAC,CAAC;IAC1D,OAAO,EAAY,CAAC;AACtB,CAAC;AAED,8FAA8F;AAC9F,SAAS,GAAG,CAAC,IAAU,EAAE,IAAuB,EAAE,KAAa;IAC7D,MAAM,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;AAC3F,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,cAAc,CAAC,KAAY;IACzC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC;IACnC,MAAM,IAAI,GAAuB,CAAC,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7E,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,MAAM;QAAE,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACzE,IAAI,CAAC,IAAI,CACP,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,EAClC,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,EAClC,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,EAClC,CAAC,MAAM,EAAE,gBAAgB,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IAC3D,gFAAgF;IAChF,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EACnE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAClE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,EAClD,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,EACrD,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAC7D,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EACrE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EACxE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAClE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CACjE,CAAC;IACF,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAChG,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,OAAO,EAAuC,CAAC;AAElE,gFAAgF;AAChF,MAAM,UAAU,UAAU,CAAC,KAAY,EAAE,GAAa;IACpD,IAAI,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;QACpB,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC3B,CAAC;IACD,IAAI,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,WAAW,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC5D,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC5B,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,IAAI,KAAkD,CAAC;AACvD,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;AAEjC;;;GAGG;AACH,SAAS,WAAW,CAAC,KAAa;IAChC,KAAK;QACH,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC7F,IAAI,KAAK,GAAG,KAAK,CAAC;IAClB,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;QACzB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;QACxB,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAChC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;QACzB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;QACxB,IAAI,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,KAAK;YAAE,OAAO,IAAI,CAAC;IACrD,CAAC;IACD,IAAI,CAAC;QACH,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC5B,OAAO,KAAK,CAAC;IACf,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,0FAA0F;AAC1F,MAAM,KAAK,GAAG,IAAI,GAAG,EAAiB,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAC5B,IAAW,EACX,KAAiD;IAEjD,MAAM,SAAS,GAAuB,EAAE,CAAC;IACzC,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,MAAM,EAAE,CAAC;QACnC,MAAM,GAAG,GAAG,KAAK,CAAC,gBAAgB,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QAC/D,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;YAAE,SAAS;QAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC3D,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACrB,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;gBAChB,OAAO,CAAC,IAAI,CAAC,qBAAqB,KAAK,KAAK,GAAG,mCAAmC,CAAC,CAAC;YACtF,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;YAAE,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACtE,CAAC;IACD,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACxC,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IAClE,IAAI,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,IAAI,IAAI,GAAS,IAAuB,CAAC;QACzC,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,SAAS;YAAE,IAAI,GAAG,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;QAChF,KAAK,GAAG,IAAwB,CAAC;QACjC,IAAI,KAAK,CAAC,IAAI,IAAI,EAAE;YAAE,KAAK,CAAC,KAAK,EAAE,CAAC;QACpC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACxB,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/topics.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What the session notifies its listeners about (`DiffSession.subscribe`): one topic per part
+ * of its state. A module of its own, so elements can name them without importing the session.
+ */
+export type Topic = 'status' | 'data' | 'mode' | 'selection' | 'filters' | 'search' | 'review' | 'replay' | 'hover' | 'theme' | 'locale' | 'focus' | 'swipe' | 'overview';
+/** Every topic: a full render. */
+export declare const ALL_TOPICS: ReadonlySet<Topic>;
+//# sourceMappingURL=topics.d.ts.map

package/dist/topics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topics.d.ts","sourceRoot":"","sources":["../src/topics.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,KAAK,GACb,QAAQ,GACR,MAAM,GACN,MAAM,GACN,WAAW,GACX,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,OAAO,GACP,UAAU,CAAC;AAEf,kCAAkC;AAClC,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC,KAAK,CAexC,CAAC"}

package/dist/topics.js

@@ -0,0 +1,18 @@
+/** Every topic: a full render. */
+export const ALL_TOPICS = new Set([
+    'status',
+    'data',
+    'mode',
+    'selection',
+    'filters',
+    'search',
+    'review',
+    'replay',
+    'hover',
+    'theme',
+    'locale',
+    'focus',
+    'swipe',
+    'overview',
+]);
+//# sourceMappingURL=topics.js.map

package/dist/topics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"topics.js","sourceRoot":"","sources":["../src/topics.ts"],"names":[],"mappings":"AAoBA,kCAAkC;AAClC,MAAM,CAAC,MAAM,UAAU,GAAuB,IAAI,GAAG,CAAQ;IAC3D,QAAQ;IACR,MAAM;IACN,MAAM;IACN,WAAW;IACX,SAAS;IACT,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,OAAO;IACP,QAAQ;IACR,OAAO;IACP,OAAO;IACP,UAAU;CACX,CAAC,CAAC"}

package/dist/ui/change-list.d.ts

@@ -0,0 +1,18 @@
+import type { Topic } from '../session.js';
+import { type UiContext } from './context.js';
+/** Row slot and group-header heights (px); rows are 52 px tall inside a 56 px slot. */
+export declare const ROW_SLOT = 56;
+export declare const HEADER_SLOT = 32;
+export declare class ChangeList {
+    #private;
+    /** Title, count and review progress. */
+    readonly head: HTMLElement;
+    readonly list: HTMLElement;
+    readonly sticky: HTMLElement;
+    /** Visually hidden group names the options are described by. */
+    readonly phases: HTMLElement;
+    constructor(ctx: UiContext);
+    update(topics: ReadonlySet<Topic>): void;
+    renderWindow(): void;
+}
+//# sourceMappingURL=change-list.d.ts.map

package/dist/ui/change-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"change-list.d.ts","sourceRoot":"","sources":["../../src/ui/change-list.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,uFAAuF;AACvF,eAAO,MAAM,QAAQ,KAAK,CAAC;AAC3B,eAAO,MAAM,WAAW,KAAK,CAAC;AAO9B,qBAAa,UAAU;;IACrB,wCAAwC;IACxC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAkC;IAa9D,YAAY,GAAG,EAAE,SAAS,EAsCzB;IAED,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAmBvC;IA2HD,YAAY,IAAI,IAAI,CAqBnB;CA+JF"}

package/dist/ui/change-list.js

@@ -0,0 +1,331 @@
+import { attr, h, icon, isOpen, replace, setText } from '../dom.js';
+import { frameOrTimeout } from '../schedule.js';
+import { sceneHunkGlyph } from './context.js';
+/** Row slot and group-header heights (px); rows are 52 px tall inside a 56 px slot. */
+export const ROW_SLOT = 56;
+export const HEADER_SLOT = 32;
+const OVERSCAN = 320;
+function itemHeight(item) {
+    return item.kind === 'header' ? HEADER_SLOT : ROW_SLOT;
+}
+export class ChangeList {
+    /** Title, count and review progress. */
+    head;
+    list;
+    sticky;
+    /** Visually hidden group names the options are described by. */
+    phases = h('div', { class: 'sr-only' });
+    #title;
+    #count;
+    #progress;
+    #progressText;
+    #progressBar;
+    #listInner;
+    #offsets = [];
+    #rendered = new Map();
+    #scrollQueued = false;
+    #ctx;
+    constructor(ctx) {
+        this.#ctx = ctx;
+        const c = ctx.controller;
+        this.#title = h('h2', { id: 'kg-changes-title' });
+        this.#count = h('span', { class: 'count-badge' });
+        this.#progressText = h('span');
+        this.#progressBar = h('div');
+        this.#progress = h('div', { class: 'progress' }, this.#progressText, h('span', { class: 'bar', 'aria-hidden': 'true' }, this.#progressBar));
+        this.head = h('div', { class: 'sb-title' }, this.#title, this.#count, this.#progress);
+        this.#listInner = h('div', { class: 'list-inner', role: 'presentation' });
+        this.list = h('div', {
+            class: 'list scroll',
+            role: 'listbox',
+            tabindex: '0',
+            'aria-labelledby': 'kg-changes-title',
+            'aria-keyshortcuts': 'J K X Enter Home End',
+        }, this.#listInner);
+        this.list.addEventListener('scroll', () => this.#queueWindow(), { passive: true });
+        this.list.addEventListener('click', (e) => this.#onListClick(e));
+        this.list.addEventListener('dblclick', (e) => {
+            const row = e.target.closest('.row');
+            if (row)
+                c.flyToSelection();
+        });
+        this.sticky = h('div', { class: 'sticky', 'aria-hidden': 'true', hidden: true });
+        ctx.target('list', () => this.list.focus({ preventScroll: true }), () => isOpen(this.list));
+    }
+    update(topics) {
+        const tr = this.#ctx.tr();
+        const all = topics.has('status') || topics.has('data') || topics.has('locale');
+        if (all) {
+            setText(this.#title, tr.t('sidebar.changes'));
+            const scene = this.#ctx.controller.scene;
+            setText(this.#count, tr.num(scene?.hunks.length ?? 0));
+            this.#count.hidden = !scene;
+        }
+        if (all || topics.has('filters'))
+            this.#layoutList();
+        if (all || topics.has('review')) {
+            this.#renderProgress();
+            this.#refreshRows();
+        }
+        if (topics.has('selection')) {
+            this.#refreshRows();
+            this.#revealSelected();
+        }
+        if (all || topics.has('search'))
+            this.#stepAside();
+    }
+    /**
+     * The search's results take the list's place while the query is not blank. Coming back, the
+     * list measures itself on the next frame, once every region has updated (the results it
+     * shared its space with are hidden by then, whatever order the regions update in).
+     */
+    #stepAside() {
+        const searching = this.#ctx.controller.query.trim() !== '';
+        if (this.list.hidden === searching)
+            return;
+        this.list.hidden = searching;
+        if (searching)
+            this.sticky.hidden = true;
+        else
+            this.#queueWindow();
+    }
+    #renderProgress() {
+        const tr = this.#ctx.tr();
+        const state = this.#ctx.controller.reviewState();
+        const done = state.reviewed.length;
+        const total = state.total;
+        this.#progress.hidden = total === 0;
+        const complete = total > 0 && done === total;
+        attr(this.#progress, 'data-complete', String(complete));
+        setText(this.#progressText, complete ? tr.t('review.complete') : tr.t('review.progress', { done, total }));
+        this.#progressBar.style.transform = `scaleX(${total > 0 ? done / total : 0})`;
+    }
+    // ─── Virtual list ────────────────────────────────────────────────────────
+    #layoutList() {
+        const c = this.#ctx.controller;
+        const tr = this.#ctx.tr();
+        replace(this.phases, c.list.items.map((it) => it.kind === 'header'
+            ? h('span', {
+                id: `kg-phase-${it.phase}`,
+                text: `${tr.t(`phase.${it.phase}`)} (${tr.num(it.count)})`,
+            })
+            : null));
+        for (const el of this.#rendered.values())
+            el.remove();
+        this.#rendered.clear();
+        const items = c.list.items;
+        this.#offsets = new Array(items.length);
+        let y = 0;
+        for (let i = 0; i < items.length; i++) {
+            this.#offsets[i] = y;
+            y += itemHeight(items[i]);
+        }
+        this.#listInner.style.height = `${y + 8}px`;
+        this.#renderEmpty();
+        this.renderWindow();
+    }
+    #renderEmpty() {
+        const c = this.#ctx.controller;
+        const tr = this.#ctx.tr();
+        const existing = this.#listInner.querySelector('.list-empty, .skeleton');
+        existing?.remove();
+        if (c.status === 'loading' || c.status === 'idle') {
+            const sk = h('div', { class: 'skeleton', 'aria-hidden': 'true' });
+            if (c.status === 'loading') {
+                for (let i = 0; i < 6; i++) {
+                    sk.appendChild(h('div', { class: 'skeleton-row shimmer' }, h('span', { class: 'g' }), h('span', { class: 'b' })));
+                }
+            }
+            this.#listInner.appendChild(sk);
+            return;
+        }
+        if (c.status !== 'ready' || c.list.items.length > 0)
+            return;
+        const filtered = c.families.size > 0 && c.hunkCount > 0;
+        this.#listInner.appendChild(h('div', { class: 'list-empty' }, icon(filtered ? 'search' : 'check-circle'), h('span', { text: tr.t(filtered ? 'sidebar.filteredEmpty' : 'sidebar.noChanges') }), filtered
+            ? h('button', {
+                type: 'button',
+                class: 'btn',
+                text: tr.t('sidebar.clearFilters'),
+                onclick: () => c.setFamilies([]),
+            })
+            : null));
+    }
+    #queueWindow() {
+        if (this.#scrollQueued)
+            return;
+        this.#scrollQueued = true;
+        frameOrTimeout(() => {
+            this.#scrollQueued = false;
+            this.renderWindow();
+        });
+    }
+    /** First item index whose bottom is below `y` (binary search over offsets). */
+    #indexAt(y) {
+        let lo = 0;
+        let hi = this.#offsets.length;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (this.#offsets[mid] + ROW_SLOT <= y)
+                lo = mid + 1;
+            else
+                hi = mid;
+        }
+        return lo;
+    }
+    renderWindow() {
+        const items = this.#ctx.controller.list.items;
+        const top = this.list.scrollTop;
+        const height = this.list.clientHeight || 640;
+        const from = this.#indexAt(Math.max(0, top - OVERSCAN));
+        const limit = top + height + OVERSCAN;
+        const needed = new Set();
+        for (let i = from; i < items.length && this.#offsets[i] < limit; i++)
+            needed.add(i);
+        for (const [i, el] of this.#rendered) {
+            if (!needed.has(i)) {
+                el.remove();
+                this.#rendered.delete(i);
+            }
+        }
+        for (const i of needed) {
+            if (this.#rendered.has(i))
+                continue;
+            const el = this.#renderItem(items[i], this.#offsets[i]);
+            this.#rendered.set(i, el);
+            this.#listInner.appendChild(el);
+        }
+        this.#renderSticky(top);
+    }
+    #renderItem(item, y) {
+        const tr = this.#ctx.tr();
+        const c = this.#ctx.controller;
+        if (item.kind === 'header') {
+            return h('div', { class: 'group', role: 'presentation', style: `top: ${y}px` }, h('span', { text: tr.t(`phase.${item.phase}`) }), h('span', { class: 'n', text: tr.num(item.count) }));
+        }
+        const hunk = c.scene?.hunks[item.hunk];
+        const reviewed = c.isReviewed(hunk.id);
+        // Pointer shortcut only: options hold no interactive children. Keyboard users press `x` or
+        // use the detail panel's "Reviewed" button.
+        const rv = h('span', {
+            class: 'rv',
+            'aria-hidden': 'true',
+            'data-pressed': String(reviewed),
+            title: tr.t(reviewed ? 'review.unmark' : 'review.mark'),
+            'data-hunk': hunk.id,
+        }, h('span', { class: 'ring' }, icon('check')));
+        const rank = c.list.rank.get(item.hunk) ?? 0;
+        const row = h('div', {
+            class: 'row',
+            role: 'option',
+            id: `kg-opt-${item.hunk}`,
+            'data-index': String(item.hunk),
+            'data-family': hunk.family,
+            'data-reviewed': String(reviewed),
+            'aria-selected': String(c.selectedHunk === item.hunk),
+            'aria-setsize': String(c.list.order.length),
+            'aria-posinset': String(rank + 1),
+            'aria-describedby': `kg-phase-${hunk.phase}`,
+            style: `top: ${y + 2}px`,
+        }, h('span', { class: 'glyph-box', 'aria-hidden': 'true', text: sceneHunkGlyph(hunk) }), h('span', { class: 'txt' }, h('span', { class: 'title', title: hunk.title, text: hunk.title }), h('span', { class: 'sub', text: hunk.subtitle })), rv);
+        this.#labelRow(row, hunk, reviewed);
+        return row;
+    }
+    #labelRow(row, hunk, reviewed) {
+        const tr = this.#ctx.tr();
+        const parts = [hunk.title];
+        if (hunk.subtitle)
+            parts.push(hunk.subtitle);
+        if (reviewed)
+            parts.push(tr.t('review.toggle'));
+        attr(row, 'aria-label', parts.join('. '));
+    }
+    /** Update selection / reviewed state of the rendered rows in place. */
+    #refreshRows() {
+        const c = this.#ctx.controller;
+        const tr = this.#ctx.tr();
+        for (const el of this.#rendered.values()) {
+            if (!el.classList.contains('row'))
+                continue;
+            const index = Number(el.dataset.index);
+            const hunk = c.scene?.hunks[index];
+            if (!hunk)
+                continue;
+            const reviewed = c.isReviewed(hunk.id);
+            attr(el, 'aria-selected', String(index === c.selectedHunk));
+            attr(el, 'data-reviewed', String(reviewed));
+            const rv = el.querySelector('.rv');
+            attr(rv, 'data-pressed', String(reviewed));
+            attr(rv, 'title', tr.t(reviewed ? 'review.unmark' : 'review.mark'));
+            this.#labelRow(el, hunk, reviewed);
+        }
+        const sel = c.selectedHunk;
+        attr(this.list, 'aria-activedescendant', sel >= 0 && c.list.rank.has(sel) ? `kg-opt-${sel}` : null);
+    }
+    #revealSelected() {
+        const c = this.#ctx.controller;
+        const item = c.list.itemOf.get(c.selectedHunk);
+        if (item === undefined)
+            return;
+        const y = this.#offsets[item];
+        const top = this.list.scrollTop;
+        // Not laid out yet (hidden sheet): position it for when it shows.
+        const height = this.list.clientHeight || 640;
+        // The first row of a group scrolls its group header into view too.
+        const above = c.list.items[item - 1]?.kind === 'header'
+            ? this.#offsets[item - 1]
+            : y - HEADER_SLOT;
+        if (y < top + HEADER_SLOT)
+            this.list.scrollTop = Math.max(0, above);
+        else if (y + ROW_SLOT > top + height)
+            this.list.scrollTop = y + ROW_SLOT - height + 8;
+        this.renderWindow();
+        this.#refreshRows();
+    }
+    #renderSticky(top) {
+        const items = this.#ctx.controller.list.items;
+        let current = -1;
+        let next = -1;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i]?.kind !== 'header')
+                continue;
+            if (this.#offsets[i] <= top)
+                current = i;
+            else {
+                next = i;
+                break;
+            }
+        }
+        if (current < 0 || top <= 0) {
+            this.sticky.hidden = true;
+            return;
+        }
+        const item = items[current];
+        const tr = this.#ctx.tr();
+        this.sticky.hidden = false;
+        const label = `${tr.t(`phase.${item.phase}`)}|${item.count}`;
+        if (this.sticky.dataset.key !== label) {
+            this.sticky.dataset.key = label;
+            replace(this.sticky, h('div', { class: 'group' }, h('span', { text: tr.t(`phase.${item.phase}`) }), h('span', { class: 'n', text: tr.num(item.count) })));
+        }
+        const push = next >= 0 ? Math.min(0, this.#offsets[next] - top - HEADER_SLOT) : 0;
+        this.sticky.style.transform = `translateY(${push}px)`;
+    }
+    #onListClick(e) {
+        const c = this.#ctx.controller;
+        const target = e.target;
+        const rv = target.closest('.rv');
+        if (rv?.dataset.hunk) {
+            e.stopPropagation();
+            c.toggleReviewed(rv.dataset.hunk);
+            return;
+        }
+        const row = target.closest('.row');
+        if (!row)
+            return;
+        const index = Number(row.dataset.index);
+        if (Number.isInteger(index))
+            c.selectHunk(index);
+    }
+}
+//# sourceMappingURL=change-list.js.map