# prasworld/vialiq architecture

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

- Interactive diagram: https://gitdiagram.com/prasworld/vialiq
- Repository: https://github.com/prasworld/vialiq

## Overview

This Nx workspace contains a form-builder remote and a shell app, alongside reusable libraries for rendering forms, UI components, state, mapping, translations, and design tokens. The principal visible workflow is a user editing a form: registered descriptors supply palette choices, drag-and-drop edits the schema, and validation rules evaluate field constraints. The tree and excerpts establish only some calls, so unverified connections between other libraries and apps are omitted; several capabilities are represented by their source directories rather than inspected implementations.

Main entry points: [`libs/form-builder/src/lib/services/dnd.service.ts`](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/services/dnd.service.ts) (Drag and Drop), [`libs/form-builder/src/lib/registry/builder-registry.service.ts`](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/registry/builder-registry.service.ts) (Builder Registry), [`libs/utilities/src/lib/i18n/angular/translation.service.ts`](https://github.com/prasworld/vialiq/blob/master/libs/utilities/src/lib/i18n/angular/translation.service.ts) (Angular Translation), [`apps/remote1/src/app/remote-entry/entry.ts`](https://github.com/prasworld/vialiq/blob/master/apps/remote1/src/app/remote-entry/entry.ts) (Builder Remote)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_apps["Applications"]
  node_shell["Shell App<br/>[app.ts]"]
  node_remote["Builder Remote<br/>[entry.ts]"]
  node_remote_routes["Remote Routes<br/>[app.routes.ts]"]
end

subgraph group_forms["Form Authoring"]
  node_builder["Builder UI<br/>[form-builder.ts]"]
  node_palette["Component Palette"]
  node_descriptor["Component Descriptors"]
  node_registry["Builder Registry"]
  node_dnd["Drag and Drop<br/>[dnd.service.ts]"]
  node_schema["Form Schema"]
  node_schema_types["Schema Types"]
  node_keygen["Key Generator"]
  node_validation["Rule Validation<br/>[rule-engine.ts]"]
  node_renderer["Form Renderer"]
end

subgraph group_shared["Shared Libraries"]
  node_automapper["Object Mapping<br/>[context.ts]"]
  node_state_sync["State Sync<br/>[sync-engine.ts]"]
  node_sync_transport["Sync Transport<br/>[transport.ts]"]
  node_i18n["Translation Engine"]
  node_translation_loader["Translation Loader"]
  node_translation_service["Angular Translation"]
end

subgraph group_ui["UI System"]
  node_web_components["Web Components<br/>[index.ts]"]
  node_overlay["Overlay Manager<br/>[overlay-manager.ts]"]
  node_combobox["Combobox Items"]
  node_listbox["Listbox Controls"]
  node_toast["Toast Service"]
  node_flux["Flux UI Tokens<br/>[index.ts]"]
  node_icons["Icon Library<br/>[index.ts]"]
end

node_user(("Form Author"))

node_user -->|"opens"| node_shell
node_remote_routes -->|"loads routes"| node_remote
node_remote -->|"uses"| node_builder
node_registry -->|"collects"| node_descriptor
node_registry -->|"registers choices"| node_builder
node_dnd -->|"edits schema"| node_schema
node_dnd -->|"looks up types"| node_registry
node_dnd -->|"generates keys"| node_keygen
node_dnd -->|"uses types"| node_schema_types
node_schema -->|"generates keys"| node_keygen
node_validation -->|"validates values"| node_schema_types
node_state_sync -.->|"sends updates"| node_sync_transport
node_translation_service -->|"uses engine"| node_i18n
node_translation_service -->|"loads translations"| node_translation_loader
node_i18n -->|"uses manifest types"| node_translation_loader
node_listbox -->|"filters items"| node_combobox
node_toast -.->|"presents notifications"| node_web_components
node_overlay -.->|"supports overlays"| node_web_components

click node_shell "https://github.com/prasworld/vialiq/blob/master/apps/shell/src/app/app.ts"
click node_remote "https://github.com/prasworld/vialiq/blob/master/apps/remote1/src/app/remote-entry/entry.ts"
click node_remote_routes "https://github.com/prasworld/vialiq/blob/master/apps/remote1/src/app/app.routes.ts"
click node_builder "https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/form-builder/form-builder.ts"
click node_palette "https://github.com/prasworld/vialiq/tree/master/libs/form-builder/src/lib/palette"
click node_descriptor "https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/types/component-descriptor.ts"
click node_registry "https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/registry/builder-registry.service.ts"
click node_dnd "https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/services/dnd.service.ts"
click node_schema "https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/services/form-schema.service.ts"
click node_schema_types "https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/types/component-schemas.ts"
click node_keygen "https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/services/key-generator.service.ts"
click node_validation "https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/validation/rule-engine.ts"
click node_renderer "https://github.com/prasworld/vialiq/blob/master/libs/form-renderer/src/lib/form-renderer.component.ts"
click node_automapper "https://github.com/prasworld/vialiq/blob/master/libs/automapper/src/lib/context.ts"
click node_state_sync "https://github.com/prasworld/vialiq/blob/master/libs/state-fp/src/sync/sync-engine.ts"
click node_sync_transport "https://github.com/prasworld/vialiq/blob/master/libs/state-fp/src/sync/transport.ts"
click node_i18n "https://github.com/prasworld/vialiq/blob/master/libs/utilities/src/lib/i18n/core/translation-engine.ts"
click node_translation_loader "https://github.com/prasworld/vialiq/blob/master/libs/utilities/src/lib/i18n/core/translation-loader.ts"
click node_translation_service "https://github.com/prasworld/vialiq/blob/master/libs/utilities/src/lib/i18n/angular/translation.service.ts"
click node_web_components "https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/index.ts"
click node_overlay "https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/base/overlay-manager.ts"
click node_combobox "https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/combobox/vi-combobox-item.ts"
click node_listbox "https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/shared/controllers/filter-controller.ts"
click node_toast "https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/toast/vi-toast-service.ts"
click node_flux "https://github.com/prasworld/vialiq/blob/master/libs/flux-ui/src/tokens/index.ts"
click node_icons "https://github.com/prasworld/vialiq/blob/master/libs/icons/src/index.ts"

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_shell,node_remote,node_remote_routes toneBlue
class node_builder,node_palette,node_descriptor,node_registry,node_dnd,node_schema,node_schema_types,node_keygen,node_validation,node_renderer toneAmber
class node_automapper,node_state_sync,node_sync_transport,node_i18n,node_translation_loader,node_translation_service toneMint
class node_web_components,node_overlay,node_combobox,node_listbox,node_toast,node_flux,node_icons toneRose
class node_user toneIndigo
```

## Components

### Applications

- [Shell App](https://github.com/prasworld/vialiq/blob/master/apps/shell/src/app/app.ts): `apps/shell/src/app/app.ts`
- [Builder Remote](https://github.com/prasworld/vialiq/blob/master/apps/remote1/src/app/remote-entry/entry.ts): `apps/remote1/src/app/remote-entry/entry.ts`
- [Remote Routes](https://github.com/prasworld/vialiq/blob/master/apps/remote1/src/app/app.routes.ts): `apps/remote1/src/app/app.routes.ts`

### Form Authoring

- [Builder UI](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/form-builder/form-builder.ts): `libs/form-builder/src/lib/form-builder/form-builder.ts`
- [Component Palette](https://github.com/prasworld/vialiq/tree/master/libs/form-builder/src/lib/palette): `libs/form-builder/src/lib/palette`
- [Component Descriptors](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/types/component-descriptor.ts): `libs/form-builder/src/lib/types/component-descriptor.ts`
- [Builder Registry](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/registry/builder-registry.service.ts): `libs/form-builder/src/lib/registry/builder-registry.service.ts`
- [Drag and Drop](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/services/dnd.service.ts): `libs/form-builder/src/lib/services/dnd.service.ts`
- [Form Schema](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/services/form-schema.service.ts): `libs/form-builder/src/lib/services/form-schema.service.ts`
- [Schema Types](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/types/component-schemas.ts): `libs/form-builder/src/lib/types/component-schemas.ts`
- [Key Generator](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/services/key-generator.service.ts): `libs/form-builder/src/lib/services/key-generator.service.ts`
- [Rule Validation](https://github.com/prasworld/vialiq/blob/master/libs/form-builder/src/lib/validation/rule-engine.ts): `libs/form-builder/src/lib/validation/rule-engine.ts`
- [Form Renderer](https://github.com/prasworld/vialiq/blob/master/libs/form-renderer/src/lib/form-renderer.component.ts): `libs/form-renderer/src/lib/form-renderer.component.ts`

### Shared Libraries

- [Object Mapping](https://github.com/prasworld/vialiq/blob/master/libs/automapper/src/lib/context.ts): `libs/automapper/src/lib/context.ts`
- [State Sync](https://github.com/prasworld/vialiq/blob/master/libs/state-fp/src/sync/sync-engine.ts): `libs/state-fp/src/sync/sync-engine.ts`
- [Sync Transport](https://github.com/prasworld/vialiq/blob/master/libs/state-fp/src/sync/transport.ts): `libs/state-fp/src/sync/transport.ts`
- [Translation Engine](https://github.com/prasworld/vialiq/blob/master/libs/utilities/src/lib/i18n/core/translation-engine.ts): `libs/utilities/src/lib/i18n/core/translation-engine.ts`
- [Translation Loader](https://github.com/prasworld/vialiq/blob/master/libs/utilities/src/lib/i18n/core/translation-loader.ts): `libs/utilities/src/lib/i18n/core/translation-loader.ts`
- [Angular Translation](https://github.com/prasworld/vialiq/blob/master/libs/utilities/src/lib/i18n/angular/translation.service.ts): `libs/utilities/src/lib/i18n/angular/translation.service.ts`

### UI System

- [Web Components](https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/index.ts): `libs/web-components/src/index.ts`
- [Overlay Manager](https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/base/overlay-manager.ts): `libs/web-components/src/base/overlay-manager.ts`
- [Combobox Items](https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/combobox/vi-combobox-item.ts): `libs/web-components/src/combobox/vi-combobox-item.ts`
- [Listbox Controls](https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/shared/controllers/filter-controller.ts): `libs/web-components/src/shared/controllers/filter-controller.ts`
- [Toast Service](https://github.com/prasworld/vialiq/blob/master/libs/web-components/src/toast/vi-toast-service.ts): `libs/web-components/src/toast/vi-toast-service.ts`
- [Flux UI Tokens](https://github.com/prasworld/vialiq/blob/master/libs/flux-ui/src/tokens/index.ts): `libs/flux-ui/src/tokens/index.ts`
- [Icon Library](https://github.com/prasworld/vialiq/blob/master/libs/icons/src/index.ts): `libs/icons/src/index.ts`

### Other components

- **Form Author**

## Connections

- Form Author → Shell App: opens
- Remote Routes → Builder Remote: loads routes (evidence: `apps/remote1/src/app/app.routes.ts`)
- Builder Remote → Builder UI: uses (evidence: `apps/remote1/src/app/remote-entry/entry.ts`)
- Builder Registry → Component Descriptors: collects (evidence: `libs/form-builder/src/lib/registry/builder-registry.service.ts`)
- Builder Registry → Builder UI: registers choices (evidence: `libs/form-builder/src/lib/registry/builder-registry.service.ts`)
- Drag and Drop → Form Schema: edits schema (evidence: `libs/form-builder/src/lib/services/dnd.service.ts`)
- Drag and Drop → Builder Registry: looks up types (evidence: `libs/form-builder/src/lib/services/dnd.service.ts`)
- Drag and Drop → Key Generator: generates keys (evidence: `libs/form-builder/src/lib/services/dnd.service.ts`)
- Drag and Drop → Schema Types: uses types (evidence: `libs/form-builder/src/lib/services/dnd.service.ts`)
- Form Schema → Key Generator: generates keys (evidence: `libs/form-builder/src/lib/services/form-schema.service.ts`)
- Rule Validation → Schema Types: validates values (evidence: `libs/form-builder/src/lib/validation/rule-engine.ts`)
- State Sync → Sync Transport: sends updates (evidence: `libs/state-fp/src/sync/sync-engine.ts`)
- Angular Translation → Translation Engine: uses engine (evidence: `libs/utilities/src/lib/i18n/angular/translation.service.ts`)
- Angular Translation → Translation Loader: loads translations (evidence: `libs/utilities/src/lib/i18n/angular/translation.service.ts`)
- Translation Engine → Translation Loader: uses manifest types (evidence: `libs/utilities/src/lib/i18n/core/translation-engine.ts`)
- Listbox Controls → Combobox Items: filters items (evidence: `libs/web-components/src/shared/controllers/filter-controller.ts`)
- Toast Service → Web Components: presents notifications
- Overlay Manager → Web Components: supports overlays