agentic-canvas 0.8.0 → 0.9.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 +4 -3
- package/dist/{chunk-7IOW6LML.js → chunk-33ANMQEY.js} +1 -1
- package/dist/cli.js +1 -1
- package/dist/index.js +1 -1
- package/dist/ui.css +24 -24
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
A shared whiteboard for diagrams, drawn by people and agents.
|
|
9
9
|
|
|
10
|
-
> Status: 0.
|
|
10
|
+
> Status: 0.9.0. The board model, the agent operations, the exports, the CLI, the
|
|
11
11
|
> MCP server, a small Worker API, and live co-editing work. The CLI, the MCP server,
|
|
12
12
|
> and the SDK can join a live room. A remote client calls the Worker API. A small web UI, served by the Worker, is new in 0.4.0.
|
|
13
13
|
> The package exports `agentic-canvas/ui`, a board view you can mount in your own app, new in 0.5.0.
|
|
@@ -391,9 +391,10 @@ The stylesheet is a separate export, `agentic-canvas/ui.css`. Load `agentic-desi
|
|
|
391
391
|
| `createApp(options?)` | Make the Hono app for the Worker. Pass `live` to turn on the live-room socket. |
|
|
392
392
|
| `default` | The Worker, without live rooms. |
|
|
393
393
|
| `authenticate(request, env)` | Read a bearer token from the `Authorization` header, or from a WebSocket sub-protocol. Return a promise of the actor and the role, or `null`. |
|
|
394
|
+
| `identify(request, env, store?)` | Like `authenticate`, with the whole caller: its actor, role, principal context, and whether the dev fallback signed it in. Return a promise of the caller, or `null`. |
|
|
394
395
|
| `sniffImage(bytes)` | Find the image type from the first bytes, or return `null`. The client's claim of a type is not trusted. |
|
|
395
396
|
| `WS_PROTOCOL` | The sub-protocol name for a WebSocket: `agentic-canvas`. The token travels in the entry `agentic-canvas.bearer.<token in base64url>`. |
|
|
396
|
-
| `WorkerEnv` (type), `AppOptions` (type), `Role` (type) | Types for the Worker bindings, the app options
|
|
397
|
+
| `WorkerEnv` (type), `AppOptions` (type), `Role` (type), `Caller` (type) | Types for the Worker bindings, the app options, the role, `editor` or `viewer`, and the caller that `identify` returns. |
|
|
397
398
|
|
|
398
399
|
### `agentic-canvas/live-worker`
|
|
399
400
|
|
|
@@ -405,7 +406,7 @@ The stylesheet is a separate export, `agentic-canvas/ui.css`. Load `agentic-desi
|
|
|
405
406
|
|
|
406
407
|
## Limits
|
|
407
408
|
|
|
408
|
-
- Canvas takes principal kinds, regions, and the Store and Blobs ports from `agentic-identity` 0.
|
|
409
|
+
- Canvas takes principal kinds, regions, and the Store and Blobs ports from `agentic-identity` 0.7.
|
|
409
410
|
- A board made before sharing has no owner. Identity credentials get 404 on it. Only the dev fallback reaches it. Make it again, or add its
|
|
410
411
|
`canvas` resource and an owner grant with `agentic-identity`.
|
|
411
412
|
- An image is stored under the hash of its bytes, not under a board. Any credential with `canvas:read` can fetch an image if it knows the hash.
|
package/dist/cli.js
CHANGED
package/dist/index.js
CHANGED
package/dist/ui.css
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
/* Every rule is nested under .cv-root, so the styles do not reach the host page. */
|
|
2
2
|
.cv-root {
|
|
3
|
-
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--
|
|
4
|
-
.failure { border: 1px solid var(--
|
|
5
|
-
.note { color: var(--
|
|
3
|
+
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--agd-space-4); flex-wrap: wrap; }
|
|
4
|
+
.failure { border: 1px solid var(--agd-color-danger); border-radius: var(--agd-radius-md); padding: var(--agd-space-4); color: var(--agd-color-danger-text); background: var(--agd-color-danger-subtle); display: grid; gap: var(--agd-space-3); justify-items: start; }
|
|
5
|
+
.note { color: var(--agd-color-text-muted); }
|
|
6
6
|
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
7
7
|
|
|
8
|
-
.board { display: grid; gap: var(--
|
|
9
|
-
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--
|
|
8
|
+
.board { display: grid; gap: var(--agd-space-3); }
|
|
9
|
+
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--agd-space-3); height: 65vh; min-height: 22rem; }
|
|
10
10
|
@media (max-width: 48rem) { .stage { grid-template-columns: 1fr; height: auto; } .canvas { height: 55vh; } }
|
|
11
|
-
.canvas { background: var(--
|
|
12
|
-
.canvas:focus-visible { outline: 3px solid var(--
|
|
13
|
-
.canvas svg { display: block; cursor: grab; font-family: var(--
|
|
11
|
+
.canvas { background: var(--agd-color-surface-sunken); border: 1px solid var(--agd-color-border); border-radius: var(--agd-radius-md); overflow: hidden; touch-action: none; min-height: 18rem; }
|
|
12
|
+
.canvas:focus-visible { outline: 3px solid var(--agd-color-focus); outline-offset: 2px; }
|
|
13
|
+
.canvas svg { display: block; cursor: grab; font-family: var(--agd-font-family-sans); font-size: 14px; }
|
|
14
14
|
.item { outline: none; cursor: pointer; }
|
|
15
|
-
.shape { fill: var(--
|
|
15
|
+
.shape { fill: var(--agd-color-surface-raised); stroke: var(--agd-color-border-strong); stroke-width: 1.5; }
|
|
16
16
|
.shape.text { fill: transparent; stroke: none; }
|
|
17
17
|
.shape.frame, .shape.image { fill: none; stroke-dasharray: 6 4; pointer-events: visiblePainted; }
|
|
18
|
-
.shape.sticky { fill: var(--
|
|
19
|
-
.label { fill: var(--
|
|
20
|
-
.sticky-label { fill: var(--
|
|
21
|
-
.edge { stroke: var(--
|
|
18
|
+
.shape.sticky { fill: var(--agd-color-warning-subtle); stroke: var(--agd-color-warning); }
|
|
19
|
+
.label { fill: var(--agd-color-text); pointer-events: none; }
|
|
20
|
+
.sticky-label { fill: var(--agd-color-warning-text); }
|
|
21
|
+
.edge { stroke: var(--agd-color-text-muted); stroke-width: 2; fill: none; pointer-events: none; }
|
|
22
22
|
.hit { stroke: transparent; stroke-width: 14; }
|
|
23
|
-
.arrowhead { fill: var(--
|
|
24
|
-
.edge-text { fill: var(--
|
|
23
|
+
.arrowhead { fill: var(--agd-color-text-muted); }
|
|
24
|
+
.edge-text { fill: var(--agd-color-text); paint-order: stroke; stroke: var(--agd-color-surface-sunken); stroke-width: 4px; pointer-events: none; }
|
|
25
25
|
.ring, .ring-line { fill: none; stroke: none; stroke-width: 3; pointer-events: none; }
|
|
26
|
-
.item.selected .ring, .item.selected .ring-line, .item:focus-visible .ring, .item:focus-visible .ring-line { stroke: var(--
|
|
26
|
+
.item.selected .ring, .item.selected .ring-line, .item:focus-visible .ring, .item:focus-visible .ring-line { stroke: var(--agd-color-focus); }
|
|
27
27
|
.item:focus-visible .ring, .item:focus-visible .ring-line { stroke-width: 4; }
|
|
28
|
-
.handle { fill: var(--
|
|
29
|
-
.agent-badge rect { fill: var(--
|
|
30
|
-
.agent-badge text { fill: var(--
|
|
28
|
+
.handle { fill: var(--agd-color-focus); stroke: var(--agd-color-bg); stroke-width: 2; cursor: nwse-resize; }
|
|
29
|
+
.agent-badge rect { fill: var(--agd-color-agent-subtle); stroke: var(--agd-color-agent); }
|
|
30
|
+
.agent-badge text { fill: var(--agd-color-agent-text); font-size: 11px; font-weight: 600; pointer-events: none; }
|
|
31
31
|
.empty-overlay { position: absolute; inset: 0 16rem 0 0; display: grid; place-items: center; pointer-events: none; }
|
|
32
32
|
@media (max-width: 48rem) { .empty-overlay { inset: 0; bottom: auto; height: 55vh; } }
|
|
33
|
-
.inspector { border: 1px solid var(--
|
|
34
|
-
.inspector h2 { margin: 0; font-size: var(--
|
|
35
|
-
.inspector form { display: grid; gap: var(--
|
|
36
|
-
.inspector .by { margin: 0; color: var(--
|
|
37
|
-
.sizes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--
|
|
33
|
+
.inspector { border: 1px solid var(--agd-color-border); border-radius: var(--agd-radius-md); padding: var(--agd-space-3); background: var(--agd-color-surface); display: grid; gap: var(--agd-space-3); align-content: start; overflow: auto; }
|
|
34
|
+
.inspector h2 { margin: 0; font-size: var(--agd-font-size-lg); }
|
|
35
|
+
.inspector form { display: grid; gap: var(--agd-space-3); }
|
|
36
|
+
.inspector .by { margin: 0; color: var(--agd-color-text-muted); font-size: var(--agd-font-size-sm); }
|
|
37
|
+
.sizes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--agd-space-2); }
|
|
38
38
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "agentic-canvas",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "A shared whiteboard for diagrams, drawn by people and agents.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"whiteboard",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"dependencies": {
|
|
82
82
|
"@dagrejs/dagre": "^3.1.3",
|
|
83
83
|
"@modelcontextprotocol/sdk": "^1.12.0",
|
|
84
|
-
"agentic-design": "^0.
|
|
84
|
+
"agentic-design": "^0.4.0",
|
|
85
85
|
"agentic-identity": "^0.7.0",
|
|
86
86
|
"agentic-realtime": "^0.4.2",
|
|
87
87
|
"yjs": "^13.6.0",
|