pmx-canvas 0.1.18 → 0.1.20

package/src/client/canvas/CanvasViewport.tsx

@@ -102,6 +102,7 @@ function findAnnotationAtPoint(
       point.y < annotation.bounds.y - pad ||
       point.y > annotation.bounds.y + annotation.bounds.height + pad
     ) continue;
+    if (annotation.type === 'text') return annotation;
     for (let index = 1; index < annotation.points.length; index++) {
       const start = annotation.points[index - 1];
       const end = annotation.points[index];
@@ -122,19 +123,27 @@ interface LassoRect {
 
 interface AnnotationDraft {
   id: string;
-  type: 'freehand';
+  type: 'freehand' | 'text';
   points: Array<{ x: number; y: number }>;
   bounds: { x: number; y: number; width: number; height: number };
   color: string;
   width: number;
+  text?: string;
   createdAt: string;
 }
 
+interface TextAnnotationDraft {
+  x: number;
+  y: number;
+  value: string;
+}
+
 const ANNOTATION_COLOR = 'currentColor';
 const ANNOTATION_WIDTH = 4;
+const TEXT_ANNOTATION_WIDTH = 24;
 const ERASER_HIT_RADIUS = 14;
 
-type AnnotationTool = 'pen' | 'eraser' | null;
+type AnnotationTool = 'pen' | 'eraser' | 'text' | null;
 
 interface CanvasViewportProps {
   onNodeContextMenu?: (e: MouseEvent, nodeId: string) => void;
@@ -233,6 +242,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
   const annotationPoints = useRef<Array<{ x: number; y: number }>>([]);
   const [lasso, setLasso] = useState<LassoRect | null>(null);
   const [draftAnnotation, setDraftAnnotation] = useState<AnnotationDraft | null>(null);
+  const [textDraft, setTextDraftState] = useState<TextAnnotationDraft | null>(null);
+  const textDraftRef = useRef<TextAnnotationDraft | null>(null);
   const [dropActive, setDropActive] = useState(false);
   const dropCounter = useRef(0);
   // Ref mirrors lasso state so pointer handlers always read the latest value
@@ -256,6 +267,11 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
     },
   });
 
