pmx-canvas 0.1.28 → 0.1.30

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.
Files changed (67) hide show
  1. package/CHANGELOG.md +193 -0
  2. package/Readme.md +20 -10
  3. package/dist/canvas/global.css +13 -0
  4. package/dist/canvas/index.js +80 -163
  5. package/dist/canvas/surface-theme.css +142 -0
  6. package/dist/json-render/index.js +103 -103
  7. package/dist/types/client/nodes/HtmlNode.d.ts +0 -7
  8. package/dist/types/client/nodes/ax-node-actions.d.ts +18 -0
  9. package/dist/types/client/nodes/surface-url.d.ts +22 -0
  10. package/dist/types/client/state/attention-bridge.d.ts +3 -0
  11. package/dist/types/client/state/intent-bridge.d.ts +17 -0
  12. package/dist/types/json-render/renderer/index.d.ts +2 -0
  13. package/dist/types/json-render/schema.d.ts +2 -0
  14. package/dist/types/json-render/server.d.ts +2 -0
  15. package/dist/types/mcp/canvas-access.d.ts +47 -0
  16. package/dist/types/server/ax-interaction.d.ts +210 -0
  17. package/dist/types/server/ax-state.d.ts +67 -1
  18. package/dist/types/server/canvas-db.d.ts +4 -0
  19. package/dist/types/server/canvas-serialization.d.ts +2 -0
  20. package/dist/types/server/canvas-state.d.ts +47 -2
  21. package/dist/types/server/html-surface.d.ts +40 -0
  22. package/dist/types/server/index.d.ts +56 -2
  23. package/dist/types/server/mutation-history.d.ts +1 -1
  24. package/dist/types/server/placement.d.ts +1 -1
  25. package/dist/types/shared/surface.d.ts +19 -0
  26. package/docs/cli.md +30 -0
  27. package/docs/http-api.md +55 -0
  28. package/docs/mcp.md +40 -2
  29. package/docs/node-types.md +26 -0
  30. package/docs/plans/plan-004-pmx-ax-primitives.md +623 -394
  31. package/docs/sdk.md +20 -0
  32. package/package.json +2 -2
  33. package/skills/pmx-canvas/SKILL.md +107 -9
  34. package/src/cli/agent.ts +190 -0
  35. package/src/client/canvas/CanvasNode.tsx +8 -4
  36. package/src/client/canvas/ExpandedNodeOverlay.tsx +12 -0
  37. package/src/client/nodes/ContextNode.tsx +17 -0
  38. package/src/client/nodes/ExtAppFrame.tsx +40 -3
  39. package/src/client/nodes/FileNode.tsx +26 -0
  40. package/src/client/nodes/HtmlNode.tsx +60 -188
  41. package/src/client/nodes/LedgerNode.tsx +39 -5
  42. package/src/client/nodes/McpAppNode.tsx +47 -2
  43. package/src/client/nodes/StatusNode.tsx +20 -0
  44. package/src/client/nodes/ax-node-actions.ts +39 -0
  45. package/src/client/nodes/surface-url.ts +48 -0
  46. package/src/client/state/attention-bridge.ts +5 -0
  47. package/src/client/state/intent-bridge.ts +33 -0
  48. package/src/client/theme/global.css +13 -0
  49. package/src/client/theme/surface-theme.css +142 -0
  50. package/src/json-render/renderer/index.tsx +31 -0
  51. package/src/json-render/schema.ts +4 -0
  52. package/src/json-render/server.ts +31 -1
  53. package/src/mcp/canvas-access.ts +212 -1
  54. package/src/mcp/server.ts +238 -5
  55. package/src/server/ax-context.ts +3 -0
  56. package/src/server/ax-interaction.ts +549 -0
  57. package/src/server/ax-state.ts +188 -2
  58. package/src/server/canvas-db.ts +20 -0
  59. package/src/server/canvas-operations.ts +11 -0
  60. package/src/server/canvas-serialization.ts +9 -0
  61. package/src/server/canvas-state.ts +177 -16
  62. package/src/server/html-surface.ts +170 -0
  63. package/src/server/index.ts +105 -1
  64. package/src/server/mutation-history.ts +5 -0
  65. package/src/server/placement.ts +5 -1
  66. package/src/server/server.ts +305 -0
  67. package/src/shared/surface.ts +38 -0
