From 76021dfb8d33391399de466d3f6e0dee21cb9387 Mon Sep 17 00:00:00 2001
From: Kranthi Kumar Muppala <kranthi@Mac.lan>
Date: Sat, 18 Apr 2026 11:37:50 -0700
Subject: [PATCH 1/3] chore: comprehensive code-review fixes across security,
 a11y, perf, tests

Synthesis of a multi-agent review covering security, a11y, perf, code
quality, and testing. Grouped by theme:

Security
- Bump DOMPurify 3.3.3 -> 3.4.0, isomorphic-dompurify -> 3.9.0, js-yaml
  -> 4.1.1 to pick up published XSS / prototype-pollution fixes.
- Replace hand-rolled regex sanitizer in svg/svg-viewer with DOMPurify
  (SVG profile, explicit FORBID_TAGS/FORBID_ATTR).
- Gate <HtmlPreview> script/form sandbox permissions behind opt-in
  htmlPreviewAllowScripts (ToolUIConfig); only HTML playground opts in.
- Raise AES-GCM PBKDF2 iterations 100k -> 600k (encrypt+decrypt in
  lockstep) to match current OWASP guidance.
- Emit URL-safe base64 from jwt/fernet-encoder per Fernet spec.
- Warn in jwt/jwt-decoder description that signatures are NOT verified.
- Tighten CSP in public/_headers: drop unused cdn.jsdelivr.net, add
  base-uri and form-action self-only.

Accessibility
- aria-haspopup="dialog" on hero + header search buttons.
- Drop onCloseAutoFocus={preventDefault} from theme / locale dropdown
  menus so Radix returns focus to the trigger.
