How maxzz/ngon-gen22 works
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: index.ts ngon store · 3-presets/index.tsx Presets · 1-editor/index.tsx Editor · App.tsx App
Components 30
App shell
Bootstraps and assembles the page chrome.
- main · Vite entry that mounts the app.
src/main.tsx - App · Composes header, main area, and footer.
src/App.tsx - Header · Top-level app header.
src/components/app1-header.tsx - Main area · Primary content region for sections.
src/components/app2-main.tsx - Footer · Bottom app footer.
src/components/app3-footer.tsx
N-gon domain
Shape generation and persisted shape state.
- ngon store · Exports the N-gon model layer.
src/store/ngon/index.ts - Generator · Core shape generation logic.
src/store/ngon/generator.ts - Shape types · N-gon shape data definitions.
src/store/ngon/types-shape.ts - Shape I/O · Loads and exports shape state.
src/store/ngon/shape-io.ts - Defaults · Base shape defaults.
src/store/ngon/new-shape-defaults.ts - Initial shapes · Initial JSON shape set.
src/store/ngon/shapes-initial-json.ts - Shape vault · Stored shape collection and persistence boundary.
src/store/ngon/shapes-vault.ts
Feature sections
Main interactive sections built around the domain model.
- Editor · Primary interactive workspace for adjusting generated shapes.
src/components/sections/1-editor/index.tsx - Left view · Visual/editor-facing workspace panel.
src/components/sections/1-editor/1-left-view.tsx - Right controls · Parameter and control panel.
src/components/sections/1-editor/2-right-controls.tsx - Boxes · Editor-specific box components and layout logic.
src/components/sections/1-editor/Boxes/index.tsx - Source code · Output-oriented view of the current shape model.
src/components/sections/2-source-code/index.tsx - Presets · Gallery for browsing preset shapes.
src/components/sections/3-presets/index.tsx - Preview list · Lists preset previews and supports ordering/selection.
src/components/sections/3-presets/previews-list.tsx - Preview box · Single preset preview tile.
src/components/sections/3-presets/preview-box.tsx - Title · Preset section title/header.
src/components/sections/3-presets/title.tsx - Multiplication · Exploratory transformation/repetition panel.
src/components/sections/4-multiplication/index.tsx
Shared UI
Reusable controls and interaction primitives.
- Section UI · Accordion and section-pane primitives.
src/components/UI/Section/UISection.tsx - Sliders · Shared slider controls used across the app.
src/components/UI/Slider/Slider.tsx - Icons · Reusable icon registry and variants.
src/components/UI/Icons/index.tsx - Drag list · Reusable drag-and-drop list component.
src/components/UI/nun/drag-list/DragList.tsx - Input hooks · Numeric input and previous-state helpers.
src/hooks/useNumberInput.ts - Utils · Shared low-level utilities for movement, debounce, formatting, and ids.
src/utils/helpers.ts
Connections 42
- 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.