+  const setTextDraft = useCallback((next: TextAnnotationDraft | null) => {
+    textDraftRef.current = next;
+    setTextDraftState(next);
+  }, []);
+
   const createWebpageNodes = useCallback(async (urls: string[], centerX: number, centerY: number) => {
     if (urls.length === 0) return;
 
@@ -305,6 +321,23 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         return;
       }
 
+      if (annotationTool === 'text') {
+        const target = e.target instanceof Element ? e.target : null;
+        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        e.preventDefault();
+        e.stopPropagation();
+        activeNodeId.value = null;
+        clearSelection();
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        setTextDraft({
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+          value: '',
+        });
+        return;
+      }
+
       if (annotationTool === 'pen') {
         const target = e.target instanceof Element ? e.target : null;
         if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
@@ -450,11 +483,32 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
 
   useEffect(() => {
     if (annotationMode) return;
-    if (!isAnnotating.current && !draftAnnotation) return;
+    if (!isAnnotating.current && !draftAnnotation && !textDraft) return;
     isAnnotating.current = false;
     annotationPoints.current = [];
     setDraftAnnotation(null);
-  }, [annotationMode, draftAnnotation]);
+    setTextDraft(null);
+  }, [annotationMode, draftAnnotation, setTextDraft, textDraft]);
+
+  const commitTextDraft = useCallback(() => {
+    const draft = textDraftRef.current;
+    if (!draft) return;
+    const text = draft.value.trim();
+    setTextDraft(null);
+    if (!text) return;
+    const point = { x: draft.x, y: draft.y };
+    void createAnnotationFromClient({
+      type: 'text',
+      points: [point],
+      color: ANNOTATION_COLOR,
+      width: TEXT_ANNOTATION_WIDTH,
+      text,
+    });
+  }, [setTextDraft]);
+
+  useEffect(() => {
+    if (annotationTool !== 'text' && textDraft) setTextDraft(null);
+  }, [annotationTool, setTextDraft, textDraft]);
 
   // ── Drag-to-connect: track cursor in world space, hit-test on drop ──
   useEffect(() => {
@@ -517,8 +571,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
       const wx = (e.clientX - rect.left - v.x) / v.scale;
       const wy = (e.clientY - rect.top - v.y) / v.scale;
       // Offset so node centers on click point
-      const nodeW = 360;
-      const nodeH = 200;
+      const nodeW = 520;
+      const nodeH = 360;
       createNodeFromClient({
         type: 'markdown',
         title: 'New note',
@@ -697,6 +751,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         overflow: 'hidden',
         cursor: annotationTool === 'eraser'
           ? 'cell'
+          : annotationTool === 'text'
+            ? 'text'
           : annotationMode || draggingEdge.value || isLassoing.current
             ? 'crosshair'
             : 'grab',
@@ -737,7 +793,32 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
           </svg>
         )}
       </div>
-      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}`} aria-hidden="true" />}
+      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}${annotationTool === 'text' ? ' text' : ''}`} aria-hidden="true" />}
+      {textDraft && (
+        <input
+          class="annotation-text-input"
+          value={textDraft.value}
+          autoFocus
+          style={{
+            left: `${textDraft.x * v.scale + v.x}px`,
+            top: `${textDraft.y * v.scale + v.y}px`,
+            fontSize: `${TEXT_ANNOTATION_WIDTH * v.scale}px`,
+          }}
+          onInput={(e) => setTextDraft({ ...textDraft, value: (e.target as HTMLInputElement).value })}
+          onBlur={commitTextDraft}
+          onPointerDown={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              commitTextDraft();
+            }
+            if (e.key === 'Escape') {
+              e.preventDefault();
+              setTextDraft(null);
+            }
+          }}
+        />
+      )}
       {lassoStyle && <div class="lasso-rect" style={lassoStyle} />}
       {dropActive && (
         <div class="drop-zone-overlay">

package/src/client/canvas/CommandPalette.tsx

@@ -135,7 +135,7 @@ export function CommandPalette({
 
     // Action items
     const actions: Array<{ label: string; badge: string; action: () => void }> = [
-      { label: 'New note (markdown node)', badge: 'CREATE', action: () => { createNodeFromClient({ type: 'markdown', title: 'New note' }); onClose(); } },
+      { label: 'New note (markdown node)', badge: 'CREATE', action: () => { createNodeFromClient({ type: 'markdown', title: 'New note', width: 520, height: 360 }); onClose(); } },
       { label: 'Fit all nodes', badge: 'VIEW', action: () => { fitAll(window.innerWidth, window.innerHeight); onClose(); } },
       { label: 'Auto-arrange (grid)', badge: 'LAYOUT', action: () => { autoArrange(); onClose(); } },
       { label: 'Auto-arrange (graph-aware)', badge: 'LAYOUT', action: () => { forceDirectedArrange(); onClose(); } },

package/src/client/canvas/ContextMenu.tsx

@@ -319,8 +319,8 @@ function buildCanvasMenuItems(canvasX: number, canvasY: number): MenuItem[] {
     {
       label: 'New note',
       action: () => {
-        const width = 360;
-        const height = 200;
+        const width = 520;
+        const height = 360;
         const position = centeredPosition(canvasX, canvasY, width, height);
         void createNodeFromClient({
           type: 'markdown',

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -122,6 +122,7 @@ export function ExpandedNodeOverlay() {
   const isCtxPinned = nodeId ? contextPinnedNodeIds.value.has(nodeId) : false;
   const hasText = textContent.length > 0;
   const pendingClose = pendingExpandedNodeCloseId.value === nodeId;
+  const isEmbeddedViewer = node.type === 'mcp-app' || node.type === 'webpage' || node.type === 'json-render' || node.type === 'graph';
 
   return (
     <div
@@ -260,9 +261,14 @@ export function ExpandedNodeOverlay() {
             overflow: 'auto',
             padding: '16px',
             minHeight: 0,
+            ...(isEmbeddedViewer ? { display: 'flex', flexDirection: 'column' } : {}),
           }}
         >
-          {renderContent(node, true)}
+          {isEmbeddedViewer ? (
+            <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
+              {renderContent(node, true)}
+            </div>
+          ) : renderContent(node, true)}
         </div>
       </div>
     </div>

package/src/client/icons.tsx

@@ -139,6 +139,19 @@ export function IconEraser(p: IconProps): JSX.Element {
   );
 }
 
+/** Text cursor — canvas text annotation mode */
+export function IconTextAnnotation(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M3 4h10" />
+      <path d="M8 4v8" />
+      <path d="M6 12h4" />
+      <path d="M4.5 4 4 6" />
+      <path d="M11.5 4 12 6" />
+    </Icon>
+  );
+}
+
 /** Camera — snapshots */
 export function IconSnapshot(p: IconProps): JSX.Element {
   return (

package/src/client/nodes/McpAppNode.tsx

@@ -2,11 +2,12 @@ import type { CanvasNodeState } from '../types';
 import { canvasTheme } from '../state/canvas-store';
 import { ExtAppFrame } from './ExtAppFrame';
 
-function withTheme(url: string): string {
+function withViewerParams(url: string, expanded: boolean): string {
   if (!url) return url;
   try {
     const resolved = new URL(url, window.location.origin);
     resolved.searchParams.set('theme', canvasTheme.value === 'light' ? 'light' : 'dark');
+    if (expanded) resolved.searchParams.set('display', 'expanded');
     return resolved.toString();
   } catch {
     return url;
@@ -18,7 +19,7 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
     return <ExtAppFrame node={node} expanded={expanded} />;
   }
 
-  const url = withTheme((node.data.url as string) || '');
+  const url = withViewerParams((node.data.url as string) || '', expanded);
   const sourceServer = (node.data.sourceServer as string) || '';
   const hostMode = (node.data.hostMode as string) || 'hosted';
   const fallbackReason = node.data.fallbackReason as string | undefined;
@@ -54,7 +55,14 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
   }
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        ...(expanded ? { flex: 1, minHeight: 0, width: '100%' } : {}),
+      }}
+    >
       {!trustedDomain && (
         <div
           style={{
@@ -77,7 +85,7 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
         sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
         allow="clipboard-read; clipboard-write"
         loading="lazy"
-        style={{ flex: 1 }}
+        style={{ flex: 1, minHeight: 0, width: '100%' }}
         title={`MCP App: ${sourceServer}`}
       />
     </div>

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

@@ -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;

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({