# tyaukinyiku/dsh-ui-chameleon architecture

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

- Interactive diagram: https://gitdiagram.com/tyaukinyiku/dsh-ui-chameleon
- Repository: https://github.com/tyaukinyiku/dsh-ui-chameleon

## Overview

dsh-ui-chameleon is a pluggable UI assembly framework: host-side packs define theme/layout data, while browser-side packs register slot components. Its main workflow resolves session, workspace, then dsh configuration into a UI specification, which the browser applies to the page and slot system; binding APIs persist user choices. The graph also shows the external-skin transport and browser switching engine present in the source tree. Detailed wiring for unsampled modules is limited to README-documented relationships.

Main entry points: [`packages/ui-skins/src/service.ts`](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/service.ts) (Skin service), [`src/index.ts`](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/src/index.ts) (Plugin aggregator), [`packages/ui-skins/src/index.ts`](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/index.ts) (UI skins plugin), [`packages/ui-skins/src/store.ts`](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/store.ts) (Binding store)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_host["Host framework"]
  node_aggregate["Plugin aggregator<br/>[index.ts]"]
  node_hostplugin["UI skins plugin<br/>[index.ts]"]
  node_config["Plugin config<br/>[config.ts]"]
  node_service["Skin service<br/>[service.ts]"]
  node_resolver["Layer resolver<br/>[resolve.ts]"]
  node_bindingstore["Binding store<br/>[store.ts]"]
  node_domain["Storage domain<br/>[domain.ts]"]
  node_routes["HTTP routes<br/>[http-routes.ts]"]
end

subgraph group_client["Browser runtime"]
  node_api["HTTP API client<br/>[api.ts]"]
  node_runtime["Skin runtime<br/>[runtime.ts]"]
  node_observer["Target observer<br/>[observer.ts]"]
  node_picker["Skin picker<br/>[picker.ts]"]
  node_registry["Component registry<br/>[registry.ts]"]
  node_dispatcher["Slot dispatcher<br/>[dispatcher.ts]"]
  node_theme["Theme applier<br/>[theme.ts]"]
end

subgraph group_packs["UI packs"]
  node_packdefault["Default pack<br/>[index.ts]"]
  node_packexample["Example pack<br/>[index.ts]"]
  node_packaurora["Aurora pack<br/>[index.ts]"]
  node_packmanuscript["Manuscript pack<br/>[index.ts]"]
  node_packterminal["Terminal pack<br/>[index.ts]"]
  node_packclient["Pack components<br/>[client.ts]"]
end

subgraph group_skinengine["External skin engine"]
  node_external["External packs<br/>[external.ts]"]
  node_externalv2["External engine API<br/>[external-v2.ts]"]
  node_css["CSS safety<br/>[transform.ts]"]
  node_controller["Skin switch controller<br/>[skin-controller.ts]"]
  node_effects["Effect lifecycle<br/>[effect-ledger.ts]"]
end

node_user(("User"))
node_browser(("Web client"))
node_dsh["dsh extensions"]
node_storage[("Storage domain")]
node_workspacefile["Workspace ui.json"]
node_slots["Client slots"]
node_webserver["Host web server"]

