# mohammed-hashim18/dropzone architecture

> Architecture diagram of the GitHub repository mohammed-hashim18/dropzone, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mohammed-hashim18/dropzone
- Repository: https://github.com/mohammed-hashim18/dropzone

## Overview

DropZone is a browser-only file toolbox: users add files to a shared workspace, choose a tool, and can keep or reuse the resulting files. The README documents the tool families and a registry-driven, lazily loaded panel architecture. The excerpts show app routing, file-drop handling, workspace API, and several engines; panel-to-engine call details and some subsystem wiring are not sampled, so uncertain call edges are omitted.

Main entry points: [`src/tools/registry.ts`](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/registry.ts) (Tool Registry), [`src/App.tsx`](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/App.tsx) (App Router), [`src/workspace/store.tsx`](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/workspace/store.tsx) (Workspace Store), [`src/pages/HomePage.tsx`](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/pages/HomePage.tsx) (Tool Home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["App Router<br/>[App.tsx]"]
  node_shell["App Shell<br/>[AppShell.tsx]"]
  node_home["Tool Home<br/>[HomePage.tsx]"]
  node_toolpage["Tool Route<br/>[ToolPage.tsx]"]
end

subgraph group_workspace["Shared Workspace"]
  node_workspace[("Workspace Store<br/>[store.tsx]")]
  node_drop["File Drop<br/>[useFileDrop.ts]"]
  node_selector["File Selector<br/>[FileSelector.tsx]"]
  node_results["Results Tray<br/>[ResultsTray.tsx]"]
end

subgraph group_tools["File Tools"]
  node_registry["Tool Registry<br/>[registry.ts]"]
  node_runner["Tool Runner<br/>[toolRun.ts]"]
  node_base64panel["Base64 Panel<br/>[Base64Panel.tsx]"]
  node_csvpanel["CSV JSON Panel<br/>[CsvJsonPanel.tsx]"]
  node_hashpanel["Hash Panel<br/>[HashPanel.tsx]"]
  node_imagepanel["Image Panels"]
  node_convertpanel["Convert Panel"]
  node_jsonpanel["JSON Panel<br/>[JsonPanel.tsx]"]
  node_metapanel["Metadata Panel<br/>[MetadataPanel.tsx]"]
  node_pdfmerge["PDF Merge Panel<br/>[PdfMergePanel.tsx]"]
  node_pdfpages["PDF Pages Panel<br/>[PdfPagesPanel.tsx]"]
end

subgraph group_engines["Processing Engines"]
  node_base64["Base64 Engine<br/>[base64.ts]"]
  node_csv["CSV Engine<br/>[csv.ts]"]
  node_json["JSON Engine<br/>[json.ts]"]
  node_hash["Hash Engine<br/>[index.ts]"]
  node_image["Image Engine<br/>[image.ts]"]
  node_metadata["Metadata Engine<br/>[index.ts]"]
  node_pdf["PDF Engine<br/>[pdf.ts]"]
  node_pdfrender["PDF Renderer<br/>[pdf-render.ts]"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"wraps routes"| node_shell
node_app -->|"provides state"| node_workspace
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_toolpage
node_user -->|"drops files"| node_drop
node_drop -->|"adds files"| node_workspace
node_selector -->|"selects files"| node_workspace
node_results -->|"manages results"| node_workspace
node_home -->|"lists tools"| node_registry
node_toolpage -->|"resolves tool"| node_registry
node_registry -->|"loads panel"| node_base64panel
node_registry -->|"loads panel"| node_csvpanel
node_registry -->|"loads panel"| node_hashpanel
node_registry -->|"loads panel"| node_imagepanel
node_registry -->|"loads panel"| node_convertpanel
node_registry -->|"loads panel"| node_jsonpanel
node_registry -->|"loads panel"| node_metapanel
node_registry -->|"loads panel"| node_pdfmerge
node_registry -->|"loads panel"| node_pdfpages

click node_app "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/App.tsx"
click node_shell "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/components/AppShell.tsx"
click node_home "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/pages/HomePage.tsx"
click node_toolpage "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/pages/ToolPage.tsx"
click node_workspace "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/workspace/store.tsx"
click node_drop "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/workspace/useFileDrop.ts"
click node_selector "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/components/FileSelector.tsx"
click node_results "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/components/ResultsTray.tsx"
click node_registry "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/registry.ts"
click node_runner "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/toolRun.ts"
click node_base64panel "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/Base64Panel.tsx"
click node_csvpanel "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/CsvJsonPanel.tsx"
click node_hashpanel "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/HashPanel.tsx"
click node_imagepanel "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/ImageCompressPanel.tsx"
click node_convertpanel "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/ImageConvertPanel.tsx"
click node_jsonpanel "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/JsonPanel.tsx"
click node_metapanel "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/MetadataPanel.tsx"
click node_pdfmerge "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/PdfMergePanel.tsx"
click node_pdfpages "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/PdfPagesPanel.tsx"
click node_base64 "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/base64.ts"
click node_csv "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/csv.ts"
click node_json "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/json.ts"
click node_hash "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/hash/index.ts"
click node_image "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/image.ts"
click node_metadata "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/metadata/index.ts"
click node_pdf "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/pdf.ts"
click node_pdfrender "https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/pdf-render.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_shell,node_home,node_toolpage,node_user toneBlue
class node_workspace,node_drop,node_selector,node_results toneAmber
class node_registry,node_runner,node_base64panel,node_csvpanel,node_hashpanel,node_imagepanel,node_convertpanel,node_jsonpanel,node_metapanel,node_pdfmerge,node_pdfpages toneMint
class node_base64,node_csv,node_json,node_hash,node_image,node_metadata,node_pdf,node_pdfrender toneRose
```

## Components

### Application

- [App Router](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/App.tsx): `src/App.tsx`
- [App Shell](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/components/AppShell.tsx): `src/components/AppShell.tsx`
- [Tool Home](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/pages/HomePage.tsx): `src/pages/HomePage.tsx`
- [Tool Route](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/pages/ToolPage.tsx): `src/pages/ToolPage.tsx`

### Shared Workspace

- [Workspace Store](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/workspace/store.tsx): `src/workspace/store.tsx`
- [File Drop](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/workspace/useFileDrop.ts): `src/workspace/useFileDrop.ts`
- [File Selector](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/components/FileSelector.tsx): `src/components/FileSelector.tsx`
- [Results Tray](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/components/ResultsTray.tsx): `src/components/ResultsTray.tsx`

### File Tools

- [Tool Registry](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/registry.ts): `src/tools/registry.ts`
- [Tool Runner](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/toolRun.ts): `src/tools/panels/toolRun.ts`
- [Base64 Panel](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/Base64Panel.tsx): `src/tools/panels/Base64Panel.tsx`
- [CSV JSON Panel](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/CsvJsonPanel.tsx): `src/tools/panels/CsvJsonPanel.tsx`
- [Hash Panel](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/HashPanel.tsx): `src/tools/panels/HashPanel.tsx`
- [Image Panels](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/ImageCompressPanel.tsx): `src/tools/panels/ImageCompressPanel.tsx`
- [Convert Panel](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/ImageConvertPanel.tsx): `src/tools/panels/ImageConvertPanel.tsx`
- [JSON Panel](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/JsonPanel.tsx): `src/tools/panels/JsonPanel.tsx`
- [Metadata Panel](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/MetadataPanel.tsx): `src/tools/panels/MetadataPanel.tsx`
- [PDF Merge Panel](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/PdfMergePanel.tsx): `src/tools/panels/PdfMergePanel.tsx`
- [PDF Pages Panel](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/tools/panels/PdfPagesPanel.tsx): `src/tools/panels/PdfPagesPanel.tsx`

### Processing Engines

- [Base64 Engine](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/base64.ts): `src/lib/base64.ts`
- [CSV Engine](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/csv.ts): `src/lib/csv.ts`
- [JSON Engine](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/json.ts): `src/lib/json.ts`
- [Hash Engine](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/hash/index.ts): `src/lib/hash/index.ts`
- [Image Engine](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/image.ts): `src/lib/image.ts`
- [Metadata Engine](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/metadata/index.ts): `src/lib/metadata/index.ts`
- [PDF Engine](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/pdf.ts): `src/lib/pdf.ts`
- [PDF Renderer](https://github.com/mohammed-hashim18/dropzone/blob/claude/dropzone-file-toolbox-g59jut/src/lib/pdf-render.ts): `src/lib/pdf-render.ts`

### Other components

- **User**

## Connections

- User → App Router: uses
- App Router → App Shell: wraps routes
- App Router → Workspace Store: provides state
- App Router → Tool Home: routes to
- App Router → Tool Route: routes to
- User → File Drop: drops files
- File Drop → Workspace Store: adds files
- File Selector → Workspace Store: selects files
- Results Tray → Workspace Store: manages results
- Tool Home → Tool Registry: lists tools
- Tool Route → Tool Registry: resolves tool
- Tool Registry → Base64 Panel: loads panel
- Tool Registry → CSV JSON Panel: loads panel
- Tool Registry → Hash Panel: loads panel
- Tool Registry → Image Panels: loads panel
- Tool Registry → Convert Panel: loads panel
- Tool Registry → JSON Panel: loads panel
- Tool Registry → Metadata Panel: loads panel
- Tool Registry → PDF Merge Panel: loads panel
- Tool Registry → PDF Pages Panel: loads panel