Add editable flowchart sections

.github/workflows/ci.yml

@@ -48,6 +48,7 @@ jobs:
       - run: pnpm --filter @arielcharts/shared build
       - run: pnpm exec playwright install --with-deps chromium
       - run: pnpm test:e2e-workspace-ux
+      - run: pnpm test:e2e-subgraphs
 
   protected-collaboration:
     runs-on: ubuntu-latest

apps/web/src/app/globals.css

@@ -527,13 +527,18 @@ code {
 }
 
 .workspace-settings-heading {
+  position: sticky;
+  z-index: 2;
+  top: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   min-height: 48px;
   padding: 0 14px;
   border-bottom: 1px solid var(--line-subtle);
+  background: var(--surface-raised);
+  box-shadow: none;
 }
 
 .workspace-settings-heading h2,
@@ -1185,6 +1190,7 @@ code {
   color: var(--ink-muted);
 }
 
+.diagram-canvas-svg--reactflow svg g.cluster,
 .diagram-canvas-svg--reactflow svg g.node,
 .diagram-canvas-svg--reactflow svg .edgePaths,
 .diagram-canvas-svg--reactflow svg .edgeLabels,
@@ -2260,14 +2266,6 @@ code {
     overscroll-behavior: contain;
   }
 
-  .workspace-settings-heading {
-    position: sticky;
-    z-index: 2;
-    top: 0;
-    background: var(--surface-raised);
-    box-shadow: none;
-  }
-
   .workspace-share-button {
     width: 44px;
     height: 44px;

apps/web/src/app/globals.test.ts

@@ -42,3 +42,9 @@ describe('revision history selection CSS contracts', () => {
     expect(css.slice(currentLastItem, currentLastItem + 140)).toMatch(/border-bottom-color:\s*var\(--selection\);/u);
   });
 });
+
+describe('editable section presentation', () => {
+  it('hides stale Mermaid cluster geometry behind the derived interactive section layer', () => {
+    expect(css).toMatch(/\.diagram-canvas-svg--reactflow svg g\.cluster,[^}]*\{\s*opacity:\s*0;/u);
+  });
+});

apps/web/src/components/diagram-canvas.test.ts

@@ -4,7 +4,7 @@ import type { DiagramLink } from '../lib/diagram-mutations';
 import type { MermaidPresentation } from '../lib/mermaid-presentation';
 import type { SvgHitMap } from '../lib/svg-hit-map';
 import { getCanvasEdgeMarker } from '../lib/mermaid-presentation';
-import { areMermaidPresentationsEqual, areSvgHitMapsEqual, getCanvasHistoryShortcut, getCanonicalSelectionAttribute, getFlowEdgePresentation, getFlowSelectionChange, getGraphMembershipKey, getNodeClickSelection, getRendererInteractionMode, isSameNodeSelection, shouldEnableCanvasMarquee, shouldHandleCanvasShortcut, shouldHandleCanvasSingleKeyShortcut, shouldRestoreCanvasFocusAfterPaste } from './diagram-canvas';
+import { areMermaidPresentationsEqual, areSvgHitMapsEqual, getCanvasHistoryShortcut, getCanonicalSelectionAttribute, getFlowEdgePresentation, getFlowSelectionChange, getGraphMembershipKey, getNodeClickSelection, getRendererInteractionMode, isSameNodeSelection, shouldEnableCanvasMarquee, shouldHandleCanvasShortcut, shouldHandleCanvasSingleKeyShortcut, shouldHandleGlobalCanvasRenameShortcut, shouldRestoreCanvasFocusAfterPaste } from './diagram-canvas';
 
 const canvasSource = readFileSync(new URL('./diagram-canvas.tsx', import.meta.url), 'utf8');
 const workspaceSource = readFileSync(new URL('./session-workspace.tsx', import.meta.url), 'utf8');
@@ -118,10 +118,20 @@ describe('shouldHandleCanvasShortcut', () => {
 });
 
 describe('shouldHandleCanvasSingleKeyShortcut', () => {
-  it('keeps letter and camera shortcuts off toolbar controls and focused nodes', () => {
-    expect(shouldHandleCanvasSingleKeyShortcut(true, true)).toBe(true);
-    expect(shouldHandleCanvasSingleKeyShortcut(false, true)).toBe(false);
-    expect(shouldHandleCanvasSingleKeyShortcut(true, false)).toBe(false);
+  it('accepts canvas descendants while excluding typing and toolbar ownership', () => {
+    expect(shouldHandleCanvasSingleKeyShortcut(true, true, false, false)).toBe(true);
+    expect(shouldHandleCanvasSingleKeyShortcut(false, true, false, false)).toBe(false);
+    expect(shouldHandleCanvasSingleKeyShortcut(true, false, false, false)).toBe(false);
+    expect(shouldHandleCanvasSingleKeyShortcut(true, true, true, false)).toBe(false);
+    expect(shouldHandleCanvasSingleKeyShortcut(true, true, false, true)).toBe(false);
+  });
+});
+
+describe('shouldHandleGlobalCanvasRenameShortcut', () => {
+  it('leaves F2 with a focused node or section instead of renaming a different selected node', () => {
+    expect(shouldHandleGlobalCanvasRenameShortcut(false, true)).toBe(false);
+    expect(shouldHandleGlobalCanvasRenameShortcut(true, false)).toBe(false);
+    expect(shouldHandleGlobalCanvasRenameShortcut(false, false)).toBe(true);
   });
 });