pmx-canvas 0.1.14 → 0.1.16

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 (56) hide show
  1. package/CHANGELOG.md +153 -0
  2. package/Readme.md +108 -1058
  3. package/dist/canvas/global.css +141 -0
  4. package/dist/canvas/index.js +124 -74
  5. package/dist/json-render/index.css +1 -1
  6. package/dist/types/client/nodes/ContextNode.d.ts +11 -2
  7. package/dist/types/client/nodes/HtmlNode.d.ts +5 -0
  8. package/dist/types/client/nodes/StatusNode.d.ts +1 -0
  9. package/dist/types/client/state/canvas-store.d.ts +11 -3
  10. package/dist/types/client/state/intent-bridge.d.ts +5 -1
  11. package/dist/types/client/types.d.ts +2 -2
  12. package/dist/types/json-render/catalog.d.ts +1 -1
  13. package/dist/types/mcp/canvas-access.d.ts +7 -1
  14. package/dist/types/server/agent-context.d.ts +1 -0
  15. package/dist/types/server/canvas-operations.d.ts +4 -2
  16. package/dist/types/server/canvas-provenance.d.ts +1 -1
  17. package/dist/types/server/canvas-serialization.d.ts +3 -0
  18. package/dist/types/server/canvas-state.d.ts +51 -4
  19. package/dist/types/server/demo.d.ts +5 -0
  20. package/dist/types/server/index.d.ts +13 -3
  21. package/dist/types/server/web-artifacts.d.ts +18 -0
  22. package/dist/types/shared/canvas-node-kind.d.ts +5 -0
  23. package/package.json +1 -1
  24. package/skills/pmx-canvas/SKILL.md +43 -0
  25. package/skills/pmx-canvas-testing/SKILL.md +17 -0
  26. package/src/cli/agent.ts +52 -5
  27. package/src/cli/index.ts +2 -23
  28. package/src/client/canvas/AttentionHistory.tsx +14 -1
  29. package/src/client/canvas/CanvasNode.tsx +1 -1
  30. package/src/client/canvas/CanvasViewport.tsx +3 -0
  31. package/src/client/canvas/ContextPinBar.tsx +2 -1
  32. package/src/client/canvas/DockedNode.tsx +112 -13
  33. package/src/client/canvas/ExpandedNodeOverlay.tsx +5 -0
  34. package/src/client/canvas/Minimap.tsx +1 -0
  35. package/src/client/icons.tsx +1 -0
  36. package/src/client/nodes/ContextNode.tsx +128 -6
  37. package/src/client/nodes/HtmlNode.tsx +151 -0
  38. package/src/client/nodes/StatusNode.tsx +16 -1
  39. package/src/client/nodes/StatusSummary.tsx +2 -1
  40. package/src/client/state/canvas-store.ts +37 -7
  41. package/src/client/state/intent-bridge.ts +9 -4
  42. package/src/client/state/sse-bridge.ts +2 -1
  43. package/src/client/theme/global.css +141 -0
  44. package/src/client/types.ts +3 -0
  45. package/src/mcp/canvas-access.ts +34 -7
  46. package/src/mcp/server.ts +178 -25
  47. package/src/server/agent-context.ts +50 -3
  48. package/src/server/canvas-operations.ts +20 -3
  49. package/src/server/canvas-provenance.ts +2 -1
  50. package/src/server/canvas-serialization.ts +38 -13
  51. package/src/server/canvas-state.ts +305 -34
  52. package/src/server/demo.ts +792 -0
  53. package/src/server/index.ts +33 -3
  54. package/src/server/server.ts +98 -14
  55. package/src/server/web-artifacts.ts +116 -3
  56. package/src/shared/canvas-node-kind.ts +14 -0
package/dist/canvas/global.css CHANGED
@@ -1844,6 +1844,147 @@ body,
1844
1844
  max-width: 200px;
1845
1845
  }
1846
1846
 
