# jrbtxus/sekai-stickers-apk architecture

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

- Interactive diagram: https://gitdiagram.com/jrbtxus/sekai-stickers-apk
- Repository: https://github.com/jrbtxus/sekai-stickers-apk

## Overview

Project Sekai Sticker Maker is a React sticker editor: users choose a character or upload an image, customize text and placement, preview the composition, then export or copy it. The app also offers a separate two-character editing mode, saved history, gallery submission, and optional SEKAI Pass sign-in. The graph follows the documented workflow and sampled call sites; several feature panels are represented by their exact paths, but their internal wiring was not sampled, so uncertain interactions are omitted.

Main entry points: [`src/App.tsx`](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/App.tsx) (App coordinator), [`src/services/auth.service.ts`](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/services/auth.service.ts) (Auth service), [`src/hooks/useExport.ts`](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useExport.ts) (Export actions), [`src/utils/galleryUtils.ts`](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/utils/galleryUtils.ts) (Gallery utilities)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Sticker editor"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_picker["Character picker<br/>[Picker.tsx]"]
  node_character["Character loading<br/>[useCharacter.ts]"]
  node_text["Text settings<br/>[useTextSettings.ts]"]
  node_position["Position controls<br/>[usePosition.ts]"]
  node_canvas["Canvas preview<br/>[Canvas.tsx]"]
  node_drawing["Canvas drawing"]
end

subgraph group_features["Editor features"]
  node_duo["Duo mode<br/>[useDuoMode.ts]"]
  node_duo_panel["Duo controls<br/>[DuoModePanel.tsx]"]
  node_history["Edit history<br/>[useHistory.ts]"]
  node_history_panel["History controls<br/>[HistoryPanel.tsx]"]
  node_gallery_panel["Gallery controls<br/>[GalleryPanel.tsx]"]
  node_gallery_upload["Gallery submission"]
end

subgraph group_identity["Identity and storage"]
  node_auth_hook["Auth state<br/>[useAuth.ts]"]
  node_auth_service["Auth service<br/>[auth.service.ts]"]
  node_auth_storage[("Auth storage<br/>[storage.service.ts]")]
end

subgraph group_platform["Export and platform"]
  node_export["Export actions<br/>[useExport.ts]"]
  node_upload["Storage upload<br/>[storageUpload.ts]"]
  node_gallery_service["Gallery utilities<br/>[galleryUtils.ts]"]
  node_android["Android gallery bridge"]
  node_native_utils["Native platform<br/>[saveToGallery.ts]"]
end

node_user(("User"))
node_pass(("SEKAI Pass"))
node_remote_storage[("Upload storage")]
node_device(("Device clipboard and files"))
node_gallery[("Sticker gallery")]

node_user -->|"edits in"| node_app
node_app -->|"renders"| node_picker
node_app -->|"loads character"| node_character
node_app -->|"configures text"| node_text
node_app -->|"controls placement"| node_position
node_app -->|"renders preview"| node_canvas
node_canvas -->|"draws composition"| node_drawing
node_app -->|"configures duo"| node_duo
node_app -->|"renders controls"| node_duo_panel
node_duo_panel -->|"updates settings"| node_duo
node_app -->|"saves and loads"| node_history
node_app -->|"renders records"| node_history_panel
node_app -->|"renders controls"| node_gallery_panel
node_gallery_panel -->|"opens submission"| node_gallery_upload
node_gallery_upload -->|"prepares submission"| node_gallery_service
node_gallery_service -->|"uploads sticker"| node_upload
node_upload -->|"sends file"| node_remote_storage
node_gallery_service -.->|"submits entry"| node_gallery
node_app -->|"uses identity"| node_auth_hook
node_auth_hook -->|"checks and changes"| node_auth_service
node_auth_service -->|"reads and writes"| node_auth_storage
node_auth_service -->|"authenticates"| node_pass
node_app -->|"starts export"| node_export
node_export -->|"downloads or copies"| node_device
node_export -.->|"saves on Android"| node_native_utils
node_native_utils -.->|"invokes plugin"| node_android
node_android -.->|"writes image"| node_device

