Deeper Architecture
Package Architecture
Why ToonUI has only core and react packages, and how that prevents server/client confusion.
ToonUI is split by runtime boundary.
| Package | Boundary | Responsibility |
|---|---|---|
@toon-ui/core | server-safe | catalog, prompt, parser, validator, events, messages |
@toon-ui/react | React client | runtime, renderer, adapter, hooks |
There is no umbrella package because umbrella packages make it too easy to import client code from the server.
Correct imports
Server:
import { createToonProtocol } from '@toon-ui/core';Client:
'use client';
import { ToonMessage, createToonReactRuntime } from '@toon-ui/react';Why this matters
The prompt is mostly server work. React rendering is client work.
Mixing both behind one package makes the API look convenient, but it teaches the wrong architecture.
Active catalog flow
configured standard components
-> @toon-ui/core creates toon.prompt
-> model emits only that subset
-> @toon-ui/react renders registered components
-> interactions return as structured messagesNext step
Read Boundaries.