diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c290657c..a4fe19e9 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -63,5 +63,16 @@ jobs:
       - name: Run Playwright Smoke
         run: npm run test:e2e:smoke
 
+      - name: Run Route Width Screenshot Matrix
+        run: npm run test:e2e:route-width
+
+      - name: Upload Route Width Screenshots
+        if: always()
+        uses: actions/upload-artifact@v6
+        with:
+          name: route-width-screenshots
+          path: test-results/route-width
+          if-no-files-found: error
+
       - name: Run PWA Smoke
         run: npm run test:e2e:pwa
diff --git a/docs/quality/input-intent-taxonomy.md b/docs/quality/input-intent-taxonomy.md
new file mode 100644
index 00000000..f53ccf8e
--- /dev/null
+++ b/docs/quality/input-intent-taxonomy.md
@@ -0,0 +1,15 @@
+# Input intent taxonomy
+
+Tool input sizing uses five stable intents:
+
+| Intent | Use |
+| --- | --- |
+| `scalar` | Numbers, colors, flags, enum-like controls, and other compact values. |
+| `shortText` | URLs, names, expressions, and short free-form text. |
+| `payload` | User-authored JSON, CSV, tokens, logs, code, and multiline data. |
+| `workbench` | Dense editor or split-pane work areas. |
+| `generatedOutput` | Read-only generated text or code with copy/export actions. |
+
+`Input`, `Textarea`, Monaco wrappers, and `TextOutputPanel` emit `data-input-intent` at runtime. The create-tool scaffold declares a payload input, a workbench container, and generated output explicitly.
+
+`tests/guards/input-intent-taxonomy.test.ts` parses every TSX file under `src` to inventory shared controls plus raw `input`, `textarea`, and `select` elements. Representative routes must declare an explicit intent. Remaining hardcoded height tokens are frozen by a stable file/tag/token hash, so a new unclassified size fails CI without depending on source line numbers.
diff --git a/package-lock.json b/package-lock.json
index 6bed2294..7fc71256 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "jq-wasm": "^1.1.0-jq-1.8.1",
         "js-beautify": "^1.15.4",
         "jsbarcode": "^3.12.3",
+        "jsqr": "^1.4.0",
         "jwt-decode": "^4.0.0",
         "lorem-ipsum": "^2.0.8",
         "lucide-react": "^0.575.0",
@@ -9252,6 +9253,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==",
+      "license": "Apache-2.0"
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
diff --git a/package.json b/package.json
index fe923332..d9710c50 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   "scripts": {
     "dev": "next dev",
     "analyze": "ANALYZE=true next build --webpack",
-    "validate": "npm run check:sw-version && npm run check:sitemap-lastmod && npm run check:security-headers && npm run check:pwa-manifests && npm run check:runtime-scripts && npm run check:llms-txt && npm run check:bundle-boundaries && npm run check:performance-budget && npm run check:og-tool-images && npm run check:ia-stability && npm run check:analytics-taxonomy && npm run check:registry-manifests && npm run check:tool-index && npm run check:legacy-routes && npm run check:client-tool-lookup && npm run check:privacy-copy && npm run check:i18n && npm run check:i18n-qa && npm run check:types",
+    "validate": "npm run check:sw-version && npm run check:sitemap-lastmod && npm run check:security-headers && npm run check:pwa-manifests && npm run check:runtime-scripts && npm run check:llms-txt && npm run check:bundle-boundaries && npm run check:performance-budget && npm run check:og-tool-images && npm run check:ia-stability && npm run check:route-width-inventory && npm run check:analytics-taxonomy && npm run check:registry-manifests && npm run check:tool-index && npm run check:legacy-routes && npm run check:client-tool-lookup && npm run check:privacy-copy && npm run check:i18n && npm run check:i18n-qa && npm run check:types",
     "build:app": "next build",
     "build:post": "npm run check:canonical && npm run check:hreflang && npm run check:legacy-routes && npm run check:metadata-localization && npm run check:jsonld-structured-data && npm run check:performance-budget:report && npm run check:rendered-i18n-copy && npm run check:related-tools && npm run check:content-template:legacy-paths && npm run check:content-template && npm run check:content-template:quality && npm run check:content-template:uniqueness && npm run check:faq-schema && npm run check:content-template:zh-cn && npm run check:content-template:quality:zh-cn && npm run check:faq-schema:zh-cn && npm run check:content-template:zh-tw && npm run check:content-template:quality:zh-tw && npm run check:faq-schema:zh-tw && npm run check:content-template:ja && npm run check:content-template:quality:ja && npm run check:faq-schema:ja && npm run check:content-template:ko && npm run check:content-template:quality:ko && npm run check:faq-schema:ko && npm run check:content-template:de && npm run check:content-template:quality:de && npm run check:faq-schema:de && npm run check:content-template:fr && npm run check:content-template:quality:fr && npm run check:faq-schema:fr && npm run postprocess:export-html-lang && npm run check:export-html-lang && npm run postprocess:export-robots-meta && npm run check:export-robots-meta && npm run check:sitemap-export && npm run build:sw",
     "build": "npm run validate && npm run build:app && npm run build:post",
@@ -60,6 +60,8 @@
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:e2e:smoke": "node scripts/e2e/run-playwright-smoke.js",
+    "test:e2e:first-load": "node scripts/e2e/run-playwright-smoke.js --first-load-only --first-load-artifacts",
+    "test:e2e:route-width": "node scripts/e2e/run-route-width-matrix.js",
     "test:e2e:pwa": "node scripts/e2e/run-playwright-smoke.js --pwa",
     "check:i18n": "node scripts/gates/check-i18n.js",
     "check:i18n-qa": "node scripts/gates/check-i18n-qa.js",
@@ -79,6 +81,8 @@
     "check:sitemap-lastmod": "node scripts/gates/check-sitemap-lastmod.js",
     "generate:ia-baseline": "node scripts/generators/generate-ia-baseline.js",
     "check:ia-stability": "node scripts/gates/check-ia-stability.js",
+    "generate:route-width-inventory": "node scripts/generators/generate-route-width-inventory.js",
+    "check:route-width-inventory": "node scripts/generators/generate-route-width-inventory.js --check",
     "check:analytics-taxonomy": "node scripts/gates/check-analytics-taxonomy.js",
     "check:privacy-copy": "node scripts/gates/check-privacy-copy.js",
     "check:security-headers": "node scripts/gates/check-security-headers-config.js",
@@ -147,6 +151,7 @@
     "jq-wasm": "^1.1.0-jq-1.8.1",
     "js-beautify": "^1.15.4",
     "jsbarcode": "^3.12.3",
+    "jsqr": "^1.4.0",
     "jwt-decode": "^4.0.0",
     "lorem-ipsum": "^2.0.8",
     "lucide-react": "^0.575.0",
diff --git a/public/_redirects b/public/_redirects
index 127da197..1f7c6eef 100644
--- a/public/_redirects
+++ b/public/_redirects
@@ -1,5 +1,142 @@
 /security.txt /.well-known/security.txt 301
 /en / 301
+/json-formatter /en/json-formatter 301
+/xml-formatter /en/xml-formatter 301
+/sql-formatter /en/sql-formatter 301
+/javascript-formatter /en/javascript-formatter 301
+/javascript-minifier /en/javascript-minifier 301
+/html-minifier /en/html-minifier 301
+/html-encoder-decoder /en/html-encoder-decoder 301
+/html-css-beautifier /en/html-css-beautifier 301
+/html-formatter /en/html-formatter 301
+/yaml-json-converter /en/yaml-json-converter 301
+/markdown-preview /en/markdown-preview 301
+/html-to-markdown /en/html-to-markdown 301
+/json-to-typescript /en/json-to-typescript 301
+/css-minifier /en/css-minifier 301
+/svg-optimizer /en/svg-optimizer 301
+/jsonpath-playground /en/jsonpath-playground 301
+/openapi-viewer /en/openapi-viewer 301
+/json-diff-viewer /en/json-diff-viewer 301
+/csv-json-converter /en/csv-json-converter 301
+/base64-encode-decode /en/base64-encode-decode 301
+/base-encoding-converter /en/base-encoding-converter 301
+/url-encode-decode /en/url-encode-decode 301
+/jwt-decoder /en/jwt-decoder 301
+/jwt-workbench /en/jwt-workbench 301
+/hash-generator /en/hash-generator 301
+/md5-generator /en/md5-generator 301
+/text-diff-checker /en/text-diff-checker 301
+/multiple-whitespace-remover /en/multiple-whitespace-remover 301
+/letter-counter /en/letter-counter 301
+/bionic-reading-converter /en/bionic-reading-converter 301
+/google-fonts-pair-finder /en/google-fonts-pair-finder 301
+/text-to-handwriting-converter /en/text-to-handwriting-converter 301
+/code-to-image-converter /en/code-to-image-converter 301
+/image-base64 /en/image-base64 301
+/unix-timestamp /en/unix-timestamp 301
+/uuid-generator /en/uuid-generator 301
+/lorem-ipsum /en/lorem-ipsum 301
+/password-generator /en/password-generator 301
+/color-converter /en/color-converter 301
+/react-native-shadow-generator /en/react-native-shadow-generator 301
+/ai-color-palette-generator /en/ai-color-palette-generator 301
+/color-mixer /en/color-mixer 301
+/color-shades-generator /en/color-shades-generator 301
+/image-average-color-finder /en/image-average-color-finder 301
+/image-caption-generator /en/image-caption-generator 301
+/image-color-extractor /en/image-color-extractor 301
+/image-color-picker /en/image-color-picker 301
+/image-cropper /en/image-cropper 301
+/image-filters /en/image-filters 301
+/instagram-filters /en/instagram-filters 301
+/instagram-post-generator /en/instagram-post-generator 301
+/instagram-story-generator /en/instagram-story-generator 301
+/open-graph-meta-generator /en/open-graph-meta-generator 301
+/tweet-generator /en/tweet-generator 301
+/tweet-to-image-converter /en/tweet-to-image-converter 301
+/twitter-ad-revenue-generator /en/twitter-ad-revenue-generator 301
+/instagram-photo-downloader /en/instagram-photo-downloader 301
+/vimeo-thumbnail-grabber /en/vimeo-thumbnail-grabber 301
+/youtube-thumbnail-grabber /en/youtube-thumbnail-grabber 301
+/image-resizer /en/image-resizer 301
+/photo-censor /en/photo-censor 301
+/scanned-pdf-converter /en/scanned-pdf-converter 301
+/svg-blob-generator /en/svg-blob-generator 301
+/svg-pattern-generator /en/svg-pattern-generator 301
+/svg-stroke-to-fill-converter /en/svg-stroke-to-fill-converter 301
+/svg-to-png-converter /en/svg-to-png-converter 301
+/css-background-pattern-generator /en/css-background-pattern-generator 301
+/css-border-radius-generator /en/css-border-radius-generator 301
+/css-box-shadow-generator /en/css-box-shadow-generator 301
+/css-checkbox-generator /en/css-checkbox-generator 301
+/css-clip-path-generator /en/css-clip-path-generator 301
+/css-cubic-bezier-generator /en/css-cubic-bezier-generator 301
+/css-glassmorphism-generator /en/css-glassmorphism-generator 301
+/css-gradient-generator /en/css-gradient-generator 301
+/css-loader-generator /en/css-loader-generator 301
+/css-switch-generator /en/css-switch-generator 301
+/css-text-glitch-effect-generator /en/css-text-glitch-effect-generator 301
+/css-triangle-generator /en/css-triangle-generator 301
+/qr-code-generator /en/qr-code-generator 301
+/barcode-generator /en/barcode-generator 301
+/fake-iban-generator /en/fake-iban-generator 301
+/list-randomizer /en/list-randomizer 301
+/ascii-art-generator /en/ascii-art-generator 301
+/env-parser /en/env-parser 301
+/id-generator /en/id-generator 301
+/regex-tester /en/regex-tester 301
+/regex-generator /en/regex-generator 301
+/crontab-generator /en/crontab-generator 301
+/user-agent-parser /en/user-agent-parser 301
+/cron-visualizer /en/cron-visualizer 301
+/http-status-codes /en/http-status-codes 301
+/chmod-calculator /en/chmod-calculator 301
+/cidr-subnet-calculator /en/cidr-subnet-calculator 301
+/url-parser /en/url-parser 301
+/certificate-decoder /en/certificate-decoder 301
+/http-request-builder /en/http-request-builder 301
+/curl-to-code /en/curl-to-code 301
+/ndjson-formatter /en/ndjson-formatter 301
+/jwt-verifier /en/jwt-verifier 301
+/slugify-case-converter /en/slugify-case-converter 301
+/invisible-characters-detector /en/invisible-characters-detector 301
+/robots-txt-tester /en/robots-txt-tester 301
+/csp-parser /en/csp-parser 301
+/csv-diff /en/csv-diff 301
+/header-diff /en/header-diff 301
+/security-header-analyzer /en/security-header-analyzer 301
+/totp-generator /en/totp-generator 301
+/openapi-mock /en/openapi-mock 301
+/docker-run-to-compose /en/docker-run-to-compose 301
+/local-log-parser /en/local-log-parser 301
+/jq-playground /en/jq-playground 301
+/log-scrubber /en/log-scrubber 301
+/gzip-brotli-lab /en/gzip-brotli-lab 301
+/yaml-merge-patch-explorer /en/yaml-merge-patch-explorer 301
+/yq-playground /en/yq-playground 301
+/structured-data-visualizer /en/structured-data-visualizer 301
+/har-viewer-sanitizer /en/har-viewer-sanitizer 301
+/pipeline-builder /en/pipeline-builder 301
+/saml-decoder /en/saml-decoder 301
+/asn1-der-inspector /en/asn1-der-inspector 301
+/hex-bytes-workbench /en/hex-bytes-workbench 301
+/unicode-inspector /en/unicode-inspector 301
+/public-key-jwk-helper /en/public-key-jwk-helper 301
+/json-schema-workbench /en/json-schema-workbench 301
+/openapi-diff /en/openapi-diff 301
+/graphql-workbench /en/graphql-workbench 301
+/messagepack-inspector /en/messagepack-inspector 301
+/seo-metadata-workbench /en/seo-metadata-workbench 301
+/devops-yaml-validator /en/devops-yaml-validator 301
+/oauth-jwks-workbench /en/oauth-jwks-workbench 301
+/image-privacy-workbench /en/image-privacy-workbench 301
+/cron-expression-generator /en/crontab-generator 301
+/tls-chain-inspector /en/certificate-decoder 301
+/csv-to-json /en/csv-json-converter 301
+/web-api /en/web-api-network 301
+/design-media /en/images-svg-css 301
+/convert-encode /en/all-tools 301
 /en/cron-expression-generator /en/crontab-generator 301
 /zh-CN/cron-expression-generator /zh-CN/crontab-generator 301
 /zh-TW/cron-expression-generator /zh-TW/crontab-generator 301
@@ -14,6 +151,13 @@
 /ko/tls-chain-inspector /ko/certificate-decoder 301
 /de/tls-chain-inspector /de/certificate-decoder 301
 /fr/tls-chain-inspector /fr/certificate-decoder 301
+/en/csv-to-json /en/csv-json-converter 301
+/zh-CN/csv-to-json /zh-CN/csv-json-converter 301
+/zh-TW/csv-to-json /zh-TW/csv-json-converter 301
+/ja/csv-to-json /ja/csv-json-converter 301
+/ko/csv-to-json /ko/csv-json-converter 301
+/de/csv-to-json /de/csv-json-converter 301
+/fr/csv-to-json /fr/csv-json-converter 301
 /en/web-api /en/web-api-network 301
 /zh-CN/web-api /zh-CN/web-api-network 301
 /zh-TW/web-api /zh-TW/web-api-network 301
diff --git a/public/runtime/theme-manifest-bootstrap.js b/public/runtime/theme-manifest-bootstrap.js
index 9b2410c8..c9a19e82 100644
--- a/public/runtime/theme-manifest-bootstrap.js
+++ b/public/runtime/theme-manifest-bootstrap.js
@@ -6,14 +6,25 @@
     var activeLang = locales.indexOf(seg) >= 0 ? seg : "en";
     document.documentElement.setAttribute("lang", activeLang);
 
-    var t = localStorage.getItem("theme");
+    var t = null;
+    try {
+      t = localStorage.getItem("theme");
+    } catch {}
+    if (t !== "light" && t !== "dark" && t !== "system") t = null;
     if (!t) {
-      var m = document.cookie.match(/(?:^|;\s*)theme=([^;]*)/);
-      t = m ? m[1] : null;
+      try {
+        var m = document.cookie.match(/(?:^|;\s*)theme=([^;]*)/);
+        t = m ? m[1] : null;
+      } catch {}
     }
+    if (t !== "light" && t !== "dark" && t !== "system") t = null;
     if (!t) t = "dark";
     if (t === "system") {
-      t = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      try {
+        t = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      } catch {
+        t = "dark";
+      }
     }
     document.documentElement.classList.remove("light", "dark");
     document.documentElement.classList.add(t);
diff --git a/scripts/e2e/run-playwright-smoke.js b/scripts/e2e/run-playwright-smoke.js
index e263dc71..bb0d939f 100644
--- a/scripts/e2e/run-playwright-smoke.js
+++ b/scripts/e2e/run-playwright-smoke.js
@@ -1,6 +1,6 @@
 import { createServer } from "node:http";
 import { existsSync, readFileSync } from "node:fs";
-import { readFile } from "node:fs/promises";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
 import process from "node:process";
 import axe from "axe-core";
@@ -47,9 +47,103 @@ const AXE_REVIEW_ROUTES = [
     "/en/trust-center",
     "/en/install-app",
 ];
+const INPUT_INTENT_AUDIT_ROUTES = [
+    { route: "/en/qr-code-generator", requiredIntents: ["shortText", "scalar"] },
+    { route: "/en/base64-encode-decode", requiredIntents: ["payload", "generatedOutput"] },
+    { route: "/en/regex-tester", requiredIntents: ["scalar", "shortText", "payload"] },
+    { route: "/en/json-formatter", requiredIntents: ["workbench", "payload"] },
+    { route: "/en/csv-json-converter", requiredIntents: ["workbench", "payload", "generatedOutput"] },
+    { route: "/en/jwt-decoder", requiredIntents: ["workbench", "payload", "generatedOutput"] },
+    { route: "/en/pipeline-builder", requiredIntents: ["workbench", "shortText", "payload", "generatedOutput"] },
+];
+const INPUT_INTENT_AUDIT_VIEWPORTS = [
+    { width: 390, height: 844, mobile: true },
+    { width: 1280, height: 900, mobile: false },
+];
 const ALL_TOOLS_FILTER_INTERACTION_BUDGET_MS = 2000;
 const ALL_TOOLS_MOBILE_SCROLL_BUDGET_MS = 3500;
 const ALL_TOOLS_MOBILE_MAX_FRAME_DELTA_MS = 500;
+const FIRST_LOAD_CLS_BUDGET = 0.1;
+const FIRST_LOAD_SETTLE_MS = 2_600;
+const FIRST_LOAD_ARTIFACT_DIR = path.resolve(process.cwd(), "output/first-load-audit");
+const FIRST_LOAD_AUDIT_CASES = [
+    {
+        id: "root-preferred-locale",
+        route: "/",
+        expectedPathname: "/",
+        expectedLang: "en",
+        theme: "dark",
+        colorScheme: "dark",
+        preferredLocale: "zh-CN",
+    },
+    {
+        id: "qr-light",
+        route: "/en/qr-code-generator",
+        expectedPathname: "/en/qr-code-generator",
+        expectedLang: "en",
+        theme: "light",
+        colorScheme: "dark",
+        warmReload: true,
+    },
+    {
+        id: "json-dark",
+        route: "/en/json-formatter",
+        expectedPathname: "/en/json-formatter",
+        expectedLang: "en",
+        theme: "dark",
+        colorScheme: "light",
+    },
+    {
+        id: "all-tools-system",
+        route: "/en/all-tools",
+        expectedPathname: "/en/all-tools",
+        expectedLang: "en",
+        theme: "system",
+        colorScheme: "light",
+    },
+    {
+        id: "all-tools-personalized",
+        route: "/en/all-tools",
+        expectedPathname: "/en/all-tools",
+        expectedLang: "en",
+        theme: "dark",
+        colorScheme: "dark",
+        storage: {
+            "byteflow:tools:favorites": JSON.stringify([
+                { toolKey: "json_formatter", updatedAt: "2026-07-01T00:00:00.000Z" },
+                { toolKey: "base64_encode_decode", updatedAt: "2026-07-01T00:00:00.000Z" },
+                { toolKey: "uuid_generator", updatedAt: "2026-07-01T00:00:00.000Z" },
+            ]),
+            "byteflow:tools:recent": JSON.stringify([
+                { toolKey: "qr_code_generator", updatedAt: "2026-07-01T00:00:00.000Z" },
+                { toolKey: "json_formatter", updatedAt: "2026-07-01T00:00:00.000Z" },
+            ]),
+        },
+    },
+    {
+        id: "qr-zh-cn-system",
+        route: "/zh-CN/qr-code-generator",
+        expectedPathname: "/zh-CN/qr-code-generator",
+        expectedLang: "zh-CN",
+        theme: "system",
+        colorScheme: "dark",
+        warmReload: true,
+    },
+];
+const FIRST_LOAD_AUDIT_PROFILES = [
+    {
+        id: "mobile-390x844",
+        viewport: { width: 390, height: 844 },
+        isMobile: true,
+        caseIds: FIRST_LOAD_AUDIT_CASES.map((testCase) => testCase.id),
+    },
+    {
+        id: "desktop-1280x800",
+        viewport: { width: 1280, height: 800 },
+        isMobile: false,
+        caseIds: ["root-preferred-locale", "all-tools-system", "qr-zh-cn-system"],
+    },
+];
 const GENERATED_TOOL_INDEX_PATH = path.resolve(process.cwd(), "src/generated/tool-index.json");
 
 function getExpectedToolCount() {
@@ -111,6 +205,9 @@ function parseArgs(argv) {
         baseUrl: "",
         skipServer: false,
         includePwa: false,
+        firstLoadOnly: false,
+        writeFirstLoadArtifacts: false,
+        inputIntentsOnly: false,
     };
 
     for (const arg of argv) {
@@ -124,6 +221,21 @@ function parseArgs(argv) {
             continue;
         }
 
+        if (arg === "--first-load-only") {
+            args.firstLoadOnly = true;
+            continue;
+        }
+
+        if (arg === "--first-load-artifacts") {
+            args.writeFirstLoadArtifacts = true;
+            continue;
+        }
+
+        if (arg === "--input-intents-only") {
+            args.inputIntentsOnly = true;
+            continue;
+        }
+
         if (arg.startsWith("--port=")) {
             const parsed = Number(arg.slice("--port=".length));
             if (Number.isFinite(parsed) && parsed > 0) {
@@ -226,6 +338,363 @@ async function assertRouteRenders(context, baseUrl, route) {
     await page.close();
 }
 
+function expectedResolvedTheme(testCase) {
+    return testCase.theme === "system" ? testCase.colorScheme : testCase.theme;
+}
+
+async function installFirstLoadInstrumentation(context, testCase) {
+    await context.addInitScript(({ preferredLocale, storage, theme }) => {
+        try {
+            localStorage.setItem("theme", theme);
+            if (preferredLocale) {
+                localStorage.setItem("byteflow:preferred-locale", preferredLocale);
+            }
+            for (const [key, value] of Object.entries(storage || {})) {
+                localStorage.setItem(key, value);
+            }
+        } catch {
+            // The audit still validates the default path when storage is unavailable.
+        }
+
+        const audit = {
+            layoutShiftSupported: false,
+            shifts: [],
+            themeChanges: [],
+        };
+        window.__byteflowFirstLoadAudit = audit;
+
+        const readTheme = () => ({
+            className: document.documentElement?.className || "",
+            colorScheme: document.documentElement?.style.colorScheme || "",
+        });
+        const recordTheme = () => audit.themeChanges.push({
+            startTime: performance.now(),
+            ...readTheme(),
+        });
+        const observeThemeRoot = () => {
+            if (!document.documentElement) return false;
+            recordTheme();
+            new MutationObserver(recordTheme).observe(document.documentElement, {
+                attributeFilter: ["class", "style"],
+                attributes: true,
+            });
+            return true;
+        };
+        if (!observeThemeRoot()) {
+            const rootObserver = new MutationObserver(() => {
+                if (observeThemeRoot()) rootObserver.disconnect();
+            });
+            rootObserver.observe(document, { childList: true, subtree: true });
+        }
+
+        const supportedEntryTypes = PerformanceObserver.supportedEntryTypes || [];
+        audit.layoutShiftSupported = supportedEntryTypes.includes("layout-shift");
+        if (!audit.layoutShiftSupported) return;
+
+        const copyRect = (rect) => ({
+            height: rect.height,
+            width: rect.width,
+            x: rect.x,
+            y: rect.y,
+        });
+        const describeNode = (node) => {
+            if (!(node instanceof Element)) return "unknown";
+            if (node.id) return `#${node.id}`;
+            for (const attribute of [
+                "data-all-tools-personalization",
+                "data-all-tools-card",
+                "data-navbar-controls-footprint",
+                "data-navbar-language-footprint",
+                "data-navbar-theme-footprint",
+                "data-tool-global-actions",
+            ]) {
+                if (node.hasAttribute(attribute)) return `[${attribute}]`;
+            }
+            const classes = Array.from(node.classList).slice(0, 3).join(".");
+            return `${node.tagName.toLowerCase()}${classes ? `.${classes}` : ""}`;
+        };
+
+        const observer = new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+                if (entry.hadRecentInput) continue;
+                audit.shifts.push({
+                    startTime: entry.startTime,
+                    value: entry.value,
+                    sources: (entry.sources || []).map((source) => ({
+                        currentRect: copyRect(source.currentRect),
+                        node: describeNode(source.node),
+                        previousRect: copyRect(source.previousRect),
+                    })),
+                });
+            }
+        });
+        observer.observe({ type: "layout-shift", buffered: true });
+    }, {
+        preferredLocale: testCase.preferredLocale || "",
+        storage: testCase.storage || {},
+        theme: testCase.theme,
+    });
+}
+
+function calculateSessionWindowCls(entries) {
+    let currentScore = 0;
+    let currentWindowStart = 0;
+    let lastEntryTime = 0;
+    let maxScore = 0;
+
+    for (const entry of [...entries].sort((left, right) => left.startTime - right.startTime)) {
+        const startsNewWindow = currentScore === 0
+            || entry.startTime - lastEntryTime > 1_000
+            || entry.startTime - currentWindowStart > 5_000;
+        if (startsNewWindow) {
+            currentScore = entry.value;
+            currentWindowStart = entry.startTime;
+        } else {
+            currentScore += entry.value;
+        }
+        lastEntryTime = entry.startTime;
+        maxScore = Math.max(maxScore, currentScore);
+    }
+
+    return maxScore;
+}
+
+async function capturePreHydrationState(browser, baseUrl, profile, testCase) {
+    const context = await browser.newContext({
+        colorScheme: testCase.colorScheme,
+        isMobile: profile.isMobile,
+        serviceWorkers: "block",
+        viewport: profile.viewport,
+    });
+    await installFirstLoadInstrumentation(context, testCase);
+    const page = await context.newPage();
+
+    try {
+        await page.route("**/*", async (route) => {
+            const request = route.request();
+            const pathname = new URL(request.url()).pathname;
+            if (request.resourceType() === "script" && pathname.startsWith("/_next/")) {
+                await route.abort();
+                return;
+            }
+            await route.continue();
+        });
+
+        const response = await page.goto(`${baseUrl}${testCase.route}`, { waitUntil: "domcontentloaded" });
+        if (!response || !response.ok()) {
+            throw new Error(`Pre-hydration route ${testCase.route} failed with ${response?.status() || "no response"}.`);
+        }
+        await page.waitForSelector("main", { timeout: 30_000 });
+        await page.evaluate(() => document.fonts?.ready);
+        await page.waitForTimeout(100);
+
+        return {
+            heading: (await page.locator("h1").first().textContent())?.replace(/\s+/g, " ").trim() || "",
+            screenshot: await page.screenshot({ animations: "disabled", fullPage: false }),
+            theme: await page.evaluate(() => ({
+                className: document.documentElement.className,
+                colorScheme: document.documentElement.style.colorScheme,
+            })),
+        };
+    } finally {
+        await context.close();
+    }
+}
+
+async function captureHydratedState(browser, baseUrl, profile, testCase) {
+    const context = await browser.newContext({
+        colorScheme: testCase.colorScheme,
+        isMobile: profile.isMobile,
+        serviceWorkers: "block",
+        viewport: profile.viewport,
+    });
+    await installFirstLoadInstrumentation(context, testCase);
+    const page = await context.newPage();
+    const runtime = createRuntimeObserver(page, `First-load audit ${profile.id}/${testCase.id}`, baseUrl);
+
+    try {
+        const cdp = await context.newCDPSession(page);
+        await cdp.send("Network.enable");
+        await cdp.send("Network.setCacheDisabled", { cacheDisabled: true });
+        await cdp.send("Network.emulateNetworkConditions", {
+            connectionType: "cellular4g",
+            downloadThroughput: (1.6 * 1024 * 1024) / 8,
+            latency: 100,
+            offline: false,
+            uploadThroughput: (750 * 1024) / 8,
+        });
+        await cdp.send("Emulation.setCPUThrottlingRate", { rate: 4 });
+
+        const response = await page.goto(`${baseUrl}${testCase.route}`, { waitUntil: "domcontentloaded", timeout: 60_000 });
+        if (!response || !response.ok()) {
+            throw new Error(`Hydrated route ${testCase.route} failed with ${response?.status() || "no response"}.`);
+        }
+        await page.waitForSelector("main", { timeout: 30_000 });
+        await page.waitForTimeout(FIRST_LOAD_SETTLE_MS);
+        await page.evaluate(() => document.fonts?.ready);
+
+        const metrics = await page.evaluate(() => ({
+            audit: window.__byteflowFirstLoadAudit,
+            firstContentfulPaint: performance.getEntriesByName("first-contentful-paint")[0]?.startTime ?? null,
+            heading: document.querySelector("h1")?.textContent?.replace(/\s+/g, " ").trim() || "",
+            lang: document.documentElement.lang,
+            pathname: window.location.pathname,
+            theme: {
+                className: document.documentElement.className,
+                colorScheme: document.documentElement.style.colorScheme,
+            },
+        }));
+        const screenshot = await page.screenshot({ animations: "disabled", fullPage: false });
+        runtime.assertClean();
+        return { metrics, screenshot };
+    } finally {
+        await context.close();
+    }
+}
+
+async function captureWarmReloadState(browser, baseUrl, profile, testCase) {
+    const context = await browser.newContext({
+        colorScheme: testCase.colorScheme,
+        isMobile: profile.isMobile,
+        serviceWorkers: "block",
+        viewport: profile.viewport,
+    });
+    await installFirstLoadInstrumentation(context, testCase);
+    const page = await context.newPage();
+    const runtime = createRuntimeObserver(page, `Warm reload audit ${profile.id}/${testCase.id}`, baseUrl);
+
+    try {
+        const initialResponse = await page.goto(`${baseUrl}${testCase.route}`, { waitUntil: "domcontentloaded", timeout: 60_000 });
+        if (!initialResponse || !initialResponse.ok()) {
+            throw new Error(`Warm reload seed ${testCase.route} failed with ${initialResponse?.status() || "no response"}.`);
+        }
+        await page.waitForSelector("main", { timeout: 30_000 });
+        await page.waitForTimeout(200);
+
+        const cdp = await context.newCDPSession(page);
+        await cdp.send("Emulation.setCPUThrottlingRate", { rate: 4 });
+
+        const response = await page.reload({ waitUntil: "domcontentloaded", timeout: 60_000 });
+        if (!response || !response.ok()) {
+            throw new Error(`Warm reload ${testCase.route} failed with ${response?.status() || "no response"}.`);
+        }
+        await page.waitForSelector("main", { timeout: 30_000 });
+        await page.waitForTimeout(FIRST_LOAD_SETTLE_MS);
+        await page.evaluate(() => document.fonts?.ready);
+
+        const metrics = await page.evaluate(() => ({
+            audit: window.__byteflowFirstLoadAudit,
+            firstContentfulPaint: performance.getEntriesByName("first-contentful-paint")[0]?.startTime ?? null,
+            heading: document.querySelector("h1")?.textContent?.replace(/\s+/g, " ").trim() || "",
+            lang: document.documentElement.lang,
+            pathname: window.location.pathname,
+            theme: {
+                className: document.documentElement.className,
+                colorScheme: document.documentElement.style.colorScheme,
+            },
+        }));
+        const screenshot = await page.screenshot({ animations: "disabled", fullPage: false });
+        runtime.assertClean();
+        return { metrics, screenshot };
+    } finally {
+        await context.close();
+    }
+}
+
+function assertFirstLoadResult(profile, testCase, before, after) {
+    const expectedTheme = expectedResolvedTheme(testCase);
+    const shifts = after.metrics.audit?.shifts || [];
+    const cls = calculateSessionWindowCls(shifts);
+    const label = `${profile.id}/${testCase.id}`;
+    const themeAtFirstContentfulPaint = [...(after.metrics.audit?.themeChanges || [])]
+        .reverse()
+        .find((entry) => entry.startTime <= after.metrics.firstContentfulPaint);
+
+    if (!after.metrics.audit?.layoutShiftSupported) {
+        throw new Error(`${label} did not expose Chromium layout-shift entries.`);
+    }
+    if (cls >= FIRST_LOAD_CLS_BUDGET) {
+        throw new Error(`${label} CLS ${cls.toFixed(4)} exceeded the ${FIRST_LOAD_CLS_BUDGET} budget. Sources: ${JSON.stringify(shifts)}`);
+    }
+    if (
+        after.metrics.firstContentfulPaint === null
+        || !themeAtFirstContentfulPaint?.className.split(/\s+/).includes(expectedTheme)
+        || themeAtFirstContentfulPaint.colorScheme !== expectedTheme
+    ) {
+        throw new Error(`${label} first contentful paint used ${JSON.stringify(themeAtFirstContentfulPaint)} instead of ${expectedTheme}.`);
+    }
+    if (!after.metrics.theme.className.split(/\s+/).includes(expectedTheme) || after.metrics.theme.colorScheme !== expectedTheme) {
+        throw new Error(`${label} settled theme used ${JSON.stringify(after.metrics.theme)} instead of ${expectedTheme}.`);
+    }
+    if (!before.theme.className.split(/\s+/).includes(expectedTheme) || before.theme.colorScheme !== expectedTheme) {
+        throw new Error(`${label} pre-hydration theme used ${JSON.stringify(before.theme)} instead of ${expectedTheme}.`);
+    }
+    if (after.metrics.pathname !== testCase.expectedPathname || after.metrics.lang !== testCase.expectedLang) {
+        throw new Error(`${label} settled at ${after.metrics.pathname} (${after.metrics.lang}), expected ${testCase.expectedPathname} (${testCase.expectedLang}).`);
+    }
+    if (!before.heading || before.heading !== after.metrics.heading) {
+        throw new Error(`${label} changed its first heading across hydration: ${JSON.stringify(before.heading)} -> ${JSON.stringify(after.metrics.heading)}.`);
+    }
+    if (before.screenshot.length < 2_000 || after.screenshot.length < 2_000) {
+        throw new Error(`${label} produced an unexpectedly empty first-load screenshot.`);
+    }
+
+    return {
+        cls,
+        heading: after.metrics.heading,
+        lang: after.metrics.lang,
+        pathname: after.metrics.pathname,
+        shifts,
+        theme: after.metrics.theme,
+        themeAtFirstContentfulPaint,
+    };
+}
+
+async function writeFirstLoadCaseArtifacts(profile, testCase, before, after, warmAfter) {
+    await mkdir(FIRST_LOAD_ARTIFACT_DIR, { recursive: true });
+    const prefix = `${profile.id}-${testCase.id}`;
+    await Promise.all([
+        writeFile(path.join(FIRST_LOAD_ARTIFACT_DIR, `${prefix}-before-hydration.png`), before.screenshot),
+        writeFile(path.join(FIRST_LOAD_ARTIFACT_DIR, `${prefix}-after-hydration.png`), after.screenshot),
+        ...(warmAfter ? [writeFile(path.join(FIRST_LOAD_ARTIFACT_DIR, `${prefix}-warm-reload.png`), warmAfter.screenshot)] : []),
+    ]);
+}
+
+async function assertFirstLoadStabilityMatrix(browser, baseUrl, { writeArtifacts = false } = {}) {
+    const reports = [];
+    for (const profile of FIRST_LOAD_AUDIT_PROFILES) {
+        for (const caseId of profile.caseIds) {
+            const testCase = FIRST_LOAD_AUDIT_CASES.find((candidate) => candidate.id === caseId);
+            if (!testCase) throw new Error(`Unknown first-load audit case: ${caseId}`);
+
+            const before = await capturePreHydrationState(browser, baseUrl, profile, testCase);
+            const after = await captureHydratedState(browser, baseUrl, profile, testCase);
+            const report = assertFirstLoadResult(profile, testCase, before, after);
+            reports.push({ caseId, profileId: profile.id, ...report });
+            let warmAfter = null;
+            if (testCase.warmReload) {
+                const warmReloadCase = { ...testCase, id: `${testCase.id}-warm-reload` };
+                warmAfter = await captureWarmReloadState(browser, baseUrl, profile, testCase);
+                const warmReport = assertFirstLoadResult(profile, warmReloadCase, before, warmAfter);
+                reports.push({ caseId: warmReloadCase.id, profileId: profile.id, ...warmReport });
+                console.log(`[playwright-smoke] PASS warm reload: ${profile.id}/${testCase.id} CLS=${warmReport.cls.toFixed(4)}`);
+            }
+            if (writeArtifacts) {
+                await writeFirstLoadCaseArtifacts(profile, testCase, before, after, warmAfter);
+            }
+            console.log(`[playwright-smoke] PASS first load: ${profile.id}/${caseId} CLS=${report.cls.toFixed(4)}`);
+        }
+    }
+
+    if (writeArtifacts) {
+        await writeFile(
+            path.join(FIRST_LOAD_ARTIFACT_DIR, "report.json"),
+            `${JSON.stringify(reports, null, 2)}\n`,
+            "utf8",
+        );
+    }
+}
+
 async function assertHomeNavigation(context, baseUrl, locale) {
     const page = await context.newPage();
     const runtime = createRuntimeObserver(page, `Navigation smoke for ${locale}`, baseUrl);
@@ -689,6 +1158,93 @@ async function assertMobileReviewMatrix(browser, baseUrl) {
     }
 }
 
+async function assertInputIntentSizingMatrix(browser, baseUrl) {
+    for (const viewport of INPUT_INTENT_AUDIT_VIEWPORTS) {
+        const context = await browser.newContext({
+            serviceWorkers: "block",
+            viewport: { width: viewport.width, height: viewport.height },
+            isMobile: viewport.mobile,
+        });
+
+        try {
+            for (const audit of INPUT_INTENT_AUDIT_ROUTES) {
+                const page = await context.newPage();
+                const routeLabel = `${audit.route} input intent ${viewport.width}x${viewport.height}`;
+                const runtime = createRuntimeObserver(page, routeLabel, baseUrl);
+
+                try {
+                    await page.goto(`${baseUrl}${audit.route}`, { waitUntil: "domcontentloaded" });
+                    await page.waitForSelector("main", { timeout: 15_000 });
+                    await page.locator("[data-input-intent]").first().waitFor({ state: "attached", timeout: 15_000 });
+
+                    const measurements = await page.evaluate(({ mobile }) => {
+                        const isVisible = (element) => {
+                            const style = window.getComputedStyle(element);
+                            const rect = element.getBoundingClientRect();
+                            return style.display !== "none" && style.visibility !== "hidden" && Number(style.opacity) !== 0 && rect.width > 0 && rect.height > 0;
+                        };
+                        const nodes = Array.from(document.querySelectorAll("[data-input-intent]")).filter(isVisible);
+                        const counts = {};
+                        const issues = [];
+
+                        for (const element of nodes) {
+                            const intent = element.getAttribute("data-input-intent");
+                            if (!intent) continue;
+                            counts[intent] = (counts[intent] || 0) + 1;
+
+                            const rect = element.getBoundingClientRect();
+                            const tag = element.tagName.toLowerCase();
+                            const field = ["input", "textarea", "select"].includes(tag);
+                            if (intent === "scalar" && field) {
+                                const target = element.closest("label") || element;
+                                const targetRect = target.getBoundingClientRect();
+                                const minimum = mobile ? 44 : 36;
+                                if (targetRect.height + 0.5 < minimum || targetRect.width + 0.5 < minimum) {
+                                    issues.push(`${intent} ${tag}: ${Math.round(targetRect.width)}x${Math.round(targetRect.height)}`);
+                                }
+                            }
+                            if (intent === "shortText" && tag === "input" && rect.height + 0.5 < (mobile ? 44 : 44)) {
+                                issues.push(`${intent} input height: ${Math.round(rect.height)}px`);
+                            }
+                            if (intent === "shortText" && tag === "textarea") {
+                                const style = window.getComputedStyle(element);
+                                const resize = style.resize;
+                                if (rect.height + 0.5 < 144) issues.push(`${intent} textarea height: ${Math.round(rect.height)}px (min-height ${style.minHeight}; ${element.className})`);
+                                if (!resize.includes("vertical") && resize !== "both") issues.push(`${intent} textarea resize: ${resize}`);
+                            }
+                            if (["payload", "generatedOutput"].includes(intent) && ["textarea", "pre"].includes(tag) && rect.height + 0.5 < 256) {
+                                issues.push(`${intent} ${tag} height: ${Math.round(rect.height)}px`);
+                            }
+                        }
+
+                        return { counts, issues };
+                    }, { mobile: viewport.mobile });
+
+                    for (const intent of audit.requiredIntents) {
+                        if (!measurements.counts[intent]) {
+                            throw new Error(`${routeLabel} did not render required ${intent} input intent.`);
+                        }
+                    }
+                    if (measurements.issues.length > 0) {
+                        throw new Error(`${routeLabel} input sizing failed:\n- ${measurements.issues.join("\n- ")}`);
+                    }
+
+                    await assertNoHorizontalOverflow(page, routeLabel);
+                    const screenshot = await page.screenshot({ animations: "disabled", fullPage: false });
+                    if (screenshot.byteLength < 5_000) {
+                        throw new Error(`${routeLabel} sizing screenshot was unexpectedly blank (${screenshot.byteLength} bytes).`);
+                    }
+                    runtime.assertClean();
+                } finally {
+                    await page.close();
+                }
+            }
+        } finally {
+            await context.close();
+        }
+    }
+}
+
 async function assertAxeSeriousCriticalMatrix(browser, baseUrl) {
     const context = await browser.newContext({ serviceWorkers: "block" });
 
@@ -1014,6 +1570,93 @@ async function assertBase64PipelineSafeNavigationJourney(context, baseUrl) {
     await page.close();
 }
 
+async function assertDownloadedFile(download, expectedFilename, kind) {
+    if (download.suggestedFilename() !== expectedFilename) {
+        throw new Error(`Expected ${expectedFilename}, received ${download.suggestedFilename()}.`);
+    }
+
+    const failure = await download.failure();
+    if (failure) {
+        throw new Error(`${expectedFilename} download failed: ${failure}`);
+    }
+
+    const downloadPath = await download.path();
+    if (!downloadPath) {
+        throw new Error(`${expectedFilename} did not produce a downloadable file.`);
+    }
+
+    const contents = await readFile(downloadPath);
+    if (contents.length === 0) {
+        throw new Error(`${expectedFilename} download was empty.`);
+    }
+
+    if (kind === "png" && !contents.subarray(0, 8).equals(Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]))) {
+        throw new Error(`${expectedFilename} did not contain a PNG signature.`);
+    }
+    if (kind === "svg" && !contents.toString("utf8").includes("<svg")) {
+        throw new Error(`${expectedFilename} did not contain SVG markup.`);
+    }
+
+    return downloadPath;
+}
+
+async function assertQrDownloadJourney(context, baseUrl) {
+    const page = await context.newPage();
+    const runtime = createRuntimeObserver(page, "QR code downloads", baseUrl);
+
+    try {
+        await page.goto(`${baseUrl}/en/qr-code-generator`, { waitUntil: "domcontentloaded" });
+        await page.locator("textarea").first().fill("https://byteflow.tools/qr-download-smoke");
+
+        const pngButton = page.getByRole("button", { name: "PNG", exact: true }).first();
+        await page.waitForFunction(() => {
+            const canvas = document.querySelector("canvas");
+            const button = Array.from(document.querySelectorAll("button"))
+                .find((candidate) => candidate.textContent?.trim() === "PNG");
+            return canvas instanceof HTMLCanvasElement && canvas.width > 0 && button && !button.disabled;
+        }, null, { timeout: 15_000 });
+        const pngDownloadPromise = page.waitForEvent("download");
+        await pngButton.click();
+        const pngDownloadPath = await assertDownloadedFile(await pngDownloadPromise, "qr-code.png", "png");
+
+        const svgDownloadPromise = page.waitForEvent("download");
+        await page.getByRole("button", { name: "SVG", exact: true }).first().click();
+        await assertDownloadedFile(await svgDownloadPromise, "qr-code.svg", "svg");
+
+        const pageCountBeforeDecode = context.pages().length;
+        await page.getByRole("tab", { name: "Decode image", exact: true }).click();
+        const decodeInput = page.locator('input[type="file"][accept*=".png"]').first();
+        await decodeInput.setInputFiles({
+            name: "qr-code.png",
+            mimeType: "image/png",
+            buffer: await readFile(pngDownloadPath),
+        });
+        await page.waitForFunction((expectedPayload) => {
+            const output = document.querySelector('[data-testid="qr-decoded-output"]')?.textContent?.trim();
+            const error = document.querySelector('[data-testid="qr-decode-error"]')
+                || Array.from(document.querySelectorAll('[role="alert"]')).find((node) => node.textContent?.trim());
+            return output === expectedPayload || Boolean(error);
+        }, "https://byteflow.tools/qr-download-smoke", { timeout: 15_000 });
+        const decodeAlert = (await page.getByRole("alert").allTextContents()).filter((message) => message.trim());
+        if (decodeAlert.length > 0) {
+            throw new Error(`QR round-trip decode failed: ${decodeAlert.join(" ")}`);
+        }
+        if (context.pages().length !== pageCountBeforeDecode) {
+            throw new Error("QR decoding opened the decoded URL without explicit user action.");
+        }
+
+        await decodeInput.setInputFiles({
+            name: "blank.png",
+            mimeType: "image/png",
+            buffer: Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=", "base64"),
+        });
+        await page.getByRole("alert").filter({ hasText: "No QR code was found" }).waitFor({ timeout: 15_000 });
+        runtime.assertClean();
+    } finally {
+        await page.close();
+    }
+}
+
 async function expectTextareaValueAbsent(page, pattern, label) {
     const found = await page.evaluate((source) => {
         const regex = new RegExp(source);
@@ -1449,7 +2092,7 @@ async function assertPwaShellJourney(browser, baseUrl) {
     }
 }
 
-async function runSmoke(baseUrl) {
+async function runSmoke(baseUrl, { writeFirstLoadArtifacts = false } = {}) {
     const browser = await chromium.launch({ headless: true });
     const context = await browser.newContext({ serviceWorkers: "block" });
 
@@ -1461,6 +2104,9 @@ async function runSmoke(baseUrl) {
             console.log(`[playwright-smoke] PASS render: ${route}`);
         }
 
+        await assertFirstLoadStabilityMatrix(browser, baseUrl, { writeArtifacts: writeFirstLoadArtifacts });
+        console.log("[playwright-smoke] PASS first-load CLS, theme, locale, and hydration screenshot matrix");
+
         await assertHomeNavigation(context, baseUrl, "en");
         console.log("[playwright-smoke] PASS navigation: /en -> /en/json-formatter");
 
@@ -1482,6 +2128,9 @@ async function runSmoke(baseUrl) {
         await assertBase64PipelineSafeNavigationJourney(context, baseUrl);
         console.log("[playwright-smoke] PASS journey: /en/base64-encode-decode -> /en/pipeline-builder safe navigation");
 
+        await assertQrDownloadJourney(context, baseUrl);
+        console.log("[playwright-smoke] PASS journey: /en/qr-code-generator PNG and SVG downloads");
+
         await assertPipelineRecipeJourney(context, baseUrl);
         console.log("[playwright-smoke] PASS journey: /en/pipeline-builder template -> run");
 
@@ -1503,6 +2152,9 @@ async function runSmoke(baseUrl) {
         await assertMobileReviewMatrix(browser, baseUrl);
         console.log("[playwright-smoke] PASS mobile review matrix: no overflow or touch-target regressions");
 
+        await assertInputIntentSizingMatrix(browser, baseUrl);
+        console.log("[playwright-smoke] PASS input intent sizing matrix: mobile/desktop heights, touch targets, overflow, and screenshots");
+
         await assertAxeSeriousCriticalMatrix(browser, baseUrl);
         console.log("[playwright-smoke] PASS accessibility: no serious or critical axe violations on representative pages");
     } finally {
@@ -1511,6 +2163,15 @@ async function runSmoke(baseUrl) {
     }
 }
 
+async function runFirstLoadAudit(baseUrl, { writeArtifacts = false } = {}) {
+    const browser = await chromium.launch({ headless: true });
+    try {
+        await assertFirstLoadStabilityMatrix(browser, baseUrl, { writeArtifacts });
+    } finally {
+        await browser.close();
+    }
+}
+
 async function runPwaSmoke(baseUrl) {
     const browser = await chromium.launch({ headless: true });
     try {
@@ -1521,8 +2182,26 @@ async function runPwaSmoke(baseUrl) {
     }
 }
 
+async function runInputIntentSmoke(baseUrl) {
+    const browser = await chromium.launch({ headless: true });
+    try {
+        await assertInputIntentSizingMatrix(browser, baseUrl);
+        console.log("[playwright-smoke] PASS input intent sizing matrix: mobile/desktop heights, touch targets, overflow, and screenshots");
+    } finally {
+        await browser.close();
+    }
+}
+
 async function main() {
-    const { baseUrl, port, skipServer, includePwa } = parseArgs(process.argv.slice(2));
+    const {
+        baseUrl,
+        firstLoadOnly,
+        includePwa,
+        inputIntentsOnly,
+        port,
+        skipServer,
+        writeFirstLoadArtifacts,
+    } = parseArgs(process.argv.slice(2));
     let serverHandle = null;
 
     try {
@@ -1532,11 +2211,19 @@ async function main() {
             console.log(`[playwright-smoke] Static server ready at ${baseUrl}`);
         }
 
-        await runSmoke(baseUrl);
-        if (includePwa) {
+        if (inputIntentsOnly) {
+            await runInputIntentSmoke(baseUrl);
+        } else if (firstLoadOnly) {
+            await runFirstLoadAudit(baseUrl, { writeArtifacts: writeFirstLoadArtifacts });
+        } else {
+            await runSmoke(baseUrl, { writeFirstLoadArtifacts });
+        }
+        if (includePwa && !firstLoadOnly && !inputIntentsOnly) {
             await runPwaSmoke(baseUrl);
         }
-        console.log("[playwright-smoke] PASS: critical routes render and navigate correctly");
+        if (!firstLoadOnly && !inputIntentsOnly) {
+            console.log("[playwright-smoke] PASS: critical routes render and navigate correctly");
+        }
     } catch (error) {
         console.error("[playwright-smoke] FAILED");
         if (serverHandle) {
diff --git a/scripts/e2e/run-route-width-matrix.js b/scripts/e2e/run-route-width-matrix.js
new file mode 100644
index 00000000..ddefec6b
--- /dev/null
+++ b/scripts/e2e/run-route-width-matrix.js
@@ -0,0 +1,236 @@
+import { createServer } from "node:http"
+import { existsSync, mkdirSync, writeFileSync } from "node:fs"
+import { createRequire } from "node:module"
+import path from "node:path"
+import process from "node:process"
+
+const require = createRequire(import.meta.url)
+const { chromium } = require("playwright")
+const serveHandler = require("serve-handler")
+
+const DEFAULT_PORT = 4174
+const OUTPUT_DIR = path.resolve(process.cwd(), "test-results/route-width")
+const VIEWPORTS = [
+    { name: "desktop-1440", width: 1440, height: 1000 },
+    { name: "desktop-1920", width: 1920, height: 1080 },
+]
+const ROUTES = [
+    { path: "/en/all-tools", intent: "catalog", requiredChromeParts: ["intent"] },
+    { path: "/en/qr-code-generator", intent: "tool", requiredChromeParts: ["intent", "tool-meta", "install"], requireRelatedTools: true },
+    { path: "/en/json-formatter", intent: "wide-tool", requiredChromeParts: ["intent", "tool-meta", "install", "related-tools"], requireRelatedTools: true },
+    { path: "/en/pipeline-builder", intent: "wide-tool", requiredChromeParts: ["intent", "tool-meta", "install", "related-tools"], requireRelatedTools: true },
+    { path: "/en/support", intent: "static", requiredChromeParts: [] },
+    { path: "/en/install-app", intent: "static", requiredChromeParts: [] },
+    { path: "/zh-CN/qr-code-generator", intent: "tool", requiredChromeParts: ["intent", "tool-meta", "install"], requireRelatedTools: true },
+]
+const MAX_WIDTH_BY_INTENT = {
+    tool: 1152,
+    "wide-tool": 1400,
+    static: 1024,
+    catalog: 1152,
+}
+const EDGE_TOLERANCE_PX = 2
+
+function parseArgs(argv) {
+    const args = { baseUrl: "", port: DEFAULT_PORT, skipServer: false }
+    for (const arg of argv) {
+        if (arg === "--skip-server") args.skipServer = true
+        if (arg.startsWith("--port=")) args.port = Number(arg.slice("--port=".length)) || DEFAULT_PORT
+        if (arg.startsWith("--base-url=")) args.baseUrl = arg.slice("--base-url=".length).trim()
+    }
+    if (!args.baseUrl) args.baseUrl = `http://127.0.0.1:${args.port}`
+    args.baseUrl = args.baseUrl.replace(/\/+$/, "")
+    return args
+}
+
+function startStaticServer(port) {
+    const outDir = path.resolve(process.cwd(), "out")
+    if (!existsSync(outDir)) {
+        throw new Error(`[route-width-matrix] Missing ${outDir}. Run npm run build first.`)
+    }
+    const server = createServer((request, response) => serveHandler(request, response, {
+        public: outDir,
+        cleanUrls: true,
+        etag: false,
+    }))
+    server.listen(port, "127.0.0.1")
+    return server
+}
+
+async function waitForServer(url) {
+    const deadline = Date.now() + 30_000
+    while (Date.now() < deadline) {
+        try {
+            const response = await fetch(url, { redirect: "manual" })
+            if (response.status < 500) return
+        } catch {
+            // The static server may still be binding its port.
+        }
+        await new Promise((resolve) => setTimeout(resolve, 300))
+    }
+    throw new Error(`[route-width-matrix] Timed out waiting for ${url}`)
+}
+
+async function closeServer(server) {
+    if (!server) return
+    await new Promise((resolve) => server.close(resolve))
+}
+
+function assertClose(actual, expected, label) {
+    if (Math.abs(actual - expected) > EDGE_TOLERANCE_PX) {
+        throw new Error(`${label}: expected ${expected.toFixed(2)} +/- ${EDGE_TOLERANCE_PX}px, received ${actual.toFixed(2)}`)
+    }
+}
+
+function assertContained(child, parent, label) {
+    if (
+        child.x < parent.x - EDGE_TOLERANCE_PX
+        || child.x + child.width > parent.x + parent.width + EDGE_TOLERANCE_PX
+    ) {
+        throw new Error(`${label} escapes the route shell horizontally: ${JSON.stringify({ child, parent })}`)
+    }
+}
+
+function assertAligned(child, parent, label) {
+    assertClose(child.x, parent.x, `${label} left edge`)
+    assertClose(child.x + child.width, parent.x + parent.width, `${label} right edge`)
+}
+
+async function inspectRoute(page, baseUrl, route, viewport) {
+    const runtimeErrors = []
+    page.on("pageerror", (error) => runtimeErrors.push(error.message))
+    page.on("console", (message) => {
+        if (message.type() === "error" && !message.text().startsWith("Failed to load resource:")) {
+            runtimeErrors.push(`console.error: ${message.text()}`)
+        }
+    })
+
+    const response = await page.goto(`${baseUrl}${route.path}`, { waitUntil: "domcontentloaded" })
+    if (!response?.ok()) throw new Error(`${route.path} failed to load: ${response?.status() ?? "no response"}`)
+    await page.locator("main").first().waitFor({ state: "visible", timeout: 15_000 })
+    await page.locator('[data-route-shell="true"]').waitFor({ state: "visible", timeout: 15_000 })
+    await page.locator("[data-page-container]").first().waitFor({ state: "visible", timeout: 15_000 })
+    await page.evaluate(() => document.fonts.ready)
+
+    const shell = page.locator('[data-route-shell="true"]')
+    const body = page.locator("[data-page-container]").first()
+    const shellIntent = await shell.getAttribute("data-route-container-intent")
+    const bodyIntent = await body.getAttribute("data-page-container")
+    if (shellIntent !== route.intent || bodyIntent !== route.intent) {
+        throw new Error(`${route.path} intent mismatch: expected ${route.intent}, shell=${shellIntent}, body=${bodyIntent}`)
+    }
+
+    const shellBox = await shell.boundingBox()
+    const bodyBox = await body.boundingBox()
+    if (!shellBox || !bodyBox) throw new Error(`${route.path} did not expose measurable shell/body containers`)
+    assertClose(bodyBox.x, shellBox.x, `${route.path} body left edge`)
+    assertClose(bodyBox.x + bodyBox.width, shellBox.x + shellBox.width, `${route.path} body right edge`)
+    if (shellBox.width > MAX_WIDTH_BY_INTENT[route.intent] + EDGE_TOLERANCE_PX) {
+        throw new Error(`${route.path} ${route.intent} shell exceeds ${MAX_WIDTH_BY_INTENT[route.intent]}px: ${shellBox.width}px`)
+    }
+    if (shellBox.x < 16 - EDGE_TOLERANCE_PX || shellBox.x + shellBox.width > viewport.width - 16 + EDGE_TOLERANCE_PX) {
+        throw new Error(`${route.path} shell violates desktop gutters: ${JSON.stringify(shellBox)}`)
+    }
+
+    const chromeBounds = await page.locator("[data-route-chrome-part]").evaluateAll((nodes) => nodes.map((node) => {
+        const rect = node.getBoundingClientRect()
+        return {
+            part: node.getAttribute("data-route-chrome-part"),
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+        }
+    }))
+    const chromeByPart = new Map(chromeBounds.map((bounds) => [bounds.part, bounds]))
+    for (const part of route.requiredChromeParts) {
+        const bounds = chromeByPart.get(part)
+        if (!bounds) throw new Error(`${route.path} is missing required ${part} route chrome`)
+        assertAligned(bounds, shellBox, `${route.path} ${part}`)
+    }
+    for (const bounds of chromeBounds) assertContained(bounds, shellBox, `${route.path} ${bounds.part}`)
+
+    const h1 = page.locator("h1").first()
+    if (await h1.count()) {
+        const headingBox = await h1.boundingBox()
+        if (headingBox) assertContained(headingBox, bodyBox, `${route.path} h1`)
+    }
+    const relatedTools = page.locator("[data-related-tools-source]").first()
+    if (route.requireRelatedTools && !(await relatedTools.count())) {
+        throw new Error(`${route.path} is missing required related tools`)
+    }
+    if (await relatedTools.count()) {
+        const relatedBox = await relatedTools.boundingBox()
+        if (!relatedBox) throw new Error(`${route.path} related tools are not measurable`)
+        assertAligned(relatedBox, shellBox, `${route.path} related tools`)
+    }
+
+    const screenshotDir = path.join(OUTPUT_DIR, viewport.name)
+    mkdirSync(screenshotDir, { recursive: true })
+    const filename = route.path.slice(1).replaceAll("/", "__") || "root"
+    await page.screenshot({
+        path: path.join(screenshotDir, `${filename}.png`),
+        fullPage: true,
+    })
+
+    if (runtimeErrors.length > 0) {
+        throw new Error(`${route.path} emitted runtime errors:\n- ${runtimeErrors.join("\n- ")}`)
+    }
+
+    return {
+        route: route.path,
+        viewport: viewport.name,
+        intent: route.intent,
+        shell: shellBox,
+        body: bodyBox,
+        chrome: chromeBounds,
+    }
+}
+
+async function main() {
+    const { baseUrl, port, skipServer } = parseArgs(process.argv.slice(2))
+    let server = null
+    let browser = null
+    const matrix = []
+    mkdirSync(OUTPUT_DIR, { recursive: true })
+
+    try {
+        if (!skipServer) {
+            server = startStaticServer(port)
+            await waitForServer(baseUrl)
+        }
+        browser = await chromium.launch({ headless: true })
+
+        for (const viewport of VIEWPORTS) {
+            const context = await browser.newContext({
+                serviceWorkers: "block",
+                viewport: { width: viewport.width, height: viewport.height },
+            })
+            try {
+                for (const route of ROUTES) {
+                    const page = await context.newPage()
+                    try {
+                        matrix.push(await inspectRoute(page, baseUrl, route, viewport))
+                        console.log(`[route-width-matrix] PASS ${viewport.name} ${route.path}`)
+                    } finally {
+                        await page.close()
+                    }
+                }
+            } finally {
+                await context.close()
+            }
+        }
+
+        writeFileSync(path.join(OUTPUT_DIR, "matrix.json"), `${JSON.stringify(matrix, null, 2)}\n`, "utf8")
+        console.log(`[route-width-matrix] PASS: wrote ${matrix.length} screenshots and bounding-box records`)
+    } finally {
+        if (browser) await browser.close()
+        await closeServer(server)
+    }
+}
+
+main().catch((error) => {
+    console.error("[route-width-matrix] FAILED")
+    console.error(error instanceof Error ? error.stack || error.message : String(error))
+    process.exit(1)
+})
diff --git a/scripts/gates/check-content-template.js b/scripts/gates/check-content-template.js
index 865facb2..5ae1cf6d 100644
--- a/scripts/gates/check-content-template.js
+++ b/scripts/gates/check-content-template.js
@@ -4,7 +4,8 @@ import { loadToolSlugs as loadToolSlugsFromManifests } from "../lib/tool-manifes
 
 const DEFAULT_SCAN_DIRS = [".next/server/app", "out"]
 const SUPPORTED_LOCALES = new Set(["en", "zh-CN", "zh-TW", "ja", "ko", "de", "fr"])
-const REQUIRED_TEMPLATE_LAYOUT_CLASS_TOKENS = ["mx-auto", "w-full", "max-w-7xl"]
+const REQUIRED_TEMPLATE_LAYOUT_CLASS_TOKENS = ["w-full"]
+const FORBIDDEN_TEMPLATE_LAYOUT_CLASS_PREFIXES = ["max-w-"]
 const REQUIRED_TEMPLATE_LAYOUT_ATTRIBUTES = ["data-tool-content-template-width-sync"]
 
 const REQUIRED_SECTION_TITLES_BY_LOCALE = {
@@ -216,6 +217,11 @@ function main() {
                 failures.push(`${slug}: template layout missing class token "${token}"`)
             }
         }
+        for (const prefix of FORBIDDEN_TEMPLATE_LAYOUT_CLASS_PREFIXES) {
+            if (classList.some((token) => token.startsWith(prefix))) {
+                failures.push(`${slug}: template layout must inherit route width instead of using "${prefix}*"`)
+            }
+        }
 
         for (const attr of REQUIRED_TEMPLATE_LAYOUT_ATTRIBUTES) {
             if (!templateSection.includes(`${attr}=`)) {
diff --git a/scripts/gates/check-legacy-routes.js b/scripts/gates/check-legacy-routes.js
index 80597cd3..f2928c37 100644
--- a/scripts/gates/check-legacy-routes.js
+++ b/scripts/gates/check-legacy-routes.js
@@ -24,8 +24,9 @@ function sitemapContainsSlugUrl(sitemap, slug) {
 }
 
 function main() {
-    const { routes, taxonomyRedirects } = checkGeneratedLegacyRoutes()
+    const { routes, taxonomyRedirects, canonicalToolSlugs: generatedCanonicalToolSlugs } = checkGeneratedLegacyRoutes()
     const canonicalToolSlugs = new Set(loadOrderedToolManifests().map((tool) => tool.slug))
+    const redirects = fs.readFileSync(path.join(ROOT, "public/_redirects"), "utf8")
     const routeGroups = readJson(ROUTE_GROUPS_PATH)
     const sitemapRouteSlugs = new Set([
         ...(routeGroups.hubSlugs || []),
@@ -33,6 +34,15 @@ function main() {
     ])
     const problems = []
 
+    for (const slug of generatedCanonicalToolSlugs) {
+        if (!canonicalToolSlugs.has(slug)) {
+            problems.push(`${slug}: generated direct-entry redirect is not a canonical tool`)
+        }
+        if (!redirects.includes(`/${slug} /en/${slug} 301`)) {
+            problems.push(`${slug}: missing default-locale direct-entry redirect`)
+        }
+    }
+
     for (const route of routes) {
         if (canonicalToolSlugs.has(route.sourceSlug)) {
             problems.push(`${route.sourceSlug}: source is still a canonical tool slug`)
@@ -83,7 +93,7 @@ function main() {
         process.exit(1)
     }
 
-    console.log(`[check:legacy-routes] OK: ${routes.length} legacy route(s) and ${Object.keys(taxonomyRedirects).length} legacy taxonomy route(s) have valid targets, redirects, and sitemap exclusions`)
+    console.log(`[check:legacy-routes] OK: ${generatedCanonicalToolSlugs.length} direct tool route(s), ${routes.length} legacy route(s), and ${Object.keys(taxonomyRedirects).length} legacy taxonomy route(s) have valid targets, redirects, and sitemap exclusions`)
 }
 
 main()
diff --git a/scripts/gates/performance-budgets.json b/scripts/gates/performance-budgets.json
index 923a8121..f62656b3 100644
--- a/scripts/gates/performance-budgets.json
+++ b/scripts/gates/performance-budgets.json
@@ -8,7 +8,7 @@
       "maxInitialScriptFiles": 12,
       "maxCssGzipBytes": 35000,
       "maxCssRawBytes": 220000,
-      "maxHtmlBytes": 330000
+      "maxHtmlBytes": 340000
     },
     {
       "route": "/en/all-tools",
@@ -38,7 +38,7 @@
       "maxInitialScriptFiles": 27,
       "maxCssGzipBytes": 35000,
       "maxCssRawBytes": 220000,
-      "maxHtmlBytes": 320000
+      "maxHtmlBytes": 335000
     },
     {
       "route": "/en/markdown-preview",
@@ -48,7 +48,7 @@
       "maxInitialScriptFiles": 23,
       "maxCssGzipBytes": 35000,
       "maxCssRawBytes": 220000,
-      "maxHtmlBytes": 300000
+      "maxHtmlBytes": 305000
     },
     {
       "route": "/en/image-resizer",
@@ -58,7 +58,7 @@
       "maxInitialScriptFiles": 27,
       "maxCssGzipBytes": 35000,
       "maxCssRawBytes": 220000,
-      "maxHtmlBytes": 310000
+      "maxHtmlBytes": 318000
     }
   ]
 }
diff --git a/scripts/generators/generate-legacy-routes.js b/scripts/generators/generate-legacy-routes.js
index b4ed0696..5671ed80 100644
--- a/scripts/generators/generate-legacy-routes.js
+++ b/scripts/generators/generate-legacy-routes.js
@@ -1,6 +1,7 @@
 import fs from "node:fs"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
+import { loadOrderedToolManifests } from "../lib/tool-manifest-lib.js"
 
 const ROOT = process.cwd()
 const LEGACY_ROUTES_PATH = path.join(ROOT, "src/core/routing/legacy-routes.json")
@@ -8,6 +9,7 @@ const LEGACY_TAXONOMY_REDIRECTS_PATH = path.join(ROOT, "src/core/routing/legacy-
 const TOOL_ALIASES_PATH = path.join(ROOT, "src/core/registry/tool-aliases.json")
 const REDIRECTS_PATH = path.join(ROOT, "public/_redirects")
 const LOCALES = ["en", "zh-CN", "zh-TW", "ja", "ko", "de", "fr"]
+const DEFAULT_LOCALE = "en"
 const REDIRECT_STATUSES = new Set([301, 302])
 const STATIC_REDIRECT_LINES = [
     "/security.txt /.well-known/security.txt 301",
@@ -92,9 +94,25 @@ export function loadLegacyTaxonomyRedirects() {
     return validated
 }
 
-function buildRedirectLines(routes, taxonomyRedirects = loadLegacyTaxonomyRedirects()) {
+function loadCanonicalToolSlugs() {
+    return loadOrderedToolManifests().map((tool) => tool.slug)
+}
+
+function buildRedirectLines(
+    routes,
+    taxonomyRedirects = loadLegacyTaxonomyRedirects(),
+    canonicalToolSlugs = loadCanonicalToolSlugs(),
+) {
     return [
         ...STATIC_REDIRECT_LINES,
+        ...canonicalToolSlugs.map((slug) => `/${slug} /${DEFAULT_LOCALE}/${slug} 301`),
+        ...routes.flatMap((route) => {
+            if (!REDIRECT_STATUSES.has(route.status)) return []
+            return [`/${route.sourceSlug} /${DEFAULT_LOCALE}/${route.targetSlug} ${route.status}`]
+        }),
+        ...Object.entries(taxonomyRedirects).map(([sourceSlug, targetSlug]) => (
+            `/${sourceSlug} /${DEFAULT_LOCALE}/${targetSlug} 301`
+        )),
         ...routes.flatMap((route) => {
             if (!REDIRECT_STATUSES.has(route.status)) return []
             return LOCALES.map((locale) => `/${locale}/${route.sourceSlug} /${locale}/${route.targetSlug} ${route.status}`)
@@ -105,8 +123,12 @@ function buildRedirectLines(routes, taxonomyRedirects = loadLegacyTaxonomyRedire
     ]
 }
 
-export function buildRedirectsSource(routes = loadLegacyRoutes(), taxonomyRedirects = loadLegacyTaxonomyRedirects()) {
-    const lines = buildRedirectLines(routes, taxonomyRedirects)
+export function buildRedirectsSource(
+    routes = loadLegacyRoutes(),
+    taxonomyRedirects = loadLegacyTaxonomyRedirects(),
+    canonicalToolSlugs = loadCanonicalToolSlugs(),
+) {
+    const lines = buildRedirectLines(routes, taxonomyRedirects, canonicalToolSlugs)
 
     return `${lines.join("\n")}\n`
 }
@@ -114,8 +136,9 @@ export function buildRedirectsSource(routes = loadLegacyRoutes(), taxonomyRedire
 export function checkGeneratedLegacyRoutes() {
     const routes = loadLegacyRoutes()
     const taxonomyRedirects = loadLegacyTaxonomyRedirects()
+    const canonicalToolSlugs = loadCanonicalToolSlugs()
     const expectedAliases = buildToolAliasesSource(routes)
-    const expectedRedirects = buildRedirectsSource(routes, taxonomyRedirects)
+    const expectedRedirects = buildRedirectsSource(routes, taxonomyRedirects, canonicalToolSlugs)
     const problems = []
 
     if (!fs.existsSync(TOOL_ALIASES_PATH) || readText(TOOL_ALIASES_PATH) !== expectedAliases) {
@@ -131,14 +154,15 @@ export function checkGeneratedLegacyRoutes() {
         process.exit(1)
     }
 
-    return { routes, taxonomyRedirects }
+    return { routes, taxonomyRedirects, canonicalToolSlugs }
 }
 
 function writeGeneratedFiles() {
     const routes = loadLegacyRoutes()
     const taxonomyRedirects = loadLegacyTaxonomyRedirects()
+    const canonicalToolSlugs = loadCanonicalToolSlugs()
     fs.writeFileSync(TOOL_ALIASES_PATH, buildToolAliasesSource(routes))
-    fs.writeFileSync(REDIRECTS_PATH, buildRedirectsSource(routes, taxonomyRedirects))
+    fs.writeFileSync(REDIRECTS_PATH, buildRedirectsSource(routes, taxonomyRedirects, canonicalToolSlugs))
     console.log(`[generate:legacy-routes] wrote ${path.relative(ROOT, TOOL_ALIASES_PATH)}`)
     console.log(`[generate:legacy-routes] wrote ${path.relative(ROOT, REDIRECTS_PATH)}`)
 }
diff --git a/scripts/generators/generate-route-width-inventory.js b/scripts/generators/generate-route-width-inventory.js
new file mode 100644
index 00000000..77df5174
--- /dev/null
+++ b/scripts/generators/generate-route-width-inventory.js
@@ -0,0 +1,427 @@
+#!/usr/bin/env node
+
+import fs from "node:fs"
+import { createRequire } from "node:module"
+import path from "node:path"
+import process from "node:process"
+
+const require = createRequire(import.meta.url)
+const ts = require("typescript")
+
+const ROOT_DIR = process.cwd()
+const INVENTORY_PATH = path.join(ROOT_DIR, "src/generated/route-width-inventory.json")
+const CONTRACT_PATH = path.join(ROOT_DIR, "src/components/layout/route-container-contract.ts")
+const TOOL_ROOT = path.join(ROOT_DIR, "src/features/tools")
+const SCAFFOLD_PATH = path.join(ROOT_DIR, "scripts/scaffolding/create-tool.js")
+const PAGE_CONTAINER_NAMES = new Set([
+    "CatalogPageContainer",
+    "StaticPageContainer",
+    "ToolPageContainer",
+    "WideToolPageContainer",
+])
+const SCAN_ROOTS = [
+    ["app", "src/app"],
+    ["layout", "src/components/layout"],
+    ["tools", "src/features/tools"],
+    ["route-surfaces", "src/core/seo/components"],
+    ["install", "src/features/install-app"],
+    ["scaffold", "scripts/scaffolding/create-tool.js"],
+]
+const WIDTH_TOKEN_PATTERN = /(?<![\w-])((?:[a-z0-9-]+:)*(?:max-w-(?:\[[^\]\s"'`]+\]|[a-z0-9-]+)|w-full|container|(?:grid-cols|col-span)-(?:\[[^\]\s"'`]+\]|[a-z0-9-]+)))/g
+const CENTERED_MAX_WIDTH_ALLOWLIST = new Set([
+    "src/app/[lang]/error.tsx::focused-status::max-w-2xl",
+    "src/app/[lang]/page.tsx::home-copy::max-w-2xl",
+    "src/app/[lang]/page.tsx::home-hero::max-w-4xl",
+    "src/app/[lang]/page.tsx::home-shell::max-w-screen-2xl",
+    "src/components/layout/app-runtime.tsx::runtime-banner::max-w-6xl",
+    "src/components/layout/footer-content.tsx::global-shell::max-w-screen-2xl",
+    "src/components/layout/lang-not-found-content.tsx::focused-status::max-w-3xl",
+    "src/components/layout/navbar.tsx::global-shell::max-w-screen-2xl",
+    "src/components/layout/seo-faq-section.tsx::readable-content::max-w-3xl",
+    "src/core/seo/components/legacy-tool-redirect-page.tsx::legacy-redirect::max-w-xl",
+    "src/core/seo/components/tool-content-template-modules/core.tsx::readable-content::max-w-4xl",
+    "src/features/tools/cidr-subnet-calculator/page.tsx::focused-work-surface::max-w-3xl",
+])
+
+function toPosix(filePath) {
+    return path.relative(ROOT_DIR, filePath).replaceAll(path.sep, "/")
+}
+
+function listSourceFiles(targetPath) {
+    const absolutePath = path.join(ROOT_DIR, targetPath)
+    if (!fs.existsSync(absolutePath)) return []
+    const stat = fs.statSync(absolutePath)
+    if (stat.isFile()) return [absolutePath]
+
+    return fs.readdirSync(absolutePath, { withFileTypes: true })
+        .flatMap((entry) => listSourceFiles(path.join(targetPath, entry.name)))
+        .filter((filePath) => /\.(?:js|ts|tsx)$/.test(filePath))
+}
+
+function unwrapExpression(node) {
+    let current = node
+    while (
+        ts.isParenthesizedExpression(current)
+        || ts.isAsExpression(current)
+        || ts.isSatisfiesExpression(current)
+        || ts.isNonNullExpression(current)
+        || ts.isAwaitExpression(current)
+    ) {
+        current = current.expression
+    }
+    return current
+}
+
+function propertyNameText(name, sourceFile) {
+    if (ts.isIdentifier(name) || ts.isStringLiteral(name) || ts.isNumericLiteral(name)) return name.text
+    return name.getText(sourceFile)
+}
+
+function findVariable(sourceFile, variableName) {
+    for (const statement of sourceFile.statements) {
+        if (!ts.isVariableStatement(statement)) continue
+        for (const declaration of statement.declarationList.declarations) {
+            if (ts.isIdentifier(declaration.name) && declaration.name.text === variableName) {
+                return declaration.initializer ? unwrapExpression(declaration.initializer) : null
+            }
+        }
+    }
+    return null
+}
+
+function readContract() {
+    const source = fs.readFileSync(CONTRACT_PATH, "utf8")
+    const sourceFile = ts.createSourceFile(CONTRACT_PATH, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS)
+    const classMapNode = findVariable(sourceFile, "ROUTE_CONTAINER_CLASS_NAMES")
+    const viewportNode = findVariable(sourceFile, "ROUTE_VIEWPORT_CLASS_NAME")
+    const representativeNode = findVariable(sourceFile, "REPRESENTATIVE_ROUTE_CONTAINER_INTENTS")
+    const wideSetNode = findVariable(sourceFile, "WIDE_TOOL_SLUGS")
+
+    if (!classMapNode || !ts.isObjectLiteralExpression(classMapNode)) {
+        throw new Error("[route-width-inventory] ROUTE_CONTAINER_CLASS_NAMES must be an object literal")
+    }
+    if (!viewportNode || !ts.isStringLiteral(viewportNode)) {
+        throw new Error("[route-width-inventory] ROUTE_VIEWPORT_CLASS_NAME must be a string literal")
+    }
+    if (!representativeNode || !ts.isObjectLiteralExpression(representativeNode)) {
+        throw new Error("[route-width-inventory] REPRESENTATIVE_ROUTE_CONTAINER_INTENTS must be an object literal")
+    }
+    if (!wideSetNode || !ts.isNewExpression(wideSetNode)) {
+        throw new Error("[route-width-inventory] WIDE_TOOL_SLUGS must be a Set literal")
+    }
+
+    const intents = Object.fromEntries(classMapNode.properties.map((property) => {
+        if (!ts.isPropertyAssignment(property) || !ts.isStringLiteral(unwrapExpression(property.initializer))) {
+            throw new Error("[route-width-inventory] Container class entries must be string literals")
+        }
+        return [propertyNameText(property.name, sourceFile), unwrapExpression(property.initializer).text]
+    }))
+    const representativeRoutes = Object.fromEntries(representativeNode.properties.map((property) => {
+        if (!ts.isPropertyAssignment(property) || !ts.isStringLiteral(unwrapExpression(property.initializer))) {
+            throw new Error("[route-width-inventory] Representative route intents must be string literals")
+        }
+        return [propertyNameText(property.name, sourceFile), unwrapExpression(property.initializer).text]
+    }))
+    const wideArray = wideSetNode.arguments?.[0]
+    if (!wideArray || !ts.isArrayLiteralExpression(wideArray)) {
+        throw new Error("[route-width-inventory] WIDE_TOOL_SLUGS must be created from an array literal")
+    }
+    const wideToolSlugs = wideArray.elements.map((element) => {
+        const value = unwrapExpression(element)
+        if (!ts.isStringLiteral(value)) {
+            throw new Error("[route-width-inventory] Wide tool slugs must be string literals")
+        }
+        return value.text
+    }).sort()
+
+    return {
+        viewport: viewportNode.text,
+        intents,
+        representativeRoutes,
+        wideToolSlugs,
+    }
+}
+
+function collectStaticClassFragments(node) {
+    const expression = unwrapExpression(node)
+    if (ts.isStringLiteral(expression) || ts.isNoSubstitutionTemplateLiteral(expression)) {
+        return [expression.text]
+    }
+    if (ts.isTemplateExpression(expression)) {
+        return [
+            expression.head.text,
+            ...expression.templateSpans.flatMap((span) => [
+                ...collectStaticClassFragments(span.expression),
+                span.literal.text,
+            ]),
+        ]
+    }
+
+    const fragments = []
+    ts.forEachChild(expression, (child) => fragments.push(...collectStaticClassFragments(child)))
+    return fragments
+}
+
+function getClassName(openingElement) {
+    for (const attribute of openingElement.attributes.properties) {
+        if (!ts.isJsxAttribute(attribute) || attribute.name.text !== "className" || !attribute.initializer) continue
+        if (ts.isStringLiteral(attribute.initializer)) return attribute.initializer.text
+        if (ts.isJsxExpression(attribute.initializer) && attribute.initializer.expression) {
+            return collectStaticClassFragments(attribute.initializer.expression).join(" ")
+        }
+    }
+    return ""
+}
+
+function getLiteralJsxAttribute(openingElement, attributeName) {
+    for (const attribute of openingElement.attributes.properties) {
+        if (!ts.isJsxAttribute(attribute) || attribute.name.text !== attributeName || !attribute.initializer) continue
+        return ts.isStringLiteral(attribute.initializer) ? attribute.initializer.text : ""
+    }
+    return ""
+}
+
+function collectCenteredMaxWidthWrappers(filePath) {
+    const source = fs.readFileSync(filePath, "utf8")
+    const sourceFile = ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+    const wrappers = []
+
+    const visit = (node) => {
+        if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+            const openingElement = ts.isJsxElement(node) ? node.openingElement : node
+            const className = getClassName(openingElement)
+            const maxWidthTokens = [...className.matchAll(/(?:^|\s)(max-w-(?:\[[^\]]+\]|[^\s]+))/g)]
+                .map((match) => match[1])
+            if (/(?:^|\s)mx-auto(?:\s|$)/.test(className) && maxWidthTokens.length > 0) {
+                wrappers.push({
+                    file: toPosix(filePath),
+                    element: openingElement.tagName.getText(sourceFile),
+                    line: sourceFile.getLineAndCharacterOfPosition(openingElement.getStart(sourceFile)).line + 1,
+                    reason: getLiteralJsxAttribute(openingElement, "data-route-width-exception"),
+                    maxWidthTokens,
+                })
+            }
+        }
+        ts.forEachChild(node, visit)
+    }
+    visit(sourceFile)
+    return wrappers
+}
+
+function collectPageContainerImports(filePath) {
+    const source = fs.readFileSync(filePath, "utf8")
+    const sourceFile = ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+    const imports = new Map()
+
+    for (const statement of sourceFile.statements) {
+        if (!ts.isImportDeclaration(statement) || statement.moduleSpecifier.text !== "@/components/layout/page-container") continue
+        const bindings = statement.importClause?.namedBindings
+        if (!bindings || !ts.isNamedImports(bindings)) continue
+        for (const element of bindings.elements) {
+            imports.set(element.name.text, element.propertyName?.text ?? element.name.text)
+        }
+    }
+    return imports
+}
+
+function collectJsxRoots(expression, sourceFile) {
+    const node = unwrapExpression(expression)
+    if (ts.isConditionalExpression(node)) {
+        return [
+            ...collectJsxRoots(node.whenTrue, sourceFile),
+            ...collectJsxRoots(node.whenFalse, sourceFile),
+        ]
+    }
+    if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+        const openingElement = ts.isJsxElement(node) ? node.openingElement : node
+        return [{
+            element: openingElement.tagName.getText(sourceFile),
+            className: getClassName(openingElement),
+            line: sourceFile.getLineAndCharacterOfPosition(openingElement.getStart(sourceFile)).line + 1,
+        }]
+    }
+    if (ts.isJsxFragment(node)) {
+        return [{ element: "Fragment", className: "", line: sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)).line + 1 }]
+    }
+    return []
+}
+
+function isExportedPageFunction(node, filePath) {
+    if (!ts.isFunctionDeclaration(node)) return false
+    const modifiers = node.modifiers ?? []
+    const isDefault = modifiers.some((modifier) => modifier.kind === ts.SyntaxKind.DefaultKeyword)
+    const isExported = modifiers.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)
+    const isNamedPage = Boolean(node.name?.text.endsWith("Page"))
+    const isRouteSurface = new Set(["error.tsx", "loading.tsx", "not-found.tsx", "page.tsx"])
+        .has(path.basename(filePath))
+    return (isDefault && (isNamedPage || isRouteSurface)) || (isExported && isNamedPage)
+}
+
+function collectPageRoots(filePath) {
+    const source = fs.readFileSync(filePath, "utf8")
+    const sourceFile = ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+    const roots = []
+
+    for (const statement of sourceFile.statements) {
+        if (!isExportedPageFunction(statement, filePath)) continue
+        const component = statement.name?.text ?? "default"
+        const visit = (node) => {
+            if (node !== statement && ts.isFunctionLike(node)) return
+            if (ts.isReturnStatement(node) && node.expression) {
+                for (const root of collectJsxRoots(node.expression, sourceFile)) {
+                    roots.push({
+                        file: toPosix(filePath),
+                        component,
+                        ...root,
+                        hardcodedMaxWidth: [...root.className.matchAll(/(?:^|\s)(max-w-(?:\[[^\]]+\]|[^\s]+))/g)]
+                            .map((match) => match[1]),
+                    })
+                }
+            }
+            ts.forEachChild(node, visit)
+        }
+        visit(statement)
+    }
+
+    return roots
+}
+
+function buildWidthTokenInventory() {
+    const areas = {}
+    const scannedFiles = new Set()
+
+    for (const [area, targetPath] of SCAN_ROOTS) {
+        const counts = new Map()
+        for (const filePath of listSourceFiles(targetPath)) {
+            scannedFiles.add(filePath)
+            const source = fs.readFileSync(filePath, "utf8")
+            for (const match of source.matchAll(WIDTH_TOKEN_PATTERN)) {
+                const token = match[1]
+                counts.set(token, (counts.get(token) ?? 0) + 1)
+            }
+        }
+        areas[area] = Object.fromEntries([...counts.entries()].sort(([left], [right]) => left.localeCompare(right)))
+    }
+
+    return { areas, scannedFiles: [...scannedFiles].sort() }
+}
+
+function buildInventory() {
+    const contract = readContract()
+    const { areas, scannedFiles } = buildWidthTokenInventory()
+    const pageRoots = scannedFiles.flatMap(collectPageRoots)
+        .sort((left, right) => left.file.localeCompare(right.file) || left.line - right.line)
+    const centeredMaxWidthWrappers = scannedFiles.flatMap(collectCenteredMaxWidthWrappers)
+        .sort((left, right) => left.file.localeCompare(right.file) || left.line - right.line)
+    const violations = []
+
+    for (const root of pageRoots) {
+        if (root.hardcodedMaxWidth.length > 0) {
+            violations.push(`${root.file}:${root.line} ${root.component} hardcodes ${root.hardcodedMaxWidth.join(", ")} at its page root`)
+        }
+    }
+
+    const usedCenteredMaxWidthAllowlistEntries = new Set()
+    for (const wrapper of centeredMaxWidthWrappers) {
+        for (const token of wrapper.maxWidthTokens) {
+            const allowlistEntry = `${wrapper.file}::${wrapper.reason}::${token}`
+            if (!wrapper.reason || !CENTERED_MAX_WIDTH_ALLOWLIST.has(allowlistEntry)) {
+                violations.push(`${wrapper.file}:${wrapper.line} centered ${token} wrapper is not explicitly allowlisted`)
+                continue
+            }
+            usedCenteredMaxWidthAllowlistEntries.add(allowlistEntry)
+        }
+    }
+    for (const allowlistEntry of CENTERED_MAX_WIDTH_ALLOWLIST) {
+        if (!usedCenteredMaxWidthAllowlistEntries.has(allowlistEntry)) {
+            violations.push(`unused centered max-width allowlist entry: ${allowlistEntry}`)
+        }
+    }
+
+    const toolSurfaces = []
+    const wideToolSlugs = new Set(contract.wideToolSlugs)
+    const toolDirs = fs.readdirSync(TOOL_ROOT, { withFileTypes: true }).filter((entry) => entry.isDirectory())
+    for (const entry of toolDirs) {
+        const filePath = path.join(TOOL_ROOT, entry.name, "page.tsx")
+        if (!fs.existsSync(filePath)) continue
+        const roots = pageRoots.filter((root) => root.file === toPosix(filePath))
+        if (roots.length === 0) {
+            violations.push(`${toPosix(filePath)} does not export a detectable *Page component`)
+            continue
+        }
+
+        const expectedElement = wideToolSlugs.has(entry.name) ? "WideToolPageContainer" : "ToolPageContainer"
+        const containerImports = collectPageContainerImports(filePath)
+        if (containerImports.get(expectedElement) !== expectedElement) {
+            violations.push(`${toPosix(filePath)} must import ${expectedElement} from @/components/layout/page-container without aliasing`)
+        }
+        for (const root of roots) {
+            if (!PAGE_CONTAINER_NAMES.has(root.element)) {
+                violations.push(`${root.file}:${root.line} ${root.component} must use a page container primitive, found ${root.element}`)
+            } else if (root.element !== expectedElement) {
+                violations.push(`${root.file}:${root.line} ${entry.name} expects ${expectedElement}, found ${root.element}`)
+            }
+        }
+        toolSurfaces.push({
+            slug: entry.name,
+            intent: wideToolSlugs.has(entry.name) ? "wide-tool" : "tool",
+            roots: [...new Set(roots.map((root) => root.element))].sort(),
+        })
+    }
+
+    const scaffoldSource = fs.readFileSync(SCAFFOLD_PATH, "utf8")
+    const featureTemplateStart = scaffoldSource.indexOf("function createFeaturePageTemplate")
+    const featureTemplateEnd = scaffoldSource.indexOf("function createTypesTemplate", featureTemplateStart)
+    const featureTemplate = scaffoldSource.slice(featureTemplateStart, featureTemplateEnd)
+    if (!featureTemplate.includes('import { ToolPageContainer } from "@/components/layout/page-container"')) {
+        violations.push("scripts/scaffolding/create-tool.js must import ToolPageContainer in generated feature pages")
+    }
+    if (!featureTemplate.includes("<ToolPageContainer")) {
+        violations.push("scripts/scaffolding/create-tool.js must generate ToolPageContainer as the feature page root")
+    }
+    if (/max-w-/.test(featureTemplate)) {
+        violations.push("scripts/scaffolding/create-tool.js must not hardcode max-w-* in generated feature page roots")
+    }
+
+    if (violations.length > 0) {
+        throw new Error(`[route-width-inventory] Contract violations:\n- ${violations.join("\n- ")}`)
+    }
+
+    return {
+        schemaVersion: 1,
+        contracts: contract,
+        summary: {
+            scannedFiles: scannedFiles.length,
+            pageRoots: pageRoots.length,
+            toolSurfaces: toolSurfaces.length,
+            standardTools: toolSurfaces.filter((tool) => tool.intent === "tool").length,
+            wideTools: toolSurfaces.filter((tool) => tool.intent === "wide-tool").length,
+        },
+        toolSurfaces: toolSurfaces.sort((left, right) => left.slug.localeCompare(right.slug)),
+        centeredMaxWidthExceptions: centeredMaxWidthWrappers,
+        pageRoots: pageRoots.map(({ file, component, element, line }) => ({ file, component, element, line })),
+        widthTokensByArea: areas,
+    }
+}
+
+function main() {
+    const expected = `${JSON.stringify(buildInventory(), null, 2)}\n`
+    if (process.argv.includes("--check")) {
+        const current = fs.existsSync(INVENTORY_PATH) ? fs.readFileSync(INVENTORY_PATH, "utf8") : ""
+        if (current !== expected) {
+            throw new Error("[route-width-inventory] Generated inventory is stale. Run npm run generate:route-width-inventory.")
+        }
+        console.log("[route-width-inventory] PASS: generated inventory and page-root contracts are current")
+        return
+    }
+
+    fs.writeFileSync(INVENTORY_PATH, expected, "utf8")
+    console.log(`[route-width-inventory] Wrote ${path.relative(ROOT_DIR, INVENTORY_PATH)}`)
+}
+
+try {
+    main()
+} catch (error) {
+    console.error(error instanceof Error ? error.message : String(error))
+    process.exit(1)
+}
diff --git a/scripts/generators/generate-runtime-scripts.js b/scripts/generators/generate-runtime-scripts.js
index 5bda5fa4..75106b84 100644
--- a/scripts/generators/generate-runtime-scripts.js
+++ b/scripts/generators/generate-runtime-scripts.js
@@ -140,14 +140,25 @@ function buildThemeManifestBootstrapScript(config) {
     var activeLang = locales.indexOf(seg) >= 0 ? seg : ${defaultLocale};
     document.documentElement.setAttribute("lang", activeLang);
 
-    var t = localStorage.getItem("theme");
+    var t = null;
+    try {
+      t = localStorage.getItem("theme");
+    } catch {}
+    if (t !== "light" && t !== "dark" && t !== "system") t = null;
     if (!t) {
-      var m = document.cookie.match(/(?:^|;\\s*)theme=([^;]*)/);
-      t = m ? m[1] : null;
+      try {
+        var m = document.cookie.match(/(?:^|;\\s*)theme=([^;]*)/);
+        t = m ? m[1] : null;
+      } catch {}
     }
+    if (t !== "light" && t !== "dark" && t !== "system") t = null;
     if (!t) t = "dark";
     if (t === "system") {
-      t = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      try {
+        t = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      } catch {
+        t = "dark";
+      }
     }
     document.documentElement.classList.remove("light", "dark");
     document.documentElement.classList.add(t);
diff --git a/scripts/scaffolding/create-tool.js b/scripts/scaffolding/create-tool.js
index 8b3ffaf9..cf754c18 100755
--- a/scripts/scaffolding/create-tool.js
+++ b/scripts/scaffolding/create-tool.js
@@ -253,10 +253,11 @@ function createFeaturePageTemplate(toolKey) {
     return `"use client"
 
 import * as React from "react"
-import { Copy, Play } from "lucide-react"
+import { Copy, Play, TestTube2, Trash2 } from "lucide-react"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
+import { ToolPageContainer } from "@/components/layout/page-container"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { requireTranslationValue } from "@/core/i18n/i18n"
@@ -270,18 +271,30 @@ export function ${componentName}Page() {
     const description = requireTranslationValue(toolT?.description, "tools.${toolKey}.description")
     const runLabel = requireTranslationValue(t.common.run, "common.run")
     const copyLabel = requireTranslationValue(t.common.copy, "common.copy")
+    const sampleLabel = requireTranslationValue(t.common.sample, "common.sample")
+    const clearLabel = requireTranslationValue(t.common.clear, "common.clear")
     const inputLabel = requireTranslationValue(t.common.input, "common.input")
     const outputLabel = requireTranslationValue(t.common.output, "common.output")
     const copyFailedLabel = requireTranslationValue(t.common.copy_failed, "common.copy_failed")
     const copiedLabel = requireTranslationValue(t.common.copied, "common.copied")
     const copiedDescLabel = requireTranslationValue(t.common.copied_desc, "common.copied_desc")
-    const [input, setInput] = React.useState(SAMPLE_INPUT)
+    const [input, setInput] = React.useState("")
     const [output, setOutput] = React.useState("")
 
     const run = () => {
         setOutput(runTool(input))
     }
 
+    const handleSample = () => {
+        setInput(SAMPLE_INPUT)
+        setOutput("")
+    }
+
+    const handleClear = () => {
+        setInput("")
+        setOutput("")
+    }
+
     const handleCopy = async () => {
         if (!output) return
         const result = await safeClipboardWrite(output)
@@ -295,13 +308,17 @@ export function ${componentName}Page() {
     }
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-6">
+        <ToolPageContainer className="flex h-full flex-col gap-6">
             <div>
                 <h1 className="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
                 <p className="mt-1 text-muted-foreground">{description}</p>
             </div>
 
             <div className="flex flex-wrap gap-2">
+                <Button variant="outline" onClick={handleSample}>
+                    <TestTube2 className="mr-2 h-4 w-4" />
+                    {sampleLabel}
+                </Button>
                 <Button onClick={run}>
                     <Play className="mr-2 h-4 w-4" />
                     {runLabel}
@@ -310,25 +327,30 @@ export function ${componentName}Page() {
                     <Copy className="mr-2 h-4 w-4" />
                     {copyLabel}
                 </Button>
+                <Button variant="outline" onClick={handleClear} disabled={!input && !output}>
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    {clearLabel}
+                </Button>
             </div>
 
-            <div className="grid gap-4 lg:grid-cols-2">
+            <div data-input-intent="workbench" className="grid gap-4 lg:grid-cols-2">
                 <div className="space-y-2">
                     <label className="text-sm font-medium text-muted-foreground">{inputLabel}</label>
                     <Textarea
+                        intent="payload"
                         value={input}
                         onChange={(event) => setInput(event.target.value)}
                         placeholder={inputLabel}
-                        className="min-h-[360px] font-mono"
+                        className="font-mono"
                     />
                 </div>
 
                 <div className="space-y-2">
                     <label className="text-sm font-medium text-muted-foreground">{outputLabel}</label>
-                    <Textarea value={output} readOnly className="min-h-[360px] font-mono" />
+                    <Textarea intent="generatedOutput" value={output} readOnly className="font-mono" />
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 `;
@@ -413,6 +435,7 @@ export const toolManifest = {
     key: "${key}",
     slug: "${slug}",
     category: "${category}",
+    inputBehavior: "empty-first",
     relatedTools: ${asTsStringArray(relatedTools)},
 ${privacyBlock}
     keywords: ${asTsStringArray(keywords)},
diff --git a/src/app/[lang]/about/page.tsx b/src/app/[lang]/about/page.tsx
index 4e1c22d6..c600520d 100644
--- a/src/app/[lang]/about/page.tsx
+++ b/src/app/[lang]/about/page.tsx
@@ -4,6 +4,7 @@ import { Github, Globe, Code2, Zap, Shield, ArrowUpRight } from "lucide-react"
 import { getGrowthIndex } from "@/core/growth/growth-pages"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function AboutPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -25,7 +26,7 @@ export default async function AboutPage({ params }: { params: Promise<{ lang: st
     ]
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <section className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <h1 className="text-3xl font-semibold tracking-tight">{p.about_title}</h1>
                 <p className="mt-3 text-base leading-relaxed text-muted-foreground">{p.about_intro}</p>
@@ -109,6 +110,6 @@ export default async function AboutPage({ params }: { params: Promise<{ lang: st
                     {p.about_explore}
                 </Link>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/all-tools/page.tsx b/src/app/[lang]/all-tools/page.tsx
index 6c66b6d8..86ba8b5a 100644
--- a/src/app/[lang]/all-tools/page.tsx
+++ b/src/app/[lang]/all-tools/page.tsx
@@ -7,6 +7,7 @@ import { TOOL_CAPABILITY_LABELS, TOOL_FAMILY_LABELS, type ToolCapability, type T
 import { getGuideIndexCopy, getGuideIndexItems } from "@/core/growth/guide-index"
 import { AllToolsDiscovery } from "@/features/tool-discovery/all-tools-discovery"
 import { AllToolsQueryRobots } from "@/features/tool-discovery/all-tools-query-robots"
+import { CatalogPageContainer } from "@/components/layout/page-container"
 
 const POPULAR_DISCOVERY_TAGS = [
     "json",
@@ -95,7 +96,7 @@ export default async function AllToolsPage({ params }: { params: Promise<{ lang:
         }),
     }))
     return (
-        <div className="mx-auto flex w-full max-w-6xl flex-col gap-7 pb-8">
+        <CatalogPageContainer className="flex flex-col gap-7 pb-8">
             <AllToolsQueryRobots />
             <header className="rounded-2xl border border-border/70 bg-card/55 p-5 backdrop-blur-sm sm:p-6">
                 <p className="text-xs font-semibold uppercase tracking-[0.22em] text-primary/80">
@@ -175,6 +176,6 @@ export default async function AllToolsPage({ params }: { params: Promise<{ lang:
                     tags: workflow.tags,
                 }))}
             />
-        </div>
+        </CatalogPageContainer>
     )
 }
diff --git a/src/app/[lang]/api-auth-header-mistakes/page.tsx b/src/app/[lang]/api-auth-header-mistakes/page.tsx
index 7736cae0..38df0d1b 100644
--- a/src/app/[lang]/api-auth-header-mistakes/page.tsx
+++ b/src/app/[lang]/api-auth-header-mistakes/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function ApiAuthHeaderMistakesPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function ApiAuthHeaderMistakesPage({ params }: { params: Pr
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C2: API Debugging</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Common API auth header mistakes</h1>
@@ -108,6 +109,6 @@ export default async function ApiAuthHeaderMistakesPage({ params }: { params: Pr
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/base64-encoding-when-and-how-to-use-it/page.tsx b/src/app/[lang]/base64-encoding-when-and-how-to-use-it/page.tsx
index 7726e9af..d1da4360 100644
--- a/src/app/[lang]/base64-encoding-when-and-how-to-use-it/page.tsx
+++ b/src/app/[lang]/base64-encoding-when-and-how-to-use-it/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function Base64EncodingWhenAndHowToUseItPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function Base64EncodingWhenAndHowToUseItPage({ params }: {
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C6: Encoding & Hashing</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Base64 encoding: when and how to use it</h1>
@@ -105,6 +106,6 @@ Decoded back to original bytes`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/certificate-chain-basics-for-developers/page.tsx b/src/app/[lang]/certificate-chain-basics-for-developers/page.tsx
index 97ff5bc2..95af1f93 100644
--- a/src/app/[lang]/certificate-chain-basics-for-developers/page.tsx
+++ b/src/app/[lang]/certificate-chain-basics-for-developers/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function CertificateChainBasicsPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function CertificateChainBasicsPage({ params }: { params: P
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C3: Network & Security</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Certificate chain basics for developers</h1>
@@ -92,6 +93,6 @@ error: unable to get local issuer certificate`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/changelog/page.tsx b/src/app/[lang]/changelog/page.tsx
index d6d08d00..ee41badb 100644
--- a/src/app/[lang]/changelog/page.tsx
+++ b/src/app/[lang]/changelog/page.tsx
@@ -4,6 +4,7 @@ import { GitPullRequest, Map, Sparkles, ThumbsUp } from "lucide-react"
 import type { Locale } from "@/core/i18n/i18n"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 const CHANGELOG_COPY: Record<Locale, {
     badge: string
@@ -218,7 +219,7 @@ export default async function ChangelogPage({ params }: { params: Promise<{ lang
     const copy = CHANGELOG_COPY[lang]
 
     return (
-        <div className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <section className="rounded-lg border border-border/70 bg-card/55 p-6 sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{copy.badge}</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">{t.pages.changelog_title}</h1>
@@ -260,6 +261,6 @@ export default async function ChangelogPage({ params }: { params: Promise<{ lang
                     {copy.voteLink}
                 </a>
             </div>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/color-extraction-from-images-use-cases-and-tools/page.tsx b/src/app/[lang]/color-extraction-from-images-use-cases-and-tools/page.tsx
index 436e0b3a..ef74cddc 100644
--- a/src/app/[lang]/color-extraction-from-images-use-cases-and-tools/page.tsx
+++ b/src/app/[lang]/color-extraction-from-images-use-cases-and-tools/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function ColorExtractionFromImagesUseCasesAndToolsPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function ColorExtractionFromImagesUseCasesAndToolsPage({ pa
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C5: Image Processing</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Color extraction from images: use cases and tools</h1>
@@ -106,6 +107,6 @@ Need 6-color palette for landing page + ads`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/contact/page.tsx b/src/app/[lang]/contact/page.tsx
index 9247c543..510da819 100644
--- a/src/app/[lang]/contact/page.tsx
+++ b/src/app/[lang]/contact/page.tsx
@@ -6,6 +6,7 @@ import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { Github, Mail, MessageSquare, ExternalLink, ShieldCheck, Map, ThumbsUp, HeartHandshake } from "lucide-react"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 const EMAIL_ADDRESS = "contact@byteflow.tools"
 const GITHUB_REPOSITORY_URL = "https://github.com/baixiangcpp/byteflow.tools"
@@ -39,7 +40,7 @@ export default function ContactPage() {
     }
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <section className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <h1 className="text-3xl font-semibold tracking-tight">{p.contact_title}</h1>
                 <p className="mt-3 text-base leading-relaxed text-muted-foreground">{p.contact_intro}</p>
@@ -106,6 +107,6 @@ export default function ContactPage() {
                     </Link>
                 </div>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/convert-curl-to-fetch-python/page.tsx b/src/app/[lang]/convert-curl-to-fetch-python/page.tsx
index f9171905..34cc7ff7 100644
--- a/src/app/[lang]/convert-curl-to-fetch-python/page.tsx
+++ b/src/app/[lang]/convert-curl-to-fetch-python/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function ConvertCurlToFetchPythonPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function ConvertCurlToFetchPythonPage({ params }: { params:
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C2: API Debugging</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">How to convert cURL to fetch/Python</h1>
@@ -100,6 +101,6 @@ export default async function ConvertCurlToFetchPythonPage({ params }: { params:
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/csp-mistakes-that-break-production/page.tsx b/src/app/[lang]/csp-mistakes-that-break-production/page.tsx
index ee6f465d..feb53c95 100644
--- a/src/app/[lang]/csp-mistakes-that-break-production/page.tsx
+++ b/src/app/[lang]/csp-mistakes-that-break-production/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function CspMistakesThatBreakProductionPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function CspMistakesThatBreakProductionPage({ params }: { p
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C3: Network & Security</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">CSP mistakes that break production</h1>
@@ -82,6 +83,6 @@ auth callback blocked`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/css-animations-and-transitions-guide/page.tsx b/src/app/[lang]/css-animations-and-transitions-guide/page.tsx
index d306bab8..843c3a29 100644
--- a/src/app/[lang]/css-animations-and-transitions-guide/page.tsx
+++ b/src/app/[lang]/css-animations-and-transitions-guide/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function CssAnimationsAndTransitionsGuidePage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function CssAnimationsAndTransitionsGuidePage({ params }: {
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C4: CSS & Design</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Complete guide to CSS animations and transitions</h1>
@@ -99,6 +100,6 @@ color transition: 140ms ease-out`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/css-border-radius-and-shapes-guide/page.tsx b/src/app/[lang]/css-border-radius-and-shapes-guide/page.tsx
index 9f149757..f06e1b1b 100644
--- a/src/app/[lang]/css-border-radius-and-shapes-guide/page.tsx
+++ b/src/app/[lang]/css-border-radius-and-shapes-guide/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function CssBorderRadiusAndShapesGuidePage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function CssBorderRadiusAndShapesGuidePage({ params }: { pa
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C4: CSS & Design</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">CSS border radius and shapes: visual guide</h1>
@@ -100,6 +101,6 @@ fallback: border-radius only`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/css-layout-patterns-for-developers/page.tsx b/src/app/[lang]/css-layout-patterns-for-developers/page.tsx
index c1af105c..733035f9 100644
--- a/src/app/[lang]/css-layout-patterns-for-developers/page.tsx
+++ b/src/app/[lang]/css-layout-patterns-for-developers/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function CssLayoutPatternsForDevelopersPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function CssLayoutPatternsForDevelopersPage({ params }: { p
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C4: CSS & Design</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">CSS layout patterns every developer should know</h1>
@@ -111,6 +112,6 @@ Actions: sticky action bar above panes`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/csv-to-json/page.tsx b/src/app/[lang]/csv-to-json/page.tsx
new file mode 100644
index 00000000..4fb1b95b
--- /dev/null
+++ b/src/app/[lang]/csv-to-json/page.tsx
@@ -0,0 +1,30 @@
+import type { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { buildLegacyToolRedirectMetadata, getLegacyToolRedirectCopy } from "@/core/routing/legacy-tool-redirect"
+import { LegacyToolRedirectPage } from "@/core/seo/components/legacy-tool-redirect-page"
+
+type PageProps = {
+    params: Promise<{ lang: string }>
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+    const { lang } = await params
+    if (!isValidLocale(lang)) notFound()
+    return buildLegacyToolRedirectMetadata(lang, "csv-json-converter")
+}
+
+export default async function CsvToJsonRedirect({ params }: PageProps) {
+    const { lang } = await params
+    if (!isValidLocale(lang)) notFound()
+
+    const copy = getLegacyToolRedirectCopy(lang)
+    return (
+        <LegacyToolRedirectPage
+            href={`/${lang}/csv-json-converter`}
+            title={copy.heading}
+            body={copy.body}
+            cta={copy.cta}
+        />
+    )
+}
diff --git a/src/app/[lang]/distribution-research/page.tsx b/src/app/[lang]/distribution-research/page.tsx
index c7b51231..f0ae01eb 100644
--- a/src/app/[lang]/distribution-research/page.tsx
+++ b/src/app/[lang]/distribution-research/page.tsx
@@ -4,6 +4,7 @@ import { Boxes, MessageSquarePlus, MonitorDown, ShieldCheck, ThumbsUp } from "lu
 import type { Locale } from "@/core/i18n/i18n"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 const MVP_TOOL_KEYS = [
     "json_formatter",
@@ -170,7 +171,7 @@ export default async function DistributionResearchPage({ params }: { params: Pro
     const mvpTools = MVP_TOOL_KEYS.map((key) => t.tools[key].title).join(", ")
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <section className="rounded-lg border border-border/70 bg-card/55 p-6 sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{copy.badge}</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">{copy.heading}</h1>
@@ -220,6 +221,6 @@ export default async function DistributionResearchPage({ params }: { params: Pro
                     </Link>
                 </div>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/dns-records-uptime/page.tsx b/src/app/[lang]/dns-records-uptime/page.tsx
index 673bb1f1..b832e947 100644
--- a/src/app/[lang]/dns-records-uptime/page.tsx
+++ b/src/app/[lang]/dns-records-uptime/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function DnsRecordsUptimePage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function DnsRecordsUptimePage({ params }: { params: Promise
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C3: Network & Security</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">How DNS records affect uptime</h1>
@@ -107,6 +108,6 @@ propagation risk: reduced`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/error.tsx b/src/app/[lang]/error.tsx
index 764b846b..bee78744 100644
--- a/src/app/[lang]/error.tsx
+++ b/src/app/[lang]/error.tsx
@@ -40,8 +40,8 @@ export default function LangError({ error, reset }: LangErrorProps) {
     const homeLabel = t.common.route_error_home
 
     return (
-        <div className="mx-auto w-full max-w-screen-2xl px-4 pb-10 pt-6 md:px-8 md:pt-10 lg:px-10">
-            <section className="mx-auto max-w-2xl rounded-2xl border border-border/70 bg-card/55 p-6 shadow-sm backdrop-blur-sm">
+        <div className="pb-10 pt-6 md:pt-10">
+            <section data-route-width-exception="focused-status" className="mx-auto max-w-2xl rounded-2xl border border-border/70 bg-card/55 p-6 shadow-sm backdrop-blur-sm">
                 <h1 className="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
                 <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{description}</p>
                 <div className="mt-6 flex flex-wrap items-center gap-3">
diff --git a/src/app/[lang]/hash-functions-compared-md5-vs-sha256-vs-sha512/page.tsx b/src/app/[lang]/hash-functions-compared-md5-vs-sha256-vs-sha512/page.tsx
index bd0d3d9c..a9ccd8b2 100644
--- a/src/app/[lang]/hash-functions-compared-md5-vs-sha256-vs-sha512/page.tsx
+++ b/src/app/[lang]/hash-functions-compared-md5-vs-sha256-vs-sha512/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function HashFunctionsComparedMd5VsSha256VsSha512Page({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function HashFunctionsComparedMd5VsSha256VsSha512Page({ par
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C6: Encoding & Hashing</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Hash functions compared: MD5 vs SHA-256 vs SHA-512</h1>
@@ -103,6 +104,6 @@ Pass or mismatch decision`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/image-optimization-for-web-complete-workflow/page.tsx b/src/app/[lang]/image-optimization-for-web-complete-workflow/page.tsx
index 3356eecc..17c6ba83 100644
--- a/src/app/[lang]/image-optimization-for-web-complete-workflow/page.tsx
+++ b/src/app/[lang]/image-optimization-for-web-complete-workflow/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function ImageOptimizationForWebCompleteWorkflowPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function ImageOptimizationForWebCompleteWorkflowPage({ para
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C5: Image Processing</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Image optimization for web: complete workflow</h1>
@@ -107,6 +108,6 @@ Card: 800x450 compressed target <180KB`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/image-privacy-how-to-censor-and-protect-images/page.tsx b/src/app/[lang]/image-privacy-how-to-censor-and-protect-images/page.tsx
index 35a484df..bb6547d9 100644
--- a/src/app/[lang]/image-privacy-how-to-censor-and-protect-images/page.tsx
+++ b/src/app/[lang]/image-privacy-how-to-censor-and-protect-images/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function ImagePrivacyHowToCensorAndProtectImagesPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function ImagePrivacyHowToCensorAndProtectImagesPage({ para
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C5: Image Processing</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Image privacy: how to censor and protect images</h1>
@@ -104,6 +105,6 @@ Cropped and compressed share-safe image`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/json-formatting-errors/page.tsx b/src/app/[lang]/json-formatting-errors/page.tsx
index 45bfdb38..94a144fa 100644
--- a/src/app/[lang]/json-formatting-errors/page.tsx
+++ b/src/app/[lang]/json-formatting-errors/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function JsonFormattingErrorsPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function JsonFormattingErrorsPage({ params }: { params: Pro
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C1: JSON Ecosystem</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">JSON formatting errors and how to fix them</h1>
@@ -112,6 +113,6 @@ export default async function JsonFormattingErrorsPage({ params }: { params: Pro
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/json-schema-validation-checklist/page.tsx b/src/app/[lang]/json-schema-validation-checklist/page.tsx
index 8e266e45..b49a74a0 100644
--- a/src/app/[lang]/json-schema-validation-checklist/page.tsx
+++ b/src/app/[lang]/json-schema-validation-checklist/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function JsonSchemaValidationChecklistPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function JsonSchemaValidationChecklistPage({ params }: { pa
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C1: JSON Ecosystem</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">JSON schema validation checklist</h1>
@@ -86,6 +87,6 @@ result: invalid (string vs number)`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/json-vs-json5-differences/page.tsx b/src/app/[lang]/json-vs-json5-differences/page.tsx
index 15981428..08bc1863 100644
--- a/src/app/[lang]/json-vs-json5-differences/page.tsx
+++ b/src/app/[lang]/json-vs-json5-differences/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function JsonVsJson5DifferencesPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function JsonVsJson5DifferencesPage({ params }: { params: P
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C1: JSON Ecosystem</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">JSON vs JSON5 differences</h1>
@@ -98,6 +99,6 @@ export default async function JsonVsJson5DifferencesPage({ params }: { params: P
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/jwt-security-best-practices-for-token-handling/page.tsx b/src/app/[lang]/jwt-security-best-practices-for-token-handling/page.tsx
index 907aadb6..6667fe4e 100644
--- a/src/app/[lang]/jwt-security-best-practices-for-token-handling/page.tsx
+++ b/src/app/[lang]/jwt-security-best-practices-for-token-handling/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function JwtSecurityBestPracticesForTokenHandlingPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function JwtSecurityBestPracticesForTokenHandlingPage({ par
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C6: Encoding & Hashing</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">JWT security: best practices for token handling</h1>
@@ -104,6 +105,6 @@ Allow or reject decision with audit log`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/loading.tsx b/src/app/[lang]/loading.tsx
index 1dd7e09d..2cc9587b 100644
--- a/src/app/[lang]/loading.tsx
+++ b/src/app/[lang]/loading.tsx
@@ -1,6 +1,6 @@
 export default function LangLoading() {
     return (
-        <div className="mx-auto w-full max-w-screen-2xl px-4 pb-10 pt-6 md:px-8 md:pt-8 lg:px-10">
+        <div className="pb-10 pt-6 md:pt-8">
             <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                 <section className="rounded-2xl border border-border/70 bg-card/55 p-4 md:p-5">
                     <div className="h-5 w-36 animate-pulse rounded-md bg-muted/45" />
diff --git a/src/app/[lang]/mock-openapi-quickly/page.tsx b/src/app/[lang]/mock-openapi-quickly/page.tsx
index 9744def6..3223264c 100644
--- a/src/app/[lang]/mock-openapi-quickly/page.tsx
+++ b/src/app/[lang]/mock-openapi-quickly/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function MockOpenapiQuicklyPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function MockOpenapiQuicklyPage({ params }: { params: Promi
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C2: API Debugging</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">How to mock OpenAPI quickly</h1>
@@ -85,6 +86,6 @@ response schema: User`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/modern-css-effects-guide/page.tsx b/src/app/[lang]/modern-css-effects-guide/page.tsx
index 7dc8ea3a..b6e79605 100644
--- a/src/app/[lang]/modern-css-effects-guide/page.tsx
+++ b/src/app/[lang]/modern-css-effects-guide/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function ModernCssEffectsGuidePage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function ModernCssEffectsGuidePage({ params }: { params: Pr
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C4: CSS & Design</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Modern CSS effects: glassmorphism, gradients, and more</h1>
@@ -105,6 +106,6 @@ Border: 1px rgba(255,255,255,0.18)`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/openapi-debugging-workflow-checklist/page.tsx b/src/app/[lang]/openapi-debugging-workflow-checklist/page.tsx
index 23077a4c..cba7381f 100644
--- a/src/app/[lang]/openapi-debugging-workflow-checklist/page.tsx
+++ b/src/app/[lang]/openapi-debugging-workflow-checklist/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function OpenapiDebuggingWorkflowChecklistPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function OpenapiDebuggingWorkflowChecklistPage({ params }:
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C2: API Debugging</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">OpenAPI debugging workflow checklist</h1>
@@ -85,6 +86,6 @@ action: align response status in service or spec`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
index 10c39637..90975a7d 100644
--- a/src/app/[lang]/page.tsx
+++ b/src/app/[lang]/page.tsx
@@ -189,12 +189,12 @@ export default async function Home({ params }: { params: Promise<{ lang: string
   return (
     <div className="relative flex flex-1 overflow-hidden">
       <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
-        <div className="absolute left-[8%] top-[-24%] h-[320px] w-[320px] rounded-full bg-cyan-500/20 blur-2xl sm:h-[460px] sm:w-[460px] sm:blur-3xl lg:h-[540px] lg:w-[540px]" />
-        <div className="absolute right-0 top-[-26%] h-[320px] w-[320px] rounded-full bg-amber-500/16 blur-2xl sm:right-[-8%] sm:h-[460px] sm:w-[460px] sm:blur-3xl lg:h-[540px] lg:w-[540px]" />
+        <div className="absolute left-[8%] top-[-160px] h-[320px] w-[320px] rounded-full bg-cyan-500/20 blur-2xl sm:top-[-220px] sm:h-[460px] sm:w-[460px] sm:blur-3xl lg:top-[-280px] lg:h-[540px] lg:w-[540px]" />
+        <div className="absolute right-0 top-[-170px] h-[320px] w-[320px] rounded-full bg-amber-500/16 blur-2xl sm:right-[-8%] sm:top-[-240px] sm:h-[460px] sm:w-[460px] sm:blur-3xl lg:top-[-300px] lg:h-[540px] lg:w-[540px]" />
         <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background/90" />
       </div>
 
-      <div className="mx-auto flex w-full max-w-screen-2xl flex-col gap-12 px-4 pb-20 pt-10 sm:px-6 lg:gap-16 lg:px-8">
+      <div data-route-width-exception="home-shell" className="mx-auto flex w-full max-w-screen-2xl flex-col gap-12 px-4 pb-20 pt-10 sm:px-6 lg:gap-16 lg:px-8">
         {/* Hero Section */}
         <section
           className="home-reveal relative overflow-hidden rounded-[2rem] border border-border/75 bg-card/70 px-6 py-12 shadow-[0_32px_80px_-36px_rgba(0,0,0,0.75)] backdrop-blur-md dark:shadow-black/60 md:backdrop-blur-xl sm:px-8 sm:py-14 lg:px-12 lg:py-16"
@@ -203,7 +203,7 @@ export default async function Home({ params }: { params: Promise<{ lang: string
           <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(130deg,hsl(189_94%_46%/0.14),transparent_40%,hsl(31_94%_56%/0.14))]" />
           <div className="pointer-events-none absolute inset-0 opacity-30 [background-image:linear-gradient(hsl(215_30%_84%/0.26)_1px,transparent_1px),linear-gradient(90deg,hsl(215_30%_84%/0.26)_1px,transparent_1px)] [background-size:34px_34px]" />
 
-          <div className="relative max-w-4xl mx-auto text-center">
+          <div data-route-width-exception="home-hero" className="relative max-w-4xl mx-auto text-center">
             <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/12 px-4 py-2 text-sm font-medium text-primary shadow-sm shadow-primary/20">
               <span className="h-2 w-2 rounded-full bg-primary shadow-[0_0_0_6px_rgba(14,165,233,0.22)] animate-pulse" />
               {t.site.hero_badge}
@@ -217,7 +217,7 @@ export default async function Home({ params }: { params: Promise<{ lang: string
               {t.site.hero_title_2}
             </h1>
 
-            <p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg lg:text-xl">
+            <p data-route-width-exception="home-copy" className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg lg:text-xl">
               {t.site.hero_subtitle}
             </p>
 
diff --git a/src/app/[lang]/pricing/page.tsx b/src/app/[lang]/pricing/page.tsx
index 6a43718f..34dc4f5f 100644
--- a/src/app/[lang]/pricing/page.tsx
+++ b/src/app/[lang]/pricing/page.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link"
 import { Check, Sparkles, ShieldCheck, LockKeyhole, ArrowUpRight, HeartHandshake, ServerCog, Mail } from "lucide-react"
 import { useLang } from "@/core/i18n/lang-provider"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default function PricingPage() {
     const { t, lang } = useLang()
@@ -40,7 +41,7 @@ export default function PricingPage() {
     ]
 
     return (
-        <div className="mx-auto w-full max-w-6xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <section className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-8">
                 <p className="inline-flex items-center rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
                     {p.pricing_badge}
@@ -140,6 +141,6 @@ export default function PricingPage() {
                     {p.pricing_self_hosting_guide}
                 </Link>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/privacy/page.tsx b/src/app/[lang]/privacy/page.tsx
index b8487ae5..061d5dea 100644
--- a/src/app/[lang]/privacy/page.tsx
+++ b/src/app/[lang]/privacy/page.tsx
@@ -5,6 +5,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { TOOL_REGISTRY } from "@/core/registry"
 import { getExternalRequestToolDisclosures } from "@/core/registry/privacy"
 import { LocalDataControls } from "@/features/privacy/local-data-controls"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default function PrivacyPage() {
     const { t, lang } = useLang()
@@ -28,7 +29,7 @@ export default function PrivacyPage() {
         .sort((a, b) => a.title.localeCompare(b.title, lang))
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-6">
+        <StaticPageContainer className="space-y-6">
             <section className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <h1 className="text-3xl font-semibold tracking-tight">{p.privacy_title}</h1>
                 <p className="mt-2 text-sm text-muted-foreground">{p.privacy_last_updated}</p>
@@ -91,6 +92,6 @@ export default function PrivacyPage() {
                 </article>
                 <LocalDataControls />
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/roadmap/page.tsx b/src/app/[lang]/roadmap/page.tsx
index 0177db65..dc406def 100644
--- a/src/app/[lang]/roadmap/page.tsx
+++ b/src/app/[lang]/roadmap/page.tsx
@@ -4,6 +4,7 @@ import { CheckCircle2, GitPullRequest, Map, ShieldCheck, ThumbsUp } from "lucide
 import type { Locale } from "@/core/i18n/i18n"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 const ROADMAP_COPY: Record<Locale, {
     badge: string
@@ -137,7 +138,7 @@ export default async function RoadmapPage({ params }: { params: Promise<{ lang:
     const copy = ROADMAP_COPY[lang]
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <section className="rounded-lg border border-border/70 bg-card/55 p-6 sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{copy.badge}</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">{t.pages.roadmap_title}</h1>
@@ -198,6 +199,6 @@ export default async function RoadmapPage({ params }: { params: Promise<{ lang:
                     </div>
                 </div>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/robots-txt-testing-checklist/page.tsx b/src/app/[lang]/robots-txt-testing-checklist/page.tsx
index 2f63a662..2c058114 100644
--- a/src/app/[lang]/robots-txt-testing-checklist/page.tsx
+++ b/src/app/[lang]/robots-txt-testing-checklist/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function RobotsTxtTestingChecklistPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function RobotsTxtTestingChecklistPage({ params }: { params
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C3: Network & Security</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">Robots.txt testing checklist</h1>
@@ -82,6 +83,6 @@ indexing risk: critical`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/self-hosting/page.tsx b/src/app/[lang]/self-hosting/page.tsx
index e8ee1bf4..530c4c1e 100644
--- a/src/app/[lang]/self-hosting/page.tsx
+++ b/src/app/[lang]/self-hosting/page.tsx
@@ -4,6 +4,7 @@ import { HeartHandshake, Server, ShieldCheck, WifiOff } from "lucide-react"
 import type { Locale } from "@/core/i18n/i18n"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 const SELF_HOSTING_COPY: Record<Locale, {
     badge: string
@@ -144,7 +145,7 @@ export default async function SelfHostingPage({ params }: { params: Promise<{ la
     const copy = SELF_HOSTING_COPY[lang]
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <section className="rounded-lg border border-border/70 bg-card/55 p-6 sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{copy.badge}</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">{t.pages.self_hosting_title}</h1>
@@ -199,6 +200,6 @@ export default async function SelfHostingPage({ params }: { params: Promise<{ la
                     </Link>
                 </article>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/support/page.tsx b/src/app/[lang]/support/page.tsx
index ad74e793..3fc7f1d3 100644
--- a/src/app/[lang]/support/page.tsx
+++ b/src/app/[lang]/support/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { ArrowUpRight, CheckCircle2, HeartHandshake, Mail, ServerCog, ShieldCheck } from "lucide-react"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 const EMAIL_ADDRESS = "contact@byteflow.tools"
 const GITHUB_REPOSITORY_URL = "https://github.com/baixiangcpp/byteflow.tools"
@@ -21,7 +22,7 @@ export default async function SupportPage({ params }: { params: Promise<{ lang:
     ]
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <section className="rounded-lg border border-border/70 bg-card/55 p-6 sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{p.support_badge}</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">{p.support_title}</h1>
@@ -84,6 +85,6 @@ export default async function SupportPage({ params }: { params: Promise<{ lang:
                     <ArrowUpRight className="h-3.5 w-3.5" aria-hidden="true" />
                 </a>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/svg-optimization-and-conversion-best-practices/page.tsx b/src/app/[lang]/svg-optimization-and-conversion-best-practices/page.tsx
index 73c349a3..cfde65c9 100644
--- a/src/app/[lang]/svg-optimization-and-conversion-best-practices/page.tsx
+++ b/src/app/[lang]/svg-optimization-and-conversion-best-practices/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function SvgOptimizationAndConversionBestPracticesPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function SvgOptimizationAndConversionBestPracticesPage({ pa
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C5: Image Processing</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">SVG optimization and conversion best practices</h1>
@@ -105,6 +106,6 @@ Derived PNG in required target sizes`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/terms/page.tsx b/src/app/[lang]/terms/page.tsx
index 5af91f61..f53e221f 100644
--- a/src/app/[lang]/terms/page.tsx
+++ b/src/app/[lang]/terms/page.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { useLang } from "@/core/i18n/lang-provider"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default function TermsPage() {
     const { t } = useLang()
@@ -15,7 +16,7 @@ export default function TermsPage() {
     ]
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-6">
+        <StaticPageContainer className="space-y-6">
             <section className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <h1 className="text-3xl font-semibold tracking-tight">{p.terms_title}</h1>
                 <p className="mt-2 text-sm text-muted-foreground">{p.terms_last_updated}</p>
@@ -29,6 +30,6 @@ export default function TermsPage() {
                     </article>
                 ))}
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
\ No newline at end of file
diff --git a/src/app/[lang]/trust-center/page.tsx b/src/app/[lang]/trust-center/page.tsx
index cc1f5ac1..b42f6b92 100644
--- a/src/app/[lang]/trust-center/page.tsx
+++ b/src/app/[lang]/trust-center/page.tsx
@@ -8,6 +8,7 @@ import { TOOL_REGISTRY } from "@/core/registry"
 import { getExternalRequestToolDisclosures } from "@/core/registry/privacy"
 import { JsonLdScript } from "@/core/seo/components/json-ld-script"
 import { SITE_URL, buildCanonicalUrl } from "@/core/seo/urls"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 const SECURITY_ADVISORY_URL = "https://github.com/baixiangcpp/byteflow.tools/security/advisories/new"
 const GITHUB_REPO_URL = "https://github.com/baixiangcpp/byteflow.tools"
@@ -142,7 +143,7 @@ export default async function TrustCenterPage({
     }
 
     return (
-        <div className="mx-auto w-full max-w-6xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <JsonLdScript data-jsonld="trust-center" jsonLd={jsonLd} />
 
             <section className="rounded-lg border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
@@ -378,6 +379,6 @@ export default async function TrustCenterPage({
                     </a>
                 </div>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/url-encoding-explained-common-mistakes-and-solutions/page.tsx b/src/app/[lang]/url-encoding-explained-common-mistakes-and-solutions/page.tsx
index 3314e5ed..50eb779f 100644
--- a/src/app/[lang]/url-encoding-explained-common-mistakes-and-solutions/page.tsx
+++ b/src/app/[lang]/url-encoding-explained-common-mistakes-and-solutions/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function UrlEncodingExplainedCommonMistakesAndSolutionsPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function UrlEncodingExplainedCommonMistakesAndSolutionsPage
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C6: Encoding & Hashing</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">URL encoding explained: common mistakes and solutions</h1>
@@ -104,6 +105,6 @@ Server decodes to original string`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/[lang]/validate-json-before-api-requests/page.tsx b/src/app/[lang]/validate-json-before-api-requests/page.tsx
index 620e4c81..f74a5b58 100644
--- a/src/app/[lang]/validate-json-before-api-requests/page.tsx
+++ b/src/app/[lang]/validate-json-before-api-requests/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { isValidLocale } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { LocalizedArticlePage } from "@/core/seo/components/localized-article-page"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 export default async function ValidateJsonBeforeApiRequestsPage({ params }: { params: Promise<{ lang: string }> }) {
     const { lang } = await params
@@ -17,7 +18,7 @@ export default async function ValidateJsonBeforeApiRequestsPage({ params }: { pa
     }
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <header className="rounded-2xl border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
                 <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Cluster C1: JSON Ecosystem</p>
                 <h1 className="mt-3 text-3xl font-semibold tracking-tight">How to validate JSON before API requests</h1>
@@ -87,6 +88,6 @@ reason: enabled must be boolean`}</pre>
                     </Link>
                 </p>
             </footer>
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index bee6b181..27611541 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -154,26 +154,25 @@
     min-height: 44px !important;
     min-width: 44px !important;
   }
-}
-}
 
-@layer components {
-  @keyframes home-reveal {
-    from {
-      opacity: 0;
-      transform: translateY(12px);
-    }
+  textarea[data-input-intent="shortText"] {
+    min-height: 9rem !important;
+  }
+
+  textarea[data-input-intent="payload"],
+  textarea[data-input-intent="generatedOutput"] {
+    min-height: 16rem !important;
+  }
 
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  textarea[data-input-intent="workbench"] {
+    min-height: 22rem !important;
   }
+}
+}
 
+@layer components {
   .home-reveal {
-    opacity: 0;
-    animation: home-reveal 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
-    will-change: opacity, transform;
+    opacity: 1;
   }
 
   .tool-pane-header {
@@ -207,9 +206,6 @@
 @media (prefers-reduced-motion: reduce) {
   .home-reveal {
     opacity: 1;
-    animation: none;
-    transform: none;
-    will-change: auto;
   }
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dfb5e6b3..dd8a4df9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import Script from "next/script";
 import "@/app/globals.css";
 import { DeferredToaster } from "@/components/ui/deferred-toaster";
 import { PWA_THEME_COLOR } from "@/core/pwa/constants";
@@ -40,7 +39,9 @@ export default function RootLayout({
       <head>
         <link rel="manifest" id="app-manifest" href="/manifest.json" />
         <meta name="theme-color" content={PWA_THEME_COLOR} />
-        <Script src="/runtime/theme-manifest-bootstrap.js" strategy="beforeInteractive" />
+        {/* This tiny same-origin script must block first paint so saved light themes cannot flash dark. */}
+        {/* eslint-disable-next-line @next/next/no-sync-scripts */}
+        <script src="/runtime/theme-manifest-bootstrap.js" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
       </head>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 5efc6b2e..ad6430d7 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -4,6 +4,7 @@ import { AlertTriangle, Home, Layers, Search, ShieldAlert, Wrench } from "lucide
 import { getAllToolsHref } from "@/core/routing/all-tools-route"
 import { MENU_GROUP_DEFS } from "@/core/registry/menu-groups"
 import { DEFAULT_OG_IMAGE } from "@/core/seo/seo"
+import { RouteViewportContainer, StaticPageContainer } from "@/components/layout/page-container"
 
 const TITLE = "Page not found | byteflow.tools"
 const DESCRIPTION = "The page does not exist. Choose a language and continue from the all-tools directory."
@@ -36,8 +37,9 @@ export const metadata: Metadata = {
 
 export default function RootNotFound() {
     return (
-        <main className="mx-auto flex min-h-[60vh] w-full max-w-3xl items-center px-6 py-12">
-            <section className="w-full rounded-2xl border border-border/60 bg-card/45 px-6 py-12 md:px-10">
+        <RouteViewportContainer as="main" className="flex min-h-[60vh] items-center py-12">
+            <StaticPageContainer>
+                <section className="w-full rounded-2xl border border-border/60 bg-card/45 px-6 py-12 md:px-10">
                 <div className="inline-flex h-12 w-12 items-center justify-center rounded-xl border border-amber-400/35 bg-amber-400/10 text-amber-500">
                     <AlertTriangle className="h-6 w-6" />
                 </div>
@@ -90,7 +92,8 @@ export default function RootNotFound() {
                     </Link>
                     .
                 </div>
-            </section>
-        </main>
+                </section>
+            </StaticPageContainer>
+        </RouteViewportContainer>
     )
 }
diff --git a/src/components/layout/app-layout.tsx b/src/components/layout/app-layout.tsx
index 1dfb1097..ce081aee 100644
--- a/src/components/layout/app-layout.tsx
+++ b/src/components/layout/app-layout.tsx
@@ -32,7 +32,7 @@ export function AppLayout({
         : "relative flex min-h-0 flex-1 flex-col bg-background/55"
     const contentClassName = isHomePage
         ? "flex-1 min-h-0"
-        : "flex-1 min-h-0 mx-auto w-full max-w-screen-2xl px-4 pb-10 pt-4 md:px-8 md:pt-8 lg:px-10"
+        : "min-h-0 flex-1 pb-10 pt-4 md:pt-8"
 
     return (
         <div className="flex min-h-screen flex-col bg-background pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)]">
diff --git a/src/components/layout/app-runtime.tsx b/src/components/layout/app-runtime.tsx
index d6a10870..b7b4909f 100644
--- a/src/components/layout/app-runtime.tsx
+++ b/src/components/layout/app-runtime.tsx
@@ -259,7 +259,7 @@ export function AppRuntime({ pathname }: { pathname: string }) {
                     aria-live="polite"
                     className="fixed inset-x-0 top-0 z-50 border-b border-amber-300/70 bg-amber-50 px-4 py-3 text-amber-950 shadow-sm dark:border-amber-500/45 dark:bg-amber-950 dark:text-amber-50"
                 >
-                    <div className="mx-auto flex max-w-6xl flex-col gap-2 text-sm sm:flex-row sm:items-center sm:justify-between">
+                    <div data-route-width-exception="runtime-banner" className="mx-auto flex max-w-6xl flex-col gap-2 text-sm sm:flex-row sm:items-center sm:justify-between">
                         <div className="flex items-start gap-2">
                             <WifiOff className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
                             <div>
diff --git a/src/components/layout/deferred-navbar-controls.tsx b/src/components/layout/deferred-navbar-controls.tsx
index 0376950f..ea908e5a 100644
--- a/src/components/layout/deferred-navbar-controls.tsx
+++ b/src/components/layout/deferred-navbar-controls.tsx
@@ -1,7 +1,8 @@
 "use client"
 
+import * as React from "react"
 import dynamic from "next/dynamic"
-import { Globe, Sun } from "lucide-react"
+import { ChevronDown, Globe, Moon, Sun } from "lucide-react"
 import { useDeferredMount } from "@/hooks/use-deferred-mount"
 
 const LanguageSwitcher = dynamic(
@@ -14,33 +15,61 @@ const ThemeToggle = dynamic(
     { ssr: false },
 )
 
-export function DeferredNavbarControls() {
-    const isMounted = useDeferredMount({ delayMs: 1200, activateOnInteraction: true })
+function LanguageControlPlaceholder({ languageLabel }: { languageLabel: string }) {
+    return (
+        <div className="flex h-11 items-center gap-1 px-2.5 pointer-events-none" aria-hidden="true">
+            <Globe className="h-4 w-4 opacity-70" />
+            <span className="hidden 2xl:inline text-xs opacity-70">{languageLabel}</span>
+            <ChevronDown className="h-3 w-3 opacity-50" />
+        </div>
+    )
+}
 
-    if (!isMounted) {
-        return (
-            <>
-                <div
-                    className="flex h-11 items-center gap-1 px-2.5 pointer-events-none"
-                    aria-hidden="true"
-                >
-                    <Globe className="h-4 w-4 opacity-70" />
-                    <span className="hidden 2xl:inline text-xs opacity-0">Language</span>
-                </div>
-                <div
-                    className="flex h-11 w-11 items-center justify-center pointer-events-none"
-                    aria-hidden="true"
-                >
-                    <Sun className="h-4 w-4 opacity-70" />
-                </div>
-            </>
-        )
-    }
+function ThemeControlPlaceholder() {
+    return (
+        <div className="flex h-11 w-11 items-center justify-center pointer-events-none" aria-hidden="true">
+            <Sun className="h-4 w-4 opacity-70 dark:hidden" />
+            <Moon className="hidden h-4 w-4 opacity-70 dark:block" />
+        </div>
+    )
+}
+
+export function DeferredNavbarControls({ languageLabel }: { languageLabel: string }) {
+    const isMounted = useDeferredMount({ delayMs: 1200, activateOnInteraction: true })
+    const [languageReady, setLanguageReady] = React.useState(false)
+    const [themeReady, setThemeReady] = React.useState(false)
+    const handleLanguageReady = React.useCallback(() => setLanguageReady(true), [])
+    const handleThemeReady = React.useCallback(() => setThemeReady(true), [])
 
     return (
         <>
-            <LanguageSwitcher />
-            <ThemeToggle />
+            <div className="relative h-11 shrink-0" data-navbar-language-footprint>
+                <div className="invisible">
+                    <LanguageControlPlaceholder languageLabel={languageLabel} />
+                </div>
+                {!languageReady ? (
+                    <div className="absolute inset-0">
+                        <LanguageControlPlaceholder languageLabel={languageLabel} />
+                    </div>
+                ) : null}
+                {isMounted ? (
+                    <div className="absolute inset-0">
+                        <LanguageSwitcher onReady={handleLanguageReady} />
+                    </div>
+                ) : null}
+            </div>
+            <div className="relative h-11 w-11 shrink-0" data-navbar-theme-footprint>
+                {!themeReady ? (
+                    <div className="absolute inset-0">
+                        <ThemeControlPlaceholder />
+                    </div>
+                ) : null}
+                {isMounted ? (
+                    <div className="absolute inset-0">
+                        <ThemeToggle onReady={handleThemeReady} />
+                    </div>
+                ) : null}
+            </div>
         </>
     )
 }
diff --git a/src/components/layout/footer-content.tsx b/src/components/layout/footer-content.tsx
index bb81cb1f..28366e4b 100644
--- a/src/components/layout/footer-content.tsx
+++ b/src/components/layout/footer-content.tsx
@@ -32,7 +32,7 @@ export function FooterContent({
             <div className="pointer-events-none absolute -right-16 top-12 h-52 w-52 rounded-full bg-primary/8 blur-3xl" />
             <div className="pointer-events-none absolute -left-20 bottom-6 h-48 w-48 rounded-full bg-accent/20 blur-3xl" />
 
-            <div className="relative mx-auto w-full max-w-screen-2xl px-4 py-14 sm:px-6 lg:px-8">
+            <div data-route-width-exception="global-shell" className="relative mx-auto w-full max-w-screen-2xl px-4 py-14 sm:px-6 lg:px-8">
                 <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
                     <div className="space-y-5 md:col-span-8">
                         <Link
diff --git a/src/components/layout/lang-not-found-content.tsx b/src/components/layout/lang-not-found-content.tsx
index 0a6b6386..ba7ab681 100644
--- a/src/components/layout/lang-not-found-content.tsx
+++ b/src/components/layout/lang-not-found-content.tsx
@@ -28,7 +28,7 @@ export function LangNotFoundContent() {
         requireTranslationValue(t.tools?.[toolKey]?.title, `tools.${toolKey}.title`)
 
     return (
-        <section className="mx-auto flex w-full max-w-3xl flex-col gap-6 rounded-2xl border border-border/60 bg-card/45 px-6 py-12 md:px-10">
+        <section data-route-width-exception="focused-status" className="mx-auto flex w-full max-w-3xl flex-col gap-6 rounded-2xl border border-border/60 bg-card/45 px-6 py-12 md:px-10">
             <div className="inline-flex h-12 w-12 items-center justify-center rounded-xl border border-amber-400/35 bg-amber-400/10 text-amber-500">
                 <AlertTriangle className="h-6 w-6" />
             </div>
diff --git a/src/components/layout/language-switcher.tsx b/src/components/layout/language-switcher.tsx
index 94233f0f..0c0fdf6a 100644
--- a/src/components/layout/language-switcher.tsx
+++ b/src/components/layout/language-switcher.tsx
@@ -15,12 +15,16 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 
-export function LanguageSwitcher() {
+export function LanguageSwitcher({ onReady }: { onReady?: () => void }) {
     const { lang } = useLang()
     const router = useRouter()
     const pathname = usePathname()
     const searchParams = useSearchParams()
 
+    React.useLayoutEffect(() => {
+        onReady?.()
+    }, [onReady])
+
     const switchLang = (newLang: Locale) => {
         if (newLang === lang) return
 
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index 5356b8f8..92c7e080 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -1,9 +1,9 @@
 import Link from "next/link"
-import { ArrowUpRight, Search, Workflow } from "lucide-react"
+import { ArrowUpRight, ChevronDown, Globe, Search, Sun, Workflow } from "lucide-react"
 import { DeferredMobileNavMenu } from "./deferred-mobile-nav-menu"
 import { DeferredNavbarControls } from "./deferred-navbar-controls"
 import { Button } from "@/components/ui/button"
-import type { Locale } from "@/core/i18n/i18n"
+import { LOCALE_NAMES, type Locale } from "@/core/i18n/i18n"
 import { getAllToolsHref } from "@/core/routing/all-tools-route"
 import { cn } from "@/core/utils/utils"
 import { buildHomepageHref } from "@/core/routing/homepage-route"
@@ -30,7 +30,7 @@ export function Navbar({
             className="sticky top-0 z-50 px-3 pt-3 md:px-6 md:pt-4"
             style={{ paddingTop: "max(env(safe-area-inset-top), 1rem)" }}
         >
-            <div className="mx-auto flex h-16 w-full max-w-screen-2xl items-center gap-2 rounded-2xl border border-border/70 bg-background/80 px-3 shadow-xl shadow-black/10 backdrop-blur-xl supports-[backdrop-filter]:bg-background/72 dark:shadow-black/35 md:gap-3 md:px-4">
+            <div data-route-width-exception="global-shell" className="mx-auto flex h-16 w-full max-w-screen-2xl items-center gap-2 rounded-2xl border border-border/70 bg-background/80 px-3 shadow-xl shadow-black/10 backdrop-blur-xl supports-[backdrop-filter]:bg-background/72 dark:shadow-black/35 md:gap-3 md:px-4">
                 <Link
                     href={homeHref}
                     className="mr-1 flex shrink-0 items-center gap-2.5 rounded-lg px-1.5 py-1 transition-colors hover:bg-muted/65 max-[420px]:mr-0 max-[420px]:gap-2"
@@ -111,7 +111,21 @@ export function Navbar({
                             <span className="text-foreground">K</span>
                         </kbd>
                     </Button>
-                    <DeferredNavbarControls />
+                    <div className="relative h-11 shrink-0" data-navbar-controls-footprint>
+                        <div className="invisible flex h-11 items-center gap-1.5" aria-hidden="true">
+                            <div className="flex h-11 items-center gap-1 px-2.5">
+                                <Globe className="h-4 w-4" />
+                                <span className="hidden text-xs 2xl:inline">{LOCALE_NAMES[lang]}</span>
+                                <ChevronDown className="h-3 w-3" />
+                            </div>
+                            <div className="flex h-11 w-11 items-center justify-center">
+                                <Sun className="h-4 w-4" />
+                            </div>
+                        </div>
+                        <div className="absolute inset-0 flex items-center gap-1.5">
+                            <DeferredNavbarControls languageLabel={LOCALE_NAMES[lang]} />
+                        </div>
+                    </div>
                 </div>
             </div>
         </header>
diff --git a/src/components/layout/page-container.tsx b/src/components/layout/page-container.tsx
new file mode 100644
index 00000000..a52b5ecc
--- /dev/null
+++ b/src/components/layout/page-container.tsx
@@ -0,0 +1,84 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react"
+import { cn } from "@/core/utils/utils"
+import {
+    ROUTE_CONTAINER_CLASS_NAMES,
+    ROUTE_VIEWPORT_CLASS_NAME,
+    type RouteContainerIntent,
+} from "./route-container-contract"
+
+type ContainerElement = "article" | "div" | "main" | "section"
+
+type ContainerProps = HTMLAttributes<HTMLElement> & {
+    as?: ContainerElement
+    children: ReactNode
+}
+
+type RouteShellContainerProps = ContainerProps & {
+    intent: RouteContainerIntent
+}
+
+function Container({
+    as = "div",
+    children,
+    className,
+    ...props
+}: ContainerProps & { className: string }) {
+    const Component = as as ElementType
+    return (
+        <Component className={className} {...props}>
+            {children}
+        </Component>
+    )
+}
+
+export function RouteViewportContainer({ children, className, ...props }: ContainerProps) {
+    return (
+        <Container className={cn(ROUTE_VIEWPORT_CLASS_NAME, className)} {...props}>
+            {children}
+        </Container>
+    )
+}
+
+export function RouteShellContainer({ intent, children, className, ...props }: RouteShellContainerProps) {
+    return (
+        <Container
+            className={cn(ROUTE_CONTAINER_CLASS_NAMES[intent], className)}
+            data-route-container-intent={intent}
+            {...props}
+        >
+            {children}
+        </Container>
+    )
+}
+
+export function ToolPageContainer({ children, className, ...props }: ContainerProps) {
+    return (
+        <RouteShellContainer className={className} data-page-container="tool" intent="tool" {...props}>
+            {children}
+        </RouteShellContainer>
+    )
+}
+
+export function WideToolPageContainer({ children, className, ...props }: ContainerProps) {
+    return (
+        <RouteShellContainer className={className} data-page-container="wide-tool" intent="wide-tool" {...props}>
+            {children}
+        </RouteShellContainer>
+    )
+}
+
+export function StaticPageContainer({ children, className, ...props }: ContainerProps) {
+    return (
+        <RouteShellContainer className={className} data-page-container="static" intent="static" {...props}>
+            {children}
+        </RouteShellContainer>
+    )
+}
+
+export function CatalogPageContainer({ children, className, ...props }: ContainerProps) {
+    return (
+        <RouteShellContainer className={className} data-page-container="catalog" intent="catalog" {...props}>
+            {children}
+        </RouteShellContainer>
+    )
+}
diff --git a/src/components/layout/route-container-contract.ts b/src/components/layout/route-container-contract.ts
new file mode 100644
index 00000000..54a1fa7d
--- /dev/null
+++ b/src/components/layout/route-container-contract.ts
@@ -0,0 +1,99 @@
+import type { RouteType } from "@/core/routing/route-context"
+
+export type RouteContainerIntent = "tool" | "wide-tool" | "static" | "catalog"
+
+export const ROUTE_CONTAINER_CLASS_NAMES: Record<RouteContainerIntent, string> = {
+    tool: "mx-auto w-full max-w-6xl",
+    "wide-tool": "mx-auto w-full max-w-[1400px]",
+    static: "mx-auto w-full max-w-5xl",
+    catalog: "mx-auto w-full max-w-6xl",
+}
+
+export const ROUTE_VIEWPORT_CLASS_NAME = "mx-auto w-full max-w-screen-2xl px-4 md:px-8 lg:px-10"
+
+const WIDE_TOOL_SLUGS = new Set([
+    "asn1-der-inspector",
+    "base64-encode-decode",
+    "code-to-image-converter",
+    "css-formatter",
+    "css-minifier",
+    "csv-diff",
+    "csv-json-converter",
+    "curl-to-code",
+    "env-parser",
+    "graphql-workbench",
+    "gzip-brotli-lab",
+    "har-viewer-sanitizer",
+    "header-diff",
+    "hex-bytes-workbench",
+    "html-css-beautifier",
+    "html-encoder-decoder",
+    "html-formatter",
+    "html-minifier",
+    "html-to-markdown",
+    "javascript-formatter",
+    "javascript-minifier",
+    "jq-playground",
+    "json-diff-viewer",
+    "json-formatter",
+    "json-schema-workbench",
+    "json-to-typescript",
+    "jsonpath-playground",
+    "jwt-decoder",
+    "letter-counter",
+    "local-log-parser",
+    "log-scrubber",
+    "markdown-preview",
+    "multiple-whitespace-remover",
+    "ndjson-formatter",
+    "openapi-diff",
+    "openapi-mock",
+    "openapi-viewer",
+    "pipeline-builder",
+    "regex-generator",
+    "saml-decoder",
+    "sql-formatter",
+    "structured-data-visualizer",
+    "svg-optimizer",
+    "text-diff-checker",
+    "unicode-inspector",
+    "url-encode-decode",
+    "xml-formatter",
+    "yaml-json-converter",
+    "yaml-merge-patch-explorer",
+    "yq-playground",
+])
+
+const CATALOG_ROUTE_SLUGS = new Set(["alternatives", "compare", "fix", "how-to"])
+
+export const REPRESENTATIVE_ROUTE_CONTAINER_INTENTS = {
+    "all-tools": "catalog",
+    "install-app": "static",
+    "json-formatter": "wide-tool",
+    "pipeline-builder": "wide-tool",
+    "qr-code-generator": "tool",
+    support: "static",
+} as const satisfies Record<string, RouteContainerIntent>
+
+export function getToolContainerIntent(slug: string | null | undefined): RouteContainerIntent {
+    return slug && WIDE_TOOL_SLUGS.has(slug) ? "wide-tool" : "tool"
+}
+
+export function getRouteContainerIntent(route: {
+    routeType: RouteType
+    slug: string | null
+}): RouteContainerIntent {
+    const explicitIntent = route.slug
+        ? REPRESENTATIVE_ROUTE_CONTAINER_INTENTS[route.slug as keyof typeof REPRESENTATIVE_ROUTE_CONTAINER_INTENTS]
+        : undefined
+    if (explicitIntent) return explicitIntent
+
+    if (route.routeType === "tool") return getToolContainerIntent(route.slug)
+    if (route.slug && CATALOG_ROUTE_SLUGS.has(route.slug)) return "catalog"
+    if (route.routeType === "hub") return "catalog"
+    return "static"
+}
+
+export function isWideToolSlug(slug: string): boolean {
+    return WIDE_TOOL_SLUGS.has(slug)
+}
diff --git a/src/components/layout/route-page-chrome.tsx b/src/components/layout/route-page-chrome.tsx
index 07e893dc..9fd82d09 100644
--- a/src/components/layout/route-page-chrome.tsx
+++ b/src/components/layout/route-page-chrome.tsx
@@ -14,6 +14,8 @@ import { recordRecentToolKey } from "@/core/storage/tool-discovery-state"
 import { getRouteToolBySlug } from "@/generated/route-tool-lookup"
 import { ToolTrustHeader } from "@/features/tool-shell/tool-trust-header"
 import { ToolFavoriteControl } from "./tool-favorite-control"
+import { RouteShellContainer, RouteViewportContainer } from "./page-container"
+import { getRouteContainerIntent } from "./route-container-contract"
 
 const EXCLUDED_CONTENT_INTRO_SLUGS = new Set(["about", "pricing", "contact", "privacy", "terms", "install-app", "support"])
 
@@ -62,6 +64,7 @@ function RoutePageChromeContent({ children, pathname }: RoutePageChromeProps) {
     }, [lang, routeContext])
 
     const routeLocale = routeContext.locale ?? lang
+    const containerIntent = getRouteContainerIntent(routeContext)
     const shouldRenderFallbackRelatedTools = Boolean(activeTool?.key) && !INLINE_RELATED_TOOLS_TOOL_SLUGS.has(activeTool?.slug ?? "")
     const installInlineCopy = {
         title: requireTranslationValue(t.common.install_inline_title, "common.install_inline_title"),
@@ -70,14 +73,18 @@ function RoutePageChromeContent({ children, pathname }: RoutePageChromeProps) {
     }
 
     return (
-        <>
+        <RouteViewportContainer data-route-viewport="true">
+            <RouteShellContainer intent={containerIntent} data-route-shell="true">
             {routeIntentCopy ? (
-                <div className="mb-4 rounded-xl border border-primary/25 bg-primary/8 px-4 py-2.5 text-sm text-muted-foreground">
+                <div
+                    className="mb-4 rounded-xl border border-primary/25 bg-primary/8 px-4 py-2.5 text-sm text-muted-foreground"
+                    data-route-chrome-part="intent"
+                >
                     {routeIntentCopy}
                 </div>
             ) : null}
             {activeTool ? (
-                <>
+                <div data-route-chrome-part="tool-meta">
                     <ToolFavoriteControl toolKey={activeTool.key} />
                     <ToolTrustHeader
                         slug={activeTool.slug}
@@ -89,11 +96,14 @@ function RoutePageChromeContent({ children, pathname }: RoutePageChromeProps) {
                         externalDataSent={activeTool.externalDataSent}
                         compliance={activeTool.compliance}
                     />
-                </>
+                </div>
             ) : null}
             {children}
             {routeContext.routeType === "tool" ? (
-                <section className="mt-8 rounded-xl border border-primary/30 bg-primary/8 px-4 py-3">
+                <section
+                    className="mt-8 rounded-xl border border-primary/30 bg-primary/8 px-4 py-3"
+                    data-route-chrome-part="install"
+                >
                     <p className="text-sm font-medium text-foreground">{installInlineCopy.title}</p>
                     <div className="mt-1 flex flex-col gap-2">
                         <p className="text-sm text-muted-foreground">{installInlineCopy.description}</p>
@@ -104,9 +114,12 @@ function RoutePageChromeContent({ children, pathname }: RoutePageChromeProps) {
                 </section>
             ) : null}
             {shouldRenderFallbackRelatedTools && activeTool?.key ? (
-                <RelatedTools toolKey={activeTool.key} source="fallback" />
+                <div data-route-chrome-part="related-tools">
+                    <RelatedTools toolKey={activeTool.key} source="fallback" />
+                </div>
             ) : null}
-        </>
+            </RouteShellContainer>
+        </RouteViewportContainer>
     )
 }
 
diff --git a/src/components/layout/seo-faq-section.tsx b/src/components/layout/seo-faq-section.tsx
index 6a15d91e..79f21f53 100644
--- a/src/components/layout/seo-faq-section.tsx
+++ b/src/components/layout/seo-faq-section.tsx
@@ -39,7 +39,7 @@ export function SeoFaqSection({ toolSlug }: { toolSlug?: string }) {
 
     return (
         <section className="border-t border-border/30 bg-muted/10 px-6 py-8 mt-auto">
-            <div className="max-w-3xl mx-auto space-y-6">
+            <div data-route-width-exception="readable-content" className="max-w-3xl mx-auto space-y-6">
                 <div>
                     <h2 className="text-lg font-bold tracking-tight">{data.title}</h2>
                     <p className="text-sm text-muted-foreground mt-1 leading-relaxed">{data.description}</p>
diff --git a/src/components/layout/theme-toggle.tsx b/src/components/layout/theme-toggle.tsx
index e623f4d2..f6d6dcd4 100644
--- a/src/components/layout/theme-toggle.tsx
+++ b/src/components/layout/theme-toggle.tsx
@@ -20,10 +20,14 @@ const THEME_OPTIONS: Array<{ value: ThemePreference; labelKey: "theme_light" | "
     { value: "system", labelKey: "theme_system" },
 ]
 
-export function ThemeToggle() {
+export function ThemeToggle({ onReady }: { onReady?: () => void }) {
     const { theme, setTheme } = useThemePreference()
     const { t } = useLang()
 
+    React.useLayoutEffect(() => {
+        onReady?.()
+    }, [onReady])
+
     const handleSetTheme = (theme: ThemePreference) => {
         setTheme(theme)
     }
diff --git a/src/components/layout/tool-favorite-control.tsx b/src/components/layout/tool-favorite-control.tsx
index 9bbbcd40..d1699f56 100644
--- a/src/components/layout/tool-favorite-control.tsx
+++ b/src/components/layout/tool-favorite-control.tsx
@@ -43,12 +43,16 @@ export function ToolFavoriteControl({ toolKey }: ToolFavoriteControlProps) {
                 variant="outline"
                 size="sm"
                 className="min-h-10 border-border bg-background shadow-xs"
+                aria-label={isFavorite ? removeLabel : addLabel}
                 aria-pressed={isFavorite}
                 title={isFavorite ? removeLabel : addLabel}
                 onClick={() => setFavoriteToolKeys(toggleFavoriteToolKey(toolKey))}
             >
                 <Heart className={cn("h-4 w-4", isFavorite ? "fill-primary text-primary" : "")} />
-                {isFavorite ? removeLabel : addLabel}
+                <span className="grid" aria-hidden="true">
+                    <span className={cn("col-start-1 row-start-1", isFavorite && "invisible")}>{addLabel}</span>
+                    <span className={cn("col-start-1 row-start-1", !isFavorite && "invisible")}>{removeLabel}</span>
+                </span>
             </Button>
             <span className="text-xs text-muted-foreground">{privacyLabel}</span>
         </div>
diff --git a/src/components/ui/input-intent.ts b/src/components/ui/input-intent.ts
new file mode 100644
index 00000000..4dbde596
--- /dev/null
+++ b/src/components/ui/input-intent.ts
@@ -0,0 +1,48 @@
+export const INPUT_INTENTS = [
+    "scalar",
+    "shortText",
+    "payload",
+    "workbench",
+    "generatedOutput",
+] as const
+
+export type InputIntent = (typeof INPUT_INTENTS)[number]
+
+type InputIntentControl = "input" | "textarea" | "editor" | "output"
+
+export const INPUT_INTENT_CLASS_NAMES: Record<InputIntent, Record<InputIntentControl, string>> = {
+    scalar: {
+        input: "h-11 lg:h-9",
+        textarea: "min-h-11 resize-y",
+        editor: "min-h-44",
+        output: "min-h-44",
+    },
+    shortText: {
+        input: "min-h-11",
+        textarea: "min-h-36 resize-y",
+        editor: "min-h-56",
+        output: "min-h-56",
+    },
+    payload: {
+        input: "min-h-11",
+        textarea: "min-h-64 resize-y",
+        editor: "min-h-80",
+        output: "min-h-80",
+    },
+    workbench: {
+        input: "min-h-11",
+        textarea: "min-h-[22rem] resize-y lg:resize-none",
+        editor: "min-h-[22rem]",
+        output: "min-h-[22rem]",
+    },
+    generatedOutput: {
+        input: "min-h-11",
+        textarea: "min-h-64 resize-y",
+        editor: "min-h-80",
+        output: "min-h-64",
+    },
+}
+
+export function inputIntentClassName(intent: InputIntent, control: InputIntentControl) {
+    return INPUT_INTENT_CLASS_NAMES[intent][control]
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 4f870b39..09015a19 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,16 +1,25 @@
 import * as React from "react"
 
 import { cn } from "@/core/utils/utils"
+import { inputIntentClassName, type InputIntent } from "@/components/ui/input-intent"
+
+export type InputProps = React.ComponentProps<"input"> & {
+  intent?: InputIntent
+}
+
+function Input({ className, intent, type, ...props }: InputProps) {
+  const resolvedIntent = intent ?? "shortText"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
       data-slot="input"
+      data-input-intent={resolvedIntent}
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-11 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm lg:h-9",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        intent ? inputIntentClassName(intent, "input") : "h-11 lg:h-9",
         className
       )}
       {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 28273cc6..dbbfffd7 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,13 +1,22 @@
 import * as React from "react"
 
 import { cn } from "@/core/utils/utils"
+import { inputIntentClassName, type InputIntent } from "@/components/ui/input-intent"
+
+export type TextareaProps = React.ComponentProps<"textarea"> & {
+  intent?: InputIntent
+}
+
+function Textarea({ className, intent, ...props }: TextareaProps) {
+  const resolvedIntent = intent ?? "payload"
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
       data-slot="textarea"
+      data-input-intent={resolvedIntent}
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        intent ? inputIntentClassName(intent, "textarea") : "field-sizing-content min-h-16",
         className
       )}
       {...props}
diff --git a/src/core/codegen/http-request.ts b/src/core/codegen/http-request.ts
new file mode 100644
index 00000000..2f28d95b
--- /dev/null
+++ b/src/core/codegen/http-request.ts
@@ -0,0 +1,157 @@
+import {
+    jsStringLiteral,
+    pythonJsonBodyExpression,
+    pythonStringLiteral,
+    rustStringLiteral,
+} from "./literals"
+
+export type NormalizedHttpBodyType = "json" | "raw" | "form"
+
+export interface NormalizedHttpHeader {
+    name: string
+    value: string
+}
+
+export interface NormalizedHttpBody {
+    type: NormalizedHttpBodyType
+    value: string
+}
+
+export interface NormalizedHttpRequest {
+    method: string
+    url: string
+    headers: NormalizedHttpHeader[]
+    body: NormalizedHttpBody | null
+}
+
+export interface HttpCodegenResult {
+    code: string
+    bodyOmitted: boolean
+}
+
+const FETCH_BODYLESS_METHODS = new Set(["GET", "HEAD"])
+const PYTHON_CONVENIENCE_METHODS = new Set(["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD"])
+const RUST_CONVENIENCE_METHODS = new Set(["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD"])
+
+export function normalizeHttpRequest(request: {
+    method: string
+    url: string
+    headers?: Iterable<NormalizedHttpHeader>
+    body?: NormalizedHttpBody | null
+}): NormalizedHttpRequest {
+    return {
+        method: request.method.toUpperCase(),
+        url: request.url,
+        headers: Array.from(request.headers ?? []),
+        body: request.body ?? null,
+    }
+}
+
+export function fetchMethodAllowsBody(method: string): boolean {
+    return !FETCH_BODYLESS_METHODS.has(method.toUpperCase())
+}
+
+function headersRecord(headers: NormalizedHttpHeader[]): Record<string, string> {
+    const result = Object.create(null) as Record<string, string>
+    for (const header of headers) result[header.name] = header.value
+    return result
+}
+
+export function emitJavaScriptFetch(request: NormalizedHttpRequest): HttpCodegenResult {
+    const optionLines = [`  method: ${jsStringLiteral(request.method)},`]
+    const headers = headersRecord(request.headers)
+    const bodyOmitted = Boolean(request.body && !fetchMethodAllowsBody(request.method))
+
+    if (Object.keys(headers).length > 0) {
+        optionLines.push(`  headers: ${JSON.stringify(headers, null, 2).replace(/\n/g, "\n  ")},`)
+    }
+    if (request.body && !bodyOmitted) {
+        optionLines.push(`  body: ${jsStringLiteral(request.body.value)},`)
+    }
+    if (bodyOmitted) {
+        optionLines.push("  // Fetch does not allow a body for GET or HEAD; the configured body was omitted.")
+    }
+
+    return {
+        bodyOmitted,
+        code: [
+            `const response = await fetch(${jsStringLiteral(request.url)}, {`,
+            ...optionLines,
+            "});",
+            "const data = await response.text();",
+            "console.log(data);",
+        ].join("\n"),
+    }
+}
+
+export function emitPythonRequests(request: NormalizedHttpRequest): HttpCodegenResult {
+    const imports = ["import requests"]
+    const lines: string[] = []
+    const args = [pythonStringLiteral(request.url)]
+    const headers = headersRecord(request.headers)
+
+    if (Object.keys(headers).length > 0) {
+        lines.push(`headers = ${JSON.stringify(headers, null, 4)}`, "")
+        args.push("headers=headers")
+    }
+
+    if (request.body) {
+        if (request.body.type === "json") {
+            const payloadExpression = pythonJsonBodyExpression(request.body.value)
+            if (payloadExpression) {
+                imports.unshift("import json")
+                lines.push(`payload = ${payloadExpression}`, "")
+                args.push("json=payload")
+            } else {
+                lines.push(`data = ${pythonStringLiteral(request.body.value)}`, "")
+                args.push("data=data")
+            }
+        } else {
+            lines.push(`data = ${pythonStringLiteral(request.body.value)}`, "")
+            args.push("data=data")
+        }
+    }
+
+    const method = request.method.toUpperCase()
+    const call = PYTHON_CONVENIENCE_METHODS.has(method)
+        ? `requests.${method.toLowerCase()}(${args.join(", ")})`
+        : `requests.request(${pythonStringLiteral(method)}, ${args.join(", ")})`
+
+    return {
+        bodyOmitted: false,
+        code: [
+            ...imports,
+            "",
+            ...lines,
+            `response = ${call}`,
+            "print(response.status_code)",
+            "print(response.text)",
+        ].join("\n"),
+    }
+}
+
+export function emitRustReqwest(request: NormalizedHttpRequest): HttpCodegenResult {
+    const lines: string[] = [
+        "use reqwest;", "", "#[tokio::main]", "async fn main() -> Result<(), Box<dyn std::error::Error>> {",
+        "    let client = reqwest::Client::new();", "",
+    ]
+    const method = request.method.toUpperCase()
+    const requestBuilder = RUST_CONVENIENCE_METHODS.has(method)
+        ? `client.${method.toLowerCase()}(${rustStringLiteral(request.url)})`
+        : `client.request(reqwest::Method::from_bytes(${rustStringLiteral(method)}.as_bytes())?, ${rustStringLiteral(request.url)})`
+    lines.push(`    let response = ${requestBuilder}`)
+    for (const header of request.headers) {
+        lines.push(`        .header(${rustStringLiteral(header.name)}, ${rustStringLiteral(header.value)})`)
+    }
+    if (request.body) {
+        lines.push(`        .body(${rustStringLiteral(request.body.value)})`)
+    }
+    lines.push("        .send()")
+    lines.push("        .await?;")
+    lines.push("")
+    lines.push("    println!(\"{}\", response.text().await?);")
+    lines.push("    Ok(())")
+    lines.push("}")
+
+    return { code: lines.join("\n"), bodyOmitted: false }
+}
diff --git a/src/core/files/csv-export.ts b/src/core/files/csv-export.ts
new file mode 100644
index 00000000..3b9c94c0
--- /dev/null
+++ b/src/core/files/csv-export.ts
@@ -0,0 +1,58 @@
+export type SpreadsheetSafeCsvCell = string | number | boolean | bigint | null | undefined
+
+type SpreadsheetSafeCsvOptions = {
+    delimiter?: string
+    lineEnding?: "\n" | "\r\n"
+}
+
+const FORMULA_TRIGGERS = new Set(["=", "+", "-", "@"])
+const LEADING_IGNORABLE_CHARACTER = /[\p{White_Space}\p{Cc}\p{Cf}]/u
+
+function hasDangerousSpreadsheetPrefix(value: string): boolean {
+    for (const character of value) {
+        // Tabs and carriage returns are formula triggers in spreadsheet imports.
+        if (character === "\t" || character === "\r") return true
+        if (LEADING_IGNORABLE_CHARACTER.test(character)) continue
+        return FORMULA_TRIGGERS.has(character)
+    }
+    return false
+}
+
+/**
+ * Prefix formula-like string cells with an apostrophe before CSV quoting.
+ * Typed numeric cells bypass this policy, so negative numbers stay numeric.
+ * Protected strings intentionally do not round-trip byte-for-byte.
+ */
+export function neutralizeSpreadsheetFormula(value: string): string {
+    return hasDangerousSpreadsheetPrefix(value) ? `'${value}` : value
+}
+
+export function serializeSpreadsheetSafeCsvCell(
+    cell: SpreadsheetSafeCsvCell,
+    delimiter = ",",
+): string {
+    if (!delimiter) throw new Error("CSV delimiter must not be empty.")
+
+    const value = typeof cell === "string"
+        ? neutralizeSpreadsheetFormula(cell)
+        : cell === null || cell === undefined
+            ? ""
+            : String(cell)
+
+    if (value.includes('"') || value.includes(delimiter) || value.includes("\n") || value.includes("\r")) {
+        return `"${value.replace(/"/g, '""')}"`
+    }
+    return value
+}
+
+export function serializeSpreadsheetSafeCsv(
+    rows: readonly (readonly SpreadsheetSafeCsvCell[])[],
+    options: SpreadsheetSafeCsvOptions = {},
+): string {
+    const delimiter = options.delimiter ?? ","
+    const lineEnding = options.lineEnding ?? "\n"
+
+    return rows
+        .map((row) => row.map((cell) => serializeSpreadsheetSafeCsvCell(cell, delimiter)).join(delimiter))
+        .join(lineEnding)
+}
diff --git a/src/core/files/file-input-policy.ts b/src/core/files/file-input-policy.ts
index 238099a9..eeea3192 100644
--- a/src/core/files/file-input-policy.ts
+++ b/src/core/files/file-input-policy.ts
@@ -8,6 +8,7 @@ export type FileInputPolicyId =
     | "image-standard"
     | "image-compact"
     | "image-logo"
+    | "qr-decode-image"
     | "svg"
     | "scan-image"
     | "recipe-json"
@@ -28,6 +29,8 @@ export type FileValidationResult =
     | { ok: true; file: File }
     | { ok: false; reason: "empty" | "too_large" | "unsupported_type"; message: string }
 
+type RasterImageMime = "image/png" | "image/jpeg" | "image/gif" | "image/webp" | "image/avif"
+
 const TEXT_EXTENSIONS = [
     ".txt",
     ".json",
@@ -113,6 +116,15 @@ export const FILE_INPUT_POLICIES = {
         allowedExtensions: [".png", ".jpg", ".jpeg", ".webp", ".gif"],
         allowedMimeTypes: ["image/png", "image/jpeg", "image/webp", "image/gif"],
     },
+    "qr-decode-image": {
+        id: "qr-decode-image",
+        accept: ".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp",
+        description: "PNG, JPEG, or WebP QR images up to 8 MB and 12 MP",
+        maxBytes: 8 * 1024 * 1024,
+        maxPixels: 12_000_000,
+        allowedExtensions: [".png", ".jpg", ".jpeg", ".webp"],
+        allowedMimeTypes: ["image/png", "image/jpeg", "image/webp"],
+    },
     svg: {
         id: "svg",
         accept: ".svg,image/svg+xml",
@@ -123,13 +135,13 @@ export const FILE_INPUT_POLICIES = {
     },
     "scan-image": {
         id: "scan-image",
-        accept: "image/*",
-        description: "Up to 20 image pages, 12 MB and 24 MP each",
+        accept: ".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp",
+        description: "Up to 20 PNG, JPEG, or WebP pages, 12 MB and 24 MP each",
         maxBytes: 12 * 1024 * 1024,
         maxPixels: 24_000_000,
         maxFiles: 20,
-        allowedMimePrefixes: ["image/"],
         allowedExtensions: [".png", ".jpg", ".jpeg", ".webp"],
+        allowedMimeTypes: ["image/png", "image/jpeg", "image/webp"],
     },
     "recipe-json": {
         id: "recipe-json",
@@ -163,13 +175,88 @@ function fileExtension(file: File): string {
 function hasAllowedFileType(file: File, policy: FileInputPolicy): boolean {
     const mime = file.type.toLowerCase()
     const extension = fileExtension(file)
-    const hasTypeRules = Boolean(policy.allowedMimePrefixes?.length || policy.allowedMimeTypes?.length || policy.allowedExtensions?.length)
+    const hasExtensionRules = Boolean(policy.allowedExtensions?.length)
+    const hasMimeRules = Boolean(policy.allowedMimePrefixes?.length || policy.allowedMimeTypes?.length)
+    const hasTypeRules = hasExtensionRules || hasMimeRules
     if (!hasTypeRules) return true
-    if (extension && policy.allowedExtensions?.length && !policy.allowedExtensions.includes(extension)) return false
-    if (mime && policy.allowedMimePrefixes?.some((prefix) => mime.startsWith(prefix))) return true
-    if (mime && policy.allowedMimeTypes?.includes(mime)) return true
-    if (extension && policy.allowedExtensions?.includes(extension)) return true
-    return false
+
+    const extensionAllowed = Boolean(extension && policy.allowedExtensions?.includes(extension))
+    const mimeAllowed = Boolean(
+        mime && (
+            policy.allowedMimePrefixes?.some((prefix) => mime.startsWith(prefix))
+            || policy.allowedMimeTypes?.includes(mime)
+        ),
+    )
+
+    if (extension && hasExtensionRules) {
+        if (!extensionAllowed) return false
+
+        // Browsers often assign generic or vendor MIME types to extension-matched files.
+        // Raster content is checked separately against its file signature before decoding.
+        return !(mime.startsWith("image/") && hasMimeRules && !mimeAllowed)
+    }
+
+    return mimeAllowed
+}
+
+const RASTER_POLICY_IDS = new Set<FileInputPolicyId>([
+    "image-standard",
+    "image-compact",
+    "image-logo",
+    "qr-decode-image",
+    "scan-image",
+])
+
+const RASTER_MIME_BY_EXTENSION: Record<string, RasterImageMime> = {
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".gif": "image/gif",
+    ".webp": "image/webp",
+    ".avif": "image/avif",
+}
+
+function startsWithBytes(bytes: Uint8Array, signature: readonly number[]): boolean {
+    return signature.every((value, index) => bytes[index] === value)
+}
+
+export function detectRasterImageMime(input: ArrayBuffer | Uint8Array): RasterImageMime | null {
+    const bytes = input instanceof Uint8Array ? input : new Uint8Array(input)
+    if (startsWithBytes(bytes, [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])) return "image/png"
+    if (startsWithBytes(bytes, [0xff, 0xd8, 0xff])) return "image/jpeg"
+    if (startsWithBytes(bytes, [0x47, 0x49, 0x46, 0x38, 0x37, 0x61])
+        || startsWithBytes(bytes, [0x47, 0x49, 0x46, 0x38, 0x39, 0x61])) return "image/gif"
+    if (startsWithBytes(bytes, [0x52, 0x49, 0x46, 0x46])
+        && startsWithBytes(bytes.subarray(8), [0x57, 0x45, 0x42, 0x50])) return "image/webp"
+
+    const hasIsoFileTypeBox = startsWithBytes(bytes.subarray(4), [0x66, 0x74, 0x79, 0x70])
+    if (hasIsoFileTypeBox) {
+        const brands = new TextDecoder("ascii").decode(bytes.subarray(8, 64))
+        if (brands.includes("avif") || brands.includes("avis")) return "image/avif"
+    }
+    return null
+}
+
+function validateRasterFileBytes(file: File, policy: FileInputPolicy, input: ArrayBuffer | Uint8Array): FileValidationResult {
+    if (!RASTER_POLICY_IDS.has(policy.id)) return { ok: true, file }
+
+    const detectedMime = detectRasterImageMime(input)
+    const extensionMime = RASTER_MIME_BY_EXTENSION[fileExtension(file)]
+    const declaredMime = file.type.toLowerCase()
+    const detectedMimeAllowed = detectedMime && (
+        policy.allowedMimeTypes?.includes(detectedMime)
+        || policy.allowedMimePrefixes?.some((prefix) => detectedMime.startsWith(prefix))
+    )
+
+    const declaredMimeConflicts = declaredMime.startsWith("image/") && declaredMime !== detectedMime
+    if (!detectedMime || !detectedMimeAllowed || (extensionMime && extensionMime !== detectedMime) || declaredMimeConflicts) {
+        return {
+            ok: false,
+            reason: "unsupported_type",
+            message: `File content does not match a supported raster image. Supported input: ${policy.description}.`,
+        }
+    }
+    return { ok: true, file }
 }
 
 export function validateFileAgainstPolicy(file: File, policy: FileInputPolicy): FileValidationResult {
@@ -202,7 +289,26 @@ export async function readTextFileWithPolicy(file: File, policy: FileInputPolicy
 export async function readArrayBufferWithPolicy(file: File, policy: FileInputPolicy): Promise<ArrayBuffer> {
     const validation = validateFileAgainstPolicy(file, policy)
     if (!validation.ok) throw new Error(validation.message)
-    return file.arrayBuffer()
+    const buffer = await file.arrayBuffer()
+    const contentValidation = validateRasterFileBytes(file, policy, buffer)
+    if (!contentValidation.ok) throw new Error(contentValidation.message)
+    return buffer
+}
+
+export async function validateFileContentAgainstPolicy(file: File, policy: FileInputPolicy): Promise<FileValidationResult> {
+    const validation = validateFileAgainstPolicy(file, policy)
+    if (!validation.ok || !RASTER_POLICY_IDS.has(policy.id)) return validation
+
+    try {
+        const signatureBytes = await file.slice(0, 64).arrayBuffer()
+        return validateRasterFileBytes(file, policy, signatureBytes)
+    } catch {
+        return {
+            ok: false,
+            reason: "unsupported_type",
+            message: "Unable to verify the selected file content.",
+        }
+    }
 }
 
 export function filterFilesByPolicy(files: Iterable<File>, policy: FileInputPolicy): { accepted: File[]; rejected: Array<{ file: File; message: string }> } {
diff --git a/src/core/i18n/translations/de.json b/src/core/i18n/translations/de.json
index dab260cf..2e54d18a 100644
--- a/src/core/i18n/translations/de.json
+++ b/src/core/i18n/translations/de.json
@@ -894,7 +894,7 @@
       "decode_tab": "Base64 → Bild",
       "image_input": "Bildeingabe",
       "drop_text": "Ziehen Sie ein Bild hierher oder klicken Sie",
-      "supports": "Unterstützt PNG, JPG, SVG, WebP",
+      "supports": "Unterstützt PNG, JPG, WebP, GIF und AVIF. Konvertieren Sie SVG-Dateien zuerst mit dem SVG-zu-PNG-Werkzeug.",
       "base64_output": "Base64-Ausgabe",
       "base64_input": "Base64-Eingabe",
       "image_preview": "Bildvorschau",
@@ -910,7 +910,7 @@
       "copy_format_success": "{format} in die Zwischenablage kopiert",
       "invalid_base64": "Ungültige Base64-Bildnutzlast.",
       "invalid_file_title": "Ungültige Datei",
-      "invalid_file_desc": "Bitte wählen Sie eine Bilddatei (PNG, JPG, SVG, WebP)",
+      "invalid_file_desc": "Wählen Sie eine PNG-, JPG-, WebP-, GIF- oder AVIF-Datei. Konvertieren Sie SVG-Dateien zuerst mit dem SVG-zu-PNG-Werkzeug.",
       "file_too_large_title": "Datei zu groß",
       "file_too_large_desc": "Bitte wählen Sie ein Bild unter 10 MB",
       "copied_output_desc": "{format} in die Zwischenablage kopiert",
@@ -1075,8 +1075,29 @@
       "hex6_output": "HEX (6-stellig)"
     },
     "qr_code_generator": {
-      "title": "QR-Code-Generator",
-      "description": "Generieren Sie QR-Codes mit benutzerdefinierten Größen und Farben. Als PNG oder SVG herunterladen.",
+      "title": "QR-Code-Generator und -Decoder",
+      "description": "Erstellen Sie QR-Codes oder dekodieren Sie ein QR-Bild lokal im Browser.",
+      "mode_label": "QR-Modus",
+      "mode_generate": "Erstellen",
+      "mode_decode": "Bild dekodieren",
+      "decode_upload": "Bild auswählen",
+      "decode_drop": "QR-Bild hier ablegen oder Datei auswählen",
+      "decode_formats": "PNG, JPEG oder WebP bis 8 MB und 12 MP",
+      "decode_processing": "QR-Bild wird dekodiert...",
+      "decode_result": "Dekodiertes Ergebnis",
+      "decode_prompt": "Der dekodierte Text erscheint hier",
+      "decode_type_url": "Webadresse",
+      "decode_type_text": "Klartext",
+      "decode_one_code": "Pro Bild wird ein QR-Code dekodiert.",
+      "decode_empty_file": "Das ausgewählte Bild ist leer.",
+      "decode_too_large": "Das QR-Bild darf höchstens 8 MB groß sein.",
+      "decode_unsupported": "Wählen Sie ein gültiges PNG-, JPEG- oder WebP-Bild.",
+      "decode_dimensions_too_large": "Das QR-Bild darf höchstens 12 Megapixel haben.",
+      "decode_image_failed": "Der Browser konnte dieses Bild nicht lesen.",
+      "decode_decoder_unavailable": "Der lokale QR-Decoder konnte nicht geladen werden. Prüfen Sie die Verbindung und versuchen Sie das Bild erneut.",
+      "decode_no_qr": "In diesem Bild wurde kein QR-Code gefunden.",
+      "decode_copy_success": "Dekodierten Text kopiert",
+      "decode_not_url": "Der dekodierte Text ist keine HTTP- oder HTTPS-URL.",
       "content": "Inhalt",
       "placeholder": "Geben Sie Text oder eine URL ein...",
       "size": "Größe:",
@@ -1097,9 +1118,9 @@
       "logo_toggle": "Logo einbetten",
       "logo_upload": "Logo hochladen",
       "logo_remove": "Logo entfernen",
-      "logo_hint": "Verwenden Sie ein transparentes PNG-/SVG-Logo für beste Lesbarkeit.",
+      "logo_hint": "Verwenden Sie ein transparentes PNG-, JPEG-, WebP- oder GIF-Logo. Konvertieren Sie SVG-Logos zuerst mit dem SVG-zu-PNG-Werkzeug.",
       "logo_size": "Logogröße:",
-      "logo_invalid": "Bitte laden Sie eine Bilddatei hoch.",
+      "logo_invalid": "Bitte laden Sie ein gültiges PNG-, JPEG-, WebP- oder GIF-Logo hoch. SVG-Dateien werden hier nicht unterstützt.",
       "logo_too_large": "Die Logodatei darf maximal 2 MB groß sein.",
       "downloaded_png": "QR-Code als PNG gespeichert",
       "downloaded_svg": "QR-Code als SVG gespeichert",
@@ -1154,6 +1175,8 @@
       "group_prefix": "Gruppe",
       "error_invalid_regex": "Ungueltiger regulaerer Ausdruck",
       "error_match_limit": "Trefferlimit ueberschritten. Der Ausdruck koennte endlos leere Zeichenfolgen finden.",
+      "error_worker_timeout": "Die Regex-Auswertung hat das Sicherheitszeitlimit ueberschritten. Vereinfachen Sie den Ausdruck oder kuerzen Sie den Testtext.",
+      "error_safe_evaluation_unavailable": "Die sichere Regex-Auswertung ist nicht verfuegbar, weil der isolierte Worker nicht ausgefuehrt werden konnte. Pruefen Sie die Browser- oder Inhaltssicherheitseinstellungen.",
       "timing_label": "Dauer: {ms} ms",
       "evaluating_label": "Wird ausgewertet...",
       "performance_warning_title": "Leistungswarnung",
@@ -1300,6 +1323,7 @@
       "description": "Berechnet Netzwerk, Broadcast, Host-Bereiche und Masken aus IPv4-CIDR-Blöcken."
     },
     "csv_json_converter": {
+      "spreadsheet_safe_note": "Tabellenkalkulationssicheres CSV stellt formelartigen Textzellen ein Apostroph voran. Typisierte Zahlen bleiben unverändert; geschützte Zeichenfolgen werden nicht bytegenau zurückkonvertiert.",
       "title": "CSV ↔ JSON Konverter",
       "description": "Konvertieren Sie sofort zwischen CSV- und JSON-Formaten. Unterstützt Auto-Erkennung, benutzerdefinierte Trennzeichen und Typinferenz.",
       "show_settings_action": "Einstellungen anzeigen",
@@ -1317,6 +1341,7 @@
       "csv_has_header_label": "Erste Zeile als Kopfzeile",
       "json_include_header_label": "Kopfzeile einschließen",
       "type_inference_label": "Typen erkennen (Zahlen, Boolesche Werte)",
+      "diagnostics_label": "CSV-Diagnosen",
       "input_upload_action": "Hochladen",
       "error_json_array_required": "JSON muss ein Array aus Objekten oder Arrays sein."
     },
@@ -1360,8 +1385,8 @@
       "case_label": "Groß-/Kleinschreibung",
       "case_lowercase": "Kleinbuchstaben",
       "case_uppercase": "Großbuchstaben",
-      "length_label": "Länge",
-      "alphabet_label": "Zeichensatz",
+      "length_label": "Länge (1-256)",
+      "alphabet_label": "Zeichensatz (2-256 eindeutige Unicode-Codepunkte)",
       "about_heading": "Über {type}",
       "about_uuid_v4": "UUID v4 verwendet 122 Zufallsbits, daher sind Kollisionen praktisch ausgeschlossen.",
       "about_uuid_v7": "UUID v7 enthält einen Unix-Millisekunden-Zeitstempel und lässt sich dadurch nach Erstellungszeit sortieren.",
@@ -1369,7 +1394,14 @@
       "about_nanoid": "NanoID erzeugt kompakte, URL-freundliche eindeutige IDs. Das Standardformat mit 21 Zeichen liefert etwa 126 Bit Entropie.",
       "generated_heading": "Generierte IDs",
       "embedded_timestamp": "Eingebetteter Zeitstempel: {value}",
-      "copied_desc": "{count} ID-Werte kopiert."
+      "copied_desc": "{count} ID-Werte kopiert.",
+      "error_quantity_invalid": "Die Anzahl muss eine ganze Zahl zwischen 1 und 1000 sein.",
+      "error_nanoid_size_invalid": "Die NanoID-Länge muss eine ganze Zahl zwischen 1 und 256 sein.",
+      "error_alphabet_too_short": "Der Zeichensatz muss mindestens 2 eindeutige Unicode-Codepunkte enthalten.",
+      "error_alphabet_too_long": "Der Zeichensatz darf höchstens 256 Unicode-Codepunkte enthalten.",
+      "error_alphabet_duplicate": "Der Zeichensatz darf keine doppelten Unicode-Codepunkte enthalten.",
+      "error_alphabet_invalid_unicode": "Der Zeichensatz enthält einen ungepaarten Unicode-Surrogatwert.",
+      "error_generation_failed": "Mit diesen Einstellungen konnten keine IDs erzeugt werden."
     },
     "certificate_decoder": {
       "title": "Zertifikats-Decoder",
@@ -1408,6 +1440,7 @@
       "body_type_none": "Keine",
       "body_type_raw": "Rohdaten",
       "body_type_form_urlencoded": "Form-URL-kodiert",
+      "body_not_allowed": "Generierte GET- und HEAD-Anfragen können keinen Anfragekörper enthalten.",
       "generated_code": "Generierter Code",
       "code_type_fetch": "JS-Fetch-Code",
       "query_params": "Query-Parameter",
@@ -1427,7 +1460,19 @@
       "title": "cURL → Code",
       "description": "cURL-Befehle in JavaScript-, Python-, Go-, PHP- oder Rust-Code umwandeln.",
       "input_label": "cURL-Befehl",
-      "parse_error": "Der cURL-Befehl konnte nicht analysiert werden. Syntax prüfen und erneut versuchen."
+      "parse_error": "Der cURL-Befehl konnte nicht analysiert werden. Syntax prüfen und erneut versuchen.",
+      "parse_warning": "Der cURL-Befehl wurde mit Warnungen analysiert.",
+      "diagnostic_invalid_command": "Nach curl muss genau eine absolute HTTP(S)-URL folgen.",
+      "diagnostic_unterminated_quote": "Das Anführungszeichen {token} wurde nicht geschlossen.",
+      "diagnostic_dangling_escape": "Der abschließende Backslash hat kein zu maskierendes Zeichen.",
+      "diagnostic_unsupported_operator": "Der Shell-Operator {token} wird nicht unterstützt.",
+      "diagnostic_unsupported_option": "Die cURL-Option {token} wird nicht unterstützt.",
+      "diagnostic_missing_option_value": "Die Option {token} benötigt einen Wert.",
+      "diagnostic_invalid_value": "Der cURL-Wert {token} ist ungültig.",
+      "diagnostic_unexpected_argument": "Unerwartetes Argument oder zusätzliche URL {token}.",
+      "diagnostic_unsupported_data_file": "Die Datei- oder Standardeingabe-Referenz {token} wird nicht unterstützt.",
+      "diagnostic_duplicate_header": "Der Header {token} ist doppelt; der generierte Code verwendet den letzten Wert.",
+      "diagnostic_position": "Zeichen {position}."
     },
     "javascript_formatter": {
       "title": "JavaScript-Formatter",
@@ -1682,13 +1727,25 @@
       "refreshes_in": "Aktualisierung in {seconds} Sekunden",
       "mode": "Modus",
       "digits": "Stellen",
-      "secret_key": "Geheimschlüssel (Base32)",
+      "secret_key": "Geheimschlüssel (Base32 ohne Padding oder Trennzeichen)",
       "period": "Periode (Sekunden)",
       "counter": "Zähler",
       "refresh": "Aktualisieren",
       "generate_random": "Zufällig generieren",
       "settings": "Einstellungen",
-      "increment": "Erhoehen"
+      "increment": "Erhoehen",
+      "error_secret_required": "Geben Sie einen Base32-Geheimschlüssel ein.",
+      "error_secret_invalid_characters": "Verwenden Sie nur ASCII A-Z und 2-7. Leerzeichen, Trennzeichen, Satzzeichen und Unicode sind nicht erlaubt.",
+      "error_secret_padding_unsupported": "Base32-Padding wird nicht unterstützt. Entfernen Sie abschließende =-Zeichen.",
+      "error_secret_invalid_length": "Der Base32-Geheimschlüssel ohne Padding hat eine ungültige Länge.",
+      "error_secret_invalid_padding_bits": "Der Base32-Geheimschlüssel enthält nicht-null gesetzte ungenutzte Bits und ist nicht kanonisch.",
+      "error_period_required": "Geben Sie eine TOTP-Periode ein.",
+      "error_period_invalid_integer": "Die TOTP-Periode muss eine ganze Zahl sein.",
+      "error_period_out_of_range": "Die TOTP-Periode muss zwischen 15 und 120 Sekunden liegen.",
+      "error_counter_required": "Geben Sie einen HOTP-Zähler ein.",
+      "error_counter_invalid_integer": "Der HOTP-Zähler muss eine ganze Zahl sein.",
+      "error_counter_out_of_range": "Der HOTP-Zähler muss zwischen 0 und 9007199254740991 liegen.",
+      "error_generation_failed": "Das Einmalpasswort konnte in diesem Browser nicht erzeugt werden."
     },
     "openapi_mock": {
       "title": "OpenAPI-Mock-Spielplatz",
diff --git a/src/core/i18n/translations/en.json b/src/core/i18n/translations/en.json
index 6003b4e4..001dfb6e 100644
--- a/src/core/i18n/translations/en.json
+++ b/src/core/i18n/translations/en.json
@@ -922,7 +922,7 @@
       "decode_tab": "Base64 → Image",
       "image_input": "Image Input",
       "drop_text": "Drop an image here or click to browse",
-      "supports": "Supports PNG, JPG, SVG, WebP",
+      "supports": "Supports PNG, JPG, WebP, GIF, and AVIF. Convert SVG files with the SVG to PNG tool first.",
       "base64_output": "Base64 Output",
       "base64_input": "Base64 Input",
       "image_preview": "Image Preview",
@@ -938,7 +938,7 @@
       "copy_format_success": "{format} copied to clipboard",
       "invalid_base64": "Invalid Base64 image payload.",
       "invalid_file_title": "Invalid file",
-      "invalid_file_desc": "Please select an image file (PNG, JPG, SVG, WebP)",
+      "invalid_file_desc": "Please select a PNG, JPG, WebP, GIF, or AVIF file. Convert SVG files with the SVG to PNG tool first.",
       "file_too_large_title": "File too large",
       "file_too_large_desc": "Please select an image smaller than 10MB",
       "copied_output_desc": "{format} copied to clipboard",
@@ -1103,8 +1103,29 @@
       "hex6_output": "HEX (6-digit)"
     },
     "qr_code_generator": {
-      "title": "QR Code Generator",
-      "description": "Generate QR codes with custom sizes and colors. Download as PNG or SVG.",
+      "title": "QR Code Generator & Decoder",
+      "description": "Generate custom QR codes or decode a QR image locally in your browser.",
+      "mode_label": "QR mode",
+      "mode_generate": "Generate",
+      "mode_decode": "Decode image",
+      "decode_upload": "Choose image",
+      "decode_drop": "Drop a QR image here or choose a file",
+      "decode_formats": "PNG, JPEG, or WebP up to 8 MB and 12 MP",
+      "decode_processing": "Decoding QR image...",
+      "decode_result": "Decoded result",
+      "decode_prompt": "Decoded text will appear here",
+      "decode_type_url": "URL",
+      "decode_type_text": "Text",
+      "decode_one_code": "One QR code is decoded per image.",
+      "decode_empty_file": "The selected image is empty.",
+      "decode_too_large": "The QR image must be 8 MB or smaller.",
+      "decode_unsupported": "Choose a valid PNG, JPEG, or WebP image.",
+      "decode_dimensions_too_large": "The QR image must be 12 megapixels or smaller.",
+      "decode_image_failed": "The browser could not read this image.",
+      "decode_decoder_unavailable": "The local QR decoder could not load. Check your connection and try the image again.",
+      "decode_no_qr": "No QR code was found in this image.",
+      "decode_copy_success": "Decoded text copied",
+      "decode_not_url": "Decoded text is not an HTTP or HTTPS URL.",
       "content": "Content",
       "placeholder": "Enter text or URL...",
       "size": "Size:",
@@ -1125,9 +1146,9 @@
       "logo_toggle": "Embed logo",
       "logo_upload": "Upload logo",
       "logo_remove": "Remove logo",
-      "logo_hint": "Use transparent PNG/SVG logo for best readability.",
+      "logo_hint": "Use a transparent PNG, JPEG, WebP, or GIF logo. Convert SVG logos with the SVG to PNG tool first.",
       "logo_size": "Logo size:",
-      "logo_invalid": "Please upload an image file.",
+      "logo_invalid": "Please upload a valid PNG, JPEG, WebP, or GIF logo. SVG files are not supported here.",
       "logo_too_large": "Logo file must be 2MB or smaller.",
       "downloaded_png": "QR code saved as PNG",
       "downloaded_svg": "QR code saved as SVG",
@@ -1182,6 +1203,8 @@
       "group_prefix": "Group",
       "error_invalid_regex": "Invalid regex",
       "error_match_limit": "Match limit exceeded. The regex may be matching endless zero-length strings.",
+      "error_worker_timeout": "Regex evaluation exceeded the safety timeout. Simplify the pattern or use a smaller test input.",
+      "error_safe_evaluation_unavailable": "Safe regex evaluation is unavailable because the isolated worker could not run. Check your browser or content-security settings and try again.",
       "timing_label": "{ms} ms",
       "evaluating_label": "Evaluating...",
       "performance_warning_title": "Performance warning",
@@ -1328,6 +1351,7 @@
       "description": "Calculate network, broadcast, host ranges, and masks from IPv4 CIDR blocks."
     },
     "csv_json_converter": {
+      "spreadsheet_safe_note": "Spreadsheet-safe CSV adds a leading apostrophe to formula-like string cells. Typed numbers remain unchanged; protected strings do not round-trip byte-for-byte.",
       "title": "CSV ↔ JSON Converter",
       "description": "Convert between CSV and JSON formats instantly. Supports auto-detection, custom delimiters, and type inference.",
       "show_settings_action": "Show Settings",
@@ -1345,6 +1369,7 @@
       "csv_has_header_label": "First row is header",
       "json_include_header_label": "Include header row",
       "type_inference_label": "Type inference (numbers, booleans)",
+      "diagnostics_label": "CSV diagnostics",
       "input_upload_action": "Upload",
       "error_json_array_required": "JSON must be an array of objects or arrays."
     },
@@ -1388,8 +1413,8 @@
       "case_label": "Case",
       "case_lowercase": "Lowercase",
       "case_uppercase": "Uppercase",
-      "length_label": "Length",
-      "alphabet_label": "Alphabet",
+      "length_label": "Length (1-256)",
+      "alphabet_label": "Alphabet (2-256 unique Unicode code points)",
       "about_heading": "About {type}",
       "about_uuid_v4": "UUID v4 uses 122 random bits, so collisions are vanishingly unlikely.",
       "about_uuid_v7": "UUID v7 embeds a Unix millisecond timestamp, which keeps identifiers sortable by creation time.",
@@ -1397,7 +1422,14 @@
       "about_nanoid": "NanoID generates compact, URL-friendly unique IDs. The default 21-character format provides about 126 bits of entropy.",
       "generated_heading": "Generated IDs",
       "embedded_timestamp": "Embedded timestamp: {value}",
-      "copied_desc": "{count} ID values copied."
+      "copied_desc": "{count} ID values copied.",
+      "error_quantity_invalid": "Quantity must be a whole number from 1 to 1000.",
+      "error_nanoid_size_invalid": "NanoID length must be a whole number from 1 to 256.",
+      "error_alphabet_too_short": "Alphabet must contain at least 2 unique Unicode code points.",
+      "error_alphabet_too_long": "Alphabet cannot contain more than 256 Unicode code points.",
+      "error_alphabet_duplicate": "Alphabet must not contain duplicate Unicode code points.",
+      "error_alphabet_invalid_unicode": "Alphabet contains an unpaired Unicode surrogate.",
+      "error_generation_failed": "Unable to generate IDs with these settings."
     },
     "certificate_decoder": {
       "title": "Certificate Decoder",
@@ -1436,6 +1468,7 @@
       "body_type_none": "None",
       "body_type_raw": "Raw",
       "body_type_form_urlencoded": "Form URL Encoded",
+      "body_not_allowed": "GET and HEAD requests cannot include a body in generated snippets.",
       "generated_code": "Generated Code",
       "code_type_fetch": "JS Fetch",
       "query_params": "Query parameters",
@@ -1455,7 +1488,19 @@
       "title": "cURL to Code",
       "description": "Convert cURL commands to JavaScript, Python, Go, PHP, or Rust code.",
       "input_label": "cURL Command",
-      "parse_error": "Unable to parse cURL command. Check syntax and try again."
+      "parse_error": "Unable to parse cURL command. Check syntax and try again.",
+      "parse_warning": "The cURL command was parsed with warnings.",
+      "diagnostic_invalid_command": "Expected curl followed by one absolute HTTP(S) URL.",
+      "diagnostic_unterminated_quote": "Unterminated quote {token}.",
+      "diagnostic_dangling_escape": "A trailing backslash has nothing to escape.",
+      "diagnostic_unsupported_operator": "Shell operator {token} is not supported.",
+      "diagnostic_unsupported_option": "Unsupported cURL option {token}.",
+      "diagnostic_missing_option_value": "Option {token} requires a value.",
+      "diagnostic_invalid_value": "Invalid cURL value {token}.",
+      "diagnostic_unexpected_argument": "Unexpected argument or additional URL {token}.",
+      "diagnostic_unsupported_data_file": "File or stdin data reference {token} is not supported.",
+      "diagnostic_duplicate_header": "Header {token} is repeated; generated code uses the last value.",
+      "diagnostic_position": "Character {position}."
     },
     "javascript_formatter": {
       "title": "JavaScript Formatter",
@@ -1734,13 +1779,25 @@
       "refreshes_in": "Refreshes in {seconds} seconds",
       "mode": "Mode",
       "digits": "Digits",
-      "secret_key": "Secret Key (Base32)",
+      "secret_key": "Secret Key (unpadded Base32, no separators)",
       "period": "Period (seconds)",
       "counter": "Counter",
       "refresh": "Refresh",
       "generate_random": "Generate Random",
       "settings": "Settings",
-      "increment": "Increment"
+      "increment": "Increment",
+      "error_secret_required": "Enter a Base32 secret.",
+      "error_secret_invalid_characters": "Use only ASCII letters A-Z and digits 2-7. Spaces, separators, punctuation, and Unicode are not accepted.",
+      "error_secret_padding_unsupported": "Padded Base32 is not supported. Remove trailing = characters.",
+      "error_secret_invalid_length": "The unpadded Base32 secret has an invalid length.",
+      "error_secret_invalid_padding_bits": "The Base32 secret has non-zero unused bits and is not canonical.",
+      "error_period_required": "Enter a TOTP period.",
+      "error_period_invalid_integer": "The TOTP period must be a whole number.",
+      "error_period_out_of_range": "The TOTP period must be between 15 and 120 seconds.",
+      "error_counter_required": "Enter a HOTP counter.",
+      "error_counter_invalid_integer": "The HOTP counter must be a whole number.",
+      "error_counter_out_of_range": "The HOTP counter must be between 0 and 9007199254740991.",
+      "error_generation_failed": "The one-time password could not be generated in this browser."
     },
     "openapi_mock": {
       "title": "OpenAPI Mock Playground",
diff --git a/src/core/i18n/translations/fr.json b/src/core/i18n/translations/fr.json
index c2b63180..08bc0369 100644
--- a/src/core/i18n/translations/fr.json
+++ b/src/core/i18n/translations/fr.json
@@ -894,7 +894,7 @@
       "decode_tab": "Base64 vers image",
       "image_input": "Entrée Image",
       "drop_text": "Déposez une image ici ou cliquez pour parcourir",
-      "supports": "Prend en charge PNG, JPG, SVG, WebP",
+      "supports": "Prend en charge PNG, JPG, WebP, GIF et AVIF. Convertissez d'abord les fichiers SVG avec l'outil SVG vers PNG.",
       "base64_output": "Sortie Base64",
       "base64_input": "Entrée Base64",
       "image_preview": "Aperçu de l'image",
@@ -910,7 +910,7 @@
       "copy_format_success": "{format} copié dans le presse-papiers",
       "invalid_base64": "Charge utile d'image Base64 invalide.",
       "invalid_file_title": "Fichier invalide",
-      "invalid_file_desc": "Veuillez sélectionner un fichier image (PNG, JPG, SVG, WebP)",
+      "invalid_file_desc": "Sélectionnez un fichier PNG, JPG, WebP, GIF ou AVIF. Convertissez d'abord les fichiers SVG avec l'outil SVG vers PNG.",
       "file_too_large_title": "Fichier trop volumineux",
       "file_too_large_desc": "Veuillez sélectionner une image inférieure à 10 Mo",
       "copied_output_desc": "{format} copié dans le presse-papiers",
@@ -1075,8 +1075,29 @@
       "hex6_output": "HEX (6 chiffres)"
     },
     "qr_code_generator": {
-      "title": "Générateur de QR Code",
-      "description": "Générez des QR codes avec des tailles et des couleurs personnalisées. Téléchargez au format PNG ou SVG.",
+      "title": "Générateur et décodeur de QR Code",
+      "description": "Générez des QR codes ou décodez une image QR localement dans le navigateur.",
+      "mode_label": "Mode QR",
+      "mode_generate": "Générer",
+      "mode_decode": "Décoder une image",
+      "decode_upload": "Choisir une image",
+      "decode_drop": "Déposez une image QR ici ou choisissez un fichier",
+      "decode_formats": "PNG, JPEG ou WebP jusqu’à 8 Mo et 12 Mpx",
+      "decode_processing": "Décodage de l’image QR...",
+      "decode_result": "Résultat décodé",
+      "decode_prompt": "Le texte décodé apparaîtra ici",
+      "decode_type_url": "Adresse web",
+      "decode_type_text": "Texte",
+      "decode_one_code": "Un QR code est décodé par image.",
+      "decode_empty_file": "L’image sélectionnée est vide.",
+      "decode_too_large": "L’image QR doit faire 8 Mo maximum.",
+      "decode_unsupported": "Choisissez une image PNG, JPEG ou WebP valide.",
+      "decode_dimensions_too_large": "L’image QR doit faire 12 mégapixels maximum.",
+      "decode_image_failed": "Le navigateur n’a pas pu lire cette image.",
+      "decode_decoder_unavailable": "Le décodeur QR local n’a pas pu être chargé. Vérifiez la connexion puis réessayez l’image.",
+      "decode_no_qr": "Aucun QR code n’a été trouvé dans cette image.",
+      "decode_copy_success": "Texte décodé copié",
+      "decode_not_url": "Le texte décodé n’est pas une URL HTTP ou HTTPS.",
       "content": "Contenu",
       "placeholder": "Entrez du texte ou une URL...",
       "size": "Taille :",
@@ -1097,9 +1118,9 @@
       "logo_toggle": "Intégrer un logo",
       "logo_upload": "Importer un logo",
       "logo_remove": "Supprimer le logo",
-      "logo_hint": "Utilisez un logo PNG/SVG transparent pour une meilleure lisibilité.",
+      "logo_hint": "Utilisez un logo PNG, JPEG, WebP ou GIF transparent. Convertissez d'abord les logos SVG avec l'outil SVG vers PNG.",
       "logo_size": "Taille du logo :",
-      "logo_invalid": "Veuillez importer un fichier image.",
+      "logo_invalid": "Importez un logo PNG, JPEG, WebP ou GIF valide. Les fichiers SVG ne sont pas pris en charge ici.",
       "logo_too_large": "Le fichier logo doit faire 2 Mo maximum.",
       "downloaded_png": "Code QR enregistré en PNG",
       "downloaded_svg": "Code QR enregistré en SVG",
@@ -1154,6 +1175,8 @@
       "group_prefix": "Groupe",
       "error_invalid_regex": "Expression régulière invalide",
       "error_match_limit": "Limite de correspondances dépassée. L'expression peut faire des correspondances infinies sur une chaîne vide.",
+      "error_worker_timeout": "L'évaluation de l'expression a dépassé le délai de sécurité. Simplifiez-la ou réduisez le texte de test.",
+      "error_safe_evaluation_unavailable": "L'évaluation sécurisée est indisponible car le worker isolé n'a pas pu s'exécuter. Vérifiez les paramètres du navigateur ou de sécurité du contenu.",
       "timing_label": "Duree : {ms} ms",
       "evaluating_label": "Evaluation...",
       "performance_warning_title": "Avertissement de performance",
@@ -1300,6 +1323,7 @@
       "description": "Calcule l'adresse réseau, broadcast, la plage d'hôtes et les masques à partir de blocs CIDR IPv4."
     },
     "csv_json_converter": {
+      "spreadsheet_safe_note": "Le CSV sécurisé pour les tableurs ajoute une apostrophe devant les cellules texte ressemblant à des formules. Les nombres typés restent inchangés ; les chaînes protégées ne sont pas restaurées à l'identique octet par octet.",
       "title": "Convertisseur CSV ↔ JSON",
       "description": "Convertissez instantanément entre les formats CSV et JSON. Détection automatique, délimiteurs personnalisés et inférence de type.",
       "show_settings_action": "Afficher les reglages",
@@ -1317,6 +1341,7 @@
       "csv_has_header_label": "La premiere ligne est un en-tete",
       "json_include_header_label": "Inclure la ligne d'en-tete",
       "type_inference_label": "Deduir les types (nombres, booleens)",
+      "diagnostics_label": "Diagnostics CSV",
       "input_upload_action": "Televerser",
       "error_json_array_required": "Le JSON doit etre un tableau d'objets ou de tableaux."
     },
@@ -1360,8 +1385,8 @@
       "case_label": "Casse",
       "case_lowercase": "Minuscules",
       "case_uppercase": "Majuscules",
-      "length_label": "Longueur",
-      "alphabet_label": "Jeu de caractères",
+      "length_label": "Longueur (1-256)",
+      "alphabet_label": "Alphabet (2 à 256 points de code Unicode uniques)",
       "about_heading": "À propos de {type}",
       "about_uuid_v4": "UUID v4 utilise 122 bits aléatoires, ce qui rend les collisions extrêmement improbables.",
       "about_uuid_v7": "UUID v7 intègre un horodatage Unix en millisecondes, ce qui facilite le tri par date de création.",
@@ -1369,7 +1394,14 @@
       "about_nanoid": "NanoID génère des identifiants uniques compacts et compatibles avec les URL. Le format par défaut de 21 caractères offre environ 126 bits d'entropie.",
       "generated_heading": "ID générés",
       "embedded_timestamp": "Horodatage intégré : {value}",
-      "copied_desc": "{count} identifiants copiés."
+      "copied_desc": "{count} identifiants copiés.",
+      "error_quantity_invalid": "La quantité doit être un nombre entier compris entre 1 et 1000.",
+      "error_nanoid_size_invalid": "La longueur NanoID doit être un nombre entier compris entre 1 et 256.",
+      "error_alphabet_too_short": "L'alphabet doit contenir au moins 2 points de code Unicode uniques.",
+      "error_alphabet_too_long": "L'alphabet ne peut pas contenir plus de 256 points de code Unicode.",
+      "error_alphabet_duplicate": "L'alphabet ne doit pas contenir de points de code Unicode en double.",
+      "error_alphabet_invalid_unicode": "L'alphabet contient un substitut Unicode non apparié.",
+      "error_generation_failed": "Impossible de générer des ID avec ces paramètres."
     },
     "certificate_decoder": {
       "title": "Décodeur de certificat",
@@ -1408,6 +1440,7 @@
       "body_type_none": "Aucun",
       "body_type_raw": "Brut",
       "body_type_form_urlencoded": "URL encodée pour formulaire",
+      "body_not_allowed": "Les requêtes GET et HEAD générées ne peuvent pas contenir de corps.",
       "generated_code": "Code généré",
       "code_type_fetch": "Code JS Fetch",
       "query_params": "Parametres de requete",
@@ -1427,7 +1460,19 @@
       "title": "cURL vers Code",
       "description": "Convertissez les commandes cURL en code JavaScript, Python, Go, PHP ou Rust.",
       "input_label": "Commande cURL",
-      "parse_error": "Impossible d'analyser la commande cURL. Verifiez la syntaxe puis reessayez."
+      "parse_error": "Impossible d'analyser la commande cURL. Verifiez la syntaxe puis reessayez.",
+      "parse_warning": "La commande cURL a été analysée avec des avertissements.",
+      "diagnostic_invalid_command": "curl doit être suivi d'une seule URL HTTP(S) absolue.",
+      "diagnostic_unterminated_quote": "Le guillemet {token} n'est pas fermé.",
+      "diagnostic_dangling_escape": "La barre oblique inverse finale n'a aucun caractère à échapper.",
+      "diagnostic_unsupported_operator": "L'opérateur shell {token} n'est pas pris en charge.",
+      "diagnostic_unsupported_option": "L'option cURL {token} n'est pas prise en charge.",
+      "diagnostic_missing_option_value": "L'option {token} nécessite une valeur.",
+      "diagnostic_invalid_value": "La valeur cURL {token} n'est pas valide.",
+      "diagnostic_unexpected_argument": "Argument inattendu ou URL supplémentaire {token}.",
+      "diagnostic_unsupported_data_file": "La référence de fichier ou d'entrée standard {token} n'est pas prise en charge.",
+      "diagnostic_duplicate_header": "L'en-tête {token} est répété ; le code généré utilise la dernière valeur.",
+      "diagnostic_position": "Caractère {position}."
     },
     "javascript_formatter": {
       "title": "Formateur JavaScript",
@@ -1682,13 +1727,25 @@
       "refreshes_in": "Actualisation dans {seconds} secondes",
       "mode": "mode",
       "digits": "Chiffres",
-      "secret_key": "Clé secrète (Base32)",
+      "secret_key": "Clé secrète (Base32 sans remplissage ni séparateur)",
       "period": "Période (secondes)",
       "counter": "Compteur",
       "refresh": "Actualiser",
       "generate_random": "Générer aléatoirement",
       "settings": "Parametres",
-      "increment": "Incrementer"
+      "increment": "Incrementer",
+      "error_secret_required": "Saisissez une clé secrète Base32.",
+      "error_secret_invalid_characters": "Utilisez uniquement les caractères ASCII A-Z et 2-7. Les espaces, séparateurs, signes de ponctuation et caractères Unicode sont refusés.",
+      "error_secret_padding_unsupported": "Le remplissage Base32 n'est pas pris en charge. Supprimez les caractères = finaux.",
+      "error_secret_invalid_length": "La longueur de la clé Base32 sans remplissage est invalide.",
+      "error_secret_invalid_padding_bits": "La clé Base32 contient des bits inutilisés non nuls et n'est pas canonique.",
+      "error_period_required": "Saisissez une période TOTP.",
+      "error_period_invalid_integer": "La période TOTP doit être un nombre entier.",
+      "error_period_out_of_range": "La période TOTP doit être comprise entre 15 et 120 secondes.",
+      "error_counter_required": "Saisissez un compteur HOTP.",
+      "error_counter_invalid_integer": "Le compteur HOTP doit être un nombre entier.",
+      "error_counter_out_of_range": "Le compteur HOTP doit être compris entre 0 et 9007199254740991.",
+      "error_generation_failed": "Le mot de passe à usage unique n'a pas pu être généré dans ce navigateur."
     },
     "openapi_mock": {
       "title": "Playground OpenAPI Mock",
diff --git a/src/core/i18n/translations/ja.json b/src/core/i18n/translations/ja.json
index e34add08..b723e78b 100644
--- a/src/core/i18n/translations/ja.json
+++ b/src/core/i18n/translations/ja.json
@@ -894,7 +894,7 @@
       "decode_tab": "Base64 → 画像",
       "image_input": "画像入力",
       "drop_text": "ここに画像をドロップするか、クリックして参照します",
-      "supports": "PNG, JPG, SVG, WebP をサポート",
+      "supports": "PNG、JPG、WebP、GIF、AVIF に対応しています。SVG ファイルは先に SVG から PNG 変換ツールで変換してください。",
       "base64_output": "Base64 出力",
       "base64_input": "Base64 入力",
       "image_preview": "画像プレビュー",
@@ -910,7 +910,7 @@
       "copy_format_success": "{format} をクリップボードにコピーしました",
       "invalid_base64": "Base64 画像データが無効です。",
       "invalid_file_title": "無効なファイルです",
-      "invalid_file_desc": "画像ファイル（PNG、JPG、SVG、WebP）を選択してください",
+      "invalid_file_desc": "PNG、JPG、WebP、GIF、AVIF ファイルを選択してください。SVG ファイルは先に SVG から PNG 変換ツールで変換してください。",
       "file_too_large_title": "ファイルが大きすぎます",
       "file_too_large_desc": "10MB 未満の画像を選択してください",
       "copied_output_desc": "{format} をクリップボードにコピーしました",
@@ -1075,8 +1075,29 @@
       "hex6_output": "HEX（6桁）"
     },
     "qr_code_generator": {
-      "title": "QRコード ジェネレーター",
-      "description": "カスタムサイズとカラーで QR コードを生成します。PNG または SVG としてダウンロードできます。",
+      "title": "QRコード生成・読み取り",
+      "description": "QRコードを生成するか、画像内のQRコードをブラウザでローカルに読み取ります。",
+      "mode_label": "QRモード",
+      "mode_generate": "生成",
+      "mode_decode": "画像を読み取る",
+      "decode_upload": "画像を選択",
+      "decode_drop": "QR画像をここにドロップするか、ファイルを選択",
+      "decode_formats": "PNG、JPEG、WebP（最大 8 MB、1200万画素）",
+      "decode_processing": "QR画像を読み取り中...",
+      "decode_result": "読み取り結果",
+      "decode_prompt": "読み取ったテキストがここに表示されます",
+      "decode_type_url": "URL リンク",
+      "decode_type_text": "プレーンテキスト",
+      "decode_one_code": "画像ごとに1つのQRコードを読み取ります。",
+      "decode_empty_file": "選択した画像は空です。",
+      "decode_too_large": "QR画像は 8 MB 以下にしてください。",
+      "decode_unsupported": "有効な PNG、JPEG、WebP 画像を選択してください。",
+      "decode_dimensions_too_large": "QR画像は 1200万画素以下にしてください。",
+      "decode_image_failed": "ブラウザでこの画像を読み取れませんでした。",
+      "decode_decoder_unavailable": "ローカル QR デコーダーを読み込めませんでした。接続を確認してもう一度試してください。",
+      "decode_no_qr": "この画像にQRコードが見つかりませんでした。",
+      "decode_copy_success": "読み取ったテキストをコピーしました",
+      "decode_not_url": "読み取ったテキストは HTTP または HTTPS URL ではありません。",
       "content": "コンテンツ",
       "placeholder": "テキストまたは URL を入力...",
       "size": "サイズ:",
@@ -1097,9 +1118,9 @@
       "logo_toggle": "ロゴを埋め込む",
       "logo_upload": "ロゴをアップロード",
       "logo_remove": "ロゴを削除",
-      "logo_hint": "可読性のため、透過 PNG/SVG ロゴの使用を推奨します。",
+      "logo_hint": "透明な PNG、JPEG、WebP、GIF ロゴを使用してください。SVG ロゴは先に SVG から PNG 変換ツールで変換してください。",
       "logo_size": "ロゴサイズ:",
-      "logo_invalid": "画像ファイルをアップロードしてください。",
+      "logo_invalid": "有効な PNG、JPEG、WebP、GIF ロゴをアップロードしてください。ここでは SVG ファイルを使用できません。",
       "logo_too_large": "ロゴファイルは 2MB 以下にしてください。",
       "downloaded_png": "QRコードを PNG として保存しました",
       "downloaded_svg": "QRコードを SVG として保存しました",
@@ -1154,6 +1175,8 @@
       "group_prefix": "グループ",
       "error_invalid_regex": "無効な正規表現",
       "error_match_limit": "一致数が上限を超えました。空文字列への無限一致が発生している可能性があります。",
+      "error_worker_timeout": "正規表現の評価が安全タイムアウトを超えました。パターンを簡略化するか、テスト文字列を短くしてください。",
+      "error_safe_evaluation_unavailable": "分離された Worker を実行できないため、安全な正規表現評価を利用できません。ブラウザーまたはコンテンツセキュリティ設定を確認してください。",
       "timing_label": "{ms} ミリ秒",
       "evaluating_label": "評価中...",
       "performance_warning_title": "パフォーマンス警告",
@@ -1300,6 +1323,7 @@
       "description": "IPv4 CIDR ブロックからネットワーク、ブロードキャスト、ホスト範囲、マスクを計算します。"
     },
     "csv_json_converter": {
+      "spreadsheet_safe_note": "スプレッドシート向け安全 CSV では、数式のような文字列セルの先頭にアポストロフィを追加します。数値型は変更されませんが、保護された文字列はバイト単位では往復変換されません。",
       "title": "CSV ↔ JSON コンバーター",
       "description": "CSVとJSON形式を即座に変換。自動区切り検出、カスタム区切り、型推論に対応。",
       "show_settings_action": "設定を表示",
@@ -1317,6 +1341,7 @@
       "csv_has_header_label": "先頭行をヘッダーとして扱う",
       "json_include_header_label": "ヘッダー行を含める",
       "type_inference_label": "型を推定する（数値・真偽値）",
+      "diagnostics_label": "CSV 診断",
       "input_upload_action": "アップロード",
       "error_json_array_required": "JSON はオブジェクト配列または配列配列である必要があります。"
     },
@@ -1360,8 +1385,8 @@
       "case_label": "文字ケース",
       "case_lowercase": "小文字",
       "case_uppercase": "大文字",
-      "length_label": "長さ",
-      "alphabet_label": "文字セット",
+      "length_label": "長さ（1〜256）",
+      "alphabet_label": "文字セット（重複しない Unicode コードポイント 2〜256 個）",
       "about_heading": "{type} について",
       "about_uuid_v4": "UUID v4 は 122 ビットの乱数を使うため、衝突確率は極めて低くなります。",
       "about_uuid_v7": "UUID v7 には Unix ミリ秒タイムスタンプが埋め込まれており、生成時刻順に並べやすくなります。",
@@ -1369,7 +1394,14 @@
       "about_nanoid": "NanoID は URL フレンドリーでコンパクトな一意 ID を生成します。デフォルトの 21 文字で約 126 ビットのエントロピーがあります。",
       "generated_heading": "生成された ID",
       "embedded_timestamp": "埋め込みタイムスタンプ: {value}",
-      "copied_desc": "{count} 件の ID をコピーしました。"
+      "copied_desc": "{count} 件の ID をコピーしました。",
+      "error_quantity_invalid": "件数には 1 から 1000 までの整数を入力してください。",
+      "error_nanoid_size_invalid": "NanoID の長さには 1 から 256 までの整数を入力してください。",
+      "error_alphabet_too_short": "文字セットには重複しない Unicode コードポイントが 2 個以上必要です。",
+      "error_alphabet_too_long": "文字セットに指定できる Unicode コードポイントは 256 個までです。",
+      "error_alphabet_duplicate": "文字セットに同じ Unicode コードポイントを重複して指定できません。",
+      "error_alphabet_invalid_unicode": "文字セットに対応するペアのない Unicode サロゲートが含まれています。",
+      "error_generation_failed": "この設定では ID を生成できませんでした。"
     },
     "certificate_decoder": {
       "title": "証明書デコーダー",
@@ -1408,6 +1440,7 @@
       "body_type_none": "なし",
       "body_type_raw": "生データ",
       "body_type_form_urlencoded": "フォーム URL エンコード",
+      "body_not_allowed": "生成する GET と HEAD リクエストに本文は含められません。",
       "generated_code": "生成コード",
       "code_type_fetch": "JS Fetch コード",
       "query_params": "クエリパラメータ",
@@ -1427,7 +1460,19 @@
       "title": "cURL→コード変換",
       "description": "cURLコマンドをJavaScript、Python、Go、PHP、Rustコードに変換。",
       "input_label": "cURL コマンド",
-      "parse_error": "cURL コマンドを解析できません。構文を確認してからもう一度お試しください。"
+      "parse_error": "cURL コマンドを解析できません。構文を確認してからもう一度お試しください。",
+      "parse_warning": "cURL コマンドは警告付きで解析されました。",
+      "diagnostic_invalid_command": "curl の後には絶対 HTTP(S) URL を1つ指定してください。",
+      "diagnostic_unterminated_quote": "引用符 {token} が閉じられていません。",
+      "diagnostic_dangling_escape": "末尾のバックスラッシュにはエスケープ対象がありません。",
+      "diagnostic_unsupported_operator": "シェル演算子 {token} はサポートされていません。",
+      "diagnostic_unsupported_option": "cURL オプション {token} はサポートされていません。",
+      "diagnostic_missing_option_value": "オプション {token} には値が必要です。",
+      "diagnostic_invalid_value": "cURL の値 {token} は無効です。",
+      "diagnostic_unexpected_argument": "予期しない引数または追加 URL {token} があります。",
+      "diagnostic_unsupported_data_file": "ファイルまたは標準入力のデータ参照 {token} はサポートされていません。",
+      "diagnostic_duplicate_header": "ヘッダー {token} が重複しています。生成コードでは最後の値を使用します。",
+      "diagnostic_position": "{position} 文字目。"
     },
     "javascript_formatter": {
       "title": "JavaScriptフォーマッター",
@@ -1682,13 +1727,25 @@
       "refreshes_in": "{seconds} 秒後に更新",
       "mode": "モード",
       "digits": "桁数",
-      "secret_key": "シークレットキー (Base32)",
+      "secret_key": "シークレットキー（パディングなし Base32、区切りなし）",
       "period": "周期（秒）",
       "counter": "カウンター",
       "refresh": "更新",
       "generate_random": "ランダム生成",
       "settings": "設定",
-      "increment": "増加"
+      "increment": "増加",
+      "error_secret_required": "Base32 シークレットを入力してください。",
+      "error_secret_invalid_characters": "ASCII の A-Z と 2-7 のみ使用できます。空白、区切り、記号、Unicode は使用できません。",
+      "error_secret_padding_unsupported": "パディング付き Base32 は未対応です。末尾の = を削除してください。",
+      "error_secret_invalid_length": "パディングなし Base32 シークレットの長さが無効です。",
+      "error_secret_invalid_padding_bits": "Base32 シークレットの未使用ビットがゼロではなく、正規のエンコードではありません。",
+      "error_period_required": "TOTP の周期を入力してください。",
+      "error_period_invalid_integer": "TOTP の周期は整数で指定してください。",
+      "error_period_out_of_range": "TOTP の周期は 15～120 秒で指定してください。",
+      "error_counter_required": "HOTP カウンターを入力してください。",
+      "error_counter_invalid_integer": "HOTP カウンターは整数で指定してください。",
+      "error_counter_out_of_range": "HOTP カウンターは 0～9007199254740991 で指定してください。",
+      "error_generation_failed": "このブラウザーではワンタイムパスワードを生成できませんでした。"
     },
     "openapi_mock": {
       "title": "OpenAPIモックプレイグラウンド",
diff --git a/src/core/i18n/translations/ko.json b/src/core/i18n/translations/ko.json
index d4514509..ea529a19 100644
--- a/src/core/i18n/translations/ko.json
+++ b/src/core/i18n/translations/ko.json
@@ -894,7 +894,7 @@
       "decode_tab": "Base64 → 이미지",
       "image_input": "이미지 입력",
       "drop_text": "여기에 이미지를 놓거나 클릭하여 찾아보기",
-      "supports": "PNG, JPG, SVG, WebP 지원",
+      "supports": "PNG, JPG, WebP, GIF 및 AVIF를 지원합니다. SVG 파일은 먼저 SVG-PNG 변환 도구로 변환하세요.",
       "base64_output": "Base64 출력",
       "base64_input": "Base64 입력",
       "image_preview": "이미지 미리보기",
@@ -910,7 +910,7 @@
       "copy_format_success": "{format} 형식을 클립보드에 복사했습니다",
       "invalid_base64": "잘못된 Base64 이미지 데이터입니다.",
       "invalid_file_title": "잘못된 파일",
-      "invalid_file_desc": "이미지 파일(PNG, JPG, SVG, WebP)을 선택해 주세요",
+      "invalid_file_desc": "PNG, JPG, WebP, GIF 또는 AVIF 파일을 선택하세요. SVG 파일은 먼저 SVG-PNG 변환 도구로 변환하세요.",
       "file_too_large_title": "파일이 너무 큽니다",
       "file_too_large_desc": "10MB 미만의 이미지를 선택해 주세요",
       "copied_output_desc": "{format} 형식을 클립보드에 복사했습니다",
@@ -1075,8 +1075,29 @@
       "hex6_output": "HEX(6자리)"
     },
     "qr_code_generator": {
-      "title": "QR 코드 생성기",
-      "description": "사용자 지정 크기와 색상으로 QR 코드를 생성합니다. PNG 또는 SVG로 다운로드하세요.",
+      "title": "QR 코드 생성 및 해독",
+      "description": "QR 코드를 생성하거나 브라우저에서 QR 이미지 내용을 로컬로 해독합니다.",
+      "mode_label": "QR 모드",
+      "mode_generate": "생성",
+      "mode_decode": "이미지 해독",
+      "decode_upload": "이미지 선택",
+      "decode_drop": "QR 이미지를 여기에 놓거나 파일 선택",
+      "decode_formats": "PNG, JPEG 또는 WebP, 최대 8 MB 및 1,200만 픽셀",
+      "decode_processing": "QR 이미지 해독 중...",
+      "decode_result": "해독 결과",
+      "decode_prompt": "해독된 텍스트가 여기에 표시됩니다",
+      "decode_type_url": "웹 주소",
+      "decode_type_text": "일반 텍스트",
+      "decode_one_code": "이미지당 하나의 QR 코드를 해독합니다.",
+      "decode_empty_file": "선택한 이미지가 비어 있습니다.",
+      "decode_too_large": "QR 이미지는 8 MB 이하여야 합니다.",
+      "decode_unsupported": "올바른 PNG, JPEG 또는 WebP 이미지를 선택하세요.",
+      "decode_dimensions_too_large": "QR 이미지는 1,200만 픽셀 이하여야 합니다.",
+      "decode_image_failed": "브라우저에서 이 이미지를 읽을 수 없습니다.",
+      "decode_decoder_unavailable": "로컬 QR 디코더를 불러올 수 없습니다. 연결을 확인한 뒤 다시 시도하세요.",
+      "decode_no_qr": "이 이미지에서 QR 코드를 찾지 못했습니다.",
+      "decode_copy_success": "해독된 텍스트를 복사했습니다",
+      "decode_not_url": "해독된 텍스트가 HTTP 또는 HTTPS URL이 아닙니다.",
       "content": "콘텐츠",
       "placeholder": "텍스트나 URL 입력...",
       "size": "크기:",
@@ -1097,9 +1118,9 @@
       "logo_toggle": "로고 삽입",
       "logo_upload": "로고 업로드",
       "logo_remove": "로고 제거",
-      "logo_hint": "가독성을 위해 투명 PNG/SVG 로고 사용을 권장합니다.",
+      "logo_hint": "투명한 PNG, JPEG, WebP 또는 GIF 로고를 사용하세요. SVG 로고는 먼저 SVG-PNG 변환 도구로 변환하세요.",
       "logo_size": "로고 크기:",
-      "logo_invalid": "이미지 파일을 업로드해 주세요.",
+      "logo_invalid": "올바른 PNG, JPEG, WebP 또는 GIF 로고를 업로드하세요. 여기서는 SVG 파일을 지원하지 않습니다.",
       "logo_too_large": "로고 파일은 2MB 이하여야 합니다.",
       "downloaded_png": "QR 코드가 PNG로 저장되었습니다",
       "downloaded_svg": "QR 코드가 SVG로 저장되었습니다",
@@ -1154,6 +1175,8 @@
       "group_prefix": "그룹",
       "error_invalid_regex": "잘못된 정규식",
       "error_match_limit": "일치 개수가 한도를 초과했습니다. 빈 문자열을 무한히 매칭하고 있을 수 있습니다.",
+      "error_worker_timeout": "정규식 평가가 안전 시간 제한을 초과했습니다. 패턴을 단순화하거나 테스트 입력을 줄이세요.",
+      "error_safe_evaluation_unavailable": "격리된 Worker를 실행할 수 없어 안전한 정규식 평가를 사용할 수 없습니다. 브라우저 또는 콘텐츠 보안 설정을 확인하세요.",
       "timing_label": "시간: {ms} ms",
       "evaluating_label": "평가 중...",
       "performance_warning_title": "성능 경고",
@@ -1300,6 +1323,7 @@
       "description": "IPv4 CIDR 블록에서 네트워크, 브로드캐스트, 호스트 범위, 마스크를 계산합니다."
     },
     "csv_json_converter": {
+      "spreadsheet_safe_note": "스프레드시트 안전 CSV는 수식처럼 보이는 문자열 셀 앞에 아포스트로피를 추가합니다. 숫자 형식은 변경되지 않으며, 보호된 문자열은 바이트 단위로 왕복 변환되지 않습니다.",
       "title": "CSV ↔ JSON 변환기",
       "description": "CSV와 JSON 형식 간 즉시 변환. 자동 구분자 감지, 사용자 정의 구분자, 유형 추론 지원.",
       "show_settings_action": "설정 표시",
@@ -1317,6 +1341,7 @@
       "csv_has_header_label": "첫 행을 헤더로 사용",
       "json_include_header_label": "헤더 행 포함",
       "type_inference_label": "유형 추론 사용 (숫자, 불리언)",
+      "diagnostics_label": "CSV 진단",
       "input_upload_action": "업로드",
       "error_json_array_required": "JSON은 객체 배열 또는 배열 배열이어야 합니다."
     },
@@ -1360,8 +1385,8 @@
       "case_label": "문자 케이스",
       "case_lowercase": "소문자",
       "case_uppercase": "대문자",
-      "length_label": "길이",
-      "alphabet_label": "문자 집합",
+      "length_label": "길이(1-256)",
+      "alphabet_label": "문자 집합(중복 없는 유니코드 코드 포인트 2-256개)",
       "about_heading": "{type} 정보",
       "about_uuid_v4": "UUID v4는 122비트 무작위 값을 사용하므로 충돌 가능성이 매우 낮습니다.",
       "about_uuid_v7": "UUID v7은 Unix 밀리초 타임스탬프를 포함하므로 생성 시간 순으로 정렬하기 쉽습니다.",
@@ -1369,7 +1394,14 @@
       "about_nanoid": "NanoID는 URL 친화적인 짧은 고유 ID를 생성합니다. 기본 21자 형식은 약 126비트의 엔트로피를 제공합니다.",
       "generated_heading": "생성된 ID",
       "embedded_timestamp": "내장 타임스탬프: {value}",
-      "copied_desc": "ID {count}개를 복사했습니다."
+      "copied_desc": "ID {count}개를 복사했습니다.",
+      "error_quantity_invalid": "수량은 1에서 1000 사이의 정수여야 합니다.",
+      "error_nanoid_size_invalid": "NanoID 길이는 1에서 256 사이의 정수여야 합니다.",
+      "error_alphabet_too_short": "문자 집합에는 중복 없는 유니코드 코드 포인트가 2개 이상 필요합니다.",
+      "error_alphabet_too_long": "문자 집합에는 유니코드 코드 포인트를 256개까지만 사용할 수 있습니다.",
+      "error_alphabet_duplicate": "문자 집합에 같은 유니코드 코드 포인트를 중복해서 사용할 수 없습니다.",
+      "error_alphabet_invalid_unicode": "문자 집합에 짝이 없는 유니코드 서로게이트가 포함되어 있습니다.",
+      "error_generation_failed": "이 설정으로 ID를 생성할 수 없습니다."
     },
     "certificate_decoder": {
       "title": "인증서 디코더",
@@ -1408,6 +1440,7 @@
       "body_type_none": "없음",
       "body_type_raw": "원본",
       "body_type_form_urlencoded": "폼 URL 인코딩",
+      "body_not_allowed": "생성된 GET 및 HEAD 요청에는 본문을 포함할 수 없습니다.",
       "generated_code": "생성 코드",
       "code_type_fetch": "JS Fetch 코드",
       "query_params": "쿼리 매개변수",
@@ -1427,7 +1460,19 @@
       "title": "cURL → 코드 변환",
       "description": "cURL 명령을 JavaScript, Python, Go, PHP 또는 Rust 코드로 변환합니다.",
       "input_label": "cURL 명령",
-      "parse_error": "cURL 명령을 해석할 수 없습니다. 구문을 확인한 후 다시 시도하세요."
+      "parse_error": "cURL 명령을 해석할 수 없습니다. 구문을 확인한 후 다시 시도하세요.",
+      "parse_warning": "cURL 명령이 경고와 함께 해석되었습니다.",
+      "diagnostic_invalid_command": "curl 다음에 하나의 절대 HTTP(S) URL을 입력하세요.",
+      "diagnostic_unterminated_quote": "따옴표 {token}가 닫히지 않았습니다.",
+      "diagnostic_dangling_escape": "마지막 백슬래시 뒤에 이스케이프할 문자가 없습니다.",
+      "diagnostic_unsupported_operator": "셸 연산자 {token}는 지원되지 않습니다.",
+      "diagnostic_unsupported_option": "cURL 옵션 {token}는 지원되지 않습니다.",
+      "diagnostic_missing_option_value": "옵션 {token}에 값이 필요합니다.",
+      "diagnostic_invalid_value": "cURL 값 {token}가 올바르지 않습니다.",
+      "diagnostic_unexpected_argument": "예상하지 못한 인수 또는 추가 URL {token}가 있습니다.",
+      "diagnostic_unsupported_data_file": "파일 또는 표준 입력 데이터 참조 {token}는 지원되지 않습니다.",
+      "diagnostic_duplicate_header": "헤더 {token}가 중복되었습니다. 생성된 코드는 마지막 값을 사용합니다.",
+      "diagnostic_position": "{position}번째 문자."
     },
     "javascript_formatter": {
       "title": "JavaScript 포매터",
@@ -1682,13 +1727,25 @@
       "refreshes_in": "{seconds}초 후 갱신",
       "mode": "모드",
       "digits": "자릿수",
-      "secret_key": "비밀 키 (Base32)",
+      "secret_key": "비밀 키(패딩 없는 Base32, 구분자 없음)",
       "period": "주기(초)",
       "counter": "카운터",
       "refresh": "새로고침",
       "generate_random": "랜덤 생성",
       "settings": "설정",
-      "increment": "증가"
+      "increment": "증가",
+      "error_secret_required": "Base32 비밀 키를 입력하세요.",
+      "error_secret_invalid_characters": "ASCII A-Z와 2-7만 사용할 수 있습니다. 공백, 구분자, 문장 부호 및 Unicode는 허용되지 않습니다.",
+      "error_secret_padding_unsupported": "패딩된 Base32는 지원하지 않습니다. 끝의 = 문자를 제거하세요.",
+      "error_secret_invalid_length": "패딩 없는 Base32 비밀 키의 길이가 잘못되었습니다.",
+      "error_secret_invalid_padding_bits": "Base32 비밀 키의 사용하지 않는 비트가 0이 아니므로 정규 인코딩이 아닙니다.",
+      "error_period_required": "TOTP 주기를 입력하세요.",
+      "error_period_invalid_integer": "TOTP 주기는 정수여야 합니다.",
+      "error_period_out_of_range": "TOTP 주기는 15초에서 120초 사이여야 합니다.",
+      "error_counter_required": "HOTP 카운터를 입력하세요.",
+      "error_counter_invalid_integer": "HOTP 카운터는 정수여야 합니다.",
+      "error_counter_out_of_range": "HOTP 카운터는 0에서 9007199254740991 사이여야 합니다.",
+      "error_generation_failed": "이 브라우저에서 일회용 비밀번호를 생성할 수 없습니다."
     },
     "openapi_mock": {
       "title": "OpenAPI Mock 플레이그라운드",
diff --git a/src/core/i18n/translations/zh-CN.json b/src/core/i18n/translations/zh-CN.json
index 0ec4036a..c878649e 100644
--- a/src/core/i18n/translations/zh-CN.json
+++ b/src/core/i18n/translations/zh-CN.json
@@ -894,7 +894,7 @@
       "decode_tab": "Base64 → 图片",
       "image_input": "图片输入",
       "drop_text": "将图片拖放到此处或点击浏览",
-      "supports": "支持 PNG、JPG、SVG、WebP",
+      "supports": "支持 PNG、JPG、WebP、GIF 和 AVIF。SVG 文件请先使用 SVG 转 PNG 工具转换。",
       "base64_output": "Base64 输出",
       "base64_input": "Base64 输入",
       "image_preview": "图片预览",
@@ -910,7 +910,7 @@
       "copy_format_success": "已将 {format} 复制到剪贴板",
       "invalid_base64": "Base64 图片载荷无效。",
       "invalid_file_title": "文件无效",
-      "invalid_file_desc": "请选择图片文件（PNG、JPG、SVG、WebP）",
+      "invalid_file_desc": "请选择 PNG、JPG、WebP、GIF 或 AVIF 文件。SVG 文件请先使用 SVG 转 PNG 工具转换。",
       "file_too_large_title": "文件过大",
       "file_too_large_desc": "请选择小于 10MB 的图片",
       "copied_output_desc": "已将 {format} 复制到剪贴板",
@@ -1075,8 +1075,29 @@
       "hex6_output": "HEX（6位）"
     },
     "qr_code_generator": {
-      "title": "二维码生成器",
-      "description": "生成自定义大小和颜色的二维码。下载格式为 PNG 或 SVG。",
+      "title": "二维码生成与解析",
+      "description": "生成自定义二维码，或在浏览器本地解析二维码图片。",
+      "mode_label": "二维码模式",
+      "mode_generate": "生成",
+      "mode_decode": "解析图片",
+      "decode_upload": "选择图片",
+      "decode_drop": "将二维码图片拖到此处或选择文件",
+      "decode_formats": "PNG、JPEG 或 WebP，最大 8 MB、1200 万像素",
+      "decode_processing": "正在解析二维码图片...",
+      "decode_result": "解析结果",
+      "decode_prompt": "解析后的文本会显示在这里",
+      "decode_type_url": "网址",
+      "decode_type_text": "文本",
+      "decode_one_code": "每张图片解析一个二维码。",
+      "decode_empty_file": "所选图片为空。",
+      "decode_too_large": "二维码图片不能超过 8 MB。",
+      "decode_unsupported": "请选择有效的 PNG、JPEG 或 WebP 图片。",
+      "decode_dimensions_too_large": "二维码图片不能超过 1200 万像素。",
+      "decode_image_failed": "浏览器无法读取此图片。",
+      "decode_decoder_unavailable": "本地二维码解码器无法加载。请检查网络后重试此图片。",
+      "decode_no_qr": "此图片中未找到二维码。",
+      "decode_copy_success": "解析文本已复制",
+      "decode_not_url": "解析文本不是 HTTP 或 HTTPS 网址。",
       "content": "内容",
       "placeholder": "输入文本或 URL...",
       "size": "大小:",
@@ -1097,9 +1118,9 @@
       "logo_toggle": "嵌入 Logo",
       "logo_upload": "上传 Logo",
       "logo_remove": "移除 Logo",
-      "logo_hint": "建议使用透明 PNG/SVG Logo 以获得最佳可读性。",
+      "logo_hint": "请使用透明的 PNG、JPEG、WebP 或 GIF Logo。SVG Logo 请先通过 SVG 转 PNG 工具转换。",
       "logo_size": "Logo 大小:",
-      "logo_invalid": "请上传图片文件。",
+      "logo_invalid": "请上传有效的 PNG、JPEG、WebP 或 GIF Logo；此处不支持 SVG 文件。",
       "logo_too_large": "Logo 文件大小必须不超过 2MB。",
       "downloaded_png": "QR 码已保存为 PNG",
       "downloaded_svg": "QR 码已保存为 SVG",
@@ -1154,6 +1175,8 @@
       "group_prefix": "分组",
       "error_invalid_regex": "正则表达式无效",
       "error_match_limit": "匹配数量超限，正则可能正在无限匹配空字符串。",
+      "error_worker_timeout": "正则表达式求值超过安全时限。请简化表达式或缩短测试文本。",
+      "error_safe_evaluation_unavailable": "隔离 Worker 无法运行，当前不能安全地执行正则表达式。请检查浏览器或内容安全策略设置后重试。",
       "timing_label": "{ms} 毫秒",
       "evaluating_label": "正在评估...",
       "performance_warning_title": "性能警告",
@@ -1300,6 +1323,7 @@
       "description": "根据 IPv4 CIDR 网段计算网络地址、广播地址、主机范围和掩码。"
     },
     "csv_json_converter": {
+      "spreadsheet_safe_note": "电子表格安全 CSV 会为类似公式的字符串单元格添加前导撇号。数值类型保持不变；受保护的字符串无法逐字节往返还原。",
       "title": "CSV ↔ JSON 转换器",
       "description": "在 CSV 和 JSON 格式之间即时转换。支持自动检测分隔符、自定义分隔符和类型推断。",
       "show_settings_action": "显示设置",
@@ -1317,6 +1341,7 @@
       "csv_has_header_label": "首行为表头",
       "json_include_header_label": "包含表头行",
       "type_inference_label": "自动推断类型（数字、布尔值）",
+      "diagnostics_label": "CSV 诊断",
       "input_upload_action": "上传",
       "error_json_array_required": "JSON 必须是对象数组或数组数组。"
     },
@@ -1360,8 +1385,8 @@
       "case_label": "大小写",
       "case_lowercase": "小写",
       "case_uppercase": "大写",
-      "length_label": "长度",
-      "alphabet_label": "字符集",
+      "length_label": "长度（1-256）",
+      "alphabet_label": "字符集（2-256 个不重复的 Unicode 码点）",
       "about_heading": "关于 {type}",
       "about_uuid_v4": "UUID v4 使用 122 位随机比特，发生碰撞的概率极低。",
       "about_uuid_v7": "UUID v7 在前缀中嵌入 Unix 毫秒时间戳，因此可以按生成时间排序。",
@@ -1369,7 +1394,14 @@
       "about_nanoid": "NanoID 生成紧凑且适合 URL 的唯一标识符，默认 21 个字符约有 126 位熵。",
       "generated_heading": "已生成的 ID",
       "embedded_timestamp": "嵌入时间戳：{value}",
-      "copied_desc": "已复制 {count} 个 ID。"
+      "copied_desc": "已复制 {count} 个 ID。",
+      "error_quantity_invalid": "数量必须是 1 到 1000 之间的整数。",
+      "error_nanoid_size_invalid": "NanoID 长度必须是 1 到 256 之间的整数。",
+      "error_alphabet_too_short": "字符集至少需要 2 个不重复的 Unicode 码点。",
+      "error_alphabet_too_long": "字符集不能超过 256 个 Unicode 码点。",
+      "error_alphabet_duplicate": "字符集不能包含重复的 Unicode 码点。",
+      "error_alphabet_invalid_unicode": "字符集包含未配对的 Unicode 代理项。",
+      "error_generation_failed": "无法使用当前设置生成 ID。"
     },
     "certificate_decoder": {
       "title": "证书解码器",
@@ -1408,6 +1440,7 @@
       "body_type_none": "无",
       "body_type_raw": "原始内容",
       "body_type_form_urlencoded": "表单 URL 编码",
+      "body_not_allowed": "生成的 GET 和 HEAD 请求不能包含请求正文。",
       "generated_code": "生成代码",
       "code_type_fetch": "JS Fetch 代码",
       "query_params": "查询参数",
@@ -1427,7 +1460,19 @@
       "title": "cURL 转代码",
       "description": "将 cURL 命令转换为 JavaScript、Python、Go、PHP 或 Rust 代码。",
       "input_label": "cURL 命令",
-      "parse_error": "无法解析 cURL 命令，请检查语法后重试。"
+      "parse_error": "无法解析 cURL 命令，请检查语法后重试。",
+      "parse_warning": "cURL 命令已解析，但存在警告。",
+      "diagnostic_invalid_command": "应以 curl 开头，并且只包含一个绝对 HTTP(S) URL。",
+      "diagnostic_unterminated_quote": "引号 {token} 未闭合。",
+      "diagnostic_dangling_escape": "末尾的反斜杠没有可转义的字符。",
+      "diagnostic_unsupported_operator": "不支持 shell 操作符 {token}。",
+      "diagnostic_unsupported_option": "不支持 cURL 选项 {token}。",
+      "diagnostic_missing_option_value": "选项 {token} 需要一个值。",
+      "diagnostic_invalid_value": "cURL 值 {token} 无效。",
+      "diagnostic_unexpected_argument": "存在意外参数或额外 URL {token}。",
+      "diagnostic_unsupported_data_file": "不支持文件或标准输入数据引用 {token}。",
+      "diagnostic_duplicate_header": "请求头 {token} 重复；生成的代码使用最后一个值。",
+      "diagnostic_position": "第 {position} 个字符。"
     },
     "javascript_formatter": {
       "title": "JavaScript 格式化器",
@@ -1682,13 +1727,25 @@
       "refreshes_in": "{seconds} 秒后刷新",
       "mode": "模式",
       "digits": "位数",
-      "secret_key": "密钥 (Base32)",
+      "secret_key": "密钥（无填充 Base32，不允许分隔符）",
       "period": "周期（秒）",
       "counter": "计数器",
       "refresh": "刷新",
       "generate_random": "生成随机密钥",
       "settings": "设置",
-      "increment": "递增"
+      "increment": "递增",
+      "error_secret_required": "请输入 Base32 密钥。",
+      "error_secret_invalid_characters": "只能使用 ASCII 字母 A-Z 和数字 2-7，不接受空格、分隔符、标点或 Unicode 字符。",
+      "error_secret_padding_unsupported": "不支持带填充的 Base32，请删除末尾的 = 字符。",
+      "error_secret_invalid_length": "无填充 Base32 密钥的长度无效。",
+      "error_secret_invalid_padding_bits": "Base32 密钥包含非零的未使用位，不是规范编码。",
+      "error_period_required": "请输入 TOTP 周期。",
+      "error_period_invalid_integer": "TOTP 周期必须是整数。",
+      "error_period_out_of_range": "TOTP 周期必须在 15 到 120 秒之间。",
+      "error_counter_required": "请输入 HOTP 计数器。",
+      "error_counter_invalid_integer": "HOTP 计数器必须是整数。",
+      "error_counter_out_of_range": "HOTP 计数器必须在 0 到 9007199254740991 之间。",
+      "error_generation_failed": "此浏览器无法生成一次性密码。"
     },
     "openapi_mock": {
       "title": "OpenAPI Mock 测试台",
diff --git a/src/core/i18n/translations/zh-TW.json b/src/core/i18n/translations/zh-TW.json
index 0f00a554..945f7cf3 100644
--- a/src/core/i18n/translations/zh-TW.json
+++ b/src/core/i18n/translations/zh-TW.json
@@ -894,7 +894,7 @@
       "decode_tab": "Base64 → 圖片",
       "image_input": "圖片輸入",
       "drop_text": "將圖片拖曳至此處或點擊瀏覽",
-      "supports": "支援 PNG、JPG、SVG、WebP",
+      "supports": "支援 PNG、JPG、WebP、GIF 和 AVIF。SVG 檔案請先使用 SVG 轉 PNG 工具轉換。",
       "base64_output": "Base64 輸出",
       "base64_input": "Base64 輸入",
       "image_preview": "圖片預覽",
@@ -910,7 +910,7 @@
       "copy_format_success": "已將 {format} 複製到剪貼簿",
       "invalid_base64": "Base64 圖像內容無效。",
       "invalid_file_title": "檔案無效",
-      "invalid_file_desc": "請選擇圖片檔案（PNG、JPG、SVG、WebP）",
+      "invalid_file_desc": "請選擇 PNG、JPG、WebP、GIF 或 AVIF 檔案。SVG 檔案請先使用 SVG 轉 PNG 工具轉換。",
       "file_too_large_title": "檔案過大",
       "file_too_large_desc": "請選擇小於 10MB 的圖片",
       "copied_output_desc": "已將 {format} 複製到剪貼簿",
@@ -1075,8 +1075,29 @@
       "hex6_output": "HEX（6位）"
     },
     "qr_code_generator": {
-      "title": "QR Code 產生器",
-      "description": "產生自訂大小和顏色的 QR Code。下載格式為 PNG 或 SVG。",
+      "title": "QR Code 產生與解析",
+      "description": "產生自訂 QR Code，或在瀏覽器本機解析 QR Code 圖片。",
+      "mode_label": "QR Code 模式",
+      "mode_generate": "產生",
+      "mode_decode": "解析圖片",
+      "decode_upload": "選擇圖片",
+      "decode_drop": "將 QR Code 圖片拖到此處或選擇檔案",
+      "decode_formats": "PNG、JPEG 或 WebP，最大 8 MB、1200 萬像素",
+      "decode_processing": "正在解析 QR Code 圖片...",
+      "decode_result": "解析結果",
+      "decode_prompt": "解析後的文字會顯示在這裡",
+      "decode_type_url": "網址",
+      "decode_type_text": "文字",
+      "decode_one_code": "每張圖片解析一個 QR Code。",
+      "decode_empty_file": "所選圖片是空的。",
+      "decode_too_large": "QR Code 圖片不可超過 8 MB。",
+      "decode_unsupported": "請選擇有效的 PNG、JPEG 或 WebP 圖片。",
+      "decode_dimensions_too_large": "QR Code 圖片不可超過 1200 萬像素。",
+      "decode_image_failed": "瀏覽器無法讀取此圖片。",
+      "decode_decoder_unavailable": "本機 QR Code 解碼器無法載入。請檢查網路後再試一次。",
+      "decode_no_qr": "此圖片中找不到 QR Code。",
+      "decode_copy_success": "解析文字已複製",
+      "decode_not_url": "解析文字不是 HTTP 或 HTTPS 網址。",
       "content": "內容",
       "placeholder": "輸入文字或網址...",
       "size": "大小:",
@@ -1097,9 +1118,9 @@
       "logo_toggle": "嵌入 Logo",
       "logo_upload": "上傳 Logo",
       "logo_remove": "移除 Logo",
-      "logo_hint": "建議使用透明 PNG/SVG Logo 以獲得最佳可讀性。",
+      "logo_hint": "請使用透明的 PNG、JPEG、WebP 或 GIF Logo。SVG Logo 請先透過 SVG 轉 PNG 工具轉換。",
       "logo_size": "Logo 大小:",
-      "logo_invalid": "請上傳圖片檔案。",
+      "logo_invalid": "請上傳有效的 PNG、JPEG、WebP 或 GIF Logo；此處不支援 SVG 檔案。",
       "logo_too_large": "Logo 檔案大小必須不超過 2MB。",
       "downloaded_png": "QR Code 已儲存為 PNG",
       "downloaded_svg": "QR Code 已儲存為 SVG",
@@ -1154,6 +1175,8 @@
       "group_prefix": "群組",
       "error_invalid_regex": "正則表達式無效",
       "error_match_limit": "比對數量超出上限，正則可能正在無限比對空字串。",
+      "error_worker_timeout": "正則表達式求值超過安全時限。請簡化表達式或縮短測試文字。",
+      "error_safe_evaluation_unavailable": "隔離 Worker 無法執行，目前無法安全地執行正則表達式。請檢查瀏覽器或內容安全策略設定後再試一次。",
       "timing_label": "{ms} 毫秒",
       "evaluating_label": "正在評估...",
       "performance_warning_title": "效能警告",
@@ -1300,6 +1323,7 @@
       "description": "根據 IPv4 CIDR 網段計算網路位址、廣播位址、主機範圍與遮罩。"
     },
     "csv_json_converter": {
+      "spreadsheet_safe_note": "試算表安全 CSV 會在類似公式的字串儲存格前加上單引號。數值型別保持不變；受保護的字串無法逐位元組往返還原。",
       "title": "CSV ↔ JSON 轉換器",
       "description": "在 CSV 和 JSON 格式之間即時轉換。支援自動偵測分隔符號、自訂分隔符號和類型推斷。",
       "show_settings_action": "顯示設定",
@@ -1317,6 +1341,7 @@
       "csv_has_header_label": "首列為標頭",
       "json_include_header_label": "包含標頭列",
       "type_inference_label": "自動推斷型別（數字、布林值）",
+      "diagnostics_label": "CSV 診斷",
       "input_upload_action": "上傳",
       "error_json_array_required": "JSON 必須是物件陣列或陣列陣列。"
     },
@@ -1360,8 +1385,8 @@
       "case_label": "大小寫",
       "case_lowercase": "小寫",
       "case_uppercase": "大寫",
-      "length_label": "長度",
-      "alphabet_label": "字元集",
+      "length_label": "長度（1-256）",
+      "alphabet_label": "字元集（2-256 個不重複的 Unicode 碼位）",
       "about_heading": "關於 {type}",
       "about_uuid_v4": "UUID v4 使用 122 位隨機位元，碰撞機率極低。",
       "about_uuid_v7": "UUID v7 會嵌入 Unix 毫秒時間戳，因此可依建立時間排序。",
@@ -1369,7 +1394,14 @@
       "about_nanoid": "NanoID 會產生精簡且適合 URL 的唯一識別碼，預設 21 個字元約有 126 位熵。",
       "generated_heading": "已產生的 ID",
       "embedded_timestamp": "內嵌時間戳：{value}",
-      "copied_desc": "已複製 {count} 個 ID。"
+      "copied_desc": "已複製 {count} 個 ID。",
+      "error_quantity_invalid": "數量必須是 1 到 1000 之間的整數。",
+      "error_nanoid_size_invalid": "NanoID 長度必須是 1 到 256 之間的整數。",
+      "error_alphabet_too_short": "字元集至少需要 2 個不重複的 Unicode 碼位。",
+      "error_alphabet_too_long": "字元集不能超過 256 個 Unicode 碼位。",
+      "error_alphabet_duplicate": "字元集不能包含重複的 Unicode 碼位。",
+      "error_alphabet_invalid_unicode": "字元集包含未配對的 Unicode 代理項。",
+      "error_generation_failed": "無法使用目前設定產生 ID。"
     },
     "certificate_decoder": {
       "title": "憑證解碼器",
@@ -1408,6 +1440,7 @@
       "body_type_none": "無",
       "body_type_raw": "原始內容",
       "body_type_form_urlencoded": "表單 URL 編碼",
+      "body_not_allowed": "產生的 GET 和 HEAD 請求不能包含請求本文。",
       "generated_code": "產生程式碼",
       "code_type_fetch": "JS Fetch 程式碼",
       "query_params": "查詢參數",
@@ -1427,7 +1460,19 @@
       "title": "cURL 轉程式碼",
       "description": "將 cURL 指令轉換為 JavaScript、Python、Go、PHP 或 Rust 程式碼。",
       "input_label": "cURL 指令",
-      "parse_error": "無法解析 cURL 指令，請檢查語法後再試一次。"
+      "parse_error": "無法解析 cURL 指令，請檢查語法後再試一次。",
+      "parse_warning": "cURL 指令已解析，但有警告。",
+      "diagnostic_invalid_command": "應以 curl 開頭，且只能包含一個絕對 HTTP(S) URL。",
+      "diagnostic_unterminated_quote": "引號 {token} 未閉合。",
+      "diagnostic_dangling_escape": "結尾的反斜線沒有可跳脫的字元。",
+      "diagnostic_unsupported_operator": "不支援 shell 運算子 {token}。",
+      "diagnostic_unsupported_option": "不支援 cURL 選項 {token}。",
+      "diagnostic_missing_option_value": "選項 {token} 需要一個值。",
+      "diagnostic_invalid_value": "cURL 值 {token} 無效。",
+      "diagnostic_unexpected_argument": "出現非預期參數或額外 URL {token}。",
+      "diagnostic_unsupported_data_file": "不支援檔案或標準輸入資料參照 {token}。",
+      "diagnostic_duplicate_header": "標頭 {token} 重複；產生的程式碼會使用最後一個值。",
+      "diagnostic_position": "第 {position} 個字元。"
     },
     "javascript_formatter": {
       "title": "JavaScript 格式化器",
@@ -1682,13 +1727,25 @@
       "refreshes_in": "{seconds} 秒後重新整理",
       "mode": "模式",
       "digits": "位數",
-      "secret_key": "密鑰 (Base32)",
+      "secret_key": "密鑰（無填充 Base32，不允許分隔符）",
       "period": "週期（秒）",
       "counter": "計數器",
       "refresh": "重新整理",
       "generate_random": "產生隨機密鑰",
       "settings": "設定",
-      "increment": "遞增"
+      "increment": "遞增",
+      "error_secret_required": "請輸入 Base32 密鑰。",
+      "error_secret_invalid_characters": "只能使用 ASCII 字母 A-Z 和數字 2-7，不接受空格、分隔符、標點或 Unicode 字元。",
+      "error_secret_padding_unsupported": "不支援帶填充的 Base32，請移除結尾的 = 字元。",
+      "error_secret_invalid_length": "無填充 Base32 密鑰的長度無效。",
+      "error_secret_invalid_padding_bits": "Base32 密鑰包含非零的未使用位元，不是規範編碼。",
+      "error_period_required": "請輸入 TOTP 週期。",
+      "error_period_invalid_integer": "TOTP 週期必須是整數。",
+      "error_period_out_of_range": "TOTP 週期必須介於 15 到 120 秒。",
+      "error_counter_required": "請輸入 HOTP 計數器。",
+      "error_counter_invalid_integer": "HOTP 計數器必須是整數。",
+      "error_counter_out_of_range": "HOTP 計數器必須介於 0 到 9007199254740991。",
+      "error_generation_failed": "此瀏覽器無法產生一次性密碼。"
     },
     "openapi_mock": {
       "title": "OpenAPI Mock 測試台",
diff --git a/src/core/registry/tool-aliases.json b/src/core/registry/tool-aliases.json
index 9f7dca9f..819e65f4 100644
--- a/src/core/registry/tool-aliases.json
+++ b/src/core/registry/tool-aliases.json
@@ -1,4 +1,5 @@
 {
   "cron-expression-generator": "crontab-generator",
-  "tls-chain-inspector": "certificate-decoder"
+  "tls-chain-inspector": "certificate-decoder",
+  "csv-to-json": "csv-json-converter"
 }
diff --git a/src/core/registry/types.ts b/src/core/registry/types.ts
index 4ab6251c..d3eb46b8 100644
--- a/src/core/registry/types.ts
+++ b/src/core/registry/types.ts
@@ -8,6 +8,7 @@ export type ToolNetworkAccess = "none" | "user_requested" | "third_party_api"
 export type ToolExternalDataSent = "none" | "user_provided_url" | "derived_url"
 export type ToolInputPersistenceMode = true | false | "opt-in"
 export type ToolExecutionMode = "browser-local" | "external-request"
+export type ToolInputBehavior = "empty-first" | "explicit-sample" | "generator-default"
 export type ToolExternalRequestEndpointType = "none" | "user_provided_url" | "derived_public_asset" | "third_party_api"
 export type ToolExternalRequestManifest = {
     required: boolean
@@ -60,6 +61,8 @@ export interface ToolMeta {
     /** Lightweight example metadata used by quality gates and discovery surfaces */
     sampleInput?: string
     sampleMode?: string
+    /** Editable input ownership. Omitted inputs must behave as empty-first. */
+    inputBehavior?: ToolInputBehavior
     /** Input-size thresholds used by performance UI and quality gates */
     inputSizePolicy?: ToolInputSizePolicy
     /** Optional public compliance copy used by social/media policy gates */
diff --git a/src/core/routing/legacy-routes.json b/src/core/routing/legacy-routes.json
index 78f728db..3e482cdf 100644
--- a/src/core/routing/legacy-routes.json
+++ b/src/core/routing/legacy-routes.json
@@ -10,5 +10,11 @@
     "targetSlug": "certificate-decoder",
     "status": 301,
     "reason": "merged"
+  },
+  {
+    "sourceSlug": "csv-to-json",
+    "targetSlug": "csv-json-converter",
+    "status": 301,
+    "reason": "renamed"
   }
 ]
diff --git a/src/core/security/inline-script-policy.ts b/src/core/security/inline-script-policy.ts
index 07c36cda..85937fab 100644
--- a/src/core/security/inline-script-policy.ts
+++ b/src/core/security/inline-script-policy.ts
@@ -13,7 +13,7 @@ export const INLINE_SCRIPT_POLICY: readonly InlineScriptPolicyEntry[] = [
         file: "src/app/layout.tsx",
         purpose: "Set locale lang, color scheme, theme-color, and localized manifest before first paint.",
         requiresUnsafeInline: false,
-        migrationPath: "Implemented as a same-origin runtime script loaded in <head> before first paint.",
+        migrationPath: "Implemented as a parser-blocking same-origin runtime script in <head> so the saved theme is applied before first paint.",
         externalScript: "/runtime/theme-manifest-bootstrap.js",
     },
     {
diff --git a/src/core/seo/components/category-hub.tsx b/src/core/seo/components/category-hub.tsx
index c0a7ce36..ace79b50 100644
--- a/src/core/seo/components/category-hub.tsx
+++ b/src/core/seo/components/category-hub.tsx
@@ -4,6 +4,7 @@ import { getToolsByCategory, type ToolCategory } from "@/core/registry"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { ArrowRight } from "lucide-react"
 import { CollectionPageJsonLd } from "./page-json-ld"
+import { CatalogPageContainer } from "@/components/layout/page-container"
 
 interface CategoryHubProps {
     lang: Locale
@@ -34,7 +35,7 @@ export function CategoryHub({ lang, category, titleKey, descriptionKey }: Catego
     }
 
     return (
-        <div className="flex max-h-full flex-col gap-7 overflow-y-auto pb-8">
+        <CatalogPageContainer className="flex max-h-full flex-col gap-7 overflow-y-auto pb-8">
             <CollectionPageJsonLd
                 lang={lang}
                 slug={slugByCategory[category]}
@@ -79,6 +80,6 @@ export function CategoryHub({ lang, category, titleKey, descriptionKey }: Catego
                     )
                 })}
             </div>
-        </div>
+        </CatalogPageContainer>
     )
 }
diff --git a/src/core/seo/components/growth-content-pages.tsx b/src/core/seo/components/growth-content-pages.tsx
index 140c4c78..a5c4f287 100644
--- a/src/core/seo/components/growth-content-pages.tsx
+++ b/src/core/seo/components/growth-content-pages.tsx
@@ -17,6 +17,7 @@ import { getToolByKey } from "@/core/registry"
 import { ArticleJsonLd, CollectionPageJsonLd, HowToJsonLd } from "@/core/seo/components/page-json-ld"
 import { JsonLdScript } from "@/core/seo/components/json-ld-script"
 import { SITE_URL, buildCanonicalUrl } from "@/core/seo/urls"
+import { CatalogPageContainer, StaticPageContainer } from "@/components/layout/page-container"
 
 function requireGrowthPage(slug: GrowthPageSlug) {
     const page = getGrowthPage(slug)
@@ -156,7 +157,7 @@ export function GrowthContentPage({ locale, slug }: { locale: Locale; slug: Grow
     const index = requireGrowthIndex(indexSlugForPage(page))
 
     return (
-        <article className="mx-auto w-full max-w-6xl space-y-6">
+        <StaticPageContainer as="article" className="space-y-6">
             <PageStructuredData locale={locale} page={page} copy={copy} />
 
             <header className="rounded-lg border border-border/70 bg-card/55 p-6 backdrop-blur-sm sm:p-7">
@@ -309,7 +310,7 @@ export function GrowthContentPage({ locale, slug }: { locale: Locale; slug: Grow
                     ))}
                 </div>
             </section>
-        </article>
+        </StaticPageContainer>
     )
 }
 
@@ -336,7 +337,7 @@ export function GrowthIndexPage({ locale, slug }: { locale: Locale; slug: Growth
         }))
 
     return (
-        <div className="mx-auto w-full max-w-6xl space-y-6">
+        <CatalogPageContainer className="space-y-6">
             <CollectionPageJsonLd
                 lang={locale}
                 slug={slug}
@@ -443,7 +444,7 @@ export function GrowthIndexPage({ locale, slug }: { locale: Locale; slug: Growth
                     {getTranslation(locale).pages.trust_center_title}
                 </Link>
             </section>
-        </div>
+        </CatalogPageContainer>
     )
 }
 
diff --git a/src/core/seo/components/legacy-tool-redirect-page.tsx b/src/core/seo/components/legacy-tool-redirect-page.tsx
index d7bde6ec..51099a9a 100644
--- a/src/core/seo/components/legacy-tool-redirect-page.tsx
+++ b/src/core/seo/components/legacy-tool-redirect-page.tsx
@@ -1,3 +1,5 @@
+import { ToolPageContainer } from "@/components/layout/page-container"
+
 type LegacyToolRedirectPageProps = {
     href: string
     title: string
@@ -7,16 +9,18 @@ type LegacyToolRedirectPageProps = {
 
 export function LegacyToolRedirectPage({ href, title, body, cta }: LegacyToolRedirectPageProps) {
     return (
-        <main className="mx-auto max-w-xl px-6 py-16 text-center">
-            <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-            <p className="mt-3 text-sm text-muted-foreground">
-                {body}
-            </p>
-            <p className="mt-2 text-sm text-muted-foreground">
-                <a className="underline underline-offset-4" href={href}>
-                    {cta}
-                </a>
-            </p>
-        </main>
+        <ToolPageContainer as="main">
+            <div data-route-width-exception="legacy-redirect" className="mx-auto max-w-xl px-6 py-16 text-center">
+                <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+                <p className="mt-3 text-sm text-muted-foreground">
+                    {body}
+                </p>
+                <p className="mt-2 text-sm text-muted-foreground">
+                    <a className="underline underline-offset-4" href={href}>
+                        {cta}
+                    </a>
+                </p>
+            </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/core/seo/components/localized-article-page.tsx b/src/core/seo/components/localized-article-page.tsx
index 21937722..e36d2b9b 100644
--- a/src/core/seo/components/localized-article-page.tsx
+++ b/src/core/seo/components/localized-article-page.tsx
@@ -9,6 +9,7 @@ import {
 import { requireTranslationValue } from "@/core/i18n/i18n"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { ArticleJsonLd } from "./page-json-ld"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 function renderSection(section: LocalizedArticleSection) {
     return (
@@ -51,7 +52,7 @@ export function LocalizedArticlePage({
     const siblingTitle = article.sibling ? getLocalizedArticleTitle(article.sibling, locale) : null
 
     return (
-        <article className="mx-auto w-full max-w-4xl space-y-8">
+        <StaticPageContainer as="article" className="space-y-8">
             <ArticleJsonLd
                 lang={locale}
                 slug={slug}
@@ -122,6 +123,6 @@ export function LocalizedArticlePage({
                     ) : null}
                 </footer>
             ) : null}
-        </article>
+        </StaticPageContainer>
     )
 }
diff --git a/src/core/seo/components/menu-group-hub.tsx b/src/core/seo/components/menu-group-hub.tsx
index da428f75..bbb542d2 100644
--- a/src/core/seo/components/menu-group-hub.tsx
+++ b/src/core/seo/components/menu-group-hub.tsx
@@ -15,6 +15,7 @@ import {
     getWorkflowBySlug,
 } from "@/core/workflows/workflow-hubs"
 import type { PrimaryMenuGroupKey } from "@/core/registry/menu-groups"
+import { CatalogPageContainer } from "@/components/layout/page-container"
 
 const PRIMARY_MENU_GROUP_KEYS = new Set<PrimaryMenuGroupKey>(MENU_GROUP_DEFS.map((group) => group.key))
 
@@ -45,7 +46,7 @@ export function MenuGroupHub({ lang, groupKey }: MenuGroupHubProps) {
     )
 
     return (
-        <div className="flex max-h-full flex-col gap-7 overflow-y-auto pb-8">
+        <CatalogPageContainer className="flex max-h-full flex-col gap-7 overflow-y-auto pb-8">
             <CollectionPageJsonLd
                 lang={lang}
                 slug={group.slug}
@@ -307,7 +308,7 @@ export function MenuGroupHub({ lang, groupKey }: MenuGroupHubProps) {
                     )
                 })}
             </div>
-        </div>
+        </CatalogPageContainer>
     )
 }
 
diff --git a/src/core/seo/components/tool-content-template-modules/core.tsx b/src/core/seo/components/tool-content-template-modules/core.tsx
index a2c59cd0..1242bab1 100644
--- a/src/core/seo/components/tool-content-template-modules/core.tsx
+++ b/src/core/seo/components/tool-content-template-modules/core.tsx
@@ -141,7 +141,7 @@ export function ToolContentTemplateSection({
         <>
             {faqSchema ? <JsonLdScript data-faq-schema="tool" jsonLd={faqSchema} /> : null}
             <ToolContentTemplateSurface source={source}>
-                <div className="mx-auto max-w-4xl space-y-8">
+                <div data-route-width-exception="readable-content" className="mx-auto max-w-4xl space-y-8">
                     <header className="space-y-3">
                         <h2 className="text-xl font-semibold tracking-tight text-foreground">{model.copy.guideTitle(model.title)}</h2>
                         <p className="text-sm leading-relaxed text-muted-foreground">{model.content.intro}</p>
diff --git a/src/core/seo/components/tool-content-template-modules/generated/de.json b/src/core/seo/components/tool-content-template-modules/generated/de.json
index d59f70e7..230d4743 100644
--- a/src/core/seo/components/tool-content-template-modules/generated/de.json
+++ b/src/core/seo/components/tool-content-template-modules/generated/de.json
@@ -1387,9 +1387,9 @@
   "qr-code-generator": {
     "content": {
       "toolKey": "qr_code_generator",
-      "intro": "Generieren Sie QR-Codes mit benutzerdefinierten Größen und Farben. Als PNG oder SVG herunterladen. Diese Seite eignet sich, um Erzeugung direkt im Browser zu prüfen und vor Übergabe, Freigabe oder Teilen nachvollziehbare Ein- und Ausgaben festzuhalten.",
+      "intro": "Generieren Sie QR-Codes mit benutzerdefinierten Größen und Farben und laden Sie sie als PNG oder SVG herunter. PNG-, JPEG- und WebP-QR-Bilder lassen sich auch lokal im Browser dekodieren; Bildinhalte werden nicht hochgeladen. Bei unlesbaren Bildern oder fehlenden QR-Codes erscheint eine klare Rückmeldung.",
       "whatThisToolDoes": [
-        "QR-Code-Generator aktualisiert das Ergebnis sofort auf Basis der aktuellen Eingabe, sodass sich die wichtigste Ausgabe zuerst prüfen lässt.",
+        "Der QR-Code-Generator aktualisiert die Vorschau sofort und kann Text aus lokal hochgeladenen QR-Bildern lesen.",
         "Der Schwerpunkt dieser Seite liegt auf folgendem Punkt: Generieren Sie QR-Codes mit benutzerdefinierten Größen und Farben. Als PNG oder SVG herunterladen.",
         "Wenn QR-Code-Generator in den Erzeugung-Ablauf eingebaut wird, fallen Unterschiede bei Format, Inhalt oder Parametern deutlich früher auf."
       ],
diff --git a/src/core/seo/components/tool-content-template-modules/generated/fr.json b/src/core/seo/components/tool-content-template-modules/generated/fr.json
index 3a44c80f..5eb784b2 100644
--- a/src/core/seo/components/tool-content-template-modules/generated/fr.json
+++ b/src/core/seo/components/tool-content-template-modules/generated/fr.json
@@ -1387,9 +1387,9 @@
   "qr-code-generator": {
     "content": {
       "toolKey": "qr_code_generator",
-      "intro": "Générez des QR codes avec des tailles et des couleurs personnalisées. Téléchargez au format PNG ou SVG. Cette page est utile pour valider la génération dans le navigateur et conserver des entrées/sorties reproductibles avant livraison, partage ou passation.",
+      "intro": "Générez des QR codes avec des tailles et des couleurs personnalisées, puis téléchargez-les en PNG ou SVG. Vous pouvez aussi décoder localement dans le navigateur des images QR PNG, JPEG ou WebP ; leur contenu n'est pas envoyé. Un message clair apparaît si l'image est illisible ou ne contient pas de QR code.",
       "whatThisToolDoes": [
-        "Générateur de QR Code met à jour le résultat immédiatement à partir de l’entrée courante afin de vérifier d’abord la sortie principale.",
+        "Le Générateur de QR Code met à jour l’aperçu immédiatement et peut lire le texte d’images QR importées localement.",
         "Le point central de cette page est le suivant : Générez des QR codes avec des tailles et des couleurs personnalisées. Téléchargez au format PNG ou SVG.",
         "En intégrant Générateur de QR Code dans un flux de génération, les écarts de format, de contenu ou de paramètres apparaissent plus tôt."
       ],
diff --git a/src/core/seo/components/tool-content-template-modules/generated/ja.json b/src/core/seo/components/tool-content-template-modules/generated/ja.json
index 593aaf85..32a88f56 100644
--- a/src/core/seo/components/tool-content-template-modules/generated/ja.json
+++ b/src/core/seo/components/tool-content-template-modules/generated/ja.json
@@ -1648,9 +1648,9 @@
   "qr-code-generator": {
     "content": {
       "toolKey": "qr_code_generator",
-      "intro": "リンク、Wi-Fi オンボーディング、連絡先共有用のスキャン可能な QR コードを生成し、プロダクション印刷およびデジタル ワークフローに適した設定可能なエラー修正、マージン、サイズ、エクスポート形式の制御を行います。",
+      "intro": "リンク、Wi-Fi、連絡先共有用の QR コードを生成し、PNG または SVG として出力できます。アップロードした PNG、JPEG、WebP の QR 画像もブラウザ内だけで読み取れ、画像は送信されません。画像を読めない場合や QR コードがない場合は明確な案内を表示します。",
       "whatThisToolDoes": [
-        "テキスト ペイロードを QR マトリックスに変換し、プレビュー出力をリアルタイムでレンダリングして迅速に検証します。",
+        "テキストを QR マトリックスに変換してプレビューし、ローカルにアップロードした QR 画像からテキストも読み取れます。",
         "エラー修正レベル、マージン間隔、PNG または SVG のダウンロード オプションなどの実用的なコントロールをサポートしています。",
         "パッケージ、スライド、ソーシャル カード、またはアプリ内画面でコードを公開する前に、チームがペイロードの整合性を検証するのに役立ちます。"
       ],
diff --git a/src/core/seo/components/tool-content-template-modules/generated/ko.json b/src/core/seo/components/tool-content-template-modules/generated/ko.json
index bd1054a4..ac9e02de 100644
--- a/src/core/seo/components/tool-content-template-modules/generated/ko.json
+++ b/src/core/seo/components/tool-content-template-modules/generated/ko.json
@@ -1387,9 +1387,9 @@
   "qr-code-generator": {
     "content": {
       "toolKey": "qr_code_generator",
-      "intro": "사용자 지정 크기와 색상으로 QR 코드를 생성합니다. PNG 또는 SVG로 다운로드하세요. 이 페이지는 브라우저 안에서 생성 결과를 빠르게 확인하고, 제출이나 공유, 인수인계 전에 재현 가능한 입출력 기록을 남길 때 적합합니다.",
+      "intro": "사용자 지정 크기와 색상으로 QR 코드를 생성하고 PNG 또는 SVG로 다운로드합니다. PNG, JPEG, WebP QR 이미지를 브라우저 안에서만 해독할 수도 있으며 이미지 내용은 업로드되지 않습니다. 이미지를 읽을 수 없거나 QR 코드를 찾지 못하면 명확한 안내를 표시합니다.",
       "whatThisToolDoes": [
-        "QR 코드 생성기 은 현재 입력에 맞춰 결과를 즉시 갱신하므로 핵심 출력이 기대와 맞는지 먼저 확인할 수 있습니다.",
+        "QR 코드 생성기는 현재 입력에 맞춰 결과를 즉시 갱신하고 로컬 QR 이미지의 텍스트도 읽을 수 있습니다.",
         "이 페이지가 중점적으로 다루는 내용은 다음과 같습니다: 사용자 지정 크기와 색상으로 QR 코드를 생성합니다. PNG 또는 SVG로 다운로드하세요.",
         "QR 코드 생성기 을 생성 흐름에 넣으면 형식, 내용, 파라미터 차이를 더 이른 단계에서 발견할 수 있습니다."
       ],
diff --git a/src/core/seo/components/tool-content-template-modules/generated/zh-CN.json b/src/core/seo/components/tool-content-template-modules/generated/zh-CN.json
index 6d1b3cf3..aa5257a1 100644
--- a/src/core/seo/components/tool-content-template-modules/generated/zh-CN.json
+++ b/src/core/seo/components/tool-content-template-modules/generated/zh-CN.json
@@ -1648,9 +1648,9 @@
   "qr-code-generator": {
     "content": {
       "toolKey": "qr_code_generator",
-      "intro": "为链接、Wi-Fi 登录和联系人共享生成可扫描的 QR 码，并具有可配置的纠错、边距、大小和导出格式控件，适用于生产打印和数字工作流程。",
+      "intro": "为链接、Wi-Fi 登录和联系人共享生成可扫描的 QR 码，并具有可配置的纠错、边距、大小和导出格式控件。还可以在浏览器本地解码上传的 PNG、JPEG 或 WebP QR 图片，图片内容不会上传；无法读取图片或未找到二维码时会显示明确提示。",
       "whatThisToolDoes": [
-        "它将文本有效负载转换为 QR 矩阵，并实时渲染预览输出以进行快速验证。",
+        "它将文本有效负载转换为 QR 矩阵并实时渲染预览，也可以从本地上传的二维码图片中读取文本。",
         "它支持实用控制，例如纠错级别、边距间距以及 PNG 或 SVG 的下载选项。",
         "它帮助团队在包装、幻灯片、社交卡或应用内界面中发布二维码前验证载荷内容是否完整。"
       ],
diff --git a/src/core/seo/components/tool-content-template-modules/generated/zh-TW.json b/src/core/seo/components/tool-content-template-modules/generated/zh-TW.json
index 27b71d78..16f3cbf8 100644
--- a/src/core/seo/components/tool-content-template-modules/generated/zh-TW.json
+++ b/src/core/seo/components/tool-content-template-modules/generated/zh-TW.json
@@ -1383,9 +1383,9 @@
   "qr-code-generator": {
     "content": {
       "toolKey": "qr_code_generator",
-      "intro": "產生自訂大小和顏色的 QR Code。下載格式為 PNG 或 SVG。 這個頁面適合在瀏覽器中快速完成生成確認，並在提交、分享或交接前保留可重現的輸入與輸出紀錄。",
+      "intro": "產生自訂大小和顏色的 QR Code，並下載為 PNG 或 SVG。也可在瀏覽器本機解碼上傳的 PNG、JPEG 或 WebP QR 圖片；影像內容不會上傳，無法讀取或找不到 QR Code 時會顯示明確提示。",
       "whatThisToolDoes": [
-        "QR Code 產生器 會依照目前輸入立即更新結果，方便先確認主要輸出是否符合預期。",
+        "QR Code 產生器會依照目前輸入立即更新結果，也能讀取本機上傳 QR 圖片中的文字。",
         "頁面描述聚焦在這件事上：產生自訂大小和顏色的 QR Code。下載格式為 PNG 或 SVG。",
         "把 QR Code 產生器 放進生成流程中，可以更早發現格式、內容或參數上的落差。"
       ],
diff --git a/src/core/seo/components/tool-content-template-modules/top-templates.ts b/src/core/seo/components/tool-content-template-modules/top-templates.ts
index b8493d6d..cfc63b28 100644
--- a/src/core/seo/components/tool-content-template-modules/top-templates.ts
+++ b/src/core/seo/components/tool-content-template-modules/top-templates.ts
@@ -735,11 +735,11 @@ export const TOP_TOOL_CONTENT_TEMPLATES: Record<string, ToolContentTemplateData>
     },
     "qr-code-generator": {
         toolKey: "qr_code_generator",
-        intro: "Generate scannable QR codes for links, Wi-Fi onboarding, and contact sharing with configurable error correction, margin, size, and export format controls suitable for production print and digital workflows.",
+        intro: "Generate scannable QR codes or decode QR images locally for link checks, campaign audits, Wi-Fi onboarding, and contact sharing without uploading the payload or image.",
         whatThisToolDoes: [
             "It converts text payloads into QR matrices and renders preview output in real time for quick validation.",
             "It supports practical controls such as error correction level, margin spacing, and download options for PNG or SVG.",
-            "It helps teams verify payload integrity before publishing codes on packaging, slides, social cards, or in-app screens.",
+            "It reads one QR code from a PNG, JPEG, or WebP image and displays the decoded payload as text before any URL can be opened.",
         ],
         useCases: [
             "Create campaign QR links for print posters and event materials.",
@@ -747,6 +747,7 @@ export const TOP_TOOL_CONTENT_TEMPLATES: Record<string, ToolContentTemplateData>
             "Publish vCard or contact handoff codes for sales and support teams.",
             "Attach scanable deep links to product tutorials and help docs.",
             "Prepare SVG QR assets for responsive web and retina display use.",
+            "Decode an existing campaign QR image to verify its destination before publishing.",
         ],
         inputExamples: [
             { label: "URL payload", value: "https://example.com/qr?id=42" },
@@ -763,9 +764,11 @@ export const TOP_TOOL_CONTENT_TEMPLATES: Record<string, ToolContentTemplateData>
             { error: "Poor scan reliability in print", fix: "Increase margin and avoid low-contrast foreground/background combinations." },
             { error: "Logo overlay blocks finder patterns", fix: "Keep center overlays small and do not cover corner position markers." },
             { error: "Encoded URL redirects unexpectedly", fix: "Verify final URL after shortener and campaign parameter expansion." },
+            { error: "No QR code is found in an uploaded image", fix: "Use a sharper image with the complete code, quiet zone, and stronger contrast." },
         ],
         privacyNotes: [
             "QR generation is handled locally and payload text is not uploaded by this tool.",
+            "Uploaded QR images and decoded text remain in the browser and are not sent to a server.",
             "Avoid embedding secrets or one-time credentials in publicly distributed QR codes.",
             "Treat generated codes as shareable data because scanners can decode content instantly.",
         ],
@@ -774,6 +777,7 @@ export const TOP_TOOL_CONTENT_TEMPLATES: Record<string, ToolContentTemplateData>
             { q: "Should I export PNG or SVG?", a: "Use SVG for scalable design workflows and PNG for quick fixed-size sharing." },
             { q: "Can I encode non-URL text?", a: "Yes. QR codes can store plain text, Wi-Fi config strings, vCards, and more." },
             { q: "How do I test before publishing?", a: "Scan with multiple devices and camera qualities under realistic lighting conditions." },
+            { q: "Can I decode a QR image without uploading it?", a: "Yes. PNG, JPEG, and WebP decoding runs locally in the browser and displays URLs as text first." },
         ],
     },
     "color-converter": {
diff --git a/src/core/seo/components/tool-content-template-surface.tsx b/src/core/seo/components/tool-content-template-surface.tsx
index 2d1fdeb7..b04a7bf5 100644
--- a/src/core/seo/components/tool-content-template-surface.tsx
+++ b/src/core/seo/components/tool-content-template-surface.tsx
@@ -1,149 +1,21 @@
-"use client"
-
-import * as React from "react"
+import type { ReactNode } from "react"
 
 const TEMPLATE_BASE_CLASS =
-    "mx-auto mt-10 w-full max-w-7xl rounded-2xl border border-border/70 bg-card/55 p-5 backdrop-blur-sm sm:p-6"
-
-function readClassName(element: Element): string {
-    const className = (element as HTMLElement).className
-    return typeof className === "string" ? className : ""
-}
-
-function isWidthConstrainedContainer(element: Element): boolean {
-    const className = readClassName(element)
-    return className.includes("max-w-") && className.includes("mx-auto")
-}
-
-function measureElementWidth(element: HTMLElement): number {
-    const rectWidth = element.getBoundingClientRect().width
-    if (rectWidth > 0) return rectWidth
-    if (element.clientWidth > 0) return element.clientWidth
-
-    const inlineWidth = Number.parseFloat(element.style.width || "")
-    if (Number.isFinite(inlineWidth) && inlineWidth > 0) return inlineWidth
-
-    return 0
-}
-
-function findToolContainerByHeading(section: HTMLElement): HTMLElement | null {
-    const main = section.closest("main")
-    if (!main) return null
-
-    const headings = Array.from(main.querySelectorAll("h1"))
-    for (let index = headings.length - 1; index >= 0; index -= 1) {
-        const heading = headings[index]
-        const position = heading.compareDocumentPosition(section)
-        const isBeforeSection = Boolean(position & Node.DOCUMENT_POSITION_FOLLOWING)
-        if (!isBeforeSection) continue
-
-        let current: HTMLElement | null = heading.parentElement
-        while (current && current !== main) {
-            if (isWidthConstrainedContainer(current)) return current
-            current = current.parentElement
-        }
-    }
-
-    return null
-}
-
-function findPreviousToolContainer(section: HTMLElement): HTMLElement | null {
-    let sibling = section.previousElementSibling as HTMLElement | null
-    while (sibling && sibling.tagName === "SCRIPT") {
-        sibling = sibling.previousElementSibling as HTMLElement | null
-    }
-    if (!sibling) return null
-
-    const candidates: HTMLElement[] = [sibling, ...Array.from(sibling.querySelectorAll<HTMLElement>("*"))]
-
-    let bestMatch: HTMLElement | null = null
-    let bestWidth = 0
-    for (const candidate of candidates) {
-        if (!isWidthConstrainedContainer(candidate)) continue
-
-        const width = measureElementWidth(candidate)
-        if (width > bestWidth) {
-            bestMatch = candidate
-            bestWidth = width
-        }
-    }
-
-    return bestMatch
-}
+    "mt-10 w-full rounded-2xl border border-border/70 bg-card/55 p-5 backdrop-blur-sm sm:p-6"
 
 export function ToolContentTemplateSurface({
     source,
     children,
 }: {
     source: "client" | "server"
-    children: React.ReactNode
+    children: ReactNode
 }) {
-    const sectionRef = React.useRef<HTMLElement | null>(null)
-    const [syncedMaxWidthPx, setSyncedMaxWidthPx] = React.useState<number | null>(null)
-
-    React.useEffect(() => {
-        const section = sectionRef.current
-        if (!section) return
-
-        let widthObserver: ResizeObserver | null = null
-        let observedContainer: HTMLElement | null = null
-        let frameId: number | null = null
-
-        const syncWidth = () => {
-            const container = findToolContainerByHeading(section) || findPreviousToolContainer(section)
-            if (!container) {
-                setSyncedMaxWidthPx(null)
-                observedContainer = null
-                if (widthObserver) {
-                    widthObserver.disconnect()
-                    widthObserver = null
-                }
-                return
-            }
-
-            const nextWidth = Math.round(measureElementWidth(container))
-            if (nextWidth > 0) {
-                setSyncedMaxWidthPx((previous) => (previous === nextWidth ? previous : nextWidth))
-            }
-
-            if (observedContainer === container) return
-
-            observedContainer = container
-            if (widthObserver) {
-                widthObserver.disconnect()
-                widthObserver = null
-            }
-            if (typeof ResizeObserver !== "undefined" && typeof window !== "undefined") {
-                widthObserver = new ResizeObserver(() => {
-                    if (typeof window.requestAnimationFrame === "function") {
-                        if (frameId != null) window.cancelAnimationFrame(frameId)
-                        frameId = window.requestAnimationFrame(syncWidth)
-                        return
-                    }
-                    syncWidth()
-                })
-                widthObserver.observe(container)
-            }
-        }
-
-        syncWidth()
-        window.addEventListener("resize", syncWidth)
-
-        return () => {
-            window.removeEventListener("resize", syncWidth)
-            if (frameId != null) window.cancelAnimationFrame(frameId)
-            if (widthObserver) widthObserver.disconnect()
-        }
-    }, [])
-
     return (
         <section
-            ref={sectionRef}
             data-tool-content-template="full"
             data-tool-content-template-source={source}
-            data-tool-content-template-width-sync={syncedMaxWidthPx ? "synced" : "fallback"}
+            data-tool-content-template-width-sync="contract"
             className={TEMPLATE_BASE_CLASS}
-            style={syncedMaxWidthPx ? { maxWidth: `${syncedMaxWidthPx}px` } : undefined}
         >
             {children}
         </section>
diff --git a/src/core/seo/components/workflow-pages.tsx b/src/core/seo/components/workflow-pages.tsx
index cd4fff1b..c9e58437 100644
--- a/src/core/seo/components/workflow-pages.tsx
+++ b/src/core/seo/components/workflow-pages.tsx
@@ -5,6 +5,7 @@ import { getTranslation } from "@/core/i18n/translations/catalog"
 import { getToolByKey } from "@/core/registry"
 import { SITE_URL, buildCanonicalUrl } from "@/core/seo/urls"
 import { getPipelineRecipeTemplateForWorkflow } from "@/features/pipeline/recipe-templates"
+import { CatalogPageContainer } from "@/components/layout/page-container"
 import {
     WORKFLOW_DEFINITIONS,
     getLocalizedWorkflowCopy,
@@ -236,7 +237,7 @@ export function WorkflowIndexPage({ lang }: { lang: Locale }) {
     const copy = WORKFLOW_INDEX_COPY[lang]
 
     return (
-        <div className="mx-auto w-full max-w-6xl space-y-7">
+        <CatalogPageContainer className="space-y-7">
             <CollectionPageJsonLd
                 lang={lang}
                 slug="workflows"
@@ -265,7 +266,7 @@ export function WorkflowIndexPage({ lang }: { lang: Locale }) {
                     <WorkflowCard key={workflow.slug} workflow={workflow} lang={lang} />
                 ))}
             </section>
-        </div>
+        </CatalogPageContainer>
     )
 }
 
@@ -291,7 +292,7 @@ export function WorkflowDetailPage({
     const pipelineBuilderTitle = getToolCopy(lang, "pipeline_builder").title
 
     return (
-        <div className="mx-auto w-full max-w-6xl space-y-7">
+        <CatalogPageContainer className="space-y-7">
             <WorkflowBreadcrumbJsonLd lang={lang} workflow={workflow} />
             <HowToJsonLd
                 lang={lang}
@@ -435,6 +436,6 @@ export function WorkflowDetailPage({
                     </div>
                 </article>
             </section>
-        </div>
+        </CatalogPageContainer>
     )
 }
diff --git a/src/core/utils/image-canvas-utils.ts b/src/core/utils/image-canvas-utils.ts
index 67924f07..01d26ab5 100644
--- a/src/core/utils/image-canvas-utils.ts
+++ b/src/core/utils/image-canvas-utils.ts
@@ -1,11 +1,11 @@
-import { FILE_INPUT_POLICIES, formatPixelLimit, validateFileAgainstPolicy, type FileInputPolicy } from "@/core/files/file-input-policy"
+import { FILE_INPUT_POLICIES, formatPixelLimit, validateFileContentAgainstPolicy, type FileInputPolicy } from "@/core/files/file-input-policy"
 
 export async function fileToDataUrl(
     file: File,
     policy: FileInputPolicy = FILE_INPUT_POLICIES["image-standard"],
     options: { signal?: AbortSignal } = {},
 ): Promise<string> {
-    const validation = validateFileAgainstPolicy(file, policy)
+    const validation = await validateFileContentAgainstPolicy(file, policy)
     if (!validation.ok) throw new Error(validation.message)
     return new Promise((resolve, reject) => {
         const reader = new FileReader()
diff --git a/src/features/install-app/components/install-app-client.tsx b/src/features/install-app/components/install-app-client.tsx
index 7efa7804..f29c9bac 100644
--- a/src/features/install-app/components/install-app-client.tsx
+++ b/src/features/install-app/components/install-app-client.tsx
@@ -11,6 +11,7 @@ import type { Locale } from "@/core/i18n/i18n"
 import { JsonLdScript } from "@/core/seo/components/json-ld-script"
 import { clearByteflowPwaCaches } from "@/core/storage/pwa-cache-controls"
 import type { GuidePlatform, InstallPageCopy } from "@/core/utils/install-app-copy"
+import { StaticPageContainer } from "@/components/layout/page-container"
 
 type BeforeInstallPromptEvent = Event & {
     prompt: () => Promise<void>
@@ -153,7 +154,7 @@ export function InstallAppClient({
             : ""
 
     return (
-        <div className="mx-auto w-full max-w-5xl space-y-8">
+        <StaticPageContainer className="space-y-8">
             <JsonLdScript jsonLd={faqJsonLd} />
 
             <section className="relative overflow-hidden rounded-3xl border border-border/70 bg-card/60 p-6 sm:p-8">
@@ -333,6 +334,6 @@ export function InstallAppClient({
                     {copy.bottomTrust}
                 </p>
             </section>
-        </div>
+        </StaticPageContainer>
     )
 }
diff --git a/src/features/pipeline/adapter-registry.ts b/src/features/pipeline/adapter-registry.ts
index 2b58e718..aeb867b7 100644
--- a/src/features/pipeline/adapter-registry.ts
+++ b/src/features/pipeline/adapter-registry.ts
@@ -4,7 +4,7 @@ import { cleanText, analyzeText, type CleanOptions } from "@/core/utils/invisibl
 import { scrubLogs, DEFAULT_SCRUB_OPTIONS, type ScrubOptions } from "@/core/utils/log-scrubber-utils"
 import { encodeUrlByMode, decodeUrlByMode, type UrlEncodingMode } from "@/core/utils/url-codec-utils"
 import { removeExtraWhitespace } from "@/core/utils/whitespace-utils"
-import { csvToJson, jsonToCsv } from "@/features/tools/csv-json-converter/logic"
+import { csvToJsonWithDiagnostics, jsonToCsv } from "@/features/tools/csv-json-converter/logic"
 import { JSON_ARRAY_REQUIRED_ERROR } from "@/features/tools/csv-json-converter/constants"
 import { exportEnvVars, parseEnvFile, type EnvExportFormat } from "@/features/tools/env-parser/utils"
 import { formatDevopsYamlReport, validateDevopsYaml } from "@/features/tools/devops-yaml-validator/logic"
@@ -16,7 +16,6 @@ import { decodeJwtParts } from "@/features/tools/jwt-decoder/utils"
 import { runNdjsonTransform, type NdjsonMessages, type NdjsonMode } from "@/features/tools/ndjson-formatter/utils"
 import { diffOpenApiSpecs, formatOpenApiDiffReport } from "@/features/tools/openapi-diff/logic"
 import { runRegexTestTask } from "@/features/tools/regex-tester/regex-test-task"
-import { testRegexPattern } from "@/features/tools/regex-tester/utils"
 import { convertCase, type CaseStyle } from "@/features/tools/slugify-case-converter/utils"
 import { parseTimestampHeuristic } from "@/features/tools/unix-timestamp/utils"
 import { convertYamlJson, type YamlJsonMode } from "@/features/tools/yaml-json-converter/utils"
@@ -361,10 +360,18 @@ const csvJsonAdapter: PipelineToolAdapter = {
             const delimiter = stringOption(options, "delimiter", "auto")
             const hasHeader = booleanOption(options, "hasHeader", true)
             const typeInference = booleanOption(options, "typeInference", true)
-            const output = direction === "csv-to-json"
-                ? csvToJson(input, delimiter, hasHeader, typeInference)
-                : jsonToCsv(input, delimiter, hasHeader)
-            return success(output, startedAt, input)
+            if (direction === "csv-to-json") {
+                const result = csvToJsonWithDiagnostics(input, delimiter, hasHeader, typeInference)
+                return success(
+                    result.output,
+                    startedAt,
+                    input,
+                    result.diagnostics
+                        .filter((diagnostic) => diagnostic.severity === "warning")
+                        .map((diagnostic) => diagnostic.message),
+                )
+            }
+            return success(jsonToCsv(input, delimiter, hasHeader), startedAt, input)
         } catch (error) {
             const message = error instanceof Error && error.message === JSON_ARRAY_REQUIRED_ERROR
                 ? "JSON input must be an array to convert to CSV."
@@ -608,8 +615,6 @@ const regexTesterAdapter: PipelineToolAdapter = {
         if (!/^[gimsuy]*$/.test(flags)) return fail("flags must contain only g, i, m, s, u, or y.")
         if (new Set(flags).size !== flags.length) return fail("flags must not contain duplicates.")
         if (!Number.isFinite(maxMatches) || maxMatches < 1 || maxMatches > 5000) return fail("maxMatches must be between 1 and 5000.")
-        const validation = testRegexPattern(pattern, flags, "")
-        if (!validation.ok) return fail("pattern must be a valid JavaScript regular expression.")
         return ok()
     },
     async run(input, options) {
diff --git a/src/features/tool-discovery/all-tools-discovery.tsx b/src/features/tool-discovery/all-tools-discovery.tsx
index 91951a17..dbd1d549 100644
--- a/src/features/tool-discovery/all-tools-discovery.tsx
+++ b/src/features/tool-discovery/all-tools-discovery.tsx
@@ -376,11 +376,13 @@ function FavoriteButton({
     addLabel,
     removeLabel,
     onToggle,
+    ready,
 }: {
     active: boolean
     addLabel: string
     removeLabel: string
     onToggle: () => void
+    ready: boolean
 }) {
     return (
         <button
@@ -390,9 +392,12 @@ function FavoriteButton({
                 active
                     ? "border-primary/35 bg-primary/10 text-primary"
                     : "border-border/70 bg-background/55 text-muted-foreground hover:border-primary/35 hover:text-primary",
+                !ready && "invisible",
             )}
             aria-label={active ? removeLabel : addLabel}
             aria-pressed={active}
+            aria-hidden={!ready || undefined}
+            disabled={!ready}
             onClick={(event) => {
                 event.preventDefault()
                 event.stopPropagation()
@@ -792,8 +797,12 @@ export function AllToolsDiscovery({
     const noFavoritesDescription = `${labels.favorites}: 0`
     const noRecentToolsDescription = `${labels.recentTools}: 0`
 
-    const localToolsPanel = personalizationReady ? (
-        <div className="grid gap-3 lg:grid-cols-2">
+    const localToolsPanel = (
+        <div
+            className="grid gap-3 lg:grid-cols-2"
+            data-all-tools-personalization
+            aria-busy={!personalizationReady}
+        >
             <section className="rounded-lg border border-border/70 bg-background/35 p-3">
                 <div className="flex flex-wrap items-center justify-between gap-2">
                     <div>
@@ -808,30 +817,32 @@ export function AllToolsDiscovery({
                         variant="ghost"
                         className="min-h-10 px-2 text-xs"
                         onClick={handleClearFavorites}
-                        disabled={favoriteTools.length === 0}
-                        aria-describedby={favoriteTools.length === 0 ? clearFavoritesDisabledDescriptionId : undefined}
-                        title={favoriteTools.length === 0 ? `${labels.clearFavorites}: ${noFavoritesDescription}` : labels.clearFavorites}
+                        disabled={!personalizationReady || favoriteTools.length === 0}
+                        aria-describedby={personalizationReady && favoriteTools.length === 0 ? clearFavoritesDisabledDescriptionId : undefined}
+                        title={personalizationReady && favoriteTools.length === 0 ? `${labels.clearFavorites}: ${noFavoritesDescription}` : labels.clearFavorites}
                     >
                         <Trash2 className="h-3.5 w-3.5" />
                         {labels.clearFavorites}
                     </Button>
-                    {favoriteTools.length === 0 ? <span id={clearFavoritesDisabledDescriptionId} className="sr-only">{noFavoritesDescription}</span> : null}
+                    {personalizationReady && favoriteTools.length === 0 ? <span id={clearFavoritesDisabledDescriptionId} className="sr-only">{noFavoritesDescription}</span> : null}
+                </div>
+                <div className="mt-3 h-11" data-all-tools-personalization-slot>
+                    {personalizationReady && favoriteTools.length > 0 ? (
+                        <div className="flex h-11 gap-2 overflow-x-auto pb-1">
+                            {favoriteTools.map((tool) => (
+                                <Link
+                                    key={tool.key}
+                                    href={`/${locale}/${tool.slug}`}
+                                    className="inline-flex min-h-10 shrink-0 items-center rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45"
+                                >
+                                    {tool.title}
+                                </Link>
+                            ))}
+                        </div>
+                    ) : personalizationReady ? (
+                        <p className="flex h-10 items-center text-xs text-muted-foreground">{labels.noFavorites}</p>
+                    ) : null}
                 </div>
-                {favoriteTools.length > 0 ? (
-                    <div className="mt-3 flex flex-wrap gap-2">
-                        {favoriteTools.map((tool) => (
-                            <Link
-                                key={tool.key}
-                                href={`/${locale}/${tool.slug}`}
-                                className="inline-flex min-h-10 items-center rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45"
-                            >
-                                {tool.title}
-                            </Link>
-                        ))}
-                    </div>
-                ) : (
-                    <p className="mt-3 text-xs text-muted-foreground">{labels.noFavorites}</p>
-                )}
             </section>
 
             <section className="rounded-lg border border-border/70 bg-background/35 p-3">
@@ -848,33 +859,35 @@ export function AllToolsDiscovery({
                         variant="ghost"
                         className="min-h-10 px-2 text-xs"
                         onClick={handleClearRecentTools}
-                        disabled={recentTools.length === 0}
-                        aria-describedby={recentTools.length === 0 ? clearRecentDisabledDescriptionId : undefined}
-                        title={recentTools.length === 0 ? `${labels.clearRecentTools}: ${noRecentToolsDescription}` : labels.clearRecentTools}
+                        disabled={!personalizationReady || recentTools.length === 0}
+                        aria-describedby={personalizationReady && recentTools.length === 0 ? clearRecentDisabledDescriptionId : undefined}
+                        title={personalizationReady && recentTools.length === 0 ? `${labels.clearRecentTools}: ${noRecentToolsDescription}` : labels.clearRecentTools}
                     >
                         <Trash2 className="h-3.5 w-3.5" />
                         {labels.clearRecentTools}
                     </Button>
-                    {recentTools.length === 0 ? <span id={clearRecentDisabledDescriptionId} className="sr-only">{noRecentToolsDescription}</span> : null}
+                    {personalizationReady && recentTools.length === 0 ? <span id={clearRecentDisabledDescriptionId} className="sr-only">{noRecentToolsDescription}</span> : null}
+                </div>
+                <div className="mt-3 h-11" data-all-tools-personalization-slot>
+                    {personalizationReady && recentTools.length > 0 ? (
+                        <div className="flex h-11 gap-2 overflow-x-auto pb-1">
+                            {recentTools.map((tool) => (
+                                <Link
+                                    key={tool.key}
+                                    href={`/${locale}/${tool.slug}`}
+                                    className="inline-flex min-h-10 shrink-0 items-center rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45"
+                                >
+                                    {tool.title}
+                                </Link>
+                            ))}
+                        </div>
+                    ) : personalizationReady ? (
+                        <p className="flex h-10 items-center text-xs text-muted-foreground">{labels.noRecentTools}</p>
+                    ) : null}
                 </div>
-                {recentTools.length > 0 ? (
-                    <div className="mt-3 flex flex-wrap gap-2">
-                        {recentTools.map((tool) => (
-                            <Link
-                                key={tool.key}
-                                href={`/${locale}/${tool.slug}`}
-                                className="inline-flex min-h-10 items-center rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45"
-                            >
-                                {tool.title}
-                            </Link>
-                        ))}
-                    </div>
-                ) : (
-                    <p className="mt-3 text-xs text-muted-foreground">{labels.noRecentTools}</p>
-                )}
             </section>
         </div>
-    ) : null
+    )
 
     return (
         <div id="tool-discovery" className="min-w-0 space-y-5">
@@ -1137,14 +1150,13 @@ export function AllToolsDiscovery({
                                                     {tool.title}
                                                 </h3>
                                             </Link>
-                                            {personalizationReady ? (
-                                                <FavoriteButton
-                                                    active={isFavorite}
-                                                    addLabel={`${labels.addFavorite}: ${tool.title}`}
-                                                    removeLabel={`${labels.removeFavorite}: ${tool.title}`}
-                                                    onToggle={() => handleToggleFavorite(tool.key)}
-                                                />
-                                            ) : null}
+                                            <FavoriteButton
+                                                active={isFavorite}
+                                                addLabel={`${labels.addFavorite}: ${tool.title}`}
+                                                removeLabel={`${labels.removeFavorite}: ${tool.title}`}
+                                                onToggle={() => handleToggleFavorite(tool.key)}
+                                                ready={personalizationReady}
+                                            />
                                         </div>
                                         <p className="mt-2 line-clamp-3 break-words text-sm leading-relaxed text-muted-foreground">
                                             {tool.description}
diff --git a/src/features/tool-shell/monaco-editors.tsx b/src/features/tool-shell/monaco-editors.tsx
index bd2045c5..feb4c2d8 100644
--- a/src/features/tool-shell/monaco-editors.tsx
+++ b/src/features/tool-shell/monaco-editors.tsx
@@ -7,6 +7,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { useThemePreference } from "@/hooks/use-theme-preference"
 import { getByteflowMonacoThemeName } from "@/core/utils/monaco-theme"
 import { cn } from "@/core/utils/utils"
+import { inputIntentClassName, type InputIntent } from "@/components/ui/input-intent"
 
 const MOBILE_EDITOR_MEDIA_QUERY = "(max-width: 768px)"
 const MONACO_LOADER_TIMEOUT_MS = 5000
@@ -195,16 +196,19 @@ const DynamicMonacoDiffEditor = dynamic<DiffEditorProps>(
 export type MonacoEditorProps = EditorProps & {
     "aria-describedby"?: string
     "aria-invalid"?: React.AriaAttributes["aria-invalid"]
+    intent?: InputIntent
 }
 
 export function MonacoEditor(props: MonacoEditorProps) {
     const { t } = useLang()
     const {
         className,
+        intent,
         "aria-describedby": ariaDescribedBy,
         "aria-invalid": ariaInvalid,
         ...editorProps
     } = props
+    const resolvedIntent = intent ?? (props.options?.readOnly ? "generatedOutput" : "workbench")
     const { resolvedTheme } = useThemePreference()
     const monacoTheme = props.theme || getByteflowMonacoThemeName(resolvedTheme)
 
@@ -232,7 +236,8 @@ export function MonacoEditor(props: MonacoEditorProps) {
         return (
             <div
                 ref={hostRef}
-                className={cn("h-full w-full", className)}
+                data-input-intent={resolvedIntent}
+                className={cn("h-full w-full", intent ? inputIntentClassName(intent, "editor") : "", className)}
                 aria-describedby={ariaDescribedBy}
             >
                 <DynamicMonacoEditor {...editorProps} theme={monacoTheme} options={monacoOptions} height={resolvedHeight} />
@@ -252,6 +257,7 @@ export function MonacoEditor(props: MonacoEditorProps) {
             aria-label={monacoOptions.ariaLabel}
             aria-describedby={ariaDescribedBy}
             aria-invalid={ariaInvalid}
+            data-input-intent={resolvedIntent}
             onChange={(event) => props.onChange?.(event.target.value, undefined as never)}
             onFocus={() => {
                 setFallbackFocused(true)
@@ -266,9 +272,10 @@ export function MonacoEditor(props: MonacoEditorProps) {
                 "h-full w-full resize-none border-0 bg-background p-3 font-mono text-sm leading-relaxed focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
                 readOnly ? "cursor-default text-muted-foreground" : "",
                 wrapsText ? "whitespace-pre-wrap break-words" : "overflow-x-auto whitespace-pre",
+                intent ? inputIntentClassName(intent, "editor") : "",
                 className,
             )}
-            style={{ height: resolveEditorHeight(props.height), minHeight: 220 }}
+            style={{ height: resolveEditorHeight(props.height), minHeight: intent ? undefined : 220 }}
         />
     )
 }
@@ -276,11 +283,13 @@ export function MonacoEditor(props: MonacoEditorProps) {
 export type MonacoDiffEditorProps = DiffEditorProps & {
     onOriginalChange?: (value: string) => void
     onModifiedChange?: (value: string) => void
+    intent?: InputIntent
 }
 
 export function MonacoDiffEditor(props: MonacoDiffEditorProps) {
     const { t } = useLang()
-    const { className, onMount, ...diffProps } = props
+    const { className, intent, onMount, ...diffProps } = props
+    const resolvedIntent = intent ?? "workbench"
     const { resolvedTheme } = useThemePreference()
     const monacoTheme = props.theme || getByteflowMonacoThemeName(resolvedTheme)
 
@@ -314,7 +323,11 @@ export function MonacoDiffEditor(props: MonacoDiffEditorProps) {
     if (!isMobile && desktopActivation !== "deferred" && loaderState !== "fallback") {
         if (loaderState === "loading") return <EditorLoadingFallback />
         return (
-            <div ref={hostRef} className={cn("h-full w-full", className)}>
+            <div
+                ref={hostRef}
+                data-input-intent={resolvedIntent}
+                className={cn("h-full w-full", intent ? inputIntentClassName(intent, "editor") : "", className)}
+            >
                 <DynamicMonacoDiffEditor
                     {...diffProps}
                     theme={monacoTheme}
@@ -337,12 +350,16 @@ export function MonacoDiffEditor(props: MonacoDiffEditorProps) {
     const wrapsText = props.options?.wordWrap !== "off"
 
     return (
-        <div className={cn("grid h-full min-h-[360px] grid-cols-1 gap-2 p-2 md:grid-cols-2", className)}>
+        <div
+            data-input-intent={resolvedIntent}
+            className={cn("grid h-full grid-cols-1 gap-2 p-2 md:grid-cols-2", intent ? inputIntentClassName(intent, "editor") : "min-h-[360px]", className)}
+        >
             <textarea
                 value={originalValue}
                 readOnly={!originalEditable}
                 spellCheck={false}
                 aria-label={diffOptions.originalAriaLabel || t.common.original_text_editor}
+                data-input-intent={resolvedIntent}
                 onFocus={activateDesktopMonaco}
                 onPointerDown={activateDesktopMonaco}
                 onChange={(event) => {
@@ -361,6 +378,7 @@ export function MonacoDiffEditor(props: MonacoDiffEditorProps) {
                 readOnly={readOnly}
                 spellCheck={false}
                 aria-label={diffOptions.modifiedAriaLabel || t.common.modified_text_editor}
+                data-input-intent={resolvedIntent}
                 onFocus={activateDesktopMonaco}
                 onPointerDown={activateDesktopMonaco}
                 onChange={(event) => {
diff --git a/src/features/tool-shell/text-output-panel.tsx b/src/features/tool-shell/text-output-panel.tsx
index 1ca6c2ad..2a7606dc 100644
--- a/src/features/tool-shell/text-output-panel.tsx
+++ b/src/features/tool-shell/text-output-panel.tsx
@@ -4,6 +4,7 @@ import * as React from "react"
 import { AlignLeft, ListMinus } from "lucide-react"
 import { useLang } from "@/core/i18n/lang-provider"
 import { cn } from "@/core/utils/utils"
+import { inputIntentClassName, type InputIntent } from "@/components/ui/input-intent"
 
 export type OutputWrapMode = "wrap" | "scroll"
 
@@ -103,7 +104,8 @@ export function TextOutputPanel({
     className,
     bodyClassName,
     defaultMode = "wrap",
-    minHeightClassName = "min-h-[260px]",
+    intent = "generatedOutput",
+    minHeightClassName,
 }: {
     title: string
     value: string
@@ -114,6 +116,7 @@ export function TextOutputPanel({
     className?: string
     bodyClassName?: string
     defaultMode?: OutputWrapMode
+    intent?: InputIntent
     minHeightClassName?: string
 }) {
     const [mode, setMode] = React.useState<OutputWrapMode>(defaultMode)
@@ -137,9 +140,11 @@ export function TextOutputPanel({
             <pre
                 tabIndex={0}
                 aria-label={ariaLabel || title}
+                data-input-intent={intent}
                 data-output-overflow-mode={mode}
                 className={cn(
                     "flex-1 select-all overflow-auto border-t bg-background p-4 font-mono text-sm leading-relaxed outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+                    inputIntentClassName(intent, "output"),
                     minHeightClassName,
                     mode === "wrap" ? "whitespace-pre-wrap break-words" : "whitespace-pre",
                     bodyClassName,
diff --git a/src/features/tool-templates/focused-hash-tool-page.tsx b/src/features/tool-templates/focused-hash-tool-page.tsx
index a79f7b5a..3958bf82 100644
--- a/src/features/tool-templates/focused-hash-tool-page.tsx
+++ b/src/features/tool-templates/focused-hash-tool-page.tsx
@@ -19,6 +19,7 @@ import {
     type StandardHashAlgorithm,
 } from "@/core/utils/hash-utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { serializeSpreadsheetSafeCsv } from "@/core/files/csv-export"
 import { FILE_INPUT_POLICIES, describeFilePolicy, readArrayBufferWithPolicy, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 
 type HashMode = "text" | "file" | "hmac" | "batch"
@@ -206,10 +207,10 @@ export function FocusedHashToolPage({
 
     const handleDownload = () => {
         if (mode === "batch") {
-            const csv = [
-                "index,input,algorithm,digest",
-                ...batchRows.map((row) => `${row.index},\"${row.input.replace(/\"/g, "\"\"")}\",${algorithm},${row.digest}`),
-            ].join("\n")
+            const csv = serializeSpreadsheetSafeCsv([
+                ["index", "input", "algorithm", "digest"],
+                ...batchRows.map((row) => [row.index, row.input, algorithm, row.digest] as const),
+            ])
             downloadTextFile(csv, `${algorithm}-batch.csv`)
             return
         }
diff --git a/src/features/tool-templates/html-css-beautifier-tool.tsx b/src/features/tool-templates/html-css-beautifier-tool.tsx
index 7d92a47e..02347c74 100644
--- a/src/features/tool-templates/html-css-beautifier-tool.tsx
+++ b/src/features/tool-templates/html-css-beautifier-tool.tsx
@@ -300,7 +300,7 @@ export function HtmlCssBeautifierTool({
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <div className="flex h-full flex-col space-y-8">
             <input
                 ref={fileInputRef}
                 type="file"
diff --git a/src/features/tool-templates/single-hash-tool-page.tsx b/src/features/tool-templates/single-hash-tool-page.tsx
index ceefe7b8..a324c289 100644
--- a/src/features/tool-templates/single-hash-tool-page.tsx
+++ b/src/features/tool-templates/single-hash-tool-page.tsx
@@ -69,7 +69,7 @@ export function SingleHashToolPage({
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-5xl flex-col space-y-6">
+        <div className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
diff --git a/src/features/tools/ai-color-palette-generator/page.tsx b/src/features/tools/ai-color-palette-generator/page.tsx
index 6a16ed65..4c6afc81 100644
--- a/src/features/tools/ai-color-palette-generator/page.tsx
+++ b/src/features/tools/ai-color-palette-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { generateAiPalette, paletteToCssVars } from "@/core/utils/color-generator-utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     seedColor: "#3b82f6",
@@ -82,7 +83,7 @@ export function AiColorPaletteGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -175,6 +176,6 @@ export function AiColorPaletteGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/ascii-art-generator/page.tsx b/src/features/tools/ascii-art-generator/page.tsx
index e7a50f30..306b263d 100644
--- a/src/features/tools/ascii-art-generator/page.tsx
+++ b/src/features/tools/ascii-art-generator/page.tsx
@@ -7,6 +7,8 @@ import { Button } from "@/components/ui/button"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
+import { fileToDataUrl } from "@/core/utils/image-canvas-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const ASCII_CHARS = ["@", "#", "S", "%", "?", "*", "+", ";", ":", ",", "."]
 
@@ -123,14 +125,13 @@ export function AsciiArtGeneratorPage() {
         }
     }, [input, mode])
 
-    const handleImageUpload = (file: File) => {
+    const handleImageUpload = async (file: File) => {
         const validation = validateFileAgainstPolicy(file, FILE_INPUT_POLICIES["image-compact"])
         if (!validation.ok) {
             toast.error(validation.reason === "unsupported_type" ? t.common.image_file_required : validation.message)
             return
         }
         const img = new Image()
-        let objectUrl = ""
         img.onload = () => {
             const canvas = canvasRef.current!
             canvas.width = img.width
@@ -138,18 +139,19 @@ export function AsciiArtGeneratorPage() {
             const ctx = canvas.getContext("2d")!
             ctx.drawImage(img, 0, 0)
             setOutput(imageToAscii(canvas, asciiWidth))
-            URL.revokeObjectURL(objectUrl)
         }
         img.onerror = () => {
-            URL.revokeObjectURL(objectUrl)
             toast.error(t.common.image_file_read_failed)
         }
-        objectUrl = URL.createObjectURL(file)
-        img.src = objectUrl
+        try {
+            img.src = await fileToDataUrl(file, FILE_INPUT_POLICIES["image-compact"])
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : t.common.image_file_read_failed)
+        }
     }
 
     return (
-        <div className="flex flex-col h-full">
+        <ToolPageContainer className="flex flex-col h-full">
             <div className="flex items-center justify-between border-b px-4 py-3 gap-2 flex-wrap">
                 <div className="flex items-center gap-2">
                     <Type className="h-5 w-5 text-primary" />
@@ -184,7 +186,7 @@ export function AsciiArtGeneratorPage() {
                             <button onClick={() => fileInputRef.current?.click()} className="w-full h-24 border-2 border-dashed border-border rounded-lg flex items-center justify-center text-sm text-muted-foreground hover:bg-muted/50 transition-colors">
                                 {toolT.drop_text}
                             </button>
-                            <input ref={fileInputRef} type="file" accept={FILE_INPUT_POLICIES["image-compact"].accept} className="hidden" onChange={(e) => e.target.files?.[0] && handleImageUpload(e.target.files[0])} />
+                            <input ref={fileInputRef} type="file" accept={FILE_INPUT_POLICIES["image-compact"].accept} className="hidden" onChange={(e) => e.target.files?.[0] && void handleImageUpload(e.target.files[0])} />
                             <div className="space-y-1">
                                 <label className="text-xs font-medium text-muted-foreground">{(toolT.width).replace("{width}", asciiWidth.toString())}</label>
                                 <input type="range" min={40} max={160} value={asciiWidth} onChange={(e) => setAsciiWidth(Number(e.target.value))} className="w-full" />
@@ -200,6 +202,6 @@ export function AsciiArtGeneratorPage() {
                 </div>
             </div>
             <canvas ref={canvasRef} className="hidden" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/asn1-der-inspector/page.tsx b/src/features/tools/asn1-der-inspector/page.tsx
index 8b363e96..c5706d71 100644
--- a/src/features/tools/asn1-der-inspector/page.tsx
+++ b/src/features/tools/asn1-der-inspector/page.tsx
@@ -11,6 +11,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { parseAsn1Der, type Asn1Node, type Asn1ParseResult } from "@/features/tools/asn1-der-inspector/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 function NodeView({ node, depth = 0 }: { node: Asn1Node; depth?: number }) {
     return (
@@ -61,7 +62,7 @@ export function Asn1DerInspectorPage() {
     }, [])
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
@@ -106,6 +107,6 @@ export function Asn1DerInspectorPage() {
                     </div>
                 </section>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/barcode-generator/manifest.ts b/src/features/tools/barcode-generator/manifest.ts
index 27e1c95f..9dc2dae3 100644
--- a/src/features/tools/barcode-generator/manifest.ts
+++ b/src/features/tools/barcode-generator/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "barcode_generator",
     slug: "barcode-generator",
+    inputBehavior: "empty-first",
     category: "generators",
     relatedTools: ["qr_code_generator", "id_generator", "fake_iban_generator", "list_randomizer"],
     privacy: {
diff --git a/src/features/tools/barcode-generator/page.tsx b/src/features/tools/barcode-generator/page.tsx
index 215ba3d4..824a36f5 100644
--- a/src/features/tools/barcode-generator/page.tsx
+++ b/src/features/tools/barcode-generator/page.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import JsBarcode from "jsbarcode"
-import { Barcode, Copy, Download, Eraser, Play, TestTube2 } from "lucide-react"
+import { Barcode, Copy, Download, Eraser, Play, RotateCcw, TestTube2 } from "lucide-react"
 import { toast } from "sonner"
 import { useLang } from "@/core/i18n/lang-provider"
 import { RelatedTools } from "@/core/seo/components/related-tools"
@@ -13,6 +13,7 @@ import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
 import { ToolEmptyState } from "@/features/tool-shell/tool-empty-state"
 import { normalizeBarcodeValue, type BarcodeFormat } from "@/features/tools/barcode-generator/utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_BY_FORMAT: Record<BarcodeFormat, string> = {
     CODE128: "BYTEFLOW-2026",
@@ -51,7 +52,7 @@ export function BarcodeGeneratorPage() {
     )
 
     const [format, setFormat] = React.useState<BarcodeFormat>("CODE128")
-    const [input, setInput] = React.useState(SAMPLE_BY_FORMAT.CODE128)
+    const [input, setInput] = React.useState("")
     const [barWidth, setBarWidth] = React.useState(2)
     const [barHeight, setBarHeight] = React.useState(120)
     const [lineColor, setLineColor] = React.useState("#111827")
@@ -129,6 +130,8 @@ export function BarcodeGeneratorPage() {
 
     const handleSample = () => setInput(SAMPLE_BY_FORMAT[format])
 
+    const handleClear = () => setInput("")
+
     const handleGenerate = () => {
         if (normalizedError) {
             toast.error(normalizedError)
@@ -144,7 +147,7 @@ export function BarcodeGeneratorPage() {
 
     const handleReset = () => {
         setFormat("CODE128")
-        setInput(SAMPLE_BY_FORMAT.CODE128)
+        setInput("")
         setBarWidth(2)
         setBarHeight(120)
         setLineColor("#111827")
@@ -198,15 +201,16 @@ export function BarcodeGeneratorPage() {
 
     const actions: ToolAction[] = [
         { id: "sample", label: t.common.sample, icon: TestTube2, onClick: handleSample },
+        { id: "clear", label: t.common.clear, icon: Eraser, onClick: handleClear, disabled: !input },
         { id: "generate", label: toolT.generate_action, icon: Play, onClick: handleGenerate },
-        { id: "reset", label: t.common.reset, icon: Eraser, onClick: handleReset },
+        { id: "reset", label: t.common.reset, icon: RotateCcw, onClick: handleReset },
         { id: "copy", label: t.common.copy, icon: Copy, onClick: handleCopy },
         { id: "svg", label: "SVG", icon: Download, onClick: handleDownloadSvg, disabled: !canExport },
         { id: "png", label: "PNG", icon: Download, onClick: handleDownloadPng, disabled: !canExport },
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -232,7 +236,6 @@ export function BarcodeGeneratorPage() {
                                         type="button"
                                         onClick={() => {
                                             setFormat(value)
-                                            setInput(SAMPLE_BY_FORMAT[value])
                                         }}
                                         className={`min-h-11 rounded-md border px-3 text-xs font-semibold uppercase tracking-wide ${
                                             format === value
@@ -245,6 +248,7 @@ export function BarcodeGeneratorPage() {
                                 ))}
                             </div>
                             <Input
+                                aria-label={toolT.input_pane_title}
                                 value={input}
                                 onChange={(event) => setInput(event.target.value)}
                                 placeholder={
@@ -336,6 +340,6 @@ export function BarcodeGeneratorPage() {
             </div>
 
             <RelatedTools toolKey="barcode_generator" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/base-encoding-converter/manifest.ts b/src/features/tools/base-encoding-converter/manifest.ts
index e63148e5..0d8b89a6 100644
--- a/src/features/tools/base-encoding-converter/manifest.ts
+++ b/src/features/tools/base-encoding-converter/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "base_encoding_converter",
     slug: "base-encoding-converter",
+    inputBehavior: "explicit-sample",
     category: "text-string",
     relatedTools: ["base64_encode_decode", "hex_bytes_workbench", "url_encode_decode", "hash_generator"],
     privacy: {
diff --git a/src/features/tools/base-encoding-converter/page.tsx b/src/features/tools/base-encoding-converter/page.tsx
index e89418f3..9e565529 100644
--- a/src/features/tools/base-encoding-converter/page.tsx
+++ b/src/features/tools/base-encoding-converter/page.tsx
@@ -8,6 +8,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { convertBaseEncoding, type BaseEncoding } from "./utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type Operation = "encode" | "decode"
 
@@ -60,7 +61,7 @@ export function BaseEncodingConverterPage() {
     }
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-6">
+        <ToolPageContainer className="flex h-full flex-col gap-6">
             <div>
                 <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
                     <Binary className="h-6 w-6 text-primary" />
@@ -148,6 +149,6 @@ export function BaseEncodingConverterPage() {
                     />
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/base64-encode-decode/manifest.ts b/src/features/tools/base64-encode-decode/manifest.ts
index 53e89970..1de4f8b1 100644
--- a/src/features/tools/base64-encode-decode/manifest.ts
+++ b/src/features/tools/base64-encode-decode/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "base64_encode_decode",
     slug: "base64-encode-decode",
+    inputBehavior: "empty-first",
     category: "text-string",
     relatedTools: ["url_encode_decode", "jwt_decoder", "hash_generator", "image_base64"],
     privacy: {
diff --git a/src/features/tools/base64-encode-decode/page.tsx b/src/features/tools/base64-encode-decode/page.tsx
index f27b12aa..1611e32f 100644
--- a/src/features/tools/base64-encode-decode/page.tsx
+++ b/src/features/tools/base64-encode-decode/page.tsx
@@ -18,6 +18,7 @@ import { BINARY_SAMPLE_BASE64, TEXT_SAMPLE_BASE64, TEXT_SAMPLE_INPUT, URL_SAFE_S
 import type { Mode, Operation } from "./types"
 import { useBase64FileTask } from "./use-base64-file-task"
 import { useBase64TextTask } from "./use-base64-text-task"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function Base64Page() {
     const { t, lang } = useLang()
@@ -341,7 +342,7 @@ export function Base64Page() {
     ]
 
     return (
-        <div className="flex h-full w-full max-w-[1400px] flex-col space-y-6">
+        <WideToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -386,7 +387,6 @@ export function Base64Page() {
                 </div>
 
                 <ToolActionBar actions={standardActions} handoffPayload={handoffPayload} />
-
                 <div className="flex flex-wrap items-center gap-2">
                     {mode === "file" ? (
                         <>
@@ -409,6 +409,7 @@ export function Base64Page() {
                 <input
                     ref={fileInputRef}
                     type="file"
+                    data-input-intent="payload"
                     accept={filePolicy.accept}
                     className="hidden"
                     onChange={(event) => {
@@ -436,7 +437,8 @@ export function Base64Page() {
                     </div>
                     <div className="flex-1 p-0">
                         <Textarea
-                            className="h-full min-h-[400px] w-full resize-none border-0 p-4 font-mono text-sm leading-relaxed focus-visible:ring-1 focus-visible:ring-ring/50"
+                            intent="payload"
+                            className="h-full w-full resize-none border-0 p-4 font-mono text-sm leading-relaxed focus-visible:ring-1 focus-visible:ring-ring/50"
                             placeholder={mode === "file" ? text("input_placeholder_file") : text("input_placeholder_text")}
                             value={input}
                             onChange={(event) => setInput(event.target.value)}
@@ -453,7 +455,7 @@ export function Base64Page() {
                     value={outputPreview}
                     metadata={`${output.length} chars / ${outputBytes} bytes`}
                     emptyText={t.common.result_placeholder}
-                    minHeightClassName="min-h-[400px]"
+                    intent="generatedOutput"
                     className="rounded-lg"
                     actions={isOutputPreviewTruncated ? (
                         <span className="rounded-md border border-border/70 bg-background/90 px-2 py-1 text-[11px] font-normal text-muted-foreground">
@@ -462,6 +464,6 @@ export function Base64Page() {
                     ) : null}
                 />
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/bionic-reading-converter/page.tsx b/src/features/tools/bionic-reading-converter/page.tsx
index 07c3c49a..4ff2b710 100644
--- a/src/features/tools/bionic-reading-converter/page.tsx
+++ b/src/features/tools/bionic-reading-converter/page.tsx
@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type Segment = {
     text: string
@@ -133,7 +134,7 @@ export function BionicReadingConverterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -226,6 +227,6 @@ export function BionicReadingConverterPage() {
             </div>
 
             <RelatedTools toolKey="bionic_reading_converter" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/certificate-decoder/page.tsx b/src/features/tools/certificate-decoder/page.tsx
index 70a251ae..178c2d04 100644
--- a/src/features/tools/certificate-decoder/page.tsx
+++ b/src/features/tools/certificate-decoder/page.tsx
@@ -7,6 +7,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { RelatedTools } from "@/core/seo/components/related-tools"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 // ─── ASN.1 / PEM Parser (Pure JS, no dependencies) ──────────────────────────
 
@@ -318,7 +319,7 @@ export function CertificateDecoderPage() {
     ]
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto w-full">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             {/* Header */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
@@ -407,6 +408,6 @@ export function CertificateDecoderPage() {
             )}
 
             <RelatedTools toolKey="certificate_decoder" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/chmod-calculator/page.tsx b/src/features/tools/chmod-calculator/page.tsx
index 4e8d49a2..55dc83a0 100644
--- a/src/features/tools/chmod-calculator/page.tsx
+++ b/src/features/tools/chmod-calculator/page.tsx
@@ -6,6 +6,7 @@ import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function ChmodCalculatorPage() {
     const { t } = useLang()
@@ -59,7 +60,7 @@ export function ChmodCalculatorPage() {
     }
 
     return (
-        <div className="flex flex-col h-full">
+        <ToolPageContainer className="flex flex-col h-full">
             <div className="flex items-center justify-between border-b px-4 py-3 gap-2 flex-wrap">
                 <div className="flex items-center gap-2">
                     <ShieldCheck className="h-5 w-5 text-primary" />
@@ -137,6 +138,6 @@ export function ChmodCalculatorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/cidr-subnet-calculator/manifest.ts b/src/features/tools/cidr-subnet-calculator/manifest.ts
index b9a07920..749aecba 100644
--- a/src/features/tools/cidr-subnet-calculator/manifest.ts
+++ b/src/features/tools/cidr-subnet-calculator/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "cidr_subnet_calculator",
     slug: "cidr-subnet-calculator",
+    inputBehavior: "explicit-sample",
     category: "network-web",
     relatedTools: ["url_parser", "http_request_builder", "chmod_calculator", "http_status_codes"],
     privacy: {
diff --git a/src/features/tools/cidr-subnet-calculator/page.tsx b/src/features/tools/cidr-subnet-calculator/page.tsx
index 2eab70b4..88f6d0ac 100644
--- a/src/features/tools/cidr-subnet-calculator/page.tsx
+++ b/src/features/tools/cidr-subnet-calculator/page.tsx
@@ -7,6 +7,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { calculateCidr, formatCidrSummary, type CidrCalculationResult } from "@/features/tools/cidr-subnet-calculator/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_CIDR = "192.168.1.42/24"
 
@@ -86,7 +87,7 @@ export function CidrSubnetCalculatorPage() {
     ]
 
     return (
-        <div className="flex h-full flex-col">
+        <ToolPageContainer className="flex h-full flex-col">
             <div className="border-b px-4 py-3">
                 <div className="flex flex-col gap-3">
                     <div className="flex items-center gap-2">
@@ -103,7 +104,7 @@ export function CidrSubnetCalculatorPage() {
             </div>
 
             <div className="flex-1 overflow-auto p-4 md:p-6">
-                <div className="mx-auto w-full max-w-3xl space-y-4">
+                <div data-route-width-exception="focused-work-surface" className="mx-auto w-full max-w-3xl space-y-4">
                     <section className="space-y-2">
                         <label className="text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground">
                             {text("input_label")}
@@ -181,6 +182,6 @@ export function CidrSubnetCalculatorPage() {
                     ) : null}
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/code-to-image-converter/page.tsx b/src/features/tools/code-to-image-converter/page.tsx
index 7ab1f763..860b1de5 100644
--- a/src/features/tools/code-to-image-converter/page.tsx
+++ b/src/features/tools/code-to-image-converter/page.tsx
@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
 import { type CodeImageTheme, renderCodeToPngDataUrl } from "@/features/tools/code-to-image-converter/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_CODE = [
     "export function buildPreview(id) {",
@@ -95,7 +96,7 @@ export function CodeToImageConverterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -174,6 +175,6 @@ export function CodeToImageConverterPage() {
                     )}
                 </ToolPreviewArea>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/color-converter/page.tsx b/src/features/tools/color-converter/page.tsx
index 92d05791..86612a11 100644
--- a/src/features/tools/color-converter/page.tsx
+++ b/src/features/tools/color-converter/page.tsx
@@ -11,6 +11,7 @@ import Color from "color"
 import { clampAlpha, clampRgbChannel, formatRgba, parseHexToRgb, rgbToHex, rgbaToHex8 } from "@/core/utils/color-utils"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type ConverterMode = "all" | "hex_to_rgba" | "rgba_to_hex"
 type ParsedColor = ReturnType<typeof Color>
@@ -137,7 +138,7 @@ export function ColorConverterPage({
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-4xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -376,6 +377,6 @@ export function ColorConverterPage({
                     </div>
                 </div>
             )}
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/color-mixer/page.tsx b/src/features/tools/color-mixer/page.tsx
index bca5e017..34dc3dc9 100644
--- a/src/features/tools/color-mixer/page.tsx
+++ b/src/features/tools/color-mixer/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { mixColorsHsl, mixColorsRgb } from "@/core/utils/color-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     colorA: "#22d3ee",
@@ -91,7 +92,7 @@ export function ColorMixerPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -191,7 +192,7 @@ export function ColorMixerPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/color-shades-generator/page.tsx b/src/features/tools/color-shades-generator/page.tsx
index 3896922f..680fa288 100644
--- a/src/features/tools/color-shades-generator/page.tsx
+++ b/src/features/tools/color-shades-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { generateColorShades, shadesToCssVars } from "@/core/utils/color-generator-utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     baseColor: "#3b82f6",
@@ -76,7 +77,7 @@ export function ColorShadesGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -155,6 +156,6 @@ export function ColorShadesGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/cron-visualizer/page.tsx b/src/features/tools/cron-visualizer/page.tsx
index 62bab573..17f4a9f3 100644
--- a/src/features/tools/cron-visualizer/page.tsx
+++ b/src/features/tools/cron-visualizer/page.tsx
@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button"
 import { useLang } from "@/core/i18n/lang-provider"
 import { Input } from "@/components/ui/input"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 function parseCron(expr: string): { minute: string; hour: string; dom: string; month: string; dow: string } | null {
     const parts = expr.trim().split(/\s+/)
@@ -126,7 +127,7 @@ export function CronVisualizerPage() {
     const fields = cron ? [cron.minute, cron.hour, cron.dom, cron.month, cron.dow] : []
 
     return (
-        <div className="flex flex-col h-full">
+        <ToolPageContainer className="flex flex-col h-full">
             <div className="flex items-center justify-between border-b px-4 py-3 gap-2 flex-wrap">
                 <div className="flex items-center gap-2">
                     <Clock className="h-5 w-5 text-primary" />
@@ -208,6 +209,6 @@ export function CronVisualizerPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/crontab-generator/page.tsx b/src/features/tools/crontab-generator/page.tsx
index cf77cbaf..d52ce213 100644
--- a/src/features/tools/crontab-generator/page.tsx
+++ b/src/features/tools/crontab-generator/page.tsx
@@ -16,6 +16,7 @@ import {
     validateCronExpression,
     type CronFieldKey,
 } from "./logic"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const CRONSTRUE_LOCALE_BY_LANG: Record<Locale, string> = {
     en: "en",
@@ -106,7 +107,7 @@ export function CrontabGeneratorPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-4xl mx-auto">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -191,7 +192,7 @@ export function CrontabGeneratorPage() {
                 </div>
 
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/csp-parser/page.tsx b/src/features/tools/csp-parser/page.tsx
index 0a6f9f47..7f21569f 100644
--- a/src/features/tools/csp-parser/page.tsx
+++ b/src/features/tools/csp-parser/page.tsx
@@ -7,6 +7,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { RelatedTools } from "@/core/seo/components/related-tools"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const CSP_DIRECTIVE_KEYS: Record<string, { descriptionKey: string; risk: "low" | "medium" | "high" | "info" }> = {
     "default-src": { descriptionKey: "directive_default_src_desc", risk: "info" },
@@ -115,7 +116,7 @@ export function CspParserPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto w-full">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -190,6 +191,6 @@ export function CspParserPage() {
             )}
 
             <RelatedTools toolKey="csp_parser" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/css-background-pattern-generator/page.tsx b/src/features/tools/css-background-pattern-generator/page.tsx
index 4c58428c..2580160c 100644
--- a/src/features/tools/css-background-pattern-generator/page.tsx
+++ b/src/features/tools/css-background-pattern-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildBackgroundPatternCss, type BackgroundPatternKind } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     kind: "dots" as BackgroundPatternKind,
@@ -115,7 +116,7 @@ export function CssBackgroundPatternGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -215,6 +216,6 @@ export function CssBackgroundPatternGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/css-border-radius-generator/page.tsx b/src/features/tools/css-border-radius-generator/page.tsx
index b4e0e49c..85799ec8 100644
--- a/src/features/tools/css-border-radius-generator/page.tsx
+++ b/src/features/tools/css-border-radius-generator/page.tsx
@@ -10,6 +10,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildBorderRadiusCss } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_RADIUS = { topLeft: 18, topRight: 18, bottomRight: 18, bottomLeft: 18 }
 
@@ -116,7 +117,7 @@ export function CssBorderRadiusGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -206,7 +207,7 @@ export function CssBorderRadiusGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-box-shadow-generator/page.tsx b/src/features/tools/css-box-shadow-generator/page.tsx
index 6558c346..fbdcea1a 100644
--- a/src/features/tools/css-box-shadow-generator/page.tsx
+++ b/src/features/tools/css-box-shadow-generator/page.tsx
@@ -10,6 +10,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildBoxShadowCss, type BoxShadowLayer } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_LAYERS: BoxShadowLayer[] = [
     { x: 0, y: 18, blur: 42, spread: -18, alpha: 0.32, color: "#0f172a", inset: false },
@@ -101,7 +102,7 @@ export function CssBoxShadowGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -218,7 +219,7 @@ export function CssBoxShadowGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-checkbox-generator/page.tsx b/src/features/tools/css-checkbox-generator/page.tsx
index 5ac7d1c2..311b57b6 100644
--- a/src/features/tools/css-checkbox-generator/page.tsx
+++ b/src/features/tools/css-checkbox-generator/page.tsx
@@ -10,6 +10,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildCheckboxCss } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     size: 26,
@@ -103,7 +104,7 @@ export function CssCheckboxGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -186,7 +187,7 @@ export function CssCheckboxGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-clip-path-generator/page.tsx b/src/features/tools/css-clip-path-generator/page.tsx
index 3f87153f..42421511 100644
--- a/src/features/tools/css-clip-path-generator/page.tsx
+++ b/src/features/tools/css-clip-path-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildClipPathCss, buildClipPathValue, type ClipPathPreset } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_PRESET: ClipPathPreset = "hexagon"
 const DEFAULT_INSET = 8
@@ -76,7 +77,7 @@ export function CssClipPathGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -180,6 +181,6 @@ export function CssClipPathGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/css-cubic-bezier-generator/page.tsx b/src/features/tools/css-cubic-bezier-generator/page.tsx
index 72e63779..a09608ee 100644
--- a/src/features/tools/css-cubic-bezier-generator/page.tsx
+++ b/src/features/tools/css-cubic-bezier-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildCubicBezierCss, formatCubicBezier } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_CURVE = { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1, duration: 320 }
 
@@ -75,7 +76,7 @@ export function CssCubicBezierGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -151,7 +152,7 @@ export function CssCubicBezierGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-glassmorphism-generator/page.tsx b/src/features/tools/css-glassmorphism-generator/page.tsx
index 4379b8ac..70bca832 100644
--- a/src/features/tools/css-glassmorphism-generator/page.tsx
+++ b/src/features/tools/css-glassmorphism-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildGlassmorphismCss, colorWithAlpha } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     blur: 18,
@@ -102,7 +103,7 @@ export function CssGlassmorphismGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -177,7 +178,7 @@ export function CssGlassmorphismGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-gradient-generator/page.tsx b/src/features/tools/css-gradient-generator/page.tsx
index ec19d5fa..7dc93eff 100644
--- a/src/features/tools/css-gradient-generator/page.tsx
+++ b/src/features/tools/css-gradient-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildGradientCss, buildGradientValue, type GradientType } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     type: "linear" as GradientType,
@@ -101,7 +102,7 @@ export function CssGradientGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -186,7 +187,7 @@ export function CssGradientGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-loader-generator/page.tsx b/src/features/tools/css-loader-generator/page.tsx
index 7c1575e6..a5e87818 100644
--- a/src/features/tools/css-loader-generator/page.tsx
+++ b/src/features/tools/css-loader-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildLoaderCss, colorWithAlpha, type LoaderPreset } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     preset: "spinner" as LoaderPreset,
@@ -81,7 +82,7 @@ export function CssLoaderGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -174,7 +175,7 @@ export function CssLoaderGeneratorPage() {
                     }
                 }
             `}</style>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-minifier/page.tsx b/src/features/tools/css-minifier/page.tsx
index 539bc734..eaf4d4c2 100644
--- a/src/features/tools/css-minifier/page.tsx
+++ b/src/features/tools/css-minifier/page.tsx
@@ -9,6 +9,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 function minifyCss(css: string): { styles: string; warnings: string[] } {
     const result = minify(css, {
@@ -172,7 +173,7 @@ export function CssMinifierPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -247,6 +248,6 @@ export function CssMinifierPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/css-switch-generator/page.tsx b/src/features/tools/css-switch-generator/page.tsx
index d6a8c0b7..75b4d403 100644
--- a/src/features/tools/css-switch-generator/page.tsx
+++ b/src/features/tools/css-switch-generator/page.tsx
@@ -10,6 +10,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildSwitchCss, colorWithAlpha } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     width: 56,
@@ -111,7 +112,7 @@ export function CssSwitchGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -196,7 +197,7 @@ export function CssSwitchGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-text-glitch-effect-generator/page.tsx b/src/features/tools/css-text-glitch-effect-generator/page.tsx
index 96bb2628..a24a85a3 100644
--- a/src/features/tools/css-text-glitch-effect-generator/page.tsx
+++ b/src/features/tools/css-text-glitch-effect-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { buildTextGlitchCss } from "@/core/utils/css-generator-utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     text: "BYTEFLOW",
@@ -94,7 +95,7 @@ export function CssTextGlitchEffectGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -237,7 +238,7 @@ export function CssTextGlitchEffectGeneratorPage() {
                     }
                 }
             `}</style>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/css-triangle-generator/page.tsx b/src/features/tools/css-triangle-generator/page.tsx
index 5dac22e2..f2e406f3 100644
--- a/src/features/tools/css-triangle-generator/page.tsx
+++ b/src/features/tools/css-triangle-generator/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildTriangleCss, type TriangleDirection } from "@/core/utils/css-generator-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     direction: "up" as TriangleDirection,
@@ -116,7 +117,7 @@ export function CssTriangleGeneratorPage() {
     }, [direction, width, height, color])
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -177,7 +178,7 @@ export function CssTriangleGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/csv-diff/page.tsx b/src/features/tools/csv-diff/page.tsx
index bded99a9..ace86bb9 100644
--- a/src/features/tools/csv-diff/page.tsx
+++ b/src/features/tools/csv-diff/page.tsx
@@ -7,6 +7,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { RelatedTools } from "@/core/seo/components/related-tools"
 import { buildInputTooLargeMessage, countNonEmptyLines, isOverUtf8Budget, TOOL_RUNTIME_BUDGETS } from "@/core/performance/tool-runtime-budgets"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 function parseCsv(text: string): string[][] {
     const rows: string[][] = []
@@ -88,7 +89,7 @@ export function CsvDiffPage() {
     const typeIcons = { added: <Plus className="h-3.5 w-3.5 text-emerald-500" />, removed: <Minus className="h-3.5 w-3.5 text-red-500" />, modified: <FileSpreadsheet className="h-3.5 w-3.5 text-amber-500" />, unchanged: <Equal className="h-3.5 w-3.5 text-muted-foreground" /> }
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -157,6 +158,6 @@ export function CsvDiffPage() {
                 </div>
             )}
             <RelatedTools toolKey="csv_diff" />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/csv-json-converter/csv-json-task-logic.ts b/src/features/tools/csv-json-converter/csv-json-task-logic.ts
index 94e4139c..bc5f7cd1 100644
--- a/src/features/tools/csv-json-converter/csv-json-task-logic.ts
+++ b/src/features/tools/csv-json-converter/csv-json-task-logic.ts
@@ -1,5 +1,5 @@
-import { csvToJson, jsonToCsv } from "./logic"
-import type { Direction } from "./types"
+import { csvToJsonWithDiagnostics, jsonToCsv } from "./logic"
+import type { CsvJsonDiagnostic, Direction } from "./types"
 
 export type CsvJsonTaskInput = {
     input: string
@@ -11,6 +11,8 @@ export type CsvJsonTaskInput = {
 
 export type CsvJsonTaskResult = {
     output: string
+    diagnostics: CsvJsonDiagnostic[]
+    detectedDelimiter?: string
 }
 
 export function runCsvJsonTaskSync({
@@ -20,9 +22,12 @@ export function runCsvJsonTaskSync({
     hasHeader,
     typeInference,
 }: CsvJsonTaskInput): CsvJsonTaskResult {
+    if (direction === "csv-to-json") {
+        return csvToJsonWithDiagnostics(input, delimiter, hasHeader, typeInference)
+    }
+
     return {
-        output: direction === "csv-to-json"
-            ? csvToJson(input, delimiter, hasHeader, typeInference)
-            : jsonToCsv(input, delimiter, hasHeader),
+        output: jsonToCsv(input, delimiter, hasHeader),
+        diagnostics: [],
     }
 }
diff --git a/src/features/tools/csv-json-converter/logic.ts b/src/features/tools/csv-json-converter/logic.ts
index fab8e307..fa0cffc1 100644
--- a/src/features/tools/csv-json-converter/logic.ts
+++ b/src/features/tools/csv-json-converter/logic.ts
@@ -1,10 +1,54 @@
+import {
+    serializeSpreadsheetSafeCsv,
+    type SpreadsheetSafeCsvCell,
+} from "@/core/files/csv-export"
 import { JSON_ARRAY_REQUIRED_ERROR } from "./constants"
+import type { CsvJsonDiagnostic } from "./types"
 
-function parseCSVRecords(csv: string, delimiter: string): string[][] {
-    const records: string[][] = []
+type ParsedCsvRecord = {
+    fields: string[]
+    row: number
+}
+
+export type CsvToJsonResult = {
+    output: string
+    diagnostics: CsvJsonDiagnostic[]
+    detectedDelimiter: string
+}
+
+const DELIMITER_CANDIDATES = [",", ";", "\t", "|"] as const
+const DELIMITER_SAMPLE_RECORDS = 50
+const MAX_CSV_DIAGNOSTICS = 100
+
+class CsvSyntaxError extends Error {
+    constructor(message: string, row: number, column: number) {
+        super(`Malformed CSV at row ${row}, column ${column}: ${message}`)
+        this.name = "CsvSyntaxError"
+    }
+}
+
+function stripBom(csv: string): string {
+    return csv.charCodeAt(0) === 0xfeff ? csv.slice(1) : csv
+}
+
+function parseCSVRecords(csv: string, delimiter: string): ParsedCsvRecord[] {
+    const records: ParsedCsvRecord[] = []
     let currentField = ""
     let currentRecord: string[] = []
     let inQuotes = false
+    let afterClosingQuote = false
+    let row = 1
+    let column = 1
+    let recordStartRow = 1
+    let quoteStartRow = 1
+    let quoteStartColumn = 1
+
+    const finishRecord = () => {
+        currentRecord.push(currentField)
+        records.push({ fields: currentRecord, row: recordStartRow })
+        currentField = ""
+        currentRecord = []
+    }
 
     for (let i = 0; i < csv.length; i++) {
         const ch = csv[i]
@@ -14,52 +58,244 @@ function parseCSVRecords(csv: string, delimiter: string): string[][] {
                 if (i + 1 < csv.length && csv[i + 1] === '"') {
                     currentField += '"'
                     i++
+                    column += 2
                 } else {
                     inQuotes = false
+                    afterClosingQuote = true
+                    column++
+                }
+            } else if (ch === "\r" || ch === "\n") {
+                currentField += ch
+                if (ch === "\r" && csv[i + 1] === "\n") {
+                    currentField += "\n"
+                    i++
                 }
+                row++
+                column = 1
             } else {
                 currentField += ch
+                column++
             }
             continue
         }
 
+        if (afterClosingQuote) {
+            if (ch === delimiter) {
+                currentRecord.push(currentField)
+                currentField = ""
+                afterClosingQuote = false
+                column++
+                continue
+            }
+            if (ch === "\r" || ch === "\n") {
+                finishRecord()
+                afterClosingQuote = false
+                if (ch === "\r" && csv[i + 1] === "\n") i++
+                row++
+                column = 1
+                recordStartRow = row
+                continue
+            }
+            throw new CsvSyntaxError(
+                `unexpected ${JSON.stringify(ch)} after a closing quote; expected a delimiter or line break.`,
+                row,
+                column,
+            )
+        }
+
         if (ch === '"') {
+            if (currentField.length > 0) {
+                throw new CsvSyntaxError("a quote must begin at the start of a field.", row, column)
+            }
             inQuotes = true
+            quoteStartRow = row
+            quoteStartColumn = column
+            column++
         } else if (ch === delimiter) {
             currentRecord.push(currentField)
             currentField = ""
+            column++
         } else if (ch === "\n" || ch === "\r") {
-            currentRecord.push(currentField)
-            records.push(currentRecord)
-            currentField = ""
-            currentRecord = []
+            finishRecord()
             if (ch === "\r" && csv[i + 1] === "\n") i++
+            row++
+            column = 1
+            recordStartRow = row
         } else {
             currentField += ch
+            column++
         }
     }
 
-    if (currentField.length > 0 || currentRecord.length > 0) {
-        currentRecord.push(currentField)
-        records.push(currentRecord)
+    if (inQuotes) {
+        throw new CsvSyntaxError(
+            `quoted field is not terminated before end of input (ended at row ${row}, column ${column}).`,
+            quoteStartRow,
+            quoteStartColumn,
+        )
+    }
+
+    if (afterClosingQuote || currentField.length > 0 || currentRecord.length > 0) {
+        finishRecord()
     }
 
-    return records.filter((record) => record.some((field) => field.trim() !== ""))
+    return records.filter((record) => record.fields.some((field) => field.trim() !== ""))
 }
 
-function detectDelimiter(csv: string): string {
-    const firstLine = csv.split(/\r?\n/)[0] || ""
-    const candidates = [",", ";", "\t", "|"]
-    let best = ","
-    let bestCount = 0
-    for (const d of candidates) {
-        const count = firstLine.split(d).length - 1
-        if (count > bestCount) {
-            bestCount = count
-            best = d
+type DelimiterScore = {
+    delimiter: string
+    multiColumnRecords: number
+    consistentRecords: number
+    modalColumns: number
+    totalSeparators: number
+}
+
+function scoreDelimiter(csv: string, delimiter: string): DelimiterScore | null {
+    try {
+        const records = parseCSVRecords(csv, delimiter).slice(0, DELIMITER_SAMPLE_RECORDS)
+        if (records.length === 0) {
+            return { delimiter, multiColumnRecords: 0, consistentRecords: 0, modalColumns: 1, totalSeparators: 0 }
+        }
+
+        const widthFrequency = new Map<number, number>()
+        let multiColumnRecords = 0
+        let totalSeparators = 0
+        for (const record of records) {
+            const width = record.fields.length
+            widthFrequency.set(width, (widthFrequency.get(width) ?? 0) + 1)
+            if (width > 1) multiColumnRecords++
+            totalSeparators += width - 1
+        }
+
+        let modalColumns = 1
+        let consistentRecords = 0
+        for (const [width, frequency] of widthFrequency) {
+            if (frequency > consistentRecords || (frequency === consistentRecords && width > modalColumns)) {
+                modalColumns = width
+                consistentRecords = frequency
+            }
         }
+
+        return { delimiter, multiColumnRecords, consistentRecords, modalColumns, totalSeparators }
+    } catch {
+        return null
+    }
+}
+
+function isBetterDelimiterScore(candidate: DelimiterScore, best: DelimiterScore): boolean {
+    if (candidate.multiColumnRecords !== best.multiColumnRecords) {
+        return candidate.multiColumnRecords > best.multiColumnRecords
+    }
+    if (candidate.consistentRecords !== best.consistentRecords) {
+        return candidate.consistentRecords > best.consistentRecords
+    }
+    if (candidate.modalColumns !== best.modalColumns) {
+        return candidate.modalColumns > best.modalColumns
+    }
+    return candidate.totalSeparators > best.totalSeparators
+}
+
+function detectDelimiter(csv: string): string {
+    let best: DelimiterScore | null = null
+    for (const delimiter of DELIMITER_CANDIDATES) {
+        const score = scoreDelimiter(csv, delimiter)
+        if (score && (!best || isBetterDelimiterScore(score, best))) best = score
     }
-    return best
+    return best?.delimiter ?? ","
+}
+
+function describeDelimiter(delimiter: string): string {
+    if (delimiter === ",") return "comma (,)"
+    if (delimiter === ";") return "semicolon (;)"
+    if (delimiter === "\t") return "tab (\\t)"
+    if (delimiter === "|") return "pipe (|)"
+    return JSON.stringify(delimiter)
+}
+
+type DiagnosticCollector = {
+    diagnostics: CsvJsonDiagnostic[]
+    omitted: number
+}
+
+function addDiagnostic(collector: DiagnosticCollector, diagnostic: CsvJsonDiagnostic) {
+    if (collector.diagnostics.length < MAX_CSV_DIAGNOSTICS) {
+        collector.diagnostics.push(diagnostic)
+    } else {
+        collector.omitted++
+    }
+}
+
+function finishDiagnostics(collector: DiagnosticCollector): CsvJsonDiagnostic[] {
+    if (collector.omitted > 0) {
+        collector.diagnostics.push({
+            code: "diagnostics_truncated",
+            severity: "warning",
+            message: `${collector.omitted} additional CSV structure warning(s) were omitted from this preview.`,
+        })
+    }
+    return collector.diagnostics
+}
+
+function allocateGeneratedHeader(
+    base: string,
+    used: Set<string>,
+    reserved: Set<string>,
+    startingSuffix = 2,
+): string {
+    if (!used.has(base) && !reserved.has(base)) return base
+    let suffix = startingSuffix
+    while (used.has(`${base}_${suffix}`) || reserved.has(`${base}_${suffix}`)) suffix++
+    return `${base}_${suffix}`
+}
+
+function resolveHeaders(record: ParsedCsvRecord, collector: DiagnosticCollector): {
+    headers: string[]
+    used: Set<string>
+    reserved: Set<string>
+} {
+    const rawHeaders = record.fields.map((header) => header.trim())
+    const reserved = new Set(rawHeaders.filter(Boolean))
+    const used = new Set<string>()
+    const occurrences = new Map<string, number>()
+    const headers = rawHeaders.map((rawHeader, index) => {
+        if (rawHeader === "") {
+            const header = allocateGeneratedHeader(`column_${index + 1}`, used, reserved)
+            used.add(header)
+            addDiagnostic(collector, {
+                code: "blank_header",
+                severity: "warning",
+                row: record.row,
+                column: index + 1,
+                message: `Blank header at row ${record.row}, column ${index + 1} was renamed to ${JSON.stringify(header)} to preserve the field.`,
+            })
+            return header
+        }
+
+        const occurrence = (occurrences.get(rawHeader) ?? 0) + 1
+        occurrences.set(rawHeader, occurrence)
+        if (occurrence === 1) {
+            used.add(rawHeader)
+            return rawHeader
+        }
+
+        const header = allocateGeneratedHeader(rawHeader, used, reserved, occurrence)
+        used.add(header)
+        addDiagnostic(collector, {
+            code: "duplicate_header",
+            severity: "warning",
+            row: record.row,
+            column: index + 1,
+            message: `Duplicate header ${JSON.stringify(rawHeader)} at row ${record.row}, column ${index + 1} was renamed to ${JSON.stringify(header)} to prevent an overwrite.`,
+        })
+        return header
+    })
+
+    return { headers, used, reserved }
+}
+
+function formatHeaderList(headers: string[]): string {
+    const visibleHeaders = headers.slice(0, 5).map((header) => JSON.stringify(header)).join(", ")
+    return headers.length > 5 ? `${visibleHeaders}, and ${headers.length - 5} more` : visibleHeaders
 }
 
 const STRICT_DECIMAL_NUMBER_PATTERN = /^-?(?:0|[1-9]\d*)(?:\.\d+)?$/
@@ -76,53 +312,148 @@ function inferType(value: string): string | number | boolean | null {
     return num
 }
 
-export function csvToJson(csv: string, delimiter: string, hasHeader: boolean, typeInference: boolean): string {
-    const effectiveDelimiter = delimiter === "auto" ? detectDelimiter(csv) : delimiter
-    const records = parseCSVRecords(csv, effectiveDelimiter)
-    if (records.length === 0) return "[]"
+export function csvToJsonWithDiagnostics(
+    csv: string,
+    delimiter: string,
+    hasHeader: boolean,
+    typeInference: boolean,
+): CsvToJsonResult {
+    const normalizedCsv = stripBom(csv)
+    const effectiveDelimiter = delimiter === "auto" ? detectDelimiter(normalizedCsv) : delimiter
+    const records = parseCSVRecords(normalizedCsv, effectiveDelimiter)
+    if (records.length === 0) {
+        return { output: "[]", diagnostics: [], detectedDelimiter: effectiveDelimiter }
+    }
+
+    const collector: DiagnosticCollector = { diagnostics: [], omitted: 0 }
+    if (delimiter === "auto") {
+        addDiagnostic(collector, {
+            code: "delimiter_detected",
+            severity: "info",
+            delimiter: effectiveDelimiter,
+            message: `Auto-detected ${describeDelimiter(effectiveDelimiter)} as the delimiter after comparing ${Math.min(records.length, DELIMITER_SAMPLE_RECORDS)} record(s).`,
+        })
+    }
 
     if (hasHeader) {
-        const headers = records[0]
-        const result = records.slice(1).map((values) => {
-            const obj: Record<string, unknown> = {}
+        const headerRecord = records[0]
+        const originalHeaderWidth = headerRecord.fields.length
+        const { headers, used, reserved } = resolveHeaders(headerRecord, collector)
+        const dataRecords = records.slice(1)
+        const resolvedWidth = dataRecords.reduce(
+            (maximum, record) => Math.max(maximum, record.fields.length),
+            originalHeaderWidth,
+        )
+        for (let index = originalHeaderWidth; index < resolvedWidth; index++) {
+            const header = allocateGeneratedHeader(`column_${index + 1}`, used, reserved)
+            headers.push(header)
+            used.add(header)
+        }
+
+        const result = dataRecords.map((record) => {
+            const values = record.fields
+            if (values.length > originalHeaderWidth) {
+                const generatedHeaders = headers.slice(originalHeaderWidth, values.length)
+                addDiagnostic(collector, {
+                    code: "extra_columns",
+                    severity: "warning",
+                    row: record.row,
+                    column: originalHeaderWidth + 1,
+                    message: `Row ${record.row} has ${values.length} fields but the header has ${originalHeaderWidth}. Extra fields were preserved as ${formatHeaderList(generatedHeaders)}.`,
+                })
+            }
+            if (values.length < resolvedWidth) {
+                addDiagnostic(collector, {
+                    code: "missing_columns",
+                    severity: "warning",
+                    row: record.row,
+                    column: values.length + 1,
+                    message: `Row ${record.row} has ${values.length} fields but the resolved header has ${resolvedWidth}. ${resolvedWidth - values.length} missing field(s) were padded with empty values.`,
+                })
+            }
+
+            const obj: Record<string, unknown> = Object.create(null) as Record<string, unknown>
             headers.forEach((h, i) => {
                 const raw = values[i] ?? ""
-                obj[h.trim()] = typeInference ? inferType(raw) : raw
+                obj[h] = typeInference ? inferType(raw) : raw
             })
             return obj
         })
-        return JSON.stringify(result, null, 2)
+        return {
+            output: JSON.stringify(result, null, 2),
+            diagnostics: finishDiagnostics(collector),
+            detectedDelimiter: effectiveDelimiter,
+        }
     } else {
-        const result = records.map((values) => values.map((v) => (typeInference ? inferType(v) : v)))
-        return JSON.stringify(result, null, 2)
+        const expectedWidth = records[0].fields.length
+        const result = records.map((record, index) => {
+            if (index > 0 && record.fields.length > expectedWidth) {
+                addDiagnostic(collector, {
+                    code: "extra_columns",
+                    severity: "warning",
+                    row: record.row,
+                    column: expectedWidth + 1,
+                    message: `Row ${record.row} has ${record.fields.length} fields; the first record has ${expectedWidth}. All extra fields were preserved.`,
+                })
+            } else if (index > 0 && record.fields.length < expectedWidth) {
+                addDiagnostic(collector, {
+                    code: "missing_columns",
+                    severity: "warning",
+                    row: record.row,
+                    column: record.fields.length + 1,
+                    message: `Row ${record.row} has ${record.fields.length} fields; the first record has ${expectedWidth}. The shorter row was preserved without synthesizing fields.`,
+                })
+            }
+            return record.fields.map((value) => (typeInference ? inferType(value) : value))
+        })
+        return {
+            output: JSON.stringify(result, null, 2),
+            diagnostics: finishDiagnostics(collector),
+            detectedDelimiter: effectiveDelimiter,
+        }
     }
 }
 
-function escapeCSVField(value: string, delimiter: string): string {
-    if (value.includes('"') || value.includes(delimiter) || value.includes("\n")) {
-        return `"${value.replace(/"/g, '""')}"`
-    }
-    return value
+export function csvToJson(csv: string, delimiter: string, hasHeader: boolean, typeInference: boolean): string {
+    return csvToJsonWithDiagnostics(csv, delimiter, hasHeader, typeInference).output
 }
 
-function flattenObject(obj: Record<string, unknown>, prefix = ""): Record<string, string> {
-    const result: Record<string, string> = {}
+function flattenObject(
+    obj: Record<string, unknown>,
+    prefix = "",
+    result: Record<string, SpreadsheetSafeCsvCell> = Object.create(null) as Record<string, SpreadsheetSafeCsvCell>,
+    paths = new Map<string, string>(),
+): Record<string, SpreadsheetSafeCsvCell> {
     for (const key of Object.keys(obj)) {
         const fullKey = prefix ? `${prefix}.${key}` : key
         const value = obj[key]
         if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-            Object.assign(result, flattenObject(value as Record<string, unknown>, fullKey))
+            flattenObject(value as Record<string, unknown>, fullKey, result, paths)
         } else {
-            result[fullKey] = value === null || value === undefined ? "" : serializeCsvCell(value)
+            const sourcePath = JSON.stringify([...prefix.split(".").filter(Boolean), key])
+            const existingPath = paths.get(fullKey)
+            if (existingPath) {
+                throw new Error(`JSON paths ${existingPath} and ${sourcePath} both map to CSV column ${JSON.stringify(fullKey)}. Rename a key before converting.`)
+            }
+            result[fullKey] = value === null || value === undefined ? "" : serializeJsonCsvCell(value)
+            paths.set(fullKey, sourcePath)
         }
     }
     return result
 }
 
-function serializeCsvCell(value: unknown): string {
+function serializeJsonCsvCell(value: unknown): SpreadsheetSafeCsvCell {
     if (Array.isArray(value) || (value !== null && typeof value === "object")) {
         return JSON.stringify(value)
     }
+    if (
+        typeof value === "string"
+        || typeof value === "number"
+        || typeof value === "boolean"
+        || typeof value === "bigint"
+    ) {
+        return value
+    }
     return String(value)
 }
 
@@ -154,27 +485,25 @@ export function jsonToCsv(json: string, delimiter: string, includeHeader: boolea
         const flattened = parsed.map((item) => flattenObject(item as Record<string, unknown>))
         const allKeys = [...new Set(flattened.flatMap((obj) => Object.keys(obj)))]
 
-        const lines: string[] = []
+        const rows: SpreadsheetSafeCsvCell[][] = []
         if (includeHeader) {
-            lines.push(allKeys.map((k) => escapeCSVField(k, effectiveDelimiter)).join(effectiveDelimiter))
+            rows.push(allKeys)
         }
         for (const row of flattened) {
-            lines.push(
-                allKeys.map((k) => escapeCSVField(row[k] ?? "", effectiveDelimiter)).join(effectiveDelimiter)
-            )
+            rows.push(allKeys.map((key) => row[key] ?? ""))
         }
-        return lines.join("\n")
+        return serializeSpreadsheetSafeCsv(rows, { delimiter: effectiveDelimiter })
     }
 
-    const lines: string[] = []
+    const rows: SpreadsheetSafeCsvCell[][] = []
     for (const row of parsed) {
         if (Array.isArray(row)) {
-            lines.push(
-                row.map((v: unknown) => escapeCSVField(v === null || v === undefined ? "" : serializeCsvCell(v), effectiveDelimiter)).join(effectiveDelimiter)
-            )
+            rows.push(row.map((value: unknown) => (
+                value === null || value === undefined ? "" : serializeJsonCsvCell(value)
+            )))
         } else {
-            lines.push(escapeCSVField(String(row), effectiveDelimiter))
+            rows.push([row === null ? "null" : serializeJsonCsvCell(row)])
         }
     }
-    return lines.join("\n")
+    return serializeSpreadsheetSafeCsv(rows, { delimiter: effectiveDelimiter })
 }
diff --git a/src/features/tools/csv-json-converter/manifest.ts b/src/features/tools/csv-json-converter/manifest.ts
index ce558427..fe3fa613 100644
--- a/src/features/tools/csv-json-converter/manifest.ts
+++ b/src/features/tools/csv-json-converter/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "csv_json_converter",
     slug: "csv-json-converter",
+    inputBehavior: "empty-first",
     category: "formatters",
     relatedTools: ["json_formatter", "yaml_json_converter", "json_to_typescript", "text_diff_checker"],
     privacy: {
diff --git a/src/features/tools/csv-json-converter/page.tsx b/src/features/tools/csv-json-converter/page.tsx
index 78c2d766..3797a0ea 100644
--- a/src/features/tools/csv-json-converter/page.tsx
+++ b/src/features/tools/csv-json-converter/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ArrowLeftRight, Copy, Eraser, Play, Settings2, Download, Upload } from "lucide-react"
+import { ArrowLeftRight, Copy, Eraser, Play, Settings2, Download, Upload, TriangleAlert } from "lucide-react"
 import { useLang } from "@/core/i18n/lang-provider"
 import { useThemePreference } from "@/hooks/use-theme-preference"
 import { ensureByteflowMonacoThemes, getByteflowMonacoThemeName } from "@/core/utils/monaco-theme"
@@ -12,13 +12,6 @@ import { buildToolHandoffLink } from "@/core/routing/tool-handoff"
 import { buildInputTooLargeMessage, countNonEmptyLines, isOverUtf8Budget, TOOL_RUNTIME_BUDGETS } from "@/core/performance/tool-runtime-budgets"
 import { FILE_INPUT_POLICIES, readTextFileWithPolicy, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { readStorageString, removeStorageKey, writeStorageString } from "@/core/storage/tool-persistence"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
 import {
     DIRECTION_STORAGE_KEY,
     DELIMITER_STORAGE_KEY,
@@ -29,8 +22,9 @@ import {
 } from "./constants"
 import { runCsvJsonTask } from "./csv-json-task"
 import { InlineButton } from "./components"
-import type { Direction } from "./types"
-
+import { CsvSettingsPanel } from "./settings-panel"
+import type { CsvJsonDiagnostic, Direction } from "./types"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 async function loadToast() {
     const { toast } = await import("sonner")
     return toast
@@ -44,6 +38,7 @@ export function CsvJsonConverterPage() {
     const [input, setInput] = React.useState("")
     const [output, setOutput] = React.useState("")
     const [error, setError] = React.useState<string | null>(null)
+    const [diagnostics, setDiagnostics] = React.useState<CsvJsonDiagnostic[]>([])
     const [direction, setDirection] = React.useState<Direction>("csv-to-json")
     const [delimiter, setDelimiter] = React.useState("auto")
     const [hasHeader, setHasHeader] = React.useState(true)
@@ -117,6 +112,7 @@ export function CsvJsonConverterPage() {
         if (!input.trim()) {
             setOutput("")
             setError(null)
+            setDiagnostics([])
             setIsConverting(false)
             return
         }
@@ -124,6 +120,7 @@ export function CsvJsonConverterPage() {
         if (isOverUtf8Budget(input, TOOL_RUNTIME_BUDGETS.maxCsvJsonInputBytes)) {
             setOutput("")
             setError(buildInputTooLargeMessage(t.common.local_input_too_large, TOOL_RUNTIME_BUDGETS.maxCsvJsonInputBytes))
+            setDiagnostics([])
             setIsConverting(false)
             return
         }
@@ -131,22 +128,29 @@ export function CsvJsonConverterPage() {
         if (direction === "csv-to-json" && countNonEmptyLines(input, TOOL_RUNTIME_BUDGETS.maxCsvJsonRows).exceeded) {
             setOutput("")
             setError(t.common.local_row_limit_exceeded.replace("{count}", String(TOOL_RUNTIME_BUDGETS.maxCsvJsonRows)))
+            setDiagnostics([])
             setIsConverting(false)
             return
         }
 
         const controller = new AbortController()
         convertAbortControllerRef.current = controller
+        setOutput("")
+        setError(null)
+        setDiagnostics([])
         setIsConverting(true)
         void runCsvJsonTask({ input, direction, delimiter, hasHeader, typeInference }, { signal: controller.signal })
             .then((result) => {
                 if (convertRequestIdRef.current !== requestId) return
                 setOutput(result.output)
+                setDiagnostics(result.diagnostics)
                 setError(null)
             })
             .catch((e: unknown) => {
                 if (convertRequestIdRef.current !== requestId) return
                 const message = e instanceof Error ? e.message : String(e)
+                setOutput("")
+                setDiagnostics([])
                 setError(message === JSON_ARRAY_REQUIRED_ERROR ? toolT.error_json_array_required : message)
             })
             .finally(() => {
@@ -172,6 +176,7 @@ export function CsvJsonConverterPage() {
         setInput("")
         setOutput("")
         setError(null)
+        setDiagnostics([])
         removeStorageKey(INPUT_STORAGE_KEY)
     }
 
@@ -182,6 +187,7 @@ export function CsvJsonConverterPage() {
         setInput(output)
         setOutput("")
         setError(null)
+        setDiagnostics([])
     }
 
     const handleDownload = () => {
@@ -203,6 +209,8 @@ export function CsvJsonConverterPage() {
         const policy = FILE_INPUT_POLICIES["csv-json"]
         const validation = validateFileAgainstPolicy(file, policy)
         if (!validation.ok) {
+            setOutput("")
+            setDiagnostics([])
             setError(validation.reason === "too_large" ? buildInputTooLargeMessage(t.common.local_input_too_large, TOOL_RUNTIME_BUDGETS.maxCsvJsonInputBytes) : validation.message)
             e.target.value = ""
             return
@@ -211,6 +219,8 @@ export function CsvJsonConverterPage() {
             .then((text) => {
                 cancelPendingConversion()
                 setInput(text)
+                setOutput("")
+                setDiagnostics([])
                 setError(null)
             })
             .catch((error) => setError(error instanceof Error ? error.message : t.common.image_file_read_failed))
@@ -240,7 +250,7 @@ export function CsvJsonConverterPage() {
     const outputFormatLabel = direction === "csv-to-json" ? "JSON" : "CSV"
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-6">
             {/* Header */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
@@ -297,54 +307,18 @@ export function CsvJsonConverterPage() {
             </div>
 
             {/* Settings Panel */}
-            {showSettings && (
-                <div className="p-4 border rounded-lg bg-card space-y-4">
-                    <h3 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground">
-                        {toolT.settings_title}
-                    </h3>
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                        <div className="space-y-2">
-                            <label className="text-sm font-medium">{toolT.delimiter_label}</label>
-                            <Select value={delimiter} onValueChange={setDelimiter}>
-                                <SelectTrigger><SelectValue /></SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="auto">{toolT.delimiter_auto_label}</SelectItem>
-                                    <SelectItem value=",">{toolT.delimiter_comma_label}</SelectItem>
-                                    <SelectItem value=";">{toolT.delimiter_semicolon_label}</SelectItem>
-                                    <SelectItem value="\t">{toolT.delimiter_tab_label}</SelectItem>
-                                    <SelectItem value="|">{toolT.delimiter_pipe_label}</SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
-                        <div className="space-y-2">
-                            <label className="text-sm font-medium flex items-center gap-2">
-                                <input
-                                    type="checkbox"
-                                    checked={hasHeader}
-                                    onChange={(e) => setHasHeader(e.target.checked)}
-                                    className="rounded border-input"
-                                />
-                                {direction === "csv-to-json"
-                                    ? toolT.csv_has_header_label
-                                    : toolT.json_include_header_label}
-                            </label>
-                        </div>
-                        {direction === "csv-to-json" && (
-                            <div className="space-y-2">
-                                <label className="text-sm font-medium flex items-center gap-2">
-                                    <input
-                                        type="checkbox"
-                                        checked={typeInference}
-                                        onChange={(e) => setTypeInference(e.target.checked)}
-                                        className="rounded border-input"
-                                    />
-                                    {toolT.type_inference_label}
-                                </label>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            )}
+            {showSettings ? (
+                <CsvSettingsPanel
+                    delimiter={delimiter}
+                    direction={direction}
+                    hasHeader={hasHeader}
+                    setDelimiter={setDelimiter}
+                    setHasHeader={setHasHeader}
+                    setTypeInference={setTypeInference}
+                    toolT={toolT}
+                    typeInference={typeInference}
+                />
+            ) : null}
 
             {/* Error */}
             {error && (
@@ -353,14 +327,34 @@ export function CsvJsonConverterPage() {
                 </div>
             )}
 
+            {diagnostics.length > 0 && (
+                <section
+                    aria-label={toolT.diagnostics_label}
+                    aria-live="polite"
+                    className="rounded-md border border-amber-500/40 bg-amber-500/10 p-3 text-sm"
+                >
+                    <div className="flex items-center gap-2 font-medium text-foreground">
+                        <TriangleAlert className="h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" aria-hidden="true" />
+                        <h2>{toolT.diagnostics_label}</h2>
+                    </div>
+                    <ul className="mt-2 space-y-1 text-muted-foreground">
+                        {diagnostics.map((diagnostic, index) => (
+                            <li key={`${diagnostic.code}-${diagnostic.row ?? 0}-${diagnostic.column ?? 0}-${index}`}>
+                                {diagnostic.message}
+                            </li>
+                        ))}
+                    </ul>
+                </section>
+            )}
+
             {/* Workspace Grid */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-[600px] border rounded-lg bg-card overflow-hidden">
+            <div data-input-intent="workbench" className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-[600px] border rounded-lg bg-card overflow-hidden">
                 {/* Input Pane */}
                 <div className="flex flex-col h-full border-b lg:border-b-0 lg:border-r">
                     <div className="tool-pane-header tool-pane-header-between">
                         <span>{t.common.input} ({inputFormatLabel})</span>
                         <label className="cursor-pointer">
-                            <input type="file" className="hidden" accept={FILE_INPUT_POLICIES["csv-json"].accept} onChange={handleFileUpload} />
+                            <input type="file" data-input-intent="payload" className="hidden" accept={FILE_INPUT_POLICIES["csv-json"].accept} onChange={handleFileUpload} />
                             <span className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
                                 <Upload className="h-3.5 w-3.5" />
                                 {toolT.input_upload_action}
@@ -369,6 +363,7 @@ export function CsvJsonConverterPage() {
                     </div>
                     <div className="flex-1 min-h-[300px]">
                         <MonacoEditor
+                            intent="payload"
                             height="100%"
                             defaultLanguage={inputLang}
                             language={inputLang}
@@ -378,6 +373,9 @@ export function CsvJsonConverterPage() {
                             onChange={(val) => {
                                 cancelPendingConversion()
                                 setInput(val || "")
+                                setOutput("")
+                                setDiagnostics([])
+                                setError(null)
                             }}
                             options={{
                                 minimap: { enabled: false },
@@ -405,8 +403,14 @@ export function CsvJsonConverterPage() {
                             </InlineButton>
                         </div>
                     </div>
+                    {direction === "json-to-csv" && (
+                        <p className="border-b border-border/70 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+                            {toolT.spreadsheet_safe_note}
+                        </p>
+                    )}
                     <div className="flex-1 min-h-[300px]">
                         <MonacoEditor
+                            intent="generatedOutput"
                             height="100%"
                             defaultLanguage={outputLang}
                             language={outputLang}
@@ -429,6 +433,6 @@ export function CsvJsonConverterPage() {
             </div>
 
             <RelatedTools toolKey="csv_json_converter" />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/csv-json-converter/settings-panel.tsx b/src/features/tools/csv-json-converter/settings-panel.tsx
new file mode 100644
index 00000000..5baad45f
--- /dev/null
+++ b/src/features/tools/csv-json-converter/settings-panel.tsx
@@ -0,0 +1,67 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import type { Direction } from "./types"
+
+type CsvSettingsPanelProps = {
+    delimiter: string
+    direction: Direction
+    hasHeader: boolean
+    setDelimiter: (value: string) => void
+    setHasHeader: (value: boolean) => void
+    setTypeInference: (value: boolean) => void
+    toolT: Record<string, string>
+    typeInference: boolean
+}
+
+export function CsvSettingsPanel({
+    delimiter,
+    direction,
+    hasHeader,
+    setDelimiter,
+    setHasHeader,
+    setTypeInference,
+    toolT,
+    typeInference,
+}: CsvSettingsPanelProps) {
+    return (
+        <div className="p-4 border rounded-lg bg-card space-y-4">
+            <h3 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground">{toolT.settings_title}</h3>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">{toolT.delimiter_label}</label>
+                    <Select value={delimiter} onValueChange={setDelimiter}>
+                        <SelectTrigger><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="auto">{toolT.delimiter_auto_label}</SelectItem>
+                            <SelectItem value=",">{toolT.delimiter_comma_label}</SelectItem>
+                            <SelectItem value=";">{toolT.delimiter_semicolon_label}</SelectItem>
+                            <SelectItem value="\t">{toolT.delimiter_tab_label}</SelectItem>
+                            <SelectItem value="|">{toolT.delimiter_pipe_label}</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <label className="flex items-start gap-2 text-sm font-medium">
+                    <input
+                        type="checkbox"
+                        data-input-intent="scalar"
+                        checked={hasHeader}
+                        onChange={(event) => setHasHeader(event.target.checked)}
+                        className="rounded border-input"
+                    />
+                    <span>{direction === "csv-to-json" ? toolT.csv_has_header_label : toolT.json_include_header_label}</span>
+                </label>
+                {direction === "csv-to-json" ? (
+                    <label className="flex items-start gap-2 text-sm font-medium">
+                        <input
+                            type="checkbox"
+                            data-input-intent="scalar"
+                            checked={typeInference}
+                            onChange={(event) => setTypeInference(event.target.checked)}
+                            className="rounded border-input"
+                        />
+                        <span>{toolT.type_inference_label}</span>
+                    </label>
+                ) : null}
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/tools/csv-json-converter/types.ts b/src/features/tools/csv-json-converter/types.ts
index c862a5a0..bb65ae0d 100644
--- a/src/features/tools/csv-json-converter/types.ts
+++ b/src/features/tools/csv-json-converter/types.ts
@@ -1 +1,18 @@
 export type Direction = "csv-to-json" | "json-to-csv"
+
+export type CsvJsonDiagnosticCode =
+    | "delimiter_detected"
+    | "blank_header"
+    | "duplicate_header"
+    | "extra_columns"
+    | "missing_columns"
+    | "diagnostics_truncated"
+
+export type CsvJsonDiagnostic = {
+    code: CsvJsonDiagnosticCode
+    severity: "info" | "warning"
+    message: string
+    row?: number
+    column?: number
+    delimiter?: string
+}
diff --git a/src/features/tools/curl-to-code/logic.ts b/src/features/tools/curl-to-code/logic.ts
index c161e49d..c695afa0 100644
--- a/src/features/tools/curl-to-code/logic.ts
+++ b/src/features/tools/curl-to-code/logic.ts
@@ -1,138 +1,72 @@
 import {
     goStringLiteral,
-    jsJsonBodyExpression,
-    jsStringLiteral,
     phpStringLiteral,
-    pythonJsonBodyExpression,
-    pythonStringLiteral,
-    rustStringLiteral,
 } from "@/core/codegen/literals"
+import {
+    emitJavaScriptFetch,
+    emitPythonRequests,
+    emitRustReqwest,
+    normalizeHttpRequest,
+    type NormalizedHttpRequest,
+} from "@/core/codegen/http-request"
+import {
+    parseCurl,
+    type CurlDiagnostic,
+    type ParsedRequest,
+} from "./parser"
+
+export { parseCurl } from "./parser"
+export type {
+    CurlDataOption,
+    CurlDiagnostic,
+    CurlDiagnosticCode,
+    CurlDiagnosticSeverity,
+    CurlParseResult,
+    ParsedDataPart,
+    ParsedHeader,
+    ParsedRequest,
+} from "./parser"
 
 export type OutputLang = "javascript" | "python" | "go" | "php" | "rust"
 
-export interface ParsedRequest {
-    method: string
-    url: string
-    headers: Record<string, string>
-    data: string
-    dataType: "raw" | "json" | "form"
+function effectiveHeaders(req: ParsedRequest): Array<[string, string]> {
+    const headers = Object.entries(req.headers)
+    const hasContentType = headers.some(([name]) => name.toLowerCase() === "content-type")
+    if (req.dataParts.length > 0 && !hasContentType) {
+        headers.push(["Content-Type", "application/x-www-form-urlencoded"])
+    }
+    return headers
 }
 
-export function parseCurl(curlStr: string): ParsedRequest | null {
-    try {
-        const result: ParsedRequest = { method: "GET", url: "", headers: {}, data: "", dataType: "raw" }
-
-        const normalized = curlStr.replace(/\\\n\s*/g, " ").replace(/\\\r?\n\s*/g, " ").trim()
-        const rest = normalized.replace(/^curl\s+/, "")
-        const urlMatch = rest.match(/['"]?(https?:\/\/[^\s'"]+)['"]?/)
-        if (urlMatch) {
-            result.url = urlMatch[1]
-        }
-
-        const methodMatch = rest.match(/-X\s+['"]?(\w+)['"]?/i)
-        if (methodMatch) {
-            result.method = methodMatch[1].toUpperCase()
-        }
-
-        const headerRegex = /-H\s+['"]([^'"]+)['"]/g
-        let headerMatch: RegExpExecArray | null
-        while ((headerMatch = headerRegex.exec(rest)) !== null) {
-            const colonIdx = headerMatch[1].indexOf(":")
-            if (colonIdx > 0) {
-                const key = headerMatch[1].slice(0, colonIdx).trim()
-                const value = headerMatch[1].slice(colonIdx + 1).trim()
-                result.headers[key] = value
-            }
-        }
-
-        const dataMatch = rest.match(/(?:-d|--data|--data-raw|--data-binary)\s+['"]([^'"]*)['"]/i) ||
-            rest.match(/(?:-d|--data|--data-raw|--data-binary)\s+(\S+)/i)
-        if (dataMatch) {
-            result.data = dataMatch[1]
-            if (result.method === "GET") result.method = "POST"
-
-            try {
-                JSON.parse(result.data)
-                result.dataType = "json"
-            } catch {
-                if (result.data.includes("=") && !result.data.includes("{")) {
-                    result.dataType = "form"
-                }
-            }
-        }
-
-        if (!result.url) return null
-        return result
-    } catch {
-        return null
-    }
+function normalizedParsedRequest(req: ParsedRequest): NormalizedHttpRequest {
+    return normalizeHttpRequest({
+        method: req.method,
+        url: req.url,
+        headers: effectiveHeaders(req).map(([name, value]) => ({ name, value })),
+        body: req.dataParts.length > 0
+            ? { type: req.dataType === "form" ? "form" : req.dataType, value: req.data }
+            : null,
+    })
 }
 
 export function toJavaScript(req: ParsedRequest): string {
-    const lines: string[] = []
-    const hasHeaders = Object.keys(req.headers).length > 0
-    const hasBody = !!req.data
-
-    lines.push(`const response = await fetch(${jsStringLiteral(req.url)}, {`)
-    lines.push(`  method: ${jsStringLiteral(req.method)},`)
-    if (hasHeaders) {
-        lines.push(`  headers: ${JSON.stringify(req.headers, null, 2).replace(/\n/g, "\n  ")},`)
-    }
-    if (hasBody) {
-        const jsonExpression = req.dataType === "json" ? jsJsonBodyExpression(req.data) : null
-        lines.push(`  body: ${jsonExpression ?? jsStringLiteral(req.data)},`)
-    }
-    lines.push("});")
-    lines.push("")
-    lines.push("const data = await response.json();")
-    lines.push("console.log(data);")
-    return lines.join("\n")
+    return emitJavaScriptFetch(normalizedParsedRequest(req)).code
 }
 
 export function toPython(req: ParsedRequest): string {
-    const lines: string[] = ["import requests"]
-    const hasHeaders = Object.keys(req.headers).length > 0
-    const method = req.method.toLowerCase()
-    const args = [pythonStringLiteral(req.url)]
-
-    if (hasHeaders) {
-        lines.push("", `headers = ${JSON.stringify(req.headers, null, 4)}`)
-        args.push("headers=headers")
-    }
-
-    if (req.data) {
-        if (req.dataType === "json") {
-            const payloadExpression = pythonJsonBodyExpression(req.data)
-            if (payloadExpression) {
-                lines[0] = "import json"
-                lines.push("", `payload = ${payloadExpression}`)
-                args.push("json=payload")
-            } else {
-                lines.push("", `data = ${pythonStringLiteral(req.data)}`)
-                args.push("data=data")
-            }
-        } else {
-            lines.push("", `data = ${pythonStringLiteral(req.data)}`)
-            args.push("data=data")
-        }
-    }
-
-    lines.push("")
-    lines.push(`response = requests.${method}(${args.join(", ")})`)
-    lines.push("print(response.status_code)")
-    lines.push("print(response.json())")
-    return lines.join("\n")
+    return emitPythonRequests(normalizedParsedRequest(req)).code
 }
 
 export function toGo(req: ParsedRequest): string {
+    const hasBody = req.dataParts.length > 0
     const lines: string[] = [
         "package main", "", "import (", "    \"fmt\"", "    \"io\"", "    \"net/http\"",
     ]
-    if (req.data) lines.push("    \"strings\"")
+    if (hasBody) lines.push("    \"strings\"")
     lines.push(")", "")
     lines.push("func main() {")
 
-    if (req.data) {
+    if (hasBody) {
         lines.push(`    body := strings.NewReader(${goStringLiteral(req.data)})`)
         lines.push(`    req, err := http.NewRequest(${goStringLiteral(req.method)}, ${goStringLiteral(req.url)}, body)`)
     } else {
@@ -140,7 +74,7 @@ export function toGo(req: ParsedRequest): string {
     }
     lines.push("    if err != nil { panic(err) }")
 
-    for (const [key, value] of Object.entries(req.headers)) {
+    for (const [key, value] of effectiveHeaders(req)) {
         lines.push(`    req.Header.Set(${goStringLiteral(key)}, ${goStringLiteral(value)})`)
     }
 
@@ -157,13 +91,13 @@ export function toPhp(req: ParsedRequest): string {
     const lines: string[] = ["<?php", "", "$ch = curl_init();", ""]
     lines.push(`curl_setopt($ch, CURLOPT_URL, ${phpStringLiteral(req.url)});`)
     lines.push("curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);")
-    if (req.method !== "GET") {
+    if (req.method !== "GET" || req.dataParts.length > 0) {
         lines.push(`curl_setopt($ch, CURLOPT_CUSTOMREQUEST, ${phpStringLiteral(req.method)});`)
     }
-    if (req.data) {
+    if (req.dataParts.length > 0) {
         lines.push(`curl_setopt($ch, CURLOPT_POSTFIELDS, ${phpStringLiteral(req.data)});`)
     }
-    const headerEntries = Object.entries(req.headers)
+    const headerEntries = effectiveHeaders(req)
     if (headerEntries.length > 0) {
         lines.push("curl_setopt($ch, CURLOPT_HTTPHEADER, [")
         for (const [key, value] of headerEntries) {
@@ -179,36 +113,36 @@ export function toPhp(req: ParsedRequest): string {
 }
 
 export function toRust(req: ParsedRequest): string {
-    const lines: string[] = [
-        "use reqwest;", "", "#[tokio::main]", "async fn main() -> Result<(), Box<dyn std::error::Error>> {",
-        "    let client = reqwest::Client::new();", "",
-    ]
-    const method = req.method.toLowerCase()
-    lines.push(`    let response = client.${method}(${rustStringLiteral(req.url)})`)
-    for (const [key, value] of Object.entries(req.headers)) {
-        lines.push(`        .header(${rustStringLiteral(key)}, ${rustStringLiteral(value)})`)
-    }
-    if (req.data) {
-        lines.push(`        .body(${rustStringLiteral(req.data)})`)
+    return emitRustReqwest(normalizedParsedRequest(req)).code
+}
+
+function generateCode(request: ParsedRequest, lang: OutputLang): string {
+    switch (lang) {
+        case "javascript": return toJavaScript(request)
+        case "python": return toPython(request)
+        case "go": return toGo(request)
+        case "php": return toPhp(request)
+        case "rust": return toRust(request)
     }
-    lines.push("        .send()")
-    lines.push("        .await?;")
-    lines.push("")
-    lines.push("    println!(\"{}\", response.text().await?);")
-    lines.push("    Ok(())")
-    lines.push("}")
-    return lines.join("\n")
 }
 
-export function convertCurlToCode(curl: string, lang: OutputLang, parseError: string): string {
-    if (!curl.trim()) return ""
+export interface CurlConversionResult {
+    code: string
+    diagnostics: CurlDiagnostic[]
+}
+
+export function convertCurlToCodeResult(curl: string, lang: OutputLang): CurlConversionResult {
+    if (!curl.trim()) return { code: "", diagnostics: [] }
     const parsed = parseCurl(curl)
-    if (!parsed) return parseError
-    switch (lang) {
-        case "javascript": return toJavaScript(parsed)
-        case "python": return toPython(parsed)
-        case "go": return toGo(parsed)
-        case "php": return toPhp(parsed)
-        case "rust": return toRust(parsed)
+    if (!parsed.ok) return { code: "", diagnostics: parsed.diagnostics }
+    return {
+        code: generateCode(parsed.request, lang),
+        diagnostics: parsed.diagnostics,
     }
 }
+
+export function convertCurlToCode(curl: string, lang: OutputLang, parseError: string): string {
+    const result = convertCurlToCodeResult(curl, lang)
+    if (result.diagnostics.some((item) => item.severity === "error")) return parseError
+    return result.code
+}
diff --git a/src/features/tools/curl-to-code/manifest.ts b/src/features/tools/curl-to-code/manifest.ts
index 37874ee5..a1d2fe88 100644
--- a/src/features/tools/curl-to-code/manifest.ts
+++ b/src/features/tools/curl-to-code/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "curl_to_code",
     slug: "curl-to-code",
+    inputBehavior: "explicit-sample",
     category: "network-web",
     relatedTools: ["http_request_builder", "url_parser", "http_status_codes", "jwt_decoder"],
     privacy: {
diff --git a/src/features/tools/curl-to-code/page.tsx b/src/features/tools/curl-to-code/page.tsx
index b9862181..a292dfe5 100644
--- a/src/features/tools/curl-to-code/page.tsx
+++ b/src/features/tools/curl-to-code/page.tsx
@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { Copy, Eraser, Terminal, ArrowRight } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { RelatedTools } from "@/core/seo/components/related-tools"
@@ -15,19 +16,58 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
-import { convertCurlToCode, type OutputLang } from "./logic"
+import {
+    convertCurlToCodeResult,
+    type CurlDiagnostic,
+    type CurlDiagnosticCode,
+    type OutputLang,
+} from "./logic"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_CURL = `curl -X POST 'https://api.example.com/users' \\
   -H 'Content-Type: application/json' \\
   -H 'Authorization: Bearer token123' \\
   -d '{"id": 42, "enabled": true}'`
 
+const DIAGNOSTIC_TRANSLATION_KEYS: Record<CurlDiagnosticCode, string> = {
+    empty_command: "diagnostic_invalid_command",
+    expected_curl: "diagnostic_invalid_command",
+    unterminated_quote: "diagnostic_unterminated_quote",
+    dangling_escape: "diagnostic_dangling_escape",
+    unsupported_operator: "diagnostic_unsupported_operator",
+    unsupported_option: "diagnostic_unsupported_option",
+    missing_option_value: "diagnostic_missing_option_value",
+    invalid_method: "diagnostic_invalid_value",
+    invalid_header: "diagnostic_invalid_value",
+    invalid_url: "diagnostic_invalid_value",
+    missing_url: "diagnostic_invalid_command",
+    multiple_urls: "diagnostic_unexpected_argument",
+    unexpected_argument: "diagnostic_unexpected_argument",
+    unsupported_data_file: "diagnostic_unsupported_data_file",
+    duplicate_header: "diagnostic_duplicate_header",
+}
+
+function formatDiagnostic(diagnostic: CurlDiagnostic, toolT: Record<string, string>): string {
+    const key = DIAGNOSTIC_TRANSLATION_KEYS[diagnostic.code]
+    const template = toolT[key] || toolT.parse_error
+    const rawToken = diagnostic.token || ""
+    const clippedToken = rawToken.length > 120 ? `${rawToken.slice(0, 117)}...` : rawToken
+    const token = JSON.stringify(clippedToken)
+    const message = template.replaceAll("{token}", token)
+    const position = (toolT.diagnostic_position || "Character {position}")
+        .replace("{position}", String(diagnostic.position))
+    return `${message} ${position}`
+}
+
 export function CurlToCodePage() {
     const { t } = useLang()
     const toolT = t.tools["curl_to_code"] as Record<string, string>
     const [curl, setCurl] = React.useState(SAMPLE_CURL)
     const [lang, setLang] = React.useState<OutputLang>("javascript")
-    const output = React.useMemo(() => convertCurlToCode(curl, lang, toolT.parse_error), [curl, lang, toolT.parse_error])
+    const conversion = React.useMemo(() => convertCurlToCodeResult(curl, lang), [curl, lang])
+    const output = conversion.code
+    const errors = conversion.diagnostics.filter((item) => item.severity === "error")
+    const warnings = conversion.diagnostics.filter((item) => item.severity === "warning")
 
     const handleCopy = async () => {
         return copyTextWithToolFeedback(t, output, `${toolT.output_label || "Code"} (${lang})`)
@@ -46,7 +86,7 @@ export function CurlToCodePage() {
     ]
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -60,6 +100,32 @@ export function CurlToCodePage() {
                 <ToolActionBar actions={actions} />
             </div>
 
+            {errors.length > 0 && (
+                <Alert variant="destructive">
+                    <AlertDescription>
+                        <p className="font-medium">{toolT.parse_error}</p>
+                        <ul className="mt-2 list-disc space-y-1 pl-5 font-mono text-xs">
+                            {errors.map((item, index) => (
+                                <li key={`${item.code}-${item.position}-${index}`}>{formatDiagnostic(item, toolT)}</li>
+                            ))}
+                        </ul>
+                    </AlertDescription>
+                </Alert>
+            )}
+
+            {warnings.length > 0 && (
+                <Alert role="status">
+                    <AlertDescription>
+                        <p className="font-medium">{toolT.parse_warning}</p>
+                        <ul className="mt-2 list-disc space-y-1 pl-5 font-mono text-xs">
+                            {warnings.map((item, index) => (
+                                <li key={`${item.code}-${item.position}-${index}`}>{formatDiagnostic(item, toolT)}</li>
+                            ))}
+                        </ul>
+                    </AlertDescription>
+                </Alert>
+            )}
+
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-[500px]">
                 {/* cURL Input */}
                 <div className="flex flex-col border rounded-lg bg-card overflow-hidden shadow-sm">
@@ -99,6 +165,6 @@ export function CurlToCodePage() {
             </div>
 
             <RelatedTools toolKey="curl_to_code" />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/curl-to-code/parser.ts b/src/features/tools/curl-to-code/parser.ts
new file mode 100644
index 00000000..4620df42
--- /dev/null
+++ b/src/features/tools/curl-to-code/parser.ts
@@ -0,0 +1,390 @@
+export type CurlDiagnosticSeverity = "error" | "warning"
+
+export type CurlDiagnosticCode =
+    | "empty_command"
+    | "expected_curl"
+    | "unterminated_quote"
+    | "dangling_escape"
+    | "unsupported_operator"
+    | "unsupported_option"
+    | "missing_option_value"
+    | "invalid_method"
+    | "invalid_header"
+    | "invalid_url"
+    | "missing_url"
+    | "multiple_urls"
+    | "unexpected_argument"
+    | "unsupported_data_file"
+    | "duplicate_header"
+
+export interface CurlDiagnostic {
+    code: CurlDiagnosticCode
+    severity: CurlDiagnosticSeverity
+    position: number
+    token?: string
+}
+
+export interface ParsedHeader {
+    name: string
+    value: string
+}
+
+export type CurlDataOption = "-d" | "--data" | "--data-raw" | "--data-binary"
+
+export interface ParsedDataPart {
+    option: CurlDataOption
+    value: string
+}
+
+export interface ParsedRequest {
+    method: string
+    url: string
+    // Existing emitters consume the last-wins projection; entries retain source order.
+    headers: Record<string, string>
+    headerEntries: ParsedHeader[]
+    // Existing emitters consume the cURL-combined body; parts retain each source flag.
+    data: string
+    dataParts: ParsedDataPart[]
+    dataType: "raw" | "json" | "form"
+}
+
+export type CurlParseResult =
+    | { ok: true; request: ParsedRequest; diagnostics: CurlDiagnostic[] }
+    | { ok: false; diagnostics: CurlDiagnostic[] }
+
+interface CurlToken {
+    value: string
+    position: number
+}
+
+type TokenizeResult =
+    | { ok: true; tokens: CurlToken[] }
+    | { ok: false; diagnostic: CurlDiagnostic }
+
+type QuoteMode = "single" | "double" | null
+
+const HTTP_METHOD_PATTERN = /^[!#$%&'*+\-.^_`|~0-9A-Za-z]+$/
+const HEADER_NAME_PATTERN = HTTP_METHOD_PATTERN
+const SHELL_OPERATOR_CHARS = new Set([";", "|", "&", "<", ">", "(", ")", "`"])
+const DATA_OPTIONS = new Set<CurlDataOption>(["-d", "--data", "--data-raw", "--data-binary"])
+
+function diagnostic(
+    code: CurlDiagnosticCode,
+    position: number,
+    token?: string,
+    severity: CurlDiagnosticSeverity = "error",
+): CurlDiagnostic {
+    return { code, severity, position: position + 1, ...(token === undefined ? {} : { token }) }
+}
+
+function lineContinuationLength(input: string, slashIndex: number): number {
+    if (input[slashIndex] !== "\\") return 0
+    if (input[slashIndex + 1] === "\n") return 2
+    if (input[slashIndex + 1] === "\r" && input[slashIndex + 2] === "\n") return 3
+    return 0
+}
+
+function shellOperatorAt(input: string, index: number, tokenStarted: boolean): string | null {
+    if (input.startsWith("&&", index) || input.startsWith("||", index)) {
+        return input.slice(index, index + 2)
+    }
+    if (input.startsWith("$(", index)) return "$("
+    const ch = input[index]
+    if (SHELL_OPERATOR_CHARS.has(ch)) return ch
+    if (ch === "#" && !tokenStarted) return ch
+    if (ch === "\r" || ch === "\n") return "newline"
+    return null
+}
+
+function shellExpansionAt(input: string, index: number): string | null {
+    if (input[index] !== "$") return null
+
+    const next = input[index + 1]
+    if (next === "{") {
+        const closingBrace = input.indexOf("}", index + 2)
+        return closingBrace === -1 ? "${" : input.slice(index, closingBrace + 1)
+    }
+    if (next && /[A-Za-z_]/.test(next)) {
+        let end = index + 2
+        while (end < input.length && /[A-Za-z0-9_]/.test(input[end])) end++
+        return input.slice(index, end)
+    }
+    if (next && /[0-9@*#?$!_-]/.test(next)) return input.slice(index, index + 2)
+    return null
+}
+
+function tokenizeCurl(input: string): TokenizeResult {
+    const tokens: CurlToken[] = []
+    let value = ""
+    let tokenStart = 0
+    let tokenStarted = false
+    let quoteMode: QuoteMode = null
+    let quoteStart = 0
+
+    const startToken = (position: number) => {
+        if (tokenStarted) return
+        tokenStarted = true
+        tokenStart = position
+    }
+
+    const pushToken = () => {
+        if (!tokenStarted) return
+        tokens.push({ value, position: tokenStart })
+        value = ""
+        tokenStarted = false
+    }
+
+    for (let i = 0; i < input.length; i++) {
+        const ch = input[i]
+
+        if (quoteMode === "single") {
+            if (ch === "'") {
+                quoteMode = null
+            } else {
+                value += ch
+            }
+            continue
+        }
+
+        if (quoteMode === "double") {
+            if (ch === '"') {
+                quoteMode = null
+                continue
+            }
+            if (ch === "\\") {
+                const continuationLength = lineContinuationLength(input, i)
+                if (continuationLength > 0) {
+                    i += continuationLength - 1
+                    continue
+                }
+                if (i + 1 >= input.length) {
+                    return { ok: false, diagnostic: diagnostic("dangling_escape", i, "\\") }
+                }
+                const next = input[i + 1]
+                if (next === '"' || next === "\\" || next === "$" || next === "`") {
+                    value += next
+                    i++
+                } else {
+                    value += "\\"
+                }
+                continue
+            }
+            const operator = shellOperatorAt(input, i, tokenStarted)
+            if (operator === "`" || operator === "$(") {
+                return { ok: false, diagnostic: diagnostic("unsupported_operator", i, operator) }
+            }
+            const expansion = shellExpansionAt(input, i)
+            if (expansion) {
+                return { ok: false, diagnostic: diagnostic("unsupported_operator", i, expansion) }
+            }
+            value += ch
+            continue
+        }
+
+        if (ch === " " || ch === "\t") {
+            pushToken()
+            continue
+        }
+
+        if (ch === "\\") {
+            const continuationLength = lineContinuationLength(input, i)
+            if (continuationLength > 0) {
+                i += continuationLength - 1
+                continue
+            }
+            if (i + 1 >= input.length) {
+                return { ok: false, diagnostic: diagnostic("dangling_escape", i, "\\") }
+            }
+            startToken(i)
+            value += input[i + 1]
+            i++
+            continue
+        }
+
+        if (ch === "'" || ch === '"') {
+            startToken(i)
+            quoteMode = ch === "'" ? "single" : "double"
+            quoteStart = i
+            continue
+        }
+
+        const operator = shellOperatorAt(input, i, tokenStarted)
+        if (operator) {
+            return { ok: false, diagnostic: diagnostic("unsupported_operator", i, operator) }
+        }
+        const expansion = shellExpansionAt(input, i)
+        if (expansion) {
+            return { ok: false, diagnostic: diagnostic("unsupported_operator", i, expansion) }
+        }
+
+        startToken(i)
+        value += ch
+    }
+
+    if (quoteMode) {
+        return {
+            ok: false,
+            diagnostic: diagnostic("unterminated_quote", quoteStart, quoteMode === "single" ? "'" : '"'),
+        }
+    }
+
+    pushToken()
+    return { ok: true, tokens }
+}
+
+function parseHttpUrl(value: string): string | null {
+    try {
+        const parsed = new URL(value)
+        return parsed.protocol === "http:" || parsed.protocol === "https:" ? value : null
+    } catch {
+        return null
+    }
+}
+
+function splitLongOption(token: CurlToken): { option: string; inlineValue?: CurlToken } {
+    if (!token.value.startsWith("--")) return { option: token.value }
+    const equalsIndex = token.value.indexOf("=")
+    if (equalsIndex === -1) return { option: token.value }
+    return {
+        option: token.value.slice(0, equalsIndex),
+        inlineValue: {
+            value: token.value.slice(equalsIndex + 1),
+            position: token.position + equalsIndex + 1,
+        },
+    }
+}
+
+function inferDataType(headers: Record<string, string>, hasData: boolean): ParsedRequest["dataType"] {
+    if (!hasData) return "raw"
+
+    const contentType = Object.entries(headers)
+        .find(([name]) => name.toLowerCase() === "content-type")?.[1]
+    if (contentType === undefined) return "form"
+
+    const mediaType = contentType.split(";", 1)[0].trim().toLowerCase()
+    if (mediaType === "application/json" || mediaType.endsWith("+json")) return "json"
+    if (mediaType === "application/x-www-form-urlencoded") return "form"
+    return "raw"
+}
+
+export function parseCurl(input: string): CurlParseResult {
+    const tokenized = tokenizeCurl(input)
+    if (!tokenized.ok) return { ok: false, diagnostics: [tokenized.diagnostic] }
+    if (tokenized.tokens.length === 0) {
+        return { ok: false, diagnostics: [diagnostic("empty_command", 0)] }
+    }
+
+    const command = tokenized.tokens[0]
+    if (command.value !== "curl" && command.value !== "curl.exe") {
+        return { ok: false, diagnostics: [diagnostic("expected_curl", command.position, command.value)] }
+    }
+
+    const diagnostics: CurlDiagnostic[] = []
+    const headers: Record<string, string> = {}
+    const headerEntries: ParsedHeader[] = []
+    const headerNames = new Map<string, string>()
+    const dataParts: ParsedDataPart[] = []
+    let method = "GET"
+    let explicitMethod = false
+    let url = ""
+
+    const fail = (error: CurlDiagnostic): CurlParseResult => ({
+        ok: false,
+        diagnostics: [...diagnostics, error],
+    })
+
+    for (let i = 1; i < tokenized.tokens.length; i++) {
+        const token = tokenized.tokens[i]
+        const { option, inlineValue } = splitLongOption(token)
+
+        if (!option.startsWith("-")) {
+            const parsedUrl = parseHttpUrl(token.value)
+            if (url) {
+                return fail(diagnostic(parsedUrl ? "multiple_urls" : "unexpected_argument", token.position, token.value))
+            }
+            if (!parsedUrl) return fail(diagnostic("invalid_url", token.position, token.value))
+            url = parsedUrl
+            continue
+        }
+
+        const needsValue = option === "-X" || option === "--request" ||
+            option === "-H" || option === "--header" || option === "--url" ||
+            DATA_OPTIONS.has(option as CurlDataOption)
+        if (!needsValue) {
+            return fail(diagnostic("unsupported_option", token.position, option))
+        }
+
+        let valueToken = inlineValue
+        if (!valueToken) {
+            valueToken = tokenized.tokens[i + 1]
+            if (valueToken) i++
+        }
+        if (!valueToken || (valueToken.value === "" && !DATA_OPTIONS.has(option as CurlDataOption))) {
+            return fail(diagnostic("missing_option_value", token.position, option))
+        }
+
+        if (option === "-X" || option === "--request") {
+            if (!HTTP_METHOD_PATTERN.test(valueToken.value)) {
+                return fail(diagnostic("invalid_method", valueToken.position, valueToken.value))
+            }
+            method = valueToken.value.toUpperCase()
+            explicitMethod = true
+            continue
+        }
+
+        if (option === "-H" || option === "--header") {
+            const colonIndex = valueToken.value.indexOf(":")
+            const name = colonIndex === -1 ? "" : valueToken.value.slice(0, colonIndex).trim()
+            const value = colonIndex === -1 ? "" : valueToken.value.slice(colonIndex + 1).trim()
+            if (!name || !HEADER_NAME_PATTERN.test(name) || /[\r\n]/.test(value)) {
+                return fail(diagnostic("invalid_header", valueToken.position, valueToken.value))
+            }
+
+            const normalizedName = name.toLowerCase()
+            const previousName = headerNames.get(normalizedName)
+            if (previousName) {
+                diagnostics.push(diagnostic("duplicate_header", valueToken.position, name, "warning"))
+                delete headers[previousName]
+            }
+            headerNames.set(normalizedName, name)
+            headers[name] = value
+            headerEntries.push({ name, value })
+            continue
+        }
+
+        if (option === "--url") {
+            const parsedUrl = parseHttpUrl(valueToken.value)
+            if (!parsedUrl) return fail(diagnostic("invalid_url", valueToken.position, valueToken.value))
+            if (url) return fail(diagnostic("multiple_urls", valueToken.position, valueToken.value))
+            url = parsedUrl
+            continue
+        }
+
+        const dataOption = option as CurlDataOption
+        if (dataOption !== "--data-raw" && valueToken.value.startsWith("@")) {
+            return fail(diagnostic("unsupported_data_file", valueToken.position, valueToken.value))
+        }
+        dataParts.push({ option: dataOption, value: valueToken.value })
+    }
+
+    if (!url) {
+        return fail(diagnostic("missing_url", input.length > 0 ? input.length - 1 : 0))
+    }
+
+    const data = dataParts.map((part) => part.value).join("&")
+    if (dataParts.length > 0 && !explicitMethod) method = "POST"
+
+    return {
+        ok: true,
+        request: {
+            method,
+            url,
+            headers,
+            headerEntries,
+            data,
+            dataParts,
+            dataType: inferDataType(headers, dataParts.length > 0),
+        },
+        diagnostics,
+    }
+}
diff --git a/src/features/tools/devops-yaml-validator/manifest.ts b/src/features/tools/devops-yaml-validator/manifest.ts
index 03fe5ea0..b5ff631b 100644
--- a/src/features/tools/devops-yaml-validator/manifest.ts
+++ b/src/features/tools/devops-yaml-validator/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "devops_yaml_validator",
     slug: "devops-yaml-validator",
+    inputBehavior: "explicit-sample",
     category: "network-web",
     relatedTools: ["docker_run_to_compose", "yaml_json_converter", "yq_playground", "env_parser"],
     privacy: {
diff --git a/src/features/tools/devops-yaml-validator/page.tsx b/src/features/tools/devops-yaml-validator/page.tsx
index 0ccdd8fc..47c45376 100644
--- a/src/features/tools/devops-yaml-validator/page.tsx
+++ b/src/features/tools/devops-yaml-validator/page.tsx
@@ -11,6 +11,7 @@ import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-war
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { formatDevopsYamlReport, validateDevopsYaml } from "./logic"
 import { SAMPLE_INPUT } from "./samples"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function DevopsYamlValidatorPage() {
     const { t } = useLang()
@@ -40,7 +41,7 @@ export function DevopsYamlValidatorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-6">
+        <ToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -66,7 +67,7 @@ export function DevopsYamlValidatorPage() {
             </div>
 
             <RelatedTools toolKey="devops_yaml_validator" />
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/docker-run-to-compose/page.tsx b/src/features/tools/docker-run-to-compose/page.tsx
index f245c307..f6151b7d 100644
--- a/src/features/tools/docker-run-to-compose/page.tsx
+++ b/src/features/tools/docker-run-to-compose/page.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/features/tools/docker-run-to-compose/utils"
 import { Label } from "@/components/ui/label"
 import { Alert, AlertDescription } from "@/components/ui/alert"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function DockerRunToComposePage() {
     const { t } = useLang()
@@ -68,7 +69,7 @@ export function DockerRunToComposePage() {
     }, [])
 
     return (
-        <div className="container mx-auto max-w-6xl py-8 px-4 space-y-6">
+        <ToolPageContainer className="py-8 space-y-6">
             <div className="space-y-2">
                 <h1 className="text-3xl font-bold">{text("title")}</h1>
                 <p className="text-muted-foreground">{text("description")}</p>
@@ -128,6 +129,6 @@ export function DockerRunToComposePage() {
                     <Textarea value={output} readOnly className="min-h-[300px] font-mono text-sm bg-muted" />
                 </div>
             )}
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/env-parser/page.tsx b/src/features/tools/env-parser/page.tsx
index 4b894f58..eaed8918 100644
--- a/src/features/tools/env-parser/page.tsx
+++ b/src/features/tools/env-parser/page.tsx
@@ -8,6 +8,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { exportEnvVars, parseEnvFile, type EnvExportFormat } from "./utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_ENV = `# Application Config
 NODE_ENV=production
@@ -75,7 +76,7 @@ export function EnvVariableParserPage() {
     }
 
     return (
-        <div className="flex min-w-0 flex-col h-full">
+        <WideToolPageContainer className="flex min-w-0 flex-col h-full">
             <div className="flex flex-col border-b px-4 py-3 gap-2">
                 <div className="flex items-center gap-2">
                     <FileText className="h-5 w-5 text-primary" />
@@ -174,6 +175,6 @@ export function EnvVariableParserPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/fake-iban-generator/page.tsx b/src/features/tools/fake-iban-generator/page.tsx
index 8750ebd0..821ffcfb 100644
--- a/src/features/tools/fake-iban-generator/page.tsx
+++ b/src/features/tools/fake-iban-generator/page.tsx
@@ -16,6 +16,7 @@ import {
     type IbanCountry,
     validateIban,
 } from "@/features/tools/fake-iban-generator/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 function downloadTextFile(content: string, filename: string) {
     const blob = new Blob([content], { type: "text/plain;charset=utf-8" })
@@ -148,7 +149,7 @@ export function FakeIbanGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -253,6 +254,6 @@ export function FakeIbanGeneratorPage() {
             </div>
 
             <RelatedTools toolKey="fake_iban_generator" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/google-fonts-pair-finder/page.tsx b/src/features/tools/google-fonts-pair-finder/page.tsx
index 63a63751..e4790cfb 100644
--- a/src/features/tools/google-fonts-pair-finder/page.tsx
+++ b/src/features/tools/google-fonts-pair-finder/page.tsx
@@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type PairTone = "all" | "modern" | "editorial" | "friendly" | "technical" | "playful"
 
@@ -150,7 +151,7 @@ export function GoogleFontsPairFinderPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -257,6 +258,6 @@ export function GoogleFontsPairFinderPage() {
             </div>
 
             <RelatedTools toolKey="google_fonts_pair_finder" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/graphql-workbench/manifest.ts b/src/features/tools/graphql-workbench/manifest.ts
index 5f60f4aa..e45ef4b1 100644
--- a/src/features/tools/graphql-workbench/manifest.ts
+++ b/src/features/tools/graphql-workbench/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "graphql_workbench",
     slug: "graphql-workbench",
+    inputBehavior: "explicit-sample",
     category: "network-web",
     relatedTools: ["http_request_builder", "openapi_viewer", "json_formatter", "jsonpath_playground"],
     privacy: {
diff --git a/src/features/tools/graphql-workbench/page.tsx b/src/features/tools/graphql-workbench/page.tsx
index 157f288e..d809d465 100644
--- a/src/features/tools/graphql-workbench/page.tsx
+++ b/src/features/tools/graphql-workbench/page.tsx
@@ -11,6 +11,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { inspectGraphql } from "./logic"
 import { SAMPLE_INPUT, SAMPLE_INTROSPECTION, SAMPLE_VARIABLES } from "./samples"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function GraphqlWorkbenchPage() {
     const { t } = useLang()
@@ -66,7 +67,7 @@ export function GraphqlWorkbenchPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-7xl flex-col gap-6">
+        <WideToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -111,6 +112,6 @@ export function GraphqlWorkbenchPage() {
             </div>
 
             <RelatedTools toolKey="graphql_workbench" />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/gzip-brotli-lab/page.tsx b/src/features/tools/gzip-brotli-lab/page.tsx
index c9239725..7a33885a 100644
--- a/src/features/tools/gzip-brotli-lab/page.tsx
+++ b/src/features/tools/gzip-brotli-lab/page.tsx
@@ -25,6 +25,7 @@ import {
     type CompressionResult,
 } from "@/features/tools/gzip-brotli-lab/utils"
 import { runCompressionTask } from "@/features/tools/gzip-brotli-lab/compression-task"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function GzipBrotliLabPage() {
     const { t } = useLang()
@@ -109,7 +110,7 @@ export function GzipBrotliLabPage() {
     }, [text])
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
@@ -225,6 +226,6 @@ export function GzipBrotliLabPage() {
                     </div>
                 </div>
             )}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/har-viewer-sanitizer/page.tsx b/src/features/tools/har-viewer-sanitizer/page.tsx
index bf53a04d..551304a2 100644
--- a/src/features/tools/har-viewer-sanitizer/page.tsx
+++ b/src/features/tools/har-viewer-sanitizer/page.tsx
@@ -12,6 +12,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { DEFAULT_HAR_SANITIZE_OPTIONS, parseHarSummary, sanitizeHar, type HarParseResult, type HarSanitizeOptions, type HarSanitizeResult } from "@/features/tools/har-viewer-sanitizer/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 type OptionKey = keyof HarSanitizeOptions
 
@@ -92,7 +93,7 @@ export function HarViewerSanitizerPage() {
     }, [])
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight">{text("title")}</h1>
@@ -180,6 +181,6 @@ export function HarViewerSanitizerPage() {
                     </div>
                 </div>
             )}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/hash-generator/page.tsx b/src/features/tools/hash-generator/page.tsx
index 29f73bff..e0616f82 100644
--- a/src/features/tools/hash-generator/page.tsx
+++ b/src/features/tools/hash-generator/page.tsx
@@ -18,6 +18,7 @@ import { ModeSelector } from "@/features/tool-shell/mode-selector"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { serializeSpreadsheetSafeCsv } from "@/core/files/csv-export"
 import { FILE_INPUT_POLICIES, describeFilePolicy } from "@/core/files/file-input-policy"
 import {
     type StandardHashAlgorithm,
@@ -28,6 +29,7 @@ import type { HashTaskInput } from "./hash-task-logic"
 import type { HashMode } from "./types"
 import { useHashFileInput } from "./use-hash-file-input"
 import { useHashTask } from "./use-hash-task"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function HashGeneratorPage() {
     const { t, lang } = useLang()
@@ -99,10 +101,10 @@ export function HashGeneratorPage() {
         if (!batchRows.length) return
 
         const content = format === "csv"
-            ? [
-                "index,input,algorithm,hash",
-                ...batchRows.map((row) => `${row.index},\"${row.line.replace(/\"/g, '\"\"')}\",${batchAlgorithm},${row.hash}`),
-            ].join("\n")
+            ? serializeSpreadsheetSafeCsv([
+                ["index", "input", "algorithm", "hash"],
+                ...batchRows.map((row) => [row.index, row.line, batchAlgorithm, row.hash] as const),
+            ])
             : batchRows.map((row) => `${row.index}. ${row.line} => ${row.hash}`).join("\n")
 
         downloadTextFile(content, format === "csv" ? "hash-batch.csv" : "hash-batch.txt")
@@ -136,7 +138,7 @@ export function HashGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -368,7 +370,7 @@ export function HashGeneratorPage() {
                     ) : null}
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/header-diff/page.tsx b/src/features/tools/header-diff/page.tsx
index aa783e20..98b8a886 100644
--- a/src/features/tools/header-diff/page.tsx
+++ b/src/features/tools/header-diff/page.tsx
@@ -9,6 +9,7 @@ import { RelatedTools } from "@/core/seo/components/related-tools"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { OutputWrapModeControl, type OutputWrapMode } from "@/features/tool-shell/text-output-panel"
 import { cn } from "@/core/utils/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 interface HeaderEntry { key: string; value: string }
 
@@ -57,7 +58,7 @@ export function HeaderDiffPage() {
     const typeIcons = { added: <Plus className="h-3.5 w-3.5 text-emerald-500" />, removed: <Minus className="h-3.5 w-3.5 text-red-500" />, modified: <ArrowLeftRight className="h-3.5 w-3.5 text-amber-500" />, unchanged: <Equal className="h-3.5 w-3.5 text-muted-foreground" /> }
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -111,6 +112,6 @@ export function HeaderDiffPage() {
                 </>
             )}
             <RelatedTools toolKey="header_diff" />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/hex-bytes-workbench/page.tsx b/src/features/tools/hex-bytes-workbench/page.tsx
index 92649c1b..9999c0e1 100644
--- a/src/features/tools/hex-bytes-workbench/page.tsx
+++ b/src/features/tools/hex-bytes-workbench/page.tsx
@@ -10,6 +10,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { inspectBytes, type ByteInputMode, type ByteWorkbenchResult } from "@/features/tools/hex-bytes-workbench/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const MODES: ByteInputMode[] = ["text", "hex", "base64"]
 
@@ -50,7 +51,7 @@ export function HexBytesWorkbenchPage() {
     }, [])
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight">{text("title")}</h1>
@@ -149,6 +150,6 @@ export function HexBytesWorkbenchPage() {
                     </div>
                 </div>
             ) : null}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/html-css-beautifier/page.tsx b/src/features/tools/html-css-beautifier/page.tsx
index 7c65365c..fda46908 100644
--- a/src/features/tools/html-css-beautifier/page.tsx
+++ b/src/features/tools/html-css-beautifier/page.tsx
@@ -1,7 +1,12 @@
 "use client"
 
 import { HtmlCssBeautifierTool } from "@/features/tool-templates/html-css-beautifier-tool"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function HtmlCssBeautifierPage() {
-    return <HtmlCssBeautifierTool toolKey="html_css_beautifier" initialMode="html" availableModes={["html", "css"]} />
+    return (
+        <WideToolPageContainer>
+            <HtmlCssBeautifierTool toolKey="html_css_beautifier" initialMode="html" availableModes={["html", "css"]} />
+        </WideToolPageContainer>
+    )
 }
diff --git a/src/features/tools/html-encoder-decoder/page.tsx b/src/features/tools/html-encoder-decoder/page.tsx
index 0cc2ce7e..d46ce526 100644
--- a/src/features/tools/html-encoder-decoder/page.tsx
+++ b/src/features/tools/html-encoder-decoder/page.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { encodeHtmlEntities, decodeHtmlEntities } from "@/features/tools/html-encoder-decoder/utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_HTML = "<div class=\"hero\">Alpha & Beta \"quoted\" <tag></div>"
 
@@ -106,7 +107,7 @@ export function HtmlEncoderDecoderPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -155,6 +156,6 @@ export function HtmlEncoderDecoderPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/html-formatter/page.tsx b/src/features/tools/html-formatter/page.tsx
index 41478880..90da10aa 100644
--- a/src/features/tools/html-formatter/page.tsx
+++ b/src/features/tools/html-formatter/page.tsx
@@ -1,7 +1,12 @@
 "use client"
 
 import { HtmlCssBeautifierTool } from "@/features/tool-templates/html-css-beautifier-tool"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function HtmlFormatterPage() {
-    return <HtmlCssBeautifierTool toolKey="html_formatter" initialMode="html" availableModes={["html"]} />
+    return (
+        <WideToolPageContainer>
+            <HtmlCssBeautifierTool toolKey="html_formatter" initialMode="html" availableModes={["html"]} />
+        </WideToolPageContainer>
+    )
 }
diff --git a/src/features/tools/html-minifier/page.tsx b/src/features/tools/html-minifier/page.tsx
index 47e2ef1f..9438406f 100644
--- a/src/features/tools/html-minifier/page.tsx
+++ b/src/features/tools/html-minifier/page.tsx
@@ -10,6 +10,7 @@ import { buildToolHandoffLink, getToolHandoffFromSearchParams } from "@/core/rou
 import { importTextFile, TEXT_FILE_IMPORT_ACCEPT } from "@/core/files/text-file-import"
 import { removeStorageKey } from "@/core/storage/tool-persistence"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_HTML = [
     "<section data-key=\"sample_001\">",
@@ -201,7 +202,7 @@ export function HtmlMinifierPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -308,6 +309,6 @@ export function HtmlMinifierPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/html-to-markdown/page.tsx b/src/features/tools/html-to-markdown/page.tsx
index c11cf29c..97a2146f 100644
--- a/src/features/tools/html-to-markdown/page.tsx
+++ b/src/features/tools/html-to-markdown/page.tsx
@@ -9,6 +9,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { convertHtmlToMarkdown } from "@/features/tools/html-to-markdown/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_HTML = `<article>
   <h1>release_2048</h1>
@@ -94,7 +95,7 @@ export function HtmlToMarkdownPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -143,6 +144,6 @@ export function HtmlToMarkdownPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/http-request-builder/logic.ts b/src/features/tools/http-request-builder/logic.ts
index 6b8b4119..6e757294 100644
--- a/src/features/tools/http-request-builder/logic.ts
+++ b/src/features/tools/http-request-builder/logic.ts
@@ -1,10 +1,13 @@
 import {
-    jsJsonBodyExpression,
-    jsStringLiteral,
-    pythonJsonBodyExpression,
-    pythonStringLiteral,
     shellSingleQuote,
 } from "@/core/codegen/literals"
+import {
+    emitJavaScriptFetch,
+    emitPythonRequests,
+    normalizeHttpRequest,
+    type NormalizedHttpBody,
+    type NormalizedHttpHeader,
+} from "@/core/codegen/http-request"
 
 export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS"
 export type BodyType = "none" | "json" | "raw" | "form-urlencoded"
@@ -35,16 +38,30 @@ function enabledQueryParams(queryParams: QueryEntry[]): QueryEntry[] {
     return queryParams.filter((param) => param.enabled && param.key.trim())
 }
 
-function headersObject(headers: HeaderEntry[], bodyType?: BodyType): Record<string, string> {
-    const result: Record<string, string> = {}
-    for (const header of enabledHeaders(headers)) {
-        result[header.key] = header.value
-    }
-    if (bodyType === "json") result["Content-Type"] = "application/json"
-    if (bodyType === "form-urlencoded") result["Content-Type"] = "application/x-www-form-urlencoded"
+function normalizedHeaders(headers: HeaderEntry[], bodyType?: BodyType): NormalizedHttpHeader[] {
+    const result = enabledHeaders(headers).map((header) => ({ name: header.key, value: header.value }))
+    if (bodyType === "json") result.push({ name: "Content-Type", value: "application/json" })
+    if (bodyType === "form-urlencoded") result.push({ name: "Content-Type", value: "application/x-www-form-urlencoded" })
     return result
 }
 
+function normalizedBody(bodyType: BodyType, body: string): NormalizedHttpBody | null {
+    if (!body || bodyType === "none") return null
+    return {
+        type: bodyType === "form-urlencoded" ? "form" : bodyType,
+        value: body,
+    }
+}
+
+function normalizedBuilderRequest(method: HttpMethod, url: string, headers: HeaderEntry[], bodyType: BodyType, body: string) {
+    return normalizeHttpRequest({
+        method,
+        url,
+        headers: normalizedHeaders(headers, bodyType),
+        body: normalizedBody(bodyType, body),
+    })
+}
+
 export function validateRequestUrl(url: string): UrlValidationResult {
     if (!url.trim()) {
         return {
@@ -97,66 +114,16 @@ export function generateCurl(method: HttpMethod, url: string, headers: HeaderEnt
         parts.push(`-d ${shellSingleQuote(body)}`)
     } else if (bodyType === "form-urlencoded" && body) {
         parts.push(`-H ${shellSingleQuote("Content-Type: application/x-www-form-urlencoded")}`)
-        parts.push(`--data-urlencode ${shellSingleQuote(body)}`)
+        parts.push(`--data-raw ${shellSingleQuote(body)}`)
     }
 
     return parts.join(" \\\n  ")
 }
 
 export function generateFetch(method: HttpMethod, url: string, headers: HeaderEntry[], bodyType: BodyType, body: string): string {
-    const headersObj = headersObject(headers, bodyType)
-    const optionLines = [`  method: ${jsStringLiteral(method)},`]
-
-    if (Object.keys(headersObj).length > 0) {
-        optionLines.push(`  headers: ${JSON.stringify(headersObj, null, 2).replace(/\n/g, "\n  ")},`)
-    }
-
-    if (body && bodyType !== "none") {
-        const jsonExpression = bodyType === "json" ? jsJsonBodyExpression(body) : null
-        optionLines.push(`  body: ${jsonExpression ?? jsStringLiteral(body)},`)
-    }
-
-    return [
-        `const response = await fetch(${jsStringLiteral(url)}, {`,
-        ...optionLines,
-        "});",
-        "const data = await response.json();",
-        "console.log(data);",
-    ].join("\n")
+    return emitJavaScriptFetch(normalizedBuilderRequest(method, url, headers, bodyType, body)).code
 }
 
 export function generatePythonRequests(method: HttpMethod, url: string, headers: HeaderEntry[], bodyType: BodyType, body: string): string {
-    const lines = ["import requests"]
-    const headersObj = headersObject(headers, bodyType)
-    const methodLower = method.toLowerCase()
-    const callArgs = [pythonStringLiteral(url)]
-
-    if (Object.keys(headersObj).length > 0) {
-        lines.push("", `headers = ${JSON.stringify(headersObj, null, 4)}`)
-        callArgs.push("headers=headers")
-    }
-
-    if (body && bodyType !== "none") {
-        if (bodyType === "json") {
-            const payloadExpression = pythonJsonBodyExpression(body)
-            if (payloadExpression) {
-                lines[0] = "import json"
-                lines.push("", `payload = ${payloadExpression}`)
-                callArgs.push("json=payload")
-            } else {
-                lines.push("", `data = ${pythonStringLiteral(body)}`)
-                callArgs.push("data=data")
-            }
-        } else {
-            lines.push("", `data = ${pythonStringLiteral(body)}`)
-            callArgs.push("data=data")
-        }
-    }
-
-    lines.push("")
-    lines.push(`response = requests.${methodLower}(${callArgs.join(", ")})`)
-    lines.push("print(response.status_code)")
-    lines.push("print(response.json())")
-
-    return lines.join("\n")
+    return emitPythonRequests(normalizedBuilderRequest(method, url, headers, bodyType, body)).code
 }
diff --git a/src/features/tools/http-request-builder/page.tsx b/src/features/tools/http-request-builder/page.tsx
index a9e71720..1a02642e 100644
--- a/src/features/tools/http-request-builder/page.tsx
+++ b/src/features/tools/http-request-builder/page.tsx
@@ -11,6 +11,7 @@ import { RelatedTools } from "@/core/seo/components/related-tools"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { fetchMethodAllowsBody } from "@/core/codegen/http-request"
 import {
     Select,
     SelectContent,
@@ -29,6 +30,7 @@ import {
     type HttpMethod,
     type QueryEntry,
 } from "./logic"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 let nextId = 0
 
@@ -99,15 +101,18 @@ export function HttpRequestBuilderPage() {
         if (!urlValidation.ok) return url
         return buildUrlWithQueryParams(urlValidation.url, queryParams)
     }, [queryParams, url, urlValidation])
+    const bodyAllowed = fetchMethodAllowsBody(method)
+    const effectiveBodyType = bodyAllowed ? bodyType : "none"
+    const effectiveBody = bodyAllowed ? body : ""
 
     const generatedCode = React.useMemo(() => {
         if (!urlValidation.ok) return urlValidationMessage
         switch (codeType) {
-            case "curl": return generateCurl(method, requestUrl, headers, bodyType, body)
-            case "fetch": return generateFetch(method, requestUrl, headers, bodyType, body)
-            case "python": return generatePythonRequests(method, requestUrl, headers, bodyType, body)
+            case "curl": return generateCurl(method, requestUrl, headers, effectiveBodyType, effectiveBody)
+            case "fetch": return generateFetch(method, requestUrl, headers, effectiveBodyType, effectiveBody)
+            case "python": return generatePythonRequests(method, requestUrl, headers, effectiveBodyType, effectiveBody)
         }
-    }, [body, bodyType, codeType, headers, method, requestUrl, urlValidation, urlValidationMessage])
+    }, [codeType, effectiveBody, effectiveBodyType, headers, method, requestUrl, urlValidation, urlValidationMessage])
 
     const handleCopy = async () => {
         if (!urlValidation.ok) return
@@ -148,7 +153,7 @@ export function HttpRequestBuilderPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto w-full">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             {/* Header */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
@@ -312,8 +317,14 @@ export function HttpRequestBuilderPage() {
                     <div className="p-5 border rounded-lg bg-card shadow-sm space-y-4">
                         <div className="flex items-center justify-between">
                             <h3 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground">{toolT.body}</h3>
-                            <Select value={bodyType} onValueChange={(v) => setBodyType(v as BodyType)}>
-                                <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
+                            <Select value={bodyType} onValueChange={(v) => setBodyType(v as BodyType)} disabled={!bodyAllowed}>
+                                <SelectTrigger
+                                    className="w-40"
+                                    aria-label={toolT.body}
+                                    aria-describedby={!bodyAllowed ? "http-body-method-warning" : undefined}
+                                >
+                                    <SelectValue />
+                                </SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="none">{toolT.body_type_none}</SelectItem>
                                     <SelectItem value="json">JSON</SelectItem>
@@ -322,6 +333,11 @@ export function HttpRequestBuilderPage() {
                                 </SelectContent>
                             </Select>
                         </div>
+                        {!bodyAllowed && (
+                            <p id="http-body-method-warning" role="status" className="text-sm text-muted-foreground">
+                                {toolT.body_not_allowed}
+                            </p>
+                        )}
                         {bodyType !== "none" && (
                             <Textarea
                                 aria-label={toolT.body_input_label}
@@ -329,6 +345,7 @@ export function HttpRequestBuilderPage() {
                                 placeholder={bodyType === "json" ? JSON_BODY_PLACEHOLDER : FORM_BODY_PLACEHOLDER}
                                 value={body}
                                 onChange={(e) => setBody(e.target.value)}
+                                disabled={!bodyAllowed}
                                 spellCheck={false}
                             />
                         )}
@@ -368,6 +385,6 @@ export function HttpRequestBuilderPage() {
             </div>
 
             <RelatedTools toolKey="http_request_builder" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/http-status-codes/page.tsx b/src/features/tools/http-status-codes/page.tsx
index 4064b041..39c1b03e 100644
--- a/src/features/tools/http-status-codes/page.tsx
+++ b/src/features/tools/http-status-codes/page.tsx
@@ -6,6 +6,7 @@ import { toast } from "sonner"
 import { Input } from "@/components/ui/input"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type HttpCategory = "1xx" | "2xx" | "3xx" | "4xx" | "5xx"
 
@@ -112,7 +113,7 @@ export function HttpStatusCodesPage() {
     }
 
     return (
-        <div className="flex flex-col h-full">
+        <ToolPageContainer className="flex flex-col h-full">
             <div className="flex items-center justify-between border-b px-4 py-3 gap-2 flex-wrap">
                 <div className="flex items-center gap-2">
                     <Globe className="h-5 w-5 text-primary" />
@@ -159,6 +160,6 @@ export function HttpStatusCodesPage() {
                     </div>
                 ))}
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/id-generator/logic.test.ts b/src/features/tools/id-generator/logic.test.ts
new file mode 100644
index 00000000..8bea62fb
--- /dev/null
+++ b/src/features/tools/id-generator/logic.test.ts
@@ -0,0 +1,169 @@
+import { describe, expect, it } from "vitest"
+import {
+    NANOID_DEFAULT_ALPHABET,
+    extractULIDTimestamp,
+    extractUUIDv7Timestamp,
+    generateIdBatch,
+    generateNanoID,
+    generateULID,
+    generateUUIDv7,
+    validateIdGeneratorSettings,
+    validateNanoIdAlphabet,
+    type RandomFill,
+    type RawIdGeneratorSettings,
+    type ValidatedIdGeneratorSettings,
+} from "./logic"
+
+function rawSettings(overrides: Partial<RawIdGeneratorSettings> = {}): RawIdGeneratorSettings {
+    return {
+        quantity: "5",
+        idType: "nanoid",
+        caseFormat: "lowercase",
+        nanoidSize: "21",
+        nanoidAlphabet: NANOID_DEFAULT_ALPHABET,
+        ...overrides,
+    }
+}
+
+function makeAlphabet(length: number): string {
+    return Array.from({ length }, (_, index) => String.fromCodePoint(0x1000 + index)).join("")
+}
+
+function sequenceFill(...values: number[]): RandomFill {
+    let offset = 0
+    return (bytes) => {
+        for (let i = 0; i < bytes.length; i++) {
+            bytes[i] = values[offset % values.length]
+            offset += 1
+        }
+    }
+}
+
+const zeroFill: RandomFill = (bytes) => bytes.fill(0)
+
+describe("id-generator validation", () => {
+    it("enforces alphabet boundaries in Unicode code points", () => {
+        expect(validateNanoIdAlphabet("")).toEqual({ ok: false, code: "error_alphabet_too_short" })
+        expect(validateNanoIdAlphabet("a")).toEqual({ ok: false, code: "error_alphabet_too_short" })
+        expect(validateNanoIdAlphabet(makeAlphabet(2))).toMatchObject({ ok: true })
+        expect(validateNanoIdAlphabet(makeAlphabet(255))).toMatchObject({ ok: true })
+        expect(validateNanoIdAlphabet(makeAlphabet(256))).toMatchObject({ ok: true })
+        expect(validateNanoIdAlphabet(makeAlphabet(257))).toEqual({ ok: false, code: "error_alphabet_too_long" })
+    })
+
+    it("rejects duplicate symbols and unpaired surrogates", () => {
+        expect(validateNanoIdAlphabet("abca")).toEqual({ ok: false, code: "error_alphabet_duplicate" })
+        expect(validateNanoIdAlphabet("a\ud800b")).toEqual({ ok: false, code: "error_alphabet_invalid_unicode" })
+        expect(validateNanoIdAlphabet("😀🚀")).toEqual({ ok: true, symbols: ["😀", "🚀"] })
+    })
+
+    it.each(["", "0", "-1", "1.5", "NaN", "Infinity", "1001"])(
+        "rejects invalid batch quantity %j",
+        (quantity) => {
+            const result = validateIdGeneratorSettings(rawSettings({ quantity }))
+            expect(result).toEqual({ ok: false, errors: { quantity: "error_quantity_invalid" } })
+        },
+    )
+
+    it.each(["", "0", "-1", "1.5", "NaN", "Infinity", "257"])(
+        "rejects invalid NanoID size %j",
+        (nanoidSize) => {
+            const result = validateIdGeneratorSettings(rawSettings({ nanoidSize }))
+            expect(result).toEqual({ ok: false, errors: { nanoidSize: "error_nanoid_size_invalid" } })
+        },
+    )
+
+    it("accepts numeric endpoints and ignores NanoID-only fields for other ID types", () => {
+        expect(validateIdGeneratorSettings(rawSettings({ quantity: "1", nanoidSize: "1" }))).toMatchObject({ ok: true })
+        expect(validateIdGeneratorSettings(rawSettings({ quantity: "1000", nanoidSize: "256" }))).toMatchObject({ ok: true })
+        expect(validateIdGeneratorSettings(rawSettings({
+            idType: "uuid-v4",
+            nanoidSize: "",
+            nanoidAlphabet: "",
+        }))).toMatchObject({ ok: true })
+    })
+})
+
+describe("NanoID generation", () => {
+    it("uses rejection sampling for non-power-of-two alphabets", () => {
+        expect(generateNanoID(3, "abc", sequenceFill(3, 2, 1, 0, 3))).toBe("cba")
+    })
+
+    it("rejects byte 255 for a 255-symbol alphabet", () => {
+        const alphabet = makeAlphabet(255)
+        const symbols = Array.from(alphabet)
+
+        expect(generateNanoID(1, alphabet, sequenceFill(255, 254))).toBe(symbols[254])
+    })
+
+    it("can select the final symbol from a 256-symbol alphabet", () => {
+        const alphabet = makeAlphabet(256)
+        const symbols = Array.from(alphabet)
+
+        expect(generateNanoID(1, alphabet, sequenceFill(255, 0))).toBe(symbols[255])
+    })
+
+    it("counts and emits non-BMP symbols as complete code points", () => {
+        const id = generateNanoID(4, "😀🚀", sequenceFill(0, 1, 0, 1))
+
+        expect(id).toBe("😀🚀😀🚀")
+        expect(Array.from(id)).toHaveLength(4)
+    })
+
+    it("defensively rejects invalid direct generation arguments", () => {
+        expect(() => generateNanoID(0, "ab", zeroFill)).toThrow("NanoID size")
+        expect(() => generateNanoID(1, "", zeroFill)).toThrow("error_alphabet_too_short")
+        expect(() => generateNanoID(1, "aab", zeroFill)).toThrow("error_alphabet_duplicate")
+    })
+})
+
+describe("ID algorithm regressions", () => {
+    it("generates and extracts a valid UUID v7 timestamp", () => {
+        const timestamp = 0x0123456789ab
+        const uuid = generateUUIDv7(timestamp, zeroFill)
+
+        expect(uuid).toBe("01234567-89ab-7000-8000-000000000000")
+        expect(extractUUIDv7Timestamp(uuid)?.getTime()).toBe(timestamp)
+        expect(extractUUIDv7Timestamp("01234567-89ab-7000-0000-000000000000")).toBeNull()
+        expect(extractUUIDv7Timestamp("not-a-uuid")).toBeNull()
+    })
+
+    it("generates and extracts a valid ULID timestamp", () => {
+        const timestamp = 1_700_000_000_123
+        const ulid = generateULID(timestamp, zeroFill)
+
+        expect(ulid).toMatch(/^[0-7][0-9A-HJKMNP-TV-Z]{25}$/)
+        expect(extractULIDTimestamp(ulid)?.getTime()).toBe(timestamp)
+        expect(extractULIDTimestamp(`8${"0".repeat(25)}`)).toBeNull()
+        expect(extractULIDTimestamp(`${"0".repeat(25)}I`)).toBeNull()
+    })
+
+    it("keeps UUID v4 batch generation and case formatting stable", () => {
+        const settings: ValidatedIdGeneratorSettings = {
+            quantity: 2,
+            idType: "uuid-v4",
+            caseFormat: "uppercase",
+            nanoidSize: 21,
+            nanoidAlphabet: NANOID_DEFAULT_ALPHABET,
+        }
+
+        expect(generateIdBatch(settings, {
+            uuidV4: () => "aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee",
+        })).toEqual([
+            "AAAAAAAA-BBBB-4CCC-8DDD-EEEEEEEEEEEE",
+            "AAAAAAAA-BBBB-4CCC-8DDD-EEEEEEEEEEEE",
+        ])
+    })
+
+    it("rejects invalid batch settings before allocating or looping", () => {
+        const settings: ValidatedIdGeneratorSettings = {
+            quantity: Number.NaN,
+            idType: "nanoid",
+            caseFormat: "lowercase",
+            nanoidSize: 21,
+            nanoidAlphabet: NANOID_DEFAULT_ALPHABET,
+        }
+
+        expect(() => generateIdBatch(settings, { randomFill: zeroFill })).toThrow("Quantity")
+    })
+})
diff --git a/src/features/tools/id-generator/logic.ts b/src/features/tools/id-generator/logic.ts
new file mode 100644
index 00000000..23c9224f
--- /dev/null
+++ b/src/features/tools/id-generator/logic.ts
@@ -0,0 +1,303 @@
+import { v4 as uuidv4 } from "uuid"
+
+export const NANOID_DEFAULT_ALPHABET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_-"
+export const MIN_BATCH_QUANTITY = 1
+export const MAX_BATCH_QUANTITY = 1000
+export const MIN_NANOID_SIZE = 1
+export const MAX_NANOID_SIZE = 256
+export const MIN_NANOID_ALPHABET_SIZE = 2
+export const MAX_NANOID_ALPHABET_SIZE = 256
+
+const ULID_ENCODING = "0123456789ABCDEFGHJKMNPQRSTVWXYZ"
+const MAX_48_BIT_TIMESTAMP = 0xffffffffffff
+
+export type IDType = "uuid-v4" | "uuid-v7" | "ulid" | "nanoid"
+export type IDCaseFormat = "lowercase" | "uppercase"
+export type IdGeneratorField = "quantity" | "nanoidSize" | "nanoidAlphabet"
+export type IdGeneratorErrorCode =
+    | "error_quantity_invalid"
+    | "error_nanoid_size_invalid"
+    | "error_alphabet_too_short"
+    | "error_alphabet_too_long"
+    | "error_alphabet_duplicate"
+    | "error_alphabet_invalid_unicode"
+
+export type IdGeneratorFieldErrors = Partial<Record<IdGeneratorField, IdGeneratorErrorCode>>
+
+export interface RawIdGeneratorSettings {
+    quantity: string
+    idType: IDType
+    caseFormat: IDCaseFormat
+    nanoidSize: string
+    nanoidAlphabet: string
+}
+
+export interface ValidatedIdGeneratorSettings {
+    quantity: number
+    idType: IDType
+    caseFormat: IDCaseFormat
+    nanoidSize: number
+    nanoidAlphabet: string
+}
+
+export type IdGeneratorValidationResult =
+    | { ok: true; value: ValidatedIdGeneratorSettings; errors: IdGeneratorFieldErrors }
+    | { ok: false; errors: IdGeneratorFieldErrors }
+
+export type RandomFill = (bytes: Uint8Array) => void
+
+export interface IdGeneratorDependencies {
+    now?: () => number
+    randomFill?: RandomFill
+    uuidV4?: () => string
+}
+
+export type NanoIdAlphabetValidation =
+    | { ok: true; symbols: string[] }
+    | { ok: false; code: Extract<IdGeneratorErrorCode,
+        | "error_alphabet_too_short"
+        | "error_alphabet_too_long"
+        | "error_alphabet_duplicate"
+        | "error_alphabet_invalid_unicode"> }
+
+function defaultRandomFill(bytes: Uint8Array): void {
+    crypto.getRandomValues(bytes)
+}
+
+function parseBoundedInteger(value: string, min: number, max: number): number | null {
+    if (value.trim() === "") return null
+
+    const parsed = Number(value)
+    if (!Number.isFinite(parsed) || !Number.isInteger(parsed) || parsed < min || parsed > max) {
+        return null
+    }
+
+    return parsed
+}
+
+function isUnicodeScalar(symbol: string): boolean {
+    const codePoint = symbol.codePointAt(0)
+    return codePoint !== undefined && (codePoint < 0xd800 || codePoint > 0xdfff)
+}
+
+export function validateNanoIdAlphabet(alphabet: string): NanoIdAlphabetValidation {
+    const symbols = Array.from(alphabet)
+
+    if (symbols.some((symbol) => !isUnicodeScalar(symbol))) {
+        return { ok: false, code: "error_alphabet_invalid_unicode" }
+    }
+    if (symbols.length < MIN_NANOID_ALPHABET_SIZE) {
+        return { ok: false, code: "error_alphabet_too_short" }
+    }
+    if (symbols.length > MAX_NANOID_ALPHABET_SIZE) {
+        return { ok: false, code: "error_alphabet_too_long" }
+    }
+    if (new Set(symbols).size !== symbols.length) {
+        return { ok: false, code: "error_alphabet_duplicate" }
+    }
+
+    return { ok: true, symbols }
+}
+
+export function validateIdGeneratorSettings(raw: RawIdGeneratorSettings): IdGeneratorValidationResult {
+    const errors: IdGeneratorFieldErrors = {}
+    const quantity = parseBoundedInteger(raw.quantity, MIN_BATCH_QUANTITY, MAX_BATCH_QUANTITY)
+
+    if (quantity === null) {
+        errors.quantity = "error_quantity_invalid"
+    }
+
+    let nanoidSize = 21
+    if (raw.idType === "nanoid") {
+        const parsedSize = parseBoundedInteger(raw.nanoidSize, MIN_NANOID_SIZE, MAX_NANOID_SIZE)
+        if (parsedSize === null) {
+            errors.nanoidSize = "error_nanoid_size_invalid"
+        } else {
+            nanoidSize = parsedSize
+        }
+
+        const alphabetValidation = validateNanoIdAlphabet(raw.nanoidAlphabet)
+        if (!alphabetValidation.ok) {
+            errors.nanoidAlphabet = alphabetValidation.code
+        }
+    }
+
+    if (Object.keys(errors).length > 0 || quantity === null) {
+        return { ok: false, errors }
+    }
+
+    return {
+        ok: true,
+        errors,
+        value: {
+            quantity,
+            idType: raw.idType,
+            caseFormat: raw.caseFormat,
+            nanoidSize,
+            nanoidAlphabet: raw.nanoidAlphabet,
+        },
+    }
+}
+
+function assertTimestamp(timestamp: number): void {
+    if (!Number.isSafeInteger(timestamp) || timestamp < 0 || timestamp > MAX_48_BIT_TIMESTAMP) {
+        throw new RangeError("Timestamp must be a non-negative 48-bit integer.")
+    }
+}
+
+function byteToHex(byte: number): string {
+    return byte.toString(16).padStart(2, "0")
+}
+
+export function generateUUIDv7(timestamp: number = Date.now(), randomFill: RandomFill = defaultRandomFill): string {
+    assertTimestamp(timestamp)
+
+    const timestampHex = timestamp.toString(16).padStart(12, "0")
+    const randomBytes = new Uint8Array(10)
+    randomFill(randomBytes)
+    randomBytes[0] = (randomBytes[0] & 0x0f) | 0x70
+    randomBytes[2] = (randomBytes[2] & 0x3f) | 0x80
+    const randomHex = Array.from(randomBytes, byteToHex).join("")
+
+    return (
+        `${timestampHex.slice(0, 8)}-${timestampHex.slice(8, 12)}-` +
+        `${randomHex.slice(0, 4)}-${randomHex.slice(4, 8)}-${randomHex.slice(8, 20)}`
+    )
+}
+
+export function extractUUIDv7Timestamp(uuid: string): Date | null {
+    if (!/^[0-9a-f]{8}-[0-9a-f]{4}-7[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(uuid)) {
+        return null
+    }
+
+    const timestamp = Number.parseInt(uuid.replace(/-/g, "").slice(0, 12), 16)
+    return new Date(timestamp)
+}
+
+export function generateULID(timestamp: number = Date.now(), randomFill: RandomFill = defaultRandomFill): string {
+    assertTimestamp(timestamp)
+
+    let timePart = ""
+    let remainingTime = timestamp
+    for (let i = 0; i < 10; i++) {
+        timePart = ULID_ENCODING[remainingTime % 32] + timePart
+        remainingTime = Math.floor(remainingTime / 32)
+    }
+
+    const randomBytes = new Uint8Array(10)
+    randomFill(randomBytes)
+    let randomPart = ""
+    let buffer = 0
+    let bufferedBits = 0
+
+    for (const byte of randomBytes) {
+        buffer = (buffer << 8) | byte
+        bufferedBits += 8
+
+        while (bufferedBits >= 5) {
+            bufferedBits -= 5
+            randomPart += ULID_ENCODING[(buffer >>> bufferedBits) & 0x1f]
+            buffer &= (1 << bufferedBits) - 1
+        }
+    }
+
+    return timePart + randomPart
+}
+
+export function extractULIDTimestamp(ulid: string): Date | null {
+    if (!/^[0-7][0-9A-HJKMNP-TV-Z]{25}$/i.test(ulid)) return null
+
+    let timestamp = 0
+    for (let i = 0; i < 10; i++) {
+        timestamp = timestamp * 32 + ULID_ENCODING.indexOf(ulid[i].toUpperCase())
+    }
+
+    return new Date(timestamp)
+}
+
+function assertNanoIdSize(size: number): void {
+    if (!Number.isInteger(size) || size < MIN_NANOID_SIZE || size > MAX_NANOID_SIZE) {
+        throw new RangeError("NanoID size must be an integer from 1 to 256.")
+    }
+}
+
+function generateNanoIdFromSymbols(size: number, symbols: string[], randomFill: RandomFill): string {
+    const mask = (1 << Math.ceil(Math.log2(symbols.length))) - 1
+    const step = Math.ceil((1.6 * mask * size) / symbols.length)
+    const output: string[] = []
+
+    while (output.length < size) {
+        const bytes = new Uint8Array(step)
+        randomFill(bytes)
+
+        for (const byte of bytes) {
+            const symbolIndex = byte & mask
+            if (symbolIndex < symbols.length) {
+                output.push(symbols[symbolIndex])
+                if (output.length === size) break
+            }
+        }
+    }
+
+    return output.join("")
+}
+
+export function generateNanoID(
+    size: number = 21,
+    alphabet: string = NANOID_DEFAULT_ALPHABET,
+    randomFill: RandomFill = defaultRandomFill,
+): string {
+    assertNanoIdSize(size)
+    const alphabetValidation = validateNanoIdAlphabet(alphabet)
+    if (!alphabetValidation.ok) {
+        throw new RangeError(alphabetValidation.code)
+    }
+
+    return generateNanoIdFromSymbols(size, alphabetValidation.symbols, randomFill)
+}
+
+export function generateIdBatch(
+    settings: ValidatedIdGeneratorSettings,
+    dependencies: IdGeneratorDependencies = {},
+): string[] {
+    if (!Number.isInteger(settings.quantity) || settings.quantity < MIN_BATCH_QUANTITY || settings.quantity > MAX_BATCH_QUANTITY) {
+        throw new RangeError("Quantity must be an integer from 1 to 1000.")
+    }
+
+    const randomFill = dependencies.randomFill ?? defaultRandomFill
+    const now = dependencies.now ?? Date.now
+    const createUuidV4 = dependencies.uuidV4 ?? uuidv4
+    let nanoIdSymbols: string[] | null = null
+
+    if (settings.idType === "nanoid") {
+        assertNanoIdSize(settings.nanoidSize)
+        const alphabetValidation = validateNanoIdAlphabet(settings.nanoidAlphabet)
+        if (!alphabetValidation.ok) {
+            throw new RangeError(alphabetValidation.code)
+        }
+        nanoIdSymbols = alphabetValidation.symbols
+    }
+
+    const results: string[] = []
+    for (let i = 0; i < settings.quantity; i++) {
+        let id: string
+        switch (settings.idType) {
+            case "uuid-v4":
+                id = createUuidV4()
+                break
+            case "uuid-v7":
+                id = generateUUIDv7(now(), randomFill)
+                break
+            case "ulid":
+                id = generateULID(now(), randomFill)
+                break
+            case "nanoid":
+                id = generateNanoIdFromSymbols(settings.nanoidSize, nanoIdSymbols as string[], randomFill)
+                break
+        }
+
+        results.push(settings.caseFormat === "uppercase" && settings.idType !== "nanoid" ? id.toUpperCase() : id)
+    }
+
+    return results
+}
diff --git a/src/features/tools/id-generator/page.tsx b/src/features/tools/id-generator/page.tsx
index e02e6618..ebcabce3 100644
--- a/src/features/tools/id-generator/page.tsx
+++ b/src/features/tools/id-generator/page.tsx
@@ -16,166 +16,77 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
-import { v4 as uuidv4 } from "uuid"
-
-function byteToHex(byte: number): string {
-    return byte.toString(16).padStart(2, "0")
-}
-
-// Clean UUID v7 implementation
-function generateUUIDv7(): string {
-    const timestamp = Date.now()
-    const timestampHex = timestamp.toString(16).padStart(12, "0")
-
-    const randomBytes = crypto.getRandomValues(new Uint8Array(10))
-    // Set version to 7 (0111)
-    randomBytes[0] = (randomBytes[0] & 0x0f) | 0x70
-    // Set variant to 10xx
-    randomBytes[2] = (randomBytes[2] & 0x3f) | 0x80
-
-    const randHex = Array.from(randomBytes).map((b) => byteToHex(b)).join("")
-
-    return (
-        timestampHex.slice(0, 8) + "-" +
-        timestampHex.slice(8, 12) + "-" +
-        randHex.slice(0, 4) + "-" +
-        randHex.slice(4, 8) + "-" +
-        randHex.slice(8, 20)
-    )
-}
-
-// ─── ULID ───────────────────────────────────────────────────────────────────
-const ULID_ENCODING = "0123456789ABCDEFGHJKMNPQRSTVWXYZ"
-
-function generateULID(): string {
-    const now = Date.now()
-    // 10-char timestamp (48 bits, base32)
-    let timePart = ""
-    let t = now
-    for (let i = 0; i < 10; i++) {
-        timePart = ULID_ENCODING[t % 32] + timePart
-        t = Math.floor(t / 32)
-    }
-    // 16-char randomness (80 bits, base32)
-    const randBytes = crypto.getRandomValues(new Uint8Array(10))
-    let randPart = ""
-    // Process 80 bits in groups of 5
-    let bits = 0
-    let numBits = 0
-    let byteIdx = 0
-    for (let i = 0; i < 16; i++) {
-        while (numBits < 5 && byteIdx < 10) {
-            bits = (bits << 8) | randBytes[byteIdx++]
-            numBits += 8
-        }
-        const idx = (bits >> (numBits - 5)) & 0x1f
-        randPart += ULID_ENCODING[idx]
-        numBits -= 5
-    }
-    return timePart + randPart
-}
-
-function extractULIDTimestamp(ulid: string): Date | null {
-    if (ulid.length !== 26) return null
-    let timestamp = 0
-    for (let i = 0; i < 10; i++) {
-        const idx = ULID_ENCODING.indexOf(ulid[i].toUpperCase())
-        if (idx === -1) return null
-        timestamp = timestamp * 32 + idx
-    }
-    return new Date(timestamp)
-}
-
-// ─── NanoID ─────────────────────────────────────────────────────────────────
-const NANOID_DEFAULT_ALPHABET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_-"
-
-function generateNanoID(size: number = 21, alphabet: string = NANOID_DEFAULT_ALPHABET): string {
-    const mask = (2 << (31 - Math.clz32((alphabet.length - 1) | 1))) - 1
-    const step = Math.ceil((1.6 * mask * size) / alphabet.length)
-    let id = ""
-    while (id.length < size) {
-        const bytes = crypto.getRandomValues(new Uint8Array(step))
-        for (let i = 0; i < step && id.length < size; i++) {
-            const charIdx = bytes[i] & mask
-            if (charIdx < alphabet.length) {
-                id += alphabet[charIdx]
-            }
-        }
-    }
-    return id
-}
-
-// ─── UUID v7 timestamp extraction ──────────────────────────────────────────
-function extractUUIDv7Timestamp(uuid: string): Date | null {
-    const clean = uuid.replace(/-/g, "")
-    if (clean.length !== 32) return null
-    // Version check: nibble at position 12 should be '7'
-    if (clean[12] !== "7") return null
-    const timestampHex = clean.slice(0, 12)
-    const timestamp = parseInt(timestampHex, 16)
-    if (isNaN(timestamp)) return null
-    return new Date(timestamp)
-}
-
-type IDType = "uuid-v4" | "uuid-v7" | "ulid" | "nanoid"
+import {
+    NANOID_DEFAULT_ALPHABET,
+    extractULIDTimestamp,
+    extractUUIDv7Timestamp,
+    generateIdBatch,
+    validateIdGeneratorSettings,
+    type IDCaseFormat,
+    type IDType,
+} from "./logic"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function IdGeneratorPage() {
     const { t } = useLang()
     const toolT = t.tools["id_generator"] as Record<string, string>
     const [ids, setIds] = React.useState<string[]>([])
-    const [quantity, setQuantity] = React.useState(5)
+    const [quantity, setQuantity] = React.useState("5")
     const [idType, setIdType] = React.useState<IDType>("uuid-v4")
-    const [nanoidSize, setNanoidSize] = React.useState(21)
+    const [nanoidSize, setNanoidSize] = React.useState("21")
     const [nanoidAlphabet, setNanoidAlphabet] = React.useState(NANOID_DEFAULT_ALPHABET)
-    const [caseFormat, setCaseFormat] = React.useState<"lowercase" | "uppercase">("lowercase")
+    const [caseFormat, setCaseFormat] = React.useState<IDCaseFormat>("lowercase")
+    const [generationFailed, setGenerationFailed] = React.useState(false)
+
+    const validation = React.useMemo(() => validateIdGeneratorSettings({
+        quantity,
+        idType,
+        caseFormat,
+        nanoidSize,
+        nanoidAlphabet,
+    }), [quantity, idType, caseFormat, nanoidSize, nanoidAlphabet])
 
     const generate = React.useCallback(() => {
-        const qty = Math.min(Math.max(1, quantity), 1000)
-        const results: string[] = []
-        for (let i = 0; i < qty; i++) {
-            let id = ""
-            switch (idType) {
-                case "uuid-v4":
-                    id = uuidv4()
-                    break
-                case "uuid-v7":
-                    id = generateUUIDv7()
-                    break
-                case "ulid":
-                    id = generateULID()
-                    break
-                case "nanoid":
-                    id = generateNanoID(nanoidSize, nanoidAlphabet)
-                    break
-            }
-            if (caseFormat === "uppercase" && idType !== "nanoid") {
-                id = id.toUpperCase()
-            }
-            results.push(id)
+        if (!validation.ok) {
+            setIds([])
+            setGenerationFailed(false)
+            return
         }
-        setIds(results)
-    }, [quantity, idType, caseFormat, nanoidSize, nanoidAlphabet])
+
+        try {
+            setIds(generateIdBatch(validation.value))
+            setGenerationFailed(false)
+        } catch {
+            setIds([])
+            setGenerationFailed(true)
+        }
+    }, [validation])
 
     React.useEffect(() => {
         generate()
     }, [generate])
 
+    const outputIds = React.useMemo(
+        () => validation.ok && !generationFailed ? ids : [],
+        [generationFailed, ids, validation.ok],
+    )
+
     const handleCopyAll = async () => {
-        if (ids.length === 0) return
-        const result = await safeClipboardWrite(ids.join("\n"))
+        if (outputIds.length === 0) return
+        const result = await safeClipboardWrite(outputIds.join("\n"))
         if (!result.ok) {
             toast.error(t.common.copy_failed)
             return
         }
         toast.success(t.common.copied, {
-            description: toolT.copied_desc.replace("{count}", String(ids.length)),
+            description: toolT.copied_desc.replace("{count}", String(outputIds.length)),
         })
     }
 
     // Show timestamp for UUID v7 or ULID (first ID only)
     const timestampInfo = React.useMemo(() => {
-        if (ids.length === 0) return null
-        const firstId = ids[0]
+        if (outputIds.length === 0) return null
+        const firstId = outputIds[0]
         if (idType === "uuid-v7") {
             const date = extractUUIDv7Timestamp(firstId)
             return date ? toolT.embedded_timestamp.replace("{value}", date.toISOString()) : null
@@ -185,10 +96,14 @@ export function IdGeneratorPage() {
             return date ? toolT.embedded_timestamp.replace("{value}", date.toISOString()) : null
         }
         return null
-    }, [ids, idType, toolT.embedded_timestamp])
+    }, [outputIds, idType, toolT.embedded_timestamp])
+
+    const quantityError = validation.errors.quantity ? toolT[validation.errors.quantity] : null
+    const nanoidSizeError = validation.errors.nanoidSize ? toolT[validation.errors.nanoidSize] : null
+    const nanoidAlphabetError = validation.errors.nanoidAlphabet ? toolT[validation.errors.nanoidAlphabet] : null
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -200,7 +115,7 @@ export function IdGeneratorPage() {
                     </p>
                 </div>
                 <div className="flex flex-wrap items-center gap-2">
-                    <Button size="sm" onClick={generate}>
+                    <Button size="sm" onClick={generate} disabled={!validation.ok}>
                         <RefreshCw className="mr-2 h-4 w-4" />
                         {toolT.regenerate_action}
                     </Button>
@@ -214,9 +129,9 @@ export function IdGeneratorPage() {
                         <h3 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground">{toolT.settings_heading}</h3>
 
                         <div className="space-y-2">
-                            <label className="text-sm font-medium">{toolT.id_type_label}</label>
+                            <label htmlFor="id-generator-type" className="text-sm font-medium">{toolT.id_type_label}</label>
                             <Select value={idType} onValueChange={(v) => setIdType(v as IDType)}>
-                                <SelectTrigger><SelectValue /></SelectTrigger>
+                                <SelectTrigger id="id-generator-type" aria-label={toolT.id_type_label}><SelectValue /></SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="uuid-v4">{toolT.option_uuid_v4}</SelectItem>
                                     <SelectItem value="uuid-v7">{toolT.option_uuid_v7}</SelectItem>
@@ -227,21 +142,30 @@ export function IdGeneratorPage() {
                         </div>
 
                         <div className="space-y-2">
-                            <label className="text-sm font-medium">{toolT.quantity_label}</label>
+                            <label htmlFor="id-generator-quantity" className="text-sm font-medium">{toolT.quantity_label}</label>
                             <Input
+                                id="id-generator-quantity"
                                 type="number"
                                 min={1}
                                 max={1000}
+                                step={1}
                                 value={quantity}
-                                onChange={(e) => setQuantity(Number(e.target.value))}
+                                onChange={(e) => setQuantity(e.target.value)}
+                                aria-invalid={quantityError ? "true" : undefined}
+                                aria-describedby={quantityError ? "id-generator-quantity-error" : undefined}
                             />
+                            {quantityError && (
+                                <p id="id-generator-quantity-error" role="alert" className="text-sm text-destructive">
+                                    {quantityError}
+                                </p>
+                            )}
                         </div>
 
                         {idType !== "nanoid" && (
                             <div className="space-y-2">
-                                <label className="text-sm font-medium">{toolT.case_label}</label>
-                                <Select value={caseFormat} onValueChange={(v) => setCaseFormat(v as "lowercase" | "uppercase")}>
-                                    <SelectTrigger><SelectValue /></SelectTrigger>
+                                <label htmlFor="id-generator-case" className="text-sm font-medium">{toolT.case_label}</label>
+                                <Select value={caseFormat} onValueChange={(v) => setCaseFormat(v as IDCaseFormat)}>
+                                    <SelectTrigger id="id-generator-case" aria-label={toolT.case_label}><SelectValue /></SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="lowercase">{toolT.case_lowercase}</SelectItem>
                                         <SelectItem value="uppercase">{toolT.case_uppercase}</SelectItem>
@@ -253,22 +177,39 @@ export function IdGeneratorPage() {
                         {idType === "nanoid" && (
                             <>
                                 <div className="space-y-2">
-                                    <label className="text-sm font-medium">{toolT.length_label}</label>
+                                    <label htmlFor="id-generator-nanoid-size" className="text-sm font-medium">{toolT.length_label}</label>
                                     <Input
+                                        id="id-generator-nanoid-size"
                                         type="number"
                                         min={1}
                                         max={256}
+                                        step={1}
                                         value={nanoidSize}
-                                        onChange={(e) => setNanoidSize(Number(e.target.value))}
+                                        onChange={(e) => setNanoidSize(e.target.value)}
+                                        aria-invalid={nanoidSizeError ? "true" : undefined}
+                                        aria-describedby={nanoidSizeError ? "id-generator-nanoid-size-error" : undefined}
                                     />
+                                    {nanoidSizeError && (
+                                        <p id="id-generator-nanoid-size-error" role="alert" className="text-sm text-destructive">
+                                            {nanoidSizeError}
+                                        </p>
+                                    )}
                                 </div>
                                 <div className="space-y-2">
-                                    <label className="text-sm font-medium">{toolT.alphabet_label}</label>
+                                    <label htmlFor="id-generator-nanoid-alphabet" className="text-sm font-medium">{toolT.alphabet_label}</label>
                                     <Input
+                                        id="id-generator-nanoid-alphabet"
                                         className="font-mono text-xs"
                                         value={nanoidAlphabet}
                                         onChange={(e) => setNanoidAlphabet(e.target.value)}
+                                        aria-invalid={nanoidAlphabetError ? "true" : undefined}
+                                        aria-describedby={nanoidAlphabetError ? "id-generator-nanoid-alphabet-error" : undefined}
                                     />
+                                    {nanoidAlphabetError && (
+                                        <p id="id-generator-nanoid-alphabet-error" role="alert" className="text-sm text-destructive">
+                                            {nanoidAlphabetError}
+                                        </p>
+                                    )}
                                 </div>
                             </>
                         )}
@@ -290,20 +231,32 @@ export function IdGeneratorPage() {
                 <div className="md:col-span-8 lg:col-span-9 flex flex-col border rounded-lg bg-card overflow-hidden shadow-sm">
                     <div className="tool-pane-header tool-pane-header-between">
                         <div className="flex items-center gap-3">
-                            <span>{toolT.generated_heading} ({ids.length})</span>
+                            <span>{toolT.generated_heading} ({outputIds.length})</span>
                             {timestampInfo && (
                                 <span className="text-xs text-muted-foreground font-normal">{timestampInfo}</span>
                             )}
                         </div>
-                        <Button variant="ghost" size="sm" className="h-8 gap-2" onClick={() => void handleCopyAll()}>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 gap-2"
+                            onClick={() => void handleCopyAll()}
+                            disabled={!validation.ok || generationFailed || outputIds.length === 0}
+                        >
                             <Copy className="h-4 w-4" />
                             {t.common.copy_all}
                         </Button>
                     </div>
+                    {generationFailed && (
+                        <div role="alert" className="border-b border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+                            {toolT.error_generation_failed}
+                        </div>
+                    )}
                     <div className="flex-1 p-0">
                         <Textarea
+                            aria-label={toolT.generated_heading}
                             className="h-full min-h-[400px] w-full resize-none border-0 focus-visible:ring-1 focus-visible:ring-ring/50 p-6 font-mono text-sm leading-8 text-foreground"
-                            value={ids.join("\n")}
+                            value={outputIds.join("\n")}
                             readOnly
                             spellCheck={false}
                         />
@@ -312,6 +265,6 @@ export function IdGeneratorPage() {
             </div>
 
             <RelatedTools toolKey="id_generator" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/image-average-color-finder/page.tsx b/src/features/tools/image-average-color-finder/page.tsx
index b20c8aa4..6799a493 100644
--- a/src/features/tools/image-average-color-finder/page.tsx
+++ b/src/features/tools/image-average-color-finder/page.tsx
@@ -4,14 +4,16 @@ import * as React from "react"
 import { Copy, Download, Eraser, Image as ImageIcon, TestTube2, Upload } from "lucide-react"
 import { toast } from "sonner"
 import { useLang } from "@/core/i18n/lang-provider"
+import { FILE_INPUT_POLICIES, formatFilePolicyLimit, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
 import { averageHexFromPixels, averageRgbFromPixels, rgbToString } from "@/core/utils/image-color-utils"
 import { createDemoImageDataUrl, fileToDataUrl, getImageDataForAnalysis } from "@/core/utils/image-canvas-utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
-const MAX_FILE_SIZE = 10 * 1024 * 1024
+const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-compact"]
 
 export function ImageAverageColorFinderPage() {
     const { t } = useLang()
@@ -47,17 +49,16 @@ export function ImageAverageColorFinderPage() {
     }
 
     const handleFile = async (file: File) => {
-        if (!file.type.startsWith("image/")) {
-            toast.error(t.common.image_file_required)
-            return
-        }
-        if (file.size > MAX_FILE_SIZE) {
-            toast.error((t.common.image_file_too_large).replace("{size}", "10MB"))
+        const validation = validateFileAgainstPolicy(file, IMAGE_FILE_POLICY)
+        if (!validation.ok) {
+            toast.error(validation.reason === "too_large"
+                ? t.common.image_file_too_large.replace("{size}", formatFilePolicyLimit(IMAGE_FILE_POLICY))
+                : t.common.image_file_required)
             return
         }
 
         try {
-            const dataUrl = await fileToDataUrl(file)
+            const dataUrl = await fileToDataUrl(file, IMAGE_FILE_POLICY)
             setImageSrc(dataUrl)
             setFileName(file.name)
             await analyzeFromSource(dataUrl)
@@ -124,7 +125,7 @@ export function ImageAverageColorFinderPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -162,10 +163,11 @@ export function ImageAverageColorFinderPage() {
                         <input
                             ref={fileInputRef}
                             type="file"
-                            accept="image/*"
+                            accept={IMAGE_FILE_POLICY.accept}
                             className="hidden"
                             onChange={(event) => {
-                                const file = event.target.files?.[0]
+                                const file = event.currentTarget.files?.[0]
+                                event.currentTarget.value = ""
                                 if (file) void handleFile(file)
                             }}
                         />
@@ -221,6 +223,6 @@ export function ImageAverageColorFinderPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/image-base64/page.tsx b/src/features/tools/image-base64/page.tsx
index 7c4248e9..9a3cab35 100644
--- a/src/features/tools/image-base64/page.tsx
+++ b/src/features/tools/image-base64/page.tsx
@@ -10,6 +10,7 @@ import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { fileToDataUrl } from "@/core/utils/image-canvas-utils"
 import { parseBase64Image, sanitizeBase64 } from "@/features/tools/image-base64/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type OutputFormat =
     | "data_uri"
@@ -118,8 +119,8 @@ export function ImageBase64Page() {
             return
         }
         const mimeFromName = getMimeFromFileName(file.name)
-        const effectiveMime = file.type && file.type.startsWith("image/") ? file.type : mimeFromName
-        if (!effectiveMime || !effectiveMime.startsWith("image/")) {
+        const effectiveMime = file.type || mimeFromName
+        if (!effectiveMime) {
             toast.error(text("invalid_file_title"), {
                 description: text("invalid_file_desc"),
             })
@@ -237,7 +238,7 @@ export function ImageBase64Page() {
     ]
 
     return (
-        <div className="flex h-full flex-col">
+        <ToolPageContainer className="flex h-full flex-col">
             <div className="flex flex-col gap-3 border-b px-4 py-3">
                 <div className="flex items-center gap-2">
                     <ImageIcon className="h-5 w-5 text-primary" />
@@ -401,6 +402,6 @@ export function ImageBase64Page() {
                     </>
                 )}
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/image-caption-generator/page.tsx b/src/features/tools/image-caption-generator/page.tsx
index a651da50..b44ef64a 100644
--- a/src/features/tools/image-caption-generator/page.tsx
+++ b/src/features/tools/image-caption-generator/page.tsx
@@ -12,6 +12,7 @@ import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/fil
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { createDemoImageDataUrl, fileToDataUrl, loadImageElement, validateImageDimensions } from "@/core/utils/image-canvas-utils"
 import { FileUploadStatus, type FileUploadStatusState } from "@/features/tool-shell/file-upload-status"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type CaptionPosition = "top" | "bottom"
 
@@ -250,7 +251,7 @@ export function ImageCaptionGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -374,7 +375,7 @@ export function ImageCaptionGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/image-color-extractor/page.tsx b/src/features/tools/image-color-extractor/page.tsx
index 5478c604..6b1e3e6e 100644
--- a/src/features/tools/image-color-extractor/page.tsx
+++ b/src/features/tools/image-color-extractor/page.tsx
@@ -13,6 +13,7 @@ import { FileUploadStatus, type FileUploadStatusState } from "@/features/tool-sh
 import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { createDemoImageDataUrl, fileToDataUrl, getImageDataForAnalysis, loadPolicyCheckedImage } from "@/core/utils/image-canvas-utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-compact"]
 
@@ -170,7 +171,7 @@ export function ImageColorExtractorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -296,6 +297,6 @@ export function ImageColorExtractorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/image-color-picker/page.tsx b/src/features/tools/image-color-picker/page.tsx
index ad871332..71c9e684 100644
--- a/src/features/tools/image-color-picker/page.tsx
+++ b/src/features/tools/image-color-picker/page.tsx
@@ -11,6 +11,7 @@ import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { createDemoImageDataUrl, fileToDataUrl, loadPolicyCheckedImage } from "@/core/utils/image-canvas-utils"
 import { rgbToHex } from "@/core/utils/color-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-standard"]
 
@@ -203,7 +204,7 @@ export function ImageColorPickerPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -296,6 +297,6 @@ export function ImageColorPickerPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/image-cropper/page.tsx b/src/features/tools/image-cropper/page.tsx
index 0395894e..8c487ac9 100644
--- a/src/features/tools/image-cropper/page.tsx
+++ b/src/features/tools/image-cropper/page.tsx
@@ -14,6 +14,7 @@ import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/fil
 import { createDemoImageDataUrl, fileToDataUrl, loadPolicyCheckedImage } from "@/core/utils/image-canvas-utils"
 import { normalizeCropPercent, percentCropToPixels } from "@/core/utils/image-edit-utils"
 import { runImageEditTask } from "@/features/tool-processing/image-edit-task"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-standard"]
 
@@ -223,7 +224,7 @@ export function ImageCropperPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -354,7 +355,7 @@ export function ImageCropperPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/image-filters/page.tsx b/src/features/tools/image-filters/page.tsx
index f1b5e122..14c85899 100644
--- a/src/features/tools/image-filters/page.tsx
+++ b/src/features/tools/image-filters/page.tsx
@@ -14,6 +14,7 @@ import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/fil
 import { createDemoImageDataUrl, fileToDataUrl, loadPolicyCheckedImage } from "@/core/utils/image-canvas-utils"
 import { buildCssFilterString, type ImageFilterConfig } from "@/core/utils/image-edit-utils"
 import { runImageEditTask } from "@/features/tool-processing/image-edit-task"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-standard"]
 
@@ -194,7 +195,7 @@ export function ImageFiltersPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -340,7 +341,7 @@ export function ImageFiltersPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/image-privacy-workbench/page.tsx b/src/features/tools/image-privacy-workbench/page.tsx
index 65db9887..b5f8d04b 100644
--- a/src/features/tools/image-privacy-workbench/page.tsx
+++ b/src/features/tools/image-privacy-workbench/page.tsx
@@ -11,6 +11,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { createLocalObjectUrl, downloadObjectUrl, revokeLocalObjectUrl, stripImageMetadata } from "./browser-actions"
 import { formatMetadataScan } from "./logic"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function ImagePrivacyWorkbenchPage() {
     const { t } = useLang()
@@ -77,7 +78,7 @@ export function ImagePrivacyWorkbenchPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-6">
+        <ToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -137,6 +138,6 @@ export function ImagePrivacyWorkbenchPage() {
             </div>
 
             <RelatedTools toolKey="image_privacy_workbench" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/image-resizer/page.tsx b/src/features/tools/image-resizer/page.tsx
index d4dbb504..0d03b368 100644
--- a/src/features/tools/image-resizer/page.tsx
+++ b/src/features/tools/image-resizer/page.tsx
@@ -20,6 +20,7 @@ import {
     type ResizeFitMode,
     type ResizeFormat,
 } from "@/features/tools/image-resizer/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     width: 1280,
@@ -301,7 +302,7 @@ export function ImageResizerPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -511,6 +512,6 @@ export function ImageResizerPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/instagram-filters/page.tsx b/src/features/tools/instagram-filters/page.tsx
index eaacceac..824c722d 100644
--- a/src/features/tools/instagram-filters/page.tsx
+++ b/src/features/tools/instagram-filters/page.tsx
@@ -4,6 +4,7 @@ import * as React from "react"
 import { Camera, Copy, Download, Eraser, TestTube2, Upload } from "lucide-react"
 import { toast } from "sonner"
 import { useLang } from "@/core/i18n/lang-provider"
+import { FILE_INPUT_POLICIES, formatFilePolicyLimit, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
@@ -16,8 +17,9 @@ import {
     INSTAGRAM_FILTER_PRESETS,
     type InstagramFilterPreset,
 } from "@/core/utils/instagram-tool-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
-const MAX_FILE_SIZE = 12 * 1024 * 1024
+const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-standard"]
 const DEFAULT_PRESET_ID = "clarendon"
 
 function toHexAlphaColor(hexColor: string, alpha: number): string {
@@ -122,17 +124,16 @@ export function InstagramFiltersPage() {
     }
 
     const handleFile = async (file: File) => {
-        if (!file.type.startsWith("image/")) {
-            toast.error(t.common.image_file_required)
-            return
-        }
-        if (file.size > MAX_FILE_SIZE) {
-            toast.error((t.common.image_file_too_large).replace("{size}", "12MB"))
+        const validation = validateFileAgainstPolicy(file, IMAGE_FILE_POLICY)
+        if (!validation.ok) {
+            toast.error(validation.reason === "too_large"
+                ? t.common.image_file_too_large.replace("{size}", formatFilePolicyLimit(IMAGE_FILE_POLICY))
+                : t.common.image_file_required)
             return
         }
 
         try {
-            const src = await fileToDataUrl(file)
+            const src = await fileToDataUrl(file, IMAGE_FILE_POLICY)
             setSourceImage(src)
             setFileName(file.name)
         } catch {
@@ -177,7 +178,7 @@ export function InstagramFiltersPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -209,10 +210,11 @@ export function InstagramFiltersPage() {
                             <input
                                 ref={fileInputRef}
                                 type="file"
-                                accept="image/*"
+                                accept={IMAGE_FILE_POLICY.accept}
                                 className="hidden"
                                 onChange={(event) => {
-                                    const file = event.target.files?.[0]
+                                    const file = event.currentTarget.files?.[0]
+                                    event.currentTarget.value = ""
                                     if (file) void handleFile(file)
                                 }}
                             />
@@ -336,7 +338,7 @@ export function InstagramFiltersPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/instagram-photo-downloader/page.tsx b/src/features/tools/instagram-photo-downloader/page.tsx
index d090b56b..f36588f6 100644
--- a/src/features/tools/instagram-photo-downloader/page.tsx
+++ b/src/features/tools/instagram-photo-downloader/page.tsx
@@ -18,6 +18,7 @@ import {
     getInstagramMediaFilename,
     parseInstagramMediaInput,
 } from "@/core/utils/instagram-tool-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_URL = "https://www.instagram.com/p/C5M0YfJt5gX/"
 const EXTERNAL_HOSTS = ["instagram.com"] as const
@@ -309,7 +310,7 @@ export function InstagramPhotoDownloaderPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -442,6 +443,6 @@ export function InstagramPhotoDownloaderPage() {
                     />
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/instagram-post-generator/page.tsx b/src/features/tools/instagram-post-generator/page.tsx
index 96362024..4baa4a31 100644
--- a/src/features/tools/instagram-post-generator/page.tsx
+++ b/src/features/tools/instagram-post-generator/page.tsx
@@ -4,6 +4,7 @@ import * as React from "react"
 import { Copy, Download, Eraser, Instagram, TestTube2, Upload } from "lucide-react"
 import { toast } from "sonner"
 import { useLang } from "@/core/i18n/lang-provider"
+import { FILE_INPUT_POLICIES, formatFilePolicyLimit, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
@@ -16,8 +17,9 @@ import {
     wrapLines,
     type SocialTheme,
 } from "@/core/utils/social-media-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
-const MAX_FILE_SIZE = 12 * 1024 * 1024
+const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-standard"]
 
 const DEFAULT_STATE = {
     username: "s42.lab",
@@ -193,16 +195,15 @@ export function InstagramPostGeneratorPage() {
     )
 
     const handleFile = async (file: File) => {
-        if (!file.type.startsWith("image/")) {
-            toast.error(t.common.image_file_required)
-            return
-        }
-        if (file.size > MAX_FILE_SIZE) {
-            toast.error((t.common.image_file_too_large).replace("{size}", "12MB"))
+        const validation = validateFileAgainstPolicy(file, IMAGE_FILE_POLICY)
+        if (!validation.ok) {
+            toast.error(validation.reason === "too_large"
+                ? t.common.image_file_too_large.replace("{size}", formatFilePolicyLimit(IMAGE_FILE_POLICY))
+                : t.common.image_file_required)
             return
         }
         try {
-            const dataUrl = await fileToDataUrl(file)
+            const dataUrl = await fileToDataUrl(file, IMAGE_FILE_POLICY)
             setImageSrc(dataUrl)
             setFileName(file.name)
         } catch {
@@ -259,7 +260,7 @@ export function InstagramPostGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -294,10 +295,11 @@ export function InstagramPostGeneratorPage() {
                             <input
                                 ref={fileInputRef}
                                 type="file"
-                                accept="image/*"
+                                accept={IMAGE_FILE_POLICY.accept}
                                 className="hidden"
                                 onChange={(event) => {
-                                    const file = event.target.files?.[0]
+                                    const file = event.currentTarget.files?.[0]
+                                    event.currentTarget.value = ""
                                     if (file) void handleFile(file)
                                 }}
                             />
@@ -383,7 +385,7 @@ export function InstagramPostGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/instagram-story-generator/page.tsx b/src/features/tools/instagram-story-generator/page.tsx
index 04b708e6..d4e634ba 100644
--- a/src/features/tools/instagram-story-generator/page.tsx
+++ b/src/features/tools/instagram-story-generator/page.tsx
@@ -5,6 +5,7 @@ import * as React from "react"
 import { Copy, Download, Eraser, Instagram, TestTube2, Upload } from "lucide-react"
 import { toast } from "sonner"
 import { useLang } from "@/core/i18n/lang-provider"
+import { FILE_INPUT_POLICIES, formatFilePolicyLimit, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
@@ -16,8 +17,9 @@ import {
     wrapLines,
     type SocialTheme,
 } from "@/core/utils/social-media-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
-const MAX_FILE_SIZE = 12 * 1024 * 1024
+const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-standard"]
 
 const DEFAULT_STATE = {
     username: "s42.lab",
@@ -216,16 +218,15 @@ export function InstagramStoryGeneratorPage() {
     )
 
     const handleFile = async (file: File) => {
-        if (!file.type.startsWith("image/")) {
-            toast.error(t.common.image_file_required)
-            return
-        }
-        if (file.size > MAX_FILE_SIZE) {
-            toast.error((t.common.image_file_too_large).replace("{size}", "12MB"))
+        const validation = validateFileAgainstPolicy(file, IMAGE_FILE_POLICY)
+        if (!validation.ok) {
+            toast.error(validation.reason === "too_large"
+                ? t.common.image_file_too_large.replace("{size}", formatFilePolicyLimit(IMAGE_FILE_POLICY))
+                : t.common.image_file_required)
             return
         }
         try {
-            const dataUrl = await fileToDataUrl(file)
+            const dataUrl = await fileToDataUrl(file, IMAGE_FILE_POLICY)
             setImageSrc(dataUrl)
             setFileName(file.name)
         } catch {
@@ -286,7 +287,7 @@ export function InstagramStoryGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -321,10 +322,11 @@ export function InstagramStoryGeneratorPage() {
                             <input
                                 ref={fileInputRef}
                                 type="file"
-                                accept="image/*"
+                                accept={IMAGE_FILE_POLICY.accept}
                                 className="hidden"
                                 onChange={(event) => {
-                                    const file = event.target.files?.[0]
+                                    const file = event.currentTarget.files?.[0]
+                                    event.currentTarget.value = ""
                                     if (file) void handleFile(file)
                                 }}
                             />
@@ -416,6 +418,6 @@ export function InstagramStoryGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/invisible-characters-detector/page.tsx b/src/features/tools/invisible-characters-detector/page.tsx
index d5976db1..721cdd4e 100644
--- a/src/features/tools/invisible-characters-detector/page.tsx
+++ b/src/features/tools/invisible-characters-detector/page.tsx
@@ -18,6 +18,7 @@ import {
 } from "@/core/utils/invisible-chars-utils"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Label } from "@/components/ui/label"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function InvisibleCharsDetectorPage() {
     const { t } = useLang()
@@ -87,7 +88,7 @@ export function InvisibleCharsDetectorPage() {
     }
 
     return (
-        <div className="container mx-auto max-w-6xl py-8 px-4 space-y-6">
+        <ToolPageContainer className="py-8 space-y-6">
             <div className="space-y-2">
                 <h1 className="text-3xl font-bold">{text("title")}</h1>
                 <p className="text-muted-foreground">{text("description")}</p>
@@ -216,6 +217,6 @@ export function InvisibleCharsDetectorPage() {
                     <p className="font-medium">{text("no_suspicious_found")}</p>
                 </div>
             )}
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/javascript-formatter/page.tsx b/src/features/tools/javascript-formatter/page.tsx
index 43daa766..3255d15f 100644
--- a/src/features/tools/javascript-formatter/page.tsx
+++ b/src/features/tools/javascript-formatter/page.tsx
@@ -12,6 +12,7 @@ import { buildToolHandoffLink } from "@/core/routing/tool-handoff"
 import { importTextFile, TEXT_FILE_IMPORT_ACCEPT } from "@/core/files/text-file-import"
 import { removeStorageKey } from "@/core/storage/tool-persistence"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_CODE = [
   "const rows=[{id:1,code:'u_001',enabled:true},{id:2,code:'u_002',enabled:false}]",
@@ -183,7 +184,7 @@ export function JavascriptFormatterPage() {
   ]
 
   return (
-    <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+    <WideToolPageContainer className="flex h-full flex-col space-y-8">
       <div className="flex flex-col gap-4">
         <div>
           <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -284,6 +285,6 @@ export function JavascriptFormatterPage() {
           </div>
         </div>
       </div>
-    </div>
+    </WideToolPageContainer>
   )
 }
diff --git a/src/features/tools/javascript-minifier/page.tsx b/src/features/tools/javascript-minifier/page.tsx
index 096c9a15..348bb9ff 100644
--- a/src/features/tools/javascript-minifier/page.tsx
+++ b/src/features/tools/javascript-minifier/page.tsx
@@ -12,6 +12,7 @@ import { getToolHandoffFromSearchParams } from "@/core/routing/tool-handoff"
 import { importTextFile, TEXT_FILE_IMPORT_ACCEPT } from "@/core/files/text-file-import"
 import { removeStorageKey } from "@/core/storage/tool-persistence"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_CODE = [
     "function normalizeId(raw) {",
@@ -194,7 +195,7 @@ export function JavascriptMinifierPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -305,6 +306,6 @@ export function JavascriptMinifierPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/jq-playground/page.tsx b/src/features/tools/jq-playground/page.tsx
index 8eb89c21..adc0e6c3 100644
--- a/src/features/tools/jq-playground/page.tsx
+++ b/src/features/tools/jq-playground/page.tsx
@@ -12,6 +12,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { executeJqFilter, formatJqParsedOutput, validateJSON, formatJSON, type JqOutputMode } from "@/features/tools/jq-playground/browser-actions"
 import { JQ_EXAMPLES, type JqExample } from "@/features/tools/jq-playground/samples"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const AUTO_RUN_KEY = "jq-playground-auto-run"
 const MAX_HISTORY_SIZE = 10
@@ -169,7 +170,7 @@ export function JqPlaygroundPage() {
     }, [handleRun])
 
     return (
-        <div className="container mx-auto max-w-7xl py-8 px-4 space-y-6">
+        <WideToolPageContainer className="py-8 space-y-6">
             <div className="space-y-2">
                 <h1 className="text-3xl font-bold">{text("title")}</h1>
                 <p className="text-muted-foreground">{text("description")}</p>
@@ -388,6 +389,6 @@ export function JqPlaygroundPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/json-diff-viewer/manifest.ts b/src/features/tools/json-diff-viewer/manifest.ts
index 7b032775..2baeb118 100644
--- a/src/features/tools/json-diff-viewer/manifest.ts
+++ b/src/features/tools/json-diff-viewer/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "json_diff_viewer",
     slug: "json-diff-viewer",
+    inputBehavior: "explicit-sample",
     category: "formatters",
     relatedTools: ["json_formatter", "openapi_diff", "text_diff_checker", "jsonpath_playground"],
     privacy: {
diff --git a/src/features/tools/json-diff-viewer/page.tsx b/src/features/tools/json-diff-viewer/page.tsx
index 14bd3b80..d4284291 100644
--- a/src/features/tools/json-diff-viewer/page.tsx
+++ b/src/features/tools/json-diff-viewer/page.tsx
@@ -11,6 +11,7 @@ import { OutputWrapModeControl, type OutputWrapMode } from "@/features/tool-shel
 import { ensureByteflowMonacoThemes, getByteflowMonacoThemeName } from "@/core/utils/monaco-theme"
 import { useThemePreference } from "@/hooks/use-theme-preference"
 import { buildInputTooLargeMessage, isOverUtf8Budget, TOOL_RUNTIME_BUDGETS } from "@/core/performance/tool-runtime-budgets"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 function flattenJson(obj: unknown, prefix = "", context = { nodes: 0, truncated: false }): Record<string, string> {
     const result: Record<string, string> = {}
@@ -168,7 +169,7 @@ export function JsonDiffViewerPage() {
         : error
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8 py-8 px-4">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8 py-8">
             <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                 <div className="flex items-center gap-3">
                     <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
@@ -295,6 +296,6 @@ export function JsonDiffViewerPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/json-formatter/json-import-dropzone.tsx b/src/features/tools/json-formatter/json-import-dropzone.tsx
index 30e85604..11664449 100644
--- a/src/features/tools/json-formatter/json-import-dropzone.tsx
+++ b/src/features/tools/json-formatter/json-import-dropzone.tsx
@@ -56,6 +56,7 @@ export function JsonImportDropzone({
             <input
                 ref={fileInputRef}
                 type="file"
+                data-input-intent="payload"
                 aria-label={text("import_file")}
                 accept={TEXT_FILE_IMPORT_ACCEPT}
                 className="hidden"
diff --git a/src/features/tools/json-formatter/json-tree-search.tsx b/src/features/tools/json-formatter/json-tree-search.tsx
index d44eac43..7a624eea 100644
--- a/src/features/tools/json-formatter/json-tree-search.tsx
+++ b/src/features/tools/json-formatter/json-tree-search.tsx
@@ -23,7 +23,8 @@ export function JsonTreeSearch({
                 <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                 <Input
                     autoFocus
-                    className="h-8 w-48 pl-8 text-xs focus-visible:ring-1 focus-visible:ring-primary/50"
+                    intent="shortText"
+                    className="w-48 pl-8 text-xs focus-visible:ring-1 focus-visible:ring-primary/50"
                     placeholder={placeholder}
                     value={query}
                     onChange={(event) => onQueryChange(event.target.value)}
diff --git a/src/features/tools/json-formatter/manifest.ts b/src/features/tools/json-formatter/manifest.ts
index caba7f40..55894c08 100644
--- a/src/features/tools/json-formatter/manifest.ts
+++ b/src/features/tools/json-formatter/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "json_formatter",
     slug: "json-formatter",
+    inputBehavior: "empty-first",
     category: "formatters",
     relatedTools: ["jsonpath_playground", "json_diff_viewer", "json_to_typescript", "yaml_json_converter", "json_schema_workbench"],
     privacy: {
diff --git a/src/features/tools/json-formatter/page.tsx b/src/features/tools/json-formatter/page.tsx
index c18fb08b..d8014d2b 100644
--- a/src/features/tools/json-formatter/page.tsx
+++ b/src/features/tools/json-formatter/page.tsx
@@ -50,7 +50,7 @@ import { JsonTreeNode } from "./components"
 import { SAMPLE_JSON_SOURCE } from "./samples"
 import { downloadJsonOutput } from "./browser-actions"
 import type { JsonPath, JsonValue, TreeDialogState, ViewMode } from "./types"
-
+import { WideToolPageContainer } from "@/components/layout/page-container"
 export function JsonFormatterPage() {
     const { t, lang } = useLang()
     const toolT = t.tools["json_formatter"] as Record<string, string>
@@ -564,7 +564,7 @@ export function JsonFormatterPage() {
     }
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-6">
+        <WideToolPageContainer className="flex h-full flex-col space-y-6">
             <JsonTreeEditDialog
                 applyLabel={t.common.apply}
                 closeLabel={t.common.close}
@@ -596,17 +596,17 @@ export function JsonFormatterPage() {
                 onOpenImportPicker={openImportPicker}
                 text={text}
             />
-
             <JsonErrorAlert details={errorDetails} error={error} text={text} />
 
-            <div className="grid min-h-[600px] min-w-0 flex-1 grid-cols-1 gap-4 overflow-hidden rounded-lg border bg-card lg:grid-cols-2">
+            <div data-input-intent="workbench" className="grid min-h-[600px] min-w-0 flex-1 grid-cols-1 gap-4 overflow-hidden rounded-lg border bg-card lg:grid-cols-2">
                 <div className="flex h-full flex-col border-b lg:border-r lg:border-b-0">
                     <div className="tool-pane-header tool-pane-header-between">
                         <span>{t.common.input}</span>
                         <JsonInputHeader input={input} text={text} />
                     </div>
                     <div className="min-h-[300px] flex-1">
-                        <MonacoEditor
+                        <MonacoEditor
+                            intent="payload"
                             height="100%"
                             defaultLanguage="json"
                             theme={monacoTheme}
@@ -646,11 +646,11 @@ export function JsonFormatterPage() {
                         viewMode={viewMode}
                         wrapMode={outputWrapMode}
                     />
-
                     {viewMode === "text" ? (
                         <div className="min-h-[300px] flex-1">
                             {output ? (
                                 <MonacoEditor
+                                    intent="generatedOutput"
                                     height="100%"
                                     defaultLanguage="json"
                                     theme={monacoTheme}
@@ -714,6 +714,6 @@ export function JsonFormatterPage() {
             </div>
 
             <PrivacyFAQ />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/json-formatter/panels.tsx b/src/features/tools/json-formatter/panels.tsx
index 681cb826..09880ce7 100644
--- a/src/features/tools/json-formatter/panels.tsx
+++ b/src/features/tools/json-formatter/panels.tsx
@@ -116,7 +116,8 @@ export function JsonTreeEditDialog({
                     {dialog?.type === "edit_value" ? (
                         <Textarea
                             autoFocus
-                            className="min-h-[140px] w-full font-mono text-sm"
+                            intent="shortText"
+                            className="w-full font-mono text-sm"
                             value={dialog.draft}
                             onChange={(event) => onDraftChange(event.target.value)}
                             spellCheck={false}
@@ -124,6 +125,7 @@ export function JsonTreeEditDialog({
                     ) : (
                         <Input
                             autoFocus
+                            intent="shortText"
                             value={dialog?.draft || ""}
                             onChange={(event) => onDraftChange(event.target.value)}
                             placeholder={dialog?.type === "add_key" ? text("tree_new_key_placeholder") : undefined}
diff --git a/src/features/tools/json-schema-workbench/manifest.ts b/src/features/tools/json-schema-workbench/manifest.ts
index ed9a0e8f..d87810e3 100644
--- a/src/features/tools/json-schema-workbench/manifest.ts
+++ b/src/features/tools/json-schema-workbench/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "json_schema_workbench",
     slug: "json-schema-workbench",
+    inputBehavior: "explicit-sample",
     category: "formatters",
     relatedTools: ["json_formatter", "jsonpath_playground", "json_diff_viewer", "json_to_typescript"],
     privacy: {
diff --git a/src/features/tools/json-schema-workbench/page.tsx b/src/features/tools/json-schema-workbench/page.tsx
index c464d4d7..8f74cbe6 100644
--- a/src/features/tools/json-schema-workbench/page.tsx
+++ b/src/features/tools/json-schema-workbench/page.tsx
@@ -11,6 +11,7 @@ import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-war
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { generateJsonSchema, validateJsonWithSchema, formatValidationReport } from "./logic"
 import { SAMPLE_INPUT, SAMPLE_SCHEMA } from "./samples"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 type Mode = "generate" | "validate"
 
@@ -68,7 +69,7 @@ export function JsonSchemaWorkbenchPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-7xl flex-col gap-6">
+        <WideToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -118,7 +119,7 @@ export function JsonSchemaWorkbenchPage() {
             </div>
 
             <RelatedTools toolKey="json_schema_workbench" />
-        </div>
+        </WideToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/json-to-typescript/manifest.ts b/src/features/tools/json-to-typescript/manifest.ts
index 83a18126..608e456a 100644
--- a/src/features/tools/json-to-typescript/manifest.ts
+++ b/src/features/tools/json-to-typescript/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "json_to_typescript",
     slug: "json-to-typescript",
+    inputBehavior: "explicit-sample",
     category: "formatters",
     relatedTools: ["json_formatter", "json_schema_workbench", "yaml_json_converter", "jsonpath_playground"],
     privacy: {
diff --git a/src/features/tools/json-to-typescript/page.tsx b/src/features/tools/json-to-typescript/page.tsx
index 56cb6fd6..477b5369 100644
--- a/src/features/tools/json-to-typescript/page.tsx
+++ b/src/features/tools/json-to-typescript/page.tsx
@@ -15,6 +15,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { useThemePreference } from "@/hooks/use-theme-preference"
 import { ensureByteflowMonacoThemes, getByteflowMonacoThemeName } from "@/core/utils/monaco-theme"
 import { jsonToTs } from "./utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_JSON = `{
   "id": 1,
@@ -179,7 +180,7 @@ export function JsonToTypeScriptPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <input
                 ref={fileInputRef}
                 type="file"
@@ -310,6 +311,6 @@ export function JsonToTypeScriptPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/jsonpath-playground/manifest.ts b/src/features/tools/jsonpath-playground/manifest.ts
index 801723bc..d0034d15 100644
--- a/src/features/tools/jsonpath-playground/manifest.ts
+++ b/src/features/tools/jsonpath-playground/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "jsonpath_playground",
     slug: "jsonpath-playground",
+    inputBehavior: "explicit-sample",
     category: "formatters",
     relatedTools: ["json_formatter", "json_diff_viewer", "json_to_typescript", "yaml_json_converter"],
     privacy: {
diff --git a/src/features/tools/jsonpath-playground/page.tsx b/src/features/tools/jsonpath-playground/page.tsx
index 389bff1c..35074685 100644
--- a/src/features/tools/jsonpath-playground/page.tsx
+++ b/src/features/tools/jsonpath-playground/page.tsx
@@ -9,6 +9,7 @@ import { getByteflowMonacoThemeName } from "@/core/utils/monaco-theme"
 import { MonacoEditor } from "@/features/tool-shell/monaco-editors"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 function queryJsonPath(obj: unknown, path: string): unknown[] {
     const results: unknown[] = []
@@ -112,7 +113,7 @@ export function JsonPathPlaygroundPage() {
     }, [errorLabel, json, path])
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div className="flex flex-col gap-1">
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -192,6 +193,6 @@ export function JsonPathPlaygroundPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/jwt-decoder/manifest.ts b/src/features/tools/jwt-decoder/manifest.ts
index 13da1d8e..f3288c77 100644
--- a/src/features/tools/jwt-decoder/manifest.ts
+++ b/src/features/tools/jwt-decoder/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "jwt_decoder",
     slug: "jwt-decoder",
+    inputBehavior: "empty-first",
     category: "text-string",
     relatedTools: ["jwt_workbench", "oauth_jwks_workbench", "base64_encode_decode", "hash_generator"],
     privacy: {
diff --git a/src/features/tools/jwt-decoder/page.tsx b/src/features/tools/jwt-decoder/page.tsx
index 8bc86368..e044af79 100644
--- a/src/features/tools/jwt-decoder/page.tsx
+++ b/src/features/tools/jwt-decoder/page.tsx
@@ -14,6 +14,7 @@ import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-war
 import { MonacoEditor } from "@/features/tool-shell/monaco-editors"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { decodeJwtParts, JwtDecodeError, type JwtClaimSemantic, type JwtDecodeErrorCode, type JwtSemanticSummary } from "./utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 function formatLocalTime(utc: string): string {
     return new Date(utc).toLocaleString()
@@ -146,7 +147,7 @@ export function JwtDecoderPage() {
     ]
 
     return (
-        <div className="flex flex-col h-full space-y-8 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-8">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -194,7 +195,7 @@ export function JwtDecoderPage() {
             )}
 
             {/* Workspace Grid */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-[600px]">
+            <div data-input-intent="workbench" className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 min-h-[600px]">
                 {/* Input Pane */}
                 <div className="flex flex-col h-full border rounded-lg bg-card overflow-hidden">
                     <div className="tool-pane-header tool-pane-header-between">
@@ -202,7 +203,8 @@ export function JwtDecoderPage() {
                     </div>
                     <div className="flex-1 p-0">
                         <Textarea
-                            className="h-full min-h-[300px] w-full resize-none border-0 focus-visible:ring-1 focus-visible:ring-ring/50 p-4 font-mono text-sm leading-relaxed"
+                            intent="payload"
+                            className="h-full w-full resize-none border-0 focus-visible:ring-1 focus-visible:ring-ring/50 p-4 font-mono text-sm leading-relaxed"
                             placeholder={toolT.token_placeholder}
                             value={input}
                             onChange={(e) => setInput(e.target.value)}
@@ -230,6 +232,7 @@ export function JwtDecoderPage() {
                         </div>
                         <div className="flex-1 min-h-[150px]">
                             <MonacoEditor
+                                intent="generatedOutput"
                                 height="100%"
                                 language="json"
                                 theme={monacoTheme}
@@ -264,6 +267,7 @@ export function JwtDecoderPage() {
                         </div>
                         <div className="flex-1 min-h-[300px]">
                             <MonacoEditor
+                                intent="generatedOutput"
                                 height="100%"
                                 language="json"
                                 theme={monacoTheme}
@@ -368,6 +372,6 @@ export function JwtDecoderPage() {
                     )}
                 </div>
             ) : null}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/jwt-verifier/page.tsx b/src/features/tools/jwt-verifier/page.tsx
index 4028f942..adae54b5 100644
--- a/src/features/tools/jwt-verifier/page.tsx
+++ b/src/features/tools/jwt-verifier/page.tsx
@@ -18,6 +18,7 @@ import {
     normalizeJwtAlgorithm,
     type JwtSignatureVerificationResult,
 } from "./logic"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const ICON_BUTTON_CLASS =
     "inline-flex h-7 w-7 items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-accent/50"
@@ -144,7 +145,7 @@ export function JwtVerifierPage() {
     ]
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto w-full">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -265,6 +266,6 @@ export function JwtVerifierPage() {
             )}
 
             <RelatedTools toolKey="jwt_verifier" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/jwt-workbench/manifest.ts b/src/features/tools/jwt-workbench/manifest.ts
index 1d2db925..9c828320 100644
--- a/src/features/tools/jwt-workbench/manifest.ts
+++ b/src/features/tools/jwt-workbench/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "jwt_workbench",
     slug: "jwt-workbench",
+    inputBehavior: "explicit-sample",
     category: "text-string",
     relatedTools: ["jwt_decoder", "jwt_verifier", "oauth_jwks_workbench", "public_key_jwk_helper"],
     privacy: {
diff --git a/src/features/tools/jwt-workbench/page.tsx b/src/features/tools/jwt-workbench/page.tsx
index 739dda4d..26340426 100644
--- a/src/features/tools/jwt-workbench/page.tsx
+++ b/src/features/tools/jwt-workbench/page.tsx
@@ -29,6 +29,7 @@ import { decodeJsonSegment, encodeJsonSegment, safeJsonStringify, signHmac } fro
 import { JwtSecretField } from "./jwt-secret-field"
 import { SAMPLE_HEADER, SAMPLE_PAYLOAD } from "./samples"
 import type { JwtAlg } from "./types"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const ICON_BUTTON_CLASS =
     "inline-flex h-7 w-7 items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-accent/50"
@@ -258,7 +259,7 @@ export function JwtWorkbenchPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -392,6 +393,6 @@ export function JwtWorkbenchPage() {
             </div>
 
             <RelatedTools toolKey="jwt_workbench" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/letter-counter/page.tsx b/src/features/tools/letter-counter/page.tsx
index 6772ef78..55f9812e 100644
--- a/src/features/tools/letter-counter/page.tsx
+++ b/src/features/tools/letter-counter/page.tsx
@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { formatLetterCounterSummary, getLetterCounterStats, type LetterCounterSummaryLabels } from "@/features/tools/letter-counter/utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_TEXT = "ABC 123\nxyz 456"
 
@@ -84,7 +85,7 @@ export function LetterCounterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -141,7 +142,7 @@ export function LetterCounterPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/list-randomizer/page.tsx b/src/features/tools/list-randomizer/page.tsx
index be3ce9e0..ec6e1c4e 100644
--- a/src/features/tools/list-randomizer/page.tsx
+++ b/src/features/tools/list-randomizer/page.tsx
@@ -12,6 +12,7 @@ import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { readStorageJson, writeStorageJson } from "@/core/storage/tool-persistence"
 import { importTextFile, TEXT_FILE_IMPORT_ACCEPT } from "@/core/files/text-file-import"
 import { randomizeList, type RandomizeMode } from "@/features/tools/list-randomizer/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_INPUT = ["alpha", "beta", "charlie", "delta", "echo", "foxtrot", "golf", "hotel"].join("\n")
 const STORAGE_KEY = "byteflow:list-randomizer:state"
@@ -200,7 +201,7 @@ export function ListRandomizerPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -372,6 +373,6 @@ export function ListRandomizerPage() {
             </div>
 
             <RelatedTools toolKey="list_randomizer" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/local-log-parser/page.tsx b/src/features/tools/local-log-parser/page.tsx
index 5d2fe9d7..3bf1a9fb 100644
--- a/src/features/tools/local-log-parser/page.tsx
+++ b/src/features/tools/local-log-parser/page.tsx
@@ -17,6 +17,7 @@ import {
     type LogLevel,
 } from "@/features/tools/local-log-parser/utils"
 import { Checkbox } from "@/components/ui/checkbox"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function LocalLogParserPage() {
     const { t } = useLang()
@@ -141,7 +142,7 @@ export function LocalLogParserPage() {
     }
 
     return (
-        <div className="container mx-auto max-w-7xl py-8 px-4 space-y-6">
+        <WideToolPageContainer className="py-8 space-y-6">
             <div className="space-y-2">
                 <h1 className="text-3xl font-bold">{text("title")}</h1>
                 <p className="text-muted-foreground">{text("description")}</p>
@@ -274,6 +275,6 @@ export function LocalLogParserPage() {
                     </div>
                 </div>
             )}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/local-log-parser/utils.ts b/src/features/tools/local-log-parser/utils.ts
index 7b7cf4ef..c0172565 100644
--- a/src/features/tools/local-log-parser/utils.ts
+++ b/src/features/tools/local-log-parser/utils.ts
@@ -1,3 +1,5 @@
+import { serializeSpreadsheetSafeCsv } from "@/core/files/csv-export"
+
 /**
  * Local log parser utilities for JSON Lines, plain text, and common log formats
  */
@@ -178,17 +180,15 @@ export function filterLogs(
  * Export logs to CSV
  */
 export function exportToCSV(entries: ParsedLogEntry[]): string {
-    const lines = ["Line,Timestamp,Level,Message"]
-
-    entries.forEach((entry) => {
-        const line = entry.lineNumber
-        const timestamp = entry.timestamp || ""
-        const level = entry.level || "UNKNOWN"
-        const message = (entry.message || entry.raw).replace(/"/g, '""')
-        lines.push(`${line},"${timestamp}","${level}","${message}"`)
-    })
-
-    return lines.join("\n")
+    return serializeSpreadsheetSafeCsv([
+        ["Line", "Timestamp", "Level", "Message"],
+        ...entries.map((entry) => [
+            entry.lineNumber,
+            entry.timestamp || "",
+            entry.level || "UNKNOWN",
+            entry.message || entry.raw,
+        ] as const),
+    ])
 }
 
 /**
diff --git a/src/features/tools/log-scrubber/page.tsx b/src/features/tools/log-scrubber/page.tsx
index 283139fe..113f28ea 100644
--- a/src/features/tools/log-scrubber/page.tsx
+++ b/src/features/tools/log-scrubber/page.tsx
@@ -18,6 +18,7 @@ import {
     type ScrubFinding,
     type ScrubOptions,
 } from "@/core/utils/log-scrubber-utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 type OptionKey = keyof ScrubOptions
 
@@ -138,7 +139,7 @@ password=hunter2`)
     ]
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
@@ -246,6 +247,6 @@ password=hunter2`)
                     </div>
                 </div>
             )}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/lorem-ipsum/page.tsx b/src/features/tools/lorem-ipsum/page.tsx
index 9d6f5b57..8bab7b43 100644
--- a/src/features/tools/lorem-ipsum/page.tsx
+++ b/src/features/tools/lorem-ipsum/page.tsx
@@ -26,6 +26,7 @@ import {
     type LoremUnits,
 } from "@/features/tools/lorem-ipsum/utils"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function LoremIpsumGeneratorPage() {
     const { t } = useLang()
@@ -137,7 +138,7 @@ export function LoremIpsumGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-5xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -269,6 +270,6 @@ export function LoremIpsumGeneratorPage() {
                     ) : null}
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/markdown-preview/page.tsx b/src/features/tools/markdown-preview/page.tsx
index 1b3dbe81..0aeb36a6 100644
--- a/src/features/tools/markdown-preview/page.tsx
+++ b/src/features/tools/markdown-preview/page.tsx
@@ -6,6 +6,7 @@ import { Copy, Eye, Code2, Download, Trash2, ShieldCheck } from "lucide-react"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildMarkdownExportDocument, sanitizeMarkdownPreviewHtml } from "./export"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_MARKDOWN_BY_LANG = {
     en: `# Hello, Markdown! 👋
@@ -237,7 +238,7 @@ export function MarkdownPreviewPage() {
     }
 
     return (
-        <div className="flex flex-col h-full">
+        <WideToolPageContainer className="flex flex-col h-full">
             {/* Header */}
             <div className="flex items-start justify-between border-b px-4 py-3 gap-3 flex-wrap">
                 <div className="flex min-w-0 items-start gap-2">
@@ -360,6 +361,6 @@ export function MarkdownPreviewPage() {
                     </div>
                 )}
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/md5-generator/page.tsx b/src/features/tools/md5-generator/page.tsx
index 9375b66c..ff0c5450 100644
--- a/src/features/tools/md5-generator/page.tsx
+++ b/src/features/tools/md5-generator/page.tsx
@@ -2,21 +2,24 @@
 
 import { useLang } from "@/core/i18n/lang-provider"
 import { SingleHashToolPage } from "@/features/tool-templates/single-hash-tool-page"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function Md5GeneratorPage() {
     const { t } = useLang()
     const toolT = t.tools["md5_generator"] as Record<string, string>
 
     return (
-        <SingleHashToolPage
-            algorithm="md5"
-            title={toolT.title}
-            description={toolT.description}
-            inputLabel={toolT.input_text}
-            inputPlaceholder={toolT.text_placeholder}
-            outputLabel={toolT.md5_output}
-            outputPlaceholder={toolT.output_placeholder}
-            openFullHashLabel={toolT.open_full_hash}
-        />
+        <ToolPageContainer>
+            <SingleHashToolPage
+                algorithm="md5"
+                title={toolT.title}
+                description={toolT.description}
+                inputLabel={toolT.input_text}
+                inputPlaceholder={toolT.text_placeholder}
+                outputLabel={toolT.md5_output}
+                outputPlaceholder={toolT.output_placeholder}
+                openFullHashLabel={toolT.open_full_hash}
+            />
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/messagepack-inspector/manifest.ts b/src/features/tools/messagepack-inspector/manifest.ts
index d58222fb..feb1e2b8 100644
--- a/src/features/tools/messagepack-inspector/manifest.ts
+++ b/src/features/tools/messagepack-inspector/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "messagepack_inspector",
     slug: "messagepack-inspector",
+    inputBehavior: "explicit-sample",
     category: "formatters",
     relatedTools: ["json_formatter", "hex_bytes_workbench", "base64_encode_decode", "yaml_json_converter"],
     privacy: {
diff --git a/src/features/tools/messagepack-inspector/page.tsx b/src/features/tools/messagepack-inspector/page.tsx
index fbc6e349..653c3326 100644
--- a/src/features/tools/messagepack-inspector/page.tsx
+++ b/src/features/tools/messagepack-inspector/page.tsx
@@ -12,6 +12,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { decodeMessagePack } from "./logic"
 import { SAMPLE_INPUT } from "./samples"
 import type { MessagePackInputMode } from "./types"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function MessagepackInspectorPage() {
     const { t } = useLang()
@@ -53,7 +54,7 @@ export function MessagepackInspectorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-6">
+        <ToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -95,7 +96,7 @@ export function MessagepackInspectorPage() {
             </div>
 
             <RelatedTools toolKey="messagepack_inspector" />
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/multiple-whitespace-remover/page.tsx b/src/features/tools/multiple-whitespace-remover/page.tsx
index dbbbee22..988e8d4b 100644
--- a/src/features/tools/multiple-whitespace-remover/page.tsx
+++ b/src/features/tools/multiple-whitespace-remover/page.tsx
@@ -10,6 +10,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { removeExtraWhitespace } from "@/core/utils/whitespace-utils"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildToolHandoffLink } from "@/core/routing/tool-handoff"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function MultipleWhitespaceRemoverPage() {
     const { t, lang } = useLang()
@@ -112,7 +113,7 @@ export function MultipleWhitespaceRemoverPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -171,6 +172,6 @@ export function MultipleWhitespaceRemoverPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/ndjson-formatter/page.tsx b/src/features/tools/ndjson-formatter/page.tsx
index 37f292c4..57ce36f8 100644
--- a/src/features/tools/ndjson-formatter/page.tsx
+++ b/src/features/tools/ndjson-formatter/page.tsx
@@ -9,6 +9,7 @@ import { RelatedTools } from "@/core/seo/components/related-tools"
 import { MonacoEditor } from "@/features/tool-shell/monaco-editors"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { countNdjsonLines, runNdjsonTransform, type NdjsonMessages, type NdjsonMode } from "./utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const NDJSON_BUTTON_BASE_CLASS =
     "inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
@@ -99,7 +100,7 @@ export function NdjsonFormatterPage() {
     const lineCount = input ? countNdjsonLines(input) : 0
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -189,6 +190,6 @@ export function NdjsonFormatterPage() {
                 </div>
             </div>
             <RelatedTools toolKey="ndjson_formatter" />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/oauth-jwks-workbench/manifest.ts b/src/features/tools/oauth-jwks-workbench/manifest.ts
index 13c0b14c..f337ac23 100644
--- a/src/features/tools/oauth-jwks-workbench/manifest.ts
+++ b/src/features/tools/oauth-jwks-workbench/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "oauth_jwks_workbench",
     slug: "oauth-jwks-workbench",
+    inputBehavior: "explicit-sample",
     category: "text-string",
     relatedTools: ["jwt_decoder", "jwt_workbench", "jwt_verifier", "public_key_jwk_helper"],
     privacy: {
diff --git a/src/features/tools/oauth-jwks-workbench/page.tsx b/src/features/tools/oauth-jwks-workbench/page.tsx
index e25958ea..76694ad6 100644
--- a/src/features/tools/oauth-jwks-workbench/page.tsx
+++ b/src/features/tools/oauth-jwks-workbench/page.tsx
@@ -10,6 +10,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { copyTextWithToolFeedback, notifyToolActionFailure } from "@/features/tool-shell/tool-action-feedback"
 import { generatePkcePair, summarizeJwks, verifyJwtWithJwks } from "./logic"
 import { SAMPLE_INPUT, SAMPLE_JWT } from "./samples"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type Mode = "pkce" | "jwks"
 
@@ -102,7 +103,7 @@ export function OauthJwksWorkbenchPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-6">
+        <ToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -178,6 +179,6 @@ export function OauthJwksWorkbenchPage() {
             </div>
 
             <RelatedTools toolKey="oauth_jwks_workbench" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/open-graph-meta-generator/page.tsx b/src/features/tools/open-graph-meta-generator/page.tsx
index 0f459966..dfb5fd2f 100644
--- a/src/features/tools/open-graph-meta-generator/page.tsx
+++ b/src/features/tools/open-graph-meta-generator/page.tsx
@@ -15,6 +15,7 @@ import {
     normalizeAbsoluteHttpUrl,
     type OpenGraphInput,
 } from "@/features/tools/open-graph-meta-generator/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function OpenGraphMetaGeneratorPage() {
     const { t, lang } = useLang()
@@ -83,7 +84,7 @@ export function OpenGraphMetaGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -181,7 +182,7 @@ export function OpenGraphMetaGeneratorPage() {
                     />
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/openapi-diff/manifest.ts b/src/features/tools/openapi-diff/manifest.ts
index e3298a38..932995dd 100644
--- a/src/features/tools/openapi-diff/manifest.ts
+++ b/src/features/tools/openapi-diff/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "openapi_diff",
     slug: "openapi-diff",
+    inputBehavior: "explicit-sample",
     category: "formatters",
     relatedTools: ["openapi_viewer", "openapi_mock", "yaml_json_converter", "json_diff_viewer"],
     privacy: {
diff --git a/src/features/tools/openapi-diff/page.tsx b/src/features/tools/openapi-diff/page.tsx
index 66066a34..b309f4a3 100644
--- a/src/features/tools/openapi-diff/page.tsx
+++ b/src/features/tools/openapi-diff/page.tsx
@@ -12,6 +12,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { downloadText } from "./browser-actions"
 import { diffOpenApiSpecs, formatOpenApiDiffReport } from "./logic"
 import { SAMPLE_AFTER, SAMPLE_BEFORE } from "./samples"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function OpenapiDiffPage() {
     const { t } = useLang()
@@ -64,7 +65,7 @@ export function OpenapiDiffPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-7xl flex-col gap-6">
+        <WideToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -96,6 +97,6 @@ export function OpenapiDiffPage() {
             </section>
 
             <RelatedTools toolKey="openapi_diff" />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/openapi-mock/page.tsx b/src/features/tools/openapi-mock/page.tsx
index 0cbf8ca3..fce0293e 100644
--- a/src/features/tools/openapi-mock/page.tsx
+++ b/src/features/tools/openapi-mock/page.tsx
@@ -10,6 +10,7 @@ import { RelatedTools } from "@/core/seo/components/related-tools"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { extractEndpoints } from "@/features/tools/openapi-mock/utils"
 import { buildInputTooLargeMessage, isOverUtf8Budget, TOOL_RUNTIME_BUDGETS } from "@/core/performance/tool-runtime-budgets"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 function buildSampleSpec(toolT: Record<string, string>) {
     return JSON.stringify(
@@ -124,7 +125,7 @@ export function OpenApiMockPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -177,6 +178,6 @@ export function OpenApiMockPage() {
                 </div>
             </div>
             <RelatedTools toolKey="openapi_mock" />
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/openapi-viewer/page.tsx b/src/features/tools/openapi-viewer/page.tsx
index 16bbe263..f2cbf48e 100644
--- a/src/features/tools/openapi-viewer/page.tsx
+++ b/src/features/tools/openapi-viewer/page.tsx
@@ -10,6 +10,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { MonacoEditor } from "@/features/tool-shell/monaco-editors"
 import { cn } from "@/core/utils/utils"
 import { buildInputTooLargeMessage, isOverUtf8Budget, TOOL_RUNTIME_BUDGETS } from "@/core/performance/tool-runtime-budgets"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 interface OpenAPIInfo {
     title?: string
@@ -179,7 +180,7 @@ export function OpenApiViewerPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div className="flex items-center justify-between gap-2 flex-wrap">
                     <div className="flex items-center gap-3">
@@ -344,6 +345,6 @@ export function OpenApiViewerPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/password-generator/page.tsx b/src/features/tools/password-generator/page.tsx
index 8bb80486..8dd74223 100644
--- a/src/features/tools/password-generator/page.tsx
+++ b/src/features/tools/password-generator/page.tsx
@@ -26,6 +26,7 @@ import {
 import { MAX_CUSTOM_PRESETS, SEPARATOR_MAP, STORAGE_KEY } from "./constants"
 import { clamp, getSeparatorKey, parsePreset } from "./logic"
 import type { SeparatorKey } from "./types"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function PasswordGeneratorPage() {
     const { t } = useLang()
@@ -199,7 +200,7 @@ export function PasswordGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -493,6 +494,6 @@ export function PasswordGeneratorPage() {
             </div>
 
             <RelatedTools toolKey="password_generator" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/photo-censor/page.tsx b/src/features/tools/photo-censor/page.tsx
index 9811a8f5..dde9f408 100644
--- a/src/features/tools/photo-censor/page.tsx
+++ b/src/features/tools/photo-censor/page.tsx
@@ -19,6 +19,7 @@ import {
     type CensorRectPercent,
 } from "@/features/tools/photo-censor/utils"
 import { runImageEditTask } from "@/features/tool-processing/image-edit-task"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const IMAGE_FILE_POLICY = FILE_INPUT_POLICIES["image-standard"]
 
@@ -225,7 +226,7 @@ export function PhotoCensorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -392,7 +393,7 @@ export function PhotoCensorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/pipeline-builder/components.tsx b/src/features/tools/pipeline-builder/components.tsx
index a5a5b6c6..7d45b9d9 100644
--- a/src/features/tools/pipeline-builder/components.tsx
+++ b/src/features/tools/pipeline-builder/components.tsx
@@ -43,6 +43,7 @@ export function StepOptions({
                             <Input
                                 id={`${step.id}-${key}`}
                                 type="number"
+                                intent="scalar"
                                 value={Number(value)}
                                 min={0}
                                 max={8}
@@ -59,6 +60,7 @@ export function StepOptions({
                             <Label htmlFor={`${step.id}-${key}`}>{text(`option_${key}`)}</Label>
                             <select
                                 id={`${step.id}-${key}`}
+                                data-input-intent="scalar"
                                 className="mt-1 h-11 w-full rounded-md border bg-background px-2 text-sm lg:h-9"
                                 value={String(value)}
                                 onChange={(event) => updateOption(key, event.target.value)}
@@ -76,6 +78,7 @@ export function StepOptions({
                         <Label htmlFor={`${step.id}-${key}`}>{text(`option_${key}`)}</Label>
                         <Input
                             id={`${step.id}-${key}`}
+                            intent="shortText"
                             value={String(value)}
                             onChange={(event) => updateOption(key, event.target.value)}
                         />
diff --git a/src/features/tools/pipeline-builder/page.tsx b/src/features/tools/pipeline-builder/page.tsx
index d3422844..1a154884 100644
--- a/src/features/tools/pipeline-builder/page.tsx
+++ b/src/features/tools/pipeline-builder/page.tsx
@@ -41,6 +41,7 @@ import { PipelineStepList } from "./pipeline-step-list"
 import { PipelineTemplateList } from "./pipeline-template-list"
 import { PipelineUsageGuide } from "./pipeline-usage-guide"
 import type { OptionValue } from "./types"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const ONBOARDING_DISMISSED_KEY = "byteflow:pipeline-builder:onboarding-dismissed"
 const TEMPLATE_PARAM = "template"
@@ -363,7 +364,7 @@ export function PipelineBuilderPage() {
     ]
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
@@ -416,7 +417,7 @@ export function PipelineBuilderPage() {
                 />
             ) : null}
 
-            <div className="grid gap-4 lg:grid-cols-[340px_minmax(0,1fr)_360px]">
+            <div data-input-intent="workbench" className="grid gap-4 lg:grid-cols-[340px_minmax(0,1fr)_360px]">
                 <aside className="space-y-4" aria-label={text("recipe_builder")}>
                     <section className="rounded-lg border bg-card p-4">
                         <div className="space-y-3">
@@ -424,6 +425,7 @@ export function PipelineBuilderPage() {
                                 <Label htmlFor="recipe-name">{text("recipe_name")}</Label>
                                 <Input
                                     id="recipe-name"
+                                    intent="shortText"
                                     value={recipe.name}
                                     onChange={(event) => updateRecipe((current) => ({ ...current, name: event.target.value }))}
                                 />
@@ -432,6 +434,7 @@ export function PipelineBuilderPage() {
                                 <Label htmlFor="recipe-description">{text("recipe_description")}</Label>
                                 <Input
                                     id="recipe-description"
+                                    intent="shortText"
                                     value={recipe.description ?? ""}
                                     onChange={(event) => updateRecipe((current) => ({ ...current, description: event.target.value }))}
                                     placeholder={text("recipe_description_placeholder")}
@@ -488,13 +491,14 @@ export function PipelineBuilderPage() {
                         </div>
                         <Textarea
                             id="pipeline-input"
+                            intent="payload"
                             value={initialInput}
                             onChange={(event) => {
                                 setInitialInput(event.target.value)
                                 setResult(null)
                             }}
                             placeholder={text("initial_input_placeholder")}
-                            className="min-h-[220px] font-mono text-sm"
+                            className="font-mono text-sm"
                             spellCheck={false}
                             aria-describedby="pipeline-input-count"
                         />
@@ -507,10 +511,11 @@ export function PipelineBuilderPage() {
                         </div>
                         <Textarea
                             id="pipeline-output"
+                            intent="generatedOutput"
                             value={finalOutput}
                             readOnly
                             placeholder={text("final_output_placeholder")}
-                            className="min-h-[260px] bg-muted font-mono text-sm"
+                            className="bg-muted font-mono text-sm"
                             spellCheck={false}
                             aria-describedby="pipeline-output-count pipeline-run-log-status"
                         />
@@ -547,6 +552,6 @@ export function PipelineBuilderPage() {
                     validation={validation}
                 />
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/pipeline-builder/pipeline-saved-recipes.tsx b/src/features/tools/pipeline-builder/pipeline-saved-recipes.tsx
index 9313d44d..a8bc2109 100644
--- a/src/features/tools/pipeline-builder/pipeline-saved-recipes.tsx
+++ b/src/features/tools/pipeline-builder/pipeline-saved-recipes.tsx
@@ -29,6 +29,7 @@ export function PipelineSavedRecipes({
             <div className="mt-3 flex gap-2">
                 <select
                     aria-label={text("saved_recipe_select")}
+                    data-input-intent="scalar"
                     className="h-9 min-w-0 flex-1 rounded-md border bg-background px-2 text-sm"
                     value={selectedSavedId}
                     onChange={(event) => onSelectedSavedIdChange(event.target.value)}
diff --git a/src/features/tools/pipeline-builder/pipeline-step-inspector.tsx b/src/features/tools/pipeline-builder/pipeline-step-inspector.tsx
index 16a4f9de..565f7f2d 100644
--- a/src/features/tools/pipeline-builder/pipeline-step-inspector.tsx
+++ b/src/features/tools/pipeline-builder/pipeline-step-inspector.tsx
@@ -70,6 +70,7 @@ export function PipelineStepInspector({
                             <Label htmlFor="step-label">{text("step_label")}</Label>
                             <Input
                                 id="step-label"
+                                intent="shortText"
                                 value={selectedStep.label ?? ""}
                                 onChange={(event) => onUpdateStep(selectedStep.id, (step) => ({ ...step, label: event.target.value }))}
                             />
@@ -100,10 +101,11 @@ export function PipelineStepInspector({
                                 <Label htmlFor="constant-input">{text("constant_input")}</Label>
                                 <Textarea
                                     id="constant-input"
+                                    intent="shortText"
                                     value={selectedStep.constantInput ?? ""}
                                     onChange={(event) => onUpdateStep(selectedStep.id, (step) => ({ ...step, constantInput: event.target.value }))}
                                     placeholder={text("constant_input_placeholder")}
-                                    className="min-h-[120px] font-mono text-xs"
+                                    className="font-mono text-xs"
                                 />
                                 <p className="rounded-md border border-amber-300/60 bg-amber-50 p-2 text-xs leading-5 text-amber-900 dark:border-amber-500/30 dark:bg-amber-950/30 dark:text-amber-100">
                                     {text("constant_input_persistence_hint")}
@@ -139,6 +141,7 @@ export function PipelineStepInspector({
                 <input
                     ref={fileInputRef}
                     type="file"
+                    data-input-intent="payload"
                     aria-label={text("import_recipe")}
                     accept="application/json,.json"
                     className="hidden"
diff --git a/src/features/tools/pipeline-builder/pipeline-step-list.tsx b/src/features/tools/pipeline-builder/pipeline-step-list.tsx
index 013f8519..84f33c65 100644
--- a/src/features/tools/pipeline-builder/pipeline-step-list.tsx
+++ b/src/features/tools/pipeline-builder/pipeline-step-list.tsx
@@ -90,6 +90,7 @@ export function PipelineStepList({
             <div className="mt-3 flex gap-2">
                 <select
                     aria-label={text("adapter_select")}
+                    data-input-intent="scalar"
                     className="h-11 min-w-0 flex-1 rounded-md border bg-background px-2 text-sm lg:h-9"
                     value={pendingToolKey}
                     onChange={(event) => onPendingToolKeyChange(event.target.value)}
diff --git a/src/features/tools/pipeline-builder/pipeline-template-list.tsx b/src/features/tools/pipeline-builder/pipeline-template-list.tsx
index 115d0195..eeb0eda3 100644
--- a/src/features/tools/pipeline-builder/pipeline-template-list.tsx
+++ b/src/features/tools/pipeline-builder/pipeline-template-list.tsx
@@ -46,6 +46,7 @@ export function PipelineTemplateList({ onLoadTemplate, templates, text }: Pipeli
                     <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                     <Input
                         aria-label={text("recipe_gallery_search")}
+                        intent="shortText"
                         className="pl-8"
                         placeholder={text("recipe_gallery_search_placeholder")}
                         value={query}
diff --git a/src/features/tools/public-key-jwk-helper/manifest.ts b/src/features/tools/public-key-jwk-helper/manifest.ts
index 41588868..7b938689 100644
--- a/src/features/tools/public-key-jwk-helper/manifest.ts
+++ b/src/features/tools/public-key-jwk-helper/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "public_key_jwk_helper",
     slug: "public-key-jwk-helper",
+    inputBehavior: "explicit-sample",
     category: "network-web",
     relatedTools: ["oauth_jwks_workbench", "certificate_decoder", "jwt_verifier", "jwt_workbench", "asn1_der_inspector"],
     privacy: {
diff --git a/src/features/tools/public-key-jwk-helper/page.tsx b/src/features/tools/public-key-jwk-helper/page.tsx
index 664e6ba7..34b19238 100644
--- a/src/features/tools/public-key-jwk-helper/page.tsx
+++ b/src/features/tools/public-key-jwk-helper/page.tsx
@@ -13,6 +13,7 @@ import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-war
 import { convertPublicKey, formatSummary } from "./logic"
 import { SAMPLE_PUBLIC_JWK, SAMPLE_PUBLIC_KEY_PEM } from "./samples"
 import type { PublicKeyConversionResult, PublicKeyInputFormat, PublicKeyOutputFormat } from "./types"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const INPUT_FORMAT_OPTIONS = [
     { value: "pem", label: "PEM" },
@@ -131,7 +132,7 @@ export function PublicKeyJwkHelperPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-6">
+        <ToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -240,6 +241,6 @@ export function PublicKeyJwkHelperPage() {
             ) : null}
 
             <RelatedTools toolKey="public_key_jwk_helper" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/qr-code-generator/browser-actions.ts b/src/features/tools/qr-code-generator/browser-actions.ts
index 83fa23ce..13696552 100644
--- a/src/features/tools/qr-code-generator/browser-actions.ts
+++ b/src/features/tools/qr-code-generator/browser-actions.ts
@@ -1,5 +1,8 @@
 import type { ErrorCorrectionLevel } from "./types"
 import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
+import { fileToDataUrl } from "@/core/utils/image-canvas-utils"
+
+const OBJECT_URL_REVOKE_DELAY_MS = 1_000
 
 let qrCodePromise: Promise<typeof import("qrcode")> | null = null
 let toastPromise: Promise<typeof import("sonner")["toast"]> | null = null
@@ -53,22 +56,183 @@ export function injectLogoIntoSvg(svg: string, options: { dataUrl: string; size:
 }
 
 export function readFileAsDataUrl(file: File): Promise<string> {
-    const validation = validateFileAgainstPolicy(file, FILE_INPUT_POLICIES["image-logo"])
-    if (!validation.ok) return Promise.reject(new Error(validation.message))
+    return fileToDataUrl(file, FILE_INPUT_POLICIES["image-logo"])
+}
 
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-        reader.onload = () => resolve(String(reader.result || ""))
-        reader.onerror = () => reject(reader.error || new Error("Failed to read file"))
-        reader.readAsDataURL(file)
+export type QrDecoder = typeof import("jsqr")["default"]
+
+export function createRetryableQrDecoderLoader(loader: () => Promise<QrDecoder>) {
+    let pending: Promise<QrDecoder> | null = null
+
+    return async () => {
+        pending ??= loader()
+        const active = pending
+        try {
+            return await active
+        } catch (error) {
+            if (pending === active) pending = null
+            throw error
+        }
+    }
+}
+
+const loadQrDecoderFromChunk = createRetryableQrDecoderLoader(
+    () => import("jsqr").then((module) => module.default),
+)
+
+export function loadQrDecoder() {
+    return loadQrDecoderFromChunk()
+}
+
+export type QrDecodeResult =
+    | { ok: true; payload: string; width: number; height: number }
+    | {
+        ok: false
+        error:
+            | "empty_file"
+            | "too_large"
+            | "unsupported_type"
+            | "image_too_large"
+            | "image_load_failed"
+            | "canvas_unavailable"
+            | "decoder_unavailable"
+            | "no_qr"
+    }
+
+export function decodeQrImageData(
+    imageData: Pick<ImageData, "data" | "width" | "height">,
+    decoder: QrDecoder,
+): QrDecodeResult {
+    const decoded = decoder(imageData.data, imageData.width, imageData.height, {
+        inversionAttempts: "attemptBoth",
     })
+    if (!decoded?.data) return { ok: false, error: "no_qr" }
+    return {
+        ok: true,
+        payload: decoded.data,
+        width: imageData.width,
+        height: imageData.height,
+    }
+}
+
+export async function decodeQrImageFile(file: File, decoder?: QrDecoder): Promise<QrDecodeResult> {
+    const policy = FILE_INPUT_POLICIES["qr-decode-image"]
+    const validation = validateFileAgainstPolicy(file, policy)
+    if (!validation.ok) {
+        const error = validation.reason === "too_large"
+            ? "too_large"
+            : validation.reason === "empty"
+                ? "empty_file"
+                : "unsupported_type"
+        return { ok: false, error }
+    }
+
+    let dataUrl: string
+    try {
+        dataUrl = await fileToDataUrl(file, policy)
+    } catch {
+        return { ok: false, error: "unsupported_type" }
+    }
+
+    let image: HTMLImageElement
+    try {
+        image = await loadImage(dataUrl)
+    } catch {
+        return { ok: false, error: "image_load_failed" }
+    }
+
+    const width = image.naturalWidth || image.width
+    const height = image.naturalHeight || image.height
+    if (width <= 0 || height <= 0) return { ok: false, error: "image_load_failed" }
+    if (policy.maxPixels && width * height > policy.maxPixels) {
+        return { ok: false, error: "image_too_large" }
+    }
+
+    const canvas = document.createElement("canvas")
+    canvas.width = width
+    canvas.height = height
+    const context = canvas.getContext("2d", { willReadFrequently: true })
+    if (!context) return { ok: false, error: "canvas_unavailable" }
+
+    let imageData: ImageData
+    try {
+        context.drawImage(image, 0, 0)
+        imageData = context.getImageData(0, 0, canvas.width, canvas.height)
+    } catch {
+        return { ok: false, error: "image_load_failed" }
+    }
+
+    let activeDecoder = decoder
+    if (!activeDecoder) {
+        try {
+            activeDecoder = await loadQrDecoder()
+        } catch {
+            return { ok: false, error: "decoder_unavailable" }
+        }
+    }
+
+    try {
+        return decodeQrImageData(imageData, activeDecoder)
+    } catch {
+        return { ok: false, error: "decoder_unavailable" }
+    }
+}
+
+export type DownloadResult =
+    | { ok: true }
+    | { ok: false; error: "empty_file" | "download_failed" }
+
+export function downloadUrl(url: string, filename: string): DownloadResult {
+    if (!url || !filename || !document.body) return { ok: false, error: "download_failed" }
+
+    const anchor = document.createElement("a")
+    try {
+        anchor.href = url
+        anchor.download = filename
+        anchor.rel = "noopener"
+        anchor.hidden = true
+        document.body.appendChild(anchor)
+        anchor.click()
+        return { ok: true }
+    } catch {
+        return { ok: false, error: "download_failed" }
+    } finally {
+        anchor.remove()
+    }
 }
 
-export function downloadDataUrl(dataUrl: string, filename: string) {
-    const a = document.createElement("a")
-    a.href = dataUrl
-    a.download = filename
-    a.click()
+export function downloadBlob(blob: Blob, filename: string): DownloadResult {
+    if (blob.size === 0) return { ok: false, error: "empty_file" }
+
+    let url = ""
+    try {
+        url = URL.createObjectURL(blob)
+        return downloadUrl(url, filename)
+    } catch {
+        return { ok: false, error: "download_failed" }
+    } finally {
+        if (url) {
+            window.setTimeout(() => URL.revokeObjectURL(url), OBJECT_URL_REVOKE_DELAY_MS)
+        }
+    }
+}
+
+export async function downloadCanvasPng(canvas: HTMLCanvasElement, filename: string): Promise<DownloadResult> {
+    if (typeof canvas.toBlob === "function") {
+        try {
+            const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, "image/png"))
+            if (blob?.size) return downloadBlob(blob, filename)
+        } catch {
+            // Use the local data URL fallback below.
+        }
+    }
+
+    try {
+        const dataUrl = canvas.toDataURL("image/png")
+        return dataUrl ? downloadUrl(dataUrl, filename) : { ok: false, error: "empty_file" }
+    } catch {
+        return { ok: false, error: "download_failed" }
+    }
 }
 
 export async function buildQrSvg(options: {
@@ -99,12 +263,7 @@ export async function buildQrSvg(options: {
         : svg
 }
 
-export function downloadSvg(svg: string, filename: string) {
+export function downloadSvg(svg: string, filename: string): DownloadResult {
     const blob = new Blob([svg], { type: "image/svg+xml" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = filename
-    a.click()
-    URL.revokeObjectURL(url)
+    return downloadBlob(blob, filename)
 }
diff --git a/src/features/tools/qr-code-generator/constants.ts b/src/features/tools/qr-code-generator/constants.ts
index 149c5e73..4931dad2 100644
--- a/src/features/tools/qr-code-generator/constants.ts
+++ b/src/features/tools/qr-code-generator/constants.ts
@@ -12,8 +12,7 @@ export const BUTTON_SIZE_CLASS = {
     sm: "h-9 px-3",
 } as const
 
-export const MAX_LOGO_SIZE = 2 * 1024 * 1024
-export const DEFAULT_QR_TEXT = "https://example.com/r/42"
+export const DEFAULT_QR_TEXT = ""
 export const SAMPLE_QR_TEXT = "https://example.com/qr?id=42"
 
 export const PRESETS: QrPreset[] = [
diff --git a/src/features/tools/qr-code-generator/manifest.ts b/src/features/tools/qr-code-generator/manifest.ts
index 39a24203..6b6ad688 100644
--- a/src/features/tools/qr-code-generator/manifest.ts
+++ b/src/features/tools/qr-code-generator/manifest.ts
@@ -3,8 +3,9 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "qr_code_generator",
     slug: "qr-code-generator",
+    inputBehavior: "empty-first",
     category: "generators",
-    relatedTools: ["uuid_generator", "password_generator", "url_encode_decode"],
+    relatedTools: ["barcode_generator", "image_base64", "url_encode_decode", "svg_to_png_converter"],
     privacy: {
         executionMode: "browser-local",
         offlineCapable: true,
@@ -14,5 +15,6 @@ export const toolManifest = {
             endpointType: "none",
         },
     },
-    keywords: ["qr code generator", "generate qr code online", "qr code maker"],
+    keywords: ["qr code generator", "qr code decoder", "scan qr image", "generate qr code online", "qr code maker"],
+    searchKeywords: ["decode qr", "read qr code", "qr image scanner", "二维码解析", "QRコード読み取り", "QR 코드 해독"],
 } satisfies ToolMeta
diff --git a/src/features/tools/qr-code-generator/page.tsx b/src/features/tools/qr-code-generator/page.tsx
index 8048d8a3..60e2edca 100644
--- a/src/features/tools/qr-code-generator/page.tsx
+++ b/src/features/tools/qr-code-generator/page.tsx
@@ -1,25 +1,17 @@
 "use client"
 
 import * as React from "react"
-import { Copy, Download, ImagePlus, QrCode, RotateCcw, TestTube2, Trash2 } from "lucide-react"
+import { Copy, Download, ExternalLink, QrCode, RotateCcw, TestTube2, Trash2, Upload } from "lucide-react"
 import { useLang } from "@/core/i18n/lang-provider"
-import { Input } from "@/components/ui/input"
-import { Slider } from "@/components/ui/slider"
-import { Switch } from "@/components/ui/switch"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
-import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
-import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
+import { ToolActionBar, type ToolAction, type ToolActionResult } from "@/features/tool-shell/tool-action-bar"
 import { RelatedTools } from "@/core/seo/components/related-tools"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { FILE_INPUT_POLICIES, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
+import { parseSafeExternalUrl } from "@/core/security/external-url"
 import {
     buildQrSvg,
-    downloadDataUrl,
+    decodeQrImageFile,
+    downloadCanvasPng,
     downloadSvg as downloadSvgFile,
     drawRoundedRect,
     loadImage,
@@ -27,31 +19,22 @@ import {
     loadToast,
     readFileAsDataUrl,
 } from "./browser-actions"
-import { BUTTON_BASE_CLASS, BUTTON_SIZE_CLASS, BUTTON_VARIANT_CLASS, DEFAULT_QR_TEXT, MAX_LOGO_SIZE, PRESETS, SAMPLE_QR_TEXT } from "./constants"
+import { DEFAULT_QR_TEXT, PRESETS, SAMPLE_QR_TEXT } from "./constants"
+import { QrDecodePanel, QrGeneratePanel, QrModeTabs, type DecodeStatus, type QrMode } from "./panels"
 import type { ErrorCorrectionLevel, QrPreset } from "./types"
-
-function joinClasses(...values: Array<string | null | undefined | false>) {
-    return values.filter(Boolean).join(" ")
-}
-
-type InlineButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: keyof typeof BUTTON_VARIANT_CLASS
-}
-
-function InlineButton({
-    className,
-    type = "button",
-    variant = "outline",
-    ...props
-}: InlineButtonProps) {
-    return (
-        <button
-            type={type}
-            className={joinClasses(BUTTON_BASE_CLASS, BUTTON_VARIANT_CLASS[variant], BUTTON_SIZE_CLASS.sm, className)}
-            {...props}
-        />
-    )
-}
+import { ToolPageContainer } from "@/components/layout/page-container"
+const LOGO_FILE_POLICY = FILE_INPUT_POLICIES["image-logo"]
+
+const DECODE_ERROR_KEYS = {
+    empty_file: "decode_empty_file",
+    too_large: "decode_too_large",
+    unsupported_type: "decode_unsupported",
+    image_too_large: "decode_dimensions_too_large",
+    image_load_failed: "decode_image_failed",
+    canvas_unavailable: "decode_image_failed",
+    decoder_unavailable: "decode_decoder_unavailable",
+    no_qr: "decode_no_qr",
+} as const
 
 export function QrCodeGeneratorPage() {
     const { t } = useLang()
@@ -78,9 +61,22 @@ export function QrCodeGeneratorPage() {
     const [logoScale, setLogoScale] = React.useState(22)
     const [activePreset, setActivePreset] = React.useState("default")
     const [dataUrl, setDataUrl] = React.useState("")
+    const [mode, setMode] = React.useState<QrMode>("generate")
+    const [decodeStatus, setDecodeStatus] = React.useState<DecodeStatus>("idle")
+    const [decodedPayload, setDecodedPayload] = React.useState("")
+    const [decodeError, setDecodeError] = React.useState("")
+    const [decodeFileName, setDecodeFileName] = React.useState("")
+    const [decodeDragActive, setDecodeDragActive] = React.useState(false)
 
     const canvasRef = React.useRef<HTMLCanvasElement>(null)
     const logoInputRef = React.useRef<HTMLInputElement>(null)
+    const decodeInputRef = React.useRef<HTMLInputElement>(null)
+    const decodeRequestRef = React.useRef(0)
+
+    const decodedUrl = React.useMemo(() => {
+        const parsed = parseSafeExternalUrl(decodedPayload, { requireHttps: false })
+        return parsed.ok ? parsed.url : null
+    }, [decodedPayload])
 
     const renderToCanvas = React.useCallback(async () => {
         if (!text.trim()) {
@@ -151,22 +147,23 @@ export function QrCodeGeneratorPage() {
         setActivePreset(preset.id)
     }
 
-    const handleLogoUpload = (file: File | null) => {
+    const handleLogoUpload = async (file: File | null) => {
         if (!file) return
-        if (!file.type.startsWith("image/")) {
-            void notifyError(textFor("logo_invalid"))
-            return
-        }
-        if (file.size > MAX_LOGO_SIZE) {
-            void notifyError(textFor("logo_too_large"))
+
+        const validation = validateFileAgainstPolicy(file, LOGO_FILE_POLICY)
+        if (!validation.ok) {
+            await notifyError(textFor(validation.reason === "too_large" ? "logo_too_large" : "logo_invalid"))
             return
         }
 
-        void readFileAsDataUrl(file).then((dataUrl) => {
+        try {
+            const dataUrl = await readFileAsDataUrl(file)
             setLogoDataUrl(dataUrl)
             setLogoName(file.name)
             setLogoEnabled(true)
-        })
+        } catch {
+            await notifyError(textFor("logo_invalid"))
+        }
     }
 
     const handleRemoveLogo = () => {
@@ -175,14 +172,26 @@ export function QrCodeGeneratorPage() {
         setLogoEnabled(false)
     }
 
-    const downloadPng = () => {
-        if (!dataUrl) return
-        downloadDataUrl(dataUrl, "qr-code.png")
-        void notifySuccess(textFor("downloaded_png"))
+    const downloadPng = async (): Promise<ToolActionResult> => {
+        const canvas = canvasRef.current
+        if (!dataUrl || !canvas) {
+            return { status: "failed", message: textFor("download_error") }
+        }
+
+        const result = await downloadCanvasPng(canvas, "qr-code.png")
+        if (result.ok) {
+            await notifySuccess(textFor("downloaded_png"))
+            return { status: "success", message: textFor("downloaded_png") }
+        }
+
+        await notifyError(textFor("download_error"))
+        return { status: "failed", message: textFor("download_error") }
     }
 
-    const downloadSvg = async () => {
-        if (!text.trim()) return
+    const downloadSvg = async (): Promise<ToolActionResult> => {
+        if (!text.trim()) {
+            return { status: "failed", message: textFor("download_error") }
+        }
 
         try {
             const finalSvg = await buildQrSvg({
@@ -196,10 +205,17 @@ export function QrCodeGeneratorPage() {
                 logoEnabled,
                 logoScale,
             })
-            downloadSvgFile(finalSvg, "qr-code.svg")
-            await notifySuccess(textFor("downloaded_svg"))
+            const result = downloadSvgFile(finalSvg, "qr-code.svg")
+            if (result.ok) {
+                await notifySuccess(textFor("downloaded_svg"))
+                return { status: "success", message: textFor("downloaded_svg") }
+            }
+
+            await notifyError(textFor("download_error"))
+            return { status: "failed", message: textFor("download_error") }
         } catch {
             await notifyError(textFor("download_error"))
+            return { status: "failed", message: textFor("download_error") }
         }
     }
 
@@ -214,7 +230,6 @@ export function QrCodeGeneratorPage() {
     }
 
     const handleReset = () => {
-        setText(DEFAULT_QR_TEXT)
         applyPreset(PRESETS[0])
         setLogoEnabled(false)
         setLogoDataUrl(null)
@@ -231,7 +246,49 @@ export function QrCodeGeneratorPage() {
         applyPreset(PRESETS[2])
     }
 
-    const actions: ToolAction[] = [
+    const clearDecode = () => {
+        decodeRequestRef.current += 1
+        setDecodeStatus("idle")
+        setDecodedPayload("")
+        setDecodeError("")
+        setDecodeFileName("")
+        if (decodeInputRef.current) decodeInputRef.current.value = ""
+    }
+
+    const handleDecodeFile = async (file: File | null) => {
+        if (!file) return
+        const requestId = ++decodeRequestRef.current
+        setDecodeStatus("decoding")
+        setDecodedPayload("")
+        setDecodeError("")
+        setDecodeFileName(file.name)
+
+        const result = await decodeQrImageFile(file)
+        if (requestId !== decodeRequestRef.current) return
+        if (!result.ok) {
+            const message = textFor(DECODE_ERROR_KEYS[result.error])
+            setDecodeStatus("error")
+            setDecodeError(message)
+            await notifyError(message)
+            return
+        }
+
+        setDecodedPayload(result.payload)
+        setDecodeStatus("success")
+    }
+
+    const handleCopyDecoded = async (): Promise<ToolActionResult> => {
+        if (!decodedPayload) return { status: "failed", message: t.common.copy_failed }
+        const result = await safeClipboardWrite(decodedPayload)
+        if (!result.ok) {
+            await notifyError(t.common.copy_failed)
+            return { status: "failed", message: t.common.copy_failed }
+        }
+        await notifySuccess(t.common.copied, textFor("decode_copy_success"))
+        return { status: "success", message: textFor("decode_copy_success") }
+    }
+
+    const generateActions: ToolAction[] = [
         {
             id: "sample",
             label: t.common.sample,
@@ -273,8 +330,39 @@ export function QrCodeGeneratorPage() {
         },
     ]
 
+    const decodeActions: ToolAction[] = [
+        {
+            id: "upload",
+            label: textFor("decode_upload"),
+            icon: Upload,
+            onClick: () => decodeInputRef.current?.click(),
+        },
+        {
+            id: "copy",
+            label: t.common.copy,
+            icon: Copy,
+            onClick: handleCopyDecoded,
+            disabled: !decodedPayload,
+        },
+        {
+            id: "open",
+            label: t.common.open,
+            icon: ExternalLink,
+            href: decodedUrl?.toString() || "#",
+            disabled: !decodedUrl,
+            disabledReason: decodedPayload && !decodedUrl ? textFor("decode_not_url") : undefined,
+        },
+        {
+            id: "clear",
+            label: t.common.clear,
+            icon: Trash2,
+            onClick: clearDecode,
+            disabled: decodeStatus === "idle" && !decodeFileName,
+        },
+    ]
+
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -285,145 +373,54 @@ export function QrCodeGeneratorPage() {
                         {textFor("description")}
                     </p>
                 </div>
-                <ToolActionBar actions={actions} />
+                <QrModeTabs mode={mode} onChange={setMode} textFor={textFor} />
+                <ToolActionBar actions={mode === "generate" ? generateActions : decodeActions} />
             </div>
 
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-12">
-                <div className="md:col-span-4 lg:col-span-4">
-                    <div className="space-y-5 rounded-lg border bg-card p-5 shadow-sm">
-                        <div className="space-y-2">
-                            <label className="text-sm font-medium">{textFor("content")}</label>
-                            <textarea
-                                value={text}
-                                onChange={(event) => setText(event.target.value)}
-                                className="h-24 w-full resize-none rounded-md border bg-background px-3 py-2 font-mono text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                                placeholder={textFor("placeholder")}
-                            />
-                        </div>
-
-                        <div className="space-y-2">
-                            <label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                                {textFor("presets")}
-                            </label>
-                            <div className="flex flex-wrap gap-2">
-                                {PRESETS.map((preset) => (
-                                    <InlineButton
-                                        key={preset.id}
-                                        type="button"
-                                        variant={activePreset === preset.id ? "default" : "outline"}
-                                        onClick={() => applyPreset(preset)}
-                                    >
-                                        {textFor(preset.labelKey)}
-                                    </InlineButton>
-                                ))}
-                            </div>
-                        </div>
-
-                        <div className="space-y-2">
-                            <label className="text-sm font-medium">{textFor("size")} {size}px</label>
-                            <Slider value={[size]} onValueChange={([v]) => setSize(v)} min={128} max={640} step={32} />
-                        </div>
-
-                        <div className="space-y-2">
-                            <label className="text-sm font-medium">{textFor("margin")} {margin}</label>
-                            <Slider value={[margin]} onValueChange={([v]) => setMargin(v)} min={0} max={8} step={1} />
-                        </div>
-
-                        <div className="space-y-2">
-                            <label className="text-sm font-medium">{textFor("ecc")}</label>
-                            <Select value={errorCorrectionLevel} onValueChange={(value) => setErrorCorrectionLevel(value as ErrorCorrectionLevel)}>
-                                <SelectTrigger>
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="L">{textFor("ecc_l")}</SelectItem>
-                                    <SelectItem value="M">{textFor("ecc_m")}</SelectItem>
-                                    <SelectItem value="Q">{textFor("ecc_q")}</SelectItem>
-                                    <SelectItem value="H">{textFor("ecc_h")}</SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
-
-                        <div className="grid grid-cols-2 gap-3">
-                            <div className="space-y-1.5">
-                                <label className="text-sm font-medium">{textFor("fg")}</label>
-                                <div className="flex items-center gap-2">
-                                    <input
-                                        type="color"
-                                        value={fgColor}
-                                        onChange={(event) => setFgColor(event.target.value)}
-                                        className="h-9 w-9 cursor-pointer rounded border-0 bg-transparent p-0"
-                                    />
-                                    <Input value={fgColor} onChange={(event) => setFgColor(event.target.value)} className="h-9 text-xs font-mono" />
-                                </div>
-                            </div>
-                            <div className="space-y-1.5">
-                                <label className="text-sm font-medium">{textFor("bg")}</label>
-                                <div className="flex items-center gap-2">
-                                    <input
-                                        type="color"
-                                        value={bgColor}
-                                        onChange={(event) => setBgColor(event.target.value)}
-                                        className="h-9 w-9 cursor-pointer rounded border-0 bg-transparent p-0"
-                                    />
-                                    <Input value={bgColor} onChange={(event) => setBgColor(event.target.value)} className="h-9 text-xs font-mono" />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="space-y-3 rounded-md border bg-muted/20 p-3">
-                            <div className="flex items-center justify-between">
-                                <label className="text-sm font-medium">{textFor("logo_toggle")}</label>
-                                <Switch checked={logoEnabled} onCheckedChange={setLogoEnabled} />
-                            </div>
-
-                            <div className="flex flex-wrap items-center gap-2">
-                                <InlineButton type="button" variant="outline" onClick={() => logoInputRef.current?.click()}>
-                                    <ImagePlus className="mr-1 h-4 w-4" />
-                                    {textFor("logo_upload")}
-                                </InlineButton>
-                                <InlineButton type="button" variant="outline" onClick={handleRemoveLogo} disabled={!logoDataUrl}>
-                                    {textFor("logo_remove")}
-                                </InlineButton>
-                                <input
-                                    ref={logoInputRef}
-                                    type="file"
-                                    className="hidden"
-                                    accept="image/*"
-                                    onChange={(event) => handleLogoUpload(event.target.files?.[0] || null)}
-                                />
-                            </div>
-
-                            {logoName ? (
-                                <p className="text-xs text-muted-foreground">{logoName}</p>
-                            ) : (
-                                <p className="text-xs text-muted-foreground">{textFor("logo_hint")}</p>
-                            )}
-
-                            <div className="space-y-2">
-                                <label className="text-sm font-medium">{textFor("logo_size")} {logoScale}%</label>
-                                <Slider value={[logoScale]} onValueChange={([v]) => setLogoScale(v)} min={12} max={34} step={1} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="md:col-span-8 lg:col-span-8">
-                    <ToolPreviewArea
-                        title={textFor("preview_label") || "Preview"}
-                        metadata={`${size} × ${size} px`}
-                        className="h-full min-h-[540px]"
-                    >
-                        {text.trim() ? (
-                            <canvas ref={canvasRef} className="rounded-xl shadow-2xl transition-transform duration-300 hover:scale-[1.02]" />
-                        ) : (
-                            <p className="text-sm text-muted-foreground">{textFor("prompt")}</p>
-                        )}
-                    </ToolPreviewArea>
-                </div>
-            </div>
+            {mode === "generate" ? (
+                <QrGeneratePanel
+                    activePreset={activePreset}
+                    applyPreset={applyPreset}
+                    bgColor={bgColor}
+                    canvasRef={canvasRef}
+                    errorCorrectionLevel={errorCorrectionLevel}
+                    fgColor={fgColor}
+                    handleLogoUpload={handleLogoUpload}
+                    handleRemoveLogo={handleRemoveLogo}
+                    logoDataUrl={logoDataUrl}
+                    logoEnabled={logoEnabled}
+                    logoInputRef={logoInputRef}
+                    logoName={logoName}
+                    logoScale={logoScale}
+                    margin={margin}
+                    setBgColor={setBgColor}
+                    setErrorCorrectionLevel={setErrorCorrectionLevel}
+                    setFgColor={setFgColor}
+                    setLogoEnabled={setLogoEnabled}
+                    setLogoScale={setLogoScale}
+                    setMargin={setMargin}
+                    setSize={setSize}
+                    setText={setText}
+                    size={size}
+                    text={text}
+                    textFor={textFor}
+                />
+            ) : (
+                <QrDecodePanel
+                    decodeDragActive={decodeDragActive}
+                    decodeError={decodeError}
+                    decodeFileName={decodeFileName}
+                    decodeInputRef={decodeInputRef}
+                    decodedPayload={decodedPayload}
+                    decodedUrl={decodedUrl}
+                    decodeStatus={decodeStatus}
+                    handleDecodeFile={handleDecodeFile}
+                    setDecodeDragActive={setDecodeDragActive}
+                    textFor={textFor}
+                />
+            )}
 
             <RelatedTools toolKey="qr_code_generator" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/qr-code-generator/panels.tsx b/src/features/tools/qr-code-generator/panels.tsx
new file mode 100644
index 00000000..ca496e80
--- /dev/null
+++ b/src/features/tools/qr-code-generator/panels.tsx
@@ -0,0 +1,362 @@
+import * as React from "react"
+import { FileImage, ImagePlus, LoaderCircle, QrCode, ScanLine } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Slider } from "@/components/ui/slider"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import { FILE_INPUT_POLICIES } from "@/core/files/file-input-policy"
+import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
+import { BUTTON_BASE_CLASS, BUTTON_SIZE_CLASS, BUTTON_VARIANT_CLASS, PRESETS } from "./constants"
+import type { ErrorCorrectionLevel, QrPreset } from "./types"
+
+export type QrMode = "generate" | "decode"
+export type DecodeStatus = "idle" | "decoding" | "success" | "error"
+
+type TextFor = (key: string) => string
+
+function joinClasses(...values: Array<string | null | undefined | false>) {
+    return values.filter(Boolean).join(" ")
+}
+
+type InlineButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: keyof typeof BUTTON_VARIANT_CLASS
+}
+
+function InlineButton({ className, type = "button", variant = "outline", ...props }: InlineButtonProps) {
+    return (
+        <button
+            type={type}
+            className={joinClasses(BUTTON_BASE_CLASS, BUTTON_VARIANT_CLASS[variant], BUTTON_SIZE_CLASS.sm, className)}
+            {...props}
+        />
+    )
+}
+
+export function QrModeTabs({ mode, onChange, textFor }: { mode: QrMode; onChange: (mode: QrMode) => void; textFor: TextFor }) {
+    return (
+        <div role="tablist" aria-label={textFor("mode_label")} className="inline-grid w-full grid-cols-2 rounded-md border bg-muted/40 p-1 sm:w-fit">
+            <button
+                type="button"
+                role="tab"
+                id="qr-generate-tab"
+                aria-controls="qr-generate-panel"
+                aria-selected={mode === "generate"}
+                onClick={() => onChange("generate")}
+                className={joinClasses(
+                    "inline-flex min-h-11 items-center justify-center gap-2 rounded-sm px-4 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 lg:min-h-9",
+                    mode === "generate" ? "bg-background text-foreground shadow-xs" : "text-muted-foreground hover:text-foreground",
+                )}
+            >
+                <QrCode className="h-4 w-4" />
+                {textFor("mode_generate")}
+            </button>
+            <button
+                type="button"
+                role="tab"
+                id="qr-decode-tab"
+                aria-controls="qr-decode-panel"
+                aria-selected={mode === "decode"}
+                onClick={() => onChange("decode")}
+                className={joinClasses(
+                    "inline-flex min-h-11 items-center justify-center gap-2 rounded-sm px-4 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 lg:min-h-9",
+                    mode === "decode" ? "bg-background text-foreground shadow-xs" : "text-muted-foreground hover:text-foreground",
+                )}
+            >
+                <ScanLine className="h-4 w-4" />
+                {textFor("mode_decode")}
+            </button>
+        </div>
+    )
+}
+
+type QrGeneratePanelProps = {
+    activePreset: string
+    applyPreset: (preset: QrPreset) => void
+    bgColor: string
+    canvasRef: React.RefObject<HTMLCanvasElement | null>
+    errorCorrectionLevel: ErrorCorrectionLevel
+    fgColor: string
+    handleLogoUpload: (file: File | null) => void | Promise<void>
+    handleRemoveLogo: () => void
+    logoDataUrl: string | null
+    logoEnabled: boolean
+    logoInputRef: React.RefObject<HTMLInputElement | null>
+    logoName: string
+    logoScale: number
+    margin: number
+    setBgColor: (value: string) => void
+    setErrorCorrectionLevel: (value: ErrorCorrectionLevel) => void
+    setFgColor: (value: string) => void
+    setLogoEnabled: (value: boolean) => void
+    setLogoScale: (value: number) => void
+    setMargin: (value: number) => void
+    setSize: (value: number) => void
+    setText: (value: string) => void
+    size: number
+    text: string
+    textFor: TextFor
+}
+
+export function QrGeneratePanel({
+    activePreset,
+    applyPreset,
+    bgColor,
+    canvasRef,
+    errorCorrectionLevel,
+    fgColor,
+    handleLogoUpload,
+    handleRemoveLogo,
+    logoDataUrl,
+    logoEnabled,
+    logoInputRef,
+    logoName,
+    logoScale,
+    margin,
+    setBgColor,
+    setErrorCorrectionLevel,
+    setFgColor,
+    setLogoEnabled,
+    setLogoScale,
+    setMargin,
+    setSize,
+    setText,
+    size,
+    text,
+    textFor,
+}: QrGeneratePanelProps) {
+    return (
+        <div id="qr-generate-panel" role="tabpanel" aria-labelledby="qr-generate-tab" className="grid grid-cols-1 gap-6 md:grid-cols-12">
+            <div className="md:col-span-4 lg:col-span-4">
+                <div className="space-y-5 rounded-lg border bg-card p-5 shadow-sm">
+                    <div className="space-y-2">
+                        <label htmlFor="qr-content" className="text-sm font-medium">{textFor("content")}</label>
+                        <Textarea
+                            id="qr-content"
+                            intent="shortText"
+                            value={text}
+                            onChange={(event) => setText(event.target.value)}
+                            className="bg-background font-mono text-sm"
+                            placeholder={textFor("placeholder")}
+                        />
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{textFor("presets")}</label>
+                        <div className="flex flex-wrap gap-2">
+                            {PRESETS.map((preset) => (
+                                <InlineButton key={preset.id} variant={activePreset === preset.id ? "default" : "outline"} onClick={() => applyPreset(preset)}>
+                                    {textFor(preset.labelKey)}
+                                </InlineButton>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium">{textFor("size")} {size}px</label>
+                        <Slider value={[size]} onValueChange={([value]) => setSize(value)} min={128} max={640} step={32} />
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium">{textFor("margin")} {margin}</label>
+                        <Slider value={[margin]} onValueChange={([value]) => setMargin(value)} min={0} max={8} step={1} />
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium">{textFor("ecc")}</label>
+                        <Select value={errorCorrectionLevel} onValueChange={(value) => setErrorCorrectionLevel(value as ErrorCorrectionLevel)}>
+                            <SelectTrigger><SelectValue /></SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="L">{textFor("ecc_l")}</SelectItem>
+                                <SelectItem value="M">{textFor("ecc_m")}</SelectItem>
+                                <SelectItem value="Q">{textFor("ecc_q")}</SelectItem>
+                                <SelectItem value="H">{textFor("ecc_h")}</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                        <ColorControl label={textFor("fg")} value={fgColor} onChange={setFgColor} />
+                        <ColorControl label={textFor("bg")} value={bgColor} onChange={setBgColor} />
+                    </div>
+
+                    <div className="space-y-3 rounded-md border bg-muted/20 p-3">
+                        <div className="flex items-center justify-between">
+                            <label className="text-sm font-medium">{textFor("logo_toggle")}</label>
+                            <Switch checked={logoEnabled} onCheckedChange={setLogoEnabled} />
+                        </div>
+                        <div className="flex flex-wrap items-center gap-2">
+                            <InlineButton variant="outline" onClick={() => logoInputRef.current?.click()}>
+                                <ImagePlus className="mr-1 h-4 w-4" />
+                                {textFor("logo_upload")}
+                            </InlineButton>
+                            <InlineButton variant="outline" onClick={handleRemoveLogo} disabled={!logoDataUrl}>{textFor("logo_remove")}</InlineButton>
+                            <input
+                                ref={logoInputRef}
+                                type="file"
+                                data-input-intent="payload"
+                                className="hidden"
+                                accept={FILE_INPUT_POLICIES["image-logo"].accept}
+                                onChange={(event) => {
+                                    const file = event.currentTarget.files?.[0] || null
+                                    event.currentTarget.value = ""
+                                    void handleLogoUpload(file)
+                                }}
+                            />
+                        </div>
+                        <p className="text-xs text-muted-foreground">{logoName || textFor("logo_hint")}</p>
+                        <div className="space-y-2">
+                            <label className="text-sm font-medium">{textFor("logo_size")} {logoScale}%</label>
+                            <Slider value={[logoScale]} onValueChange={([value]) => setLogoScale(value)} min={12} max={34} step={1} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="md:col-span-8 lg:col-span-8">
+                <ToolPreviewArea title={textFor("preview_label") || "Preview"} metadata={`${size} x ${size} px`} className="h-full min-h-[540px]">
+                    {text.trim() ? (
+                        <canvas ref={canvasRef} className="rounded-xl shadow-2xl transition-transform duration-300 hover:scale-[1.02]" />
+                    ) : (
+                        <p className="text-sm text-muted-foreground">{textFor("prompt")}</p>
+                    )}
+                </ToolPreviewArea>
+            </div>
+        </div>
+    )
+}
+
+function ColorControl({ label, onChange, value }: { label: string; onChange: (value: string) => void; value: string }) {
+    return (
+        <div className="space-y-1.5">
+            <label className="text-sm font-medium">{label}</label>
+            <div className="flex items-center gap-2">
+                <input
+                    type="color"
+                    aria-label={`${label} swatch`}
+                    data-input-intent="scalar"
+                    value={value}
+                    onChange={(event) => onChange(event.target.value)}
+                    className="size-11 shrink-0 cursor-pointer rounded border-0 bg-transparent p-0 lg:size-9"
+                />
+                <Input
+                    aria-label={label}
+                    intent="scalar"
+                    value={value}
+                    onChange={(event) => onChange(event.target.value)}
+                    className="text-xs font-mono"
+                />
+            </div>
+        </div>
+    )
+}
+
+type QrDecodePanelProps = {
+    decodeDragActive: boolean
+    decodeError: string
+    decodeFileName: string
+    decodeInputRef: React.RefObject<HTMLInputElement | null>
+    decodedPayload: string
+    decodedUrl: URL | null
+    decodeStatus: DecodeStatus
+    handleDecodeFile: (file: File | null) => void | Promise<void>
+    setDecodeDragActive: (value: boolean) => void
+    textFor: TextFor
+}
+
+export function QrDecodePanel({
+    decodeDragActive,
+    decodeError,
+    decodeFileName,
+    decodeInputRef,
+    decodedPayload,
+    decodedUrl,
+    decodeStatus,
+    handleDecodeFile,
+    setDecodeDragActive,
+    textFor,
+}: QrDecodePanelProps) {
+    return (
+        <section id="qr-decode-panel" role="tabpanel" aria-labelledby="qr-decode-tab" className="grid grid-cols-1 gap-6 md:grid-cols-12">
+            <div className="space-y-4 md:col-span-5">
+                <label
+                    className={joinClasses(
+                        "flex min-h-[260px] cursor-pointer flex-col items-center justify-center gap-3 rounded-md border-2 border-dashed bg-card p-6 text-center transition-colors focus-within:ring-2 focus-within:ring-ring/50",
+                        decodeDragActive ? "border-primary bg-primary/5" : "border-border hover:border-primary/60",
+                    )}
+                    onDragEnter={(event) => {
+                        event.preventDefault()
+                        setDecodeDragActive(true)
+                    }}
+                    onDragOver={(event) => {
+                        event.preventDefault()
+                        event.dataTransfer.dropEffect = "copy"
+                    }}
+                    onDragLeave={() => setDecodeDragActive(false)}
+                    onDrop={(event) => {
+                        event.preventDefault()
+                        setDecodeDragActive(false)
+                        void handleDecodeFile(event.dataTransfer.files?.[0] || null)
+                    }}
+                >
+                    <input
+                        ref={decodeInputRef}
+                        type="file"
+                        data-input-intent="payload"
+                        className="sr-only"
+                        accept={FILE_INPUT_POLICIES["qr-decode-image"].accept}
+                        onChange={(event) => {
+                            const file = event.currentTarget.files?.[0] || null
+                            event.currentTarget.value = ""
+                            void handleDecodeFile(file)
+                        }}
+                    />
+                    {decodeStatus === "decoding" ? (
+                        <LoaderCircle className="h-10 w-10 animate-spin text-primary" aria-hidden="true" />
+                    ) : (
+                        <FileImage className="h-10 w-10 text-primary" aria-hidden="true" />
+                    )}
+                    <span className="text-base font-semibold text-foreground">
+                        {decodeStatus === "decoding" ? textFor("decode_processing") : textFor("decode_drop")}
+                    </span>
+                    <span className="text-sm text-muted-foreground">{textFor("decode_formats")}</span>
+                    {decodeFileName ? <span className="max-w-full truncate text-xs text-muted-foreground">{decodeFileName}</span> : null}
+                </label>
+
+                <p className="text-sm text-muted-foreground">{textFor("decode_one_code")}</p>
+                {decodeStatus === "error" ? (
+                    <div role="alert" data-testid="qr-decode-error" className="rounded-md border border-destructive/35 bg-destructive/10 p-3 text-sm text-destructive">
+                        {decodeError}
+                    </div>
+                ) : null}
+            </div>
+
+            <div className="md:col-span-7">
+                <ToolPreviewArea
+                    title={textFor("decode_result")}
+                    metadata={decodedPayload ? (decodedUrl ? textFor("decode_type_url") : textFor("decode_type_text")) : undefined}
+                    className="h-full min-h-[420px]"
+                >
+                    {decodedPayload ? (
+                        <div className="flex h-full w-full flex-col gap-3 text-left">
+                            <div className="text-xs font-semibold uppercase text-muted-foreground">
+                                {decodedUrl ? textFor("decode_type_url") : textFor("decode_type_text")}
+                            </div>
+                            <pre
+                                data-testid="qr-decoded-output"
+                                data-input-intent="generatedOutput"
+                                className="max-h-[360px] min-h-[180px] w-full overflow-auto whitespace-pre-wrap break-all rounded-md border bg-background p-4 font-mono text-sm text-foreground"
+                            >
+                                {decodedPayload}
+                            </pre>
+                        </div>
+                    ) : (
+                        <p className="text-sm text-muted-foreground">
+                            {decodeStatus === "decoding" ? textFor("decode_processing") : textFor("decode_prompt")}
+                        </p>
+                    )}
+                </ToolPreviewArea>
+            </div>
+        </section>
+    )
+}
diff --git a/src/features/tools/react-native-shadow-generator/page.tsx b/src/features/tools/react-native-shadow-generator/page.tsx
index 24e14dd8..61af955d 100644
--- a/src/features/tools/react-native-shadow-generator/page.tsx
+++ b/src/features/tools/react-native-shadow-generator/page.tsx
@@ -9,6 +9,7 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 function clamp(value: number, min: number, max: number): number {
     if (!Number.isFinite(value)) return min
@@ -105,7 +106,7 @@ export function ReactNativeShadowGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -203,6 +204,6 @@ export function ReactNativeShadowGeneratorPage() {
             </div>
 
             <RelatedTools toolKey="react_native_shadow_generator" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/regex-generator/page.tsx b/src/features/tools/regex-generator/page.tsx
index 44b65ec6..78524286 100644
--- a/src/features/tools/regex-generator/page.tsx
+++ b/src/features/tools/regex-generator/page.tsx
@@ -12,6 +12,7 @@ import {
     getRegexPresetSample,
     type RegexGeneratorPreset,
 } from "@/features/tools/regex-generator/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const PRESET_OPTIONS: Array<{ value: RegexGeneratorPreset; labelKey: string }> = [
     { value: "email", labelKey: "preset_email" },
@@ -204,7 +205,7 @@ export function RegexGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -339,6 +340,6 @@ export function RegexGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/regex-tester/manifest.ts b/src/features/tools/regex-tester/manifest.ts
index d917ccb3..f6fd2347 100644
--- a/src/features/tools/regex-tester/manifest.ts
+++ b/src/features/tools/regex-tester/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "regex_tester",
     slug: "regex-tester",
+    inputBehavior: "explicit-sample",
     category: "network-web",
     relatedTools: ["jsonpath_playground", "text_diff_checker", "url_encode_decode"],
     privacy: {
diff --git a/src/features/tools/regex-tester/page.tsx b/src/features/tools/regex-tester/page.tsx
index caea8fcb..07653ccd 100644
--- a/src/features/tools/regex-tester/page.tsx
+++ b/src/features/tools/regex-tester/page.tsx
@@ -8,6 +8,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { runRegexTestTask } from "./regex-test-task"
 import { type RegexMatchSummary } from "./utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_PATTERN = "[A-Z][a-z]+"
 const SAMPLE_FLAGS = "g"
@@ -54,7 +55,12 @@ export function RegexTesterPage() {
                     setMatches(result.matches)
                     setError(result.limited ? toolT.error_match_limit : null)
                 } else {
-                    setError(result.error || toolT.error_invalid_regex)
+                    const localizedTaskError = result.errorCode === "worker_timeout"
+                        ? toolT.error_worker_timeout
+                        : result.errorCode === "safe_evaluation_unavailable"
+                            ? toolT.error_safe_evaluation_unavailable
+                            : null
+                    setError(localizedTaskError || result.error || toolT.error_invalid_regex)
                     setMatches([])
                 }
             })
@@ -74,7 +80,15 @@ export function RegexTesterPage() {
         return () => {
             controller.abort()
         }
-    }, [flags, pattern, testString, toolT.error_invalid_regex, toolT.error_match_limit])
+    }, [
+        flags,
+        pattern,
+        testString,
+        toolT.error_invalid_regex,
+        toolT.error_match_limit,
+        toolT.error_safe_evaluation_unavailable,
+        toolT.error_worker_timeout,
+    ])
 
     const handleClear = () => {
         setPattern("")
@@ -112,7 +126,7 @@ export function RegexTesterPage() {
     ]
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -139,7 +153,8 @@ export function RegexTesterPage() {
                                 <Input
                                     id="regex-pattern"
                                     type="text"
-                                    className={`font-mono text-lg h-12 pl-8 pr-4 ${error ? 'border-destructive focus-visible:ring-destructive' : ''}`}
+                                    intent="shortText"
+                                    className={`font-mono text-lg pl-8 pr-4 ${error ? 'border-destructive focus-visible:ring-destructive' : ''}`}
                                     placeholder={toolT.pattern_placeholder}
                                     value={pattern}
                                     onChange={(e) => setPattern(e.target.value)}
@@ -159,7 +174,8 @@ export function RegexTesterPage() {
                             <Input
                                 id="regex-flags"
                                 type="text"
-                                className="font-mono text-lg h-12"
+                                intent="scalar"
+                                className="font-mono text-lg"
                                 placeholder={toolT.flags_placeholder}
                                 value={flags}
                                 onChange={(e) => setFlags(e.target.value.replace(/[^gimsuy]/g, ''))} // Restrict to valid JS regex flags
@@ -175,7 +191,8 @@ export function RegexTesterPage() {
                         <span>{toolT.test_string_label}</span>
                     </div>
                     <Textarea
-                        className="flex-1 min-h-[350px] resize-none border-0 focus-visible:ring-1 focus-visible:ring-ring/50 p-4 font-mono text-base leading-relaxed"
+                        intent="payload"
+                        className="flex-1 resize-none border-0 focus-visible:ring-1 focus-visible:ring-ring/50 p-4 font-mono text-base leading-relaxed"
                         placeholder={toolT.test_string_placeholder}
                         value={testString}
                         onChange={(e) => setTestString(e.target.value)}
@@ -247,6 +264,6 @@ export function RegexTesterPage() {
                 </div>
 
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/regex-tester/regex-test-task.ts b/src/features/tools/regex-tester/regex-test-task.ts
index a9e417ca..2c506d08 100644
--- a/src/features/tools/regex-tester/regex-test-task.ts
+++ b/src/features/tools/regex-tester/regex-test-task.ts
@@ -1,5 +1,5 @@
 import { runWorkerTask, WorkerTaskError } from "@/core/workers/run-worker-task"
-import { testRegexPattern, type RegexTestResult } from "./utils"
+import { type RegexTestResult } from "./utils"
 
 type RegexTestWorkerInput = {
     pattern: string
@@ -14,10 +14,23 @@ type RegexTestTaskOptions = {
     maxMatches?: number
 }
 
-function timeoutResult(message: string): RegexTestResult {
+export type RegexTestTaskErrorCode = "worker_timeout" | "safe_evaluation_unavailable"
+
+export type RegexTestTaskResult = RegexTestResult & {
+    errorCode?: RegexTestTaskErrorCode
+    workerErrorCode?: string
+}
+
+function failureResult(
+    errorCode: RegexTestTaskErrorCode,
+    workerErrorCode: string,
+    message: string,
+): RegexTestTaskResult {
     return {
         ok: false,
         error: message,
+        errorCode,
+        workerErrorCode,
         matches: [],
         limited: false,
         elapsedMs: 0,
@@ -25,14 +38,22 @@ function timeoutResult(message: string): RegexTestResult {
     }
 }
 
+function unavailableResult(workerErrorCode: string): RegexTestTaskResult {
+    return failureResult(
+        "safe_evaluation_unavailable",
+        workerErrorCode,
+        "Safe regex evaluation is unavailable because the isolated worker could not run. Check browser or content-security settings and try again.",
+    )
+}
+
 export async function runRegexTestTask(
     pattern: string,
     flags: string,
     testString: string,
     options: RegexTestTaskOptions = {},
-): Promise<RegexTestResult> {
+): Promise<RegexTestTaskResult> {
     if (typeof Worker === "undefined") {
-        return testRegexPattern(pattern, flags, testString, options.maxMatches)
+        return unavailableResult("WORKER_UNAVAILABLE")
     }
 
     try {
@@ -43,11 +64,15 @@ export async function runRegexTestTask(
         )
     } catch (error) {
         if (error instanceof WorkerTaskError && error.code === "WORKER_TIMEOUT") {
-            return timeoutResult("Regex evaluation was stopped after the safety timeout. Simplify the pattern or test a smaller input.")
+            return failureResult(
+                "worker_timeout",
+                error.code,
+                "Regex evaluation was stopped after the safety timeout. Simplify the pattern or test a smaller input.",
+            )
         }
         if (error instanceof WorkerTaskError && error.code === "WORKER_ABORTED") {
             throw error
         }
-        return testRegexPattern(pattern, flags, testString, options.maxMatches)
+        return unavailableResult(error instanceof WorkerTaskError ? error.code : "WORKER_UNKNOWN_ERROR")
     }
 }
diff --git a/src/features/tools/robots-txt-tester/page.tsx b/src/features/tools/robots-txt-tester/page.tsx
index 9db7fa93..3ce793d6 100644
--- a/src/features/tools/robots-txt-tester/page.tsx
+++ b/src/features/tools/robots-txt-tester/page.tsx
@@ -8,6 +8,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { RelatedTools } from "@/core/seo/components/related-tools"
 import { NO_MATCH_RULE, parseRobotsTxt, testRobotsUrl } from "@/features/tools/robots-txt-tester/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 let nextTestId = 0
 const PRIMARY_CRAWLER = "crawler-01"
@@ -69,7 +70,7 @@ Sitemap: https://example.com/sitemap.xml`
     }
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto w-full">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -183,6 +184,6 @@ Sitemap: https://example.com/sitemap.xml`
             </div>
 
             <RelatedTools toolKey="robots_txt_tester" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/saml-decoder/page.tsx b/src/features/tools/saml-decoder/page.tsx
index 93f65f20..df276b43 100644
--- a/src/features/tools/saml-decoder/page.tsx
+++ b/src/features/tools/saml-decoder/page.tsx
@@ -11,6 +11,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { decodeSaml, type SamlDecodeResult } from "@/features/tools/saml-decoder/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function SamlDecoderPage() {
     const { t } = useLang()
@@ -68,7 +69,7 @@ export function SamlDecoderPage() {
     ] : []
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
@@ -134,6 +135,6 @@ export function SamlDecoderPage() {
                     </div>
                 </div>
             ) : null}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/scanned-pdf-converter/page.tsx b/src/features/tools/scanned-pdf-converter/page.tsx
index 5187fc3d..67b1aa1d 100644
--- a/src/features/tools/scanned-pdf-converter/page.tsx
+++ b/src/features/tools/scanned-pdf-converter/page.tsx
@@ -16,6 +16,7 @@ import {
 } from "@/features/tools/scanned-pdf-converter/utils"
 import { runScanEnhanceTask } from "@/features/tools/scanned-pdf-converter/scan-enhance-task"
 import { downloadPdfBytes, loadScanImageFile } from "@/features/tools/scanned-pdf-converter/browser-actions"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SCAN_FILE_POLICY = FILE_INPUT_POLICIES["scan-image"]
 const MAX_FILES = SCAN_FILE_POLICY.maxFiles ?? 20
@@ -305,7 +306,7 @@ export function ScannedPdfConverterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -468,7 +469,7 @@ export function ScannedPdfConverterPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/security-header-analyzer/manifest.ts b/src/features/tools/security-header-analyzer/manifest.ts
index 0c69a202..3f86cfe4 100644
--- a/src/features/tools/security-header-analyzer/manifest.ts
+++ b/src/features/tools/security-header-analyzer/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "security_header_analyzer",
     slug: "security-header-analyzer",
+    inputBehavior: "explicit-sample",
     category: "network-web",
     relatedTools: ["csp_parser", "header_diff", "http_status_codes", "certificate_decoder"],
     privacy: {
diff --git a/src/features/tools/security-header-analyzer/page.tsx b/src/features/tools/security-header-analyzer/page.tsx
index 45085f69..b466b1a8 100644
--- a/src/features/tools/security-header-analyzer/page.tsx
+++ b/src/features/tools/security-header-analyzer/page.tsx
@@ -10,6 +10,7 @@ import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-war
 import { RelatedTools } from "@/core/seo/components/related-tools"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { analyzeSecurityHeaders, formatSecurityHeaderReport, type HeaderStatus } from "@/features/tools/security-header-analyzer/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_HEADERS = `HTTP/2 200
 content-security-policy: default-src 'self'; script-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'self'
@@ -99,7 +100,7 @@ export function SecurityHeaderAnalyzerPage() {
     ]
 
     return (
-        <div className="flex h-full flex-col">
+        <ToolPageContainer className="flex h-full flex-col">
             <div className="border-b px-4 py-3">
                 <div className="flex flex-col gap-3">
                     <div className="flex items-center gap-2">
@@ -118,9 +119,9 @@ export function SecurityHeaderAnalyzerPage() {
             </div>
 
             <div className="flex-1 overflow-auto p-4 md:p-6">
-                <SensitiveInputWarning variant="log" className="mx-auto mb-4 w-full max-w-6xl" />
+                <SensitiveInputWarning variant="log" className="mb-4 w-full" />
 
-                <div className="mx-auto grid w-full max-w-6xl gap-4 lg:grid-cols-5">
+                <div className="grid w-full gap-4 lg:grid-cols-5">
                     <section className="lg:col-span-2 space-y-2">
                         <label className="text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground">
                             {text("header_input_label")}
@@ -189,10 +190,10 @@ export function SecurityHeaderAnalyzerPage() {
                     </section>
                 </div>
 
-                <div className="mx-auto mt-6 w-full max-w-6xl">
+                <div className="mt-6 w-full">
                     <RelatedTools toolKey="security_header_analyzer" />
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/seo-metadata-workbench/page.tsx b/src/features/tools/seo-metadata-workbench/page.tsx
index 84a6ba97..cbad67cb 100644
--- a/src/features/tools/seo-metadata-workbench/page.tsx
+++ b/src/features/tools/seo-metadata-workbench/page.tsx
@@ -12,6 +12,7 @@ import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-war
 import { downloadText } from "./browser-actions"
 import { runSeoWorkbench } from "./logic"
 import { SAMPLE_INPUT } from "./samples"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function SeoMetadataWorkbenchPage() {
     const { t } = useLang()
@@ -49,7 +50,7 @@ export function SeoMetadataWorkbenchPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-6">
+        <ToolPageContainer className="flex h-full flex-col gap-6">
             <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -77,6 +78,6 @@ export function SeoMetadataWorkbenchPage() {
             </div>
 
             <RelatedTools toolKey="seo_metadata_workbench" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/slugify-case-converter/page.tsx b/src/features/tools/slugify-case-converter/page.tsx
index f78892b4..94f667dd 100644
--- a/src/features/tools/slugify-case-converter/page.tsx
+++ b/src/features/tools/slugify-case-converter/page.tsx
@@ -18,6 +18,7 @@ import { RelatedTools } from "@/core/seo/components/related-tools"
 import { CASE_STYLES, analyzeSlugQuality, convertCase, type CaseStyle } from "@/features/tools/slugify-case-converter/utils"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type LocaleOption = "auto" | "en-US" | "tr" | "de"
 
@@ -110,7 +111,7 @@ export function SlugifyCaseConverterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -281,6 +282,6 @@ export function SlugifyCaseConverterPage() {
             </div>
 
             <RelatedTools toolKey="slugify_case_converter" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/sql-formatter/page.tsx b/src/features/tools/sql-formatter/page.tsx
index 32362d97..6f26936f 100644
--- a/src/features/tools/sql-formatter/page.tsx
+++ b/src/features/tools/sql-formatter/page.tsx
@@ -16,6 +16,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const INPUT_STORAGE_KEY = "byteflow:sql-formatter:input";
 const DIALECT_STORAGE_KEY = "byteflow:sql-formatter:dialect";
@@ -138,7 +139,7 @@ export function SqlFormatterPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-8 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-8">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -246,6 +247,6 @@ export function SqlFormatterPage() {
                 </div>
 
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/structured-data-visualizer/page.tsx b/src/features/tools/structured-data-visualizer/page.tsx
index 64bd6151..fe4803ac 100644
--- a/src/features/tools/structured-data-visualizer/page.tsx
+++ b/src/features/tools/structured-data-visualizer/page.tsx
@@ -11,6 +11,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { visualizeStructuredData, type DataTreeNode, type StructuredDataFormat, type StructuredDataResult } from "@/features/tools/structured-data-visualizer/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 function TreeNodeView({ node, depth = 0 }: { node: DataTreeNode; depth?: number }) {
     return (
@@ -68,7 +69,7 @@ export function StructuredDataVisualizerPage() {
     }, [])
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
@@ -133,6 +134,6 @@ export function StructuredDataVisualizerPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/svg-blob-generator/page.tsx b/src/features/tools/svg-blob-generator/page.tsx
index 4eb508ef..af827675 100644
--- a/src/features/tools/svg-blob-generator/page.tsx
+++ b/src/features/tools/svg-blob-generator/page.tsx
@@ -10,6 +10,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildBlobPath, buildBlobSvg } from "@/features/tools/svg-blob-generator/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     size: 420,
@@ -101,7 +102,7 @@ export function SvgBlobGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -161,7 +162,7 @@ export function SvgBlobGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/svg-optimizer/manifest.ts b/src/features/tools/svg-optimizer/manifest.ts
index dacac0fb..5b6b591e 100644
--- a/src/features/tools/svg-optimizer/manifest.ts
+++ b/src/features/tools/svg-optimizer/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "svg_optimizer",
     slug: "svg-optimizer",
+    inputBehavior: "explicit-sample",
     category: "formatters",
     relatedTools: ["css_minifier", "html_css_beautifier", "image_base64"],
     privacy: {
diff --git a/src/features/tools/svg-optimizer/page.tsx b/src/features/tools/svg-optimizer/page.tsx
index 10300bf6..03beae5c 100644
--- a/src/features/tools/svg-optimizer/page.tsx
+++ b/src/features/tools/svg-optimizer/page.tsx
@@ -13,6 +13,7 @@ import { ensureByteflowMonacoThemes, getByteflowMonacoThemeName } from "@/core/u
 import { FILE_INPUT_POLICIES, readTextFileWithPolicy, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { sanitizeOptimizedSvg } from "./logic"
 import { runSvgOptimizeTask } from "./svg-optimize-task"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_SVG = `<?xml version="1.0" encoding="UTF-8"?>
 <!-- BF -->
@@ -154,7 +155,7 @@ export function SvgOptimizerPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-6">
                 <div className="flex flex-col gap-2">
                     <div className="flex items-center gap-2">
@@ -263,6 +264,6 @@ export function SvgOptimizerPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/svg-pattern-generator/page.tsx b/src/features/tools/svg-pattern-generator/page.tsx
index 68f3d416..9acc2755 100644
--- a/src/features/tools/svg-pattern-generator/page.tsx
+++ b/src/features/tools/svg-pattern-generator/page.tsx
@@ -10,6 +10,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildPatternCss, buildPatternSvg, type PatternKind } from "@/features/tools/svg-pattern-generator/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const DEFAULT_STATE = {
     kind: "dots" as PatternKind,
@@ -107,7 +108,7 @@ export function SvgPatternGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -183,7 +184,7 @@ export function SvgPatternGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/svg-stroke-to-fill-converter/manifest.ts b/src/features/tools/svg-stroke-to-fill-converter/manifest.ts
index 91286c36..d311123c 100644
--- a/src/features/tools/svg-stroke-to-fill-converter/manifest.ts
+++ b/src/features/tools/svg-stroke-to-fill-converter/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "svg_stroke_to_fill_converter",
     slug: "svg-stroke-to-fill-converter",
+    inputBehavior: "explicit-sample",
     category: "generators",
     relatedTools: ["svg_optimizer", "svg_blob_generator", "svg_pattern_generator", "svg_to_png_converter"],
     privacy: {
diff --git a/src/features/tools/svg-stroke-to-fill-converter/page.tsx b/src/features/tools/svg-stroke-to-fill-converter/page.tsx
index 02aedc72..be6a98d6 100644
--- a/src/features/tools/svg-stroke-to-fill-converter/page.tsx
+++ b/src/features/tools/svg-stroke-to-fill-converter/page.tsx
@@ -9,6 +9,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { convertStrokeToFill } from "@/features/tools/svg-stroke-to-fill-converter/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_INPUT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
   <rect x="26" y="26" width="204" height="204" rx="28" stroke="#0f172a" stroke-width="12" fill="none" />
@@ -83,7 +84,7 @@ export function SvgStrokeToFillConverterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -138,6 +139,6 @@ export function SvgStrokeToFillConverterPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/svg-to-png-converter/manifest.ts b/src/features/tools/svg-to-png-converter/manifest.ts
index 1133f3af..a96a0066 100644
--- a/src/features/tools/svg-to-png-converter/manifest.ts
+++ b/src/features/tools/svg-to-png-converter/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "svg_to_png_converter",
     slug: "svg-to-png-converter",
+    inputBehavior: "explicit-sample",
     category: "generators",
     relatedTools: ["svg_optimizer", "svg_pattern_generator", "svg_blob_generator", "svg_stroke_to_fill_converter"],
     privacy: {
diff --git a/src/features/tools/svg-to-png-converter/page.tsx b/src/features/tools/svg-to-png-converter/page.tsx
index 70f7cdc0..eae5e9bf 100644
--- a/src/features/tools/svg-to-png-converter/page.tsx
+++ b/src/features/tools/svg-to-png-converter/page.tsx
@@ -11,6 +11,7 @@ import { ToolPreviewArea } from "@/features/tool-shell/tool-preview-area"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { FILE_INPUT_POLICIES, describeFilePolicy, readTextFileWithPolicy, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { extractSvgDimensions, rasterizeSvgToPngDataUrl } from "@/features/tools/svg-to-png-converter/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" width="1200" height="700">
   <defs>
@@ -213,7 +214,7 @@ export function SvgToPngConverterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -349,6 +350,6 @@ export function SvgToPngConverterPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/text-diff-checker/page.tsx b/src/features/tools/text-diff-checker/page.tsx
index 6fbccfe2..485e5656 100644
--- a/src/features/tools/text-diff-checker/page.tsx
+++ b/src/features/tools/text-diff-checker/page.tsx
@@ -8,6 +8,7 @@ import { ensureByteflowMonacoThemes, getByteflowMonacoThemeName } from "@/core/u
 import { MonacoDiffEditor } from "@/features/tool-shell/monaco-editors"
 import { OutputWrapModeControl, type OutputWrapMode } from "@/features/tool-shell/text-output-panel"
 import { buildInputTooLargeMessage, isOverUtf8Budget, TOOL_RUNTIME_BUDGETS } from "@/core/performance/tool-runtime-budgets"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const ACTION_BUTTON_CLASS =
     "inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 sm:h-9 sm:min-h-9 sm:py-0 dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
@@ -39,7 +40,7 @@ export function TextDiffCheckerPage() {
     }
 
     return (
-        <div className="flex flex-col h-full max-w-7xl mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 mb-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -111,6 +112,6 @@ export function TextDiffCheckerPage() {
                     />
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/text-to-handwriting-converter/page.tsx b/src/features/tools/text-to-handwriting-converter/page.tsx
index 1e0b3f6d..77dffa9c 100644
--- a/src/features/tools/text-to-handwriting-converter/page.tsx
+++ b/src/features/tools/text-to-handwriting-converter/page.tsx
@@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type PaperStyle = "plain" | "lined" | "grid"
 
@@ -228,7 +229,7 @@ export function TextToHandwritingConverterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -350,6 +351,6 @@ export function TextToHandwritingConverterPage() {
             </div>
 
             <RelatedTools toolKey="text_to_handwriting_converter" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/totp-generator/browser-actions.ts b/src/features/tools/totp-generator/browser-actions.ts
new file mode 100644
index 00000000..0d13b300
--- /dev/null
+++ b/src/features/tools/totp-generator/browser-actions.ts
@@ -0,0 +1,4 @@
+export function startTotpTicker(onTick: () => void): () => void {
+    const intervalId = window.setInterval(onTick, 1_000)
+    return () => window.clearInterval(intervalId)
+}
diff --git a/src/features/tools/totp-generator/logic.ts b/src/features/tools/totp-generator/logic.ts
new file mode 100644
index 00000000..dd6f8716
--- /dev/null
+++ b/src/features/tools/totp-generator/logic.ts
@@ -0,0 +1,190 @@
+export const MIN_TOTP_PERIOD = 15
+export const MAX_TOTP_PERIOD = 120
+export const MAX_HOTP_COUNTER = Number.MAX_SAFE_INTEGER
+
+export type OtpValidationErrorCode =
+    | "secret_required"
+    | "secret_invalid_characters"
+    | "secret_padding_unsupported"
+    | "secret_invalid_length"
+    | "secret_invalid_padding_bits"
+    | "period_required"
+    | "period_invalid_integer"
+    | "period_out_of_range"
+    | "counter_required"
+    | "counter_invalid_integer"
+    | "counter_out_of_range"
+    | "digits_invalid"
+
+export type ValidationResult<T> =
+    | { ok: true; value: T }
+    | { ok: false; errorCode: OtpValidationErrorCode }
+
+export class OtpValidationError extends Error {
+    code: OtpValidationErrorCode
+
+    constructor(code: OtpValidationErrorCode) {
+        super(code)
+        this.name = "OtpValidationError"
+        this.code = code
+    }
+}
+
+const BASE32_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"
+const VALID_UNPADDED_LENGTH_REMAINDERS = new Set([0, 2, 4, 5, 7])
+const UNUSED_BITS_BY_LENGTH_REMAINDER: Record<number, number> = {
+    2: 2,
+    4: 4,
+    5: 1,
+    7: 3,
+}
+
+function invalid<T>(errorCode: OtpValidationErrorCode): ValidationResult<T> {
+    return { ok: false, errorCode }
+}
+
+export function decodeBase32Strict(input: string): ValidationResult<Uint8Array> {
+    if (input.length === 0) return invalid("secret_required")
+    if (input.includes("=")) return invalid("secret_padding_unsupported")
+    if (!/^[A-Za-z2-7]+$/.test(input)) return invalid("secret_invalid_characters")
+
+    const normalized = input.toUpperCase()
+    const lengthRemainder = normalized.length % 8
+    if (!VALID_UNPADDED_LENGTH_REMAINDERS.has(lengthRemainder)) return invalid("secret_invalid_length")
+
+    const unusedBits = UNUSED_BITS_BY_LENGTH_REMAINDER[lengthRemainder] ?? 0
+    const lastValue = BASE32_ALPHABET.indexOf(normalized.at(-1) ?? "")
+    if (unusedBits > 0 && (lastValue & ((1 << unusedBits) - 1)) !== 0) {
+        return invalid("secret_invalid_padding_bits")
+    }
+
+    const bytes: number[] = []
+    let bitBuffer = 0
+    let bitCount = 0
+    for (const character of normalized) {
+        bitBuffer = (bitBuffer << 5) | BASE32_ALPHABET.indexOf(character)
+        bitCount += 5
+        if (bitCount >= 8) {
+            bitCount -= 8
+            bytes.push((bitBuffer >> bitCount) & 0xff)
+            bitBuffer &= (1 << bitCount) - 1
+        }
+    }
+
+    if (bytes.length === 0) return invalid("secret_required")
+    return { ok: true, value: new Uint8Array(bytes) }
+}
+
+function parseUnsignedIntegerInput(
+    input: string,
+    requiredCode: OtpValidationErrorCode,
+    integerCode: OtpValidationErrorCode,
+): ValidationResult<number> {
+    if (input.length === 0) return invalid(requiredCode)
+    if (!/^\d+$/.test(input)) return invalid(integerCode)
+    const value = Number(input)
+    if (!Number.isSafeInteger(value)) return invalid(integerCode)
+    return { ok: true, value }
+}
+
+export function parseTotpPeriod(input: string): ValidationResult<number> {
+    const parsed = parseUnsignedIntegerInput(input, "period_required", "period_invalid_integer")
+    if (!parsed.ok) return parsed
+    if (parsed.value < MIN_TOTP_PERIOD || parsed.value > MAX_TOTP_PERIOD) return invalid("period_out_of_range")
+    return parsed
+}
+
+export function parseHotpCounter(input: string): ValidationResult<number> {
+    const parsed = parseUnsignedIntegerInput(input, "counter_required", "counter_invalid_integer")
+    if (!parsed.ok) return parsed
+    if (parsed.value < 0 || parsed.value > MAX_HOTP_COUNTER) return invalid("counter_out_of_range")
+    return parsed
+}
+
+function requireValidDigits(digits: number): void {
+    if (digits !== 6 && digits !== 8) throw new OtpValidationError("digits_invalid")
+}
+
+function requireValidSecret(secret: string): Uint8Array {
+    const result = decodeBase32Strict(secret)
+    if (!result.ok) throw new OtpValidationError(result.errorCode)
+    return result.value
+}
+
+function requireValidCounter(counter: number): void {
+    if (!Number.isSafeInteger(counter) || counter < 0 || counter > MAX_HOTP_COUNTER) {
+        throw new OtpValidationError("counter_out_of_range")
+    }
+}
+
+function encodeCounter(counter: number): Uint8Array {
+    requireValidCounter(counter)
+    const bytes = new Uint8Array(8)
+    let remaining = counter
+    for (let index = bytes.length - 1; index >= 0; index -= 1) {
+        bytes[index] = remaining % 256
+        remaining = Math.floor(remaining / 256)
+    }
+    return bytes
+}
+
+function copyForWebCrypto(bytes: Uint8Array): Uint8Array<ArrayBuffer> {
+    // In jsdom, this uses the same typed-array realm as TextEncoder and SubtleCrypto.
+    const ByteArray = new TextEncoder().encode("").constructor as Uint8ArrayConstructor
+    const copy = new ByteArray(bytes.length)
+    copy.set(bytes)
+    return copy as Uint8Array<ArrayBuffer>
+}
+
+async function hmacSha1(key: Uint8Array, message: Uint8Array): Promise<Uint8Array> {
+    const cryptoKey = await crypto.subtle.importKey(
+        "raw",
+        copyForWebCrypto(key),
+        { name: "HMAC", hash: "SHA-1" },
+        false,
+        ["sign"],
+    )
+    const signature = await crypto.subtle.sign("HMAC", cryptoKey, copyForWebCrypto(message))
+    return new Uint8Array(signature)
+}
+
+export async function generateHOTP(secret: string, counter: number, digits = 6): Promise<string> {
+    requireValidDigits(digits)
+    const key = requireValidSecret(secret)
+    const hash = await hmacSha1(key, encodeCounter(counter))
+    const offset = hash[hash.length - 1] & 0x0f
+    const binary = (hash[offset] & 0x7f) * 0x1000000
+        + hash[offset + 1] * 0x10000
+        + hash[offset + 2] * 0x100
+        + hash[offset + 3]
+    return (binary % (10 ** digits)).toString().padStart(digits, "0")
+}
+
+export async function generateTOTP(secret: string, timeSeconds: number, digits = 6, period = 30): Promise<string> {
+    if (!Number.isSafeInteger(period)) throw new OtpValidationError("period_invalid_integer")
+    if (period < MIN_TOTP_PERIOD || period > MAX_TOTP_PERIOD) {
+        throw new OtpValidationError("period_out_of_range")
+    }
+    if (!Number.isFinite(timeSeconds) || timeSeconds < 0) throw new OtpValidationError("counter_out_of_range")
+    const counter = Math.floor(timeSeconds / period)
+    return generateHOTP(secret, counter, digits)
+}
+
+export function generateRandomSecret(byteLength = 20): string {
+    if (!Number.isSafeInteger(byteLength) || byteLength < 1) throw new RangeError("byteLength must be a positive integer")
+    const bytes = crypto.getRandomValues(new Uint8Array(byteLength))
+    let encoded = ""
+    let bitBuffer = 0
+    let bitCount = 0
+    for (const byte of bytes) {
+        bitBuffer = (bitBuffer << 8) | byte
+        bitCount += 8
+        while (bitCount >= 5) {
+            bitCount -= 5
+            encoded += BASE32_ALPHABET[(bitBuffer >> bitCount) & 0x1f]
+        }
+        bitBuffer &= (1 << bitCount) - 1
+    }
+    if (bitCount > 0) encoded += BASE32_ALPHABET[(bitBuffer << (5 - bitCount)) & 0x1f]
+    return encoded
+}
diff --git a/src/features/tools/totp-generator/page.tsx b/src/features/tools/totp-generator/page.tsx
index 5cdf3b54..6e7b68a1 100644
--- a/src/features/tools/totp-generator/page.tsx
+++ b/src/features/tools/totp-generator/page.tsx
@@ -1,121 +1,98 @@
 "use client"
 
 import * as React from "react"
-import { KeyRound, Copy, RefreshCw, Timer } from "lucide-react"
+import { Copy, KeyRound, RefreshCw, Timer } from "lucide-react"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { useLang } from "@/core/i18n/lang-provider"
 import { RelatedTools } from "@/core/seo/components/related-tools"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
-import { safeClipboardWrite } from "@/core/clipboard/clipboard"
-
-// ─── TOTP Engine (RFC 6238) ─────────────────────────────────────────────────
-
-function base32Decode(str: string): Uint8Array {
-    const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"
-    const clean = str.toUpperCase().replace(/[^A-Z2-7]/g, "")
-    let bits = ""
-    for (const c of clean) {
-        const val = alphabet.indexOf(c)
-        if (val === -1) continue
-        bits += val.toString(2).padStart(5, "0")
-    }
-    const bytes = new Uint8Array(Math.floor(bits.length / 8))
-    for (let i = 0; i < bytes.length; i++) {
-        bytes[i] = parseInt(bits.slice(i * 8, i * 8 + 8), 2)
-    }
-    return bytes
-}
-
-async function hmacSha1(key: Uint8Array, message: Uint8Array): Promise<Uint8Array> {
-    const cryptoKey = await crypto.subtle.importKey("raw", key.buffer as ArrayBuffer, { name: "HMAC", hash: "SHA-1" }, false, ["sign"])
-    const sig = await crypto.subtle.sign("HMAC", cryptoKey, message.buffer as ArrayBuffer)
-    return new Uint8Array(sig)
-}
-
-async function generateTOTP(secret: string, time: number, digits: number = 6, period: number = 30): Promise<string> {
-    const key = base32Decode(secret)
-    const counter = Math.floor(time / period)
-    const counterBytes = new Uint8Array(8)
-    let c = counter
-    for (let i = 7; i >= 0; i--) {
-        counterBytes[i] = c & 0xff
-        c = Math.floor(c / 256)
-    }
-
-    const hash = await hmacSha1(key, counterBytes)
-    const offset = hash[hash.length - 1] & 0x0f
-    const binary = ((hash[offset] & 0x7f) << 24) | (hash[offset + 1] << 16) | (hash[offset + 2] << 8) | hash[offset + 3]
-    const otp = binary % Math.pow(10, digits)
-    return otp.toString().padStart(digits, "0")
-}
-
-async function generateHOTP(secret: string, counter: number, digits: number = 6): Promise<string> {
-    const key = base32Decode(secret)
-    const counterBytes = new Uint8Array(8)
-    let c = counter
-    for (let i = 7; i >= 0; i--) {
-        counterBytes[i] = c & 0xff
-        c = Math.floor(c / 256)
-    }
-
-    const hash = await hmacSha1(key, counterBytes)
-    const offset = hash[hash.length - 1] & 0x0f
-    const binary = ((hash[offset] & 0x7f) << 24) | (hash[offset + 1] << 16) | (hash[offset + 2] << 8) | hash[offset + 3]
-    const otp = binary % Math.pow(10, digits)
-    return otp.toString().padStart(digits, "0")
-}
-
-function generateRandomSecret(): string {
-    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"
-    let secret = ""
-    const bytes = crypto.getRandomValues(new Uint8Array(20))
-    for (const b of bytes) secret += chars[b % 32]
-    return secret
-}
+import {
+    MAX_HOTP_COUNTER,
+    MAX_TOTP_PERIOD,
+    MIN_TOTP_PERIOD,
+    decodeBase32Strict,
+    generateHOTP,
+    generateRandomSecret,
+    generateTOTP,
+    parseHotpCounter,
+    parseTotpPeriod,
+} from "./logic"
+import { startTotpTicker } from "./browser-actions"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function TotpGeneratorPage() {
     const { t } = useLang()
+    const toolT = t.tools["totp_generator"] as Record<string, string>
     const [secret, setSecret] = React.useState("JBSWY3DPEHPK3PXP")
     const [mode, setMode] = React.useState<"totp" | "hotp">("totp")
     const [digits, setDigits] = React.useState(6)
-    const [period, setPeriod] = React.useState(30)
-    const [counter, setCounter] = React.useState(0)
+    const [periodInput, setPeriodInput] = React.useState("30")
+    const [counterInput, setCounterInput] = React.useState("0")
     const [otp, setOtp] = React.useState("")
     const [remaining, setRemaining] = React.useState(30)
+    const [runtimeError, setRuntimeError] = React.useState<string | null>(null)
+    const generationRequestRef = React.useRef(0)
+
+    const secretValidation = React.useMemo(() => decodeBase32Strict(secret), [secret])
+    const periodValidation = React.useMemo(() => parseTotpPeriod(periodInput), [periodInput])
+    const counterValidation = React.useMemo(() => parseHotpCounter(counterInput), [counterInput])
+    const secretError = secretValidation.ok ? null : toolT[`error_${secretValidation.errorCode}`]
+    const periodError = periodValidation.ok ? null : toolT[`error_${periodValidation.errorCode}`]
+    const counterError = counterValidation.ok ? null : toolT[`error_${counterValidation.errorCode}`]
+    const activeValidationError = secretError || (mode === "totp" ? periodError : counterError)
+    const [refreshPrefix, refreshSuffix = ""] = toolT.refreshes_in.split("{seconds}")
 
     const generate = React.useCallback(async () => {
-        if (!secret.trim()) { setOtp(""); return }
+        const requestId = ++generationRequestRef.current
+        const hasNumericError = mode === "totp" ? !periodValidation.ok : !counterValidation.ok
+        if (!secretValidation.ok || hasNumericError) {
+            setOtp("")
+            setRuntimeError(null)
+            if (mode === "totp") setRemaining(periodValidation.ok ? periodValidation.value : 0)
+            return
+        }
+
         try {
+            let code: string
             if (mode === "totp") {
+                if (!periodValidation.ok) return
                 const now = Math.floor(Date.now() / 1000)
-                const code = await generateTOTP(secret, now, digits, period)
-                setOtp(code)
-                setRemaining(period - (now % period))
+                code = await generateTOTP(secret, now, digits, periodValidation.value)
+                if (requestId !== generationRequestRef.current) return
+                setRemaining(periodValidation.value - (now % periodValidation.value))
             } else {
-                const code = await generateHOTP(secret, counter, digits)
-                setOtp(code)
+                if (!counterValidation.ok) return
+                code = await generateHOTP(secret, counterValidation.value, digits)
             }
-        } catch { setOtp("ERROR") }
-    }, [secret, mode, digits, period, counter])
+            if (requestId !== generationRequestRef.current) return
+            setOtp(code)
+            setRuntimeError(null)
+        } catch {
+            if (requestId !== generationRequestRef.current) return
+            setOtp("")
+            setRuntimeError(toolT.error_generation_failed)
+        }
+    }, [counterValidation, digits, mode, periodValidation, secret, secretValidation, toolT.error_generation_failed])
 
-    React.useEffect(() => { generate() }, [generate])
+    React.useEffect(() => {
+        void generate()
+    }, [generate])
 
-    // Auto-refresh TOTP
     React.useEffect(() => {
-        if (mode !== "totp") return
-        const interval = setInterval(() => {
+        if (mode !== "totp" || !periodValidation.ok || !secretValidation.ok) return
+        return startTotpTicker(() => {
             const now = Math.floor(Date.now() / 1000)
-            const rem = period - (now % period)
-            setRemaining(rem)
-            if (rem === period) generate()
-        }, 1000)
-        return () => clearInterval(interval)
-    }, [mode, period, generate])
+            const nextRemaining = periodValidation.value - (now % periodValidation.value)
+            setRemaining(nextRemaining)
+            if (nextRemaining === periodValidation.value) void generate()
+        })
+    }, [generate, mode, periodValidation, secretValidation])
 
     const handleCopy = async () => {
-        if (!otp || otp === "ERROR") return
+        if (!otp || activeValidationError || runtimeError) return
         const result = await safeClipboardWrite(otp)
         if (!result.ok) {
             toast.error(t.common.copy_failed)
@@ -124,56 +101,95 @@ export function TotpGeneratorPage() {
         toast.success(t.common.copied)
     }
 
-    const toolT = t.tools["totp_generator"] as Record<string, string>
-
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-3xl mx-auto w-full">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div>
-                <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
+                <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
                     <KeyRound className="h-6 w-6 text-primary" />
                     {toolT.title}
                 </h1>
-                <p className="text-muted-foreground mt-1">{toolT.description}</p>
+                <p className="mt-1 text-muted-foreground">{toolT.description}</p>
             </div>
 
             <SensitiveInputWarning variant="secret" />
 
-            {/* OTP Display */}
-            <div className="p-8 border rounded-xl bg-card shadow-sm text-center space-y-4">
-                <div className="text-5xl font-mono font-bold tracking-[0.3em] text-foreground">{otp || "------"}</div>
-                {mode === "totp" && (
+            <div className="space-y-4 rounded-xl border bg-card p-8 text-center shadow-sm">
+                <div className="text-5xl font-mono font-bold tracking-[0.3em] text-foreground" aria-live="polite">
+                    {otp || "------"}
+                </div>
+                {runtimeError && <p role="alert" className="text-sm text-destructive">{runtimeError}</p>}
+                {mode === "totp" && periodValidation.ok && (
                     <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
                         <Timer className="h-4 w-4" />
-                        <span>{toolT.refreshes_in.replace("{seconds}", "")}<span className={`font-bold ${remaining <= 5 ? "text-red-500" : ""}`}>{remaining}s</span></span>
-                        <div className="w-24 h-1.5 bg-muted rounded-full overflow-hidden ml-2">
-                            <div className="h-full bg-primary rounded-full transition-[width,background-color] duration-1000" style={{ width: `${(remaining / period) * 100}%` }} />
+                        <span>
+                            {refreshPrefix}
+                            <span className={`font-bold ${remaining <= 5 ? "text-red-500" : ""}`}>{remaining}</span>
+                            {refreshSuffix}
+                        </span>
+                        <div className="ml-2 h-1.5 w-24 overflow-hidden rounded-full bg-muted">
+                            <div
+                                className="h-full rounded-full bg-primary transition-[width,background-color] duration-1000"
+                                style={{ width: `${(remaining / periodValidation.value) * 100}%` }}
+                            />
                         </div>
                     </div>
                 )}
                 <div className="flex items-center justify-center gap-2">
-                    <Button size="sm" variant="outline" onClick={() => void handleCopy()}><Copy className="mr-2 h-4 w-4" />{t.common.copy}</Button>
-                    <Button size="sm" variant="outline" onClick={() => void generate()}><RefreshCw className="mr-2 h-4 w-4" />{toolT.refresh}</Button>
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => void handleCopy()}
+                        disabled={!otp || Boolean(activeValidationError) || Boolean(runtimeError)}
+                    >
+                        <Copy className="mr-2 h-4 w-4" />
+                        {t.common.copy}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => void generate()}
+                        disabled={Boolean(activeValidationError)}
+                    >
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        {toolT.refresh}
+                    </Button>
                 </div>
             </div>
 
-            {/* Settings */}
-            <div className="p-5 border rounded-lg bg-card shadow-sm space-y-4">
-                <h3 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground">{toolT.settings}</h3>
+            <div className="space-y-4 rounded-lg border bg-card p-5 shadow-sm">
+                <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">{toolT.settings}</h3>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                     <div className="space-y-2">
-                        <label className="text-sm font-medium">{toolT.mode}</label>
+                        <span className="text-sm font-medium">{toolT.mode}</span>
                         <div className="flex gap-2">
-                            <Button variant={mode === "totp" ? "default" : "outline"} size="sm" className="flex-1" onClick={() => setMode("totp")}>TOTP</Button>
-                            <Button variant={mode === "hotp" ? "default" : "outline"} size="sm" className="flex-1" onClick={() => setMode("hotp")}>HOTP</Button>
+                            <Button variant={mode === "totp" ? "default" : "outline"} size="sm" className="flex-1" onClick={() => {
+                                generationRequestRef.current += 1
+                                setMode("totp")
+                            }}>TOTP</Button>
+                            <Button variant={mode === "hotp" ? "default" : "outline"} size="sm" className="flex-1" onClick={() => {
+                                generationRequestRef.current += 1
+                                setMode("hotp")
+                            }}>HOTP</Button>
                         </div>
                     </div>
 
                     <div className="space-y-2">
-                        <label className="text-sm font-medium">{toolT.digits}</label>
+                        <span className="text-sm font-medium">{toolT.digits}</span>
                         <div className="flex gap-2">
-                            {[6, 8].map((d) => (
-                                <Button key={d} variant={digits === d ? "default" : "outline"} size="sm" className="flex-1" onClick={() => setDigits(d)}>{d}</Button>
+                            {[6, 8].map((digitCount) => (
+                                <Button
+                                    key={digitCount}
+                                    variant={digits === digitCount ? "default" : "outline"}
+                                    size="sm"
+                                    className="flex-1"
+                                    onClick={() => {
+                                        generationRequestRef.current += 1
+                                        setDigits(digitCount)
+                                    }}
+                                >
+                                    {digitCount}
+                                </Button>
                             ))}
                         </div>
                     </div>
@@ -181,29 +197,87 @@ export function TotpGeneratorPage() {
 
                 <div className="space-y-2">
                     <div className="flex items-center justify-between">
-                        <label className="text-sm font-medium">{toolT.secret_key}</label>
-                        <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => setSecret(generateRandomSecret())}>{toolT.generate_random}</Button>
+                        <label htmlFor="totp-secret" className="text-sm font-medium">{toolT.secret_key}</label>
+                        <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => {
+                            generationRequestRef.current += 1
+                            setSecret(generateRandomSecret())
+                        }}>
+                            {toolT.generate_random}
+                        </Button>
                     </div>
-                    <Input className="font-mono text-sm tracking-wider" value={secret} onChange={(e) => setSecret(e.target.value)} placeholder="JBSWY3DPEHPK3PXP" />
+                    <Input
+                        id="totp-secret"
+                        className="font-mono text-sm tracking-wider"
+                        value={secret}
+                        onChange={(event) => {
+                            generationRequestRef.current += 1
+                            setSecret(event.target.value)
+                        }}
+                        placeholder="JBSWY3DPEHPK3PXP"
+                        aria-invalid={Boolean(secretError)}
+                        aria-describedby={secretError ? "totp-secret-error" : undefined}
+                    />
+                    {secretError && <p id="totp-secret-error" role="alert" className="text-sm text-destructive">{secretError}</p>}
                 </div>
 
                 {mode === "totp" ? (
                     <div className="space-y-2">
-                        <label className="text-sm font-medium">{toolT.period}</label>
-                        <Input type="number" min={15} max={120} value={period} onChange={(e) => setPeriod(Number(e.target.value))} />
+                        <label htmlFor="totp-period" className="text-sm font-medium">{toolT.period}</label>
+                        <Input
+                            id="totp-period"
+                            type="number"
+                            min={MIN_TOTP_PERIOD}
+                            max={MAX_TOTP_PERIOD}
+                            step={1}
+                            value={periodInput}
+                            onChange={(event) => {
+                                generationRequestRef.current += 1
+                                setPeriodInput(event.target.value)
+                            }}
+                            aria-invalid={Boolean(periodError)}
+                            aria-describedby={periodError ? "totp-period-error" : undefined}
+                        />
+                        {periodError && <p id="totp-period-error" role="alert" className="text-sm text-destructive">{periodError}</p>}
                     </div>
                 ) : (
                     <div className="space-y-2">
                         <div className="flex items-center justify-between">
-                            <label className="text-sm font-medium">{toolT.counter}</label>
-                            <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => { setCounter((c) => c + 1) }}>{toolT.increment}</Button>
+                            <label htmlFor="hotp-counter" className="text-sm font-medium">{toolT.counter}</label>
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-7 text-xs"
+                                disabled={!counterValidation.ok || counterValidation.value >= MAX_HOTP_COUNTER}
+                                onClick={() => {
+                                    if (counterValidation.ok) {
+                                        generationRequestRef.current += 1
+                                        setCounterInput(String(counterValidation.value + 1))
+                                    }
+                                }}
+                            >
+                                {toolT.increment}
+                            </Button>
                         </div>
-                        <Input type="number" min={0} value={counter} onChange={(e) => setCounter(Number(e.target.value))} />
+                        <Input
+                            id="hotp-counter"
+                            type="number"
+                            min={0}
+                            max={MAX_HOTP_COUNTER}
+                            step={1}
+                            value={counterInput}
+                            onChange={(event) => {
+                                generationRequestRef.current += 1
+                                setCounterInput(event.target.value)
+                            }}
+                            aria-invalid={Boolean(counterError)}
+                            aria-describedby={counterError ? "hotp-counter-error" : undefined}
+                        />
+                        {counterError && <p id="hotp-counter-error" role="alert" className="text-sm text-destructive">{counterError}</p>}
                     </div>
                 )}
             </div>
 
             <RelatedTools toolKey="totp_generator" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/tweet-generator/page.tsx b/src/features/tools/tweet-generator/page.tsx
index 842bbd1c..fadd0ba4 100644
--- a/src/features/tools/tweet-generator/page.tsx
+++ b/src/features/tools/tweet-generator/page.tsx
@@ -4,6 +4,7 @@ import * as React from "react"
 import { Copy, Download, Eraser, MessageCircle, TestTube2, Upload } from "lucide-react"
 import { toast } from "sonner"
 import { useLang } from "@/core/i18n/lang-provider"
+import { FILE_INPUT_POLICIES, formatFilePolicyLimit, validateFileAgainstPolicy } from "@/core/files/file-input-policy"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
@@ -16,8 +17,9 @@ import {
     wrapLines,
     type SocialTheme,
 } from "@/core/utils/social-media-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
-const MAX_FILE_SIZE = 5 * 1024 * 1024
+const AVATAR_FILE_POLICY = FILE_INPUT_POLICIES["image-logo"]
 
 const DEFAULT_STATE = {
     displayName: "S42 Lab",
@@ -235,16 +237,15 @@ export function TweetGeneratorPage() {
     )
 
     const handleAvatarFile = async (file: File) => {
-        if (!file.type.startsWith("image/")) {
-            toast.error(t.common.image_file_required)
-            return
-        }
-        if (file.size > MAX_FILE_SIZE) {
-            toast.error((t.common.image_file_too_large).replace("{size}", "5MB"))
+        const validation = validateFileAgainstPolicy(file, AVATAR_FILE_POLICY)
+        if (!validation.ok) {
+            toast.error(validation.reason === "too_large"
+                ? t.common.image_file_too_large.replace("{size}", formatFilePolicyLimit(AVATAR_FILE_POLICY))
+                : t.common.image_file_required)
             return
         }
         try {
-            const dataUrl = await fileToDataUrl(file)
+            const dataUrl = await fileToDataUrl(file, AVATAR_FILE_POLICY)
             setAvatarDataUrl(dataUrl)
             setAvatarName(file.name)
         } catch {
@@ -303,7 +304,7 @@ export function TweetGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -384,10 +385,11 @@ export function TweetGeneratorPage() {
                                 <input
                                     ref={avatarInputRef}
                                     type="file"
-                                    accept="image/*"
+                                    accept={AVATAR_FILE_POLICY.accept}
                                     className="hidden"
                                     onChange={(event) => {
-                                        const file = event.target.files?.[0]
+                                        const file = event.currentTarget.files?.[0]
+                                        event.currentTarget.value = ""
                                         if (file) void handleAvatarFile(file)
                                     }}
                                 />
@@ -426,7 +428,7 @@ export function TweetGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/tweet-to-image-converter/page.tsx b/src/features/tools/tweet-to-image-converter/page.tsx
index 3b93a915..d7499e15 100644
--- a/src/features/tools/tweet-to-image-converter/page.tsx
+++ b/src/features/tools/tweet-to-image-converter/page.tsx
@@ -14,6 +14,7 @@ import { fileToDataUrl, loadImageElement, validateImageDimensions } from "@/core
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { resolveSocialThemeColors, wrapLines, type SocialTheme } from "@/core/utils/social-media-utils"
 import { FileUploadStatus, type FileUploadStatusState } from "@/features/tool-shell/file-upload-status"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 type CanvasPreset = "landscape" | "square" | "portrait"
 
@@ -336,7 +337,7 @@ export function TweetToImageConverterPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -489,6 +490,6 @@ export function TweetToImageConverterPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/twitter-ad-revenue-generator/manifest.ts b/src/features/tools/twitter-ad-revenue-generator/manifest.ts
index 5b7eeba4..8a28fee6 100644
--- a/src/features/tools/twitter-ad-revenue-generator/manifest.ts
+++ b/src/features/tools/twitter-ad-revenue-generator/manifest.ts
@@ -3,6 +3,7 @@ import type { ToolMeta } from "@/core/registry/types"
 export const toolManifest = {
     key: "twitter_ad_revenue_generator",
     slug: "twitter-ad-revenue-generator",
+    inputBehavior: "generator-default",
     category: "generators",
     relatedTools: ["tweet_generator", "tweet_to_image_converter", "open_graph_meta_generator", "id_generator"],
     privacy: {
diff --git a/src/features/tools/twitter-ad-revenue-generator/page.tsx b/src/features/tools/twitter-ad-revenue-generator/page.tsx
index 27a42771..c207572a 100644
--- a/src/features/tools/twitter-ad-revenue-generator/page.tsx
+++ b/src/features/tools/twitter-ad-revenue-generator/page.tsx
@@ -15,6 +15,7 @@ import {
     summarizeTwitterRevenue,
     type TwitterRevenueInput,
 } from "@/features/tools/twitter-ad-revenue-generator/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE: TwitterRevenueInput = {
     impressionsPerDay: 220_000,
@@ -123,7 +124,7 @@ export function TwitterAdRevenueGeneratorPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -193,7 +194,7 @@ export function TwitterAdRevenueGeneratorPage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/twitter-ad-revenue-generator/utils.ts b/src/features/tools/twitter-ad-revenue-generator/utils.ts
index e8437ab2..2470df9e 100644
--- a/src/features/tools/twitter-ad-revenue-generator/utils.ts
+++ b/src/features/tools/twitter-ad-revenue-generator/utils.ts
@@ -1,3 +1,5 @@
+import { serializeSpreadsheetSafeCsv } from "@/core/files/csv-export"
+
 export type TwitterRevenueInput = {
     impressionsPerDay: number
     cpmUsd: number
@@ -98,15 +100,14 @@ export function summarizeTwitterRevenue(series: TwitterRevenuePoint[]): TwitterR
 }
 
 export function seriesToCsv(series: TwitterRevenuePoint[]): string {
-    const header = "day,impressions,display_ad_revenue_usd,click_revenue_usd,total_revenue_usd"
-    const rows = series.map((point) =>
-        [
+    return serializeSpreadsheetSafeCsv([
+        ["day", "impressions", "display_ad_revenue_usd", "click_revenue_usd", "total_revenue_usd"],
+        ...series.map((point) => [
             point.day,
             point.impressions,
             point.displayAdRevenueUsd.toFixed(2),
             point.clickRevenueUsd.toFixed(2),
             point.totalRevenueUsd.toFixed(2),
-        ].join(","),
-    )
-    return [header, ...rows].join("\n")
+        ] as const),
+    ])
 }
diff --git a/src/features/tools/unicode-inspector/page.tsx b/src/features/tools/unicode-inspector/page.tsx
index a4df1dbc..a64650cd 100644
--- a/src/features/tools/unicode-inspector/page.tsx
+++ b/src/features/tools/unicode-inspector/page.tsx
@@ -11,6 +11,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { PHASE4_LIMITS } from "@/core/utils/phase4-inspector-limits"
 import { inspectUnicode, type UnicodeInspectionResult } from "@/features/tools/unicode-inspector/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function UnicodeInspectorPage() {
     const { t } = useLang()
@@ -34,7 +35,7 @@ export function UnicodeInspectorPage() {
     }, [])
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
@@ -105,6 +106,6 @@ export function UnicodeInspectorPage() {
                     </table>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/unix-timestamp/page.tsx b/src/features/tools/unix-timestamp/page.tsx
index ba06fb66..d8a8744d 100644
--- a/src/features/tools/unix-timestamp/page.tsx
+++ b/src/features/tools/unix-timestamp/page.tsx
@@ -8,6 +8,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { Input } from "@/components/ui/input"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { parseTimestampHeuristic } from "@/features/tools/unix-timestamp/utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function UnixTimestampPage() {
     const { t, lang } = useLang()
@@ -102,7 +103,7 @@ export function UnixTimestampPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-4 max-w-4xl mx-auto">
+        <ToolPageContainer className="flex flex-col h-full space-y-4">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -174,7 +175,7 @@ export function UnixTimestampPage() {
                 </div>
 
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/url-encode-decode/page.tsx b/src/features/tools/url-encode-decode/page.tsx
index 809e1061..862bcea7 100644
--- a/src/features/tools/url-encode-decode/page.tsx
+++ b/src/features/tools/url-encode-decode/page.tsx
@@ -11,6 +11,7 @@ import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-actio
 import { readStorageString, writeStorageString } from "@/core/storage/tool-persistence"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { buildSensitiveToolHandoffLink } from "@/core/routing/tool-handoff"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 type UrlExample = {
     id: string
@@ -166,7 +167,7 @@ export function UrlEncodeDecodePage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-[1400px] flex-col space-y-8">
+        <WideToolPageContainer className="flex h-full flex-col space-y-8">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -309,7 +310,7 @@ export function UrlEncodeDecodePage() {
                     </div>
                 </div>
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/url-parser/page.tsx b/src/features/tools/url-parser/page.tsx
index 2e2c8a73..aa3d5a16 100644
--- a/src/features/tools/url-parser/page.tsx
+++ b/src/features/tools/url-parser/page.tsx
@@ -8,6 +8,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { RelatedTools } from "@/core/seo/components/related-tools"
 import { copyTextWithToolFeedback } from "@/features/tool-shell/tool-action-feedback"
 import { TextOutputPanel } from "@/features/tool-shell/text-output-panel"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 interface QueryParam {
     id: string
@@ -193,7 +194,7 @@ export function UrlParserPage() {
     )
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto w-full">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             {/* Header */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
@@ -315,6 +316,6 @@ export function UrlParserPage() {
             />
 
             <RelatedTools toolKey="url_parser" />
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/user-agent-parser/page.tsx b/src/features/tools/user-agent-parser/page.tsx
index f94ae14c..97c531fc 100644
--- a/src/features/tools/user-agent-parser/page.tsx
+++ b/src/features/tools/user-agent-parser/page.tsx
@@ -8,6 +8,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { Textarea } from "@/components/ui/textarea"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { UAParser, IResult } from "ua-parser-js"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 export function UserAgentParserPage() {
     const { t } = useLang()
@@ -60,7 +61,7 @@ export function UserAgentParserPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -159,7 +160,7 @@ export function UserAgentParserPage() {
                 </div>
 
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
 
diff --git a/src/features/tools/uuid-generator/page.tsx b/src/features/tools/uuid-generator/page.tsx
index fdb38c4c..3bbc75c2 100644
--- a/src/features/tools/uuid-generator/page.tsx
+++ b/src/features/tools/uuid-generator/page.tsx
@@ -7,6 +7,7 @@ import { useLang } from "@/core/i18n/lang-provider"
 import { Input } from "@/components/ui/input"
 import { ToolActionBar, type ToolAction } from "@/features/tool-shell/tool-action-bar"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { serializeSpreadsheetSafeCsv } from "@/core/files/csv-export"
 import { v1 as uuidv1, v4 as uuidv4 } from "uuid"
 import { Button } from "@/components/ui/button"
 import { downloadTextFile } from "./browser-actions"
@@ -17,6 +18,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const PAGE_SIZE_OPTIONS = [50, 100, 250]
 type ExportFormat = "txt" | "csv" | "json"
@@ -85,8 +87,11 @@ export function UuidGeneratorPage() {
         if (format === "json") {
             downloadTextFile(JSON.stringify(formattedUuids, null, 2), "byteflow-uuids.json", "application/json;charset=utf-8")
         } else if (format === "csv") {
-            const rows = ["index,uuid", ...formattedUuids.map((id, index) => `${index + 1},"${id.replace(/"/g, '""')}"`)]
-            downloadTextFile(rows.join("\n"), "byteflow-uuids.csv", "text/csv;charset=utf-8")
+            const csv = serializeSpreadsheetSafeCsv([
+                ["index", "uuid"],
+                ...formattedUuids.map((id, index) => [index + 1, id] as const),
+            ])
+            downloadTextFile(csv, "byteflow-uuids.csv", "text/csv;charset=utf-8")
         } else {
             downloadTextFile(formattedUuids.join("\n"), "byteflow-uuids.txt")
         }
@@ -136,7 +141,7 @@ export function UuidGeneratorPage() {
     ]
 
     return (
-        <div className="flex flex-col h-full space-y-6 max-w-5xl mx-auto">
+        <ToolPageContainer className="flex flex-col h-full space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -298,6 +303,6 @@ export function UuidGeneratorPage() {
                 </div>
 
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/vimeo-thumbnail-grabber/page.tsx b/src/features/tools/vimeo-thumbnail-grabber/page.tsx
index a646d1ed..18a70317 100644
--- a/src/features/tools/vimeo-thumbnail-grabber/page.tsx
+++ b/src/features/tools/vimeo-thumbnail-grabber/page.tsx
@@ -17,6 +17,7 @@ import {
     probeFirstWorkingThumbnail,
     type ThumbnailCandidate,
 } from "@/core/utils/thumbnail-grabber-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_URL = "https://vimeo.com/76979871"
 const EXTERNAL_HOSTS = ["vimeo.com", "player.vimeo.com", "vumbnail.com"] as const
@@ -222,7 +223,7 @@ export function VimeoThumbnailGrabberPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -347,6 +348,6 @@ export function VimeoThumbnailGrabberPage() {
                     />
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/xml-formatter/page.tsx b/src/features/tools/xml-formatter/page.tsx
index 9f1d72a3..74b8f1c2 100644
--- a/src/features/tools/xml-formatter/page.tsx
+++ b/src/features/tools/xml-formatter/page.tsx
@@ -10,6 +10,7 @@ import { ensureByteflowMonacoThemes, getByteflowMonacoThemeName } from "@/core/u
 import { MonacoEditor } from "@/features/tool-shell/monaco-editors"
 import format from "xml-formatter"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function XmlFormatterPage() {
     const { t } = useLang()
@@ -95,7 +96,7 @@ export function XmlFormatterPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-8 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-8">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -182,6 +183,6 @@ export function XmlFormatterPage() {
                 </div>
 
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/yaml-json-converter/page.tsx b/src/features/tools/yaml-json-converter/page.tsx
index 851d20d7..0e07d039 100644
--- a/src/features/tools/yaml-json-converter/page.tsx
+++ b/src/features/tools/yaml-json-converter/page.tsx
@@ -14,6 +14,7 @@ import { importTextFile, TEXT_FILE_IMPORT_ACCEPT } from "@/core/files/text-file-
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { SensitiveInputWarning } from "@/features/tool-shell/sensitive-input-warning"
 import { convertStructuredData, type StructuredDataFormat } from "./utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 const MODE_STORAGE_KEY = "byteflow:yaml-json-converter:mode"
 const FROM_FORMAT_STORAGE_KEY = "byteflow:yaml-json-converter:from-format"
@@ -162,7 +163,7 @@ export function YamlJsonConverterPage() {
     }
 
     return (
-        <div className="flex flex-col h-full space-y-8 max-w-[1400px] mx-auto w-full">
+        <WideToolPageContainer className="flex flex-col h-full space-y-8">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
@@ -350,6 +351,6 @@ export function YamlJsonConverterPage() {
                 </div>
 
             </div>
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/yaml-merge-patch-explorer/page.tsx b/src/features/tools/yaml-merge-patch-explorer/page.tsx
index dc9dfbb4..7c61a10f 100644
--- a/src/features/tools/yaml-merge-patch-explorer/page.tsx
+++ b/src/features/tools/yaml-merge-patch-explorer/page.tsx
@@ -17,6 +17,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { runYamlExplorer, type YamlExplorerMode, type YamlExplorerResult } from "@/features/tools/yaml-merge-patch-explorer/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function YamlMergePatchExplorerPage() {
     const { t } = useLang()
@@ -91,7 +92,7 @@ replicas: 2`)
     }, [mode])
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
@@ -206,6 +207,6 @@ replicas: 2`)
                     </div>
                 </div>
             )}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/features/tools/youtube-thumbnail-grabber/page.tsx b/src/features/tools/youtube-thumbnail-grabber/page.tsx
index 6c8ec978..574903e0 100644
--- a/src/features/tools/youtube-thumbnail-grabber/page.tsx
+++ b/src/features/tools/youtube-thumbnail-grabber/page.tsx
@@ -17,6 +17,7 @@ import {
     probeFirstWorkingThumbnail,
     type ThumbnailCandidate,
 } from "@/core/utils/thumbnail-grabber-utils"
+import { ToolPageContainer } from "@/components/layout/page-container"
 
 const SAMPLE_URL = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
 const EXTERNAL_HOSTS = ["youtube.com", "youtube-nocookie.com", "youtu.be", "i.ytimg.com"] as const
@@ -222,7 +223,7 @@ export function YouTubeThumbnailGrabberPage() {
     ]
 
     return (
-        <div className="mx-auto flex h-full w-full max-w-6xl flex-col space-y-6">
+        <ToolPageContainer className="flex h-full flex-col space-y-6">
             <div className="flex flex-col gap-4">
                 <div>
                     <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
@@ -347,6 +348,6 @@ export function YouTubeThumbnailGrabberPage() {
                     />
                 </div>
             </div>
-        </div>
+        </ToolPageContainer>
     )
 }
diff --git a/src/features/tools/yq-playground/page.tsx b/src/features/tools/yq-playground/page.tsx
index bb72f038..fbf4e612 100644
--- a/src/features/tools/yq-playground/page.tsx
+++ b/src/features/tools/yq-playground/page.tsx
@@ -11,6 +11,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { useLang } from "@/core/i18n/lang-provider"
 import { safeClipboardWrite } from "@/core/clipboard/clipboard"
 import { runYqQuery, type YqInputFormat, type YqOutputFormat, type YqQueryResult } from "@/features/tools/yq-playground/utils"
+import { WideToolPageContainer } from "@/components/layout/page-container"
 
 export function YqPlaygroundPage() {
     const { t } = useLang()
@@ -64,7 +65,7 @@ workers:
     }, [])
 
     return (
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8">
+        <WideToolPageContainer className="flex flex-col gap-6 py-8">
             <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight">{text("title")}</h1>
@@ -156,6 +157,6 @@ workers:
                     </div>
                 </div>
             )}
-        </div>
+        </WideToolPageContainer>
     )
 }
diff --git a/src/generated/client-tool-lookup.ts b/src/generated/client-tool-lookup.ts
index 16170151..79a9c719 100644
--- a/src/generated/client-tool-lookup.ts
+++ b/src/generated/client-tool-lookup.ts
@@ -4169,14 +4169,17 @@ const CLIENT_TOOL_LOOKUP: Record<string, ClientToolLookupEntry> = {
         "slug": "qr-code-generator",
         "keywords": [
             "qr code generator",
+            "qr code decoder",
+            "scan qr image",
             "generate qr code online",
             "qr code maker"
         ],
         "aliases": [],
         "relatedToolKeys": [
-            "uuid_generator",
-            "password_generator",
-            "url_encode_decode"
+            "barcode_generator",
+            "image_base64",
+            "url_encode_decode",
+            "svg_to_png_converter"
         ],
         "relatedWorkflows": [],
         "sampleInput": null,
@@ -4201,11 +4204,20 @@ const CLIENT_TOOL_LOOKUP: Record<string, ClientToolLookupEntry> = {
         "persistInput": null,
         "family": "generators",
         "tags": [
-            "generators"
+            "generators",
+            "image"
         ],
         "capabilities": [
             "browser-local",
             "offline-capable"
+        ],
+        "searchKeywords": [
+            "decode qr",
+            "read qr code",
+            "qr image scanner",
+            "二维码解析",
+            "QRコード読み取り",
+            "QR 코드 해독"
         ]
     },
     "barcode_generator": {
diff --git a/src/generated/command-search-index.ts b/src/generated/command-search-index.ts
index e5365179..e8c9213a 100644
--- a/src/generated/command-search-index.ts
+++ b/src/generated/command-search-index.ts
@@ -1867,14 +1867,24 @@ const COMMAND_SEARCH_INDEX: Record<string, CommandSearchIndexEntry> = {
         "slug": "qr-code-generator",
         "keywords": [
             "qr code generator",
+            "qr code decoder",
+            "scan qr image",
             "generate qr code online",
             "qr code maker"
         ],
         "aliases": [],
-        "searchKeywords": [],
+        "searchKeywords": [
+            "decode qr",
+            "read qr code",
+            "qr image scanner",
+            "二维码解析",
+            "QRコード読み取り",
+            "QR 코드 해독"
+        ],
         "family": "generators",
         "tags": [
-            "generators"
+            "generators",
+            "image"
         ],
         "capabilities": [
             "browser-local",
diff --git a/src/generated/discovery-tool-index.ts b/src/generated/discovery-tool-index.ts
index 59b18d9f..6f87eb61 100644
--- a/src/generated/discovery-tool-index.ts
+++ b/src/generated/discovery-tool-index.ts
@@ -2166,9 +2166,10 @@ const DISCOVERY_TOOL_INDEX: Record<string, DiscoveryToolIndexEntry> = {
         "key": "qr_code_generator",
         "slug": "qr-code-generator",
         "relatedToolKeys": [
-            "uuid_generator",
-            "password_generator",
-            "url_encode_decode"
+            "barcode_generator",
+            "image_base64",
+            "url_encode_decode",
+            "svg_to_png_converter"
         ],
         "relatedWorkflows": [],
         "sampleInput": null,
@@ -2177,7 +2178,8 @@ const DISCOVERY_TOOL_INDEX: Record<string, DiscoveryToolIndexEntry> = {
         "compliance": null,
         "family": "generators",
         "tags": [
-            "generators"
+            "generators",
+            "image"
         ],
         "capabilities": [
             "browser-local",
diff --git a/src/generated/route-width-inventory.json b/src/generated/route-width-inventory.json
new file mode 100644
index 00000000..22ea03ce
--- /dev/null
+++ b/src/generated/route-width-inventory.json
@@ -0,0 +1,3472 @@
+{
+  "schemaVersion": 1,
+  "contracts": {
+    "viewport": "mx-auto w-full max-w-screen-2xl px-4 md:px-8 lg:px-10",
+    "intents": {
+      "tool": "mx-auto w-full max-w-6xl",
+      "wide-tool": "mx-auto w-full max-w-[1400px]",
+      "static": "mx-auto w-full max-w-5xl",
+      "catalog": "mx-auto w-full max-w-6xl"
+    },
+    "representativeRoutes": {
+      "all-tools": "catalog",
+      "install-app": "static",
+      "json-formatter": "wide-tool",
+      "pipeline-builder": "wide-tool",
+      "qr-code-generator": "tool",
+      "support": "static"
+    },
+    "wideToolSlugs": [
+      "asn1-der-inspector",
+      "base64-encode-decode",
+      "code-to-image-converter",
+      "css-formatter",
+      "css-minifier",
+      "csv-diff",
+      "csv-json-converter",
+      "curl-to-code",
+      "env-parser",
+      "graphql-workbench",
+      "gzip-brotli-lab",
+      "har-viewer-sanitizer",
+      "header-diff",
+      "hex-bytes-workbench",
+      "html-css-beautifier",
+      "html-encoder-decoder",
+      "html-formatter",
+      "html-minifier",
+      "html-to-markdown",
+      "javascript-formatter",
+      "javascript-minifier",
+      "jq-playground",
+      "json-diff-viewer",
+      "json-formatter",
+      "json-schema-workbench",
+      "json-to-typescript",
+      "jsonpath-playground",
+      "jwt-decoder",
+      "letter-counter",
+      "local-log-parser",
+      "log-scrubber",
+      "markdown-preview",
+      "multiple-whitespace-remover",
+      "ndjson-formatter",
+      "openapi-diff",
+      "openapi-mock",
+      "openapi-viewer",
+      "pipeline-builder",
+      "regex-generator",
+      "saml-decoder",
+      "sql-formatter",
+      "structured-data-visualizer",
+      "svg-optimizer",
+      "text-diff-checker",
+      "unicode-inspector",
+      "url-encode-decode",
+      "xml-formatter",
+      "yaml-json-converter",
+      "yaml-merge-patch-explorer",
+      "yq-playground"
+    ]
+  },
+  "summary": {
+    "scannedFiles": 941,
+    "pageRoots": 369,
+    "toolSurfaces": 131,
+    "standardTools": 82,
+    "wideTools": 49
+  },
+  "toolSurfaces": [
+    {
+      "slug": "ai-color-palette-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "ascii-art-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "asn1-der-inspector",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "barcode-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "base-encoding-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "base64-encode-decode",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "bionic-reading-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "certificate-decoder",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "chmod-calculator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "cidr-subnet-calculator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "code-to-image-converter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "color-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "color-mixer",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "color-shades-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "cron-visualizer",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "crontab-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "csp-parser",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-background-pattern-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-border-radius-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-box-shadow-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-checkbox-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-clip-path-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-cubic-bezier-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-glassmorphism-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-gradient-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-loader-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-minifier",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-switch-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-text-glitch-effect-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "css-triangle-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "csv-diff",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "csv-json-converter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "curl-to-code",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "devops-yaml-validator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "docker-run-to-compose",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "env-parser",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "fake-iban-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "google-fonts-pair-finder",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "graphql-workbench",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "gzip-brotli-lab",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "har-viewer-sanitizer",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "hash-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "header-diff",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "hex-bytes-workbench",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "html-css-beautifier",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "html-encoder-decoder",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "html-formatter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "html-minifier",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "html-to-markdown",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "http-request-builder",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "http-status-codes",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "id-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-average-color-finder",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-base64",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-caption-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-color-extractor",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-color-picker",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-cropper",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-filters",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-privacy-workbench",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "image-resizer",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "instagram-filters",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "instagram-photo-downloader",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "instagram-post-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "instagram-story-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "invisible-characters-detector",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "javascript-formatter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "javascript-minifier",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "jq-playground",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "json-diff-viewer",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "json-formatter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "json-schema-workbench",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "json-to-typescript",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "jsonpath-playground",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "jwt-decoder",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "jwt-verifier",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "jwt-workbench",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "letter-counter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "list-randomizer",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "local-log-parser",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "log-scrubber",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "lorem-ipsum",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "markdown-preview",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "md5-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "messagepack-inspector",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "multiple-whitespace-remover",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "ndjson-formatter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "oauth-jwks-workbench",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "open-graph-meta-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "openapi-diff",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "openapi-mock",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "openapi-viewer",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "password-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "photo-censor",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "pipeline-builder",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "public-key-jwk-helper",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "qr-code-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "react-native-shadow-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "regex-generator",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "regex-tester",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "robots-txt-tester",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "saml-decoder",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "scanned-pdf-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "security-header-analyzer",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "seo-metadata-workbench",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "slugify-case-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "sql-formatter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "structured-data-visualizer",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "svg-blob-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "svg-optimizer",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "svg-pattern-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "svg-stroke-to-fill-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "svg-to-png-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "text-diff-checker",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "text-to-handwriting-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "totp-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "tweet-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "tweet-to-image-converter",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "twitter-ad-revenue-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "unicode-inspector",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "unix-timestamp",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "url-encode-decode",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "url-parser",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "user-agent-parser",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "uuid-generator",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "vimeo-thumbnail-grabber",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "xml-formatter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "yaml-json-converter",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "yaml-merge-patch-explorer",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    },
+    {
+      "slug": "youtube-thumbnail-grabber",
+      "intent": "tool",
+      "roots": [
+        "ToolPageContainer"
+      ]
+    },
+    {
+      "slug": "yq-playground",
+      "intent": "wide-tool",
+      "roots": [
+        "WideToolPageContainer"
+      ]
+    }
+  ],
+  "centeredMaxWidthExceptions": [
+    {
+      "file": "src/app/[lang]/error.tsx",
+      "element": "section",
+      "line": 44,
+      "reason": "focused-status",
+      "maxWidthTokens": [
+        "max-w-2xl"
+      ]
+    },
+    {
+      "file": "src/app/[lang]/page.tsx",
+      "element": "div",
+      "line": 197,
+      "reason": "home-shell",
+      "maxWidthTokens": [
+        "max-w-screen-2xl"
+      ]
+    },
+    {
+      "file": "src/app/[lang]/page.tsx",
+      "element": "div",
+      "line": 206,
+      "reason": "home-hero",
+      "maxWidthTokens": [
+        "max-w-4xl"
+      ]
+    },
+    {
+      "file": "src/app/[lang]/page.tsx",
+      "element": "p",
+      "line": 220,
+      "reason": "home-copy",
+      "maxWidthTokens": [
+        "max-w-2xl"
+      ]
+    },
+    {
+      "file": "src/components/layout/app-runtime.tsx",
+      "element": "div",
+      "line": 262,
+      "reason": "runtime-banner",
+      "maxWidthTokens": [
+        "max-w-6xl"
+      ]
+    },
+    {
+      "file": "src/components/layout/footer-content.tsx",
+      "element": "div",
+      "line": 35,
+      "reason": "global-shell",
+      "maxWidthTokens": [
+        "max-w-screen-2xl"
+      ]
+    },
+    {
+      "file": "src/components/layout/lang-not-found-content.tsx",
+      "element": "section",
+      "line": 31,
+      "reason": "focused-status",
+      "maxWidthTokens": [
+        "max-w-3xl"
+      ]
+    },
+    {
+      "file": "src/components/layout/navbar.tsx",
+      "element": "div",
+      "line": 33,
+      "reason": "global-shell",
+      "maxWidthTokens": [
+        "max-w-screen-2xl"
+      ]
+    },
+    {
+      "file": "src/components/layout/seo-faq-section.tsx",
+      "element": "div",
+      "line": 42,
+      "reason": "readable-content",
+      "maxWidthTokens": [
+        "max-w-3xl"
+      ]
+    },
+    {
+      "file": "src/core/seo/components/legacy-tool-redirect-page.tsx",
+      "element": "div",
+      "line": 13,
+      "reason": "legacy-redirect",
+      "maxWidthTokens": [
+        "max-w-xl"
+      ]
+    },
+    {
+      "file": "src/core/seo/components/tool-content-template-modules/core.tsx",
+      "element": "div",
+      "line": 144,
+      "reason": "readable-content",
+      "maxWidthTokens": [
+        "max-w-4xl"
+      ]
+    },
+    {
+      "file": "src/features/tools/cidr-subnet-calculator/page.tsx",
+      "element": "div",
+      "line": 107,
+      "reason": "focused-work-surface",
+      "maxWidthTokens": [
+        "max-w-3xl"
+      ]
+    }
+  ],
+  "pageRoots": [
+    {
+      "file": "src/app/[lang]/about/page.tsx",
+      "component": "AboutPage",
+      "element": "StaticPageContainer",
+      "line": 29
+    },
+    {
+      "file": "src/app/[lang]/ai-color-palette-generator/page.tsx",
+      "component": "AiColorPaletteGeneratorRoutePage",
+      "element": "AiColorPaletteGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/all-tools/page.tsx",
+      "component": "AllToolsPage",
+      "element": "CatalogPageContainer",
+      "line": 99
+    },
+    {
+      "file": "src/app/[lang]/api-auth-header-mistakes/page.tsx",
+      "component": "ApiAuthHeaderMistakesPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/api-auth-header-mistakes/page.tsx",
+      "component": "ApiAuthHeaderMistakesPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/ascii-art-generator/page.tsx",
+      "component": "AsciiArtGeneratorRoutePage",
+      "element": "AsciiArtGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/asn1-der-inspector/page.tsx",
+      "component": "Asn1DerInspectorRoutePage",
+      "element": "Asn1DerInspectorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/barcode-generator/page.tsx",
+      "component": "BarcodeGeneratorRoutePage",
+      "element": "BarcodeGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/base-encoding-converter/page.tsx",
+      "component": "Page",
+      "element": "BaseEncodingConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/base64-encode-decode/page.tsx",
+      "component": "Base64RoutePage",
+      "element": "Base64Page",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/base64-encoding-when-and-how-to-use-it/page.tsx",
+      "component": "Base64EncodingWhenAndHowToUseItPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/base64-encoding-when-and-how-to-use-it/page.tsx",
+      "component": "Base64EncodingWhenAndHowToUseItPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/bionic-reading-converter/page.tsx",
+      "component": "BionicReadingConverterRoutePage",
+      "element": "BionicReadingConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/certificate-chain-basics-for-developers/page.tsx",
+      "component": "CertificateChainBasicsPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/certificate-chain-basics-for-developers/page.tsx",
+      "component": "CertificateChainBasicsPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/certificate-decoder/page.tsx",
+      "component": "CertificateDecoderRoutePage",
+      "element": "CertificateDecoderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/changelog/page.tsx",
+      "component": "ChangelogPage",
+      "element": "StaticPageContainer",
+      "line": 222
+    },
+    {
+      "file": "src/app/[lang]/chmod-calculator/page.tsx",
+      "component": "ChmodCalculatorRoutePage",
+      "element": "ChmodCalculatorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/cidr-subnet-calculator/page.tsx",
+      "component": "CidrSubnetCalculatorRoutePage",
+      "element": "CidrSubnetCalculatorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/code-to-image-converter/page.tsx",
+      "component": "CodeToImageConverterRoutePage",
+      "element": "CodeToImageConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/color-converter/page.tsx",
+      "component": "ColorConverterRoutePage",
+      "element": "ColorConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/color-extraction-from-images-use-cases-and-tools/page.tsx",
+      "component": "ColorExtractionFromImagesUseCasesAndToolsPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/color-extraction-from-images-use-cases-and-tools/page.tsx",
+      "component": "ColorExtractionFromImagesUseCasesAndToolsPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/color-mixer/page.tsx",
+      "component": "ColorMixerRoutePage",
+      "element": "ColorMixerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/color-shades-generator/page.tsx",
+      "component": "ColorShadesGeneratorRoutePage",
+      "element": "ColorShadesGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/contact/page.tsx",
+      "component": "ContactPage",
+      "element": "StaticPageContainer",
+      "line": 43
+    },
+    {
+      "file": "src/app/[lang]/convert-curl-to-fetch-python/page.tsx",
+      "component": "ConvertCurlToFetchPythonPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/convert-curl-to-fetch-python/page.tsx",
+      "component": "ConvertCurlToFetchPythonPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/convert-encode/page.tsx",
+      "component": "ConvertEncodePage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/cron-expression-generator/page.tsx",
+      "component": "CronExpressionGeneratorRedirect",
+      "element": "LegacyToolRedirectPage",
+      "line": 34
+    },
+    {
+      "file": "src/app/[lang]/cron-visualizer/page.tsx",
+      "component": "CronVisualizerRoutePage",
+      "element": "CronVisualizerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/crontab-generator/page.tsx",
+      "component": "CrontabGeneratorRoutePage",
+      "element": "CrontabGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/csp-mistakes-that-break-production/page.tsx",
+      "component": "CspMistakesThatBreakProductionPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/csp-mistakes-that-break-production/page.tsx",
+      "component": "CspMistakesThatBreakProductionPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/csp-parser/page.tsx",
+      "component": "CspParserRoutePage",
+      "element": "CspParserPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-animations-and-transitions-guide/page.tsx",
+      "component": "CssAnimationsAndTransitionsGuidePage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/css-animations-and-transitions-guide/page.tsx",
+      "component": "CssAnimationsAndTransitionsGuidePage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/css-background-pattern-generator/page.tsx",
+      "component": "CssBackgroundPatternGeneratorRoutePage",
+      "element": "CssBackgroundPatternGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-border-radius-and-shapes-guide/page.tsx",
+      "component": "CssBorderRadiusAndShapesGuidePage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/css-border-radius-and-shapes-guide/page.tsx",
+      "component": "CssBorderRadiusAndShapesGuidePage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/css-border-radius-generator/page.tsx",
+      "component": "CssBorderRadiusGeneratorRoutePage",
+      "element": "CssBorderRadiusGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-box-shadow-generator/page.tsx",
+      "component": "CssBoxShadowGeneratorRoutePage",
+      "element": "CssBoxShadowGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-checkbox-generator/page.tsx",
+      "component": "CssCheckboxGeneratorRoutePage",
+      "element": "CssCheckboxGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-clip-path-generator/page.tsx",
+      "component": "CssClipPathGeneratorRoutePage",
+      "element": "CssClipPathGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-cubic-bezier-generator/page.tsx",
+      "component": "CssCubicBezierGeneratorRoutePage",
+      "element": "CssCubicBezierGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-formatter/page.tsx",
+      "component": "CssFormatterPage",
+      "element": "HtmlCssBeautifierTool",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-glassmorphism-generator/page.tsx",
+      "component": "CssGlassmorphismGeneratorRoutePage",
+      "element": "CssGlassmorphismGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-gradient-generator/page.tsx",
+      "component": "CssGradientGeneratorRoutePage",
+      "element": "CssGradientGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-layout-patterns-for-developers/page.tsx",
+      "component": "CssLayoutPatternsForDevelopersPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/css-layout-patterns-for-developers/page.tsx",
+      "component": "CssLayoutPatternsForDevelopersPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/css-loader-generator/page.tsx",
+      "component": "CssLoaderGeneratorRoutePage",
+      "element": "CssLoaderGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-minifier/page.tsx",
+      "component": "CssMinifierRoutePage",
+      "element": "CssMinifierPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-switch-generator/page.tsx",
+      "component": "CssSwitchGeneratorRoutePage",
+      "element": "CssSwitchGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-text-glitch-effect-generator/page.tsx",
+      "component": "CssTextGlitchEffectGeneratorRoutePage",
+      "element": "CssTextGlitchEffectGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/css-triangle-generator/page.tsx",
+      "component": "CssTriangleGeneratorRoutePage",
+      "element": "CssTriangleGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/csv-diff/page.tsx",
+      "component": "CsvDiffRoutePage",
+      "element": "CsvDiffPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/csv-json-converter/page.tsx",
+      "component": "CsvJsonConverterRoutePage",
+      "element": "CsvJsonConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/csv-to-json/page.tsx",
+      "component": "CsvToJsonRedirect",
+      "element": "LegacyToolRedirectPage",
+      "line": 23
+    },
+    {
+      "file": "src/app/[lang]/curl-to-code/page.tsx",
+      "component": "CurlToCodeRoutePage",
+      "element": "CurlToCodePage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/data-code-formats/page.tsx",
+      "component": "DataCodeFormatsPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/design-media/page.tsx",
+      "component": "DesignMediaPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/devops-logs/page.tsx",
+      "component": "DevopsLogsPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/devops-yaml-validator/page.tsx",
+      "component": "Page",
+      "element": "DevopsYamlValidatorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/distribution-research/page.tsx",
+      "component": "DistributionResearchPage",
+      "element": "StaticPageContainer",
+      "line": 174
+    },
+    {
+      "file": "src/app/[lang]/dns-records-uptime/page.tsx",
+      "component": "DnsRecordsUptimePage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/dns-records-uptime/page.tsx",
+      "component": "DnsRecordsUptimePage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/docker-run-to-compose/page.tsx",
+      "component": "DockerRunToComposeRoutePage",
+      "element": "DockerRunToComposePage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/encoding-crypto/page.tsx",
+      "component": "EncodingCryptoPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/env-parser/page.tsx",
+      "component": "EnvVariableParserRoutePage",
+      "element": "EnvVariableParserPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/error.tsx",
+      "component": "LangError",
+      "element": "div",
+      "line": 43
+    },
+    {
+      "file": "src/app/[lang]/fake-iban-generator/page.tsx",
+      "component": "FakeIbanGeneratorRoutePage",
+      "element": "FakeIbanGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/format-validate/page.tsx",
+      "component": "FormatValidatePage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/formatters/page.tsx",
+      "component": "FormattersPage",
+      "element": "CategoryHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/generators-calculators/page.tsx",
+      "component": "GeneratorsCalculatorsPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/generators-ids/page.tsx",
+      "component": "GeneratorsIdsPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/generators/page.tsx",
+      "component": "GeneratorsPage",
+      "element": "CategoryHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/google-fonts-pair-finder/page.tsx",
+      "component": "GoogleFontsPairFinderRoutePage",
+      "element": "GoogleFontsPairFinderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/graphql-workbench/page.tsx",
+      "component": "Page",
+      "element": "GraphqlWorkbenchPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/gzip-brotli-lab/page.tsx",
+      "component": "GzipBrotliLabRoutePage",
+      "element": "GzipBrotliLabPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/har-viewer-sanitizer/page.tsx",
+      "component": "HarViewerSanitizerRoutePage",
+      "element": "HarViewerSanitizerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/hash-functions-compared-md5-vs-sha256-vs-sha512/page.tsx",
+      "component": "HashFunctionsComparedMd5VsSha256VsSha512Page",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/hash-functions-compared-md5-vs-sha256-vs-sha512/page.tsx",
+      "component": "HashFunctionsComparedMd5VsSha256VsSha512Page",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/hash-generator/page.tsx",
+      "component": "HashGeneratorRoutePage",
+      "element": "HashGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/header-diff/page.tsx",
+      "component": "HeaderDiffRoutePage",
+      "element": "HeaderDiffPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/hex-bytes-workbench/page.tsx",
+      "component": "HexBytesWorkbenchRoutePage",
+      "element": "HexBytesWorkbenchPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/html-css-beautifier/page.tsx",
+      "component": "HtmlCssBeautifierRoutePage",
+      "element": "HtmlCssBeautifierPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/html-encoder-decoder/page.tsx",
+      "component": "HtmlEncoderDecoderRoutePage",
+      "element": "HtmlEncoderDecoderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/html-formatter/page.tsx",
+      "component": "HtmlFormatterRoutePage",
+      "element": "HtmlFormatterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/html-minifier/page.tsx",
+      "component": "HtmlMinifierRoutePage",
+      "element": "HtmlMinifierPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/html-to-markdown/page.tsx",
+      "component": "HtmlToMarkdownRoutePage",
+      "element": "HtmlToMarkdownPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/http-request-builder/page.tsx",
+      "component": "HttpRequestBuilderRoutePage",
+      "element": "HttpRequestBuilderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/http-status-codes/page.tsx",
+      "component": "HttpStatusCodesRoutePage",
+      "element": "HttpStatusCodesPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/id-generator/page.tsx",
+      "component": "IdGeneratorRoutePage",
+      "element": "IdGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-average-color-finder/page.tsx",
+      "component": "ImageAverageColorFinderRoutePage",
+      "element": "ImageAverageColorFinderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-base64/page.tsx",
+      "component": "ImageBase64RoutePage",
+      "element": "ImageBase64Page",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-caption-generator/page.tsx",
+      "component": "ImageCaptionGeneratorRoutePage",
+      "element": "ImageCaptionGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-color-extractor/page.tsx",
+      "component": "ImageColorExtractorRoutePage",
+      "element": "ImageColorExtractorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-color-picker/page.tsx",
+      "component": "ImageColorPickerRoutePage",
+      "element": "ImageColorPickerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-cropper/page.tsx",
+      "component": "ImageCropperRoutePage",
+      "element": "ImageCropperPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-filters/page.tsx",
+      "component": "ImageFiltersRoutePage",
+      "element": "ImageFiltersPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-optimization-for-web-complete-workflow/page.tsx",
+      "component": "ImageOptimizationForWebCompleteWorkflowPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/image-optimization-for-web-complete-workflow/page.tsx",
+      "component": "ImageOptimizationForWebCompleteWorkflowPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/image-privacy-how-to-censor-and-protect-images/page.tsx",
+      "component": "ImagePrivacyHowToCensorAndProtectImagesPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/image-privacy-how-to-censor-and-protect-images/page.tsx",
+      "component": "ImagePrivacyHowToCensorAndProtectImagesPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/image-privacy-workbench/page.tsx",
+      "component": "Page",
+      "element": "ImagePrivacyWorkbenchPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/image-resizer/page.tsx",
+      "component": "ImageResizerRoutePage",
+      "element": "ImageResizerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/images-svg-css/page.tsx",
+      "component": "ImagesSvgCssPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/instagram-filters/page.tsx",
+      "component": "InstagramFiltersRoutePage",
+      "element": "InstagramFiltersPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/instagram-photo-downloader/page.tsx",
+      "component": "InstagramPhotoDownloaderRoutePage",
+      "element": "InstagramPhotoDownloaderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/instagram-post-generator/page.tsx",
+      "component": "InstagramPostGeneratorRoutePage",
+      "element": "InstagramPostGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/instagram-story-generator/page.tsx",
+      "component": "InstagramStoryGeneratorRoutePage",
+      "element": "InstagramStoryGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/install-app/page.tsx",
+      "component": "InstallAppPage",
+      "element": "InstallAppClient",
+      "line": 24
+    },
+    {
+      "file": "src/app/[lang]/invisible-characters-detector/page.tsx",
+      "component": "InvisibleCharsDetectorRoutePage",
+      "element": "InvisibleCharsDetectorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/javascript-formatter/page.tsx",
+      "component": "JavascriptFormatterRoutePage",
+      "element": "JavascriptFormatterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/javascript-minifier/page.tsx",
+      "component": "JavascriptMinifierRoutePage",
+      "element": "JavascriptMinifierPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/jq-playground/page.tsx",
+      "component": "JqPlaygroundRoutePage",
+      "element": "JqPlaygroundPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/json-diff-viewer/page.tsx",
+      "component": "JsonDiffViewerRoutePage",
+      "element": "JsonDiffViewerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/json-formatter/page.tsx",
+      "component": "JsonFormatterRoutePage",
+      "element": "JsonFormatterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/json-formatting-errors/page.tsx",
+      "component": "JsonFormattingErrorsPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/json-formatting-errors/page.tsx",
+      "component": "JsonFormattingErrorsPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/json-schema-validation-checklist/page.tsx",
+      "component": "JsonSchemaValidationChecklistPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/json-schema-validation-checklist/page.tsx",
+      "component": "JsonSchemaValidationChecklistPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/json-schema-workbench/page.tsx",
+      "component": "Page",
+      "element": "JsonSchemaWorkbenchPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/json-to-typescript/page.tsx",
+      "component": "JsonToTypeScriptRoutePage",
+      "element": "JsonToTypeScriptPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/json-vs-json5-differences/page.tsx",
+      "component": "JsonVsJson5DifferencesPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/json-vs-json5-differences/page.tsx",
+      "component": "JsonVsJson5DifferencesPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/jsonpath-playground/page.tsx",
+      "component": "JsonPathPlaygroundRoutePage",
+      "element": "JsonPathPlaygroundPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/jwt-decoder/page.tsx",
+      "component": "JwtDecoderRoutePage",
+      "element": "JwtDecoderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/jwt-security-best-practices-for-token-handling/page.tsx",
+      "component": "JwtSecurityBestPracticesForTokenHandlingPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/jwt-security-best-practices-for-token-handling/page.tsx",
+      "component": "JwtSecurityBestPracticesForTokenHandlingPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/jwt-verifier/page.tsx",
+      "component": "JwtVerifierRoutePage",
+      "element": "JwtVerifierPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/jwt-workbench/page.tsx",
+      "component": "JwtWorkbenchRoutePage",
+      "element": "JwtWorkbenchPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/letter-counter/page.tsx",
+      "component": "LetterCounterRoutePage",
+      "element": "LetterCounterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/list-randomizer/page.tsx",
+      "component": "ListRandomizerRoutePage",
+      "element": "ListRandomizerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/loading.tsx",
+      "component": "LangLoading",
+      "element": "div",
+      "line": 3
+    },
+    {
+      "file": "src/app/[lang]/local-log-parser/page.tsx",
+      "component": "LocalLogParserRoutePage",
+      "element": "LocalLogParserPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/log-scrubber/page.tsx",
+      "component": "LogScrubberRoutePage",
+      "element": "LogScrubberPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/lorem-ipsum/page.tsx",
+      "component": "LoremIpsumGeneratorRoutePage",
+      "element": "LoremIpsumGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/markdown-preview/page.tsx",
+      "component": "MarkdownPreviewRoutePage",
+      "element": "MarkdownPreviewPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/md5-digest-generator/page.tsx",
+      "component": "Md5EncryptDecryptPage",
+      "element": "Fragment",
+      "line": 28
+    },
+    {
+      "file": "src/app/[lang]/md5-generator/page.tsx",
+      "component": "Md5GeneratorRoutePage",
+      "element": "Md5GeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/messagepack-inspector/page.tsx",
+      "component": "Page",
+      "element": "MessagepackInspectorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/mock-openapi-quickly/page.tsx",
+      "component": "MockOpenapiQuicklyPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/mock-openapi-quickly/page.tsx",
+      "component": "MockOpenapiQuicklyPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/modern-css-effects-guide/page.tsx",
+      "component": "ModernCssEffectsGuidePage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/modern-css-effects-guide/page.tsx",
+      "component": "ModernCssEffectsGuidePage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/multiple-whitespace-remover/page.tsx",
+      "component": "MultipleWhitespaceRemoverRoutePage",
+      "element": "MultipleWhitespaceRemoverPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/ndjson-formatter/page.tsx",
+      "component": "NdjsonFormatterRoutePage",
+      "element": "NdjsonFormatterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/network-tools/page.tsx",
+      "component": "NetworkToolsPage",
+      "element": "CategoryHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/not-found.tsx",
+      "component": "LangNotFound",
+      "element": "LangNotFoundContent",
+      "line": 44
+    },
+    {
+      "file": "src/app/[lang]/oauth-jwks-workbench/page.tsx",
+      "component": "Page",
+      "element": "OauthJwksWorkbenchPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/open-graph-meta-generator/page.tsx",
+      "component": "OpenGraphMetaGeneratorRoutePage",
+      "element": "OpenGraphMetaGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/openapi-debugging-workflow-checklist/page.tsx",
+      "component": "OpenapiDebuggingWorkflowChecklistPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/openapi-debugging-workflow-checklist/page.tsx",
+      "component": "OpenapiDebuggingWorkflowChecklistPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/openapi-diff/page.tsx",
+      "component": "Page",
+      "element": "OpenapiDiffPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/openapi-mock/page.tsx",
+      "component": "OpenApiMockRoutePage",
+      "element": "OpenApiMockPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/openapi-viewer/page.tsx",
+      "component": "OpenApiViewerRoutePage",
+      "element": "OpenApiViewerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/page.tsx",
+      "component": "Home",
+      "element": "div",
+      "line": 190
+    },
+    {
+      "file": "src/app/[lang]/password-generator/page.tsx",
+      "component": "PasswordGeneratorRoutePage",
+      "element": "PasswordGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/photo-censor/page.tsx",
+      "component": "PhotoCensorRoutePage",
+      "element": "PhotoCensorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/pipeline-builder/page.tsx",
+      "component": "PipelineBuilderRoutePage",
+      "element": "PipelineBuilderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/pricing/page.tsx",
+      "component": "PricingPage",
+      "element": "StaticPageContainer",
+      "line": 44
+    },
+    {
+      "file": "src/app/[lang]/privacy/page.tsx",
+      "component": "PrivacyPage",
+      "element": "StaticPageContainer",
+      "line": 32
+    },
+    {
+      "file": "src/app/[lang]/public-key-jwk-helper/page.tsx",
+      "component": "Page",
+      "element": "PublicKeyJwkHelperPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/qr-code-generator/page.tsx",
+      "component": "QrCodeGeneratorRoutePage",
+      "element": "QrCodeGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/react-native-shadow-generator/page.tsx",
+      "component": "ReactNativeShadowGeneratorRoutePage",
+      "element": "ReactNativeShadowGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/regex-generator/page.tsx",
+      "component": "RegexGeneratorRoutePage",
+      "element": "RegexGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/regex-tester/page.tsx",
+      "component": "RegexTesterRoutePage",
+      "element": "RegexTesterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/roadmap/page.tsx",
+      "component": "RoadmapPage",
+      "element": "StaticPageContainer",
+      "line": 141
+    },
+    {
+      "file": "src/app/[lang]/robots-txt-tester/page.tsx",
+      "component": "RobotsTxtTesterRoutePage",
+      "element": "RobotsTxtTesterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/robots-txt-testing-checklist/page.tsx",
+      "component": "RobotsTxtTestingChecklistPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/robots-txt-testing-checklist/page.tsx",
+      "component": "RobotsTxtTestingChecklistPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/saml-decoder/page.tsx",
+      "component": "SamlDecoderRoutePage",
+      "element": "SamlDecoderPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/scanned-pdf-converter/page.tsx",
+      "component": "ScannedPdfConverterRoutePage",
+      "element": "ScannedPdfConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/security-header-analyzer/page.tsx",
+      "component": "SecurityHeaderAnalyzerRoutePage",
+      "element": "SecurityHeaderAnalyzerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/self-hosting/page.tsx",
+      "component": "SelfHostingPage",
+      "element": "StaticPageContainer",
+      "line": 148
+    },
+    {
+      "file": "src/app/[lang]/seo-metadata-workbench/page.tsx",
+      "component": "Page",
+      "element": "SeoMetadataWorkbenchPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/sha1-digest-generator/page.tsx",
+      "component": "Sha1EncryptDecryptPage",
+      "element": "Fragment",
+      "line": 37
+    },
+    {
+      "file": "src/app/[lang]/sha224-digest-generator/page.tsx",
+      "component": "Sha224EncryptDecryptPage",
+      "element": "Fragment",
+      "line": 46
+    },
+    {
+      "file": "src/app/[lang]/sha256-digest-generator/page.tsx",
+      "component": "Sha256EncryptDecryptPage",
+      "element": "Fragment",
+      "line": 28
+    },
+    {
+      "file": "src/app/[lang]/sha384-digest-generator/page.tsx",
+      "component": "Sha384EncryptDecryptPage",
+      "element": "Fragment",
+      "line": 46
+    },
+    {
+      "file": "src/app/[lang]/sha512-digest-generator/page.tsx",
+      "component": "Sha512EncryptDecryptPage",
+      "element": "Fragment",
+      "line": 28
+    },
+    {
+      "file": "src/app/[lang]/slugify-case-converter/page.tsx",
+      "component": "SlugifyCaseConverterRoutePage",
+      "element": "SlugifyCaseConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/social-metadata/page.tsx",
+      "component": "SocialMetadataPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/sql-formatter/page.tsx",
+      "component": "SqlFormatterRoutePage",
+      "element": "SqlFormatterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/structured-data-visualizer/page.tsx",
+      "component": "StructuredDataVisualizerRoutePage",
+      "element": "StructuredDataVisualizerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/support/page.tsx",
+      "component": "SupportPage",
+      "element": "StaticPageContainer",
+      "line": 25
+    },
+    {
+      "file": "src/app/[lang]/svg-blob-generator/page.tsx",
+      "component": "SvgBlobGeneratorRoutePage",
+      "element": "SvgBlobGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/svg-optimization-and-conversion-best-practices/page.tsx",
+      "component": "SvgOptimizationAndConversionBestPracticesPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/svg-optimization-and-conversion-best-practices/page.tsx",
+      "component": "SvgOptimizationAndConversionBestPracticesPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/svg-optimizer/page.tsx",
+      "component": "SvgOptimizerRoutePage",
+      "element": "SvgOptimizerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/svg-pattern-generator/page.tsx",
+      "component": "SvgPatternGeneratorRoutePage",
+      "element": "SvgPatternGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/svg-stroke-to-fill-converter/page.tsx",
+      "component": "SvgStrokeToFillConverterRoutePage",
+      "element": "SvgStrokeToFillConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/svg-to-png-converter/page.tsx",
+      "component": "SvgToPngConverterRoutePage",
+      "element": "SvgToPngConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/terms/page.tsx",
+      "component": "TermsPage",
+      "element": "StaticPageContainer",
+      "line": 19
+    },
+    {
+      "file": "src/app/[lang]/text-content/page.tsx",
+      "component": "TextContentPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/text-diff-checker/page.tsx",
+      "component": "TextDiffCheckerRoutePage",
+      "element": "TextDiffCheckerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/text-regex/page.tsx",
+      "component": "TextRegexPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/text-to-handwriting-converter/page.tsx",
+      "component": "TextToHandwritingConverterRoutePage",
+      "element": "TextToHandwritingConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/text-tools/page.tsx",
+      "component": "TextToolsPage",
+      "element": "CategoryHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/tls-chain-inspector/page.tsx",
+      "component": "TlsChainInspectorRedirect",
+      "element": "LegacyToolRedirectPage",
+      "line": 29
+    },
+    {
+      "file": "src/app/[lang]/totp-generator/page.tsx",
+      "component": "TotpGeneratorRoutePage",
+      "element": "TotpGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/trust-center/page.tsx",
+      "component": "TrustCenterPage",
+      "element": "StaticPageContainer",
+      "line": 146
+    },
+    {
+      "file": "src/app/[lang]/tweet-generator/page.tsx",
+      "component": "TweetGeneratorRoutePage",
+      "element": "TweetGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/tweet-to-image-converter/page.tsx",
+      "component": "TweetToImageConverterRoutePage",
+      "element": "TweetToImageConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/twitter-ad-revenue-generator/page.tsx",
+      "component": "TwitterAdRevenueGeneratorRoutePage",
+      "element": "TwitterAdRevenueGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/unicode-inspector/page.tsx",
+      "component": "UnicodeInspectorRoutePage",
+      "element": "UnicodeInspectorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/unix-timestamp/page.tsx",
+      "component": "UnixTimestampRoutePage",
+      "element": "UnixTimestampPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/url-encode-decode/page.tsx",
+      "component": "UrlEncodeDecodeRoutePage",
+      "element": "UrlEncodeDecodePage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/url-encoding-explained-common-mistakes-and-solutions/page.tsx",
+      "component": "UrlEncodingExplainedCommonMistakesAndSolutionsPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/url-encoding-explained-common-mistakes-and-solutions/page.tsx",
+      "component": "UrlEncodingExplainedCommonMistakesAndSolutionsPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/url-parser/page.tsx",
+      "component": "UrlParserRoutePage",
+      "element": "UrlParserPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/user-agent-parser/page.tsx",
+      "component": "UserAgentParserRoutePage",
+      "element": "UserAgentParserPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/uuid-generator/page.tsx",
+      "component": "UuidGeneratorRoutePage",
+      "element": "UuidGeneratorPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/validate-json-before-api-requests/page.tsx",
+      "component": "ValidateJsonBeforeApiRequestsPage",
+      "element": "LocalizedArticlePage",
+      "line": 17
+    },
+    {
+      "file": "src/app/[lang]/validate-json-before-api-requests/page.tsx",
+      "component": "ValidateJsonBeforeApiRequestsPage",
+      "element": "StaticPageContainer",
+      "line": 21
+    },
+    {
+      "file": "src/app/[lang]/vimeo-thumbnail-grabber/page.tsx",
+      "component": "VimeoThumbnailGrabberRoutePage",
+      "element": "VimeoThumbnailGrabberPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/web-api-network/page.tsx",
+      "component": "WebApiNetworkPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/web-api/page.tsx",
+      "component": "WebApiPage",
+      "element": "MenuGroupHub",
+      "line": 11
+    },
+    {
+      "file": "src/app/[lang]/workflows/api-payload-cleanup/page.tsx",
+      "component": "ApiPayloadCleanupWorkflowPage",
+      "element": "WorkflowDetailPage",
+      "line": 36
+    },
+    {
+      "file": "src/app/[lang]/workflows/image-resize-social-export/page.tsx",
+      "component": "ImageResizeSocialExportWorkflowPage",
+      "element": "WorkflowDetailPage",
+      "line": 36
+    },
+    {
+      "file": "src/app/[lang]/workflows/json-typescript-contract-review/page.tsx",
+      "component": "JsonTypescriptContractReviewWorkflowPage",
+      "element": "WorkflowDetailPage",
+      "line": 36
+    },
+    {
+      "file": "src/app/[lang]/workflows/log-scrub-before-sharing/page.tsx",
+      "component": "LogScrubBeforeSharingWorkflowPage",
+      "element": "WorkflowDetailPage",
+      "line": 36
+    },
+    {
+      "file": "src/app/[lang]/workflows/page.tsx",
+      "component": "WorkflowsPage",
+      "element": "WorkflowIndexPage",
+      "line": 28
+    },
+    {
+      "file": "src/app/[lang]/workflows/security-token-review/page.tsx",
+      "component": "SecurityTokenReviewWorkflowPage",
+      "element": "WorkflowDetailPage",
+      "line": 36
+    },
+    {
+      "file": "src/app/[lang]/xml-formatter/page.tsx",
+      "component": "XmlFormatterRoutePage",
+      "element": "XmlFormatterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/yaml-json-converter/page.tsx",
+      "component": "YamlJsonConverterRoutePage",
+      "element": "YamlJsonConverterPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/yaml-merge-patch-explorer/page.tsx",
+      "component": "YamlMergePatchExplorerRoutePage",
+      "element": "YamlMergePatchExplorerPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/youtube-thumbnail-grabber/page.tsx",
+      "component": "YouTubeThumbnailGrabberRoutePage",
+      "element": "YouTubeThumbnailGrabberPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/[lang]/yq-playground/page.tsx",
+      "component": "YqPlaygroundRoutePage",
+      "element": "YqPlaygroundPage",
+      "line": 6
+    },
+    {
+      "file": "src/app/not-found.tsx",
+      "component": "RootNotFound",
+      "element": "RouteViewportContainer",
+      "line": 40
+    },
+    {
+      "file": "src/app/page.tsx",
+      "component": "RootPage",
+      "element": "LangProvider",
+      "line": 60
+    },
+    {
+      "file": "src/core/seo/components/growth-content-pages.tsx",
+      "component": "GrowthContentPage",
+      "element": "StaticPageContainer",
+      "line": 160
+    },
+    {
+      "file": "src/core/seo/components/growth-content-pages.tsx",
+      "component": "GrowthIndexPage",
+      "element": "CatalogPageContainer",
+      "line": 340
+    },
+    {
+      "file": "src/core/seo/components/legacy-tool-redirect-page.tsx",
+      "component": "LegacyToolRedirectPage",
+      "element": "ToolPageContainer",
+      "line": 12
+    },
+    {
+      "file": "src/core/seo/components/localized-article-page.tsx",
+      "component": "LocalizedArticlePage",
+      "element": "StaticPageContainer",
+      "line": 55
+    },
+    {
+      "file": "src/core/seo/components/workflow-pages.tsx",
+      "component": "WorkflowIndexPage",
+      "element": "CatalogPageContainer",
+      "line": 240
+    },
+    {
+      "file": "src/core/seo/components/workflow-pages.tsx",
+      "component": "WorkflowDetailPage",
+      "element": "CatalogPageContainer",
+      "line": 295
+    },
+    {
+      "file": "src/features/tools/ai-color-palette-generator/page.tsx",
+      "component": "AiColorPaletteGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 86
+    },
+    {
+      "file": "src/features/tools/ascii-art-generator/page.tsx",
+      "component": "AsciiArtGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 154
+    },
+    {
+      "file": "src/features/tools/asn1-der-inspector/page.tsx",
+      "component": "Asn1DerInspectorPage",
+      "element": "WideToolPageContainer",
+      "line": 65
+    },
+    {
+      "file": "src/features/tools/barcode-generator/page.tsx",
+      "component": "BarcodeGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 213
+    },
+    {
+      "file": "src/features/tools/base-encoding-converter/page.tsx",
+      "component": "BaseEncodingConverterPage",
+      "element": "ToolPageContainer",
+      "line": 64
+    },
+    {
+      "file": "src/features/tools/base64-encode-decode/page.tsx",
+      "component": "Base64Page",
+      "element": "WideToolPageContainer",
+      "line": 345
+    },
+    {
+      "file": "src/features/tools/bionic-reading-converter/page.tsx",
+      "component": "BionicReadingConverterPage",
+      "element": "ToolPageContainer",
+      "line": 137
+    },
+    {
+      "file": "src/features/tools/certificate-decoder/page.tsx",
+      "component": "CertificateDecoderPage",
+      "element": "ToolPageContainer",
+      "line": 322
+    },
+    {
+      "file": "src/features/tools/chmod-calculator/page.tsx",
+      "component": "ChmodCalculatorPage",
+      "element": "ToolPageContainer",
+      "line": 63
+    },
+    {
+      "file": "src/features/tools/cidr-subnet-calculator/page.tsx",
+      "component": "CidrSubnetCalculatorPage",
+      "element": "ToolPageContainer",
+      "line": 90
+    },
+    {
+      "file": "src/features/tools/code-to-image-converter/page.tsx",
+      "component": "CodeToImageConverterPage",
+      "element": "WideToolPageContainer",
+      "line": 99
+    },
+    {
+      "file": "src/features/tools/color-converter/page.tsx",
+      "component": "ColorConverterPage",
+      "element": "ToolPageContainer",
+      "line": 141
+    },
+    {
+      "file": "src/features/tools/color-mixer/page.tsx",
+      "component": "ColorMixerPage",
+      "element": "ToolPageContainer",
+      "line": 95
+    },
+    {
+      "file": "src/features/tools/color-shades-generator/page.tsx",
+      "component": "ColorShadesGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 80
+    },
+    {
+      "file": "src/features/tools/cron-visualizer/page.tsx",
+      "component": "CronVisualizerPage",
+      "element": "ToolPageContainer",
+      "line": 130
+    },
+    {
+      "file": "src/features/tools/crontab-generator/page.tsx",
+      "component": "CrontabGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 110
+    },
+    {
+      "file": "src/features/tools/csp-parser/page.tsx",
+      "component": "CspParserPage",
+      "element": "ToolPageContainer",
+      "line": 119
+    },
+    {
+      "file": "src/features/tools/css-background-pattern-generator/page.tsx",
+      "component": "CssBackgroundPatternGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 119
+    },
+    {
+      "file": "src/features/tools/css-border-radius-generator/page.tsx",
+      "component": "CssBorderRadiusGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 120
+    },
+    {
+      "file": "src/features/tools/css-box-shadow-generator/page.tsx",
+      "component": "CssBoxShadowGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 105
+    },
+    {
+      "file": "src/features/tools/css-checkbox-generator/page.tsx",
+      "component": "CssCheckboxGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 107
+    },
+    {
+      "file": "src/features/tools/css-clip-path-generator/page.tsx",
+      "component": "CssClipPathGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 80
+    },
+    {
+      "file": "src/features/tools/css-cubic-bezier-generator/page.tsx",
+      "component": "CssCubicBezierGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 79
+    },
+    {
+      "file": "src/features/tools/css-glassmorphism-generator/page.tsx",
+      "component": "CssGlassmorphismGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 106
+    },
+    {
+      "file": "src/features/tools/css-gradient-generator/page.tsx",
+      "component": "CssGradientGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 105
+    },
+    {
+      "file": "src/features/tools/css-loader-generator/page.tsx",
+      "component": "CssLoaderGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 85
+    },
+    {
+      "file": "src/features/tools/css-minifier/page.tsx",
+      "component": "CssMinifierPage",
+      "element": "WideToolPageContainer",
+      "line": 176
+    },
+    {
+      "file": "src/features/tools/css-switch-generator/page.tsx",
+      "component": "CssSwitchGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 115
+    },
+    {
+      "file": "src/features/tools/css-text-glitch-effect-generator/page.tsx",
+      "component": "CssTextGlitchEffectGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 98
+    },
+    {
+      "file": "src/features/tools/css-triangle-generator/page.tsx",
+      "component": "CssTriangleGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 120
+    },
+    {
+      "file": "src/features/tools/csv-diff/page.tsx",
+      "component": "CsvDiffPage",
+      "element": "WideToolPageContainer",
+      "line": 92
+    },
+    {
+      "file": "src/features/tools/csv-json-converter/page.tsx",
+      "component": "CsvJsonConverterPage",
+      "element": "WideToolPageContainer",
+      "line": 253
+    },
+    {
+      "file": "src/features/tools/curl-to-code/page.tsx",
+      "component": "CurlToCodePage",
+      "element": "WideToolPageContainer",
+      "line": 89
+    },
+    {
+      "file": "src/features/tools/devops-yaml-validator/page.tsx",
+      "component": "DevopsYamlValidatorPage",
+      "element": "ToolPageContainer",
+      "line": 44
+    },
+    {
+      "file": "src/features/tools/docker-run-to-compose/page.tsx",
+      "component": "DockerRunToComposePage",
+      "element": "ToolPageContainer",
+      "line": 72
+    },
+    {
+      "file": "src/features/tools/env-parser/page.tsx",
+      "component": "EnvVariableParserPage",
+      "element": "WideToolPageContainer",
+      "line": 79
+    },
+    {
+      "file": "src/features/tools/fake-iban-generator/page.tsx",
+      "component": "FakeIbanGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 152
+    },
+    {
+      "file": "src/features/tools/google-fonts-pair-finder/page.tsx",
+      "component": "GoogleFontsPairFinderPage",
+      "element": "ToolPageContainer",
+      "line": 154
+    },
+    {
+      "file": "src/features/tools/graphql-workbench/page.tsx",
+      "component": "GraphqlWorkbenchPage",
+      "element": "WideToolPageContainer",
+      "line": 70
+    },
+    {
+      "file": "src/features/tools/gzip-brotli-lab/page.tsx",
+      "component": "GzipBrotliLabPage",
+      "element": "WideToolPageContainer",
+      "line": 113
+    },
+    {
+      "file": "src/features/tools/har-viewer-sanitizer/page.tsx",
+      "component": "HarViewerSanitizerPage",
+      "element": "WideToolPageContainer",
+      "line": 96
+    },
+    {
+      "file": "src/features/tools/hash-generator/page.tsx",
+      "component": "HashGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 141
+    },
+    {
+      "file": "src/features/tools/header-diff/page.tsx",
+      "component": "HeaderDiffPage",
+      "element": "WideToolPageContainer",
+      "line": 61
+    },
+    {
+      "file": "src/features/tools/hex-bytes-workbench/page.tsx",
+      "component": "HexBytesWorkbenchPage",
+      "element": "WideToolPageContainer",
+      "line": 54
+    },
+    {
+      "file": "src/features/tools/html-css-beautifier/page.tsx",
+      "component": "HtmlCssBeautifierPage",
+      "element": "WideToolPageContainer",
+      "line": 8
+    },
+    {
+      "file": "src/features/tools/html-encoder-decoder/page.tsx",
+      "component": "HtmlEncoderDecoderPage",
+      "element": "WideToolPageContainer",
+      "line": 110
+    },
+    {
+      "file": "src/features/tools/html-formatter/page.tsx",
+      "component": "HtmlFormatterPage",
+      "element": "WideToolPageContainer",
+      "line": 8
+    },
+    {
+      "file": "src/features/tools/html-minifier/page.tsx",
+      "component": "HtmlMinifierPage",
+      "element": "WideToolPageContainer",
+      "line": 205
+    },
+    {
+      "file": "src/features/tools/html-to-markdown/page.tsx",
+      "component": "HtmlToMarkdownPage",
+      "element": "WideToolPageContainer",
+      "line": 98
+    },
+    {
+      "file": "src/features/tools/http-request-builder/page.tsx",
+      "component": "HttpRequestBuilderPage",
+      "element": "ToolPageContainer",
+      "line": 156
+    },
+    {
+      "file": "src/features/tools/http-status-codes/page.tsx",
+      "component": "HttpStatusCodesPage",
+      "element": "ToolPageContainer",
+      "line": 116
+    },
+    {
+      "file": "src/features/tools/id-generator/page.tsx",
+      "component": "IdGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 106
+    },
+    {
+      "file": "src/features/tools/image-average-color-finder/page.tsx",
+      "component": "ImageAverageColorFinderPage",
+      "element": "ToolPageContainer",
+      "line": 128
+    },
+    {
+      "file": "src/features/tools/image-base64/page.tsx",
+      "component": "ImageBase64Page",
+      "element": "ToolPageContainer",
+      "line": 241
+    },
+    {
+      "file": "src/features/tools/image-caption-generator/page.tsx",
+      "component": "ImageCaptionGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 254
+    },
+    {
+      "file": "src/features/tools/image-color-extractor/page.tsx",
+      "component": "ImageColorExtractorPage",
+      "element": "ToolPageContainer",
+      "line": 174
+    },
+    {
+      "file": "src/features/tools/image-color-picker/page.tsx",
+      "component": "ImageColorPickerPage",
+      "element": "ToolPageContainer",
+      "line": 207
+    },
+    {
+      "file": "src/features/tools/image-cropper/page.tsx",
+      "component": "ImageCropperPage",
+      "element": "ToolPageContainer",
+      "line": 227
+    },
+    {
+      "file": "src/features/tools/image-filters/page.tsx",
+      "component": "ImageFiltersPage",
+      "element": "ToolPageContainer",
+      "line": 198
+    },
+    {
+      "file": "src/features/tools/image-privacy-workbench/page.tsx",
+      "component": "ImagePrivacyWorkbenchPage",
+      "element": "ToolPageContainer",
+      "line": 81
+    },
+    {
+      "file": "src/features/tools/image-resizer/page.tsx",
+      "component": "ImageResizerPage",
+      "element": "ToolPageContainer",
+      "line": 305
+    },
+    {
+      "file": "src/features/tools/instagram-filters/page.tsx",
+      "component": "InstagramFiltersPage",
+      "element": "ToolPageContainer",
+      "line": 181
+    },
+    {
+      "file": "src/features/tools/instagram-photo-downloader/page.tsx",
+      "component": "InstagramPhotoDownloaderPage",
+      "element": "ToolPageContainer",
+      "line": 313
+    },
+    {
+      "file": "src/features/tools/instagram-post-generator/page.tsx",
+      "component": "InstagramPostGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 263
+    },
+    {
+      "file": "src/features/tools/instagram-story-generator/page.tsx",
+      "component": "InstagramStoryGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 290
+    },
+    {
+      "file": "src/features/tools/invisible-characters-detector/page.tsx",
+      "component": "InvisibleCharsDetectorPage",
+      "element": "ToolPageContainer",
+      "line": 91
+    },
+    {
+      "file": "src/features/tools/javascript-formatter/page.tsx",
+      "component": "JavascriptFormatterPage",
+      "element": "WideToolPageContainer",
+      "line": 187
+    },
+    {
+      "file": "src/features/tools/javascript-minifier/page.tsx",
+      "component": "JavascriptMinifierPage",
+      "element": "WideToolPageContainer",
+      "line": 198
+    },
+    {
+      "file": "src/features/tools/jq-playground/page.tsx",
+      "component": "JqPlaygroundPage",
+      "element": "WideToolPageContainer",
+      "line": 173
+    },
+    {
+      "file": "src/features/tools/json-diff-viewer/page.tsx",
+      "component": "JsonDiffViewerPage",
+      "element": "WideToolPageContainer",
+      "line": 172
+    },
+    {
+      "file": "src/features/tools/json-formatter/page.tsx",
+      "component": "JsonFormatterPage",
+      "element": "WideToolPageContainer",
+      "line": 567
+    },
+    {
+      "file": "src/features/tools/json-schema-workbench/page.tsx",
+      "component": "JsonSchemaWorkbenchPage",
+      "element": "WideToolPageContainer",
+      "line": 72
+    },
+    {
+      "file": "src/features/tools/json-to-typescript/page.tsx",
+      "component": "JsonToTypeScriptPage",
+      "element": "WideToolPageContainer",
+      "line": 183
+    },
+    {
+      "file": "src/features/tools/jsonpath-playground/page.tsx",
+      "component": "JsonPathPlaygroundPage",
+      "element": "WideToolPageContainer",
+      "line": 116
+    },
+    {
+      "file": "src/features/tools/jwt-decoder/page.tsx",
+      "component": "JwtDecoderPage",
+      "element": "WideToolPageContainer",
+      "line": 150
+    },
+    {
+      "file": "src/features/tools/jwt-verifier/page.tsx",
+      "component": "JwtVerifierPage",
+      "element": "ToolPageContainer",
+      "line": 148
+    },
+    {
+      "file": "src/features/tools/jwt-workbench/page.tsx",
+      "component": "JwtWorkbenchPage",
+      "element": "ToolPageContainer",
+      "line": 262
+    },
+    {
+      "file": "src/features/tools/letter-counter/page.tsx",
+      "component": "LetterCounterPage",
+      "element": "WideToolPageContainer",
+      "line": 88
+    },
+    {
+      "file": "src/features/tools/list-randomizer/page.tsx",
+      "component": "ListRandomizerPage",
+      "element": "ToolPageContainer",
+      "line": 204
+    },
+    {
+      "file": "src/features/tools/local-log-parser/page.tsx",
+      "component": "LocalLogParserPage",
+      "element": "WideToolPageContainer",
+      "line": 145
+    },
+    {
+      "file": "src/features/tools/log-scrubber/page.tsx",
+      "component": "LogScrubberPage",
+      "element": "WideToolPageContainer",
+      "line": 142
+    },
+    {
+      "file": "src/features/tools/lorem-ipsum/page.tsx",
+      "component": "LoremIpsumGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 141
+    },
+    {
+      "file": "src/features/tools/markdown-preview/page.tsx",
+      "component": "MarkdownPreviewPage",
+      "element": "WideToolPageContainer",
+      "line": 241
+    },
+    {
+      "file": "src/features/tools/md5-generator/page.tsx",
+      "component": "Md5GeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 12
+    },
+    {
+      "file": "src/features/tools/messagepack-inspector/page.tsx",
+      "component": "MessagepackInspectorPage",
+      "element": "ToolPageContainer",
+      "line": 57
+    },
+    {
+      "file": "src/features/tools/multiple-whitespace-remover/page.tsx",
+      "component": "MultipleWhitespaceRemoverPage",
+      "element": "WideToolPageContainer",
+      "line": 116
+    },
+    {
+      "file": "src/features/tools/ndjson-formatter/page.tsx",
+      "component": "NdjsonFormatterPage",
+      "element": "WideToolPageContainer",
+      "line": 103
+    },
+    {
+      "file": "src/features/tools/oauth-jwks-workbench/page.tsx",
+      "component": "OauthJwksWorkbenchPage",
+      "element": "ToolPageContainer",
+      "line": 106
+    },
+    {
+      "file": "src/features/tools/open-graph-meta-generator/page.tsx",
+      "component": "OpenGraphMetaGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 87
+    },
+    {
+      "file": "src/features/tools/openapi-diff/page.tsx",
+      "component": "OpenapiDiffPage",
+      "element": "WideToolPageContainer",
+      "line": 68
+    },
+    {
+      "file": "src/features/tools/openapi-mock/page.tsx",
+      "component": "OpenApiMockPage",
+      "element": "WideToolPageContainer",
+      "line": 128
+    },
+    {
+      "file": "src/features/tools/openapi-viewer/page.tsx",
+      "component": "OpenApiViewerPage",
+      "element": "WideToolPageContainer",
+      "line": 183
+    },
+    {
+      "file": "src/features/tools/password-generator/page.tsx",
+      "component": "PasswordGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 203
+    },
+    {
+      "file": "src/features/tools/photo-censor/page.tsx",
+      "component": "PhotoCensorPage",
+      "element": "ToolPageContainer",
+      "line": 229
+    },
+    {
+      "file": "src/features/tools/pipeline-builder/page.tsx",
+      "component": "PipelineBuilderPage",
+      "element": "WideToolPageContainer",
+      "line": 367
+    },
+    {
+      "file": "src/features/tools/public-key-jwk-helper/page.tsx",
+      "component": "PublicKeyJwkHelperPage",
+      "element": "ToolPageContainer",
+      "line": 135
+    },
+    {
+      "file": "src/features/tools/qr-code-generator/page.tsx",
+      "component": "QrCodeGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 365
+    },
+    {
+      "file": "src/features/tools/react-native-shadow-generator/page.tsx",
+      "component": "ReactNativeShadowGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 109
+    },
+    {
+      "file": "src/features/tools/regex-generator/page.tsx",
+      "component": "RegexGeneratorPage",
+      "element": "WideToolPageContainer",
+      "line": 208
+    },
+    {
+      "file": "src/features/tools/regex-tester/page.tsx",
+      "component": "RegexTesterPage",
+      "element": "ToolPageContainer",
+      "line": 129
+    },
+    {
+      "file": "src/features/tools/robots-txt-tester/page.tsx",
+      "component": "RobotsTxtTesterPage",
+      "element": "ToolPageContainer",
+      "line": 73
+    },
+    {
+      "file": "src/features/tools/saml-decoder/page.tsx",
+      "component": "SamlDecoderPage",
+      "element": "WideToolPageContainer",
+      "line": 72
+    },
+    {
+      "file": "src/features/tools/scanned-pdf-converter/page.tsx",
+      "component": "ScannedPdfConverterPage",
+      "element": "ToolPageContainer",
+      "line": 309
+    },
+    {
+      "file": "src/features/tools/security-header-analyzer/page.tsx",
+      "component": "SecurityHeaderAnalyzerPage",
+      "element": "ToolPageContainer",
+      "line": 103
+    },
+    {
+      "file": "src/features/tools/seo-metadata-workbench/page.tsx",
+      "component": "SeoMetadataWorkbenchPage",
+      "element": "ToolPageContainer",
+      "line": 53
+    },
+    {
+      "file": "src/features/tools/slugify-case-converter/page.tsx",
+      "component": "SlugifyCaseConverterPage",
+      "element": "ToolPageContainer",
+      "line": 114
+    },
+    {
+      "file": "src/features/tools/sql-formatter/page.tsx",
+      "component": "SqlFormatterPage",
+      "element": "WideToolPageContainer",
+      "line": 142
+    },
+    {
+      "file": "src/features/tools/structured-data-visualizer/page.tsx",
+      "component": "StructuredDataVisualizerPage",
+      "element": "WideToolPageContainer",
+      "line": 72
+    },
+    {
+      "file": "src/features/tools/svg-blob-generator/page.tsx",
+      "component": "SvgBlobGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 105
+    },
+    {
+      "file": "src/features/tools/svg-optimizer/page.tsx",
+      "component": "SvgOptimizerPage",
+      "element": "WideToolPageContainer",
+      "line": 158
+    },
+    {
+      "file": "src/features/tools/svg-pattern-generator/page.tsx",
+      "component": "SvgPatternGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 111
+    },
+    {
+      "file": "src/features/tools/svg-stroke-to-fill-converter/page.tsx",
+      "component": "SvgStrokeToFillConverterPage",
+      "element": "ToolPageContainer",
+      "line": 87
+    },
+    {
+      "file": "src/features/tools/svg-to-png-converter/page.tsx",
+      "component": "SvgToPngConverterPage",
+      "element": "ToolPageContainer",
+      "line": 217
+    },
+    {
+      "file": "src/features/tools/text-diff-checker/page.tsx",
+      "component": "TextDiffCheckerPage",
+      "element": "WideToolPageContainer",
+      "line": 43
+    },
+    {
+      "file": "src/features/tools/text-to-handwriting-converter/page.tsx",
+      "component": "TextToHandwritingConverterPage",
+      "element": "ToolPageContainer",
+      "line": 232
+    },
+    {
+      "file": "src/features/tools/totp-generator/page.tsx",
+      "component": "TotpGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 105
+    },
+    {
+      "file": "src/features/tools/tweet-generator/page.tsx",
+      "component": "TweetGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 307
+    },
+    {
+      "file": "src/features/tools/tweet-to-image-converter/page.tsx",
+      "component": "TweetToImageConverterPage",
+      "element": "ToolPageContainer",
+      "line": 340
+    },
+    {
+      "file": "src/features/tools/twitter-ad-revenue-generator/page.tsx",
+      "component": "TwitterAdRevenueGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 127
+    },
+    {
+      "file": "src/features/tools/unicode-inspector/page.tsx",
+      "component": "UnicodeInspectorPage",
+      "element": "WideToolPageContainer",
+      "line": 38
+    },
+    {
+      "file": "src/features/tools/unix-timestamp/page.tsx",
+      "component": "UnixTimestampPage",
+      "element": "ToolPageContainer",
+      "line": 106
+    },
+    {
+      "file": "src/features/tools/url-encode-decode/page.tsx",
+      "component": "UrlEncodeDecodePage",
+      "element": "WideToolPageContainer",
+      "line": 170
+    },
+    {
+      "file": "src/features/tools/url-parser/page.tsx",
+      "component": "UrlParserPage",
+      "element": "ToolPageContainer",
+      "line": 197
+    },
+    {
+      "file": "src/features/tools/user-agent-parser/page.tsx",
+      "component": "UserAgentParserPage",
+      "element": "ToolPageContainer",
+      "line": 64
+    },
+    {
+      "file": "src/features/tools/uuid-generator/page.tsx",
+      "component": "UuidGeneratorPage",
+      "element": "ToolPageContainer",
+      "line": 144
+    },
+    {
+      "file": "src/features/tools/vimeo-thumbnail-grabber/page.tsx",
+      "component": "VimeoThumbnailGrabberPage",
+      "element": "ToolPageContainer",
+      "line": 226
+    },
+    {
+      "file": "src/features/tools/xml-formatter/page.tsx",
+      "component": "XmlFormatterPage",
+      "element": "WideToolPageContainer",
+      "line": 99
+    },
+    {
+      "file": "src/features/tools/yaml-json-converter/page.tsx",
+      "component": "YamlJsonConverterPage",
+      "element": "WideToolPageContainer",
+      "line": 166
+    },
+    {
+      "file": "src/features/tools/yaml-merge-patch-explorer/page.tsx",
+      "component": "YamlMergePatchExplorerPage",
+      "element": "WideToolPageContainer",
+      "line": 95
+    },
+    {
+      "file": "src/features/tools/youtube-thumbnail-grabber/page.tsx",
+      "component": "YouTubeThumbnailGrabberPage",
+      "element": "ToolPageContainer",
+      "line": 226
+    },
+    {
+      "file": "src/features/tools/yq-playground/page.tsx",
+      "component": "YqPlaygroundPage",
+      "element": "WideToolPageContainer",
+      "line": 68
+    }
+  ],
+  "widthTokensByArea": {
+    "app": {
+      "container": 1,
+      "grid-cols-1": 5,
+      "lg:grid-cols-2": 1,
+      "lg:grid-cols-3": 1,
+      "lg:grid-cols-5": 1,
+      "max-w-2xl": 2,
+      "max-w-3xl": 10,
+      "max-w-4xl": 1,
+      "max-w-screen-2xl": 1,
+      "max-w-xl": 1,
+      "md:grid-cols-2": 7,
+      "md:grid-cols-3": 3,
+      "sm:grid-cols-2": 52,
+      "sm:grid-cols-3": 3,
+      "w-full": 5
+    },
+    "layout": {
+      "col-span-2": 1,
+      "container": 2,
+      "grid-cols-1": 1,
+      "grid-cols-2": 2,
+      "grid-cols-3": 1,
+      "max-w-[1400px]": 1,
+      "max-w-[140px]": 1,
+      "max-w-[88px]": 1,
+      "max-w-3xl": 2,
+      "max-w-5xl": 1,
+      "max-w-6xl": 3,
+      "max-w-md": 1,
+      "max-w-screen-2xl": 3,
+      "max-w-sm": 1,
+      "md:col-span-4": 1,
+      "md:col-span-8": 1,
+      "md:grid-cols-12": 1,
+      "sm:grid-cols-2": 1,
+      "sm:grid-cols-3": 1,
+      "w-full": 10
+    },
+    "tools": {
+      "col-span-2": 2,
+      "col-span-3": 1,
+      "col-span-9": 1,
+      "col-span-full": 1,
+      "container": 37,
+      "grid-cols-[4.5rem_1fr]": 1,
+      "grid-cols-[56px_1fr]": 2,
+      "grid-cols-[96px_120px_minmax(0,1fr)_96px]": 2,
+      "grid-cols-1": 98,
+      "grid-cols-12": 1,
+      "grid-cols-2": 28,
+      "grid-cols-3": 9,
+      "grid-cols-5": 1,
+      "lg:col-span-2": 1,
+      "lg:col-span-3": 5,
+      "lg:col-span-4": 2,
+      "lg:col-span-8": 2,
+      "lg:col-span-9": 3,
+      "lg:grid-cols-[1fr_auto_1fr]": 1,
+      "lg:grid-cols-[240px_minmax(0,1fr)]": 1,
+      "lg:grid-cols-[340px_minmax(0,1fr)_360px]": 1,
+      "lg:grid-cols-[420px_minmax(0,1fr)]": 1,
+      "lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]": 2,
+      "lg:grid-cols-[minmax(0,1fr)_320px]": 2,
+      "lg:grid-cols-1": 1,
+      "lg:grid-cols-2": 51,
+      "lg:grid-cols-3": 3,
+      "lg:grid-cols-5": 2,
+      "lg:grid-cols-6": 2,
+      "lg:grid-cols-8": 1,
+      "max-w-[200px]": 1,
+      "max-w-[300px]": 1,
+      "max-w-[62%]": 1,
+      "max-w-[620px]": 1,
+      "max-w-3xl": 16,
+      "max-w-full": 18,
+      "max-w-lg": 1,
+      "max-w-md": 1,
+      "max-w-none": 1,
+      "max-w-sm": 2,
+      "max-w-xs": 1,
+      "md:col-span-12": 4,
+      "md:col-span-2": 3,
+      "md:col-span-4": 8,
+      "md:col-span-5": 1,
+      "md:col-span-7": 1,
+      "md:col-span-8": 6,
+      "md:grid-cols-[1fr_auto_1fr_auto_1fr]": 1,
+      "md:grid-cols-[1fr_auto]": 2,
+      "md:grid-cols-[minmax(0,1fr)_180px_180px]": 1,
+      "md:grid-cols-12": 9,
+      "md:grid-cols-2": 15,
+      "md:grid-cols-3": 7,
+      "md:grid-cols-4": 5,
+      "md:grid-cols-6": 1,
+      "sm:col-span-2": 16,
+      "sm:grid-cols-[1.2fr_1fr]": 1,
+      "sm:grid-cols-[11rem_1fr]": 1,
+      "sm:grid-cols-[160px_1fr]": 1,
+      "sm:grid-cols-[180px_1fr]": 1,
+      "sm:grid-cols-[1fr_auto_1fr]": 1,
+      "sm:grid-cols-[minmax(0,1fr)_minmax(220px,320px)]": 1,
+      "sm:grid-cols-2": 54,
+      "sm:grid-cols-3": 8,
+      "sm:grid-cols-4": 1,
+      "w-full": 130,
+      "xl:grid-cols-[0.9fr_1.1fr]": 1,
+      "xl:grid-cols-[1.02fr_0.98fr]": 1,
+      "xl:grid-cols-[1.05fr_0.95fr]": 6,
+      "xl:grid-cols-[1.08fr_0.92fr]": 8,
+      "xl:grid-cols-[1.15fr_0.85fr]": 2,
+      "xl:grid-cols-[1.1fr_0.9fr]": 26,
+      "xl:grid-cols-[1.2fr_0.8fr]": 1,
+      "xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]": 1,
+      "xl:grid-cols-3": 2
+    },
+    "route-surfaces": {
+      "container": 11,
+      "grid-cols-1": 4,
+      "lg:grid-cols-[0.9fr_1.1fr]": 1,
+      "lg:grid-cols-[1.15fr_0.85fr]": 1,
+      "lg:grid-cols-2": 2,
+      "lg:grid-cols-3": 3,
+      "max-w-2xl": 1,
+      "max-w-3xl": 14,
+      "max-w-4xl": 2,
+      "max-w-xl": 1,
+      "md:grid-cols-2": 3,
+      "md:grid-cols-3": 1,
+      "sm:grid-cols-[2.5rem_1fr]": 1,
+      "sm:grid-cols-2": 12,
+      "w-full": 2,
+      "xl:grid-cols-[0.95fr_1.05fr]": 2,
+      "xl:grid-cols-[1.15fr_0.85fr]": 1,
+      "xl:grid-cols-[1.1fr_0.9fr]": 2,
+      "xl:grid-cols-3": 1
+    },
+    "install": {
+      "max-w-3xl": 3,
+      "md:grid-cols-3": 1,
+      "sm:grid-cols-[1.1fr_0.9fr]": 1,
+      "w-full": 1
+    },
+    "scaffold": {
+      "lg:grid-cols-2": 1
+    }
+  }
+}
diff --git a/src/generated/tool-index.json b/src/generated/tool-index.json
index 98a369e5..32c54753 100644
--- a/src/generated/tool-index.json
+++ b/src/generated/tool-index.json
@@ -1,8 +1,8 @@
 {
   "counts": {
     "canonicalTools": 131,
-    "aliasRoutes": 2,
-    "routeDirs": 200,
+    "aliasRoutes": 3,
+    "routeDirs": 201,
     "unknownRouteDirs": 0
   },
   "canonicalTools": [
@@ -3432,13 +3432,16 @@
       "slug": "qr-code-generator",
       "category": "generators",
       "relatedTools": [
-        "uuid_generator",
-        "password_generator",
-        "url_encode_decode"
+        "barcode_generator",
+        "image_base64",
+        "url_encode_decode",
+        "svg_to_png_converter"
       ],
       "relatedWorkflows": [],
       "keywords": [
         "qr code generator",
+        "qr code decoder",
+        "scan qr image",
         "generate qr code online",
         "qr code maker"
       ],
@@ -5673,6 +5676,13 @@
       "inStaticGroup": false,
       "inHubGroup": false
     },
+    {
+      "slug": "csv-to-json",
+      "targetSlug": "csv-json-converter",
+      "pagePath": "src/app/[lang]/csv-to-json/page.tsx",
+      "inStaticGroup": false,
+      "inHubGroup": false
+    },
     {
       "slug": "tls-chain-inspector",
       "targetSlug": "certificate-decoder",
@@ -6082,6 +6092,14 @@
       "inHubGroup": false,
       "inStaticGroup": false
     },
+    {
+      "slug": "csv-to-json",
+      "hasPage": true,
+      "kind": "alias-tool",
+      "targetSlug": "csv-json-converter",
+      "inHubGroup": false,
+      "inStaticGroup": false
+    },
     {
       "slug": "curl-to-code",
       "hasPage": true,
diff --git a/src/lib/sitemap-lastmod.json b/src/lib/sitemap-lastmod.json
index 38fad941..0deb4718 100644
--- a/src/lib/sitemap-lastmod.json
+++ b/src/lib/sitemap-lastmod.json
@@ -10,13 +10,13 @@
     "fr"
   ],
   "home": {
-    "en": "2026-06-27T00:00:00.000Z",
-    "zh-CN": "2026-06-27T00:00:00.000Z",
-    "zh-TW": "2026-06-27T00:00:00.000Z",
-    "ja": "2026-06-27T00:00:00.000Z",
-    "ko": "2026-06-27T00:00:00.000Z",
-    "de": "2026-06-27T00:00:00.000Z",
-    "fr": "2026-06-27T00:00:00.000Z"
+    "en": "2026-07-16T00:00:00.000Z",
+    "zh-CN": "2026-07-16T00:00:00.000Z",
+    "zh-TW": "2026-07-16T00:00:00.000Z",
+    "ja": "2026-07-16T00:00:00.000Z",
+    "ko": "2026-07-16T00:00:00.000Z",
+    "de": "2026-07-16T00:00:00.000Z",
+    "fr": "2026-07-16T00:00:00.000Z"
   },
   "hubs": {
     "formatters": {
@@ -184,112 +184,112 @@
   },
   "static": {
     "all-tools": {
-      "en": "2026-06-27T00:00:00.000Z",
-      "zh-CN": "2026-06-27T00:00:00.000Z",
-      "zh-TW": "2026-06-27T00:00:00.000Z",
-      "ja": "2026-06-27T00:00:00.000Z",
-      "ko": "2026-06-27T00:00:00.000Z",
-      "de": "2026-06-27T00:00:00.000Z",
-      "fr": "2026-06-27T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "about": {
-      "en": "2026-06-26T00:00:00.000Z",
-      "zh-CN": "2026-06-26T00:00:00.000Z",
-      "zh-TW": "2026-06-26T00:00:00.000Z",
-      "ja": "2026-06-26T00:00:00.000Z",
-      "ko": "2026-06-26T00:00:00.000Z",
-      "de": "2026-06-26T00:00:00.000Z",
-      "fr": "2026-06-26T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "pricing": {
-      "en": "2026-06-29T00:00:00.000Z",
-      "zh-CN": "2026-06-29T00:00:00.000Z",
-      "zh-TW": "2026-06-29T00:00:00.000Z",
-      "ja": "2026-06-29T00:00:00.000Z",
-      "ko": "2026-06-29T00:00:00.000Z",
-      "de": "2026-06-29T00:00:00.000Z",
-      "fr": "2026-06-29T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "contact": {
-      "en": "2026-06-29T00:00:00.000Z",
-      "zh-CN": "2026-06-29T00:00:00.000Z",
-      "zh-TW": "2026-06-29T00:00:00.000Z",
-      "ja": "2026-06-29T00:00:00.000Z",
-      "ko": "2026-06-29T00:00:00.000Z",
-      "de": "2026-06-29T00:00:00.000Z",
-      "fr": "2026-06-29T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "privacy": {
-      "en": "2026-06-26T00:00:00.000Z",
-      "zh-CN": "2026-06-26T00:00:00.000Z",
-      "zh-TW": "2026-06-26T00:00:00.000Z",
-      "ja": "2026-06-26T00:00:00.000Z",
-      "ko": "2026-06-26T00:00:00.000Z",
-      "de": "2026-06-26T00:00:00.000Z",
-      "fr": "2026-06-26T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "trust-center": {
-      "en": "2026-06-27T00:00:00.000Z",
-      "zh-CN": "2026-06-27T00:00:00.000Z",
-      "zh-TW": "2026-06-27T00:00:00.000Z",
-      "ja": "2026-06-27T00:00:00.000Z",
-      "ko": "2026-06-27T00:00:00.000Z",
-      "de": "2026-06-27T00:00:00.000Z",
-      "fr": "2026-06-27T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "roadmap": {
-      "en": "2026-06-25T00:00:00.000Z",
-      "zh-CN": "2026-06-25T00:00:00.000Z",
-      "zh-TW": "2026-06-25T00:00:00.000Z",
-      "ja": "2026-06-25T00:00:00.000Z",
-      "ko": "2026-06-25T00:00:00.000Z",
-      "de": "2026-06-25T00:00:00.000Z",
-      "fr": "2026-06-25T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "changelog": {
-      "en": "2026-06-25T00:00:00.000Z",
-      "zh-CN": "2026-06-25T00:00:00.000Z",
-      "zh-TW": "2026-06-25T00:00:00.000Z",
-      "ja": "2026-06-25T00:00:00.000Z",
-      "ko": "2026-06-25T00:00:00.000Z",
-      "de": "2026-06-25T00:00:00.000Z",
-      "fr": "2026-06-25T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "self-hosting": {
-      "en": "2026-06-29T00:00:00.000Z",
-      "zh-CN": "2026-06-29T00:00:00.000Z",
-      "zh-TW": "2026-06-29T00:00:00.000Z",
-      "ja": "2026-06-29T00:00:00.000Z",
-      "ko": "2026-06-29T00:00:00.000Z",
-      "de": "2026-06-29T00:00:00.000Z",
-      "fr": "2026-06-29T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "support": {
-      "en": "2026-06-29T00:00:00.000Z",
-      "zh-CN": "2026-06-29T00:00:00.000Z",
-      "zh-TW": "2026-06-29T00:00:00.000Z",
-      "ja": "2026-06-29T00:00:00.000Z",
-      "ko": "2026-06-29T00:00:00.000Z",
-      "de": "2026-06-29T00:00:00.000Z",
-      "fr": "2026-06-29T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "distribution-research": {
-      "en": "2026-06-25T00:00:00.000Z",
-      "zh-CN": "2026-06-25T00:00:00.000Z",
-      "zh-TW": "2026-06-25T00:00:00.000Z",
-      "ja": "2026-06-25T00:00:00.000Z",
-      "ko": "2026-06-25T00:00:00.000Z",
-      "de": "2026-06-25T00:00:00.000Z",
-      "fr": "2026-06-25T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "terms": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "install-app": {
       "en": "2026-06-29T00:00:00.000Z",
@@ -490,220 +490,220 @@
       "fr": "2026-06-22T00:00:00.000Z"
     },
     "json-formatting-errors": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "json-vs-json5-differences": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "validate-json-before-api-requests": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "json-schema-validation-checklist": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "api-auth-header-mistakes": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "convert-curl-to-fetch-python": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "mock-openapi-quickly": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "openapi-debugging-workflow-checklist": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "dns-records-uptime": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "certificate-chain-basics-for-developers": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "csp-mistakes-that-break-production": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "robots-txt-testing-checklist": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "css-layout-patterns-for-developers": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "modern-css-effects-guide": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "css-animations-and-transitions-guide": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "css-border-radius-and-shapes-guide": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "image-optimization-for-web-complete-workflow": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "color-extraction-from-images-use-cases-and-tools": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "svg-optimization-and-conversion-best-practices": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "image-privacy-how-to-censor-and-protect-images": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "base64-encoding-when-and-how-to-use-it": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "hash-functions-compared-md5-vs-sha256-vs-sha512": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "url-encoding-explained-common-mistakes-and-solutions": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "jwt-security-best-practices-for-token-handling": {
-      "en": "2026-06-14T00:00:00.000Z",
-      "zh-CN": "2026-06-14T00:00:00.000Z",
-      "zh-TW": "2026-06-14T00:00:00.000Z",
-      "ja": "2026-06-14T00:00:00.000Z",
-      "ko": "2026-06-14T00:00:00.000Z",
-      "de": "2026-06-14T00:00:00.000Z",
-      "fr": "2026-06-14T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "md5-digest-generator": {
       "en": "2026-06-14T00:00:00.000Z",
@@ -771,13 +771,13 @@
   },
   "tools": {
     "json-formatter": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "xml-formatter": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -879,13 +879,13 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "json-to-typescript": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "css-minifier": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -897,22 +897,22 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "svg-optimizer": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "jsonpath-playground": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "openapi-viewer": {
       "en": "2026-06-24T00:00:00.000Z",
@@ -924,40 +924,40 @@
       "fr": "2026-06-24T00:00:00.000Z"
     },
     "json-diff-viewer": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "csv-json-converter": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "base64-encode-decode": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "base-encoding-converter": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "url-encode-decode": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -969,22 +969,22 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "jwt-decoder": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "jwt-workbench": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "hash-generator": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -1266,13 +1266,13 @@
       "fr": "2026-06-24T00:00:00.000Z"
     },
     "twitter-ad-revenue-generator": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "instagram-photo-downloader": {
       "en": "2026-06-24T00:00:00.000Z",
@@ -1347,22 +1347,22 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "svg-stroke-to-fill-converter": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "svg-to-png-converter": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "css-background-pattern-generator": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -1473,22 +1473,22 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "qr-code-generator": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "barcode-generator": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "fake-iban-generator": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -1536,13 +1536,13 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "regex-tester": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "regex-generator": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -1599,13 +1599,13 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "cidr-subnet-calculator": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "url-parser": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -1635,13 +1635,13 @@
       "fr": "2026-06-24T00:00:00.000Z"
     },
     "curl-to-code": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "ndjson-formatter": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -1716,13 +1716,13 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "security-header-analyzer": {
-      "en": "2026-06-20T00:00:00.000Z",
-      "zh-CN": "2026-06-20T00:00:00.000Z",
-      "zh-TW": "2026-06-20T00:00:00.000Z",
-      "ja": "2026-06-20T00:00:00.000Z",
-      "ko": "2026-06-20T00:00:00.000Z",
-      "de": "2026-06-20T00:00:00.000Z",
-      "fr": "2026-06-20T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "totp-generator": {
       "en": "2026-06-20T00:00:00.000Z",
@@ -1869,49 +1869,49 @@
       "fr": "2026-06-20T00:00:00.000Z"
     },
     "public-key-jwk-helper": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "json-schema-workbench": {
-      "en": "2026-06-29T00:00:00.000Z",
-      "zh-CN": "2026-06-29T00:00:00.000Z",
-      "zh-TW": "2026-06-29T00:00:00.000Z",
-      "ja": "2026-06-29T00:00:00.000Z",
-      "ko": "2026-06-29T00:00:00.000Z",
-      "de": "2026-06-29T00:00:00.000Z",
-      "fr": "2026-06-29T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "openapi-diff": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "graphql-workbench": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "messagepack-inspector": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "seo-metadata-workbench": {
       "en": "2026-06-24T00:00:00.000Z",
@@ -1923,22 +1923,22 @@
       "fr": "2026-06-24T00:00:00.000Z"
     },
     "devops-yaml-validator": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "oauth-jwks-workbench": {
-      "en": "2026-06-24T00:00:00.000Z",
-      "zh-CN": "2026-06-24T00:00:00.000Z",
-      "zh-TW": "2026-06-24T00:00:00.000Z",
-      "ja": "2026-06-24T00:00:00.000Z",
-      "ko": "2026-06-24T00:00:00.000Z",
-      "de": "2026-06-24T00:00:00.000Z",
-      "fr": "2026-06-24T00:00:00.000Z"
+      "en": "2026-07-16T00:00:00.000Z",
+      "zh-CN": "2026-07-16T00:00:00.000Z",
+      "zh-TW": "2026-07-16T00:00:00.000Z",
+      "ja": "2026-07-16T00:00:00.000Z",
+      "ko": "2026-07-16T00:00:00.000Z",
+      "de": "2026-07-16T00:00:00.000Z",
+      "fr": "2026-07-16T00:00:00.000Z"
     },
     "image-privacy-workbench": {
       "en": "2026-06-24T00:00:00.000Z",
diff --git a/tests/component/all-tools-discovery.test.tsx b/tests/component/all-tools-discovery.test.tsx
index 803736e5..0272ceee 100644
--- a/tests/component/all-tools-discovery.test.tsx
+++ b/tests/component/all-tools-discovery.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render, screen, waitFor, within } from "@testing-library/react"
+import { renderToString } from "react-dom/server"
 import { beforeEach, describe, expect, it, vi } from "vitest"
 import { AllToolsDiscovery } from "@/features/tool-discovery/all-tools-discovery"
 
@@ -201,8 +202,8 @@ const LARGE_INVENTORY_TOOL_COUNT = 300
 const LARGE_INVENTORY_CARD_BUDGET = 6
 const LARGE_INVENTORY_COMPACT_LINK_BUDGET = LARGE_INVENTORY_TOOL_COUNT - LARGE_INVENTORY_CARD_BUDGET
 
-function renderDiscovery() {
-    return render(
+function createDiscoveryElement() {
+    return (
         <AllToolsDiscovery
             capabilityLabels={capabilityLabels}
             groups={groups}
@@ -212,10 +213,14 @@ function renderDiscovery() {
             totalTools={10}
             guides={[]}
             workflows={[{ id: "api", title: "API payload cleanup", href: "/en/pipeline-builder", tags: ["json", "pipeline-ready"] }]}
-        />,
+        />
     )
 }
 
+function renderDiscovery() {
+    return render(createDiscoveryElement())
+}
+
 function renderLargeInventoryDiscovery() {
     const largeGroup = {
         key: "data_code_formats",
@@ -275,6 +280,18 @@ describe("AllToolsDiscovery", () => {
         window.history.replaceState(null, "", "/en/all-tools")
     })
 
+    it("renders stable personalization footprints before storage hydration", () => {
+        const html = renderToString(createDiscoveryElement())
+        const serverDocument = new DOMParser().parseFromString(html, "text/html")
+        const panel = serverDocument.querySelector("[data-all-tools-personalization]")
+
+        expect(panel?.getAttribute("aria-busy")).toBe("true")
+        expect(panel?.querySelectorAll("[data-all-tools-personalization-slot]")).toHaveLength(2)
+        expect(serverDocument.querySelectorAll("button.invisible[disabled][aria-hidden='true']").length).toBeGreaterThan(0)
+        expect(panel?.textContent).toContain("Favorites")
+        expect(panel?.textContent).toContain("Recent tools")
+    })
+
     it("groups filters, shows active filters, and filters cards", async () => {
         renderDiscovery()
 
diff --git a/tests/component/barcode-generator-input-behavior.test.tsx b/tests/component/barcode-generator-input-behavior.test.tsx
new file mode 100644
index 00000000..4f4b7276
--- /dev/null
+++ b/tests/component/barcode-generator-input-behavior.test.tsx
@@ -0,0 +1,41 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { LangProvider } from "@/core/i18n/lang-provider"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { BarcodeGeneratorPage } from "@/features/tools/barcode-generator/page"
+
+vi.mock("jsbarcode", () => ({ default: vi.fn() }))
+vi.mock("sonner", () => ({ toast: { error: vi.fn(), success: vi.fn() } }))
+vi.mock("next/navigation", () => ({ usePathname: () => "/en/barcode-generator" }))
+vi.mock("@/core/seo/components/related-tools", () => ({ RelatedTools: () => null }))
+
+function renderPage() {
+    return render(
+        <LangProvider lang="en" translations={getTranslation("en")}>
+            <BarcodeGeneratorPage />
+        </LangProvider>,
+    )
+}
+
+describe("BarcodeGeneratorPage input behavior", () => {
+    it("starts empty and keeps samples, clear, reset, and format changes explicit", () => {
+        renderPage()
+        const input = screen.getByRole("textbox", { name: "Input" }) as HTMLInputElement
+
+        expect(input).toHaveValue("")
+        expect(screen.getByRole("button", { name: "Clear" })).toBeDisabled()
+
+        fireEvent.click(screen.getByRole("button", { name: "Sample" }))
+        expect(input).toHaveValue("BYTEFLOW-2026")
+
+        fireEvent.click(screen.getByRole("button", { name: "Clear" }))
+        expect(input).toHaveValue("")
+
+        fireEvent.change(input, { target: { value: "custom-value" } })
+        fireEvent.click(screen.getByRole("button", { name: "EAN13" }))
+        expect(input).toHaveValue("custom-value")
+
+        fireEvent.click(screen.getByRole("button", { name: "Reset" }))
+        expect(input).toHaveValue("")
+    })
+})
diff --git a/tests/component/bf-016-tool-action-semantics.test.tsx b/tests/component/bf-016-tool-action-semantics.test.tsx
index 804e18b2..2feec6c2 100644
--- a/tests/component/bf-016-tool-action-semantics.test.tsx
+++ b/tests/component/bf-016-tool-action-semantics.test.tsx
@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
-import { beforeEach, describe, expect, it, vi } from "vitest"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 import { LangProvider } from "@/core/i18n/lang-provider"
 import { getTranslation } from "@/core/i18n/translations/catalog"
 import { Base64Page } from "@/features/tools/base64-encode-decode/page"
@@ -7,6 +7,7 @@ import { ImageResizerPage } from "@/features/tools/image-resizer/page"
 import { JsonFormatterPage } from "@/features/tools/json-formatter/page"
 import { RegexTesterPage } from "@/features/tools/regex-tester/page"
 import { YouTubeThumbnailGrabberPage } from "@/features/tools/youtube-thumbnail-grabber/page"
+import { RegexTestWorkerMock } from "../helpers/regex-test-worker-mock"
 
 const clipboardWriteMock = vi.fn()
 const downloadJsonOutputMock = vi.fn()
@@ -139,6 +140,10 @@ class MockImage {
 }
 
 describe("BF-016 shared tool action semantics", () => {
+    afterEach(() => {
+        vi.unstubAllGlobals()
+    })
+
     beforeEach(() => {
         vi.clearAllMocks()
         installMemoryStorage()
@@ -230,6 +235,7 @@ describe("BF-016 shared tool action semantics", () => {
     })
 
     it("keeps Regex Tester Sample and Clear deterministic after invalid and valid states", async () => {
+        vi.stubGlobal("Worker", RegexTestWorkerMock)
         renderEnglish(<RegexTesterPage />)
 
         expect(screen.getByRole("button", { name: "Sample" })).toHaveAttribute(
diff --git a/tests/component/curl-to-code-page.test.tsx b/tests/component/curl-to-code-page.test.tsx
new file mode 100644
index 00000000..a87e5063
--- /dev/null
+++ b/tests/component/curl-to-code-page.test.tsx
@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { LangProvider } from "@/core/i18n/lang-provider"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { CurlToCodePage } from "@/features/tools/curl-to-code/page"
+
+vi.mock("next/navigation", () => ({
+    usePathname: () => "/en/curl-to-code",
+}))
+
+vi.mock("@/core/seo/components/related-tools", () => ({
+    RelatedTools: () => null,
+}))
+
+vi.mock("@/features/tool-shell/tool-action-feedback", () => ({
+    copyTextWithToolFeedback: vi.fn(),
+}))
+
+function renderPage() {
+    return render(
+        <LangProvider lang="en" translations={getTranslation("en")}>
+            <CurlToCodePage />
+        </LangProvider>,
+    )
+}
+
+describe("CurlToCodePage", () => {
+    it("renders the complete sample JSON body without a diagnostic", () => {
+        renderPage()
+
+        expect(screen.queryByRole("alert")).not.toBeInTheDocument()
+        expect(screen.getByLabelText("Output")).toHaveTextContent('body: "{\\"id\\": 42, \\"enabled\\": true}"')
+        expect(screen.getByRole("button", { name: "Copy" })).toBeEnabled()
+    })
+
+    it("shows unsupported syntax diagnostics and disables copy", () => {
+        renderPage()
+
+        fireEvent.change(screen.getByPlaceholderText("curl -X GET https://api.example.com"), {
+            target: { value: "curl https://api.example.com --compressed" },
+        })
+
+        const alert = screen.getByRole("alert")
+        expect(alert).toHaveTextContent("Unsupported cURL option \"--compressed\"")
+        expect(alert).toHaveTextContent("Character 30")
+        expect(screen.getByRole("button", { name: /Copy/ })).toBeDisabled()
+    })
+
+    it("shows a warning while generating deterministic duplicate-header output", () => {
+        renderPage()
+
+        fireEvent.change(screen.getByPlaceholderText("curl -X GET https://api.example.com"), {
+            target: {
+                value: "curl https://api.example.com -H 'X-Test: first' -H 'x-test: second'",
+            },
+        })
+
+        expect(screen.getByRole("status")).toHaveTextContent("Header \"x-test\" is repeated")
+        expect(screen.getByLabelText("Output")).toHaveTextContent('"x-test": "second"')
+        expect(screen.getByRole("button", { name: "Copy" })).toBeEnabled()
+    })
+})
diff --git a/tests/component/http-request-builder-page.test.tsx b/tests/component/http-request-builder-page.test.tsx
index bcebaf08..a71f0d54 100644
--- a/tests/component/http-request-builder-page.test.tsx
+++ b/tests/component/http-request-builder-page.test.tsx
@@ -138,4 +138,11 @@ describe("HttpRequestBuilderPage", () => {
 
         expect(toggleFavoriteToolKeyMock).not.toHaveBeenCalled()
     })
+
+    it("disables request body controls for GET and explains the constraint", () => {
+        renderHttpBuilder()
+
+        expect(screen.getByRole("combobox", { name: "Body" })).toBeDisabled()
+        expect(screen.getByRole("status")).toHaveTextContent("GET and HEAD requests cannot include a body")
+    })
 })
diff --git a/tests/component/id-generator-page.test.tsx b/tests/component/id-generator-page.test.tsx
new file mode 100644
index 00000000..18481fa3
--- /dev/null
+++ b/tests/component/id-generator-page.test.tsx
@@ -0,0 +1,158 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react"
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { LangProvider } from "@/core/i18n/lang-provider"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { IdGeneratorPage } from "@/features/tools/id-generator/page"
+
+const clipboardWriteMock = vi.fn()
+
+vi.mock("uuid", () => ({
+    v4: vi.fn(() => "44444444-4444-4444-8444-444444444444"),
+}))
+
+vi.mock("@/core/clipboard/clipboard", () => ({
+    safeClipboardWrite: (value: string) => clipboardWriteMock(value),
+}))
+
+vi.mock("@/core/seo/components/related-tools", () => ({
+    RelatedTools: () => null,
+}))
+
+vi.mock("sonner", () => ({
+    toast: {
+        success: vi.fn(),
+        error: vi.fn(),
+    },
+}))
+
+vi.mock("@/components/ui/select", async () => {
+    const React = await import("react")
+    const SelectContext = React.createContext<{
+        value?: string
+        onValueChange?: (value: string) => void
+    } | null>(null)
+
+    function Select({
+        value,
+        onValueChange,
+        children,
+    }: {
+        value?: string
+        onValueChange?: (value: string) => void
+        children: ReactNode
+    }) {
+        return <SelectContext.Provider value={{ value, onValueChange }}>{children}</SelectContext.Provider>
+    }
+
+    function SelectTrigger({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+        return <button type="button" {...props}>{children}</button>
+    }
+
+    function SelectContent({ children }: { children: ReactNode }) {
+        return <>{children}</>
+    }
+
+    function SelectItem({ value, children, ...props }: HTMLAttributes<HTMLDivElement> & { value: string }) {
+        const context = React.useContext(SelectContext)
+        return (
+            <div
+                role="option"
+                aria-selected={context?.value === value}
+                onClick={() => context?.onValueChange?.(value)}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+
+    return {
+        Select,
+        SelectContent,
+        SelectItem,
+        SelectTrigger,
+        SelectValue: () => null,
+    }
+})
+
+function renderPage() {
+    return render(
+        <LangProvider lang="en" translations={getTranslation("en")}>
+            <IdGeneratorPage />
+        </LangProvider>,
+    )
+}
+
+function makeAlphabet(length: number): string {
+    return Array.from({ length }, (_, index) => String.fromCodePoint(0x1000 + index)).join("")
+}
+
+describe("IdGeneratorPage", () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+        clipboardWriteMock.mockResolvedValue({ ok: true })
+    })
+
+    it("rejects blank batch quantity without leaving copyable output", async () => {
+        renderPage()
+        await waitFor(() => expect(screen.getByText("Generated IDs (5)")).toBeInTheDocument())
+
+        const quantity = screen.getByLabelText("Quantity (1-1000)")
+        fireEvent.change(quantity, { target: { value: "" } })
+
+        expect(quantity).toHaveAttribute("aria-invalid", "true")
+        expect(screen.getByRole("alert")).toHaveTextContent("Quantity must be a whole number from 1 to 1000.")
+        expect(screen.getByRole("button", { name: "Regenerate" })).toBeDisabled()
+        expect(screen.getByRole("button", { name: "Copy All" })).toBeDisabled()
+        expect(screen.getByRole("textbox", { name: "Generated IDs" })).toHaveValue("")
+
+        fireEvent.click(screen.getByRole("button", { name: "Copy All" }))
+        expect(clipboardWriteMock).not.toHaveBeenCalled()
+
+        fireEvent.change(quantity, { target: { value: "2" } })
+        await waitFor(() => expect(screen.getByText("Generated IDs (2)")).toBeInTheDocument())
+        expect(quantity).not.toHaveAttribute("aria-invalid")
+        expect(screen.getByRole("button", { name: "Regenerate" })).toBeEnabled()
+    })
+
+    it("reports unsafe alphabets instead of throwing from the generation effect", async () => {
+        renderPage()
+        fireEvent.click(screen.getByRole("option", { name: "NanoID" }))
+
+        const alphabet = await screen.findByLabelText("Alphabet (2-256 unique Unicode code points)")
+        fireEvent.change(alphabet, { target: { value: "" } })
+        expect(screen.getByText("Alphabet must contain at least 2 unique Unicode code points.")).toBeInTheDocument()
+        expect(screen.getByText("Generated IDs (0)")).toBeInTheDocument()
+
+        fireEvent.change(alphabet, { target: { value: "aab" } })
+        expect(screen.getByText("Alphabet must not contain duplicate Unicode code points.")).toBeInTheDocument()
+
+        fireEvent.change(alphabet, { target: { value: makeAlphabet(257) } })
+        expect(screen.getByText("Alphabet cannot contain more than 256 Unicode code points.")).toBeInTheDocument()
+        expect(screen.getByRole("button", { name: "Regenerate" })).toBeDisabled()
+        expect(screen.getByRole("button", { name: "Copy All" })).toBeDisabled()
+    })
+
+    it("generates complete non-BMP symbols after invalid settings are corrected", async () => {
+        renderPage()
+        fireEvent.click(screen.getByRole("option", { name: "NanoID" }))
+
+        const quantity = screen.getByLabelText("Quantity (1-1000)")
+        const size = await screen.findByLabelText("Length (1-256)")
+        const alphabet = screen.getByLabelText("Alphabet (2-256 unique Unicode code points)")
+
+        fireEvent.change(size, { target: { value: "" } })
+        expect(size).toHaveAttribute("aria-invalid", "true")
+        expect(screen.getByText("NanoID length must be a whole number from 1 to 256.")).toBeInTheDocument()
+
+        fireEvent.change(quantity, { target: { value: "1" } })
+        fireEvent.change(size, { target: { value: "4" } })
+        fireEvent.change(alphabet, { target: { value: "😀🚀" } })
+
+        const output = screen.getByRole("textbox", { name: "Generated IDs" })
+        await waitFor(() => expect(Array.from((output as HTMLTextAreaElement).value)).toHaveLength(4))
+        expect(Array.from((output as HTMLTextAreaElement).value).every((symbol) => ["😀", "🚀"].includes(symbol))).toBe(true)
+        expect(screen.getByRole("button", { name: "Copy All" })).toBeEnabled()
+    })
+})
diff --git a/tests/component/input-intent-taxonomy.test.tsx b/tests/component/input-intent-taxonomy.test.tsx
new file mode 100644
index 00000000..2fda21db
--- /dev/null
+++ b/tests/component/input-intent-taxonomy.test.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { describe, expect, it } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { Input } from "@/components/ui/input"
+import { INPUT_INTENTS, INPUT_INTENT_CLASS_NAMES, type InputIntent } from "@/components/ui/input-intent"
+import { Textarea } from "@/components/ui/textarea"
+import { LangProvider } from "@/core/i18n/lang-provider"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { TextOutputPanel } from "@/features/tool-shell/text-output-panel"
+
+function expectIntentClasses(element: HTMLElement, intent: InputIntent, control: "input" | "textarea" | "output") {
+    expect(element).toHaveAttribute("data-input-intent", intent)
+    expect(element).toHaveClass(...INPUT_INTENT_CLASS_NAMES[intent][control].split(" "))
+}
+
+describe("input intent taxonomy", () => {
+    it("keeps the five documented intent names stable", () => {
+        expect(INPUT_INTENTS).toEqual(["scalar", "shortText", "payload", "workbench", "generatedOutput"])
+    })
+
+    it.each(INPUT_INTENTS)("applies %s sizing and a runtime marker to shared fields", (intent) => {
+        render(
+            <div>
+                <Input data-testid={`${intent}-input`} intent={intent} />
+                <Textarea data-testid={`${intent}-textarea`} intent={intent} />
+            </div>,
+        )
+
+        expectIntentClasses(screen.getByTestId(`${intent}-input`), intent, "input")
+        expectIntentClasses(screen.getByTestId(`${intent}-textarea`), intent, "textarea")
+    })
+
+    it("marks backward-compatible shared defaults without changing their legacy footprint", () => {
+        render(
+            <div>
+                <Input aria-label="default input" />
+                <Textarea aria-label="default textarea" />
+            </div>,
+        )
+
+        expect(screen.getByLabelText("default input")).toHaveAttribute("data-input-intent", "shortText")
+        expect(screen.getByLabelText("default input")).toHaveClass("h-11", "lg:h-9")
+        expect(screen.getByLabelText("default textarea")).toHaveAttribute("data-input-intent", "payload")
+        expect(screen.getByLabelText("default textarea")).toHaveClass("field-sizing-content", "min-h-16")
+    })
+
+    it("marks tool-shell text output as generated output", () => {
+        render(
+            <LangProvider lang="en" translations={getTranslation("en")}>
+                <TextOutputPanel title="Result" value="done" />
+            </LangProvider>,
+        )
+
+        expectIntentClasses(screen.getByLabelText("Result"), "generatedOutput", "output")
+    })
+})
diff --git a/tests/component/layout-components.test.tsx b/tests/component/layout-components.test.tsx
index bd40649d..730d4b64 100644
--- a/tests/component/layout-components.test.tsx
+++ b/tests/component/layout-components.test.tsx
@@ -261,6 +261,9 @@ describe("layout components", () => {
         expect(screen.getByRole("link", { name: "Pipeline Builder" })).toHaveAttribute("href", "/en/pipeline-builder")
         expect(screen.getByRole("link", { name: "All tools" })).toHaveAttribute("href", getAllToolsHref("en"))
         expect(screen.getByLabelText("Search")).toHaveAttribute("data-command-palette-trigger")
+        expect(document.querySelector("[data-navbar-language-footprint]")).toHaveTextContent("English")
+        expect(document.querySelector("[data-navbar-theme-footprint]")).toBeInTheDocument()
+        expect(document.querySelector("[data-navbar-controls-footprint]")).toHaveTextContent("English")
     })
 
     it("exposes language and theme controls inside the mobile navigation sheet", () => {
diff --git a/tests/component/monaco-editors-layout.test.tsx b/tests/component/monaco-editors-layout.test.tsx
index 7927678e..2e1edfd3 100644
--- a/tests/component/monaco-editors-layout.test.tsx
+++ b/tests/component/monaco-editors-layout.test.tsx
@@ -99,7 +99,7 @@ describe("monaco editor layout guard", () => {
     it("resolves percentage height to parent pixel height for MonacoEditor", async () => {
         renderWithLang(
             <HeightHost height={640}>
-                <MonacoEditor language="json" value='{"a":1}' height="100%" />
+                <MonacoEditor intent="payload" language="json" value='{"a":1}' height="100%" />
             </HeightHost>,
         )
 
@@ -111,12 +111,13 @@ describe("monaco editor layout guard", () => {
         await waitFor(() => {
             expect(editor.getAttribute("data-height")).toBe("640px")
         })
+        expect(editor.parentElement).toHaveAttribute("data-input-intent", "payload")
     })
 
     it("resolves percentage height to parent pixel height for MonacoDiffEditor", async () => {
         renderWithLang(
             <HeightHost height={560}>
-                <MonacoDiffEditor language="text" original="a" modified="b" height="100%" />
+                <MonacoDiffEditor intent="workbench" language="text" original="a" modified="b" height="100%" />
             </HeightHost>,
         )
 
@@ -126,6 +127,7 @@ describe("monaco editor layout guard", () => {
         await waitFor(() => {
             expect(editor.getAttribute("data-height")).toBe("560px")
         })
+        expect(editor.parentElement).toHaveAttribute("data-input-intent", "workbench")
     })
 
     it("keeps textarea fallback active during the first desktop interaction and upgrades after blur", async () => {
diff --git a/tests/component/qr-code-generator-logo-upload.test.tsx b/tests/component/qr-code-generator-logo-upload.test.tsx
new file mode 100644
index 00000000..d0fbe751
--- /dev/null
+++ b/tests/component/qr-code-generator-logo-upload.test.tsx
@@ -0,0 +1,167 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { FILE_INPUT_POLICIES } from "@/core/files/file-input-policy"
+import { LangProvider } from "@/core/i18n/lang-provider"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { QrCodeGeneratorPage } from "@/features/tools/qr-code-generator/page"
+import { SAMPLE_QR_TEXT } from "@/features/tools/qr-code-generator/constants"
+
+const {
+    readFileAsDataUrlMock,
+    decodeQrImageFileMock,
+    toastErrorMock,
+    toastSuccessMock,
+    toCanvasMock,
+} = vi.hoisted(() => ({
+    readFileAsDataUrlMock: vi.fn(),
+    decodeQrImageFileMock: vi.fn(),
+    toastErrorMock: vi.fn(),
+    toastSuccessMock: vi.fn(),
+    toCanvasMock: vi.fn(),
+}))
+
+vi.mock("@/core/seo/components/related-tools", () => ({
+    RelatedTools: () => null,
+}))
+
+vi.mock("next/navigation", () => ({
+    usePathname: () => "/en/qr-code-generator",
+}))
+
+vi.mock("@/features/tools/qr-code-generator/browser-actions", () => ({
+    buildQrSvg: vi.fn(),
+    decodeQrImageFile: (file: File) => decodeQrImageFileMock(file),
+    downloadCanvasPng: vi.fn(),
+    downloadDataUrl: vi.fn(),
+    downloadSvg: vi.fn(),
+    drawRoundedRect: vi.fn(),
+    loadImage: vi.fn(),
+    loadQRCode: async () => ({ toCanvas: toCanvasMock }),
+    loadToast: async () => ({
+        error: toastErrorMock,
+        success: toastSuccessMock,
+    }),
+    readFileAsDataUrl: (file: File) => readFileAsDataUrlMock(file),
+}))
+
+function renderPage() {
+    return render(
+        <LangProvider lang="en" translations={getTranslation("en")}>
+            <QrCodeGeneratorPage />
+        </LangProvider>,
+    )
+}
+
+describe("QR code generator logo uploads", () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+        vi.stubGlobal("ResizeObserver", class {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        })
+        toCanvasMock.mockResolvedValue(undefined)
+        decodeQrImageFileMock.mockResolvedValue({ ok: false, error: "no_qr" })
+        HTMLCanvasElement.prototype.getContext = vi.fn(() => null) as unknown as HTMLCanvasElement["getContext"]
+        HTMLCanvasElement.prototype.toDataURL = vi.fn(() => "data:image/png;base64,qr-code")
+    })
+
+    it("limits the picker to raster logo formats and points SVG users to the converter", () => {
+        const { container } = renderPage()
+        const input = container.querySelector<HTMLInputElement>('input[type="file"]')
+
+        expect(input).not.toBeNull()
+        expect(input).toHaveAttribute("accept", FILE_INPUT_POLICIES["image-logo"].accept)
+        expect(input).not.toHaveAttribute("accept", "image/*")
+        expect(screen.getByText(/Convert SVG logos with the SVG to PNG tool first/i)).toBeInTheDocument()
+    })
+
+    it("reports strict raster validation failures without enabling a rejected SVG logo", async () => {
+        const { container } = renderPage()
+        const input = container.querySelector<HTMLInputElement>('input[type="file"]')
+        const disguisedSvg = new File(["<svg></svg>"], "logo.png", { type: "image/png" })
+        readFileAsDataUrlMock.mockRejectedValueOnce(new Error("File content does not match a supported raster image."))
+
+        fireEvent.change(input!, { target: { files: [disguisedSvg] } })
+
+        await waitFor(() => expect(readFileAsDataUrlMock).toHaveBeenCalledWith(disguisedSvg))
+        await waitFor(() => expect(toastErrorMock).toHaveBeenCalledWith(
+            "Please upload a valid PNG, JPEG, WebP, or GIF logo. SVG files are not supported here.",
+        ))
+        expect(screen.queryByText("logo.png")).not.toBeInTheDocument()
+        expect(screen.getByRole("switch")).not.toBeChecked()
+    })
+
+    it("enables a logo only after raster content validation succeeds", async () => {
+        const { container } = renderPage()
+        const input = container.querySelector<HTMLInputElement>('input[type="file"]')
+        const logo = new File(["png"], "logo.png", { type: "image/png" })
+        readFileAsDataUrlMock.mockResolvedValueOnce("data:image/png;base64,logo")
+
+        fireEvent.change(input!, { target: { files: [logo] } })
+
+        expect(await screen.findByText("logo.png")).toBeInTheDocument()
+        expect(screen.getByRole("switch")).toBeChecked()
+        expect(toastErrorMock).not.toHaveBeenCalled()
+    })
+
+    it("starts empty and keeps sample content behind explicit Sample and Clear actions", async () => {
+        const { container } = renderPage()
+        const content = container.querySelector<HTMLTextAreaElement>("textarea")
+
+        expect(content).not.toBeNull()
+        expect(content).toHaveValue("")
+
+        fireEvent.click(screen.getByRole("button", { name: "Sample" }))
+        await waitFor(() => expect(content).toHaveValue(SAMPLE_QR_TEXT))
+
+        fireEvent.click(screen.getByRole("button", { name: "Clear" }))
+        await waitFor(() => expect(content).toHaveValue(""))
+    })
+
+    it("resets QR settings without deleting user-owned content", async () => {
+        const { container } = renderPage()
+        const content = container.querySelector<HTMLTextAreaElement>("textarea")
+
+        fireEvent.change(content!, { target: { value: "user-owned QR payload" } })
+        fireEvent.click(screen.getByRole("button", { name: "Print" }))
+        await waitFor(() => expect(screen.getByText(/Size:\s*320px/)).toBeInTheDocument())
+
+        fireEvent.click(screen.getByRole("button", { name: "Reset" }))
+        expect(content).toHaveValue("user-owned QR payload")
+        expect(screen.getByText(/Size:\s*256px/)).toBeInTheDocument()
+    })
+
+    it("decodes an uploaded QR image without opening URL payloads automatically", async () => {
+        const open = vi.spyOn(window, "open")
+        decodeQrImageFileMock.mockResolvedValueOnce({
+            ok: true,
+            payload: "https://byteflow.tools/decoded",
+            width: 256,
+            height: 256,
+        })
+        const { container } = renderPage()
+
+        fireEvent.click(screen.getByRole("tab", { name: "Decode image" }))
+        const input = container.querySelector<HTMLInputElement>('input[accept*=".png"]')
+        const qrImage = new File(["png"], "qr.png", { type: "image/png" })
+        fireEvent.change(input!, { target: { files: [qrImage] } })
+
+        expect(await screen.findByTestId("qr-decoded-output")).toHaveTextContent("https://byteflow.tools/decoded")
+        expect(open).not.toHaveBeenCalled()
+
+        expect(screen.getByRole("link", { name: "Open" })).toHaveAttribute("href", "https://byteflow.tools/decoded")
+        expect(open).not.toHaveBeenCalled()
+    })
+
+    it("localizes decode failures", async () => {
+        decodeQrImageFileMock.mockResolvedValueOnce({ ok: false, error: "no_qr" })
+        const { container } = renderPage()
+
+        fireEvent.click(screen.getByRole("tab", { name: "Decode image" }))
+        const input = container.querySelector<HTMLInputElement>('input[accept*=".png"]')
+        fireEvent.change(input!, { target: { files: [new File(["blank"], "blank.png", { type: "image/png" })] } })
+
+        expect(await screen.findByRole("alert")).toHaveTextContent("No QR code was found in this image.")
+    })
+})
diff --git a/tests/component/route-page-chrome.test.tsx b/tests/component/route-page-chrome.test.tsx
index c7f70f06..3b34ea20 100644
--- a/tests/component/route-page-chrome.test.tsx
+++ b/tests/component/route-page-chrome.test.tsx
@@ -121,6 +121,7 @@ describe("RoutePageChrome", () => {
         expect(screen.getByText("Requests the Instagram URL you provide only after you confirm rights and click Download.")).toBeInTheDocument()
         expect(screen.getByText("Consent message")).toBeInTheDocument()
         expect(screen.getAllByRole("link", { name: "Trust Center" })[0]).toHaveAttribute("href", "/en/trust-center#verify-local-processing")
+        expect(document.querySelector('[data-route-shell="true"]')).toHaveAttribute("data-route-container-intent", "tool")
     })
 
     it("shows local trust status for local-only tools", () => {
@@ -136,5 +137,6 @@ describe("RoutePageChrome", () => {
         expect(screen.getByText("Offline processing message")).toBeInTheDocument()
         expect(screen.getByText("Sensitive input")).toBeInTheDocument()
         expect(screen.queryByText("External request details")).not.toBeInTheDocument()
+        expect(document.querySelector('[data-route-shell="true"]')).toHaveAttribute("data-route-container-intent", "wide-tool")
     })
 })
diff --git a/tests/component/totp-generator-page.test.tsx b/tests/component/totp-generator-page.test.tsx
new file mode 100644
index 00000000..e0b3e57f
--- /dev/null
+++ b/tests/component/totp-generator-page.test.tsx
@@ -0,0 +1,111 @@
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { LangProvider } from "@/core/i18n/lang-provider"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { TotpGeneratorPage } from "@/features/tools/totp-generator/page"
+
+const mocks = vi.hoisted(() => ({
+    clipboardWrite: vi.fn(),
+    generateHOTP: vi.fn(),
+    generateTOTP: vi.fn(),
+}))
+
+vi.mock("next/link", () => ({
+    default: ({ children, href, ...props }: { children: React.ReactNode; href: string }) => <a href={href} {...props}>{children}</a>,
+}))
+
+vi.mock("@/core/seo/components/related-tools", () => ({
+    RelatedTools: () => null,
+}))
+
+vi.mock("@/core/clipboard/clipboard", () => ({
+    safeClipboardWrite: (value: string) => mocks.clipboardWrite(value),
+}))
+
+vi.mock("@/features/tools/totp-generator/logic", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("@/features/tools/totp-generator/logic")>()
+    return {
+        ...actual,
+        generateHOTP: (...args: Parameters<typeof actual.generateHOTP>) => mocks.generateHOTP(...args),
+        generateTOTP: (...args: Parameters<typeof actual.generateTOTP>) => mocks.generateTOTP(...args),
+    }
+})
+
+vi.mock("sonner", () => ({
+    toast: {
+        error: vi.fn(),
+        success: vi.fn(),
+    },
+}))
+
+function renderPage() {
+    return render(
+        <LangProvider lang="en" translations={getTranslation("en")}>
+            <TotpGeneratorPage />
+        </LangProvider>,
+    )
+}
+
+describe("TotpGeneratorPage", () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+        mocks.clipboardWrite.mockResolvedValue({ ok: true })
+        mocks.generateTOTP.mockResolvedValue("123456")
+        mocks.generateHOTP.mockResolvedValue("654321")
+    })
+
+    it("clears and disables generated output when the Base32 secret is invalid", async () => {
+        renderPage()
+
+        expect(await screen.findByText("123456")).toBeInTheDocument()
+        const secretInput = screen.getByLabelText(/Secret Key/) as HTMLInputElement
+        fireEvent.change(secretInput, { target: { value: "JBSWY3DPEHPK3PXP0" } })
+
+        expect(await screen.findByText(/ASCII letters A-Z and digits 2-7/)).toHaveAttribute("role", "alert")
+        expect(secretInput).toHaveAttribute("aria-invalid", "true")
+        expect(screen.getByText("------")).toBeInTheDocument()
+        expect(screen.getByRole("button", { name: "Copy" })).toBeDisabled()
+        expect(screen.getByRole("button", { name: "Refresh" })).toBeDisabled()
+        expect(mocks.clipboardWrite).not.toHaveBeenCalled()
+    })
+
+    it("preserves blank and invalid numeric inputs instead of coercing them", async () => {
+        renderPage()
+        await screen.findByText("123456")
+
+        const periodInput = screen.getByLabelText("Period (seconds)") as HTMLInputElement
+        fireEvent.change(periodInput, { target: { value: "" } })
+        expect(periodInput.value).toBe("")
+        expect(await screen.findByText("Enter a TOTP period.")).toBeInTheDocument()
+        expect(screen.getByText("------")).toBeInTheDocument()
+
+        fireEvent.change(periodInput, { target: { value: "30" } })
+        await waitFor(() => expect(screen.getByText("123456")).toBeInTheDocument())
+
+        fireEvent.click(screen.getByRole("button", { name: "HOTP" }))
+        const counterInput = screen.getByLabelText("Counter") as HTMLInputElement
+        fireEvent.change(counterInput, { target: { value: "-1" } })
+        expect(await screen.findByText(/HOTP counter must be a whole number/)).toBeInTheDocument()
+        expect(screen.getByRole("button", { name: "Increment" })).toBeDisabled()
+        expect(screen.getByRole("button", { name: "Copy" })).toBeDisabled()
+    })
+
+    it("does not let an earlier async result overwrite a newly invalid state", async () => {
+        let resolveGeneration: ((value: string) => void) | undefined
+        mocks.generateTOTP.mockImplementationOnce(() => new Promise((resolve) => {
+            resolveGeneration = resolve
+        }))
+        renderPage()
+
+        fireEvent.change(screen.getByLabelText(/Secret Key/), { target: { value: "invalid-0" } })
+        expect(await screen.findByText(/ASCII letters A-Z and digits 2-7/)).toBeInTheDocument()
+
+        await act(async () => {
+            resolveGeneration?.("999999")
+            await Promise.resolve()
+        })
+
+        expect(screen.queryByText("999999")).not.toBeInTheDocument()
+        expect(screen.getByText("------")).toBeInTheDocument()
+    })
+})
diff --git a/tests/component/uuid-generator-page.test.tsx b/tests/component/uuid-generator-page.test.tsx
index e8a44ef9..daf6bcbe 100644
--- a/tests/component/uuid-generator-page.test.tsx
+++ b/tests/component/uuid-generator-page.test.tsx
@@ -120,4 +120,18 @@ describe("UuidGeneratorPage", () => {
         })
         expect(JSON.parse(mocks.downloaded.at(-1)?.content ?? "[]")).toHaveLength(1000)
     })
+
+    it("neutralizes formula-like prefixes in CSV exports", () => {
+        render(<UuidGeneratorPage />)
+
+        fireEvent.change(screen.getByLabelText("Optional prefix"), { target: { value: "=1+1" } })
+        fireEvent.click(screen.getByRole("button", { name: "CSV" }))
+
+        const download = mocks.downloaded.at(-1)
+        expect(download).toMatchObject({
+            filename: "byteflow-uuids.csv",
+            mimeType: "text/csv;charset=utf-8",
+        })
+        expect(download?.content.split("\n")[1]).toBe("1,'=1+144444444-4444-4444-4444-444444444444")
+    })
 })
diff --git a/tests/guards/create-tool-scaffold.test.ts b/tests/guards/create-tool-scaffold.test.ts
index 00bc2fb0..41b26ecf 100644
--- a/tests/guards/create-tool-scaffold.test.ts
+++ b/tests/guards/create-tool-scaffold.test.ts
@@ -38,6 +38,25 @@ describe("create-tool scaffold boundaries", () => {
         expect(CREATE_TOOL_SOURCE).not.toContain("export default function ${componentName}Page()")
     })
 
+    it("keeps generated transformation inputs empty-first with explicit sample and clear actions", () => {
+        expect(CREATE_TOOL_SOURCE).toContain('const [input, setInput] = React.useState("")')
+        expect(CREATE_TOOL_SOURCE).not.toContain("React.useState(SAMPLE_INPUT)")
+        expect(CREATE_TOOL_SOURCE).toContain("const handleSample = () =>")
+        expect(CREATE_TOOL_SOURCE).toContain("setInput(SAMPLE_INPUT)")
+        expect(CREATE_TOOL_SOURCE).toContain("const handleClear = () =>")
+        expect(CREATE_TOOL_SOURCE).toContain('inputBehavior: "empty-first"')
+        expect(CREATE_TOOL_SOURCE).toContain('intent="payload"')
+        expect(CREATE_TOOL_SOURCE).toContain('intent="generatedOutput"')
+        expect(CREATE_TOOL_SOURCE).toContain('data-input-intent="workbench"')
+        expect(CREATE_TOOL_SOURCE).not.toContain('className="min-h-[360px] font-mono"')
+    })
+
+    it("uses the standard tool page container contract", () => {
+        expect(CREATE_TOOL_SOURCE).toContain('import { ToolPageContainer } from "@/components/layout/page-container"')
+        expect(CREATE_TOOL_SOURCE).toContain('<ToolPageContainer className="flex h-full flex-col gap-6">')
+        expect(CREATE_TOOL_SOURCE).not.toContain('max-w-6xl flex-col gap-6')
+    })
+
     it("creates manifest metadata instead of appending legacy category metadata", () => {
         expect(CREATE_TOOL_SOURCE).toContain('import type { ToolMeta } from "@/core/registry/types"')
         expect(CREATE_TOOL_SOURCE).toContain("satisfies ToolMeta")
diff --git a/tests/guards/csv-export-safety-guard.test.ts b/tests/guards/csv-export-safety-guard.test.ts
new file mode 100644
index 00000000..f157e472
--- /dev/null
+++ b/tests/guards/csv-export-safety-guard.test.ts
@@ -0,0 +1,64 @@
+import fs from "node:fs"
+import path from "node:path"
+import { describe, expect, it } from "vitest"
+
+const ROOT = process.cwd()
+const SOURCE_ROOT = path.join(ROOT, "src")
+
+const CSV_DOWNLOAD_SURFACES = [
+    "src/features/tool-templates/focused-hash-tool-page.tsx",
+    "src/features/tools/csv-json-converter/page.tsx",
+    "src/features/tools/hash-generator/page.tsx",
+    "src/features/tools/local-log-parser/page.tsx",
+    "src/features/tools/twitter-ad-revenue-generator/page.tsx",
+    "src/features/tools/uuid-generator/page.tsx",
+]
+
+const CSV_BUILDERS = [
+    "src/features/tool-templates/focused-hash-tool-page.tsx",
+    "src/features/tools/csv-json-converter/logic.ts",
+    "src/features/tools/hash-generator/page.tsx",
+    "src/features/tools/local-log-parser/utils.ts",
+    "src/features/tools/twitter-ad-revenue-generator/utils.ts",
+    "src/features/tools/uuid-generator/page.tsx",
+]
+
+function listSourceFiles(directory: string): string[] {
+    return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+        const absolutePath = path.join(directory, entry.name)
+        if (entry.isDirectory()) return listSourceFiles(absolutePath)
+        return /\.(?:ts|tsx)$/.test(entry.name) ? [absolutePath] : []
+    })
+}
+
+function read(relativePath: string): string {
+    return fs.readFileSync(path.join(ROOT, relativePath), "utf8")
+}
+
+describe("CSV export safety guard", () => {
+    it("tracks every source file that initiates a CSV download", () => {
+        const discovered = listSourceFiles(SOURCE_ROOT)
+            .filter((file) => {
+                const source = fs.readFileSync(file, "utf8")
+                return source.includes("text/csv")
+                    || (source.includes(".csv") && (
+                        source.includes("downloadTextFile(")
+                        || /\.download\s*=/.test(source)
+                    ))
+            })
+            .map((file) => path.relative(ROOT, file).replaceAll(path.sep, "/"))
+            .sort()
+
+        expect(discovered, "Audit new CSV download surfaces and add them to the shared serializer.")
+            .toEqual(CSV_DOWNLOAD_SURFACES)
+    })
+
+    it("routes every CSV builder through the spreadsheet-safe serializer", () => {
+        for (const file of CSV_BUILDERS) {
+            expect(read(file), file).toContain("serializeSpreadsheetSafeCsv(")
+        }
+
+        expect(read("src/features/tools/csv-json-converter/page.tsx"))
+            .toContain("{toolT.spreadsheet_safe_note}")
+    })
+})
diff --git a/tests/guards/csv-json-converter-performance-guard.test.ts b/tests/guards/csv-json-converter-performance-guard.test.ts
index 2d790a2d..553f7ccd 100644
--- a/tests/guards/csv-json-converter-performance-guard.test.ts
+++ b/tests/guards/csv-json-converter-performance-guard.test.ts
@@ -38,6 +38,8 @@ describe("csv json converter performance guard", () => {
         expect(pageSource).toContain("convertRequestIdRef")
         expect(pageSource).toContain("convertAbortControllerRef")
         expect(pageSource).toContain("convertAbortControllerRef.current?.abort()")
+        expect(pageSource).toContain("setDiagnostics(result.diagnostics)")
+        expect(pageSource).toContain("diagnostics.map((diagnostic, index)")
         expect(pageSource).not.toContain("csvToJson(")
         expect(pageSource).not.toContain("jsonToCsv(")
         expect(taskSource).toContain("new Worker(new URL(\"./csv-json-worker.ts\", import.meta.url)")
diff --git a/tests/guards/file-input-safety-guard.test.ts b/tests/guards/file-input-safety-guard.test.ts
index af00f463..43d248ea 100644
--- a/tests/guards/file-input-safety-guard.test.ts
+++ b/tests/guards/file-input-safety-guard.test.ts
@@ -9,7 +9,6 @@ const TEXT_FILE_PATTERN = /\.(ts|tsx)$/
 const ALLOWED_RAW_FILE_READERS = new Set([
     "src/core/files/file-input-policy.ts",
     "src/core/utils/image-canvas-utils.ts",
-    "src/features/tools/qr-code-generator/browser-actions.ts",
     "src/features/tools/image-resizer/image-resize-task.ts",
     "src/features/tools/scanned-pdf-converter/scan-enhance-task.ts",
 ])
@@ -66,6 +65,62 @@ describe("file input safety guard", () => {
         }
     })
 
+    it("requires generic raster readers to verify file signatures before decoding", () => {
+        const policySource = read("src/core/files/file-input-policy.ts")
+        const imageUtilsSource = read("src/core/utils/image-canvas-utils.ts")
+        const qrActionsSource = read("src/features/tools/qr-code-generator/browser-actions.ts")
+
+        expect(policySource).toContain("detectRasterImageMime")
+        expect(policySource).toContain("validateFileContentAgainstPolicy")
+        expect(policySource).not.toContain('"scan-image": {\n        id: "scan-image",\n        accept: "image/*"')
+        expect(imageUtilsSource).toContain("validateFileContentAgainstPolicy(file, policy)")
+        expect(qrActionsSource).toContain('fileToDataUrl(file, FILE_INPUT_POLICIES["image-logo"])')
+        expect(qrActionsSource).not.toContain("new FileReader")
+    })
+
+    it("keeps every raster-only picker aligned with an explicit shared policy", () => {
+        const wildcardImagePickers = sourceFiles().filter((file) => read(file).includes('accept="image/*"'))
+        expect(wildcardImagePickers).toEqual([])
+
+        const filesByPolicy = [
+            ["src/features/tools/ascii-art-generator/page.tsx", "image-compact"],
+            ["src/features/tools/image-average-color-finder/page.tsx", "image-compact"],
+            ["src/features/tools/image-base64/page.tsx", "image-compact"],
+            ["src/features/tools/instagram-filters/page.tsx", "image-standard"],
+            ["src/features/tools/instagram-post-generator/page.tsx", "image-standard"],
+            ["src/features/tools/instagram-story-generator/page.tsx", "image-standard"],
+            ["src/features/tools/qr-code-generator/panels.tsx", "image-logo"],
+            ["src/features/tools/qr-code-generator/panels.tsx", "qr-decode-image"],
+            ["src/features/tools/tweet-generator/page.tsx", "image-logo"],
+        ] as const
+
+        for (const [file, policyId] of filesByPolicy) {
+            const source = read(file)
+            expect(source, file).toContain(`FILE_INPUT_POLICIES["${policyId}"]`)
+            expect(source, file).toContain("accept={")
+            expect(source, file).not.toContain('accept="image/*"')
+            expect(source, file).not.toContain('file.type.startsWith("image/")')
+        }
+    })
+
+    it("directs SVG users from raster upload copy to the SVG-to-PNG workflow", () => {
+        for (const locale of ["en", "zh-CN", "zh-TW", "ja", "ko", "de", "fr"]) {
+            const translations = JSON.parse(read(`src/core/i18n/translations/${locale}.json`)) as {
+                tools: Record<string, Record<string, string>>
+            }
+            const rasterUploadCopy = [
+                translations.tools.image_base64.supports,
+                translations.tools.image_base64.invalid_file_desc,
+                translations.tools.qr_code_generator.logo_hint,
+            ]
+
+            for (const copy of rasterUploadCopy) {
+                expect(copy, locale).toContain("SVG")
+                expect(copy.lastIndexOf("PNG"), locale).toBeGreaterThan(copy.lastIndexOf("SVG"))
+            }
+        }
+    })
+
     it("keeps representative image tools on shared upload policy and status UI", () => {
         const files = [
             "src/features/tools/image-cropper/page.tsx",
diff --git a/tests/guards/html-injection-surface-guard.test.ts b/tests/guards/html-injection-surface-guard.test.ts
index 0b65c57e..8ac8996e 100644
--- a/tests/guards/html-injection-surface-guard.test.ts
+++ b/tests/guards/html-injection-surface-guard.test.ts
@@ -112,8 +112,8 @@ describe("HTML injection surface guard", () => {
         expect(rootPageSource).not.toContain("window.location.replace")
         expect(countMatches(rootPageSource, /dangerouslySetInnerHTML=\{\{/g)).toBe(0)
 
-        expect(layoutSource).toContain("import Script from \"next/script\"")
-        expect(layoutSource).toContain("<Script src=\"/runtime/theme-manifest-bootstrap.js\" strategy=\"beforeInteractive\" />")
+        expect(layoutSource).not.toContain("next/script")
+        expect(layoutSource).toContain("<script src=\"/runtime/theme-manifest-bootstrap.js\" />")
         expect(countMatches(layoutSource, /dangerouslySetInnerHTML=\{\{/g)).toBe(0)
         expect(themeScript).toMatch(new RegExp(`var locales = ${jsonArrayPattern(LOCALES).source};`))
         expect(themeScript).toContain(`var themeColor = t === "light" ? "${PWA_THEME_COLOR_LIGHT}" : "${PWA_THEME_COLOR}";`)
diff --git a/tests/guards/input-intent-taxonomy.test.ts b/tests/guards/input-intent-taxonomy.test.ts
new file mode 100644
index 00000000..3d20d4ee
--- /dev/null
+++ b/tests/guards/input-intent-taxonomy.test.ts
@@ -0,0 +1,155 @@
+import crypto from "node:crypto"
+import fs from "node:fs"
+import path from "node:path"
+import ts from "typescript"
+import { describe, expect, it } from "vitest"
+import { INPUT_INTENTS, type InputIntent } from "@/components/ui/input-intent"
+
+const ROOT = process.cwd()
+const SOURCE_ROOT = path.join(ROOT, "src")
+const CONTROL_TAGS = new Set(["Input", "Textarea", "MonacoEditor", "MonacoDiffEditor", "TextOutputPanel", "input", "textarea", "select"])
+const INTENT_SET = new Set<string>(INPUT_INTENTS)
+const REPRESENTATIVE_TOOL_DIRS = [
+    "base64-encode-decode",
+    "csv-json-converter",
+    "json-formatter",
+    "jwt-decoder",
+    "pipeline-builder",
+    "qr-code-generator",
+    "regex-tester",
+]
+const HARDCODED_SIZE_PATTERN = /(?:(?:sm|md|lg|xl|2xl|hover|focus|focus-visible|data-\[[^\]]+\]):)*(?:h|min-h|max-h|size)-(?:\[[^\]]+\]|\d+(?:\.\d+)?)|field-sizing-content/g
+const LEGACY_SIGNATURE_COUNT = 197
+const LEGACY_SIGNATURE_SHA256 = "49e263f72c6d225c86c0c7c258089d5c0690c318ad5b2fa997ab43f5f0303f64"
+
+type InventoryRecord = {
+    explicitIntent: boolean
+    file: string
+    inferredIntent: InputIntent
+    invalidIntent?: string
+    line: number
+    sizeTokens: string[]
+    tag: string
+}
+
+function sourceFiles(directory: string): string[] {
+    return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+        const fullPath = path.join(directory, entry.name)
+        if (entry.isDirectory()) return sourceFiles(fullPath)
+        return entry.isFile() && entry.name.endsWith(".tsx") ? [fullPath] : []
+    })
+}
+
+function jsxTagName(node: ts.JsxOpeningLikeElement) {
+    return ts.isIdentifier(node.tagName) ? node.tagName.text : node.tagName.getText()
+}
+
+function findAttribute(node: ts.JsxOpeningLikeElement, attributeName: string) {
+    return node.attributes.properties.find(
+        (property): property is ts.JsxAttribute => ts.isJsxAttribute(property) && property.name.getText() === attributeName,
+    )
+}
+
+function literalAttributeValue(attribute: ts.JsxAttribute | undefined) {
+    if (!attribute?.initializer) return attribute ? "" : undefined
+    if (ts.isStringLiteral(attribute.initializer)) return attribute.initializer.text
+    if (!ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression) return undefined
+    const expression = attribute.initializer.expression
+    return ts.isStringLiteral(expression) || ts.isNoSubstitutionTemplateLiteral(expression) ? expression.text : undefined
+}
+
+function inferRawInputIntent(node: ts.JsxOpeningLikeElement): InputIntent {
+    const type = literalAttributeValue(findAttribute(node, "type")) || "text"
+    if (["checkbox", "color", "number", "radio", "range"].includes(type)) return "scalar"
+    if (type === "file") return "payload"
+    return "shortText"
+}
+
+function inferredIntent(tag: string, node: ts.JsxOpeningLikeElement, explicitValue: string | undefined): InputIntent {
+    if (explicitValue && INTENT_SET.has(explicitValue)) return explicitValue as InputIntent
+    if (tag === "Input") return "shortText"
+    if (tag === "Textarea" || tag === "textarea") return "payload"
+    if (tag === "MonacoDiffEditor") return "workbench"
+    if (tag === "MonacoEditor") return "workbench"
+    if (tag === "TextOutputPanel") return "generatedOutput"
+    if (tag === "select") return "scalar"
+    return inferRawInputIntent(node)
+}
+
+function collectInventory(): InventoryRecord[] {
+    return sourceFiles(SOURCE_ROOT).flatMap((filePath) => {
+        const sourceText = fs.readFileSync(filePath, "utf8")
+        const sourceFile = ts.createSourceFile(filePath, sourceText, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+        const records: InventoryRecord[] = []
+
+        function visit(node: ts.Node) {
+            if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+                const tag = jsxTagName(node)
+                if (CONTROL_TAGS.has(tag)) {
+                    const intentAttribute = findAttribute(node, "intent") || findAttribute(node, "data-input-intent")
+                    const explicitValue = literalAttributeValue(intentAttribute)
+                    const classSource = findAttribute(node, "className")?.getText(sourceFile) || ""
+                    const sizeTokens = Array.from(new Set(classSource.match(HARDCODED_SIZE_PATTERN) || [])).sort()
+                    const line = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)).line + 1
+                    records.push({
+                        explicitIntent: Boolean(intentAttribute),
+                        file: path.relative(ROOT, filePath).replaceAll("\\", "/"),
+                        inferredIntent: inferredIntent(tag, node, explicitValue),
+                        invalidIntent: explicitValue !== undefined && explicitValue !== "" && !INTENT_SET.has(explicitValue) ? explicitValue : undefined,
+                        line,
+                        sizeTokens,
+                        tag,
+                    })
+                }
+            }
+            ts.forEachChild(node, visit)
+        }
+
+        visit(sourceFile)
+        return records
+    })
+}
+
+function displayRecord(record: InventoryRecord) {
+    return `${record.file}:${record.line} <${record.tag}> -> ${record.inferredIntent}${record.sizeTokens.length ? ` [${record.sizeTokens.join(", ")}]` : ""}`
+}
+
+const inventory = collectInventory()
+
+describe("input intent static inventory", () => {
+    it("classifies every shared and raw input surface with the five-value taxonomy", () => {
+        expect(inventory.length).toBeGreaterThan(300)
+        expect(inventory.filter((record) => record.invalidIntent).map(displayRecord)).toEqual([])
+        expect(new Set(inventory.map((record) => record.inferredIntent))).toEqual(new Set(INPUT_INTENTS))
+    })
+
+    it("requires explicit intent on every representative tool input surface", () => {
+        const representativePrefix = REPRESENTATIVE_TOOL_DIRS.map((slug) => `src/features/tools/${slug}/`)
+        const offenders = inventory.filter(
+            (record) => representativePrefix.some((prefix) => record.file.startsWith(prefix)) && !record.explicitIntent,
+        )
+
+        expect(offenders.map(displayRecord)).toEqual([])
+    })
+
+    it("freezes all remaining unclassified hardcoded field sizes as a legacy ratchet", () => {
+        const legacySignatures = inventory
+            .filter((record) => !record.explicitIntent && record.sizeTokens.length > 0)
+            .map((record) => `${record.file}|${record.tag}|${record.sizeTokens.join(",")}`)
+            .sort()
+        const digest = crypto.createHash("sha256").update(JSON.stringify(legacySignatures)).digest("hex")
+
+        expect(
+            { count: legacySignatures.length, digest },
+            `Legacy input sizing changed. Migrate the field to an explicit intent, or review the full inventory before updating the ratchet.\n${legacySignatures.join("\n")}`,
+        ).toEqual({ count: LEGACY_SIGNATURE_COUNT, digest: LEGACY_SIGNATURE_SHA256 })
+    })
+
+    it("keeps generated tools on explicit payload, workbench, and generated-output intents", () => {
+        const scaffold = fs.readFileSync(path.join(ROOT, "scripts/scaffolding/create-tool.js"), "utf8")
+        expect(scaffold).toContain('intent="payload"')
+        expect(scaffold).toContain('intent="generatedOutput"')
+        expect(scaffold).toContain('data-input-intent="workbench"')
+        expect(scaffold).not.toContain("field-sizing-content")
+    })
+})
diff --git a/tests/guards/legacy-routes.test.ts b/tests/guards/legacy-routes.test.ts
index 783e64d0..0c461e5e 100644
--- a/tests/guards/legacy-routes.test.ts
+++ b/tests/guards/legacy-routes.test.ts
@@ -21,6 +21,11 @@ describe("legacy route redirects", () => {
             status: 301,
             reason: "merged",
         })
+        expect(getLegacyRouteBySourceSlug("csv-to-json")).toMatchObject({
+            targetSlug: "csv-json-converter",
+            status: 301,
+            reason: "renamed",
+        })
     })
 
     it("keeps generated aliases and redirects aligned with the legacy route manifest", () => {
@@ -32,12 +37,25 @@ describe("legacy route redirects", () => {
         )
 
         for (const route of redirectRoutes) {
+            expect(redirects).toContain(`/${route.sourceSlug} /en/${route.targetSlug} ${route.status}`)
             for (const locale of LOCALES) {
                 expect(redirects).toContain(`/${locale}/${route.sourceSlug} /${locale}/${route.targetSlug} ${route.status}`)
             }
         }
     })
 
+    it("redirects every locale-free canonical tool path to the default locale", () => {
+        const redirects = read("public/_redirects")
+
+        for (const tool of TOOL_REGISTRY) {
+            expect(redirects).toContain(`/${tool.slug} /en/${tool.slug} 301`)
+        }
+
+        expect(redirects).toContain("/qr-code-generator /en/qr-code-generator 301")
+        expect(redirects).toContain("/json-formatter /en/json-formatter 301")
+        expect(redirects).toContain("/base64-encode-decode /en/base64-encode-decode 301")
+    })
+
     it("keeps every legacy source out of sitemap while preserving valid targets", () => {
         const canonicalSlugs = new Set(TOOL_REGISTRY.map((tool) => tool.slug))
         const sitemapUrls = sitemap().map((entry) => entry.url)
diff --git a/tests/guards/localized-content-consistency.test.ts b/tests/guards/localized-content-consistency.test.ts
index e662f587..5c4060be 100644
--- a/tests/guards/localized-content-consistency.test.ts
+++ b/tests/guards/localized-content-consistency.test.ts
@@ -35,6 +35,14 @@ const GENERATED_JA_PATH = path.join(
     "generated",
     "ja.json",
 )
+const GENERATED_QR_LOCALE_PATHS = [
+    GENERATED_ZH_CN_PATH,
+    GENERATED_ZH_TW_PATH,
+    GENERATED_JA_PATH,
+    path.join(process.cwd(), "src", "core", "seo", "components", "tool-content-template-modules", "generated", "ko.json"),
+    path.join(process.cwd(), "src", "core", "seo", "components", "tool-content-template-modules", "generated", "de.json"),
+    path.join(process.cwd(), "src", "core", "seo", "components", "tool-content-template-modules", "generated", "fr.json"),
+]
 
 describe("localized content consistency guards", () => {
     it("uses locale-agnostic regex email sample text", () => {
@@ -135,6 +143,13 @@ describe("localized content consistency guards", () => {
         expect(colorShadesSerialized).not.toContain("Token 映射")
     })
 
+    it("keeps localized QR guidance aligned with browser-local image decoding", () => {
+        for (const filePath of GENERATED_QR_LOCALE_PATHS) {
+            const templates = JSON.parse(fs.readFileSync(filePath, "utf8")) as Record<string, unknown>
+            expect(JSON.stringify(templates["qr-code-generator"])).toContain("WebP")
+        }
+    })
+
     it("keeps confirmed zh-CN production fixes pinned to corrected terminology and examples", () => {
         const zhCnGenerated = JSON.parse(
             fs.readFileSync(GENERATED_ZH_CN_PATH, "utf8"),
diff --git a/tests/guards/navbar-performance-guard.test.ts b/tests/guards/navbar-performance-guard.test.ts
index 82fc960d..a44ac641 100644
--- a/tests/guards/navbar-performance-guard.test.ts
+++ b/tests/guards/navbar-performance-guard.test.ts
@@ -9,7 +9,8 @@ describe("navbar performance guard", () => {
         const deferredSource = fs.readFileSync(path.join(process.cwd(), "src/components/layout/deferred-navbar-controls.tsx"), "utf8")
 
         expect(navbarSource).toContain('import { DeferredNavbarControls } from "./deferred-navbar-controls"')
-        expect(navbarSource).toContain("<DeferredNavbarControls />")
+        expect(navbarSource).toContain("<DeferredNavbarControls languageLabel={LOCALE_NAMES[lang]} />")
+        expect(navbarSource).toContain("data-navbar-controls-footprint")
         expect(navbarSource).not.toContain('"use client"')
         expect(navbarSource).not.toContain('import { LanguageSwitcher } from "./language-switcher"')
         expect(navbarSource).not.toContain('import { ThemeToggle } from "./theme-toggle"')
@@ -25,6 +26,12 @@ describe("navbar performance guard", () => {
         expect(deferredSource).toContain('import("./language-switcher")')
         expect(deferredSource).toContain('import("./theme-toggle")')
         expect(deferredSource).toContain('useDeferredMount({ delayMs: 1200, activateOnInteraction: true })')
+        expect(deferredSource).toContain("data-navbar-language-footprint")
+        expect(deferredSource).toContain("data-navbar-theme-footprint")
+        expect(deferredSource).toContain("onReady={handleLanguageReady}")
+        expect(deferredSource).toContain("onReady={handleThemeReady}")
+        expect(deferredSource).toContain('Sun className="h-4 w-4 opacity-70 dark:hidden"')
+        expect(deferredSource).toContain('Moon className="hidden h-4 w-4 opacity-70 dark:block"')
     })
 
     it("keeps the mobile navigation drawer behind a deferred wrapper", () => {
diff --git a/tests/guards/playwright-smoke-matrix-guard.test.ts b/tests/guards/playwright-smoke-matrix-guard.test.ts
index 7a1d5a80..9e201541 100644
--- a/tests/guards/playwright-smoke-matrix-guard.test.ts
+++ b/tests/guards/playwright-smoke-matrix-guard.test.ts
@@ -10,15 +10,38 @@ describe("playwright smoke matrix guard", () => {
         expect(SMOKE_SOURCE).toContain('"/en/pipeline-builder"')
         expect(SMOKE_SOURCE).toContain('"/en/csv-json-converter"')
         expect(SMOKE_SOURCE).toContain("assertBase64PipelineSafeNavigationJourney")
+        expect(SMOKE_SOURCE).toContain("assertQrDownloadJourney")
+        expect(SMOKE_SOURCE).toContain('page.waitForEvent("download")')
+        expect(SMOKE_SOURCE).toContain('"qr-code.png"')
+        expect(SMOKE_SOURCE).toContain('"qr-code.svg"')
+        expect(SMOKE_SOURCE).toContain('getByRole("tab", { name: "Decode image"')
+        expect(SMOKE_SOURCE).toContain("qr-decoded-output")
+        expect(SMOKE_SOURCE).toContain('name: "blank.png"')
         expect(SMOKE_SOURCE).toContain("assertPipelineRecipeJourney")
         expect(SMOKE_SOURCE).toContain("assertMonacoFallbackJourney")
         expect(SMOKE_SOURCE).toContain("assertMobileCommandPaletteJourney")
         expect(SMOKE_SOURCE).toContain("assertMobileToolPageJourneys")
         expect(SMOKE_SOURCE).toContain("assertMobileReviewMatrix")
         expect(SMOKE_SOURCE).toContain("assertAxeSeriousCriticalMatrix")
+        expect(SMOKE_SOURCE).toContain("assertInputIntentSizingMatrix")
         expect(SMOKE_SOURCE).toContain("assertBasicAccessibility")
     })
 
+    it("keeps real mobile and desktop input-intent sizing measurements", () => {
+        expect(SMOKE_SOURCE).toContain("INPUT_INTENT_AUDIT_ROUTES")
+        expect(SMOKE_SOURCE).toContain("INPUT_INTENT_AUDIT_VIEWPORTS")
+        expect(SMOKE_SOURCE).toContain('if (arg === "--input-intents-only")')
+        expect(SMOKE_SOURCE).toContain("runInputIntentSmoke")
+        expect(SMOKE_SOURCE).toContain('{ width: 390, height: 844, mobile: true }')
+        expect(SMOKE_SOURCE).toContain('{ width: 1280, height: 900, mobile: false }')
+        expect(SMOKE_SOURCE).toContain('route: "/en/qr-code-generator"')
+        expect(SMOKE_SOURCE).toContain('route: "/en/csv-json-converter"')
+        expect(SMOKE_SOURCE).toContain('document.querySelectorAll("[data-input-intent]")')
+        expect(SMOKE_SOURCE).toContain("getBoundingClientRect")
+        expect(SMOKE_SOURCE).toContain('page.screenshot({ animations: "disabled", fullPage: false })')
+        expect(SMOKE_SOURCE).toContain("assertNoHorizontalOverflow(page, routeLabel)")
+    })
+
     it("keeps mobile tool-page regression coverage for core workflows", () => {
         expect(SMOKE_SOURCE).toContain("MOBILE_TOOL_VIEWPORTS")
         expect(SMOKE_SOURCE).toContain('{ width: 390, height: 844 }')
@@ -54,4 +77,26 @@ describe("playwright smoke matrix guard", () => {
         expect(SMOKE_SOURCE).toContain("Clear cached app files")
         expect(SMOKE_SOURCE).toContain('headers: { accept: "text/html" }')
     })
+
+    it("keeps throttled first-load CLS, theme, locale, and hydration screenshot coverage", () => {
+        expect(SMOKE_SOURCE).toContain("FIRST_LOAD_CLS_BUDGET = 0.1")
+        expect(SMOKE_SOURCE).toContain('id: "mobile-390x844"')
+        expect(SMOKE_SOURCE).toContain('id: "desktop-1280x800"')
+        expect(SMOKE_SOURCE).toContain('route: "/en/qr-code-generator"')
+        expect(SMOKE_SOURCE).toContain('route: "/en/json-formatter"')
+        expect(SMOKE_SOURCE).toContain('route: "/en/all-tools"')
+        expect(SMOKE_SOURCE).toContain('route: "/zh-CN/qr-code-generator"')
+        expect(SMOKE_SOURCE).toContain('preferredLocale: "zh-CN"')
+        expect(SMOKE_SOURCE).toContain('observer.observe({ type: "layout-shift", buffered: true })')
+        expect(SMOKE_SOURCE).toContain('cdp.send("Network.emulateNetworkConditions"')
+        expect(SMOKE_SOURCE).toContain('cdp.send("Emulation.setCPUThrottlingRate"')
+        expect(SMOKE_SOURCE).toContain("capturePreHydrationState")
+        expect(SMOKE_SOURCE).toContain("captureHydratedState")
+        expect(SMOKE_SOURCE).toContain("captureWarmReloadState")
+        expect(SMOKE_SOURCE).toContain("warmReload: true")
+        expect(SMOKE_SOURCE).toContain('page.reload({ waitUntil: "domcontentloaded"')
+        expect(SMOKE_SOURCE).toContain('page.screenshot({ animations: "disabled", fullPage: false })')
+        expect(SMOKE_SOURCE).toContain('"byteflow:tools:favorites"')
+        expect(SMOKE_SOURCE).toContain("assertFirstLoadStabilityMatrix")
+    })
 })
diff --git a/tests/guards/qr-code-generator-performance-guard.test.ts b/tests/guards/qr-code-generator-performance-guard.test.ts
index 8cc54358..54d34d8d 100644
--- a/tests/guards/qr-code-generator-performance-guard.test.ts
+++ b/tests/guards/qr-code-generator-performance-guard.test.ts
@@ -3,7 +3,7 @@ import path from "node:path"
 import { describe, expect, it } from "vitest"
 
 describe("qr code generator performance guard", () => {
-    it("keeps qrcode, button, and toast dependencies lazy after feature-local splitting", () => {
+    it("keeps QR generation, decoding, button, and toast dependencies lazy after feature-local splitting", () => {
         const pageSource = fs.readFileSync(
             path.join(process.cwd(), "src/features/tools/qr-code-generator/page.tsx"),
             "utf8",
@@ -12,12 +12,18 @@ describe("qr code generator performance guard", () => {
             path.join(process.cwd(), "src/features/tools/qr-code-generator/browser-actions.ts"),
             "utf8",
         )
+        const panelsSource = fs.readFileSync(
+            path.join(process.cwd(), "src/features/tools/qr-code-generator/panels.tsx"),
+            "utf8",
+        )
 
         expect(pageSource).not.toContain('from "qrcode"')
+        expect(pageSource).not.toContain('from "jsqr"')
         expect(pageSource).not.toContain('from "sonner"')
         expect(pageSource).not.toContain('from "@/components/ui/button"')
         expect(browserActionsSource).toContain('import("qrcode")')
+        expect(browserActionsSource).toContain('import("jsqr")')
         expect(browserActionsSource).toContain('import("sonner")')
-        expect(pageSource).toContain("function InlineButton(")
+        expect(panelsSource).toContain("function InlineButton(")
     })
 })
diff --git a/tests/guards/regex-worker-guard.test.ts b/tests/guards/regex-worker-guard.test.ts
index ce448050..78982881 100644
--- a/tests/guards/regex-worker-guard.test.ts
+++ b/tests/guards/regex-worker-guard.test.ts
@@ -10,6 +10,7 @@ describe("regex worker guard", () => {
         const page = read("src/features/tools/regex-tester/page.tsx")
         const task = read("src/features/tools/regex-tester/regex-test-task.ts")
         const worker = read("src/features/tools/regex-tester/regex-test-worker.ts")
+        const pipelineAdapters = read("src/features/pipeline/adapter-registry.ts")
 
         expect(page).toContain("evaluationAbortControllerRef")
         expect(page).toContain("runRegexTestTask")
@@ -17,6 +18,10 @@ describe("regex worker guard", () => {
         expect(task).toContain("new Worker(new URL(\"./regex-test-worker.ts\", import.meta.url)")
         expect(task).toContain("timeoutMs ?? 1_000")
         expect(task).toContain("WORKER_TIMEOUT")
+        expect(task).toContain("safe_evaluation_unavailable")
+        expect(task).not.toContain("testRegexPattern")
         expect(worker).toContain("testRegexPattern(pattern, flags, testString, maxMatches)")
+        expect(pipelineAdapters).toContain("runRegexTestTask(pattern, flags, input")
+        expect(pipelineAdapters).not.toContain("testRegexPattern")
     })
 })
diff --git a/tests/guards/root-layout-manifest-guard.test.ts b/tests/guards/root-layout-manifest-guard.test.ts
index ec133289..4b3d44de 100644
--- a/tests/guards/root-layout-manifest-guard.test.ts
+++ b/tests/guards/root-layout-manifest-guard.test.ts
@@ -1,6 +1,7 @@
 import fs from "node:fs"
 import path from "node:path"
 import { describe, expect, it } from "vitest"
+import { buildThemeManifestBootstrapScript, readRuntimeScriptConfig } from "../../scripts/generators/generate-runtime-scripts.js"
 
 describe("root layout localized manifest guard", () => {
     it("has a static manifest fallback and updates it during head parsing", () => {
@@ -8,7 +9,7 @@ describe("root layout localized manifest guard", () => {
         const runtimeSource = fs.readFileSync(path.join(process.cwd(), "public/runtime/theme-manifest-bootstrap.js"), "utf8")
 
         expect(layoutSource).toContain('<link rel="manifest" id="app-manifest" href="/manifest.json" />')
-        expect(layoutSource).toContain('<Script src="/runtime/theme-manifest-bootstrap.js" strategy="beforeInteractive" />')
+        expect(layoutSource).toContain('<script src="/runtime/theme-manifest-bootstrap.js" />')
         expect(runtimeSource).toContain('var manifestLink = document.getElementById("app-manifest");')
         expect(runtimeSource).toContain("if (!manifestLink) {")
         expect(runtimeSource).toContain('manifestLink = document.createElement("link");')
@@ -17,4 +18,33 @@ describe("root layout localized manifest guard", () => {
         expect(runtimeSource).toContain("manifestLink.href = manifestHref;")
         expect(runtimeSource).toContain("currentScript.parentNode.insertBefore(manifestLink, currentScript.nextSibling);")
     })
+
+    it("falls back to the theme cookie when storage access is blocked", () => {
+        const localStorageDescriptor = Object.getOwnPropertyDescriptor(window, "localStorage")
+        document.head.innerHTML = '<link rel="manifest" id="app-manifest" href="/manifest.json"><meta name="theme-color" content="#0a0a1a">'
+        document.documentElement.className = "dark"
+        document.documentElement.style.colorScheme = "dark"
+        document.cookie = "theme=light;path=/"
+        Object.defineProperty(window, "localStorage", {
+            configurable: true,
+            get() {
+                throw new DOMException("Storage blocked", "SecurityError")
+            },
+        })
+
+        try {
+            Function(buildThemeManifestBootstrapScript(readRuntimeScriptConfig()))()
+            expect(document.documentElement).toHaveClass("light")
+            expect(document.documentElement.style.colorScheme).toBe("light")
+            expect(document.querySelector('meta[name="theme-color"]')).toHaveAttribute("content", "#f6f8fa")
+            expect(document.getElementById("app-manifest")).toHaveAttribute("href", "/manifest.json")
+        } finally {
+            if (localStorageDescriptor) {
+                Object.defineProperty(window, "localStorage", localStorageDescriptor)
+            } else {
+                delete (window as unknown as Record<string, unknown>).localStorage
+            }
+            document.cookie = "theme=;path=/;max-age=0"
+        }
+    })
 })
diff --git a/tests/guards/route-width-contract.test.tsx b/tests/guards/route-width-contract.test.tsx
new file mode 100644
index 00000000..c4f5eced
--- /dev/null
+++ b/tests/guards/route-width-contract.test.tsx
@@ -0,0 +1,115 @@
+import fs from "node:fs"
+import path from "node:path"
+import { render } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import {
+    CatalogPageContainer,
+    StaticPageContainer,
+    ToolPageContainer,
+    WideToolPageContainer,
+} from "@/components/layout/page-container"
+import {
+    REPRESENTATIVE_ROUTE_CONTAINER_INTENTS,
+    getRouteContainerIntent,
+} from "@/components/layout/route-container-contract"
+
+type WidthInventory = {
+    summary: {
+        toolSurfaces: number
+        standardTools: number
+        wideTools: number
+    }
+    toolSurfaces: Array<{
+        slug: string
+        intent: "tool" | "wide-tool"
+        roots: string[]
+    }>
+    centeredMaxWidthExceptions: Array<{
+        file: string
+        reason: string
+        maxWidthTokens: string[]
+    }>
+}
+
+function read(relativePath: string) {
+    return fs.readFileSync(path.join(process.cwd(), relativePath), "utf8")
+}
+
+const INVENTORY = JSON.parse(
+    fs.readFileSync(path.join(process.cwd(), "src/generated/route-width-inventory.json"), "utf8"),
+) as WidthInventory
+
+describe("route width contracts", () => {
+    it("declares representative standard, wide, static, and catalog route intents", () => {
+        expect(REPRESENTATIVE_ROUTE_CONTAINER_INTENTS).toEqual(expect.objectContaining({
+            "all-tools": "catalog",
+            "install-app": "static",
+            "json-formatter": "wide-tool",
+            "pipeline-builder": "wide-tool",
+            "qr-code-generator": "tool",
+            support: "static",
+        }))
+        expect(getRouteContainerIntent({ routeType: "hub", slug: "data-code-formats" })).toBe("catalog")
+        expect(getRouteContainerIntent({ routeType: "content", slug: "about" })).toBe("static")
+    })
+
+    it("emits stable data contracts for page boundary assertions", () => {
+        const { container } = render(
+            <>
+                <ToolPageContainer>tool</ToolPageContainer>
+                <WideToolPageContainer>wide</WideToolPageContainer>
+                <StaticPageContainer>static</StaticPageContainer>
+                <CatalogPageContainer>catalog</CatalogPageContainer>
+            </>,
+        )
+
+        expect([...container.querySelectorAll("[data-page-container]")].map((node) => (
+            [node.getAttribute("data-page-container"), node.getAttribute("data-route-container-intent")]
+        ))).toEqual([
+            ["tool", "tool"],
+            ["wide-tool", "wide-tool"],
+            ["static", "static"],
+            ["catalog", "catalog"],
+        ])
+    })
+
+    it("keeps every generated tool surface on its declared primitive", () => {
+        expect(INVENTORY.summary.toolSurfaces).toBe(INVENTORY.toolSurfaces.length)
+        expect(INVENTORY.summary.standardTools + INVENTORY.summary.wideTools).toBe(INVENTORY.toolSurfaces.length)
+        expect(INVENTORY.toolSurfaces.every((surface) => surface.roots.length === 1)).toBe(true)
+        for (const surface of INVENTORY.toolSurfaces) {
+            expect(surface.roots).toEqual([
+                surface.intent === "wide-tool" ? "WideToolPageContainer" : "ToolPageContainer",
+            ])
+        }
+    })
+
+    it("keeps centered max-width exceptions explicit and centrally allowlisted", () => {
+        expect(INVENTORY.centeredMaxWidthExceptions.length).toBeGreaterThan(0)
+        expect(INVENTORY.centeredMaxWidthExceptions.every((entry) => (
+            entry.reason.length > 0 && entry.maxWidthTokens.length > 0
+        ))).toBe(true)
+
+        const generator = read("scripts/generators/generate-route-width-inventory.js")
+        expect(generator).toContain("CENTERED_MAX_WIDTH_ALLOWLIST")
+        expect(generator).toContain("centered ${token} wrapper is not explicitly allowlisted")
+        expect(generator).toContain("must import ${expectedElement} from @/components/layout/page-container without aliasing")
+    })
+
+    it("does not nest route viewports or page containers in shared route surfaces", () => {
+        for (const routeSurface of ["src/app/[lang]/error.tsx", "src/app/[lang]/loading.tsx"]) {
+            expect(read(routeSurface)).not.toContain("RouteViewportContainer")
+        }
+        expect(read("src/app/[lang]/error.tsx")).not.toContain("StaticPageContainer")
+        expect(read("src/features/tool-templates/single-hash-tool-page.tsx")).not.toContain("ToolPageContainer")
+        expect(read("src/features/tool-templates/html-css-beautifier-tool.tsx")).not.toContain("WideToolPageContainer")
+    })
+
+    it("requires representative route chrome and related tools to align in browser checks", () => {
+        const matrix = read("scripts/e2e/run-route-width-matrix.js")
+        expect(matrix).toContain('requiredChromeParts: ["intent", "tool-meta", "install"]')
+        expect(matrix).toContain("requireRelatedTools: true")
+        expect(matrix).toContain("is missing required ${part} route chrome")
+        expect(matrix).toContain("assertAligned(relatedBox, shellBox")
+    })
+})
diff --git a/tests/guards/tool-content-template-surface.test.tsx b/tests/guards/tool-content-template-surface.test.tsx
index 3d7b16b5..23343746 100644
--- a/tests/guards/tool-content-template-surface.test.tsx
+++ b/tests/guards/tool-content-template-surface.test.tsx
@@ -1,67 +1,21 @@
-import * as React from "react"
-import { beforeEach, describe, expect, it, vi } from "vitest"
-import { render, waitFor } from "@testing-library/react"
+import { render } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
 import { ToolContentTemplateSurface } from "@/core/seo/components/tool-content-template-surface"
 
-class ResizeObserverMock {
-    private readonly callback: ResizeObserverCallback
-
-    constructor(callback: ResizeObserverCallback) {
-        this.callback = callback
-    }
-
-    observe(target: Element) {
-        const width = Number.parseFloat((target as HTMLElement).style.width || "") || 0
-        this.callback(
-            [
-                {
-                    target,
-                    contentRect: {
-                        x: 0,
-                        y: 0,
-                        width,
-                        height: 0,
-                        top: 0,
-                        right: width,
-                        bottom: 0,
-                        left: 0,
-                        toJSON: () => ({}),
-                    } as DOMRectReadOnly,
-                } as ResizeObserverEntry,
-            ],
-            this as unknown as ResizeObserver,
-        )
-    }
-
-    unobserve() {}
-
-    disconnect() {}
-}
-
-describe("tool content template surface width sync", () => {
-    beforeEach(() => {
-        vi.stubGlobal("ResizeObserver", ResizeObserverMock)
-    })
-
-    it("syncs template width to the tool container derived from the page h1", async () => {
+describe("tool content template surface width contract", () => {
+    it("inherits the route shell instead of measuring a preceding tool container", () => {
         render(
-            <main>
-                <div className="mx-auto w-full max-w-5xl" style={{ width: "1024px" }}>
-                    <h1>HTTP Request Builder</h1>
-                </div>
-                <div data-related-tools-source="inline">Related tools block</div>
-                <ToolContentTemplateSurface source="server">
-                    <div>Template content</div>
-                </ToolContentTemplateSurface>
-            </main>,
+            <ToolContentTemplateSurface source="server">
+                <div>Template content</div>
+            </ToolContentTemplateSurface>,
         )
 
         const section = document.querySelector<HTMLElement>('[data-tool-content-template="full"]')
         expect(section).not.toBeNull()
-
-        await waitFor(() => {
-            expect(section?.getAttribute("data-tool-content-template-width-sync")).toBe("synced")
-            expect(section?.style.maxWidth).toBe("1024px")
-        })
+        expect(section).toHaveAttribute("data-tool-content-template-width-sync", "contract")
+        expect(section).toHaveClass("w-full")
+        expect(section).not.toHaveClass("mx-auto")
+        expect(section?.className).not.toContain("max-w-")
+        expect(section?.style.maxWidth).toBe("")
     })
 })
diff --git a/tests/guards/tool-input-behavior-policy.test.ts b/tests/guards/tool-input-behavior-policy.test.ts
new file mode 100644
index 00000000..09c3261f
--- /dev/null
+++ b/tests/guards/tool-input-behavior-policy.test.ts
@@ -0,0 +1,54 @@
+import fs from "node:fs"
+import path from "node:path"
+import { describe, expect, it } from "vitest"
+import { TOOL_MANIFESTS } from "@/core/registry"
+import type { ToolMeta } from "@/core/registry/types"
+
+const TOOLS_ROOT = path.join(process.cwd(), "src/features/tools")
+const SAMPLE_STATE_INITIALIZER = /(?:React\.)?useState(?:<[^>]+>)?\(\s*((?:SAMPLE|[A-Z0-9_]*SAMPLE|DEFAULT_[A-Z0-9_]*(?:INPUT|TEXT|VALUE))[\w.]*)\s*\)/g
+
+function sampleSeededPages() {
+    return fs.readdirSync(TOOLS_ROOT, { withFileTypes: true }).flatMap((entry) => {
+        if (!entry.isDirectory()) return []
+        const pagePath = path.join(TOOLS_ROOT, entry.name, "page.tsx")
+        if (!fs.existsSync(pagePath)) return []
+        const source = fs.readFileSync(pagePath, "utf8")
+        const initializers = Array.from(source.matchAll(SAMPLE_STATE_INITIALIZER), (match) => match[1])
+        return initializers.length > 0 ? [{ slug: entry.name, initializers }] : []
+    })
+}
+
+function initializerIsEmpty(slug: string, initializer: string) {
+    const escaped = initializer.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    const emptyDeclaration = new RegExp(`(?:export\\s+)?const\\s+${escaped}\\s*=\\s*(["'])\\1`)
+    const toolDir = path.join(TOOLS_ROOT, slug)
+    return fs.readdirSync(toolDir, { withFileTypes: true }).some((entry) => {
+        if (!entry.isFile() || !/\.(ts|tsx)$/.test(entry.name)) return false
+        return emptyDeclaration.test(fs.readFileSync(path.join(toolDir, entry.name), "utf8"))
+    })
+}
+
+describe("tool input ownership policy", () => {
+    it("requires every sample-seeded editable page to declare explicit-sample behavior", () => {
+        const manifests = new Map((TOOL_MANIFESTS as readonly ToolMeta[]).map((tool) => [tool.slug, tool]))
+        const offenders = sampleSeededPages().flatMap(({ slug, initializers }) => {
+            const behavior = manifests.get(slug)?.inputBehavior
+            return behavior === "explicit-sample" || behavior === "generator-default"
+                ? []
+                : behavior === "empty-first" && initializers.every((initializer) => initializerIsEmpty(slug, initializer))
+                    ? []
+                    : [`${slug}: ${initializers.join(", ")} (${behavior || "unclassified"})`]
+        })
+
+        expect(offenders).toEqual([])
+    })
+
+    it("keeps representative transformation tools empty-first and tester samples explicit", () => {
+        const manifests = new Map((TOOL_MANIFESTS as readonly ToolMeta[]).map((tool) => [tool.key, tool]))
+
+        for (const key of ["qr_code_generator", "base64_encode_decode", "json_formatter", "csv_json_converter", "jwt_decoder"]) {
+            expect(manifests.get(key)?.inputBehavior, key).toBe("empty-first")
+        }
+        expect(manifests.get("regex_tester")?.inputBehavior).toBe("explicit-sample")
+    })
+})
diff --git a/tests/helpers/regex-test-worker-mock.ts b/tests/helpers/regex-test-worker-mock.ts
new file mode 100644
index 00000000..90a33fae
--- /dev/null
+++ b/tests/helpers/regex-test-worker-mock.ts
@@ -0,0 +1,31 @@
+import { testRegexPattern } from "@/features/tools/regex-tester/utils"
+
+type RegexWorkerInput = {
+    pattern: string
+    flags: string
+    testString: string
+    maxMatches?: number
+}
+
+export class RegexTestWorkerMock {
+    onmessage: ((event: MessageEvent<unknown>) => void) | null = null
+    onerror: ((event: ErrorEvent) => void) | null = null
+    onmessageerror: ((event: MessageEvent<unknown>) => void) | null = null
+    private terminated = false
+
+    postMessage(input: RegexWorkerInput) {
+        queueMicrotask(() => {
+            if (this.terminated) return
+            this.onmessage?.({
+                data: {
+                    ok: true,
+                    value: testRegexPattern(input.pattern, input.flags, input.testString, input.maxMatches),
+                },
+            } as MessageEvent)
+        })
+    }
+
+    terminate() {
+        this.terminated = true
+    }
+}
diff --git a/tests/unit/csv-export.test.ts b/tests/unit/csv-export.test.ts
new file mode 100644
index 00000000..6f54169c
--- /dev/null
+++ b/tests/unit/csv-export.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest"
+import {
+    neutralizeSpreadsheetFormula,
+    serializeSpreadsheetSafeCsv,
+    serializeSpreadsheetSafeCsvCell,
+} from "@/core/files/csv-export"
+
+describe("spreadsheet-safe CSV export", () => {
+    it("neutralizes formula triggers after leading whitespace and controls", () => {
+        const dangerous = [
+            "=1+1",
+            "+SUM(1,1)",
+            "-1+2",
+            "@SUM(1,1)",
+            "\t=1+1",
+            "\r=1+1",
+            " \tplain text",
+            "\n\u200b=1+1",
+            "\u00a0\u0001@SUM(1,1)",
+        ]
+
+        for (const value of dangerous) {
+            expect(neutralizeSpreadsheetFormula(value)).toBe(`'${value}`)
+        }
+    })
+
+    it("does not double-neutralize safe content", () => {
+        expect(neutralizeSpreadsheetFormula("'=1+1")).toBe("'=1+1")
+        expect(neutralizeSpreadsheetFormula(" '=1+1")).toBe(" '=1+1")
+        expect(neutralizeSpreadsheetFormula("total=42")).toBe("total=42")
+    })
+
+    it("keeps typed negative numbers numeric while protecting negative strings", () => {
+        expect(serializeSpreadsheetSafeCsvCell(-42)).toBe("-42")
+        expect(serializeSpreadsheetSafeCsvCell("-42")).toBe("'-42")
+        expect(serializeSpreadsheetSafeCsv([
+            ["=header", "negative_number", "negative_text"],
+            ["=1+1", -42, "-42"],
+        ])).toBe("'=header,negative_number,negative_text\n'=1+1,-42,'-42")
+    })
+
+    it("applies structural quoting after formula neutralization", () => {
+        expect(serializeSpreadsheetSafeCsvCell("+SUM(1,1)"))
+            .toBe("\"'+SUM(1,1)\"")
+        expect(serializeSpreadsheetSafeCsvCell('line "one"\nline two'))
+            .toBe('"line ""one""\nline two"')
+        expect(serializeSpreadsheetSafeCsvCell("a;b", ";")).toBe('"a;b"')
+    })
+
+    it("rejects an empty delimiter", () => {
+        expect(() => serializeSpreadsheetSafeCsvCell("value", "")).toThrow("CSV delimiter must not be empty")
+    })
+})
diff --git a/tests/unit/csv-json-task-logic.test.ts b/tests/unit/csv-json-task-logic.test.ts
index 281dddce..0d9249bb 100644
--- a/tests/unit/csv-json-task-logic.test.ts
+++ b/tests/unit/csv-json-task-logic.test.ts
@@ -30,6 +30,43 @@ describe("csv json task logic", () => {
         ])
     })
 
+    it("detects delimiters across quoted logical records without counting quoted delimiters", () => {
+        const result = runCsvJsonTaskSync({
+            input: '"name,alias";age\n"John,Doe";42\n"Jane,Roe";37',
+            direction: "csv-to-json",
+            delimiter: "auto",
+            hasHeader: true,
+            typeInference: true,
+        })
+
+        expect(result.detectedDelimiter).toBe(";")
+        expect(JSON.parse(result.output)).toEqual([
+            { "name,alias": "John,Doe", age: 42 },
+            { "name,alias": "Jane,Roe", age: 37 },
+        ])
+        expect(result.diagnostics).toContainEqual(expect.objectContaining({
+            code: "delimiter_detected",
+            severity: "info",
+            delimiter: ";",
+        }))
+    })
+
+    it("prefers the delimiter that stays structurally consistent across multiple records", () => {
+        const result = runCsvJsonTaskSync({
+            input: "name,note;age\nAlice,Al;42\nBob;37",
+            direction: "csv-to-json",
+            delimiter: "auto",
+            hasHeader: true,
+            typeInference: false,
+        })
+
+        expect(result.detectedDelimiter).toBe(";")
+        expect(JSON.parse(result.output)).toEqual([
+            { "name,note": "Alice,Al", age: "42" },
+            { "name,note": "Bob", age: "37" },
+        ])
+    })
+
     it("preserves CRLF inside quoted fields and escaped quotes", () => {
         const result = runCsvJsonTaskSync({
             input: "name,note\r\n\"Alice\",\"line 1\r\nline 2 with \"\"quotes\"\"\"",
@@ -67,6 +104,137 @@ describe("csv json task logic", () => {
         ])
     })
 
+    it("removes a leading BOM and preserves CRLF records and trailing empty fields", () => {
+        const result = runCsvJsonTaskSync({
+            input: "\ufeffa,b,c\r\n1,2,\r\n3,4,5",
+            direction: "csv-to-json",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: false,
+        })
+
+        expect(JSON.parse(result.output)).toEqual([
+            { a: "1", b: "2", c: "" },
+            { a: "3", b: "4", c: "5" },
+        ])
+        expect(result.diagnostics).toEqual([])
+    })
+
+    it("ignores all-empty CSV records without creating empty JSON rows", () => {
+        const result = runCsvJsonTaskSync({
+            input: "a,b\n1,2\n\n  ,  \n3,4\n",
+            direction: "csv-to-json",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: false,
+        })
+
+        expect(JSON.parse(result.output)).toEqual([
+            { a: "1", b: "2" },
+            { a: "3", b: "4" },
+        ])
+        expect(result.diagnostics).toEqual([])
+    })
+
+    it("disambiguates duplicate and blank headers without overwriting fields", () => {
+        const result = runCsvJsonTaskSync({
+            input: "a,a,,column_3\n1,2,3,4",
+            direction: "csv-to-json",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: true,
+        })
+
+        expect(JSON.parse(result.output)).toEqual([
+            { a: 1, a_2: 2, column_3_2: 3, column_3: 4 },
+        ])
+        expect(result.diagnostics).toEqual(expect.arrayContaining([
+            expect.objectContaining({ code: "duplicate_header", row: 1, column: 2 }),
+            expect.objectContaining({ code: "blank_header", row: 1, column: 3 }),
+        ]))
+    })
+
+    it("preserves prototype-named CSV headers instead of dropping their values", () => {
+        const result = runCsvJsonTaskSync({
+            input: "__proto__,constructor,safe\nattacker,constructor-value,ok",
+            direction: "csv-to-json",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: false,
+        })
+
+        expect(JSON.parse(result.output)).toEqual(JSON.parse('[{"__proto__":"attacker","constructor":"constructor-value","safe":"ok"}]'))
+    })
+
+    it("preserves extra columns and surfaces both extra and missing row widths", () => {
+        const result = runCsvJsonTaskSync({
+            input: "a,b\n1,2,3\n4",
+            direction: "csv-to-json",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: false,
+        })
+
+        expect(JSON.parse(result.output)).toEqual([
+            { a: "1", b: "2", column_3: "3" },
+            { a: "4", b: "", column_3: "" },
+        ])
+        expect(result.diagnostics).toEqual(expect.arrayContaining([
+            expect.objectContaining({ code: "extra_columns", row: 2, column: 3 }),
+            expect.objectContaining({ code: "missing_columns", row: 3, column: 2 }),
+        ]))
+    })
+
+    it("surfaces width mismatches without changing variable-width array rows", () => {
+        const result = runCsvJsonTaskSync({
+            input: "1,2\n3,4,\n5",
+            direction: "csv-to-json",
+            delimiter: ",",
+            hasHeader: false,
+            typeInference: false,
+        })
+
+        expect(JSON.parse(result.output)).toEqual([
+            ["1", "2"],
+            ["3", "4", ""],
+            ["5"],
+        ])
+        expect(result.diagnostics.map((diagnostic) => diagnostic.code)).toEqual([
+            "extra_columns",
+            "missing_columns",
+        ])
+    })
+
+    it("rejects unterminated quoted fields with their opening row and column", () => {
+        expect(() => runCsvJsonTaskSync({
+            input: "name,note\r\nAlice,\"line 1\r\nline 2",
+            direction: "csv-to-json",
+            delimiter: "auto",
+            hasHeader: true,
+            typeInference: false,
+        })).toThrow("Malformed CSV at row 2, column 7: quoted field is not terminated")
+    })
+
+    it("rejects invalid characters after a closing quote with row and column context", () => {
+        expect(() => runCsvJsonTaskSync({
+            input: 'a,b\n"x"oops,1',
+            direction: "csv-to-json",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: false,
+        })).toThrow('Malformed CSV at row 2, column 4: unexpected "o" after a closing quote')
+    })
+
+    it("rejects quotes that begin inside an unquoted field", () => {
+        expect(() => runCsvJsonTaskSync({
+            input: 'a,b\nab"c,1',
+            direction: "csv-to-json",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: false,
+        })).toThrow("Malformed CSV at row 2, column 3: a quote must begin at the start of a field")
+    })
+
     it("converts json arrays to csv through the task boundary", () => {
         const result = runCsvJsonTaskSync({
             input: "[{\"id\":1,\"name\":\"Ada\"}]",
@@ -79,6 +247,22 @@ describe("csv json task logic", () => {
         expect(result.output).toBe("id,name\n1,Ada")
     })
 
+    it("protects string headers and cells without corrupting typed negative numbers", () => {
+        const result = runCsvJsonTaskSync({
+            input: JSON.stringify([{
+                "=formula": "+SUM(1,1)",
+                negative_number: -42,
+                negative_text: "-42",
+            }]),
+            direction: "json-to-csv",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: true,
+        })
+
+        expect(result.output).toBe("'=formula,negative_number,negative_text\n\"'+SUM(1,1)\",-42,'-42")
+    })
+
     it("keeps primitive and array rows on the non-object CSV path", () => {
         const primitiveResult = runCsvJsonTaskSync({
             input: "[null,2,\"x\",false]",
@@ -136,6 +320,16 @@ describe("csv json task logic", () => {
         expect(result.output).toBe('id,tags,events,profile.name,profile.roles\n1,"[""a"",""b""]","[{""type"":""login""}]",Ada,"[""admin""]"')
     })
 
+    it("rejects dotted keys that would collide with nested JSON paths", () => {
+        expect(() => runCsvJsonTaskSync({
+            input: '[{"a.b":"first","a":{"b":"second"}}]',
+            direction: "json-to-csv",
+            delimiter: ",",
+            hasHeader: true,
+            typeInference: true,
+        })).toThrow('both map to CSV column "a.b"')
+    })
+
     it("keeps json-to-csv validation errors stable", () => {
         expect(() => runCsvJsonTaskSync({
             input: "{\"id\":1}",
diff --git a/tests/unit/csv-json-task.test.ts b/tests/unit/csv-json-task.test.ts
index 05c82513..ef613b8d 100644
--- a/tests/unit/csv-json-task.test.ts
+++ b/tests/unit/csv-json-task.test.ts
@@ -16,7 +16,21 @@ class MockCsvJsonWorker {
                 this.onmessage?.({ data: { ok: false, error: "CSV_JSON_WORKER_FAILED" } } as MessageEvent)
                 return
             }
-            this.onmessage?.({ data: { ok: true, value: { output: "from-worker" } } } as MessageEvent)
+            this.onmessage?.({
+                data: {
+                    ok: true,
+                    value: {
+                        output: "from-worker",
+                        diagnostics: [{
+                            code: "delimiter_detected",
+                            severity: "info",
+                            message: "Auto-detected comma (,).",
+                            delimiter: ",",
+                        }],
+                        detectedDelimiter: ",",
+                    },
+                },
+            } as MessageEvent)
         })
     }
 
@@ -42,14 +56,27 @@ describe("runCsvJsonTask", () => {
     it("uses the worker result when workers are available", async () => {
         vi.stubGlobal("Worker", MockCsvJsonWorker)
 
-        await expect(runCsvJsonTask(input)).resolves.toEqual({ output: "from-worker" })
+        await expect(runCsvJsonTask(input)).resolves.toEqual({
+            output: "from-worker",
+            diagnostics: [{
+                code: "delimiter_detected",
+                severity: "info",
+                message: "Auto-detected comma (,).",
+                delimiter: ",",
+            }],
+            detectedDelimiter: ",",
+        })
     })
 
     it("falls back to sync conversion on non-timeout worker failures", async () => {
         MockCsvJsonWorker.mode = "error"
         vi.stubGlobal("Worker", MockCsvJsonWorker)
 
-        await expect(runCsvJsonTask(input)).resolves.toEqual({ output: "[\n  {\n    \"name\": \"Ada\"\n  }\n]" })
+        await expect(runCsvJsonTask(input)).resolves.toEqual({
+            output: "[\n  {\n    \"name\": \"Ada\"\n  }\n]",
+            diagnostics: [],
+            detectedDelimiter: ",",
+        })
     })
 
     it("does not fall back when aborted", async () => {
diff --git a/tests/unit/curl-to-code-codegen.test.ts b/tests/unit/curl-to-code-codegen.test.ts
index 74fb62f0..66612e15 100644
--- a/tests/unit/curl-to-code-codegen.test.ts
+++ b/tests/unit/curl-to-code-codegen.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest"
 import {
     convertCurlToCode,
+    parseCurl,
     toGo,
     toJavaScript,
     toPhp,
@@ -13,18 +14,21 @@ const MALICIOUS_CURL = `curl -X POST 'https://api.example.com/x'; console.log('J
   -d 'x' ; echo BODY_INJECTED ; #''`
 
 describe("curl to code codegen", () => {
-    it("does not emit attacker-controlled URL as JavaScript syntax", () => {
+    it("rejects shell operators before JavaScript code generation", () => {
+        const parsed = parseCurl(MALICIOUS_CURL)
         const code = convertCurlToCode(MALICIOUS_CURL, "javascript", "parse error")
 
-        expect(code).toContain(`fetch(${JSON.stringify("https://api.example.com/x")}, {`)
-        expect(code).not.toContain("fetch('https://api.example.com/x';")
+        expect(parsed.ok).toBe(false)
+        if (!parsed.ok) expect(parsed.diagnostics.at(-1)?.code).toBe("unsupported_operator")
+        expect(code).toBe("parse error")
+        expect(code).not.toContain("JS_INJECTED")
     })
 
-    it("does not emit attacker-controlled body as Python syntax", () => {
+    it("rejects shell operators before Python code generation", () => {
         const code = convertCurlToCode(MALICIOUS_CURL, "python", "parse error")
 
-        expect(code).toContain(`data = ${JSON.stringify("x")}`)
-        expect(code).not.toContain("data = 'x' ; echo BODY_INJECTED")
+        expect(code).toBe("parse error")
+        expect(code).not.toContain("BODY_INJECTED")
     })
 
     it("uses safe string literal encoders across generated languages", () => {
@@ -32,7 +36,9 @@ describe("curl to code codegen", () => {
             method: "POST",
             url: "https://api.example.com/x\"; injected(); //",
             headers: { "X-Test": "v\"; injected(); //" },
+            headerEntries: [{ name: "X-Test", value: "v\"; injected(); //" }],
             data: "body\"#; injected(); //",
+            dataParts: [{ option: "--data-raw" as const, value: "body\"#; injected(); //" }],
             dataType: "raw" as const,
         }
 
@@ -43,4 +49,98 @@ describe("curl to code codegen", () => {
         expect(toRust(parsed)).toContain('client.post(r#"https://api.example.com/x"; injected(); //"#)')
         expect(toRust(parsed)).toContain('body(r##"body"#; injected(); //"##)')
     })
+
+    it("keeps Python imports executable for JSON payloads and reads responses as text", () => {
+        const parsed = parseCurl(`curl https://api.example.com/items -H 'Content-Type: application/json' -d '{"ok":true}'`)
+        expect(parsed.ok).toBe(true)
+        if (!parsed.ok) return
+
+        const code = toPython(parsed.request)
+        expect(code).toContain("import json")
+        expect(code).toContain("import requests")
+        expect(code).toContain("requests.post(")
+        expect(code).toContain("print(response.text)")
+        expect(code).not.toContain("response.json()")
+    })
+
+    it("preserves JSON text exactly in Fetch output", () => {
+        const body = '{\n  "id": 900719925474099312345,\n  "role": "first",\n  "role": "last"\n}\n'
+        const parsed = parseCurl(`curl https://api.example.com/items -H 'Content-Type: application/json' -d '${body}'`)
+        expect(parsed.ok).toBe(true)
+        if (!parsed.ok) return
+
+        const code = toJavaScript(parsed.request)
+        expect(code).toContain(`body: ${JSON.stringify(body)}`)
+        expect(code).not.toContain("JSON.parse(")
+        expect(code).not.toContain("JSON.stringify(")
+    })
+
+    it("preserves cURL's default form Content-Type in every generated language", () => {
+        const body = '{"id":900719925474099312345}'
+        const parsed = parseCurl(`curl https://api.example.com/items -d '${body}'`)
+        expect(parsed.ok).toBe(true)
+        if (!parsed.ok) return
+
+        const javascript = toJavaScript(parsed.request)
+        const python = toPython(parsed.request)
+        const go = toGo(parsed.request)
+        const php = toPhp(parsed.request)
+        const rust = toRust(parsed.request)
+        const outputs = [javascript, python, go, php, rust]
+        for (const code of outputs) {
+            expect(code).toContain("application/x-www-form-urlencoded")
+        }
+        expect(javascript).toContain(`body: ${JSON.stringify(body)}`)
+        expect(python).toContain(`data = ${JSON.stringify(body)}`)
+        expect(python).not.toContain("json.loads(")
+        expect(go).toContain(`strings.NewReader(${JSON.stringify(body)})`)
+        expect(php).toContain(`CURLOPT_POSTFIELDS, '${body}'`)
+        expect(rust).toContain(`.body(r#"${body}"#)`)
+    })
+
+    it("uses generic request APIs for custom Python and Rust methods", () => {
+        const custom = parseCurl("curl -X PROPFIND https://api.example.com/resource")
+        const options = parseCurl("curl -X OPTIONS https://api.example.com/resource")
+        expect(custom.ok).toBe(true)
+        expect(options.ok).toBe(true)
+        if (!custom.ok || !options.ok) return
+
+        expect(toPython(custom.request)).toContain('requests.request("PROPFIND", "https://api.example.com/resource")')
+        expect(toRust(custom.request)).toContain('client.request(reqwest::Method::from_bytes(r"PROPFIND".as_bytes())?,')
+        expect(toRust(options.request)).toContain('client.request(reqwest::Method::from_bytes(r"OPTIONS".as_bytes())?,')
+    })
+
+    it("omits an explicit GET body only from Fetch output", () => {
+        const parsed = parseCurl("curl -X GET https://api.example.com/search -d 'q=test'")
+        expect(parsed.ok).toBe(true)
+        if (!parsed.ok) return
+
+        expect(toJavaScript(parsed.request)).not.toContain('body: "q=test"')
+        expect(toJavaScript(parsed.request)).toContain("configured body was omitted")
+        expect(toPython(parsed.request)).toContain('data = "q=test"')
+        expect(toGo(parsed.request)).toContain('strings.NewReader("q=test")')
+    })
+
+    it.each(["GET", "HEAD", "DELETE"])("preserves an explicit %s method with a body across emitters", (method) => {
+        const parsed = parseCurl(`curl -X ${method} https://api.example.com/items -d 'q=1'`)
+        expect(parsed.ok).toBe(true)
+        if (!parsed.ok) return
+
+        expect(toJavaScript(parsed.request)).toContain(`method: ${JSON.stringify(method)}`)
+        expect(toPython(parsed.request)).toContain(`requests.${method.toLowerCase()}(`)
+        expect(toGo(parsed.request)).toContain(`http.NewRequest(${JSON.stringify(method)},`)
+        expect(toPhp(parsed.request)).toContain(`CURLOPT_CUSTOMREQUEST, '${method}'`)
+        expect(toRust(parsed.request)).toContain(`client.${method.toLowerCase()}(`)
+    })
+
+    it("preserves an explicitly empty request body in non-Fetch emitters", () => {
+        const parsed = parseCurl("curl https://api.example.com/items -d ''")
+        expect(parsed.ok).toBe(true)
+        if (!parsed.ok) return
+
+        expect(toPython(parsed.request)).toContain('data = ""')
+        expect(toGo(parsed.request)).toContain('strings.NewReader("")')
+        expect(toPhp(parsed.request)).toContain("CURLOPT_POSTFIELDS, ''")
+        expect(toRust(parsed.request)).toContain('.body(r"")')
+    })
 })
diff --git a/tests/unit/curl-to-code-parser.test.ts b/tests/unit/curl-to-code-parser.test.ts
new file mode 100644
index 00000000..1ba3d9d0
--- /dev/null
+++ b/tests/unit/curl-to-code-parser.test.ts
@@ -0,0 +1,208 @@
+import { describe, expect, it } from "vitest"
+import {
+    parseCurl,
+    type CurlDiagnosticCode,
+    type CurlParseResult,
+} from "@/features/tools/curl-to-code/logic"
+
+function expectSuccess(command: string): Extract<CurlParseResult, { ok: true }> {
+    const result = parseCurl(command)
+    expect(result.ok, JSON.stringify(result)).toBe(true)
+    if (!result.ok) throw new Error(`Expected parse success: ${JSON.stringify(result.diagnostics)}`)
+    return result
+}
+
+function expectFailure(command: string, code: CurlDiagnosticCode): Extract<CurlParseResult, { ok: false }> {
+    const result = parseCurl(command)
+    expect(result.ok, JSON.stringify(result)).toBe(false)
+    if (result.ok) throw new Error(`Expected parse failure: ${JSON.stringify(result.request)}`)
+    expect(result.diagnostics.at(-1)).toMatchObject({ code, severity: "error" })
+    expect(result.diagnostics.at(-1)?.position).toBeGreaterThan(0)
+    return result
+}
+
+describe("curl to code parser", () => {
+    it("preserves a single-quoted JSON body containing double quotes", () => {
+        const result = expectSuccess(`curl https://api.example.com/users \\
+  -H 'Content-Type: application/json' \\
+  -d '{"name":"Ada","enabled":true}'`)
+
+        expect(result.request).toMatchObject({
+            method: "POST",
+            url: "https://api.example.com/users",
+            headers: { "Content-Type": "application/json" },
+            data: '{"name":"Ada","enabled":true}',
+            dataType: "json",
+        })
+        expect(JSON.parse(result.request.data)).toEqual({ name: "Ada", enabled: true })
+    })
+
+    it("applies shell-style double-quote and backslash escaping without executing expansions", () => {
+        const command = String.raw`curl --request=POST --url="https://api.example.com/a b" --header="X-Path: C:\\temp" --data-raw="{\"message\":\"Ada \\\"Lovelace\\\"\",\"path\":\"C:\\\\tmp\"}"`
+        const result = expectSuccess(command)
+
+        expect(result.request.method).toBe("POST")
+        expect(result.request.url).toBe("https://api.example.com/a b")
+        expect(result.request.headers).toEqual({ "X-Path": "C:\\temp" })
+        expect(JSON.parse(result.request.data)).toEqual({
+            message: 'Ada "Lovelace"',
+            path: "C:\\tmp",
+        })
+    })
+
+    it.each([
+        ['curl https://api.example.com -H "Authorization: Bearer $TOKEN"', "$TOKEN"],
+        ['curl https://api.example.com -H "Authorization: Bearer ${TOKEN}"', "${TOKEN}"],
+    ])("rejects unsupported shell expansion in %j", (command, token) => {
+        const result = expectFailure(command, "unsupported_operator")
+
+        expect(result.diagnostics.at(-1)?.token).toBe(token)
+    })
+
+    it("keeps escaped and single-quoted dollar signs literal", () => {
+        const escaped = expectSuccess(String.raw`curl https://api.example.com -H "X-Token: \$TOKEN"`)
+        const singleQuoted = expectSuccess("curl https://api.example.com -H 'X-Token: $TOKEN'")
+
+        expect(escaped.request.headers).toEqual({ "X-Token": "$TOKEN" })
+        expect(singleQuoted.request.headers).toEqual({ "X-Token": "$TOKEN" })
+    })
+
+    it("recognizes long aliases, equals forms, and unquoted headers", () => {
+        const result = expectSuccess(
+            "curl --request POST --header 'Accept: application/json' -H X-Test:value " +
+            "--url=https://api.example.com/items --data-binary='mode=test'",
+        )
+
+        expect(result.request).toMatchObject({
+            method: "POST",
+            url: "https://api.example.com/items",
+            headers: {
+                Accept: "application/json",
+                "X-Test": "value",
+            },
+            data: "mode=test",
+            dataType: "form",
+        })
+        expect(result.request.headerEntries).toEqual([
+            { name: "Accept", value: "application/json" },
+            { name: "X-Test", value: "value" },
+        ])
+    })
+
+    it("derives body semantics from Content-Type instead of payload shape", () => {
+        const defaultJsonShaped = expectSuccess(`curl https://api.example.com -d '{"id":9007199254740993}'`)
+        const explicitJson = expectSuccess(
+            "curl https://api.example.com -H 'content-type: application/problem+json; charset=utf-8' -d 'plain text'",
+        )
+        const explicitText = expectSuccess(
+            "curl https://api.example.com -H 'Content-Type: text/plain' -d 'mode=test'",
+        )
+
+        expect(defaultJsonShaped.request.dataType).toBe("form")
+        expect(explicitJson.request.dataType).toBe("json")
+        expect(explicitText.request.dataType).toBe("raw")
+    })
+
+    it("combines repeated data flags in order and preserves an explicit GET", () => {
+        const result = expectSuccess(
+            "curl -X GET https://api.example.com/search " +
+            "-d 'a=1' --data 'b=two' --data-raw 'q=hello world'",
+        )
+
+        expect(result.request.method).toBe("GET")
+        expect(result.request.data).toBe("a=1&b=two&q=hello world")
+        expect(result.request.dataParts).toEqual([
+            { option: "-d", value: "a=1" },
+            { option: "--data", value: "b=two" },
+            { option: "--data-raw", value: "q=hello world" },
+        ])
+    })
+
+    it("preserves repeated header order and warns when generated headers use last-wins semantics", () => {
+        const result = expectSuccess(
+            "curl https://api.example.com -H 'X-Test: first' --header 'x-test: second'",
+        )
+
+        expect(result.request.headerEntries).toEqual([
+            { name: "X-Test", value: "first" },
+            { name: "x-test", value: "second" },
+        ])
+        expect(result.request.headers).toEqual({ "x-test": "second" })
+        expect(result.diagnostics).toEqual([
+            expect.objectContaining({
+                code: "duplicate_header",
+                severity: "warning",
+                token: "x-test",
+            }),
+        ])
+    })
+
+    it.each(["\n", "\r\n"])("supports %j line continuations", (newline) => {
+        const command = [
+            "curl https://api.example.com/users \\",
+            "  --header 'X-Test: continued' \\",
+            "  --data-raw 'hello world'",
+        ].join(newline)
+
+        const result = expectSuccess(command)
+        expect(result.request.headers).toEqual({ "X-Test": "continued" })
+        expect(result.request.data).toBe("hello world")
+    })
+
+    it("supports escaped spaces and operators in unquoted arguments", () => {
+        const result = expectSuccess(String.raw`curl https://api.example.com/search?q=one\&page=2 -H X-Name:Ada\ Lovelace`)
+
+        expect(result.request.url).toBe("https://api.example.com/search?q=one&page=2")
+        expect(result.request.headers).toEqual({ "X-Name": "Ada Lovelace" })
+    })
+
+    it("accepts an explicitly empty data argument and infers POST", () => {
+        const result = expectSuccess("curl https://api.example.com -d ''")
+
+        expect(result.request.method).toBe("POST")
+        expect(result.request.dataParts).toEqual([{ option: "-d", value: "" }])
+        expect(result.request.data).toBe("")
+    })
+
+    it.each([
+        ["curl https://api.example.com --compressed", "unsupported_option", "--compressed"],
+        ["curl https://api.example.com --data-urlencode 'q=hello world'", "unsupported_option", "--data-urlencode"],
+        ["curl https://api.example.com; echo injected", "unsupported_operator", ";"],
+        ["curl https://api.example.com && echo injected", "unsupported_operator", "&&"],
+        ["curl https://api.example.com | cat", "unsupported_operator", "|"],
+        ["curl https://api.example.com\necho injected", "unsupported_operator", "newline"],
+        ['curl https://api.example.com -H "X-Test: $(whoami)"', "unsupported_operator", "$("],
+    ] as const)("rejects unsupported syntax in %j", (command, code, token) => {
+        const result = expectFailure(command, code)
+        expect(result.diagnostics.at(-1)?.token).toBe(token)
+    })
+
+    it.each([
+        ["curl https://api.example.com -d 'unterminated", "unterminated_quote"],
+        ['curl https://api.example.com -H "unterminated', "unterminated_quote"],
+        ["curl https://api.example.com \\", "dangling_escape"],
+    ] as const)("rejects malformed quoting in %j", (command, code) => {
+        expectFailure(command, code)
+    })
+
+    it.each([
+        ["wget https://api.example.com", "expected_curl"],
+        ["curl", "missing_url"],
+        ["curl api.example.com", "invalid_url"],
+        ["curl https://api.example.com https://other.example.com", "multiple_urls"],
+        ["curl https://api.example.com trailing", "unexpected_argument"],
+        ["curl https://api.example.com --request", "missing_option_value"],
+        ["curl https://api.example.com -H invalid", "invalid_header"],
+        ["curl --request 'BAD METHOD' https://api.example.com", "invalid_method"],
+    ] as const)("returns a structured %s diagnostic", (command, code) => {
+        expectFailure(command, code)
+    })
+
+    it("rejects data sources that would read a file or stdin", () => {
+        expectFailure("curl https://api.example.com -d @payload.json", "unsupported_data_file")
+        expectFailure("curl https://api.example.com --data-binary @-", "unsupported_data_file")
+
+        const raw = expectSuccess("curl https://api.example.com --data-raw @literal")
+        expect(raw.request.data).toBe("@literal")
+    })
+})
diff --git a/tests/unit/file-input-policy.test.ts b/tests/unit/file-input-policy.test.ts
index 1b69d474..304cf1de 100644
--- a/tests/unit/file-input-policy.test.ts
+++ b/tests/unit/file-input-policy.test.ts
@@ -1,14 +1,18 @@
 import { describe, expect, it } from "vitest"
 import {
     FILE_INPUT_POLICIES,
+    detectRasterImageMime,
     filterFilesByPolicy,
     formatFilePolicyLimit,
     formatPixelLimit,
     readArrayBufferWithPolicy,
     readTextFileWithPolicy,
     validateFileAgainstPolicy,
+    validateFileContentAgainstPolicy,
 } from "@/core/files/file-input-policy"
 
+const PNG_SIGNATURE = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
+
 describe("file-input-policy", () => {
     it("declares limits for each supported file input class", () => {
         expect(FILE_INPUT_POLICIES.text.maxBytes).toBe(2 * 1024 * 1024)
@@ -17,6 +21,11 @@ describe("file-input-policy", () => {
         expect(FILE_INPUT_POLICIES["hash-file"].maxBytes).toBe(50 * 1024 * 1024)
         expect(FILE_INPUT_POLICIES["image-standard"].maxPixels).toBe(24_000_000)
         expect(FILE_INPUT_POLICIES["image-compact"].maxPixels).toBe(16_000_000)
+        expect(FILE_INPUT_POLICIES["qr-decode-image"]).toMatchObject({
+            maxBytes: 8 * 1024 * 1024,
+            maxPixels: 12_000_000,
+        })
+        expect(FILE_INPUT_POLICIES["qr-decode-image"].accept).toBe(".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp")
         expect(formatPixelLimit(FILE_INPUT_POLICIES["scan-image"].maxPixels ?? 0)).toBe("24 MP")
         expect(FILE_INPUT_POLICIES["scan-image"].maxFiles).toBe(20)
         expect(formatFilePolicyLimit(FILE_INPUT_POLICIES["recipe-json"])).toBe("256 KB")
@@ -29,13 +38,19 @@ describe("file-input-policy", () => {
         expect(validateFileAgainstPolicy(new File(["{}"], "payload.exe", { type: "application/octet-stream" }), textPolicy)).toMatchObject({ ok: false, reason: "unsupported_type" })
     })
 
-    it("accepts safe extension fallbacks when browsers omit MIME type", () => {
+    it("accepts extension-matched files when browsers omit or generalize MIME types", async () => {
         expect(validateFileAgainstPolicy(new File(["{}"], "payload.json", { type: "" }), FILE_INPUT_POLICIES.text)).toMatchObject({ ok: true })
         expect(validateFileAgainstPolicy(new File(["<svg />"], "icon.svg", { type: "" }), FILE_INPUT_POLICIES.svg)).toMatchObject({ ok: true })
+        expect(validateFileAgainstPolicy(new File(["a,b"], "data.csv", { type: "application/vnd.ms-excel" }), FILE_INPUT_POLICIES["csv-json"])).toMatchObject({ ok: true })
+        expect(validateFileAgainstPolicy(new File(["{}"], "payload.json", { type: "application/octet-stream" }), FILE_INPUT_POLICIES.text)).toMatchObject({ ok: true })
+
+        const genericPng = new File([PNG_SIGNATURE], "safe.png", { type: "application/octet-stream" })
+        expect(validateFileAgainstPolicy(genericPng, FILE_INPUT_POLICIES["image-standard"])).toMatchObject({ ok: true })
+        await expect(validateFileContentAgainstPolicy(genericPng, FILE_INPUT_POLICIES["image-standard"])).resolves.toMatchObject({ ok: true })
     })
 
     it("keeps raw SVG out of generic raster image policies", () => {
-        for (const policyId of ["image-standard", "image-compact", "image-logo"] as const) {
+        for (const policyId of ["image-standard", "image-compact", "image-logo", "qr-decode-image"] as const) {
             const policy = FILE_INPUT_POLICIES[policyId]
             expect(policy.accept).not.toContain("image/*")
             expect(policy.allowedExtensions).not.toContain(".svg")
@@ -48,11 +63,40 @@ describe("file-input-policy", () => {
                 ok: false,
                 reason: "unsupported_type",
             })
+            expect(validateFileAgainstPolicy(new File(["<svg />"], "unsafe.png", { type: "image/svg+xml" }), policy)).toMatchObject({
+                ok: false,
+                reason: "unsupported_type",
+            })
         }
 
         expect(validateFileAgainstPolicy(new File(["<svg />"], "safe.svg", { type: "image/svg+xml" }), FILE_INPUT_POLICIES.svg)).toMatchObject({ ok: true })
     })
 
+    it("detects supported raster signatures and rejects spoofed raster content", async () => {
+        expect(detectRasterImageMime(PNG_SIGNATURE)).toBe("image/png")
+        expect(detectRasterImageMime(new TextEncoder().encode("<svg xmlns='http://www.w3.org/2000/svg'></svg>"))).toBeNull()
+
+        const extensionFallback = new File([PNG_SIGNATURE], "safe.png", { type: "" })
+        await expect(validateFileContentAgainstPolicy(extensionFallback, FILE_INPUT_POLICIES["image-standard"])).resolves.toMatchObject({ ok: true })
+
+        const svgBytes = new TextEncoder().encode("\ufeff  <svg xmlns='http://www.w3.org/2000/svg'></svg>")
+        const spoofedRaster = new File([svgBytes], "unsafe.png", { type: "image/png" })
+        await expect(validateFileContentAgainstPolicy(spoofedRaster, FILE_INPUT_POLICIES["image-standard"])).resolves.toMatchObject({
+            ok: false,
+            reason: "unsupported_type",
+        })
+        await expect(readArrayBufferWithPolicy(spoofedRaster, FILE_INPUT_POLICIES["image-standard"])).rejects.toThrow(/does not match/)
+    })
+
+    it("requires raster extensions, declared MIME types, and signatures to agree", async () => {
+        const mismatchedExtension = new File([PNG_SIGNATURE], "unsafe.jpg", { type: "image/png" })
+        await expect(validateFileContentAgainstPolicy(mismatchedExtension, FILE_INPUT_POLICIES["image-standard"])).resolves.toMatchObject({ ok: false })
+
+        const svgMimeWithRasterExtension = new File([PNG_SIGNATURE], "unsafe.png", { type: "image/svg+xml" })
+        expect(validateFileAgainstPolicy(svgMimeWithRasterExtension, FILE_INPUT_POLICIES["scan-image"])).toMatchObject({ ok: false })
+        expect(FILE_INPUT_POLICIES["scan-image"].accept).not.toContain("image/*")
+    })
+
     it("reads only files that pass policy validation", async () => {
         await expect(readTextFileWithPolicy(new File(["alpha"], "sample.txt", { type: "text/plain" }))).resolves.toBe("alpha")
         await expect(readArrayBufferWithPolicy(new File([new Uint8Array([1, 2])], "sample.bin"), FILE_INPUT_POLICIES["hash-file"])).resolves.toBeInstanceOf(ArrayBuffer)
diff --git a/tests/unit/http-codegen-syntax.test.ts b/tests/unit/http-codegen-syntax.test.ts
new file mode 100644
index 00000000..5023cc87
--- /dev/null
+++ b/tests/unit/http-codegen-syntax.test.ts
@@ -0,0 +1,65 @@
+import { spawnSync } from "node:child_process"
+import { describe, expect, it } from "vitest"
+import { generateFetch, generatePythonRequests } from "@/features/tools/http-request-builder/logic"
+import { parseCurl, toGo, toJavaScript, toPhp, toPython, toRust } from "@/features/tools/curl-to-code/logic"
+
+function commandAvailable(command: string, args: string[] = ["--version"]): boolean {
+    const result = spawnSync(command, args, { encoding: "utf8" })
+    return !result.error && result.status === 0
+}
+
+function parsedFixture() {
+    const result = parseCurl(`curl -X POST https://api.example.com/items -H 'Content-Type: application/json' -d '{"name":"Ada"}'`)
+    if (!result.ok) throw new Error(JSON.stringify(result.diagnostics))
+    return result.request
+}
+
+const HAS_PYTHON = commandAvailable("python", ["--version"])
+const HAS_GOFMT = commandAvailable("gofmt", [])
+const HAS_PHP = commandAvailable("php", ["--version"])
+const HAS_RUSTFMT = commandAvailable("rustfmt", ["--version"])
+
+describe("generated HTTP code syntax", () => {
+    it("parses JavaScript snippets from both request tools", () => {
+        const builderCode = generateFetch("POST", "https://api.example.com/items", [], "json", '{"name":"Ada"}')
+        const curlCode = toJavaScript(parsedFixture())
+
+        expect(() => new Function(`return async function generated() {\n${builderCode}\n}`)).not.toThrow()
+        expect(() => new Function(`return async function generated() {\n${curlCode}\n}`)).not.toThrow()
+    })
+
+    it.runIf(HAS_PYTHON)("compiles Python snippets from both request tools", () => {
+        for (const code of [
+            generatePythonRequests("POST", "https://api.example.com/items", [], "json", '{"name":"Ada"}'),
+            toPython(parsedFixture()),
+        ]) {
+            const result = spawnSync("python", ["-c", "import sys; compile(sys.stdin.read(), '<generated>', 'exec')"], {
+                input: code,
+                encoding: "utf8",
+            })
+            expect(result.stderr).toBe("")
+            expect(result.status).toBe(0)
+        }
+    })
+
+    it.runIf(HAS_GOFMT)("parses generated Go with gofmt", () => {
+        const result = spawnSync("gofmt", [], { input: toGo(parsedFixture()), encoding: "utf8" })
+        expect(result.stderr).toBe("")
+        expect(result.status).toBe(0)
+    })
+
+    it.runIf(HAS_PHP)("parses generated PHP with the PHP linter", () => {
+        const result = spawnSync("php", ["-l"], { input: toPhp(parsedFixture()), encoding: "utf8" })
+        expect(result.stderr).toBe("")
+        expect(result.status).toBe(0)
+    })
+
+    it.runIf(HAS_RUSTFMT)("parses generated Rust with rustfmt", () => {
+        const result = spawnSync("rustfmt", ["--edition", "2021", "--emit", "stdout"], {
+            input: toRust(parsedFixture()),
+            encoding: "utf8",
+        })
+        expect(result.stderr).toBe("")
+        expect(result.status).toBe(0)
+    })
+})
diff --git a/tests/unit/http-request-builder-codegen.test.ts b/tests/unit/http-request-builder-codegen.test.ts
index 47f55109..3c026dbc 100644
--- a/tests/unit/http-request-builder-codegen.test.ts
+++ b/tests/unit/http-request-builder-codegen.test.ts
@@ -43,7 +43,7 @@ describe("http request builder codegen", () => {
     })
 
     it("generates all primary HTTP methods without bodies by default", () => {
-        const methods: HttpMethod[] = ["GET", "POST", "PUT", "PATCH", "DELETE"]
+        const methods: HttpMethod[] = ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"]
 
         for (const method of methods) {
             const curl = generateCurl(method, "https://api.example.com/items", [], "none", "")
@@ -53,7 +53,8 @@ describe("http request builder codegen", () => {
             if (method === "GET") expect(curl).not.toContain("-X GET")
             else expect(curl).toContain(`-X ${method}`)
             expect(fetchCode).toContain(`method: "${method}"`)
-            expect(python).toContain(`requests.${method.toLowerCase()}(`)
+            if (method === "OPTIONS") expect(python).toContain(`requests.request("OPTIONS", `)
+            else expect(python).toContain(`requests.${method.toLowerCase()}(`)
         }
     })
 
@@ -77,10 +78,12 @@ describe("http request builder codegen", () => {
         expect(fetchCode).toContain(`fetch(${JSON.stringify(url)}, {`)
         expect(fetchCode).toContain(`method: "POST"`)
         expect(fetchCode).toContain(`"Authorization": "Bearer TOKEN_PLACEHOLDER"`)
-        expect(fetchCode).toContain("body: JSON.stringify({")
-        expect(fetchCode).toContain(`"name": "Alice"`)
+        expect(fetchCode).toContain(`body: ${JSON.stringify(body)}`)
+        expect(fetchCode).not.toContain("JSON.stringify(")
 
         expect(python).toContain(`response = requests.post(${JSON.stringify(url)}, headers=headers, json=payload)`)
+        expect(python).toContain("import json")
+        expect(python).toContain("import requests")
         expect(python).toContain(`"Authorization": "Bearer TOKEN_PLACEHOLDER"`)
         expect(python).toContain(`payload = json.loads(${JSON.stringify(body)})`)
     })
@@ -98,6 +101,8 @@ describe("http request builder codegen", () => {
 
         expect(curl).toContain("-X PATCH")
         expect(curl).toContain("-H 'Content-Type: application/x-www-form-urlencoded'")
+        expect(curl).toContain("--data-raw 'mode=test&limit=10'")
+        expect(curl).not.toContain("--data-urlencode")
         expect(curl).not.toContain("X-Disabled")
 
         expect(fetchCode).toContain('"Content-Type": "application/x-www-form-urlencoded"')
@@ -116,6 +121,32 @@ describe("http request builder codegen", () => {
         expect(generatePythonRequests("POST", "https://api.example.com/items", [], "json", body)).toContain(`data = "{ invalid"`)
     })
 
+    it("preserves JSON text exactly in Fetch bodies", () => {
+        const body = '{\n  "id": 900719925474099312345,\n  "role": "first",\n  "role": "last"\n}\n'
+        const code = generateFetch("POST", "https://api.example.com/items", [], "json", body)
+
+        expect(code).toContain(`body: ${JSON.stringify(body)}`)
+        expect(code).not.toContain("JSON.parse(")
+        expect(code).not.toContain("JSON.stringify(")
+    })
+
+    it.each(["GET", "HEAD"] as const)("omits Fetch bodies for %s while leaving executable output", (method) => {
+        const code = generateFetch(method, "https://api.example.com/items", [], "raw", "configured body")
+
+        expect(code).not.toContain('body: "configured body"')
+        expect(code).toContain("Fetch does not allow a body for GET or HEAD")
+        expect(code).toContain("await response.text()")
+        expect(code).not.toContain("response.json()")
+    })
+
+    it("uses generic Python requests for OPTIONS and text-first response handling", () => {
+        const code = generatePythonRequests("OPTIONS", "https://api.example.com/items", [], "none", "")
+
+        expect(code).toContain('response = requests.request("OPTIONS", "https://api.example.com/items")')
+        expect(code).toContain("print(response.text)")
+        expect(code).not.toContain("response.json()")
+    })
+
     it("escapes generated shell arguments", () => {
         const curl = generateCurl("POST", maliciousUrl, maliciousHeaders, "raw", maliciousBody)
 
diff --git a/tests/unit/log-parser-logic.test.ts b/tests/unit/log-parser-logic.test.ts
index 8dba5a26..9f7a4d76 100644
--- a/tests/unit/log-parser-logic.test.ts
+++ b/tests/unit/log-parser-logic.test.ts
@@ -193,6 +193,17 @@ describe("exportToCSV", () => {
 
         expect(csv).toContain('""quotes""')
     })
+
+    it("should neutralize formula-like log messages", () => {
+        const entries = [
+            { lineNumber: 1, raw: "+SUM(1,1)", level: "INFO" as const, message: "+SUM(1,1)" },
+        ]
+
+        const csv = exportToCSV(entries)
+
+        expect(csv).toContain("\"'+SUM(1,1)\"")
+        expect(csv).not.toContain("\"+SUM(1,1)\"")
+    })
 })
 
 describe("exportToJSON", () => {
diff --git a/tests/unit/pipeline-foundation.test.ts b/tests/unit/pipeline-foundation.test.ts
index 1781e1e8..e194deb3 100644
--- a/tests/unit/pipeline-foundation.test.ts
+++ b/tests/unit/pipeline-foundation.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest"
+import { afterEach, describe, expect, it, vi } from "vitest"
 import { getPipelineAdapter, getPipelineAdapterKeys, PIPELINE_TOOL_ADAPTERS } from "@/features/pipeline/adapter-registry"
 import { TOOL_MANIFESTS } from "@/core/registry"
 import { createPortableRecipe, decodeRecipeFromUrlParam, encodeRecipeForShareUrl, encodeRecipeForUrl, recipeContainsRuntimeInput } from "@/features/pipeline/recipe-codec"
@@ -10,6 +10,7 @@ import { createSavedRecipeRecord, isRecipeStoreAvailable } from "@/features/pipe
 import { DEFAULT_RECIPE_SETTINGS, type PipelineToolAdapter, type RecipeDocument } from "@/features/pipeline/recipe-types"
 import { getStepCompatibilityHints } from "@/features/tools/pipeline-builder/logic"
 import { WORKFLOW_DEFINITIONS } from "@/core/workflows/workflow-hubs"
+import { RegexTestWorkerMock } from "../helpers/regex-test-worker-mock"
 
 function buildRecipe(overrides: Partial<RecipeDocument> = {}): RecipeDocument {
     const base: RecipeDocument = {
@@ -43,6 +44,10 @@ function buildRecipe(overrides: Partial<RecipeDocument> = {}): RecipeDocument {
 }
 
 describe("pipeline foundation", () => {
+    afterEach(() => {
+        vi.unstubAllGlobals()
+    })
+
     it("exposes the first deterministic adapter set", () => {
         expect(getPipelineAdapterKeys()).toEqual([
             "json_formatter",
@@ -375,6 +380,7 @@ describe("pipeline foundation", () => {
     })
 
     it("runs regex summary and env parser adapters", async () => {
+        vi.stubGlobal("Worker", RegexTestWorkerMock)
         const regexRecipe = buildRecipe({
             steps: [{
                 id: "regex",
diff --git a/tests/unit/qr-code-decoder.test.ts b/tests/unit/qr-code-decoder.test.ts
new file mode 100644
index 00000000..2a1f85c8
--- /dev/null
+++ b/tests/unit/qr-code-decoder.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it, vi } from "vitest"
+import {
+    decodeQrImageData,
+    decodeQrImageFile,
+    createRetryableQrDecoderLoader,
+    type QrDecoder,
+} from "@/features/tools/qr-code-generator/browser-actions"
+import { FILE_INPUT_POLICIES } from "@/core/files/file-input-policy"
+
+function decoderReturning(payload: string | null) {
+    return vi.fn(() => payload ? { data: payload } : null) as unknown as QrDecoder
+}
+
+describe("QR image decoder", () => {
+    it("retries loading the decoder after a transient chunk failure", async () => {
+        const decoder = decoderReturning("retry-success")
+        const loader = vi.fn()
+            .mockRejectedValueOnce(new Error("offline"))
+            .mockResolvedValueOnce(decoder)
+        const loadDecoder = createRetryableQrDecoderLoader(loader)
+
+        await expect(loadDecoder()).rejects.toThrow("offline")
+        await expect(loadDecoder()).resolves.toBe(decoder)
+        expect(loader).toHaveBeenCalledTimes(2)
+    })
+
+    it("returns the payload from an injected local decoder", () => {
+        const decoder = decoderReturning("https://byteflow.tools/decoded")
+        const imageData = {
+            data: new Uint8ClampedArray(4 * 3 * 2),
+            width: 3,
+            height: 2,
+        }
+
+        expect(decodeQrImageData(imageData, decoder)).toEqual({
+            ok: true,
+            payload: "https://byteflow.tools/decoded",
+            width: 3,
+            height: 2,
+        })
+        expect(decoder).toHaveBeenCalledWith(imageData.data, 3, 2, {
+            inversionAttempts: "attemptBoth",
+        })
+    })
+
+    it("reports a clear no-QR result", () => {
+        const imageData = { data: new Uint8ClampedArray(4), width: 1, height: 1 }
+        expect(decodeQrImageData(imageData, decoderReturning(null))).toEqual({ ok: false, error: "no_qr" })
+    })
+
+    it("rejects empty, oversized, and unsupported files before loading the decoder", async () => {
+        const policy = FILE_INPUT_POLICIES["qr-decode-image"]
+        await expect(decodeQrImageFile(new File([], "empty.png", { type: "image/png" }))).resolves.toEqual({
+            ok: false,
+            error: "empty_file",
+        })
+        await expect(decodeQrImageFile(new File(
+            [new Uint8Array(policy.maxBytes + 1)],
+            "large.png",
+            { type: "image/png" },
+        ))).resolves.toEqual({ ok: false, error: "too_large" })
+        await expect(decodeQrImageFile(new File(["<svg />"], "code.svg", { type: "image/svg+xml" }))).resolves.toEqual({
+            ok: false,
+            error: "unsupported_type",
+        })
+    })
+
+    it("rejects SVG content disguised as a PNG", async () => {
+        const disguisedSvg = new File(["<svg xmlns=\"http://www.w3.org/2000/svg\" />"], "code.png", {
+            type: "image/png",
+        })
+        await expect(decodeQrImageFile(disguisedSvg, decoderReturning("should-not-run"))).resolves.toEqual({
+            ok: false,
+            error: "unsupported_type",
+        })
+    })
+})
diff --git a/tests/unit/qr-code-generator-browser-actions.test.ts b/tests/unit/qr-code-generator-browser-actions.test.ts
new file mode 100644
index 00000000..f3d9baba
--- /dev/null
+++ b/tests/unit/qr-code-generator-browser-actions.test.ts
@@ -0,0 +1,113 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import {
+    downloadBlob,
+    downloadCanvasPng,
+    downloadSvg,
+    downloadUrl,
+} from "@/features/tools/qr-code-generator/browser-actions"
+
+const ORIGINAL_CREATE_OBJECT_URL_DESCRIPTOR = Object.getOwnPropertyDescriptor(URL, "createObjectURL")
+const ORIGINAL_REVOKE_OBJECT_URL_DESCRIPTOR = Object.getOwnPropertyDescriptor(URL, "revokeObjectURL")
+
+function restoreUrlProperty(name: "createObjectURL" | "revokeObjectURL", descriptor: PropertyDescriptor | undefined) {
+    if (descriptor) {
+        Object.defineProperty(URL, name, descriptor)
+    } else {
+        delete (URL as unknown as Record<string, unknown>)[name]
+    }
+}
+
+function stubObjectUrlApi() {
+    const createObjectURL = vi.fn(() => "blob:byteflow-test")
+    const revokeObjectURL = vi.fn()
+    Object.defineProperty(URL, "createObjectURL", { configurable: true, value: createObjectURL })
+    Object.defineProperty(URL, "revokeObjectURL", { configurable: true, value: revokeObjectURL })
+    return { createObjectURL, revokeObjectURL }
+}
+
+describe("QR code generator browser downloads", () => {
+    beforeEach(() => {
+        document.body.innerHTML = ""
+        vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+        restoreUrlProperty("createObjectURL", ORIGINAL_CREATE_OBJECT_URL_DESCRIPTOR)
+        restoreUrlProperty("revokeObjectURL", ORIGINAL_REVOKE_OBJECT_URL_DESCRIPTOR)
+        vi.useRealTimers()
+        vi.restoreAllMocks()
+        document.body.innerHTML = ""
+    })
+
+    it("clicks an attached temporary anchor and removes it afterward", () => {
+        const click = vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (this: HTMLAnchorElement) {
+            expect(document.body.contains(this)).toBe(true)
+            expect(this.rel).toBe("noopener")
+            expect(this.download).toBe("qr-code.png")
+        })
+
+        expect(downloadUrl("data:image/png;base64,abc", "qr-code.png")).toEqual({ ok: true })
+        expect(click).toHaveBeenCalledOnce()
+        expect(document.body.querySelector("a")).toBeNull()
+    })
+
+    it("reports click failures and still removes the temporary anchor", () => {
+        vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => {
+            throw new Error("blocked")
+        })
+
+        expect(downloadUrl("data:image/png;base64,abc", "qr-code.png")).toEqual({
+            ok: false,
+            error: "download_failed",
+        })
+        expect(document.body.querySelector("a")).toBeNull()
+    })
+
+    it("downloads non-empty blobs and defers object URL revocation", () => {
+        const { createObjectURL, revokeObjectURL } = stubObjectUrlApi()
+        vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined)
+        const blob = new Blob(["png"], { type: "image/png" })
+
+        expect(downloadBlob(blob, "qr-code.png")).toEqual({ ok: true })
+        expect(createObjectURL).toHaveBeenCalledWith(blob)
+        expect(revokeObjectURL).not.toHaveBeenCalled()
+
+        vi.advanceTimersByTime(999)
+        expect(revokeObjectURL).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(revokeObjectURL).toHaveBeenCalledWith("blob:byteflow-test")
+    })
+
+    it("prefers canvas.toBlob for PNG downloads", async () => {
+        const { createObjectURL } = stubObjectUrlApi()
+        vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined)
+        const canvas = document.createElement("canvas")
+        const png = new Blob(["png"], { type: "image/png" })
+        const toDataURL = vi.spyOn(canvas, "toDataURL")
+        const toBlob = vi.spyOn(canvas, "toBlob").mockImplementation((callback) => callback(png))
+
+        await expect(downloadCanvasPng(canvas, "qr-code.png")).resolves.toEqual({ ok: true })
+        expect(toBlob).toHaveBeenCalledWith(expect.any(Function), "image/png")
+        expect(toDataURL).not.toHaveBeenCalled()
+        expect(createObjectURL).toHaveBeenCalledWith(png)
+    })
+
+    it("uses a local data URL fallback when canvas.toBlob produces no file", async () => {
+        vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined)
+        const canvas = document.createElement("canvas")
+        vi.spyOn(canvas, "toBlob").mockImplementation((callback) => callback(null))
+        const toDataURL = vi.spyOn(canvas, "toDataURL").mockReturnValue("data:image/png;base64,abc")
+
+        await expect(downloadCanvasPng(canvas, "qr-code.png")).resolves.toEqual({ ok: true })
+        expect(toDataURL).toHaveBeenCalledWith("image/png")
+    })
+
+    it("exports SVG through the delayed object URL path", () => {
+        const { createObjectURL, revokeObjectURL } = stubObjectUrlApi()
+        vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined)
+
+        expect(downloadSvg("<svg xmlns=\"http://www.w3.org/2000/svg\" />", "qr-code.svg")).toEqual({ ok: true })
+        expect(createObjectURL).toHaveBeenCalledWith(expect.objectContaining({ type: "image/svg+xml" }))
+        expect(revokeObjectURL).not.toHaveBeenCalled()
+    })
+})
diff --git a/tests/unit/regex-test-task.test.ts b/tests/unit/regex-test-task.test.ts
index fcd2178b..2075b2b1 100644
--- a/tests/unit/regex-test-task.test.ts
+++ b/tests/unit/regex-test-task.test.ts
@@ -2,20 +2,34 @@ import { afterEach, describe, expect, it, vi } from "vitest"
 import { runRegexTestTask } from "@/features/tools/regex-tester/regex-test-task"
 
 class MockRegexWorker {
-    static mode: "success" | "error" | "idle" = "success"
+    static mode: "success" | "taskError" | "runtimeError" | "messageError" | "postError" | "idle" = "success"
+    static throwOnCreate = false
     onmessage: ((event: MessageEvent<unknown>) => void) | null = null
     onerror: ((event: ErrorEvent) => void) | null = null
     onmessageerror: ((event: MessageEvent<unknown>) => void) | null = null
     terminated = false
 
+    constructor() {
+        if (MockRegexWorker.throwOnCreate) throw new Error("worker blocked")
+    }
+
     postMessage() {
+        if (MockRegexWorker.mode === "postError") throw new Error("cannot clone")
         if (MockRegexWorker.mode === "idle") return
         queueMicrotask(() => {
             if (this.terminated) return
-            if (MockRegexWorker.mode === "error") {
+            if (MockRegexWorker.mode === "taskError") {
                 this.onmessage?.({ data: { ok: false, error: "REGEX_WORKER_FAILED" } } as MessageEvent)
                 return
             }
+            if (MockRegexWorker.mode === "runtimeError") {
+                this.onerror?.({ message: "worker crashed", error: new Error("worker crashed") } as ErrorEvent)
+                return
+            }
+            if (MockRegexWorker.mode === "messageError") {
+                this.onmessageerror?.({ data: null } as MessageEvent)
+                return
+            }
             this.onmessage?.({
                 data: {
                     ok: true,
@@ -41,6 +55,7 @@ describe("runRegexTestTask", () => {
         vi.unstubAllGlobals()
         vi.useRealTimers()
         MockRegexWorker.mode = "success"
+        MockRegexWorker.throwOnCreate = false
     })
 
     it("uses the worker result when workers are available", async () => {
@@ -52,14 +67,41 @@ describe("runRegexTestTask", () => {
         })
     })
 
-    it("falls back to sync evaluation on non-timeout worker failures", async () => {
-        MockRegexWorker.mode = "error"
+    it("fails closed when Worker is unavailable", async () => {
+        vi.stubGlobal("Worker", undefined)
+
+        await expect(runRegexTestTask("a", "g", "abc")).resolves.toMatchObject({
+            ok: false,
+            errorCode: "safe_evaluation_unavailable",
+            workerErrorCode: "WORKER_UNAVAILABLE",
+        })
+    })
+
+    it.each([
+        ["taskError", "REGEX_WORKER_FAILED"],
+        ["runtimeError", "WORKER_RUNTIME_ERROR"],
+        ["messageError", "WORKER_MESSAGE_ERROR"],
+        ["postError", "WORKER_POST_MESSAGE_FAILED"],
+    ] as const)("fails closed on %s worker failures", async (mode, workerErrorCode) => {
+        MockRegexWorker.mode = mode
         vi.stubGlobal("Worker", MockRegexWorker)
 
-        const result = await runRegexTestTask("a", "g", "abc")
+        await expect(runRegexTestTask("a", "g", "abc")).resolves.toMatchObject({
+            ok: false,
+            errorCode: "safe_evaluation_unavailable",
+            workerErrorCode,
+        })
+    })
 
-        expect(result.ok).toBe(true)
-        if (result.ok) expect(result.matches[0].match).toBe("a")
+    it("fails closed when worker construction is blocked", async () => {
+        MockRegexWorker.throwOnCreate = true
+        vi.stubGlobal("Worker", MockRegexWorker)
+
+        await expect(runRegexTestTask("a", "g", "abc")).resolves.toMatchObject({
+            ok: false,
+            errorCode: "safe_evaluation_unavailable",
+            workerErrorCode: "WORKER_CREATE_FAILED",
+        })
     })
 
     it("returns an interrupted result on worker timeout instead of falling back to main-thread evaluation", async () => {
@@ -72,6 +114,7 @@ describe("runRegexTestTask", () => {
 
         await expect(task).resolves.toMatchObject({
             ok: false,
+            errorCode: "worker_timeout",
             error: expect.stringContaining("stopped after the safety timeout"),
         })
     })
diff --git a/tests/unit/totp-generator-logic.test.ts b/tests/unit/totp-generator-logic.test.ts
new file mode 100644
index 00000000..658db971
--- /dev/null
+++ b/tests/unit/totp-generator-logic.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest"
+import {
+    MAX_HOTP_COUNTER,
+    OtpValidationError,
+    decodeBase32Strict,
+    generateHOTP,
+    generateRandomSecret,
+    generateTOTP,
+    parseHotpCounter,
+    parseTotpPeriod,
+} from "@/features/tools/totp-generator/logic"
+
+const RFC_SECRET = "GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ"
+
+describe("strict Base32 decoding", () => {
+    it("decodes ASCII Base32 without silently changing the input", () => {
+        const decoded = decodeBase32Strict("jbswy3dpehpk3pxp")
+        expect(decoded).toMatchObject({ ok: true })
+        if (decoded.ok) expect(Array.from(decoded.value)).toEqual([72, 101, 108, 108, 111, 33, 222, 173, 190, 239])
+    })
+
+    it.each([
+        ["", "secret_required"],
+        ["JBSWY3DPEHPK3PXP0", "secret_invalid_characters"],
+        ["JBSWY3DPEHPK3PXP1", "secret_invalid_characters"],
+        ["JBSWY3DP-EHPK3PXP", "secret_invalid_characters"],
+        ["JBSWY3DP EHPK3PXP", "secret_invalid_characters"],
+        ["JBSWY3DPEHPK3PXPß", "secret_invalid_characters"],
+        ["JBSWY3DPEHPK3PXPı", "secret_invalid_characters"],
+        ["MY======", "secret_padding_unsupported"],
+        ["A", "secret_invalid_length"],
+        ["MZ", "secret_invalid_padding_bits"],
+    ])("rejects %j with %s", (input, errorCode) => {
+        expect(decodeBase32Strict(input)).toEqual({ ok: false, errorCode })
+    })
+})
+
+describe("OTP numeric validation", () => {
+    it.each(["", "0", "14", "121", "30.5", "-30", "Infinity", " 30"])("rejects invalid TOTP period %j", (input) => {
+        expect(parseTotpPeriod(input).ok).toBe(false)
+    })
+
+    it.each(["15", "30", "120"])("accepts TOTP period %s", (input) => {
+        expect(parseTotpPeriod(input)).toEqual({ ok: true, value: Number(input) })
+    })
+
+    it.each(["", "-1", "1.5", "NaN", "Infinity", `${MAX_HOTP_COUNTER + 1}`])("rejects invalid HOTP counter %j", (input) => {
+        expect(parseHotpCounter(input).ok).toBe(false)
+    })
+
+    it.each(["0", `${2 ** 32 - 1}`, `${2 ** 32}`, `${MAX_HOTP_COUNTER}`])("accepts HOTP counter %s", (input) => {
+        expect(parseHotpCounter(input)).toEqual({ ok: true, value: Number(input) })
+    })
+})
+
+describe("RFC-compatible OTP generation", () => {
+    it("passes the RFC 4226 HOTP SHA-1 vectors", async () => {
+        const expected = ["755224", "287082", "359152", "969429", "338314", "254676", "287922", "162583", "399871", "520489"]
+        await expect(Promise.all(expected.map((_, counter) => generateHOTP(RFC_SECRET, counter)))).resolves.toEqual(expected)
+    })
+
+    it.each([
+        [59, "94287082"],
+        [1_111_111_109, "07081804"],
+        [1_111_111_111, "14050471"],
+        [1_234_567_890, "89005924"],
+        [2_000_000_000, "69279037"],
+        [20_000_000_000, "65353130"],
+    ])("passes the RFC 6238 SHA-1 vector at %s", async (time, expected) => {
+        await expect(generateTOTP(RFC_SECRET, time, 8, 30)).resolves.toBe(expected)
+    })
+
+    it("encodes counters across the 32-bit boundary and rejects unsafe counters", async () => {
+        await expect(generateHOTP(RFC_SECRET, 2 ** 32)).resolves.toMatch(/^\d{6}$/)
+        await expect(generateHOTP(RFC_SECRET, MAX_HOTP_COUNTER)).resolves.toMatch(/^\d{6}$/)
+        await expect(generateHOTP(RFC_SECRET, MAX_HOTP_COUNTER + 1)).rejects.toMatchObject({
+            code: "counter_out_of_range",
+        } satisfies Partial<OtpValidationError>)
+    })
+
+    it("encodes random bytes as a canonical Base32 secret", () => {
+        const secret = generateRandomSecret()
+        expect(secret).toMatch(/^[A-Z2-7]{32}$/)
+        expect(decodeBase32Strict(secret)).toMatchObject({ ok: true })
+    })
+})