# maxzz/ngon-gen22 architecture

> Architecture diagram of the GitHub repository maxzz/ngon-gen22, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/maxzz/ngon-gen22
- Repository: https://github.com/maxzz/ngon-gen22

## Overview

1. **Project shape**
   - This is a **Vite + React + TypeScript** single-page app for an **N-gon generator** / shape-design playground.
   - The repository is split cleanly into **domain logic**, **section-level features**, and **shared UI primitives**.

2. **App shell**
   - `src/main.tsx` bootstraps the app.
   - `src/App.tsx` assembles the page from three outer pieces: `app1-header`, `app2-main`, and `app3-footer`.
   - The layout is then styled by a mix of global CSS, SCSS, and Tailwind-based utilities.

3. **Core domain boundary: `src/store/ngon`**
   - This is the main model layer for the generator.
   - It contains shape generation and shape data concerns: `generator.ts`, `types-shape.ts`, `shape-io.ts`, `new-shape-defaults.ts`, `shapes-initial-json.ts`, and `shapes-vault.ts`.
   - If you are drawing an architecture diagram, this folder is the central “engine” that produces and manages N-gon shape state.

4. **Editor section**
   - `src/components/sections/1-editor` is the main interactive workspace.
   - It is split into a **left view** and **right controls**, plus a `Boxes` submodule.
   - This section is where users likely manipulate the generated shape and tune parameters, with the store/ngon layer providing the shape state and generation logic.

5. **Source-code section**
   - `src/components/sections/2-source-code` is the output/export-oriented view.
   - Based on the repository name and file placement, it likely shows the generated representation of the current shape state or the code/config behind it.
   - This is a downstream consumer of the same ng-on model rather than a separate engine.

6. **Presets and previews**
   - `src/components/sections/3-presets` is a curated gallery for preset shapes.
   - It includes `previews-list`, `preview-box`, `title`, and drag behavior (`Dragging.css`), suggesting users can browse and possibly reorder/select preset variants.
   - The preview images live under `src/assets/previews`, including a dedicated `shapes` set.

7. **Multiplication section**
   - `src/components/sections/4-multiplication` is another feature section, likely showing a transformation or repetition mode related to the generator.
   - It appears to be a separate exploratory panel rather than part of the core editor loop.

8. **Shared UI system**
   - `src/components/UI` contains reusable controls used across the app: accordions, section panes, sliders, tooltips, toasts, and list transitions.
   - The icon system is organized under `UI/Icons` with “normal” and “symbols” variants.
   - `UI/nun/drag-list` suggests a reusable drag-and-drop list primitive used by at least the presets area.

9. **Input and interaction helpers**
   - Hooks such as `useNumberInput`, `useFloatInput`, and `usePrevious` support controlled numeric editing and state transitions.
   - Utilities like `clamp`, `debounce`, `move`, `uuid`, and `classnames` provide low-level behavior shared by editor and UI components.
   - These utilities act as the glue between user input and the generator/store layer.

10. **Styling and design system**
   - Styling is hybrid: global styles (`index.css`), component styles (`App.scss`, `Slider.scss`, module SCSS/CSS), and Tailwind.
   - The `tailwind` folder includes custom plugins for cursors, data-state styling, debug utilities, overflow behavior, and range inputs.
   - This indicates a heavily customized interaction-heavy UI rather than a plain content site.

11. **Asset pipeline**
   - `src/assets` contains the visual vocabulary of the app: cursors, icons, previews, and source artwork.
   - The `.ai` source files and preview exports suggest the project uses authored design assets as part of the generator’s presentation and documentation.

12. **Architecture in one flow**
   - User input enters through sliders, drag lists, and editor controls.
   - Those interactions update ng-on shape state in `store/ngon`.
   - Sections then render that state as editable visuals, presets, or source-code-like output.
   - The shared UI layer keeps the interaction patterns consistent across sections.

13. **Main boundaries to preserve in a diagram**
   - **Domain engine:** `store/ngon`
   - **Feature sections:** editor, source code, presets, multiplication
   - **Shared primitives:** `components/UI`
   - **Presentation assets/styles:** `assets`, SCSS, Tailwind
   - This separation is the clearest way to map the repository’s architecture.

