From 3304e67eef20b99f124014eaa9d78e2a6063f498 Mon Sep 17 00:00:00 2001
From: anuphilipp3 <anuphilipp3@gmail.com>
Date: Sat, 22 Aug 2026 13:13:21 +0530
Subject: [PATCH] feat(media-design): migrate all 10 Media & Design tools onto
 the shared kit

Phase 4 of the tool-consistency pass. Every Media & Design tool now renders
through ToolShell + IOPanel / kit-surface panels instead of hand-rolled Cards,
sharing one visual language with the rest of the app.

Migrated (logic + visuals preserved):
- color-picker, contrast-checker, css-gradient-builder, svg-optimizer,
  image-compressor, code-screenshot, exif-viewer, favicon-generator,
  keycode-inspector
- css-generators hub + box-shadow / border-radius / clamp sub-tabs

Verified intact: color swatches/pickers/eyedropper, WCAG contrast badges,
gradient live preview + PNG export, image-compressor canvas + before/after,
EXIF preview + metadata, favicon canvas render + ICO/ZIP export, code-screenshot
export node, keycode live capture + history, and all CSS live previews.

Also: IOPanel now omits its header row when a panel has neither label nor
actions (kept from the Converters phase).

0 type errors; all 10 pages render.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../code-screenshot-layout.tsx                | 320 +++++++++---------
 .../color-picker-tool-layout.tsx              |  32 +-
 .../contrast-checker-tool-layout.tsx          |  31 +-
 .../css-generators/border-radius-tab.tsx      |  25 +-
 .../css-generators/box-shadow-tab.tsx         |  17 +-
 .../components/css-generators/clamp-tab.tsx   |  21 +-
 .../css-generators/css-generators-layout.tsx  |  19 +-
 .../css-gradient-builder/gradient-layout.tsx  |  42 +--
 .../exif-viewer/exif-viewer-layout.tsx        | 217 ++++++------
 .../favicon-generator-layout.tsx              |  56 +--
 .../image-compressor-layout.tsx               | 239 +++++++------
 .../keycode-inspector-layout.tsx              | 281 +++++++--------
 .../svg-optimizer/svg-optimizer-layout.tsx    | 103 +++---
 13 files changed, 639 insertions(+), 764 deletions(-)

diff --git a/apps/desktop-ui/src/components/code-screenshot/code-screenshot-layout.tsx b/apps/desktop-ui/src/components/code-screenshot/code-screenshot-layout.tsx
index cfb35bec..4ee111a9 100644
--- a/apps/desktop-ui/src/components/code-screenshot/code-screenshot-layout.tsx
+++ b/apps/desktop-ui/src/components/code-screenshot/code-screenshot-layout.tsx
@@ -6,7 +6,6 @@ import { toBlob, toPng } from 'html-to-image'
 import { saveAs } from 'file-saver'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Slider } from '@/components/ui/slider'
@@ -21,9 +20,8 @@ import {
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Check, Copy, FileCode, ImageDown, Trash2, Wand2 } from 'lucide-react'
 import { IconPhotoCode } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { IOPanel, ToolTextArea } from '@/components/tools/io-panel'
 import { BACKGROUNDS, LANGUAGES, canFormat, formatCode, highlightCode } from '@/lib/code-screenshot'
 
 /**
@@ -156,166 +154,164 @@ export function CodeScreenshotLayout() {
     }
   }, [scale, t])
 
-  return (
-    <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-      {/* Static stylesheet constant in this file. */}
-      {/* threatcrush-disable-next-line js-unescaped-html-sink */}
-      <style dangerouslySetInnerHTML={{ __html: SCOPED_HLJS_CSS }} />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconPhotoCode}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        />
-      </RevealItem>
+  const toolbar = (
+    <div className="flex flex-wrap items-end gap-x-5 gap-y-4 rounded-lg border border-border bg-card p-4">
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('languageLabel')}
+        </Label>
+        <Select value={lang} onValueChange={setLang}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="auto">{t('autoDetect')}</SelectItem>
+            {LANGUAGES.map((l) => (
+              <SelectItem key={l.value} value={l.value}>
+                {l.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
 
-      <Card className="flex flex-wrap items-end gap-x-5 gap-y-4 p-4">
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            {t('languageLabel')}
-          </Label>
-          <Select value={lang} onValueChange={setLang}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="auto">{t('autoDetect')}</SelectItem>
-              {LANGUAGES.map((l) => (
-                <SelectItem key={l.value} value={l.value}>
-                  {l.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('backgroundLabel')}
+        </Label>
+        <Select value={backgroundId} onValueChange={setBackgroundId}>
+          <SelectTrigger className="w-[170px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {BACKGROUNDS.map((b) => (
+              <SelectItem key={b.id} value={b.id}>
+                <span className="flex items-center gap-2">
+                  <span
+                    className="h-3.5 w-3.5 shrink-0 rounded-full ring-1 ring-inset ring-border"
+                    style={b.css ? { background: b.css } : CHECKERBOARD}
+                    aria-hidden
+                  />
+                  {t(`backgrounds.${b.id}`)}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
 
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            {t('backgroundLabel')}
-          </Label>
-          <Select value={backgroundId} onValueChange={setBackgroundId}>
-            <SelectTrigger className="w-[170px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {BACKGROUNDS.map((b) => (
-                <SelectItem key={b.id} value={b.id}>
-                  <span className="flex items-center gap-2">
-                    <span
-                      className="h-3.5 w-3.5 shrink-0 rounded-full ring-1 ring-inset ring-border"
-                      style={b.css ? { background: b.css } : CHECKERBOARD}
-                      aria-hidden
-                    />
-                    {t(`backgrounds.${b.id}`)}
-                  </span>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+      <div className="w-[150px] space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('paddingLabel')} · {padding}px
+        </Label>
+        <Slider
+          value={[padding]}
+          min={16}
+          max={128}
+          step={4}
+          onValueChange={(v) => setPadding(v[0] ?? 48)}
+          className="py-2"
+        />
+      </div>
 
-        <div className="w-[150px] space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            {t('paddingLabel')} · {padding}px
-          </Label>
-          <Slider
-            value={[padding]}
-            min={16}
-            max={128}
-            step={4}
-            onValueChange={(v) => setPadding(v[0] ?? 48)}
-            className="py-2"
-          />
-        </div>
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('filenameLabel')}
+        </Label>
+        <Input
+          value={filename}
+          onChange={(e) => setFilename(e.target.value)}
+          placeholder={t('filenamePlaceholder')}
+          className="w-[170px]"
+        />
+      </div>
 
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            {t('filenameLabel')}
-          </Label>
-          <Input
-            value={filename}
-            onChange={(e) => setFilename(e.target.value)}
-            placeholder={t('filenamePlaceholder')}
-            className="w-[170px]"
-          />
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('windowLabel')}
+        </Label>
+        <div className="flex h-9 items-center">
+          <Switch checked={windowControls} onCheckedChange={setWindowControls} />
         </div>
+      </div>
 
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            {t('windowLabel')}
-          </Label>
-          <div className="flex h-9 items-center">
-            <Switch checked={windowControls} onCheckedChange={setWindowControls} />
-          </div>
-        </div>
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('themeLabel')}
+        </Label>
+        <ToggleGroup
+          type="single"
+          value={windowTheme}
+          onValueChange={(v) => v && setWindowTheme(v as 'dark' | 'light')}
+          className="justify-start"
+        >
+          <ToggleGroupItem value="dark" className="px-3 text-xs">
+            {t('themeDark')}
+          </ToggleGroupItem>
+          <ToggleGroupItem value="light" className="px-3 text-xs">
+            {t('themeLight')}
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </div>
 
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            {t('themeLabel')}
-          </Label>
-          <ToggleGroup
-            type="single"
-            value={windowTheme}
-            onValueChange={(v) => v && setWindowTheme(v as 'dark' | 'light')}
-            className="justify-start"
-          >
-            <ToggleGroupItem value="dark" className="px-3 text-xs">
-              {t('themeDark')}
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {t('scaleLabel')}
+        </Label>
+        <ToggleGroup
+          type="single"
+          value={String(scale)}
+          onValueChange={(v) => v && setScale(Number(v))}
+          className="justify-start"
+        >
+          {[1, 2, 3].map((s) => (
+            <ToggleGroupItem key={s} value={String(s)} className="px-3 text-xs">
+              {s}x
             </ToggleGroupItem>
-            <ToggleGroupItem value="light" className="px-3 text-xs">
-              {t('themeLight')}
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
+          ))}
+        </ToggleGroup>
+      </div>
 
-        <div className="space-y-1.5">
-          <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            {t('scaleLabel')}
-          </Label>
-          <ToggleGroup
-            type="single"
-            value={String(scale)}
-            onValueChange={(v) => v && setScale(Number(v))}
-            className="justify-start"
-          >
-            {[1, 2, 3].map((s) => (
-              <ToggleGroupItem key={s} value={String(s)} className="px-3 text-xs">
-                {s}x
-              </ToggleGroupItem>
-            ))}
-          </ToggleGroup>
-        </div>
+      <div className="ml-auto flex items-end gap-2">
+        <Button size="sm" variant="secondary" onClick={copyImage} disabled={exporting || !code || !canCopyImage}>
+          {imageCopied ? <Check className="mr-1.5 h-4 w-4 text-emerald-600" /> : <Copy className="mr-1.5 h-4 w-4" />}
+          {imageCopied ? t('copied') : t('copyImage')}
+        </Button>
+        <Button size="sm" onClick={exportPng} disabled={exporting || !code}>
+          <ImageDown className="mr-1.5 h-4 w-4" />
+          {t('exportPng')}
+        </Button>
+      </div>
+    </div>
+  )
 
-        <div className="ml-auto flex items-end gap-2">
-          <Button size="sm" variant="secondary" onClick={copyImage} disabled={exporting || !code || !canCopyImage}>
-            {imageCopied ? <Check className="mr-1.5 h-4 w-4 text-emerald-600" /> : <Copy className="mr-1.5 h-4 w-4" />}
-            {imageCopied ? t('copied') : t('copyImage')}
-          </Button>
-          <Button size="sm" onClick={exportPng} disabled={exporting || !code}>
-            <ImageDown className="mr-1.5 h-4 w-4" />
-            {t('exportPng')}
-          </Button>
-        </div>
-      </Card>
+  return (
+    <ToolShell
+      icon={IconPhotoCode}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      {/* Static stylesheet constant in this file. */}
+      {/* threatcrush-disable-next-line js-unescaped-html-sink */}
+      <style dangerouslySetInnerHTML={{ __html: SCOPED_HLJS_CSS }} />
 
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
-        <Card className="flex min-h-0 flex-col overflow-hidden">
-          <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <div className="flex items-center gap-2">
-              <FileCode className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('inputLabel')}
-              </Label>
+        <IOPanel
+          bodyClassName="min-h-[160px]"
+          label={
+            <>
+              <FileCode className="h-3.5 w-3.5" aria-hidden />
+              {t('inputLabel')}
               {lang === 'auto' && code ? (
                 <span className="text-[11px] text-muted-foreground/70">
                   {t('detected', { language: highlighted.language })}
                 </span>
               ) : null}
-            </div>
-            <div className="flex items-center gap-1">
+            </>
+          }
+          actions={
+            <>
               <Button
                 variant="ghost"
                 size="sm"
@@ -337,21 +333,19 @@ export function CodeScreenshotLayout() {
               >
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
-            </div>
-          </div>
-          <div className="relative min-h-[160px] flex-1">
-            <textarea
-              value={code}
-              onChange={(e) => setCode(e.target.value)}
-              placeholder={t('placeholder')}
-              className="absolute inset-0 h-full w-full resize-none bg-transparent p-4 font-mono text-sm placeholder:text-muted-foreground/50 focus:outline-none"
-              spellCheck={false}
-              autoComplete="off"
-            />
-          </div>
-        </Card>
+            </>
+          }
+        >
+          <ToolTextArea
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder={t('placeholder')}
+            autoComplete="off"
+            className="p-4"
+          />
+        </IOPanel>
 
-        <Card className="flex min-h-0 flex-col overflow-hidden">
+        <div className="flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-card">
           <div className="flex items-center border-b border-border/50 bg-muted/30 px-4 py-2.5">
             <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('previewLabel')}
@@ -405,8 +399,8 @@ export function CodeScreenshotLayout() {
               </div>
             )}
           </div>
-        </Card>
+        </div>
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/color-picker-tool/color-picker-tool-layout.tsx b/apps/desktop-ui/src/components/color-picker-tool/color-picker-tool-layout.tsx
index 42c6c8de..8da9382e 100644
--- a/apps/desktop-ui/src/components/color-picker-tool/color-picker-tool-layout.tsx
+++ b/apps/desktop-ui/src/components/color-picker-tool/color-picker-tool-layout.tsx
@@ -6,7 +6,6 @@ import { useCallback, useMemo, useState } from 'react';
 import { DEFAULT_HEX, channelsFromHex, parseHex, safeHue } from './color-helpers';
 import { useCopyFeedback } from '@/hooks/use-copy-feedback';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -15,9 +14,7 @@ import { PALETTE_GROUPS } from '@/lib/color-palettes';
 import { Check, Copy, Pipette } from 'lucide-react';
 import { IconPalette } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
+import { ToolShell } from '@/components/tools/tool-shell';
 
 
 type PaletteId = (typeof PALETTE_GROUPS)[number]['id'];
@@ -146,19 +143,14 @@ export function ColorPickerToolLayout() {
   );
 
   return (
-    <div className="flex flex-col h-full gap-4 min-h-0 overflow-auto">
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconPalette}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-          offline={false}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconPalette}
+      title={t('title')}
+      description={t('subtitle')}
+      contentClassName="overflow-auto"
+    >
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 shrink-0">
-        <Card className="p-4 space-y-4">
+        <div className="rounded-lg border border-border bg-card p-4 space-y-4">
           <div className="flex flex-wrap items-start gap-4">
             <div
               className="h-28 w-28 shrink-0 rounded-xl border border-border shadow-sm"
@@ -320,9 +312,9 @@ export function ColorPickerToolLayout() {
               <CopyRow id="css-hsl" label="hsl" value={hslCss} />
             </div>
           </div>
-        </Card>
+        </div>
 
-        <Card className="p-4 flex flex-col min-h-[280px]">
+        <div className="rounded-lg border border-border bg-card p-4 flex flex-col min-h-[280px]">
           <Label className="text-xs text-muted-foreground uppercase tracking-wider mb-3">
             {t('palettes')}
           </Label>
@@ -387,8 +379,8 @@ export function ColorPickerToolLayout() {
               );
             })}
           </Tabs>
