# NodeMatrix — AI & Developer Information Map

NodeMatrix is a Visual Block Programming IDE and Software-as-a-Service (SaaS) application that compiles drag-and-drop block diagrams into fully functional web applications (HTML5/React), desktop applications (Python PyQt5), and signed Android installer packages (Cordova APKs).

## Core Capabilities
- **Universal Node Logic**: Visual blocks representing constants, variables, math, logic gates, arrays, objects, flow control, persistent database tables, and API integrations.
- **UI Designer**: A drag-and-resize responsive UI editor that links visual components (buttons, text inputs, progress bars, tables, charts, maps) directly to logic streams.
- **Visual Neural Networks**: Direct assembly of dense layers, normalization layers, activation functions, and optimizer chains to execute neural network model training in-browser or offscreen.
- **Vast Example App Gallery**: One-click imports of templates such as click counters, stopwatch timers, full calculator logic, AI cameras, and persistent login dashboards.
- **AI Text-to-App Recipes**: Natural language prompts are compiled into plaintext multi-workspace graph recipe files that initialize functional visual diagrams.

---

## Site Navigation Map
- **Landing Page & Authentication** (`/`): Core features, simple pricing (Free and Pro), and integrated Google/GitHub signup.
- **Visual Programming Workspace** (`/ide`): React Flow-based logic canvas and UI designer workspace with real-time runner preview.
- **Documentation & Tutorials** (`/tutorial`): Searchable index of all 100+ blocks, including input/output signatures, screenshot mockups, and common use cases.
- **Example Showcase Gallery** (`/examples`): Curated gallery of 15+ pre-built applications with interactive "Load This App" links that launch direct to the IDE.

---

## Block Programming Node Definitions

### UI Elements — Inputs & Controls
- `uiInput`: Text input box. Outputs string value.
- `uiRichTextEditor`: WYSIWYG editor. Outputs HTML & plain text.
- `uiDateInput`: Date picker calendar. Outputs YYYY-MM-DD string.
- `uiButton`: Clickable action button. Emits pulse triggers.
- `uiCheckbox`: Toggle checkbox. Outputs boolean.
- `uiSlider`: Ranges controller slider. Outputs numeric bounds.
- `uiDropdown`: Dynamic select options. Outputs selected item.
- `uiRadioGroup`: Single select choices list. Outputs option.
- `uiColorPicker`: Canvas color mixer. Outputs Hex value.
- `uiToggleSwitch`: modern pill-shaped toggle switch. Outputs boolean.

### UI Elements — Data Display & Media
- `uiDisplay`: Standard text, number, and HTML output display card.
- `uiProgressBar`: Progress bar showing range 0-100.
- `uiDataTable`: Grid table rendering. Takes JSON array of objects.
- `uiImage`: Renders pictures from URL or Base64 data.
- `uiVideo`: Responsive HTML5 MP4 player.
- `uiIframe`: Standard website iframe frame embed.
- `uiMap`: Leaflet Geographic map coordinates loader.
- `uiBarChart` / `uiLineChart` / `uiPieChart`: Plots structured numeric arrays.

### Constants & Variables
- `numberInput` / `textInput` / `booleanInput`: Steady constant outputs.
- `jsonInput`: Parses JSON text into a Javascript object/dictionary.

### Math Operations
- `adder` / `subtractor` / `multiplier` / `divider`: Basic arithmetic on 2-3 inputs.
- `modulo`: Calculates dividend remainders.
- `power`: Base raised to exponential exponent.
- `random`: Emits a decimal between configured Min and Max limits.
- `clamp`: Clamps range numbers to upper and lower caps.

### Logic Gates
- `equals` / `greaterThan`: Compares inputs. Outputs boolean.
- `andGate` / `orGate` / `notGate`: Combines logical flags.
- `ternaryIf`: If/else branch decider.

### Persistence & Storage
- `localSave`: Persists keys and values to localStorage.
- `localLoad`: Retreives keys and values from localStorage.
- `localDatabase`: Stateful key-value, IndexedDB, or SQLite query client.

### Neural Network Modules
- `nnInput` / `nnDense` / `nnActivation` / `nnOutput`: Feeds layers and forward passes.
- `nnFlatten` / `nnConcat` / `nnNormalize` / `nnLossMSE`: Standard matrix operations.

---

## Text Graph Recipe Format

Projects are saved as Plaintext Multi-Workspace Graph Recipes. AI agents can read and write these files directly:

```text
=== MULTI-WORKSPACE GRAPH RECIPE ===

Workspaces:
- [ws_default] Name: "Screen 1" | ViewMode: "logic"

=== WORKSPACE ws_default ===
Config:
{"canvasWidth":800,"canvasHeight":600}

Nodes:
- [node_a] Type: numberInput | Value: 5 | Pos: {"x":100,"y":100}
- [node_b] Type: numberInput | Value: 10 | Pos: {"x":100,"y":250}
- [node_c] Type: adder | Pos: {"x":350,"y":180}
- [node_d] Type: systemPrint | Pos: {"x":550,"y":180}

Connections:
- node_a (out) --> node_c (in_a)
- node_b (out) --> node_c (in_b)
- node_c (out) --> node_d (val)

====================
```