node_user -->|"chooses skin"| node_picker
node_aggregate -->|"installs plugin"| node_hostplugin
node_aggregate -->|"installs pack"| node_packdefault
node_aggregate -->|"installs pack"| node_packexample
node_aggregate -->|"installs pack"| node_packaurora
node_aggregate -->|"installs pack"| node_packmanuscript
node_aggregate -->|"installs pack"| node_packterminal
node_hostplugin -->|"reads config"| node_config
node_hostplugin -->|"creates service"| node_service
node_hostplugin -->|"installs routes"| node_routes
node_hostplugin -->|"registers routes"| node_webserver
node_packdefault -->|"registers pack"| node_service
node_packexample -->|"registers pack"| node_service
node_packaurora -->|"registers pack"| node_service
node_packmanuscript -->|"registers pack"| node_service
node_packterminal -->|"registers pack"| node_service
node_service -->|"resolves layers"| node_resolver
node_service -->|"reads/writes bindings"| node_bindingstore
node_bindingstore -->|"uses domain"| node_domain
node_bindingstore -->|"persists records"| node_storage
node_bindingstore -->|"reads/writes file"| node_workspacefile
node_routes -->|"dispatches requests"| node_service
node_browser -->|"requests UI spec"| node_api
node_api -->|"fetches API"| node_webserver
node_runtime -->|"resolves target"| node_api
node_observer -->|"sets target"| node_runtime
node_picker -->|"reads/writes bindings"| node_api
node_runtime -->|"applies theme"| node_theme
node_runtime -->|"applies components"| node_dispatcher
node_dispatcher -->|"resolves component"| node_registry
node_dispatcher -->|"injects overrides"| node_slots
node_packclient -->|"registers components"| node_registry
node_external -->|"adapts pack data"| node_service
node_routes -->|"dispatches engine API"| node_externalv2
node_externalv2 -->|"sanitizes CSS"| node_css
node_controller -.->|"fetches skin assets"| node_externalv2
node_controller -->|"tracks activation"| node_effects
node_controller -->|"updates page"| node_browser