-        </Card>
+        </div>
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/contrast-checker-tool/contrast-checker-tool-layout.tsx b/apps/desktop-ui/src/components/contrast-checker-tool/contrast-checker-tool-layout.tsx
index a49f73fd..0a0a3635 100644
--- a/apps/desktop-ui/src/components/contrast-checker-tool/contrast-checker-tool-layout.tsx
+++ b/apps/desktop-ui/src/components/contrast-checker-tool/contrast-checker-tool-layout.tsx
@@ -4,7 +4,6 @@ import Color from 'color';
 import { useCallback, useMemo, useState } from 'react';
 import { useCopyFeedback } from '@/hooks/use-copy-feedback';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
@@ -12,9 +11,7 @@ import { contrastRatio, meetsLevel, WCAG_THRESHOLDS } from '@/lib/wcag-contrast'
 import { Check, Copy, ArrowDownUp, Pipette } from 'lucide-react';
 import { IconContrast } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
+import { ToolShell } from '@/components/tools/tool-shell';
 
 const DEFAULT_FG = '#0f172a';
 const DEFAULT_BG = '#f8fafc';
@@ -138,18 +135,14 @@ export function ContrastCheckerToolLayout() {
   ];
 
   return (
-    <div className="flex flex-col h-full gap-4 min-h-0 overflow-auto">
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconContrast}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        />
-      </RevealItem>
-
+    <ToolShell
+      icon={IconContrast}
+      title={t('title')}
+      description={t('subtitle')}
+      contentClassName="overflow-auto"
+    >
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 shrink-0">
-        <Card className="p-4 space-y-5">
+        <div className="rounded-lg border border-border bg-card p-4 space-y-5">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <p className="text-sm text-muted-foreground">{t('ratio')}</p>
             <div className="flex items-center gap-2">
@@ -251,9 +244,9 @@ export function ContrastCheckerToolLayout() {
               })}
             </ul>
           </div>
-        </Card>
+        </div>
 
-        <Card className="p-4 flex flex-col gap-3 min-h-[220px]">
+        <div className="rounded-lg border border-border bg-card p-4 flex flex-col gap-3 min-h-[220px]">
           <Label className="text-xs text-muted-foreground uppercase tracking-wider">
             {t('previewHeading')}
           </Label>
@@ -264,9 +257,9 @@ export function ContrastCheckerToolLayout() {
             <p className="text-base leading-relaxed font-medium">{t('previewBody')}</p>
             <p className="mt-4 text-sm opacity-90">{t('previewCaption')}</p>
           </div>
-        </Card>
+        </div>
       </div>
-    </div>
+    </ToolShell>
   );
 }
 
diff --git a/apps/desktop-ui/src/components/css-generators/border-radius-tab.tsx b/apps/desktop-ui/src/components/css-generators/border-radius-tab.tsx
index 3e7e9f68..c63c7868 100644
--- a/apps/desktop-ui/src/components/css-generators/border-radius-tab.tsx
+++ b/apps/desktop-ui/src/components/css-generators/border-radius-tab.tsx
@@ -3,13 +3,13 @@
 import React, { useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { Slider } from '@/components/ui/slider'
 import { Switch } from '@/components/ui/switch'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Link2, Shuffle, Unlink2 } from 'lucide-react'
 import { buildBorderRadius, randomBlob, type BorderRadiusState, type RadiusUnit } from '@/lib/css-generators'
+import { IOPanel } from '@/components/tools/io-panel'
 import { CssOutput } from './css-output'
 
 type Corner = 'tl' | 'tr' | 'br' | 'bl'