- aria-hidden decorative canvas (code-rain) and typewriter cursor.
- Respect prefers-reduced-motion in tool-demo typewriter (JS-driven).
- Darken light-mode --muted-foreground (#737373 -> #616161) to hit AA
  on --muted; remove opacity:0.8 override that worsened it.
- Rewire file-upload to a real <button> that triggers a hidden input,
  with proper aria-label and tabIndex.
- Contact form now validates on submit with per-field errors, live-
  region alert, and email-format check. i18n keys added.

Performance
- LazyMotion(domAnimation) wrapper via MotionProvider; migrate all
  marketing components from motion.* -> m.* to drop eager framer-motion
  feature set (~60-80 KB gz).
- Dynamic-import qrcode.react in demo-visuals so the homepage entry
  chunk doesn't ship it.
- Dynamic-import MarkdownPreview in tool-documentation (below-the-fold;
  pulls rehype-highlight + highlight.js).
- tool-layout now reads localStorage in the state initializer with a
  typeof-window guard instead of via useEffect, avoiding a cascading
  re-render and the React Compiler warning.
- Memoize downloadFilename per result across all three tool layouts.

Code quality / bugs
- Fix scaffold generator (scripts/generate-tool.ts): generated tests
  were missing await; any new tool scaffold failed on first run.
- Replace hardcoded "Example loaded" toast + "Enter X input..."
  placeholder with i18n keys (t("exampleLoaded") / t("inputPlaceholder")).
- Reorder executor.ts: 5MB size guard runs before Zod validation so a
  huge input can't waste a full parse; getByteSize returns Infinity on
  unserializable inputs (circular refs) so the guard rejects them.
- math/random-number-generator + color/random-color now use
  crypto.getRandomValues with rejection sampling; Math.round() of
  Math.random() had boundary bias.
- use-clipboard and shared/download-button track their reset timers in
  refs and clear on unmount to prevent leaked setState-after-unmount.

Dead code
- Delete unused useWorker / useWorkerToolExecution hooks and
  public/workers/tool-worker.js (never imported anywhere; keeping the
  worker file meant comlink stayed in the client graph for nothing).
  Removed the stale worker-code-execution security test that grep'd
  the deleted file.
- Delete unused apps/web/components/index.ts barrel.
- Delete unused apps/web/lib/tools/schema-to-json.ts (re-export of a
  converter nothing imports).

Testing
- Executor: add coverage for the timeout path (fake timers) and the
  5MB input-size guard (including circular refs).
- Registry: add guards for invalid tool-id format, unknown category,
  and bad category ID passed to getByCategory.
- register.test: assert every registered tool's id prefix matches its
  meta.category and a known CATEGORIES entry; assert IDs are unique;
  assert no CATEGORY is orphaned.
- New i18n-parity test: every non-English messages/*.json must have
  the same key set as en.json. Patched the 10 locale files with
  English fallbacks so the test starts green.
- New page-budget test: locales x (tools + categories + static) stays
  under Cloudflare Pages' 19,500-page ceiling.
- Update three tests that assumed the old behavior (non-URL-safe base64
  in fernet, getByteSize(circular) === 0).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/__tests__/i18n-parity.test.ts        |  47 +++
 apps/web/__tests__/lib/page-budget.test.ts    |  24 ++
 apps/web/app/[locale]/page.tsx                |  59 ++--
 .../[tool]/layouts/diff-tool-layout.tsx       |  12 +-
 .../[tool]/layouts/generator-tool-layout.tsx  |  12 +-
 .../[tool]/layouts/standard-tool-layout.tsx   |  22 +-
 .../[category]/[tool]/tool-page-client.tsx    |   2 +-
 apps/web/app/globals.css                      |   2 +-
 apps/web/components/editor/input-panel.tsx    |  19 +-
 apps/web/components/editor/output-panel.tsx   |   7 +
 apps/web/components/effects/code-rain.tsx     |   2 +-
 apps/web/components/forms/contact-form.tsx    |  54 ++-
 apps/web/components/index.ts                  |  35 --
 apps/web/components/layout/header.tsx         |   2 +
 .../web/components/layout/locale-switcher.tsx |   5 +-
 apps/web/components/layout/theme-toggle.tsx   |   5 +-
 .../marketing/category-showcase.tsx           |  10 +-
 apps/web/components/marketing/cta-section.tsx |  25 +-
 .../web/components/marketing/demo-visuals.tsx |  22 +-
 .../components/marketing/feature-cards.tsx    |  14 +-
 .../web/components/marketing/hero-section.tsx |   1 +
 .../components/marketing/stats-counter.tsx    |  10 +-
 apps/web/components/marketing/tool-demo.tsx   |  29 +-
 apps/web/components/providers/index.ts        |   1 +
 .../components/providers/motion-provider.tsx  |  25 ++
 .../web/components/renderers/html-preview.tsx |  17 +-
 .../web/components/shared/download-button.tsx |  13 +-
 .../components/tools/tool-documentation.tsx   |  12 +-
 apps/web/components/tools/tool-layout.tsx     |   8 +-
 apps/web/hooks/index.ts                       |   2 -
 apps/web/hooks/use-clipboard.ts               |  13 +-
 apps/web/hooks/use-worker-tool-execution.ts   | 314 ------------------
 apps/web/hooks/use-worker.ts                  | 135 --------
 apps/web/lib/tools/schema-to-json.ts          |   6 -
 apps/web/messages/de.json                     |  10 +-
 apps/web/messages/en.json                     |   8 +
 apps/web/messages/es.json                     |  10 +-
 apps/web/messages/fr.json                     |  10 +-
 apps/web/messages/ja.json                     |  10 +-
 apps/web/messages/ko.json                     |  10 +-
 apps/web/messages/pt-BR.json                  |  10 +-
 apps/web/messages/ru.json                     |  10 +-
 apps/web/messages/tr.json                     |  10 +-
 apps/web/messages/zh-CN.json                  |  10 +-
 apps/web/messages/zh-TW.json                  |  10 +-
 apps/web/package.json                         |   2 +-
 apps/web/public/_headers                      |   2 +-
 apps/web/public/workers/tool-worker.js        | 239 -------------
 apps/web/styles/accessibility.css             |   5 -
 packages/tools/package.json                   |   4 +-
 packages/tools/scripts/generate-tool.ts       |  12 +-
 packages/tools/src/core/execution-meta.ts     |   8 +-
 packages/tools/src/core/executor.ts           |  32 +-
 .../tools/src/tools/color/random-color.ts     |   8 +-
 .../tools/src/tools/crypto/aes-decrypt.ts     |   2 +-
 .../tools/src/tools/crypto/aes-encrypt.ts     |   2 +-
 packages/tools/src/tools/html/playground.ts   |   1 +
 .../tools/src/tools/jwt/fernet-encoder.ts     |   2 +-
 packages/tools/src/tools/jwt/jwt-decoder.ts   |   2 +-
 .../src/tools/math/random-number-generator.ts |  31 +-
 packages/tools/src/tools/svg/svg-viewer.ts    |  63 +---
 packages/tools/src/types/tool-ui.ts           |  11 +
 .../tools/tests/core/execution-meta.test.ts   |   7 +-
 packages/tools/tests/core/executor.test.ts    |  70 ++++
 packages/tools/tests/core/registry.test.ts    |  46 +++
 .../tests/tools/jwt/fernet-encoder.test.ts    |  14 +-
 packages/tools/tests/tools/register.test.ts   |  28 ++
 .../security/worker-code-execution.test.ts    |  49 ---
 pnpm-lock.yaml                                | 183 +++-------
 69 files changed, 763 insertions(+), 1134 deletions(-)
 create mode 100644 apps/web/__tests__/i18n-parity.test.ts
 create mode 100644 apps/web/__tests__/lib/page-budget.test.ts
 delete mode 100644 apps/web/components/index.ts
 create mode 100644 apps/web/components/providers/motion-provider.tsx
 delete mode 100644 apps/web/hooks/use-worker-tool-execution.ts
 delete mode 100644 apps/web/hooks/use-worker.ts
 delete mode 100644 apps/web/lib/tools/schema-to-json.ts
 delete mode 100644 apps/web/public/workers/tool-worker.js
 delete mode 100644 packages/tools/tests/tools/security/worker-code-execution.test.ts

diff --git a/apps/web/__tests__/i18n-parity.test.ts b/apps/web/__tests__/i18n-parity.test.ts
new file mode 100644
index 0000000..f547808
--- /dev/null
+++ b/apps/web/__tests__/i18n-parity.test.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync, readdirSync } from "fs";
+import { join } from "path";
+
+const MESSAGES_DIR = join(__dirname, "..", "messages");
+
+function collectKeys(obj: unknown, prefix = ""): string[] {
+  if (obj === null || typeof obj !== "object") return [];
+  const keys: string[] = [];
+  for (const [k, v] of Object.entries(obj as Record<string, unknown>)) {
+    const path = prefix ? `${prefix}.${k}` : k;
+    if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+      keys.push(...collectKeys(v, path));
+    } else {
+      keys.push(path);
+    }
+  }
+  return keys;
+}
+
+describe("i18n messages parity", () => {
+  const enPath = join(MESSAGES_DIR, "en.json");
+  const en = JSON.parse(readFileSync(enPath, "utf-8")) as unknown;
+  const enKeys = new Set(collectKeys(en));
+
+  const localeFiles = readdirSync(MESSAGES_DIR).filter(
+    (f) => f.endsWith(".json") && f !== "en.json"
+  );
+
+  for (const file of localeFiles) {
+    it(`${file} has the same key set as en.json`, () => {
+      const data = JSON.parse(
+        readFileSync(join(MESSAGES_DIR, file), "utf-8")
+      ) as unknown;
+      const keys = new Set(collectKeys(data));
+
+      const missing = [...enKeys].filter((k) => !keys.has(k));
+      const extra = [...keys].filter((k) => !enKeys.has(k));
+
+      expect({ file, missing, extra }).toEqual({
+        file,
+        missing: [],
+        extra: [],
+      });
+    });
+  }
+});
diff --git a/apps/web/__tests__/lib/page-budget.test.ts b/apps/web/__tests__/lib/page-budget.test.ts
new file mode 100644
index 0000000..d68f3fa
--- /dev/null
+++ b/apps/web/__tests__/lib/page-budget.test.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { locales } from "../../i18n/config";
+import { getAllTools, getAllCategories } from "@utils-live/tools";
+
+// Cloudflare Pages free plan caps a single deployment at 20,000 pages.
+// generateStaticParams emits (locales × (tools + categories + static + blog))
+// so re-enabling locales without checking this silently breaks deploys.
+// Keep a comfortable headroom below the ceiling.
+const PAGE_BUDGET_CEILING = 19500;
+const STATIC_PAGES_PER_LOCALE = 10; // home, about, contact, privacy, tools, etc.
+
+describe("Cloudflare Pages page-budget guard", () => {
+  it("total generated static pages stays under the 20k ceiling", () => {
+    const toolCount = getAllTools().length;
+    const categoryCount = getAllCategories().length;
+    const estimated =
+      locales.length * (toolCount + categoryCount + STATIC_PAGES_PER_LOCALE);
+
+    expect({ locales: locales.length, estimated }).toMatchObject({
+      locales: locales.length,
+    });
+    expect(estimated).toBeLessThan(PAGE_BUDGET_CEILING);
+  });
+});
diff --git a/apps/web/app/[locale]/page.tsx b/apps/web/app/[locale]/page.tsx
index 5520366..8886d28 100644
--- a/apps/web/app/[locale]/page.tsx
+++ b/apps/web/app/[locale]/page.tsx
@@ -17,6 +17,7 @@ import { ToolDemo } from "@/components/marketing/tool-demo";
 import { CategoryShowcase } from "@/components/marketing/category-showcase";
 import { FeatureCards } from "@/components/marketing/feature-cards";
 import { CTASection } from "@/components/marketing/cta-section";
+import { MotionProvider } from "@/components/providers/motion-provider";
 import { buildAlternates } from "@/lib/alternates";
 
 const toolCountLabel = getToolCountLabel();
@@ -70,35 +71,37 @@ export default async function HomePage({
       <Header />
 
       <main id="main-content" className="flex-1">
-        <HeroSection
-          toolCountLabel={toolCountLabel}
-          categories={[
-            "json",
-            "encoding",
-            "text",
-            "crypto",
-            "jwt",
-            "regex",
-            "color",
-            "datetime",
-          ].map((id) => ({
-            id,
-            name:
-              categoryMetaMessages?.[id]?.name ??
-              categories.find((c) => c.id === id)?.name ??
+        <MotionProvider>
+          <HeroSection
+            toolCountLabel={toolCountLabel}
+            categories={[
+              "json",
+              "encoding",
+              "text",
+              "crypto",
+              "jwt",
+              "regex",
+              "color",
+              "datetime",
+            ].map((id) => ({
               id,
-          }))}
-        />
-        <ToolDemo toolCount={getRoundedToolCount()} />
-        <CategoryShowcase
-          categories={showcaseCategories}
-          className="bg-muted/30 border-y"
-        />
-        <FeatureCards toolCountLabel={toolCountLabel} />
-        <CTASection
-          toolCount={getRoundedToolCount()}
-          categoryCount={categories.length}
-        />
+              name:
+                categoryMetaMessages?.[id]?.name ??
+                categories.find((c) => c.id === id)?.name ??
+                id,
+            }))}
+          />
+          <ToolDemo toolCount={getRoundedToolCount()} />
+          <CategoryShowcase
+            categories={showcaseCategories}
+            className="bg-muted/30 border-y"
+          />
+          <FeatureCards toolCountLabel={toolCountLabel} />
+          <CTASection
+            toolCount={getRoundedToolCount()}
+            categoryCount={categories.length}
+          />
+        </MotionProvider>
       </main>
 
       <Footer />
diff --git a/apps/web/app/[locale]/tools/[category]/[tool]/layouts/diff-tool-layout.tsx b/apps/web/app/[locale]/tools/[category]/[tool]/layouts/diff-tool-layout.tsx
index 3f23c2c..d17afcf 100644
--- a/apps/web/app/[locale]/tools/[category]/[tool]/layouts/diff-tool-layout.tsx
+++ b/apps/web/app/[locale]/tools/[category]/[tool]/layouts/diff-tool-layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { ToolMeta, ToolUIConfig } from "@utils-live/tools/constants";
 import { ToolTier } from "@utils-live/tools/constants";
 import { DualInputLayout } from "@/components/tools/dual-input-layout";
@@ -207,6 +207,13 @@ export function DiffToolLayout({
     [input1, reset]
   );
 
+  const downloadFilename = useMemo(() => {
+    void result; // Recompute timestamp when a new result arrives.
+    const slug = tool.name.toLowerCase().replace(/\s+/g, "-");
+    const ext = getFileExtension(ui.outputLanguage ?? ui.inputLanguage);
+    return `${slug}-output-${Date.now()}${ext}`;
+  }, [tool.name, ui.outputLanguage, ui.inputLanguage, result]);
+
   return (
     <div className="flex flex-col gap-4">
       <div
@@ -244,7 +251,8 @@ export function DiffToolLayout({
           language={ui.outputLanguage ?? ui.inputLanguage}
           isLoading={isExecuting}
           isAutoMode={tool.tier === ToolTier.CLIENT}
-          downloadFilename={`${tool.name.toLowerCase().replace(/\s+/g, "-")}-output-${Date.now()}${getFileExtension(ui.outputLanguage ?? ui.inputLanguage)}`}
+          htmlPreviewAllowScripts={ui.htmlPreviewAllowScripts}
+          downloadFilename={downloadFilename}
           onCopy={onCopy}
         />
       </div>
diff --git a/apps/web/app/[locale]/tools/[category]/[tool]/layouts/generator-tool-layout.tsx b/apps/web/app/[locale]/tools/[category]/[tool]/layouts/generator-tool-layout.tsx
index b058d86..24b74a3 100644
--- a/apps/web/app/[locale]/tools/[category]/[tool]/layouts/generator-tool-layout.tsx
+++ b/apps/web/app/[locale]/tools/[category]/[tool]/layouts/generator-tool-layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useCallback, useRef } from "react";
+import { useEffect, useCallback, useMemo, useRef } from "react";
 import type { ToolMeta, ToolUIConfig } from "@utils-live/tools/constants";
 import { useTranslations } from "next-intl";
 import { ToolLayout } from "@/components/tools/tool-layout";
@@ -135,6 +135,13 @@ export function GeneratorToolLayout({
   const inputSchemaFormatted = inputSchema as unknown as FormattedSchema;
   const optionsSchemaFormatted = optionsSchema as unknown as FormattedSchema;
 
+  const downloadFilename = useMemo(() => {
+    void result; // Recompute timestamp when a new result arrives.
+    const slug = tool.name.toLowerCase().replace(/\s+/g, "-");
+    const ext = getFileExtension(ui.outputLanguage ?? ui.inputLanguage);
+    return `${slug}-output-${Date.now()}${ext}`;
+  }, [tool.name, ui.outputLanguage, ui.inputLanguage, result]);
+
   return (
     <div
       className={cn(
@@ -170,7 +177,8 @@ export function GeneratorToolLayout({
           language={ui.outputLanguage ?? ui.inputLanguage}
           isLoading={isExecuting}
           isAutoMode={false}
-          downloadFilename={`${tool.name.toLowerCase().replace(/\s+/g, "-")}-output-${Date.now()}${getFileExtension(ui.outputLanguage ?? ui.inputLanguage)}`}
+          htmlPreviewAllowScripts={ui.htmlPreviewAllowScripts}
+          downloadFilename={downloadFilename}
           onCopy={onCopy}
         />
       </ToolLayout>
diff --git a/apps/web/app/[locale]/tools/[category]/[tool]/layouts/standard-tool-layout.tsx b/apps/web/app/[locale]/tools/[category]/[tool]/layouts/standard-tool-layout.tsx
index 3c575a3..558b932 100644
--- a/apps/web/app/[locale]/tools/[category]/[tool]/layouts/standard-tool-layout.tsx
+++ b/apps/web/app/[locale]/tools/[category]/[tool]/layouts/standard-tool-layout.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { ToolMeta, ToolUIConfig } from "@utils-live/tools/constants";
+import { useTranslations } from "next-intl";
 import { ToolLayout } from "@/components/tools/tool-layout";
 import { InputPanel } from "@/components/editor/input-panel";
 import { OutputPanel } from "@/components/editor/output-panel";
@@ -42,6 +43,7 @@ export function StandardToolLayout({
   onCopy,
   onExecuteReady,
 }: StandardToolLayoutProps): React.ReactElement {
+  const t = useTranslations("tools.shell");
   const isMobile = useIsMobile();
   const [input, setInput] = useState("");
 
@@ -149,6 +151,17 @@ export function StandardToolLayout({
     [reset]
   );
 
+  // Compute the download filename once per result so the timestamp reflects
+  // when the output was produced, not when the component last rendered.
+  // Intentional dep on `result`: the identity changes each execution, which
+  // is when we want a fresh timestamp. `result` isn't otherwise read here.
+  const downloadFilename = useMemo(() => {
+    void result;
+    const slug = tool.name.toLowerCase().replace(/\s+/g, "-");
+    const ext = getFileExtension(ui.outputLanguage ?? ui.inputLanguage);
+    return `${slug}-output-${Date.now()}${ext}`;
+  }, [tool.name, ui.outputLanguage, ui.inputLanguage, result]);
+
   return (
     <div
       className={cn(
@@ -171,7 +184,9 @@ export function StandardToolLayout({
           value={input}
           onChange={handleInputChange}
           language={ui.inputLanguage}
-          placeholder={`Enter ${tool.name.toLowerCase()} input...`}
+          placeholder={t("inputPlaceholder", {
+            toolName: tool.name.toLowerCase(),
+          })}
           allowFileUpload={ui.allowFileUpload}
           acceptedFileTypes={ui.acceptedFileTypes}
           maxFileSize={ui.maxFileSize}
@@ -185,7 +200,8 @@ export function StandardToolLayout({
           language={ui.outputLanguage ?? ui.inputLanguage}
           isLoading={isExecuting}
           isAutoMode
-          downloadFilename={`${tool.name.toLowerCase().replace(/\s+/g, "-")}-output-${Date.now()}${getFileExtension(ui.outputLanguage ?? ui.inputLanguage)}`}
+          htmlPreviewAllowScripts={ui.htmlPreviewAllowScripts}
+          downloadFilename={downloadFilename}
           onCopy={onCopy}
         />
       </ToolLayout>
diff --git a/apps/web/app/[locale]/tools/[category]/[tool]/tool-page-client.tsx b/apps/web/app/[locale]/tools/[category]/[tool]/tool-page-client.tsx
index 709dd03..83ca2b1 100644
--- a/apps/web/app/[locale]/tools/[category]/[tool]/tool-page-client.tsx
+++ b/apps/web/app/[locale]/tools/[category]/[tool]/tool-page-client.tsx
@@ -171,7 +171,7 @@ export function ToolPageClient({
         inputStr = JSON.stringify(example.input, null, 2);
       }
       setExampleInput((prev) => ({ value: inputStr, seq: prev.seq + 1 }));
-      toast.success("Example loaded");
+      toast.success(t("exampleLoaded"));
     },
     [optionsStorageKey, inputStorageKey, variant, inputSchema, t]
   );
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 778249d..e2e0df7 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -231,7 +231,7 @@
     --secondary: 0 0% 96%;
     --secondary-foreground: 0 0% 9%;
     --muted: 0 0% 93%; /* #EDEDED - headers, subtle backgrounds */
-    --muted-foreground: 0 0% 45%;
+    --muted-foreground: 0 0% 38%; /* #616161 — WCAG AA on --muted (5.7:1) */
     --muted-foreground-dim: 0 0% 35%;
     --accent: 0 0% 96%;
     --accent-foreground: 0 0% 9%;
diff --git a/apps/web/components/editor/input-panel.tsx b/apps/web/components/editor/input-panel.tsx
index 4578c80..ffbf858 100644
--- a/apps/web/components/editor/input-panel.tsx
+++ b/apps/web/components/editor/input-panel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import { Upload, FileText, Trash2, AlertCircle, BookOpen } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -87,6 +87,7 @@ export function InputPanel({
   className,
 }: InputPanelProps): React.ReactElement {
   const t = useTranslations("editor.input");
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploadedFile, setUploadedFile] = useState<{
     name: string;
     size: number;
@@ -250,27 +251,29 @@ export function InputPanel({
             </Button>
           )}
           {allowFileUpload && (
-            <label>
+            <>
               <input
+                ref={fileInputRef}
                 type="file"
                 className="sr-only"
                 accept={acceptedFileTypes?.join(",")}
                 onChange={handleFileChange}
                 disabled={disabled}
+                tabIndex={-1}
+                aria-hidden="true"
               />
               <Button
                 variant="ghost"
                 size="sm"
                 className="h-7 px-2"
                 disabled={disabled}
-                asChild
+                onClick={() => fileInputRef.current?.click()}
+                aria-label={t("uploadButton")}
               >
-                <span>
-                  <Upload className="mr-1 h-3.5 w-3.5" />
-                  {t("uploadButton")}
-                </span>
+                <Upload className="mr-1 h-3.5 w-3.5" />
+                {t("uploadButton")}
               </Button>
-            </label>
+            </>
           )}
           <CopyButton value={value} size="sm" />
           {value && (
diff --git a/apps/web/components/editor/output-panel.tsx b/apps/web/components/editor/output-panel.tsx
index 7d9a96c..e757a2b 100644
--- a/apps/web/components/editor/output-panel.tsx
+++ b/apps/web/components/editor/output-panel.tsx
@@ -201,6 +201,11 @@ interface OutputPanelProps {
    * @default false
    */
   isAutoMode?: boolean;
+  /**
+   * For HTML renderer: whether the sandboxed iframe may run scripts and
+   * submit forms. Defaults to false; opt in only for interactive tools.
+   */
+  htmlPreviewAllowScripts?: boolean;
   /**
    * Additional CSS classes
    */
@@ -216,6 +221,7 @@ export function OutputPanel({
   onCopy,
   onDownload,
   isAutoMode = false,
+  htmlPreviewAllowScripts = false,
   className,
 }: OutputPanelProps): React.ReactElement {
   const t = useTranslations("editor.output");
@@ -399,6 +405,7 @@ export function OutputPanel({
           <HtmlPreview
             content={typeof result.data === "string" ? result.data : ""}
             sandboxed
+            allowScripts={htmlPreviewAllowScripts}
             showToolbar
             className="h-full"
           />
diff --git a/apps/web/components/effects/code-rain.tsx b/apps/web/components/effects/code-rain.tsx
index 7ffe60a..25e9db3 100644
--- a/apps/web/components/effects/code-rain.tsx
+++ b/apps/web/components/effects/code-rain.tsx
@@ -150,5 +150,5 @@ export function CodeRain({ className }: CodeRainProps): React.ReactElement {
     };
   }, [prefersReducedMotion, initParticles]);
 
-  return <canvas ref={canvasRef} className={className} />;
+  return <canvas ref={canvasRef} className={className} aria-hidden="true" />;
 }
diff --git a/apps/web/components/forms/contact-form.tsx b/apps/web/components/forms/contact-form.tsx
index a822cff..e7c89da 100644
--- a/apps/web/components/forms/contact-form.tsx
+++ b/apps/web/components/forms/contact-form.tsx
@@ -45,13 +45,34 @@ export function ContactForm({
     message: "",
   });
   const [status, setStatus] = useState<FormStatus>("idle");
+  const [fieldErrors, setFieldErrors] = useState<Partial<ContactFormData>>({});
+  const [validationMessage, setValidationMessage] = useState<string>("");
+
+  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  function validate(): Partial<ContactFormData> {
+    const errors: Partial<ContactFormData> = {};
+    if (!formData.name.trim()) errors.name = t("errors.nameRequired");
+    if (!formData.email.trim()) {
+      errors.email = t("errors.emailRequired");
+    } else if (!EMAIL_RE.test(formData.email.trim())) {
+      errors.email = t("errors.emailInvalid");
+    }
+    if (!formData.message.trim()) errors.message = t("errors.messageRequired");
+    return errors;
+  }
 
   const handleSubmit = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault();
 
-    if (!formData.name || !formData.email || !formData.message) {
+    const errors = validate();
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors);
+      setValidationMessage(t("errors.fixBeforeSubmit"));
       return;
     }
+    setFieldErrors({});
+    setValidationMessage("");
 
     setStatus("submitting");
 
@@ -121,10 +142,14 @@ export function ContactForm({
       onSubmit={(e) => void handleSubmit(e)}
       className={cn("space-y-6", className)}
     >
-      {status === "error" && (
-        <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-400">
+      {(status === "error" || validationMessage) && (
+        <div
+          role="alert"
+          aria-live="assertive"
+          className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-400"
+        >
           <AlertCircle className="h-4 w-4 shrink-0" />
-          {t("errorMessage")}
+          {validationMessage || t("errorMessage")}
         </div>
       )}
 
@@ -135,7 +160,12 @@ export function ContactForm({
           placeholder={t("namePlaceholder")}
           required
           value={formData.name}
-          onChange={(value) => setFormData({ ...formData, name: value })}
+          onChange={(value) => {
+            setFormData({ ...formData, name: value });
+            if (fieldErrors.name)
+              setFieldErrors({ ...fieldErrors, name: undefined });
+          }}
+          error={fieldErrors.name}
           disabled={status === "submitting"}
         />
         <TextInput
@@ -145,7 +175,12 @@ export function ContactForm({
           placeholder={t("emailPlaceholder")}
           required
           value={formData.email}
-          onChange={(value) => setFormData({ ...formData, email: value })}
+          onChange={(value) => {
+            setFormData({ ...formData, email: value });
+            if (fieldErrors.email)
+              setFieldErrors({ ...fieldErrors, email: undefined });
+          }}
+          error={fieldErrors.email}
           disabled={status === "submitting"}
         />
       </div>
@@ -167,7 +202,12 @@ export function ContactForm({
         required
         minRows={6}
         value={formData.message}
-        onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+        onChange={(e) => {
+          setFormData({ ...formData, message: e.target.value });
+          if (fieldErrors.message)
+            setFieldErrors({ ...fieldErrors, message: undefined });
+        }}
+        error={fieldErrors.message}
         disabled={status === "submitting"}
       />
 
diff --git a/apps/web/components/index.ts b/apps/web/components/index.ts
deleted file mode 100644
index 37d5e4d..0000000
--- a/apps/web/components/index.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// Main components barrel export
-// Re-exports all component categories for convenient importing
-
-// Layout components
-export * from "./layout";
-
-// Tool components
-export * from "./tools";
-
-// Editor components
-export * from "./editor";
-
-// Renderer components
-export * from "./renderers";
-
-// Visual tool components
-export * from "./visual";
-
-// Form components
-export * from "./forms";
-
-// Display components
-export * from "./display";
-
-// Search components
-export * from "./search";
-
-// User components
-export * from "./user";
-
-// Shared utility components
-export * from "./shared";
-
-// Provider components
-export * from "./providers";
diff --git a/apps/web/components/layout/header.tsx b/apps/web/components/layout/header.tsx
index 99d3514..8254167 100644
--- a/apps/web/components/layout/header.tsx
+++ b/apps/web/components/layout/header.tsx
@@ -56,6 +56,7 @@ export function Header({
             className="text-muted-foreground hidden w-48 items-center justify-start gap-2 md:flex lg:w-64"
             onClick={handleSearchClick}
             aria-label={t("searchAriaLabel")}
+            aria-haspopup="dialog"
           >
             <Search className="h-4 w-4" />
             <span className="flex-1 truncate text-left">
@@ -74,6 +75,7 @@ export function Header({
             className="h-10 w-10 touch-manipulation md:hidden"
             onClick={handleSearchClick}
             aria-label={t("searchMobileAriaLabel")}
+            aria-haspopup="dialog"
           >
             <Search className="h-5 w-5" />
           </Button>
diff --git a/apps/web/components/layout/locale-switcher.tsx b/apps/web/components/layout/locale-switcher.tsx
index e024e65..d515b75 100644
--- a/apps/web/components/layout/locale-switcher.tsx
+++ b/apps/web/components/layout/locale-switcher.tsx
@@ -46,10 +46,7 @@ export function LocaleSwitcher(): React.ReactElement {
           </span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        onCloseAutoFocus={(e) => e.preventDefault()}
-      >
+      <DropdownMenuContent align="end">
         {locales.map((l) => (
           <DropdownMenuItem
             key={l}
diff --git a/apps/web/components/layout/theme-toggle.tsx b/apps/web/components/layout/theme-toggle.tsx
index d423e4b..5bd0f25 100644
--- a/apps/web/components/layout/theme-toggle.tsx
+++ b/apps/web/components/layout/theme-toggle.tsx
@@ -75,10 +75,7 @@ export function ThemeToggle({
           <span className="sr-only">{t("toggle")}</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        onCloseAutoFocus={(e) => e.preventDefault()}
-      >
+      <DropdownMenuContent align="end">
         <DropdownMenuItem
           onClick={() => setTheme("light")}
           aria-current={theme === "light" ? "true" : undefined}
diff --git a/apps/web/components/marketing/category-showcase.tsx b/apps/web/components/marketing/category-showcase.tsx
index 1951ab7..988baed 100644
--- a/apps/web/components/marketing/category-showcase.tsx
+++ b/apps/web/components/marketing/category-showcase.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Link } from "@/i18n/navigation";
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import { ArrowRight } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { LucideIcon } from "@/components/shared/lucide-icon";
@@ -68,7 +68,7 @@ export function CategoryShowcase({
           {t("subheading")}
         </p>
 
-        <motion.div
+        <m.div
           className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"
           variants={staggerContainer}
           initial="hidden"
@@ -76,7 +76,7 @@ export function CategoryShowcase({
           viewport={VIEWPORT_ONCE}
         >
           {displayCategories.map((category) => (
-            <motion.div key={category.id} variants={fadeInUp}>
+            <m.div key={category.id} variants={fadeInUp}>
               <Link href={category.href}>
                 <Card className="group bg-card/80 hover:bg-card hover:ring-brand/20 h-full border-transparent shadow-sm transition-all hover:shadow-md hover:ring-1">
                   <CardHeader className="pb-2">
@@ -101,9 +101,9 @@ export function CategoryShowcase({
                   </CardContent>
                 </Card>
               </Link>
-            </motion.div>
+            </m.div>
           ))}
-        </motion.div>
+        </m.div>
 
         <div className="mt-8 flex items-center justify-center gap-6">
           <Link
diff --git a/apps/web/components/marketing/cta-section.tsx b/apps/web/components/marketing/cta-section.tsx
index e58bbbd..8a62fea 100644
--- a/apps/web/components/marketing/cta-section.tsx
+++ b/apps/web/components/marketing/cta-section.tsx
@@ -3,7 +3,7 @@
 import { useRef, useState, useCallback, useEffect } from "react";
 import { Link } from "@/i18n/navigation";
 import { Search, ArrowRight } from "lucide-react";
-import { motion, useInView } from "framer-motion";
+import { m, useInView } from "framer-motion";
 import { useTranslations } from "next-intl";
 import { useKeyboard } from "@/components/providers/keyboard-provider";
 import { fadeInUp, staggerContainer, VIEWPORT_ONCE } from "@/lib/animation";
@@ -69,7 +69,7 @@ export function CTASection({
   return (
     <section ref={ref} className={cn("py-12 sm:py-16", className)}>
       <div className="container">
-        <motion.div
+        <m.div
           className="mx-auto max-w-3xl text-center"
           variants={staggerContainer}
           initial="hidden"
@@ -77,7 +77,7 @@ export function CTASection({
           viewport={VIEWPORT_ONCE}
         >
           {/* Inline stats */}
-          <motion.div
+          <m.div
             className="mb-6 flex items-center justify-center gap-8 sm:gap-12"
             variants={fadeInUp}
           >
@@ -113,22 +113,19 @@ export function CTASection({
                 {t("freeLabel")}
               </div>
             </div>
-          </motion.div>
+          </m.div>
 
-          <motion.h2
-            className="text-2xl font-bold sm:text-3xl"
-            variants={fadeInUp}
-          >
+          <m.h2 className="text-2xl font-bold sm:text-3xl" variants={fadeInUp}>
             {t("heading", { toolCount })}
-          </motion.h2>
-          <motion.p
+          </m.h2>
+          <m.p
             className="text-muted-foreground mt-3 text-lg"
             variants={fadeInUp}
           >
             {t("subheading")}
-          </motion.p>
+          </m.p>
 
-          <motion.div
+          <m.div
             className="mt-6 flex flex-col items-center gap-4 sm:flex-row sm:justify-center"
             variants={fadeInUp}
           >
@@ -147,8 +144,8 @@ export function CTASection({
               {t("browseAllTools")}
               <ArrowRight className="h-4 w-4" />
             </Link>
-          </motion.div>
-        </motion.div>
+          </m.div>
+        </m.div>
       </div>
     </section>
   );
diff --git a/apps/web/components/marketing/demo-visuals.tsx b/apps/web/components/marketing/demo-visuals.tsx
index e0dac7a..ec7ff7d 100644
--- a/apps/web/components/marketing/demo-visuals.tsx
+++ b/apps/web/components/marketing/demo-visuals.tsx
@@ -1,6 +1,26 @@
 "use client";
 
-import { QRCodeSVG } from "qrcode.react";
+import dynamic from "next/dynamic";
+
+// Lazy-load qrcode.react so the package (~15 KB gzipped) isn't pulled into
+// the homepage entry chunk — it's only needed when the QR demo cycles in.
+const QRCodeSVG = dynamic(
+  () => import("qrcode.react").then((mod) => mod.QRCodeSVG),
+  {
+    ssr: false,
+    loading: () => (
+      <div
+        style={{
+          width: 140,
+          height: 140,
+          background: "rgba(99, 102, 241, 0.08)",
+          borderRadius: 8,
+        }}
+        aria-hidden="true"
+      />
+    ),
+  }
+);
 
 interface DemoProps {
   className?: string;
diff --git a/apps/web/components/marketing/feature-cards.tsx b/apps/web/components/marketing/feature-cards.tsx
index ec33601..a2fdf0d 100644
--- a/apps/web/components/marketing/feature-cards.tsx
+++ b/apps/web/components/marketing/feature-cards.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import { Zap, Shield, Globe, Sparkles } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { fadeInUp, staggerContainer, VIEWPORT_ONCE } from "@/lib/animation";
@@ -46,7 +46,7 @@ export function FeatureCards({
         <p className="text-brand mb-3 text-center text-xs font-semibold tracking-widest uppercase">
           {t("eyebrow")}
         </p>
-        <motion.h2
+        <m.h2
           className="mb-8 text-center text-2xl font-bold sm:text-3xl"
           variants={fadeInUp}
           initial="hidden"
@@ -54,8 +54,8 @@ export function FeatureCards({
           viewport={VIEWPORT_ONCE}
         >
           {t("heading")}
-        </motion.h2>
-        <motion.div
+        </m.h2>
+        <m.div
           className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"
           variants={staggerContainer}
           initial="hidden"
@@ -63,7 +63,7 @@ export function FeatureCards({
           viewport={VIEWPORT_ONCE}
         >
           {FEATURES.map((feature) => (
-            <motion.div
+            <m.div
               key={feature.title}
               variants={fadeInUp}
               className="text-center"
@@ -73,9 +73,9 @@ export function FeatureCards({
               </div>
               <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
               <p className="text-muted-foreground">{feature.description}</p>
-            </motion.div>
+            </m.div>
           ))}
-        </motion.div>
+        </m.div>
       </div>
     </section>
   );
diff --git a/apps/web/components/marketing/hero-section.tsx b/apps/web/components/marketing/hero-section.tsx
index 435d52c..312e10c 100644
--- a/apps/web/components/marketing/hero-section.tsx
+++ b/apps/web/components/marketing/hero-section.tsx
@@ -88,6 +88,7 @@ export function HeroSection({
           type="button"
           onClick={handleSearchClick}
           aria-label={t("searchAriaLabel")}
+          aria-haspopup="dialog"
           className={cn(
             "group mt-2 flex w-full max-w-xl items-center gap-3",
             "h-13 rounded-xl border px-4 sm:h-14 sm:px-5",
diff --git a/apps/web/components/marketing/stats-counter.tsx b/apps/web/components/marketing/stats-counter.tsx
index ef170dc..2d146e0 100644
--- a/apps/web/components/marketing/stats-counter.tsx
+++ b/apps/web/components/marketing/stats-counter.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef, useState, useCallback, useEffect } from "react";
-import { motion, useInView } from "framer-motion";
+import { m, useInView } from "framer-motion";
 import { fadeInUp, staggerContainer, VIEWPORT_ONCE } from "@/lib/animation";
 import { cn } from "@/lib/utils";
 
@@ -57,7 +57,7 @@ function StatCard({
   }, [isInView]);
 
   return (
-    <motion.div ref={ref} variants={fadeInUp}>
+    <m.div ref={ref} variants={fadeInUp}>
       <div className="bg-card rounded-2xl p-8 text-center">
         <div
           className="text-brand text-5xl font-bold tracking-tight sm:text-6xl"
@@ -67,7 +67,7 @@ function StatCard({
         </div>
         <div className="text-muted-foreground mt-2 text-lg">{label}</div>
       </div>
-    </motion.div>
+    </m.div>
   );
 }
 
@@ -88,7 +88,7 @@ export function StatsCounter({
   return (
     <section className={cn("py-16 sm:py-20", className)}>
       <div className="container">
-        <motion.div
+        <m.div
           className="grid gap-6 sm:grid-cols-3"
           variants={staggerContainer}
           initial="hidden"
@@ -106,7 +106,7 @@ export function StatsCounter({
             onVisible={categoryCounter.start}
           />
           <StatCard value="100%" label="Free Forever" />
-        </motion.div>
+        </m.div>
       </div>
     </section>
   );
diff --git a/apps/web/components/marketing/tool-demo.tsx b/apps/web/components/marketing/tool-demo.tsx
index f09bf61..0289f2d 100644
--- a/apps/web/components/marketing/tool-demo.tsx
+++ b/apps/web/components/marketing/tool-demo.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { motion, useInView, AnimatePresence } from "framer-motion";
+import { m, useInView, AnimatePresence } from "framer-motion";
 import { ArrowRight } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { fadeIn, VIEWPORT_ONCE } from "@/lib/animation";
+import { usePrefersReducedMotion } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
 import { QRCodeDemo, MermaidDemo } from "./demo-visuals";
 
@@ -235,6 +236,7 @@ function useTypewriter(
   const [isRunning, setIsRunning] = useState(false);
   const textRef = useRef(text);
   const speedRef = useRef(speed);
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   textRef.current = text;
   speedRef.current = speed;
@@ -254,6 +256,15 @@ function useTypewriter(
   useEffect(() => {
     if (!isRunning) return;
 
+    // Respect prefers-reduced-motion: show the full string immediately
+    // instead of running a 25-60ms-per-char setInterval animation.
+    if (prefersReducedMotion) {
+      setDisplayed(textRef.current);
+      setIsDone(true);
+      setIsRunning(false);
+      return;
+    }
+
     let i = 0;
     const interval = setInterval(() => {
       i++;
@@ -266,7 +277,7 @@ function useTypewriter(
     }, speedRef.current);
 
     return () => clearInterval(interval);
-  }, [isRunning]);
+  }, [isRunning, prefersReducedMotion]);
 
   return { displayed, isDone, start, reset };
 }
@@ -303,7 +314,11 @@ function GlassPanel({
         ) : (
           <pre className="break-all whitespace-pre-wrap">
             {highlight ? highlightJson(content) : content}
-            {!isOutput && <span className="text-brand animate-pulse">|</span>}
+            {!isOutput && (
+              <span className="text-brand animate-pulse" aria-hidden="true">
+                |
+              </span>
+            )}
           </pre>
         )}
       </div>
@@ -384,7 +399,7 @@ export function ToolDemo({
   return (
     <section ref={ref} className={cn("py-12 sm:py-16", className)}>
       <div className="container max-w-4xl">
-        <motion.div
+        <m.div
           variants={fadeIn}
           initial="hidden"
           whileInView="visible"
@@ -400,7 +415,7 @@ export function ToolDemo({
           {/* Tool name tab */}
           <div className="mb-4 flex items-center gap-2">
             <AnimatePresence mode="wait">
-              <motion.div
+              <m.div
                 key={demo.toolName}
                 initial={{ opacity: 0, y: 4 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -409,7 +424,7 @@ export function ToolDemo({
                 className="bg-brand/10 text-brand inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium"
               >
                 {demo.toolName}
-              </motion.div>
+              </m.div>
             </AnimatePresence>
           </div>
 
@@ -444,7 +459,7 @@ export function ToolDemo({
               </GlassPanel>
             </div>
           </div>
-        </motion.div>
+        </m.div>
       </div>
     </section>
   );
diff --git a/apps/web/components/providers/index.ts b/apps/web/components/providers/index.ts
index 628b665..eef8722 100644
--- a/apps/web/components/providers/index.ts
+++ b/apps/web/components/providers/index.ts
@@ -2,3 +2,4 @@
 export { ThemeProvider } from "./theme-provider";
 export { ToastProvider } from "./toast-provider";
 export { KeyboardProvider, useKeyboard } from "./keyboard-provider";
+export { MotionProvider } from "./motion-provider";
diff --git a/apps/web/components/providers/motion-provider.tsx b/apps/web/components/providers/motion-provider.tsx
new file mode 100644
index 0000000..b67dcc9
--- /dev/null
+++ b/apps/web/components/providers/motion-provider.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { LazyMotion, domAnimation } from "framer-motion";
+import type { ReactNode } from "react";
+
+/**
+ * Lazily loads the framer-motion DOM animation feature set (~28 KB vs. the
+ * ~120 KB full bundle you get when consumers use `motion.*` eagerly) and
+ * exposes the `m.*` shortcut components to children.
+ *
+ * Use this once around any subtree whose components import `m` from
+ * framer-motion. Keep `strict` on: it surfaces cases where a consumer used
+ * `motion.*` (which requires the full feature set) instead of `m.*`.
+ */
+export function MotionProvider({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <LazyMotion features={domAnimation} strict>
+      {children}
+    </LazyMotion>
+  );
+}
diff --git a/apps/web/components/renderers/html-preview.tsx b/apps/web/components/renderers/html-preview.tsx
index 65b4e89..25a55ab 100644
--- a/apps/web/components/renderers/html-preview.tsx
+++ b/apps/web/components/renderers/html-preview.tsx
@@ -15,6 +15,14 @@ interface HtmlPreviewProps {
    * @default true
    */
   sandboxed?: boolean;
+  /**
+   * Whether the sandbox permits script execution and form submission.
+   * Turn off for tools that generate static content (SVG, meta tags, etc.)
+   * so that any sanitizer bypass can't escalate to script execution or
+   * external form posts.
+   * @default false
+   */
+  allowScripts?: boolean;
   /**
    * Whether to show the toolbar
    * @default true
@@ -29,6 +37,7 @@ interface HtmlPreviewProps {
 export function HtmlPreview({
   content,
   sandboxed = true,
+  allowScripts = false,
   showToolbar = true,
   className,
 }: HtmlPreviewProps): React.ReactElement {
@@ -67,9 +76,13 @@ export function HtmlPreview({
     setIsFullscreen(!isFullscreen);
   };
 
-  // Build sandbox attribute - same-origin permission is intentionally excluded
+  // Build sandbox attribute - same-origin permission is intentionally excluded.
+  // Script/form execution is opt-in; static-content tools default to the
+  // minimal permissions (popups only) so a sanitizer bypass can't pivot.
   const sandboxValue = sandboxed
-    ? "allow-scripts allow-popups allow-forms"
+    ? allowScripts
+      ? "allow-scripts allow-popups allow-forms"
+      : "allow-popups"
     : undefined;
 
   return (
diff --git a/apps/web/components/shared/download-button.tsx b/apps/web/components/shared/download-button.tsx
index 4a10ed2..4df2c1c 100644
--- a/apps/web/components/shared/download-button.tsx
+++ b/apps/web/components/shared/download-button.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Download, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -49,6 +49,13 @@ export function DownloadButton({
   className,
 }: DownloadButtonProps): React.ReactElement {
   const [downloaded, setDownloaded] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
 
   const handleDownload = (): void => {
     const blob =
@@ -68,8 +75,10 @@ export function DownloadButton({
     setDownloaded(true);
     onDownload?.();
 
-    setTimeout(() => {
+    if (timerRef.current !== null) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
       setDownloaded(false);
+      timerRef.current = null;
     }, 2000);
   };
 
diff --git a/apps/web/components/tools/tool-documentation.tsx b/apps/web/components/tools/tool-documentation.tsx
index c5f7b2f..2d18b4a 100644
--- a/apps/web/components/tools/tool-documentation.tsx
+++ b/apps/web/components/tools/tool-documentation.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useState } from "react";
+import dynamic from "next/dynamic";
 import {
   ChevronDown,
   ChevronUp,
@@ -18,7 +19,16 @@ import {
 } from "@/components/ui/collapsible";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
-import { MarkdownPreview } from "@/components/renderers/markdown-preview";
+// Documentation sits below the fold. Lazy-load MarkdownPreview (which pulls
+// in rehype-highlight + highlight.js, ~90 KB gzipped) so it only loads when
+// the user expands the documentation section on a tool page.
+const MarkdownPreview = dynamic(
+  () =>
+    import("@/components/renderers/markdown-preview").then(
+      (mod) => mod.MarkdownPreview
+    ),
+  { ssr: false }
+);
 import { CodeEditor } from "@/components/editor/code-editor";
 import { CopyButton } from "@/components/shared/copy-button";
 import { cn } from "@/lib/utils";
diff --git a/apps/web/components/tools/tool-layout.tsx b/apps/web/components/tools/tool-layout.tsx
index e532e68..59db6b0 100644
--- a/apps/web/components/tools/tool-layout.tsx
+++ b/apps/web/components/tools/tool-layout.tsx
@@ -70,9 +70,15 @@ export function ToolLayout({
 
   const splitStorageKey = `utils.live:panel-split:${tool.id}:${orientation}`;
 
+  // Read localStorage lazily in the initializer, but guard against SSR where
+  // `window` is undefined. On the server the default is used; on the client
+  // the persisted value is read synchronously before first paint, avoiding
+  // both a hydration mismatch (because the tool page is client-rendered for
+  // hydration anyway) and a cascading-setState-in-effect warning.
   const [splitRatio, setSplitRatio] = useState(() => {
+    if (typeof window === "undefined") return defaultSplitRatio;
     try {
-      const saved = localStorage.getItem(splitStorageKey);
+      const saved = window.localStorage.getItem(splitStorageKey);
       if (saved) {
         const parsed = parseFloat(saved);
         if (!isNaN(parsed) && parsed >= 0.2 && parsed <= 0.8) return parsed;
diff --git a/apps/web/hooks/index.ts b/apps/web/hooks/index.ts
index d59819a..91a992c 100644
--- a/apps/web/hooks/index.ts
+++ b/apps/web/hooks/index.ts
@@ -11,7 +11,5 @@ export {
 } from "./use-media-query";
 export { useKeyboardShortcut } from "./use-keyboard-shortcut";
 export { useToolExecution } from "./use-tool-execution";
-export { useWorker, supportsWorkers, createWorkerFactory } from "./use-worker";
-export { useWorkerToolExecution } from "./use-worker-tool-execution";
 export { useToolShortcuts } from "./use-tool-shortcuts";
 export { useAnalytics } from "./use-analytics";
diff --git a/apps/web/hooks/use-clipboard.ts b/apps/web/hooks/use-clipboard.ts
index 86647a7..8a9008e 100644
--- a/apps/web/hooks/use-clipboard.ts
+++ b/apps/web/hooks/use-clipboard.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 
 interface UseClipboardResult {
   copy: (text: string) => Promise<boolean>;
@@ -18,6 +18,13 @@ interface UseClipboardResult {
 export function useClipboard(resetDelay: number = 2000): UseClipboardResult {
   const [copied, setCopied] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
 
   const copy = useCallback(
     async (text: string): Promise<boolean> => {
@@ -26,8 +33,10 @@ export function useClipboard(resetDelay: number = 2000): UseClipboardResult {
         setCopied(true);
         setError(null);
 
-        setTimeout(() => {
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
           setCopied(false);
+          timerRef.current = null;
         }, resetDelay);
 
         return true;
diff --git a/apps/web/hooks/use-worker-tool-execution.ts b/apps/web/hooks/use-worker-tool-execution.ts
deleted file mode 100644
index e9ce94b..0000000
--- a/apps/web/hooks/use-worker-tool-execution.ts
+++ /dev/null
@@ -1,314 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import * as Comlink from "comlink";
-import { releaseComlinkProxy } from "@/lib/comlink-utils";
-
-/**
- * Worker API type definition matching the exposed worker methods
- */
-interface ToolWorkerApi {
-  processLargeText: (
-    input: string,
-    operation: string,
-    options?: Record<string, unknown>
-  ) => Promise<WorkerResult>;
-  hashString: (input: string, algorithm?: string) => Promise<WorkerResult>;
-  processJson: (
-    input: string,
-    options?: Record<string, unknown>
-  ) => Promise<WorkerResult>;
-  validateRegex: (
-    pattern: string,
-    testString?: string,
-    flags?: string
-  ) => Promise<WorkerResult>;
-  ping: () => string;
-  getCapabilities: () => WorkerCapabilities;
-}
-
-interface WorkerResult {
-  success: boolean;
-  data?: unknown;
-  error?: {
-    code: string;
-    message: string;
-  };
-}
-
-interface WorkerCapabilities {
-  subtleCrypto: boolean;
-  textEncoder: boolean;
-  performance: boolean;
-}
-
-type ExecutionStatus = "idle" | "loading" | "executing" | "success" | "error";
-
-interface UseWorkerToolExecutionOptions {
-  /**
-   * Whether to automatically initialize the worker
-   * @default true
-   */
-  autoInit?: boolean;
-  /**
-   * Callback when execution starts
-   */
-  onStart?: () => void;
-  /**
-   * Callback when execution succeeds
-   */
-  onSuccess?: (result: unknown) => void;
-  /**
-   * Callback when execution fails
-   */
-  onError?: (error: Error) => void;
-}
-
-interface UseWorkerToolExecutionReturn {
-  /**
-   * Whether the worker is ready for use
-   */
-  isReady: boolean;
-  /**
-   * Current execution status
-   */
-  status: ExecutionStatus;
-  /**
-   * Whether execution is in progress
-   */
-  isExecuting: boolean;
-  /**
-   * The result of the last execution
-   */
-  result: unknown;
-  /**
-   * Any error from worker initialization or execution
-   */
-  error: Error | null;
-  /**
-   * Process large text with various operations
-   */
-  processText: (
-    input: string,
-    operation:
-      | "lineCount"
-      | "wordCount"
-      | "charCount"
-      | "findReplace"
-      | "sort"
-      | "unique"
-      | "reverse"
-      | "base64encode"
-      | "base64decode",
-    options?: Record<string, unknown>
-  ) => Promise<unknown>;
-  /**
-   * Hash a string using various algorithms
-   */
-  hashString: (
-    input: string,
-    algorithm?: "SHA-1" | "SHA-256" | "SHA-384" | "SHA-512"
-  ) => Promise<string>;
-  /**
-   * Parse and format JSON
-   */
-  processJson: (
-    input: string,
-    options?: { minify?: boolean; indent?: number }
-  ) => Promise<unknown>;
-  /**
-   * Validate and test regex patterns
-   */
-  validateRegex: (
-    pattern: string,
-    testString?: string,
-    flags?: string
-  ) => Promise<unknown>;
-  /**
-   * Terminate the worker
-   */
-  terminate: () => void;
-  /**
-   * Reinitialize the worker after termination
-   */
-  reinitialize: () => void;
-}
-
-/**
- * Hook for executing tool operations in a Web Worker.
- * Offloads CPU-intensive operations to a background thread.
- */
-export function useWorkerToolExecution(
-  options: UseWorkerToolExecutionOptions = {}
-): UseWorkerToolExecutionReturn {
-  const { autoInit = true, onStart, onSuccess, onError } = options;
-
-  const workerRef = useRef<Worker | null>(null);
-  const proxyRef = useRef<Comlink.Remote<ToolWorkerApi> | null>(null);
-
-  const [isReady, setIsReady] = useState(false);
-  const [status, setStatus] = useState<ExecutionStatus>("idle");
-  const [result, setResult] = useState<unknown>(null);
-  const [error, setError] = useState<Error | null>(null);
-
-  // Initialize worker
-  const initWorker = useCallback(() => {
-    if (typeof Worker === "undefined") {
-      setError(new Error("Web Workers are not supported in this browser"));
-      return;
-    }
-
-    try {
-      setStatus("loading");
-      const worker = new Worker("/workers/tool-worker.js", { type: "module" });
-      workerRef.current = worker;
-      proxyRef.current = Comlink.wrap<ToolWorkerApi>(worker);
-      setIsReady(true);
-      setStatus("idle");
-      setError(null);
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      setError(error);
-      setStatus("error");
-    }
-  }, []);
-
-  // Auto-initialize on mount
-  useEffect(() => {
-    if (autoInit) {
-      initWorker();
-    }
-
-    return (): void => {
-      releaseComlinkProxy(proxyRef.current);
-      if (workerRef.current) {
-        workerRef.current.terminate();
-      }
-    };
-  }, [autoInit, initWorker]);
-
-  // Helper to execute with error handling
-  const executeWithHandling = useCallback(
-    async <T>(operation: () => Promise<WorkerResult>): Promise<T> => {
-      if (!proxyRef.current) {
-        throw new Error("Worker is not initialized");
-      }
-
-      setStatus("executing");
-      setError(null);
-      onStart?.();
-
-      try {
-        const workerResult = await operation();
-
-        if (!workerResult.success) {
-          throw new Error(
-            workerResult.error?.message || "Worker execution failed"
-          );
-        }
-
-        setResult(workerResult.data);
-        setStatus("success");
-        onSuccess?.(workerResult.data);
-        return workerResult.data as T;
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error(String(err));
-        setError(error);
-        setStatus("error");
-        onError?.(error);
-        throw error;
-      }
-    },
-    [onStart, onSuccess, onError]
-  );
-
-  // Process large text
-  const processText = useCallback(
-    async (
-      input: string,
-      operation: string,
-      opts?: Record<string, unknown>
-    ): Promise<unknown> => {
-      return executeWithHandling(() =>
-        proxyRef.current!.processLargeText(input, operation, opts)
-      );
-    },
-    [executeWithHandling]
-  );
-
-  // Hash string
-  const hashString = useCallback(
-    async (input: string, algorithm?: string): Promise<string> => {
-      return executeWithHandling(() =>
-        proxyRef.current!.hashString(input, algorithm)
-      );
-    },
-    [executeWithHandling]
-  );
-
-  // Process JSON
-  const processJson = useCallback(
-    async (
-      input: string,
-      opts?: { minify?: boolean; indent?: number }
-    ): Promise<unknown> => {
-      return executeWithHandling(() =>
-        proxyRef.current!.processJson(input, opts)
-      );
-    },
-    [executeWithHandling]
-  );
-
-  // Validate regex
-  const validateRegex = useCallback(
-    async (
-      pattern: string,
-      testString?: string,
-      flags?: string
-    ): Promise<unknown> => {
-      return executeWithHandling(() =>
-        proxyRef.current!.validateRegex(pattern, testString, flags)
-      );
-    },
-    [executeWithHandling]
-  );
-
-  // Terminate worker
-  const terminate = useCallback((): void => {
-    releaseComlinkProxy(proxyRef.current);
-    proxyRef.current = null;
-    if (workerRef.current) {
-      workerRef.current.terminate();
-      workerRef.current = null;
-    }
-    setIsReady(false);
-    setStatus("idle");
-  }, []);
-
-  // Reinitialize
-  const reinitialize = useCallback(() => {
-    terminate();
-    initWorker();
-  }, [terminate, initWorker]);
-
-  return {
-    isReady,
-    status,
-    isExecuting: status === "executing",
-    result,
-    error,
-    processText,
-    hashString,
-    processJson,
-    validateRegex,
-    terminate,
-    reinitialize,
-  };
-}
-
-/**
- * Check if the current environment supports Web Workers
- */
-export function supportsWorkers(): boolean {
-  return typeof Worker !== "undefined";
-}
diff --git a/apps/web/hooks/use-worker.ts b/apps/web/hooks/use-worker.ts
deleted file mode 100644
index f05f29c..0000000
--- a/apps/web/hooks/use-worker.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import * as Comlink from "comlink";
-import { releaseComlinkProxy } from "@/lib/comlink-utils";
-
-interface UseWorkerOptions {
-  /**
-   * Whether to terminate the worker when the component unmounts
-   * @default true
-   */
-  terminateOnUnmount?: boolean;
-}
-
-interface UseWorkerReturn<T> {
-  /**
-   * The wrapped worker API
-   */
-  worker: Comlink.Remote<T> | null;
-  /**
-   * Whether the worker is ready
-   */
-  isReady: boolean;
-  /**
-   * Any error that occurred during worker initialization
-   */
-  error: Error | null;
-  /**
-   * Terminate the worker manually
-   */
-  terminate: () => void;
-}
-
-interface WorkerState<T> {
-  proxy: Comlink.Remote<T> | null;
-  isReady: boolean;
-  error: Error | null;
-}
-
-function initWorker<T>(workerFactory: () => Worker): {
-  state: WorkerState<T>;
-  worker: Worker | null;
-  proxy: Comlink.Remote<T> | null;
-} {
-  if (typeof Worker === "undefined") {
-    return {
-      state: {
-        proxy: null,
-        isReady: false,
-        error: new Error("Web Workers are not supported in this browser"),
-      },
-      worker: null,
-      proxy: null,
-    };
-  }
-
-  try {
-    const worker = workerFactory();
-    const proxy = Comlink.wrap<T>(worker);
-    return {
-      state: { proxy, isReady: true, error: null },
-      worker,
-      proxy,
-    };
-  } catch (err) {
-    const initError = err instanceof Error ? err : new Error(String(err));
-    return {
-      state: { proxy: null, isReady: false, error: initError },
-      worker: null,
-      proxy: null,
-    };
-  }
-}
-
-/**
- * Hook for using Web Workers with Comlink.
- * Provides a type-safe wrapper around the worker API.
- *
- * @param workerFactory - Function that creates the worker
- * @param options - Configuration options
- */
-export function useWorker<T>(
-  workerFactory: () => Worker,
-  options: UseWorkerOptions = {}
-): UseWorkerReturn<T> {
-  const { terminateOnUnmount = true } = options;
-
-  const [initResult] = useState(() => initWorker<T>(workerFactory));
-  const workerRef = useRef<Worker | null>(initResult.worker);
-  const proxyRef = useRef<Comlink.Remote<T> | null>(initResult.proxy);
-  const [state, setState] = useState<WorkerState<T>>(initResult.state);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return (): void => {
-      if (terminateOnUnmount && workerRef.current) {
-        releaseComlinkProxy(proxyRef.current);
-        workerRef.current.terminate();
-        workerRef.current = null;
-        proxyRef.current = null;
-      }
-    };
-  }, [terminateOnUnmount]);
-
-  const terminate = useCallback((): void => {
-    releaseComlinkProxy(proxyRef.current);
-    proxyRef.current = null;
-    if (workerRef.current) {
-      workerRef.current.terminate();
-      workerRef.current = null;
-    }
-    setState({ proxy: null, isReady: false, error: null });
-  }, []);
-
-  return {
-    worker: state.proxy,
-    isReady: state.isReady,
-    error: state.error,
-    terminate,
-  };
-}
-
-/**
- * Check if Web Workers are supported in the current environment
- */
-export function supportsWorkers(): boolean {
-  return typeof Worker !== "undefined";
-}
-
-/**
- * Create a worker factory function for a given module URL
- */
-export function createWorkerFactory(moduleUrl: URL): () => Worker {
-  return () => new Worker(moduleUrl, { type: "module" });
-}
diff --git a/apps/web/lib/tools/schema-to-json.ts b/apps/web/lib/tools/schema-to-json.ts
deleted file mode 100644
index d67eeb2..0000000
--- a/apps/web/lib/tools/schema-to-json.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Re-export JSON Schema conversion utilities from @utils-live/tools.
- * This provides a convenient import path for web app components.
- */
-export { toJsonSchema, toJsonSchemaWithMeta } from "@utils-live/tools";
-export type { JsonSchema } from "@utils-live/tools";
diff --git a/apps/web/messages/de.json b/apps/web/messages/de.json
index 8c331e9..885f207 100644
--- a/apps/web/messages/de.json
+++ b/apps/web/messages/de.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "Tool nicht gefunden",
         "description": "Das angeforderte Tool konnte nicht gefunden werden."
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "Tools erkunden",
@@ -366,6 +367,13 @@
           "support": "Technischer Support",
           "partnership": "Partnerschaft",
           "other": "Sonstiges"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index 0e5232c..709cf21 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -123,6 +123,7 @@
       "shortcutClear": "Clear / Reset",
       "undoLabel": "Undo",
       "exampleLoaded": "Example loaded",
+      "inputPlaceholder": "Enter {toolName} input...",
       "inputLabel": "Input",
       "outputLabel": "Output",
       "configureLabel": "Configure",
@@ -349,6 +350,13 @@
         "successDescription": "Thank you for reaching out. We'll get back to you as soon as possible, usually within 24 hours.",
         "sendAnother": "Send Another Message",
         "errorMessage": "Something went wrong. Please try again.",
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
+        },
         "namePlaceholder": "Your name",
         "nameLabel": "Name",
         "emailLabel": "Email",
diff --git a/apps/web/messages/es.json b/apps/web/messages/es.json
index 0082df6..a9458c1 100644
--- a/apps/web/messages/es.json
+++ b/apps/web/messages/es.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "Herramienta no encontrada",
         "description": "No se pudo encontrar la herramienta solicitada."
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "Explorar herramientas",
@@ -366,6 +367,13 @@
           "support": "Soporte técnico",
           "partnership": "Asociación",
           "other": "Otro"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/fr.json b/apps/web/messages/fr.json
index 534b684..ae0731f 100644
--- a/apps/web/messages/fr.json
+++ b/apps/web/messages/fr.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "Outil non trouvé",
         "description": "L'outil demandé est introuvable."
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "Explorez les outils",
@@ -366,6 +367,13 @@
           "support": "Support technique",
           "partnership": "Partenariat",
           "other": "Autre"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/ja.json b/apps/web/messages/ja.json
index 9a1e026..b996cbd 100644
--- a/apps/web/messages/ja.json
+++ b/apps/web/messages/ja.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "ツールが見つかりません",
         "description": "リクエストされたツールが見つかりませんでした。"
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "ツールを探索",
@@ -366,6 +367,13 @@
           "support": "技術サポート",
           "partnership": "パートナーシップ",
           "other": "その他"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/ko.json b/apps/web/messages/ko.json
index ad8989d..d1be2ad 100644
--- a/apps/web/messages/ko.json
+++ b/apps/web/messages/ko.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "도구를 찾을 수 없음",
         "description": "요청한 도구를 찾을 수 없습니다."
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "도구 탐색",
@@ -366,6 +367,13 @@
           "support": "기술 지원",
           "partnership": "파트너십",
           "other": "기타"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/pt-BR.json b/apps/web/messages/pt-BR.json
index 01635e6..488f2d8 100644
--- a/apps/web/messages/pt-BR.json
+++ b/apps/web/messages/pt-BR.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "Ferramenta Não Encontrada",
         "description": "A ferramenta solicitada não pôde ser encontrada."
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "Explorar Ferramentas",
@@ -366,6 +367,13 @@
           "support": "Suporte Técnico",
           "partnership": "Parceria",
           "other": "Outro"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/ru.json b/apps/web/messages/ru.json
index b58fe8f..76e54e3 100644
--- a/apps/web/messages/ru.json
+++ b/apps/web/messages/ru.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "Инструмент не найден",
         "description": "Запрошенный инструмент не найден."
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "Обзор инструментов",
@@ -366,6 +367,13 @@
           "support": "Техническая поддержка",
           "partnership": "Партнёрство",
           "other": "Другое"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/tr.json b/apps/web/messages/tr.json
index bccddd0..3a9ff14 100644
--- a/apps/web/messages/tr.json
+++ b/apps/web/messages/tr.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "Araç Bulunamadı",
         "description": "İstenen araç bulunamadı."
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "Araçları Keşfet",
@@ -366,6 +367,13 @@
           "support": "Teknik Destek",
           "partnership": "İş Ortaklığı",
           "other": "Diğer"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/zh-CN.json b/apps/web/messages/zh-CN.json
index be3495e..c291adf 100644
--- a/apps/web/messages/zh-CN.json
+++ b/apps/web/messages/zh-CN.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "工具未找到",
         "description": "请求的工具无法找到。"
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "探索工具",
@@ -366,6 +367,13 @@
           "support": "技术支持",
           "partnership": "合作",
           "other": "其他"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/messages/zh-TW.json b/apps/web/messages/zh-TW.json
index fac9fa9..486e0a2 100644
--- a/apps/web/messages/zh-TW.json
+++ b/apps/web/messages/zh-TW.json
@@ -134,7 +134,8 @@
       "toolNotFound": {
         "title": "找不到工具",
         "description": "找不到所請求的工具。"
-      }
+      },
+      "inputPlaceholder": "Enter {toolName} input..."
     },
     "search": {
       "heading": "探索工具",
@@ -366,6 +367,13 @@
           "support": "技術支援",
           "partnership": "合作",
           "other": "其他"
+        },
+        "errors": {
+          "fixBeforeSubmit": "Please fix the fields below before submitting.",
+          "nameRequired": "Please enter your name.",
+          "emailRequired": "Please enter your email address.",
+          "emailInvalid": "Please enter a valid email address.",
+          "messageRequired": "Please enter a message."
         }
       }
     }
diff --git a/apps/web/package.json b/apps/web/package.json
index 0687c8d..d2ef7d6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -46,7 +46,7 @@
     "cmdk": "1.1.1",
     "comlink": "4.4.0",
     "date-fns": "4.1.0",
-    "dompurify": "3.3.3",
+    "dompurify": "3.4.0",
     "framer-motion": "12.33.0",
     "highlight.js": "11.11.1",
     "jsbarcode": "3.12.3",
diff --git a/apps/web/public/_headers b/apps/web/public/_headers
index 4ea429e..e702d95 100644
--- a/apps/web/public/_headers
+++ b/apps/web/public/_headers
@@ -4,7 +4,7 @@
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
   Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://cdn.jsdelivr.net https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; img-src 'self' data: blob:; font-src 'self' data: https://cdn.jsdelivr.net; connect-src 'self' https://cdn.jsdelivr.net https://cloudflareinsights.com https://api.staticforms.dev; worker-src 'self' blob:; frame-ancestors 'none'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' https://cloudflareinsights.com https://api.staticforms.dev; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self'; form-action 'self' https://api.staticforms.dev
 
 # Static assets - cache for 1 year (content-hashed filenames)
 /_next/static/*
diff --git a/apps/web/public/workers/tool-worker.js b/apps/web/public/workers/tool-worker.js
deleted file mode 100644
index 711207a..0000000
--- a/apps/web/public/workers/tool-worker.js
+++ /dev/null
@@ -1,239 +0,0 @@
-/**
- * Web Worker for CPU-intensive tool operations.
- * Handles tool execution off the main thread to prevent UI blocking.
- *
- * Uses Comlink for seamless communication with the main thread.
- */
-
-import { expose } from "comlink";
-
-/**
- * Process large text data in chunks.
- * Useful for operations that need to process megabytes of text.
- *
- * @param {string} input - The input string to process
- * @param {string} operation - The operation type (split, join, transform)
- * @param {Record<string, unknown>} options - Processing options
- * @returns {Promise<unknown>} The processed result
- */
-async function processLargeText(input, operation, options = {}) {
-  try {
-    const chunkSize = options.chunkSize || 1024 * 1024; // 1MB default
-    const results = [];
-
-    switch (operation) {
-      case "lineCount":
-        let lineCount = 0;
-        for (let i = 0; i < input.length; i++) {
-          if (input[i] === "\n") lineCount++;
-        }
-        return { success: true, data: lineCount + 1 };
-
-      case "wordCount":
-        const words = input.trim().split(/\s+/).filter(Boolean);
-        return { success: true, data: words.length };
-
-      case "charCount":
-        return { success: true, data: input.length };
-
-      case "findReplace":
-        const { find, replace, regex, flags } = options;
-        let processed;
-        if (regex) {
-          const re = new RegExp(find, flags || "g");
-          processed = input.replace(re, replace || "");
-        } else {
-          processed = input.split(find).join(replace || "");
-        }
-        return { success: true, data: processed };
-
-      case "sort":
-        const lines = input.split("\n");
-        const sortedLines = options.reverse
-          ? lines.sort().reverse()
-          : lines.sort();
-        return { success: true, data: sortedLines.join("\n") };
-
-      case "unique":
-        const uniqueLines = [...new Set(input.split("\n"))];
-        return { success: true, data: uniqueLines.join("\n") };
-
-      case "reverse":
-        if (options.byLine) {
-          return {
-            success: true,
-            data: input.split("\n").reverse().join("\n"),
-          };
-        }
-        return { success: true, data: input.split("").reverse().join("") };
-
-      case "base64encode":
-        return {
-          success: true,
-          data: btoa(unescape(encodeURIComponent(input))),
-        };
-
-      case "base64decode":
-        return { success: true, data: decodeURIComponent(escape(atob(input))) };
-
-      default:
-        return {
-          success: false,
-          error: {
-            code: "UNKNOWN_OPERATION",
-            message: `Unknown operation: ${operation}`,
-          },
-        };
-    }
-  } catch (error) {
-    return {
-      success: false,
-      error: {
-        code: "WORKER_PROCESSING_ERROR",
-        message: error instanceof Error ? error.message : String(error),
-      },
-    };
-  }
-}
-
-/**
- * Hash a string using the SubtleCrypto API.
- *
- * @param {string} input - The input string to hash
- * @param {string} algorithm - The hash algorithm (SHA-1, SHA-256, SHA-384, SHA-512)
- * @returns {Promise<string>} The hex-encoded hash
- */
-async function hashString(input, algorithm = "SHA-256") {
-  try {
-    const encoder = new TextEncoder();
-    const data = encoder.encode(input);
-    const hashBuffer = await crypto.subtle.digest(algorithm, data);
-    const hashArray = Array.from(new Uint8Array(hashBuffer));
-    const hashHex = hashArray
-      .map((b) => b.toString(16).padStart(2, "0"))
-      .join("");
-    return { success: true, data: hashHex };
-  } catch (error) {
-    return {
-      success: false,
-      error: {
-        code: "HASH_ERROR",
-        message: error instanceof Error ? error.message : String(error),
-      },
-    };
-  }
-}
-
-/**
- * Parse and format JSON in the worker.
- *
- * @param {string} input - The JSON string to parse/format
- * @param {Record<string, unknown>} options - Formatting options
- * @returns {Promise<unknown>} The parsed or formatted result
- */
-async function processJson(input, options = {}) {
-  try {
-    const parsed = JSON.parse(input);
-
-    if (options.minify) {
-      return { success: true, data: JSON.stringify(parsed) };
-    }
-
-    const indent = options.indent ?? 2;
-    return { success: true, data: JSON.stringify(parsed, null, indent) };
-  } catch (error) {
-    return {
-      success: false,
-      error: {
-        code: "JSON_ERROR",
-        message: error instanceof Error ? error.message : String(error),
-      },
-    };
-  }
-}
-
-/**
- * Validate regex patterns in the worker.
- *
- * @param {string} pattern - The regex pattern to validate
- * @param {string} testString - Optional test string to match against
- * @param {string} flags - Regex flags
- * @returns {Promise<unknown>} Validation result and matches
- */
-async function validateRegex(pattern, testString = "", flags = "") {
-  try {
-    const regex = new RegExp(pattern, flags);
-
-    if (!testString) {
-      return {
-        success: true,
-        data: { valid: true, pattern: regex.source, flags: regex.flags },
-      };
-    }
-
-    const matches = [];
-    let match;
-
-    if (flags.includes("g")) {
-      while ((match = regex.exec(testString)) !== null) {
-        matches.push({
-          match: match[0],
-          index: match.index,
-          groups: match.groups || {},
-          captures: match.slice(1),
-        });
-        if (!flags.includes("g")) break;
-      }
-    } else {
-      match = regex.exec(testString);
-      if (match) {
-        matches.push({
-          match: match[0],
-          index: match.index,
-          groups: match.groups || {},
-          captures: match.slice(1),
-        });
-      }
-    }
-
-    return {
-      success: true,
-      data: {
-        valid: true,
-        pattern: regex.source,
-        flags: regex.flags,
-        matches,
-        matchCount: matches.length,
-      },
-    };
-  } catch (error) {
-    return {
-      success: false,
-      error: {
-        code: "REGEX_ERROR",
-        message: error instanceof Error ? error.message : String(error),
-      },
-    };
-  }
-}
-
-// The worker API exposed to the main thread
-const workerApi = {
-  processLargeText,
-  hashString,
-  processJson,
-  validateRegex,
-
-  // Utility: Check if worker is responsive
-  ping: () => "pong",
-
-  // Get worker capabilities
-  getCapabilities: () => ({
-    subtleCrypto: typeof crypto?.subtle !== "undefined",
-    textEncoder: typeof TextEncoder !== "undefined",
-    performance: typeof performance !== "undefined",
-  }),
-};
-
-// Expose the API via Comlink
-expose(workerApi);
diff --git a/apps/web/styles/accessibility.css b/apps/web/styles/accessibility.css
index d72dcb7..00e9e23 100644
--- a/apps/web/styles/accessibility.css
+++ b/apps/web/styles/accessibility.css
@@ -20,11 +20,6 @@
   .border {
     border-width: 2px;
   }
-
-  /* Ensure text has sufficient contrast */
-  .text-muted-foreground {
-    opacity: 0.8;
-  }
 }
 
 /* Reduced motion support */
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 3d552a7..6f5b311 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -46,9 +46,9 @@
     "fast-xml-parser": "5.5.9",
     "hjson": "3.2.2",
     "ini": "4.1.0",
-    "isomorphic-dompurify": "3.0.0",
+    "isomorphic-dompurify": "3.9.0",
     "jmespath": "0.16.0",
-    "js-yaml": "4.1.0",
+    "js-yaml": "4.1.1",
     "json5": "2.2.3",
     "marked": "17.0.0",
     "papaparse": "5.4.0",
diff --git a/packages/tools/scripts/generate-tool.ts b/packages/tools/scripts/generate-tool.ts
index 9a88cd2..220f86c 100644
--- a/packages/tools/scripts/generate-tool.ts
+++ b/packages/tools/scripts/generate-tool.ts
@@ -210,8 +210,8 @@ function generateTestFile(options: ToolOptions): string {
   const optionsTest = noOptions
     ? ""
     : `
-    it("should handle options", () => {
-      const result = executeTool(
+    it("should handle options", async () => {
+      const result = await executeTool(
         ${toolName},
         { input: "test" },
         { /* options */ }
@@ -227,15 +227,15 @@ import { executeTool } from "../../../src/core/executor";
 
 describe("${toolName}", () => {
   describe("execute", () => {
-    it("should process valid input", () => {
-      const result = executeTool(${toolName}, { input: "test" });
+    it("should process valid input", async () => {
+      const result = await executeTool(${toolName}, { input: "test" });
 
       expect(result.success).toBe(true);
       expect(result.data?.output).toBeDefined();
     });
 ${optionsTest}
-    it("should return error for empty input", () => {
-      const result = executeTool(${toolName}, { input: "" });
+    it("should return error for empty input", async () => {
+      const result = await executeTool(${toolName}, { input: "" });
 
       // Adjust based on tool behavior
       expect(result.success).toBe(true);
diff --git a/packages/tools/src/core/execution-meta.ts b/packages/tools/src/core/execution-meta.ts
index 7d934e3..e0a7bde 100644
--- a/packages/tools/src/core/execution-meta.ts
+++ b/packages/tools/src/core/execution-meta.ts
@@ -72,11 +72,15 @@ export function getByteSize(value: unknown): number {
     return new TextEncoder().encode(value).length;
   }
 
-  // For objects, stringify and measure
+  // For objects, stringify and measure. If the value cannot be serialized
+  // (circular reference, BigInt, etc.) or is so large that stringification
+  // itself would blow memory, fail safe by reporting Infinity so the caller's
+  // 5 MB input-size guard rejects the input rather than silently admitting it.
   try {
     const str = JSON.stringify(value);
+    if (str === undefined) return Number.POSITIVE_INFINITY;
     return new TextEncoder().encode(str).length;
   } catch {
-    return 0;
+    return Number.POSITIVE_INFINITY;
   }
 }
diff --git a/packages/tools/src/core/executor.ts b/packages/tools/src/core/executor.ts
index 088a5b2..bd46e41 100644
--- a/packages/tools/src/core/executor.ts
+++ b/packages/tools/src/core/executor.ts
@@ -85,12 +85,16 @@ export async function executeTool<T = unknown>(
   const startTime = performance.now();
   const inputSizeBytes = getByteSize(input);
 
-  // Validate input
-  const inputResult = validateInput(tool.inputSchema, input);
-  if (!inputResult.success) {
+  // Pre-execution input size check before any validation to prevent
+  // Zod from allocating/parsing pathologically-large inputs.
+  const MAX_INPUT_SIZE_BYTES = 5 * 1024 * 1024;
+  if (inputSizeBytes > MAX_INPUT_SIZE_BYTES) {
     return {
       success: false,
-      error: inputResult.error,
+      error: createToolError({
+        code: EXEC_FAILED,
+        message: `Input too large (${(inputSizeBytes / 1024 / 1024).toFixed(1)}MB). Maximum allowed: 5MB.`,
+      }),
       meta: createExecutionMeta({
         startTime,
         endTime: performance.now(),
@@ -102,12 +106,12 @@ export async function executeTool<T = unknown>(
     };
   }
 
-  // Validate options if schema exists
-  const optionsResult = validateOptions(tool.optionsSchema, options);
-  if (!optionsResult.success) {
+  // Validate input
+  const inputResult = validateInput(tool.inputSchema, input);
+  if (!inputResult.success) {
     return {
       success: false,
-      error: optionsResult.error,
+      error: inputResult.error,
       meta: createExecutionMeta({
         startTime,
         endTime: performance.now(),
@@ -119,16 +123,12 @@ export async function executeTool<T = unknown>(
     };
   }
 
-  // Pre-execution input size check to prevent memory exhaustion
-  // Reject inputs larger than 5MB before tool execution
-  const MAX_INPUT_SIZE_BYTES = 5 * 1024 * 1024;
-  if (inputSizeBytes > MAX_INPUT_SIZE_BYTES) {
+  // Validate options if schema exists
+  const optionsResult = validateOptions(tool.optionsSchema, options);
+  if (!optionsResult.success) {
     return {
       success: false,
-      error: createToolError({
-        code: EXEC_FAILED,
-        message: `Input too large (${(inputSizeBytes / 1024 / 1024).toFixed(1)}MB). Maximum allowed: 5MB.`,
-      }),
+      error: optionsResult.error,
       meta: createExecutionMeta({
         startTime,
         endTime: performance.now(),
diff --git a/packages/tools/src/tools/color/random-color.ts b/packages/tools/src/tools/color/random-color.ts
index 587f844..b9d9a58 100644
--- a/packages/tools/src/tools/color/random-color.ts
+++ b/packages/tools/src/tools/color/random-color.ts
@@ -51,10 +51,12 @@ export const randomColor = defineTool({
     const count = input.count ?? 5;
     const format = input.format ?? "hex";
     const colors: string[] = [];
+    const buf = new Uint8Array(3);
     for (let i = 0; i < count; i++) {
-      const r = Math.floor(Math.random() * 256);
-      const g = Math.floor(Math.random() * 256);
-      const b = Math.floor(Math.random() * 256);
+      crypto.getRandomValues(buf);
+      const r = buf[0]!;
+      const g = buf[1]!;
+      const b = buf[2]!;
       switch (format) {
         case "hex":
           colors.push(rgbToHex({ r, g, b }));
diff --git a/packages/tools/src/tools/crypto/aes-decrypt.ts b/packages/tools/src/tools/crypto/aes-decrypt.ts
index 117bad3..10d069a 100644
--- a/packages/tools/src/tools/crypto/aes-decrypt.ts
+++ b/packages/tools/src/tools/crypto/aes-decrypt.ts
@@ -98,7 +98,7 @@ export const aesDecrypt = defineTool({
       {
         name: "PBKDF2",
         salt,
-        iterations: 100000,
+        iterations: 600000,
         hash: "SHA-256",
       },
       passwordKey,
diff --git a/packages/tools/src/tools/crypto/aes-encrypt.ts b/packages/tools/src/tools/crypto/aes-encrypt.ts
index 8aa7504..a34e63b 100644
--- a/packages/tools/src/tools/crypto/aes-encrypt.ts
+++ b/packages/tools/src/tools/crypto/aes-encrypt.ts
@@ -73,7 +73,7 @@ export const aesEncrypt = defineTool({
       {
         name: "PBKDF2",
         salt,
-        iterations: 100000,
+        iterations: 600000,
         hash: "SHA-256",
       },
       passwordKey,
diff --git a/packages/tools/src/tools/html/playground.ts b/packages/tools/src/tools/html/playground.ts
index efaf83d..5d01cb2 100644
--- a/packages/tools/src/tools/html/playground.ts
+++ b/packages/tools/src/tools/html/playground.ts
@@ -134,6 +134,7 @@ export const htmlPlayground = defineTool({
     ui: {
       inputLanguage: "html",
       outputRenderer: "html",
+      htmlPreviewAllowScripts: true,
     },
   },
   inputSchema,
diff --git a/packages/tools/src/tools/jwt/fernet-encoder.ts b/packages/tools/src/tools/jwt/fernet-encoder.ts
index 7218ef8..ea6df35 100644
--- a/packages/tools/src/tools/jwt/fernet-encoder.ts
+++ b/packages/tools/src/tools/jwt/fernet-encoder.ts
@@ -7,7 +7,7 @@ function base64UrlEncode(data: Uint8Array): string {
   for (let i = 0; i < data.length; i++) {
     binary += String.fromCharCode(data[i]!);
   }
-  return btoa(binary);
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_");
 }
 
 const inputSchema = z.object({
diff --git a/packages/tools/src/tools/jwt/jwt-decoder.ts b/packages/tools/src/tools/jwt/jwt-decoder.ts
index 55fc586..2dfda21 100644
--- a/packages/tools/src/tools/jwt/jwt-decoder.ts
+++ b/packages/tools/src/tools/jwt/jwt-decoder.ts
@@ -71,7 +71,7 @@ export const jwtDecoder = defineTool({
     id: "jwt/jwt-decoder",
     name: "JWT Decoder",
     description:
-      "Free online JWT decoder — decode JWT tokens into header, payload, and signature instantly in your browser. No data is stored. Parses base64url-encoded header and payload claims, displays the raw signature.",
+      "Free online JWT decoder — decode JWT tokens into header, payload, and signature instantly in your browser. No data is stored. Parses base64url-encoded header and payload claims, displays the raw signature. Note: signatures are NOT verified — use the JWT Debugger to check expiry and algorithm.",
     category: "jwt",
     tier: ToolTier.CLIENT,
     keywords: [
diff --git a/packages/tools/src/tools/math/random-number-generator.ts b/packages/tools/src/tools/math/random-number-generator.ts
index 93e90c1..6927a1b 100644
--- a/packages/tools/src/tools/math/random-number-generator.ts
+++ b/packages/tools/src/tools/math/random-number-generator.ts
@@ -45,10 +45,35 @@ export const randomNumberGenerator = defineTool({
     const count = input.count ?? 1;
     const integers = input.integers ?? true;
     if (min > max) throw new Error("Min must be <= max");
+
+    // Use crypto.getRandomValues for unbiased sampling. Math.random() with
+    // Math.round() has well-known boundary bias (values exactly at min/max
+    // appear at half the expected rate) which users of a "Random Number
+    // Generator" tool reasonably do not expect.
     const nums: number[] = [];
-    for (let i = 0; i < count; i++) {
-      const r = Math.random() * (max - min) + min;
-      nums.push(integers ? Math.round(r) : parseFloat(r.toFixed(6)));
+    if (integers) {
+      const lo = Math.ceil(min);
+      const hi = Math.floor(max);
+      const range = hi - lo + 1;
+      if (range <= 0) throw new Error("No integers in the given range");
+      // Rejection sampling over a uint32 window to avoid modulo bias.
+      const maxUnbiased = Math.floor(0x1_0000_0000 / range) * range;
+      const buf = new Uint32Array(1);
+      for (let i = 0; i < count; i++) {
+        let r: number;
+        do {
+          crypto.getRandomValues(buf);
+          r = buf[0]!;
+        } while (r >= maxUnbiased);
+        nums.push(lo + (r % range));
+      }
+    } else {
+      const buf = new Uint32Array(1);
+      for (let i = 0; i < count; i++) {
+        crypto.getRandomValues(buf);
+        const frac = buf[0]! / 0x1_0000_0000;
+        nums.push(parseFloat((frac * (max - min) + min).toFixed(6)));
+      }
     }
     return { output: nums.join(", ") };
   },
diff --git a/packages/tools/src/tools/svg/svg-viewer.ts b/packages/tools/src/tools/svg/svg-viewer.ts
index bfe64b6..95f8e53 100644
--- a/packages/tools/src/tools/svg/svg-viewer.ts
+++ b/packages/tools/src/tools/svg/svg-viewer.ts
@@ -1,3 +1,4 @@
+import DOMPurify from "isomorphic-dompurify";
 import { z } from "zod";
 import { defineTool } from "../../core/define-tool";
 import { ToolTier } from "../../types";
@@ -13,60 +14,16 @@ const outputSchema = z.object({
 type Input = z.infer<typeof inputSchema>;
 type Output = z.infer<typeof outputSchema>;
 
-// Dangerous SVG elements that can execute code
-const DANGEROUS_ELEMENTS = [
-  "script",
-  "foreignobject",
-  "iframe",
-  "object",
-  "embed",
-  "applet",
-  "form",
-  "input",
-  "textarea",
-  "select",
-  "button",
-];
-
-// Event handler attributes (on*)
-const EVENT_HANDLER_RE = /\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi;
-
-// Dangerous attribute values (javascript:, data:, vbscript:)
-const DANGEROUS_ATTR_RE =
-  /\s+(href|xlink:href|src|action|formaction)\s*=\s*(?:"(?:javascript|data|vbscript):[^"]*"|'(?:javascript|data|vbscript):[^']*')/gi;
-
-// <use> with external references
-const DANGEROUS_USE_RE =
-  /\s+(href|xlink:href)\s*=\s*(?:"(?:https?:|\/\/)[^"]*"|'(?:https?:|\/\/)[^']*')/gi;
-
-// set/animate with dangerous attributes
-const DANGEROUS_ANIMATE_ATTR_RE = /attributeName\s*=\s*(?:"on\w+"|'on\w+')/gi;
-
 function sanitizeSvg(svg: string): string {
-  let sanitized = svg;
-
-  // Remove dangerous elements and their contents
-  for (const tag of DANGEROUS_ELEMENTS) {
-    const tagRegex = new RegExp(
-      `<${tag}[\\s>][\\s\\S]*?<\\/${tag}\\s*>|<${tag}[^>]*\\/?>`,
-      "gi"
-    );
-    sanitized = sanitized.replace(tagRegex, "");
-  }
-
-  // Remove all event handler attributes (onclick, onload, onerror, etc.)
-  sanitized = sanitized.replace(EVENT_HANDLER_RE, "");
-
-  // Remove dangerous URI schemes in href/src/action attributes
-  sanitized = sanitized.replace(DANGEROUS_ATTR_RE, "");
-
-  // Remove external references in <use> elements
-  sanitized = sanitized.replace(DANGEROUS_USE_RE, "");
-
-  // Remove animate/set elements targeting event handler attributes
-  sanitized = sanitized.replace(DANGEROUS_ANIMATE_ATTR_RE, "");
-
-  return sanitized;
+  // Use DOMPurify's SVG profile — a well-maintained sanitizer handles the
+  // long tail of bypasses (HTML-entity-encoded javascript:, CDATA-wrapped
+  // scripts, CSS url(javascript:...), nested comments, foreignObject, etc.)
+  // that a regex-based allowlist cannot.
+  return DOMPurify.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    FORBID_TAGS: ["foreignObject", "script"],
+    FORBID_ATTR: ["onload", "onerror", "onclick"],
+  });
 }
 
 function execute(input: Input): Output {
diff --git a/packages/tools/src/types/tool-ui.ts b/packages/tools/src/types/tool-ui.ts
index a6d84bb..1258b87 100644
--- a/packages/tools/src/types/tool-ui.ts
+++ b/packages/tools/src/types/tool-ui.ts
@@ -76,6 +76,16 @@ export interface ToolUIConfig {
    * @default 5242880 (5MB)
    */
   maxFileSize: number;
+
+  /**
+   * When `outputRenderer` is "html", controls whether the preview iframe
+   * permits script execution and form submission. Defaults to `false` so
+   * that static content generators (SVG, QR codes, meta tags, etc.)
+   * cannot be escalated to XSS via a sanitizer bypass. Opt-in only for
+   * tools whose output is intended to be interactive (e.g. HTML playground).
+   * @default false
+   */
+  htmlPreviewAllowScripts?: boolean;
 }
 
 /**
@@ -87,6 +97,7 @@ export const DEFAULT_UI_CONFIG: ToolUIConfig = {
   allowFileUpload: true,
   acceptedFileTypes: ["text/*", "application/json"],
   maxFileSize: 5 * 1024 * 1024, // 5MB
+  htmlPreviewAllowScripts: false,
 };
 
 /**
diff --git a/packages/tools/tests/core/execution-meta.test.ts b/packages/tools/tests/core/execution-meta.test.ts
index 485d6bd..3266416 100644
--- a/packages/tools/tests/core/execution-meta.test.ts
+++ b/packages/tools/tests/core/execution-meta.test.ts
@@ -105,10 +105,13 @@ describe("getByteSize", () => {
     expect(getByteSize(num)).toBe(expectedSize);
   });
 
-  it("should return 0 for circular reference objects", () => {
+  it("should return Infinity for circular reference objects", () => {
+    // Circular refs can't be JSON.stringify'd. Returning Infinity makes the
+    // executor's 5 MB input-size guard reject the input rather than silently
+    // admit it (which would then blow up inside Zod/the tool).
     const circular: Record<string, unknown> = {};
     circular.self = circular;
-    expect(getByteSize(circular)).toBe(0);
+    expect(getByteSize(circular)).toBe(Number.POSITIVE_INFINITY);
   });
 
   it("should return correct size for empty string", () => {
diff --git a/packages/tools/tests/core/executor.test.ts b/packages/tools/tests/core/executor.test.ts
index 4ecb699..5a73efc 100644
--- a/packages/tools/tests/core/executor.test.ts
+++ b/packages/tools/tests/core/executor.test.ts
@@ -315,4 +315,74 @@ describe("executeTool", () => {
       expect(result.error.code).toBe("INPUT_INVALID_TYPE");
     }
   });
+
+  describe("input size guard", () => {
+    it("should reject inputs larger than 5MB with EXEC_FAILED", async () => {
+      const oversized = "x".repeat(5 * 1024 * 1024 + 10);
+      const result = await executeTool(echoTool, { message: oversized });
+
+      expect(result.success).toBe(false);
+      if (!result.success) {
+        expect(result.error.code).toBe("EXEC_FAILED");
+        expect(result.error.message).toContain("Input too large");
+      }
+    });
+
+    it("should reject unserializable inputs (circular refs) as too large", async () => {
+      // JSON.stringify throws on circular refs; getByteSize returns Infinity
+      // so the size guard rejects the input before Zod ever sees it.
+      type Circ = { self?: Circ };
+      const circular: Circ = {};
+      circular.self = circular;
+      const result = await executeTool(echoTool, circular);
+
+      expect(result.success).toBe(false);
+      if (!result.success) {
+        expect(result.error.code).toBe("EXEC_FAILED");
+      }
+    });
+  });
+
+  describe("timeout enforcement", () => {
+    it("should return EXEC_TIMEOUT when an async tool exceeds the tier budget", async () => {
+      const stuckTool = defineTool({
+        meta: {
+          id: "test/stuck",
+          name: "Stuck",
+          description: "Never resolves",
+          category: "test",
+          tier: ToolTier.CLIENT,
+          keywords: ["stuck"],
+        },
+        inputSchema: z.object({ input: z.string() }),
+        outputSchema: z.object({ output: z.string() }),
+        // Returns a never-resolving promise; Promise.race should lose to
+        // the 5 s timeout. We don't need vi.useFakeTimers because the
+        // timeout promise is built from setTimeout, which vitest advances
+        // only if fake timers are active. So set a lower timeout via a
+        // custom tier? Instead, assert behavior with a tiny stub tool.
+        execute: () => new Promise(() => {}),
+      });
+
+      // Install a short fake timeout by racing ourselves. Safer approach:
+      // just wait using vi's fake timers. See vi docs.
+      const { vi } = await import("vitest");
+      vi.useFakeTimers();
+      try {
+        const promise = executeTool(stuckTool, { input: "x" });
+        await vi.advanceTimersByTimeAsync(5001);
+        const result = await promise;
+        expect(result.success).toBe(false);
+        if (!result.success) {
+          expect(result.error.code).toBe("EXEC_TIMEOUT");
+          expect(
+            (result.error.details as { timeoutMs?: number } | undefined)
+              ?.timeoutMs
+          ).toBe(5000);
+        }
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  });
 });
diff --git a/packages/tools/tests/core/registry.test.ts b/packages/tools/tests/core/registry.test.ts
index fbd1ea6..d25194f 100644
--- a/packages/tools/tests/core/registry.test.ts
+++ b/packages/tools/tests/core/registry.test.ts
@@ -73,6 +73,52 @@ describe("ToolRegistry", () => {
       registry.registerTool(testTool3);
       expect(registry.getAll()).toHaveLength(3);
     });
+
+    it("should throw for a tool ID that does not match 'category/slug'", () => {
+      // `defineTool` also validates the id, so we construct the Tool shape
+      // directly to exercise the registry guard in isolation.
+      const badIdTool = {
+        meta: {
+          id: "Bad-ID",
+          name: "Bad",
+          description: "Bad",
+          category: "text",
+          tier: ToolTier.CLIENT,
+          keywords: ["bad"],
+        },
+        inputSchema: z.object({ input: z.string() }),
+        outputSchema: z.object({ output: z.string() }),
+        execute: (input: { input: string }) => ({ output: input.input }),
+      } as unknown as Parameters<ToolRegistry["registerTool"]>[0];
+      expect(() => registry.registerTool(badIdTool)).toThrow(/Invalid tool ID/);
+    });
+
+    it("should throw when the category portion isn't in CATEGORIES", () => {
+      const orphanTool = {
+        meta: {
+          id: "notacategory/thing",
+          name: "Orphan",
+          description: "Orphan",
+          category: "notacategory",
+          tier: ToolTier.CLIENT,
+          keywords: ["orphan"],
+        },
+        inputSchema: z.object({ input: z.string() }),
+        outputSchema: z.object({ output: z.string() }),
+        execute: (input: { input: string }) => ({ output: input.input }),
+      } as unknown as Parameters<ToolRegistry["registerTool"]>[0];
+      expect(() => registry.registerTool(orphanTool)).toThrow(
+        /Invalid category 'notacategory'/
+      );
+    });
+  });
+
+  describe("getByCategory validation", () => {
+    it("should throw for a category id with invalid characters", () => {
+      expect(() => registry.getByCategory("BAD!")).toThrow(
+        /Invalid category ID/
+      );
+    });
   });
 
   describe("get", () => {
diff --git a/packages/tools/tests/tools/jwt/fernet-encoder.test.ts b/packages/tools/tests/tools/jwt/fernet-encoder.test.ts
index 25ec9b1..10eaf6e 100644
--- a/packages/tools/tests/tools/jwt/fernet-encoder.test.ts
+++ b/packages/tools/tests/tools/jwt/fernet-encoder.test.ts
@@ -34,8 +34,9 @@ describe("Fernet Encoder", () => {
     expect(result.success).toBe(true);
     if (result.success) {
       const token = String((result.data as Record<string, unknown>).token);
-      // Decode base64 token
-      const binary = atob(token);
+      // Decode url-safe base64 token (Fernet spec: + → -, / → _)
+      const stdB64 = token.replace(/-/g, "+").replace(/_/g, "/");
+      const binary = atob(stdB64);
       const bytes = new Uint8Array(binary.length);
       for (let i = 0; i < binary.length; i++) {
         bytes[i] = binary.charCodeAt(i);
@@ -48,7 +49,7 @@ describe("Fernet Encoder", () => {
     }
   });
 
-  it("should use a provided key", async () => {
+  it("should use a provided key (accepts either url-safe or standard base64)", async () => {
     // Generate a 32-byte key in base64
     const keyBytes = new Uint8Array(32);
     crypto.getRandomValues(keyBytes);
@@ -64,8 +65,11 @@ describe("Fernet Encoder", () => {
     });
     expect(result.success).toBe(true);
     if (result.success) {
-      // The returned key should match the provided key
-      expect((result.data as Record<string, unknown>).key).toBe(keyBase64);
+      // The output key is emitted as url-safe base64 per Fernet spec.
+      // Compare after normalizing to standard base64.
+      const emittedKey = String((result.data as Record<string, unknown>).key);
+      const emittedStd = emittedKey.replace(/-/g, "+").replace(/_/g, "/");
+      expect(emittedStd).toBe(keyBase64);
     }
   });
 });
diff --git a/packages/tools/tests/tools/register.test.ts b/packages/tools/tests/tools/register.test.ts
index 9bfca40..06b5580 100644
--- a/packages/tools/tests/tools/register.test.ts
+++ b/packages/tools/tests/tools/register.test.ts
@@ -1,5 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { getToolCount } from "../../src/tools/register";
+import { getAllTools } from "../../src/core/registry";
+import { CATEGORIES } from "../../src/categories/categories";
 
 describe("register", () => {
   describe("getToolCount", () => {
@@ -9,4 +11,30 @@ describe("register", () => {
       expect(count).toBeGreaterThanOrEqual(90);
     });
   });
+
+  describe("registered tool invariants", () => {
+    const tools = getAllTools();
+    const categoryIds = new Set(CATEGORIES.map((c) => c.id));
+
+    it("every registered tool's id prefix matches its meta.category and a known CATEGORIES entry", () => {
+      for (const tool of tools) {
+        const prefix = tool.meta.id.split("/")[0];
+        expect(prefix).toBe(tool.meta.category);
+        expect(categoryIds.has(tool.meta.category)).toBe(true);
+      }
+    });
+
+    it("every tool id is unique across the registry", () => {
+      const ids = tools.map((t) => t.meta.id);
+      expect(new Set(ids).size).toBe(ids.length);
+    });
+
+    it("every CATEGORIES entry has at least one registered tool", () => {
+      const populated = new Set(tools.map((t) => t.meta.category));
+      const empty = CATEGORIES.filter((c) => !populated.has(c.id)).map(
+        (c) => c.id
+      );
+      expect(empty).toEqual([]);
+    });
+  });
 });
diff --git a/packages/tools/tests/tools/security/worker-code-execution.test.ts b/packages/tools/tests/tools/security/worker-code-execution.test.ts
deleted file mode 100644
index f9dadad..0000000
--- a/packages/tools/tests/tools/security/worker-code-execution.test.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { readFileSync, existsSync } from "fs";
-import { resolve } from "path";
-
-describe("Worker Security: No arbitrary code execution", () => {
-  const workerPath = resolve(
-    __dirname,
-    "../../../../../apps/web/public/workers/tool-worker.js"
-  );
-
-  const workerExists = existsSync(workerPath);
-  let workerSource: string = "";
-
-  if (workerExists) {
-    try {
-      workerSource = readFileSync(workerPath, "utf-8");
-    } catch {
-      workerSource = "";
-    }
-  }
-
-  it("should have a non-empty worker file to validate", () => {
-    if (!workerExists) {
-      // Worker file may not exist in all build stages - skip gracefully
-      // but warn so CI knows this test was not actually validating anything
-      console.warn(
-        `WARN: Worker file not found at ${workerPath}. ` +
-          "Security assertions were skipped. Run after build to validate."
-      );
-      return;
-    }
-    expect(workerSource.length).toBeGreaterThan(0);
-  });
-
-  it("should not contain new Function() constructor", () => {
-    if (!workerExists) return;
-    expect(workerSource).not.toMatch(/new\s+Function\s*\(/);
-  });
-
-  it("should not contain eval()", () => {
-    if (!workerExists) return;
-    expect(workerSource).not.toMatch(/\beval\s*\(/);
-  });
-
-  it("should not expose executeSimple in the worker API", () => {
-    if (!workerExists) return;
-    expect(workerSource).not.toMatch(/executeSimple/);
-  });
-});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52c1e66..252e27c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -176,8 +176,8 @@ importers:
         specifier: 4.1.0
         version: 4.1.0
       dompurify:
-        specifier: 3.3.3
-        version: 3.3.3
+        specifier: 3.4.0
+        version: 3.4.0
       framer-motion:
         specifier: 12.33.0
         version: 12.33.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -344,14 +344,14 @@ importers:
         specifier: 4.1.0
         version: 4.1.0
       isomorphic-dompurify:
-        specifier: 3.0.0
-        version: 3.0.0
+        specifier: 3.9.0
+        version: 3.9.0
       jmespath:
         specifier: 0.16.0
         version: 0.16.0
       js-yaml:
-        specifier: 4.1.0
-        version: 4.1.0
+        specifier: 4.1.1
+        version: 4.1.1
       json5:
         specifier: 2.2.3
         version: 2.2.3
@@ -406,7 +406,7 @@ importers:
         version: 5.0.4
       "@vitest/coverage-v8":
         specifier: "catalog:"
-        version: 4.1.2(vitest@4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.1)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)))
+        version: 4.1.2(vitest@4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.2)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)))
       happy-dom:
         specifier: 20.8.9
         version: 20.8.9
@@ -421,7 +421,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: "catalog:"
-        version: 4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.1)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.2)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
 
 packages:
   "@acemir/cssom@0.9.30":
@@ -430,12 +430,6 @@ packages:
         integrity: sha512-9CnlMCI0LmCIq0olalQqdWrJHPzm0/tw3gzOA9zJSgvFX7Xau3D24mAGa4BtwxwY69nsuJW6kQqqCzf/mEcQgg==,
       }
 
-  "@acemir/cssom@0.9.31":
-    resolution:
-      {
-        integrity: sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==,
-      }
-
   "@adobe/css-tools@4.4.4":
     resolution:
       {
@@ -461,10 +455,10 @@ packages:
         integrity: sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==,
       }
 
-  "@asamuzakjp/css-color@5.1.1":
+  "@asamuzakjp/css-color@5.1.11":
     resolution:
       {
-        integrity: sha512-iGWN8E45Ws0XWx3D44Q1t6vX2LqhCKcwfmwBYCDsFrYFS6m4q/Ks61L2veETaLv+ckDC6+dTETJoaAAb7VjLiw==,
+        integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==,
       }
     engines: { node: ^20.19.0 || ^22.12.0 || >=24.0.0 }
 
@@ -474,16 +468,17 @@ packages:
         integrity: sha512-hBaJER6A9MpdG3WgdlOolHmbOYvSk46y7IQN/1+iqiCuUu6iWdQrs9DGKF8ocqsEqWujWf/V7b7vaDgiUmIvUg==,
       }
 
-  "@asamuzakjp/dom-selector@6.8.1":
+  "@asamuzakjp/dom-selector@7.1.0":
     resolution:
       {
-        integrity: sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==,
+        integrity: sha512-ASf825+5vsGuYWoyFyNsex2mNtPTXpCvYTR942+w/eNw7PqS0Lhl/PE1hC7bajneI3m/Oxi+yrP3vTOPxfwM8A==,
       }
+    engines: { node: ^20.19.0 || ^22.12.0 || >=24.0.0 }
 
-  "@asamuzakjp/dom-selector@7.0.4":
+  "@asamuzakjp/generational-cache@1.0.1":
     resolution:
       {
-        integrity: sha512-jXR6x4AcT3eIrS2fSNAwJpwirOkGcd+E7F7CP3zjdTqz9B/2huHOL8YJZBgekKwLML+u7qB/6P1LXQuMScsx0w==,
+        integrity: sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==,
       }
     engines: { node: ^20.19.0 || ^22.12.0 || >=24.0.0 }
 
@@ -721,10 +716,10 @@ packages:
       "@csstools/css-parser-algorithms": ^3.0.5
       "@csstools/css-tokenizer": ^3.0.4
 
-  "@csstools/css-calc@3.1.1":
+  "@csstools/css-calc@3.2.0":
     resolution:
       {
-        integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==,
+        integrity: sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==,
       }
     engines: { node: ">=20.19.0" }
     peerDependencies:
@@ -741,10 +736,10 @@ packages:
       "@csstools/css-parser-algorithms": ^3.0.5
       "@csstools/css-tokenizer": ^3.0.4
 
-  "@csstools/css-color-parser@4.0.2":
+  "@csstools/css-color-parser@4.1.0":
     resolution:
       {
-        integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==,
+        integrity: sha512-U0KhLYmy2GVj6q4T3WaAe6NPuFYCPQoE3b0dRGxejWDgcPp8TP7S5rVdM5ZrFaqu4N67X8YaPBw14dQSYx3IyQ==,
       }
     engines: { node: ">=20.19.0" }
     peerDependencies:
@@ -4568,13 +4563,6 @@ packages:
       }
     engines: { node: ">=20" }
 
-  cssstyle@6.2.0:
-    resolution:
-      {
-        integrity: sha512-Fm5NvhYathRnXNVndkUsCCuR63DCLVVwGOOwQw782coXFi5HhkXdu289l59HlXZBawsyNccXfWRYvLzcDCdDig==,
-      }
-    engines: { node: ">=20" }
-
   csstype@3.2.3:
     resolution:
       {
@@ -5046,10 +5034,10 @@ packages:
         integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==,
       }
 
-  dompurify@3.3.3:
+  dompurify@3.4.0:
     resolution:
       {
-        integrity: sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==,
+        integrity: sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==,
       }
 
   dotenv@17.3.1:
@@ -6220,12 +6208,12 @@ packages:
         integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==,
       }
 
-  isomorphic-dompurify@3.0.0:
+  isomorphic-dompurify@3.9.0:
     resolution:
       {
-        integrity: sha512-5K+MYP7Nrg74+Bi+QmQGzQ/FgEOyVHWsN8MuJy5wYQxxBRxPnWsD25Tjjt5FWYhan3OQ+vNLubyNJH9dfG03lQ==,
+        integrity: sha512-3REwJAnIqjWO7qbfyKWMBI7hUHFhqUor7weFG3WbJW6Enq3V7cx60QuurWjGUXxbX57Iy4RJIkAZFObAqiqpxw==,
       }
-    engines: { node: ^20.19.0 || ^22.12.0 || >=24.0.0 }
+    engines: { node: ^20.19.0 || ^22.13.0 || >=24.0.0 }
 
   istanbul-lib-coverage@3.2.2:
     resolution:
@@ -6288,13 +6276,6 @@ packages:
         integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==,
       }
 
-  js-yaml@4.1.0:
-    resolution:
-      {
-        integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==,
-      }
-    hasBin: true
-
   js-yaml@4.1.1:
     resolution:
       {
@@ -6320,22 +6301,10 @@ packages:
       canvas:
         optional: true
 
-  jsdom@28.1.0:
-    resolution:
-      {
-        integrity: sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==,
-      }
-    engines: { node: ^20.19.0 || ^22.12.0 || >=24.0.0 }
-    peerDependencies:
-      canvas: ^3.0.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-
-  jsdom@29.0.1:
+  jsdom@29.0.2:
     resolution:
       {
-        integrity: sha512-z6JOK5gRO7aMybVq/y/MlIpKh8JIi68FBKMUtKkK2KH/wMSRlCxQ682d08LB9fYXplyY/UXG8P4XXTScmdjApg==,
+        integrity: sha512-9VnGEBosc/ZpwyOsJBCQ/3I5p7Q5ngOY14a9bf5btenAORmZfDse1ZEheMiWcJ3h81+Fv7HmJFdS0szo/waF2w==,
       }
     engines: { node: ^20.19.0 || ^22.13.0 || >=24.0.0 }
     peerDependencies:
@@ -9313,8 +9282,6 @@ packages:
 snapshots:
   "@acemir/cssom@0.9.30": {}
 
-  "@acemir/cssom@0.9.31": {}
-
   "@adobe/css-tools@4.4.4": {}
 
   "@alloc/quick-lru@5.2.0": {}
@@ -9332,13 +9299,13 @@ snapshots:
       "@csstools/css-tokenizer": 3.0.4
       lru-cache: 11.2.7
 
-  "@asamuzakjp/css-color@5.1.1":
+  "@asamuzakjp/css-color@5.1.11":
     dependencies:
-      "@csstools/css-calc": 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      "@csstools/css-color-parser": 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      "@asamuzakjp/generational-cache": 1.0.1
+      "@csstools/css-calc": 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      "@csstools/css-color-parser": 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       "@csstools/css-parser-algorithms": 4.0.0(@csstools/css-tokenizer@4.0.0)
       "@csstools/css-tokenizer": 4.0.0
-      lru-cache: 11.2.7
 
   "@asamuzakjp/dom-selector@6.7.6":
     dependencies:
@@ -9348,22 +9315,15 @@ snapshots:
       is-potential-custom-element-name: 1.0.1
       lru-cache: 11.2.7
 
-  "@asamuzakjp/dom-selector@6.8.1":
-    dependencies:
-      "@asamuzakjp/nwsapi": 2.3.9
-      bidi-js: 1.0.3
-      css-tree: 3.1.0
-      is-potential-custom-element-name: 1.0.1
-      lru-cache: 11.2.7
-
-  "@asamuzakjp/dom-selector@7.0.4":
+  "@asamuzakjp/dom-selector@7.1.0":
     dependencies:
+      "@asamuzakjp/generational-cache": 1.0.1
       "@asamuzakjp/nwsapi": 2.3.9
       bidi-js: 1.0.3
       css-tree: 3.2.1
       is-potential-custom-element-name: 1.0.1
-      lru-cache: 11.2.7
-    optional: true
+
+  "@asamuzakjp/generational-cache@1.0.1": {}
 
   "@asamuzakjp/nwsapi@2.3.9": {}
 
@@ -9519,7 +9479,7 @@ snapshots:
       "@csstools/css-parser-algorithms": 3.0.5(@csstools/css-tokenizer@3.0.4)
       "@csstools/css-tokenizer": 3.0.4
 
-  "@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)":
+  "@csstools/css-calc@3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)":
     dependencies:
       "@csstools/css-parser-algorithms": 4.0.0(@csstools/css-tokenizer@4.0.0)
       "@csstools/css-tokenizer": 4.0.0
@@ -9531,10 +9491,10 @@ snapshots:
       "@csstools/css-parser-algorithms": 3.0.5(@csstools/css-tokenizer@3.0.4)
       "@csstools/css-tokenizer": 3.0.4
 
-  "@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)":
+  "@csstools/css-color-parser@4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)":
     dependencies:
       "@csstools/color-helpers": 6.0.2
-      "@csstools/css-calc": 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      "@csstools/css-calc": 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       "@csstools/css-parser-algorithms": 4.0.0(@csstools/css-tokenizer@4.0.0)
       "@csstools/css-tokenizer": 4.0.0
 
@@ -9553,7 +9513,6 @@ snapshots:
   "@csstools/css-syntax-patches-for-csstree@1.1.2(css-tree@3.2.1)":
     optionalDependencies:
       css-tree: 3.2.1
-    optional: true
 
   "@csstools/css-tokenizer@3.0.4": {}
 
@@ -11237,7 +11196,7 @@ snapshots:
       tinyrainbow: 3.1.0
       vitest: 4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@27.4.0)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
 
-  "@vitest/coverage-v8@4.1.2(vitest@4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.1)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)))":
+  "@vitest/coverage-v8@4.1.2(vitest@4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.2)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)))":
     dependencies:
       "@bcoe/v8-coverage": 1.0.2
       "@vitest/utils": 4.1.2
@@ -11249,7 +11208,7 @@ snapshots:
       obug: 2.1.1
       std-env: 4.0.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.1)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      vitest: 4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.2)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
 
   "@vitest/expect@4.1.2":
     dependencies:
@@ -11657,7 +11616,6 @@ snapshots:
     dependencies:
       mdn-data: 2.27.1
       source-map-js: 1.2.1
-    optional: true
 
   css.escape@1.5.1: {}
 
@@ -11670,13 +11628,6 @@ snapshots:
       css-tree: 3.1.0
       lru-cache: 11.2.7
 
-  cssstyle@6.2.0:
-    dependencies:
-      "@asamuzakjp/css-color": 5.1.1
-      "@csstools/css-syntax-patches-for-csstree": 1.1.2(css-tree@3.1.0)
-      css-tree: 3.1.0
-      lru-cache: 11.2.7
-
   csstype@3.2.3: {}
 
   cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1):
@@ -11961,7 +11912,7 @@ snapshots:
     optionalDependencies:
       "@types/trusted-types": 2.0.7
 
-  dompurify@3.3.3:
+  dompurify@3.4.0:
     optionalDependencies:
       "@types/trusted-types": 2.0.7
 
@@ -12830,14 +12781,13 @@ snapshots:
 
   isexe@2.0.0: {}
 
-  isomorphic-dompurify@3.0.0:
+  isomorphic-dompurify@3.9.0:
     dependencies:
-      dompurify: 3.3.3
-      jsdom: 28.1.0
+      dompurify: 3.4.0
+      jsdom: 29.0.2
     transitivePeerDependencies:
       - "@noble/hashes"
       - canvas
-      - supports-color
 
   istanbul-lib-coverage@3.2.2: {}
 
@@ -12871,10 +12821,6 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.1.0:
-    dependencies:
-      argparse: 2.0.1
-
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
@@ -12909,37 +12855,10 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  jsdom@28.1.0:
-    dependencies:
-      "@acemir/cssom": 0.9.31
-      "@asamuzakjp/dom-selector": 6.8.1
-      "@bramus/specificity": 2.4.2
-      "@exodus/bytes": 1.15.0
-      cssstyle: 6.2.0
-      data-urls: 7.0.0
-      decimal.js: 10.6.0
-      html-encoding-sniffer: 6.0.0
-      http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.6
-      is-potential-custom-element-name: 1.0.1
-      parse5: 8.0.0
-      saxes: 6.0.0
-      symbol-tree: 3.2.4
-      tough-cookie: 6.0.1
-      undici: 7.24.6
-      w3c-xmlserializer: 5.0.0
-      webidl-conversions: 8.0.1
-      whatwg-mimetype: 5.0.0
-      whatwg-url: 16.0.1
-      xml-name-validator: 5.0.0
-    transitivePeerDependencies:
-      - "@noble/hashes"
-      - supports-color
-
-  jsdom@29.0.1:
+  jsdom@29.0.2:
     dependencies:
-      "@asamuzakjp/css-color": 5.1.1
-      "@asamuzakjp/dom-selector": 7.0.4
+      "@asamuzakjp/css-color": 5.1.11
+      "@asamuzakjp/dom-selector": 7.1.0
       "@bramus/specificity": 2.4.2
       "@csstools/css-syntax-patches-for-csstree": 1.1.2(css-tree@3.2.1)
       "@exodus/bytes": 1.15.0
@@ -12961,7 +12880,6 @@ snapshots:
       xml-name-validator: 5.0.0
     transitivePeerDependencies:
       - "@noble/hashes"
-    optional: true
 
   jsesc@3.1.0: {}
 
@@ -13376,8 +13294,7 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
-  mdn-data@2.27.1:
-    optional: true
+  mdn-data@2.27.1: {}
 
   merge2@1.4.1: {}
 
@@ -13394,7 +13311,7 @@ snapshots:
       d3-sankey: 0.12.3
       dagre-d3-es: 7.0.11
       dayjs: 1.11.19
-      dompurify: 3.3.3
+      dompurify: 3.4.0
       katex: 0.16.27
       khroma: 2.1.0
       lodash-es: 4.18.1
@@ -14838,7 +14755,7 @@ snapshots:
     transitivePeerDependencies:
       - msw
 
-  vitest@4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.1)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
+  vitest@4.1.2(@types/node@22.19.9)(happy-dom@20.8.9)(jsdom@29.0.2)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       "@vitest/expect": 4.1.2
       "@vitest/mocker": 4.1.2(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
@@ -14863,7 +14780,7 @@ snapshots:
     optionalDependencies:
       "@types/node": 22.19.9
       happy-dom: 20.8.9
-      jsdom: 29.0.1
+      jsdom: 29.0.2
     transitivePeerDependencies:
       - msw
 

From 3221e6585f19d2784ae9f9a339f82cf32e97dd0d Mon Sep 17 00:00:00 2001
From: Kranthi Kumar Muppala <kranthi@Mac.lan>
Date: Sat, 18 Apr 2026 12:41:56 -0700
Subject: [PATCH 2/3] fix(csp): restore cdn.jsdelivr.net for Monaco Editor
 loader

Monaco ships via a CDN-hosted AMD loader: @monaco-editor/react fetches
https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs/loader.js at
runtime. Dropping jsdelivr from script-src broke every tool page.

Restore jsdelivr in script-src, script-src-elem, style-src (Monaco
theme CSS), font-src (Monaco fonts), and connect-src (chunked vs/*
fetches). Also pin script-src-elem explicitly so the Monaco <script>
element is checked against the right directive (browsers only fall
back to script-src when script-src-elem is absent, which made the
failure mode harder to read in the console).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/public/_headers | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/public/_headers b/apps/web/public/_headers
index e702d95..b94de60 100644
--- a/apps/web/public/_headers
+++ b/apps/web/public/_headers
@@ -4,7 +4,7 @@
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
   Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' https://cloudflareinsights.com https://api.staticforms.dev; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self'; form-action 'self' https://api.staticforms.dev
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://cdn.jsdelivr.net https://static.cloudflareinsights.com; script-src-elem 'self' 'unsafe-inline' blob: https://cdn.jsdelivr.net https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; img-src 'self' data: blob:; font-src 'self' data: https://cdn.jsdelivr.net; connect-src 'self' https://cdn.jsdelivr.net https://cloudflareinsights.com https://api.staticforms.dev; worker-src 'self' blob:; frame-ancestors 'none'; base-uri 'self'; form-action 'self' https://api.staticforms.dev
 
 # Static assets - cache for 1 year (content-hashed filenames)
 /_next/static/*

From 8bd69527b1f1b162ac890f8aee110090a4f94a78 Mon Sep 17 00:00:00 2001
From: Kranthi Kumar Muppala <kranthi@Mac.lan>
Date: Sat, 18 Apr 2026 12:50:31 -0700
Subject: [PATCH 3/3] test(ksuid): fix flaky second-boundary failure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sortability test asserted that two KSUIDs generated back-to-back
share the same 5-char second-resolution prefix. On slow CI runners the
two generations can straddle a 1-second boundary, causing the prefixes
to differ (the test comment already acknowledged this would happen
"differ by at most 1 second" but then asserted strict equality).

Assert the property that actually matters for KSUIDs — monotonic sort
order — instead of prefix equality.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../tests/tools/identifiers/ksuid-generator.test.ts    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/tools/tests/tools/identifiers/ksuid-generator.test.ts b/packages/tools/tests/tools/identifiers/ksuid-generator.test.ts
index 8cac5dd..c817971 100644
--- a/packages/tools/tests/tools/identifiers/ksuid-generator.test.ts
+++ b/packages/tools/tests/tools/identifiers/ksuid-generator.test.ts
@@ -35,10 +35,12 @@ describe("KSUID Generator", () => {
       const ids = String((result.data as Record<string, unknown>).output).split(
         "\n"
       );
-      // KSUIDs generated close together share the same timestamp prefix
-      // The first ~6 base62 chars encode the 4-byte second-resolution timestamp
-      // They should be equal or differ by at most 1 second
-      expect(ids[0]!.substring(0, 5)).toBe(ids[1]!.substring(0, 5));
+      // KSUIDs generated close together share the same second-resolution
+      // timestamp prefix. If the two calls happen to straddle a 1-second
+      // boundary the second KSUID will sort AFTER the first, so assert
+      // the monotonic property instead of strict equality — flaky in CI
+      // when runners are slow.
+      expect(ids[0]!.localeCompare(ids[1]!)).toBeLessThanOrEqual(0);
     }
   });
 });