# oleg-perevyshin/elementsui architecture

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

- Interactive diagram: https://gitdiagram.com/oleg-perevyshin/elementsui
- Repository: https://github.com/oleg-perevyshin/elementsui

## Overview

This is a Svelte 5 UI-component library for device-interface builders, with a live component gallery. The main workflow is an integrating application importing the public API, supplying component values or device data, and rendering interactive controls, visualizations, maps, and device widgets. Builder-facing property editors configure components, while shared primitives support those editors and drag-based ordering. The README documents broader capabilities than the sampled implementation excerpts; the graph preserves those branches using paths present in the tree, without inferring unsampled internal wiring.

Main entry points: [`src/lib/index.ts`](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/index.ts) (Library exports), [`src/lib/Table/TableProps.svelte`](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Table/TableProps.svelte) (Table property editor), [`src/lib/Input/InputProps.svelte`](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Input/InputProps.svelte) (Input property editor), [`src/routes/+layout.svelte`](https://github.com/oleg-perevyshin/elementsui/blob/main/src/routes/%2Blayout.svelte) (Gallery shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Public API"]
  node_exports["Library exports<br/>[index.ts]"]
  node_types["Component types<br/>[types.ts]"]
end

subgraph group_controls["Interface Components"]
  node_form["Inputs and selectors<br/>[Input.svelte]"]
  node_actions["Buttons and toggles<br/>[Button.svelte]"]
  node_data["Tables and charts<br/>[Table.svelte]"]
  node_other["Other UI controls"]
  node_modal["Modal dialogs<br/>[Modal.svelte]"]
end

subgraph group_builder["Builder Configuration"]
  node_dragging["Drag ordering<br/>[Dragging.svelte]"]
  node_inputprops["Input property editor<br/>[InputProps.svelte]"]
  node_tableprops["Table property editor<br/>[TableProps.svelte]"]
  node_propsshared["Property editor helpers<br/>[PropsGroup.svelte]"]
end

subgraph group_device["Device Visualizations"]
  node_widgets["Device widgets<br/>[WidgetWiFi.svelte]"]
  node_map["Device map<br/>[Map.svelte]"]
  node_mapwrap["MapLibre wrappers"]
end

subgraph group_gallery["Component Gallery"]
  node_gallerylayout["Gallery shell<br/>[+layout.svelte]"]
  node_gallery["Component showcase<br/>[+page.svelte]"]
end

node_consumer(("Integrating application"))

node_consumer -->|"imports API"| node_exports
node_exports -->|"exports types"| node_types
node_exports -->|"exports controls"| node_form
node_exports -->|"exports controls"| node_actions
node_exports -->|"exports controls"| node_data
node_exports -->|"exports controls"| node_other
node_exports -->|"exports dialogs"| node_modal
node_exports -->|"exports utility"| node_dragging
node_exports -->|"exports widgets"| node_widgets
node_exports -->|"exports map"| node_map
node_inputprops -->|"configures"| node_form
node_tableprops -->|"configures"| node_data
node_inputprops -->|"uses helpers"| node_propsshared
node_tableprops -->|"uses helpers"| node_propsshared
node_tableprops -->|"opens settings"| node_modal
node_map -->|"composes wrappers"| node_mapwrap
node_gallerylayout -->|"imports API"| node_exports
node_gallerylayout -->|"frames showcase"| node_gallery
node_gallery -->|"renders components"| node_exports

click node_exports "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/index.ts"
click node_types "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/types.ts"
click node_form "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Input/Input.svelte"
click node_actions "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Button/Button.svelte"
click node_data "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Table/Table.svelte"
click node_other "https://github.com/oleg-perevyshin/elementsui/tree/main/src/lib"
click node_modal "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Modal.svelte"
click node_dragging "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Dragging.svelte"
click node_inputprops "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Input/InputProps.svelte"
click node_tableprops "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Table/TableProps.svelte"
click node_propsshared "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/PropsGroup.svelte"
click node_widgets "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/WidgetWiFi/WidgetWiFi.svelte"
click node_map "https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Map/Map.svelte"
click node_mapwrap "https://github.com/oleg-perevyshin/elementsui/tree/main/src/lib/Map/mapWrapper"
click node_gallerylayout "https://github.com/oleg-perevyshin/elementsui/blob/main/src/routes/%2Blayout.svelte"
click node_gallery "https://github.com/oleg-perevyshin/elementsui/blob/main/src/routes/components/all/%2Bpage.svelte"

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_exports,node_types toneBlue
class node_form,node_actions,node_data,node_other,node_modal toneAmber
class node_dragging,node_inputprops,node_tableprops,node_propsshared toneMint
class node_widgets,node_map,node_mapwrap toneRose
class node_gallerylayout,node_gallery,node_consumer toneIndigo
```

## Components

### Public API

- [Library exports](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/index.ts): `src/lib/index.ts`
- [Component types](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/types.ts): `src/lib/types.ts`

### Interface Components

- [Inputs and selectors](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Input/Input.svelte): `src/lib/Input/Input.svelte`
- [Buttons and toggles](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Button/Button.svelte): `src/lib/Button/Button.svelte`
- [Tables and charts](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Table/Table.svelte): `src/lib/Table/Table.svelte`
- [Other UI controls](https://github.com/oleg-perevyshin/elementsui/tree/main/src/lib): `src/lib`
- [Modal dialogs](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Modal.svelte): `src/lib/Modal.svelte`

### Builder Configuration

- [Drag ordering](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Dragging.svelte): `src/lib/Dragging.svelte`
- [Input property editor](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Input/InputProps.svelte): `src/lib/Input/InputProps.svelte`
- [Table property editor](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Table/TableProps.svelte): `src/lib/Table/TableProps.svelte`
- [Property editor helpers](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/PropsGroup.svelte): `src/lib/PropsGroup.svelte`

### Device Visualizations

- [Device widgets](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/WidgetWiFi/WidgetWiFi.svelte): `src/lib/WidgetWiFi/WidgetWiFi.svelte`
- [Device map](https://github.com/oleg-perevyshin/elementsui/blob/main/src/lib/Map/Map.svelte): `src/lib/Map/Map.svelte`
- [MapLibre wrappers](https://github.com/oleg-perevyshin/elementsui/tree/main/src/lib/Map/mapWrapper): `src/lib/Map/mapWrapper`

### Component Gallery

- [Gallery shell](https://github.com/oleg-perevyshin/elementsui/blob/main/src/routes/%2Blayout.svelte): `src/routes/+layout.svelte`
- [Component showcase](https://github.com/oleg-perevyshin/elementsui/blob/main/src/routes/components/all/%2Bpage.svelte): `src/routes/components/all/+page.svelte`

### Other components

- **Integrating application**

## Connections

- Integrating application → Library exports: imports API
- Library exports → Component types: exports types
- Library exports → Inputs and selectors: exports controls
- Library exports → Buttons and toggles: exports controls
- Library exports → Tables and charts: exports controls
- Library exports → Other UI controls: exports controls
- Library exports → Modal dialogs: exports dialogs
- Library exports → Drag ordering: exports utility
- Library exports → Device widgets: exports widgets
- Library exports → Device map: exports map
- Input property editor → Inputs and selectors: configures
- Table property editor → Tables and charts: configures
- Input property editor → Property editor helpers: uses helpers
- Table property editor → Property editor helpers: uses helpers
- Table property editor → Modal dialogs: opens settings
- Device map → MapLibre wrappers: composes wrappers
- Gallery shell → Library exports: imports API
- Gallery shell → Component showcase: frames showcase
- Component showcase → Library exports: renders components