How tyaukinyiku/dsh-ui-chameleon works
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: service.ts Skin service · src/index.ts Plugin aggregator · src/index.ts UI skins plugin · store.ts Binding store
Components 33
Host framework
- Plugin aggregator
src/index.ts - UI skins plugin
packages/ui-skins/src/index.ts - Plugin config
packages/ui-skins/src/config.ts - Skin service
packages/ui-skins/src/service.ts - Layer resolver
packages/ui-skins/src/resolve.ts - Binding store
packages/ui-skins/src/store.ts - Storage domain
packages/ui-skins/src/domain.ts - HTTP routes
packages/ui-skins/src/http-routes.ts
Browser runtime
- HTTP API client
packages/ui-skins/src/client/api.ts - Skin runtime
packages/ui-skins/src/client/runtime.ts - Target observer
packages/ui-skins/src/client/observer.ts - Skin picker
packages/ui-skins/src/client/picker.ts - Component registry
packages/ui-skins/src/client/registry.ts - Slot dispatcher
packages/ui-skins/src/client/dispatcher.ts - Theme applier
packages/ui-skins/src/client/theme.ts
UI packs
- Default pack
packages/ui-pack-default/src/index.ts - Example pack
packages/ui-pack-example/src/index.ts - Aurora pack
packages/ui-pack-aurora/src/index.ts - Manuscript pack
packages/ui-pack-manuscript/src/index.ts - Terminal pack
packages/ui-pack-terminal/src/index.ts - Pack components
packages/ui-pack-example/src/client.ts
External skin engine
- External packs
packages/ui-skins/src/external.ts - External engine API
packages/ui-skins/src/skin-engine/external-v2.ts - CSS safety
packages/ui-skins/src/skin-engine/css-safety/transform.ts - Skin switch controller
packages/ui-skins/src/client/skin-engine/skin-controller.ts - Effect lifecycle
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 38
- 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