@@ -49,7 +49,7 @@ export function BorderRadiusTab() {
   return (
     <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
       <div className="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
-        <Card className="flex flex-wrap items-center gap-4 p-4">
+        <div className="flex flex-wrap items-center gap-4 rounded-lg border border-border bg-card p-4">
           <div className="space-y-1.5">
             <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('borderRadius.modeLabel')}
@@ -103,10 +103,10 @@ export function BorderRadiusTab() {
               {t('borderRadius.randomize')}
             </Button>
           )}
-        </Card>
+        </div>
 
         {state.mode === 'simple' ? (
-          <Card className="space-y-3 p-4">
+          <div className="space-y-3 rounded-lg border border-border bg-card p-4">
             {CORNERS.map((corner) => (
               <div key={corner} className="grid grid-cols-[6.5rem_1fr_4rem] items-center gap-2">
                 <Label className="text-xs text-muted-foreground">{t(`borderRadius.corners.${corner}`)}</Label>
@@ -122,10 +122,10 @@ export function BorderRadiusTab() {
                 </span>
               </div>
             ))}
-          </Card>
+          </div>
         ) : (
           <>
-            <Card className="space-y-3 p-4">
+            <div className="space-y-3 rounded-lg border border-border bg-card p-4">
               <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                 {t('borderRadius.horizontal')}
               </Label>
@@ -136,8 +136,8 @@ export function BorderRadiusTab() {
                   <span className="text-right font-mono text-xs text-muted-foreground">{state.h[i]}%</span>
                 </div>
               ))}
-            </Card>
-            <Card className="space-y-3 p-4">
+            </div>
+            <div className="space-y-3 rounded-lg border border-border bg-card p-4">
               <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                 {t('borderRadius.vertical')}
               </Label>
@@ -148,23 +148,20 @@ export function BorderRadiusTab() {
                   <span className="text-right font-mono text-xs text-muted-foreground">{state.v[i]}%</span>
                 </div>
               ))}
-            </Card>
+            </div>
           </>
         )}
       </div>
 
       <div className="flex min-h-0 flex-col gap-4">
-        <Card className="flex flex-1 flex-col overflow-hidden">
-          <div className="border-b border-border/50 bg-muted/30 px-3 py-2">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('preview')}</Label>
-          </div>
+        <IOPanel label={t('preview')} className="flex-1" bodyClassName="flex flex-col">
           <div className="flex min-h-[220px] flex-1 items-center justify-center p-8">
             <div
               className="h-48 w-48 border border-border/40 bg-gradient-to-br from-pink-500/70 to-violet-500/70"
               style={{ borderRadius: value }}
             />
           </div>
-        </Card>
+        </IOPanel>
         <CssOutput css={css} />
       </div>
     </div>
diff --git a/apps/desktop-ui/src/components/css-generators/box-shadow-tab.tsx b/apps/desktop-ui/src/components/css-generators/box-shadow-tab.tsx
index 4ab31d63..27758b92 100644
--- a/apps/desktop-ui/src/components/css-generators/box-shadow-tab.tsx
+++ b/apps/desktop-ui/src/components/css-generators/box-shadow-tab.tsx
@@ -3,13 +3,13 @@
 import React, { useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Slider } from '@/components/ui/slider'
 import { Switch } from '@/components/ui/switch'
 import { Plus, Trash2 } from 'lucide-react'
 import { buildBoxShadow, SHADOW_PRESETS, type ShadowLayer } from '@/lib/css-generators'
+import { IOPanel } from '@/components/tools/io-panel'
 import { CssOutput } from './css-output'
 
 const DEFAULT_LAYER: ShadowLayer = { x: 0, y: 4, blur: 12, spread: 0, color: '#000000', alpha: 0.25, inset: false }
@@ -60,7 +60,7 @@ export function BoxShadowTab() {
   return (
     <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
       <div className="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
-        <Card className="space-y-2 p-4">
+        <div className="space-y-2 rounded-lg border border-border bg-card p-4">
           <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
             {t('boxShadow.presets')}
           </Label>
@@ -78,10 +78,10 @@ export function BoxShadowTab() {
               </Button>
             ))}
           </div>
