pmx-canvas 0.1.19 → 0.1.21

package/src/client/state/canvas-store.ts

@@ -173,10 +173,18 @@ export function addNode(node: CanvasNodeState): void {
 }
 
 export function updateNode(id: string, patch: Partial<CanvasNodeState>): void {
+  updateNodeWithOptions(id, patch);
+}
+
+function updateNodeWithOptions(
+  id: string,
+  patch: Partial<CanvasNodeState>,
+  options: { skipGroupChildTranslation?: boolean } = {},
+): void {
   const existing = nodes.value.get(id);
   if (!existing) return;
   const next = new Map(nodes.value);
-  if (existing.type === 'group' && patch.position) {
+  if (existing.type === 'group' && patch.position && options.skipGroupChildTranslation !== true) {
     const deltaX = patch.position.x - existing.position.x;
     const deltaY = patch.position.y - existing.position.y;
     if (deltaX !== 0 || deltaY !== 0) {
@@ -272,9 +280,11 @@ export function removeAnnotation(id: string): void {
 }
 
 export async function createAnnotationFromClient(input: {
+  type?: CanvasAnnotation['type'];
   points: CanvasAnnotation['points'];
   color: string;
   width: number;
+  text?: string;
   label?: string;
 }): Promise<{ ok: boolean }> {
   try {
@@ -748,10 +758,10 @@ export function autoArrange(): void {
       updateNode(id, { position });
     }
     for (const [groupId, bounds] of result.groupBounds.entries()) {
-      updateNode(groupId, {
+      updateNodeWithOptions(groupId, {
         position: { x: bounds.x, y: bounds.y },
         size: { width: bounds.width, height: bounds.height },
-      });
+      }, { skipGroupChildTranslation: true });
     }
   });
   persistLayout();
@@ -766,10 +776,10 @@ export function forceDirectedArrange(): void {
       updateNode(id, { position });
     }
     for (const [groupId, bounds] of result.groupBounds.entries()) {
-      updateNode(groupId, {
+      updateNodeWithOptions(groupId, {
         position: { x: bounds.x, y: bounds.y },
         size: { width: bounds.width, height: bounds.height },
-      });
+      }, { skipGroupChildTranslation: true });
     }
   });
   persistLayout();

package/src/client/state/sse-bridge.ts

@@ -291,9 +291,9 @@ function ensureLedgerNode(summary: Record<string, unknown>): void {
 function applyCanvasTheme(theme: string): void {
   const valid = theme === 'dark' || theme === 'light' || theme === 'high-contrast';
   if (!valid || canvasTheme.value === theme) return;
-  canvasTheme.value = theme;
   document.documentElement.setAttribute('data-theme', theme);
   invalidateTokenCache();
+  canvasTheme.value = theme;
 }
 
 function isCanvasNodeType(value: unknown): value is CanvasNodeState['type'] {
@@ -388,21 +388,22 @@ function parseCanvasEdge(raw: Record<string, unknown>): CanvasEdge | null {
 
 function parseCanvasAnnotation(raw: Record<string, unknown>): CanvasAnnotation | null {
   if (typeof raw.id !== 'string' || !raw.id) return null;
-  if (raw.type !== 'freehand') return null;
+  if (raw.type !== 'freehand' && raw.type !== 'text') return null;
   if (!Array.isArray(raw.points)) return null;
   const points = raw.points
     .map((point) => parseCanvasPosition(point))
     .filter((point): point is { x: number; y: number } => point !== null);
   const bounds = parseCanvasRect(raw.bounds);
-  if (points.length < 2 || !bounds) return null;
+  if (points.length < (raw.type === 'text' ? 1 : 2) || !bounds) return null;
 
   return {
     id: raw.id,
-    type: 'freehand',
+    type: raw.type,
     points,
     bounds,
     color: typeof raw.color === 'string' ? raw.color : '#f97316',
     width: typeof raw.width === 'number' ? raw.width : 4,
+    ...(typeof raw.text === 'string' ? { text: raw.text } : {}),
     ...(typeof raw.label === 'string' ? { label: raw.label } : {}),
     createdAt: typeof raw.createdAt === 'string' ? raw.createdAt : '',
   };

package/src/client/theme/global.css

@@ -392,6 +392,19 @@ body,
   margin: 0.4em 0;
   color: var(--c-muted);
 }
+
+.canvas-node .node-body ul,
+.canvas-node .node-body ol {
+  margin: 0.4em 0;
+  padding-left: 0.25em;
+  list-style-position: inside;
+}
+
+.canvas-node .node-body li {
+  margin: 0.2em 0;
+  padding-left: 0.15em;
+}
+
 .canvas-node .node-body a {
   color: var(--c-accent);
   text-decoration: none;
@@ -1481,14 +1494,14 @@ body,
   height: 1px;
   overflow: visible;
   pointer-events: none;
-  z-index: 45;
+  z-index: 9000;
 }
 
 .annotation-capture-layer {
   position: absolute;
   inset: 0;
   z-index: 9996;
-  pointer-events: none;
+  pointer-events: auto;
   background: color-mix(in srgb, var(--c-accent) 5%, transparent);
 }
 
@@ -1496,6 +1509,26 @@ body,
   background: color-mix(in srgb, var(--c-danger) 6%, transparent);
 }
 
+.annotation-capture-layer.text {
+  background: color-mix(in srgb, var(--c-annotation) 4%, transparent);
+}
+
+.annotation-text-input {
+  position: absolute;
+  z-index: 9997;
+  min-width: 120px;
+  max-width: min(560px, calc(100% - 24px));
+  padding: 2px 4px;
+  border: 1px solid var(--c-annotation);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--c-bg) 72%, transparent);
+  color: var(--c-annotation);
+  font-family: var(--font);
+  font-weight: 700;
+  line-height: 1.15;
+  outline: none;
+}
+
 /* ── Drop Zone (file drag-and-drop) ─────────────────────────── */
 .drop-zone-overlay {
   position: absolute;
@@ -2405,6 +2438,18 @@ body,
   border-color: var(--c-muted);
 }
 
+.expanded-action-btn.expanded-action-primary {
+  background: var(--c-accent-12);
+  border-color: var(--c-accent-30);
+  color: var(--c-accent);
+}
+
+.expanded-action-btn.expanded-action-primary:hover {
+  background: var(--c-accent-25);
+  border-color: var(--c-accent);
+  color: var(--c-text);
+}
+
 .expanded-action-btn.expanded-action-active {
   background: var(--c-warn-12);
   border-color: var(--c-warn-30);
@@ -2422,6 +2467,82 @@ body,
   padding: 0 4px;
 }
 
+.html-presentation-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10050;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: clamp(12px, 2vw, 28px);
+  background:
+    radial-gradient(circle at top left, var(--c-accent-25), transparent 36rem),
+    rgba(3, 7, 18, 0.96);
+  color: var(--c-text);
+}
+
+.html-presentation-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-shrink: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--c-line);
+  border-radius: 16px;
+  background: var(--c-panel-glass);
+  box-shadow: 0 18px 50px var(--c-shadow-heavy);
+}
+
+.html-presentation-kicker {
+  color: var(--c-accent);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.html-presentation-title {
+  max-width: min(72vw, 900px);
+  overflow: hidden;
+  color: var(--c-text);
+  font-size: 14px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.html-presentation-exit {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--c-line);
+  border-radius: 999px;
+  background: var(--c-panel-soft);
+  color: var(--c-text-soft);
+  cursor: pointer;
+  font: 600 12px/1 var(--font);
+}
+
+.html-presentation-exit:hover {
+  border-color: var(--c-accent);
+  color: var(--c-text);
+}
+
+.html-presentation-stage {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  border-radius: 22px;
+  background: var(--c-bg);
+  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+}
+
+.html-node-frame-presentation {
+  flex: 1;
+  min-height: 0;
+}
+
 /* ── Context pin button on node title bar ────────────────────── */
 .node-controls .ctx-pin-btn {
   color: var(--c-muted);

package/src/client/types.ts

@@ -48,11 +48,12 @@ export interface CanvasAnnotationPoint {
 
 export interface CanvasAnnotation {
   id: string;
-  type: 'freehand';
+  type: 'freehand' | 'text';
   points: CanvasAnnotationPoint[];
   bounds: { x: number; y: number; width: number; height: number };
   color: string;
   width: number;
+  text?: string;
   label?: string;
   createdAt: string;
 }

package/src/json-render/charts/components.tsx

@@ -8,7 +8,7 @@
  * a responsive chart inside a styled container.
  */
 
-import type { ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import type { BaseComponentProps } from '@json-render/react';
 import {
   BarChart as RechartsBarChart,
@@ -106,6 +106,40 @@ export const polarChartMargin = { top: 18, right: 40, bottom: 30, left: 40 };
 export const axisTickMargin = 8;
 export const legendMargin = { top: 10 };
 
+export function useChartFrameHeight(explicitHeight: number | null | undefined, fallbackHeight = 300) {
+  const frameRef = useRef<HTMLDivElement>(null);
+  const [autoHeight, setAutoHeight] = useState(fallbackHeight);
+
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame) return;
+
+    const updateHeight = () => {
+      const rect = frame.getBoundingClientRect();
+      const doc = document.documentElement;
+      const currentHeight = frame.getBoundingClientRect().height;
+      const overflow = Math.max(0, doc.scrollHeight - doc.clientHeight);
+      const available = overflow > 0 ? currentHeight - overflow : window.innerHeight - rect.top - 24;
+      setAutoHeight(Math.max(220, Math.round(available)));
+    };
+
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(document.documentElement);
+    observer.observe(frame);
+    window.addEventListener('resize', updateHeight);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', updateHeight);
+    };
+  }, [explicitHeight]);
+
+  return {
+    frameRef,
+    height: typeof explicitHeight === 'number' ? Math.min(explicitHeight, autoHeight) : autoHeight,
+  };
+}
+
 /** Shared wrapper for cartesian charts (Line + Bar). */
 export function CartesianChart({
   props,
@@ -117,12 +151,12 @@ export function CartesianChart({
   className?: string;
 }) {
   const chartData = processChartData(props.data ?? [], props.xKey, props.yKey, props.aggregate);
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className={`pmx-chart${className ? ` ${className}` : ''}`}>
+    <div ref={frameRef} className={`pmx-chart${className ? ` ${className}` : ''}`}>
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         {children(chartData)}
       </ResponsiveContainer>
     </div>
@@ -172,12 +206,12 @@ function ChartBarChart({ props }: BaseComponentProps<CartesianChartProps>) {
 
 function ChartPieChart({ props }: BaseComponentProps<PieChartProps>) {
   const data = props.data ?? [];
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className="pmx-chart pmx-chart--pie">
+    <div ref={frameRef} className="pmx-chart pmx-chart--pie">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsPieChart margin={polarChartMargin}>
           <Tooltip contentStyle={tooltipStyle} />
           {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}

package/src/json-render/charts/extra-components.tsx

@@ -40,6 +40,7 @@ import {
   legendMargin,
   polarChartMargin,
   tooltipStyle,
+  useChartFrameHeight,
   type CartesianChartProps,
 } from './components';
 
@@ -89,12 +90,12 @@ interface ScatterChartProps {
 function ChartScatterChart({ props }: BaseComponentProps<ScatterChartProps>) {
   const fill = props.color ?? CHART_COLORS[0];
   const data = props.data ?? [];
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className="pmx-chart pmx-chart--scatter">
+    <div ref={frameRef} className="pmx-chart pmx-chart--scatter">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsScatterChart margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
           <XAxis type="number" dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} name={props.xKey} />
@@ -120,12 +121,12 @@ interface RadarChartProps {
 function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>) {
   const data = props.data ?? [];
   const metrics = (props.metrics ?? []).filter((m) => typeof m === 'string' && m.length > 0);
-  const h = props.height ?? 320;
+  const { frameRef, height } = useChartFrameHeight(props.height, 320);
 
   return (
-    <div className="pmx-chart pmx-chart--radar">
+    <div ref={frameRef} className="pmx-chart pmx-chart--radar">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsRadarChart data={data} outerRadius="66%" margin={polarChartMargin}>
           <PolarGrid stroke="var(--border, #e5e5e5)" />
           <PolarAngleAxis dataKey={props.axisKey} tick={axisStyle} />
@@ -166,12 +167,12 @@ function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps
   const chartData = props.aggregate
     ? mergeAggregated(props.data ?? [], props.xKey, series, props.aggregate)
     : props.data ?? [];
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className="pmx-chart pmx-chart--stacked-bar">
+    <div ref={frameRef} className="pmx-chart pmx-chart--stacked-bar">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsBarChart data={chartData} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
           <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
@@ -238,12 +239,12 @@ function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>) {
   const data = props.data ?? [];
   const barFill = props.barColor ?? CHART_COLORS[0];
   const lineStroke = props.lineColor ?? CHART_COLORS[3];
-  const h = props.height ?? 300;
+  const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
-    <div className="pmx-chart pmx-chart--composed">
+    <div ref={frameRef} className="pmx-chart pmx-chart--composed">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <ResponsiveContainer width="100%" height={h}>
+      <ResponsiveContainer width="100%" height={height}>
         <RechartsComposedChart data={data} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
           <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />

package/src/json-render/renderer/index.tsx

@@ -49,6 +49,7 @@ declare global {
   interface Window {
     __PMX_CANVAS_JSON_RENDER_SPEC__?: Spec & { state?: Record<string, unknown> };
     __PMX_CANVAS_JSON_RENDER_THEME__?: string;
+    __PMX_CANVAS_JSON_RENDER_DISPLAY__?: string;
   }
 }
 

package/src/json-render/server.ts

@@ -511,7 +511,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
 
   const chartProps: Record<string, unknown> = {
     data: input.data,
-    height: input.height ?? 320,
+    ...(typeof input.height === 'number' ? { height: input.height } : {}),
   };
 
   switch (chartType) {
@@ -648,6 +648,7 @@ export async function buildJsonRenderViewerHtml(options: {
   title: string;
   spec: JsonRenderSpec;
   theme?: 'dark' | 'light' | 'high-contrast';
+  display?: 'expanded';
 }): Promise<string> {
   try {
     await ensureJsonRenderBundle();
@@ -661,6 +662,7 @@ export async function buildJsonRenderViewerHtml(options: {
     const boot = [
       `window.__PMX_CANVAS_JSON_RENDER_SPEC__ = ${JSON.stringify(options.spec)};`,
       ...(options.theme ? [`window.__PMX_CANVAS_JSON_RENDER_THEME__ = ${JSON.stringify(options.theme)};`] : []),
+      ...(options.display ? [`window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ = ${JSON.stringify(options.display)};`] : []),
       jsBundle,
     ].join('\n');
     return buildAppHtml({

package/src/mcp/canvas-access.ts

@@ -19,6 +19,8 @@ type AddDiagramInput = Parameters<PmxCanvas['addDiagram']>[0];
 type AddJsonRenderNodeInput = Parameters<PmxCanvas['addJsonRenderNode']>[0];
 type AddJsonRenderNodeResult = ReturnType<PmxCanvas['addJsonRenderNode']>;
 type AddHtmlNodeInput = Parameters<PmxCanvas['addHtmlNode']>[0];
+type AddHtmlPrimitiveInput = Parameters<PmxCanvas['addHtmlPrimitive']>[0];
+type AddHtmlPrimitiveResult = ReturnType<PmxCanvas['addHtmlPrimitive']>;
 type AddGraphNodeInput = Parameters<PmxCanvas['addGraphNode']>[0];
 type AddGraphNodeResult = ReturnType<PmxCanvas['addGraphNode']>;
 type UpdateNodePatch = Parameters<PmxCanvas['updateNode']>[1];
@@ -102,6 +104,7 @@ export interface CanvasAccess {
   addDiagram(input: AddDiagramInput): Promise<OpenMcpAppResult>;
   addJsonRenderNode(input: AddJsonRenderNodeInput): Promise<AddJsonRenderNodeResult>;
   addHtmlNode(input: AddHtmlNodeInput): Promise<string>;
+  addHtmlPrimitive(input: AddHtmlPrimitiveInput): Promise<AddHtmlPrimitiveResult>;
   addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult>;
   buildWebArtifact(input: WebArtifactInput): Promise<WebArtifactResult>;
   updateNode(id: string, patch: UpdateNodePatch): Promise<void>;
@@ -188,6 +191,10 @@ class LocalCanvasAccess implements CanvasAccess {
     return this.canvas.addHtmlNode(input);
   }
 
+  async addHtmlPrimitive(input: AddHtmlPrimitiveInput): Promise<AddHtmlPrimitiveResult> {
+    return this.canvas.addHtmlPrimitive(input);
+  }
+
   async addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult> {
     return this.canvas.addGraphNode(input);
   }
@@ -435,7 +442,53 @@ class RemoteCanvasAccess implements CanvasAccess {
   }
 
   async addHtmlNode(input: AddHtmlNodeInput): Promise<string> {
-    return await this.requestNodeId('POST', '/api/canvas/node', { type: 'html', ...input });
+    const {
+      summary,
+      agentSummary,
+      description,
+      presentation,
+      slideTitles,
+      embeddedNodeIds,
+      embeddedUrls,
+      ...rest
+    } = input as AddHtmlNodeInput & {
+      summary?: string;
+      agentSummary?: string;
+      description?: string;
+      presentation?: boolean;
+      slideTitles?: string[];
+      embeddedNodeIds?: string[];
+      embeddedUrls?: string[];
+    };
+    return await this.requestNodeId('POST', '/api/canvas/node', {
+      type: 'html',
+      ...rest,
+      data: {
+        ...(typeof summary === 'string' ? { summary } : {}),
+        ...(typeof agentSummary === 'string' ? { agentSummary } : {}),
+        ...(typeof description === 'string' ? { description } : {}),
+        ...(presentation === true ? { presentation: true } : {}),
+        ...(Array.isArray(slideTitles) ? { slideTitles } : {}),
+        ...(Array.isArray(embeddedNodeIds) ? { embeddedNodeIds } : {}),
+        ...(Array.isArray(embeddedUrls) ? { embeddedUrls } : {}),
+      },
+    });
+  }
+
+  async addHtmlPrimitive(input: AddHtmlPrimitiveInput): Promise<AddHtmlPrimitiveResult> {
+    const response = await this.requestJson<{
+      id?: string;
+      node?: { id?: string };
+      primitive?: { kind?: string; title?: string; htmlBytes?: number };
+    }>('POST', '/api/canvas/node', { type: 'html', ...input, primitive: input.kind });
+    const id = typeof response.id === 'string' ? response.id : response.node?.id;
+    if (!id) throw new Error('html primitive response did not include a node id.');
+    return {
+      id,
+      kind: input.kind,
+      title: response.primitive?.title ?? input.title ?? input.kind,
+      htmlBytes: response.primitive?.htmlBytes ?? 0,
+    };
   }
 
   async addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult> {