# ph4n70mc0de/tactile-qr-studio architecture

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

- Interactive diagram: https://gitdiagram.com/ph4n70mc0de/tactile-qr-studio
- Repository: https://github.com/ph4n70mc0de/tactile-qr-studio

## Overview

Tactile QR Studio is a browser-only QR design, validation, preview, and export application. Users choose one of five content types, edit its payload, customize appearance or apply a preset, review validation feedback and a live QR preview, then export PNG or SVG. The graph follows the documented and indexed application wiring; validation helpers, preset selection, and QR rendering are represented as distinct product stages. Source excerpts are partial, so unsampled internal relationships are omitted where not established.

Main entry points: [`src/App.tsx`](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/App.tsx) (Studio app), [`src/hooks/useQREditor.ts`](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/hooks/useQREditor.ts) (Editor state), [`src/domain/qrValidation.ts`](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrValidation.ts) (QR validation), [`src/components/QRPreview.tsx`](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/components/QRPreview.tsx) (Live QR preview)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Editor experience"]
  node_app["Studio app<br/>[App.tsx]"]
  node_editor_state["Editor state<br/>[useQREditor.ts]"]
  node_content_form["Content editor<br/>[QRContentForm.tsx]"]
  node_appearance_form["Appearance controls"]
  node_presets["Design presets<br/>[presets.ts]"]
end

subgraph group_domain["QR domain logic"]
  node_validation["QR validation<br/>[qrValidation.ts]"]
  node_payload["Payload encoding<br/>[qrPayload.ts]"]
  node_appearance_rules["Appearance defaults<br/>[qrAppearance.ts]"]
  node_contrast["Contrast utilities<br/>[utils.ts]"]
end

subgraph group_render["Preview and export"]
  node_preview["Live QR preview<br/>[QRPreview.tsx]"]
  node_qr_engine["QR renderer"]
  node_export["Filename generation<br/>[qrExport.ts]"]
  node_qr_download["QR download"]
end

subgraph group_shared["Shared UI and types"]
  node_ui_controls["Reusable controls"]
  node_domain_types["QR data types<br/>[types.ts]"]
end

node_user(("QR designer"))

node_user -->|"edits and exports"| node_app
node_app -->|"manages state"| node_editor_state
node_app -->|"renders and updates"| node_content_form
node_app -->|"renders and updates"| node_appearance_form
node_app -->|"offers presets"| node_presets
node_app -->|"validates inputs"| node_validation
node_editor_state -->|"generates payload"| node_payload
node_editor_state -->|"initializes appearance"| node_appearance_rules
node_app -->|"shows preview"| node_preview
node_app -->|"creates filename"| node_export
node_app -->|"downloads QR"| node_preview
node_preview -->|"renders and updates"| node_qr_engine
node_validation -->|"checks encoding"| node_payload
node_validation -->|"checks contrast"| node_contrast
node_content_form -->|"uses controls"| node_ui_controls
node_appearance_form -->|"uses controls"| node_ui_controls
node_app -->|"uses cards and buttons"| node_ui_controls

click node_app "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/App.tsx"
click node_editor_state "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/hooks/useQREditor.ts"
click node_content_form "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/components/QRContentForm.tsx"
click node_appearance_form "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/components/QRAppearanceForm.tsx"
click node_presets "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/lib/presets.ts"
click node_validation "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrValidation.ts"
click node_payload "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrPayload.ts"
click node_appearance_rules "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrAppearance.ts"
click node_contrast "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/lib/utils.ts"
click node_preview "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/components/QRPreview.tsx"
click node_export "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrExport.ts"
click node_ui_controls "https://github.com/ph4n70mc0de/tactile-qr-studio/tree/main/src/components/ui"
click node_domain_types "https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/types.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_editor_state,node_content_form,node_appearance_form,node_presets toneBlue
class node_validation,node_payload,node_appearance_rules,node_contrast toneAmber
class node_preview,node_qr_engine,node_export,node_qr_download toneMint
class node_ui_controls,node_domain_types toneRose
class node_user toneIndigo
```

## Components

### Editor experience

- [Studio app](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/App.tsx): `src/App.tsx`
- [Editor state](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/hooks/useQREditor.ts): `src/hooks/useQREditor.ts`
- [Content editor](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/components/QRContentForm.tsx): `src/components/QRContentForm.tsx`
- [Appearance controls](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/components/QRAppearanceForm.tsx): `src/components/QRAppearanceForm.tsx`
- [Design presets](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/lib/presets.ts): `src/lib/presets.ts`

### QR domain logic

- [QR validation](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrValidation.ts): `src/domain/qrValidation.ts`
- [Payload encoding](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrPayload.ts): `src/domain/qrPayload.ts`
- [Appearance defaults](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrAppearance.ts): `src/domain/qrAppearance.ts`
- [Contrast utilities](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Preview and export

- [Live QR preview](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/components/QRPreview.tsx): `src/components/QRPreview.tsx`
- **QR renderer**
- [Filename generation](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/domain/qrExport.ts): `src/domain/qrExport.ts`
- **QR download**

### Shared UI and types

- [Reusable controls](https://github.com/ph4n70mc0de/tactile-qr-studio/tree/main/src/components/ui): `src/components/ui`
- [QR data types](https://github.com/ph4n70mc0de/tactile-qr-studio/blob/main/src/types.ts): `src/types.ts`

### Other components

- **QR designer**

## Connections

- QR designer → Studio app: edits and exports (evidence: `README.md`)
- Studio app → Editor state: manages state (evidence: `src/App.tsx`)
- Studio app → Content editor: renders and updates (evidence: `src/App.tsx`)
- Studio app → Appearance controls: renders and updates (evidence: `src/App.tsx`)
- Studio app → Design presets: offers presets (evidence: `src/App.tsx`)
- Studio app → QR validation: validates inputs (evidence: `src/App.tsx`)
- Editor state → Payload encoding: generates payload (evidence: `src/hooks/useQREditor.ts`)
- Editor state → Appearance defaults: initializes appearance (evidence: `src/hooks/useQREditor.ts`)
- Studio app → Live QR preview: shows preview (evidence: `src/App.tsx`)
- Studio app → Filename generation: creates filename (evidence: `src/App.tsx`)
- Studio app → Live QR preview: downloads QR (evidence: `src/App.tsx`)
- Live QR preview → QR renderer: renders and updates (evidence: `src/components/QRPreview.tsx`)
- QR validation → Payload encoding: checks encoding (evidence: `src/domain/qrValidation.ts`)
- QR validation → Contrast utilities: checks contrast (evidence: `src/domain/qrValidation.ts`)
- Content editor → Reusable controls: uses controls (evidence: `src/components/QRContentForm.tsx`)
- Appearance controls → Reusable controls: uses controls (evidence: `src/components/QRAppearanceForm.tsx`)
- Studio app → Reusable controls: uses cards and buttons (evidence: `src/App.tsx`)