From 2baa4692f71d4ccb0ea018663205094483ce1b63 Mon Sep 17 00:00:00 2001
From: fadeltd <fadeltd@hotmail.com>
Date: Fri, 30 Oct 2026 09:17:49 +0700
Subject: [PATCH 1/6] Follow-ups scaffold: shared CodeMirror theme,
 @codemirror/lang-json

Moves the editor's base theme out of the Diff route into src/lib/codemirror so the JSON tool can use it, and pins @codemirror/lang-json 6.0.2 and @codemirror/language 6.12.4 (already in the lockfile) for the JSON output's fold gutter.
---
 package.json                |  2 +
 pnpm-lock.yaml              | 23 ++++++++++
 src/lib/codemirror/theme.ts | 41 ++++++++++++++++++
 src/tools/diff/theme.ts     | 85 +++++++++++++------------------------
 4 files changed, 95 insertions(+), 56 deletions(-)
 create mode 100644 src/lib/codemirror/theme.ts

diff --git a/package.json b/package.json
index 71b7868..134f787 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "core:build": "pnpm --filter @fadeltd/devtools-core build"
   },
   "dependencies": {
+    "@codemirror/lang-json": "6.0.2",
+    "@codemirror/language": "6.12.4",
     "@codemirror/merge": "6.12.2",
     "@codemirror/state": "6.7.5",
     "@codemirror/view": "6.43.12",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03f6ba4..bd904d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@codemirror/lang-json':
+        specifier: 6.0.2
+        version: 6.0.2
+      '@codemirror/language':
+        specifier: 6.12.4
+        version: 6.12.4
       '@codemirror/merge':
         specifier: 6.12.2
         version: 6.12.2
@@ -710,6 +716,9 @@ packages:
   '@codemirror/commands@6.11.1':
     resolution: {integrity: sha512-O/4hG3SC1YwcmQ0d2UVNDs+AsaNWd1iHVxbTeEBuqH+6bExAiPK3iS/BvpY6rZGURALv4ZD3sIgcCmRvw3ehBg==}
 
+  '@codemirror/lang-json@6.0.2':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
   '@codemirror/language@6.12.4':
     resolution: {integrity: sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==}
 
@@ -1085,6 +1094,9 @@ packages:
   '@lezer/highlight@1.2.3':
     resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
 
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
   '@lezer/lr@1.4.10':
     resolution: {integrity: sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==}
 
@@ -4168,6 +4180,11 @@ snapshots:
       '@codemirror/view': 6.43.12
       '@lezer/common': 1.5.2
 
+  '@codemirror/lang-json@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.4
+      '@lezer/json': 1.0.3
+
   '@codemirror/language@6.12.4':
     dependencies:
       '@codemirror/state': 6.7.5
@@ -4438,6 +4455,12 @@ snapshots:
     dependencies:
       '@lezer/common': 1.5.2
 
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.10
+
   '@lezer/lr@1.4.10':
     dependencies:
       '@lezer/common': 1.5.2
diff --git a/src/lib/codemirror/theme.ts b/src/lib/codemirror/theme.ts
new file mode 100644
index 0000000..57b0f6c
--- /dev/null
+++ b/src/lib/codemirror/theme.ts
@@ -0,0 +1,41 @@
+import { EditorView } from '@codemirror/view'
+
+/**
+ * Matches the app's design tokens so an editor does not look bolted on:
+ * 44px right-aligned line-number gutter on its own darker surface, and
+ * 12px/18px tabular mono. Shared by the Diff and JSON tools; each adds its
+ * own rules on top.
+ */
+export const editorTheme = EditorView.theme(
+  {
+    '&': {
+      backgroundColor: 'var(--color-bg)',
+      color: 'var(--color-fg)',
+      height: '100%',
+      fontSize: '12px',
+    },
+    '.cm-scroller': {
+      fontFamily: 'var(--font-mono)',
+      fontVariantNumeric: 'tabular-nums',
+      lineHeight: '18px',
+    },
+    '.cm-gutters': {
+      backgroundColor: 'var(--color-gutter)',
+      color: 'var(--color-faint)',
+      border: 'none',
+      borderRight: '1px solid var(--color-border)',
+      userSelect: 'none',
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+      minWidth: '44px',
+      padding: '0 6px 0 0',
+      textAlign: 'right',
+    },
+    '.cm-activeLine': { backgroundColor: 'rgb(255 255 255 / 0.03)' },
+    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--color-muted)' },
+    '.cm-content': { caretColor: 'var(--color-accent)' },
+    '&.cm-focused': { outline: 'none' },
+    '.cm-selectionBackground, ::selection': { backgroundColor: 'var(--color-accent-dim)' },
+  },
+  { dark: true },
+)
diff --git a/src/tools/diff/theme.ts b/src/tools/diff/theme.ts
index 903014e..7ac79a5 100644
--- a/src/tools/diff/theme.ts
+++ b/src/tools/diff/theme.ts
@@ -1,63 +1,36 @@
 import { EditorView } from '@codemirror/view'
+import { editorTheme } from '@/lib/codemirror/theme'
 
 /**
- * Matches the app's design tokens so the editor does not look bolted on.
- * Follows the design system's diff spec: 44px right-aligned line-number gutter
- * on its own darker surface, 12px/18px tabular mono, and the semantic add/del
- * colours at 12% background tint with full-strength foreground.
+ * The shared editor theme plus the design system's diff spec: the semantic
+ * add/del colours at 12% background tint with full-strength foreground.
  */
-export const diffTheme = EditorView.theme(
-  {
-    '&': {
-      backgroundColor: 'var(--color-bg)',
-      color: 'var(--color-fg)',
-      height: '100%',
-      fontSize: '12px',
-    },
-    '.cm-scroller': {
-      fontFamily: 'var(--font-mono)',
-      fontVariantNumeric: 'tabular-nums',
-      lineHeight: '18px',
-    },
-    '.cm-gutters': {
-      backgroundColor: 'var(--color-gutter)',
-      color: 'var(--color-faint)',
-      border: 'none',
-      borderRight: '1px solid var(--color-border)',
-      userSelect: 'none',
-    },
-    '.cm-lineNumbers .cm-gutterElement': {
-      minWidth: '44px',
-      padding: '0 6px 0 0',
-      textAlign: 'right',
-    },
-    '.cm-activeLine': { backgroundColor: 'rgb(255 255 255 / 0.03)' },
-    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--color-muted)' },
-    '.cm-content': { caretColor: 'var(--color-accent)' },
-    '&.cm-focused': { outline: 'none' },
-    '.cm-selectionBackground, ::selection': { backgroundColor: 'var(--color-accent-dim)' },
+export const diffTheme = [
+  editorTheme,
+  EditorView.theme(
+    {
+      '.cm-changedLine': { backgroundColor: 'var(--color-warn-bg)' },
+      '.cm-changedText': { backgroundColor: 'rgb(245 158 11 / 0.25)' },
+      '.cm-insertedLine': { backgroundColor: 'var(--color-add-bg)' },
+      '.cm-deletedLine': { backgroundColor: 'var(--color-del-bg)' },
+      '.cm-deletedChunk': { backgroundColor: 'var(--color-del-bg)' },
+      '.cm-deletedChunk .cm-deletedText': { backgroundColor: 'rgb(239 68 68 / 0.25)' },
 
-    '.cm-changedLine': { backgroundColor: 'var(--color-warn-bg)' },
-    '.cm-changedText': { backgroundColor: 'rgb(245 158 11 / 0.25)' },
-    '.cm-insertedLine': { backgroundColor: 'var(--color-add-bg)' },
-    '.cm-deletedLine': { backgroundColor: 'var(--color-del-bg)' },
-    '.cm-deletedChunk': { backgroundColor: 'var(--color-del-bg)' },
-    '.cm-deletedChunk .cm-deletedText': { backgroundColor: 'rgb(239 68 68 / 0.25)' },
+      '.cm-collapsedLines': {
+        backgroundColor: 'var(--color-surface)',
+        color: 'var(--color-muted)',
+        padding: '2px 8px',
+        fontSize: '11px',
+        letterSpacing: '0.02em',
+        cursor: 'pointer',
+        borderTop: '1px solid var(--color-border)',
+        borderBottom: '1px solid var(--color-border)',
+      },
+      '.cm-collapsedLines:hover': { color: 'var(--color-fg)' },
 
-    '.cm-collapsedLines': {
-      backgroundColor: 'var(--color-surface)',
-      color: 'var(--color-muted)',
-      padding: '2px 8px',
-      fontSize: '11px',
-      letterSpacing: '0.02em',
-      cursor: 'pointer',
-      borderTop: '1px solid var(--color-border)',
-      borderBottom: '1px solid var(--color-border)',
+      '.cm-merge-gap': { backgroundColor: 'var(--color-gutter)' },
+      '.cm-merge-spacer': { backgroundColor: 'var(--color-bg)' },
     },
-    '.cm-collapsedLines:hover': { color: 'var(--color-fg)' },
-
-    '.cm-merge-gap': { backgroundColor: 'var(--color-gutter)' },
-    '.cm-merge-spacer': { backgroundColor: 'var(--color-bg)' },
-  },
-  { dark: true },
-)
+    { dark: true },
+  ),
+]

From e0a7e609b0f04e6bd472d0ce5ba500d58d53bf98 Mon Sep 17 00:00:00 2001
From: fadeltd <fadeltd@hotmail.com>
Date: Fri, 30 Oct 2026 09:20:58 +0700
Subject: [PATCH 2/6] CI: budget first-load JS, not just the entry chunk

The old check gzipped only index-*.js, so the registry chunk index.html modulepreloads (~13.8 kB gzip) was never measured. The step now sums every script dist/index.html loads (entry, modulepreloads, registerSW.js): 98,355 B today against a 107,520 B (105 KiB) budget, the same headroom as before.
---
 .github/pull_request_template.md |  2 +-
 .github/workflows/ci.yml         | 32 +++++++++++++++++++++-----------
 CLAUDE.md                        |  2 +-
 CONTRIBUTING.md                  |  2 +-
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 9ed2250..57d72ec 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -18,6 +18,6 @@
 - [ ] User-facing change → an entry under `## [Unreleased]` in `CHANGELOG.md` (without one, the merge releases nothing)
 - [ ] No network request, third-party resource, `innerHTML`, or dependency that needs `eval`
 - [ ] Anything touching a secret declares `store: { kind: 'none' }`; nothing multi-MB goes to `localStorage`
