Plimi

+ {field.label ?? "input"} + {isMultiline ? "paste / drop / type" : "type"} +

+ {field.description && ( +

+ {field.description} +

+ )} + {isMultiline ? ( +

handleTextChange(fieldKey, e.target.value)}
+            spellCheck={false}
+            rows={rows ?? 6}
+          />
+        ) : (
+          <input
+            type="text"
+            className="w-full border-none bg-transparent py-1 font-mono text-[13px] text-[var(--p-text)] outline-none placeholder:text-[var(--p-muted)] placeholder:opacity-50"
+            placeholder={placeholder}
+            value={fieldValue.text || ""}
+            maxLength={field.type === "text" ? field.maxLength : undefined}
+            onChange={(e) => handleTextChange(fieldKey, e.target.value)}
+            spellCheck={false}
+          />
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-[16px]">
+      {fields.map((field, index) =>
+        field.type === "files"
+          ? renderFileField(field, index)
+          : renderTextField(field, index)
+      )}
+    </div>
+  );
+}
diff --git a/src/components/tool/ToolOptionsPanel.tsx b/src/components/tool/ToolOptionsPanel.tsx
new file mode 100644
index 0000000..d514a04
--- /dev/null
+++ b/src/components/tool/ToolOptionsPanel.tsx
@@ -0,0 +1,117 @@
+import type { ToolOptionsSchema, ToolOptionValue, ToolOptionsValue } from "../../core/plugins/plugin-types";
+import { Input } from "../ui/Input";
+import { Select } from "../ui/Select";
+import { Slider } from "../ui/Slider";
+
+interface ToolOptionsPanelTints {
+  paper: string;
+  ink: string;
+  neon: string;
+}
+
+export function ToolOptionsPanel({
+  schema,
+  value,
+  onChange,
+  dark,
+  tints,
+  toolCategory
+}: {
+  schema: ToolOptionsSchema;
+  value: ToolOptionsValue;
+  onChange: (val: ToolOptionsValue) => void;
+  dark?: boolean;
+  tints?: ToolOptionsPanelTints;
+  toolCategory?: string;
+}) {
+  const isDark = dark ?? false;
+
+  const handleFieldChange = (key: string, val: ToolOptionValue) => {
+    onChange({ ...value, [key]: val });
+  };
+
+  const isWasm = toolCategory === 'image' || toolCategory === 'pdf';
+
+  return (
+    <div className="flex flex-col gap-[14px] rounded-[14px] border border-[var(--p-border)] bg-[var(--p-surface-2)] p-[16px] h-full min-h-[240px]">
+      <div className="font-mono text-[10px] text-[var(--p-muted)] tracking-wider uppercase">
+        options
+      </div>
+
+      <div className="flex flex-col gap-[14px] flex-1 overflow-y-auto pr-1">
+        {schema.fields.map((field) => {
+          const currentVal = value[field.key] ?? field.defaultValue;
+
+          return (
+            <div key={field.key} className="flex flex-col gap-1.5">
+              <span className="font-sans text-[13px] text-[var(--p-text)]">
+                {field.label}
+              </span>
+              
+              {field.type === "text" && (
+                <Input
+                  value={String(currentVal ?? "")}
+                  placeholder={field.placeholder}
+                  onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                />
+              )}
+
+              {field.type === "number" && (
+                <Input
+                  type="number"
+                  min={field.min}
+                  max={field.max}
+                  step={field.step}
+                  value={Number(currentVal)}
+                  onChange={(e) => handleFieldChange(field.key, Number(e.target.value))}
+                />
+              )}
+
+              {field.type === "boolean" && (
+                <label className="flex items-center gap-2 rounded-lg border border-[var(--p-border)] bg-[var(--p-surface)] px-3 py-2 text-[13px] text-[var(--p-text)]">
+                  <input
+                    type="checkbox"
+                    checked={currentVal === true}
+                    onChange={(e) => handleFieldChange(field.key, e.target.checked)}
+                    className="h-4 w-4 accent-[var(--p-accent)]"
+                  />
+                  <span>{currentVal === true ? "Enabled" : "Disabled"}</span>
+                </label>
+              )}
+
+              {field.type === "select" && field.options && (
+                <Select
+                  value={String(currentVal)}
+                  onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                  options={field.options}
+                />
+              )}
+
+              {field.type === "slider" && (
+                <Slider
+                  min={field.min}
+                  max={field.max}
+                  step={field.step}
+                  value={Number(currentVal)}
+                  onChange={(e) => handleFieldChange(field.key, Number(e.target.value))}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="mt-auto pt-[12px] border-t border-dashed border-[var(--p-border)] flex items-center justify-between">
+        <span className="font-mono text-[10px] text-[var(--p-muted)]">
+          engine
+        </span>
+        <span 
+          className="font-mono text-[11px]"
+          style={{ color: isDark ? tints?.neon : tints?.ink }}
+        >
+          {isWasm ? 'wasm' : 'js worker'}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/tool/ToolProgress.tsx b/src/components/tool/ToolProgress.tsx
new file mode 100644
index 0000000..dccad69
--- /dev/null
+++ b/src/components/tool/ToolProgress.tsx
@@ -0,0 +1,54 @@
+interface ToolProgressTints {
+  ink: string;
+  neon: string;
+}
+
+export function ToolProgress({
+  percentage,
+  message,
+  onCancel,
+  dark,
+  tints
+}: {
+  percentage: number;
+  message?: string;
+  onCancel?: () => void;
+  dark?: boolean;
+  tints?: ToolProgressTints;
+}) {
+  const isDark = dark ?? false;
+
+  return (
+    <div className="flex flex-col gap-3 p-4 rounded-[14px] border border-[var(--p-border)] bg-[var(--p-surface-2)]">
+      <div className="flex items-center justify-between">
+        <span className="font-sans text-[13px] text-[var(--p-text)] font-medium">
+          {message || "Processing..."}
+        </span>
+        <span className="font-mono text-[11px] text-[var(--p-muted)]">
+          {Math.round(percentage)}%
+        </span>
+      </div>
+      
+      <div className="h-1.5 w-full bg-[var(--p-border)] rounded-full overflow-hidden">
+        <div 
+          className="h-full transition-all duration-300 ease-out"
+          style={{ 
+            width: `${percentage}%`,
+            background: isDark ? (tints?.neon || 'var(--p-accent)') : (tints?.ink || 'var(--p-accent)')
+          }}
+        />
+      </div>
+
+      {onCancel && (
+        <div className="flex justify-end mt-1">
+          <button
+            onClick={onCancel}
+            className="px-3 py-1.5 rounded-lg bg-[var(--p-chip)] text-[var(--p-muted)] font-sans text-xs hover:text-[var(--p-text)] transition-colors cursor-pointer"
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/tool/ToolResultPanel.tsx b/src/components/tool/ToolResultPanel.tsx
new file mode 100644
index 0000000..d74e475
--- /dev/null
+++ b/src/components/tool/ToolResultPanel.tsx
@@ -0,0 +1,295 @@
+import { useState, useCallback } from "react";
+import type { ToolResult } from "../../core/io/output-types";
+
+interface ToolResultPanelTints {
+  neon: string;
+}
+
+export function ToolResultPanel({
+  result,
+  dark,
+  tints,
+}: {
+  result: ToolResult;
+  dark?: boolean;
+  tints?: ToolResultPanelTints;
+}) {
+  const [copied, setCopied] = useState(false);
+  const isDark = dark ?? false;
+
+  const handleCopy = useCallback((text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, []);
+
+  const downloadBlob = useCallback((blob: Blob, filename: string) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  if (result.type === "text") {
+    return (
+      <div 
+        className="flex flex-col gap-[10px] rounded-[14px] border border-[var(--p-border)] p-[16px] min-h-[240px]"
+        style={{
+          background: isDark ? `color-mix(in oklab, ${tints?.neon || 'var(--p-accent)'} 4%, transparent)` : 'var(--p-surface-2)',
+        }}
+      >
+        <div className="flex items-center justify-between font-mono text-[10px] text-[var(--p-muted)] tracking-wider uppercase">
+          <span>output</span>
+          {result.value && (
+            <button
+              onClick={() => handleCopy(result.value)}
+              className="px-2 py-1 rounded-md bg-[var(--p-chip)] text-[var(--p-muted)] cursor-pointer hover:bg-[var(--p-border)] transition-colors"
+            >
+              {copied ? "Copied!" : "Copy"}
+            </button>
+          )}
+        </div>
+        <div className="flex-1 overflow-auto font-mono text-[13px] text-[var(--p-text)] whitespace-pre-wrap break-words">
+          {result.value || ""}
+        </div>
+      </div>
+    );
+  }
+
+  if (result.type === "json") {
+    const value = result.value;
+    const isObject = typeof value === "object" && value !== null && !Array.isArray(value);
+    const valObj = isObject ? (value as Record<string, unknown>) : null;
+    const primaryVal = valObj && "primary" in valObj ? String(valObj.primary) : null;
+
+    // Filter out 'primary' from the fields displayed in the grid
+    const fields = valObj
+      ? Object.entries(valObj).filter(([key]) => key !== "primary")
+      : [];
+
+    return (
+      <div className="flex flex-col gap-[16px]">
+        {primaryVal !== null && (
+          <div 
+            className="flex flex-col gap-[8px] p-[20px] rounded-[14px] border border-[var(--p-border)] bg-[var(--p-surface)] relative group/primary overflow-hidden"
+            style={{
+              boxShadow: 'inset 0 1px 0 var(--p-shadow-inset)',
+            }}
+          >
+            <div className="font-mono text-[10px] text-[var(--p-accent)] tracking-wider uppercase font-semibold">
+              Primary Result
+            </div>
+            <div className="flex items-center justify-between gap-[16px]">
+              <div className="font-mono text-[20px] font-bold text-[var(--p-text)] break-all select-all">
+                {primaryVal}
+              </div>
+              <button
+                onClick={() => handleCopy(primaryVal)}
+                className="px-3 py-1.5 rounded-lg bg-[var(--p-accent)] text-[var(--p-accent-ink)] font-sans text-[12px] font-semibold cursor-pointer hover:opacity-90 transition-opacity whitespace-nowrap"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div 
+          className="flex flex-col gap-[10px] rounded-[14px] border border-[var(--p-border)] p-[16px] min-h-[160px]"
+          style={{
+            background: isDark ? `color-mix(in oklab, ${tints?.neon || 'var(--p-accent)'} 4%, transparent)` : 'var(--p-surface-2)',
+          }}
+        >
+          <div className="flex items-center justify-between font-mono text-[10px] text-[var(--p-muted)] tracking-wider uppercase mb-2">
+            <span>{primaryVal !== null ? "All Conversions / Details" : "output"}</span>
+            {!primaryVal && (
+              <button
+                onClick={() => handleCopy(JSON.stringify(value, null, 2))}
+                className="px-2 py-1 rounded-md bg-[var(--p-chip)] text-[var(--p-muted)] cursor-pointer hover:bg-[var(--p-border)] transition-colors"
+              >
+                {copied ? "Copied!" : "Copy"}
+              </button>
+            )}
+          </div>
+          <div className="flex-1 overflow-auto font-mono text-[13px] text-[var(--p-text)] whitespace-pre-wrap break-words">
+            {isObject ? (
+              <div className="grid grid-cols-1 gap-[10px]">
+                {fields.map(([key, val]) => {
+                  const valStr = typeof val === "object" && val !== null ? JSON.stringify(val) : String(val ?? "null");
+                  const isValObject = typeof val === "object" && val !== null;
+                  return (
+                    <div 
+                      key={key} 
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-[8px] p-[12px] rounded-[10px] bg-[var(--p-surface)] border border-[var(--p-border)] group/field hover:border-[var(--p-muted)]/30 transition-all"
+                    >
+                      <div className="flex flex-col gap-[2px] flex-grow min-w-0">
+                        <span className="text-[var(--p-muted)] text-[9px] uppercase tracking-wider font-bold">{key}</span>
+                        {isValObject ? (
+                          <div className="pl-2 border-l border-[var(--p-border)] mt-1">
+                            {renderJsonValue(val)}
+                          </div>
+                        ) : (
+                          <span className="text-[var(--p-text)] text-[13px] font-mono break-all">{valStr}</span>
+                        )}
+                      </div>
+                      {!isValObject && (
+                        <button
+                          onClick={() => handleCopy(valStr)}
+                          className="sm:opacity-0 group-hover/field:opacity-100 focus-visible:opacity-100 self-end sm:self-auto px-2 py-1 rounded bg-[var(--p-chip)] text-[var(--p-muted)] text-[11px] cursor-pointer hover:bg-[var(--p-border)] transition-all whitespace-nowrap"
+                        >
+                          Copy
+                        </button>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              renderJsonValue(value)
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (result.type === "files" && result.files) {
+    return (
+      <div 
+        className="flex flex-col gap-[10px] rounded-[14px] border border-[var(--p-border)] p-[16px]"
+        style={{
+          background: isDark ? `color-mix(in oklab, ${tints?.neon || 'var(--p-accent)'} 4%, transparent)` : 'var(--p-surface-2)',
+        }}
+      >
+        <div className="font-mono text-[10px] text-[var(--p-muted)] tracking-wider uppercase mb-2">
+          output files
+        </div>
+        <ul className="flex flex-col gap-2 m-0 p-0 list-none">
+          {result.files.map((file, i) => (
+            <li key={i} className="flex items-center justify-between p-3 rounded-xl bg-[var(--p-surface)] border border-[var(--p-border)]">
+              <div className="flex flex-col gap-1">
+                <span className="font-sans text-[13px] text-[var(--p-text)] font-medium">
+                  {file.name}
+                </span>
+                <span className="font-mono text-[10px] text-[var(--p-muted)]">
+                  {file.sizeAfter ? `${(file.sizeAfter / 1024).toFixed(1)} KB` : 'Ready'}
+                </span>
+              </div>
+              <button
+                onClick={() => downloadBlob(file.blob, file.name)}
+                className="px-3 py-1.5 rounded-lg bg-[var(--p-accent)] text-[var(--p-accent-ink)] font-sans text-xs font-semibold cursor-pointer"
+              >
+                Download
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+
+  if (result.type === "table" && result.columns && result.rows) {
+    return (
+      <div 
+        className="flex flex-col gap-[10px] rounded-[14px] border border-[var(--p-border)] p-[16px] overflow-hidden"
+        style={{
+          background: isDark ? `color-mix(in oklab, ${tints?.neon || 'var(--p-accent)'} 4%, transparent)` : 'var(--p-surface-2)',
+        }}
+      >
+        <div className="flex items-center justify-between font-mono text-[10px] text-[var(--p-muted)] tracking-wider uppercase">
+          <span>output table</span>
+          <button
+            onClick={() => {
+              const csv = [
+                result.columns.join(","),
+                ...result.rows.map(row => row.map(cell => `"${String(cell ?? "").replace(/"/g, '""')}"`).join(","))
+              ].join("\n");
+              handleCopy(csv);
+            }}
+            className="px-2 py-1 rounded-md bg-[var(--p-chip)] text-[var(--p-muted)] cursor-pointer hover:bg-[var(--p-border)] transition-colors"
+          >
+            Copy CSV
+          </button>
+        </div>
+        <div className="overflow-x-auto w-full max-h-[400px] mt-2">
+          <table className="w-full border-collapse text-left font-sans text-[13px] text-[var(--p-text)]">
+            <thead>
+              <tr className="border-b border-[var(--p-border)]">
+                {result.columns.map((col, i) => (
+                  <th key={i} className="pb-[8px] pr-[12px] font-semibold text-[var(--p-muted)] uppercase tracking-wider text-[10px] font-mono">
+                    {col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {result.rows.map((row, rIndex) => (
+                <tr 
+                  key={rIndex} 
+                  className="border-b border-[var(--p-border)] last:border-none hover:bg-[var(--p-chip)]/30 transition-colors"
+                >
+                  {row.map((cell, cIndex) => (
+                    <td key={cIndex} className="py-[10px] pr-[12px] font-mono text-[12px] text-[var(--p-text)]">
+                      {cell === null ? (
+                        <span className="text-[var(--p-muted)] italic">null</span>
+                      ) : (
+                        String(cell)
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+function renderJsonValue(value: unknown): React.ReactNode {
+  if (value === null || value === undefined) return "null";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "[]";
+    return (
+      <div className="flex flex-col gap-1">
+        {value.map((item, i) => (
+          <div key={i} className="pl-3 border-l-2 border-[var(--p-border)]">
+            {renderJsonValue(item)}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) return "{}";
+    return (
+      <div className="flex flex-col gap-1.5">
+        {entries.map(([key, val]) => (
+          <div key={key} className="flex flex-col gap-0.5">
+            <span className="text-[var(--p-muted)] text-[11px] uppercase tracking-wider">{key}</span>
+            <div className="pl-3">
+              {typeof val === "object" && val !== null ? (
+                renderJsonValue(val)
+              ) : (
+                <span className="text-[var(--p-text)]">{String(val ?? "null")}</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return String(value);
+}
diff --git a/src/components/tool/ToolShell.tsx b/src/components/tool/ToolShell.tsx
new file mode 100644
index 0000000..1239669
--- /dev/null
+++ b/src/components/tool/ToolShell.tsx
@@ -0,0 +1,231 @@
+import { Suspense, useCallback, useEffect, useState } from "react";
+import type { ToolInput } from "../../core/io/input-types";
+import type {
+  ToolOptionsValue,
+  UnknownPlimiPlugin,
+} from "../../core/plugins/plugin-types";
+import { describeToolPermissions } from "../../core/plugins/plugin-permissions";
+import { ToolInputPanel } from "./ToolInputPanel";
+import { ToolOptionsPanel } from "./ToolOptionsPanel";
+import { ToolResultPanel } from "./ToolResultPanel";
+import { ToolProgress } from "./ToolProgress";
+import { useToolExecution } from "./useToolExecution";
+import { CategoryIcon } from "../ui/CategoryIcon";
+import { getPluginExamples } from "../../core/plugins/plugin-examples";
+import { ExampleActionButton } from "./ExampleActionButton";
+
+const TINTS: Record<string, { paper: string; ink: string; neon: string }> = {
+  image: { paper: "#E8F5E9", ink: "#2E7D32", neon: "#69F0AE" },
+  pdf: { paper: "#FFEBEE", ink: "#C62828", neon: "#FF5252" },
+  developer: { paper: "#E3F2FD", ink: "#1565C0", neon: "#448AFF" },
+  text: { paper: "#FFF8E1", ink: "#F57F17", neon: "#FFD740" },
+  crypto: { paper: "#F3E5F5", ink: "#6A1B9A", neon: "#E040FB" },
+  privacy: { paper: "#E0F2F1", ink: "#00695C", neon: "#64FFDA" },
+};
+
+function ToolHeader({
+  plugin,
+  dark,
+  onClose,
+}: {
+  plugin: UnknownPlimiPlugin;
+  dark: boolean;
+  onClose?: () => void;
+}) {
+  const tints = TINTS[plugin.manifest.category] || TINTS.developer;
+  const permissions = describeToolPermissions(plugin);
+
+  return (
+    <div className="flex items-center justify-between gap-3 border-b border-[var(--p-border)] bg-[var(--p-surface)] px-[18px] py-[14px] md:px-[24px] md:py-[20px]">
+      <div className="flex min-w-0 items-center gap-[14px]">
+        <span
+          className="inline-flex h-[36px] w-[36px] shrink-0 items-center justify-center rounded-[12px] md:h-[44px] md:w-[44px]"
+          style={{
+            background: dark
+              ? `color-mix(in oklab, ${tints.neon} 12%, transparent)`
+              : tints.paper,
+          }}
+        >
+          <CategoryIcon
+            category={plugin.manifest.category}
+            color={dark ? tints.neon : tints.ink}
+            size={24}
+            strokeWidth={2}
+            aria-hidden="true"
+          />
+        </span>
+        <div className="min-w-0">
+          <div className="truncate font-sans text-[15px] font-semibold tracking-tight text-[var(--p-text)] md:text-[18px]">
+            {plugin.manifest.name}
+          </div>
+          <div className="truncate font-mono text-[11px] uppercase tracking-wider text-[var(--p-muted)]">
+            {plugin.manifest.category} / {permissions.join(" / ")}
+          </div>
+        </div>
+      </div>
+
+      {onClose && (
+        <button
+          onClick={onClose}
+          className="shrink-0 rounded-lg bg-[var(--p-chip)] px-3 py-2 font-sans text-[13px] text-[var(--p-muted)] cursor-pointer"
+        >
+          Close
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function ToolShell({
+  plugin,
+  onClose,
+  dark,
+}: {
+  plugin: UnknownPlimiPlugin;
+  onClose?: () => void;
+  dark?: boolean;
+}) {
+  const [input, setInput] = useState<ToolInput>({});
+  const [options, setOptions] = useState<ToolOptionsValue>({});
+  const { run, cancel, result, isExecuting, progress, error } =
+    useToolExecution(plugin);
+
+  const tints = TINTS[plugin.manifest.category] || TINTS.developer;
+  const isDark = dark ?? false;
+  const examples = getPluginExamples(plugin);
+  const primaryExample = examples[0];
+
+  const handleRun = useCallback(async () => {
+    await run(input, options);
+  }, [input, options, run]);
+
+  const handleApplyExample = useCallback(() => {
+    if (!primaryExample) return;
+
+    setInput(primaryExample.input);
+    if (primaryExample.options) {
+      const exampleOptions = Object.fromEntries(
+        Object.entries(primaryExample.options).filter(([, value]) => value !== undefined)
+      ) as ToolOptionsValue;
+
+      setOptions((currentOptions) => ({
+        ...currentOptions,
+        ...exampleOptions,
+      }));
+    }
+  }, [primaryExample]);
+
+  useEffect(() => {
+    if (plugin.capabilities?.customUi && plugin.customUi) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        if (!isExecuting) {
+          handleRun();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleRun, isExecuting, plugin]);
+
+  if (plugin.capabilities?.customUi && plugin.customUi) {
+    const CustomUi = plugin.customUi;
+
+    return (
+      <>
+        <ToolHeader plugin={plugin} dark={isDark} onClose={onClose} />
+        <div className="min-h-0 flex-1 overflow-y-auto bg-[var(--p-surface)]">
+          <Suspense
+            fallback={
+              <div className="p-6 font-sans text-sm text-[var(--p-muted)]">
+                Loading tool...
+              </div>
+            }
+          >
+            <CustomUi plugin={plugin} dark={isDark} examples={examples} />
+          </Suspense>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ToolHeader plugin={plugin} dark={isDark} onClose={onClose} />
+
+      <div className="grid min-h-0 flex-1 grid-cols-1 gap-[16px] overflow-y-auto bg-[var(--p-surface)] p-[18px] md:grid-cols-[1fr_280px] md:gap-[24px] md:p-[28px]">
+        <div className="flex flex-col gap-[24px]">
+          <ToolInputPanel
+            definition={plugin.manifest.input}
+            value={input}
+            onChange={setInput}
+            dark={isDark}
+            tints={tints}
+          />
+
+          {isExecuting && (
+            <ToolProgress
+              percentage={progress.percentage ?? 0}
+              message={progress.message}
+              onCancel={plugin.capabilities?.cancelable ? cancel : undefined}
+              dark={isDark}
+              tints={tints}
+            />
+          )}
+
+          {error && (
+            <div className="rounded-xl border border-red-200 bg-red-100 p-4 font-sans text-sm text-red-800">
+              <strong>Error:</strong> {error}
+            </div>
+          )}
+
+          {result && !isExecuting && (
+            <ToolResultPanel result={result} dark={isDark} tints={tints} />
+          )}
+        </div>
+
+        <div className="flex flex-col gap-[24px]">
+          {plugin.optionsSchema && (
+            <ToolOptionsPanel
+              schema={plugin.optionsSchema}
+              value={options}
+              onChange={setOptions}
+              dark={isDark}
+              tints={tints}
+              toolCategory={plugin.manifest.category}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3 border-t border-[var(--p-border)] bg-[var(--p-surface)] px-[18px] py-[12px] md:px-[24px] md:py-[14px]">
+        <span className="font-mono text-[11px] text-[var(--p-muted)]">
+          ready when you are
+        </span>
+        <div className="flex shrink-0 items-center gap-2">
+          {primaryExample && (
+            <ExampleActionButton
+              label={primaryExample.label}
+              disabled={isExecuting}
+              onClick={handleApplyExample}
+            />
+          )}
+          <button
+            onClick={handleRun}
+            disabled={isExecuting}
+            className="cursor-pointer rounded-[10px] bg-[var(--p-accent)] px-[18px] py-[10px] font-sans text-[13px] font-semibold tracking-tight text-[var(--p-accent-ink)] transition-opacity disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isExecuting ? "Running..." : `Run ${plugin.manifest.name.split(" ")[0]} ->`}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/tool/useToolExecution.ts b/src/components/tool/useToolExecution.ts
new file mode 100644
index 0000000..e8eabc7
--- /dev/null
+++ b/src/components/tool/useToolExecution.ts
@@ -0,0 +1,82 @@
+import { useCallback, useRef, useState } from "react";
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { PlimiPlugin, ToolContext, ToolProgress } from "../../core/plugins/plugin-types";
+import { runPlugin } from "../../core/plugins/plugin-runner";
+
+function errorMessage(error: unknown): string {
+  if (error instanceof DOMException && error.name === "AbortError") {
+    return "Operation was cancelled.";
+  }
+
+  if (error instanceof Error) {
+    return error.message || "An error occurred during execution.";
+  }
+
+  return "An error occurred during execution.";
+}
+
+export function useToolExecution<TOptions>(plugin: PlimiPlugin<TOptions>) {
+  const [result, setResult] = useState<ToolResult | null>(null);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [progress, setProgress] = useState<ToolProgress>({
+    percentage: 0,
+    message: "",
+  });
+  const [error, setError] = useState<string | null>(null);
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const run = useCallback(async (input: ToolInput, options: TOptions) => {
+    setIsExecuting(true);
+    setResult(null);
+    setError(null);
+    setProgress({ percentage: 0, message: "Initializing..." });
+
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    const context: ToolContext = {
+      signal: abortController.signal,
+      reportProgress: (nextProgress) => {
+        setProgress({
+          percentage: nextProgress.percentage ?? 0,
+          message: nextProgress.message ?? "",
+        });
+      },
+      logger: console,
+    };
+
+    try {
+      const nextResult = await runPlugin(plugin, input, options, context);
+      setResult(nextResult);
+      return nextResult;
+    } catch (err) {
+      setError(errorMessage(err));
+      return null;
+    } finally {
+      setIsExecuting(false);
+      abortControllerRef.current = null;
+    }
+  }, [plugin]);
+
+  const cancel = useCallback(() => {
+    abortControllerRef.current?.abort();
+  }, []);
+
+  const reset = useCallback(() => {
+    setResult(null);
+    setError(null);
+    setProgress({ percentage: 0, message: "" });
+  }, []);
+
+  return {
+    run,
+    cancel,
+    reset,
+    result,
+    isExecuting,
+    progress,
+    error,
+  };
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..7b0368e
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger";
+}
+
+export function Button({ variant = "primary", className = "", ...props }: ButtonProps) {
+  const baseStyles = "inline-flex items-center justify-center px-[18px] py-[10px] rounded-[10px] font-sans font-semibold text-[13px] tracking-tight cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-all";
+  
+  let variantStyles = "";
+  switch (variant) {
+    case "primary":
+      variantStyles = "bg-[var(--p-accent)] text-[var(--p-accent-ink)] hover:brightness-110";
+      break;
+    case "secondary":
+      variantStyles = "bg-[var(--p-chip)] text-[var(--p-text)] border border-[var(--p-border)] hover:bg-[var(--p-border)]";
+      break;
+    case "danger":
+      variantStyles = "bg-red-500 text-white hover:bg-red-600";
+      break;
+  }
+
+  return (
+    <button className={`${baseStyles} ${variantStyles} ${className}`} {...props} />
+  );
+}
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..010da84
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+interface CardProps {
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Card({ title, children, className = "" }: CardProps) {
+  return (
+    <div className={`flex flex-col gap-3 p-[18px] md:p-[24px] rounded-[14px] md:rounded-[18px] border border-[var(--p-border)] bg-[var(--p-surface-2)] ${className}`}>
+      {title && (
+        <h3 className="font-sans font-semibold text-[15px] md:text-[16px] text-[var(--p-text)] tracking-tight m-0">
+          {title}
+        </h3>
+      )}
+      <div className="flex-1 min-h-0">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/CategoryIcon.tsx b/src/components/ui/CategoryIcon.tsx
new file mode 100644
index 0000000..87616fa
--- /dev/null
+++ b/src/components/ui/CategoryIcon.tsx
@@ -0,0 +1,145 @@
+import React from "react";
+
+interface CategoryIconProps extends React.SVGProps<SVGSVGElement> {
+  category: string;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+export function CategoryIcon({
+  category,
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}: CategoryIconProps) {
+  const normCategory = category.toLowerCase();
+
+  switch (normCategory) {
+    case "developer":
+      return (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          {...props}
+        >
+          <polyline points="16 18 22 12 16 6" />
+          <polyline points="8 6 2 12 8 18" />
+          <line x1="14" y1="4" x2="10" y2="20" />
+        </svg>
+      );
+    case "image":
+      return (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          {...props}
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+          <circle cx="9" cy="9" r="2" />
+          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+        </svg>
+      );
+    case "pdf":
+      return (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          {...props}
+        >
+          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+          <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+          <path d="M10 9H8" />
+          <path d="M16 13H8" />
+          <path d="M16 17H8" />
+        </svg>
+      );
+    case "text":
+      return (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          {...props}
+        >
+          <polyline points="4 7 4 4 20 4 20 7" />
+          <line x1="9" y1="20" x2="15" y2="20" />
+          <line x1="12" y1="4" x2="12" y2="20" />
+        </svg>
+      );
+    case "crypto":
+      return (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          {...props}
+        >
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </svg>
+      );
+    case "privacy":
+      return (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          {...props}
+        >
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+      );
+    default:
+      // Fallback to the original triangle shape
+      return (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          {...props}
+        >
+          <path d="M12 2L2 22h20L12 2z" />
+        </svg>
+      );
+  }
+}
diff --git a/src/components/ui/Dropzone.tsx b/src/components/ui/Dropzone.tsx
new file mode 100644
index 0000000..8300956
--- /dev/null
+++ b/src/components/ui/Dropzone.tsx
@@ -0,0 +1,140 @@
+import React, { useCallback, useState } from "react";
+
+interface DropzoneProps {
+  accept?: string;
+  multiple?: boolean;
+  maxFiles?: number;
+  maxSizeMb?: number;
+  onFilesDrop: (files: File[]) => void;
+  className?: string;
+}
+
+function matchesAccept(file: File, accept?: string): boolean {
+  if (!accept) return true;
+  const rules = accept.split(",").map((rule) => rule.trim()).filter(Boolean);
+  if (rules.length === 0) return true;
+
+  return rules.some((rule) => {
+    if (rule.endsWith("/*")) return file.type.startsWith(rule.slice(0, -1));
+    if (rule.startsWith(".")) return file.name.toLowerCase().endsWith(rule.toLowerCase());
+    return file.type === rule;
+  });
+}
+
+export function Dropzone({
+  accept,
+  multiple = false,
+  maxFiles,
+  maxSizeMb,
+  onFilesDrop,
+  className = "",
+}: DropzoneProps) {
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const normalizeFiles = useCallback((incomingFiles: File[]) => {
+    const pickedFiles = multiple ? incomingFiles : incomingFiles.slice(0, 1);
+    const limitedFiles = maxFiles ? pickedFiles.slice(0, maxFiles) : pickedFiles;
+    const maxBytes = maxSizeMb ? maxSizeMb * 1024 * 1024 : undefined;
+
+    const invalidType = limitedFiles.find((file) => !matchesAccept(file, accept));
+    if (invalidType) {
+      setError(`${invalidType.name} is not an accepted file type.`);
+      return null;
+    }
+
+    const oversized = maxBytes
+      ? limitedFiles.find((file) => file.size > maxBytes)
+      : undefined;
+    if (oversized) {
+      setError(`${oversized.name} is larger than ${maxSizeMb} MB.`);
+      return null;
+    }
+
+    setError(null);
+    return limitedFiles;
+  }, [accept, maxFiles, maxSizeMb, multiple]);
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isDragActive) {
+      setIsDragActive(true);
+    }
+  }, [isDragActive]);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragActive(false);
+
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        const droppedFiles = normalizeFiles(Array.from(e.dataTransfer.files));
+        if (droppedFiles) onFilesDrop(droppedFiles);
+        e.dataTransfer.clearData();
+      }
+    },
+    [normalizeFiles, onFilesDrop]
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      if (e.target.files && e.target.files.length > 0) {
+        const selectedFiles = normalizeFiles(Array.from(e.target.files));
+        if (selectedFiles) onFilesDrop(selectedFiles);
+      }
+    },
+    [normalizeFiles, onFilesDrop]
+  );
+
+  return (
+    <div
+      className={`relative flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-[14px] min-h-[140px] transition-colors cursor-pointer text-center ${
+        isDragActive
+          ? "border-[var(--p-accent)] bg-opacity-10 bg-[var(--p-accent)]"
+          : "border-[var(--p-border)] hover:bg-[var(--p-surface)]"
+      } ${className}`}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <input
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleChange}
+        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+      />
+      <div className="flex flex-col items-center gap-2 pointer-events-none">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--p-muted)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+        <span className="font-sans text-[13px] font-medium text-[var(--p-text)]">
+          {isDragActive ? "Drop files now" : "Drop files here or click to browse"}
+        </span>
+        {error && (
+          <span className="font-sans text-[12px] text-red-600">
+            {error}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..3de390b
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export function Input({ label, className = "", ...props }: InputProps) {
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`}>
+      {label && (
+        <label className="font-sans text-[13px] text-[var(--p-text)]">
+          {label}
+        </label>
+      )}
+      <input
+        className="px-3 py-2 bg-[var(--p-surface)] border border-[var(--p-border)] rounded-lg text-[13px] text-[var(--p-text)] placeholder:text-[var(--p-muted)] font-sans focus:outline-none focus:border-[var(--p-accent)] transition-colors w-full"
+        {...props}
+      />
+    </div>
+  );
+}
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+}
+
+export function Textarea({ label, className = "", ...props }: TextareaProps) {
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`}>
+      {label && (
+        <label className="font-sans text-[13px] text-[var(--p-text)]">
+          {label}
+        </label>
+      )}
+      <textarea
+        className="px-3 py-2 bg-[var(--p-surface)] border border-[var(--p-border)] rounded-lg text-[13px] text-[var(--p-text)] placeholder:text-[var(--p-muted)] font-mono focus:outline-none focus:border-[var(--p-accent)] transition-colors w-full"
+        {...props}
+      />
+    </div>
+  );
+}
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
new file mode 100644
index 0000000..2dd6e1a
--- /dev/null
+++ b/src/components/ui/Select.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+interface SelectOption {
+  label: string;
+  value: string;
+}
+
+interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  options: SelectOption[];
+}
+
+export function Select({ label, options, className = "", ...props }: SelectProps) {
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`}>
+      {label && (
+        <label className="font-sans text-[13px] text-[var(--p-text)]">
+          {label}
+        </label>
+      )}
+      <select
+        className="px-3 py-2 bg-[var(--p-chip)] border border-[var(--p-border)] rounded-lg text-[13px] text-[var(--p-text)] font-sans focus:outline-none focus:border-[var(--p-accent)] transition-colors w-full cursor-pointer appearance-none"
+        {...props}
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/src/components/ui/Slider.tsx b/src/components/ui/Slider.tsx
new file mode 100644
index 0000000..d9757df
--- /dev/null
+++ b/src/components/ui/Slider.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  value: number;
+}
+
+export function Slider({ label, className = "", ...props }: SliderProps) {
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`}>
+      {label && (
+        <div className="flex justify-between items-center">
+          <label className="font-sans text-[13px] text-[var(--p-text)]">
+            {label}
+          </label>
+          <span className="font-mono text-[11px] text-[var(--p-muted)]">
+            {props.value}
+          </span>
+        </div>
+      )}
+      <input
+        type="range"
+        className="w-full h-1.5 bg-[var(--p-border)] rounded-full appearance-none cursor-pointer outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--p-accent)]"
+        {...props}
+      />
+    </div>
+  );
+}
diff --git a/src/core/io/input-types.ts b/src/core/io/input-types.ts
new file mode 100644
index 0000000..39dff52
--- /dev/null
+++ b/src/core/io/input-types.ts
@@ -0,0 +1,87 @@
+export interface ToolInputValue {
+  text?: string;
+  files?: File[];
+}
+
+interface BaseToolInputFieldDefinition {
+  key?: string;
+  label?: string;
+  description?: string;
+  example?: string;
+}
+
+export type ToolInputFieldDefinition =
+  | (BaseToolInputFieldDefinition & {
+      type: "text";
+      maxLength?: number;
+      placeholder?: string;
+      multiline?: boolean;
+      rows?: number;
+    })
+  | (BaseToolInputFieldDefinition & {
+      type: "files";
+      accept?: string[];
+      multiple?: boolean;
+      maxSizeMb?: number;
+      maxFiles?: number;
+    })
+  | (BaseToolInputFieldDefinition & {
+      type: "text-or-files";
+      accept?: string[];
+      maxSizeMb?: number;
+    });
+
+export type ToolInputDefinition =
+  | {
+      type: "none";
+    }
+  | ToolInputFieldDefinition
+  | {
+      type: "group";
+      fields: ToolInputFieldDefinition[];
+    };
+
+export interface ToolInput extends ToolInputValue {
+  values?: Record<string, ToolInputValue>;
+}
+
+export function getInputValue(input: ToolInput, key = "input"): ToolInputValue {
+  if (key === "input") {
+    return {
+      text: input.text,
+      files: input.files,
+    };
+  }
+
+  return input.values?.[key] ?? {};
+}
+
+export function getTextInput(input: ToolInput, key = "input"): string {
+  return getInputValue(input, key).text ?? "";
+}
+
+export function getFilesInput(input: ToolInput, key = "input"): File[] | undefined {
+  return getInputValue(input, key).files;
+}
+
+export function setInputValue(
+  input: ToolInput,
+  key: string,
+  value: ToolInputValue
+): ToolInput {
+  if (key === "input") {
+    return {
+      ...input,
+      text: value.text,
+      files: value.files,
+    };
+  }
+
+  return {
+    ...input,
+    values: {
+      ...(input.values ?? {}),
+      [key]: value,
+    },
+  };
+}
diff --git a/src/core/io/output-types.ts b/src/core/io/output-types.ts
new file mode 100644
index 0000000..e792972
--- /dev/null
+++ b/src/core/io/output-types.ts
@@ -0,0 +1,33 @@
+export interface OutputFile {
+  name: string;
+  mimeType: string;
+  blob: Blob;
+  sizeBefore?: number;
+  sizeAfter?: number;
+}
+
+export type ToolOutputDefinition =
+  | { type: "text" }
+  | { type: "files" }
+  | { type: "json" }
+  | { type: "table" };
+
+export type ToolResult =
+  | {
+      type: "text";
+      value: string;
+      language?: "plain" | "json" | "html" | "markdown";
+    }
+  | {
+      type: "files";
+      files: OutputFile[];
+    }
+  | {
+      type: "json";
+      value: unknown;
+    }
+  | {
+      type: "table";
+      columns: string[];
+      rows: Array<Array<string | number | boolean | null>>;
+    };
diff --git a/src/core/plugins/plugin-examples.ts b/src/core/plugins/plugin-examples.ts
new file mode 100644
index 0000000..c715f85
--- /dev/null
+++ b/src/core/plugins/plugin-examples.ts
@@ -0,0 +1,70 @@
+import {
+  setInputValue,
+  type ToolInput,
+  type ToolInputDefinition,
+  type ToolInputFieldDefinition,
+} from "../io/input-types";
+import type {
+  ToolExample,
+  ToolOptionsValue,
+  UnknownPlimiPlugin,
+} from "./plugin-types";
+
+const DEFAULT_LABEL = "Try example";
+
+function exampleForField(
+  field: ToolInputFieldDefinition,
+  fallback?: string
+): string | undefined {
+  if (field.type === "files") return undefined;
+  return field.example ?? fallback;
+}
+
+function inputFromDefinition(
+  definition: ToolInputDefinition,
+  manifestExample?: string
+): ToolInput | undefined {
+  if (definition.type === "none") {
+    return manifestExample ? {} : undefined;
+  }
+
+  if (definition.type !== "group") {
+    const example = exampleForField(definition, manifestExample);
+    return example
+      ? setInputValue({}, definition.key ?? "input", { text: example })
+      : undefined;
+  }
+
+  let nextInput: ToolInput = {};
+  let hasExample = false;
+
+  definition.fields.forEach((field) => {
+    const example = exampleForField(field);
+    if (!example) return;
+
+    hasExample = true;
+    nextInput = setInputValue(nextInput, field.key ?? "input", {
+      text: example,
+    });
+  });
+
+  return hasExample ? nextInput : undefined;
+}
+
+export function getPluginExamples(
+  plugin: UnknownPlimiPlugin
+): ToolExample<ToolOptionsValue>[] {
+  if (plugin.examples && plugin.examples.length > 0) {
+    return plugin.examples.map((example) => ({
+      ...example,
+      label: example.label ?? DEFAULT_LABEL,
+    }));
+  }
+
+  const input = inputFromDefinition(
+    plugin.manifest.input,
+    plugin.manifest.example
+  );
+
+  return input ? [{ label: DEFAULT_LABEL, input }] : [];
+}
diff --git a/src/core/plugins/plugin-loader.ts b/src/core/plugins/plugin-loader.ts
new file mode 100644
index 0000000..6b2f999
--- /dev/null
+++ b/src/core/plugins/plugin-loader.ts
@@ -0,0 +1,12 @@
+import type { UnknownPlimiPlugin } from "./plugin-types";
+import { getPluginById, getAllPlugins } from "./plugin-registry";
+
+// In V1, loading is static since we bundle the plugins.
+// In the future, this file will handle lazy loading of external plugins.
+export async function loadPlugin(id: string): Promise<UnknownPlimiPlugin | undefined> {
+  return getPluginById(id);
+}
+
+export async function loadAllPlugins(): Promise<UnknownPlimiPlugin[]> {
+  return getAllPlugins();
+}
diff --git a/src/core/plugins/plugin-permissions.ts b/src/core/plugins/plugin-permissions.ts
new file mode 100644
index 0000000..661068a
--- /dev/null
+++ b/src/core/plugins/plugin-permissions.ts
@@ -0,0 +1,35 @@
+import type { ToolPermissions, UnknownPlimiPlugin } from "./plugin-types";
+
+export const DEFAULT_PERMISSIONS: ToolPermissions = {
+  network: "none",
+  clipboard: "none",
+  fileSystem: "read",
+};
+
+export function getToolPermissions(plugin: UnknownPlimiPlugin): ToolPermissions {
+  return {
+    ...DEFAULT_PERMISSIONS,
+    ...plugin.permissions,
+  };
+}
+
+export function describeToolPermissions(plugin: UnknownPlimiPlugin): string[] {
+  const permissions = getToolPermissions(plugin);
+  const descriptions = ["Runs locally"];
+
+  if (permissions.network === "none") {
+    descriptions.push("No network");
+  } else {
+    descriptions.push(`${permissions.network} network`);
+  }
+
+  if (permissions.clipboard && permissions.clipboard !== "none") {
+    descriptions.push(`Clipboard ${permissions.clipboard}`);
+  }
+
+  if (permissions.fileSystem && permissions.fileSystem !== "none") {
+    descriptions.push(`Files ${permissions.fileSystem}`);
+  }
+
+  return descriptions;
+}
diff --git a/src/core/plugins/plugin-registry.ts b/src/core/plugins/plugin-registry.ts
new file mode 100644
index 0000000..cc00dba
--- /dev/null
+++ b/src/core/plugins/plugin-registry.ts
@@ -0,0 +1,74 @@
+import type { PlimiPlugin, UnknownPlimiPlugin } from "./plugin-types";
+import { base64Plugin } from "../../tools/base64";
+import { imageOptimizerPlugin } from "../../tools/image-optimizer";
+import { imageEditorPlugin } from "../../tools/image-editor";
+import { pdfMergerPlugin } from "../../tools/pdf-merger";
+import { hashGeneratorPlugin } from "../../tools/hash-generator";
+import { uuidGeneratorPlugin } from "../../tools/uuid-generator";
+import { jsonFormatterPlugin } from "../../tools/json-formatter";
+import { textCasePlugin } from "../../tools/text-case";
+import { urlEncoderPlugin } from "../../tools/url-encoder";
+import { loremIpsumPlugin } from "../../tools/lorem-ipsum";
+import { colorConverterPlugin } from "../../tools/color-converter";
+import { regexTesterPlugin } from "../../tools/regex-tester";
+import { numberBasePlugin } from "../../tools/number-base";
+import { timestampConverterPlugin } from "../../tools/timestamp-converter";
+import { markdownToHtmlPlugin } from "../../tools/markdown-to-html";
+import { textDiffPlugin } from "../../tools/text-diff";
+import { htmlEntityPlugin } from "../../tools/html-entity";
+import { variablesConverterPlugin } from "../../tools/variables-converter";
+import { pdfSplitterPlugin } from "../../tools/pdf-splitter";
+import { imageRedactorPlugin } from "../../tools/image-redactor";
+import { exifScrubberPlugin } from "../../tools/exif-scrubber";
+import { jwtDecoderPlugin } from "../../tools/jwt-decoder";
+import { csvToolsPlugin } from "../../tools/csv-tools";
+import { qrCodeGeneratorPlugin } from "../../tools/qr-code-generator";
+import { passwordGeneratorPlugin } from "../../tools/password-generator";
+import { fileChecksumVerifierPlugin } from "../../tools/file-checksum-verifier";
+
+function erasePlugin<TOptions>(plugin: PlimiPlugin<TOptions>): UnknownPlimiPlugin {
+  return plugin as unknown as UnknownPlimiPlugin;
+}
+
+export const pluginRegistry: UnknownPlimiPlugin[] = [
+  erasePlugin(base64Plugin),
+  erasePlugin(hashGeneratorPlugin),
+  erasePlugin(uuidGeneratorPlugin),
+  erasePlugin(jsonFormatterPlugin),
+  erasePlugin(textCasePlugin),
+  erasePlugin(urlEncoderPlugin),
+  erasePlugin(loremIpsumPlugin),
+  erasePlugin(colorConverterPlugin),
+  erasePlugin(regexTesterPlugin),
+  erasePlugin(numberBasePlugin),
+  erasePlugin(timestampConverterPlugin),
+  erasePlugin(variablesConverterPlugin),
+  erasePlugin(markdownToHtmlPlugin),
+  erasePlugin(textDiffPlugin),
+  erasePlugin(htmlEntityPlugin),
+  erasePlugin(imageEditorPlugin),
+  erasePlugin(imageOptimizerPlugin),
+  erasePlugin(pdfMergerPlugin),
+  erasePlugin(pdfSplitterPlugin),
+  erasePlugin(imageRedactorPlugin),
+  erasePlugin(exifScrubberPlugin),
+  erasePlugin(jwtDecoderPlugin),
+  erasePlugin(csvToolsPlugin),
+  erasePlugin(qrCodeGeneratorPlugin),
+  erasePlugin(passwordGeneratorPlugin),
+  erasePlugin(fileChecksumVerifierPlugin),
+];
+
+export function getAllPlugins(): UnknownPlimiPlugin[] {
+  return pluginRegistry;
+}
+
+export function getPluginById(id: string): UnknownPlimiPlugin | undefined {
+  return pluginRegistry.find((plugin) => plugin.manifest.id === id);
+}
+
+export function getPluginsByCategory(category: string): UnknownPlimiPlugin[] {
+  return pluginRegistry.filter(
+    (plugin) => plugin.manifest.category === category
+  );
+}
diff --git a/src/core/plugins/plugin-runner.ts b/src/core/plugins/plugin-runner.ts
new file mode 100644
index 0000000..ecd3ffe
--- /dev/null
+++ b/src/core/plugins/plugin-runner.ts
@@ -0,0 +1,84 @@
+import type { PlimiPlugin, ToolContext } from "./plugin-types";
+import type { ToolInput } from "../io/input-types";
+import type { ToolResult } from "../io/output-types";
+import type { ToolWorkerRequest, ToolWorkerResponse } from "./worker-protocol";
+import { normalizeToolOptions, validateToolInput } from "./plugin-validation";
+
+export async function runPlugin<TOptions>(
+  plugin: PlimiPlugin<TOptions>,
+  input: ToolInput,
+  options: TOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  validateToolInput(plugin.manifest.input, input);
+  const normalizedOptions = plugin.optionsSchema
+    ? normalizeToolOptions(plugin.optionsSchema, options) as TOptions
+    : options;
+
+  if (plugin.capabilities?.worker && plugin.worker) {
+    return runPluginInWorker(plugin, input, normalizedOptions, context);
+  }
+
+  if (!plugin.run) {
+    throw new Error(`Plugin ${plugin.manifest.id} has no runner`);
+  }
+
+  return plugin.run(input, normalizedOptions, context);
+}
+
+function runPluginInWorker<TOptions>(
+  plugin: PlimiPlugin<TOptions>,
+  input: ToolInput,
+  options: TOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  return new Promise((resolve, reject) => {
+    if (!plugin.worker) {
+      return reject(new Error("Worker is not defined for this plugin"));
+    }
+
+    const worker = plugin.worker();
+    const jobId = Math.random().toString(36).substring(7);
+
+    // Handle cancellation
+    const onAbort = () => {
+      worker.terminate();
+      reject(new DOMException("Operation cancelled by user.", "AbortError"));
+    };
+    context.signal.addEventListener("abort", onAbort);
+
+    worker.onmessage = (e: MessageEvent<ToolWorkerResponse>) => {
+      const { type, id } = e.data;
+
+      if (id !== jobId) return;
+
+      if (type === "progress") {
+        context.reportProgress(e.data.progress);
+      } else if (type === "success") {
+        context.signal.removeEventListener("abort", onAbort);
+        worker.terminate();
+        resolve(e.data.result);
+      } else if (type === "error") {
+        context.signal.removeEventListener("abort", onAbort);
+        worker.terminate();
+        reject(new Error(e.data.error));
+      }
+    };
+
+    worker.onerror = (e) => {
+      context.signal.removeEventListener("abort", onAbort);
+      worker.terminate();
+      reject(new Error("Worker error: " + e.message));
+    };
+
+    // Serialize input payload (can't send DOM elements or complex functions)
+    const request: ToolWorkerRequest<TOptions> = {
+      type: "run",
+      id: jobId,
+      input,
+      options,
+    };
+
+    worker.postMessage(request);
+  });
+}
diff --git a/src/core/plugins/plugin-types.ts b/src/core/plugins/plugin-types.ts
new file mode 100644
index 0000000..148003b
--- /dev/null
+++ b/src/core/plugins/plugin-types.ts
@@ -0,0 +1,155 @@
+import React from "react";
+import type { ToolInputDefinition, ToolInput } from "../io/input-types";
+import type { ToolOutputDefinition, ToolResult } from "../io/output-types";
+
+export type ToolCategory =
+  | "image"
+  | "pdf"
+  | "text"
+  | "developer"
+  | "crypto"
+  | "conversion"
+  | "privacy";
+
+export interface ToolManifest {
+  id: string;
+  name: string;
+  description: string;
+  category: ToolCategory;
+  version: string;
+
+  input: ToolInputDefinition;
+  output: ToolOutputDefinition;
+
+  tags?: string[];
+  icon?: string;
+  example?: string;
+  offlineReady: boolean;
+}
+
+export type ToolOptionField =
+  | {
+      type: "text";
+      key: string;
+      label: string;
+      defaultValue?: string;
+      placeholder?: string;
+    }
+  | {
+      type: "number";
+      key: string;
+      label: string;
+      defaultValue: number;
+      min?: number;
+      max?: number;
+      step?: number;
+    }
+  | {
+      type: "boolean";
+      key: string;
+      label: string;
+      defaultValue: boolean;
+    }
+  | {
+      type: "select";
+      key: string;
+      label: string;
+      defaultValue: string;
+      options: Array<{
+        label: string;
+        value: string;
+      }>;
+    }
+  | {
+      type: "slider";
+      key: string;
+      label: string;
+      defaultValue: number;
+      min: number;
+      max: number;
+      step?: number;
+    };
+
+export interface ToolOptionsSchema {
+  fields: ToolOptionField[];
+}
+
+export type ToolOptionValue = string | number | boolean;
+export type ToolOptionsValue = Record<string, ToolOptionValue>;
+
+export interface ToolCapabilities {
+  batch?: boolean;
+  worker?: boolean;
+  wasm?: boolean;
+  preview?: boolean;
+  streaming?: boolean;
+  cancelable?: boolean;
+  customUi?: boolean;
+}
+
+export interface ToolPermissions {
+  network: "none" | "optional" | "required";
+  clipboard?: "none" | "read" | "write" | "read-write";
+  fileSystem?: "none" | "read" | "write" | "read-write";
+}
+
+export interface ToolProgress {
+  percentage?: number;
+  message?: string;
+}
+
+export interface ToolExample<TOptions = unknown> {
+  label?: string;
+  description?: string;
+  input: ToolInput;
+  options?: Partial<TOptions>;
+}
+
+export interface ToolContext {
+  signal: AbortSignal;
+  reportProgress: (progress: ToolProgress) => void;
+  logger: {
+    info: (message: string) => void;
+    warn: (message: string) => void;
+    error: (message: string) => void;
+  };
+}
+
+export type ToolRunner<TOptions = unknown> = (
+  input: ToolInput,
+  options: TOptions,
+  context: ToolContext
+) => Promise<ToolResult>;
+
+export interface ToolUiProps<TOptions = unknown> {
+  plugin: PlimiPlugin<TOptions>;
+  dark?: boolean;
+  examples?: ToolExample<TOptions>[];
+}
+
+export interface PlimiPlugin<TOptions = unknown> {
+  manifest: ToolManifest;
+  optionsSchema?: ToolOptionsSchema;
+  examples?: ToolExample<TOptions>[];
+  capabilities?: ToolCapabilities;
+  permissions?: ToolPermissions;
+
+  run?: ToolRunner<TOptions>;
+
+  worker?: () => Worker;
+
+  customUi?: React.LazyExoticComponent<
+    React.ComponentType<ToolUiProps<TOptions>>
+  >;
+}
+
+export type UnknownPlimiPlugin = Omit<
+  PlimiPlugin<never>,
+  "run" | "customUi"
+> & {
+  run?: ToolRunner<ToolOptionsValue>;
+  examples?: ToolExample<ToolOptionsValue>[];
+  customUi?: React.LazyExoticComponent<
+    React.ComponentType<ToolUiProps<ToolOptionsValue>>
+  >;
+};
diff --git a/src/core/plugins/plugin-validation.ts b/src/core/plugins/plugin-validation.ts
new file mode 100644
index 0000000..1c93ecc
--- /dev/null
+++ b/src/core/plugins/plugin-validation.ts
@@ -0,0 +1,151 @@
+import type {
+  ToolOptionField,
+  ToolOptionValue,
+  ToolOptionsSchema,
+  ToolOptionsValue,
+} from "./plugin-types";
+import type {
+  ToolInput,
+  ToolInputDefinition,
+  ToolInputFieldDefinition,
+} from "../io/input-types";
+import { getInputValue } from "../io/input-types";
+
+function describeInput(field: ToolInputFieldDefinition): string {
+  return field.label ?? field.key ?? "input";
+}
+
+function matchesAccept(file: File, accept: string[]): boolean {
+  if (accept.length === 0) return true;
+
+  return accept.some((rule) => {
+    if (rule.endsWith("/*")) {
+      return file.type.startsWith(rule.slice(0, -1));
+    }
+
+    if (rule.startsWith(".")) {
+      return file.name.toLowerCase().endsWith(rule.toLowerCase());
+    }
+
+    return file.type === rule;
+  });
+}
+
+function validateText(field: Extract<ToolInputFieldDefinition, { type: "text" }>, text?: string) {
+  if (field.maxLength !== undefined && (text?.length ?? 0) > field.maxLength) {
+    throw new Error(`${describeInput(field)} must be ${field.maxLength} characters or fewer.`);
+  }
+}
+
+function validateFiles(
+  field: Extract<ToolInputFieldDefinition, { type: "files" | "text-or-files" }>,
+  files?: File[]
+) {
+  if (!files || files.length === 0) return;
+
+  if ("multiple" in field && field.multiple === false && files.length > 1) {
+    throw new Error(`${describeInput(field)} accepts only one file.`);
+  }
+
+  if ("maxFiles" in field && field.maxFiles !== undefined && files.length > field.maxFiles) {
+    throw new Error(`${describeInput(field)} accepts at most ${field.maxFiles} files.`);
+  }
+
+  if (field.accept) {
+    const invalidFile = files.find((file) => !matchesAccept(file, field.accept ?? []));
+    if (invalidFile) {
+      throw new Error(`${invalidFile.name} is not an accepted file type.`);
+    }
+  }
+
+  if (field.maxSizeMb !== undefined) {
+    const maxBytes = field.maxSizeMb * 1024 * 1024;
+    const oversized = files.find((file) => file.size > maxBytes);
+    if (oversized) {
+      throw new Error(`${oversized.name} is larger than ${field.maxSizeMb} MB.`);
+    }
+  }
+}
+
+function validateField(field: ToolInputFieldDefinition, input: ToolInput) {
+  const value = getInputValue(input, field.key ?? "input");
+
+  if (field.type === "text") {
+    validateText(field, value.text);
+    return;
+  }
+
+  if (field.type === "files") {
+    validateFiles(field, value.files);
+    return;
+  }
+
+  validateFiles(field, value.files);
+}
+
+export function validateToolInput(definition: ToolInputDefinition, input: ToolInput) {
+  if (definition.type === "none") return;
+
+  const fields = definition.type === "group" ? definition.fields : [definition];
+  fields.forEach((field) => validateField(field, input));
+}
+
+function normalizeOptionField(
+  field: ToolOptionField,
+  rawValue: unknown
+): ToolOptionValue {
+  const value = rawValue ?? field.defaultValue;
+
+  if (field.type === "text") {
+    return typeof value === "string" ? value : String(value ?? "");
+  }
+
+  if (field.type === "boolean") {
+    if (typeof value !== "boolean") {
+      throw new Error(`${field.label} must be true or false.`);
+    }
+    return value;
+  }
+
+  if (field.type === "select") {
+    if (typeof value !== "string") {
+      throw new Error(`${field.label} must be one of the available options.`);
+    }
+
+    if (!field.options.some((option) => option.value === value)) {
+      throw new Error(`${field.label} has an invalid option.`);
+    }
+
+    return value;
+  }
+
+  if (typeof value !== "number" || Number.isNaN(value)) {
+    throw new Error(`${field.label} must be a number.`);
+  }
+
+  if (field.min !== undefined && value < field.min) {
+    throw new Error(`${field.label} must be at least ${field.min}.`);
+  }
+
+  if (field.max !== undefined && value > field.max) {
+    throw new Error(`${field.label} must be at most ${field.max}.`);
+  }
+
+  return value;
+}
+
+export function normalizeToolOptions(
+  schema: ToolOptionsSchema | undefined,
+  options: unknown
+): ToolOptionsValue {
+  if (!schema) return {};
+
+  const raw = options && typeof options === "object"
+    ? (options as Record<string, unknown>)
+    : {};
+
+  return schema.fields.reduce<ToolOptionsValue>((acc, field) => {
+    acc[field.key] = normalizeOptionField(field, raw[field.key]);
+    return acc;
+  }, {});
+}
diff --git a/src/core/plugins/worker-protocol.ts b/src/core/plugins/worker-protocol.ts
new file mode 100644
index 0000000..54d50f0
--- /dev/null
+++ b/src/core/plugins/worker-protocol.ts
@@ -0,0 +1,27 @@
+import type { ToolInput } from "../io/input-types";
+import type { ToolProgress } from "./plugin-types";
+import type { ToolResult } from "../io/output-types";
+
+export interface ToolWorkerRequest<TOptions = unknown> {
+  type: "run";
+  id: string;
+  input: ToolInput;
+  options: TOptions;
+}
+
+export type ToolWorkerResponse =
+  | {
+      type: "progress";
+      id: string;
+      progress: ToolProgress;
+    }
+  | {
+      type: "success";
+      id: string;
+      result: ToolResult;
+    }
+  | {
+      type: "error";
+      id: string;
+      error: string;
+    };
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..09e388c
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,127 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
+}
+
+:root {
+  /* Light mode (warm paper) */
+  --p-bg-light:        #F4EEE3;
+  --p-surface-light:   #FBF6ED;
+  --p-surface-2-light: #FFFBF2;
+  --p-border-light:    #E4DACA;
+  --p-chip-light:      #EDE3D0;
+  --p-text-light:      #1A1714;
+  --p-muted-light:     #786E60;
+  --p-shadow-soft-light:  rgba(60, 40, 20, 0.22);
+  --p-shadow-inset-light: rgba(255, 255, 255, 0.7);
+
+  /* Dark mode */
+  --p-bg-dark:        #0F1117;
+  --p-surface-dark:   #161922;
+  --p-surface-2-dark: #1B1F2A;
+  --p-border-dark:    #262A36;
+  --p-chip-dark:      #1E222D;
+  --p-text-dark:      #F2F2EF;
+  --p-muted-dark:     #8B919C;
+  --p-shadow-soft-dark:  rgba(0, 0, 0, 0.6);
+  --p-shadow-inset-dark: rgba(255, 255, 255, 0.03);
+
+  /* Accent — default lime */
+  --p-accent-light: #5B8C3E;
+  --p-accent-dark:  #A8FF60;
+  --p-accent-ink-light: #FFFBF2;
+  --p-accent-ink-dark:  #0F1117;
+}
+
+.plimi-theme-light {
+  --p-bg:           var(--p-bg-light);
+  --p-surface:      var(--p-surface-light);
+  --p-surface-2:    var(--p-surface-2-light);
+  --p-border:       var(--p-border-light);
+  --p-chip:         var(--p-chip-light);
+  --p-text:         var(--p-text-light);
+  --p-muted:        var(--p-muted-light);
+  --p-shadow-soft:  var(--p-shadow-soft-light);
+  --p-shadow-inset: var(--p-shadow-inset-light);
+  --p-accent:       var(--p-accent-light);
+  --p-accent-ink:   var(--p-accent-ink-light);
+  --p-paper-noise:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.22  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+}
+
+.plimi-theme-dark {
+  --p-bg:           var(--p-bg-dark);
+  --p-surface:      var(--p-surface-dark);
+  --p-surface-2:    var(--p-surface-2-dark);
+  --p-border:       var(--p-border-dark);
+  --p-chip:         var(--p-chip-dark);
+  --p-text:         var(--p-text-dark);
+  --p-muted:        var(--p-muted-dark);
+  --p-shadow-soft:  var(--p-shadow-soft-dark);
+  --p-shadow-inset: var(--p-shadow-inset-dark);
+  --p-accent:       var(--p-accent-dark);
+  --p-accent-ink:   var(--p-accent-ink-dark);
+  --p-paper-noise:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+}
+
+/* Animations */
+@keyframes plimi-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes plimi-slide {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.animate-plimi-fade {
+  animation: plimi-fade 0.18s ease-out;
+}
+
+.animate-plimi-slide {
+  animation: plimi-slide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+html, body {
+  margin: 0; 
+  padding: 0; 
+  height: 100%;
+  background: var(--p-bg);
+  color: var(--p-text);
+  font-family: 'Geist', system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+}
+
+button:focus-visible {
+  outline: 2px solid var(--p-accent);
+  outline-offset: 2px;
+}
+
+input::placeholder {
+  color: var(--p-muted);
+  opacity: 0.7;
+}
+
+/* Scrollbar styling to match the sleek design */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--p-border);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--p-muted);
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..fa41359
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { App } from "./app/App";
+import { ThemeProvider } from "./app/ThemeProvider";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </StrictMode>
+);
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..7059f23
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,5 @@
+import { Navigate } from "react-router-dom";
+
+export function HomePage() {
+  return <Navigate to="/tools" replace />;
+}
diff --git a/src/pages/HowItWorksPage.tsx b/src/pages/HowItWorksPage.tsx
new file mode 100644
index 0000000..f7226b9
--- /dev/null
+++ b/src/pages/HowItWorksPage.tsx
@@ -0,0 +1,202 @@
+import { Link } from "react-router-dom";
+
+const workflow = [
+  {
+    label: "Input",
+    title: "Choose a tool",
+    copy: "Paste text, pick a file, or adjust options in a generated tool panel.",
+    icon: (
+      <path d="M12 5v14M5 12h14" />
+    ),
+  },
+  {
+    label: "Run",
+    title: "Process locally",
+    copy: "The plugin runs in your browser using JavaScript, workers, Canvas, or PDF libraries.",
+    icon: (
+      <>
+        <path d="M12 3v3M12 18v3M3 12h3M18 12h3" />
+        <circle cx="12" cy="12" r="4" />
+      </>
+    ),
+  },
+  {
+    label: "Output",
+    title: "Copy or download",
+    copy: "Results appear immediately in the page. Files stay on the device unless you export them.",
+    icon: (
+      <>
+        <path d="M12 4v11" />
+        <path d="m7 10 5 5 5-5" />
+        <path d="M5 20h14" />
+      </>
+    ),
+  },
+];
+
+const principles = [
+  {
+    title: "No upload step",
+    copy: "Plimi does not send your inputs to an application server for conversion.",
+  },
+  {
+    title: "Plugin boundaries",
+    copy: "Each utility declares its own inputs, options, permissions, and result type.",
+  },
+  {
+    title: "Responsive execution",
+    copy: "Heavier work can move off the main interface thread so the page stays usable.",
+  },
+  {
+    title: "Explicit results",
+    copy: "Tools return structured outputs: copied text, rendered previews, or downloadable files.",
+  },
+];
+
+const layers = [
+  { name: "Tool manifest", detail: "Inputs, options, permissions" },
+  { name: "Generated UI", detail: "Forms, sliders, selects, validation" },
+  { name: "Runner", detail: "Browser APIs, workers, local libraries" },
+  { name: "Result panel", detail: "Preview, copy, download" },
+];
+
+function IconFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex h-10 w-10 items-center justify-center rounded-[10px] border border-[var(--p-border)] bg-[var(--p-chip)] text-[var(--p-text)]">
+      <svg
+        width="19"
+        height="19"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        {children}
+      </svg>
+    </span>
+  );
+}
+
+export function HowItWorksPage() {
+  return (
+    <div className="mx-auto flex max-w-[1120px] flex-col gap-10 pb-16 animate-plimi-slide">
+      <section className="grid grid-cols-1 gap-8 md:grid-cols-[0.95fr_1.05fr] md:items-end">
+        <div className="flex flex-col gap-4">
+          <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-muted)]">
+            browser-first architecture
+          </span>
+          <h1 className="m-0 max-w-[620px] font-sans text-4xl font-bold leading-[1.02] tracking-tight text-[var(--p-text)] text-balance md:text-[56px]">
+            Your files stay where they started.
+          </h1>
+          <p className="m-0 max-w-[560px] text-base leading-relaxed text-[var(--p-muted)] text-pretty">
+            Plimi is a collection of small local utilities. The interface loads the tool, runs the
+            work in the browser, then hands the result back to you without a server round trip.
+          </p>
+        </div>
+
+        <div
+          className="rounded-[20px] border border-[var(--p-border)] bg-[var(--p-surface)] p-4 md:p-5"
+          style={{
+            boxShadow:
+              "0 18px 38px -28px var(--p-shadow-soft), 0 1px 0 0 var(--p-shadow-inset)",
+          }}
+        >
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 md:grid-cols-1 lg:grid-cols-3">
+            {workflow.map((step, index) => (
+              <div
+                key={step.label}
+                className="relative flex min-h-[170px] flex-col gap-4 rounded-[16px] border border-[var(--p-border)] bg-[var(--p-surface-2)] p-5"
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <IconFrame>{step.icon}</IconFrame>
+                  <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-muted)]">
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-accent)]">
+                    {step.label}
+                  </span>
+                  <h2 className="m-0 font-sans text-[17px] font-semibold tracking-tight text-[var(--p-text)]">
+                    {step.title}
+                  </h2>
+                  <p className="m-0 text-sm leading-relaxed text-[var(--p-muted)]">{step.copy}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        {principles.map((item) => (
+          <article
+            key={item.title}
+            className="flex min-h-[150px] flex-col justify-between gap-5 rounded-[16px] border border-[var(--p-border)] bg-[var(--p-surface)] p-5"
+          >
+            <h2 className="m-0 font-sans text-[16px] font-semibold tracking-tight text-[var(--p-text)]">
+              {item.title}
+            </h2>
+            <p className="m-0 text-sm leading-relaxed text-[var(--p-muted)]">{item.copy}</p>
+          </article>
+        ))}
+      </section>
+
+      <section className="grid grid-cols-1 gap-6 rounded-[20px] border border-[var(--p-border)] bg-[var(--p-surface-2)] p-5 md:grid-cols-[0.75fr_1.25fr] md:p-7">
+        <div className="flex flex-col gap-3">
+          <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-muted)]">
+            plugin model
+          </span>
+          <h2 className="m-0 font-sans text-2xl font-bold tracking-tight text-[var(--p-text)]">
+            One shell, many tools.
+          </h2>
+          <p className="m-0 text-sm leading-relaxed text-[var(--p-muted)]">
+            Plimi keeps the application shell simple. Each tool contributes a compact manifest and
+            a runner, so new utilities can share the same dependable interface.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          {layers.map((layer, index) => (
+            <div
+              key={layer.name}
+              className="flex items-start gap-4 rounded-[14px] border border-[var(--p-border)] bg-[var(--p-surface)] p-4"
+            >
+              <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--p-chip)] font-mono text-[11px] text-[var(--p-muted)]">
+                {index + 1}
+              </span>
+              <div className="flex flex-col gap-1">
+                <h3 className="m-0 font-sans text-sm font-semibold text-[var(--p-text)]">
+                  {layer.name}
+                </h3>
+                <p className="m-0 text-[13px] leading-relaxed text-[var(--p-muted)]">
+                  {layer.detail}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="flex flex-col items-start justify-between gap-4 border-t border-[var(--p-border)] pt-7 md:flex-row md:items-center">
+        <div className="flex flex-col gap-1">
+          <h2 className="m-0 font-sans text-xl font-semibold tracking-tight text-[var(--p-text)]">
+            Ready to run something?
+          </h2>
+          <p className="m-0 text-sm text-[var(--p-muted)]">
+            Pick a utility and the same local workflow applies.
+          </p>
+        </div>
+        <Link
+          to="/tools"
+          className="inline-flex items-center justify-center rounded-[10px] bg-[var(--p-accent)] px-5 py-3 font-sans text-sm font-semibold tracking-tight text-[var(--p-accent-ink)] no-underline transition-[filter] hover:brightness-110"
+        >
+          Browse tools
+        </Link>
+      </section>
+    </div>
+  );
+}
diff --git a/src/pages/ToolDetailPage.tsx b/src/pages/ToolDetailPage.tsx
new file mode 100644
index 0000000..ea36384
--- /dev/null
+++ b/src/pages/ToolDetailPage.tsx
@@ -0,0 +1,47 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { pluginRegistry } from "../core/plugins/plugin-registry";
+import { ToolShell } from "../components/tool/ToolShell";
+import { useTheme } from "../app/useTheme";
+
+export function ToolDetailPage() {
+  const { toolId } = useParams<{ toolId: string }>();
+  const navigate = useNavigate();
+  const { dark } = useTheme();
+
+  const plugin = pluginRegistry.find((p) => p.manifest.id === toolId);
+
+  if (!plugin) {
+    return (
+      <div className="p-8">
+        <h2 className="text-xl font-semibold mb-4 text-[var(--p-text)]">Tool not found</h2>
+        <button onClick={() => navigate("/tools")} className="text-blue-500 hover:underline">
+          Return to directory
+        </button>
+      </div>
+    );
+  }
+
+  const handleClose = () => {
+    navigate("/tools");
+  };
+
+  return (
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center p-0 md:p-10 animate-plimi-fade"
+      style={{
+        background: 'color-mix(in oklab, var(--p-bg) 70%, transparent)',
+        backdropFilter: 'blur(8px)',
+      }}
+    >
+      <div 
+        onClick={(e) => e.stopPropagation()}
+        className="w-full md:w-[min(900px,100%)] h-[92%] md:h-auto md:max-h-full bg-[var(--p-surface)] rounded-t-[20px] md:rounded-[24px] border-[1.5px] border-[var(--p-border)] flex flex-col animate-plimi-slide self-end md:self-center overflow-hidden"
+        style={{
+          boxShadow: '0 40px 80px -30px var(--p-shadow-soft)',
+        }}
+      >
+        <ToolShell plugin={plugin} onClose={handleClose} dark={dark} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/ToolsPage.tsx b/src/pages/ToolsPage.tsx
new file mode 100644
index 0000000..5e2943e
--- /dev/null
+++ b/src/pages/ToolsPage.tsx
@@ -0,0 +1,153 @@
+import { useState, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { pluginRegistry } from "../core/plugins/plugin-registry";
+import type { UnknownPlimiPlugin } from "../core/plugins/plugin-types";
+import { useTheme } from "../app/useTheme";
+import { PlimiSearch, CategoryChips, ToolTile, SectionHeader } from "../components/directory/DirectoryComponents";
+
+const PLIMI_CATEGORIES = [
+  { id: "all", label: "All tools" },
+  { id: "developer", label: "Developer" },
+  { id: "image", label: "Image" },
+  { id: "text", label: "Text" },
+  { id: "pdf", label: "PDF" },
+  { id: "crypto", label: "Crypto" },
+  { id: "privacy", label: "Privacy" },
+];
+
+export function ToolsPage() {
+  const navigate = useNavigate();
+  const { dark } = useTheme();
+  
+  const [q, setQ] = useState("");
+  const [cat, setCat] = useState("all");
+  const [focusedIndex, setFocusedIndex] = useState(0);
+
+  const filtered = useMemo(() => {
+    return pluginRegistry.filter(
+      (p) => 
+        (cat === "all" || p.manifest.category === cat) &&
+        (p.manifest.name.toLowerCase().includes(q.toLowerCase()) || 
+         p.manifest.description.toLowerCase().includes(q.toLowerCase()))
+    );
+  }, [q, cat]);
+
+  const safeFocusedIndex =
+    filtered.length === 0 ? -1 : Math.min(focusedIndex, filtered.length - 1);
+
+  const counts = useMemo(() => {
+    const out: Record<string, number> = { all: 0 };
+    PLIMI_CATEGORIES.forEach((c) => { out[c.id] = 0; });
+    
+    pluginRegistry.forEach((p) => {
+      const matchSearch = p.manifest.name.toLowerCase().includes(q.toLowerCase()) || 
+                          p.manifest.description.toLowerCase().includes(q.toLowerCase());
+      if (!matchSearch) return;
+      
+      out.all += 1;
+      if (out[p.manifest.category] !== undefined) {
+        out[p.manifest.category] += 1;
+      } else {
+        out[p.manifest.category] = 1;
+      }
+    });
+    return out;
+  }, [q]);
+
+  const grouped = useMemo(() => {
+    if (cat !== 'all' || q) return null;
+    const map: Record<string, typeof pluginRegistry> = {};
+    filtered.forEach((t) => {
+      (map[t.manifest.category] = map[t.manifest.category] || []).push(t);
+    });
+    return PLIMI_CATEGORIES.filter((c) => c.id !== 'all' && map[c.id]?.length).map((c) => ({ cat: c, tools: map[c.id] }));
+  }, [filtered, cat, q]);
+
+  const handleOpenTool = (plugin: UnknownPlimiPlugin) => {
+    navigate(`/tools/${plugin.manifest.id}`);
+  };
+
+  return (
+    <div className="flex flex-col gap-7 max-w-[1200px] mx-auto pb-10">
+      <div className="grid grid-cols-1 md:grid-cols-[1.1fr_1fr] gap-12 items-end">
+        <div className="flex flex-col gap-3.5">
+          <span className="font-mono text-[11px] text-[var(--p-muted)] tracking-[0.12em] uppercase">
+            your digital pencil case
+          </span>
+          <h1 className="m-0 font-sans text-4xl md:text-[56px] font-bold tracking-tight leading-[1.02] text-[var(--p-text)] text-balance">
+            Small tools.<br />
+            <span className="text-[var(--p-muted)]">Big trust.</span>
+          </h1>
+          <p className="m-0 max-w-[480px] text-base leading-relaxed text-[var(--p-muted)] text-pretty">
+            {pluginRegistry.length} utilities for files, text and code — running entirely in your browser. No upload. No account. No server.
+          </p>
+        </div>
+        
+        <PlimiSearch
+          value={q}
+          onChange={(nextQuery) => {
+            setQ(nextQuery);
+            setFocusedIndex(0);
+          }}
+          count={filtered.length}
+          total={pluginRegistry.length}
+          onArrow={(dir) => {
+            if (filtered.length === 0) return;
+            setFocusedIndex((prev) => {
+              const next = prev + dir;
+              if (next < 0) return filtered.length - 1;
+              if (next >= filtered.length) return 0;
+              return next;
+            });
+          }}
+          onEnter={() => {
+            if (safeFocusedIndex >= 0 && safeFocusedIndex < filtered.length) {
+              handleOpenTool(filtered[safeFocusedIndex]);
+            }
+          }}
+        />
+      </div>
+
+      <CategoryChips
+        active={cat}
+        onPick={(nextCategory) => {
+          setCat(nextCategory);
+          setFocusedIndex(0);
+        }}
+        counts={counts}
+        categories={PLIMI_CATEGORIES}
+      />
+
+      {grouped ? (
+        <div className="flex flex-col gap-7 mt-4">
+          {grouped.map(({ cat: c, tools }) => (
+            <div key={c.id} className="flex flex-col gap-3.5">
+              <SectionHeader catLabel={c.label} catId={c.id} n={tools.length} />
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                {tools.map((t) => {
+                  const flatIdx = filtered.indexOf(t);
+                  return (
+                    <ToolTile key={t.manifest.id} plugin={t} onClick={handleOpenTool} focused={flatIdx === safeFocusedIndex} dark={dark} />
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="py-20 text-center text-[var(--p-muted)] font-sans">
+          No tools found matching "{q}".
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
+          {filtered.map((t) => {
+            const flatIdx = filtered.indexOf(t);
+            return (
+              <ToolTile key={t.manifest.id} plugin={t} onClick={handleOpenTool} focused={flatIdx === safeFocusedIndex} dark={dark} />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/tools/base64/index.ts b/src/tools/base64/index.ts
new file mode 100644
index 0000000..92c6873
--- /dev/null
+++ b/src/tools/base64/index.ts
@@ -0,0 +1,43 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runBase64 } from "./run";
+
+export interface Base64Options {
+  mode: "encode" | "decode";
+}
+
+export const base64Plugin: PlimiPlugin<Base64Options> = {
+  manifest: {
+    id: "base64",
+    name: "Base64 Encoder / Decoder",
+    description: "Encode or decode Base64 text locally.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["base64", "encode", "decode"],
+    input: { type: "text" },
+    output: { type: "text" },
+    example: "Hello, Plimi!",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "mode",
+        label: "Mode",
+        defaultValue: "encode",
+        options: [
+          { label: "Encode", value: "encode" },
+          { label: "Decode", value: "decode" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false, // Runs synchronously since it's very fast for normal text
+  },
+
+  run: runBase64,
+};
diff --git a/src/tools/base64/run.test.ts b/src/tools/base64/run.test.ts
new file mode 100644
index 0000000..374780c
--- /dev/null
+++ b/src/tools/base64/run.test.ts
@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from "vitest";
+import { runBase64 } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Base64 Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  it("should encode text correctly", async () => {
+    const result = await runBase64(
+      { text: "Hello World" },
+      { mode: "encode" },
+      mockContext
+    );
+    expect(result).toEqual({ type: "text", value: "SGVsbG8gV29ybGQ=" });
+  });
+
+  it("should decode text correctly", async () => {
+    const result = await runBase64(
+      { text: "SGVsbG8gV29ybGQ=" },
+      { mode: "decode" },
+      mockContext
+    );
+    expect(result).toEqual({ type: "text", value: "Hello World" });
+  });
+
+  it("should return empty string for empty input", async () => {
+    const result = await runBase64(
+      { text: "" },
+      { mode: "encode" },
+      mockContext
+    );
+    expect(result).toEqual({ type: "text", value: "" });
+  });
+
+  it("should throw error on invalid base64 decode", async () => {
+    await expect(
+      runBase64({ text: "NotBase64!" }, { mode: "decode" }, mockContext)
+    ).rejects.toThrow("Invalid Base64 input string or encoding error.");
+  });
+});
diff --git a/src/tools/base64/run.ts b/src/tools/base64/run.ts
new file mode 100644
index 0000000..df8f47b
--- /dev/null
+++ b/src/tools/base64/run.ts
@@ -0,0 +1,37 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { Base64Options } from "./index";
+
+export async function runBase64(
+  input: ToolInput,
+  options: Base64Options,
+  context: ToolContext
+): Promise<ToolResult> {
+  const text = input.text ?? "";
+
+  if (!text) {
+    return {
+      type: "text",
+      value: "",
+    };
+  }
+
+  context.reportProgress({ percentage: 50, message: "Processing..." });
+
+  try {
+    const resultValue =
+      options.mode === "encode"
+        ? btoa(unescape(encodeURIComponent(text)))
+        : decodeURIComponent(escape(atob(text)));
+
+    context.reportProgress({ percentage: 100, message: "Done" });
+
+    return {
+      type: "text",
+      value: resultValue,
+    };
+  } catch (cause) {
+    throw new Error("Invalid Base64 input string or encoding error.", { cause });
+  }
+}
diff --git a/src/tools/color-converter/index.ts b/src/tools/color-converter/index.ts
new file mode 100644
index 0000000..e5d06b6
--- /dev/null
+++ b/src/tools/color-converter/index.ts
@@ -0,0 +1,44 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runColorConverter } from "./run";
+
+export interface ColorConverterOptions {
+  format: "hex" | "rgb" | "hsl";
+}
+
+export const colorConverterPlugin: PlimiPlugin<ColorConverterOptions> = {
+  manifest: {
+    id: "dev-color",
+    name: "Color Converter",
+    description: "Convert colors between HEX, RGB, and HSL formats.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["color", "hex", "rgb", "hsl", "converter"],
+    input: { type: "text", placeholder: "#ff0000 or rgb(255,0,0) or hsl(0,100%,50%)", multiline: false },
+    output: { type: "json" },
+    example: "#3b82f6",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "format",
+        label: "Output Format",
+        defaultValue: "hex",
+        options: [
+          { label: "HEX", value: "hex" },
+          { label: "RGB", value: "rgb" },
+          { label: "HSL", value: "hsl" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runColorConverter,
+};
diff --git a/src/tools/color-converter/run.test.ts b/src/tools/color-converter/run.test.ts
new file mode 100644
index 0000000..50d5666
--- /dev/null
+++ b/src/tools/color-converter/run.test.ts
@@ -0,0 +1,93 @@
+import { describe, it, expect, vi } from "vitest";
+import { runColorConverter } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Color Converter", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should parse a 6-digit hex color and return all formats", async () => {
+    const result = await runColorConverter(
+      { text: "#ff0000" },
+      { format: "hex" },
+      mockContext
+    );
+    expect(result.type).toBe("json");
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.hex).toBe("#ff0000");
+    expect(value.rgb).toBe("rgb(255, 0, 0)");
+    expect(value.channels).toEqual({ r: 255, g: 0, b: 0 });
+    expect(value.primary).toBe("#ff0000");
+  });
+
+  it("should parse an RGB color string", async () => {
+    const result = await runColorConverter(
+      { text: "rgb(0, 128, 255)" },
+      { format: "hex" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.channels).toEqual({ r: 0, g: 128, b: 255 });
+    expect(value.hex).toBe("#0080ff");
+  });
+
+  it("should parse an HSL color string", async () => {
+    const result = await runColorConverter(
+      { text: "hsl(0, 100%, 50%)" },
+      { format: "rgb" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    const channels = value.channels as Record<string, unknown>;
+    expect(channels.r).toBe(255);
+    expect(channels.g).toBe(0);
+    expect(channels.b).toBe(0);
+    expect(value.primary).toBe("rgb(255, 0, 0)");
+  });
+
+  it("should parse a 3-digit shorthand hex", async () => {
+    const result = await runColorConverter(
+      { text: "#f00" },
+      { format: "hex" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.hex).toBe("#ff0000");
+  });
+
+  it("should parse hex without hash prefix", async () => {
+    const result = await runColorConverter(
+      { text: "00ff00" },
+      { format: "rgb" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.channels).toEqual({ r: 0, g: 255, b: 0 });
+    expect(value.primary).toBe("rgb(0, 255, 0)");
+  });
+
+  it("should return primary in hsl format when requested", async () => {
+    const result = await runColorConverter(
+      { text: "#ffffff" },
+      { format: "hsl" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.primary).toContain("hsl(");
+  });
+
+  it("should throw on unrecognized color format", async () => {
+    await expect(
+      runColorConverter({ text: "not-a-color" }, { format: "hex" }, mockContext)
+    ).rejects.toThrow("Unrecognized color format");
+  });
+
+  it("should throw on empty input", async () => {
+    await expect(
+      runColorConverter({ text: "" }, { format: "hex" }, mockContext)
+    ).rejects.toThrow("No color value provided");
+  });
+});
diff --git a/src/tools/color-converter/run.ts b/src/tools/color-converter/run.ts
new file mode 100644
index 0000000..1d128f6
--- /dev/null
+++ b/src/tools/color-converter/run.ts
@@ -0,0 +1,151 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { ColorConverterOptions } from "./index";
+
+interface RGB { r: number; g: number; b: number; }
+
+function parseHex(input: string): RGB | null {
+  const match = input.match(/^#?([0-9a-f]{3,8})$/i);
+  if (!match) return null;
+  let hex = match[1];
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  if (hex.length === 4) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  if (hex.length >= 6) {
+    return {
+      r: parseInt(hex.substring(0, 2), 16),
+      g: parseInt(hex.substring(2, 4), 16),
+      b: parseInt(hex.substring(4, 6), 16),
+    };
+  }
+  return null;
+}
+
+function parseRgb(input: string): RGB | null {
+  const match = input.match(/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})/);
+  if (!match) return null;
+  return {
+    r: Math.min(255, parseInt(match[1], 10)),
+    g: Math.min(255, parseInt(match[2], 10)),
+    b: Math.min(255, parseInt(match[3], 10)),
+  };
+}
+
+function parseHsl(input: string): RGB | null {
+  const match = input.match(/hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?/);
+  if (!match) return null;
+  const h = parseInt(match[1], 10) / 360;
+  const s = parseInt(match[2], 10) / 100;
+  const l = parseInt(match[3], 10) / 100;
+
+  if (s === 0) {
+    const v = Math.round(l * 255);
+    return { r: v, g: v, b: v };
+  }
+
+  const hue2rgb = (p: number, q: number, t: number): number => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+
+  return {
+    r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+    g: Math.round(hue2rgb(p, q, h) * 255),
+    b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
+  };
+}
+
+function parseColor(input: string): RGB | null {
+  const trimmed = input.trim().toLowerCase();
+  return parseHex(trimmed) || parseRgb(trimmed) || parseHsl(trimmed);
+}
+
+function rgbToHex(rgb: RGB): string {
+  const toHex = (n: number) => n.toString(16).padStart(2, "0");
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+
+function rgbToHsl(rgb: RGB): { h: number; s: number; l: number } {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+
+  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
+
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+  const h =
+    max === r
+      ? ((g - b) / d + (g < b ? 6 : 0)) / 6
+      : max === g
+        ? ((b - r) / d + 2) / 6
+        : ((r - g) / d + 4) / 6;
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+export async function runColorConverter(
+  input: ToolInput,
+  options: ColorConverterOptions,
+  context?: ToolContext
+): Promise<ToolResult> {
+  void context;
+
+  const text = input.text || "";
+  if (!text.trim()) {
+    throw new Error("No color value provided.");
+  }
+
+  const rgb = parseColor(text);
+  if (!rgb) {
+    throw new Error("Unrecognized color format. Use HEX (#ff0000), RGB (rgb(255,0,0)), or HSL (hsl(0,100%,50%)).");
+  }
+
+  const hex = rgbToHex(rgb);
+  const hsl = rgbToHsl(rgb);
+
+  let primary: string;
+  switch (options.format) {
+    case "hex":
+      primary = hex;
+      break;
+    case "rgb":
+      primary = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+      break;
+    case "hsl":
+      primary = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+      break;
+    default:
+      primary = hex;
+  }
+
+  return {
+    type: "json",
+    value: {
+      hex,
+      rgb: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`,
+      hsl: `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`,
+      primary,
+      channels: { r: rgb.r, g: rgb.g, b: rgb.b },
+    },
+  };
+}
diff --git a/src/tools/csv-tools/index.ts b/src/tools/csv-tools/index.ts
new file mode 100644
index 0000000..1c41b5c
--- /dev/null
+++ b/src/tools/csv-tools/index.ts
@@ -0,0 +1,75 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runCsvTools } from "./run";
+
+export interface CsvToolsOptions {
+  mode: "csv-to-json" | "json-to-csv";
+  delimiter: "," | ";" | "\t";
+  hasHeaderRow: boolean;
+  prettyJson: boolean;
+}
+
+export const csvToolsPlugin: PlimiPlugin<CsvToolsOptions> = {
+  manifest: {
+    id: "csv-tools",
+    name: "CSV <-> JSON Converter",
+    description: "Convert CSV text to JSON objects, or convert JSON array of objects/arrays to CSV.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["csv", "json", "converter", "parser", "format"],
+    input: {
+      type: "text",
+      label: "Input Content",
+      placeholder: "Paste CSV text or JSON array here...",
+      multiline: true,
+      rows: 10,
+    },
+    output: { type: "text" },
+    example: "name,age,city\nJohn Doe,30,New York\nJane Smith,25,Los Angeles",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "mode",
+        label: "Conversion Mode",
+        defaultValue: "csv-to-json",
+        options: [
+          { label: "CSV to JSON", value: "csv-to-json" },
+          { label: "JSON to CSV", value: "json-to-csv" },
+        ],
+      },
+      {
+        type: "select",
+        key: "delimiter",
+        label: "Delimiter / Separator",
+        defaultValue: ",",
+        options: [
+          { label: "Comma (,)", value: "," },
+          { label: "Semicolon (;)", value: ";" },
+          { label: "Tab (\\t)", value: "\t" },
+        ],
+      },
+      {
+        type: "boolean",
+        key: "hasHeaderRow",
+        label: "First row is header (CSV -> JSON)",
+        defaultValue: true,
+      },
+      {
+        type: "boolean",
+        key: "prettyJson",
+        label: "Pretty Print JSON",
+        defaultValue: true,
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runCsvTools,
+};
diff --git a/src/tools/csv-tools/run.test.ts b/src/tools/csv-tools/run.test.ts
new file mode 100644
index 0000000..6439e19
--- /dev/null
+++ b/src/tools/csv-tools/run.test.ts
@@ -0,0 +1,138 @@
+import { describe, it, expect, vi } from "vitest";
+import { runCsvTools } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("CSV <-> JSON Converter Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  it("should convert simple CSV to JSON with headers", async () => {
+    const csv = "name,age,city\nJohn Doe,30,New York\nJane Smith,25,Los Angeles";
+    const result = await runCsvTools(
+      { text: csv },
+      { mode: "csv-to-json", delimiter: ",", hasHeaderRow: true, prettyJson: false },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    if (result.type === "text") {
+      const parsed = JSON.parse(result.value);
+      expect(parsed).toEqual([
+        { name: "John Doe", age: "30", city: "New York" },
+        { name: "Jane Smith", age: "25", city: "Los Angeles" },
+      ]);
+    }
+  });
+
+  it("should handle commas and newlines inside quoted fields", async () => {
+    const csv = 'name,notes\nJohn,"Likes apples, oranges, and bananas"\nJane,"Likes reading\nand cycling"';
+    const result = await runCsvTools(
+      { text: csv },
+      { mode: "csv-to-json", delimiter: ",", hasHeaderRow: true, prettyJson: false },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    if (result.type === "text") {
+      const parsed = JSON.parse(result.value);
+      expect(parsed[0].notes).toBe("Likes apples, oranges, and bananas");
+      expect(parsed[1].notes).toBe("Likes reading\nand cycling");
+    }
+  });
+
+  it("should handle escaped quotes inside quotes", async () => {
+    const csv = 'name,description\nJohn,"Known as ""The Apple King"""';
+    const result = await runCsvTools(
+      { text: csv },
+      { mode: "csv-to-json", delimiter: ",", hasHeaderRow: true, prettyJson: false },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    if (result.type === "text") {
+      const parsed = JSON.parse(result.value);
+      expect(parsed[0].description).toBe('Known as "The Apple King"');
+    }
+  });
+
+  it("should support custom delimiters like Semicolon", async () => {
+    const csv = "name;age\nJohn Doe;30";
+    const result = await runCsvTools(
+      { text: csv },
+      { mode: "csv-to-json", delimiter: ";", hasHeaderRow: true, prettyJson: false },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    if (result.type === "text") {
+      const parsed = JSON.parse(result.value);
+      expect(parsed[0]).toEqual({ name: "John Doe", age: "30" });
+    }
+  });
+
+  it("should parse without header rows", async () => {
+    const csv = "John,30\nJane,25";
+    const result = await runCsvTools(
+      { text: csv },
+      { mode: "csv-to-json", delimiter: ",", hasHeaderRow: false, prettyJson: false },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    if (result.type === "text") {
+      const parsed = JSON.parse(result.value);
+      expect(parsed).toEqual([
+        ["John", "30"],
+        ["Jane", "25"],
+      ]);
+    }
+  });
+
+  it("should convert JSON array of objects to CSV", async () => {
+    const json = JSON.stringify([
+      { name: "John Doe", age: 30, city: "New York" },
+      { name: "Jane Smith", age: 25, city: "Los Angeles" },
+    ]);
+    const result = await runCsvTools(
+      { text: json },
+      { mode: "json-to-csv", delimiter: ",", hasHeaderRow: true, prettyJson: false },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    if (result.type === "text") {
+      expect(result.value).toBe(
+        "name,age,city\nJohn Doe,30,New York\nJane Smith,25,Los Angeles"
+      );
+    }
+  });
+
+  it("should convert JSON array of arrays to CSV", async () => {
+    const json = JSON.stringify([
+      ["John", 30],
+      ["Jane", 25],
+    ]);
+    const result = await runCsvTools(
+      { text: json },
+      { mode: "json-to-csv", delimiter: ";", hasHeaderRow: true, prettyJson: false },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    if (result.type === "text") {
+      expect(result.value).toBe("John;30\nJane;25");
+    }
+  });
+
+  it("should throw error for invalid JSON in JSON-to-CSV mode", async () => {
+    await expect(
+      runCsvTools({ text: "not-json" }, { mode: "json-to-csv", delimiter: ",", hasHeaderRow: true, prettyJson: false }, mockContext)
+    ).rejects.toThrow("Invalid input: Not a valid JSON string");
+  });
+
+  it("should throw error for non-array JSON", async () => {
+    await expect(
+      runCsvTools({ text: '{"a": 1}' }, { mode: "json-to-csv", delimiter: ",", hasHeaderRow: true, prettyJson: false }, mockContext)
+    ).rejects.toThrow("JSON content must be an array");
+  });
+});
diff --git a/src/tools/csv-tools/run.ts b/src/tools/csv-tools/run.ts
new file mode 100644
index 0000000..db4f959
--- /dev/null
+++ b/src/tools/csv-tools/run.ts
@@ -0,0 +1,199 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { CsvToolsOptions } from "./index";
+
+export function parseCsv(text: string, delimiter: string): string[][] {
+  const rows: string[][] = [];
+  let currentRow: string[] = [];
+  let currentField = "";
+  let inQuotes = false;
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    const nextChar = text[i + 1];
+
+    if (inQuotes) {
+      if (char === '"') {
+        if (nextChar === '"') {
+          // Escaped quote
+          currentField += '"';
+          i++; // Skip next quote
+        } else {
+          // Closing quote
+          inQuotes = false;
+        }
+      } else {
+        currentField += char;
+      }
+    } else {
+      if (char === '"') {
+        inQuotes = true;
+      } else if (char === delimiter) {
+        currentRow.push(currentField);
+        currentField = "";
+      } else if (char === "\n" || char === "\r") {
+        currentRow.push(currentField);
+        currentField = "";
+        rows.push(currentRow);
+        currentRow = [];
+        
+        if (char === "\r" && nextChar === "\n") {
+          i++; // Skip \n in \r\n
+        }
+      } else {
+        currentField += char;
+      }
+    }
+  }
+
+  // Push final field/row if anything remains
+  if (currentField !== "" || currentRow.length > 0) {
+    currentRow.push(currentField);
+    rows.push(currentRow);
+  }
+
+  // Filter out completely empty trailing row (e.g. from file ending with a newline)
+  if (rows.length > 0) {
+    const lastRow = rows[rows.length - 1];
+    if (lastRow.length === 1 && lastRow[0] === "") {
+      rows.pop();
+    }
+  }
+
+  return rows;
+}
+
+function escapeCsvField(val: unknown, delimiter: string): string {
+  if (val === null || val === undefined) return "";
+  const str = String(val);
+  const needsQuotes =
+    str.includes(delimiter) ||
+    str.includes('"') ||
+    str.includes("\n") ||
+    str.includes("\r");
+
+  if (needsQuotes) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+
+export async function runCsvTools(
+  input: ToolInput,
+  options: CsvToolsOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  const text = (input.text ?? "").trim();
+  if (!text) {
+    throw new Error("Please enter input text to convert.");
+  }
+
+  const { mode, delimiter, hasHeaderRow, prettyJson } = options;
+
+  if (mode === "csv-to-json") {
+    context.reportProgress({ percentage: 20, message: "Parsing CSV..." });
+    const parsedRows = parseCsv(text, delimiter);
+
+    if (parsedRows.length === 0) {
+      return {
+        type: "text",
+        value: "[]",
+        language: "json",
+      };
+    }
+
+    context.reportProgress({ percentage: 60, message: "Structuring JSON..." });
+    
+    if (hasHeaderRow) {
+      const headers = parsedRows[0].map(h => h.trim());
+      const objects: Record<string, string>[] = [];
+      
+      for (let i = 1; i < parsedRows.length; i++) {
+        const row = parsedRows[i];
+        const obj: Record<string, string> = {};
+        
+        for (let j = 0; j < headers.length; j++) {
+          obj[headers[j]] = row[j] ?? "";
+        }
+        objects.push(obj);
+      }
+      
+      context.reportProgress({ percentage: 100, message: "Done" });
+      return {
+        type: "text",
+        value: JSON.stringify(objects, null, prettyJson ? 2 : undefined),
+        language: "json",
+      };
+    } else {
+      context.reportProgress({ percentage: 100, message: "Done" });
+      return {
+        type: "text",
+        value: JSON.stringify(parsedRows, null, prettyJson ? 2 : undefined),
+        language: "json",
+      };
+    }
+  } else {
+    // json-to-csv mode
+    context.reportProgress({ percentage: 25, message: "Parsing JSON..." });
+    let data: unknown;
+    try {
+      data = JSON.parse(text);
+    } catch (err) {
+      throw new Error("Invalid input: Not a valid JSON string. JSON to CSV mode requires a valid JSON array.");
+    }
+
+    if (!Array.isArray(data)) {
+      throw new Error("Invalid input: JSON content must be an array of objects or an array of arrays.");
+    }
+
+    if (data.length === 0) {
+      return {
+        type: "text",
+        value: "",
+        language: "plain",
+      };
+    }
+
+    context.reportProgress({ percentage: 65, message: "Serializing to CSV..." });
+
+    const firstItem = data[0];
+
+    if (Array.isArray(firstItem)) {
+      // Array of arrays
+      const csvLines = (data as unknown[][]).map(row =>
+        row.map(cell => escapeCsvField(cell, delimiter)).join(delimiter)
+      );
+      context.reportProgress({ percentage: 100, message: "Done" });
+      return {
+        type: "text",
+        value: csvLines.join("\n"),
+        language: "plain",
+      };
+    } else if (typeof firstItem === "object" && firstItem !== null) {
+      // Array of objects
+      // Collect unique keys across all objects to ensure all properties are included
+      const keysSet = new Set<string>();
+      data.forEach(item => {
+        if (typeof item === "object" && item !== null) {
+          Object.keys(item).forEach(k => keysSet.add(k));
+        }
+      });
+      const keys = Array.from(keysSet);
+
+      const headerLine = keys.map(k => escapeCsvField(k, delimiter)).join(delimiter);
+      const csvLines = (data as Record<string, unknown>[]).map(item =>
+        keys.map(key => escapeCsvField(item[key], delimiter)).join(delimiter)
+      );
+
+      context.reportProgress({ percentage: 100, message: "Done" });
+      return {
+        type: "text",
+        value: [headerLine, ...csvLines].join("\n"),
+        language: "plain",
+      };
+    } else {
+      throw new Error("Invalid input: Array elements must be either objects or arrays.");
+    }
+  }
+}
diff --git a/src/tools/exif-scrubber/index.ts b/src/tools/exif-scrubber/index.ts
new file mode 100644
index 0000000..d9a0f28
--- /dev/null
+++ b/src/tools/exif-scrubber/index.ts
@@ -0,0 +1,27 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runExifScrubber } from "./run";
+
+export const exifScrubberPlugin: PlimiPlugin = {
+  manifest: {
+    id: "exif-scrubber",
+    name: "EXIF Scrubber",
+    description: "Instantly strip all GPS coordinates, camera logs, and timestamps from your photos locally.",
+    category: "privacy",
+    version: "1.0.0",
+    tags: ["privacy", "metadata", "exif", "gps", "strip", "clear", "photo"],
+    input: {
+      type: "files",
+      accept: ["image/jpeg", "image/png", "image/webp"],
+      multiple: true,
+    },
+    output: { type: "files" },
+    offlineReady: true,
+  },
+
+  capabilities: {
+    cancelable: true,
+    worker: false,
+  },
+
+  run: runExifScrubber,
+};
diff --git a/src/tools/exif-scrubber/run.test.ts b/src/tools/exif-scrubber/run.test.ts
new file mode 100644
index 0000000..8149efe
--- /dev/null
+++ b/src/tools/exif-scrubber/run.test.ts
@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from "vitest";
+import { runExifScrubber } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("EXIF Scrubber Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  it("should throw error if no files provided", async () => {
+    await expect(
+      runExifScrubber(
+        { files: [] },
+        null,
+        mockContext
+      )
+    ).rejects.toThrow("No files uploaded for scrubbing.");
+  });
+});
diff --git a/src/tools/exif-scrubber/run.ts b/src/tools/exif-scrubber/run.ts
new file mode 100644
index 0000000..c7c08db
--- /dev/null
+++ b/src/tools/exif-scrubber/run.ts
@@ -0,0 +1,103 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Failed to load image."));
+    img.src = url;
+  });
+}
+
+function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  mimeType: string,
+  quality = 0.95
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Failed to export image from canvas."));
+        }
+      },
+      mimeType,
+      quality
+    );
+  });
+}
+
+export async function runExifScrubber(
+  input: ToolInput,
+  _options: unknown,
+  context: ToolContext
+): Promise<ToolResult> {
+  const files = input.files;
+  if (!files || !Array.isArray(files) || files.length === 0) {
+    throw new Error("No files uploaded for scrubbing.");
+  }
+
+  const outFiles = [];
+
+  for (let i = 0; i < files.length; i++) {
+    if (context.signal?.aborted) {
+      throw new DOMException("Operation cancelled", "AbortError");
+    }
+
+    const file = files[i];
+    context.reportProgress({
+      percentage: (i / files.length) * 100,
+      message: `Scrubbing metadata for ${file.name} (${i + 1}/${files.length})...`,
+    });
+
+    const url = URL.createObjectURL(file);
+    try {
+      const img = await loadImage(url);
+      
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        throw new Error("Could not acquire 2D canvas context.");
+      }
+
+      // Drawing to canvas discards EXIF headers
+      ctx.drawImage(img, 0, 0);
+
+      const mimeType = file.type || "image/jpeg";
+      const blob = await canvasToBlob(canvas, mimeType);
+
+      // Create new clean file name
+      const dotIdx = file.name.lastIndexOf(".");
+      const name = dotIdx !== -1
+        ? `${file.name.substring(0, dotIdx)}_scrubbed${file.name.substring(dotIdx)}`
+        : `${file.name}_scrubbed.jpg`;
+
+      outFiles.push({
+        name: name,
+        mimeType: mimeType,
+        blob: blob,
+        sizeAfter: blob.size,
+        sizeBefore: file.size,
+      });
+    } catch (err) {
+      console.error(`Error scrubbing file ${file.name}:`, err);
+      // Fallback or rethrow depending on strict requirements; we rethrow for safety
+      throw err;
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  context.reportProgress({ percentage: 100, message: "Metadata scrubbed successfully!" });
+  return {
+    type: "files",
+    files: outFiles,
+  };
+}
diff --git a/src/tools/file-checksum-verifier/index.ts b/src/tools/file-checksum-verifier/index.ts
new file mode 100644
index 0000000..9dfe8db
--- /dev/null
+++ b/src/tools/file-checksum-verifier/index.ts
@@ -0,0 +1,60 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runFileChecksumVerifier } from "./run";
+
+export interface FileChecksumVerifierOptions {
+  algorithm: "SHA-256" | "SHA-512";
+}
+
+export const fileChecksumVerifierPlugin: PlimiPlugin<FileChecksumVerifierOptions> = {
+  manifest: {
+    id: "file-checksum-verifier",
+    name: "File Checksum Verifier",
+    description: "Calculate cryptographic SHA-256 or SHA-512 checksums of local files entirely offline in the browser.",
+    category: "crypto",
+    version: "1.0.0",
+    tags: ["checksum", "verifier", "hash", "sha256", "sha512", "file"],
+    input: {
+      type: "group",
+      fields: [
+        {
+          type: "files",
+          key: "files",
+          label: "Select File(s)",
+          multiple: true,
+          description: "Select one or more files to calculate checksums for.",
+        },
+        {
+          type: "text",
+          key: "expectedChecksum",
+          label: "Expected Checksum (Optional)",
+          placeholder: "Paste expected hash to compare against...",
+          description: "Case-insensitive. Will be compared against computed hashes.",
+        },
+      ],
+    },
+    output: { type: "table" },
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "algorithm",
+        label: "Hash Algorithm",
+        defaultValue: "SHA-256",
+        options: [
+          { label: "SHA-256", value: "SHA-256" },
+          { label: "SHA-512", value: "SHA-512" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runFileChecksumVerifier,
+};
diff --git a/src/tools/file-checksum-verifier/run.test.ts b/src/tools/file-checksum-verifier/run.test.ts
new file mode 100644
index 0000000..823ca6a
--- /dev/null
+++ b/src/tools/file-checksum-verifier/run.test.ts
@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from "vitest";
+import { runFileChecksumVerifier } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("File Checksum Verifier Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  const textFile = new File(
+    [new TextEncoder().encode("hello world")],
+    "test.txt",
+    { type: "text/plain" }
+  );
+
+  const helloWorldSha256 = "b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9";
+
+  it("should calculate SHA-256 checksum and verify successfully", async () => {
+    const result = await runFileChecksumVerifier(
+      {
+        values: {
+          files: { files: [textFile] },
+          expectedChecksum: { text: helloWorldSha256 },
+        },
+      },
+      { algorithm: "SHA-256" },
+      mockContext
+    );
+
+    expect(result.type).toBe("table");
+    if (result.type === "table") {
+      expect(result.columns).toEqual(["File Name", "Size", "Computed Hash", "Expected Hash", "Status"]);
+      expect(result.rows).toHaveLength(1);
+      expect(result.rows[0][0]).toBe("test.txt");
+      expect(result.rows[0][1]).toBe("11 B");
+      expect(result.rows[0][2]).toBe(helloWorldSha256);
+      expect(result.rows[0][3]).toBe(helloWorldSha256);
+      expect(result.rows[0][4]).toBe("✅ Match");
+    }
+  });
+
+  it("should detect checksum mismatch", async () => {
+    const result = await runFileChecksumVerifier(
+      {
+        values: {
+          files: { files: [textFile] },
+          expectedChecksum: { text: "wrongchecksum" },
+        },
+      },
+      { algorithm: "SHA-256" },
+      mockContext
+    );
+
+    if (result.type === "table") {
+      expect(result.rows[0][4]).toBe("❌ Mismatch");
+    }
+  });
+
+  it("should run with no expected checksum and mark status as N/A", async () => {
+    const result = await runFileChecksumVerifier(
+      {
+        values: {
+          files: { files: [textFile] },
+        },
+      },
+      { algorithm: "SHA-256" },
+      mockContext
+    );
+
+    if (result.type === "table") {
+      expect(result.rows[0][3]).toBe("(none)");
+      expect(result.rows[0][4]).toBe("N/A");
+    }
+  });
+
+  it("should throw error if no files are supplied", async () => {
+    await expect(
+      runFileChecksumVerifier({}, { algorithm: "SHA-256" }, mockContext)
+    ).rejects.toThrow("Please select at least one file to verify.");
+  });
+});
diff --git a/src/tools/file-checksum-verifier/run.ts b/src/tools/file-checksum-verifier/run.ts
new file mode 100644
index 0000000..077c79f
--- /dev/null
+++ b/src/tools/file-checksum-verifier/run.ts
@@ -0,0 +1,82 @@
+import { getFilesInput, getTextInput } from "../../core/io/input-types";
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { FileChecksumVerifierOptions } from "./index";
+
+function formatSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+export async function runFileChecksumVerifier(
+  input: ToolInput,
+  options: FileChecksumVerifierOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  const files = getFilesInput(input, "files");
+  const expectedChecksum = getTextInput(input, "expectedChecksum").trim().toLowerCase();
+
+  if (!files || files.length === 0) {
+    throw new Error("Please select at least one file to verify.");
+  }
+
+  const { algorithm } = options;
+  const rows: Array<[string, string, string, string, string]> = [];
+
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    const fileNum = i + 1;
+    const totalFiles = files.length;
+
+    context.reportProgress({
+      percentage: Math.round(((i) / totalFiles) * 100),
+      message: `Reading ${file.name} (${fileNum}/${totalFiles})...`,
+    });
+
+    let arrayBuffer: ArrayBuffer;
+    try {
+      arrayBuffer = await file.arrayBuffer();
+    } catch (err: any) {
+      throw new Error(`Failed to read file "${file.name}": ${err.message ?? err}`);
+    }
+
+    context.reportProgress({
+      percentage: Math.round(((i + 0.5) / totalFiles) * 100),
+      message: `Computing ${algorithm} for ${file.name}...`,
+    });
+
+    let hashHex = "";
+    try {
+      const hashBuffer = await crypto.subtle.digest(algorithm, arrayBuffer);
+      const hashArray = Array.from(new Uint8Array(hashBuffer));
+      hashHex = hashArray.map(b => b.toString(16).padStart(2, "0")).join("");
+    } catch (err: any) {
+      throw new Error(`Failed to compute hash for file "${file.name}": ${err.message ?? err}`);
+    }
+
+    let matchStatus = "N/A";
+    if (expectedChecksum) {
+      matchStatus = hashHex === expectedChecksum ? "✅ Match" : "❌ Mismatch";
+    }
+
+    rows.push([
+      file.name,
+      formatSize(file.size),
+      hashHex,
+      expectedChecksum || "(none)",
+      matchStatus,
+    ]);
+  }
+
+  context.reportProgress({ percentage: 100, message: "Done" });
+
+  return {
+    type: "table",
+    columns: ["File Name", "Size", "Computed Hash", "Expected Hash", "Status"],
+    rows,
+  };
+}
diff --git a/src/tools/hash-generator/index.ts b/src/tools/hash-generator/index.ts
new file mode 100644
index 0000000..b17d60d
--- /dev/null
+++ b/src/tools/hash-generator/index.ts
@@ -0,0 +1,56 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runHashGenerator } from "./run";
+
+export interface HashOptions {
+  algorithm: "SHA-1" | "SHA-256" | "SHA-384" | "SHA-512";
+  output: "hex" | "base64";
+}
+
+export const hashGeneratorPlugin: PlimiPlugin<HashOptions> = {
+  manifest: {
+    id: "crypto-hash",
+    name: "Hash Generator",
+    description: "Generate cryptographic hashes securely in your browser.",
+    category: "crypto",
+    version: "1.0.0",
+    tags: ["hash", "sha256", "crypto", "digest"],
+    input: { type: "text" },
+    output: { type: "text" },
+    example: "Hello, Plimi!",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "algorithm",
+        label: "Algorithm",
+        defaultValue: "SHA-256",
+        options: [
+          { label: "SHA-1", value: "SHA-1" },
+          { label: "SHA-256", value: "SHA-256" },
+          { label: "SHA-384", value: "SHA-384" },
+          { label: "SHA-512", value: "SHA-512" },
+        ],
+      },
+      {
+        type: "select",
+        key: "output",
+        label: "Output Format",
+        defaultValue: "hex",
+        options: [
+          { label: "Hex", value: "hex" },
+          { label: "Base64", value: "base64" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runHashGenerator,
+};
diff --git a/src/tools/hash-generator/run.ts b/src/tools/hash-generator/run.ts
new file mode 100644
index 0000000..2ad3cc1
--- /dev/null
+++ b/src/tools/hash-generator/run.ts
@@ -0,0 +1,33 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { HashOptions } from "./index";
+
+export async function runHashGenerator(
+  input: ToolInput,
+  options: HashOptions
+): Promise<ToolResult> {
+  const text = input.text || "";
+  if (!text) {
+    throw new Error("No text provided.");
+  }
+
+  const encoder = new TextEncoder();
+  const data = encoder.encode(text);
+
+  const hashBuffer = await crypto.subtle.digest(options.algorithm, data);
+
+  let outputStr = "";
+  if (options.output === "hex") {
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    outputStr = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+  } else if (options.output === "base64") {
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const binStr = String.fromCharCode(...hashArray);
+    outputStr = btoa(binStr);
+  }
+
+  return {
+    type: "text",
+    value: outputStr,
+  };
+}
diff --git a/src/tools/html-entity/index.ts b/src/tools/html-entity/index.ts
new file mode 100644
index 0000000..273ba12
--- /dev/null
+++ b/src/tools/html-entity/index.ts
@@ -0,0 +1,43 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runHtmlEntity } from "./run";
+
+export interface HtmlEntityOptions {
+  mode: "encode" | "decode";
+}
+
+export const htmlEntityPlugin: PlimiPlugin<HtmlEntityOptions> = {
+  manifest: {
+    id: "dev-htmlentity",
+    name: "HTML Entity Encoder",
+    description: "Encode special characters to HTML entities or decode them back.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["html", "entity", "encode", "decode", "escape"],
+    input: { type: "text", placeholder: "Enter text with < > & \" characters..." },
+    output: { type: "text" },
+    example: '<div class="hero">Hello & "World"</div>',
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "mode",
+        label: "Mode",
+        defaultValue: "encode",
+        options: [
+          { label: "Encode", value: "encode" },
+          { label: "Decode", value: "decode" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runHtmlEntity,
+};
diff --git a/src/tools/html-entity/run.test.ts b/src/tools/html-entity/run.test.ts
new file mode 100644
index 0000000..7efbc32
--- /dev/null
+++ b/src/tools/html-entity/run.test.ts
@@ -0,0 +1,109 @@
+import { describe, it, expect, vi } from "vitest";
+import { runHtmlEntity } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("HTML Entity Encoder/Decoder", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should encode basic HTML special characters", async () => {
+    const result = await runHtmlEntity(
+      { text: '<div class="test">Hello & World</div>' },
+      { mode: "encode" },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toBe("<div class="test">Hello & World</div>");
+  });
+
+  it("should decode basic HTML entities", async () => {
+    const result = await runHtmlEntity(
+      { text: "<div>Hello & World</div>" },
+      { mode: "decode" },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toBe("<div>Hello & World</div>");
+  });
+
+  it("should encode special symbols", async () => {
+    const result = await runHtmlEntity(
+      { text: "Price: 10€ © 2024" },
+      { mode: "encode" },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("€");
+    expect(value).toContain("©");
+  });
+
+  it("should decode special symbol entities", async () => {
+    const result = await runHtmlEntity(
+      { text: "© 2024 — All rights reserved" },
+      { mode: "decode" },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("©");
+    expect(value).toContain("—");
+  });
+
+  it("should decode numeric character references (decimal)", async () => {
+    const result = await runHtmlEntity(
+      { text: "ABC" },
+      { mode: "decode" },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toBe("ABC");
+  });
+
+  it("should decode numeric character references (hex)", async () => {
+    const result = await runHtmlEntity(
+      { text: "ABC" },
+      { mode: "decode" },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toBe("ABC");
+  });
+
+  it("should encode single quotes", async () => {
+    const result = await runHtmlEntity(
+      { text: "it's a test" },
+      { mode: "encode" },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("'");
+  });
+
+  it("should return empty string for empty input", async () => {
+    const result = await runHtmlEntity(
+      { text: "" },
+      { mode: "encode" },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toBe("");
+  });
+
+  it("should be reversible: encode then decode gives original", async () => {
+    const original = '<p>Hello & "World"</p>';
+    const encoded = await runHtmlEntity(
+      { text: original },
+      { mode: "encode" },
+      mockContext
+    );
+    const decoded = await runHtmlEntity(
+      { text: (encoded as { type: "text"; value: string }).value },
+      { mode: "decode" },
+      mockContext
+    );
+    expect((decoded as { type: "text"; value: string }).value).toBe(original);
+  });
+});
diff --git a/src/tools/html-entity/run.ts b/src/tools/html-entity/run.ts
new file mode 100644
index 0000000..6cf0104
--- /dev/null
+++ b/src/tools/html-entity/run.ts
@@ -0,0 +1,82 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { HtmlEntityOptions } from "./index";
+
+const ENTITY_MAP: Record<string, string> = {
+  "&": "&",
+  "<": "<",
+  ">": ">",
+  '"': """,
+  "'": "'",
+  "©": "©",
+  "®": "®",
+  "™": "™",
+  "—": "—",
+  "–": "–",
+  "«": "«",
+  "»": "»",
+  "°": "°",
+  "±": "±",
+  "×": "×",
+  "÷": "÷",
+  "€": "€",
+  "£": "£",
+  "¥": "¥",
+  "¢": "¢",
+  "§": "§",
+  "¶": "¶",
+  "•": "•",
+  "…": "…",
+};
+
+const REVERSE_ENTITY_MAP: Record<string, string> = {};
+for (const [char, entity] of Object.entries(ENTITY_MAP)) {
+  REVERSE_ENTITY_MAP[entity] = char;
+}
+
+function encodeHtmlEntities(text: string): string {
+  return text.replace(/[&<>"']|[©®™—–«»°±×÷€£¥¢§¶•…]/g, (char) => {
+    return ENTITY_MAP[char] || char;
+  });
+}
+
+function decodeHtmlEntities(text: string): string {
+  let result = text;
+
+  for (const [entity, char] of Object.entries(REVERSE_ENTITY_MAP)) {
+    result = result.replaceAll(entity, char);
+  }
+
+  result = result.replace(/&#(\d+);/g, (_, code) => {
+    return String.fromCharCode(parseInt(code, 10));
+  });
+
+  result = result.replace(/&#x([0-9a-fA-F]+);/g, (_, code) => {
+    return String.fromCharCode(parseInt(code, 16));
+  });
+
+  return result;
+}
+
+export async function runHtmlEntity(
+  input: ToolInput,
+  options: HtmlEntityOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  const text = input.text ?? "";
+  if (!text) {
+    return { type: "text", value: "" };
+  }
+
+  context.reportProgress({ percentage: 50, message: "Processing..." });
+
+  const result = options.mode === "encode" ? encodeHtmlEntities(text) : decodeHtmlEntities(text);
+
+  context.reportProgress({ percentage: 100, message: "Done" });
+
+  return {
+    type: "text",
+    value: result,
+  };
+}
diff --git a/src/tools/image-editor/ImageEditorUi.tsx b/src/tools/image-editor/ImageEditorUi.tsx
new file mode 100644
index 0000000..55653e8
--- /dev/null
+++ b/src/tools/image-editor/ImageEditorUi.tsx
@@ -0,0 +1,780 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type WheelEvent as ReactWheelEvent,
+} from "react";
+import {
+  Canvas,
+  Circle,
+  FabricImage,
+  Line,
+  PencilBrush,
+  Rect,
+  Textbox,
+  Triangle,
+  type FabricObject,
+} from "fabric";
+import type { ToolUiProps } from "../../core/plugins/plugin-types";
+import { Button } from "../../components/ui/Button";
+import { Dropzone } from "../../components/ui/Dropzone";
+import { Select } from "../../components/ui/Select";
+import { Slider } from "../../components/ui/Slider";
+import { ToolResultPanel } from "../../components/tool/ToolResultPanel";
+import { useToolExecution } from "../../components/tool/useToolExecution";
+import type { ImageEditorOptions } from "./index";
+
+type ToolMode = "select" | "draw" | "pan";
+type ShapeKind = "rect" | "circle" | "triangle" | "line";
+
+interface EditorState {
+  selectedType: string;
+  fill: string;
+  stroke: string;
+  fontSize: number;
+  brushWidth: number;
+  mode: ToolMode;
+  zoom: number;
+}
+
+interface LayerRow {
+  object: FabricObject;
+  id: string;
+  label: string;
+}
+
+const DEFAULT_WIDTH = 960;
+const DEFAULT_HEIGHT = 640;
+const HISTORY_LIMIT = 40;
+
+const FONT_OPTIONS = [
+  { label: "Inter", value: "Inter, system-ui, sans-serif" },
+  { label: "Georgia", value: "Georgia, serif" },
+  { label: "Mono", value: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { label: "Arial", value: "Arial, sans-serif" },
+];
+
+const FORMAT_OPTIONS = [
+  { label: "PNG", value: "image/png" },
+  { label: "JPEG", value: "image/jpeg" },
+  { label: "WebP", value: "image/webp" },
+];
+
+function objectType(object: FabricObject | undefined): string {
+  if (!object) return "None";
+  if (object.type === "textbox" || object.type === "i-text") return "Text";
+  if (object.type === "path") return "Drawing";
+  return object.type ? object.type.charAt(0).toUpperCase() + object.type.slice(1) : "Object";
+}
+
+function useElementSize<T extends HTMLElement>() {
+  const ref = useRef<T | null>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      setSize({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height,
+      });
+    });
+
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return { ref, size };
+}
+
+export default function ImageEditorUi({
+  plugin,
+}: ToolUiProps<ImageEditorOptions>) {
+  const canvasElRef = useRef<HTMLCanvasElement | null>(null);
+  const canvasRef = useRef<Canvas | null>(null);
+  const historyRef = useRef<string[]>([]);
+  const historyIndexRef = useRef(-1);
+  const restoringRef = useRef(false);
+  const sourceFileRef = useRef<File | undefined>(undefined);
+  const isPanningRef = useRef(false);
+  const panStartRef = useRef({ x: 0, y: 0, scrollLeft: 0, scrollTop: 0 });
+  const { ref: workspaceRef, size: workspaceSize } = useElementSize<HTMLDivElement>();
+
+  const [sourceFile, setSourceFile] = useState<File | undefined>();
+  const [canvasReady, setCanvasReady] = useState(false);
+  const [canvasSize, setCanvasSize] = useState({
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT,
+  });
+  const [activeObject, setActiveObject] = useState<FabricObject | undefined>();
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [layerRows, setLayerRows] = useState<LayerRow[]>([]);
+  const [exportFormat, setExportFormat] =
+    useState<ImageEditorOptions["format"]>("image/png");
+  const [quality, setQuality] = useState(92);
+  const [fontFamily, setFontFamily] = useState(FONT_OPTIONS[0].value);
+  const [state, setState] = useState<EditorState>({
+    selectedType: "None",
+    fill: "#ffffff",
+    stroke: "#1a1714",
+    fontSize: 48,
+    brushWidth: 8,
+    mode: "select",
+    zoom: 1,
+  });
+
+  const { run, result, isExecuting, error } = useToolExecution(plugin);
+
+  const refreshHistoryControls = useCallback(() => {
+    setCanUndo(historyIndexRef.current > 0);
+    setCanRedo(historyIndexRef.current < historyRef.current.length - 1);
+  }, []);
+
+  const refreshLayerRows = useCallback(() => {
+    const canvas = canvasRef.current;
+    const rows = (canvas?.getObjects() ?? [])
+      .filter((object) => object.selectable !== false)
+      .map((object, index) => ({
+        object,
+        id: `${object.type}-${index}`,
+        label: `${objectType(object)} ${index + 1}`,
+      }))
+      .reverse();
+    setLayerRows(rows);
+  }, []);
+
+  const updateActiveState = useCallback(() => {
+    const canvas = canvasRef.current;
+    const object = canvas?.getActiveObject();
+    setActiveObject(object);
+    setState((prev) => ({
+      ...prev,
+      selectedType: objectType(object),
+      fill: typeof object?.get("fill") === "string" ? String(object.get("fill")) : prev.fill,
+      stroke: typeof object?.get("stroke") === "string" ? String(object.get("stroke")) : prev.stroke,
+      fontSize: typeof object?.get("fontSize") === "number" ? Number(object.get("fontSize")) : prev.fontSize,
+    }));
+    refreshLayerRows();
+  }, [refreshLayerRows]);
+
+  const pushHistory = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || restoringRef.current) return;
+
+    const snapshot = JSON.stringify(canvas.toJSON());
+    const current = historyRef.current[historyIndexRef.current];
+    if (snapshot === current) return;
+
+    const nextHistory = historyRef.current.slice(0, historyIndexRef.current + 1);
+    nextHistory.push(snapshot);
+    if (nextHistory.length > HISTORY_LIMIT) {
+      nextHistory.shift();
+    }
+    historyRef.current = nextHistory;
+    historyIndexRef.current = nextHistory.length - 1;
+    refreshHistoryControls();
+    refreshLayerRows();
+  }, [refreshHistoryControls, refreshLayerRows]);
+
+  const loadHistory = useCallback(async (index: number) => {
+    const canvas = canvasRef.current;
+    const snapshot = historyRef.current[index];
+    if (!canvas || !snapshot) return;
+
+    restoringRef.current = true;
+    await canvas.loadFromJSON(snapshot);
+    canvas.renderAll();
+    restoringRef.current = false;
+    historyIndexRef.current = index;
+    updateActiveState();
+    refreshHistoryControls();
+    refreshLayerRows();
+  }, [refreshHistoryControls, refreshLayerRows, updateActiveState]);
+
+  const applyDisplayZoom = useCallback((
+    zoom: number,
+    size = canvasSize
+  ) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const nextZoom = Math.max(0.12, Math.min(3, zoom));
+    const displayWidth = Math.max(1, Math.round(size.width * nextZoom));
+    const displayHeight = Math.max(1, Math.round(size.height * nextZoom));
+
+    canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+    canvas.setDimensions({
+      width: `${displayWidth}px`,
+      height: `${displayHeight}px`,
+    }, {
+      cssOnly: true,
+    });
+    canvas.calcOffset();
+    setState((prev) => ({ ...prev, zoom: nextZoom }));
+    canvas.requestRenderAll();
+  }, [canvasSize]);
+
+  const fitCanvasToWorkspace = useCallback(() => {
+    if (workspaceSize.width === 0 || workspaceSize.height === 0) return;
+
+    const zoom = Math.max(0.12, Math.min(
+      1,
+      (workspaceSize.width - 56) / canvasSize.width,
+      (workspaceSize.height - 56) / canvasSize.height
+    ));
+
+    applyDisplayZoom(zoom);
+  }, [applyDisplayZoom, canvasSize.height, canvasSize.width, workspaceSize.height, workspaceSize.width]);
+
+  const setCanvasZoom = useCallback((zoom: number) => {
+    applyDisplayZoom(zoom);
+  }, [applyDisplayZoom]);
+
+  useEffect(() => {
+    if (!canvasElRef.current || canvasRef.current) return;
+
+    const canvas = new Canvas(canvasElRef.current, {
+      width: DEFAULT_WIDTH,
+      height: DEFAULT_HEIGHT,
+      backgroundColor: "#ffffff",
+      preserveObjectStacking: true,
+      selection: true,
+    });
+
+    canvas.freeDrawingBrush = new PencilBrush(canvas);
+    canvas.freeDrawingBrush.color = "#1a1714";
+    canvas.freeDrawingBrush.width = 8;
+    canvasRef.current = canvas;
+
+    const handleModified = () => {
+      updateActiveState();
+      pushHistory();
+    };
+
+    canvas.on("selection:created", updateActiveState);
+    canvas.on("selection:updated", updateActiveState);
+    canvas.on("selection:cleared", updateActiveState);
+    canvas.on("object:modified", handleModified);
+    canvas.on("object:added", pushHistory);
+    canvas.on("object:removed", pushHistory);
+    canvas.on("path:created", pushHistory);
+
+    pushHistory();
+    setCanvasReady(true);
+
+    return () => {
+      canvas.dispose();
+      canvasRef.current = null;
+    };
+  }, [pushHistory, updateActiveState]);
+
+  useEffect(() => {
+    fitCanvasToWorkspace();
+  }, [fitCanvasToWorkspace]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas?.freeDrawingBrush) return;
+
+    canvas.isDrawingMode = state.mode === "draw";
+    canvas.selection = state.mode === "select";
+    canvas.skipTargetFind = state.mode === "pan";
+    canvas.freeDrawingBrush.color = state.stroke;
+    canvas.freeDrawingBrush.width = state.brushWidth;
+  }, [state.brushWidth, state.mode, state.stroke]);
+
+  const loadImageFile = useCallback(async (file: File) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    sourceFileRef.current = file;
+    setSourceFile(file);
+
+    const url = URL.createObjectURL(file);
+    try {
+      const image = await FabricImage.fromURL(url);
+      const maxWidth = 1400;
+      const maxHeight = 1000;
+      const scale = Math.min(1, maxWidth / image.width, maxHeight / image.height);
+      const width = Math.max(320, Math.round(image.width * scale));
+      const height = Math.max(240, Math.round(image.height * scale));
+
+      canvas.clear();
+      canvas.setDimensions({ width, height });
+      setCanvasSize({ width, height });
+      canvas.backgroundColor = "#ffffff";
+      canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+
+      image.set({
+        left: 0,
+        top: 0,
+        originX: "left",
+        originY: "top",
+        selectable: false,
+        evented: false,
+        scaleX: width / image.width,
+        scaleY: height / image.height,
+      });
+      canvas.add(image);
+      canvas.sendObjectToBack(image);
+      canvas.renderAll();
+
+      historyRef.current = [];
+      historyIndexRef.current = -1;
+      pushHistory();
+      refreshHistoryControls();
+      refreshLayerRows();
+      const zoom = Math.max(0.12, Math.min(
+        1,
+        workspaceSize.width > 0 ? (workspaceSize.width - 56) / width : 1,
+        workspaceSize.height > 0 ? (workspaceSize.height - 56) / height : 1
+      ));
+      applyDisplayZoom(zoom, { width, height });
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  }, [applyDisplayZoom, pushHistory, refreshHistoryControls, refreshLayerRows, workspaceSize.height, workspaceSize.width]);
+
+  const applyToActive = useCallback((props: Record<string, unknown>) => {
+    const canvas = canvasRef.current;
+    const object = canvas?.getActiveObject();
+    if (!canvas || !object) return;
+
+    object.set(props);
+    object.setCoords();
+    canvas.requestRenderAll();
+    updateActiveState();
+    pushHistory();
+  }, [pushHistory, updateActiveState]);
+
+  const addText = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const text = new Textbox("Edit text", {
+      left: 80,
+      top: 80,
+      width: 320,
+      fontSize: state.fontSize,
+      fontFamily,
+      fill: state.stroke,
+      backgroundColor: "rgba(255,255,255,0)",
+    });
+    canvas.add(text);
+    canvas.setActiveObject(text);
+    canvas.requestRenderAll();
+    updateActiveState();
+    refreshLayerRows();
+  }, [fontFamily, refreshLayerRows, state.fontSize, state.stroke, updateActiveState]);
+
+  const addShape = useCallback((kind: ShapeKind) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const common = {
+      left: 110,
+      top: 110,
+      fill: kind === "line" ? "" : state.fill,
+      stroke: state.stroke,
+      strokeWidth: 4,
+    };
+
+    const object =
+      kind === "rect"
+        ? new Rect({ ...common, width: 180, height: 120, rx: 4, ry: 4 })
+        : kind === "circle"
+          ? new Circle({ ...common, radius: 72 })
+          : kind === "triangle"
+            ? new Triangle({ ...common, width: 160, height: 140 })
+            : new Line([120, 120, 320, 120], {
+                stroke: state.stroke,
+                strokeWidth: 5,
+              });
+
+    canvas.add(object);
+    canvas.setActiveObject(object);
+    canvas.requestRenderAll();
+    updateActiveState();
+    refreshLayerRows();
+  }, [refreshLayerRows, state.fill, state.stroke, updateActiveState]);
+
+  const deleteActive = useCallback(() => {
+    const canvas = canvasRef.current;
+    const objects = canvas?.getActiveObjects() ?? [];
+    if (!canvas || objects.length === 0) return;
+
+    objects.forEach((object) => {
+      if (object.selectable !== false) canvas.remove(object);
+    });
+    canvas.discardActiveObject();
+    canvas.requestRenderAll();
+    updateActiveState();
+    refreshLayerRows();
+  }, [refreshLayerRows, updateActiveState]);
+
+  const duplicateActive = useCallback(async () => {
+    const canvas = canvasRef.current;
+    const object = canvas?.getActiveObject();
+    if (!canvas || !object) return;
+
+    const clone = await object.clone();
+    clone.set({
+      left: (clone.left ?? 0) + 24,
+      top: (clone.top ?? 0) + 24,
+      evented: true,
+    });
+    canvas.add(clone);
+    canvas.setActiveObject(clone);
+    canvas.requestRenderAll();
+    updateActiveState();
+    refreshLayerRows();
+  }, [refreshLayerRows, updateActiveState]);
+
+  const moveLayer = useCallback((direction: "forward" | "backward") => {
+    const canvas = canvasRef.current;
+    const object = canvas?.getActiveObject();
+    if (!canvas || !object) return;
+
+    if (direction === "forward") {
+      canvas.bringObjectForward(object);
+    } else {
+      canvas.sendObjectBackwards(object);
+    }
+    canvas.requestRenderAll();
+    pushHistory();
+    refreshLayerRows();
+  }, [pushHistory, refreshLayerRows]);
+
+  const clearObjects = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    canvas.getObjects().forEach((object) => {
+      if (object.selectable !== false) canvas.remove(object);
+    });
+    canvas.discardActiveObject();
+    canvas.requestRenderAll();
+    updateActiveState();
+    refreshLayerRows();
+  }, [refreshLayerRows, updateActiveState]);
+
+  const exportImage = useCallback(async () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const dataUrl = canvas.toDataURL({
+      format: exportFormat.replace("image/", "") as "png" | "jpeg" | "webp",
+      quality: quality / 100,
+      multiplier: 1,
+    });
+
+    await run(
+      { files: sourceFileRef.current ? [sourceFileRef.current] : undefined },
+      { format: exportFormat, quality, dataUrl }
+    );
+  }, [exportFormat, quality, run]);
+
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    const target = event.target as HTMLElement | null;
+    const isTyping = target?.tagName === "INPUT" || target?.tagName === "TEXTAREA";
+    if (isTyping) return;
+
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+      event.preventDefault();
+      const nextCanRedo = historyIndexRef.current < historyRef.current.length - 1;
+      const nextCanUndo = historyIndexRef.current > 0;
+      if (event.shiftKey && nextCanRedo) {
+        void loadHistory(historyIndexRef.current + 1);
+      } else if (nextCanUndo) {
+        void loadHistory(historyIndexRef.current - 1);
+      }
+      return;
+    }
+
+    if ((event.key === "Delete" || event.key === "Backspace") && activeObject) {
+      event.preventDefault();
+      deleteActive();
+    }
+  }, [activeObject, deleteActive, loadHistory]);
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  const handleWorkspacePointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    if (state.mode !== "pan") return;
+    const workspace = workspaceRef.current;
+    if (!workspace) return;
+
+    isPanningRef.current = true;
+    panStartRef.current = {
+      x: event.clientX,
+      y: event.clientY,
+      scrollLeft: workspace.scrollLeft,
+      scrollTop: workspace.scrollTop,
+    };
+    workspace.setPointerCapture(event.pointerId);
+  }, [state.mode, workspaceRef]);
+
+  const handleWorkspacePointerMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!isPanningRef.current) return;
+    const workspace = workspaceRef.current;
+    if (!workspace) return;
+
+    const start = panStartRef.current;
+    workspace.scrollLeft = start.scrollLeft - (event.clientX - start.x);
+    workspace.scrollTop = start.scrollTop - (event.clientY - start.y);
+  }, [workspaceRef]);
+
+  const handleWorkspacePointerUp = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!isPanningRef.current) return;
+    isPanningRef.current = false;
+    workspaceRef.current?.releasePointerCapture(event.pointerId);
+  }, [workspaceRef]);
+
+  const handleWorkspaceWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {
+    if (!event.ctrlKey && !event.metaKey) return;
+    event.preventDefault();
+    const delta = event.deltaY > 0 ? -0.08 : 0.08;
+    setCanvasZoom(state.zoom + delta);
+  }, [setCanvasZoom, state.zoom]);
+
+  return (
+    <div className="flex h-full min-h-[620px] flex-col bg-[var(--p-surface)]">
+      <div className="flex shrink-0 flex-wrap items-center gap-2 border-b border-[var(--p-border)] px-4 py-3">
+        <Dropzone
+          accept="image/jpeg,image/png,image/webp"
+          multiple={false}
+          maxSizeMb={25}
+          onFilesDrop={(files) => {
+            if (files[0]) void loadImageFile(files[0]);
+          }}
+          className="min-h-0 w-full p-3 sm:w-[260px]"
+        />
+
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant={state.mode === "select" ? "primary" : "secondary"}
+            onClick={() => setState((prev) => ({ ...prev, mode: "select" }))}
+          >
+            Select
+          </Button>
+          <Button
+            variant={state.mode === "draw" ? "primary" : "secondary"}
+            onClick={() => setState((prev) => ({ ...prev, mode: "draw" }))}
+          >
+            Draw
+          </Button>
+          <Button
+            variant={state.mode === "pan" ? "primary" : "secondary"}
+            onClick={() => setState((prev) => ({ ...prev, mode: "pan" }))}
+          >
+            Pan
+          </Button>
+          <Button variant="secondary" onClick={addText}>Text</Button>
+          <Button variant="secondary" onClick={() => addShape("rect")}>Rect</Button>
+          <Button variant="secondary" onClick={() => addShape("circle")}>Circle</Button>
+          <Button variant="secondary" onClick={() => addShape("triangle")}>Triangle</Button>
+          <Button variant="secondary" onClick={() => addShape("line")}>Line</Button>
+        </div>
+
+        <div className="ml-auto flex items-center gap-2">
+          <Button variant="secondary" onClick={() => setCanvasZoom(state.zoom - 0.12)}>
+            -
+          </Button>
+          <button
+            onClick={fitCanvasToWorkspace}
+            className="rounded-[10px] border border-[var(--p-border)] bg-[var(--p-chip)] px-3 py-2 font-mono text-[12px] text-[var(--p-text)]"
+          >
+            {Math.round(state.zoom * 100)}%
+          </button>
+          <Button variant="secondary" onClick={() => setCanvasZoom(state.zoom + 0.12)}>
+            +
+          </Button>
+          <Button variant="secondary" onClick={() => setCanvasZoom(1)}>
+            100%
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px]">
+        <div
+          ref={workspaceRef}
+          onPointerDown={handleWorkspacePointerDown}
+          onPointerMove={handleWorkspacePointerMove}
+          onPointerUp={handleWorkspacePointerUp}
+          onPointerCancel={handleWorkspacePointerUp}
+          onWheel={handleWorkspaceWheel}
+          className={`min-h-[520px] overflow-auto bg-[var(--p-bg)] p-6 ${
+            state.mode === "pan" ? "cursor-grab active:cursor-grabbing" : ""
+          }`}
+        >
+          <div className="flex min-h-full min-w-max items-center justify-center">
+            <div
+              className="shrink-0 border border-[var(--p-border)] bg-white shadow-[0_24px_60px_-36px_var(--p-shadow-soft)]"
+              style={{
+                width: canvasSize.width * state.zoom,
+                height: canvasSize.height * state.zoom,
+              }}
+            >
+              <canvas ref={canvasElRef} />
+            </div>
+          </div>
+        </div>
+
+        <aside className="flex min-h-0 flex-col gap-4 overflow-y-auto border-l border-[var(--p-border)] bg-[var(--p-surface-2)] p-4">
+          <section className="flex flex-col gap-3">
+            <div className="font-mono text-[10px] uppercase tracking-wider text-[var(--p-muted)]">
+              properties
+            </div>
+            <div className="rounded-[12px] border border-[var(--p-border)] bg-[var(--p-surface)] p-3">
+              <div className="mb-3 font-sans text-sm font-semibold text-[var(--p-text)]">
+                {state.selectedType}
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <label className="flex flex-col gap-1 font-sans text-[12px] text-[var(--p-muted)]">
+                  Fill
+                  <input
+                    type="color"
+                    value={state.fill}
+                    onChange={(event) => {
+                      setState((prev) => ({ ...prev, fill: event.target.value }));
+                      applyToActive({ fill: event.target.value });
+                    }}
+                    className="h-9 w-full rounded border border-[var(--p-border)] bg-transparent"
+                  />
+                </label>
+                <label className="flex flex-col gap-1 font-sans text-[12px] text-[var(--p-muted)]">
+                  Stroke / text
+                  <input
+                    type="color"
+                    value={state.stroke}
+                    onChange={(event) => {
+                      setState((prev) => ({ ...prev, stroke: event.target.value }));
+                      applyToActive({ stroke: event.target.value, fill: activeObject?.type === "textbox" ? event.target.value : activeObject?.get("fill") });
+                    }}
+                    className="h-9 w-full rounded border border-[var(--p-border)] bg-transparent"
+                  />
+                </label>
+              </div>
+
+              <div className="mt-3 flex flex-col gap-3">
+                <Select
+                  label="Font"
+                  value={fontFamily}
+                  options={FONT_OPTIONS}
+                  onChange={(event) => {
+                    setFontFamily(event.target.value);
+                    applyToActive({ fontFamily: event.target.value });
+                  }}
+                />
+                <Slider
+                  label="Text size"
+                  min={12}
+                  max={160}
+                  value={state.fontSize}
+                  onChange={(event) => {
+                    const fontSize = Number(event.target.value);
+                    setState((prev) => ({ ...prev, fontSize }));
+                    applyToActive({ fontSize });
+                  }}
+                />
+                <Slider
+                  label="Brush"
+                  min={1}
+                  max={48}
+                  value={state.brushWidth}
+                  onChange={(event) => {
+                    setState((prev) => ({ ...prev, brushWidth: Number(event.target.value) }));
+                  }}
+                />
+              </div>
+            </div>
+          </section>
+
+          <section className="flex flex-col gap-3">
+            <div className="font-mono text-[10px] uppercase tracking-wider text-[var(--p-muted)]">
+              arrange
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <Button variant="secondary" onClick={duplicateActive} disabled={!activeObject}>Duplicate</Button>
+              <Button variant="danger" onClick={deleteActive} disabled={!activeObject}>Delete</Button>
+              <Button variant="secondary" onClick={() => moveLayer("forward")} disabled={!activeObject}>Forward</Button>
+              <Button variant="secondary" onClick={() => moveLayer("backward")} disabled={!activeObject}>Backward</Button>
+              <Button variant="secondary" onClick={() => loadHistory(historyIndexRef.current - 1)} disabled={!canUndo}>Undo</Button>
+              <Button variant="secondary" onClick={() => loadHistory(historyIndexRef.current + 1)} disabled={!canRedo}>Redo</Button>
+            </div>
+            <Button variant="secondary" onClick={clearObjects}>
+              Clear editable objects
+            </Button>
+          </section>
+
+          <section className="flex min-h-0 flex-col gap-3">
+            <div className="font-mono text-[10px] uppercase tracking-wider text-[var(--p-muted)]">
+              layers
+            </div>
+            <div className="max-h-[160px] overflow-y-auto rounded-[12px] border border-[var(--p-border)] bg-[var(--p-surface)] p-2">
+              {layerRows.length === 0 ? (
+                <div className="px-2 py-4 text-center text-sm text-[var(--p-muted)]">
+                  No editable layers yet
+                </div>
+              ) : (
+                layerRows.map((row) => (
+                  <button
+                    key={row.id}
+                    onClick={() => {
+                      canvasRef.current?.setActiveObject(row.object);
+                      canvasRef.current?.requestRenderAll();
+                      updateActiveState();
+                    }}
+                    className={`mb-1 w-full rounded-lg px-3 py-2 text-left font-sans text-[13px] ${
+                      activeObject === row.object
+                        ? "bg-[var(--p-accent)] text-[var(--p-accent-ink)]"
+                        : "bg-[var(--p-chip)] text-[var(--p-text)]"
+                    }`}
+                  >
+                    {row.label}
+                  </button>
+                ))
+              )}
+            </div>
+          </section>
+
+          <section className="mt-auto flex flex-col gap-3">
+            <div className="font-mono text-[10px] uppercase tracking-wider text-[var(--p-muted)]">
+              export
+            </div>
+            <Select
+              label="Format"
+              value={exportFormat}
+              options={FORMAT_OPTIONS}
+              onChange={(event) => setExportFormat(event.target.value as ImageEditorOptions["format"])}
+            />
+            <Slider
+              label="Quality"
+              min={10}
+              max={100}
+              value={quality}
+              onChange={(event) => setQuality(Number(event.target.value))}
+            />
+            <Button onClick={exportImage} disabled={!canvasReady || isExecuting}>
+              {isExecuting ? "Exporting..." : "Export image"}
+            </Button>
+            {sourceFile && (
+              <div className="truncate font-mono text-[10px] text-[var(--p-muted)]">
+                source: {sourceFile.name}
+              </div>
+            )}
+            {error && <div className="text-sm text-red-700">{error}</div>}
+            {result && <ToolResultPanel result={result} />}
+          </section>
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/src/tools/image-editor/index.ts b/src/tools/image-editor/index.ts
new file mode 100644
index 0000000..63e77f4
--- /dev/null
+++ b/src/tools/image-editor/index.ts
@@ -0,0 +1,47 @@
+import { lazy } from "react";
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runImageEditor } from "./run";
+
+export interface ImageEditorOptions {
+  format: "image/png" | "image/jpeg" | "image/webp";
+  quality: number;
+  dataUrl?: string;
+}
+
+const ImageEditorUi = lazy(() => import("./ImageEditorUi"));
+
+export const imageEditorPlugin: PlimiPlugin<ImageEditorOptions> = {
+  manifest: {
+    id: "image-editor",
+    name: "Image Editor",
+    description:
+      "Edit images with text, drawing, shapes, colors, layers, and export locally.",
+    category: "image",
+    version: "1.0.0",
+    tags: ["image", "editor", "text", "draw", "shapes", "fabric"],
+    input: {
+      type: "files",
+      accept: ["image/jpeg", "image/png", "image/webp"],
+      multiple: false,
+      maxSizeMb: 25,
+    },
+    output: { type: "files" },
+    offlineReady: true,
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+    customUi: true,
+    preview: true,
+  },
+
+  permissions: {
+    network: "none",
+    fileSystem: "read-write",
+    clipboard: "none",
+  },
+
+  run: runImageEditor,
+  customUi: ImageEditorUi,
+};
diff --git a/src/tools/image-editor/run.ts b/src/tools/image-editor/run.ts
new file mode 100644
index 0000000..1a9018e
--- /dev/null
+++ b/src/tools/image-editor/run.ts
@@ -0,0 +1,60 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { ImageEditorOptions } from "./index";
+
+function dataUrlToBlob(dataUrl: string): Blob {
+  const [header, payload] = dataUrl.split(",");
+  const mimeMatch = header.match(/^data:(.*?);base64$/);
+  if (!mimeMatch || !payload) {
+    throw new Error("Invalid image export data.");
+  }
+
+  const binary = atob(payload);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+
+  return new Blob([bytes], { type: mimeMatch[1] });
+}
+
+function extensionForMime(mimeType: ImageEditorOptions["format"]): string {
+  if (mimeType === "image/jpeg") return "jpg";
+  if (mimeType === "image/webp") return "webp";
+  return "png";
+}
+
+export async function runImageEditor(
+  input: ToolInput,
+  options: ImageEditorOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  if (!options.dataUrl) {
+    throw new Error("No edited image is ready to export.");
+  }
+
+  context.reportProgress({ percentage: 60, message: "Preparing export..." });
+
+  const blob = dataUrlToBlob(options.dataUrl);
+  const sourceName = input.files?.[0]?.name ?? "image";
+  const baseName = sourceName.includes(".")
+    ? sourceName.slice(0, sourceName.lastIndexOf("."))
+    : sourceName;
+  const name = `${baseName}_edited.${extensionForMime(options.format)}`;
+
+  context.reportProgress({ percentage: 100, message: "Done" });
+
+  return {
+    type: "files",
+    files: [
+      {
+        name,
+        mimeType: options.format,
+        blob,
+        sizeBefore: input.files?.[0]?.size,
+        sizeAfter: blob.size,
+      },
+    ],
+  };
+}
diff --git a/src/tools/image-optimizer/ImageOptimizerUi.tsx b/src/tools/image-optimizer/ImageOptimizerUi.tsx
new file mode 100644
index 0000000..dbe5a14
--- /dev/null
+++ b/src/tools/image-optimizer/ImageOptimizerUi.tsx
@@ -0,0 +1,224 @@
+import { useState, useCallback, useEffect } from "react";
+import type { ToolUiProps } from "../../core/plugins/plugin-types";
+import type { ImageOptimizerOptions } from "./index";
+import { Button } from "../../components/ui/Button";
+import { Card } from "../../components/ui/Card";
+import { Dropzone } from "../../components/ui/Dropzone";
+import { Slider } from "../../components/ui/Slider";
+import { Select } from "../../components/ui/Select";
+import { useToolExecution } from "../../components/tool/useToolExecution";
+
+const IMAGE_FORMATS = ["image/jpeg", "image/webp", "image/png"] as const;
+type ImageFormat = (typeof IMAGE_FORMATS)[number];
+
+function isImageFormat(value: string): value is ImageFormat {
+  return IMAGE_FORMATS.includes(value as ImageFormat);
+}
+
+export default function ImageOptimizerUi({
+  plugin,
+}: ToolUiProps<ImageOptimizerOptions>) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [previewUrls, setPreviewUrls] = useState<string[]>([]);
+
+  const [quality, setQuality] = useState(80);
+  const [format, setFormat] = useState<
+    "image/jpeg" | "image/webp" | "image/png"
+  >("image/webp");
+  const { run, result, isExecuting, error, reset } = useToolExecution(plugin);
+
+  useEffect(() => {
+    return () => {
+      previewUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, [previewUrls]);
+
+  const handleFilesDrop = useCallback((nextFiles: File[]) => {
+    setFiles(nextFiles);
+    setPreviewUrls(nextFiles.map((file) => URL.createObjectURL(file)));
+    reset();
+  }, [reset]);
+
+  const handleRun = useCallback(async () => {
+    if (files.length === 0) return;
+
+    await run({ files }, { quality, format });
+  }, [files, format, quality, run]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        if (!isExecuting && files.length > 0) {
+          handleRun();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleRun, isExecuting, files]);
+
+  const downloadBlob = useCallback((blob: Blob, filename: string) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  return (
+    <div className="p-[18px] md:p-[28px] max-w-5xl mx-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-6">
+          <Card title="Upload Images">
+            <Dropzone
+              accept="image/jpeg,image/png,image/webp"
+              multiple
+              maxSizeMb={20}
+              onFilesDrop={handleFilesDrop}
+            />
+
+            {previewUrls.length > 0 && (
+              <div className="mt-6">
+                <h4 className="text-sm font-medium text-gray-700 mb-3">
+                  Previews:
+                </h4>
+                <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                  {previewUrls.map((url, i) => (
+                    <div
+                      key={i}
+                      className="relative aspect-square rounded-lg overflow-hidden border border-gray-200"
+                    >
+                      <img
+                        src={url}
+                        alt="Preview"
+                        className="object-cover w-full h-full"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </Card>
+
+          {error && (
+            <Card className="border-red-200">
+              <div className="text-sm text-red-700">{error}</div>
+            </Card>
+          )}
+
+          {result && result.type === "files" && (
+            <Card
+              title="Optimized Results"
+              className="border-green-200 shadow-md"
+            >
+              {result.files.length > 1 && (
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 pb-4 border-b border-gray-100">
+                  <span className="text-sm text-gray-500 font-medium">
+                    Successfully optimized {result.files.length} images
+                  </span>
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      result.files.forEach((file) => {
+                        downloadBlob(file.blob, file.name);
+                      });
+                    }}
+                    className="w-full sm:w-auto shrink-0"
+                  >
+                    Download All ({result.files.length})
+                  </Button>
+                </div>
+              )}
+
+              <ul className="divide-y divide-gray-200 border border-gray-200 rounded-lg">
+                {result.files.map((file, i) => {
+                  const savedBytes =
+                    (file.sizeBefore || 0) - (file.sizeAfter || 0);
+                  const savedPercentage = file.sizeBefore
+                    ? (savedBytes / file.sizeBefore) * 100
+                    : 0;
+
+                  return (
+                    <li
+                      key={i}
+                      className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-gray-50 transition-colors"
+                    >
+                      <div className="flex flex-col min-w-0 flex-1">
+                        <span className="font-medium text-gray-900 truncate" title={file.name}>
+                          {file.name}
+                        </span>
+                        <div className="text-sm text-gray-500 mt-1 flex flex-wrap items-center gap-2">
+                          <span className="line-through">
+                            {((file.sizeBefore || 0) / 1024).toFixed(1)} KB
+                          </span>
+                          <span className="text-green-600 font-medium">
+                            {((file.sizeAfter || 0) / 1024).toFixed(1)} KB
+                          </span>
+                          <span className="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">
+                            -{savedPercentage.toFixed(0)}%
+                          </span>
+                        </div>
+                      </div>
+                      <Button
+                        variant="secondary"
+                        onClick={() => downloadBlob(file.blob, file.name)}
+                        className="w-full sm:w-auto shrink-0 text-center"
+                      >
+                        Download
+                      </Button>
+                    </li>
+                  );
+                })}
+              </ul>
+            </Card>
+          )}
+        </div>
+
+        <div className="space-y-6">
+          <Card title="Settings">
+            <div className="space-y-6">
+              <Select
+                label="Output Format"
+                value={format}
+                onChange={(e) => {
+                  if (isImageFormat(e.target.value)) {
+                    setFormat(e.target.value);
+                  }
+                }}
+                options={[
+                  { label: "WebP (Recommended)", value: "image/webp" },
+                  { label: "JPEG", value: "image/jpeg" },
+                  { label: "PNG", value: "image/png" },
+                ]}
+              />
+
+              <Slider
+                label="Quality"
+                value={quality}
+                onChange={(e) => setQuality(Number(e.target.value))}
+                min={1}
+                max={100}
+              />
+
+              <div className="pt-4 border-t border-gray-100">
+                <Button
+                  onClick={handleRun}
+                  disabled={isExecuting || files.length === 0}
+                  className="w-full"
+                >
+                  {isExecuting ? "Optimizing..." : "Optimize Images"}
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/tools/image-optimizer/index.ts b/src/tools/image-optimizer/index.ts
new file mode 100644
index 0000000..0948cbe
--- /dev/null
+++ b/src/tools/image-optimizer/index.ts
@@ -0,0 +1,67 @@
+import { lazy } from "react";
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runImageOptimizer } from "./run";
+
+export interface ImageOptimizerOptions {
+  quality: number;
+  format: "image/jpeg" | "image/webp" | "image/png";
+}
+
+// Lazy load the custom UI to keep the main bundle small
+const ImageOptimizerUi = lazy(() => import("./ImageOptimizerUi"));
+
+export const imageOptimizerPlugin: PlimiPlugin<ImageOptimizerOptions> = {
+  manifest: {
+    id: "image-optimizer",
+    name: "Image Optimizer",
+    description:
+      "Compress and convert images entirely in your browser using the Canvas API.",
+    category: "image",
+    version: "1.0.0",
+    tags: ["image", "compress", "resize", "webp", "jpeg"],
+    input: {
+      type: "files",
+      accept: ["image/jpeg", "image/png", "image/webp"],
+      multiple: true,
+      maxSizeMb: 20,
+    },
+    output: { type: "files" },
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "slider",
+        key: "quality",
+        label: "Quality",
+        defaultValue: 80,
+        min: 1,
+        max: 100,
+        step: 1,
+      },
+      {
+        type: "select",
+        key: "format",
+        label: "Output Format",
+        defaultValue: "image/webp",
+        options: [
+          { label: "WebP", value: "image/webp" },
+          { label: "JPEG", value: "image/jpeg" },
+          { label: "PNG", value: "image/png" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+    customUi: true,
+  },
+
+  run: runImageOptimizer,
+
+  // Provide the custom UI
+  customUi: ImageOptimizerUi,
+};
diff --git a/src/tools/image-optimizer/run.test.ts b/src/tools/image-optimizer/run.test.ts
new file mode 100644
index 0000000..a457af0
--- /dev/null
+++ b/src/tools/image-optimizer/run.test.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from "vitest";
+import { runImageOptimizer } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Image Optimizer Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  it("should throw error if no files provided", async () => {
+    await expect(
+      runImageOptimizer(
+        { files: [] },
+        { quality: 80, format: "image/webp" },
+        mockContext
+      )
+    ).rejects.toThrow("No files provided for optimization.");
+  });
+
+  it("should throw error if file is not an image", async () => {
+    const textFile = new File(["hello"], "hello.txt", { type: "text/plain" });
+
+    await expect(
+      runImageOptimizer(
+        { files: [textFile] },
+        { quality: 80, format: "image/webp" },
+        mockContext
+      )
+    ).rejects.toThrow("File hello.txt is not an image.");
+  });
+
+  // Note: Testing actual Canvas API compression requires a full browser environment
+  // or a mock canvas library in Vitest. For V1 MVP, we test the core validation logic.
+});
diff --git a/src/tools/image-optimizer/run.ts b/src/tools/image-optimizer/run.ts
new file mode 100644
index 0000000..8d4cf61
--- /dev/null
+++ b/src/tools/image-optimizer/run.ts
@@ -0,0 +1,108 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { ImageOptimizerOptions } from "./index";
+
+export async function runImageOptimizer(
+  input: ToolInput,
+  options: ImageOptimizerOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  const files = input.files;
+  if (!files || files.length === 0) {
+    throw new Error("No files provided for optimization.");
+  }
+
+  const results = [];
+  let processed = 0;
+
+  for (const file of files) {
+    // Check if it's an image
+    if (!file.type.startsWith("image/")) {
+      throw new Error(`File ${file.name} is not an image.`);
+    }
+
+    context.reportProgress({
+      percentage: (processed / files.length) * 100,
+      message: `Optimizing ${file.name}...`,
+    });
+
+    const optimizedBlob = await optimizeImage(file, options);
+
+    let ext = "jpg";
+    if (options.format === "image/webp") ext = "webp";
+    if (options.format === "image/png") ext = "png";
+
+    const originalNameWithoutExt =
+      file.name.substring(0, file.name.lastIndexOf(".")) || file.name;
+    const newName = `${originalNameWithoutExt}_optimized.${ext}`;
+
+    results.push({
+      name: newName,
+      mimeType: options.format,
+      blob: optimizedBlob,
+      sizeBefore: file.size,
+      sizeAfter: optimizedBlob.size,
+    });
+
+    processed++;
+  }
+
+  context.reportProgress({ percentage: 100, message: "Done" });
+
+  return {
+    type: "files",
+    files: results,
+  };
+}
+
+function optimizeImage(
+  file: File,
+  options: ImageOptimizerOptions
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+
+      const canvas = document.createElement("canvas");
+      const width = img.width;
+      const height = img.height;
+
+      // Optional: resize logic could go here based on max width/height options
+
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        return reject(new Error("Could not get 2D context"));
+      }
+
+      ctx.drawImage(img, 0, 0, width, height);
+
+      const quality = options.quality / 100;
+
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new Error("Failed to create blob from canvas"));
+          }
+        },
+        options.format,
+        quality
+      );
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to load image for optimization"));
+    };
+
+    img.src = url;
+  });
+}
diff --git a/src/tools/image-redactor/ImageRedactorUi.tsx b/src/tools/image-redactor/ImageRedactorUi.tsx
new file mode 100644
index 0000000..41fdb08
--- /dev/null
+++ b/src/tools/image-redactor/ImageRedactorUi.tsx
@@ -0,0 +1,304 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import type { ToolUiProps } from "../../core/plugins/plugin-types";
+import type { ImageRedactorOptions, RedactRect } from "./index";
+import { Button } from "../../components/ui/Button";
+import { Card } from "../../components/ui/Card";
+import { Dropzone } from "../../components/ui/Dropzone";
+import { useToolExecution } from "../../components/tool/useToolExecution";
+
+export default function ImageRedactorUi({
+  plugin,
+}: ToolUiProps<ImageRedactorOptions>) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [previewUrl, setPreviewUrl] = useState<string>("");
+  const [rects, setRects] = useState<RedactRect[]>([]);
+
+  // Drawing state
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
+  const [currentPos, setCurrentPos] = useState({ x: 0, y: 0 });
+
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const { run, result, isExecuting, error, reset } = useToolExecution(plugin);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!previewUrl) return;
+
+    return () => {
+      URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
+  const handleFilesDrop = useCallback((nextFiles: File[]) => {
+    setFiles(nextFiles);
+    setPreviewUrl(nextFiles.length > 0 ? URL.createObjectURL(nextFiles[0]) : "");
+    setRects([]);
+    reset();
+  }, [reset]);
+
+  const handleClearFiles = useCallback(() => {
+    setFiles([]);
+    setPreviewUrl("");
+    setRects([]);
+    reset();
+  }, [reset]);
+
+  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    setImageSize({ width: img.naturalWidth, height: img.naturalHeight });
+  };
+
+  const getPercentageCoords = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return { x: 0, y: 0 };
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+    // Clamp to 0-100 range
+    return {
+      x: Math.max(0, Math.min(100, x)),
+      y: Math.max(0, Math.min(100, y)),
+    };
+  };
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (result) return; // Disable drawing if result is shown
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    const coords = getPercentageCoords(e);
+    setStartPos(coords);
+    setCurrentPos(coords);
+    setIsDrawing(true);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDrawing) return;
+    const coords = getPercentageCoords(e);
+    setCurrentPos(coords);
+  };
+
+  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDrawing) return;
+    (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+    setIsDrawing(false);
+
+    const coords = getPercentageCoords(e);
+    const x = Math.min(startPos.x, coords.x);
+    const y = Math.min(startPos.y, coords.y);
+    const w = Math.abs(coords.x - startPos.x);
+    const h = Math.abs(coords.y - startPos.y);
+
+    // Save rectangle if it has some minimum size to avoid tiny single click boxes
+    if (w > 0.4 && h > 0.4) {
+      setRects((prev) => [...prev, { x, y, w, h }]);
+    }
+  };
+
+  const handleUndo = () => {
+    setRects((prev) => prev.slice(0, -1));
+  };
+
+  const handleClear = () => {
+    setRects([]);
+  };
+
+  const handleRun = useCallback(async () => {
+    if (files.length === 0) return;
+
+    await run({ files }, { rects, color: "#000000" });
+  }, [files, rects, run]);
+
+  const downloadBlob = useCallback((blob: Blob, filename: string) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  // Hotkeys: Ctrl+Enter to redact
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        if (!isExecuting && files.length > 0 && !result) {
+          handleRun();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [files.length, handleRun, isExecuting, result]);
+
+  // Temporary rectangle styles (while drawing)
+  const tempRectStyle = isDrawing
+    ? {
+        left: `${Math.min(startPos.x, currentPos.x)}%`,
+        top: `${Math.min(startPos.y, currentPos.y)}%`,
+        width: `${Math.abs(currentPos.x - startPos.x)}%`,
+        height: `${Math.abs(currentPos.y - startPos.y)}%`,
+      }
+    : null;
+
+  return (
+    <div className="p-[18px] md:p-[28px] max-w-5xl mx-auto">
+
+      {files.length === 0 ? (
+        <Card title="Upload Image to Redact">
+          <Dropzone
+            accept="image/jpeg,image/png,image/webp"
+            multiple={false}
+            onFilesDrop={handleFilesDrop}
+          />
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-6">
+            <Card title="Redaction Canvas">
+              <div className="text-xs text-gray-400 mb-3">
+                Pointer drawing active. Click and drag to place black redaction blocks.
+              </div>
+
+              {/* Bounding box wrapper */}
+              <div
+                ref={containerRef}
+                onPointerDown={handlePointerDown}
+                onPointerMove={handlePointerMove}
+                onPointerUp={handlePointerUp}
+                className="relative select-none overflow-hidden cursor-crosshair border border-[var(--p-border)] rounded-lg bg-[var(--p-bg)] max-w-full flex items-center justify-center"
+                style={{ touchAction: "none" }}
+              >
+                <img
+                  src={previewUrl}
+                  alt="Redaction source"
+                  onLoad={handleImageLoad}
+                  onDragStart={(e) => e.preventDefault()}
+                  className="max-w-full max-h-[60vh] object-contain pointer-events-none"
+                />
+
+                {/* Draw saved rectangles */}
+                {rects.map((r, i) => (
+                  <div
+                    key={i}
+                    className="absolute bg-black pointer-events-none"
+                    style={{
+                      left: `${r.x}%`,
+                      top: `${r.y}%`,
+                      width: `${r.w}%`,
+                      height: `${r.h}%`,
+                      boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.15)",
+                    }}
+                  />
+                ))}
+
+                {/* Draw active temporary rectangle */}
+                {tempRectStyle && (
+                  <div
+                    className="absolute bg-black/60 border-2 border-red-500 border-dashed pointer-events-none"
+                    style={tempRectStyle}
+                  />
+                )}
+              </div>
+            </Card>
+
+            {error && (
+              <Card className="border-red-200">
+                <div className="text-sm text-red-700">{error}</div>
+              </Card>
+            )}
+
+            {result && result.type === "files" && (
+              <Card
+                title="Redacted Result"
+                className="border-green-200 shadow-md"
+              >
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 border border-green-200 bg-green-50/50 rounded-xl">
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="font-medium text-green-950 truncate" title={result.files[0].name}>
+                      {result.files[0].name}
+                    </span>
+                    <span className="text-xs text-green-700 mt-1">
+                      Metadata flattened & redacted successfully.
+                    </span>
+                  </div>
+                  <Button
+                    variant="primary"
+                    onClick={() => downloadBlob(result.files[0].blob, result.files[0].name)}
+                    className="w-full sm:w-auto shrink-0"
+                  >
+                    Download Redacted Image
+                  </Button>
+                </div>
+              </Card>
+            )}
+          </div>
+
+          <div className="space-y-6">
+            <Card title="Controls">
+              <div className="space-y-6">
+                <div>
+                  <div className="text-sm font-semibold text-gray-800">
+                    File details
+                  </div>
+                  <div className="text-xs text-gray-500 mt-1 truncate">
+                    Name: {files[0].name}
+                  </div>
+                  {imageSize.width > 0 && (
+                    <div className="text-xs text-gray-500">
+                      Dimensions: {imageSize.width} × {imageSize.height} px
+                    </div>
+                  )}
+                  <div className="text-xs text-gray-500">
+                    Active redactions: {rects.length}
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-2">
+                  <Button
+                    variant="secondary"
+                    onClick={handleUndo}
+                    disabled={rects.length === 0 || isExecuting}
+                    className="w-full justify-center"
+                  >
+                    Undo Last Block
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={handleClear}
+                    disabled={rects.length === 0 || isExecuting}
+                    className="w-full justify-center text-red-600 hover:text-red-700 hover:bg-red-50"
+                  >
+                    Clear All Blocks
+                  </Button>
+                </div>
+
+                <div className="pt-4 border-t border-gray-100 flex flex-col gap-2">
+                  <Button
+                    variant="primary"
+                    onClick={handleRun}
+                    disabled={isExecuting || rects.length === 0 || result !== null}
+                    className="w-full justify-center"
+                  >
+                    {isExecuting ? "Processing..." : "Apply Redactions"}
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={handleClearFiles}
+                    disabled={isExecuting}
+                    className="w-full justify-center"
+                  >
+                    Upload Another Image
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/tools/image-redactor/index.ts b/src/tools/image-redactor/index.ts
new file mode 100644
index 0000000..8383743
--- /dev/null
+++ b/src/tools/image-redactor/index.ts
@@ -0,0 +1,45 @@
+import { lazy } from "react";
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runImageRedactor } from "./run";
+
+export interface RedactRect {
+  x: number; // Absolute X coordinate in image natural pixels
+  y: number; // Absolute Y coordinate in image natural pixels
+  w: number; // Absolute width in image natural pixels
+  h: number; // Absolute height in image natural pixels
+}
+
+export interface ImageRedactorOptions {
+  rects: RedactRect[];
+  color: string;
+}
+
+const ImageRedactorUi = lazy(() => import("./ImageRedactorUi"));
+
+export const imageRedactorPlugin: PlimiPlugin<ImageRedactorOptions> = {
+  manifest: {
+    id: "image-redactor",
+    name: "Image Redactor",
+    description: "Safely paint black boxes over sensitive data like addresses or credit cards entirely in your browser.",
+    category: "privacy",
+    version: "1.0.0",
+    tags: ["privacy", "redact", "hide", "censor", "blur", "image"],
+    input: {
+      type: "files",
+      accept: ["image/jpeg", "image/png", "image/webp"],
+      multiple: false,
+    },
+    output: { type: "files" },
+    offlineReady: true,
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+    customUi: true,
+  },
+
+  run: runImageRedactor,
+
+  customUi: ImageRedactorUi,
+};
diff --git a/src/tools/image-redactor/run.test.ts b/src/tools/image-redactor/run.test.ts
new file mode 100644
index 0000000..6879628
--- /dev/null
+++ b/src/tools/image-redactor/run.test.ts
@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from "vitest";
+import { runImageRedactor } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Image Redactor Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  it("should throw error if no files provided", async () => {
+    await expect(
+      runImageRedactor(
+        { files: [] },
+        { rects: [], color: "#000000" },
+        mockContext
+      )
+    ).rejects.toThrow("No image file uploaded.");
+  });
+});
diff --git a/src/tools/image-redactor/run.ts b/src/tools/image-redactor/run.ts
new file mode 100644
index 0000000..5aea306
--- /dev/null
+++ b/src/tools/image-redactor/run.ts
@@ -0,0 +1,106 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { ImageRedactorOptions } from "./index";
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Failed to load image."));
+    img.src = url;
+  });
+}
+
+function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  mimeType: string,
+  quality = 0.95
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Failed to export image from canvas."));
+        }
+      },
+      mimeType,
+      quality
+    );
+  });
+}
+
+export async function runImageRedactor(
+  input: ToolInput,
+  options: ImageRedactorOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  const files = input.files;
+  if (!files || !Array.isArray(files) || files.length === 0) {
+    throw new Error("No image file uploaded.");
+  }
+
+  const file = files[0];
+  const url = URL.createObjectURL(file);
+
+  try {
+    context.reportProgress({ percentage: 20, message: "Loading image file..." });
+    const img = await loadImage(url);
+
+    context.reportProgress({ percentage: 50, message: "Drawing base canvas..." });
+    const canvas = document.createElement("canvas");
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Could not acquire 2D canvas context.");
+    }
+
+    // Draw original image
+    ctx.drawImage(img, 0, 0);
+
+    // Apply redactions
+    context.reportProgress({ percentage: 70, message: "Applying redaction blocks..." });
+    ctx.fillStyle = options.color || "#000000";
+    const rects = options.rects || [];
+
+    for (const rect of rects) {
+      const rx = (rect.x / 100) * img.naturalWidth;
+      const ry = (rect.y / 100) * img.naturalHeight;
+      const rw = (rect.w / 100) * img.naturalWidth;
+      const rh = (rect.h / 100) * img.naturalHeight;
+      ctx.fillRect(rx, ry, rw, rh);
+    }
+
+    context.reportProgress({ percentage: 90, message: "Exporting redacted image..." });
+    const mimeType = file.type || "image/png";
+    const blob = await canvasToBlob(canvas, mimeType);
+
+    // Generate output file name
+    const dotIdx = file.name.lastIndexOf(".");
+    const name = dotIdx !== -1
+      ? `${file.name.substring(0, dotIdx)}_redacted${file.name.substring(dotIdx)}`
+      : `${file.name}_redacted.png`;
+
+    context.reportProgress({ percentage: 100, message: "Completed!" });
+    return {
+      type: "files",
+      files: [
+        {
+          name: name,
+          mimeType: mimeType,
+          blob: blob,
+          sizeAfter: blob.size,
+        },
+      ],
+    };
+  } catch (error) {
+    console.error("Image Redaction Error:", error);
+    throw error instanceof Error ? error : new Error("Unknown error occurred during image redaction");
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
diff --git a/src/tools/json-formatter/index.ts b/src/tools/json-formatter/index.ts
new file mode 100644
index 0000000..9c933ac
--- /dev/null
+++ b/src/tools/json-formatter/index.ts
@@ -0,0 +1,45 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runJsonFormatter } from "./run";
+
+export interface JsonOptions {
+  indent: "2 spaces" | "4 spaces" | "tabs" | "minified";
+}
+
+export const jsonFormatterPlugin: PlimiPlugin<JsonOptions> = {
+  manifest: {
+    id: "dev-json",
+    name: "JSON Formatter",
+    description: "Format, minify, and validate JSON strings.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["json", "format", "minify", "validate"],
+    input: { type: "text" },
+    output: { type: "text" },
+    example: '{"name":"Plimi","version":1,"tools":["base64","hash"],"offline":true}',
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "indent",
+        label: "Indent",
+        defaultValue: "2 spaces",
+        options: [
+          { label: "2 Spaces", value: "2 spaces" },
+          { label: "4 Spaces", value: "4 spaces" },
+          { label: "Tabs", value: "tabs" },
+          { label: "Minified", value: "minified" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runJsonFormatter,
+};
diff --git a/src/tools/json-formatter/run.ts b/src/tools/json-formatter/run.ts
new file mode 100644
index 0000000..b2a3b7e
--- /dev/null
+++ b/src/tools/json-formatter/run.ts
@@ -0,0 +1,35 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { JsonOptions } from "./index";
+
+export async function runJsonFormatter(
+  input: ToolInput,
+  options: JsonOptions
+): Promise<ToolResult> {
+  const text = input.text || "";
+  if (!text) {
+    throw new Error("No text provided.");
+  }
+
+  let indentSpace: string | number = 2;
+  if (options.indent === "4 spaces") {
+    indentSpace = 4;
+  } else if (options.indent === "tabs") {
+    indentSpace = "\t";
+  } else if (options.indent === "minified") {
+    indentSpace = 0;
+  }
+
+  try {
+    const parsed = JSON.parse(text);
+    const formatted = JSON.stringify(parsed, null, indentSpace);
+    
+    return {
+      type: "text",
+      value: formatted,
+    };
+  } catch (cause) {
+    const message = cause instanceof Error ? cause.message : String(cause);
+    throw new Error(`Invalid JSON: ${message}`, { cause });
+  }
+}
diff --git a/src/tools/jwt-decoder/index.ts b/src/tools/jwt-decoder/index.ts
new file mode 100644
index 0000000..7fbd206
--- /dev/null
+++ b/src/tools/jwt-decoder/index.ts
@@ -0,0 +1,30 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runJwtDecoder } from "./run";
+
+export const jwtDecoderPlugin: PlimiPlugin = {
+  manifest: {
+    id: "jwt-decoder",
+    name: "JWT Decoder",
+    description: "Decode and inspect JSON Web Tokens (JWT) locally in your browser.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["jwt", "token", "decoder", "auth", "json"],
+    input: {
+      type: "text",
+      label: "JWT Token",
+      placeholder: "Paste your JWT token here (encoded header.payload.signature)...",
+      multiline: true,
+      rows: 6,
+    },
+    output: { type: "json" },
+    example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE4MTYyMzkwMjJ9.signature-placeholder",
+    offlineReady: true,
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runJwtDecoder,
+};
diff --git a/src/tools/jwt-decoder/run.test.ts b/src/tools/jwt-decoder/run.test.ts
new file mode 100644
index 0000000..e738123
--- /dev/null
+++ b/src/tools/jwt-decoder/run.test.ts
@@ -0,0 +1,81 @@
+import { describe, it, expect, vi } from "vitest";
+import { runJwtDecoder } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("JWT Decoder Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  // {"alg":"HS256","typ":"JWT"} -> eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+  // {"sub":"123","name":"John Doe","iat":1516239022} -> eyJzdWIiOiIxMjMiLCJuYW1lIjoiSm9obiBEb2UiLCJpYXQiOjE1MTYyMzkwMjJ9
+  const validNoExp = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJuYW1lIjoiSm9obiBEb2UiLCJpYXQiOjE1MTYyMzkwMjJ9.sig";
+
+  // {"sub":"123","exp":32503680000} (Year 3000) -> eyJzdWIiOiIxMjMiLCJleHAiOjMyNTAzNjgwMDAwfQ
+  const futureExp = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJleHAiOjMyNTAzNjgwMDAwfQ.sig";
+
+  // {"sub":"123","exp":946684800} (Year 2000) -> eyJzdWIiOiIxMjMiLCJleHAiOjk0NjY4NDgwMH0
+  const expiredExp = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJleHAiOjk0NjY4NDgwMH0.sig";
+
+  it("should decode a valid JWT without exp claim", async () => {
+    const result = await runJwtDecoder({ text: validNoExp }, {}, mockContext);
+    expect(result.type).toBe("json");
+    if (result.type === "json") {
+      const data = result.value as any;
+      expect(data.status).toBe("valid");
+      expect(data.primary).toContain("Valid (No Expiration claim)");
+      expect(data.header.alg).toBe("HS256");
+      expect(data.payload.sub).toBe("123");
+      expect(data.issuedAt).toBe("2018-01-18T01:30:22.000Z");
+      expect(data.expiresAt).toBeNull();
+    }
+  });
+
+  it("should decode a valid JWT with future exp claim", async () => {
+    const result = await runJwtDecoder({ text: futureExp }, {}, mockContext);
+    expect(result.type).toBe("json");
+    if (result.type === "json") {
+      const data = result.value as any;
+      expect(data.status).toBe("valid");
+      expect(data.primary).toContain("Valid (Expires:");
+      expect(data.expiresAt).toBe("3000-01-01T00:00:00.000Z");
+    }
+  });
+
+  it("should decode an expired JWT with past exp claim", async () => {
+    const result = await runJwtDecoder({ text: expiredExp }, {}, mockContext);
+    expect(result.type).toBe("json");
+    if (result.type === "json") {
+      const data = result.value as any;
+      expect(data.status).toBe("expired");
+      expect(data.primary).toContain("Expired (at");
+      expect(data.expiresAt).toBe("2000-01-01T00:00:00.000Z");
+    }
+  });
+
+  it("should throw error for empty token", async () => {
+    await expect(
+      runJwtDecoder({ text: "" }, {}, mockContext)
+    ).rejects.toThrow("Please enter a JWT token to decode.");
+  });
+
+  it("should throw error for malformed token format", async () => {
+    await expect(
+      runJwtDecoder({ text: "one.two" }, {}, mockContext)
+    ).rejects.toThrow("A JWT must consist of three parts");
+  });
+
+  it("should throw error for invalid JSON payload", async () => {
+    // Header ok, payload invalid base64/json: "invalid" -> aW52YWxpZA==
+    const invalidJson = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.aW52YWxpZA.sig";
+    await expect(
+      runJwtDecoder({ text: invalidJson }, {}, mockContext)
+    ).rejects.toThrow("Failed to decode JWT Payload: invalid Base64URL encoding or malformed JSON content.");
+  });
+});
diff --git a/src/tools/jwt-decoder/run.ts b/src/tools/jwt-decoder/run.ts
new file mode 100644
index 0000000..b6ef8ac
--- /dev/null
+++ b/src/tools/jwt-decoder/run.ts
@@ -0,0 +1,92 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+function base64urlDecode(str: string): string {
+  const base64 = str.replace(/-/g, "+").replace(/_/g, "/");
+  const paddingNeeded = (4 - (base64.length % 4)) % 4;
+  const padded = base64 + "=".repeat(paddingNeeded);
+  
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new TextDecoder().decode(bytes);
+}
+
+export async function runJwtDecoder(
+  input: ToolInput,
+  _options: unknown,
+  context: ToolContext
+): Promise<ToolResult> {
+  const token = (input.text ?? "").trim();
+  if (!token) {
+    throw new Error("Please enter a JWT token to decode.");
+  }
+
+  context.reportProgress({ percentage: 20, message: "Parsing token parts..." });
+
+  const parts = token.split(".");
+  if (parts.length !== 3) {
+    throw new Error("Invalid JWT token format. A JWT must consist of three parts (header, payload, signature) separated by dots.");
+  }
+
+  const [headerB64, payloadB64, signatureHex] = parts;
+
+  context.reportProgress({ percentage: 50, message: "Decoding JSON content..." });
+
+  let header: Record<string, unknown>;
+  let payload: Record<string, unknown>;
+
+  try {
+    const decodedHeader = base64urlDecode(headerB64);
+    header = JSON.parse(decodedHeader);
+  } catch (err) {
+    throw new Error("Failed to decode JWT Header: invalid Base64URL encoding or malformed JSON content.");
+  }
+
+  try {
+    const decodedPayload = base64urlDecode(payloadB64);
+    payload = JSON.parse(decodedPayload);
+  } catch (err) {
+    throw new Error("Failed to decode JWT Payload: invalid Base64URL encoding or malformed JSON content.");
+  }
+
+  context.reportProgress({ percentage: 85, message: "Checking claims..." });
+
+  let expiresAt: string | null = null;
+  let issuedAt: string | null = null;
+  let status: "valid" | "expired" = "valid";
+  let primary = "Valid (No Expiration claim)";
+
+  if (typeof payload.exp === "number") {
+    const expTime = payload.exp * 1000;
+    expiresAt = new Date(expTime).toISOString();
+    if (Date.now() > expTime) {
+      status = "expired";
+      primary = `Expired (at ${expiresAt})`;
+    } else {
+      primary = `Valid (Expires: ${expiresAt})`;
+    }
+  }
+
+  if (typeof payload.iat === "number") {
+    issuedAt = new Date(payload.iat * 1000).toISOString();
+  }
+
+  context.reportProgress({ percentage: 100, message: "Done" });
+
+  return {
+    type: "json",
+    value: {
+      primary,
+      status,
+      expiresAt,
+      issuedAt,
+      header,
+      payload,
+      signature: signatureHex || "(empty)",
+    },
+  };
+}
diff --git a/src/tools/lorem-ipsum/index.ts b/src/tools/lorem-ipsum/index.ts
new file mode 100644
index 0000000..6273cae
--- /dev/null
+++ b/src/tools/lorem-ipsum/index.ts
@@ -0,0 +1,54 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runLoremIpsum } from "./run";
+
+export interface LoremIpsumOptions {
+  type: "paragraphs" | "sentences" | "words";
+  count: number;
+}
+
+export const loremIpsumPlugin: PlimiPlugin<LoremIpsumOptions> = {
+  manifest: {
+    id: "txt-lorem",
+    name: "Lorem Ipsum Generator",
+    description: "Generate placeholder text in paragraphs, sentences, or words.",
+    category: "text",
+    version: "1.0.0",
+    tags: ["lorem", "ipsum", "placeholder", "text"],
+    input: { type: "none" },
+    output: { type: "text" },
+    example: "Click 'Try example' to generate placeholder text.",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "type",
+        label: "Unit",
+        defaultValue: "paragraphs",
+        options: [
+          { label: "Paragraphs", value: "paragraphs" },
+          { label: "Sentences", value: "sentences" },
+          { label: "Words", value: "words" },
+        ],
+      },
+      {
+        type: "slider",
+        key: "count",
+        label: "Count",
+        defaultValue: 3,
+        min: 1,
+        max: 50,
+        step: 1,
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runLoremIpsum,
+};
diff --git a/src/tools/lorem-ipsum/run.test.ts b/src/tools/lorem-ipsum/run.test.ts
new file mode 100644
index 0000000..abb3e21
--- /dev/null
+++ b/src/tools/lorem-ipsum/run.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect, vi } from "vitest";
+import { runLoremIpsum } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { LoremIpsumOptions } from "./index";
+
+describe("Lorem Ipsum Generator", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should generate the requested number of words", async () => {
+    const result = await runLoremIpsum(
+      {},
+      { type: "words", count: 5 },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    const words = (result as { type: "text"; value: string }).value.split(" ");
+    expect(words).toHaveLength(5);
+    words.forEach((w) => expect(w.length).toBeGreaterThan(0));
+  });
+
+  it("should generate the requested number of sentences", async () => {
+    const result = await runLoremIpsum(
+      {},
+      { type: "sentences", count: 3 },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    const value = (result as { type: "text"; value: string }).value;
+    const sentences = value.split(". ").filter((s) => s.trim().length > 0);
+    expect(sentences).toHaveLength(3);
+  });
+
+  it("should generate the requested number of paragraphs", async () => {
+    const result = await runLoremIpsum(
+      {},
+      { type: "paragraphs", count: 4 },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    const value = (result as { type: "text"; value: string }).value;
+    const paragraphs = value.split("\n\n").filter((p) => p.trim().length > 0);
+    expect(paragraphs).toHaveLength(4);
+  });
+
+  it("should start sentences with a capital letter", async () => {
+    const result = await runLoremIpsum(
+      {},
+      { type: "sentences", count: 5 },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    const sentences = value.split(". ").filter((s) => s.trim().length > 0);
+    sentences.forEach((s) => {
+      const trimmed = s.trim();
+      expect(trimmed[0]).toBe(trimmed[0].toUpperCase());
+    });
+  });
+
+  it("should end sentences with a period", async () => {
+    const result = await runLoremIpsum(
+      {},
+      { type: "sentences", count: 3 },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value.endsWith(".")).toBe(true);
+  });
+
+  it("should default to paragraphs when type is unrecognized", async () => {
+    const result = await runLoremIpsum(
+      {},
+      { type: "unknown", count: 2 } as unknown as LoremIpsumOptions,
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value.length).toBeGreaterThan(0);
+  });
+});
diff --git a/src/tools/lorem-ipsum/run.ts b/src/tools/lorem-ipsum/run.ts
new file mode 100644
index 0000000..a8ae9f3
--- /dev/null
+++ b/src/tools/lorem-ipsum/run.ts
@@ -0,0 +1,89 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { LoremIpsumOptions } from "./index";
+
+const LOREM_WORDS = [
+  "lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit",
+  "sed", "do", "eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore",
+  "magna", "aliqua", "enim", "ad", "minim", "veniam", "quis", "nostrud",
+  "exercitation", "ullamco", "laboris", "nisi", "aliquip", "ex", "ea", "commodo",
+  "consequat", "duis", "aute", "irure", "in", "reprehenderit", "voluptate",
+  "velit", "esse", "cillum", "fugiat", "nulla", "pariatur", "excepteur", "sint",
+  "occaecat", "cupidatat", "non", "proident", "sunt", "culpa", "qui", "officia",
+  "deserunt", "mollit", "anim", "id", "est", "laborum", "perspiciatis", "unde",
+  "omnis", "iste", "natus", "error", "voluptatem", "accusantium", "doloremque",
+  "laudantium", "totam", "rem", "aperiam", "eaque", "ipsa", "quae", "ab", "illo",
+  "inventore", "veritatis", "quasi", "architecto", "beatae", "vitae", "dicta",
+  "explicabo", "nemo", "ipsam", "quia", "voluptas", "aspernatur", "aut", "odit",
+  "fugit", "consequuntur", "magni", "dolores", "eos", "ratione", "sequi", "nesciunt",
+];
+
+function randomWord(): string {
+  return LOREM_WORDS[Math.floor(Math.random() * LOREM_WORDS.length)];
+}
+
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function generateSentence(wordCount: number): string {
+  const count = wordCount || (Math.floor(Math.random() * 10) + 6);
+  const words: string[] = [];
+  for (let i = 0; i < count; i++) {
+    words.push(randomWord());
+  }
+  words[0] = capitalize(words[0]);
+  return words.join(" ") + ".";
+}
+
+function generateParagraph(sentenceCount: number): string {
+  const count = sentenceCount || (Math.floor(Math.random() * 4) + 4);
+  const sentences: string[] = [];
+  for (let i = 0; i < count; i++) {
+    sentences.push(generateSentence(0));
+  }
+  return sentences.join(" ");
+}
+
+export async function runLoremIpsum(
+  _input: ToolInput,
+  options: LoremIpsumOptions,
+  context?: ToolContext
+): Promise<ToolResult> {
+  void context;
+
+  const count = options.count || 3;
+
+  const result = (() => {
+    switch (options.type) {
+    case "words": {
+      const words: string[] = [];
+      for (let i = 0; i < count; i++) {
+        words.push(randomWord());
+      }
+      return words.join(" ");
+    }
+    case "sentences": {
+      const sentences: string[] = [];
+      for (let i = 0; i < count; i++) {
+        sentences.push(generateSentence(0));
+      }
+      return sentences.join(" ");
+    }
+    case "paragraphs":
+    default: {
+      const paragraphs: string[] = [];
+      for (let i = 0; i < count; i++) {
+        paragraphs.push(generateParagraph(0));
+      }
+      return paragraphs.join("\n\n");
+    }
+    }
+  })();
+
+  return {
+    type: "text",
+    value: result,
+  };
+}
diff --git a/src/tools/markdown-to-html/index.ts b/src/tools/markdown-to-html/index.ts
new file mode 100644
index 0000000..e636e82
--- /dev/null
+++ b/src/tools/markdown-to-html/index.ts
@@ -0,0 +1,32 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runMarkdownToHtml } from "./run";
+
+export interface MarkdownToHtmlOptions {
+  headingStyle?: "atx" | "setext";
+}
+
+export const markdownToHtmlPlugin: PlimiPlugin<MarkdownToHtmlOptions> = {
+  manifest: {
+    id: "txt-markdown",
+    name: "Markdown to HTML",
+    description: "Convert Markdown text to raw HTML without sending anything to a server.",
+    category: "text",
+    version: "1.0.0",
+    tags: ["markdown", "html", "convert", "md"],
+    input: { type: "text", placeholder: "Type or paste Markdown here..." },
+    output: { type: "text" },
+    example: "# Hello World\n\nThis is **bold** and *italic*.\n\n- Item 1\n- Item 2\n\n[Visit Plimi](https://plimi.app)",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runMarkdownToHtml,
+};
diff --git a/src/tools/markdown-to-html/run.test.ts b/src/tools/markdown-to-html/run.test.ts
new file mode 100644
index 0000000..6dcdf61
--- /dev/null
+++ b/src/tools/markdown-to-html/run.test.ts
@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from "vitest";
+import { runMarkdownToHtml } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Markdown to HTML Converter", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should convert headings h1, h2, h3", async () => {
+    const result = await runMarkdownToHtml(
+      { text: "# Hello\n## World\n### Sub" },
+      {},
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("<h1>Hello</h1>");
+    expect(value).toContain("<h2>World</h2>");
+    expect(value).toContain("<h3>Sub</h3>");
+  });
+
+  it("should convert bold and italic text", async () => {
+    const result = await runMarkdownToHtml(
+      { text: "This is **bold** and *italic* and ***both***" },
+      {},
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("<strong>bold</strong>");
+    expect(value).toContain("<em>italic</em>");
+    expect(value).toContain("<strong><em>both</em></strong>");
+  });
+
+  it("should convert inline code", async () => {
+    const result = await runMarkdownToHtml(
+      { text: "Use `console.log` to debug" },
+      {},
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("<code>console.log</code>");
+  });
+
+  it("should convert links", async () => {
+    const result = await runMarkdownToHtml(
+      { text: "Visit [Google](https://google.com)" },
+      {},
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain('<a href="https://google.com">Google</a>');
+  });
+
+  it("should convert images", async () => {
+    const result = await runMarkdownToHtml(
+      { text: "![Alt text](image.png)" },
+      {},
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain('<img src="image.png" alt="Alt text">');
+  });
+
+  it("should convert horizontal rules", async () => {
+    const result = await runMarkdownToHtml(
+      { text: "Above\n---\nBelow" },
+      {},
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("<hr>");
+  });
+
+  it("should convert unordered lists", async () => {
+    const result = await runMarkdownToHtml(
+      { text: "- item 1\n- item 2\n- item 3" },
+      {},
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("<ul>");
+    expect(value).toContain("<li>item 1</li>");
+    expect(value).toContain("<li>item 2</li>");
+    expect(value).toContain("<li>item 3</li>");
+    expect(value).toContain("</ul>");
+  });
+
+  it("should convert strikethrough", async () => {
+    const result = await runMarkdownToHtml(
+      { text: "This is ~~deleted~~ text" },
+      {},
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("<del>deleted</del>");
+  });
+
+  it("should throw on empty input", async () => {
+    await expect(
+      runMarkdownToHtml({ text: "" }, {}, mockContext)
+    ).rejects.toThrow("No Markdown text provided");
+  });
+});
diff --git a/src/tools/markdown-to-html/run.ts b/src/tools/markdown-to-html/run.ts
new file mode 100644
index 0000000..b1101bc
--- /dev/null
+++ b/src/tools/markdown-to-html/run.ts
@@ -0,0 +1,65 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { MarkdownToHtmlOptions } from "./index";
+
+function convertMarkdown(md: string): string {
+  let html = md;
+
+  html = html.replace(/^### (.+)$/gm, "<h3>$1</h3>");
+  html = html.replace(/^## (.+)$/gm, "<h2>$1</h2>");
+  html = html.replace(/^# (.+)$/gm, "<h1>$1</h1>");
+
+  html = html.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  html = html.replace(/~~(.+?)~~/g, "<del>$1</del>");
+
+  html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+
+  html = html.replace(/!\[([^\]]*)\]$([^)]+)$/g, '<img src="$2" alt="$1">');
+
+  html = html.replace(/\[([^\]]+)\]$([^)]+)$/g, '<a href="$2">$1</a>');
+
+  html = html.replace(/^>\s(.+)$/gm, "<blockquote>$1</blockquote>");
+
+  html = html.replace(/^---$/gm, "<hr>");
+
+  html = html.replace(/^\s*[-*+]\s(.+)$/gm, "<li>$1</li>");
+  html = html.replace(/(<li>.*<\/li>\n?)+/g, (match) => `<ul>\n${match}</ul>\n`);
+
+  html = html.replace(/^\s*\d+\.\s(.+)$/gm, "<li>$1</li>");
+
+  html = html.replace(/\n{2,}/g, "\n</p>\n<p>\n");
+  html = `<p>${html}</p>`;
+
+  html = html.replace(/<p>\s*<(h[1-6]|ul|ol|blockquote|hr)/g, "<$1");
+  html = html.replace(/<\/(h[1-6]|ul|ol|blockquote|hr)>\s*<\/p>/g, "</$1>");
+
+  html = html.replace(/<p>\s*<\/p>/g, "");
+
+  return html.trim();
+}
+
+export async function runMarkdownToHtml(
+  input: ToolInput,
+  _options: MarkdownToHtmlOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  const text = input.text || "";
+  if (!text.trim()) {
+    throw new Error("No Markdown text provided.");
+  }
+
+  context.reportProgress({ percentage: 50, message: "Converting..." });
+
+  const html = convertMarkdown(text);
+
+  context.reportProgress({ percentage: 100, message: "Done" });
+
+  return {
+    type: "text",
+    value: html,
+    language: "html",
+  };
+}
diff --git a/src/tools/number-base/index.ts b/src/tools/number-base/index.ts
new file mode 100644
index 0000000..6e3e597
--- /dev/null
+++ b/src/tools/number-base/index.ts
@@ -0,0 +1,58 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runNumberBase } from "./run";
+
+export interface NumberBaseOptions {
+  fromBase: "2" | "8" | "10" | "16";
+  toBase: "2" | "8" | "10" | "16";
+}
+
+export const numberBasePlugin: PlimiPlugin<NumberBaseOptions> = {
+  manifest: {
+    id: "dev-numbase",
+    name: "Number Base Converter",
+    description: "Convert numbers between binary, octal, decimal, and hexadecimal.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["number", "binary", "hex", "decimal", "octal", "base"],
+    input: { type: "text", placeholder: "Enter a number...", multiline: false },
+    output: { type: "json" },
+    example: "255",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "fromBase",
+        label: "From Base",
+        defaultValue: "10",
+        options: [
+          { label: "Binary (2)", value: "2" },
+          { label: "Octal (8)", value: "8" },
+          { label: "Decimal (10)", value: "10" },
+          { label: "Hexadecimal (16)", value: "16" },
+        ],
+      },
+      {
+        type: "select",
+        key: "toBase",
+        label: "To Base",
+        defaultValue: "16",
+        options: [
+          { label: "Binary (2)", value: "2" },
+          { label: "Octal (8)", value: "8" },
+          { label: "Decimal (10)", value: "10" },
+          { label: "Hexadecimal (16)", value: "16" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runNumberBase,
+};
diff --git a/src/tools/number-base/run.test.ts b/src/tools/number-base/run.test.ts
new file mode 100644
index 0000000..f2f009c
--- /dev/null
+++ b/src/tools/number-base/run.test.ts
@@ -0,0 +1,102 @@
+import { describe, it, expect, vi } from "vitest";
+import { runNumberBase } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Number Base Converter", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should convert decimal to hexadecimal", async () => {
+    const result = await runNumberBase(
+      { text: "255" },
+      { fromBase: "10", toBase: "16" },
+      mockContext
+    );
+    expect(result.type).toBe("json");
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.decimal).toBe("255");
+    expect(value.hexadecimal).toBe("0xFF");
+    expect(value.primary).toBe("0xFF");
+  });
+
+  it("should convert hexadecimal to decimal", async () => {
+    const result = await runNumberBase(
+      { text: "0xFF" },
+      { fromBase: "16", toBase: "10" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.decimal).toBe("255");
+    expect(value.primary).toBe("255");
+  });
+
+  it("should convert decimal to binary", async () => {
+    const result = await runNumberBase(
+      { text: "10" },
+      { fromBase: "10", toBase: "2" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.binary).toBe("0b1010");
+    expect(value.primary).toBe("0b1010");
+  });
+
+  it("should convert binary to decimal", async () => {
+    const result = await runNumberBase(
+      { text: "1010" },
+      { fromBase: "2", toBase: "10" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.decimal).toBe("10");
+  });
+
+  it("should convert decimal to octal", async () => {
+    const result = await runNumberBase(
+      { text: "64" },
+      { fromBase: "10", toBase: "8" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.octal).toBe("0o100");
+  });
+
+  it("should return all base representations in every conversion", async () => {
+    const result = await runNumberBase(
+      { text: "42" },
+      { fromBase: "10", toBase: "16" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.binary).toBeDefined();
+    expect(value.octal).toBeDefined();
+    expect(value.decimal).toBeDefined();
+    expect(value.hexadecimal).toBeDefined();
+  });
+
+  it("should throw on empty input", async () => {
+    await expect(
+      runNumberBase({ text: "" }, { fromBase: "10", toBase: "16" }, mockContext)
+    ).rejects.toThrow("No number provided");
+  });
+
+  it("should throw on invalid number for given base", async () => {
+    await expect(
+      runNumberBase({ text: "xyz" }, { fromBase: "10", toBase: "16" }, mockContext)
+    ).rejects.toThrow();
+  });
+
+  it("should handle zero", async () => {
+    const result = await runNumberBase(
+      { text: "0" },
+      { fromBase: "10", toBase: "2" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.decimal).toBe("0");
+    expect(value.binary).toBe("0b0");
+  });
+});
diff --git a/src/tools/number-base/run.ts b/src/tools/number-base/run.ts
new file mode 100644
index 0000000..2ff4337
--- /dev/null
+++ b/src/tools/number-base/run.ts
@@ -0,0 +1,53 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { NumberBaseOptions } from "./index";
+
+function formatNumber(value: bigint, base: number): string {
+  if (base === 2) return "0b" + value.toString(2);
+  if (base === 8) return "0o" + value.toString(8);
+  if (base === 10) return value.toString(10);
+  if (base === 16) return "0x" + value.toString(16).toUpperCase();
+  return value.toString(base);
+}
+
+export async function runNumberBase(
+  input: ToolInput,
+  options: NumberBaseOptions,
+  context?: ToolContext
+): Promise<ToolResult> {
+  void context;
+
+  const text = (input.text || "").trim();
+  if (!text) {
+    throw new Error("No number provided.");
+  }
+
+  const fromBase = parseInt(options.fromBase, 10);
+  const toBase = parseInt(options.toBase, 10);
+
+  const cleaned = text.replace(/^0[box]/i, "");
+
+  let value: bigint;
+  try {
+    value = BigInt(parseInt(cleaned, fromBase));
+  } catch {
+    throw new Error(`Invalid number "${text}" for base ${fromBase}.`);
+  }
+
+  if (isNaN(Number(value))) {
+    throw new Error(`Invalid number "${text}" for base ${fromBase}.`);
+  }
+
+  return {
+    type: "json",
+    value: {
+      input: text,
+      binary: formatNumber(value, 2),
+      octal: formatNumber(value, 8),
+      decimal: formatNumber(value, 10),
+      hexadecimal: formatNumber(value, 16),
+      primary: formatNumber(value, toBase),
+    },
+  };
+}
diff --git a/src/tools/password-generator/index.ts b/src/tools/password-generator/index.ts
new file mode 100644
index 0000000..21604dc
--- /dev/null
+++ b/src/tools/password-generator/index.ts
@@ -0,0 +1,97 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runPasswordGenerator } from "./run";
+
+export interface PasswordGeneratorOptions {
+  mode: "password" | "passphrase";
+  length: number;
+  uppercase: boolean;
+  lowercase: boolean;
+  numbers: boolean;
+  symbols: boolean;
+  excludeAmbiguous: boolean;
+  count: number;
+}
+
+export const passwordGeneratorPlugin: PlimiPlugin<PasswordGeneratorOptions> = {
+  manifest: {
+    id: "password-generator",
+    name: "Password & Passphrase Generator",
+    description: "Generate highly secure, random passwords or word-based passphrases locally in your browser.",
+    category: "crypto",
+    version: "1.0.0",
+    tags: ["password", "passphrase", "security", "generator", "random"],
+    input: { type: "none" },
+    output: { type: "table" },
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "mode",
+        label: "Mode",
+        defaultValue: "password",
+        options: [
+          { label: "Random Password", value: "password" },
+          { label: "Word Passphrase", value: "passphrase" },
+        ],
+      },
+      {
+        type: "slider",
+        key: "length",
+        label: "Password Length / Word Count",
+        defaultValue: 16,
+        min: 6,
+        max: 64,
+        step: 1,
+      },
+      {
+        type: "boolean",
+        key: "uppercase",
+        label: "Include Uppercase Letters (A-Z)",
+        defaultValue: true,
+      },
+      {
+        type: "boolean",
+        key: "lowercase",
+        label: "Include Lowercase Letters (a-z)",
+        defaultValue: true,
+      },
+      {
+        type: "boolean",
+        key: "numbers",
+        label: "Include Numbers (0-9)",
+        defaultValue: true,
+      },
+      {
+        type: "boolean",
+        key: "symbols",
+        label: "Include Symbols (!@#$%^&*)",
+        defaultValue: true,
+      },
+      {
+        type: "boolean",
+        key: "excludeAmbiguous",
+        label: "Exclude Ambiguous Characters (e.g. l, 1, I, o, 0, O)",
+        defaultValue: false,
+      },
+      {
+        type: "slider",
+        key: "count",
+        label: "Quantity to Generate",
+        defaultValue: 5,
+        min: 1,
+        max: 20,
+        step: 1,
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runPasswordGenerator,
+};
diff --git a/src/tools/password-generator/run.test.ts b/src/tools/password-generator/run.test.ts
new file mode 100644
index 0000000..ccf5ac1
--- /dev/null
+++ b/src/tools/password-generator/run.test.ts
@@ -0,0 +1,124 @@
+import { describe, it, expect, vi } from "vitest";
+import { runPasswordGenerator } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Password & Passphrase Generator Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  const defaultOpts = {
+    mode: "password" as const,
+    length: 16,
+    uppercase: true,
+    lowercase: true,
+    numbers: true,
+    symbols: true,
+    excludeAmbiguous: false,
+    count: 5,
+  };
+
+  it("should generate the requested quantity of passwords", async () => {
+    const result = await runPasswordGenerator({}, defaultOpts, mockContext);
+    expect(result.type).toBe("table");
+    if (result.type === "table") {
+      expect(result.columns).toEqual(["Password", "Length", "Entropy (bits)"]);
+      expect(result.rows).toHaveLength(5);
+      expect(result.rows[0][0]).toBeTypeOf("string");
+      expect(result.rows[0][1]).toBe(16);
+      expect(result.rows[0][2]).toContain("bits");
+    }
+  });
+
+  it("should enforce selected character rules", async () => {
+    // Generate only numbers
+    const result = await runPasswordGenerator(
+      {},
+      {
+        ...defaultOpts,
+        uppercase: false,
+        lowercase: false,
+        numbers: true,
+        symbols: false,
+      },
+      mockContext
+    );
+    if (result.type === "table") {
+      result.rows.forEach(row => {
+        const password = String(row[0]);
+        expect(password).toMatch(/^[0-9]+$/);
+      });
+    }
+  });
+
+  it("should exclude ambiguous characters", async () => {
+    const result = await runPasswordGenerator(
+      {},
+      {
+        ...defaultOpts,
+        uppercase: true,
+        lowercase: true,
+        numbers: true,
+        symbols: false,
+        excludeAmbiguous: true,
+        count: 20, // larger sample size
+      },
+      mockContext
+    );
+    if (result.type === "table") {
+      result.rows.forEach(row => {
+        const password = String(row[0]);
+        // Ambiguous characters list: l, 1, I, o, 0, O
+        expect(password).not.toContain("l");
+        expect(password).not.toContain("1");
+        expect(password).not.toContain("I");
+        expect(password).not.toContain("o");
+        expect(password).not.toContain("0");
+        expect(password).not.toContain("O");
+      });
+    }
+  });
+
+  it("should generate correct passphrase count and word length", async () => {
+    const result = await runPasswordGenerator(
+      {},
+      {
+        ...defaultOpts,
+        mode: "passphrase",
+        length: 6, // 6 words
+        count: 3,
+      },
+      mockContext
+    );
+    expect(result.type).toBe("table");
+    if (result.type === "table") {
+      expect(result.columns).toEqual(["Passphrase", "Length (chars)", "Entropy (bits)"]);
+      expect(result.rows).toHaveLength(3);
+      const passphrase = String(result.rows[0][0]);
+      const words = passphrase.split("-");
+      expect(words).toHaveLength(6);
+    }
+  });
+
+  it("should throw error if all character classes are disabled", async () => {
+    await expect(
+      runPasswordGenerator(
+        {},
+        {
+          ...defaultOpts,
+          uppercase: false,
+          lowercase: false,
+          numbers: false,
+          symbols: false,
+        },
+        mockContext
+      )
+    ).rejects.toThrow("Please select at least one character set");
+  });
+});
diff --git a/src/tools/password-generator/run.ts b/src/tools/password-generator/run.ts
new file mode 100644
index 0000000..97ba164
--- /dev/null
+++ b/src/tools/password-generator/run.ts
@@ -0,0 +1,146 @@
+import { PASSPHRASE_WORDS } from "./words";
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { PasswordGeneratorOptions } from "./index";
+
+function secureRandomInt(max: number): number {
+  const arr = new Uint32Array(1);
+  // Ensure we don't introduce modulo bias for small numbers
+  // max is pool size which is typically small (< 100), so standard modulo is perfectly safe in practice.
+  crypto.getRandomValues(arr);
+  return arr[0] % max;
+}
+
+function secureShuffle(arr: string[]): string[] {
+  const result = [...arr];
+  const rand = new Uint32Array(result.length);
+  crypto.getRandomValues(rand);
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = rand[i] % (i + 1);
+    const temp = result[i];
+    result[i] = result[j];
+    result[j] = temp;
+  }
+  return result;
+}
+
+export async function runPasswordGenerator(
+  _input: ToolInput,
+  options: PasswordGeneratorOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  const {
+    mode,
+    length,
+    uppercase,
+    lowercase,
+    numbers,
+    symbols,
+    excludeAmbiguous,
+    count,
+  } = options;
+
+  const qty = count || 5;
+
+  if (mode === "passphrase") {
+    context.reportProgress({ percentage: 20, message: "Generating passphrases..." });
+    
+    const rows: Array<[string, number, string]> = [];
+    const wordlistSize = PASSPHRASE_WORDS.length;
+    // log2(250) is ~7.96578
+    const entropyPerWord = Math.log2(wordlistSize);
+    const totalEntropy = Math.round(length * entropyPerWord * 10) / 10;
+
+    for (let i = 0; i < qty; i++) {
+      const words: string[] = [];
+      for (let j = 0; j < length; j++) {
+        const idx = secureRandomInt(wordlistSize);
+        words.push(PASSPHRASE_WORDS[idx]);
+      }
+      const passphrase = words.join("-");
+      rows.push([passphrase, passphrase.length, `${totalEntropy} bits`]);
+    }
+
+    context.reportProgress({ percentage: 100, message: "Done" });
+    return {
+      type: "table",
+      columns: ["Passphrase", "Length (chars)", "Entropy (bits)"],
+      rows,
+    };
+  } else {
+    // Password mode
+    context.reportProgress({ percentage: 20, message: "Building character pools..." });
+
+    let uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    let lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
+    let numberChars = "0123456789";
+    let symbolChars = "!@#$%^&*()_+-=[]{}|;:,.<>?";
+
+    if (excludeAmbiguous) {
+      const ambiguous = /[l1Io0O]/g;
+      uppercaseChars = uppercaseChars.replace(ambiguous, "");
+      lowercaseChars = lowercaseChars.replace(ambiguous, "");
+      numberChars = numberChars.replace(ambiguous, "");
+      // Also remove |, :, ; etc. from symbols if they are considered ambiguous,
+      // but standard is to remove characters resembling each other: l, 1, I, o, 0, O, etc.
+    }
+
+    const pools: string[] = [];
+    if (uppercase) pools.push(uppercaseChars);
+    if (lowercase) pools.push(lowercaseChars);
+    if (numbers) pools.push(numberChars);
+    if (symbols) pools.push(symbolChars);
+
+    if (pools.length === 0) {
+      throw new Error("Invalid options: Please select at least one character set (Uppercase, Lowercase, Numbers, or Symbols) to generate passwords.");
+    }
+
+    const fullPool = pools.join("");
+    const poolSize = fullPool.length;
+    const entropyPerChar = Math.log2(poolSize);
+    const totalEntropy = Math.round(length * entropyPerChar * 10) / 10;
+
+    context.reportProgress({ percentage: 50, message: "Generating random passwords..." });
+
+    const rows: Array<[string, number, string]> = [];
+
+    for (let i = 0; i < qty; i++) {
+      const passwordChars: string[] = [];
+
+      // Guarantee at least one character from each selected character class
+      // if password length permits it
+      if (length >= pools.length) {
+        pools.forEach(pool => {
+          const idx = secureRandomInt(pool.length);
+          passwordChars.push(pool[idx]);
+        });
+
+        // Fill remaining length
+        const remainingLength = length - pools.length;
+        for (let j = 0; j < remainingLength; j++) {
+          const idx = secureRandomInt(poolSize);
+          passwordChars.push(fullPool[idx]);
+        }
+
+        // Shuffle securely to mix the guaranteed characters
+        const shuffled = secureShuffle(passwordChars);
+        rows.push([shuffled.join(""), length, `${totalEntropy} bits`]);
+      } else {
+        // Fallback for short length: pick entirely randomly from combined pool
+        for (let j = 0; j < length; j++) {
+          const idx = secureRandomInt(poolSize);
+          passwordChars.push(fullPool[idx]);
+        }
+        rows.push([passwordChars.join(""), length, `${totalEntropy} bits`]);
+      }
+    }
+
+    context.reportProgress({ percentage: 100, message: "Done" });
+    return {
+      type: "table",
+      columns: ["Password", "Length", "Entropy (bits)"],
+      rows,
+    };
+  }
+}
diff --git a/src/tools/password-generator/words.ts b/src/tools/password-generator/words.ts
new file mode 100644
index 0000000..377fca5
--- /dev/null
+++ b/src/tools/password-generator/words.ts
@@ -0,0 +1,30 @@
+export const PASSPHRASE_WORDS = [
+  "actor", "agree", "album", "alert", "apple", "armor", "arrow", "badge", "baker", "beach",
+  "beast", "berry", "blend", "block", "board", "brain", "brave", "brick", "bride", "brown",
+  "brush", "cabin", "cable", "camel", "cargo", "chain", "chair", "chalk", "charm", "chart",
+  "chief", "child", "clock", "clown", "coach", "coast", "cream", "crown", "cycle", "dance",
+  "depth", "diary", "draft", "drama", "dream", "dress", "drift", "drill", "drink", "earth",
+  "elbow", "empty", "entry", "equal", "event", "faith", "fancy", "feast", "fiber", "field",
+  "flame", "flash", "flute", "focus", "forest", "frame", "frost", "fruit", "giant", "glass",
+  "globe", "glove", "grace", "grand", "grape", "grass", "green", "group", "guard", "guide",
+  "habit", "heart", "heavy", "honey", "horse", "hotel", "house", "image", "index", "irony",
+  "ivory", "jeans", "joint", "judge", "juice", "knife", "labor", "lemon", "light", "limit",
+  "lunch", "magic", "major", "maple", "march", "match", "metal", "model", "money", "motor",
+  "mount", "mouse", "mouth", "music", "night", "noise", "north", "novel", "nurse", "ocean",
+  "onion", "order", "organ", "owner", "paint", "paper", "party", "patch", "peach", "pearl",
+  "pedal", "piano", "pilot", "pitch", "pizza", "plant", "plate", "poem", "poet", "point",
+  "pound", "power", "press", "price", "pride", "prize", "proud", "pulse", "queen", "quick",
+  "quiet", "radio", "rainy", "range", "ratio", "reply", "river", "rough", "round", "route",
+  "royal", "rugby", "ruler", "salad", "scale", "scene", "scent", "score", "scout", "shade",
+  "shadow", "shark", "sharp", "sheep", "shelf", "shell", "shirt", "shock", "shore", "sight",
+  "silk", "silver", "skate", "skill", "skirt", "slate", "sleep", "slice", "slide", "slope",
+  "smart", "smile", "smoke", "snake", "solid", "sound", "south", "space", "speak", "speed",
+  "spend", "spice", "spider", "spill", "spine", "spoon", "sport", "stage", "stamp", "stand",
+  "stare", "start", "state", "steam", "steel", "steer", "stick", "still", "stone", "store",
+  "storm", "story", "strap", "straw", "strip", "study", "sugar", "suite", "sunny", "super",
+  "sweet", "swift", "swing", "table", "tiger", "title", "toast", "token", "topic", "torch",
+  "tower", "track", "trade", "train", "trash", "trend", "trial", "truck", "truth", "tulip",
+  "uncle", "union", "unity", "value", "vapor", "vault", "venue", "voice", "vowel", "wagon",
+  "waste", "watch", "water", "wheel", "white", "width", "windy", "witch", "woman", "world",
+  "wrist", "write", "yeast", "young", "zebra", "zones"
+];
diff --git a/src/tools/pdf-merger/index.ts b/src/tools/pdf-merger/index.ts
new file mode 100644
index 0000000..bed5f33
--- /dev/null
+++ b/src/tools/pdf-merger/index.ts
@@ -0,0 +1,30 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runPdfMerger } from "./run";
+import PdfWorker from "./worker?worker";
+
+export const pdfMergerPlugin: PlimiPlugin = {
+  manifest: {
+    id: "pdf-merger",
+    name: "PDF Merger",
+    description:
+      "Merge multiple PDF files securely in your browser. Large files will not freeze your UI.",
+    category: "pdf",
+    version: "1.0.0",
+    tags: ["pdf", "merge", "join"],
+    input: {
+      type: "files",
+      accept: ["application/pdf"],
+      multiple: true,
+    },
+    output: { type: "files" },
+    offlineReady: true,
+  },
+
+  capabilities: {
+    cancelable: true,
+    worker: true,
+  },
+
+  run: runPdfMerger,
+  worker: () => new PdfWorker(),
+};
diff --git a/src/tools/pdf-merger/run.test.ts b/src/tools/pdf-merger/run.test.ts
new file mode 100644
index 0000000..f3248c4
--- /dev/null
+++ b/src/tools/pdf-merger/run.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect, vi } from "vitest";
+import { pdfMergerPlugin } from "./index";
+import { runPdfMerger } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("PDF Merger Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  it("should have correct manifest", () => {
+    expect(pdfMergerPlugin.manifest.id).toBe("pdf-merger");
+    expect(pdfMergerPlugin.manifest.input.type).toBe("files");
+    expect(pdfMergerPlugin.manifest.output.type).toBe("files");
+  });
+
+  it("should have run function", () => {
+    expect(pdfMergerPlugin.run).toBeDefined();
+  });
+
+  it("should throw error if no files provided", async () => {
+    await expect(
+      runPdfMerger({ files: [] }, {}, mockContext)
+    ).rejects.toThrow("No files provided for merging.");
+  });
+});
diff --git a/src/tools/pdf-merger/run.ts b/src/tools/pdf-merger/run.ts
new file mode 100644
index 0000000..335b912
--- /dev/null
+++ b/src/tools/pdf-merger/run.ts
@@ -0,0 +1,62 @@
+import { PDFDocument } from "pdf-lib";
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+export async function runPdfMerger(
+  input: ToolInput,
+  _options: unknown,
+  context: ToolContext
+): Promise<ToolResult> {
+  const files = input.files;
+
+  if (!files || !Array.isArray(files) || files.length === 0) {
+    throw new Error("No files provided for merging.");
+  }
+
+  try {
+    const mergedPdf = await PDFDocument.create();
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+
+      context.reportProgress({
+        percentage: (i / files.length) * 100,
+        message: `Merging ${file.name} (${i + 1}/${files.length})...`,
+      });
+
+      const fileBuffer = await file.arrayBuffer();
+      const pdfDoc = await PDFDocument.load(new Uint8Array(fileBuffer));
+
+      const copiedPages = await mergedPdf.copyPages(
+        pdfDoc,
+        pdfDoc.getPageIndices()
+      );
+      copiedPages.forEach((page) => mergedPdf.addPage(page));
+    }
+
+    context.reportProgress({
+      percentage: 100,
+      message: "Finalizing PDF...",
+    });
+
+    const mergedPdfBytes = await mergedPdf.save();
+    // TS DOM lib workaround for Uint8Array
+    const blob = new Blob([mergedPdfBytes as unknown as BlobPart], { type: "application/pdf" });
+
+    return {
+      type: "files",
+      files: [
+        {
+          name: "merged_document.pdf",
+          mimeType: "application/pdf",
+          blob: blob,
+          sizeAfter: blob.size,
+        },
+      ],
+    };
+  } catch (error) {
+    console.error("PDF Merge Error:", error);
+    throw error instanceof Error ? error : new Error("Unknown error occurred during PDF merging");
+  }
+}
diff --git a/src/tools/pdf-merger/worker.ts b/src/tools/pdf-merger/worker.ts
new file mode 100644
index 0000000..9071cab
--- /dev/null
+++ b/src/tools/pdf-merger/worker.ts
@@ -0,0 +1,87 @@
+import { PDFDocument } from "pdf-lib";
+import type {
+  ToolWorkerRequest,
+  ToolWorkerResponse,
+} from "../../core/plugins/worker-protocol";
+
+function post(response: ToolWorkerResponse) {
+  self.postMessage(response);
+}
+
+self.addEventListener("message", async (e: MessageEvent<ToolWorkerRequest>) => {
+  const { id, input } = e.data;
+  const files = input.files;
+
+  if (!files || !Array.isArray(files) || files.length === 0) {
+    post({
+      type: "error",
+      id,
+      error: "No files provided for merging.",
+    });
+    return;
+  }
+
+  try {
+    const mergedPdf = await PDFDocument.create();
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+
+      post({
+        type: "progress",
+        id,
+        progress: {
+          percentage: (i / files.length) * 100,
+          message: `Merging ${file.name} (${i + 1}/${files.length})...`,
+        },
+      });
+
+      const fileBuffer = await file.arrayBuffer();
+      const pdfDoc = await PDFDocument.load(new Uint8Array(fileBuffer));
+      const copiedPages = await mergedPdf.copyPages(
+        pdfDoc,
+        pdfDoc.getPageIndices()
+      );
+      copiedPages.forEach((page) => mergedPdf.addPage(page));
+    }
+
+    post({
+      type: "progress",
+      id,
+      progress: {
+        percentage: 100,
+        message: "Finalizing PDF...",
+      },
+    });
+
+    const mergedPdfBytes = await mergedPdf.save();
+    const blob = new Blob([mergedPdfBytes as unknown as BlobPart], {
+      type: "application/pdf",
+    });
+
+    post({
+      type: "success",
+      id,
+      result: {
+        type: "files",
+        files: [
+          {
+            name: "merged_document.pdf",
+            mimeType: "application/pdf",
+            blob,
+            sizeAfter: blob.size,
+          },
+        ],
+      },
+    });
+  } catch (error) {
+    post({
+      type: "error",
+      id,
+      error:
+        error instanceof Error
+          ? error.message
+          : "Unknown error occurred during PDF merging",
+    });
+  }
+});
diff --git a/src/tools/pdf-splitter/index.ts b/src/tools/pdf-splitter/index.ts
new file mode 100644
index 0000000..b1b7709
--- /dev/null
+++ b/src/tools/pdf-splitter/index.ts
@@ -0,0 +1,54 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runPdfSplitter } from "./run";
+
+export interface PdfSplitterOptions {
+  splitMode: "extract" | "burst";
+  pageRange: string;
+}
+
+export const pdfSplitterPlugin: PlimiPlugin<PdfSplitterOptions> = {
+  manifest: {
+    id: "pdf-splitter",
+    name: "PDF Splitter",
+    description: "Extract page ranges or split a PDF document into individual pages safely in your browser.",
+    category: "pdf",
+    version: "1.0.0",
+    tags: ["pdf", "split", "extract", "pages"],
+    input: {
+      type: "files",
+      accept: ["application/pdf"],
+      multiple: false,
+    },
+    output: { type: "files" },
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "splitMode",
+        label: "Split Mode",
+        defaultValue: "extract",
+        options: [
+          { label: "Extract Range", value: "extract" },
+          { label: "Split Every Page", value: "burst" },
+        ],
+      },
+      {
+        type: "text",
+        key: "pageRange",
+        label: "Page Range",
+        defaultValue: "1",
+        placeholder: "e.g. 1-3, 5 (for Extract mode)",
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: true,
+    worker: false,
+  },
+
+  run: runPdfSplitter,
+};
diff --git a/src/tools/pdf-splitter/run.test.ts b/src/tools/pdf-splitter/run.test.ts
new file mode 100644
index 0000000..2eeacce
--- /dev/null
+++ b/src/tools/pdf-splitter/run.test.ts
@@ -0,0 +1,117 @@
+import { describe, it, expect, vi } from "vitest";
+import { parsePageRange, runPdfSplitter } from "./run";
+import { PDFDocument } from "pdf-lib";
+import type { ToolResult } from "../../core/io/output-types";
+
+describe("PDF Splitter Utilities", () => {
+  describe("parsePageRange", () => {
+    it("should parse single pages correctly", () => {
+      expect(parsePageRange("1", 5)).toEqual([0]);
+      expect(parsePageRange("3", 5)).toEqual([2]);
+    });
+
+    it("should parse simple ranges correctly", () => {
+      expect(parsePageRange("1-3", 5)).toEqual([0, 1, 2]);
+    });
+
+    it("should parse reverse ranges correctly", () => {
+      expect(parsePageRange("3-1", 5)).toEqual([2, 1, 0]);
+    });
+
+    it("should parse comma-separated lists and ranges", () => {
+      expect(parsePageRange("1-3, 5", 5)).toEqual([0, 1, 2, 4]);
+      expect(parsePageRange("1, 3, 5", 10)).toEqual([0, 2, 4]);
+    });
+
+    it("should filter out pages out of bounds", () => {
+      expect(parsePageRange("1-10", 3)).toEqual([0, 1, 2]);
+      expect(parsePageRange("0, 5", 3)).toEqual([]); // 0 is invalid (1-indexed page bounds)
+    });
+  });
+
+  describe("runPdfSplitter", () => {
+    const createMockPdf = async (pagesCount: number): Promise<Uint8Array> => {
+      const pdfDoc = await PDFDocument.create();
+      for (let i = 0; i < pagesCount; i++) {
+        pdfDoc.addPage([200, 200]);
+      }
+      return pdfDoc.save();
+    };
+
+    it("should extract a range of pages into a single PDF", async () => {
+      const pdfBytes = await createMockPdf(5);
+      const mockFile = new File([pdfBytes as unknown as BlobPart], "source.pdf", { type: "application/pdf" });
+
+      const mockContext = {
+        reportProgress: vi.fn(),
+        signal: new AbortController().signal,
+        logger: console,
+      };
+
+      const result = await runPdfSplitter(
+        { files: [mockFile] },
+        { splitMode: "extract", pageRange: "2-4" },
+        mockContext
+      ) as Extract<ToolResult, { type: "files" }>;
+
+      expect(result.type).toBe("files");
+      expect(result.files).toHaveLength(1);
+      expect(result.files[0].name).toBe("source_extracted.pdf");
+      expect(result.files[0].blob).toBeInstanceOf(Blob);
+
+      // Verify the generated PDF has exactly 3 pages
+      const resBytes = await result.files[0].blob.arrayBuffer();
+      const resDoc = await PDFDocument.load(new Uint8Array(resBytes));
+      expect(resDoc.getPageCount()).toBe(3);
+    });
+
+    it("should burst a PDF into separate page files", async () => {
+      const pdfBytes = await createMockPdf(3);
+      const mockFile = new File([pdfBytes as unknown as BlobPart], "source.pdf", { type: "application/pdf" });
+
+      const mockContext = {
+        reportProgress: vi.fn(),
+        signal: new AbortController().signal,
+        logger: console,
+      };
+
+      const result = await runPdfSplitter(
+        { files: [mockFile] },
+        { splitMode: "burst", pageRange: "" },
+        mockContext
+      ) as Extract<ToolResult, { type: "files" }>;
+
+      expect(result.type).toBe("files");
+      expect(result.files).toHaveLength(3);
+      expect(result.files[0].name).toBe("source_page_1.pdf");
+      expect(result.files[1].name).toBe("source_page_2.pdf");
+      expect(result.files[2].name).toBe("source_page_3.pdf");
+
+      // Verify each generated PDF has exactly 1 page
+      for (const fileObj of result.files) {
+        const resBytes = await fileObj.blob.arrayBuffer();
+        const resDoc = await PDFDocument.load(new Uint8Array(resBytes));
+        expect(resDoc.getPageCount()).toBe(1);
+      }
+    });
+
+    it("should throw error if invalid range is supplied", async () => {
+      const pdfBytes = await createMockPdf(3);
+      const mockFile = new File([pdfBytes as unknown as BlobPart], "source.pdf", { type: "application/pdf" });
+
+      const mockContext = {
+        reportProgress: vi.fn(),
+        signal: new AbortController().signal,
+        logger: console,
+      };
+
+      await expect(
+        runPdfSplitter(
+          { files: [mockFile] },
+          { splitMode: "extract", pageRange: "10-12" }, // Out of bounds
+          mockContext
+        )
+      ).rejects.toThrow("No valid pages selected.");
+    });
+  });
+});
diff --git a/src/tools/pdf-splitter/run.ts b/src/tools/pdf-splitter/run.ts
new file mode 100644
index 0000000..aaa8130
--- /dev/null
+++ b/src/tools/pdf-splitter/run.ts
@@ -0,0 +1,134 @@
+import { PDFDocument } from "pdf-lib";
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { PdfSplitterOptions } from "./index";
+
+export function parsePageRange(rangeStr: string, maxPages: number): number[] {
+  const indices: number[] = [];
+  const parts = rangeStr.replace(/\s+/g, "").split(",");
+
+  for (const part of parts) {
+    if (!part) continue;
+
+    if (part.includes("-")) {
+      const bounds = part.split("-");
+      if (bounds.length === 2) {
+        const start = parseInt(bounds[0], 10);
+        const end = parseInt(bounds[1], 10);
+
+        if (!isNaN(start) && !isNaN(end)) {
+          const step = start <= end ? 1 : -1;
+          for (let i = start; start <= end ? i <= end : i >= end; i += step) {
+            // Convert to 0-based index
+            const idx = i - 1;
+            if (idx >= 0 && idx < maxPages) {
+              indices.push(idx);
+            }
+          }
+        }
+      }
+    } else {
+      const page = parseInt(part, 10);
+      if (!isNaN(page)) {
+        const idx = page - 1;
+        if (idx >= 0 && idx < maxPages) {
+          indices.push(idx);
+        }
+      }
+    }
+  }
+
+  return indices;
+}
+
+export async function runPdfSplitter(
+  input: ToolInput,
+  options: PdfSplitterOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  const files = input.files;
+  if (!files || !Array.isArray(files) || files.length === 0) {
+    throw new Error("No PDF file uploaded.");
+  }
+
+  const file = files[0];
+  const fileBuffer = await file.arrayBuffer();
+
+  try {
+    context.reportProgress({ percentage: 10, message: "Loading PDF document..." });
+    const srcDoc = await PDFDocument.load(new Uint8Array(fileBuffer));
+    const totalPages = srcDoc.getPageCount();
+
+    const baseName = file.name.endsWith(".pdf")
+      ? file.name.substring(0, file.name.length - 4)
+      : file.name;
+
+    if (options.splitMode === "burst") {
+      const outFiles = [];
+      for (let i = 0; i < totalPages; i++) {
+        if (context.signal?.aborted) {
+          throw new DOMException("Operation cancelled", "AbortError");
+        }
+
+        context.reportProgress({
+          percentage: 10 + (i / totalPages) * 80,
+          message: `Splitting page ${i + 1} of ${totalPages}...`,
+        });
+
+        const newDoc = await PDFDocument.create();
+        const [copiedPage] = await newDoc.copyPages(srcDoc, [i]);
+        newDoc.addPage(copiedPage);
+
+        const bytes = await newDoc.save();
+        const blob = new Blob([bytes as unknown as BlobPart], { type: "application/pdf" });
+
+        outFiles.push({
+          name: `${baseName}_page_${i + 1}.pdf`,
+          mimeType: "application/pdf",
+          blob: blob,
+          sizeAfter: blob.size,
+        });
+      }
+
+      context.reportProgress({ percentage: 100, message: "Done!" });
+      return {
+        type: "files",
+        files: outFiles,
+      };
+    } else {
+      // Extract Range mode
+      context.reportProgress({ percentage: 30, message: "Parsing page range..." });
+      const targetIndices = parsePageRange(options.pageRange || "1", totalPages);
+
+      if (targetIndices.length === 0) {
+        throw new Error(`No valid pages selected. The PDF only has ${totalPages} page(s).`);
+      }
+
+      context.reportProgress({ percentage: 50, message: "Copying requested pages..." });
+      const newDoc = await PDFDocument.create();
+      const copiedPages = await newDoc.copyPages(srcDoc, targetIndices);
+      copiedPages.forEach((page) => newDoc.addPage(page));
+
+      context.reportProgress({ percentage: 80, message: "Saving new PDF..." });
+      const bytes = await newDoc.save();
+      const blob = new Blob([bytes as unknown as BlobPart], { type: "application/pdf" });
+
+      context.reportProgress({ percentage: 100, message: "Done!" });
+      return {
+        type: "files",
+        files: [
+          {
+            name: `${baseName}_extracted.pdf`,
+            mimeType: "application/pdf",
+            blob: blob,
+            sizeAfter: blob.size,
+          },
+        ],
+      };
+    }
+  } catch (error) {
+    console.error("PDF Split Error:", error);
+    throw error instanceof Error ? error : new Error("Unknown error occurred during PDF splitting");
+  }
+}
diff --git a/src/tools/qr-code-generator/index.ts b/src/tools/qr-code-generator/index.ts
new file mode 100644
index 0000000..b461103
--- /dev/null
+++ b/src/tools/qr-code-generator/index.ts
@@ -0,0 +1,82 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runQrCodeGenerator } from "./run";
+
+export interface QrCodeGeneratorOptions {
+  size: number;
+  margin: number;
+  errorCorrection: "L" | "M" | "Q" | "H";
+  format: "svg" | "png";
+}
+
+export const qrCodeGeneratorPlugin: PlimiPlugin<QrCodeGeneratorOptions> = {
+  manifest: {
+    id: "qr-code-generator",
+    name: "QR Code Generator (WASM)",
+    description: "Generate high-performance, offline-ready QR codes locally in the browser using WebAssembly.",
+    category: "image",
+    version: "1.0.0",
+    tags: ["qr", "qrcode", "generator", "wasm", "barcode"],
+    input: {
+      type: "text",
+      label: "Text / URL",
+      placeholder: "Enter text or URL to encode...",
+      multiline: true,
+      rows: 4,
+    },
+    output: { type: "files" },
+    example: "https://plimi.app",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "slider",
+        key: "size",
+        label: "Size (pixels)",
+        defaultValue: 256,
+        min: 128,
+        max: 1024,
+        step: 32,
+      },
+      {
+        type: "slider",
+        key: "margin",
+        label: "Margin (modules)",
+        defaultValue: 4,
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+      {
+        type: "select",
+        key: "errorCorrection",
+        label: "Error Correction Level",
+        defaultValue: "M",
+        options: [
+          { label: "Low (7% recovery)", value: "L" },
+          { label: "Medium (15% recovery)", value: "M" },
+          { label: "Quartile (25% recovery)", value: "Q" },
+          { label: "High (30% recovery)", value: "H" },
+        ],
+      },
+      {
+        type: "select",
+        key: "format",
+        label: "Output Format",
+        defaultValue: "svg",
+        options: [
+          { label: "SVG Vector File", value: "svg" },
+          { label: "PNG Image File", value: "png" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runQrCodeGenerator,
+};
diff --git a/src/tools/qr-code-generator/run.test.ts b/src/tools/qr-code-generator/run.test.ts
new file mode 100644
index 0000000..a4a8d46
--- /dev/null
+++ b/src/tools/qr-code-generator/run.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from "vitest";
+import { runQrCodeGenerator } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("QR Code Generator Plugin", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: {
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    },
+  };
+
+  it("should generate SVG QR Code successfully", async () => {
+    const result = await runQrCodeGenerator(
+      { text: "https://plimi.app" },
+      { size: 256, margin: 4, errorCorrection: "M", format: "svg" },
+      mockContext
+    );
+    expect(result.type).toBe("files");
+    if (result.type === "files") {
+      expect(result.files).toHaveLength(1);
+      expect(result.files[0].name).toBe("qrcode.svg");
+      expect(result.files[0].mimeType).toBe("image/svg+xml");
+      expect(result.files[0].blob).toBeInstanceOf(Blob);
+    }
+  });
+
+  it("should generate PNG QR Code successfully", async () => {
+    const result = await runQrCodeGenerator(
+      { text: "https://plimi.app" },
+      { size: 256, margin: 4, errorCorrection: "M", format: "png" },
+      mockContext
+    );
+    expect(result.type).toBe("files");
+    if (result.type === "files") {
+      expect(result.files).toHaveLength(1);
+      expect(result.files[0].name).toBe("qrcode.png");
+      expect(result.files[0].mimeType).toBe("image/png");
+      expect(result.files[0].blob).toBeInstanceOf(Blob);
+    }
+  });
+
+  it("should throw error for empty input text", async () => {
+    await expect(
+      runQrCodeGenerator({ text: "" }, { size: 256, margin: 4, errorCorrection: "M", format: "svg" }, mockContext)
+    ).rejects.toThrow("Please enter text or a URL to encode in the QR Code.");
+  });
+});
diff --git a/src/tools/qr-code-generator/run.ts b/src/tools/qr-code-generator/run.ts
new file mode 100644
index 0000000..820b9d5
--- /dev/null
+++ b/src/tools/qr-code-generator/run.ts
@@ -0,0 +1,107 @@
+import { prepareZXingModule, writeBarcode } from "zxing-wasm/writer";
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { QrCodeGeneratorOptions } from "./index";
+
+const isBrowser = typeof window !== "undefined";
+let isPrepared = false;
+
+async function prepareModuleOnce() {
+  if (isPrepared) return;
+
+  if (isBrowser) {
+    prepareZXingModule({
+      overrides: {
+        locateFile: (pathName: string) => {
+          if (pathName.endsWith(".wasm")) {
+            return "/zxing_writer.wasm";
+          }
+          return pathName;
+        },
+      },
+    });
+  } else {
+    const path = (await import("path" as string)) as any;
+    const fs = (await import("fs" as string)) as any;
+    const resolvedPath = path.resolve(
+      (globalThis as any).process.cwd(),
+      "node_modules/zxing-wasm/dist/writer/zxing_writer.wasm"
+    );
+    const wasmBinary = fs.readFileSync(resolvedPath);
+    prepareZXingModule({
+      overrides: {
+        wasmBinary,
+      },
+    });
+  }
+  isPrepared = true;
+}
+
+export async function runQrCodeGenerator(
+  input: ToolInput,
+  options: QrCodeGeneratorOptions,
+  context: ToolContext
+): Promise<ToolResult> {
+  await prepareModuleOnce();
+
+  const text = (input.text ?? "").trim();
+  if (!text) {
+    throw new Error("Please enter text or a URL to encode in the QR Code.");
+  }
+
+  const { size, margin, errorCorrection, format } = options;
+
+  context.reportProgress({ percentage: 30, message: "Encoding QR Code data..." });
+
+  try {
+    const result = await writeBarcode(text, {
+      format: "QRCode",
+      scale: -size,
+      ecLevel: errorCorrection,
+      options: `margin=${margin}`,
+    });
+
+    if (result.error) {
+      throw new Error(result.error);
+    }
+
+    context.reportProgress({ percentage: 75, message: "Creating output file..." });
+
+    if (format === "svg") {
+      const blob = new Blob([result.svg], { type: "image/svg+xml" });
+      context.reportProgress({ percentage: 100, message: "Done" });
+      return {
+        type: "files",
+        files: [
+          {
+            name: "qrcode.svg",
+            mimeType: "image/svg+xml",
+            blob,
+            sizeAfter: blob.size,
+          },
+        ],
+      };
+    } else {
+      // png format
+      const blob = result.image;
+      if (!blob) {
+        throw new Error("WebAssembly failed to render the PNG image blob.");
+      }
+      context.reportProgress({ percentage: 100, message: "Done" });
+      return {
+        type: "files",
+        files: [
+          {
+            name: "qrcode.png",
+            mimeType: "image/png",
+            blob,
+            sizeAfter: blob.size,
+          },
+        ],
+      };
+    }
+  } catch (err: any) {
+    throw new Error(`Failed to generate QR Code: ${err.message ?? err}`);
+  }
+}
diff --git a/src/tools/regex-tester/index.ts b/src/tools/regex-tester/index.ts
new file mode 100644
index 0000000..abc3ec3
--- /dev/null
+++ b/src/tools/regex-tester/index.ts
@@ -0,0 +1,58 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runRegexTester } from "./run";
+
+export interface RegexTesterOptions {
+  flags: string;
+}
+
+export const regexTesterPlugin: PlimiPlugin<RegexTesterOptions> = {
+  manifest: {
+    id: "dev-regex",
+    name: "Regex Tester",
+    description: "Test regular expressions against text and see matches highlighted.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["regex", "regexp", "test", "match"],
+    input: {
+      type: "group",
+      fields: [
+        {
+          key: "pattern",
+          label: "Regex Pattern",
+          type: "text",
+          multiline: false,
+          placeholder: "Enter regex pattern here (e.g. [A-Z]\\w+)...",
+          example: "[A-Z]\\w+",
+        },
+        {
+          key: "text",
+          label: "Test Text",
+          type: "text",
+          placeholder: "Enter test text here...",
+          example: "Hello World, This Is A Test.",
+        },
+      ],
+    },
+    output: { type: "json" },
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "text",
+        key: "flags",
+        label: "Regex Flags",
+        defaultValue: "gi",
+        placeholder: "e.g. gi, g, i, gm",
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runRegexTester,
+};
diff --git a/src/tools/regex-tester/run.test.ts b/src/tools/regex-tester/run.test.ts
new file mode 100644
index 0000000..e89d351
--- /dev/null
+++ b/src/tools/regex-tester/run.test.ts
@@ -0,0 +1,101 @@
+import { describe, it, expect, vi } from "vitest";
+import { runRegexTester } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Regex Tester", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should find all matches with global flag", async () => {
+    const result = await runRegexTester(
+      { text: "\\d+\nabc123def456ghi789" },
+      { flags: "gi" },
+      mockContext
+    );
+    expect(result.type).toBe("json");
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    const matches = value.matches as unknown[];
+    expect(value.matchCount).toBe(3);
+    expect(matches[0]).toEqual({ match: "123", index: 3, groups: null });
+    expect(matches[1]).toEqual({ match: "456", index: 9, groups: null });
+    expect(matches[2]).toEqual({ match: "789", index: 15, groups: null });
+  });
+
+  it("should find a single match without global flag", async () => {
+    const result = await runRegexTester(
+      { text: "hello\nsay hello world" },
+      { flags: "i" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    const matches = value.matches as Array<Record<string, unknown>>;
+    expect(value.matchCount).toBe(1);
+    expect(matches[0].match).toBe("hello");
+    expect(matches[0].index).toBe(4);
+  });
+
+  it("should return empty matches when test text is empty", async () => {
+    const result = await runRegexTester(
+      { text: "\\d+" },
+      { flags: "gi" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.matchCount).toBe(0);
+    expect(value.matches).toEqual([]);
+  });
+
+  it("should throw on invalid regex pattern", async () => {
+    await expect(
+      runRegexTester({ text: "[invalid" }, { flags: "gi" }, mockContext)
+    ).rejects.toThrow("Invalid regex");
+  });
+
+  it("should throw when no pattern is provided", async () => {
+    await expect(
+      runRegexTester({ text: "" }, { flags: "gi" }, mockContext)
+    ).rejects.toThrow("Enter a regex pattern");
+  });
+
+  it("should parse /pattern/flags syntax from input", async () => {
+    const result = await runRegexTester(
+      { text: "/hello/gi\nhello Hello HELLO" },
+      { flags: "" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.matchCount).toBe(3);
+  });
+
+  it("should handle no matches gracefully", async () => {
+    const result = await runRegexTester(
+      { text: "xyz\nhello world" },
+      { flags: "gi" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.matchCount).toBe(0);
+    expect(value.matches).toEqual([]);
+  });
+
+  it("should find matches when using group input values", async () => {
+    const result = await runRegexTester(
+      {
+        values: {
+          pattern: { text: "\\d+" },
+          text: { text: "abc123def456ghi789" },
+        },
+      },
+      { flags: "gi" },
+      mockContext
+    );
+    expect(result.type).toBe("json");
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    const matches = value.matches as unknown[];
+    expect(value.matchCount).toBe(3);
+    expect(matches[0]).toEqual({ match: "123", index: 3, groups: null });
+  });
+});
diff --git a/src/tools/regex-tester/run.ts b/src/tools/regex-tester/run.ts
new file mode 100644
index 0000000..0e99498
--- /dev/null
+++ b/src/tools/regex-tester/run.ts
@@ -0,0 +1,107 @@
+import { getTextInput, type ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { RegexTesterOptions } from "./index";
+
+export async function runRegexTester(
+  input: ToolInput,
+  options: RegexTesterOptions,
+  context?: ToolContext
+): Promise<ToolResult> {
+  void context;
+
+  let pattern = getTextInput(input, "pattern");
+  let testText = getTextInput(input, "text");
+
+  // Fallback to legacy single text parsing (for backwards compatibility / unit tests)
+  if ((!pattern || !testText) && input.text) {
+    const text = input.text;
+    const firstLine = text.indexOf("\n") >= 0 ? text.substring(0, text.indexOf("\n")).trim() : text.trim();
+    const rest = text.indexOf("\n") >= 0 ? text.substring(text.indexOf("\n") + 1) : "";
+    pattern = pattern || firstLine;
+    testText = testText || rest;
+  }
+
+  if (!pattern) {
+    throw new Error("Enter a regex pattern.");
+  }
+
+  if (pattern.startsWith("/") && pattern.lastIndexOf("/") > 0) {
+    const lastSlash = pattern.lastIndexOf("/");
+    const inlineFlags = pattern.substring(lastSlash + 1);
+    pattern = pattern.substring(1, lastSlash);
+    if (!options.flags) {
+      (options as unknown as Record<string, string>).flags = inlineFlags;
+    }
+  }
+
+  const flags = options.flags || "gi";
+
+  let regex: RegExp;
+  try {
+    regex = new RegExp(pattern, flags);
+  } catch (cause) {
+    const msg = cause instanceof Error ? cause.message : String(cause);
+    throw new Error(`Invalid regex: ${msg}`, { cause });
+  }
+
+  if (!testText) {
+    return {
+      type: "json",
+      value: {
+        pattern,
+        flags,
+        matches: [],
+        matchCount: 0,
+        groups: [],
+      },
+    };
+  }
+
+  const matches: Array<{ match: string; index: number; groups: Record<string, string> | null }> = [];
+  let matchResult: RegExpExecArray | null;
+
+  if (regex.global) {
+    while ((matchResult = regex.exec(testText)) !== null) {
+      matches.push({
+        match: matchResult[0],
+        index: matchResult.index,
+        groups: matchResult.groups ? { ...matchResult.groups } : null,
+      });
+      if (matchResult[0].length === 0) {
+        regex.lastIndex++;
+      }
+    }
+  } else {
+    matchResult = regex.exec(testText);
+    if (matchResult) {
+      matches.push({
+        match: matchResult[0],
+        index: matchResult.index,
+        groups: matchResult.groups ? { ...matchResult.groups } : null,
+      });
+    }
+  }
+
+  const allGroups = new Set<string>();
+  const groupRegex = /\(\?<(?<name>[a-zA-Z][a-zA-Z0-9]*)>/g;
+  let groupMatch: RegExpExecArray | null;
+  const tempRegex = new RegExp(groupRegex);
+  while ((groupMatch = tempRegex.exec(pattern)) !== null) {
+    if (groupMatch.groups?.name) {
+      allGroups.add(groupMatch.groups.name);
+    }
+  }
+
+  return {
+    type: "json",
+    value: {
+      pattern,
+      flags,
+      matches,
+      matchCount: matches.length,
+      testTextLength: testText.length,
+      groups: Array.from(allGroups),
+    },
+  };
+}
diff --git a/src/tools/text-case/index.ts b/src/tools/text-case/index.ts
new file mode 100644
index 0000000..15726da
--- /dev/null
+++ b/src/tools/text-case/index.ts
@@ -0,0 +1,46 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runTextCase } from "./run";
+
+export interface TextCaseOptions {
+  to: "UPPERCASE" | "lowercase" | "camelCase" | "snake_case" | "kebab-case";
+}
+
+export const textCasePlugin: PlimiPlugin<TextCaseOptions> = {
+  manifest: {
+    id: "txt-case",
+    name: "Case Converter",
+    description: "Convert text between camelCase, snake_case, etc.",
+    category: "text",
+    version: "1.0.0",
+    tags: ["case", "text", "camel", "snake"],
+    input: { type: "text" },
+    output: { type: "text" },
+    example: "hello world example text",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "to",
+        label: "Convert to",
+        defaultValue: "snake_case",
+        options: [
+          { label: "UPPERCASE", value: "UPPERCASE" },
+          { label: "lowercase", value: "lowercase" },
+          { label: "camelCase", value: "camelCase" },
+          { label: "snake_case", value: "snake_case" },
+          { label: "kebab-case", value: "kebab-case" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runTextCase,
+};
diff --git a/src/tools/text-case/run.ts b/src/tools/text-case/run.ts
new file mode 100644
index 0000000..411f2ea
--- /dev/null
+++ b/src/tools/text-case/run.ts
@@ -0,0 +1,41 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { TextCaseOptions } from "./index";
+
+export async function runTextCase(
+  input: ToolInput,
+  options: TextCaseOptions
+): Promise<ToolResult> {
+  const text = input.text || "";
+  if (!text) {
+    throw new Error("No text provided.");
+  }
+
+  // A simple tokenizer that splits by whitespace or punctuation
+  const words = text.match(/[A-Z]+(?![a-z])|[A-Z]?[a-z]+|\d+/g) || [];
+
+  const outputStr = (() => {
+    switch (options.to) {
+      case "UPPERCASE":
+        return text.toUpperCase();
+      case "lowercase":
+        return text.toLowerCase();
+      case "camelCase":
+        return words.map((w, i) => {
+        const lower = w.toLowerCase();
+        return i === 0 ? lower : lower.charAt(0).toUpperCase() + lower.slice(1);
+      }).join("");
+      case "snake_case":
+        return words.map(w => w.toLowerCase()).join("_");
+      case "kebab-case":
+        return words.map(w => w.toLowerCase()).join("-");
+      default:
+        return text;
+    }
+  })();
+
+  return {
+    type: "text",
+    value: outputStr,
+  };
+}
diff --git a/src/tools/text-diff/index.ts b/src/tools/text-diff/index.ts
new file mode 100644
index 0000000..1b0d510
--- /dev/null
+++ b/src/tools/text-diff/index.ts
@@ -0,0 +1,56 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runTextDiff } from "./run";
+
+export interface TextDiffOptions {
+  ignoreWhitespace: boolean;
+}
+
+export const textDiffPlugin: PlimiPlugin<TextDiffOptions> = {
+  manifest: {
+    id: "txt-diff",
+    name: "Text Diff",
+    description: "Compare two texts and see the differences line by line.",
+    category: "text",
+    version: "1.0.0",
+    tags: ["diff", "compare", "text"],
+    input: {
+      type: "group",
+      fields: [
+        {
+          key: "original",
+          label: "original",
+          type: "text",
+          placeholder: "Paste the original text…",
+          example: "function greet(name) {\n  return 'Hello ' + name;\n}",
+        },
+        {
+          key: "modified",
+          label: "modified",
+          type: "text",
+          placeholder: "Paste the modified text…",
+          example: "function greet(name) {\n  return `Hello, ${name}!`;\n}\n\nfunction farewell(name) {\n  return `Bye, ${name}!`;\n}",
+        },
+      ],
+    },
+    output: { type: "text" },
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "boolean",
+        key: "ignoreWhitespace",
+        label: "Ignore whitespace",
+        defaultValue: false,
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runTextDiff,
+};
diff --git a/src/tools/text-diff/run.test.ts b/src/tools/text-diff/run.test.ts
new file mode 100644
index 0000000..e38d7ff
--- /dev/null
+++ b/src/tools/text-diff/run.test.ts
@@ -0,0 +1,107 @@
+import { describe, it, expect, vi } from "vitest";
+import { runTextDiff } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Text Diff", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should detect added lines", async () => {
+    const result = await runTextDiff(
+      { values: { original: { text: "line 1" }, modified: { text: "line 1\nline 2" } } },
+      { ignoreWhitespace: false },
+      mockContext
+    );
+    expect(result.type).toBe("text");
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("+ line 2");
+    expect(value).toContain("  line 1");
+  });
+
+  it("should detect removed lines", async () => {
+    const result = await runTextDiff(
+      { values: { original: { text: "line 1\nline 2" }, modified: { text: "line 1" } } },
+      { ignoreWhitespace: false },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("- line 2");
+    expect(value).toContain("  line 1");
+  });
+
+  it("should detect identical texts", async () => {
+    const result = await runTextDiff(
+      { values: { original: { text: "same text" }, modified: { text: "same text" } } },
+      { ignoreWhitespace: false },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("  same text");
+    expect(value).toContain("0 added, 0 removed");
+  });
+
+  it("should show summary with counts", async () => {
+    const result = await runTextDiff(
+      { values: { original: { text: "a\nb\nc" }, modified: { text: "a\nx\nc\nd" } } },
+      { ignoreWhitespace: false },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("Summary:");
+    expect(value).toContain("added");
+    expect(value).toContain("removed");
+    expect(value).toContain("unchanged");
+  });
+
+  it("should ignore whitespace when option is set", async () => {
+    const result = await runTextDiff(
+      { values: { original: { text: "hello   world" }, modified: { text: "hello world" } } },
+      { ignoreWhitespace: true },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("0 added, 0 removed");
+  });
+
+  it("should throw when one side is missing", async () => {
+    await expect(
+      runTextDiff(
+        { values: { original: { text: "just one text" } } },
+        { ignoreWhitespace: false },
+        mockContext
+      )
+    ).rejects.toThrow("Both original and modified text are required");
+  });
+
+  it("should throw on empty input", async () => {
+    await expect(
+      runTextDiff({ values: {} }, { ignoreWhitespace: false }, mockContext)
+    ).rejects.toThrow("No text provided");
+  });
+
+  it("should handle completely different texts", async () => {
+    const result = await runTextDiff(
+      { values: { original: { text: "aaa\nbbb" }, modified: { text: "xxx\nyyy" } } },
+      { ignoreWhitespace: false },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("- aaa");
+    expect(value).toContain("- bbb");
+    expect(value).toContain("+ xxx");
+    expect(value).toContain("+ yyy");
+  });
+
+  it("should still support legacy separator-based input", async () => {
+    const result = await runTextDiff(
+      { text: "line 1\n---\nline 1\nline 2" },
+      { ignoreWhitespace: false },
+      mockContext
+    );
+    const value = (result as { type: "text"; value: string }).value;
+    expect(value).toContain("+ line 2");
+  });
+});
diff --git a/src/tools/text-diff/run.ts b/src/tools/text-diff/run.ts
new file mode 100644
index 0000000..387d33c
--- /dev/null
+++ b/src/tools/text-diff/run.ts
@@ -0,0 +1,103 @@
+import { getTextInput, type ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { TextDiffOptions } from "./index";
+
+function lcs(a: string[], b: string[]): number[][] {
+  const m = a.length;
+  const n = b.length;
+  const dp: number[][] = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (a[i - 1] === b[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+      }
+    }
+  }
+
+  return dp;
+}
+
+function computeDiff(a: string[], b: string[], dp: number[][]): Array<{ type: "same" | "added" | "removed"; line: string }> {
+  const result: Array<{ type: "same" | "added" | "removed"; line: string }> = [];
+  let i = a.length;
+  let j = b.length;
+
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && a[i - 1] === b[j - 1]) {
+      result.unshift({ type: "same", line: a[i - 1] });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      result.unshift({ type: "added", line: b[j - 1] });
+      j--;
+    } else if (i > 0) {
+      result.unshift({ type: "removed", line: a[i - 1] });
+      i--;
+    }
+  }
+
+  return result;
+}
+
+export async function runTextDiff(
+  input: ToolInput,
+  options: TextDiffOptions,
+  _context: ToolContext
+): Promise<ToolResult> {
+  void _context;
+  let textA = getTextInput(input, "original");
+  let textB = getTextInput(input, "modified");
+
+  if ((!textA || !textB) && input.text) {
+    const separatorIndex = input.text.indexOf("\n---\n");
+    if (separatorIndex >= 0) {
+      textA = input.text.substring(0, separatorIndex);
+      textB = input.text.substring(separatorIndex + 5);
+    }
+  }
+
+  if (!textA.trim() && !textB.trim()) {
+    throw new Error("No text provided. Fill both original and modified text.");
+  }
+
+  if (!textA.trim() || !textB.trim()) {
+    throw new Error("Both original and modified text are required.");
+  }
+
+  if (options.ignoreWhitespace) {
+    textA = textA.replace(/\s+/g, " ").trim();
+    textB = textB.replace(/\s+/g, " ").trim();
+  }
+
+  const linesA = textA.split("\n");
+  const linesB = textB.split("\n");
+
+  const dp = lcs(linesA, linesB);
+  const diff = computeDiff(linesA, linesB, dp);
+
+  const output = diff.map((entry) => {
+    switch (entry.type) {
+      case "added":
+        return `+ ${entry.line}`;
+      case "removed":
+        return `- ${entry.line}`;
+      case "same":
+        return `  ${entry.line}`;
+    }
+  }).join("\n");
+
+  const added = diff.filter((d) => d.type === "added").length;
+  const removed = diff.filter((d) => d.type === "removed").length;
+  const same = diff.filter((d) => d.type === "same").length;
+
+  const summary = `\n\n--- Summary: ${added} added, ${removed} removed, ${same} unchanged ---`;
+
+  return {
+    type: "text",
+    value: output + summary,
+  };
+}
diff --git a/src/tools/timestamp-converter/index.ts b/src/tools/timestamp-converter/index.ts
new file mode 100644
index 0000000..6ad3ec6
--- /dev/null
+++ b/src/tools/timestamp-converter/index.ts
@@ -0,0 +1,54 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runTimestampConverter } from "./run";
+
+export interface TimestampOptions {
+  mode: "timestamp-to-date" | "date-to-timestamp";
+  unit: "seconds" | "milliseconds";
+}
+
+export const timestampConverterPlugin: PlimiPlugin<TimestampOptions> = {
+  manifest: {
+    id: "dev-timestamp",
+    name: "Timestamp Converter",
+    description: "Convert between Unix timestamps and human-readable dates.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["timestamp", "unix", "date", "time", "epoch"],
+    input: { type: "text", placeholder: "e.g. 1700000000 or 2024-01-15T12:00:00Z", multiline: false },
+    output: { type: "json" },
+    example: "1700000000",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "mode",
+        label: "Mode",
+        defaultValue: "timestamp-to-date",
+        options: [
+          { label: "Timestamp → Date", value: "timestamp-to-date" },
+          { label: "Date → Timestamp", value: "date-to-timestamp" },
+        ],
+      },
+      {
+        type: "select",
+        key: "unit",
+        label: "Timestamp Unit",
+        defaultValue: "seconds",
+        options: [
+          { label: "Seconds", value: "seconds" },
+          { label: "Milliseconds", value: "milliseconds" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runTimestampConverter,
+};
diff --git a/src/tools/timestamp-converter/run.test.ts b/src/tools/timestamp-converter/run.test.ts
new file mode 100644
index 0000000..24c0d5a
--- /dev/null
+++ b/src/tools/timestamp-converter/run.test.ts
@@ -0,0 +1,97 @@
+import { describe, it, expect, vi } from "vitest";
+import { runTimestampConverter } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Timestamp Converter", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should convert a Unix seconds timestamp to date", async () => {
+    const result = await runTimestampConverter(
+      { text: "0" },
+      { mode: "timestamp-to-date", unit: "seconds" },
+      mockContext
+    );
+    expect(result.type).toBe("json");
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.iso).toBe("1970-01-01T00:00:00.000Z");
+    expect(value.unixSeconds).toBe(0);
+    expect(value.dayOfWeek).toBe("Thursday");
+  });
+
+  it("should convert a known timestamp correctly", async () => {
+    const result = await runTimestampConverter(
+      { text: "1700000000" },
+      { mode: "timestamp-to-date", unit: "seconds" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.iso).toBe("2023-11-14T22:13:20.000Z");
+    expect(value.unixSeconds).toBe(1700000000);
+  });
+
+  it("should convert milliseconds timestamp to date", async () => {
+    const result = await runTimestampConverter(
+      { text: "1700000000000" },
+      { mode: "timestamp-to-date", unit: "milliseconds" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.iso).toBe("2023-11-14T22:13:20.000Z");
+  });
+
+  it("should convert an ISO date string to Unix timestamp (seconds)", async () => {
+    const result = await runTimestampConverter(
+      { text: "2024-01-15T12:00:00Z" },
+      { mode: "date-to-timestamp", unit: "seconds" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    const both = value.both as Record<string, unknown>;
+    expect(value.unixSeconds).toBe(1705320000);
+    expect(both.seconds).toBe(1705320000);
+  });
+
+  it("should convert an ISO date string to Unix timestamp (milliseconds)", async () => {
+    const result = await runTimestampConverter(
+      { text: "2024-01-15T12:00:00Z" },
+      { mode: "date-to-timestamp", unit: "milliseconds" },
+      mockContext
+    );
+    const value = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(value.unixMillis).toBe(1705320000000);
+  });
+
+  it("should throw on empty input", async () => {
+    await expect(
+      runTimestampConverter(
+        { text: "" },
+        { mode: "timestamp-to-date", unit: "seconds" },
+        mockContext
+      )
+    ).rejects.toThrow("No input provided");
+  });
+
+  it("should throw on invalid timestamp", async () => {
+    await expect(
+      runTimestampConverter(
+        { text: "not-a-number" },
+        { mode: "timestamp-to-date", unit: "seconds" },
+        mockContext
+      )
+    ).rejects.toThrow("Invalid timestamp");
+  });
+
+  it("should throw on invalid date string", async () => {
+    await expect(
+      runTimestampConverter(
+        { text: "not-a-date" },
+        { mode: "date-to-timestamp", unit: "seconds" },
+        mockContext
+      )
+    ).rejects.toThrow("Invalid date string");
+  });
+});
diff --git a/src/tools/timestamp-converter/run.ts b/src/tools/timestamp-converter/run.ts
new file mode 100644
index 0000000..7a31253
--- /dev/null
+++ b/src/tools/timestamp-converter/run.ts
@@ -0,0 +1,77 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { TimestampOptions } from "./index";
+
+export async function runTimestampConverter(
+  input: ToolInput,
+  options: TimestampOptions,
+  context?: ToolContext
+): Promise<ToolResult> {
+  void context;
+
+  const text = (input.text || "").trim();
+  if (!text) {
+    throw new Error("No input provided.");
+  }
+
+  if (options.mode === "timestamp-to-date") {
+    let ts = Number(text);
+    if (isNaN(ts)) {
+      throw new Error("Invalid timestamp. Enter a numeric Unix timestamp.");
+    }
+
+    if (options.unit === "seconds") {
+      ts = ts * 1000;
+    }
+
+    const date = new Date(ts);
+    if (isNaN(date.getTime())) {
+      throw new Error("Invalid timestamp value.");
+    }
+
+    return {
+      type: "json",
+      value: {
+        input: text,
+        iso: date.toISOString(),
+        utc: date.toUTCString(),
+        local: date.toLocaleString(),
+        date: date.toISOString().split("T")[0],
+        time: date.toISOString().split("T")[1].replace("Z", ""),
+        unixSeconds: Math.floor(date.getTime() / 1000),
+        unixMillis: date.getTime(),
+        dayOfWeek: date.toLocaleDateString("en-US", { weekday: "long" }),
+      },
+    };
+  } else {
+    let date: Date;
+    if (/^\d{4}-\d{2}-\d{2}(T|\s)/.test(text)) {
+      date = new Date(text);
+    } else {
+      date = new Date(text);
+    }
+
+    if (isNaN(date.getTime())) {
+      throw new Error("Invalid date string. Use ISO 8601 format like 2024-01-15T12:00:00Z.");
+    }
+
+    const unixSeconds = Math.floor(date.getTime() / 1000);
+    const unixMillis = date.getTime();
+
+    return {
+      type: "json",
+      value: {
+        input: text,
+        iso: date.toISOString(),
+        utc: date.toUTCString(),
+        unixSeconds: options.unit === "seconds" ? unixSeconds : undefined,
+        unixMillis: options.unit === "milliseconds" ? unixMillis : undefined,
+        both: {
+          seconds: unixSeconds,
+          milliseconds: unixMillis,
+        },
+      },
+    };
+  }
+}
diff --git a/src/tools/url-encoder/index.ts b/src/tools/url-encoder/index.ts
new file mode 100644
index 0000000..e804a49
--- /dev/null
+++ b/src/tools/url-encoder/index.ts
@@ -0,0 +1,54 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runUrlEncoder } from "./run";
+
+export interface UrlEncoderOptions {
+  mode: "encode" | "decode";
+  component: "full" | "component";
+}
+
+export const urlEncoderPlugin: PlimiPlugin<UrlEncoderOptions> = {
+  manifest: {
+    id: "dev-url",
+    name: "URL Encoder",
+    description: "Encode or decode URLs and URI components.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["url", "encode", "decode", "uri"],
+    input: { type: "text" },
+    output: { type: "text" },
+    example: "https://plimi.app/search?q=hello world&lang=en",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "mode",
+        label: "Mode",
+        defaultValue: "encode",
+        options: [
+          { label: "Encode", value: "encode" },
+          { label: "Decode", value: "decode" },
+        ],
+      },
+      {
+        type: "select",
+        key: "component",
+        label: "Target",
+        defaultValue: "component",
+        options: [
+          { label: "Full URL", value: "full" },
+          { label: "URI Component", value: "component" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runUrlEncoder,
+};
diff --git a/src/tools/url-encoder/run.ts b/src/tools/url-encoder/run.ts
new file mode 100644
index 0000000..8873f80
--- /dev/null
+++ b/src/tools/url-encoder/run.ts
@@ -0,0 +1,28 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { UrlEncoderOptions } from "./index";
+
+export async function runUrlEncoder(
+  input: ToolInput,
+  options: UrlEncoderOptions
+): Promise<ToolResult> {
+  const text = input.text || "";
+  if (!text) {
+    throw new Error("No text provided.");
+  }
+
+  try {
+    const outputStr =
+      options.mode === "encode"
+        ? options.component === "full" ? encodeURI(text) : encodeURIComponent(text)
+        : options.component === "full" ? decodeURI(text) : decodeURIComponent(text);
+
+    return {
+      type: "text",
+      value: outputStr,
+    };
+  } catch (cause) {
+    const message = cause instanceof Error ? cause.message : String(cause);
+    throw new Error(`Failed to process URL: ${message}`, { cause });
+  }
+}
diff --git a/src/tools/uuid-generator/index.ts b/src/tools/uuid-generator/index.ts
new file mode 100644
index 0000000..55cc5d1
--- /dev/null
+++ b/src/tools/uuid-generator/index.ts
@@ -0,0 +1,41 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runUuidGenerator } from "./run";
+
+export interface UuidOptions {
+  count: number;
+}
+
+export const uuidGeneratorPlugin: PlimiPlugin<UuidOptions> = {
+  manifest: {
+    id: "crypto-uuid",
+    name: "UUID Generator",
+    description: "Generate cryptographically secure v4 UUIDs.",
+    category: "crypto",
+    version: "1.0.0",
+    tags: ["uuid", "guid", "crypto", "random"],
+    input: { type: "none" },
+    output: { type: "text" },
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "slider",
+        key: "count",
+        label: "Count",
+        defaultValue: 1,
+        min: 1,
+        max: 100,
+        step: 1,
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runUuidGenerator,
+};
diff --git a/src/tools/uuid-generator/run.ts b/src/tools/uuid-generator/run.ts
new file mode 100644
index 0000000..17f26c6
--- /dev/null
+++ b/src/tools/uuid-generator/run.ts
@@ -0,0 +1,24 @@
+import type { ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { UuidOptions } from "./index";
+
+export async function runUuidGenerator(
+  _input: ToolInput,
+  options: UuidOptions,
+  _context: ToolContext
+): Promise<ToolResult> {
+  void _input;
+  void _context;
+  const count = options.count || 1;
+  const uuids: string[] = [];
+
+  for (let i = 0; i < count; i++) {
+    uuids.push(crypto.randomUUID());
+  }
+
+  return {
+    type: "text",
+    value: uuids.join("\n"),
+  };
+}
diff --git a/src/tools/variables-converter/index.ts b/src/tools/variables-converter/index.ts
new file mode 100644
index 0000000..5f4fd39
--- /dev/null
+++ b/src/tools/variables-converter/index.ts
@@ -0,0 +1,52 @@
+import type { PlimiPlugin } from "../../core/plugins/plugin-types";
+import { runVariablesConverter } from "./run";
+
+export interface VariablesConverterOptions {
+  toFormat: "auto" | "constant" | "dot" | "camel" | "pascal" | "snake" | "kebab";
+}
+
+export const variablesConverterPlugin: PlimiPlugin<VariablesConverterOptions> = {
+  manifest: {
+    id: "dev-varconvert",
+    name: "Variables Converter",
+    description: "Convert variable names between camelCase, PascalCase, snake_case, constant_case (A_B_C), dot.notation (a.b.c), and kebab-case.",
+    category: "developer",
+    version: "1.0.0",
+    tags: ["variable", "casing", "convert", "camelcase", "snakecase", "naming"],
+    input: {
+      type: "text",
+      placeholder: "e.g. user.profile.name or USER_PROFILE_NAME...",
+      multiline: false,
+    },
+    output: { type: "json" },
+    example: "user.profile.name",
+    offlineReady: true,
+  },
+
+  optionsSchema: {
+    fields: [
+      {
+        type: "select",
+        key: "toFormat",
+        label: "Primary Format",
+        defaultValue: "auto",
+        options: [
+          { label: "Auto (Detect)", value: "auto" },
+          { label: "Constant Case (A_B_C)", value: "constant" },
+          { label: "Dot Notation (a.b.c)", value: "dot" },
+          { label: "Camel Case (aBC)", value: "camel" },
+          { label: "Pascal Case (ABC)", value: "pascal" },
+          { label: "Snake Case (a_b_c)", value: "snake" },
+          { label: "Kebab Case (a-b-c)", value: "kebab" },
+        ],
+      },
+    ],
+  },
+
+  capabilities: {
+    cancelable: false,
+    worker: false,
+  },
+
+  run: runVariablesConverter,
+};
diff --git a/src/tools/variables-converter/run.test.ts b/src/tools/variables-converter/run.test.ts
new file mode 100644
index 0000000..a590cf3
--- /dev/null
+++ b/src/tools/variables-converter/run.test.ts
@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from "vitest";
+import { runVariablesConverter } from "./run";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+
+describe("Variables Converter", () => {
+  const mockContext: ToolContext = {
+    signal: new AbortController().signal,
+    reportProgress: vi.fn(),
+    logger: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+  };
+
+  it("should convert dot notation to constant case and others", async () => {
+    const result = await runVariablesConverter(
+      { text: "a.b.c" },
+      { toFormat: "constant" },
+      mockContext
+    );
+    expect(result.type).toBe("json");
+    const val = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(val.constant).toBe("A_B_C");
+    expect(val.dot).toBe("a.b.c");
+    expect(val.camel).toBe("aBC");
+    expect(val.pascal).toBe("ABC");
+    expect(val.snake).toBe("a_b_c");
+    expect(val.kebab).toBe("a-b-c");
+    expect(val.primary).toBe("A_B_C");
+  });
+
+  it("should convert screaming snake case (constant) to dot notation", async () => {
+    const result = await runVariablesConverter(
+      { text: "USER_PROFILE_NAME" },
+      { toFormat: "dot" },
+      mockContext
+    );
+    const val = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(val.constant).toBe("USER_PROFILE_NAME");
+    expect(val.dot).toBe("user.profile.name");
+    expect(val.camel).toBe("userProfileName");
+    expect(val.pascal).toBe("UserProfileName");
+    expect(val.primary).toBe("user.profile.name");
+  });
+
+  it("should handle camelCase inputs correctly", async () => {
+    const result = await runVariablesConverter(
+      { text: "myApiKey" },
+      { toFormat: "kebab" },
+      mockContext
+    );
+    const val = (result as { type: "json"; value: Record<string, unknown> }).value;
+    expect(val.constant).toBe("MY_API_KEY");
+    expect(val.kebab).toBe("my-api-key");
+    expect(val.primary).toBe("my-api-key");
+  });
+
+  it("should handle auto mode detection correctly", async () => {
+    // 1. Dot notation auto-converts to Constant Case
+    const resDot = await runVariablesConverter(
+      { text: "a.b.c" },
+      { toFormat: "auto" },
+      mockContext
+    );
+    expect((resDot as { type: "json"; value: Record<string, unknown> }).value.primary).toBe("A_B_C");
+
+    // 2. Kebab notation auto-converts to Constant Case
+    const resKebab = await runVariablesConverter(
+      { text: "a-b-c" },
+      { toFormat: "auto" },
+      mockContext
+    );
+    expect((resKebab as { type: "json"; value: Record<string, unknown> }).value.primary).toBe("A_B_C");
+
+    // 3. Constant notation auto-converts to Dot Notation
+    const resConstant = await runVariablesConverter(
+      { text: "A_B_C" },
+      { toFormat: "auto" },
+      mockContext
+    );
+    expect((resConstant as { type: "json"; value: Record<string, unknown> }).value.primary).toBe("a.b.c");
+  });
+
+  it("should throw on empty input", async () => {
+    await expect(
+      runVariablesConverter({ text: "" }, { toFormat: "auto" }, mockContext)
+    ).rejects.toThrow("No variable name provided");
+  });
+});
diff --git a/src/tools/variables-converter/run.ts b/src/tools/variables-converter/run.ts
new file mode 100644
index 0000000..0aff479
--- /dev/null
+++ b/src/tools/variables-converter/run.ts
@@ -0,0 +1,84 @@
+import { getTextInput, type ToolInput } from "../../core/io/input-types";
+import type { ToolResult } from "../../core/io/output-types";
+import type { ToolContext } from "../../core/plugins/plugin-types";
+import type { VariablesConverterOptions } from "./index";
+
+function tokenize(input: string): string[] {
+  // Add space boundaries for camelCase/PascalCase transitions
+  const spaced = input
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/([A-Z])([A-Z][a-z])/g, "$1 $2");
+  
+  // Split on dots, underscores, hyphens, or spaces
+  return spaced
+    .split(/[\s._-]+/)
+    .map((w) => w.trim().toLowerCase())
+    .filter(Boolean);
+}
+
+export async function runVariablesConverter(
+  input: ToolInput,
+  options: VariablesConverterOptions,
+  context?: ToolContext
+): Promise<ToolResult> {
+  void context;
+
+  const text = getTextInput(input).trim();
+  if (!text) {
+    throw new Error("No variable name provided.");
+  }
+
+  const words = tokenize(text);
+  if (words.length === 0) {
+    throw new Error("Could not parse any variable names from input.");
+  }
+
+  const dot = words.join(".");
+  const constant = words.map((w) => w.toUpperCase()).join("_");
+  const camel = words
+    .map((w, idx) => (idx === 0 ? w : w.charAt(0).toUpperCase() + w.slice(1)))
+    .join("");
+  const pascal = words
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join("");
+  const snake = words.join("_");
+  const kebab = words.join("-");
+
+  const primary = (() => {
+    if (options.toFormat === "auto") {
+    // If input is uppercase or contains underscores, auto-convert to dot notation
+      const isUpperOrSnake = text === text.toUpperCase() || text.includes("_");
+      return isUpperOrSnake ? dot : constant;
+    }
+
+    switch (options.toFormat) {
+      case "dot":
+        return dot;
+      case "camel":
+        return camel;
+      case "pascal":
+        return pascal;
+      case "snake":
+        return snake;
+      case "kebab":
+        return kebab;
+      case "constant":
+      default:
+        return constant;
+    }
+  })();
+
+  return {
+    type: "json",
+    value: {
+      input: text,
+      constant,
+      dot,
+      camel,
+      pascal,
+      snake,
+      kebab,
+      primary,
+    },
+  };
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..7f42e5f
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..d3c52ea
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..4ff4f8f
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});

Get started

Documentation

Get started

Documentation

Connect with us