click node_aggregate "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/src/index.ts"
click node_hostplugin "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/index.ts"
click node_config "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/config.ts"
click node_service "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/service.ts"
click node_resolver "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/resolve.ts"
click node_bindingstore "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/store.ts"
click node_domain "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/domain.ts"
click node_routes "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/http-routes.ts"
click node_api "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/api.ts"
click node_runtime "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/runtime.ts"
click node_observer "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/observer.ts"
click node_picker "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/picker.ts"
click node_registry "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/registry.ts"
click node_dispatcher "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/dispatcher.ts"
click node_theme "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/theme.ts"
click node_packdefault "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-default/src/index.ts"
click node_packexample "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-example/src/index.ts"
click node_packaurora "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-aurora/src/index.ts"
click node_packmanuscript "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-manuscript/src/index.ts"
click node_packterminal "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-terminal/src/index.ts"
click node_packclient "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-example/src/client.ts"
click node_external "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/external.ts"
click node_externalv2 "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/skin-engine/external-v2.ts"
click node_css "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/skin-engine/css-safety/transform.ts"
click node_controller "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/skin-engine/skin-controller.ts"
click node_effects "https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/skin-engine/effect-ledger.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_aggregate,node_hostplugin,node_config,node_service,node_resolver,node_bindingstore,node_domain,node_routes,node_user,node_browser,node_workspacefile,node_slots toneBlue
class node_api,node_runtime,node_observer,node_picker,node_registry,node_dispatcher,node_theme,node_storage toneAmber
class node_packdefault,node_packexample,node_packaurora,node_packmanuscript,node_packterminal,node_packclient,node_webserver toneMint
class node_external,node_externalv2,node_css,node_controller,node_effects toneRose
class node_dsh toneIndigo
```

## Components

### Host framework

- [Plugin aggregator](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/src/index.ts): `src/index.ts`
- [UI skins plugin](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/index.ts): `packages/ui-skins/src/index.ts`
- [Plugin config](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/config.ts): `packages/ui-skins/src/config.ts`
- [Skin service](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/service.ts): `packages/ui-skins/src/service.ts`
- [Layer resolver](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/resolve.ts): `packages/ui-skins/src/resolve.ts`
- [Binding store](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/store.ts): `packages/ui-skins/src/store.ts`
- [Storage domain](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/domain.ts): `packages/ui-skins/src/domain.ts`
- [HTTP routes](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/http-routes.ts): `packages/ui-skins/src/http-routes.ts`

### Browser runtime

- [HTTP API client](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/api.ts): `packages/ui-skins/src/client/api.ts`
- [Skin runtime](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/runtime.ts): `packages/ui-skins/src/client/runtime.ts`
- [Target observer](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/observer.ts): `packages/ui-skins/src/client/observer.ts`
- [Skin picker](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/picker.ts): `packages/ui-skins/src/client/picker.ts`
- [Component registry](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/registry.ts): `packages/ui-skins/src/client/registry.ts`
- [Slot dispatcher](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/dispatcher.ts): `packages/ui-skins/src/client/dispatcher.ts`
- [Theme applier](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/theme.ts): `packages/ui-skins/src/client/theme.ts`

### UI packs

- [Default pack](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-default/src/index.ts): `packages/ui-pack-default/src/index.ts`
- [Example pack](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-example/src/index.ts): `packages/ui-pack-example/src/index.ts`
- [Aurora pack](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-aurora/src/index.ts): `packages/ui-pack-aurora/src/index.ts`
- [Manuscript pack](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-manuscript/src/index.ts): `packages/ui-pack-manuscript/src/index.ts`
- [Terminal pack](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-terminal/src/index.ts): `packages/ui-pack-terminal/src/index.ts`
- [Pack components](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-pack-example/src/client.ts): `packages/ui-pack-example/src/client.ts`

### External skin engine

- [External packs](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/external.ts): `packages/ui-skins/src/external.ts`
- [External engine API](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/skin-engine/external-v2.ts): `packages/ui-skins/src/skin-engine/external-v2.ts`
- [CSS safety](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/skin-engine/css-safety/transform.ts): `packages/ui-skins/src/skin-engine/css-safety/transform.ts`
- [Skin switch controller](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/skin-engine/skin-controller.ts): `packages/ui-skins/src/client/skin-engine/skin-controller.ts`
- [Effect lifecycle](https://github.com/tyaukinyiku/dsh-ui-chameleon/blob/master/packages/ui-skins/src/client/skin-engine/effect-ledger.ts): `packages/ui-skins/src/client/skin-engine/effect-ledger.ts`

### Other components

- **User**
- **Web client**
- **dsh extensions**
- **Storage domain**
- **Workspace ui.json**
- **Client slots**
- **Host web server**

## Connections

- User → Skin picker: chooses skin
- Plugin aggregator → UI skins plugin: installs plugin
- Plugin aggregator → Default pack: installs pack
- Plugin aggregator → Example pack: installs pack
- Plugin aggregator → Aurora pack: installs pack
- Plugin aggregator → Manuscript pack: installs pack
- Plugin aggregator → Terminal pack: installs pack
- UI skins plugin → Plugin config: reads config
- UI skins plugin → Skin service: creates service
- UI skins plugin → HTTP routes: installs routes
- UI skins plugin → Host web server: registers routes
- Default pack → Skin service: registers pack
- Example pack → Skin service: registers pack
- Aurora pack → Skin service: registers pack
- Manuscript pack → Skin service: registers pack
- Terminal pack → Skin service: registers pack
- Skin service → Layer resolver: resolves layers
- Skin service → Binding store: reads/writes bindings
- Binding store → Storage domain: uses domain
- Binding store → Storage domain: persists records
- Binding store → Workspace ui.json: reads/writes file
- HTTP routes → Skin service: dispatches requests
- Web client → HTTP API client: requests UI spec
- HTTP API client → Host web server: fetches API
- Skin runtime → HTTP API client: resolves target
- Target observer → Skin runtime: sets target
- Skin picker → HTTP API client: reads/writes bindings
- Skin runtime → Theme applier: applies theme
- Skin runtime → Slot dispatcher: applies components
- Slot dispatcher → Component registry: resolves component
- Slot dispatcher → Client slots: injects overrides
- Pack components → Component registry: registers components
- External packs → Skin service: adapts pack data
- HTTP routes → External engine API: dispatches engine API
- External engine API → CSS safety: sanitizes CSS
- Skin switch controller → External engine API: fetches skin assets
- Skin switch controller → Effect lifecycle: tracks activation
- Skin switch controller → Web client: updates page