-- [ ] Entry bundle still under ~90 kB gzip (CI enforces 92160 B)
+- [ ] First-load JS still under 105 KiB gzip (CI enforces 107520 B)
 - [ ] Works at phone width: panes stack, 44px touch targets, no hover-only controls
 - [ ] Markdown prose is not hard-wrapped
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index eccc450..554a576 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -72,17 +72,27 @@ jobs:
             exit 1
           fi
 
-      # The entry bundle is what every visitor pays for on first load. If a
-      # heavy dependency escapes a lazy route chunk, this is where we find out
-      # rather than in production.
-      - name: Check entry bundle budget
+      # First-load JS is what every visitor pays for before any tool runs: the
+      # entry plus every chunk the HTML modulepreloads (the registry sits in
+      # one) and registerSW.js. If a heavy dependency escapes a lazy route
+      # chunk, this is where we find out rather than in production.
+      - name: Check first-load JS budget
         run: |
-          BUDGET=92160
-          ENTRY=$(find dist/assets -name 'index-*.js' -print -quit)
-          SIZE=$(gzip -c "$ENTRY" | wc -c | tr -d ' ')
-          echo "entry: $ENTRY"
-          echo "gzipped: ${SIZE}B   budget: ${BUDGET}B"
-          if [ "$SIZE" -gt "$BUDGET" ]; then
-            echo "::error::Entry bundle ${SIZE}B exceeds the ${BUDGET}B budget."
+          BUDGET=107520
+          LIST="$RUNNER_TEMP/first-load.txt"
+          grep -oE '(src|href)="/[^"]+\.js"' dist/index.html | sed -E 's/^(src|href)="\///; s/"$//' > "$LIST" || true
+          if ! grep -qE '^assets/index-[^/]+\.js$' "$LIST"; then
+            echo "::error::No entry script found in dist/index.html."
+            exit 1
+          fi
+          TOTAL=0
+          while read -r FILE; do
+            SIZE=$(gzip -c "dist/$FILE" | wc -c | tr -d ' ')
+            echo "${SIZE}B  $FILE"
+            TOTAL=$((TOTAL + SIZE))
+          done < "$LIST"
+          echo "first-load JS, gzipped: ${TOTAL}B   budget: ${BUDGET}B"
+          if [ "$TOTAL" -gt "$BUDGET" ]; then
+            echo "::error::First-load JS ${TOTAL}B exceeds the ${BUDGET}B budget."
             exit 1
           fi
diff --git a/CLAUDE.md b/CLAUDE.md
index b182b75..1a79c7a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -79,7 +79,7 @@ Load-bearing rules from it:
 - **A plain `<textarea>` is the default**, via `components/ui/CodeArea`. It is faster on 100k lines than any editor and gives native find, select-all, copy and undo for free. CodeMirror is justified only in diff and JSON.
 - **Never run a user-supplied regex on the main thread.** Anything that can go pathological — user regexes, unbounded transforms of pasted input — runs through `lib/worker/spawn.ts` (`useWorkerJob` in components). A backtracking regex never yields, so `terminate()` is the only abort; the job runner supersedes busy workers and offers Cancel after 2s.
 - No `manualChunks` in `vite.config.ts`. Splitting follows the registry's dynamic imports; hand-tuning is how CodeMirror lands in the entry bundle.
-- Entry bundle budget: **~90 kB gzip.** It is ~83 kB today. If it jumps, something leaked out of a lazy route. The CodeMirror merge view (~92 kB gzip) must stay inside the `diff` route chunk, and `cmdk` inside the lazy `CommandPalette` chunk.
+- First-load JS budget: **105 KiB gzip** (107,520 B), enforced in CI over every script `index.html` loads: the entry, its modulepreloaded chunks (the registry among them) and `registerSW.js`. It is ~98 kB today, ~83 kB of it the entry. If it jumps, something leaked out of a lazy route. The CodeMirror merge view (~92 kB gzip) must stay inside the `diff` route chunk, and `cmdk` inside the lazy `CommandPalette` chunk.
 - `MergeView` sizing lives in `global.css`, not `EditorView.theme`: the `.cm-mergeView` / `.cm-mergeViewEditors` nodes are outside the editor, and without explicit width/height the two panes collapse toward their content.
 
 ### Mobile
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 85fc95a..de3fc0c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -42,7 +42,7 @@ pnpm build
 
 All four must pass. `pnpm test` includes property tests (`fast-check`); if you touch parsing, encoding or sorting, add one — they have caught real bugs here that example-based tests missed.
 
-Keep the entry bundle under ~90 kB gzip. Heavy dependencies belong inside a lazy route chunk, never the shell.
+Keep first-load JS (the entry plus the chunks it preloads) under 105 KiB gzip; CI enforces it. Heavy dependencies belong inside a lazy route chunk, never the shell.
 
 ## Scope
 

From e648776f396208123eab4d8fe6c9fd8fc1724345 Mon Sep 17 00:00:00 2001
From: fadeltd <fadeltd@hotmail.com>
Date: Fri, 30 Oct 2026 09:20:58 +0700
Subject: [PATCH 3/6] Shared IssueCard in YAML/TOML; no-wrap on long lines in
 Base64, URL and String Escaper

YAML / JSON / TOML drops its private copy of the issue card for components/ui/IssueCard, whose column is now nullable to fit the YAML/TOML engine's messages.

Base64, URL and String Escaper turn soft-wrap off on input and output once a line passes 100k characters (hasLongLine from core /text), as JSON and Text to Binary / Hex already do, so a multi-MB single line stays editable.

Trims the JSON to Types SEO paragraph from 141 to 119 words.
---
 src/components/ui/IssueCard.tsx      |  5 ++--
 src/lib/registry/about.ts            |  2 +-
 src/tools/base64/Base64Tool.tsx      | 12 +++++++-
 src/tools/escape/EscapeTool.tsx      | 11 ++++++-
 src/tools/url/UrlTool.tsx            | 11 ++++++-
 src/tools/yaml-toml/YamlTomlTool.tsx | 44 +---------------------------
 6 files changed, 36 insertions(+), 49 deletions(-)

