@utopia-studio-design/design-system-cli 0.4.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/bin/utopia-ds-mcp.mjs +9 -2
- package/bin/utopia-ds.mjs +106 -8
- package/data/blocks/activity-feed/ActivityFeedBlock.tsx +255 -0
- package/data/blocks/activity-feed/README.md +16 -0
- package/data/blocks/activity-feed/activity-feed-contract.ts +96 -0
- package/data/blocks/activity-feed/activity-feed-fixture.ts +22 -0
- package/data/blocks/activity-feed/activity-feed.css +154 -0
- package/data/blocks/agent-status/AgentStatusBlock.tsx +313 -0
- package/data/blocks/agent-status/README.md +15 -0
- package/data/blocks/agent-status/agent-status-contract.ts +133 -0
- package/data/blocks/agent-status/agent-status-fixture.ts +79 -0
- package/data/blocks/agent-status/agent-status.css +216 -0
- package/data/blocks/analytics-dashboard/AnalyticsDashboardBlocks.tsx +107 -0
- package/data/blocks/analytics-dashboard/AnalyticsMetricBlocks.tsx +87 -0
- package/data/blocks/analytics-dashboard/README.md +17 -0
- package/data/blocks/analytics-dashboard/analytics-dashboard.css +92 -0
- package/data/blocks/calendar-application/CalendarApplicationBlocks.tsx +519 -0
- package/data/blocks/calendar-application/README.md +20 -0
- package/data/blocks/calendar-application/calendar-application.css +216 -0
- package/data/blocks/calendar-application/calendar-localization.ts +90 -0
- package/data/blocks/calendar-application/calendar-panel-contract.ts +72 -0
- package/data/blocks/dashboard-composer/CeramicPuckAdapter.tsx +380 -0
- package/data/blocks/dashboard-composer/DashboardComposerBlocks.tsx +337 -0
- package/data/blocks/dashboard-composer/README.md +16 -0
- package/data/blocks/dashboard-composer/RegistryDataBlocks.tsx +238 -0
- package/data/blocks/dashboard-composer/dashboard-composer.css +328 -0
- package/data/blocks/database-workspace/DatabaseWorkspaceBlocks.tsx +240 -0
- package/data/blocks/database-workspace/README.md +9 -0
- package/data/blocks/database-workspace/database-workspace.css +107 -0
- package/data/blocks/interaction-workbench/InteractionWorkbench.tsx +271 -0
- package/data/blocks/interaction-workbench/README.md +9 -0
- package/data/blocks/interaction-workbench/interaction-workbench.css +226 -0
- package/data/docs/calendar.md +164 -0
- package/data/docs/charts.md +95 -0
- package/data/docs/composition-registry.md +174 -0
- package/data/docs/dashboard-composer.md +94 -0
- package/data/docs/database.md +68 -0
- package/data/docs/examples/dashboard-layout.v1.json +65 -0
- package/data/docs/foundations.md +1 -1
- package/data/docs/interaction-foundation.md +109 -0
- package/data/docs/quick-start-ai.md +23 -1
- package/data/manifests/blocks.json +392 -0
- package/data/manifests/catalog.json +7 -4
- package/data/manifests/components.json +179 -0
- package/data/manifests/composition-registry.json +427 -0
- package/data/manifests/motion-profiles.json +1 -1
- package/data/manifests/patterns.json +113 -1
- package/data/manifests/templates.json +346 -0
- package/data/manifests/theme-renacore.json +142 -0
- package/data/manifests/themes.json +314 -28
- package/data/templates/analytics-dashboard/AnalyticsDashboardBlocks.tsx +107 -0
- package/data/templates/analytics-dashboard/AnalyticsMetricBlocks.tsx +87 -0
- package/data/templates/analytics-dashboard/README.md +6 -0
- package/data/templates/analytics-dashboard/analytics-dashboard.css +92 -0
- package/data/templates/analytics-dashboard/index.html +13 -0
- package/data/templates/analytics-dashboard/main.tsx +196 -0
- package/data/templates/analytics-dashboard/styles.css +120 -0
- package/data/templates/analytics-dashboard/template.manifest.json +17 -0
- package/data/templates/calendar-application/CalendarApplicationBlocks.tsx +519 -0
- package/data/templates/calendar-application/README.md +10 -0
- package/data/templates/calendar-application/calendar-application.css +216 -0
- package/data/templates/calendar-application/calendar-localization.ts +90 -0
- package/data/templates/calendar-application/index.html +14 -0
- package/data/templates/calendar-application/main.tsx +409 -0
- package/data/templates/calendar-application/styles.css +248 -0
- package/data/templates/calendar-application/template.manifest.json +27 -0
- package/data/templates/composition-registry-lab/README.md +9 -0
- package/data/templates/composition-registry-lab/index.html +14 -0
- package/data/templates/composition-registry-lab/main.tsx +217 -0
- package/data/templates/composition-registry-lab/sample-layout.json +63 -0
- package/data/templates/composition-registry-lab/styles.css +343 -0
- package/data/templates/composition-registry-lab/template.manifest.json +34 -0
- package/data/templates/dashboard-composer/ActivityFeedBlock.tsx +255 -0
- package/data/templates/dashboard-composer/AgentStatusBlock.tsx +313 -0
- package/data/templates/dashboard-composer/AnalyticsDashboardBlocks.tsx +107 -0
- package/data/templates/dashboard-composer/AnalyticsMetricBlocks.tsx +87 -0
- package/data/templates/dashboard-composer/CalendarApplicationBlocks.tsx +519 -0
- package/data/templates/dashboard-composer/CeramicPuckAdapter.tsx +380 -0
- package/data/templates/dashboard-composer/DashboardComposerBlocks.tsx +337 -0
- package/data/templates/dashboard-composer/DatabaseWorkspaceBlocks.tsx +240 -0
- package/data/templates/dashboard-composer/README.md +53 -0
- package/data/templates/dashboard-composer/RegistryDataBlocks.tsx +238 -0
- package/data/templates/dashboard-composer/activity-feed-contract.ts +96 -0
- package/data/templates/dashboard-composer/activity-feed-fixture.ts +22 -0
- package/data/templates/dashboard-composer/activity-feed.css +154 -0
- package/data/templates/dashboard-composer/agent-status-contract.ts +133 -0
- package/data/templates/dashboard-composer/agent-status-fixture.ts +79 -0
- package/data/templates/dashboard-composer/agent-status-lab/index.html +19 -0
- package/data/templates/dashboard-composer/agent-status-lab/main.tsx +151 -0
- package/data/templates/dashboard-composer/agent-status-lab/styles.css +139 -0
- package/data/templates/dashboard-composer/agent-status.css +216 -0
- package/data/templates/dashboard-composer/analytics-dashboard.css +92 -0
- package/data/templates/dashboard-composer/calendar-application.css +216 -0
- package/data/templates/dashboard-composer/calendar-localization.ts +90 -0
- package/data/templates/dashboard-composer/calendar-panel-contract.ts +72 -0
- package/data/templates/dashboard-composer/dashboard-composer.css +328 -0
- package/data/templates/dashboard-composer/database-workspace.css +107 -0
- package/data/templates/dashboard-composer/index.html +14 -0
- package/data/templates/dashboard-composer/main.tsx +550 -0
- package/data/templates/dashboard-composer/sample-layout.json +147 -0
- package/data/templates/dashboard-composer/styles.css +198 -0
- package/data/templates/dashboard-composer/template.manifest.json +34 -0
- package/data/templates/dashboard-composer/visual-editor/PuckEditorSurface.tsx +132 -0
- package/data/templates/dashboard-composer/visual-editor/VisualEditorApp.tsx +343 -0
- package/data/templates/dashboard-composer/visual-editor/index.html +17 -0
- package/data/templates/dashboard-composer/visual-editor/main.tsx +95 -0
- package/data/templates/dashboard-composer/visual-editor/styles.css +310 -0
- package/data/templates/database-workspace/DatabaseWorkspaceBlocks.tsx +240 -0
- package/data/templates/database-workspace/README.md +5 -0
- package/data/templates/database-workspace/database-workspace.css +107 -0
- package/data/templates/database-workspace/index.html +14 -0
- package/data/templates/database-workspace/main.tsx +247 -0
- package/data/templates/database-workspace/styles.css +121 -0
- package/data/templates/database-workspace/template.manifest.json +19 -0
- package/data/templates/interaction-lab/InteractionWorkbench.tsx +271 -0
- package/data/templates/interaction-lab/README.md +7 -0
- package/data/templates/interaction-lab/index.html +14 -0
- package/data/templates/interaction-lab/interaction-workbench.css +226 -0
- package/data/templates/interaction-lab/main.tsx +104 -0
- package/data/templates/interaction-lab/styles.css +224 -0
- package/data/templates/interaction-lab/template.manifest.json +36 -0
- package/lib/api.mjs +72 -5
- package/lib/composition-runtime.mjs +382 -0
- package/package.json +4 -1
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# Ceramic Charts
|
|
2
|
+
|
|
3
|
+
Ceramic Charts separates the stable semantic and interaction contract from the
|
|
4
|
+
low-level renderer. Import application chart contracts from:
|
|
5
|
+
|
|
6
|
+
```tsx
|
|
7
|
+
import {
|
|
8
|
+
ChartRoot,
|
|
9
|
+
type ChartDatum,
|
|
10
|
+
type ChartSeriesDefinition,
|
|
11
|
+
} from '@utopia-studio-design/design-system/Charts'
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
`ChartRoot` ships with a tree-shakeable Recharts adapter. A product may supply a
|
|
15
|
+
different `ChartRenderer` without replacing Ceramic's series identities, states,
|
|
16
|
+
keyboard model, summary, legend, exact-value output, RTL behavior, or semantic
|
|
17
|
+
tokens.
|
|
18
|
+
|
|
19
|
+
## Data and series identity
|
|
20
|
+
|
|
21
|
+
Every period and series needs a stable ID. Missing values use `null`; never
|
|
22
|
+
convert missing data to zero.
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
const series: ChartSeriesDefinition[] = [
|
|
26
|
+
{ id: 'current', label: 'Current period', tone: 'primary' },
|
|
27
|
+
{ id: 'previous', label: 'Previous period', tone: 'benchmark', pattern: 'dash' },
|
|
28
|
+
]
|
|
29
|
+
|
|
30
|
+
const data: ChartDatum[] = [
|
|
31
|
+
{ id: 'jan', label: 'Jan', values: { current: 42, previous: 35 } },
|
|
32
|
+
{ id: 'feb', label: 'Feb', values: { current: 46, previous: null } },
|
|
33
|
+
]
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Required states
|
|
37
|
+
|
|
38
|
+
Use the explicit `loading`, `empty`, `error`, `partial`, and `ready` states.
|
|
39
|
+
Partial data keeps the available geometry visible, identifies unavailable values
|
|
40
|
+
in the live explorer and table, and does not imply zero.
|
|
41
|
+
|
|
42
|
+
## Keyboard and accessibility
|
|
43
|
+
|
|
44
|
+
- Supply a concise `accessibleSummary`.
|
|
45
|
+
- The plot is one focusable composite. Logical Left/Right arrows explore
|
|
46
|
+
adjacent periods; `Home` and `End` move to the range boundaries.
|
|
47
|
+
- RTL reverses chronological rendering and logical inline movement.
|
|
48
|
+
- `ChartTooltipPanel` announces the exact active values.
|
|
49
|
+
- Use `showDataTable` or `ChartDataTable` for an exact-value and screen-reader
|
|
50
|
+
alternative.
|
|
51
|
+
- Series use semantic tokens plus dash/dot patterns; never rely on color alone.
|
|
52
|
+
- Reduced motion disables renderer animation and loading shimmer.
|
|
53
|
+
|
|
54
|
+
## Chart families
|
|
55
|
+
|
|
56
|
+
The default renderer supports `line`, `bar`, `area`, `stacked`, `scatter`, and
|
|
57
|
+
`donut`. Products should choose the family from the analysis task rather than
|
|
58
|
+
from visual preference.
|
|
59
|
+
|
|
60
|
+
## Copyable blocks
|
|
61
|
+
|
|
62
|
+
Install or inspect:
|
|
63
|
+
|
|
64
|
+
- `analytics-chart-card`
|
|
65
|
+
- `kpi-grid`
|
|
66
|
+
- `comparison-chart-panel`
|
|
67
|
+
- `chart-with-data-table`
|
|
68
|
+
|
|
69
|
+
The blocks live in `blocks/analytics-dashboard` and are copied through the CLI
|
|
70
|
+
so product teams can customize queries and structure without forking the core
|
|
71
|
+
chart contract.
|
|
72
|
+
|
|
73
|
+
## Runnable template
|
|
74
|
+
|
|
75
|
+
`template-analytics-dashboard` exercises all families and states in light/dark,
|
|
76
|
+
LTR/RTL, desktop, and 320px layouts.
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
npx utopia-ds template template-analytics-dashboard --copy ./analytics-dashboard
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Performance boundary
|
|
83
|
+
|
|
84
|
+
- Renderer packages stay behind the `Charts` entry point.
|
|
85
|
+
- The root package entry does not re-export Charts; import from
|
|
86
|
+
`@utopia-studio-design/design-system/Charts` so chart code remains isolated.
|
|
87
|
+
- Contract CI caps the emitted Charts entry and its shared implementation chunk
|
|
88
|
+
at 30 KiB before gzip.
|
|
89
|
+
- Release CI caps the runnable analytics chart asset at 475 KiB before gzip and
|
|
90
|
+
135 KiB after gzip.
|
|
91
|
+
- Initial dashboard data should remain below 500 plotted points per visible
|
|
92
|
+
panel; aggregate or virtualize the tabular alternative above that threshold.
|
|
93
|
+
- Keep interaction feedback under 100ms and avoid animating more than 12 visible
|
|
94
|
+
series.
|
|
95
|
+
- The template is a QA fixture, not a product persistence or query layer.
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
# Ceramic Composition Registry
|
|
2
|
+
|
|
3
|
+
Ceramic's Composition Registry is the source of truth for modular dashboard
|
|
4
|
+
layouts shared by agents, Studio runtime, and optional visual editors.
|
|
5
|
+
|
|
6
|
+
Puck is not the registry. The Dashboard Composer includes it as an optional
|
|
7
|
+
visual adapter that reads registered block definitions and writes versioned
|
|
8
|
+
Ceramic Layout JSON. The same document can still be read and written by an
|
|
9
|
+
agent without Puck.
|
|
10
|
+
|
|
11
|
+
## Ownership
|
|
12
|
+
|
|
13
|
+
```text
|
|
14
|
+
Ceramic Components
|
|
15
|
+
-> Interaction Foundation
|
|
16
|
+
-> Dashboard Blocks
|
|
17
|
+
-> Composition Registry
|
|
18
|
+
-> Layout JSON
|
|
19
|
+
-> Agent / Studio runtime / optional Puck adapter
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
- Components own semantic UI and accessibility contracts.
|
|
23
|
+
- Blocks own page-ready, product-relevant composition.
|
|
24
|
+
- Themes own palette, typography, geometry, icon, and motion personality.
|
|
25
|
+
- The registry owns allowed block types, props, states, spans, responsive
|
|
26
|
+
behavior, data requirements, locks, and agent permissions.
|
|
27
|
+
- Layout JSON owns identity, ordering, placement, registered props, and locks.
|
|
28
|
+
- Editors arrange registered blocks; they do not create Ceramic primitives or
|
|
29
|
+
styling contracts.
|
|
30
|
+
|
|
31
|
+
## Public API
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import {
|
|
35
|
+
ceramicCompositionRegistry,
|
|
36
|
+
getCeramicBlockDefinition,
|
|
37
|
+
listCeramicBlockDefinitions,
|
|
38
|
+
serializeCeramicLayout,
|
|
39
|
+
validateCeramicAgentMutation,
|
|
40
|
+
validateCeramicLayout,
|
|
41
|
+
} from '@utopia-studio-design/design-system/Composition'
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
`listCeramicBlockDefinitions({ renderableOnly: true })` excludes roadmap
|
|
45
|
+
definitions until a reviewed renderer is available. A planned definition stays
|
|
46
|
+
discoverable to agents and editors but produces a `BLOCK_NOT_RENDERABLE`
|
|
47
|
+
warning when present in a draft layout.
|
|
48
|
+
|
|
49
|
+
The package also exposes the AI-readable sources used by the public API:
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
import blocks from '@utopia-studio-design/design-system/manifests/blocks.json'
|
|
53
|
+
import registry from '@utopia-studio-design/design-system/manifests/composition-registry.json'
|
|
54
|
+
import templates from '@utopia-studio-design/design-system/manifests/templates.json'
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Use `Composition` for runtime validation. Use the JSON manifests for discovery,
|
|
58
|
+
catalog generation, and build-time tooling; do not fork them into a second
|
|
59
|
+
registry.
|
|
60
|
+
|
|
61
|
+
## Design guardrails
|
|
62
|
+
|
|
63
|
+
Layout documents may select semantic props such as `density`, `comparison`,
|
|
64
|
+
`view`, and registered spans. They cannot contain arbitrary `style`, `sx`,
|
|
65
|
+
`css`, `className`, raw colors, shadows, radii, spacing, or token overrides.
|
|
66
|
+
|
|
67
|
+
Registry definitions must declare:
|
|
68
|
+
|
|
69
|
+
- version and renderer availability;
|
|
70
|
+
- props schema and supported spans;
|
|
71
|
+
- semantic surfaces and responsive behavior;
|
|
72
|
+
- loading, empty, error, and ready states;
|
|
73
|
+
- data requirements;
|
|
74
|
+
- RTL and reduced-motion readiness;
|
|
75
|
+
- agent create, remove, move, and editable-prop permissions.
|
|
76
|
+
|
|
77
|
+
## Layout validation
|
|
78
|
+
|
|
79
|
+
The version 1 sample is
|
|
80
|
+
[`examples/dashboard-layout.v1.json`](./examples/dashboard-layout.v1.json).
|
|
81
|
+
|
|
82
|
+
```sh
|
|
83
|
+
npx utopia-ds registry --list --json
|
|
84
|
+
npx utopia-ds layout validate ./dashboard-layout.json --json
|
|
85
|
+
npx utopia-ds layout serialize ./dashboard-layout.json
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Validation is deterministic and does not silently coerce data. It rejects
|
|
89
|
+
unsupported schema or block versions, duplicate IDs, unknown blocks, invalid
|
|
90
|
+
props, arbitrary styling payloads, placements outside the grid, unsupported
|
|
91
|
+
spans, broken region references, and unauthorized agent mutations.
|
|
92
|
+
|
|
93
|
+
Canonical serialization sorts object keys while preserving array order so the
|
|
94
|
+
same document can support storage, reviewable diffs, undo, and agent tool calls.
|
|
95
|
+
|
|
96
|
+
## Runtime rendering
|
|
97
|
+
|
|
98
|
+
The registry validates composition but does not import application blocks by
|
|
99
|
+
path at runtime. A product supplies an explicit renderer map so code splitting,
|
|
100
|
+
data adapters, permissions, and persistence remain owned by the application.
|
|
101
|
+
|
|
102
|
+
The runnable
|
|
103
|
+
[`Dashboard Composer`](../../templates/dashboard-composer/README.md) connects
|
|
104
|
+
the current `todo-list`, `calendar-panel`, `issue-table`, `chart-panel`,
|
|
105
|
+
`activity-feed`, `agent-status`, and `metric-grid`
|
|
106
|
+
definitions to real Ceramic blocks:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
const renderers = {
|
|
110
|
+
'todo-list': TodoRenderer,
|
|
111
|
+
'calendar-panel': CalendarRenderer,
|
|
112
|
+
'issue-table': IssueTableRenderer,
|
|
113
|
+
'chart-panel': ChartPanelRenderer,
|
|
114
|
+
'activity-feed': ActivityRenderer,
|
|
115
|
+
'agent-status': AgentStatusRenderer,
|
|
116
|
+
'metric-grid': MetricsRenderer,
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
<CeramicDashboardRenderer
|
|
120
|
+
layout={layout}
|
|
121
|
+
renderers={renderers}
|
|
122
|
+
onLayoutChange={setLayout}
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Layout JSON stores semantic configuration and placement. It does not store task
|
|
127
|
+
records, calendar events, product authorization, adapter credentials, or
|
|
128
|
+
arbitrary styles. Those values enter through the renderer map and application
|
|
129
|
+
data layer.
|
|
130
|
+
|
|
131
|
+
The `calendar-panel` definition exposes only reviewed scheduling configuration:
|
|
132
|
+
`view`, `timeZone`, `locale`, `direction`, optional `weekStartsOn`,
|
|
133
|
+
`secondaryCalendar`, `initialScrollHour`, and `showAgendaAlternative`.
|
|
134
|
+
`direction: "inherit"` follows the dashboard, while `"auto"` derives direction
|
|
135
|
+
from the block locale. Omitting `weekStartsOn` preserves locale-specific week
|
|
136
|
+
conventions. The same pure resolver feeds the runtime and Puck previews so a
|
|
137
|
+
registered field cannot be silently ignored by one consumer.
|
|
138
|
+
|
|
139
|
+
The `activity-feed` definition follows the same boundary. Layout JSON may choose
|
|
140
|
+
`density`, `groupBy`, `locale`, `direction`, `timeZone`, `showSources`, and
|
|
141
|
+
`pageSize`; the product supplies localized activity records and retry/data
|
|
142
|
+
adapters. `direction: "auto"` resolves from the locale, and timestamps are
|
|
143
|
+
formatted in the registered IANA timezone. Runtime and Puck use the same
|
|
144
|
+
`activity-feed-contract` resolver.
|
|
145
|
+
|
|
146
|
+
The `agent-status` definition stores only reviewed display semantics. Execution
|
|
147
|
+
records, sanitized summaries, progress, approval requests, and decision
|
|
148
|
+
callbacks belong to the product data adapter. Runtime and Puck resolve filter,
|
|
149
|
+
density, locale, direction, timezone, approval visibility, and item limits
|
|
150
|
+
through the shared `agent-status-contract`. Raw prompts, stack traces,
|
|
151
|
+
credentials, and command output do not belong in Layout JSON.
|
|
152
|
+
|
|
153
|
+
The Dashboard Composer includes keyboard/touch move and remove controls,
|
|
154
|
+
locked-region enforcement, agent mutation validation, a responsive Day
|
|
155
|
+
transformation for the Calendar, RTL, dark mode, and live JSON evidence.
|
|
156
|
+
|
|
157
|
+
## Agent and human control
|
|
158
|
+
|
|
159
|
+
`locked: true` protects a block from agent removal, movement, or prop changes.
|
|
160
|
+
A locked region protects every block ID it owns and its own membership. Locks
|
|
161
|
+
are user/Studio-owned: an agent cannot add, remove, or toggle a block or region
|
|
162
|
+
lock. An existing block ID also cannot be reassigned to another registered type
|
|
163
|
+
or version to bypass create/remove permissions. Human products may add a
|
|
164
|
+
reviewed unlock flow outside the agent mutation path, but an editor adapter must
|
|
165
|
+
not bypass the validator.
|
|
166
|
+
|
|
167
|
+
The included Puck integration is implemented as a thin adapter:
|
|
168
|
+
|
|
169
|
+
1. Convert renderable Ceramic definitions into Puck component configuration.
|
|
170
|
+
2. Render the same Ceramic block implementations used by Studio runtime.
|
|
171
|
+
3. Translate editor changes into Ceramic Layout JSON.
|
|
172
|
+
4. Validate before preview, persistence, or agent handoff.
|
|
173
|
+
5. Preserve unknown future versions as explicit errors rather than dropping
|
|
174
|
+
fields.
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Dashboard Composer
|
|
2
|
+
|
|
3
|
+
Dashboard Composer demonstrates the first usable runtime layer over Ceramic's
|
|
4
|
+
Composition Registry. The same versioned Layout JSON is read by the runtime,
|
|
5
|
+
edited through accessible human controls, and validated for agent mutations.
|
|
6
|
+
|
|
7
|
+
## Included blocks
|
|
8
|
+
|
|
9
|
+
- `todo-list`: completion, priority, due context, filtering, density, and
|
|
10
|
+
loading/empty/error/ready states.
|
|
11
|
+
- `calendar-panel`: Month, Week, Day, and Agenda views with timezone-aware
|
|
12
|
+
events and a compact Day transformation.
|
|
13
|
+
- `issue-table`: a governed active/backlog/blocked/completed workspace with
|
|
14
|
+
registered columns and density over product-owned issue records.
|
|
15
|
+
- `chart-panel`: a lazy-loaded semantic chart with registered family,
|
|
16
|
+
comparison, and exact-value table controls.
|
|
17
|
+
- `activity-feed`: localized chronological updates with day/source grouping,
|
|
18
|
+
timezone formatting, scoped automatic RTL, source visibility, and recoverable
|
|
19
|
+
pagination.
|
|
20
|
+
- `agent-status`: localized execution progress, risk, approvals, blocked,
|
|
21
|
+
failed, and completed states with product-owned operational decisions.
|
|
22
|
+
- `metric-grid`: locale-aware progress metrics in a locked owner region.
|
|
23
|
+
|
|
24
|
+
## Data boundary
|
|
25
|
+
|
|
26
|
+
Layout JSON owns:
|
|
27
|
+
|
|
28
|
+
- registered block type and version;
|
|
29
|
+
- semantic props;
|
|
30
|
+
- column, span, compact span, and order;
|
|
31
|
+
- block and region locks.
|
|
32
|
+
|
|
33
|
+
The product owns:
|
|
34
|
+
|
|
35
|
+
- task and event records;
|
|
36
|
+
- agent execution records, sanitized summaries, and approval callbacks;
|
|
37
|
+
- persistence and optimistic adapters;
|
|
38
|
+
- authorization;
|
|
39
|
+
- localized product copy;
|
|
40
|
+
- data loading and error policy.
|
|
41
|
+
|
|
42
|
+
## Agent mutation
|
|
43
|
+
|
|
44
|
+
Call `validateCeramicAgentMutation(current, next)` before applying an agent
|
|
45
|
+
proposal. A proposal cannot move, remove, or edit a locked block; change a
|
|
46
|
+
locked region; create or toggle user/Studio locks; reassign an existing block
|
|
47
|
+
ID to a different type or version; edit an unregistered prop; or introduce
|
|
48
|
+
arbitrary styling.
|
|
49
|
+
|
|
50
|
+
The runnable template is available at `/templates/dashboard-composer/` in the
|
|
51
|
+
local documentation app and through the CLI template bundle.
|
|
52
|
+
|
|
53
|
+
Open `/templates/dashboard-composer/agent-status-lab/` to inspect loading,
|
|
54
|
+
empty, recoverable error, filtered-empty, and ready/approval states without
|
|
55
|
+
changing production data. The lab uses the same block, locale resolver, and
|
|
56
|
+
semantic styles as the Dashboard runtime.
|
|
57
|
+
|
|
58
|
+
## Optional Puck editor
|
|
59
|
+
|
|
60
|
+
Open `/templates/dashboard-composer/visual-editor/` to use the same registered
|
|
61
|
+
blocks through Puck 0.22. The adapter:
|
|
62
|
+
|
|
63
|
+
- exposes only definitions with an available product renderer;
|
|
64
|
+
- generates fields from each definition's registered `propsSchema` and
|
|
65
|
+
`agentPermissions.editableProps`;
|
|
66
|
+
- maps block and locked-region permissions to Puck insert, drag, edit,
|
|
67
|
+
duplicate, and delete permissions;
|
|
68
|
+
- filters Puck's internal props before producing Layout JSON;
|
|
69
|
+
- repacks reordered blocks into valid registered spans; and
|
|
70
|
+
- calls `validateCeramicAgentMutation(current, next)` before accepting Publish.
|
|
71
|
+
|
|
72
|
+
Puck Data is an editing format, not a second source of truth. Persist the
|
|
73
|
+
validated Ceramic Layout JSON. Task records, calendar events, activity records
|
|
74
|
+
and cursors, agent execution records and approval decisions, authorization, and
|
|
75
|
+
server persistence remain product-owned.
|
|
76
|
+
|
|
77
|
+
The visual-editor route first renders a 3 KB Ceramic boot shell, then
|
|
78
|
+
lazy-loads registered block previews and editing controls, followed by the Puck
|
|
79
|
+
surface and stylesheet. Both loading stages are announced to assistive
|
|
80
|
+
technology, and recoverable error states preserve the validated layout if an
|
|
81
|
+
optional chunk cannot load. Dashboard runtime and state-lab entry points do not
|
|
82
|
+
include or preload the editor payload.
|
|
83
|
+
|
|
84
|
+
The editor imports `@puckeditor/core/no-external.css` rather than Puck's
|
|
85
|
+
standard stylesheet, which requests a hosted Inter font. Puck's public chrome
|
|
86
|
+
variables are bridged to Ceramic semantic surface, text, interaction, focus,
|
|
87
|
+
radius, typography, and motion tokens so light and dark modes stay inside the
|
|
88
|
+
active design-system contract without raw color overrides.
|
|
89
|
+
|
|
90
|
+
Dashboard Composer imports `KPIGrid` from the metric-only
|
|
91
|
+
`AnalyticsMetricBlocks.tsx` entry. This preserves the existing KPI contract and
|
|
92
|
+
the compatibility re-export from `AnalyticsDashboardBlocks.tsx`. Recharts and
|
|
93
|
+
the chart explorer remain outside the initial Dashboard Composer HTML and load
|
|
94
|
+
only when a registered Chart Panel renderer is present.
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Ceramic Database
|
|
2
|
+
|
|
3
|
+
Ceramic Database is a schema-driven, multi-view record system. It does not
|
|
4
|
+
replace read-oriented `Table`, `DataTable`, or `DataTableShell`, and it never
|
|
5
|
+
owns product persistence or authorization.
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import {
|
|
9
|
+
DatabaseRoot,
|
|
10
|
+
type DatabaseRecord,
|
|
11
|
+
type DatabaseSchema,
|
|
12
|
+
} from '@utopia-studio-design/design-system/Database'
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Stable contracts
|
|
16
|
+
|
|
17
|
+
- Schemas use stable property IDs and support text, number, select,
|
|
18
|
+
multi-select, date, person, checkbox, and URL values.
|
|
19
|
+
- Records use stable IDs. Filters, sorts, grouping, property visibility, and
|
|
20
|
+
saved views are serializable semantic data.
|
|
21
|
+
- `DatabaseMutationAdapter` commits controlled mutations. Ceramic may show an
|
|
22
|
+
optimistic value, saving state, rollback, error announcement, and Undo, but
|
|
23
|
+
the product remains the source of truth.
|
|
24
|
+
- `DatabasePermissions` gates edit, resize, column reorder, row reorder, and
|
|
25
|
+
bulk actions. Do not infer authorization from hidden controls.
|
|
26
|
+
- `density="compact" | "default" | "comfortable"` controls desktop grid row
|
|
27
|
+
height. It does not remove properties or change the mobile record-card
|
|
28
|
+
reading order.
|
|
29
|
+
|
|
30
|
+
## Keyboard and accessibility
|
|
31
|
+
|
|
32
|
+
- The desktop grid exposes row/column counts, names every cell, and keeps one
|
|
33
|
+
active cell in the tab order.
|
|
34
|
+
- Logical Arrow keys move between cells; `Home` and `End` move to grid
|
|
35
|
+
boundaries. Inline arrows reverse under RTL.
|
|
36
|
+
- Enter or double-click starts editing. Escape cancels; Enter or blur validates
|
|
37
|
+
and commits.
|
|
38
|
+
- Copy and paste are explicit callbacks so apps can enforce security and
|
|
39
|
+
multi-cell boundaries before reading or writing clipboard data.
|
|
40
|
+
- Selection uses named checkboxes and an announced bulk-action surface.
|
|
41
|
+
|
|
42
|
+
## Responsive behavior
|
|
43
|
+
|
|
44
|
+
At narrow widths, the dense grid becomes record cards. Opening a card presents
|
|
45
|
+
the complete property set in `RecordDetailDrawer`; the page itself never gains
|
|
46
|
+
horizontal overflow.
|
|
47
|
+
|
|
48
|
+
## Copyable blocks and template
|
|
49
|
+
|
|
50
|
+
- `database-toolbar`
|
|
51
|
+
- `database-table-block`
|
|
52
|
+
- `saved-views-bar`
|
|
53
|
+
- `record-detail-drawer`
|
|
54
|
+
- `bulk-action-bar`
|
|
55
|
+
- `template-database-workspace`
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npx utopia-ds template template-database-workspace --copy ./database-workspace
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Performance budgets
|
|
62
|
+
|
|
63
|
+
- The `Database` package entry is capped at 45 KiB before gzip.
|
|
64
|
+
- The runnable database workspace asset is capped at 90 KiB before gzip and
|
|
65
|
+
25 KiB after gzip.
|
|
66
|
+
- The 1,000-record fixture must render fewer than 40 grid rows in the DOM,
|
|
67
|
+
complete initial usable render under 1,000ms, and keep keyboard edit feedback
|
|
68
|
+
under 200ms in Chromium CI.
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"id": "operations-dashboard",
|
|
4
|
+
"theme": "utopia-default",
|
|
5
|
+
"columns": 12,
|
|
6
|
+
"blocks": [
|
|
7
|
+
{
|
|
8
|
+
"id": "overview-metrics",
|
|
9
|
+
"type": "metric-grid",
|
|
10
|
+
"version": 1,
|
|
11
|
+
"placement": {
|
|
12
|
+
"column": 1,
|
|
13
|
+
"span": 4,
|
|
14
|
+
"order": 1,
|
|
15
|
+
"compactSpan": 12
|
|
16
|
+
},
|
|
17
|
+
"props": {
|
|
18
|
+
"metrics": ["open", "blocked", "resolved"],
|
|
19
|
+
"density": "compact",
|
|
20
|
+
"comparison": "previous-period"
|
|
21
|
+
},
|
|
22
|
+
"locked": false
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"id": "active-issues",
|
|
26
|
+
"type": "issue-table",
|
|
27
|
+
"version": 1,
|
|
28
|
+
"placement": {
|
|
29
|
+
"column": 1,
|
|
30
|
+
"span": 12,
|
|
31
|
+
"order": 2,
|
|
32
|
+
"compactSpan": 12
|
|
33
|
+
},
|
|
34
|
+
"props": {
|
|
35
|
+
"view": "active",
|
|
36
|
+
"density": "compact",
|
|
37
|
+
"columns": ["title", "status", "priority", "assignee"]
|
|
38
|
+
},
|
|
39
|
+
"locked": false
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"id": "automation-status",
|
|
43
|
+
"type": "agent-status",
|
|
44
|
+
"version": 1,
|
|
45
|
+
"placement": {
|
|
46
|
+
"column": 9,
|
|
47
|
+
"span": 4,
|
|
48
|
+
"order": 3,
|
|
49
|
+
"compactSpan": 12
|
|
50
|
+
},
|
|
51
|
+
"props": {
|
|
52
|
+
"showApprovals": true,
|
|
53
|
+
"density": "default"
|
|
54
|
+
},
|
|
55
|
+
"locked": true
|
|
56
|
+
}
|
|
57
|
+
],
|
|
58
|
+
"regions": [
|
|
59
|
+
{
|
|
60
|
+
"id": "governance",
|
|
61
|
+
"locked": true,
|
|
62
|
+
"blockIds": ["automation-status"]
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
package/data/docs/foundations.md
CHANGED
|
@@ -78,7 +78,7 @@ Arabic display sizing should follow the Latin display scale at about 95%, rather
|
|
|
78
78
|
- `motion={false}` and `prefers-reduced-motion: reduce` disable decorative movement while preserving state changes and accessibility.
|
|
79
79
|
- Directional motion follows logical inline start/end and mirrors in RTL when direction carries meaning.
|
|
80
80
|
- Icon motion follows the action: a bell swings from its top, download moves downward, and copy snaps once. Do not apply a generic bounce.
|
|
81
|
-
- `utopia-default` uses the `ceremonial` profile, `dextrum` uses `swift`, and `barrier-intelligence`
|
|
81
|
+
- `utopia-default` uses the `ceremonial` profile, `dextrum` uses `swift`, and both `barrier-intelligence` and `renacore` use `precise`.
|
|
82
82
|
- WAAPI is built in. Motion for React, Anime.js, and GSAP are optional peer adapters, so unused engines do not need to ship with an application.
|
|
83
83
|
|
|
84
84
|
```tsx
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# Interaction foundation
|
|
2
|
+
|
|
3
|
+
Ceramic complex components share a headless interaction contract. Charts,
|
|
4
|
+
database surfaces, and schedulers consume this layer; product-specific data and
|
|
5
|
+
workflow rules stay in the product.
|
|
6
|
+
|
|
7
|
+
## Public import
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import {
|
|
11
|
+
createCeramicFormatters,
|
|
12
|
+
createCommandHistory,
|
|
13
|
+
findTypeaheadMatch,
|
|
14
|
+
getGridNavigationTarget,
|
|
15
|
+
getVirtualRange,
|
|
16
|
+
reorderItems,
|
|
17
|
+
runOptimisticMutation,
|
|
18
|
+
updateSelection,
|
|
19
|
+
useCommandHistory,
|
|
20
|
+
useControllableState,
|
|
21
|
+
useOptimisticMutation,
|
|
22
|
+
} from '@utopia-studio-design/design-system/Interaction'
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## State
|
|
26
|
+
|
|
27
|
+
Controlled state uses `value` plus `onChange`. Uncontrolled state uses
|
|
28
|
+
`defaultValue`; after initialization it is not re-read. Change callbacks fire
|
|
29
|
+
after the next value is resolved and do not fire when `Object.is` reports no
|
|
30
|
+
change.
|
|
31
|
+
|
|
32
|
+
Selection uses stable application keys. `replace`, `toggle`, `range`, and `all`
|
|
33
|
+
are explicit behaviors. Range selection follows `orderedKeys`; never infer
|
|
34
|
+
visual order from DOM position when sorting or virtualization is active.
|
|
35
|
+
|
|
36
|
+
## Keyboard and direction
|
|
37
|
+
|
|
38
|
+
`getGridNavigationTarget` supports logical inline arrows, block arrows,
|
|
39
|
+
Home/End, and PageUp/PageDown. Inline arrows reverse under `direction: 'rtl'`;
|
|
40
|
+
ArrowUp and ArrowDown do not. Composite widgets keep one tab stop and move focus
|
|
41
|
+
after state commits.
|
|
42
|
+
|
|
43
|
+
Typeahead is locale-aware and wraps once from the current item.
|
|
44
|
+
|
|
45
|
+
## Drag, resize, and alternatives
|
|
46
|
+
|
|
47
|
+
Pointer drag is never the only path. Provide keyboard- and touch-operable Move
|
|
48
|
+
earlier/Move later actions, announce the committed position, and restore focus
|
|
49
|
+
to the moved item. Resize affordances expose a keyboard-operable value and
|
|
50
|
+
minimum/maximum constraints.
|
|
51
|
+
|
|
52
|
+
Use logical `inline` and `block` coordinates for collision and drop contracts.
|
|
53
|
+
When reduced motion is active, commit the final order or size without animated
|
|
54
|
+
displacement.
|
|
55
|
+
|
|
56
|
+
## Virtualization and scrolling
|
|
57
|
+
|
|
58
|
+
`getVirtualRange` calculates a fixed-size visible window with overscan. Keep
|
|
59
|
+
stable item keys and persist a `ScrollAnchor` (`key` plus offset within the
|
|
60
|
+
item), not a raw pixel offset, when sorting or inserting data.
|
|
61
|
+
|
|
62
|
+
Virtualized collections must preserve accessible position and set size, must
|
|
63
|
+
not make off-screen content the only way to discover an action, and must be
|
|
64
|
+
tested with production-scale fixtures.
|
|
65
|
+
|
|
66
|
+
## Undo and optimistic recovery
|
|
67
|
+
|
|
68
|
+
Commands implement both `execute` and `undo`. Executing a new command clears
|
|
69
|
+
the redo stack. `useCommandHistory` keeps the current context and availability
|
|
70
|
+
of Undo/Redo in the React render contract. Optimistic commits rollback on
|
|
71
|
+
rejection; `useOptimisticMutation` aborts an interrupted request and surfaces an
|
|
72
|
+
application-owned accessible error message. Abort signals belong to the
|
|
73
|
+
consumer's request lifecycle.
|
|
74
|
+
|
|
75
|
+
## Locale, timezone, and DST
|
|
76
|
+
|
|
77
|
+
`createCeramicFormatters` delegates number and date rendering to `Intl`.
|
|
78
|
+
Consumers must pass an IANA timezone for schedule surfaces. Store instants and
|
|
79
|
+
timezone identifiers separately; do not persist a formatted label or fixed UTC
|
|
80
|
+
offset as the event model. Ambiguous and skipped local times remain
|
|
81
|
+
product-policy decisions.
|
|
82
|
+
|
|
83
|
+
## Semantic tokens
|
|
84
|
+
|
|
85
|
+
- `--interaction-density-{compact,default,comfortable}`
|
|
86
|
+
- `--interaction-focus`
|
|
87
|
+
- `--interaction-selection-{surface,border}`
|
|
88
|
+
- `--interaction-drag-{surface,border}`
|
|
89
|
+
- `--interaction-drop-indicator`
|
|
90
|
+
- `--visualization-series-{1,2}` and `--visualization-grid`
|
|
91
|
+
- `--temporal-today-surface`, `--temporal-now-indicator`,
|
|
92
|
+
`--temporal-outside-foreground`
|
|
93
|
+
|
|
94
|
+
Themes may remap these roles but components must not replace them with raw
|
|
95
|
+
colors, shadows, or radii.
|
|
96
|
+
|
|
97
|
+
## Runnable references
|
|
98
|
+
|
|
99
|
+
Copy the focused block:
|
|
100
|
+
|
|
101
|
+
```sh
|
|
102
|
+
npx utopia-ds block interaction-workbench --copy ./src/interaction-workbench
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Or generate the full lab:
|
|
106
|
+
|
|
107
|
+
```sh
|
|
108
|
+
npx utopia-ds template template-interaction-lab --copy ./interaction-lab
|
|
109
|
+
```
|
|
@@ -92,6 +92,8 @@ Never bypass `MotionProvider`, semantic motion tokens, or `prefers-reduced-motio
|
|
|
92
92
|
npx utopia-ds manifest --json
|
|
93
93
|
npx utopia-ds search "Arabic settings form" --json
|
|
94
94
|
npx utopia-ds component Button --json
|
|
95
|
+
npx utopia-ds registry --list --json
|
|
96
|
+
npx utopia-ds layout validate ./dashboard-layout.json --json
|
|
95
97
|
npx utopia-ds template --list --json
|
|
96
98
|
npx utopia-ds template template-saas-solution-homepage --copy ./saas-solution-website
|
|
97
99
|
npx utopia-ds template template-saas-solution-homepage --theme dextrum --copy ./dextrum-website
|
|
@@ -118,7 +120,27 @@ The MCP server exposes the same API as the CLI. A generated `.mcp.json` uses:
|
|
|
118
120
|
}
|
|
119
121
|
```
|
|
120
122
|
|
|
121
|
-
Available tools include search, component/template/theme/doc discovery,
|
|
123
|
+
Available tools include search, component/template/theme/doc discovery,
|
|
124
|
+
composition-registry discovery, layout and agent-mutation validation, and
|
|
125
|
+
doctor. An MCP client must never receive capabilities that the CLI cannot
|
|
126
|
+
expose.
|
|
127
|
+
|
|
128
|
+
## Compose Modular Dashboards
|
|
129
|
+
|
|
130
|
+
Use the Ceramic Composition Registry before generating or rearranging dashboard
|
|
131
|
+
blocks:
|
|
132
|
+
|
|
133
|
+
```sh
|
|
134
|
+
npx utopia-ds registry --list --json
|
|
135
|
+
npx utopia-ds registry metric-grid --json
|
|
136
|
+
npx utopia-ds layout validate ./dashboard-layout.json --json
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
Registry definitions expose only reviewed semantic props, responsive spans,
|
|
140
|
+
states, data requirements, locks, and agent permissions. Layout JSON must not
|
|
141
|
+
contain arbitrary CSS, colors, shadows, radii, spacing, class names, or token
|
|
142
|
+
overrides. Read `npx utopia-ds docs composition-registry --dense` for the full
|
|
143
|
+
contract and optional Puck adapter boundary.
|
|
122
144
|
|
|
123
145
|
## Optional diagnostics
|
|
124
146
|
|