click node_app "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/App.tsx"
click node_picker "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/Picker.tsx"
click node_character "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useCharacter.ts"
click node_text "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useTextSettings.ts"
click node_position "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/usePosition.ts"
click node_canvas "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/Canvas.tsx"
click node_drawing "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useCanvasDrawing.ts"
click node_duo "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useDuoMode.ts"
click node_duo_panel "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/sections/DuoModePanel.tsx"
click node_history "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useHistory.ts"
click node_history_panel "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/sections/HistoryPanel.tsx"
click node_gallery_panel "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/sections/GalleryPanel.tsx"
click node_gallery_upload "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/GallerySubmitForm.tsx"
click node_auth_hook "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useAuth.ts"
click node_auth_service "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/services/auth.service.ts"
click node_auth_storage "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/services/storage.service.ts"
click node_export "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useExport.ts"
click node_upload "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/utils/storageUpload.ts"
click node_gallery_service "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/utils/galleryUtils.ts"
click node_android "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/android/app/src/main/java/de/sekai/stickers/SaveToGalleryPlugin.java"
click node_native_utils "https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/utils/saveToGallery.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_picker,node_character,node_text,node_position,node_canvas,node_drawing,node_user toneBlue
class node_duo,node_duo_panel,node_history,node_history_panel,node_gallery_panel,node_gallery_upload,node_remote_storage,node_gallery toneAmber
class node_auth_hook,node_auth_service,node_auth_storage toneMint
class node_export,node_upload,node_gallery_service,node_android,node_native_utils toneRose
class node_pass,node_device toneIndigo
```

## Components

### Sticker editor

- [App coordinator](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/App.tsx): `src/App.tsx`
- [Character picker](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/Picker.tsx): `src/components/Picker.tsx`
- [Character loading](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useCharacter.ts): `src/hooks/useCharacter.ts`
- [Text settings](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useTextSettings.ts): `src/hooks/useTextSettings.ts`
- [Position controls](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/usePosition.ts): `src/hooks/usePosition.ts`
- [Canvas preview](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/Canvas.tsx): `src/components/Canvas.tsx`
- [Canvas drawing](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useCanvasDrawing.ts): `src/hooks/useCanvasDrawing.ts`

### Editor features

- [Duo mode](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useDuoMode.ts): `src/hooks/useDuoMode.ts`
- [Duo controls](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/sections/DuoModePanel.tsx): `src/components/sections/DuoModePanel.tsx`
- [Edit history](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useHistory.ts): `src/hooks/useHistory.ts`
- [History controls](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/sections/HistoryPanel.tsx): `src/components/sections/HistoryPanel.tsx`
- [Gallery controls](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/sections/GalleryPanel.tsx): `src/components/sections/GalleryPanel.tsx`
- [Gallery submission](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/components/GallerySubmitForm.tsx): `src/components/GallerySubmitForm.tsx`

### Identity and storage

- [Auth state](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useAuth.ts): `src/hooks/useAuth.ts`
- [Auth service](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/services/auth.service.ts): `src/services/auth.service.ts`
- [Auth storage](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/services/storage.service.ts): `src/services/storage.service.ts`

### Export and platform

- [Export actions](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/hooks/useExport.ts): `src/hooks/useExport.ts`
- [Storage upload](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/utils/storageUpload.ts): `src/utils/storageUpload.ts`
- [Gallery utilities](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/utils/galleryUtils.ts): `src/utils/galleryUtils.ts`
- [Android gallery bridge](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/android/app/src/main/java/de/sekai/stickers/SaveToGalleryPlugin.java): `android/app/src/main/java/de/sekai/stickers/SaveToGalleryPlugin.java`
- [Native platform](https://github.com/jrbtxus/sekai-stickers-apk/blob/main/src/utils/saveToGallery.ts): `src/utils/saveToGallery.ts`

### Other components

- **User**
- **SEKAI Pass**
- **Upload storage**
- **Device clipboard and files**
- **Sticker gallery**

## Connections

- User → App coordinator: edits in
- App coordinator → Character picker: renders
- App coordinator → Character loading: loads character
- App coordinator → Text settings: configures text
- App coordinator → Position controls: controls placement
- App coordinator → Canvas preview: renders preview
- Canvas preview → Canvas drawing: draws composition
- App coordinator → Duo mode: configures duo
- App coordinator → Duo controls: renders controls
- Duo controls → Duo mode: updates settings
- App coordinator → Edit history: saves and loads
- App coordinator → History controls: renders records
- App coordinator → Gallery controls: renders controls
- Gallery controls → Gallery submission: opens submission
- Gallery submission → Gallery utilities: prepares submission
- Gallery utilities → Storage upload: uploads sticker
- Storage upload → Upload storage: sends file
- Gallery utilities → Sticker gallery: submits entry
- App coordinator → Auth state: uses identity
- Auth state → Auth service: checks and changes
- Auth service → Auth storage: reads and writes
- Auth service → SEKAI Pass: authenticates
- App coordinator → Export actions: starts export
- Export actions → Device clipboard and files: downloads or copies
- Export actions → Native platform: saves on Android
- Native platform → Android gallery bridge: invokes plugin
- Android gallery bridge → Device clipboard and files: writes image