diff --git a/src/components/ui/IssueCard.tsx b/src/components/ui/IssueCard.tsx
index 66ca4b0..9682eaf 100644
--- a/src/components/ui/IssueCard.tsx
+++ b/src/components/ui/IssueCard.tsx
@@ -7,7 +7,7 @@ import { AlertTriangle } from 'lucide-react'
 export interface Issue {
   message: string
   line: number | null
-  column: number
+  column: number | null
   hint: string | null
   snippet: {
     lines: ReadonlyArray<{ number: number; text: string }>
@@ -29,7 +29,8 @@ export function IssueCard({ issue }: { issue: Issue }) {
           <div className="text-[13px] font-medium wrap-break-word text-fg">{issue.message}</div>
           {issue.line !== null && (
             <div className="font-mono text-[11px] text-faint">
-              line {issue.line}, column {issue.column}
+              line {issue.line}
+              {issue.column !== null && `, column ${issue.column}`}
             </div>
           )}
         </div>
diff --git a/src/lib/registry/about.ts b/src/lib/registry/about.ts
index 64c2265..aee05a4 100644
--- a/src/lib/registry/about.ts
+++ b/src/lib/registry/about.ts
@@ -30,7 +30,7 @@ export const ABOUT: Record<ToolSlug, string> = {
   'lorem': 'Counts are exact in every unit and format, capped at 50,000 words, 5,000 sentences or 1,000 paragraphs, and the tool says when a cap applies. A seed reproduces the same text, and one seed gives the same words whether the output is plain text, HTML with one <p> per paragraph, or Markdown, which emphasises the odd word but never the first of a sentence. Opening with the classic "Lorem ipsum dolor sit amet" is optional, and a request for only a few words cuts it short without leaving a dangling comma.',
   'cron': 'Errors name their field and position, a pasted crontab line with a command on the end is recognised, and Quartz syntax (?, L, W, #) is refused by name instead of half-accepted. When day-of-month and day-of-week are both restricted they are ORed, as Vixie cron does, 7 means Sunday, and six-field schedules run to the second. Next runs handle daylight saving: a fixed-time job in the spring gap moves to the first instant after it and runs once in the autumn overlap, half-hour zones such as Adelaide work, and 30 February is reported as never firing.',
   'csv': 'Parsing follows RFC 4180, including quoted fields that hold delimiters, line breaks and doubled quotes, reads LF, CRLF and lone CR alike, and never invents a row from a trailing newline. The delimiter is sniffed among comma, tab, semicolon and pipe, ignoring any inside quotes, and European files with decimal commas resolve to semicolon. Ragged rows are reported with expected and actual cell counts and padded rather than dropped, an unterminated quote is reported at its position, and repeated column names are flagged. JSON output keeps every value as its exact string, and Markdown output escapes pipes and newlines.',
-  'json-types': 'Every sample is merged into one shape, so an array of objects becomes one element type in which a key missing from some elements is optional and a key that is present but null is nullable; those are kept apart in all three outputs. Integers and floats are told apart by their literal, so 1.0 is a float, and an id past 2^53 is flagged rather than silently typed as a number Zod 4 would reject; in Go it widens to int64, then uint64. Objects with the same structure share one type, and names collide predictably: parent prefix, then a number. Go fields follow golint initialisms (UserID, APIKey), align as gofmt does, and a key a struct tag cannot hold is reported. NDJSON lines are read as samples, comments and trailing commas are accepted, and invalid JSON shows a caret.',
+  'json-types': 'Every sample is merged into one shape: a key missing from some objects is optional, a key present but null is nullable, and all three outputs keep the two apart. Integers and floats are told apart by their literal, so 1.0 is a float, and an id past 2^53 is flagged rather than typed as a number Zod 4 would reject; in Go it widens to int64, then uint64. Objects with the same structure share one type, and name collisions resolve predictably. Go fields follow golint initialisms (UserID, APIKey) and gofmt alignment, and a key no struct tag can hold is reported. NDJSON lines are read as samples, comments and trailing commas are accepted, and invalid JSON shows a caret.',
   'yaml-toml': 'YAML is read as 1.2 unless a document declares %YAML 1.1, so country: no stays a string (the Norway problem), with a note, and YAML output quotes such values so 1.1 readers agree. Anchors, aliases and merge keys are resolved, but an alias bomb is refused rather than expanded, duplicate keys are reported, and a multi-document stream becomes a JSON array. Integers beyond 2^53 stay exact between formats, TOML datetimes become ISO strings with a note, and a null, which TOML cannot hold, is refused with its key path. Parse errors carry a line and a caret.',
   'qr': 'Wi-Fi codes escape reserved characters in both the SSID and the password, add H:true only for a hidden network, and warn about a WPA password outside 8 to 63 characters or an SSID over 32 UTF-8 bytes. A bare host gets https:// added, while host:port is not mistaken for a scheme. The quiet zone defaults to 4 modules, with warnings for a thinner one, for version 20 and above, for low contrast, and for an inverted code some scanners cannot read. The SVG is a single path, and the PNG is snapped to whole pixels per module.',
   'sql': 'Formatting uses sql-formatter across 12 dialects, from standard SQL and PostgreSQL to BigQuery, T-SQL, Spark and Trino, and a parse or lexer error is reported at its line and column. Minifying is separate and dialect-aware: string literals, quoted identifiers and dollar-quoted bodies are left untouched, backslash escapes are read only where the dialect has them, # starts a comment only in MySQL-like dialects, and BigQuery triple-quoted strings are understood. Comments are kept by default and can be stripped, except optimizer hints and MySQL versioned comments.',
diff --git a/src/tools/base64/Base64Tool.tsx b/src/tools/base64/Base64Tool.tsx
index 50ac164..948f8dc 100644
--- a/src/tools/base64/Base64Tool.tsx
+++ b/src/tools/base64/Base64Tool.tsx
@@ -29,6 +29,7 @@ import {
   FILE_MAX_BYTES,
   fileTier,
 } from '@fadeltd/devtools-core/base64'
+import { hasLongLine } from '@fadeltd/devtools-core/text'
 import { DecodedBinary, DecodedImage, DecodedSvg, FileEncoder, type StoredFile } from './FilePanes'
 
 type Direction = 'encode' | 'decode'
@@ -189,6 +190,9 @@ export default function Base64Tool() {
 
   const deferred = useDeferredValue(state)
   const outcome = useMemo(() => compute(deferred), [deferred])
+  // Unwrapped base64 is one long line; soft-wrapping it costs seconds per edit.
+  const inputNoWrap = useMemo(() => hasLongLine(state.text), [state.text])
+  const outputNoWrap = useMemo(() => hasLongLine(outcome.output), [outcome.output])
   const fileMode = state.direction === 'encode' && state.file !== null
 
   /** Every way a file arrives -- drop, pick, paste -- ends here. */
@@ -389,6 +393,7 @@ export default function Base64Tool() {
                     value={state.text}
                     onChange={(e) => setState((p) => ({ ...p, text: e.target.value }))}
                     onPaste={onPaste}
+                    wrap={inputNoWrap ? 'off' : undefined}
                     placeholder={
                       state.direction === 'encode'
                         ? 'Paste text to encode — or drop, paste or choose an image or file…'
@@ -424,7 +429,12 @@ export default function Base64Tool() {
                   ) : outcome.svg !== null ? (
                     <DecodedSvg bytes={outcome.svg.bytes} text={outcome.output} />
                   ) : (
-                    <CodeArea value={outcome.output} readOnly placeholder="Output appears here" />
+                    <CodeArea
+                      value={outcome.output}
+                      readOnly
+                      wrap={outputNoWrap ? 'off' : undefined}
+                      placeholder="Output appears here"
+                    />
                   )}
                   <div className="flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 border-t border-border px-3 py-1.5 font-mono text-[11px] text-faint">
                     {outcome.sizeNote !== null && <span>{outcome.sizeNote}</span>}
diff --git a/src/tools/escape/EscapeTool.tsx b/src/tools/escape/EscapeTool.tsx
index 79decd4..9d06f61 100644
--- a/src/tools/escape/EscapeTool.tsx
+++ b/src/tools/escape/EscapeTool.tsx
@@ -21,6 +21,7 @@ import {
   type JsQuote,
   type SqlDialect,
 } from '@fadeltd/devtools-core/escape'
+import { hasLongLine } from '@fadeltd/devtools-core/text'
 
 interface State extends EscapeOptions {
   input: string
@@ -66,6 +67,8 @@ export default function EscapeTool() {
     [deferred],
   )
   const output = result.ok ? result.output : ''
+  const inputNoWrap = useMemo(() => hasLongLine(state.input), [state.input])
+  const outputNoWrap = useMemo(() => hasLongLine(output), [output])
 
   function swap() {
     setState((p) => ({
@@ -162,12 +165,18 @@ export default function EscapeTool() {
           <CodeArea
             value={state.input}
             onChange={(e) => set('input', e.target.value)}
+            wrap={inputNoWrap ? 'off' : undefined}
             placeholder={PLACEHOLDERS[state.mode][state.direction]}
           />
         }
         right={
           <div className="flex min-h-0 w-full flex-col border-t border-border md:border-t-0 md:border-l">
-            <CodeArea value={output} readOnly placeholder="Output appears here" />
+            <CodeArea
+              value={output}
+              readOnly
+              wrap={outputNoWrap ? 'off' : undefined}
+              placeholder="Output appears here"
+            />
             {deferred.input !== '' && (
               <div className="flex shrink-0 flex-col gap-1 border-t border-border px-3 py-1.5 text-[12px] leading-snug">
                 {result.ok ? (
diff --git a/src/tools/url/UrlTool.tsx b/src/tools/url/UrlTool.tsx
index a4986a4..2ccb84e 100644
--- a/src/tools/url/UrlTool.tsx
+++ b/src/tools/url/UrlTool.tsx
@@ -22,6 +22,7 @@ import {
   type QueryRow,
   type Variant,
 } from '@fadeltd/devtools-core/url'
+import { hasLongLine } from '@fadeltd/devtools-core/text'
 
 interface State {
   input: string
@@ -99,6 +100,8 @@ export default function UrlTool() {
 
   const input = deferred.input
   const { output, error } = result
+  const inputNoWrap = useMemo(() => hasLongLine(state.input), [state.input])
+  const outputNoWrap = useMemo(() => hasLongLine(output), [output])
 
   return (
     <ToolFrame
@@ -147,6 +150,7 @@ export default function UrlTool() {
               <CodeArea
                 value={state.input}
                 onChange={(e) => setState((p) => ({ ...p, input: e.target.value }))}
+                wrap={inputNoWrap ? 'off' : undefined}
                 placeholder={
                   state.mode === 'encode'
                     ? 'Paste text or a URL to percent-encode…'
@@ -156,7 +160,12 @@ export default function UrlTool() {
             }
             right={
               <div className="flex min-h-0 w-full flex-col border-t border-border md:border-t-0 md:border-l">
-                <CodeArea value={output} readOnly placeholder="Output appears here" />
+                <CodeArea
+                  value={output}
+                  readOnly
+                  wrap={outputNoWrap ? 'off' : undefined}
+                  placeholder="Output appears here"
+                />
                 {(input !== '' || error !== null) && (
                   <div className="flex shrink-0 flex-col gap-1 border-t border-border px-3 py-1.5 text-[12px] leading-snug">
                     {error !== null && <p className="text-del">{error.message}</p>}
diff --git a/src/tools/yaml-toml/YamlTomlTool.tsx b/src/tools/yaml-toml/YamlTomlTool.tsx
index a8bb4ee..9794fca 100644
--- a/src/tools/yaml-toml/YamlTomlTool.tsx
+++ b/src/tools/yaml-toml/YamlTomlTool.tsx
@@ -7,6 +7,7 @@ import { Badge } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { CodeArea } from '@/components/ui/CodeArea'
 import { CopyButton } from '@/components/ui/CopyButton'
+import { IssueCard } from '@/components/ui/IssueCard'
 import { Select } from '@/components/ui/Select'
 import { useToolState } from '@/lib/persist/useToolState'
 import { useShortcuts } from '@/lib/keys/useShortcuts'
@@ -74,49 +75,6 @@ function messageKey(m: Message): string {
   return `${m.code}:${m.line}:${m.column}:${m.message}`
 }
 
-/** Same card as the JSON tool's: message, position, and a caret under the spot. */
-function IssueCard({ issue }: { issue: Message }) {
-  const snippet = issue.snippet
-  const gutterWidth = String(snippet?.lines[snippet.lines.length - 1]?.number ?? 1).length
-
-  return (
-    <div className="panel p-3">
-      <div className="flex items-start gap-2">
-        <AlertTriangle size={15} className="mt-px shrink-0 text-del" aria-hidden />
-        <div className="min-w-0">
-          <div className="text-[13px] font-medium wrap-break-word text-fg">{issue.message}</div>
-          {issue.line !== null && (
-            <div className="font-mono text-[11px] text-faint">
-              line {issue.line}, column {issue.column}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {snippet !== null && (
-        <pre className="mt-2 overflow-x-auto font-mono text-[12px] leading-normal text-muted scroll-thin">
-          {snippet.lines.map((l) => (
-            <span key={l.number}>
-              <span className={l.number === snippet.caretLine ? 'text-fg' : undefined}>
-                {String(l.number).padStart(gutterWidth, ' ')} │ {l.text}
-              </span>
-              {'\n'}
-              {l.number === snippet.caretLine && (
-                <span className="text-del">
-                  {' '.repeat(gutterWidth)} │ {' '.repeat(Math.max(0, snippet.caretColumn - 1))}▲
-                  {'\n'}
-                </span>
-              )}
-            </span>
-          ))}
-        </pre>
-      )}
-
-      {issue.hint !== null && <p className="mt-1 text-[12px] text-muted">{issue.hint}</p>}
-    </div>
-  )
-}
-
 function NoteRow({ note, tone }: { note: Message; tone: 'warn' | 'note' }) {
   return (
     <li className="flex items-start gap-2 px-3 py-1.5">

From 1755ea31cf05fca8954ec92d97f79f0720b4cea7 Mon Sep 17 00:00:00 2001
From: fadeltd <fadeltd@hotmail.com>
Date: Fri, 30 Oct 2026 09:27:08 +0700
Subject: [PATCH 4/6] Diff: load #d= links on hashchange, transforms in a
 worker, lone CR line breaks

A #d= share link pasted into an already-open Diff tab now loads without a reload: the tool listens for hashchange, as List does, decodes the fragment, clears it with history.replaceState and ignores a fragment it is already decoding or that was replaced meanwhile.

The sorted-lines and key-sorted JSON views are built in a worker (transform.worker.ts) driven by useWorkerJob, so toggling them on a large input no longer freezes the page. The worker is spawned only while a transform is on (TransformRunner is mounted only then) and is killed by Show original. While a run is pending the panes keep the previous view of the same transform, or show a busy message, never the raw text; Copy patch is disabled until the view matches the text; after 2 s a Cancel button appears. The size verdict is computed on the transformed text in the worker, before it reaches CodeMirror. The JSON parser and the line sort leave the diff route chunk.

longestLineOf, and so assessSize, now ends a line at \r\n, \n or a lone \r, matching CodeMirror's /\r\n?|\n/ split, so a large classic-Mac file is no longer refused as one long line. It stays two indexOf cursors, linear. Unit and property tests in the package, and a parity test against CodeMirror's own line splitting.
---
 packages/core/src/diff/stats.test.ts |  24 ++++-
 packages/core/src/diff/stats.ts      |  32 ++++++-
 src/tools/diff/DiffTool.tsx          | 128 ++++++++++++++++++++++-----
 src/tools/diff/TransformRunner.tsx   |  64 ++++++++++++++
 src/tools/diff/stats.parity.test.ts  |  28 ++++++
 src/tools/diff/transform-view.ts     |  50 +++++++++++
 src/tools/diff/transform.worker.ts   |  20 +++++
 src/tools/diff/view.ts               |  57 +++---------
 8 files changed, 328 insertions(+), 75 deletions(-)
 create mode 100644 src/tools/diff/TransformRunner.tsx
 create mode 100644 src/tools/diff/transform-view.ts
 create mode 100644 src/tools/diff/transform.worker.ts

diff --git a/packages/core/src/diff/stats.test.ts b/packages/core/src/diff/stats.test.ts
index 63e2a71..ab97e36 100644
--- a/packages/core/src/diff/stats.test.ts
+++ b/packages/core/src/diff/stats.test.ts
@@ -11,10 +11,21 @@ describe('longestLineOf', () => {
     expect(longestLineOf('\n\n')).toBe(0)
   })
 
-  it('agrees with splitting on \\n', () => {
+  it('ends a line at \\r\\n, \\n or a lone \\r, as CodeMirror does', () => {
+    expect(longestLineOf('abc\r\n')).toBe(3)
+    expect(longestLineOf('ab\rcd\ref')).toBe(2)
+    expect(longestLineOf('abc\r')).toBe(3)
+    // \r\n is one break; \n\r is two.
+    expect(longestLineOf('a\r\nbb')).toBe(2)
+    expect(longestLineOf('aaa\n\rb')).toBe(3)
+    expect(longestLineOf('\r\r\n\n')).toBe(0)
+    expect(longestLineOf('x\r' + 'y'.repeat(10) + '\r\nz')).toBe(10)
+  })
+
+  it("agrees with splitting on CodeMirror's line separator", () => {
     fc.assert(
-      fc.property(fc.string({ unit: fc.constantFrom('a', 'b', '\n', '\r') }), (s) => {
-        expect(longestLineOf(s)).toBe(Math.max(...s.split('\n').map((l) => l.length)))
+      fc.property(fc.string({ unit: fc.constantFrom('a', 'b', '\n', '\r', '\r\n') }), (s) => {
+        expect(longestLineOf(s)).toBe(Math.max(...s.split(/\r\n?|\n/).map((l) => l.length)))
       }),
     )
   })
@@ -26,6 +37,13 @@ describe('assessSize thresholds', () => {
     expect(assessSize('', 'x'.repeat(MAX_DIFF_LINE_CHARS + 1)).tier).toBe('refuse')
   })
 
+  it('does not refuse a large file with lone \\r line endings as one long line', () => {
+    const classicMac = ('x'.repeat(79) + '\r').repeat(40_000)
+    const v = assessSize(classicMac, classicMac.replaceAll('\r', '\r\n'))
+    expect(v.tier).toBe('line-only')
+    expect(v.longestLine).toBe(79)
+  })
+
   it('refuses a 5 MB single line, the case that hangs CodeMirror', () => {
     const v = assessSize('a'.repeat(5_000_000), 'short')
     expect(v.tier).toBe('refuse')
diff --git a/packages/core/src/diff/stats.ts b/packages/core/src/diff/stats.ts
index 6db19fe..b55fb80 100644
--- a/packages/core/src/diff/stats.ts
+++ b/packages/core/src/diff/stats.ts
@@ -151,13 +151,37 @@ export function assessSize(a: string, b: string): SizeVerdict {
   return { tier: 'ok', reason: null, longestLine }
 }
 
-/** Length of the longest `\n`-separated line, not counting the terminator. */
+/**
+ * Length of the longest line, not counting its terminator.
+ *
+ * A line ends at `\r\n`, `\n` or a lone `\r`, which is what CodeMirror splits
+ * on (`/\r\n?|\n/`), so the verdict matches what the editor will lay out: a
+ * classic-Mac file of short `\r`-separated lines is many lines, not one.
+ *
+ * Two `indexOf` cursors, each re-searched only once the scan passes it, so it
+ * stays linear. A file with no `\r` pays one failed search for it, and a CRLF
+ * file roughly two scans instead of one.
+ */
 export function longestLineOf(text: string): number {
   let longest = 0
   let start = 0
-  for (let nl = text.indexOf('\n'); nl !== -1; nl = text.indexOf('\n', start)) {
-    if (nl - start > longest) longest = nl - start
-    start = nl + 1
+  let lf = text.indexOf('\n')
+  let cr = text.indexOf('\r')
+  while (lf !== -1 || cr !== -1) {
+    let end: number
+    let next: number
+    if (cr === -1 || (lf !== -1 && lf < cr)) {
+      end = lf
+      next = lf + 1
+    } else {
+      end = cr
+      // \r\n is one break, not a break followed by an empty line.
+      next = lf === cr + 1 ? cr + 2 : cr + 1
+    }
+    if (end - start > longest) longest = end - start
+    start = next
+    if (lf !== -1 && lf < start) lf = text.indexOf('\n', start)
+    if (cr !== -1 && cr < start) cr = text.indexOf('\r', start)
   }
   return Math.max(longest, text.length - start)
 }
diff --git a/src/tools/diff/DiffTool.tsx b/src/tools/diff/DiffTool.tsx
index 3983c03..7ae7091 100644
--- a/src/tools/diff/DiffTool.tsx
+++ b/src/tools/diff/DiffTool.tsx
@@ -20,9 +20,18 @@ import {
   SHARE_PARAM,
   decodeShare,
   encodeShare,
+  MAX_DIFF_CHARS,
 } from '@fadeltd/devtools-core/diff'
 import { diffFor } from './engine'
-import { prepareView, TRANSFORM_BANNERS, TRANSFORM_LABELS, type Transform } from './view'
+import { TransformRunner, type TransformInput, type TransformJob } from './TransformRunner'
+import {
+  plainView,
+  TRANSFORM_BANNERS,
+  TRANSFORM_BUSY,
+  TRANSFORM_LABELS,
+  type DiffView,
+  type Transform,
+} from './view'
 
 interface State {
   left: string
@@ -88,23 +97,37 @@ export default function DiffTool() {
   // Opened from a share link: load it over whatever was saved. setState marks
   // the state dirty, so the async IDB hydration cannot overwrite it afterwards.
   useEffect(() => {
-    const hash = window.location.hash
-    if (!hash.startsWith(SHARE_PREFIX)) return
     let cancelled = false
-    void decodeShare(hash).then((shared) => {
-      if (cancelled) return
-      // Drop the fragment so a reload does not reapply it over later edits.
-      // history.state is kept: React Router stores its index there.
-      window.history.replaceState(window.history.state, '', window.location.pathname + window.location.search)
-      if (shared === null) {
-        setError('This share link is damaged or from a newer version.')
-        return
-      }
-      setState((p) => ({ ...p, left: shared.left, right: shared.right }))
-      setNotice('Opened a shared diff. It replaced your previous comparison.')
-    })
+    // The fragment being decoded, so a hashchange for it does not decode it again.
+    let loading: string | null = null
+    function load() {
+      const hash = window.location.hash
+      if (!hash.startsWith(SHARE_PREFIX) || hash === loading) return
+      loading = hash
+      void decodeShare(hash).then((shared) => {
+        if (loading === hash) loading = null
+        // A newer link may have arrived meanwhile; only the latest one counts.
+        if (cancelled || window.location.hash !== hash) return
+        // Drop the fragment so a reload does not reapply it over later edits.
+        // history.state is kept: React Router stores its index there. This
+        // fires no hashchange, so the same link pasted again loads again.
+        window.history.replaceState(window.history.state, '', window.location.pathname + window.location.search)
+        if (shared === null) {
+          setError('This share link is damaged or from a newer version.')
+          return
+        }
+        setError(null)
+        setState((p) => ({ ...p, left: shared.left, right: shared.right }))
+        setNotice('Opened a shared diff. It replaced your previous comparison.')
+      })
+    }
+    load()
+    // A link pasted into the address bar of an open Diff tab is a same-page
+    // fragment change, not a load.
+    window.addEventListener('hashchange', load)
     return () => {
       cancelled = true
+      window.removeEventListener('hashchange', load)
     }
   }, [setState])
 
@@ -138,14 +161,43 @@ export default function DiffTool() {
   }
 
   // What the panes show, and whether they may show it at all, decided on the
-  // live text: see prepareView. Only the stats below run on a deferred copy.
+  // live text: see plainView. Only the stats below run on a deferred copy.
   const { left, right, transform } = state
-  const view = useMemo(() => prepareView(left, right, transform), [left, right, transform])
-  const size = view.size
   const transforming = transform !== 'none'
+  // Past the hard cap there is nothing to show, so nothing is sent to be
+  // parsed or sorted: the text as written is refused as it is.
+  const overCap = Math.max(left.length, right.length) > MAX_DIFF_CHARS
+  const transformInput = useMemo<TransformInput | null>(
+    () => (transform === 'none' || overCap ? null : { left, right, kind: transform }),
+    [left, right, transform, overCap],
+  )
+  const plain = useMemo(
+    () => (transformInput === null ? plainView(left, right) : null),
+    [left, right, transformInput],
+  )
+
+  // A transform is built in a worker (TransformRunner) and arrives later. Its
+  // size verdict comes with it, so nothing reaches CodeMirror unjudged.
+  const [job, setJob] = useState<TransformJob | null>(null)
+  const current = job !== null && job.input === transformInput ? job : null
+  const jobStatus = current?.status ?? 'running'
+  const finished = job?.result
+  let view: DiffView | null = plain
+  if (view === null && finished !== undefined) {
+    if (finished.input === transformInput) view = finished.view
+    // While a newer run is going, keep the last view of the same transform on
+    // screen rather than flashing the raw text as if it were transformed.
+    else if (finished.input.kind === transform && (jobStatus === 'running' || jobStatus === 'slow')) {
+      view = finished.view
+    }
+  }
+  /** A transform is on and the panes do not (yet) show the current text. */
+  const pending = plain === null && finished?.input !== transformInput
+  const size = view?.size ?? null
 
   const deferredView = useDeferredValue(view)
   const stats = useMemo(() => {
+    if (deferredView === null) return null
     const { left: a, right: b, size: verdict } = deferredView
     if (verdict.tier === 'refuse') return null
     if (a === '' && b === '') return null
@@ -168,6 +220,8 @@ export default function DiffTool() {
     // Built and written inside the click handler: Safari refuses a clipboard
     // write that happens anywhere else.
     // Of what is shown: in a transform, the sorted text, as the label says.
+    // Never of a view still catching up with the text (the button is disabled).
+    if (view === null || pending) return
     const patch = toUnifiedPatch(view.left, view.right)
     if (patch === null) {
       setError('These inputs are too different to build a patch in time. Use `diff -u` on the command line.')
@@ -344,7 +398,7 @@ export default function DiffTool() {
           </Button>
           <Button
             onClick={copyPatch}
-            disabled={view.left === view.right || size.tier === 'refuse'}
+            disabled={view === null || pending || view.left === view.right || view.size.tier === 'refuse'}
             title={
               transforming
                 ? 'Copy the shown, rewritten text as a unified patch, not your original text. The Ignore toggles do not apply.'
@@ -377,6 +431,7 @@ export default function DiffTool() {
       }
     >
       <div className="flex h-full min-h-0 flex-col">
+        {transformInput !== null && <TransformRunner input={transformInput} onChange={setJob} />}
         {error !== null && (
           <div className="shrink-0 border-b border-border px-3 py-1.5 text-[12px] text-del">
             {error}
@@ -397,25 +452,50 @@ export default function DiffTool() {
               <span>{TRANSFORM_BANNERS[transform]} Both sides are read-only; your text is unchanged.</span>
               <Button onClick={() => setState((p) => ({ ...p, transform: 'none' }))}>Show original</Button>
             </div>
-            {view.problems.map((problem) => (
+            {pending && view !== null && jobStatus !== 'slow' && (
+              <div className="text-faint">{TRANSFORM_BUSY[transform]} Showing the previous view until it is done.</div>
+            )}
+            {pending && jobStatus === 'slow' && (
+              <div className="flex items-center gap-3 text-warn">
+                {TRANSFORM_BUSY[transform]} Still working after 2s.
+                <Button variant="danger" onClick={current?.cancel}>
+                  Cancel
+                </Button>
+              </div>
+            )}
+            {pending && jobStatus === 'cancelled' && (
+              <div className="text-del">Cancelled. Show the original, or load a file to try again.</div>
+            )}
+            {pending && jobStatus === 'error' && (
+              <div className="text-del">Could not build this view: {current?.error}</div>
+            )}
+            {(view?.problems ?? []).map((problem) => (
               <div key={problem} className="text-del">
                 {problem}
               </div>
             ))}
-            {view.notes.map((note) => (
+            {(view?.notes ?? []).map((note) => (
               <div key={note} className="text-warn">
                 {note}
               </div>
             ))}
           </div>
         )}
-        {size.reason !== null && (
+        {size !== null && size.reason !== null && (
           <div className="shrink-0 border-b border-border px-3 py-1.5 text-[12px] text-warn">
             {size.reason}
           </div>
         )}
 
-        {size.tier === 'refuse' ? (
+        {view === null ? (
+          // A transform with nothing finished yet. Never the raw text: it
+          // would read as the transformed view.
+          <div className="flex flex-1 items-center justify-center p-6 text-center text-[13px] text-muted">
+            {transformInput !== null && (jobStatus === 'running' || jobStatus === 'slow')
+              ? TRANSFORM_BUSY[transformInput.kind]
+              : 'Nothing to show.'}
+          </div>
+        ) : view.size.tier === 'refuse' ? (
           <div className="flex flex-1 items-center justify-center p-6 text-center text-[13px] text-muted">
             Input too large to display.
           </div>
@@ -429,7 +509,7 @@ export default function DiffTool() {
               right={view.right}
               mode={effectiveMode}
               wrapLines={state.wrapLines}
-              highlightChanges={size.tier === 'ok'}
+              highlightChanges={view.size.tier === 'ok'}
               ignore={ignoreOf(state)}
               readOnly={transforming}
               onChangeLeft={(value) => setState((p) => ({ ...p, left: value }))}
diff --git a/src/tools/diff/TransformRunner.tsx b/src/tools/diff/TransformRunner.tsx
new file mode 100644
index 0000000..ca03371
--- /dev/null
+++ b/src/tools/diff/TransformRunner.tsx
@@ -0,0 +1,64 @@
+import { useEffect } from 'react'
+import type { Remote } from 'comlink'
+import type { DiffTransform } from '@fadeltd/devtools-core/diff'
+import { useWorkerJob, type JobStatus } from '@/lib/worker/useWorkerJob'
+import type { DiffTransformApi } from './transform.worker'
+import type { DiffView } from './view'
+
+export interface TransformInput {
+  left: string
+  right: string
+  kind: DiffTransform
+}
+
+/** A finished view, tagged with the input it was built from. */
+export interface TransformOutcome {
+  input: TransformInput
+  view: DiffView
+}
+
+export interface TransformJob {
+  /** The input `status` and `error` describe. */
+  input: TransformInput
+  status: JobStatus
+  /** The last finished view, which may belong to an older input. */
+  result: TransformOutcome | undefined
+  error: string | undefined
+  cancel: () => void
+}
+
+// Module-level so useWorkerJob sees stable references.
+function spawnTransformer() {
+  return new Worker(new URL('./transform.worker.ts', import.meta.url), { type: 'module' })
+}
+
+async function runTransform(api: Remote<DiffTransformApi>, input: TransformInput): Promise<TransformOutcome> {
+  return { input, view: await api.view(input.left, input.right, input.kind) }
+}
+
+/**
+ * Builds a transformed view in a worker and reports on it. Renders nothing.
+ *
+ * A component rather than a hook in DiffTool so that it is mounted only while
+ * a transform is on: useWorkerJob spawns its worker on the first run, and most
+ * visits to the Diff tool never transform anything. Unmounting ("Show
+ * original") also kills a run that is still going.
+ */
+export function TransformRunner({
+  input,
+  onChange,
+}: {
+  input: TransformInput
+  /** Must be stable (a state setter). Called with null on unmount. */
+  onChange: (job: TransformJob | null) => void
+}) {
+  const { status, result, error, cancel } = useWorkerJob(spawnTransformer, runTransform, input)
+
+  useEffect(() => {
+    onChange({ input, status, result, error, cancel })
+  }, [input, status, result, error, cancel, onChange])
+
+  useEffect(() => () => onChange(null), [onChange])
+
+  return null
+}
diff --git a/src/tools/diff/stats.parity.test.ts b/src/tools/diff/stats.parity.test.ts
index 3398d88..5caf2f6 100644
--- a/src/tools/diff/stats.parity.test.ts
+++ b/src/tools/diff/stats.parity.test.ts
@@ -1,13 +1,41 @@
+import fc from 'fast-check'
 import { describe, expect, it } from 'vitest'
 import { diff } from '@codemirror/merge'
+import { EditorState } from '@codemirror/state'
 import {
   computeDiff,
   assessSize,
   diffStats,
   formatStats,
+  longestLineOf,
   type ChangeRange,
 } from '@fadeltd/devtools-core/diff'
 
+/** The longest line as the editor lays it out, after its own line splitting. */
+function editorLongestLine(text: string): number {
+  let longest = 0
+  for (const line of EditorState.create({ doc: text }).doc.iterLines()) {
+    longest = Math.max(longest, line.length)
+  }
+  return longest
+}
+
+describe('longestLineOf matches what CodeMirror lays out', () => {
+  it('on every mix of \\n, \\r\\n and lone \\r', () => {
+    fc.assert(
+      fc.property(fc.string({ unit: fc.constantFrom('a', 'bb', '\n', '\r', '\r\n') }), (s) => {
+        expect(longestLineOf(s)).toBe(editorLongestLine(s))
+      }),
+    )
+  })
+
+  it('on a classic-Mac file, which is many short lines rather than one long one', () => {
+    const text = ('x'.repeat(40) + '\r').repeat(10_000)
+    expect(editorLongestLine(text)).toBe(40)
+    expect(assessSize(text, '').longestLine).toBe(40)
+  })
+})
+
 const statsOf = (a: string, b: string) => diffStats(a, b, diff(a, b))
 
 describe('diffStats', () => {
diff --git a/src/tools/diff/transform-view.ts b/src/tools/diff/transform-view.ts
new file mode 100644
index 0000000..1933772
--- /dev/null
+++ b/src/tools/diff/transform-view.ts
@@ -0,0 +1,50 @@
+import {
+  assessSize,
+  transformForDiff,
+  MAX_DIFF_CHARS,
+  type DiffTransform,
+  type TransformResult,
+} from '@fadeltd/devtools-core/diff'
+import { plainView, type DiffView } from './view'
+
+// One entry per side is enough: in a transform the panes are read-only, so a
+// side changes only when a file replaces it, and the other side should not be
+// re-parsed or re-sorted when that happens. It lives in the worker, which is
+// kept warm between runs.
+const cache: Array<{ text: string; kind: DiffTransform; result: TransformResult }> = []
+
+function transformCached(text: string, kind: DiffTransform): TransformResult {
+  const hit = cache.find((e) => e.kind === kind && e.text === text)
+  if (hit) return hit.result
+  const result = transformForDiff(text, kind)
+  cache.unshift({ text, kind, result })
+  cache.length = Math.min(cache.length, 2)
+  return result
+}
+
+/**
+ * Both sides rewritten for comparison, with the size verdict judged on the
+ * rewritten text. Runs in `transform.worker.ts`: a 100k-line sort or a
+ * multi-MB JSON parse takes long enough to freeze the page.
+ */
+export function transformView(left: string, right: string, kind: DiffTransform): DiffView {
+  // Past the hard cap there is nothing to show, so skip parsing or sorting it.
+  // DiffTool does not send such text here; this keeps the function safe alone.
+  if (Math.max(left.length, right.length) > MAX_DIFF_CHARS) return plainView(left, right)
+
+  const problems: string[] = []
+  const notes: string[] = []
+  const side = (text: string, name: 'Left' | 'Right'): string => {
+    const r = transformCached(text, kind)
+    if (!r.ok) {
+      problems.push(`${name} side is not valid JSON: ${r.error}. Showing it as written.`)
+      return text
+    }
+    for (const note of r.notes) notes.push(`${name}: ${note}`)
+    return r.text
+  }
+
+  const shownLeft = side(left, 'Left')
+  const shownRight = side(right, 'Right')
+  return { left: shownLeft, right: shownRight, size: assessSize(shownLeft, shownRight), problems, notes }
+}
diff --git a/src/tools/diff/transform.worker.ts b/src/tools/diff/transform.worker.ts
new file mode 100644
index 0000000..5457bed
--- /dev/null
+++ b/src/tools/diff/transform.worker.ts
@@ -0,0 +1,20 @@
+import { expose } from 'comlink'
+import type { DiffTransform } from '@fadeltd/devtools-core/diff'
+import { transformView } from './transform-view'
+import type { DiffView } from './view'
+
+/**
+ * Off the main thread because a transform of a large side is slow enough to
+ * freeze the page when toggled (100k lines sort in ~330 ms, a 1.8 MB JSON
+ * file parses and re-prints in ~250 ms), and because it keeps the JSON parser
+ * and the list sort out of the diff route chunk.
+ */
+const api = {
+  view(left: string, right: string, kind: DiffTransform): DiffView {
+    return transformView(left, right, kind)
+  },
+}
+
+export type DiffTransformApi = typeof api
+
+expose(api)
diff --git a/src/tools/diff/view.ts b/src/tools/diff/view.ts
index 15702a2..36befba 100644
--- a/src/tools/diff/view.ts
+++ b/src/tools/diff/view.ts
@@ -1,11 +1,4 @@
-import {
-  assessSize,
-  transformForDiff,
-  MAX_DIFF_CHARS,
-  type DiffTransform,
-  type SizeVerdict,
-  type TransformResult,
-} from '@fadeltd/devtools-core/diff'
+import { assessSize, type DiffTransform, type SizeVerdict } from '@fadeltd/devtools-core/diff'
 
 export type Transform = 'none' | DiffTransform
 
@@ -20,49 +13,20 @@ export interface DiffView {
   notes: string[]
 }
 
-// One entry per side is enough: in a transform the panes are read-only, so a
-// side changes only when a file replaces it, and the other side should not be
-// re-parsed or re-sorted when that happens.
-const cache: Array<{ text: string; kind: DiffTransform; result: TransformResult }> = []
-
-function transformCached(text: string, kind: DiffTransform): TransformResult {
-  const hit = cache.find((e) => e.kind === kind && e.text === text)
-  if (hit) return hit.result
-  const result = transformForDiff(text, kind)
-  cache.unshift({ text, kind, result })
-  cache.length = Math.min(cache.length, 2)
-  return result
-}
-
 /**
- * Decide what reaches CodeMirror, from the live text.
+ * The view of the text as written, decided from the live text.
  *
  * Runs on the current state rather than a deferred copy: a deferred verdict
  * lags a render behind, which is exactly long enough for a dropped 5 MB
  * single-line file to be laid out on the main thread before it is refused.
  * `assessSize` is a couple of `indexOf` scans, so this is cheap per keystroke.
+ *
+ * A transform is built in a worker instead (see `transform-view.ts`); this
+ * module deliberately does not import it, so the JSON parser and the line
+ * sort stay out of the route chunk.
  */
-export function prepareView(left: string, right: string, transform: Transform): DiffView {
-  // Past the hard cap there is nothing to show, so skip parsing or sorting it.
-  if (transform === 'none' || Math.max(left.length, right.length) > MAX_DIFF_CHARS) {
-    return { left, right, size: assessSize(left, right), problems: [], notes: [] }
-  }
-
-  const problems: string[] = []
-  const notes: string[] = []
-  const side = (text: string, name: 'Left' | 'Right'): string => {
-    const r = transformCached(text, transform)
-    if (!r.ok) {
-      problems.push(`${name} side is not valid JSON: ${r.error}. Showing it as written.`)
-      return text
-    }
-    for (const note of r.notes) notes.push(`${name}: ${note}`)
-    return r.text
-  }
-
-  const shownLeft = side(left, 'Left')
-  const shownRight = side(right, 'Right')
-  return { left: shownLeft, right: shownRight, size: assessSize(shownLeft, shownRight), problems, notes }
+export function plainView(left: string, right: string): DiffView {
+  return { left, right, size: assessSize(left, right), problems: [], notes: [] }
 }
 
 export const TRANSFORM_LABELS: Record<Transform, string> = {
@@ -75,3 +39,8 @@ export const TRANSFORM_BANNERS: Record<DiffTransform, string> = {
   'sort-lines': 'Showing line-sorted view.',
   json: 'Showing key-sorted JSON view.',
 }
+
+export const TRANSFORM_BUSY: Record<DiffTransform, string> = {
+  'sort-lines': 'Sorting lines…',
+  json: 'Parsing and key-sorting JSON…',
+}

From 8de8c6ab8bafd385b8546b136b815bc022451d7d Mon Sep 17 00:00:00 2001
From: fadeltd <fadeltd@hotmail.com>
Date: Fri, 30 Oct 2026 09:30:37 +0700
Subject: [PATCH 5/6] JSON: fold gutter on formatted output, Generate types,
 shared IssueCard

Formatted output (format mode, text view, ok size tier, md and up) now renders in a read-only CodeMirror view with lang-json, line numbers and a chevron fold gutter. It is a lazily loaded component (FoldableOutput), so CodeMirror stays out of the entry and the JSON route chunk; the textarea output shows while it loads. Text changes are applied as one minimal replace transaction, so folds and scroll outside the edit survive typing. Fold all folds every object and array below the root; Unfold all uses unfoldAll. No syntax colours.

The large tier, escape/unescape, the tree view, errors, output over the 2 MB inline limit and viewports below md keep the plain textarea. Below md the Tree view, with 44px rows, is the way to fold.

Generate types hands the output (filtered, expanded and sorted as shown) to JSON to Types through handOff and navigates there, with a visible message if the write fails. NDJSON input gets the same button in its banner and sends the records as they are, since JSON to Types reads each line as a sample. Output past the inline limit is sent minified.

The private IssueCard is replaced by the shared one from components/ui. useNarrow moves out of TreeView into narrow.ts so both components share it.
---
 src/tools/json/FoldableOutput.tsx | 231 ++++++++++++++++++++++++++++++
 src/tools/json/JsonTool.tsx       | 199 +++++++++++++++++--------
 src/tools/json/TreeView.tsx       |  17 +--
 src/tools/json/narrow.ts          |  19 +++
 4 files changed, 392 insertions(+), 74 deletions(-)
 create mode 100644 src/tools/json/FoldableOutput.tsx
 create mode 100644 src/tools/json/narrow.ts

diff --git a/src/tools/json/FoldableOutput.tsx b/src/tools/json/FoldableOutput.tsx
new file mode 100644
index 0000000..5f18531
--- /dev/null
+++ b/src/tools/json/FoldableOutput.tsx
@@ -0,0 +1,231 @@
+import { useEffect, useRef } from 'react'
+import { Compartment, EditorState, type StateEffect } from '@codemirror/state'
+import { EditorView, keymap, lineNumbers } from '@codemirror/view'
+import {
+  codeFolding,
+  foldable,
+  foldEffect,
+  foldGutter,
+  foldKeymap,
+  forceParsing,
+  unfoldAll,
+} from '@codemirror/language'
+import { json } from '@codemirror/lang-json'
+import { editorTheme } from '@/lib/codemirror/theme'
+
+/**
+ * The formatted output in a read-only CodeMirror view with a fold gutter, the
+ * way an editor shows JSON. Loaded lazily by JsonTool, so CodeMirror never
+ * reaches the entry bundle or the JSON route chunk; the plain textarea stands
+ * in while this loads, and keeps the jobs this cannot do well (the large tier,
+ * touch screens, non-JSON text).
+ *
+ * Deliberately monochrome: lang-json is here for its syntax tree, which is
+ * what folding reads, not for highlighting. Colour in this app means diff or
+ * validation.
+ */
+
+export interface FoldApi {
+  /** Fold every object and array below the root, at every depth. */
+  foldAll: () => void
+  unfoldAll: () => void
+}
+
+/** The fold gutter and placeholder in the app's tokens. */
+const foldTheme = EditorView.theme(
+  {
+    '.cm-scroller': {
+      scrollbarWidth: 'thin',
+      scrollbarColor: 'var(--color-border-strong) transparent',
+    },
+    '.cm-foldGutter .cm-gutterElement': {
+      width: '18px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      color: 'var(--color-faint)',
+    },
+    '.cm-foldGutter .cm-gutterElement:hover': { color: 'var(--color-fg)' },
+    '.cm-foldMarker': { display: 'flex', padding: '0' },
+    '.cm-foldMarker-closed': { color: 'var(--color-muted)' },
+    '.cm-foldPlaceholder': {
+      backgroundColor: 'var(--color-surface-2)',
+      border: '1px solid var(--color-border-strong)',
+      borderRadius: '3px',
+      color: 'var(--color-muted)',
+      margin: '0 2px',
+      padding: '0 4px',
+      cursor: 'pointer',
+    },
+    '.cm-foldPlaceholder:hover': { color: 'var(--color-fg)' },
+  },
+  { dark: true },
+)
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+/** Lucide's chevrons, built as DOM: down when open, right when folded. */
+function marker(open: boolean): HTMLElement {
+  const span = document.createElement('span')
+  span.className = open ? 'cm-foldMarker' : 'cm-foldMarker cm-foldMarker-closed'
+  span.title = open ? 'Fold' : 'Unfold'
+  const svg = document.createElementNS(SVG_NS, 'svg')
+  for (const [k, v] of Object.entries({
+    width: '12',
+    height: '12',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '2',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+  })) {
+    svg.setAttribute(k, v)
+  }
+  const path = document.createElementNS(SVG_NS, 'path')
+  path.setAttribute('d', open ? 'm6 9 6 6 6-6' : 'm9 18 6-6-6-6')
+  svg.append(path)
+  span.append(svg)
+  return span
+}
+
+const wrapping = new Compartment()
+
+/**
+ * Fold every foldable line but the first, so the root stays open and the
+ * top level reads as a list of collapsed members; each one then opens a level
+ * at a time. CodeMirror's own `foldAll` folds only outermost ranges, which in
+ * a JSON document is the root itself: one `{…}` line.
+ *
+ * On click only. The parser normally stops past the viewport, so this is the
+ * one place the whole tree is built: ~0.8 s for 1.5 MB of formatted JSON
+ * (Node, cold), inside a budget sized for the 2 MB the view is ever given.
+ * Past the budget, only the parsed part folds.
+ */
+function foldBelowRoot(view: EditorView) {
+  forceParsing(view, view.state.doc.length, 2500)
+  const { state } = view
+  const effects: StateEffect<unknown>[] = []
+  for (let n = 2; n <= state.doc.lines; n++) {
+    const line = state.doc.line(n)
+    const range = foldable(state, line.from, line.to)
+    if (range) effects.push(foldEffect.of(range))
+  }
+  if (effects.length > 0) view.dispatch({ effects })
+}
+
+/**
+ * The smallest single replacement that turns `prev` into `next`: typing in the
+ * input changes a few lines of the output, and replacing only those keeps the
+ * scroll position and every fold outside them.
+ */
+function minimalChange(prev: string, next: string) {
+  const max = Math.min(prev.length, next.length)
+  let start = 0
+  while (start < max && prev.charCodeAt(start) === next.charCodeAt(start)) start++
+  let endPrev = prev.length
+  let endNext = next.length
+  while (
+    endPrev > start &&
+    endNext > start &&
+    prev.charCodeAt(endPrev - 1) === next.charCodeAt(endNext - 1)
+  ) {
+    endPrev--
+    endNext--
+  }
+  // Never split a surrogate pair.
+  if (start > 0 && isHighSurrogate(prev.charCodeAt(start - 1))) start--
+  if (endPrev < prev.length && isLowSurrogate(prev.charCodeAt(endPrev))) {
+    endPrev++
+    endNext++
+  }
+  return { from: start, to: endPrev, insert: next.slice(start, endNext) }
+}
+
+function isHighSurrogate(code: number) {
+  return code >= 0xd800 && code <= 0xdbff
+}
+
+function isLowSurrogate(code: number) {
+  return code >= 0xdc00 && code <= 0xdfff
+}
+
+export default function FoldableOutput({
+  value,
+  wrap,
+  onReady,
+}: {
+  value: string
+  /** Soft-wrap long lines; off when a line is long enough to make that slow. */
+  wrap: boolean
+  /** Called with the fold commands once the view exists, and null on unmount. */
+  onReady?: (api: FoldApi | null) => void
+}) {
+  const host = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  // The text the view holds, compared by reference instead of building a copy
+  // of the document with `doc.toString()` on every render.
+  const shown = useRef('')
+
+  // Latest props via a ref, so the view is created once per mount. Assigned in
+  // an effect declared first, so it runs before the ones that read it.
+  const latest = useRef({ value, wrap, onReady })
+  useEffect(() => {
+    latest.current = { value, wrap, onReady }
+  })
+
+  useEffect(() => {
+    const parent = host.current
+    if (!parent) return
+    const initial = latest.current
+    const view = new EditorView({
+      parent,
+      state: EditorState.create({
+        doc: initial.value,
+        extensions: [
+          lineNumbers(),
+          foldGutter({ markerDOM: marker }),
+          codeFolding(),
+          json(),
+          editorTheme,
+          foldTheme,
+          keymap.of(foldKeymap),
+          // Focusable and selectable, so keyboard folding, select-all and copy
+          // work; readOnly is what refuses input.
+          EditorView.editable.of(true),
+          EditorState.readOnly.of(true),
+          EditorView.contentAttributes.of({ 'aria-label': 'Formatted output' }),
+          wrapping.of(initial.wrap ? EditorView.lineWrapping : []),
+        ],
+      }),
+    })
+    viewRef.current = view
+    shown.current = initial.value
+    initial.onReady?.({
+      foldAll: () => foldBelowRoot(view),
+      unfoldAll: () => void unfoldAll(view),
+    })
+    return () => {
+      latest.current.onReady?.(null)
+      view.destroy()
+      viewRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    const view = viewRef.current
+    if (!view || value === shown.current) return
+    view.dispatch({ changes: minimalChange(shown.current, value) })
+    shown.current = value
+  }, [value])
+
+  useEffect(() => {
+    const view = viewRef.current
+    if (!view || (wrapping.get(view.state) === EditorView.lineWrapping) === wrap) return
+    view.dispatch({ effects: wrapping.reconfigure(wrap ? EditorView.lineWrapping : []) })
+  }, [wrap])
+
+  return <div ref={host} className="min-h-0 w-full flex-1 overflow-hidden" />
+}
diff --git a/src/tools/json/JsonTool.tsx b/src/tools/json/JsonTool.tsx
index 8921ac8..9f5f889 100644
--- a/src/tools/json/JsonTool.tsx
+++ b/src/tools/json/JsonTool.tsx
@@ -1,11 +1,14 @@
-import { useDeferredValue, useMemo, useState } from 'react'
+import { lazy, Suspense, useDeferredValue, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router'
 import {
   AlertTriangle,
   ArrowUp,
   Braces,
   CheckCircle2,
+  ChevronsDownUp,
+  ChevronsUpDown,
   Download,
+  FileType,
   GitCompare,
   ListFilter,
   Wand2,
@@ -17,6 +20,7 @@ import { Badge } from '@/components/ui/Badge'
 import { Button, Segmented } from '@/components/ui/Button'
 import { CodeArea } from '@/components/ui/CodeArea'
 import { CopyButton } from '@/components/ui/CopyButton'
+import { IssueCard } from '@/components/ui/IssueCard'
 import { Select, Toggle } from '@/components/ui/Select'
 import { handOff } from '@/lib/persist/handoff'
 import { useToolState } from '@/lib/persist/useToolState'
@@ -32,7 +36,6 @@ import {
   assessJsonSize,
   outputHead,
   stripJsonc,
-  type JsonIssue,
   embeddedFields,
   expandEmbedded,
   findEmbeddedJson,
@@ -57,9 +60,17 @@ import {
   type Selection,
 } from '@fadeltd/devtools-core/json'
 import { hasLongLine } from '@fadeltd/devtools-core/text'
+import type { FoldApi } from './FoldableOutput'
+import { useNarrow } from './narrow'
 import { TreeView } from './TreeView'
 
+// CodeMirror stays out of this chunk: it loads the first time formatted output
+// is shown, with the plain textarea standing in until it arrives.
+const FoldableOutput = lazy(() => import('./FoldableOutput'))
+
 type Mode = 'format' | 'minify' | 'escape' | 'unescape'
+/** What the output pane is showing. */
+type OutputKind = 'unescape-error' | 'issues' | 'tree' | 'refused' | 'text'
 type View = 'text' | 'tree'
 
 const VIEWS = [
@@ -112,45 +123,6 @@ const DOWNLOAD_NAMES: Record<Mode, string> = {
   unescape: 'unescaped.txt',
 }
 
-function IssueCard({ issue }: { issue: JsonIssue }) {
-  const gutterWidth = String(
-    issue.snippet.lines[issue.snippet.lines.length - 1]?.number ?? 1,
-  ).length
-
-  return (
-    <div className="panel p-3">
-      <div className="flex items-start gap-2">
-        <AlertTriangle size={15} className="mt-px shrink-0 text-del" aria-hidden />
-        <div className="min-w-0">
-          <div className="text-[13px] font-medium text-fg">{issue.message}</div>
-          <div className="font-mono text-[11px] text-faint">
-            line {issue.line}, column {issue.column} · offset {issue.offset}
-          </div>
-        </div>
-      </div>
-
-      <pre className="mt-2 overflow-x-auto font-mono text-[12px] leading-normal text-muted scroll-thin">
-        {issue.snippet.lines.map((l) => (
-          <span key={l.number}>
-            <span className={l.number === issue.snippet.caretLine ? 'text-fg' : undefined}>
-              {String(l.number).padStart(gutterWidth, ' ')} │ {l.text}
-            </span>
-            {'\n'}
-            {l.number === issue.snippet.caretLine && (
-              <span className="text-del">
-                {' '.repeat(gutterWidth)} │ {' '.repeat(Math.max(0, issue.snippet.caretColumn - 1))}▲
-                {'\n'}
-              </span>
-            )}
-          </span>
-        ))}
-      </pre>
-
-      {issue.hint !== null && <p className="mt-1 text-[12px] text-muted">{issue.hint}</p>}
-    </div>
-  )
-}
-
 function FilterBar({
   value,
   selection,
@@ -479,10 +451,70 @@ export default function JsonTool() {
     if (ok) void navigate('/diff')
   }
 
+  // JSON to Types reads JSON, JSONC or NDJSON of any size (in a worker), so
+  // anything this tool can show as JSON can go there. What goes is what the
+  // output shows: filtered, expanded and sorted as here.
+  const [typesHandOffFailed, setTypesHandOffFailed] = useState(false)
+
+  async function generateTypes(text: string) {
+    const ok = await handOff<{ text: string }>('json-types', { text })
+    setTypesHandOffFailed(!ok)
+    if (ok) void navigate('/json-types')
+  }
+
+  function generateTypesFromOutput() {
+    if (focused === undefined) return
+    // Past the inline limit the formatted text is too big to be useful as the
+    // target's input (its textarea holds it whole); the minified form carries
+    // the same document in a fraction of the size.
+    const text =
+      deferredMode === 'format' && outputCut !== null
+        ? minifyValue(focused.value, { sortKeys: false })
+        : output
+    void generateTypes(text)
+  }
+
   function applyToInput(next: string) {
     setState((p) => ({ ...p, text: next }))
   }
 
+  const outputKind: OutputKind =
+    unescapeError !== null
+      ? 'unescape-error'
+      : !isTextMode && !valid && analysis.issues.length > 0
+        ? 'issues'
+        : showTree && focused !== undefined
+          ? 'tree'
+          : refused
+            ? 'refused'
+            : 'text'
+  const showCut = outputKind === 'text' && outputCut !== null
+  const canGenerateTypes = !isTextMode && valid && focused !== undefined && output !== ''
+
+  // The folding editor: formatted text in the ok tier only. Large output keeps
+  // the textarea, which is faster on it; below md the textarea stays too, since
+  // a fold marker is one 18px line tall -- the Tree view, with 44px rows, is
+  // how to fold on a phone.
+  const narrow = useNarrow()
+  const foldable =
+    outputKind === 'text' &&
+    !isTextMode &&
+    deferredMode === 'format' &&
+    size.tier === 'ok' &&
+    outputCut === null &&
+    output !== '' &&
+    !narrow
+  const outputWraps = useMemo(() => !foldable || !hasLongLine(output), [foldable, output])
+  const [foldApi, setFoldApi] = useState<FoldApi | null>(null)
+
+  const textOutput = (
+    <CodeArea
+      value={outputShown}
+      readOnly
+      placeholder={selection?.ok === false ? 'Nothing at this path' : 'Output appears here'}
+    />
+  )
+
   useShortcuts([
     {
       combo: 'mod+shift+c',
@@ -635,6 +667,17 @@ export default function JsonTool() {
                   <Wand2 size={14} aria-hidden />
                   Wrap as array
                 </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => void generateTypes(state.text)}
+                  title="Open these records in JSON to Types, which reads each line as one sample. Replaces what is in JSON to Types now."
+                >
+                  <FileType size={14} aria-hidden />
+                  Generate types
+                </Button>
+                {typesHandOffFailed && (
+                  <span className="text-[12px] text-del">Could not open JSON to Types.</span>
+                )}
               </div>
             )}
 
@@ -728,11 +771,11 @@ export default function JsonTool() {
               <FilterBar value={state.filter} selection={selection} onChange={setFilter} />
             )}
 
-            {unescapeError !== null ? (
+            {outputKind === 'unescape-error' ? (
               <div className="flex-1 overflow-auto p-3 font-mono text-[13px] text-del scroll-thin">
                 {unescapeError}
               </div>
-            ) : !isTextMode && !valid && analysis.issues.length > 0 ? (
+            ) : outputKind === 'issues' ? (
               <div className="flex-1 space-y-2 overflow-y-auto p-3 scroll-thin">
                 {analysis.issues.map((issue) => (
                   <IssueCard key={`${issue.offset}:${issue.length}:${issue.code}`} issue={issue} />
@@ -744,7 +787,7 @@ export default function JsonTool() {
                   </p>
                 )}
               </div>
-            ) : showTree && focused !== undefined ? (
+            ) : outputKind === 'tree' && focused !== undefined ? (
               <TreeView
                 // A new subtree opens with its own default expansion.
                 key={toJsonPointer(focused.path)}
@@ -752,25 +795,46 @@ export default function JsonTool() {
                 basePath={focused.path}
                 onFilter={(path: PathSegment[]) => setFilter(toJqPath(path))}
               />
-            ) : refused ? (
+            ) : outputKind === 'refused' ? (
               <div className="flex-1 p-3 text-[12px] text-muted">
                 Nothing is parsed at this size. The input stays in the editor on the left,
                 untouched.
               </div>
+            ) : foldable ? (
+              <Suspense fallback={textOutput}>
+                <FoldableOutput value={output} wrap={outputWraps} onReady={setFoldApi} />
+              </Suspense>
             ) : (
-              <>
-                <CodeArea
-                  value={outputShown}
-                  readOnly
-                  placeholder={selection?.ok === false ? 'Nothing at this path' : 'Output appears here'}
-                />
-                {outputCut !== null && (
-                  <div className="flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 border-t border-border px-3 py-1.5 font-mono text-[11px] text-faint">
-                    <Badge title="The full text is not shown, to keep the page responsive">
-                      showing {formatCount(outputCut.head.length)} of{' '}
-                      {formatCount(output.length)} characters
-                    </Badge>
-                    <span className="flex-1" />
+              textOutput
+            )}
+
+            {(showCut || canGenerateTypes || foldApi !== null) && (
+              <div className="flex shrink-0 flex-wrap items-center gap-x-2 gap-y-1 border-t border-border px-3 py-1.5">
+                {showCut && outputCut !== null && (
+                  <Badge title="The full text is not shown, to keep the page responsive">
+                    showing {formatCount(outputCut.head.length)} of {formatCount(output.length)}{' '}
+                    characters
+                  </Badge>
+                )}
+                {foldApi !== null && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      onClick={foldApi.foldAll}
+                      title="Fold every object and array below the root"
+                    >
+                      <ChevronsDownUp size={14} aria-hidden />
+                      Fold all
+                    </Button>
+                    <Button variant="ghost" onClick={foldApi.unfoldAll}>
+                      <ChevronsUpDown size={14} aria-hidden />
+                      Unfold all
+                    </Button>
+                  </>
+                )}
+                <span className="flex-1" />
+                {showCut && (
+                  <>
                     <CopyButton value={output} />
                     <Button
                       onClick={() =>
@@ -787,9 +851,24 @@ export default function JsonTool() {
                       <Download size={14} aria-hidden />
                       Download
                     </Button>
-                  </div>
+                  </>
                 )}
-              </>
+                {canGenerateTypes && (
+                  <>
+                    {typesHandOffFailed && (
+                      <span className="text-[12px] text-del">Could not open JSON to Types.</span>
+                    )}
+                    <Button
+                      variant="ghost"
+                      onClick={generateTypesFromOutput}
+                      title="Open this output in JSON to Types for TypeScript, Zod or Go. Replaces what is in JSON to Types now."
+                    >
+                      <FileType size={14} aria-hidden />
+                      Generate types
+                    </Button>
+                  </>
+                )}
+              </div>
             )}
           </div>
         }
diff --git a/src/tools/json/TreeView.tsx b/src/tools/json/TreeView.tsx
index 705ea7e..051b2e5 100644
--- a/src/tools/json/TreeView.tsx
+++ b/src/tools/json/TreeView.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type KeyboardEvent } from 'react'
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { ChevronRight, ListFilter } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
@@ -18,10 +18,10 @@ import {
   toJsonPointer,
   toJqPath,
 } from '@fadeltd/devtools-core/json'
+import { useNarrow } from './narrow'
 
 // Matches the palette rows: a 44px touch target below md, the 22px code-table
 // grid from DESIGN.md above it.
-const NARROW = '(max-width: 47.99rem)'
 const ROW_NARROW = 44
 const ROW_WIDE = 22
 const INDENT = 14
@@ -34,19 +34,8 @@ const INDENT = 14
 const MAX_ROWS = 200_000
 const COUNT_LIMIT = 1_000_000
 
-function subscribeNarrow(onChange: () => void) {
-  const mq = window.matchMedia(NARROW)
-  mq.addEventListener('change', onChange)
-  return () => mq.removeEventListener('change', onChange)
-}
-
 function useRowHeight(): number {
-  const narrow = useSyncExternalStore(
-    subscribeNarrow,
-    () => window.matchMedia(NARROW).matches,
-    () => false,
-  )
-  return narrow ? ROW_NARROW : ROW_WIDE
+  return useNarrow() ? ROW_NARROW : ROW_WIDE
 }
 
 interface Expansion {
diff --git a/src/tools/json/narrow.ts b/src/tools/json/narrow.ts
new file mode 100644
index 0000000..40e5df6
--- /dev/null
+++ b/src/tools/json/narrow.ts
@@ -0,0 +1,19 @@
+import { useSyncExternalStore } from 'react'
+
+/** Below md: 44px touch targets, and the layout stacks. */
+const NARROW = '(max-width: 47.99rem)'
+
+function subscribeNarrow(onChange: () => void) {
+  const mq = window.matchMedia(NARROW)
+  mq.addEventListener('change', onChange)
+  return () => mq.removeEventListener('change', onChange)
+}
+
+/** Whether the viewport is below md, kept current as it resizes. */
+export function useNarrow(): boolean {
+  return useSyncExternalStore(
+    subscribeNarrow,
+    () => window.matchMedia(NARROW).matches,
+    () => false,
+  )
+}

From 5c1f1f7e4cfaa5319d4aa47b59b2510b2c8e1263 Mon Sep 17 00:00:00 2001
From: fadeltd <fadeltd@hotmail.com>
Date: Fri, 30 Oct 2026 09:34:56 +0700
Subject: [PATCH 6/6] Docs: changelogs for the batch-3 and B-10 follow-ups

---
 CHANGELOG.md               | 13 ++++++++++++-
 packages/core/CHANGELOG.md |  3 ++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11b7bf4..5b2dca3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,18 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and
 
 ## [Unreleased]
 
-Nothing yet.
+### Added
+- JSON Formatter: formatted output has line numbers and a fold gutter on desktop, so any object or array can be collapsed and expanded the way an editor does it, with Fold all (every level below the root) and Unfold all. Inputs over 1 MB and small screens keep the plain text view; on a phone, the Tree view folds.
+- JSON Formatter: Generate types opens the current output (filtered, expanded and sorted as shown) in JSON to Types. Valid NDJSON can be sent straight from its banner, one sample per line.
+
+### Changed
+- Diff: Sorted lines and Key-sorted JSON are built in the background, so turning them on for a large file no longer freezes the page. While a view is being built the previous one stays on screen (or a short busy message), Copy patch waits for it, and Cancel appears after 2 seconds.
+- Base64, URL Encode / Decode and String Escaper stop soft-wrapping a line longer than 100,000 characters, so a multi-MB single line stays editable instead of taking seconds per keystroke.
+- JSON Formatter and YAML / JSON / TOML show parse errors in the same card as JSON to Types; the JSON card no longer shows the character offset.
+
+### Fixed
+- Diff: a share link pasted into the address bar of a Diff tab that is already open now loads without a reload.
+- Diff: a large file with classic Mac line endings (a lone carriage return) is measured line by line instead of being refused as one long line.
 
 ## [0.13.0] — 2026-10-30
 
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index dbeac48..8ef74cf 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -6,7 +6,8 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and
 
 ## [Unreleased]
 
-Nothing yet.
+### Fixed
+- `/diff`: `longestLineOf`, and so `assessSize`, treat `\r\n`, `\n` and a lone `\r` as line breaks, matching CodeMirror's line splitting. Before, only `\n` counted, so a `\r`-only file was measured as one line and CRLF lines one character too long. Still linear.
 
 ## [0.6.0] — 2026-10-30