tosijs-ui 1.12.5 → 1.12.6

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # Changelog
 
+## 1.12.6
+
+### `<tosi-diff resolvable>` — "do I want to accept this?"
+
+The diff viewer can now be operated, not just read. Set `resolvable` and every change gets a
+pair of buttons; `value` is the text those choices imply and `change` fires when one moves. It
+is a review surface for a **proposed** edit — an AI suggestion, a collaborator's revision, a
+file that moved under you while you were editing it.
+
+The labels are yours: `originalLabel`/`modifiedLabel`. "Mine"/"Theirs" is git's framing,
+"Current"/"Proposed" suits reviewing a suggestion, and this component's own vocabulary is
+original/modified — none of which is right for everyone, so none of it is hardcoded. Also
+`acceptAll()`, `rejectAll()`, `changeCount`, and a `resolutions` array you can read and write.
+`diffBlocks()` and `resolveDiff()` are exported too, if you want the model without the DOM.
+
+The unit of decision is a change **block**, not a line. The LCS walk can emit
+remove/add/remove/add for a single multi-line edit, and offering four independent choices there
+lets a reviewer accept half an edit — producing text neither side wrote.
+
+The read-only path is deliberately unchanged: grouping reorders interleaved edits, which is
+better to resolve and a **different rendering** for the two components already shipping this
+one. Additive means additive.
+
+Two notes on how this was tested, because **both** bugs that nearly shipped were invisible to
+the unit lane, and for the same underlying reason.
+
+The first version rendered **nothing**: `dataset: {…}` in an element creator assigns
+`el.dataset`, a read-only accessor, so `render()` threw and left an empty shadow root.
+Twenty-six green tests sat behind it, every one asserting `value` — which is computed from the
+model and is correct whether or not a single element reaches the DOM. tosijs renders on an
+animation frame and happy-dom runs none, so a unit test that merely _mounts_ an element asserts
+against an empty shadow root; appending hydrates, and `render()` must be called explicitly.
+
+The second was worse, because the render-level tests added for the first one _also_ passed. The
+buttons did nothing when clicked, in every browser. `<tosi-diff>` is a shadow-DOM component and
+tosijs delegates `on*` handlers from above the shadow boundary, so a real click is
+**retargeted**: `event.target` is the host, not the button, and `event.target.closest(…)` — the
+idiom this project documents, and which is correct for a light-DOM component — is `null` every
+time. The fix is `composedPath()`, the only one of the two that survives the boundary.
+
+The happy-dom test could not see it: it called `.click()` on a node it had already looked up and
+then asserted the value moved. Measured against a deliberately broken build, **30 unit tests
+pass and all 3 browser tests fail** — so `tests/diff-resolve.pw.ts` now clicks what a person
+clicks and reads what a host reads. The rule this leaves behind: **shadow-DOM interaction needs
+a browser test**, not a DOM-shaped unit test.
+
+### Selective revert in live examples
+
+The diff resolver is wired into `<tosi-example>`'s **View changes**, and into `<tosi-code>`
+generally via a new `diffResolvable` (plus `diffOriginalLabel`/`diffModifiedLabel`).
+
+Revert was all-or-nothing, which is the wrong shape for what actually happens: you tried four
+things and three worked. Each change in the diff now carries keep/revert buttons — labelled
+**Source** and **Yours** in an example — defaulting to _keep_, so the feature costs nothing to
+ignore and doing nothing leaves your edit exactly as it was.
+
+Choices are applied when the diff **closes**, not as you click, and a `change` event fires if
+the text moved. Writing each choice straight back into `value` would feed the new text into the
+overlay's `modified`, and `<tosi-diff>` resets its decisions when either input changes — so live
+application would wipe the choices making it and renumber the hunks under the pointer.
+
+### Fixed: `<tosi-diff>` and notifications ignored dark mode
+
+Both hardcoded a light palette — `#fff`/`#222` for the diff, `#fafafa`/`#444` for
+notifications — so on a dark page you got a white block, and in the notification's case the one
+element in the library that appears unbidden over whatever you are looking at was also the one
+that ignored your theme.
+
+Both now fall back to the theme (`--background`/`--text-color`) with the old literals as the
+final fallback, so an unthemed page is unchanged and every `--tosi-diff-*` /
+`--notification-*` override still wins exactly as before.
+
+The diff needed both halves at once: darkening the surface alone would have been **worse** than
+leaving it, because light text on a solid `#e6ffed` row is unreadable. The add/remove tints are
+now translucent (`color-mix` with `transparent`), so one value reads correctly as a wash over
+either surface.
+
+### Fixed: a consumer could not use the build lock ([#117](https://github.com/tonioloewald/tosijs-ui/issues/117), [#118](https://github.com/tonioloewald/tosijs-ui/issues/118))
+
+1.12.5 added a build lock that records `pid`, `role`, `root` and `port` per project, so a
+`stop` command can identify what is running instead of `pkill`-ing sibling checkouts. It worked
+— and none of it was reachable from outside the package. `import('tosijs-ui/site')` gave
+`currentHolder === undefined`, and the deep path is blocked by the exports map.
+
+`currentHolder`, `describeHolder`, `lockPathFor`, `lockDecision`, `isProcessAlive` and the
+`LockHolder`/`LockDecision` types are now re-exported from `tosijs-ui/site`.
+
+The reporter deliberately did **not** re-derive the lock path locally, and was right not to:
+that means copying the FNV-1a hash of the resolved root, and if the hash ever changed the
+consumer would report "nothing running" _while a server runs_. Silently-wrong is the exact
+failure this whole area exists to eliminate; duplicating the algorithm reintroduces it one
+layer out.
+
+### haltija floor raised to `^1.12.6`
+
+The floor encodes fixes, not a date. 1.12.6 is where a `--private` instance finally gained a
+**lifetime bound** (haltija#39, filed from here after one was found 12 days old at 5.7 GB and
+~150% CPU on a machine at load average 212); where **LAN and Bonjour access started working at
+all** (served scripts handed the browser `localhost:<port>`, and `localhost` in a served script
+means the _browser's_ machine, so a phone was told to connect to itself); where the widget sends
+`X-Haltija-Token`, so a `--token` server and a page that can talk back stopped being mutually
+exclusive; where results carry `paintAgeMs`, making a rAF-starved tab detectable rather than
+silently wrong; and where Electron went 40.6.1 → 43.4.1, clearing two context-isolation
+bypasses in the thing we spawn.
+
+(Internal, but worth recording: our own `CLAUDE.md` documented this pin as `^1.6.1` long after
+the code had moved to `^1.11.2` — a stale number in the one place a reader would trust for it.
+Corrected.)
+
+### Docs: our haltija gate covers the bridge, not the port
+
+The `haltijaDev: 'tunnel'` documentation read as a complete security story — session cookie,
+404-on-unauthorized, relay rather than hole — and a reader could reasonably conclude the whole
+surface was gated. It is not. Enabling `haltijaDev` at all means haltija's **own** port is
+running, and a default instance binds beyond loopback with `Access-Control-Allow-Origin: *` and
+no token, where `POST /terminal/command` reaches a shell. Set `HALTIJA_TOKEN` on a network you
+do not control; it only became genuinely usable in haltija 1.12.6, which is why older advice
+said to skip it.
+
 ## 1.12.5
 
 ### Fixed: 49 controls a screen reader announced as "button" and "edit text"

package/dist/code-editor.d.ts

@@ -30,6 +30,9 @@ export declare class CodeEditor extends WebComponent<CodeEditorParts> {
     private diffOverlay;
     private _pendingDiff;
     get showingDiff(): boolean;
+    diffResolvable: boolean;
+    diffOriginalLabel: string;
+    diffModifiedLabel: string;
     showDiff(on: boolean): void;
     static initAttributes: {
         mode: string;

package/dist/code-editor.js

@@ -24,6 +24,8 @@ body {
 | `mode` | `javascript`, `typescript`, `tjs`, `ajs`, `css`, `html`, `markdown` |
 | `disabled` | makes the editor read-only |
 | `original` + `showDiff(on)` | diff the current `value` against a baseline, as an overlay |
+| `diffResolvable` | make that overlay **resolvable**: each change gets keep/revert buttons, and the choices are applied to `value` when the diff closes |
+| `diffOriginalLabel` / `diffModifiedLabel` | what the two buttons say (default `Original`/`Modified`) |
 | `editor` | the underlying CodeMirror [`EditorView`](https://codemirror.net/docs/ref/#view.EditorView) (`undefined` until loaded) |
 | `undo()` / `redo()` / `canUndo()` / `canRedo()` | history control |
 | `tjsAutocomplete` | runtime-value autocomplete hooks (tjs mode) — see below |
@@ -38,6 +40,29 @@ runtime values** — including proxy members no static analysis can see:
 codeEl.tjsAutocomplete = { getLiveBindings: () => ({ app, elements }) }
 ```
 
+## Selective revert
+
+`showDiff(on)` shows a read-only diff. Set `diffResolvable` first and the overlay becomes a
+review surface instead: every change carries keep/revert buttons, defaulting to **keep**, and
+whatever you leave alone survives. This is what `<tosi-example>`'s **View changes** uses — you
+tried four things and three worked, so revert the one you regret rather than all four.
+
+The choices are applied when the diff **closes**, not as you click, and a `change` event fires
+if the text moved. That is deliberate: writing each choice straight back into `value` would
+feed the new text into the overlay's `modified`, and `<tosi-diff>` resets its decisions when
+either input changes — so live application would wipe the choices making it and renumber the
+hunks under the pointer.
+
+```typescript
+codeEl.original = savedSource
+codeEl.diffResolvable = true
+codeEl.diffOriginalLabel = 'Source'
+codeEl.diffModifiedLabel = 'Yours'
+codeEl.showDiff(true)
+// …user reverts a hunk or two…
+codeEl.showDiff(false)   // codeEl.value now reflects their choices
+```
+
 ## Bundling
 
 CodeMirror is a **lazy chunk**: with a bundler (ESM), a page that never uses
@@ -154,6 +179,17 @@ export class CodeEditor extends WebComponent {
             return this._pendingDiff ?? false;
         return !this.parts.diffHost.hidden;
     }
+    /*
+    Make the diff overlay RESOLVABLE, turning it from a review into selective revert.
+  
+    Off by default, so `showDiff()` stays exactly what it was. With it on, every change gets
+    keep/revert buttons and the ones you leave alone are kept — which is the useful default when
+    the "modified" side is your own edit: you are reverting the two lines you regret, not
+    re-accepting the twenty you meant.
+    */
+    diffResolvable = false;
+    diffOriginalLabel = 'Original';
+    diffModifiedLabel = 'Modified';
     showDiff(on) {
         if (!this.hydrated) {
             this._pendingDiff = on;
@@ -165,9 +201,32 @@ export class CodeEditor extends WebComponent {
                 this.diffOverlay = tosiDiff();
                 diffHost.append(this.diffOverlay);
             }
+            this.diffOverlay.resolvable = this.diffResolvable;
+            this.diffOverlay.originalLabel = this.diffOriginalLabel;
+            this.diffOverlay.modifiedLabel = this.diffModifiedLabel;
             this.diffOverlay.original = this.original;
             this.diffOverlay.modified = this.value;
         }
+        else if (this.diffOverlay !== undefined && this.diffResolvable) {
+            /*
+            Resolutions land on the way OUT, not as you click.
+      
+            Writing each choice straight back into `value` would feed the editor's new text into the
+            overlay's `modified`, and `<tosi-diff>` resets its decisions when either input changes —
+            by design, because choice #2 of the old diff is not choice #2 of the new one. Live
+            application would therefore wipe the very choices making it, and the hunks would
+            renumber under the pointer. Applying once, when the diff closes, sidesteps that
+            completely and matches how a reviewer thinks: decide, then commit.
+      
+            The `change` event matters as much as the value: it is how a host recomputes "does this
+            still differ from the source" after a partial revert.
+            */
+            const resolved = this.diffOverlay.value;
+            if (resolved !== this.value) {
+                this.value = resolved;
+                this.dispatchEvent(new CustomEvent('change', { detail: { value: resolved } }));
+            }
+        }
         diffHost.hidden = !on;
     }
     static initAttributes = {

package/dist/diff.d.ts

@@ -4,6 +4,35 @@ export interface DiffLine {
     op: DiffOp;
     text: string;
 }
+/** Which side of a change block won. */
+export type DiffResolution = 'original' | 'modified';
+/**
+ * A run of unchanged lines, or one CHANGE — the unit a reviewer accepts or rejects.
+ *
+ * `diffLines` emits removes and adds in walk order, which for a multi-line edit can
+ * interleave (`r a`, `+ A`, `r b`, `+ B`). That is fine to *read* and wrong to *resolve*:
+ * accepting half of an edit is not a state anybody asked for. Grouping every consecutive
+ * non-context run into one block is what makes "do I want this change?" a single decision.
+ */
+export type DiffBlock = {
+    kind: 'context';
+    lines: string[];
+} | {
+    kind: 'change';
+    removed: string[];
+    added: string[];
+};
+/** Group a line diff into context runs and change blocks, in display order. */
+export declare function diffBlocks(lines: DiffLine[]): DiffBlock[];
+/**
+ * Rebuild the text implied by a set of per-change choices.
+ *
+ * The invariant worth holding onto, and the reason this is a pure function with its own
+ * tests: all-`original` reproduces the original EXACTLY and all-`modified` reproduces the
+ * modified exactly. A resolver that cannot round-trip its own endpoints is one you cannot
+ * trust in the middle.
+ */
+export declare function resolveDiff(blocks: DiffBlock[], choices: DiffResolution[]): string;
 /**
  * Line-level diff of two strings via longest-common-subsequence, returning each
  * line tagged `context` (unchanged), `remove` (only in `before`), or `add` (only
@@ -18,6 +47,9 @@ export declare class TosiDiff extends Component<DiffParts> {
     static initAttributes: {
         original: string;
         modified: string;
+        resolvable: boolean;
+        originalLabel: string;
+        modifiedLabel: string;
     };
     static shadowStyleSpec: {
         ':host': {
@@ -53,8 +85,60 @@ export declare class TosiDiff extends Component<DiffParts> {
         '.diff-remove .marker': {
             color: string;
         };
+        '.diff-hunk': {
+            display: string;
+            position: string;
+            margin: string;
+            borderRadius: string;
+            boxShadow: string;
+        };
+        '.diff-choices': {
+            display: string;
+            gap: string;
+            alignItems: string;
+            padding: string;
+        };
+        '.diff-choices button': {
+            font: string;
+            cursor: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            color: string;
+            background: string;
+        };
+        '.diff-choices button[aria-pressed="true"]': {
+            background: string;
+            color: string;
+        };
+        '.diff-line.not-chosen': {
+            opacity: string;
+            textDecoration: string;
+            textDecorationColor: string;
+        };
     };
     content: () => HTMLDivElement[];
+    private _resolutions;
+    private resolvedOriginal;
+    private resolvedModified;
+    /** One entry per change block, in document order. */
+    get resolutions(): DiffResolution[];
+    set resolutions(choices: DiffResolution[]);
+    private get blocks();
+    /** Number of decisions this diff asks for. `0` means the two texts agree. */
+    get changeCount(): number;
+    /**
+     * The text implied by the current choices. With everything accepted this is exactly
+     * `modified`, and with everything rejected exactly `original`, so a host that never shows
+     * the controls still gets a sensible value.
+     */
+    get value(): string;
+    private setAll;
+    acceptAll: () => void;
+    rejectAll: () => void;
+    private syncResolutions;
+    private choose;
+    private lineElement;
     render(): void;
 }
 export declare const tosiDiff: ElementCreator<TosiDiff>;