# shinzuu/prism architecture

> Architecture diagram of the GitHub repository shinzuu/prism, 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/shinzuu/prism
- Repository: https://github.com/shinzuu/prism

## Overview

prism is an image-themed component gallery: visitors browse interactive component examples, while the theme engine derives palette tokens from a wallpaper. Its principal stages are gallery discovery, opening a component example, and interacting with that example; a separate registry validates component entries at build time. The README also describes prompt provenance and contrast-safe tokens. Gallery-page source is not present in the supplied tree, so its node has no path; the component nodes below are representative, not an exhaustive inventory.

Main entry points: [`components-src`](https://github.com/shinzuu/prism/tree/main/components-src) (Component examples), [`public/theme.js`](https://github.com/shinzuu/prism/blob/main/public/theme.js) (Theme engine), [`src/lib/registry.js`](https://github.com/shinzuu/prism/blob/main/src/lib/registry.js) (Component registry), [`components-src/switch-scanning-menu/Component.tsx`](https://github.com/shinzuu/prism/blob/main/components-src/switch-scanning-menu/Component.tsx) (Switch scanning menu)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_gallery["Gallery and catalog"]
  node_gallery_pages["Gallery pages"]
  node_registry["Component registry<br/>[registry.js]"]
  node_components["Component examples"]
end

subgraph group_theme["Image theme"]
  node_theme_engine["Theme engine<br/>[theme.js]"]
  node_palette["Palette tokens"]
  node_preview_frames["Preview frames"]
end

subgraph group_interaction["Interaction examples"]
  node_scanning_menu["Switch scanning menu<br/>[Component.tsx]"]
  node_magic_drag["Magic plus drag<br/>[Component.tsx]"]
  node_pane_stack["Sliding pane stack<br/>[Component.tsx]"]
  node_overflow_toolbar["Priority overflow toolbar<br/>[Component.tsx]"]
  node_safe_hover["Safe triangle hover<br/>[Component.tsx]"]
  node_snap_canvas["Snap guide canvas<br/>[script.js]"]
end

subgraph group_visual["Data and forms"]
  node_convergence["Convergence trace<br/>[Component.tsx]"]
  node_outlier_heatmap["Outlier heatmap<br/>[script.js]"]
  node_address_form["Country address form<br/>[script.js]"]
  node_visual_examples["Other visual examples"]
end

node_visitor(("Visitor"))

node_visitor -->|"browses"| node_gallery_pages
node_gallery_pages -->|"presents examples"| node_components
node_registry -->|"loads and validates"| node_components
node_theme_engine -->|"derives tokens"| node_palette
node_theme_engine -->|"posts tokens"| node_preview_frames
node_components -->|"includes"| node_scanning_menu
node_components -->|"includes"| node_magic_drag
node_components -->|"includes"| node_pane_stack
node_components -->|"includes"| node_overflow_toolbar
node_components -->|"includes"| node_safe_hover
node_components -->|"includes"| node_snap_canvas
node_components -->|"includes"| node_convergence
node_components -->|"includes"| node_outlier_heatmap
node_components -->|"includes"| node_address_form
node_components -->|"includes"| node_visual_examples

click node_registry "https://github.com/shinzuu/prism/blob/main/src/lib/registry.js"
click node_components "https://github.com/shinzuu/prism/tree/main/components-src"
click node_theme_engine "https://github.com/shinzuu/prism/blob/main/public/theme.js"
click node_scanning_menu "https://github.com/shinzuu/prism/blob/main/components-src/switch-scanning-menu/Component.tsx"
click node_magic_drag "https://github.com/shinzuu/prism/blob/main/components-src/magic-plus-drag/Component.tsx"
click node_pane_stack "https://github.com/shinzuu/prism/blob/main/components-src/sliding-pane-stack/Component.tsx"
click node_overflow_toolbar "https://github.com/shinzuu/prism/blob/main/components-src/priority-overflow-toolbar/Component.tsx"
click node_safe_hover "https://github.com/shinzuu/prism/blob/main/components-src/safe-triangle-hover/Component.tsx"
click node_snap_canvas "https://github.com/shinzuu/prism/blob/main/components-src/snap-guide-canvas/script.js"
click node_convergence "https://github.com/shinzuu/prism/blob/main/components-src/convergence-trace/Component.tsx"
click node_outlier_heatmap "https://github.com/shinzuu/prism/blob/main/components-src/outlier-heatmap/script.js"
click node_address_form "https://github.com/shinzuu/prism/blob/main/components-src/country-address-form/script.js"
click node_visual_examples "https://github.com/shinzuu/prism/tree/main/components-src"

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_gallery_pages,node_registry,node_components toneBlue
class node_theme_engine,node_palette,node_preview_frames toneAmber
class node_scanning_menu,node_magic_drag,node_pane_stack,node_overflow_toolbar,node_safe_hover,node_snap_canvas toneMint
class node_convergence,node_outlier_heatmap,node_address_form,node_visual_examples toneRose
class node_visitor toneIndigo
```

## Components

### Gallery and catalog

- **Gallery pages**
- [Component registry](https://github.com/shinzuu/prism/blob/main/src/lib/registry.js): `src/lib/registry.js`
- [Component examples](https://github.com/shinzuu/prism/tree/main/components-src): `components-src`

### Image theme

- [Theme engine](https://github.com/shinzuu/prism/blob/main/public/theme.js): `public/theme.js`
- **Palette tokens**
- **Preview frames**

### Interaction examples

- [Switch scanning menu](https://github.com/shinzuu/prism/blob/main/components-src/switch-scanning-menu/Component.tsx): `components-src/switch-scanning-menu/Component.tsx`
- [Magic plus drag](https://github.com/shinzuu/prism/blob/main/components-src/magic-plus-drag/Component.tsx): `components-src/magic-plus-drag/Component.tsx`
- [Sliding pane stack](https://github.com/shinzuu/prism/blob/main/components-src/sliding-pane-stack/Component.tsx): `components-src/sliding-pane-stack/Component.tsx`
- [Priority overflow toolbar](https://github.com/shinzuu/prism/blob/main/components-src/priority-overflow-toolbar/Component.tsx): `components-src/priority-overflow-toolbar/Component.tsx`
- [Safe triangle hover](https://github.com/shinzuu/prism/blob/main/components-src/safe-triangle-hover/Component.tsx): `components-src/safe-triangle-hover/Component.tsx`
- [Snap guide canvas](https://github.com/shinzuu/prism/blob/main/components-src/snap-guide-canvas/script.js): `components-src/snap-guide-canvas/script.js`

### Data and forms

- [Convergence trace](https://github.com/shinzuu/prism/blob/main/components-src/convergence-trace/Component.tsx): `components-src/convergence-trace/Component.tsx`
- [Outlier heatmap](https://github.com/shinzuu/prism/blob/main/components-src/outlier-heatmap/script.js): `components-src/outlier-heatmap/script.js`
- [Country address form](https://github.com/shinzuu/prism/blob/main/components-src/country-address-form/script.js): `components-src/country-address-form/script.js`
- [Other visual examples](https://github.com/shinzuu/prism/tree/main/components-src): `components-src`

### Other components

- **Visitor**

## Connections

- Visitor → Gallery pages: browses
- Gallery pages → Component examples: presents examples
- Component registry → Component examples: loads and validates
- Theme engine → Palette tokens: derives tokens
- Theme engine → Preview frames: posts tokens
- Component examples → Switch scanning menu: includes
- Component examples → Magic plus drag: includes
- Component examples → Sliding pane stack: includes
- Component examples → Priority overflow toolbar: includes
- Component examples → Safe triangle hover: includes
- Component examples → Snap guide canvas: includes
- Component examples → Convergence trace: includes
- Component examples → Outlier heatmap: includes
- Component examples → Country address form: includes
- Component examples → Other visual examples: includes