1847
+ /* Context dock — collapsed pill mirrors Updates pill, sits above it */
1848
+ .context-dock-tab {
1849
+ position: fixed;
1850
+ top: 92px;
1851
+ right: 0;
1852
+ display: flex;
1853
+ align-items: center;
1854
+ gap: 8px;
1855
+ padding: 8px 12px 8px 14px;
1856
+ background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
1857
+ backdrop-filter: blur(16px);
1858
+ border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
1859
+ border-right: 0;
1860
+ border-radius: 14px 0 0 14px;
1861
+ box-shadow: 0 12px 36px var(--c-shadow);
1862
+ color: var(--c-text);
1863
+ cursor: pointer;
1864
+ font: inherit;
1865
+ font-size: 11px;
1866
+ font-weight: 600;
1867
+ letter-spacing: 0.08em;
1868
+ text-transform: uppercase;
1869
+ z-index: 60;
1870
+ }
1871
+
1872
+ .context-dock-tab:hover {
1873
+ border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-line) 60%);
1874
+ color: var(--c-accent);
1875
+ }
1876
+
1877
+ .context-dock-tab svg {
1878
+ display: block;
1879
+ color: var(--c-accent);
1880
+ flex-shrink: 0;
1881
+ }
1882
+
1883
+ .context-dock-tab-label {
1884
+ white-space: nowrap;
1885
+ }
1886
+
1887
+ .context-dock-tab-badge {
1888
+ min-width: 18px;
1889
+ height: 18px;
1890
+ padding: 0 5px;
1891
+ display: inline-flex;
1892
+ align-items: center;
1893
+ justify-content: center;
1894
+ border-radius: 9px;
1895
+ background: var(--c-accent);
1896
+ color: var(--c-contrast-fg);
1897
+ font-size: 10px;
1898
+ font-weight: 700;
1899
+ letter-spacing: 0;
1900
+ text-transform: none;
1901
+ }
1902
+
1903
+ /* Context dock — expanded panel anchored top-right edge.
1904
+ Mutually exclusive with the Updates panel (see DockedNode.tsx and
1905
+ AttentionHistory.tsx) — opening one collapses the other, so they can both
1906
+ share the same right: 18px anchor without overlapping. */
1907
+ .context-dock-panel {
1908
+ position: fixed;
1909
+ top: 92px;
1910
+ right: 18px;
1911
+ width: min(360px, calc(100vw - 24px));
1912
+ max-height: calc(100vh - 110px);
1913
+ display: flex;
1914
+ flex-direction: column;
1915
+ gap: 10px;
1916
+ padding: 14px;
1917
+ background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
1918
+ backdrop-filter: blur(16px);
1919
+ border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
1920
+ border-radius: 18px;
1921
+ box-shadow: 0 14px 36px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-accent) 8%, transparent);
1922
+ z-index: 10001;
1923
+ overflow: hidden;
1924
+ }
1925
+
1926
+ .context-dock-header {
1927
+ display: flex;
1928
+ align-items: flex-start;
1929
+ justify-content: space-between;
1930
+ gap: 8px;
1931
+ padding: 2px 2px 4px;
1932
+ flex-shrink: 0;
1933
+ }
1934
+
1935
+ .context-dock-header-text {
1936
+ display: flex;
1937
+ flex-direction: column;
1938
+ gap: 2px;
1939
+ min-width: 0;
1940
+ }
1941
+
1942
+ .context-dock-title {
1943
+ font-size: 12px;
1944
+ font-weight: 700;
1945
+ letter-spacing: 0.08em;
1946
+ text-transform: uppercase;
1947
+ color: var(--c-text);
1948
+ }
1949
+
1950
+ .context-dock-subtitle {
1951
+ font-size: 11px;
1952
+ color: var(--c-dim);
1953
+ }
1954
+
1955
+ .context-dock-controls {
1956
+ display: flex;
1957
+ gap: 4px;
1958
+ flex-shrink: 0;
1959
+ }
1960
+
1961
+ .context-dock-icon-button {
1962
+ width: 22px;
1963
+ height: 22px;
1964
+ border: 0;
1965
+ border-radius: 6px;
1966
+ background: transparent;
1967
+ color: var(--c-dim);
1968
+ font-size: 16px;
1969
+ line-height: 1;
1970
+ cursor: pointer;
1971
+ display: grid;
1972
+ place-items: center;
1973
+ padding: 0;
1974
+ }
1975
+
1976
+ .context-dock-icon-button:hover {
1977
+ color: var(--c-text);
1978
+ background: var(--c-surface-hover);
1979
+ }
1980
+
1981
+ .context-dock-body {
1982
+ flex: 1 1 auto;
1983
+ min-height: 0;
1984
+ overflow-y: auto;
1985
+ padding-right: 2px;
1986
+ }
1987
+
1847
1988
  .attention-history {
1848
1989
  position: fixed;
1849
1990
  top: 146px;