-        </Card>
+        </div>
 
         {layers.map((layer, i) => (
-          <Card key={i} className="space-y-3 p-4">
+          <div key={i} className="space-y-3 rounded-lg border border-border bg-card p-4">
             <div className="flex items-center justify-between">
               <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                 {t('boxShadow.layer')} {i + 1}
@@ -132,7 +132,7 @@ export function BoxShadowTab() {
                 <Label className="text-xs text-muted-foreground">{t('boxShadow.inset')}</Label>
               </div>
             </div>
-          </Card>
+          </div>
         ))}
 
         <Button type="button" variant="outline" size="sm" onClick={() => setLayers((prev) => [...prev, { ...DEFAULT_LAYER }])}>
@@ -142,10 +142,7 @@ export function BoxShadowTab() {
       </div>
 
       <div className="flex min-h-0 flex-col gap-4">
-        <Card className="flex flex-1 flex-col overflow-hidden">
-          <div className="border-b border-border/50 bg-muted/30 px-3 py-2">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('preview')}</Label>
-          </div>
+        <IOPanel label={t('preview')} className="flex-1" bodyClassName="flex flex-col">
           <div
             className="flex min-h-[220px] flex-1 items-center justify-center p-8"
             style={{
@@ -159,7 +156,7 @@ export function BoxShadowTab() {
               style={{ boxShadow: shadowValue }}
             />
           </div>
-        </Card>
+        </IOPanel>
         <CssOutput css={css} />
       </div>
     </div>
diff --git a/apps/desktop-ui/src/components/css-generators/clamp-tab.tsx b/apps/desktop-ui/src/components/css-generators/clamp-tab.tsx
index 4f62749a..a5b82315 100644
--- a/apps/desktop-ui/src/components/css-generators/clamp-tab.tsx
+++ b/apps/desktop-ui/src/components/css-generators/clamp-tab.tsx
@@ -2,11 +2,11 @@
 
 import React, { useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
-import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Slider } from '@/components/ui/slider'
 import { buildClamp, clampSizeAtViewport, type ClampResult } from '@/lib/css-generators'
+import { IOPanel } from '@/components/tools/io-panel'
 import { CssOutput } from './css-output'
 
 interface NumberFieldProps {
@@ -61,15 +61,15 @@ export function ClampTab() {
   return (
     <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
       <div className="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
-        <Card className="grid grid-cols-2 gap-3 p-4">
+        <div className="grid grid-cols-2 gap-3 rounded-lg border border-border bg-card p-4">
           <NumberField label={t('clamp.minFont')} value={minPx} onChange={setMinPx} min={1} />
           <NumberField label={t('clamp.maxFont')} value={maxPx} onChange={setMaxPx} min={1} />
           <NumberField label={t('clamp.minViewport')} value={minVw} onChange={setMinVw} min={1} />
           <NumberField label={t('clamp.maxViewport')} value={maxVw} onChange={setMaxVw} min={1} />
           <NumberField label={t('clamp.rootFont')} value={rootPx} onChange={setRootPx} min={1} />
-        </Card>
+        </div>
 
-        <Card className="space-y-3 p-4">
+        <div className="space-y-3 rounded-lg border border-border bg-card p-4">
           <div className="flex items-center justify-between">
             <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t('clamp.viewportWidth')}
@@ -87,25 +87,22 @@ export function ClampTab() {
             {t('clamp.computedSize')}: <span className="font-mono text-foreground">{sizeAtSim}px</span>
             {' '}({(sizeAtSim / rootPx).toFixed(3)}rem)
           </p>
-        </Card>
+        </div>
 
         {result && (
-          <Card className="space-y-1 p-4 text-xs text-muted-foreground">
+          <div className="space-y-1 rounded-lg border border-border bg-card p-4 text-xs text-muted-foreground">
             <p>
               {t('clamp.slope')}: <span className="font-mono text-foreground">{result.slopeVw}vw</span>
             </p>
             <p>
               {t('clamp.intercept')}: <span className="font-mono text-foreground">{result.interceptRem}rem</span>
             </p>
-          </Card>
+          </div>
         )}
       </div>
 
       <div className="flex min-h-0 flex-col gap-4">
-        <Card className="flex flex-1 flex-col overflow-hidden">
-          <div className="border-b border-border/50 bg-muted/30 px-3 py-2">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t('preview')}</Label>
-          </div>
+        <IOPanel label={t('preview')} className="flex-1" bodyClassName="flex flex-col">
           <div className="flex min-h-[220px] flex-1 items-center justify-center overflow-hidden p-6">
             {result ? (
               <h2
@@ -118,7 +115,7 @@ export function ClampTab() {
               <p className="text-sm text-destructive">{t('clamp.invalid')}</p>
             )}
           </div>
-        </Card>
+        </IOPanel>
         {result && <CssOutput css={css} />}
       </div>
     </div>
diff --git a/apps/desktop-ui/src/components/css-generators/css-generators-layout.tsx b/apps/desktop-ui/src/components/css-generators/css-generators-layout.tsx
index fa82f85b..a80a6315 100644
--- a/apps/desktop-ui/src/components/css-generators/css-generators-layout.tsx
+++ b/apps/desktop-ui/src/components/css-generators/css-generators-layout.tsx
@@ -4,9 +4,7 @@ import React from 'react'
 import { useTranslations } from 'next-intl'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { IconPalette } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
 import { BoxShadowTab } from './box-shadow-tab'
 import { BorderRadiusTab } from './border-radius-tab'
 import { ClampTab } from './clamp-tab'
@@ -15,18 +13,7 @@ export function CssGeneratorsLayout() {
   const t = useTranslations('CssGenerators')
 
   return (
-    <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconPalette}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        />
-      </RevealItem>
-
+    <ToolShell icon={IconPalette} title={t('title')} description={t('subtitle')}>
       <Tabs defaultValue="boxShadow" className="flex min-h-0 flex-1 flex-col gap-4">
         <TabsList className="w-fit">
           <TabsTrigger value="boxShadow">{t('tabs.boxShadow')}</TabsTrigger>
@@ -43,6 +30,6 @@ export function CssGeneratorsLayout() {
           <ClampTab />
         </TabsContent>
       </Tabs>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/css-gradient-builder/gradient-layout.tsx b/apps/desktop-ui/src/components/css-gradient-builder/gradient-layout.tsx
index 0b544e4b..2c316325 100644
--- a/apps/desktop-ui/src/components/css-gradient-builder/gradient-layout.tsx
+++ b/apps/desktop-ui/src/components/css-gradient-builder/gradient-layout.tsx
@@ -3,7 +3,6 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
-import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -19,9 +18,7 @@ import { Check, Copy, Plus, Trash, Dices, ArrowLeftRight, Download, Wand2 } from
 import { IconColorSwatch } from '@tabler/icons-react';
 import { cn } from '@/lib/utils';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
+import { ToolShell } from '@/components/tools/tool-shell';
 
 type GradientType = 'linear' | 'radial' | 'conic';
 
@@ -165,21 +162,18 @@ export function GradientLayout() {
   };
 
   return (
-    <div className="flex flex-col h-full gap-4 min-h-0 overflow-auto pb-4">
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconColorSwatch}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        />
-      </RevealItem>
+    <ToolShell
+      icon={IconColorSwatch}
+      title={t('title')}
+      description={t('subtitle')}
+      contentClassName="overflow-auto pb-4"
+    >
 
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 shrink-0">
         
         {/* Left Column: Preview + Settings */}
         <div className="flex flex-col gap-4">
-          <Card className="p-4 flex flex-col items-center justify-center relative overflow-hidden group">
+          <div className="group relative flex flex-col items-center justify-center overflow-hidden rounded-lg border border-border bg-card p-4">
             <Label className="text-xs text-muted-foreground uppercase w-full text-left tracking-wider mb-3 z-10">
               {t('preview')}
             </Label>
@@ -187,9 +181,9 @@ export function GradientLayout() {
               className="w-full h-48 sm:h-72 rounded-xl border border-border shadow-inner transition-all duration-300 ease-out z-10"
               style={{ background: cssValue }}
             />
-          </Card>
+          </div>
 
-          <Card className="p-4 space-y-5">
+          <div className="space-y-5 rounded-lg border border-border bg-card p-4">
             <div className="flex items-center justify-between">
               <Label className="text-xs text-muted-foreground uppercase tracking-wider">
                 {t('settings')}
@@ -247,9 +241,9 @@ export function GradientLayout() {
                 </div>
               )}
             </div>
-          </Card>
+          </div>
 
-          <Card className="p-4 space-y-3">
+          <div className="space-y-3 rounded-lg border border-border bg-card p-4">
             <div className="flex items-center justify-between">
               <Label className="text-xs text-muted-foreground uppercase tracking-wider">
                 {t('output')}
@@ -277,12 +271,12 @@ export function GradientLayout() {
                 </Button>
               </div>
             </div>
-          </Card>
+          </div>
         </div>
 
         {/* Right Column: Stops & Presets */}
         <div className="flex flex-col gap-4">
-          <Card className="p-4 flex flex-col">
+          <div className="flex flex-col rounded-lg border border-border bg-card p-4">
              <div className="flex items-center justify-between mb-3">
               <Label className="text-xs text-muted-foreground uppercase tracking-wider">
                 {t('presets')}
@@ -317,9 +311,9 @@ export function GradientLayout() {
                </div>
                <ScrollBar orientation="horizontal" />
              </ScrollArea>
-          </Card>
+          </div>
 
-          <Card className="p-4 flex flex-col flex-1">
+          <div className="flex flex-1 flex-col rounded-lg border border-border bg-card p-4">
             <div className="flex items-center justify-between mb-4">
               <Label className="text-xs text-muted-foreground uppercase tracking-wider">
                 {t('stops')}
@@ -406,10 +400,10 @@ export function GradientLayout() {
               ))}
             </div>
             
-          </Card>
+          </div>
         </div>
 
       </div>
-    </div>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/exif-viewer/exif-viewer-layout.tsx b/apps/desktop-ui/src/components/exif-viewer/exif-viewer-layout.tsx
index 07d8f35c..9511b994 100644
--- a/apps/desktop-ui/src/components/exif-viewer/exif-viewer-layout.tsx
+++ b/apps/desktop-ui/src/components/exif-viewer/exif-viewer-layout.tsx
@@ -8,9 +8,7 @@ import { toast } from 'sonner'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Label } from '@/components/ui/label'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Collapsible,
@@ -34,9 +32,8 @@ import {
   Wrench,
 } from 'lucide-react'
 import { IconPhotoSearch } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { IOPanel } from '@/components/tools/io-panel'
 import {
   decimalToDms,
   formatBytes,
@@ -92,7 +89,7 @@ function MetadataCard({
 }) {
   if (entries.length === 0) return null
   return (
-    <Card className="p-4">
+    <div className="rounded-lg border border-border bg-card p-4">
       <div className="mb-2.5 flex items-center gap-2">
         {icon}
         <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{title}</h3>
@@ -105,7 +102,7 @@ function MetadataCard({
           </div>
         ))}
       </dl>
-    </Card>
+    </div>
   )
 }
 
@@ -222,121 +219,113 @@ export function ExifViewerLayout() {
 
   if (!image) {
     return (
-      <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-        <div className="dash-ambient -z-10" aria-hidden />
-        <RevealItem index={0}>
-          <ToolPageHeader
-            icon={IconPhotoSearch}
-            title={t('title')}
-            description={t('subtitle')}
-            accent={CATEGORY_ACCENT['Media & Design']}
-          />
-        </RevealItem>
-        <Card
-          className={`flex flex-1 cursor-pointer flex-col items-center justify-center gap-3 border-2 border-dashed p-8 text-center transition-colors ${
-            dragOver ? 'border-primary bg-primary/5' : 'border-border/70'
-          }`}
-          onClick={() => inputRef.current?.click()}
+      <ToolShell icon={IconPhotoSearch} title={t('title')} description={t('subtitle')}>
+        <IOPanel
+          label={t('dropTitle')}
           onDragOver={(e) => {
             e.preventDefault()
             setDragOver(true)
           }}
           onDragLeave={() => setDragOver(false)}
           onDrop={onDrop}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click()
-          }}
+          className={`flex-1 transition-colors ${dragOver ? 'border-primary bg-primary/5' : ''}`}
         >
-          <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-pink-500/10 text-pink-600 dark:text-pink-400">
-            <Upload className="h-6 w-6" />
-          </span>
-          <div>
-            <p className="text-sm font-medium">{t('dropTitle')}</p>
-            <p className="mt-1 text-xs text-muted-foreground">{t('dropHint')}</p>
-          </div>
-          <Button size="sm" variant="secondary" type="button">
-            {t('browse')}
-          </Button>
-          <p className="text-[11px] text-muted-foreground/70">{t('formats')}</p>
-          <input
-            ref={inputRef}
-            type="file"
-            accept={ACCEPT}
-            className="hidden"
-            onChange={(e) => {
-              const file = e.target.files?.[0]
-              if (file) void loadFile(file)
-              e.target.value = ''
+          <div
+            className="absolute inset-0 flex cursor-pointer flex-col items-center justify-center gap-3 p-8 text-center"
+            onClick={() => inputRef.current?.click()}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click()
             }}
-          />
-        </Card>
-      </div>
+          >
+            <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-pink-500/10 text-pink-600 dark:text-pink-400">
+              <Upload className="h-6 w-6" />
+            </span>
+            <div>
+              <p className="text-sm font-medium">{t('dropTitle')}</p>
+              <p className="mt-1 text-xs text-muted-foreground">{t('dropHint')}</p>
+            </div>
+            <Button size="sm" variant="secondary" type="button">
+              {t('browse')}
+            </Button>
+            <p className="text-[11px] text-muted-foreground/70">{t('formats')}</p>
+            <input
+              ref={inputRef}
+              type="file"
+              accept={ACCEPT}
+              className="hidden"
+              onChange={(e) => {
+                const file = e.target.files?.[0]
+                if (file) void loadFile(file)
+                e.target.value = ''
+              }}
+            />
+          </div>
+        </IOPanel>
+      </ToolShell>
     )
   }
 
   return (
-    <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconPhotoSearch}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        />
-      </RevealItem>
-
+    <ToolShell icon={IconPhotoSearch} title={t('title')} description={t('subtitle')}>
       <ScrollArea className="min-h-0 flex-1">
         <div className="flex flex-col gap-4 pr-3">
-          <Card className="flex flex-wrap items-center gap-4 p-4">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={image.url}
-              alt={image.file.name}
-              className="h-20 w-20 rounded-lg border border-border/60 object-cover"
-              onLoad={(e) => {
-                const el = e.currentTarget
-                if (el.naturalWidth) setDimensions({ w: el.naturalWidth, h: el.naturalHeight })
-              }}
-              onError={(e) => {
-                e.currentTarget.style.visibility = 'hidden'
-              }}
-            />
-            <dl className="grid flex-1 grid-cols-2 gap-x-6 gap-y-1.5 text-sm sm:grid-cols-4">
-              <div>
-                <dt className="text-xs text-muted-foreground">{t('facts.name')}</dt>
-                <dd className="break-all font-medium">{image.file.name}</dd>
-              </div>
-              <div>
-                <dt className="text-xs text-muted-foreground">{t('facts.type')}</dt>
-                <dd className="font-mono text-xs">{image.file.type || '—'}</dd>
-              </div>
-              <div>
-                <dt className="text-xs text-muted-foreground">{t('facts.dimensions')}</dt>
-                <dd className="font-mono text-xs">{dimensions ? `${dimensions.w} × ${dimensions.h}` : '—'}</dd>
-              </div>
-              <div>
-                <dt className="text-xs text-muted-foreground">{t('facts.size')}</dt>
-                <dd className="font-mono text-xs">{formatBytes(image.file.size)}</dd>
-              </div>
-            </dl>
-            <div className="flex items-center gap-2">
-              {gps && (
-                <Badge className="gap-1 border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-400" variant="outline">
-                  <ShieldAlert className="h-3.5 w-3.5" />
-                  {t('gpsWarning')}
-                </Badge>
-              )}
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={reset} title={t('clear')}>
-                <Trash2 className="h-4 w-4" />
-              </Button>
+          <IOPanel
+            label={image.file.name}
+            actions={
+              <>
+                {gps && (
+                  <Badge className="gap-1 border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-400" variant="outline">
+                    <ShieldAlert className="h-3.5 w-3.5" />
+                    {t('gpsWarning')}
+                  </Badge>
+                )}
+                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={reset} title={t('clear')}>
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </>
+            }
+          >
+            <div className="flex flex-wrap items-center gap-4 p-4">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={image.url}
+                alt={image.file.name}
+                className="h-20 w-20 rounded-lg border border-border/60 object-cover"
+                onLoad={(e) => {
+                  const el = e.currentTarget
+                  if (el.naturalWidth) setDimensions({ w: el.naturalWidth, h: el.naturalHeight })
+                }}
+                onError={(e) => {
+                  e.currentTarget.style.visibility = 'hidden'
+                }}
+              />
+              <dl className="grid flex-1 grid-cols-2 gap-x-6 gap-y-1.5 text-sm sm:grid-cols-4">
+                <div>
+                  <dt className="text-xs text-muted-foreground">{t('facts.name')}</dt>
+                  <dd className="break-all font-medium">{image.file.name}</dd>
+                </div>
+                <div>
+                  <dt className="text-xs text-muted-foreground">{t('facts.type')}</dt>
+                  <dd className="font-mono text-xs">{image.file.type || '—'}</dd>
+                </div>
+                <div>
+                  <dt className="text-xs text-muted-foreground">{t('facts.dimensions')}</dt>
+                  <dd className="font-mono text-xs">{dimensions ? `${dimensions.w} × ${dimensions.h}` : '—'}</dd>
+                </div>
+                <div>
+                  <dt className="text-xs text-muted-foreground">{t('facts.size')}</dt>
+                  <dd className="font-mono text-xs">{formatBytes(image.file.size)}</dd>
+                </div>
+              </dl>
             </div>
-          </Card>
+          </IOPanel>
 
           {parsing ? (
-            <Card className="p-6 text-center text-sm text-muted-foreground">{t('parsing')}</Card>
+            <div className="rounded-lg border border-border bg-card p-6 text-center text-sm text-muted-foreground">
+              {t('parsing')}
+            </div>
           ) : hasMetadata && groups ? (
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
               <MetadataCard
@@ -355,7 +344,7 @@ export function ExifViewerLayout() {
                 entries={groups.timestamps}
               />
               {gps && (
-                <Card className="border-amber-500/30 p-4">
+                <div className="rounded-lg border border-amber-500/30 bg-card p-4">
                   <div className="mb-2.5 flex items-center gap-2">
                     <MapPin className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
                     <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
@@ -391,7 +380,7 @@ export function ExifViewerLayout() {
                     <ExternalLink className="h-3.5 w-3.5" />
                     {t('openMap')}
                   </a>
-                </Card>
+                </div>
               )}
               <MetadataCard
                 title={t('groups.software')}
@@ -400,15 +389,15 @@ export function ExifViewerLayout() {
               />
             </div>
           ) : (
-            <Card className="flex items-center gap-3 p-6 text-sm text-muted-foreground">
+            <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-6 text-sm text-muted-foreground">
               <Info className="h-4 w-4 shrink-0" />
               {t('noMetadata')}
-            </Card>
+            </div>
           )}
 
           {tags && hasMetadata && (
             <Collapsible open={rawOpen} onOpenChange={setRawOpen}>
-              <Card className="overflow-hidden">
+              <div className="overflow-hidden rounded-lg border border-border bg-card">
                 <div className="flex items-center justify-between px-4 py-2.5">
                   <CollapsibleTrigger asChild>
                     <button
@@ -450,11 +439,11 @@ export function ExifViewerLayout() {
                     </table>
                   </div>
                 </CollapsibleContent>
-              </Card>
+              </div>
             </Collapsible>
           )}
 
-          <Card className="p-4">
+          <div className="rounded-lg border border-border bg-card p-4">
             <h3 className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               {t('remove.title')}
             </h3>
@@ -499,9 +488,9 @@ export function ExifViewerLayout() {
                 </Button>
               </div>
             )}
-          </Card>
+          </div>
         </div>
       </ScrollArea>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/favicon-generator/favicon-generator-layout.tsx b/apps/desktop-ui/src/components/favicon-generator/favicon-generator-layout.tsx
index 90a0e8f3..b6eb7286 100644
--- a/apps/desktop-ui/src/components/favicon-generator/favicon-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/favicon-generator/favicon-generator-layout.tsx
@@ -7,7 +7,6 @@ import { saveAs } from 'file-saver'
 import { toast } from 'sonner'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Slider } from '@/components/ui/slider'
@@ -15,9 +14,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Check, Copy, Download, Package, Trash2, Upload } from 'lucide-react'
 import { IconFavicon } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
 import {
   ICON_SIZES,
   ICO_SIZES,
@@ -196,19 +193,9 @@ export function FaviconGeneratorLayout() {
 
   if (!source) {
     return (
-      <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-        <div className="dash-ambient -z-10" aria-hidden />
-        <RevealItem index={0}>
-          <ToolPageHeader
-            icon={IconFavicon}
-            title={t('title')}
-            description={t('subtitle')}
-            accent={CATEGORY_ACCENT['Media & Design']}
-            offline={false}
-          />
-        </RevealItem>
-        <Card
-          className={`flex flex-1 cursor-pointer flex-col items-center justify-center gap-3 border-2 border-dashed p-8 text-center transition-colors ${
+      <ToolShell icon={IconFavicon} title={t('title')} description={t('subtitle')} offline={false}>
+        <div
+          className={`flex flex-1 cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
             dragOver ? 'border-primary bg-primary/5' : 'border-border/70'
           }`}
           onClick={() => inputRef.current?.click()}
@@ -245,26 +232,15 @@ export function FaviconGeneratorLayout() {
               e.target.value = ''
             }}
           />
-        </Card>
-      </div>
+        </div>
+      </ToolShell>
     )
   }
 
   return (
-    <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconFavicon}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        offline={false}
-        />
-      </RevealItem>
-
+    <ToolShell icon={IconFavicon} title={t('title')} description={t('subtitle')} offline={false}>
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-[300px_1fr]">
-        <Card className="flex flex-col gap-5 p-4">
+        <div className="flex flex-col gap-5 rounded-lg border border-border bg-card p-4">
           <div className="flex items-center justify-between">
             <span className="truncate text-sm font-medium" title={sourceName}>
               {sourceName}
@@ -351,11 +327,11 @@ export function FaviconGeneratorLayout() {
               {t('downloadZip')}
             </Button>
           </div>
-        </Card>
+        </div>
 
         <ScrollArea className="min-h-0">
           <div className="flex flex-col gap-4 pr-3">
-            <Card className="p-4">
+            <div className="rounded-lg border border-border bg-card p-4">
               <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                 {t('previewLabel')}
               </h3>
@@ -382,9 +358,9 @@ export function FaviconGeneratorLayout() {
                   </div>
                 ))}
               </div>
-            </Card>
+            </div>
 
-            <Card className="p-4">
+            <div className="rounded-lg border border-border bg-card p-4">
               <div className="mb-2 flex items-center justify-between">
                 <h3 className="font-mono text-xs font-semibold text-muted-foreground">site.webmanifest</h3>
                 <Button size="sm" variant="secondary" onClick={() => copySnippet('manifest', manifestSnippet)}>
@@ -397,9 +373,9 @@ export function FaviconGeneratorLayout() {
                 </Button>
               </div>
               <pre className="overflow-x-auto rounded-lg bg-muted/50 p-3 font-mono text-xs">{manifestSnippet}</pre>
-            </Card>
+            </div>
 
-            <Card className="p-4">
+            <div className="rounded-lg border border-border bg-card p-4">
               <div className="mb-2 flex items-center justify-between">
                 <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   {t('headSnippet')}
@@ -414,10 +390,10 @@ export function FaviconGeneratorLayout() {
                 </Button>
               </div>
               <pre className="overflow-x-auto rounded-lg bg-muted/50 p-3 font-mono text-xs">{headSnippet}</pre>
-            </Card>
+            </div>
           </div>
         </ScrollArea>
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/image-compressor/image-compressor-layout.tsx b/apps/desktop-ui/src/components/image-compressor/image-compressor-layout.tsx
index 17ec3551..266e41e7 100644
--- a/apps/desktop-ui/src/components/image-compressor/image-compressor-layout.tsx
+++ b/apps/desktop-ui/src/components/image-compressor/image-compressor-layout.tsx
@@ -12,7 +12,6 @@ import {
   Loader2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Slider } from '@/components/ui/slider';
 import {
@@ -25,9 +24,8 @@ import {
 import { IconArrowsDiagonalMinimize2 } from '@tabler/icons-react';
 import { cn } from '@/lib/utils';
 import { useDebouncedCallback } from 'use-debounce';
-import { ToolPageHeader } from '@/components/tools/tool-page-header';
-import { RevealItem } from '@/components/dashboard/dashboard-reveal';
-import { CATEGORY_ACCENT } from '@/components/dashboard/types';
+import { ToolShell } from '@/components/tools/tool-shell';
+import { ToolPanels, IOPanel } from '@/components/tools/io-panel';
 
 const MAX_FILE_BYTES = 20 * 1024 * 1024;
 const MAX_CANVAS_EDGE = 8192;
@@ -251,46 +249,43 @@ export function ImageCompressorLayout() {
       ? Math.round((1 - compressedBytes / originalBytes) * 1000) / 10
       : null;
 
-  return (
-    <div className="flex h-full min-h-0 flex-col gap-4">
-      <RevealItem index={0} className="shrink-0">
-        <div className="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
-        <ToolPageHeader
-          icon={IconArrowsDiagonalMinimize2}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        />
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            className="gap-1.5 text-xs"
-            onClick={() => fileInputRef.current?.click()}
-          >
-            <Upload className="h-3.5 w-3.5" />
-            {t('upload')}
-          </Button>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/jpeg,image/png,image/webp,image/gif,image/avif,image/bmp"
-            className="hidden"
-            onChange={(e) => {
-              const file = e.target.files?.[0];
-              if (file) loadFile(file);
-              e.target.value = '';
-            }}
-          />
-          <Button variant="outline" size="sm" className="gap-1.5 text-xs" onClick={handleClear}>
-            <Trash2 className="h-3.5 w-3.5" />
-            {t('clear')}
-          </Button>
-        </div>
-        </div>
-      </RevealItem>
+  const toolbar = (
+    <div className="flex shrink-0 items-center justify-end gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        className="gap-1.5 text-xs"
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <Upload className="h-3.5 w-3.5" />
+        {t('upload')}
+      </Button>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/gif,image/avif,image/bmp"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) loadFile(file);
+          e.target.value = '';
+        }}
+      />
+      <Button variant="outline" size="sm" className="gap-1.5 text-xs" onClick={handleClear}>
+        <Trash2 className="h-3.5 w-3.5" />
+        {t('clear')}
+      </Button>
+    </div>
+  );
 
-      <Card className="shrink-0 border-border/60 p-4">
+  return (
+    <ToolShell
+      icon={IconArrowsDiagonalMinimize2}
+      title={t('title')}
+      description={t('subtitle')}
+      toolbar={toolbar}
+    >
+      <div className="shrink-0 rounded-lg border border-border bg-card p-4">
         <div className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-2">
             <Label className="text-xs font-medium text-muted-foreground">{t('outputFormat')}</Label>
@@ -344,7 +339,7 @@ export function ImageCompressorLayout() {
             )}
           </div>
         )}
-      </Card>
+      </div>
 
       {isMobile && (
         <div className="flex shrink-0 rounded-lg border bg-muted/40 p-1 gap-1">
@@ -365,85 +360,89 @@ export function ImageCompressorLayout() {
         </div>
       )}
 
-      <div className={`min-h-0 flex-1 ${isMobile ? 'flex flex-col' : 'grid grid-cols-2 gap-4'}`}>
-        {(!isMobile || mobileTab === 'original') && <Card
-          className={cn(
-            'relative flex min-h-[220px] flex-col overflow-hidden transition-colors flex-1',
-            isDragging && 'border-primary/50 bg-primary/5',
-            !sourceUrl && 'border-dashed'
-          )}
-          onDrop={handleDrop}
-          onDragOver={(e) => {
-            e.preventDefault();
-            setIsDragging(true);
-          }}
-          onDragLeave={() => setIsDragging(false)}
-        >
-          <div className="flex shrink-0 items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <div className="flex items-center gap-2">
-              <ImageIcon className="h-3.5 w-3.5 text-muted-foreground" />
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('panels.original')}
-              </Label>
-            </div>
-            {sourceUrl && (
-              <Button variant="ghost" size="icon" className="h-6 w-6 -mr-2" onClick={handleClear}>
-                <Trash2 className="h-3.5 w-3.5" />
-              </Button>
+      <ToolPanels>
+        {(!isMobile || mobileTab === 'original') && (
+          <IOPanel
+            onDrop={handleDrop}
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={() => setIsDragging(false)}
+            className={cn(
+              'min-h-[220px] flex-1 transition-colors',
+              isDragging && 'border-primary/50 bg-primary/5',
+              !sourceUrl && 'border-dashed'
             )}
-          </div>
-          <div
-            className="relative flex flex-1 cursor-pointer items-center justify-center p-4"
-            onClick={() => !sourceUrl && fileInputRef.current?.click()}
+            label={
+              <>
+                <ImageIcon className="h-3.5 w-3.5" aria-hidden />
+                {t('panels.original')}
+              </>
+            }
+            actions={
+              sourceUrl ? (
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleClear}>
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              ) : null
+            }
+            bodyClassName="flex flex-col"
           >
-            {sourceUrl ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img src={sourceUrl} alt="" decoding="async" className="max-h-[min(55vh,420px)] max-w-full object-contain" />
-            ) : (
-              <div className="flex flex-col items-center gap-3 text-center">
-                <div className="rounded-full bg-muted/50 p-4">
-                  <Upload className="h-8 w-8 text-muted-foreground" />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <p className="text-sm font-medium">{t('dropHere')}</p>
-                  <p className="text-xs text-muted-foreground">{t('placeholders.uploadImage')}</p>
+            <div
+              className="relative flex flex-1 cursor-pointer items-center justify-center p-4"
+              onClick={() => !sourceUrl && fileInputRef.current?.click()}
+            >
+              {sourceUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={sourceUrl} alt="" decoding="async" className="max-h-[min(55vh,420px)] max-w-full object-contain" />
+              ) : (
+                <div className="flex flex-col items-center gap-3 text-center">
+                  <div className="rounded-full bg-muted/50 p-4">
+                    <Upload className="h-8 w-8 text-muted-foreground" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <p className="text-sm font-medium">{t('dropHere')}</p>
+                    <p className="text-xs text-muted-foreground">{t('placeholders.uploadImage')}</p>
+                  </div>
                 </div>
-              </div>
-            )}
-            {isDragging && (
-              <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80 backdrop-blur-sm">
-                <div className="flex flex-col items-center gap-2 text-primary">
-                  <Upload className="h-8 w-8 animate-bounce" />
-                  <span className="text-sm font-medium">{t('dropHere')}</span>
+              )}
+              {isDragging && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+                  <div className="flex flex-col items-center gap-2 text-primary">
+                    <Upload className="h-8 w-8 animate-bounce" />
+                    <span className="text-sm font-medium">{t('dropHere')}</span>
+                  </div>
                 </div>
+              )}
+            </div>
+            {error && (
+              <div className="flex items-center gap-2 border-t border-destructive/20 bg-destructive/5 px-4 py-2 text-xs text-destructive">
+                <AlertCircle className="h-3.5 w-3.5 shrink-0" />
+                <span>{error}</span>
               </div>
             )}
-          </div>
-          {error && (
-            <div className="flex items-center gap-2 border-t border-destructive/20 bg-destructive/5 px-4 py-2 text-xs text-destructive">
-              <AlertCircle className="h-3.5 w-3.5 shrink-0" />
-              <span>{error}</span>
-            </div>
-          )}
-        </Card>}
+          </IOPanel>
+        )}
 
-        {(!isMobile || mobileTab === 'compressed') && <Card className="flex min-h-[220px] flex-col overflow-hidden flex-1">
-          <div className="flex shrink-0 items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-            <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              {t('panels.compressed')}
-            </Label>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-7 gap-1 text-xs"
-              disabled={!compressedBlob || processing}
-              onClick={handleDownload}
-            >
-              {processing ? <Loader2 className="h-3 w-3 animate-spin" /> : <Download className="h-3 w-3" />}
-              {t('download')}
-            </Button>
-          </div>
-          <div className="relative flex flex-1 items-center justify-center p-4">
+        {(!isMobile || mobileTab === 'compressed') && (
+          <IOPanel
+            className="min-h-[220px] flex-1"
+            label={t('panels.compressed')}
+            actions={
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 gap-1 text-xs"
+                disabled={!compressedBlob || processing}
+                onClick={handleDownload}
+              >
+                {processing ? <Loader2 className="h-3 w-3 animate-spin" /> : <Download className="h-3 w-3" />}
+                {t('download')}
+              </Button>
+            }
+            bodyClassName="flex items-center justify-center p-4"
+          >
             {processing && !compressedUrl && (
               <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-background/70">
                 <Loader2 className="h-8 w-8 animate-spin text-primary" />
@@ -456,9 +455,9 @@ export function ImageCompressorLayout() {
             ) : !sourceUrl ? (
               <p className="text-center text-sm text-muted-foreground">{t('emptyCompressed')}</p>
             ) : null}
-          </div>
-        </Card>}
-      </div>
-    </div>
+          </IOPanel>
+        )}
+      </ToolPanels>
+    </ToolShell>
   );
 }
diff --git a/apps/desktop-ui/src/components/keycode-inspector/keycode-inspector-layout.tsx b/apps/desktop-ui/src/components/keycode-inspector/keycode-inspector-layout.tsx
index 1c192e84..e42f320f 100644
--- a/apps/desktop-ui/src/components/keycode-inspector/keycode-inspector-layout.tsx
+++ b/apps/desktop-ui/src/components/keycode-inspector/keycode-inspector-layout.tsx
@@ -5,13 +5,11 @@ import { useTranslations } from 'next-intl'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { Copy, Keyboard, Trash2 } from 'lucide-react'
 import { IconKeyboard } from '@tabler/icons-react'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { IOPanel } from '@/components/tools/io-panel'
 import {
   KEY_HISTORY_LIMIT,
   isPreventable,
@@ -48,7 +46,7 @@ function FieldCard({
   deprecatedLabel?: string
 }) {
   return (
-    <Card className="flex min-w-0 flex-col gap-1 p-4">
+    <div className="flex min-w-0 flex-col gap-1 rounded-lg border border-border bg-card p-4">
       <div className="flex min-w-0 items-center justify-between gap-2">
         <Label className="min-w-0 truncate font-mono text-xs font-medium text-muted-foreground">{label}</Label>
         {deprecated && (
@@ -61,7 +59,7 @@ function FieldCard({
         )}
       </div>
       <div className="min-w-0 break-words font-mono text-xl font-semibold">{value}</div>
-    </Card>
+    </div>
   )
 }
 
@@ -93,156 +91,137 @@ export function KeycodeInspectorLayout() {
   }
 
   return (
-    <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
-      <div className="dash-ambient -z-10" aria-hidden />
-
-      <RevealItem index={0}>
-        <ToolPageHeader
-          icon={IconKeyboard}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        />
-      </RevealItem>
-
-      <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-          <div className="flex flex-col gap-4 lg:col-span-2">
-            {/* Capture area / hero */}
-            <div
-              tabIndex={0}
-              role="textbox"
-              autoFocus
-              aria-label={t('capture.prompt')}
-              onKeyDown={onKeyDown}
-              onFocus={() => setFocused(true)}
-              onBlur={() => setFocused(false)}
-              className={`flex min-h-[220px] cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 text-center outline-none transition-colors ${
-                focused ? 'border-primary/60 bg-primary/5' : 'border-border/60 bg-muted/20 hover:border-border'
-              }`}
-            >
-              {current ? (
-                <>
-                  <div className="max-w-full break-words font-mono text-5xl font-bold tracking-tight md:text-6xl">
-                    {displayKey(current.key, t('hero.spaceKey'))}
-                  </div>
-                  <div className="font-mono text-xs text-muted-foreground">{t('hero.keyLabel')}</div>
-                  <div className="flex flex-wrap items-center justify-center gap-2">
-                    {MODIFIERS.map((m) => (
-                      <Badge
-                        key={m.key}
-                        variant={current[m.key] ? 'default' : 'outline'}
-                        className={current[m.key] ? '' : 'text-muted-foreground/60'}
-                      >
-                        {m.label}
-                      </Badge>
-                    ))}
-                    {current.repeat && <Badge variant="secondary">{t('hero.repeat')}</Badge>}
-                  </div>
-                  <Button size="sm" variant="secondary" onClick={() => copyJson(current)}>
-                    <Copy className="mr-1.5 h-3.5 w-3.5" />
-                    {t('copyJson')}
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Keyboard className="h-10 w-10 text-muted-foreground/60" />
-                  <div className="text-xl font-semibold text-muted-foreground">{t('capture.prompt')}</div>
-                  <p className="text-sm text-muted-foreground/70">
-                    {focused ? t('capture.ready') : t('capture.clickToFocus')}
-                  </p>
-                </>
-              )}
-            </div>
-
-            {/* Field cards */}
-            {current && (
-              <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
-                <FieldCard label={t('fields.code')} value={current.code || '—'} />
-                <FieldCard
-                  label={t('fields.keyCode')}
-                  value={current.keyCode}
-                  deprecated
-                  deprecatedLabel={t('deprecated')}
-                />
-                <FieldCard
-                  label={t('fields.which')}
-                  value={current.which}
-                  deprecated
-                  deprecatedLabel={t('deprecated')}
-                />
-                <FieldCard
-                  label={t('fields.location')}
-                  value={
-                    <span>
-                      {t(`location.${locationName(current.location)}`)}{' '}
-                      <span className="text-sm text-muted-foreground">({current.location})</span>
-                    </span>
-                  }
-                />
-              </div>
+    <ToolShell
+      icon={IconKeyboard}
+      title={t('title')}
+      description={t('subtitle')}
+      contentClassName="overflow-y-auto"
+    >
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <div className="flex flex-col gap-4 lg:col-span-2">
+          {/* Capture area / hero */}
+          <div
+            tabIndex={0}
+            role="textbox"
+            autoFocus
+            aria-label={t('capture.prompt')}
+            onKeyDown={onKeyDown}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            className={`flex min-h-[220px] cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 text-center outline-none transition-colors ${
+              focused ? 'border-primary/60 bg-primary/5' : 'border-border/60 bg-muted/20 hover:border-border'
+            }`}
+          >
+            {current ? (
+              <>
+                <div className="max-w-full break-words font-mono text-5xl font-bold tracking-tight md:text-6xl">
+                  {displayKey(current.key, t('hero.spaceKey'))}
+                </div>
+                <div className="font-mono text-xs text-muted-foreground">{t('hero.keyLabel')}</div>
+                <div className="flex flex-wrap items-center justify-center gap-2">
+                  {MODIFIERS.map((m) => (
+                    <Badge
+                      key={m.key}
+                      variant={current[m.key] ? 'default' : 'outline'}
+                      className={current[m.key] ? '' : 'text-muted-foreground/60'}
+                    >
+                      {m.label}
+                    </Badge>
+                  ))}
+                  {current.repeat && <Badge variant="secondary">{t('hero.repeat')}</Badge>}
+                </div>
+                <Button size="sm" variant="secondary" onClick={() => copyJson(current)}>
+                  <Copy className="mr-1.5 h-3.5 w-3.5" />
+                  {t('copyJson')}
+                </Button>
+              </>
+            ) : (
+              <>
+                <Keyboard className="h-10 w-10 text-muted-foreground/60" />
+                <div className="text-xl font-semibold text-muted-foreground">{t('capture.prompt')}</div>
+                <p className="text-sm text-muted-foreground/70">
+                  {focused ? t('capture.ready') : t('capture.clickToFocus')}
+                </p>
+              </>
             )}
           </div>
 
-          {/* History */}
-          <Card className="flex min-h-[280px] flex-col overflow-hidden">
-            <div className="flex items-center justify-between border-b border-border/50 bg-muted/30 px-4 py-2.5">
-              <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('history.title')}
-              </Label>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7"
-                onClick={clear}
-                disabled={history.length === 0 && !current}
-                title={t('history.clear')}
-                aria-label={t('history.clear')}
-              >
-                <Trash2 className="h-3.5 w-3.5" />
-              </Button>
-            </div>
-            <div className="min-h-0 flex-1 overflow-y-auto">
-              {history.length === 0 ? (
-                <p className="p-4 text-sm text-muted-foreground/70">{t('history.empty')}</p>
-              ) : (
-                <ul className="divide-y divide-border/30">
-                  {history.map((entry) => (
-                    <li
-                      key={entry.id}
-                      onClick={() => setCurrent(entry.event)}
-                      className="flex cursor-pointer items-center justify-between gap-2 px-4 py-2 text-sm transition-colors hover:bg-muted/50"
-                    >
-                      <div className="flex min-w-0 items-center gap-2">
-                        <span className="truncate font-mono font-semibold">
-                          {displayKey(entry.event.key, t('hero.spaceKey'))}
-                        </span>
-                        <span className="truncate font-mono text-xs text-muted-foreground">{entry.event.code}</span>
-                      </div>
-                      <div className="flex shrink-0 items-center gap-1.5">
-                        <span className="font-mono text-xs text-muted-foreground">{entry.event.keyCode}</span>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            copyJson(entry.event)
-                          }}
-                          title={t('copyJson')}
-                          aria-label={t('copyJson')}
-                        >
-                          <Copy className="h-3 w-3" />
-                        </Button>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              )}
+          {/* Field cards */}
+          {current && (
+            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+              <FieldCard label={t('fields.code')} value={current.code || '—'} />
+              <FieldCard label={t('fields.keyCode')} value={current.keyCode} deprecated deprecatedLabel={t('deprecated')} />
+              <FieldCard label={t('fields.which')} value={current.which} deprecated deprecatedLabel={t('deprecated')} />
+              <FieldCard
+                label={t('fields.location')}
+                value={
+                  <span>
+                    {t(`location.${locationName(current.location)}`)}{' '}
+                    <span className="text-sm text-muted-foreground">({current.location})</span>
+                  </span>
+                }
+              />
             </div>
-          </Card>
+          )}
         </div>
+
+        {/* History */}
+        <IOPanel
+          label={t('history.title')}
+          className="min-h-[280px]"
+          bodyClassName="overflow-y-auto"
+          actions={
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={clear}
+              disabled={history.length === 0 && !current}
+              title={t('history.clear')}
+              aria-label={t('history.clear')}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          }
+        >
+          {history.length === 0 ? (
+            <p className="p-4 text-sm text-muted-foreground/70">{t('history.empty')}</p>
+          ) : (
+            <ul className="divide-y divide-border/30">
+              {history.map((entry) => (
+                <li
+                  key={entry.id}
+                  onClick={() => setCurrent(entry.event)}
+                  className="flex cursor-pointer items-center justify-between gap-2 px-4 py-2 text-sm transition-colors hover:bg-muted/50"
+                >
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span className="truncate font-mono font-semibold">
+                      {displayKey(entry.event.key, t('hero.spaceKey'))}
+                    </span>
+                    <span className="truncate font-mono text-xs text-muted-foreground">{entry.event.code}</span>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    <span className="font-mono text-xs text-muted-foreground">{entry.event.keyCode}</span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        copyJson(entry.event)
+                      }}
+                      title={t('copyJson')}
+                      aria-label={t('copyJson')}
+                    >
+                      <Copy className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </IOPanel>
       </div>
-    </div>
+    </ToolShell>
   )
 }
diff --git a/apps/desktop-ui/src/components/svg-optimizer/svg-optimizer-layout.tsx b/apps/desktop-ui/src/components/svg-optimizer/svg-optimizer-layout.tsx
index e1fd007f..75e3b95a 100644
--- a/apps/desktop-ui/src/components/svg-optimizer/svg-optimizer-layout.tsx
+++ b/apps/desktop-ui/src/components/svg-optimizer/svg-optimizer-layout.tsx
@@ -4,17 +4,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { useDebouncedCallback } from 'use-debounce'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
-import { Card } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
-import { Textarea } from '@/components/ui/textarea'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Check, Copy, Download, Trash2, Sparkles } from 'lucide-react'
 import { IconFileTypeSvg } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
-import { ToolPageHeader } from '@/components/tools/tool-page-header'
-import { RevealItem } from '@/components/dashboard/dashboard-reveal'
-import { CATEGORY_ACCENT } from '@/components/dashboard/types'
+import { ToolShell } from '@/components/tools/tool-shell'
+import { ToolPanels, IOPanel, ToolTextArea } from '@/components/tools/io-panel'
 import { utf8ByteLength } from '@/lib/svg-optimize'
 import { useSvgOptimizeWorker } from '@/hooks/use-svg-optimize-worker'
 
@@ -86,36 +83,27 @@ export function SvgOptimizerLayout() {
   }
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-col gap-4">
-      <RevealItem index={0} className="shrink-0">
-        <ToolPageHeader
-          icon={IconFileTypeSvg}
-          title={t('title')}
-          description={t('subtitle')}
-          accent={CATEGORY_ACCENT['Media & Design']}
-        />
-      </RevealItem>
-
-      <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 xl:grid-cols-2">
-        <Card className="flex min-h-[220px] flex-col gap-3 p-4">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <Label htmlFor="svg-input" className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              {t('inputLabel')}
-            </Label>
-            <span className="text-xs text-muted-foreground">
+    <ToolShell icon={IconFileTypeSvg} title={t('title')} description={t('subtitle')}>
+      <ToolPanels className="xl:grid-cols-2">
+        <IOPanel
+          label={t('inputLabel')}
+          bodyClassName="flex flex-col"
+          actions={
+            <span className="text-[10px] tabular-nums text-muted-foreground">
               {t('chars', { count: input.length, bytes: beforeBytes })}
             </span>
+          }
+        >
+          <div className="relative min-h-0 flex-1">
+            <ToolTextArea
+              id="svg-input"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder={t('placeholder')}
+              autoComplete="off"
+            />
           </div>
-          <Textarea
-            id="svg-input"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder={t('placeholder')}
-            spellCheck={false}
-            className="min-h-[200px] flex-1 resize-y font-mono text-sm"
-            autoComplete="off"
-          />
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-2 border-t border-border/50 p-2">
             <Button type="button" variant="secondary" size="sm" onClick={() => setInput('')}>
               <Trash2 className="mr-1.5 h-4 w-4" />
               {t('actions.clear')}
@@ -125,10 +113,10 @@ export function SvgOptimizerLayout() {
               {t('actions.sample')}
             </Button>
           </div>
-        </Card>
+        </IOPanel>
 
         <div className="flex min-h-0 flex-col gap-4">
-          <Card className="flex flex-col gap-3 p-4">
+          <div className="space-y-3 rounded-lg border border-border bg-card p-4">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                 {t('stats.title')}
@@ -155,15 +143,15 @@ export function SvgOptimizerLayout() {
                 <AlertDescription className="break-all font-mono text-xs">{error}</AlertDescription>
               </Alert>
             ) : null}
-          </Card>
+          </div>
 
-          <Card className="flex min-h-[180px] flex-1 flex-col gap-3 p-4">
-            <div className="flex flex-wrap items-center justify-between gap-2">
-              <Label htmlFor="svg-output" className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                {t('outputLabel')}
-              </Label>
-              <div className="flex flex-wrap gap-2">
-                <Button type="button" size="sm" variant="secondary" disabled={!output} onClick={handleCopy}>
+          <IOPanel
+            label={t('outputLabel')}
+            className="min-h-[180px] flex-1"
+            bodyClassName="flex flex-col"
+            actions={
+              <>
+                <Button type="button" size="sm" variant="secondary" className="h-7" disabled={!output} onClick={handleCopy}>
                   {copied ? (
                     <Check className="mr-1.5 h-4 w-4 text-emerald-600" />
                   ) : (
@@ -171,38 +159,31 @@ export function SvgOptimizerLayout() {
                   )}
                   {copied ? t('actions.copied') : t('actions.copy')}
                 </Button>
-                <Button type="button" size="sm" variant="outline" disabled={!output.trim()} onClick={handleDownload}>
+                <Button type="button" size="sm" variant="outline" className="h-7" disabled={!output.trim()} onClick={handleDownload}>
                   <Download className="mr-1.5 h-4 w-4" />
                   {t('actions.download')}
                 </Button>
-              </div>
+              </>
+            }
+          >
+            <div className="relative min-h-0 flex-1">
+              <ToolTextArea id="svg-output" readOnly value={output} placeholder={t('outputPlaceholder')} />
             </div>
-            <Textarea
-              id="svg-output"
-              readOnly
-              value={output}
-              placeholder={t('outputPlaceholder')}
-              className="min-h-[160px] flex-1 resize-y font-mono text-sm"
-            />
             {previewUrl ? (
-              <div className="space-y-2">
+              <div className="space-y-2 border-t border-border/50 p-3">
                 <p className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{t('preview')}</p>
-                <div
-                  className={cn(
-                    'flex max-h-40 items-center justify-center overflow-hidden rounded-lg border bg-muted/20 p-4'
-                  )}
-                >
+                <div className={cn('flex max-h-40 items-center justify-center overflow-hidden rounded-lg border bg-muted/20 p-4')}>
                   {/* Dynamic data: URL cannot use next/image */}
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img src={previewUrl} alt="" loading="lazy" decoding="async" className="max-h-32 max-w-full object-contain" />
                 </div>
               </div>
             ) : null}
-          </Card>
+          </IOPanel>
         </div>
-      </div>
+      </ToolPanels>
 
-      <p className="text-center text-xs text-muted-foreground">{t('localNote')}</p>
-    </div>
+      <p className="shrink-0 text-center text-xs text-muted-foreground">{t('localNote')}</p>
+    </ToolShell>
   )
 }