Main entry points: [`src/store/ngon/index.ts`](https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/index.ts) (ngon store), [`src/components/sections/3-presets/index.tsx`](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/index.tsx) (Presets), [`src/components/sections/1-editor/index.tsx`](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/index.tsx) (Editor), [`src/App.tsx`](https://github.com/maxzz/ngon-gen22/blob/master/src/App.tsx) (App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_app["App shell"]
  node_node_main(("main<br/>entrypoint<br/>[main.tsx]"))
  node_node_app["App<br/>shell<br/>[App.tsx]"]
  node_node_header["Header<br/>layout<br/>[app1-header.tsx]"]
  node_node_main_area["Main area<br/>layout<br/>[app2-main.tsx]"]
  node_node_footer["Footer<br/>layout<br/>[app3-footer.tsx]"]
end

subgraph group_grp_domain["N-gon domain"]
  node_node_ngon_index["ngon store<br/>domain facade<br/>[index.ts]"]
  node_node_generator{{"Generator<br/>shape engine<br/>[generator.ts]"}}
  node_node_shape_types["Shape types<br/>domain types<br/>[types-shape.ts]"]
  node_node_shape_io["Shape I/O<br/>serialization<br/>[shape-io.ts]"]
  node_node_defaults["Defaults<br/>seed data"]
  node_node_initial["Initial shapes<br/>seed data"]
  node_node_vault[("Shape vault<br/>shape catalog<br/>[shapes-vault.ts]")]
end

subgraph group_grp_sections["Feature sections"]
  node_node_editor["Editor<br/>feature section<br/>[index.tsx]"]
  node_node_editor_left["Left view<br/>editor panel<br/>[1-left-view.tsx]"]
  node_node_editor_right["Right controls<br/>editor panel"]
  node_node_editor_boxes["Boxes<br/>editor submodule<br/>[index.tsx]"]
  node_node_source["Source code<br/>feature section<br/>[index.tsx]"]
  node_node_presets["Presets<br/>feature section<br/>[index.tsx]"]
  node_node_preview_list["Preview list<br/>preset browser<br/>[previews-list.tsx]"]
  node_node_preview_box["Preview box<br/>preset item<br/>[preview-box.tsx]"]
  node_node_title["Title<br/>preset chrome<br/>[title.tsx]"]
  node_node_multiplication["Multiplication<br/>feature section<br/>[index.tsx]"]
end

subgraph group_grp_ui["Shared UI"]
  node_node_ui_section["Section UI<br/>shared layout<br/>[UISection.tsx]"]
  node_node_ui_slider["Sliders<br/>input control<br/>[Slider.tsx]"]
  node_node_ui_icons["Icons<br/>icon set<br/>[index.tsx]"]
  node_node_ui_draglist["Drag list<br/>interaction primitive<br/>[DragList.tsx]"]
  node_node_hooks["Input hooks<br/>react hooks<br/>[useNumberInput.ts]"]
  node_node_utils["Utils<br/>helpers<br/>[helpers.ts]"]
end

subgraph group_grp_platform["Styling and assets"]
  node_node_styles["Styles<br/>styling system<br/>[index.css]"]
  node_node_assets[("Assets")]
end

node_node_main -->|"mounts"| node_node_app
node_node_app -->|"uses"| node_node_header
node_node_app -->|"uses"| node_node_main_area
node_node_app -->|"uses"| node_node_footer
node_node_main_area -->|"hosts"| node_node_editor
node_node_main_area -->|"hosts"| node_node_source
node_node_main_area -->|"hosts"| node_node_presets
node_node_main_area -->|"hosts"| node_node_multiplication
node_node_editor -->|"splits into"| node_node_editor_left
node_node_editor -->|"splits into"| node_node_editor_right
node_node_editor -->|"uses"| node_node_editor_boxes
node_node_editor -->|"drives"| node_node_ngon_index
node_node_source -->|"reads"| node_node_ngon_index
node_node_presets -->|"contains"| node_node_preview_list
node_node_presets -->|"contains"| node_node_title
node_node_preview_list -->|"repeats"| node_node_preview_box
node_node_preview_list -->|"uses"| node_node_ui_draglist
node_node_preview_list -->|"shows"| node_node_assets
node_node_ngon_index -->|"exports"| node_node_generator
node_node_ngon_index -->|"exports"| node_node_shape_types
node_node_ngon_index -->|"exports"| node_node_shape_io
node_node_ngon_index -->|"exports"| node_node_defaults
node_node_ngon_index -->|"exports"| node_node_initial
node_node_ngon_index -->|"exports"| node_node_vault
node_node_shape_io -->|"persists"| node_node_vault
node_node_generator -->|"depends on"| node_node_shape_types
node_node_generator -->|"seeds"| node_node_defaults
node_node_generator -->|"boots"| node_node_initial
node_node_editor_right -->|"uses"| node_node_ui_slider
node_node_editor_right -->|"uses"| node_node_hooks
node_node_ui_slider -->|"coordinates"| node_node_hooks
node_node_ui_section -->|"frames"| node_node_editor
node_node_ui_section -->|"frames"| node_node_presets
node_node_ui_icons -->|"decorates"| node_node_editor_right
node_node_ui_icons -->|"decorates"| node_node_presets
node_node_utils -->|"supports"| node_node_editor_right
node_node_utils -->|"supports"| node_node_ui_draglist
node_node_styles -->|"styles"| node_node_app
node_node_styles -->|"styles"| node_node_ui_slider
node_node_styles -->|"styles"| node_node_presets
node_node_assets -->|"feeds"| node_node_presets
node_node_assets -->|"feeds"| node_node_app

click node_node_main "https://github.com/maxzz/ngon-gen22/blob/master/src/main.tsx"
click node_node_app "https://github.com/maxzz/ngon-gen22/blob/master/src/App.tsx"
click node_node_header "https://github.com/maxzz/ngon-gen22/blob/master/src/components/app1-header.tsx"
click node_node_main_area "https://github.com/maxzz/ngon-gen22/blob/master/src/components/app2-main.tsx"
click node_node_footer "https://github.com/maxzz/ngon-gen22/blob/master/src/components/app3-footer.tsx"
click node_node_ngon_index "https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/index.ts"
click node_node_generator "https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/generator.ts"
click node_node_shape_types "https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/types-shape.ts"
click node_node_shape_io "https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/shape-io.ts"
click node_node_defaults "https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/new-shape-defaults.ts"
click node_node_initial "https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/shapes-initial-json.ts"
click node_node_vault "https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/shapes-vault.ts"
click node_node_editor "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/index.tsx"
click node_node_editor_left "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/1-left-view.tsx"
click node_node_editor_right "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/2-right-controls.tsx"
click node_node_editor_boxes "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/Boxes/index.tsx"
click node_node_source "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/2-source-code/index.tsx"
click node_node_presets "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/index.tsx"
click node_node_preview_list "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/previews-list.tsx"
click node_node_preview_box "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/preview-box.tsx"
click node_node_title "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/title.tsx"
click node_node_multiplication "https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/4-multiplication/index.tsx"
click node_node_ui_section "https://github.com/maxzz/ngon-gen22/blob/master/src/components/UI/Section/UISection.tsx"
click node_node_ui_slider "https://github.com/maxzz/ngon-gen22/blob/master/src/components/UI/Slider/Slider.tsx"
click node_node_ui_icons "https://github.com/maxzz/ngon-gen22/blob/master/src/components/UI/Icons/index.tsx"
click node_node_ui_draglist "https://github.com/maxzz/ngon-gen22/blob/master/src/components/UI/nun/drag-list/DragList.tsx"
click node_node_hooks "https://github.com/maxzz/ngon-gen22/blob/master/src/hooks/useNumberInput.ts"
click node_node_utils "https://github.com/maxzz/ngon-gen22/blob/master/src/utils/helpers.ts"
click node_node_styles "https://github.com/maxzz/ngon-gen22/blob/master/src/index.css"
click node_node_assets "https://github.com/maxzz/ngon-gen22/tree/master/src/assets"

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_node_main,node_node_app,node_node_header,node_node_main_area,node_node_footer toneBlue
class node_node_ngon_index,node_node_generator,node_node_shape_types,node_node_shape_io,node_node_defaults,node_node_initial,node_node_vault toneAmber
class node_node_editor,node_node_editor_left,node_node_editor_right,node_node_editor_boxes,node_node_source,node_node_presets,node_node_preview_list,node_node_preview_box,node_node_title,node_node_multiplication toneMint
class node_node_ui_section,node_node_ui_slider,node_node_ui_icons,node_node_ui_draglist,node_node_hooks,node_node_utils toneRose
class node_node_styles,node_node_assets toneIndigo
```

## Components

### App shell

Bootstraps and assembles the page chrome.

- [main](https://github.com/maxzz/ngon-gen22/blob/master/src/main.tsx): entrypoint · Vite entry that mounts the app. · `src/main.tsx`
- [App](https://github.com/maxzz/ngon-gen22/blob/master/src/App.tsx): shell · Composes header, main area, and footer. · `src/App.tsx`
- [Header](https://github.com/maxzz/ngon-gen22/blob/master/src/components/app1-header.tsx): layout · Top-level app header. · `src/components/app1-header.tsx`
- [Main area](https://github.com/maxzz/ngon-gen22/blob/master/src/components/app2-main.tsx): layout · Primary content region for sections. · `src/components/app2-main.tsx`
- [Footer](https://github.com/maxzz/ngon-gen22/blob/master/src/components/app3-footer.tsx): layout · Bottom app footer. · `src/components/app3-footer.tsx`

### N-gon domain

Shape generation and persisted shape state.

- [ngon store](https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/index.ts): domain facade · Exports the N-gon model layer. · `src/store/ngon/index.ts`
- [Generator](https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/generator.ts): shape engine · Core shape generation logic. · `src/store/ngon/generator.ts`
- [Shape types](https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/types-shape.ts): domain types · N-gon shape data definitions. · `src/store/ngon/types-shape.ts`
- [Shape I/O](https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/shape-io.ts): serialization · Loads and exports shape state. · `src/store/ngon/shape-io.ts`
- [Defaults](https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/new-shape-defaults.ts): seed data · Base shape defaults. · `src/store/ngon/new-shape-defaults.ts`
- [Initial shapes](https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/shapes-initial-json.ts): seed data · Initial JSON shape set. · `src/store/ngon/shapes-initial-json.ts`
- [Shape vault](https://github.com/maxzz/ngon-gen22/blob/master/src/store/ngon/shapes-vault.ts): shape catalog · Stored shape collection and persistence boundary. · `src/store/ngon/shapes-vault.ts`

### Feature sections

Main interactive sections built around the domain model.

- [Editor](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/index.tsx): feature section · Primary interactive workspace for adjusting generated shapes. · `src/components/sections/1-editor/index.tsx`
- [Left view](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/1-left-view.tsx): editor panel · Visual/editor-facing workspace panel. · `src/components/sections/1-editor/1-left-view.tsx`
- [Right controls](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/2-right-controls.tsx): editor panel · Parameter and control panel. · `src/components/sections/1-editor/2-right-controls.tsx`
- [Boxes](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/1-editor/Boxes/index.tsx): editor submodule · Editor-specific box components and layout logic. · `src/components/sections/1-editor/Boxes/index.tsx`
- [Source code](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/2-source-code/index.tsx): feature section · Output-oriented view of the current shape model. · `src/components/sections/2-source-code/index.tsx`
- [Presets](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/index.tsx): feature section · Gallery for browsing preset shapes. · `src/components/sections/3-presets/index.tsx`
- [Preview list](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/previews-list.tsx): preset browser · Lists preset previews and supports ordering/selection. · `src/components/sections/3-presets/previews-list.tsx`
- [Preview box](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/preview-box.tsx): preset item · Single preset preview tile. · `src/components/sections/3-presets/preview-box.tsx`
- [Title](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/3-presets/title.tsx): preset chrome · Preset section title/header. · `src/components/sections/3-presets/title.tsx`
- [Multiplication](https://github.com/maxzz/ngon-gen22/blob/master/src/components/sections/4-multiplication/index.tsx): feature section · Exploratory transformation/repetition panel. · `src/components/sections/4-multiplication/index.tsx`

### Shared UI

Reusable controls and interaction primitives.

- [Section UI](https://github.com/maxzz/ngon-gen22/blob/master/src/components/UI/Section/UISection.tsx): shared layout · Accordion and section-pane primitives. · `src/components/UI/Section/UISection.tsx`
- [Sliders](https://github.com/maxzz/ngon-gen22/blob/master/src/components/UI/Slider/Slider.tsx): input control · Shared slider controls used across the app. · `src/components/UI/Slider/Slider.tsx`
- [Icons](https://github.com/maxzz/ngon-gen22/blob/master/src/components/UI/Icons/index.tsx): icon set · Reusable icon registry and variants. · `src/components/UI/Icons/index.tsx`
- [Drag list](https://github.com/maxzz/ngon-gen22/blob/master/src/components/UI/nun/drag-list/DragList.tsx): interaction primitive · Reusable drag-and-drop list component. · `src/components/UI/nun/drag-list/DragList.tsx`
- [Input hooks](https://github.com/maxzz/ngon-gen22/blob/master/src/hooks/useNumberInput.ts): react hooks · Numeric input and previous-state helpers. · `src/hooks/useNumberInput.ts`
- [Utils](https://github.com/maxzz/ngon-gen22/blob/master/src/utils/helpers.ts): helpers · Shared low-level utilities for movement, debounce, formatting, and ids. · `src/utils/helpers.ts`

### Styling and assets

Presentation resources and build-time styling.

- [Styles](https://github.com/maxzz/ngon-gen22/blob/master/src/index.css): styling system · Global CSS, SCSS, and Tailwind configuration. · `src/index.css`
- [Assets](https://github.com/maxzz/ngon-gen22/tree/master/src/assets): design assets · Cursors, icons, previews, and source artwork. · `src/assets`

## Connections

- main → App: mounts · Entry point renders the app shell.
- App → Header: uses · App shell includes header.
- App → Main area: uses · App shell includes main content region.
- App → Footer: uses · App shell includes footer.
- Main area → Editor: hosts · Main region hosts the editor section.
- Main area → Source code: hosts · Main region hosts the source-code view.
- Main area → Presets: hosts · Main region hosts the preset gallery.
- Main area → Multiplication: hosts · Main region hosts the multiplication panel.
- Editor → Left view: splits into · Editor is organized into left and right panels.
- Editor → Right controls: splits into · Editor is organized into left and right panels.
- Editor → Boxes: uses · Editor composes box-specific subcomponents.
- Editor → ngon store: drives · Editor consumes the core shape model.
- Source code → ngon store: reads · Source view renders the current shape model.
- Presets → Preview list: contains · Preset section is built around a preview list.
- Presets → Title: contains · Preset section includes its title chrome.
- Preview list → Preview box: repeats · Preview list renders preset tiles.
- Preview list → Drag list: uses · Drag behavior is provided by shared drag list primitive.
- Preview list → Assets: shows · Previews are sourced from asset images.
- ngon store → Generator: exports · Facade exposes the generation engine.
- ngon store → Shape types: exports · Facade exposes shape types.
- ngon store → Shape I/O: exports · Facade exposes serialization helpers.
- ngon store → Defaults: exports · Facade exposes default shape seeds.
- ngon store → Initial shapes: exports · Facade exposes initial shapes.
- ngon store → Shape vault: exports · Facade exposes stored shapes.
- Shape I/O → Shape vault: persists · I/O layer mediates shape storage.
- Generator → Shape types: depends on · Generation operates over shape types.
- Generator → Defaults: seeds · Generator starts from default shape values.
- Generator → Initial shapes: boots · Initial JSON provides starting state.
- Right controls → Sliders: uses · Controls are built from shared sliders.
- Right controls → Input hooks: uses · Numeric edits are handled by shared hooks.
- Sliders → Input hooks: coordinates · Slider input is supported by numeric hooks.
- Section UI → Editor: frames · Shared section layout frames feature sections.
- Section UI → Presets: frames · Shared section layout frames feature sections.
- Icons → Right controls: decorates · Icons support interactive controls.
- Icons → Presets: decorates · Icons support preset browsing chrome.
- Utils → Right controls: supports · Utilities back control behavior and movement.
- Utils → Drag list: supports · Helpers underpin drag-and-drop behavior.
- Styles → App: styles · Global and component styles shape the app shell.
- Styles → Sliders: styles · Slider styling is customized via SCSS and Tailwind.
- Styles → Presets: styles · Preset section uses dedicated drag and display styles.
- Assets → Presets: feeds · Preset gallery is backed by preview assets.
- Assets → App: feeds · App shell uses branded visual assets.