package/dist/canvas/surface-theme.css ADDED
@@ -0,0 +1,142 @@
1
+ /*
2
+ * surface-theme.css — canonical theme token layer for embedded HTML surfaces.
3
+ *
4
+ * This is the same token set HtmlNode used to inline via buildThemeStyleBlock(),
5
+ * but expressed as a static, same-origin stylesheet so the server can serve a
6
+ * node's HTML surface (/api/canvas/surface/:nodeId) as a real standalone
7
+ * document. Sandboxed (opaque-origin) surface documents can still load this
8
+ * same-origin stylesheet, and live theme switching works by toggling the
9
+ * <html data-theme="..."> attribute — every theme block lives here.
10
+ *
11
+ * Tokens are written as LITERAL values per theme (not var() indirection) so that
12
+ * authored HTML reading them via getComputedStyle().getPropertyValue('--color-*')
13
+ * gets a resolved color, matching the previous inlined-style behavior.
14
+ *
15
+ * Core --c-* values MUST stay in sync with src/client/theme/global.css, and each
16
+ * --color-* alias mirrors its core token. Both are guarded by
17
+ * tests/unit/surface-theme-tokens.test.ts — update them together.
18
+ */
19
+
20
+ :root {
21
+ /* ── Core palette (dark · ink + cyan) ────────────────────── */
22
+ --c-bg: #081524;
23
+ --c-panel: #0f1d31;
24
+ --c-panel-soft: #0a1729;
25
+ --c-line: #1b2c44;
26
+ --c-text: #e6eef7;
27
+ --c-text-soft: #c7d3ea;
28
+ --c-muted: #8ea3bd;
29
+ --c-dim: #5c6b80;
30
+ --c-accent: #4BBCFF;
31
+ --c-ok: #2fd07f;
32
+ --c-warn: #f4c542;
33
+ --c-warn-alt: #FFB300;
34
+ --c-danger: #ff6a7f;
35
+ --c-purple: #b07aff;
36
+
37
+ /* Common aliases authored HTML might use. */
38
+ --color-bg: #081524;
39
+ --color-panel: #0f1d31;
40
+ --color-surface: #0a1729;
41
+ --color-border: #1b2c44;
42
+ --color-text: #e6eef7;
43
+ --color-text-primary: #e6eef7;
44
+ --color-text-secondary: #c7d3ea;
45
+ --color-text-muted: #8ea3bd;
46
+ --color-text-dim: #5c6b80;
47
+ --color-accent: #4BBCFF;
48
+ --color-success: #2fd07f;
49
+ --color-warning: #f4c542;
50
+ --color-danger: #ff6a7f;
51
+
52
+ --font: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
53
+ --mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
54
+ --font-sans: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
55
+ --font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
56
+
57
+ color-scheme: dark light;
58
+ }
59
+
60
+ :root[data-theme="light"] {
61
+ /* ── Core palette (light · paper + ink) ──────────────────── */
62
+ --c-bg: #F4EFE6;
63
+ --c-panel: #EFE7D4;
64
+ --c-panel-soft: #ECE4D0;
65
+ --c-line: #D6CBB4;
66
+ --c-text: #081524;
67
+ --c-text-soft: #3d4d63;
68
+ --c-muted: #5c6b80;
69
+ --c-dim: #8794a6;
70
+ --c-accent: #1A7ABF;
71
+ --c-ok: #1a9f55;
72
+ --c-warn: #c89b2a;
73
+ --c-warn-alt: #b8860b;
74
+ --c-danger: #d32f2f;
75
+ --c-purple: #7c4dff;
76
+
77
+ --color-bg: #F4EFE6;
78
+ --color-panel: #EFE7D4;
79
+ --color-surface: #ECE4D0;
80
+ --color-border: #D6CBB4;
81
+ --color-text: #081524;
82
+ --color-text-primary: #081524;
83
+ --color-text-secondary: #3d4d63;
84
+ --color-text-muted: #5c6b80;
85
+ --color-text-dim: #8794a6;
86
+ --color-accent: #1A7ABF;
87
+ --color-success: #1a9f55;
88
+ --color-warning: #c89b2a;
89
+ --color-danger: #d32f2f;
90
+ }
91
+
92
+ :root[data-theme="high-contrast"] {
93
+ /* ── Core palette (high-contrast) ────────────────────────── */
94
+ --c-bg: #000000;
95
+ --c-panel: #0a0a0a;
96
+ --c-panel-soft: #0a0a0a;
97
+ --c-line: #ffffff;
98
+ --c-text: #ffffff;
99
+ --c-text-soft: #dddddd;
100
+ --c-muted: #aaaaaa;
101
+ --c-dim: #888888;
102
+ --c-accent: #00ffff;
103
+ --c-ok: #00ff00;
104
+ --c-warn: #ffff00;
105
+ --c-warn-alt: #ffcc00;
106
+ --c-danger: #ff0000;
107
+ --c-purple: #e040fb;
108
+
109
+ --color-bg: #000000;
110
+ --color-panel: #0a0a0a;
111
+ --color-surface: #0a0a0a;
112
+ --color-border: #ffffff;
113
+ --color-text: #ffffff;
114
+ --color-text-primary: #ffffff;
115
+ --color-text-secondary: #dddddd;
116
+ --color-text-muted: #aaaaaa;
117
+ --color-text-dim: #888888;
118
+ --color-accent: #00ffff;
119
+ --color-success: #00ff00;
120
+ --color-warning: #ffff00;
121
+ --color-danger: #ff0000;
122
+ }
123
+
124
+ html,
125
+ body {
126
+ margin: 0;
127
+ padding: 0;
128
+ background: var(--c-bg);
129
+ color: var(--c-text);
130
+ font-family: var(--font, system-ui, sans-serif);
131
+ font-size: 14px;
132
+ line-height: 1.5;
133
+ }
134
+
135
+ body {
136
+ padding: 16px;
137
+ box-sizing: border-box;
138
+ }
139
+
140
+ a {
141
+ color: var(--c-accent);
142
+ }