diff --git a/docs/design-system/canvas-audit-items.md b/docs/design-system/canvas-audit-items.md index bb4ccef9..86888f69 100644 --- a/docs/design-system/canvas-audit-items.md +++ b/docs/design-system/canvas-audit-items.md @@ -2,6 +2,54 @@ > **Status:** VERIFIED — Cross-referenced against molecule-core/canvas/src/ (2026-05-09) > **Author:** Core-FE (draft), Core-UIUX (verification) +> **Updated:** 2026-05-09 with architecture structure + known issues + +## Canvas Stack (Verified) + +| Technology | Version | Purpose | +|-----------|--------|---------| +| React Flow | `@xyflow/react` v12 | Node/edge rendering | +| Framework | Next.js 14 App Router | Routing, SSR | +| Styling | Tailwind v4 | CSS with custom properties | +| State | Zustand | Client state management | + +## Directory Structure (Verified) + +``` +canvas/src/ +├── components/ +│ ├── Canvas.tsx # Viewport management, ReactFlow wrapper +│ ├── Toolbar.tsx # Add node/edge controls +│ ├── ContextMenu.tsx # Right-click menu +│ ├── SidePanel.tsx # Properties panel +│ ├── WorkspaceNode.tsx # Node rendering +│ ├── A2AEdge.tsx # Edge rendering +│ └── [tests]/ # Accessibility + component tests +├── stores/ +│ └── secrets-store.ts # ⚠️ getGrouped() performance issue +├── hooks/ +│ ├── useSocketEvent.ts +│ ├── useTemplateDeploy.tsx +│ └── useWorkspaceName.ts +└── lib/ + ├── api.ts + ├── auth.ts + ├── canvas-actions.ts + ├── design-tokens.ts # STATUS_CONFIG, TIER_CONFIG + ├── theme.ts + └── theme-provider.tsx # ThemeProvider, useTheme() + +## Known Issues + +### 🔴 HIGH: secrets-store.ts Performance +**File:** `canvas/src/stores/secrets-store.ts` +**Issue:** `getGrouped()` selector creates new objects every call (Object.fromEntries + arrays). Not memoized. +**Impact:** Causes unnecessary re-renders on frequent selector access. +**Fix needed:** Memoize the selector or use a proper Zustand selector pattern. + +### 🟡 MEDIUM: Pre-commit Hook Verification +**Issue:** Pre-commit hook checks 'use client' on hook-using components but unclear if it actually fails on violations. +**Action:** Verify the hook is enforcing the rule correctly. ## Verified Findings diff --git a/docs/design-system/canvas-design-system-v1.md b/docs/design-system/canvas-design-system-v1.md index 518eeade..d8fbe7e9 100644 --- a/docs/design-system/canvas-design-system-v1.md +++ b/docs/design-system/canvas-design-system-v1.md @@ -378,10 +378,47 @@ Canvas uses `@xyflow/react` (React Flow). --- -## 8. Remaining Open Items +## 8. Canvas Architecture (Verified) -1. **Visual regression tests** — No screenshot/visual tests exist yet. KI-006 tracks this gap. +**Stack:** +- `@xyflow/react` v12 (React Flow) — node/edge rendering +- Next.js 14 App Router +- Tailwind v4 with CSS custom properties +- Zustand for state management + +**Directory Structure:** +``` +canvas/src/ +├── components/ # Canvas.tsx, Toolbar.tsx, ContextMenu.tsx, SidePanel.tsx, WorkspaceNode.tsx, A2AEdge.tsx +├── stores/ # secrets-store.ts (only store) +├── hooks/ # useSocketEvent.ts, useTemplateDeploy.tsx, useWorkspaceName.ts +├── lib/ # api.ts, auth.ts, canvas-actions.ts, design-tokens.ts, theme.ts, theme-provider.tsx +└── app/ # Next.js App Router +``` + +## 9. Known Issues (Technical Debt) + +### Performance Issues +- **secrets-store.ts getGrouped() selector** — Creates new objects every call (Object.fromEntries + arrays) — not memoized. Causes performance issues with frequent re-renders. Needs selector optimization. + +### Code Quality +- Check for `any` types in canvas/ directory +- Verify pre-commit hook actually fails on 'use client' violations (unverified) +- Verify all Zustand selectors avoid object creation (see getGrouped issue above) +- Check 'use client' directive on hook-using components + +### Testing +- Add axe-core integration for automated accessibility testing +- Visual regression tests — no screenshot tests exist yet (KI-006) +- Target >80% test coverage on changed files + +## 10. Remaining Open Items + +### Accessibility Gaps +1. **Screen reader announcements** — Node/edge changes not announced. Need `aria-live="polite"` region. 2. **Keyboard shortcut help dialog** — No dedicated dialog. Shortcuts exist in `useKeyboardShortcuts.ts` but no `aria-describedby` hints on buttons. -3. **Screen reader announcements for canvas state changes** — Node/edge changes not announced. Consider `aria-live="polite"` region. -4. **Edge anchor accessibility** — React Flow handles are purely visual. May need ARIA annotations for screen readers. -5. **Drag-and-drop keyboard alternative** — Drag uses mouse primarily. No keyboard equivalent for node rearrangement. +3. **Edge anchor accessibility** — React Flow handles purely visual. Need ARIA annotations for screen readers. +4. **Drag-and-drop keyboard alternative** — Mouse only. Need keyboard equivalent for node rearrangement. + +### Performance +5. **secrets-store.ts getGrouped()** — Not memoized, creates new objects every call.