List Artifact Architecture

This diagram is generated from the CALM architecture in packages/list-domain/artifact-list.arch.json. It implements the Alistigo Artifact Pattern, validated in CI via calm validate -p … -a ….

Architecture Diagram

%%{init: {"flowchart": {"htmlLabels": false}}}%%
flowchart TB
classDef boundary fill:#e1e4f0,stroke:#204485,stroke-dasharray: 5 4,stroke-width:1px,color:#000000;
classDef node fill:#eef1ff,stroke:#007dff,stroke-width:1px,color:#000000;

      subgraph npm-cdn["npm CDN"]
      direction TB
          artifact-skill["List Artifact Skill"]:::node
              subgraph alistigo-artifact["Alistigo List Artifact"]
              direction TB
                  claude-storage-plugin["Claude Storage Plugin"]:::node
                  document-layer["List Document Layer"]:::node
                  domain-layer["List Domain Layer"]:::node
                  list-checkbox-plugin["List Checkbox Plugin"]:::node
                  local-storage-plugin["Local Storage Plugin"]:::node
                  platform-layer["Platform Layer"]:::node
                  plugin-bus["Plugin Event Bus"]:::node
                  presentation-layer["List Presentation Layer"]:::node
                  user-plugin["User Plugin"]:::node
              end
              class alistigo-artifact boundary
      end
      class npm-cdn boundary

  artifact-host["Artifact Host"]:::node
  user["User"]:::node

  presentation-layer -->|"Dispatches commands via ListApplicationService, reads list projections from"| document-layer
  document-layer -->|"Applies commands to List aggregate, builds projections via ListProjector from"| domain-layer
  document-layer -->|"Uses plugin contracts and lifecycle hooks provided by"| platform-layer
  presentation-layer -->|"Uses shared UI components and logger provided by"| platform-layer
  document-layer -->|"Routes storage operations through the plugin runtime to the active plugin via"| plugin-bus
  plugin-bus -->|"Dispatches storage ops to — first choice when window.claude is present"| claude-storage-plugin
  plugin-bus -->|"Dispatches storage ops to — fallback in dev / playground / draft mode"| local-storage-plugin
  plugin-bus -->|"Delivers lifecycle hooks to; user plugin emits user:changed so document layer records the actor"| user-plugin
  plugin-bus -->|"Delivers lifecycle hooks to; checkbox plugin injects UI slots into the presentation layer"| list-checkbox-plugin
  artifact-host -->|"Embeds artifact in sandboxed iframe, injects alistigo-config, brokers storage and AI API calls for"| alistigo-artifact
  alistigo-artifact -->|"UMD bundle fetched at load time, plugins dynamically imported at runtime from"| npm-cdn
  artifact-skill -->|"Defines the Claude agent capability contract for"| alistigo-artifact
  user -->|"Interacts with the rendered UI inside the sandboxed iframe"| alistigo-artifact

Interactive Architecture Diagram

Layers

Layer	Package(s)	Responsibility
Domain	`@alistigo/list-domain`	Pure business logic — List aggregate, events, value objects
Document	`@alistigo/list-document`, `@alistigo/list-document-editor`	JSON-LD serialisation, `ListApplicationService`, `ListProjector`
Presentation	`@alistigo/list-components-react`	React components, UMD entry point
Platform	`@alistigo/artifact-core`, `@alistigo/artifact-plugin-api`, `@alistigo/artifact-core-components-react`	Logger, shared UI primitives, plugin contracts
Plugin Bus	`@alistigo/artifact-plugin-api`	Typed in-process pub/sub (`createPluginBus`)

Plugins

Plugin	Role	Active when
Claude Storage	Wraps `window.storage` postMessage API	`window.claude?.complete` present (inside Claude.ai iframe)
Local Storage	Wraps `localStorage`	Fallback — dev, playground, or draft mode
User Plugin	Emits `user:changed` for actor attribution	Always mounted
List Checkbox Plugin	Injects checkbox UI slots into list elements	Bundled in artifact; always active

Key Design Decisions

Plugin bus decoupling — the document layer never imports storage plugins directly; it routes all reads/writes through the bus so the active plugin can be swapped without touching core code.
iframe isolation — the entire artifact bundle runs inside a sandboxed iframe; artifact-host brokers all privileged API calls across the boundary.
CDN delivery — the UMD bundle and plugins are fetched from jsDelivr at runtime; no npm install happens inside the Claude artifact context.
Skill as capability contract — artifact-skill exposes a stable schema so Claude agents can generate artifact instances without knowing the internal implementation.
Pattern conformance — this architecture implements the Alistigo Artifact Pattern; calm validate -p … -a … runs in CI to prevent drift.