From deae847faa8fd762ea534b95507eb629bcaaf8c8 Mon Sep 17 00:00:00 2001
From: tejasM17 <tejasm9380@gmail.com>
Date: Thu, 16 Jul 2026 22:01:47 +0530
Subject: [PATCH 1/4] compleated 14-feat

---
 components/editor/canvas-node.tsx        | 201 +++++++++++++++++++----
 components/editor/node-shape-visual.tsx  | 167 +++++++++++++++++++
 components/editor/shape-panel.tsx        | 155 +++++++++++++----
 context/feature-specs/13-node-shape.md   |  33 ++++
 context/feature-specs/14-node-editing.md |  40 +++++
 context/progress-tracker.md              |   9 +-
 types/canvas.ts                          |   7 +-
 7 files changed, 545 insertions(+), 67 deletions(-)
 create mode 100644 components/editor/node-shape-visual.tsx
 create mode 100644 context/feature-specs/13-node-shape.md
 create mode 100644 context/feature-specs/14-node-editing.md

diff --git a/components/editor/canvas-node.tsx b/components/editor/canvas-node.tsx
index a705840..b6bb652 100644
--- a/components/editor/canvas-node.tsx
+++ b/components/editor/canvas-node.tsx
@@ -1,52 +1,195 @@
 "use client";
 
-import { memo } from "react";
-import { Handle, Position, type NodeProps } from "@xyflow/react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type FocusEvent,
+} from "react";
+import {
+  Handle,
+  NodeResizer,
+  Position,
+  useReactFlow,
+  type NodeProps,
+} from "@xyflow/react";
 
 import type { CanvasNode } from "@/types/canvas";
 import { NODE_COLORS } from "@/types/canvas";
+import { NodeShapeVisual } from "./node-shape-visual";
+
+/** Minimum node size — prevents nodes from collapsing to unusable dimensions. */
+const MIN_NODE_WIDTH = 80;
+const MIN_NODE_HEIGHT = 40;
+
+const LABEL_PLACEHOLDER = "Label";
+
+const HANDLE_CLASS =
+  "!h-2 !w-2 !rounded-full !border !border-border-default !bg-white";
 
 /**
- * Basic canvas node renderer. For this initial implementation, renders
- * every shape as a simple bordered rectangle with the label centered.
- * Shape-specific visuals will be added in later features.
+ * Custom React Flow node: per-shape visuals, resize handles when selected,
+ * four connectable points, and double-click inline label editing.
+ * All dimension and label updates flow through the collaborative node state.
  */
-function CanvasNodeComponent({ data }: NodeProps<CanvasNode>) {
+function CanvasNodeComponent({
+  id,
+  data,
+  selected,
+  width,
+  height,
+}: NodeProps<CanvasNode>) {
   const { label, color: colorName, shape } = data;
+  const { updateNodeData } = useReactFlow<CanvasNode>();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const colorPair =
+    NODE_COLORS.find((c) => c.name === colorName) ?? NODE_COLORS[0];
+
+  const nodeWidth = width ?? 160;
+  const nodeHeight = height ?? 80;
+
+  // Subtle border at rest; brighter when selected
+  const borderColor = selected
+    ? colorPair.text
+    : `${colorPair.text}55`;
+
+  // Focus the textarea when editing starts
+  useEffect(() => {
+    if (!isEditing) return;
+    const el = textareaRef.current;
+    if (!el) return;
+    el.focus();
+    // Place caret at end without scrolling the canvas
+    const len = el.value.length;
+    el.setSelectionRange(len, len);
+  }, [isEditing]);
+
+  const startEditing = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setIsEditing(true);
+  }, []);
+
+  const handleLabelChange = useCallback(
+    (value: string) => {
+      updateNodeData(id, { label: value });
+    },
+    [id, updateNodeData],
+  );
+
+  const handleTextareaKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      // Escape closes editing; stop propagation so the canvas doesn't
+      // treat Escape as a global shortcut while typing.
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsEditing(false);
+        textareaRef.current?.blur();
+      }
+      // Keep Enter for newlines inside the textarea; do not bubble to RF.
+      e.stopPropagation();
+    },
+    [],
+  );
+
+  const handleTextareaBlur = useCallback((_e: FocusEvent<HTMLTextAreaElement>) => {
+    setIsEditing(false);
+  }, []);
 
-  // Get the color pair for this node
-  const colorPair = NODE_COLORS.find((c) => c.name === colorName) ?? NODE_COLORS[0];
+  // Block pointer events from starting a node drag / canvas pan while editing.
+  const stopPointer = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+  }, []);
 
   return (
     <div
-      className="flex items-center justify-center rounded-lg border-2 px-4 py-2"
-      style={{
-        backgroundColor: colorPair.fill,
-        borderColor: colorPair.text,
-        minWidth: "80px",
-        minHeight: "40px",
-      }}
+      className="relative"
+      style={{ width: nodeWidth, height: nodeHeight }}
+      onDoubleClick={isEditing ? undefined : startEditing}
     >
-      {/* Input handle */}
+      <NodeResizer
+        isVisible={selected}
+        minWidth={MIN_NODE_WIDTH}
+        minHeight={MIN_NODE_HEIGHT}
+        color="var(--border-subtle)"
+        lineClassName="!border-border-subtle/80"
+        handleClassName="!h-1.5 !w-1.5 !rounded-[1px] !border !border-border-subtle !bg-bg-elevated"
+      />
+
+      {/* Four connectable points — one per side */}
       <Handle
-        type="target"
+        type="source"
         position={Position.Top}
-        className="!h-2 !w-2 !border !border-border-default"
+        id="top"
+        className={HANDLE_CLASS}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="right"
+        className={HANDLE_CLASS}
       />
-
-      <span
-        className="text-center text-sm font-medium"
-        style={{ color: colorPair.text }}
-      >
-        {label || shape}
-      </span>
-
-      {/* Output handle */}
       <Handle
         type="source"
         position={Position.Bottom}
-        className="!h-2 !w-2 !border !border-border-default"
+        id="bottom"
+        className={HANDLE_CLASS}
+      />
+      <Handle
+        type="source"
+        position={Position.Left}
+        id="left"
+        className={HANDLE_CLASS}
       />
+
+      <NodeShapeVisual
+        shape={shape}
+        fill={colorPair.fill}
+        borderColor={borderColor}
+        textColor={colorPair.text}
+        // Hide the static label while the textarea is open so they don't stack
+        label={isEditing ? "" : label}
+        width={nodeWidth}
+        height={nodeHeight}
+        emptyPlaceholder={LABEL_PLACEHOLDER}
+      />
+
+      {isEditing && (
+        <div
+          className="nodrag nopan nowheel absolute inset-0 z-20 flex items-center justify-center p-2"
+          onMouseDown={stopPointer}
+          onPointerDown={stopPointer}
+          onDoubleClick={stopPointer}
+        >
+          <textarea
+            ref={textareaRef}
+            className="nodrag nopan nowheel max-h-full w-full resize-none overflow-hidden border-0 bg-transparent text-center text-sm font-medium outline-none placeholder:opacity-40"
+            style={{
+              color: colorPair.text,
+              // Grow with content so multi-line text stays visually centered
+              fieldSizing: "content",
+            }}
+            value={label}
+            placeholder={LABEL_PLACEHOLDER}
+            rows={1}
+            spellCheck={false}
+            onChange={(e) => handleLabelChange(e.target.value)}
+            onKeyDown={handleTextareaKeyDown}
+            onBlur={handleTextareaBlur}
+            onMouseDown={stopPointer}
+            onPointerDown={stopPointer}
+            aria-label="Node label"
+          />
+        </div>
+      )}
     </div>
   );
 }
@@ -56,4 +199,4 @@ function CanvasNodeComponent({ data }: NodeProps<CanvasNode>) {
  */
 export const CanvasNodeRenderer = memo(CanvasNodeComponent);
 
-CanvasNodeRenderer.displayName = "CanvasNodeRenderer";
\ No newline at end of file
+CanvasNodeRenderer.displayName = "CanvasNodeRenderer";
diff --git a/components/editor/node-shape-visual.tsx b/components/editor/node-shape-visual.tsx
new file mode 100644
index 0000000..7489d64
--- /dev/null
+++ b/components/editor/node-shape-visual.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import type { NodeShape } from "@/types/canvas";
+
+interface NodeShapeVisualProps {
+  shape: NodeShape;
+  fill: string;
+  borderColor: string;
+  textColor: string;
+  label: string;
+  width: number;
+  height: number;
+  /** When true, used as a floating drag ghost (no interaction styles). */
+  ghost?: boolean;
+  /**
+   * Centered placeholder shown when `label` is empty.
+   * Drag ghosts pass no placeholder so empty previews stay blank.
+   */
+  emptyPlaceholder?: string;
+}
+
+/**
+ * Shared visual for canvas nodes and the shape-panel drag preview.
+ * CSS shapes: rectangle, pill, circle.
+ * SVG shapes: diamond, hexagon, cylinder (scale with width/height).
+ */
+export function NodeShapeVisual({
+  shape,
+  fill,
+  borderColor,
+  textColor,
+  label,
+  width,
+  height,
+  ghost = false,
+  emptyPlaceholder,
+}: NodeShapeVisualProps) {
+  const opacity = ghost ? 0.55 : 1;
+
+  const displayText = label || emptyPlaceholder || "";
+  const isPlaceholder = !label && Boolean(emptyPlaceholder);
+
+  const labelEl = displayText ? (
+    <span
+      className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center px-2 text-center text-sm font-medium"
+      style={{ color: textColor, opacity: isPlaceholder ? 0.4 : 1 }}
+    >
+      {displayText}
+    </span>
+  ) : null;
+
+  if (shape === "rectangle" || shape === "pill" || shape === "circle") {
+    const radius =
+      shape === "circle"
+        ? "9999px"
+        : shape === "pill"
+          ? "9999px"
+          : "8px";
+
+    return (
+      <div
+        className="relative box-border border-2"
+        style={{
+          width,
+          height,
+          backgroundColor: fill,
+          borderColor,
+          borderRadius: radius,
+          opacity,
+        }}
+      >
+        {labelEl}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative" style={{ width, height, opacity }}>
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        className="absolute inset-0 block"
+        preserveAspectRatio="none"
+        aria-hidden
+      >
+        {shape === "diamond" && (
+          <polygon
+            points={`${width / 2},1 ${width - 1},${height / 2} ${width / 2},${height - 1} 1,${height / 2}`}
+            fill={fill}
+            stroke={borderColor}
+            strokeWidth={2}
+          />
+        )}
+        {shape === "hexagon" && (
+          <polygon
+            points={hexagonPoints(width, height)}
+            fill={fill}
+            stroke={borderColor}
+            strokeWidth={2}
+          />
+        )}
+        {shape === "cylinder" && <CylinderPath width={width} height={height} fill={fill} borderColor={borderColor} />}
+      </svg>
+      {labelEl}
+    </div>
+  );
+}
+
+function hexagonPoints(w: number, h: number): string {
+  const inset = w * 0.22;
+  return [
+    `${inset},1`,
+    `${w - inset},1`,
+    `${w - 1},${h / 2}`,
+    `${w - inset},${h - 1}`,
+    `${inset},${h - 1}`,
+    `1,${h / 2}`,
+  ].join(" ");
+}
+
+function CylinderPath({
+  width,
+  height,
+  fill,
+  borderColor,
+}: {
+  width: number;
+  height: number;
+  fill: string;
+  borderColor: string;
+}) {
+  const rx = width / 2 - 1;
+  const cx = width / 2;
+  const ellipseRy = Math.min(height * 0.12, 14);
+  const topY = ellipseRy + 1;
+  const bottomY = height - ellipseRy - 1;
+
+  return (
+    <>
+      {/* Body */}
+      <path
+        d={`
+          M 1 ${topY}
+          L 1 ${bottomY}
+          A ${rx} ${ellipseRy} 0 0 0 ${width - 1} ${bottomY}
+          L ${width - 1} ${topY}
+          A ${rx} ${ellipseRy} 0 0 0 1 ${topY}
+          Z
+        `}
+        fill={fill}
+        stroke={borderColor}
+        strokeWidth={2}
+      />
+      {/* Top ellipse */}
+      <ellipse
+        cx={cx}
+        cy={topY}
+        rx={rx}
+        ry={ellipseRy}
+        fill={fill}
+        stroke={borderColor}
+        strokeWidth={2}
+      />
+    </>
+  );
+}
diff --git a/components/editor/shape-panel.tsx b/components/editor/shape-panel.tsx
index 8a4a660..c003593 100644
--- a/components/editor/shape-panel.tsx
+++ b/components/editor/shape-panel.tsx
@@ -1,8 +1,11 @@
 "use client";
 
+import { useCallback, useEffect, useState } from "react";
 import { Circle, Diamond, Square, Hexagon, Cylinder, Pill } from "lucide-react";
 
 import type { NodeShape } from "@/types/canvas";
+import { NODE_COLORS } from "@/types/canvas";
+import { NodeShapeVisual } from "./node-shape-visual";
 
 /**
  * Shape definition with default size and icon.
@@ -17,7 +20,7 @@ interface ShapeDefinition {
 /**
  * The 6 supported shapes with their default dimensions.
  */
-const SHAPES: ShapeDefinition[] = [
+export const SHAPES: ShapeDefinition[] = [
   { shape: "rectangle", icon: Square, defaultWidth: 180, defaultHeight: 80 },
   { shape: "diamond", icon: Diamond, defaultWidth: 120, defaultHeight: 120 },
   { shape: "circle", icon: Circle, defaultWidth: 100, defaultHeight: 100 },
@@ -35,43 +38,131 @@ export interface ShapeDragPayload {
   height: number;
 }
 
-/**
- * Handles starting a drag operation with shape data.
- */
-function handleDragStart(
-  e: React.DragEvent<HTMLButtonElement>,
-  shape: NodeShape,
-  width: number,
-  height: number,
-): void {
-  const payload: ShapeDragPayload = { shape, width, height };
-  e.dataTransfer.setData("application/json", JSON.stringify(payload));
-  e.dataTransfer.effectAllowed = "copy";
+interface DragPreviewState {
+  shape: NodeShape;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
 }
 
 /**
  * ShapePanel - a floating pill-shaped toolbar at the bottom-center
- * of the canvas with draggable shape icons.
+ * of the canvas with draggable shape icons. While dragging, shows a
+ * ghost preview of the shape attached to the cursor.
  */
 export function ShapePanel() {
+  const [preview, setPreview] = useState<DragPreviewState | null>(null);
+
+  const clearPreview = useCallback(() => {
+    setPreview(null);
+  }, []);
+
+  useEffect(() => {
+    if (!preview) return;
+
+    const onDragOver = (e: DragEvent) => {
+      // Keep preview pinned to the cursor while dragging over the page
+      setPreview((prev) =>
+        prev
+          ? { ...prev, x: e.clientX, y: e.clientY }
+          : prev,
+      );
+    };
+
+    const onDragEnd = () => {
+      clearPreview();
+    };
+
+    const onDrop = () => {
+      clearPreview();
+    };
+
+    window.addEventListener("dragover", onDragOver);
+    window.addEventListener("dragend", onDragEnd);
+    window.addEventListener("drop", onDrop);
+
+    return () => {
+      window.removeEventListener("dragover", onDragOver);
+      window.removeEventListener("dragend", onDragEnd);
+      window.removeEventListener("drop", onDrop);
+    };
+  }, [preview, clearPreview]);
+
+  const handleDragStart = (
+    e: React.DragEvent<HTMLButtonElement>,
+    shape: NodeShape,
+    width: number,
+    height: number,
+  ): void => {
+    const payload: ShapeDragPayload = { shape, width, height };
+    e.dataTransfer.setData("application/json", JSON.stringify(payload));
+    e.dataTransfer.effectAllowed = "copy";
+
+    // Hide the browser's default drag image so only our ghost shows
+    const empty = document.createElement("div");
+    empty.style.width = "1px";
+    empty.style.height = "1px";
+    empty.style.opacity = "0";
+    document.body.appendChild(empty);
+    e.dataTransfer.setDragImage(empty, 0, 0);
+    requestAnimationFrame(() => {
+      document.body.removeChild(empty);
+    });
+
+    setPreview({
+      shape,
+      width,
+      height,
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
+
+  const defaultColor = NODE_COLORS[0];
+
   return (
-    <div className="fixed bottom-6 left-1/2 z-50 -translate-x-1/2">
-      <div className="flex items-center gap-1 rounded-full border border-border-default bg-bg-surface/95 px-2 py-2 shadow-xl backdrop-blur-md">
-        {SHAPES.map(({ shape, icon: Icon, defaultWidth, defaultHeight }) => (
-          <button
-            key={shape}
-            type="button"
-            draggable
-            onDragStart={(e) =>
-              handleDragStart(e, shape, defaultWidth, defaultHeight)
-            }
-            aria-label={`Add ${shape}`}
-            className="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-all hover:bg-bg-elevated hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary"
-          >
-            <Icon className="h-5 w-5" />
-          </button>
-        ))}
+    <>
+      <div className="fixed bottom-6 left-1/2 z-50 -translate-x-1/2">
+        <div className="flex items-center gap-1 rounded-full border border-border-default bg-bg-surface/95 px-2 py-2 shadow-xl backdrop-blur-md">
+          {SHAPES.map(({ shape, icon: Icon, defaultWidth, defaultHeight }) => (
+            <button
+              key={shape}
+              type="button"
+              draggable
+              onDragStart={(e) =>
+                handleDragStart(e, shape, defaultWidth, defaultHeight)
+              }
+              aria-label={`Add ${shape}`}
+              className="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-all hover:bg-bg-elevated hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary"
+            >
+              <Icon className="h-5 w-5" />
+            </button>
+          ))}
+        </div>
       </div>
-    </div>
+
+      {preview && (
+        <div
+          className="pointer-events-none fixed z-[100]"
+          style={{
+            left: preview.x,
+            top: preview.y,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <NodeShapeVisual
+            shape={preview.shape}
+            fill={defaultColor.fill}
+            borderColor={defaultColor.text}
+            textColor={defaultColor.text}
+            label=""
+            width={preview.width}
+            height={preview.height}
+            ghost
+          />
+        </div>
+      )}
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/context/feature-specs/13-node-shape.md b/context/feature-specs/13-node-shape.md
new file mode 100644
index 0000000..740416e
--- /dev/null
+++ b/context/feature-specs/13-node-shape.md
@@ -0,0 +1,33 @@
+Replace the placeholder node renderer with proper shape rendering and a drag preview.
+
+## Implementation
+
+1. Replace the placeholder node shape rendering.
+   - rectangle, pill, and circle should use CSS styling
+   - diamond, hexagon, and cylinder should render with SVG shapes
+   - SVG shapes should scale with node size
+   - keep borders subtle at rest and brighter when selected
+
+2. Add a shape drag preview.
+   - when dragging a shape from the shape panel, show a ghost preview of that shape
+   - keep the preview attached to the cursor while dragging
+   - use the same shape type and default size that will be used on drop
+   - hide the preview after the shape is dropped or the drag is cancelled
+   - keep this limited to drag preview behavior only
+
+3. Keep node rendering connected to the existing collaborative canvas state.
+
+## Scope Limits
+
+- don't rebuild shape panel layout
+- don't change how dropped nodes are created
+- don't add resize or label editing yet
+- keep drag/drop changes limited to the ghost preview only
+
+## Check When Done
+
+- Nodes render the correct shape variant for each type.
+- CSS shapes render correctly for rectangle, pill, and circle.
+- SVG shapes render and scale correctly for diamond, hexagon, and cylinder.
+- Shape dragging shows a ghost preview matching the dragged shape.
+- `npm run build` passes without type errors.
diff --git a/context/feature-specs/14-node-editing.md b/context/feature-specs/14-node-editing.md
new file mode 100644
index 0000000..8e8b8c7
--- /dev/null
+++ b/context/feature-specs/14-node-editing.md
@@ -0,0 +1,40 @@
+Add resizing and inline label editing to canvas nodes.
+
+## Implementation
+
+1. Add resizing.
+   - selected nodes should show resize handles
+   - prevent nodes from being resized below a minimum size
+   - keep resize handles subtle and consistent with the dark canvas UI
+
+2. Add inline label editing.
+   - keep the node label centered inside the node
+   - double-click the center/label area of a node to edit its label 
+   - after clicking enter the text should be at the center of the node
+   - show placeholder text in the same centered position when the label is empty
+   - keep editing smooth without causing layout shifts
+   - show a textarea directly over the label while editing
+   - update the label as users type
+   - close editing on blur or `Escape`
+   - prevent text editing interactions from dragging or panning the canvas
+
+3. Keep all node updates connected to the existing collaborative canvas state.
+
+4. Ensure that all shapes have 4 possible connectable points.
+
+## Scope Limits
+
+- don't change shape rendering from the previous unit
+- don't change the shape panel or drag preview
+- don't change how dropped nodes are created
+- keep this focused on resize and label editing only
+
+## Check When Done
+
+- Selected nodes show resize handles.
+- Resizing updates node dimensions through the existing node state flow.
+- Double-clicking a node opens inline label editing.
+- Label editing updates node labels through the existing sync flow.
+- Editing closes on blur or Escape.
+- Text interactions do not trigger canvas drag or pan.
+- `npm run build` passes without type errors.
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index 9d9dbe0..f7e552b 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -4,7 +4,7 @@ Update this file whenever the current phase, active feature, or implementation s
 
 ## Current Phase
 
-- Feature 12 — (compleated)
+- Feature 14 — (completed)
 
 ## Current Goal
 
@@ -24,6 +24,8 @@ Update this file whenever the current phase, active feature, or implementation s
 - feature 10: Liveblocks setup — `liveblocks.config.ts` types the required presence and user metadata. `lib/liveblocks.ts` provides a cached node client and deterministic user-color helper. `POST /api/liveblocks-auth` requires Clerk authentication, accepts Liveblocks’ `{ room }` auth payload (the project ID), verifies project access through `lib/project-access`, creates a private room with per-user write access, and returns an ID-token session with name, avatar, and cursor color. `npm run build` passes.
 - feature 11: Base canvas — `types/canvas.ts` defines the shared canvas node and edge types. `components/editor/canvas.tsx` sets up `LiveblocksProvider`, `RoomProvider`, initial presence, error and suspense loading fallbacks, then passes `useLiveblocksFlow`’s synced state and handlers into a basic React Flow canvas with loose connections, fit view, MiniMap, and dot background. It intentionally contains no custom node or edge rendering, persistence, controls, or AI behavior. `workspace-shell.tsx` renders the canvas for the active project. `npm run build` passes.
 - feature 12: Shape panel — Added a floating pill-shaped toolbar at the bottom-center of the canvas with draggable icon buttons for rectangle, diamond, circle, pill, cylinder, and hexagon. Drag payloads include the shape name and default sizes (rectangles wider, circles square, diamonds larger for labels). Added `dragover` and `drop` handlers to the canvas wrapper that read the payload, convert screen position to canvas coordinates using `screenToFlowPosition`, and create new nodes at that position with empty label, default color, and the dragged shape. Node IDs are generated using the shape name, timestamp, and a counter. Created `CanvasNodeRenderer` component to render nodes as bordered rectangles with centered labels (shape-specific visuals to be added later). `npm run build` passes.
+- feature 13: Node shape rendering — Replaced the placeholder `CanvasNodeRenderer` with proper per-shape visuals via shared `NodeShapeVisual` (`components/editor/node-shape-visual.tsx`). CSS shapes: rectangle (rounded-lg), pill (full radius), circle (full radius). SVG shapes: diamond, hexagon, and cylinder, all scaling with node width/height. Borders use a muted text-color alpha at rest and the full palette text color when the node is selected. Shape panel drag shows a cursor-attached ghost preview (same shape + default size, semi-transparent) that clears on drop or drag cancel; browser default drag image is suppressed. Drop/create logic and panel layout unchanged; still driven by Liveblocks collaborative state. `npm run build` passes.
+- feature 14: Node editing — Selected nodes show React Flow `NodeResizer` handles (min 80×40, subtle dark-canvas styling). Double-click opens centered inline label editing via an overlaid `textarea` (`nodrag` / `nopan` / `nowheel` so text interaction does not drag or pan). Label updates as the user types through `useReactFlow().updateNodeData`, which emits replace changes into Liveblocks via the existing `onNodesChange` path. Editing closes on blur or Escape. Empty labels show a centered muted "Label" placeholder (nodes only; drag ghosts stay blank). All four sides expose connectable `Handle`s (top/right/bottom/left). Shape rendering geometry, shape panel, and drop-create logic unchanged. `npm run build` passes.
 
 ## In Progress
 
@@ -31,7 +33,7 @@ Update this file whenever the current phase, active feature, or implementation s
 
 ## Next Up
 
-- feature 13: TBD
+- feature 15: TBD
 
 ## Open Questions
 
@@ -48,6 +50,9 @@ Update this file whenever the current phase, active feature, or implementation s
 ## Session Notes
 
 - Add context needed to resume work in the next session.
+- 2026-07-16: feature 14 implemented exactly per spec. Resize via `NodeResizer` (visible only when selected, min size enforced). Label edit via double-click → centered textarea overlay; live `updateNodeData` writes through Liveblocks; close on blur/Escape; `nodrag`/`nopan` block canvas interaction while typing. Four side handles for connections. Scope limited to resize + label editing (no shape panel / drop / geometry changes).
+- 2026-07-16: feature 13 implemented exactly per spec. Shared visual component powers both nodes and the drag ghost so preview matches drop. Scope limited to shape rendering + drag preview only (no resize, label editing, or drop-logic changes).
+
 - 2026-07-15: Features 10 and 11 were reconciled with their specifications and verified. The Liveblocks auth endpoint now accepts the SDK's `{ room }` payload from `LiveblocksProvider` (the room is the project ID), fixing the previous `roomId is required` 400 and resulting connection failure. It uses the workspace project-access helper before creating the private room and issuing the ID token. `liveblocks.config.ts` now types the specified presence and user metadata. The base canvas remains limited to the specified Liveblocks-backed React Flow foundation; premature custom node and edge renderers were removed. `npm run build` passes with no Liveblocks-related errors.
 - 2026-07-15: Development startup dependencies were aligned with the implemented Next.js 16 App Router and Prisma 7 code: `next` is pinned to `16.2.10`, `prisma` to `^7.8.0`, and Clerk UI to `^1.25.3`. Added the missing `@liveblocks/node@3.22.0` server SDK required by `app/api/liveblocks-auth`. `npm run build` now completes successfully and `npm run dev` is running on `http://localhost:3000`.
 - 2026-07-14: feature 03 auth pages UI refined to match the reference layout — 50/50 grid, brand panel on the left with logo + headline + three icon-chipped feature rows + footer copyright, form panel on the right with a rounded-3xl `bg-bg-elevated` card housing the Clerk form and a contextual "Don't have an account? / Sign up" link below. Left panel uses `bg-bg-surface` so it differentiates from the base. Brand wordmark is "Ghost dev" (matches the screenshot). Geist Sans is the body default from `--font-geist-sans`; no new fonts added.
diff --git a/types/canvas.ts b/types/canvas.ts
index 0eb0673..89dcfd0 100644
--- a/types/canvas.ts
+++ b/types/canvas.ts
@@ -19,10 +19,9 @@ export const NODE_COLORS = [
 export type NodeColorName = (typeof NODE_COLORS)[number]["name"];
 
 /**
- * The 6 supported node shapes defined in `context/ui-context.md`. The
- * custom renderer (added in a later feature) is responsible for drawing
- * complex shapes — rectangle and pill are CSS-shaped, the rest are
- * inline SVGs.
+ * The 6 supported node shapes defined in `context/ui-context.md`.
+ * rectangle, pill, and circle use CSS styling; diamond, hexagon, and
+ * cylinder render as scaling inline SVGs.
  */
 export const NODE_SHAPES = [
   "rectangle",

From 352fb15273dbf726af788427c5ab232c6427c3ac Mon Sep 17 00:00:00 2001
From: tejasM17 <tejasm9380@gmail.com>
Date: Thu, 16 Jul 2026 22:17:41 +0530
Subject: [PATCH 2/4] compleated 15-feat

---
 components/editor/canvas-node.tsx             | 61 +++++++++++++--
 components/editor/node-color-toolbar.tsx      | 78 +++++++++++++++++++
 components/editor/node-shape-visual.tsx       | 17 +++-
 .../feature-specs/15-node-color-toolbar.md    | 48 ++++++++++++
 context/progress-tracker.md                   |  6 +-
 5 files changed, 200 insertions(+), 10 deletions(-)
 create mode 100644 components/editor/node-color-toolbar.tsx
 create mode 100644 context/feature-specs/15-node-color-toolbar.md

diff --git a/components/editor/canvas-node.tsx b/components/editor/canvas-node.tsx
index b6bb652..ec27171 100644
--- a/components/editor/canvas-node.tsx
+++ b/components/editor/canvas-node.tsx
@@ -18,9 +18,10 @@ import {
   type NodeProps,
 } from "@xyflow/react";
 
-import type { CanvasNode } from "@/types/canvas";
+import type { CanvasNode, NodeColorName } from "@/types/canvas";
 import { NODE_COLORS } from "@/types/canvas";
 import { NodeShapeVisual } from "./node-shape-visual";
+import { NodeColorToolbar } from "./node-color-toolbar";
 
 /** Minimum node size — prevents nodes from collapsing to unusable dimensions. */
 const MIN_NODE_WIDTH = 80;
@@ -31,10 +32,37 @@ const LABEL_PLACEHOLDER = "Label";
 const HANDLE_CLASS =
   "!h-2 !w-2 !rounded-full !border !border-border-default !bg-white";
 
+/**
+ * Font size scales with node dimensions and shrinks when there is more
+ * text so longer labels still fit without overflowing awkwardly.
+ */
+function computeLabelFontSize(
+  width: number,
+  height: number,
+  text: string,
+): number {
+  const minDim = Math.min(width, height);
+  // Base size tracks the smaller edge of the node.
+  const base = Math.max(10, Math.min(22, minDim * 0.2));
+
+  const charCount = Math.max(text.trim().length || 1, 1);
+  // Approximate characters per line from usable width.
+  const charsPerLine = Math.max(4, Math.floor((width * 0.75) / (base * 0.55)));
+  const estimatedLines = Math.max(1, Math.ceil(charCount / charsPerLine));
+
+  // Cap by available height for the estimated line count.
+  const maxByHeight = (height * 0.72) / estimatedLines;
+  // Cap by width for dense single-line content.
+  const maxByWidth = (width * 0.85) / Math.min(charCount, charsPerLine) / 0.55;
+
+  const size = Math.min(base, maxByHeight, maxByWidth);
+  return Math.round(Math.max(10, Math.min(22, size)) * 10) / 10;
+}
+
 /**
  * Custom React Flow node: per-shape visuals, resize handles when selected,
- * four connectable points, and double-click inline label editing.
- * All dimension and label updates flow through the collaborative node state.
+ * color toolbar, four connectable points, and double-click inline label editing.
+ * All dimension, color, and label updates flow through the collaborative node state.
  */
 function CanvasNodeComponent({
   id,
@@ -55,6 +83,8 @@ function CanvasNodeComponent({
   const nodeWidth = width ?? 160;
   const nodeHeight = height ?? 80;
 
+  const fontSize = computeLabelFontSize(nodeWidth, nodeHeight, label);
+
   // Subtle border at rest; brighter when selected
   const borderColor = selected
     ? colorPair.text
@@ -84,6 +114,13 @@ function CanvasNodeComponent({
     [id, updateNodeData],
   );
 
+  const handleColorSelect = useCallback(
+    (color: NodeColorName) => {
+      updateNodeData(id, { color });
+    },
+    [id, updateNodeData],
+  );
+
   const handleTextareaKeyDown = useCallback(
     (e: KeyboardEvent<HTMLTextAreaElement>) => {
       // Escape closes editing; stop propagation so the canvas doesn't
@@ -115,13 +152,23 @@ function CanvasNodeComponent({
       style={{ width: nodeWidth, height: nodeHeight }}
       onDoubleClick={isEditing ? undefined : startEditing}
     >
+      {selected && (
+        <NodeColorToolbar
+          activeColor={colorPair.name}
+          onSelect={handleColorSelect}
+        />
+      )}
+
       <NodeResizer
         isVisible={selected}
         minWidth={MIN_NODE_WIDTH}
         minHeight={MIN_NODE_HEIGHT}
         color="var(--border-subtle)"
-        lineClassName="!border-border-subtle/80"
-        handleClassName="!h-1.5 !w-1.5 !rounded-[1px] !border !border-border-subtle !bg-bg-elevated"
+        // Thicker edge lines + larger corner grips so resize is easy to grab
+        lineClassName="!border-border-subtle/70"
+        lineStyle={{ borderWidth: 2 }}
+        handleClassName="!rounded-sm !border-2 !border-border-subtle !bg-bg-elevated !opacity-95"
+        handleStyle={{ width: 14, height: 14 }}
       />
 
       {/* Four connectable points — one per side */}
@@ -159,6 +206,7 @@ function CanvasNodeComponent({
         label={isEditing ? "" : label}
         width={nodeWidth}
         height={nodeHeight}
+        fontSize={fontSize}
         emptyPlaceholder={LABEL_PLACEHOLDER}
       />
 
@@ -171,9 +219,10 @@ function CanvasNodeComponent({
         >
           <textarea
             ref={textareaRef}
-            className="nodrag nopan nowheel max-h-full w-full resize-none overflow-hidden border-0 bg-transparent text-center text-sm font-medium outline-none placeholder:opacity-40"
+            className="nodrag nopan nowheel max-h-full w-full resize-none overflow-hidden border-0 bg-transparent text-center font-medium outline-none placeholder:opacity-40"
             style={{
               color: colorPair.text,
+              fontSize,
               // Grow with content so multi-line text stays visually centered
               fieldSizing: "content",
             }}
diff --git a/components/editor/node-color-toolbar.tsx b/components/editor/node-color-toolbar.tsx
new file mode 100644
index 0000000..53c788e
--- /dev/null
+++ b/components/editor/node-color-toolbar.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { useCallback, type MouseEvent } from "react";
+
+import { NODE_COLORS, type NodeColorName } from "@/types/canvas";
+
+interface NodeColorToolbarProps {
+  /** Currently active palette entry name on the node. */
+  activeColor: NodeColorName;
+  /** Called when the user picks a swatch. */
+  onSelect: (color: NodeColorName) => void;
+}
+
+/**
+ * Floating color toolbar shown above a selected canvas node.
+ * One swatch per predefined NODE_COLORS pair; selecting a swatch updates
+ * both fill and text color via the parent (collaborative node data).
+ */
+export function NodeColorToolbar({
+  activeColor,
+  onSelect,
+}: NodeColorToolbarProps) {
+  const stopPointer = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <div
+      className="nodrag nopan nowheel absolute left-1/2 z-30 flex -translate-x-1/2 items-center gap-1.5 rounded-xl border border-border-default bg-bg-elevated/95 px-2 py-1.5 shadow-lg backdrop-blur-sm"
+      style={{ bottom: "calc(100% + 10px)" }}
+      onMouseDown={stopPointer}
+      onPointerDown={stopPointer}
+      onClick={stopPointer}
+      role="toolbar"
+      aria-label="Node color"
+    >
+      {NODE_COLORS.map((pair) => {
+        const isActive = pair.name === activeColor;
+
+        return (
+          <button
+            key={pair.name}
+            type="button"
+            className="nodrag nopan relative h-4 w-4 shrink-0 rounded-full border transition-[box-shadow,transform] duration-150 ease-out focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-bg-elevated"
+            style={{
+              backgroundColor: pair.fill,
+              borderColor: isActive ? pair.text : "var(--border-subtle)",
+              boxShadow: isActive
+                ? `0 0 0 1.5px ${pair.text}, 0 0 4px 0 ${pair.text}99`
+                : undefined,
+            }}
+            onMouseDown={stopPointer}
+            onPointerDown={stopPointer}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onSelect(pair.name);
+            }}
+            onMouseEnter={(e) => {
+              // Tight glow using the pair's text color — controlled, not blurry.
+              e.currentTarget.style.boxShadow = isActive
+                ? `0 0 0 1.5px ${pair.text}, 0 0 5px 0 ${pair.text}`
+                : `0 0 0 1px ${pair.text}aa, 0 0 5px 0 ${pair.text}cc`;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.boxShadow = isActive
+                ? `0 0 0 1.5px ${pair.text}, 0 0 4px 0 ${pair.text}99`
+                : "";
+            }}
+            aria-label={`Color ${pair.name}`}
+            aria-pressed={isActive}
+            title={pair.name}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/editor/node-shape-visual.tsx b/components/editor/node-shape-visual.tsx
index 7489d64..d1b3223 100644
--- a/components/editor/node-shape-visual.tsx
+++ b/components/editor/node-shape-visual.tsx
@@ -10,6 +10,11 @@ interface NodeShapeVisualProps {
   label: string;
   width: number;
   height: number;
+  /**
+   * Label font size in px. When omitted, falls back to the default `text-sm`
+   * size so drag ghosts and callers without dynamic sizing still look fine.
+   */
+  fontSize?: number;
   /** When true, used as a floating drag ghost (no interaction styles). */
   ghost?: boolean;
   /**
@@ -32,6 +37,7 @@ export function NodeShapeVisual({
   label,
   width,
   height,
+  fontSize,
   ghost = false,
   emptyPlaceholder,
 }: NodeShapeVisualProps) {
@@ -42,8 +48,15 @@ export function NodeShapeVisual({
 
   const labelEl = displayText ? (
     <span
-      className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center px-2 text-center text-sm font-medium"
-      style={{ color: textColor, opacity: isPlaceholder ? 0.4 : 1 }}
+      className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center px-2 text-center font-medium leading-snug"
+      style={{
+        color: textColor,
+        opacity: isPlaceholder ? 0.4 : 1,
+        fontSize: fontSize ?? 14,
+        // Soft wrap so long labels reflow inside the node
+        overflowWrap: "anywhere",
+        wordBreak: "break-word",
+      }}
     >
       {displayText}
     </span>
diff --git a/context/feature-specs/15-node-color-toolbar.md b/context/feature-specs/15-node-color-toolbar.md
new file mode 100644
index 0000000..6d4b5d5
--- /dev/null
+++ b/context/feature-specs/15-node-color-toolbar.md
@@ -0,0 +1,48 @@
+Add a small floating color toolbar so selected nodes can change both their background and text color directly on the canvas.
+
+## Implementation
+
+1. Check `ui-context.md` for the node color palette.
+   Each palette option includes:
+   - a node background color
+   - a matching text color
+
+   Reuse existing theme colors if they already exist in the `global.css`. Otherwise, keep the palette in the canvas types/constants, such as `types/canvas.ts`.
+
+2. Add a toolbar above selected nodes.
+   - only show it when the node is selected
+   - keep it slightly above the node without overlapping it
+   - show one swatch per color pair
+   - active swatches should feel clearly selected
+   - hovering a swatch should show a subtle glow based on its text color
+   - keep the glow tight and controlled, not overly blurred
+   - prevent toolbar interactions from dragging nodes or panning the canvas
+
+3. When a swatch is selected:
+   - update both the node background color and text color
+   - update the node UI immediately
+   - keep this inside the existing collaborative canvas state
+   - no server calls
+
+4. Selected nodes should visually reflect their active color pair.
+
+   The node background updates to the selected color, and the text automatically updates to its paired text color.
+
+5. Issues:
+   - The font size inside the node also scale along with the node size more dynamically. is their is more text adjust it automatically.
+   - resizing the nodes is not easyly acessable, means cursur is not able to find the expand edge of the node. make it accessable
+
+
+## Scope Limits
+
+- don’t change drag/drop behavior
+- don’t rebuild node selection logic
+- don’t add a full color picker
+- keep this focused on predefined color themes only
+
+## Check When Done
+
+- Nodes use predefined background/text color pairs.
+- Selected nodes show a floating color toolbar.
+- Swatch selection updates both node and text colors.
+- `npm run build` passes without type errors.
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index f7e552b..ba7aa20 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -4,7 +4,7 @@ Update this file whenever the current phase, active feature, or implementation s
 
 ## Current Phase
 
-- Feature 14 — (completed)
+- Feature 15 — (completed)
 
 ## Current Goal
 
@@ -26,6 +26,7 @@ Update this file whenever the current phase, active feature, or implementation s
 - feature 12: Shape panel — Added a floating pill-shaped toolbar at the bottom-center of the canvas with draggable icon buttons for rectangle, diamond, circle, pill, cylinder, and hexagon. Drag payloads include the shape name and default sizes (rectangles wider, circles square, diamonds larger for labels). Added `dragover` and `drop` handlers to the canvas wrapper that read the payload, convert screen position to canvas coordinates using `screenToFlowPosition`, and create new nodes at that position with empty label, default color, and the dragged shape. Node IDs are generated using the shape name, timestamp, and a counter. Created `CanvasNodeRenderer` component to render nodes as bordered rectangles with centered labels (shape-specific visuals to be added later). `npm run build` passes.
 - feature 13: Node shape rendering — Replaced the placeholder `CanvasNodeRenderer` with proper per-shape visuals via shared `NodeShapeVisual` (`components/editor/node-shape-visual.tsx`). CSS shapes: rectangle (rounded-lg), pill (full radius), circle (full radius). SVG shapes: diamond, hexagon, and cylinder, all scaling with node width/height. Borders use a muted text-color alpha at rest and the full palette text color when the node is selected. Shape panel drag shows a cursor-attached ghost preview (same shape + default size, semi-transparent) that clears on drop or drag cancel; browser default drag image is suppressed. Drop/create logic and panel layout unchanged; still driven by Liveblocks collaborative state. `npm run build` passes.
 - feature 14: Node editing — Selected nodes show React Flow `NodeResizer` handles (min 80×40, subtle dark-canvas styling). Double-click opens centered inline label editing via an overlaid `textarea` (`nodrag` / `nopan` / `nowheel` so text interaction does not drag or pan). Label updates as the user types through `useReactFlow().updateNodeData`, which emits replace changes into Liveblocks via the existing `onNodesChange` path. Editing closes on blur or Escape. Empty labels show a centered muted "Label" placeholder (nodes only; drag ghosts stay blank). All four sides expose connectable `Handle`s (top/right/bottom/left). Shape rendering geometry, shape panel, and drop-create logic unchanged. `npm run build` passes.
+- feature 15: Node color toolbar — Selected nodes show a floating color toolbar above the node (`NodeColorToolbar` in `components/editor/node-color-toolbar.tsx`) with one swatch per `NODE_COLORS` pair from `types/canvas.ts` (8 predefined fill/text pairs from `ui-context.md`). Active swatch is ringed with its text color; hover applies a tight glow from the pair's text color. Swatch click calls `updateNodeData(id, { color })` so both background and text update immediately through Liveblocks collaborative state (no server calls). Toolbar uses `nodrag`/`nopan`/`nowheel` plus pointer stopPropagation so interactions do not drag nodes or pan the canvas. Label font size scales with node dimensions and text length (`computeLabelFontSize`); resize handles enlarged (14×14 corners, thicker edge lines) for easier grab. Scope limited to predefined palette only — no full color picker, no drag/drop or selection rebuild. `npm run build` passes.
 
 ## In Progress
 
@@ -33,7 +34,7 @@ Update this file whenever the current phase, active feature, or implementation s
 
 ## Next Up
 
-- feature 15: TBD
+- feature 16: TBD
 
 ## Open Questions
 
@@ -50,6 +51,7 @@ Update this file whenever the current phase, active feature, or implementation s
 ## Session Notes
 
 - Add context needed to resume work in the next session.
+- 2026-07-16: feature 15 implemented exactly per spec. Color toolbar floats above selected nodes only; 8 swatches from existing `NODE_COLORS` (fill + paired text). Color change is client-only via `updateNodeData` into Liveblocks. Also addressed spec issues: dynamic label font scaling with node size/text amount, and more accessible NodeResizer hit targets. Drag/drop and selection logic untouched; no freeform color picker.
 - 2026-07-16: feature 14 implemented exactly per spec. Resize via `NodeResizer` (visible only when selected, min size enforced). Label edit via double-click → centered textarea overlay; live `updateNodeData` writes through Liveblocks; close on blur/Escape; `nodrag`/`nopan` block canvas interaction while typing. Four side handles for connections. Scope limited to resize + label editing (no shape panel / drop / geometry changes).
 - 2026-07-16: feature 13 implemented exactly per spec. Shared visual component powers both nodes and the drag ghost so preview matches drop. Scope limited to shape rendering + drag preview only (no resize, label editing, or drop-logic changes).
 

From b49e9fe5df7770c78e605740c739f264a117f7b5 Mon Sep 17 00:00:00 2001
From: tejasM17 <tejasm9380@gmail.com>
Date: Thu, 16 Jul 2026 22:26:58 +0530
Subject: [PATCH 3/4] compleated 16-feat

---
 components/editor/canvas-edge.tsx         | 223 ++++++++++++++++++++++
 components/editor/canvas-node.tsx         |   5 +-
 components/editor/canvas.tsx              |  37 +++-
 context/feature-specs/16-edge-behavior.md |  56 ++++++
 context/progress-tracker.md               |   6 +-
 5 files changed, 319 insertions(+), 8 deletions(-)
 create mode 100644 components/editor/canvas-edge.tsx
 create mode 100644 context/feature-specs/16-edge-behavior.md

diff --git a/components/editor/canvas-edge.tsx b/components/editor/canvas-edge.tsx
new file mode 100644
index 0000000..c64e701
--- /dev/null
+++ b/components/editor/canvas-edge.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type SyntheticEvent,
+} from "react";
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getSmoothStepPath,
+  useReactFlow,
+  type EdgeProps,
+} from "@xyflow/react";
+
+import type { CanvasEdge } from "@/types/canvas";
+
+/** Default edge stroke from ui-context — light on the dark canvas. */
+const EDGE_STROKE = "#f8fafc";
+/** Visible stroke width — edges stay visually secondary to nodes. */
+const EDGE_STROKE_WIDTH = 1.5;
+/** Invisible hit area wider than the stroke for easier hover/click. */
+const EDGE_INTERACTION_WIDTH = 24;
+/** Dimmed rest opacity; full when hovered or selected. */
+const EDGE_OPACITY_REST = 0.45;
+const EDGE_OPACITY_ACTIVE = 1;
+
+const LABEL_HINT = "Label";
+
+/**
+ * Custom canvas edge: right-angle (smooth-step) routing, arrow markers,
+ * wider interaction hit area, and double-click inline label editing.
+ * Label updates flow through collaborative edge data via updateEdgeData.
+ */
+function CanvasEdgeComponent({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  selected,
+  data,
+  markerEnd,
+  style,
+}: EdgeProps<CanvasEdge>) {
+  const { updateEdgeData } = useReactFlow();
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const label = data?.label ?? "";
+  const hasLabel = label.trim().length > 0;
+  const isActive = Boolean(selected || isHovered);
+
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  // Focus the input when editing starts
+  useEffect(() => {
+    if (!isEditing) return;
+    const el = inputRef.current;
+    if (!el) return;
+    el.focus();
+    const len = el.value.length;
+    el.setSelectionRange(len, len);
+  }, [isEditing]);
+
+  const commitAndClose = useCallback(() => {
+    setIsEditing(false);
+  }, []);
+
+  const startEditing = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setIsEditing(true);
+  }, []);
+
+  const handleLabelChange = useCallback(
+    (value: string) => {
+      updateEdgeData(id, { label: value });
+    },
+    [id, updateEdgeData],
+  );
+
+  const handleInputKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      // Save + close on Enter or Escape (spec: save on blur, Enter, or Escape)
+      if (e.key === "Enter" || e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        commitAndClose();
+        inputRef.current?.blur();
+        return;
+      }
+      // Keep typing from bubbling to canvas shortcuts
+      e.stopPropagation();
+    },
+    [commitAndClose],
+  );
+
+  // Block pointer events from panning/selecting the canvas while interacting
+  // with the label control.
+  const stopPointer = useCallback((e: SyntheticEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  const opacity = isActive ? EDGE_OPACITY_ACTIVE : EDGE_OPACITY_REST;
+
+  // Show label chrome when editing, when there is a saved label, or as a
+  // faint hint on an active (hovered/selected) unlabeled edge.
+  const showLabelUi = isEditing || hasLabel || isActive;
+
+  return (
+    <>
+      <g
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onDoubleClick={startEditing}
+      >
+        <BaseEdge
+          id={id}
+          path={edgePath}
+          markerEnd={markerEnd}
+          interactionWidth={EDGE_INTERACTION_WIDTH}
+          style={{
+            ...style,
+            // Keep stroke settings authoritative over any partial style
+            // from defaultEdgeOptions / collaborators.
+            stroke: EDGE_STROKE,
+            strokeWidth: EDGE_STROKE_WIDTH,
+            strokeLinecap: "round",
+            opacity,
+          }}
+        />
+      </g>
+
+      {showLabelUi && (
+        <EdgeLabelRenderer>
+          <div
+            className="nodrag nopan nowheel pointer-events-auto absolute"
+            style={{
+              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+            }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            onDoubleClick={isEditing ? stopPointer : startEditing}
+            onMouseDown={stopPointer}
+            onPointerDown={stopPointer}
+          >
+            {isEditing ? (
+              <input
+                ref={inputRef}
+                type="text"
+                className="nodrag nopan nowheel max-w-[220px] rounded-full border border-border-default bg-bg-elevated/95 px-2.5 py-0.5 text-center text-[11px] font-medium text-text-primary outline-none ring-1 ring-accent-primary/40 placeholder:text-text-faint"
+                style={{
+                  // Grow with label text; field-sizing for modern browsers,
+                  // ch-based min width as a reliable fallback.
+                  fieldSizing: "content",
+                  minWidth: `${Math.max(label.length, LABEL_HINT.length, 4)}ch`,
+                  width: "auto",
+                }}
+                value={label}
+                placeholder={LABEL_HINT}
+                spellCheck={false}
+                aria-label="Edge label"
+                onChange={(e) => handleLabelChange(e.target.value)}
+                onKeyDown={handleInputKeyDown}
+                onBlur={commitAndClose}
+                onMouseDown={stopPointer}
+                onPointerDown={stopPointer}
+              />
+            ) : hasLabel ? (
+              <button
+                type="button"
+                className="nodrag nopan nowheel max-w-[220px] truncate rounded-full border border-border-default bg-bg-elevated/90 px-2.5 py-0.5 text-[11px] font-medium text-text-secondary shadow-sm backdrop-blur-sm transition-colors hover:border-border-subtle hover:text-text-primary"
+                onDoubleClick={startEditing}
+                onMouseDown={stopPointer}
+                onPointerDown={stopPointer}
+                aria-label={`Edge label: ${label}`}
+              >
+                {label}
+              </button>
+            ) : (
+              // Faint hint when the edge is active but has no label yet
+              <button
+                type="button"
+                className="nodrag nopan nowheel rounded-full border border-border-default/50 bg-bg-elevated/60 px-2.5 py-0.5 text-[11px] font-medium text-text-faint backdrop-blur-sm"
+                onDoubleClick={startEditing}
+                onClick={startEditing}
+                onMouseDown={stopPointer}
+                onPointerDown={stopPointer}
+                aria-label="Add edge label"
+              >
+                {LABEL_HINT}
+              </button>
+            )}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}
+
+/**
+ * Memoized canvas edge renderer for performance.
+ */
+export const CanvasEdgeRenderer = memo(CanvasEdgeComponent);
+
+CanvasEdgeRenderer.displayName = "CanvasEdgeRenderer";
diff --git a/components/editor/canvas-node.tsx b/components/editor/canvas-node.tsx
index ec27171..59ea884 100644
--- a/components/editor/canvas-node.tsx
+++ b/components/editor/canvas-node.tsx
@@ -29,8 +29,9 @@ const MIN_NODE_HEIGHT = 40;
 
 const LABEL_PLACEHOLDER = "Label";
 
+/** Small white dots with a dark border — hidden until the node is hovered. */
 const HANDLE_CLASS =
-  "!h-2 !w-2 !rounded-full !border !border-border-default !bg-white";
+  "!h-2 !w-2 !rounded-full !border !border-border-default !bg-white !opacity-0 !transition-opacity !duration-150 group-hover:!opacity-100";
 
 /**
  * Font size scales with node dimensions and shrinks when there is more
@@ -148,7 +149,7 @@ function CanvasNodeComponent({
 
   return (
     <div
-      className="relative"
+      className="group relative"
       style={{ width: nodeWidth, height: nodeHeight }}
       onDoubleClick={isEditing ? undefined : startEditing}
     >
diff --git a/components/editor/canvas.tsx b/components/editor/canvas.tsx
index 4bbbfd8..7b28137 100644
--- a/components/editor/canvas.tsx
+++ b/components/editor/canvas.tsx
@@ -15,12 +15,13 @@ import {
   Background,
   BackgroundVariant,
   ConnectionMode,
+  MarkerType,
   MiniMap,
   ReactFlow,
   ReactFlowProvider,
   useReactFlow,
-  applyNodeChanges,
-  type Node,
+  type DefaultEdgeOptions,
+  type EdgeTypes,
   type NodeTypes,
   type NodeChange,
 } from "@xyflow/react";
@@ -37,13 +38,32 @@ import "@liveblocks/react-flow/styles.css";
 import type {
   CanvasEdge,
   CanvasNode,
-  CanvasNodeData,
   NodeColorName,
   NodeShape,
 } from "@/types/canvas";
 import { NODE_COLORS } from "@/types/canvas";
 import { ShapePanel, type ShapeDragPayload } from "./shape-panel";
 import { CanvasNodeRenderer } from "./canvas-node";
+import { CanvasEdgeRenderer } from "./canvas-edge";
+
+/** Default style for newly created edges — light stroke, rounded ends, arrow. */
+const DEFAULT_EDGE_OPTIONS: DefaultEdgeOptions = {
+  type: "canvasEdge",
+  style: {
+    stroke: "#f8fafc",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+  },
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 16,
+    height: 16,
+    color: "#f8fafc",
+  },
+  data: {
+    label: "",
+  },
+};
 
 interface CanvasProps {
   roomId: string;
@@ -167,7 +187,7 @@ function CollaborativeFlow() {
     [lbOnNodesChange],
   );
 
-  // Memoized node types for the custom canvas node renderer
+  // Memoized type maps — stable refs so React Flow does not remount nodes/edges
   const nodeTypes = useMemo<NodeTypes>(
     () => ({
       canvasNode: CanvasNodeRenderer,
@@ -175,6 +195,13 @@ function CollaborativeFlow() {
     [],
   );
 
+  const edgeTypes = useMemo<EdgeTypes>(
+    () => ({
+      canvasEdge: CanvasEdgeRenderer,
+    }),
+    [],
+  );
+
   // Handle drag over to allow dropping
   const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -246,6 +273,8 @@ function CollaborativeFlow() {
         onConnect={onConnect}
         onDelete={onDelete}
         nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
         fitView
         connectionMode={ConnectionMode.Loose}
         proOptions={{ hideAttribution: true }}
diff --git a/context/feature-specs/16-edge-behavior.md b/context/feature-specs/16-edge-behavior.md
new file mode 100644
index 0000000..61dc603
--- /dev/null
+++ b/context/feature-specs/16-edge-behavior.md
@@ -0,0 +1,56 @@
+Replace the default canvas edges with custom edges that feel easier
+to follow, easier to click, and support inline labels.
+
+## Implementation
+
+1. Add connection handles to every node.
+   - place handles on the top, right, bottom, and left sides
+   - users should be able to connect from any handle to any other handle
+   - keep the handles subtle: small white dots with a dark border
+   - hide them by default and fade them in when hovering the node
+
+2. Add a default style for new edges.
+   - use a light stroke with rounded ends
+   - add an arrowhead at the end of each edge
+   - make new connections use the custom canvas edge renderer
+
+3. Create the custom edge renderer.
+   - use clean right-angle routing
+   - keep edges slightly dimmed at rest
+   - brighten edges when hovered or selected
+   - make edges easier to hover and click without increasing the
+     visible line thickness
+
+4. Add inline edge label editing.
+   - double-click an edge to edit its label
+   - use React Flow's `EdgeLabelRenderer` and the path midpoint
+     coordinates from `getSmoothStepPath` to position the label —
+     do not calculate midpoint position manually
+   - use an input that grows with the label text
+   - save the label on blur, Enter, or Escape
+   - show saved labels as small pill badges
+   - when an active edge has no label, show a faint hint
+   - prevent label clicks and typing from dragging or panning
+     the canvas
+   - update labels through the existing collaborative edge
+     data flow
+
+## Scope Limits
+
+- don't change how nodes are created
+- don't change the shape panel
+- don't redesign the node renderer beyond the required
+  connection handles
+- keep this focused on edge rendering, labels, and
+  connection behavior
+
+## Check When Done
+
+- Nodes have handles on all four sides.
+- New edges use the custom canvas edge type with arrows.
+- Edge hover, selection, and label editing are handled in
+  the custom edge renderer.
+- Edge label position uses EdgeLabelRenderer and path
+  midpoint coordinates.
+- Edge labels update through the existing edge data flow.
+- npm run build passes without type errors.
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index ba7aa20..cb6c721 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -4,7 +4,7 @@ Update this file whenever the current phase, active feature, or implementation s
 
 ## Current Phase
 
-- Feature 15 — (completed)
+- Feature 16 — (completed)
 
 ## Current Goal
 
@@ -27,6 +27,7 @@ Update this file whenever the current phase, active feature, or implementation s
 - feature 13: Node shape rendering — Replaced the placeholder `CanvasNodeRenderer` with proper per-shape visuals via shared `NodeShapeVisual` (`components/editor/node-shape-visual.tsx`). CSS shapes: rectangle (rounded-lg), pill (full radius), circle (full radius). SVG shapes: diamond, hexagon, and cylinder, all scaling with node width/height. Borders use a muted text-color alpha at rest and the full palette text color when the node is selected. Shape panel drag shows a cursor-attached ghost preview (same shape + default size, semi-transparent) that clears on drop or drag cancel; browser default drag image is suppressed. Drop/create logic and panel layout unchanged; still driven by Liveblocks collaborative state. `npm run build` passes.
 - feature 14: Node editing — Selected nodes show React Flow `NodeResizer` handles (min 80×40, subtle dark-canvas styling). Double-click opens centered inline label editing via an overlaid `textarea` (`nodrag` / `nopan` / `nowheel` so text interaction does not drag or pan). Label updates as the user types through `useReactFlow().updateNodeData`, which emits replace changes into Liveblocks via the existing `onNodesChange` path. Editing closes on blur or Escape. Empty labels show a centered muted "Label" placeholder (nodes only; drag ghosts stay blank). All four sides expose connectable `Handle`s (top/right/bottom/left). Shape rendering geometry, shape panel, and drop-create logic unchanged. `npm run build` passes.
 - feature 15: Node color toolbar — Selected nodes show a floating color toolbar above the node (`NodeColorToolbar` in `components/editor/node-color-toolbar.tsx`) with one swatch per `NODE_COLORS` pair from `types/canvas.ts` (8 predefined fill/text pairs from `ui-context.md`). Active swatch is ringed with its text color; hover applies a tight glow from the pair's text color. Swatch click calls `updateNodeData(id, { color })` so both background and text update immediately through Liveblocks collaborative state (no server calls). Toolbar uses `nodrag`/`nopan`/`nowheel` plus pointer stopPropagation so interactions do not drag nodes or pan the canvas. Label font size scales with node dimensions and text length (`computeLabelFontSize`); resize handles enlarged (14×14 corners, thicker edge lines) for easier grab. Scope limited to predefined palette only — no full color picker, no drag/drop or selection rebuild. `npm run build` passes.
+- feature 16: Edge behavior — Custom `CanvasEdgeRenderer` (`components/editor/canvas-edge.tsx`) replaces default edges with smooth-step (right-angle) routing, light `#f8fafc` stroke with rounded ends, closed arrow markers, dimmed rest opacity that brightens on hover/selection, and a wider invisible `interactionWidth` for easier click/hover. Canvas registers `edgeTypes.canvasEdge` and `defaultEdgeOptions` so new connections use the custom type with arrows. Node connection handles (top/right/bottom/left) stay small white dots with a dark border, hidden by default and faded in via `group-hover` on the node. Double-click an edge to edit its label; label position uses `EdgeLabelRenderer` + `labelX`/`labelY` from `getSmoothStepPath` (no manual midpoint math). Growing pill input; save/close on blur, Enter, or Escape; saved labels render as pill badges; active unlabeled edges show a faint "Label" hint; `nodrag`/`nopan`/`nowheel` plus stopPropagation keep label interaction off the canvas pan/drag path. Label writes go through `updateEdgeData` into the existing Liveblocks edge data flow. Scope limited to edge rendering, labels, and connection handles — node creation and shape panel unchanged. `npm run build` passes.
 
 ## In Progress
 
@@ -34,7 +35,7 @@ Update this file whenever the current phase, active feature, or implementation s
 
 ## Next Up
 
-- feature 16: TBD
+- feature 17: TBD
 
 ## Open Questions
 
@@ -51,6 +52,7 @@ Update this file whenever the current phase, active feature, or implementation s
 ## Session Notes
 
 - Add context needed to resume work in the next session.
+- 2026-07-16: feature 16 implemented exactly per spec. Custom edge renderer with smooth-step path, arrow markers via `defaultEdgeOptions` + `MarkerType.ArrowClosed`, hover/selection brighten, wide interaction hit area without thicker visible stroke. Inline edge labels via `EdgeLabelRenderer` + `getSmoothStepPath` midpoint coords; collaborative updates via `updateEdgeData`. Handles on all four node sides fade in on node hover only. Node creation / shape panel / node renderer geometry left alone.
 - 2026-07-16: feature 15 implemented exactly per spec. Color toolbar floats above selected nodes only; 8 swatches from existing `NODE_COLORS` (fill + paired text). Color change is client-only via `updateNodeData` into Liveblocks. Also addressed spec issues: dynamic label font scaling with node size/text amount, and more accessible NodeResizer hit targets. Drag/drop and selection logic untouched; no freeform color picker.
 - 2026-07-16: feature 14 implemented exactly per spec. Resize via `NodeResizer` (visible only when selected, min size enforced). Label edit via double-click → centered textarea overlay; live `updateNodeData` writes through Liveblocks; close on blur/Escape; `nodrag`/`nopan` block canvas interaction while typing. Four side handles for connections. Scope limited to resize + label editing (no shape panel / drop / geometry changes).
 - 2026-07-16: feature 13 implemented exactly per spec. Shared visual component powers both nodes and the drag ghost so preview matches drop. Scope limited to shape rendering + drag preview only (no resize, label editing, or drop-logic changes).

From e5be72653900a9e467387a79f4ee86e4b4445c86 Mon Sep 17 00:00:00 2001
From: tejasM17 <tejasm9380@gmail.com>
Date: Thu, 16 Jul 2026 22:34:30 +0530
Subject: [PATCH 4/4] compleated 17-feat

---
 components/editor/canvas-controls.tsx         | 134 ++++++++++++++++++
 components/editor/canvas.tsx                  |  12 +-
 .../feature-specs/17-canvas-ergonomics.md.md  |  56 ++++++++
 context/progress-tracker.md                   | 127 +++++++++--------
 hooks/useKeyboardShortcuts.ts                 |  98 +++++++++++++
 5 files changed, 357 insertions(+), 70 deletions(-)
 create mode 100644 components/editor/canvas-controls.tsx
 create mode 100644 context/feature-specs/17-canvas-ergonomics.md.md
 create mode 100644 hooks/useKeyboardShortcuts.ts

diff --git a/components/editor/canvas-controls.tsx b/components/editor/canvas-controls.tsx
new file mode 100644
index 0000000..c9f5742
--- /dev/null
+++ b/components/editor/canvas-controls.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { useCallback } from "react";
+import {
+  ZoomIn,
+  ZoomOut,
+  Maximize2,
+  Undo2,
+  Redo2,
+} from "lucide-react";
+import { useReactFlow } from "@xyflow/react";
+import {
+  useCanRedo,
+  useCanUndo,
+  useRedo,
+  useUndo,
+} from "@liveblocks/react";
+
+import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
+
+const ZOOM_DURATION_MS = 200;
+
+/**
+ * Floating pill control bar at the bottom-left of the canvas.
+ * Zoom group (out / fit / in) + history group (undo / redo), separated
+ * by a thin divider. Zoom uses the React Flow instance; undo/redo use
+ * Liveblocks room history.
+ */
+export function CanvasControls() {
+  const reactFlow = useReactFlow();
+  const undo = useUndo();
+  const redo = useRedo();
+  const canUndo = useCanUndo();
+  const canRedo = useCanRedo();
+
+  useKeyboardShortcuts({ reactFlow, undo, redo });
+
+  const handleZoomIn = useCallback(() => {
+    void reactFlow.zoomIn({ duration: ZOOM_DURATION_MS });
+  }, [reactFlow]);
+
+  const handleZoomOut = useCallback(() => {
+    void reactFlow.zoomOut({ duration: ZOOM_DURATION_MS });
+  }, [reactFlow]);
+
+  const handleFitView = useCallback(() => {
+    void reactFlow.fitView({ duration: ZOOM_DURATION_MS, padding: 0.15 });
+  }, [reactFlow]);
+
+  return (
+    <div className="pointer-events-none fixed bottom-6 left-6 z-50">
+      <div
+        className="pointer-events-auto flex items-center gap-1 rounded-full border border-border-default bg-bg-surface/95 px-1.5 py-1.5 shadow-xl backdrop-blur-md"
+        role="toolbar"
+        aria-label="Canvas controls"
+      >
+        {/* Zoom controls */}
+        <ControlButton
+          label="Zoom out"
+          onClick={handleZoomOut}
+          shortcut="-"
+        >
+          <ZoomOut className="h-4 w-4" />
+        </ControlButton>
+        <ControlButton
+          label="Fit view"
+          onClick={handleFitView}
+        >
+          <Maximize2 className="h-4 w-4" />
+        </ControlButton>
+        <ControlButton
+          label="Zoom in"
+          onClick={handleZoomIn}
+          shortcut="+"
+        >
+          <ZoomIn className="h-4 w-4" />
+        </ControlButton>
+
+        {/* Divider between zoom and history */}
+        <div
+          className="mx-0.5 h-5 w-px shrink-0 bg-border-default"
+          aria-hidden
+        />
+
+        {/* History controls */}
+        <ControlButton
+          label="Undo"
+          onClick={undo}
+          disabled={!canUndo}
+          shortcut="⌘Z"
+        >
+          <Undo2 className="h-4 w-4" />
+        </ControlButton>
+        <ControlButton
+          label="Redo"
+          onClick={redo}
+          disabled={!canRedo}
+          shortcut="⌘⇧Z"
+        >
+          <Redo2 className="h-4 w-4" />
+        </ControlButton>
+      </div>
+    </div>
+  );
+}
+
+interface ControlButtonProps {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  shortcut?: string;
+  children: React.ReactNode;
+}
+
+function ControlButton({
+  label,
+  onClick,
+  disabled = false,
+  shortcut,
+  children,
+}: ControlButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      title={shortcut ? `${label} (${shortcut})` : label}
+      className="flex h-8 w-8 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-bg-elevated hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary disabled:pointer-events-none disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-text-secondary"
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/components/editor/canvas.tsx b/components/editor/canvas.tsx
index 7b28137..83d1967 100644
--- a/components/editor/canvas.tsx
+++ b/components/editor/canvas.tsx
@@ -16,7 +16,6 @@ import {
   BackgroundVariant,
   ConnectionMode,
   MarkerType,
-  MiniMap,
   ReactFlow,
   ReactFlowProvider,
   useReactFlow,
@@ -45,6 +44,7 @@ import { NODE_COLORS } from "@/types/canvas";
 import { ShapePanel, type ShapeDragPayload } from "./shape-panel";
 import { CanvasNodeRenderer } from "./canvas-node";
 import { CanvasEdgeRenderer } from "./canvas-edge";
+import { CanvasControls } from "./canvas-controls";
 
 /** Default style for newly created edges — light stroke, rounded ends, arrow. */
 const DEFAULT_EDGE_OPTIONS: DefaultEdgeOptions = {
@@ -286,16 +286,10 @@ function CollaborativeFlow() {
           size={1}
           color="var(--border-subtle)"
         />
-        <MiniMap
-          pannable
-          zoomable
-          className="!bg-bg-surface/80 !border !border-border-default !rounded-xl !shadow-lg"
-          nodeColor="var(--text-muted)"
-          maskColor="rgba(8, 8, 9, 0.7)"
-        />
       </ReactFlow>
 
-      {/* Shape panel for dragging shapes onto the canvas */}
+      {/* Zoom + undo/redo bar (bottom-left); shape palette (bottom-center) */}
+      <CanvasControls />
       <ShapePanel />
     </div>
   );
diff --git a/context/feature-specs/17-canvas-ergonomics.md.md b/context/feature-specs/17-canvas-ergonomics.md.md
new file mode 100644
index 0000000..50d625a
--- /dev/null
+++ b/context/feature-specs/17-canvas-ergonomics.md.md
@@ -0,0 +1,56 @@
+Add a floating control bar for zoom and undo/redo, then wire the same actions to keyboard shortcuts.
+
+## Implementation
+
+1. Add a pill-shaped control bar at the bottom-left of the canvas.
+
+   It should sit above the shape panel and include two groups:
+   - zoom controls: zoom out, fit view, zoom in
+   - history controls: undo, redo
+
+   Separate the two groups with a thin divider.
+
+2. Wire the zoom controls to the React Flow instance.
+   - zoom in
+   - zoom out
+   - fit view
+   - use a short animation so the movement feels smooth
+
+3. Wire undo and redo to Liveblocks history.
+   - use the existing Liveblocks undo/redo hooks
+   - disable undo when there is nothing to undo
+   - disable redo when there is nothing to redo
+   - keep disabled buttons visually dimmed
+
+4. Create a `useKeyboardShortcuts` hook in `hooks/`.
+
+   The hook should:
+   - receive the React Flow instance
+   - receive undo and redo handlers
+   - listen for keyboard shortcuts on `window`
+   - ignore shortcuts while typing in inputs, textareas, or editable text fields
+
+5. Support these shortcuts:
+   - `+` or `=` to zoom in
+   - `-` to zoom out
+   - `Cmd/Ctrl + Z` to undo
+   - `Cmd/Ctrl + Shift + Z` to redo
+   - `Cmd/Ctrl + Y` to redo
+
+6. Remove the minimap at the bottem right
+
+## Scope Limits
+
+- don’t change the shape panel
+- don’t change node or edge rendering
+- don’t add extra canvas controls
+- don’t change the existing collaborative state setup
+
+## Check When Done
+
+- Control bar is added to the canvas.
+- Zoom actions use the React Flow instance.
+- Undo and redo use Liveblocks history.
+- Keyboard shortcuts are handled in `hooks/useKeyboardShortcuts`.
+- Shortcut handling skips editable fields.
+- `npm run build` passes.
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index cb6c721..93304ed 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -1,67 +1,72 @@
 # Progress Tracker
 
-Update this file whenever the current phase, active feature, or implementation state changes.
-
-## Current Phase
-
-- Feature 16 — (completed)
-
-## Current Goal
-
-- Define the immediate goals here
-
-## Completed
-
-- feature 01: Design system (shadcn/ui + lucide-react) — Button, Card, Dialog, Input, Tabs, Textarea, ScrollArea components installed with dark-only theme with tailwind v4.
-- feature 02: Editor chrome — `EditorNavbar` (top bar with sidebar toggle) and `ProjectSidebar` (floating left overlay with Projects header, Tabs for My Projects / Shared, and full-width New Project button). shadcn `Dialog` is now wired to the project's design tokens and ready for future use.
-- feature 03: Auth — Clerk wired into the Next.js app. `ClerkProvider` wraps the root layout using the `dark` theme from `@clerk/ui/themes` with appearance variables mapped to `globals.css` tokens. Sign-in (`/sign-in/[[...sign-in]]`) and sign-up (`/sign-up/[[...sign-up]]`) use a two-panel layout (compact logo + tagline + feature list on the left, centered Clerk form on the right; form-only on small screens). `proxy.ts` at the project root runs `clerkMiddleware` with public routes `/sign-in(.*)` and `/sign-up(.*)`, protecting everything else by default. The root `/` redirects authenticated users to `/editor` and unauthenticated users to `/sign-in`. `<UserButton />` is added to the editor navbar's right section. `npm run build` passes; no new lint errors.
-- feature 04: Project dialogs & editor home — `useProjectDialogs` hook (in `hooks/use-project-dialogs.ts`) owns the mock project list and centralizes dialog/form/loading state. Mock data lives in `lib/mock-projects.ts` with a shared `slugify` helper and per-project `role: "owner" | "collaborator"`. The editor home view (`components/editor/editor-home.tsx`) renders the heading, description, and a `New Project` button — no card. Three dialogs: `CreateProjectDialog` (name input with live slug preview using `slugify`), `RenameProjectDialog` (prefilled name, current name in the description, auto-focus + select, Enter submits via form `onSubmit`), and `DeleteProjectDialog` (destructive confirm button, no input). The sidebar now lists mock projects per tab; owned rows expose a `MoreHorizontal` menu with Rename / Delete, collaborator rows show no actions. A mobile-only backdrop scrim is rendered behind the sidebar on `md:hidden` and closes the sidebar on tap. `npm run build` passes; no new lint errors.
-- feature 05: Prisma schema & data layer — schema split: `prisma/schema.prisma` keeps the datasource + generator blocks, `prisma/models/project.prisma` defines the models. `Project` carries `ownerId`, `name`, optional `description`, `ProjectStatus` enum (`DRAFT` / `ARCHIVED`) defaulting to `DRAFT`, optional `canvasJsonPath` blob reference, and `createdAt` / `updatedAt` timestamps; indexes on `ownerId` and `createdAt`. `ProjectCollaborator` carries `projectId` (FK to `Project` with `onDelete: Cascade`), `email`, and `createdAt`; unique constraint on `(projectId, email)`; indexes on `email` and `(projectId, createdAt)`. `lib/prisma.ts` is a cached singleton — in dev, stashed on `globalThis` to survive HMR — that branches on `DATABASE_URL`: `prisma+postgres://` uses Prisma Accelerate (`accelerateUrl` + `withAccelerate()` extension), anything else uses `PrismaPg` driver adapter. Generated client lives in `app/generated/prisma` and is gitignored. Initial migration `20260715063438_init_project_models` applied. `npm run build` passes; no new lint errors (the two pre-existing shadcn `interface` warnings in `components/ui/input.tsx` and `components/ui/textarea.tsx` are unchanged).
-- feature 06: Project API routes — `lib/auth.ts` exposes `getCurrentUserId()` which returns the Clerk `userId` from `auth()` (or `null` if unauthenticated). `app/api/projects/route.ts` handles `GET` (lists the current user's projects, ordered by `createdAt` desc, uses the existing `ownerId` index) and `POST` (creates a project owned by the current user, defaults missing/blank name to `Untitled Project`, id stays on Prisma's existing `@default(cuid())` — no sequential IDs added). `app/api/projects/[projectId]/route.ts` handles `PATCH` (renames, requires a non-empty trimmed name) and `DELETE`. Both dynamic-route handlers resolve `params` as a `Promise` per Next.js 16, look up the project with `findUnique({ select: { id, ownerId }})`, return 404 when missing and 403 when the current user is not the owner, and return 401 for unauthenticated requests. `DELETE` returns 204 with an empty body; `PATCH` returns the updated project. Body parsing is wrapped in `try`/`catch` so a missing or malformed body resolves to a 400 on `PATCH` and to the default name on `POST`. `npm run build` passes; no new lint errors (the two pre-existing shadcn warnings are unchanged).
-- feature 07: Wire editor home to project API — Editor page converted to server component that fetches owned and shared projects server-side via `getAllProjects()` from `lib/projects.ts`. Client-side state and mutations managed by new `useProjectActions` hook in `hooks/use-project-actions.ts` which handles create (generates room ID with slug + suffix, POSTs to API, navigates to new workspace), rename (PATCH to API, updates local state on success), and delete (DELETE to API, refreshes router on success). `CreateProjectDialog` now shows "Room ID" preview instead of "Slug". Sidebar updated to accept `ProjectData` type from the hook instead of `MockProject`. `app/editor/page.tsx` now redirects unauthenticated users to `/sign-in`. Old `useProjectDialogs` hook removed. `npm run build` passes; no new lint errors.
-- feature 08: Editor workspace shell — Built `/editor/[roomId]` workspace shell with server-side access checks. Created `lib/project-access.ts` with `getCurrentUser()` (returns `userId` + primary email from Clerk) and `getProjectWithAccess()` (checks owner or collaborator access). Created `components/editor/access-denied.tsx` with centered layout, lock icon, message, and link back to `/editor`. Created `app/editor/[roomId]/page.tsx` as a server component that checks authentication (redirects to `/sign-in`), validates project access (shows `AccessDenied` for missing/unauthorized projects), and passes data to the client shell. Created `components/editor/workspace-shell.tsx` with full-viewport layout: top navbar showing project name, share button, AI chat toggle, left sidebar (with current room highlighted), central canvas placeholder (dark background + centered message), and right sidebar placeholder for future AI chat. `npm run build` passes; no new lint errors (pre-existing shadcn warnings in `components/ui/input.tsx` and `components/ui/textarea.tsx` unchanged).
-- feature 09: Share dialog — Added Share button to the editor navbar that opens the share dialog. Created `app/api/projects/[projectId]/collaborators/route.ts` for listing and inviting collaborators, and `app/api/projects/[projectId]/collaborators/[collaboratorId]/route.ts` for removing collaborators. Both enforce ownership server-side for invite and remove actions. Created `lib/auth.ts` helpers `getClerkUserByEmail()` and `getClerkUsersByEmails()` to enrich collaborator emails with display name and avatar from Clerk (falls back to showing email only when user not found). Created `components/editor/share-dialog.tsx` with the share dialog UI that shows project link (copyable with "Copied!" feedback), invite form (owners only), collaborator list (shows avatar + name when available from Clerk, email otherwise), and remove button (owners only). Created `hooks/use-share-dialog.ts` to manage share dialog state and API interactions. Updated `components/editor/workspace-shell.tsx` to include the share dialog and wire the Share button. Updated `app/editor/[roomId]/page.tsx` to pass `ownerId` to determine owner vs collaborator view. `npm run build` passes; no new lint errors.
-- feature 10: Liveblocks setup — `liveblocks.config.ts` types the required presence and user metadata. `lib/liveblocks.ts` provides a cached node client and deterministic user-color helper. `POST /api/liveblocks-auth` requires Clerk authentication, accepts Liveblocks’ `{ room }` auth payload (the project ID), verifies project access through `lib/project-access`, creates a private room with per-user write access, and returns an ID-token session with name, avatar, and cursor color. `npm run build` passes.
-- feature 11: Base canvas — `types/canvas.ts` defines the shared canvas node and edge types. `components/editor/canvas.tsx` sets up `LiveblocksProvider`, `RoomProvider`, initial presence, error and suspense loading fallbacks, then passes `useLiveblocksFlow`’s synced state and handlers into a basic React Flow canvas with loose connections, fit view, MiniMap, and dot background. It intentionally contains no custom node or edge rendering, persistence, controls, or AI behavior. `workspace-shell.tsx` renders the canvas for the active project. `npm run build` passes.
-- feature 12: Shape panel — Added a floating pill-shaped toolbar at the bottom-center of the canvas with draggable icon buttons for rectangle, diamond, circle, pill, cylinder, and hexagon. Drag payloads include the shape name and default sizes (rectangles wider, circles square, diamonds larger for labels). Added `dragover` and `drop` handlers to the canvas wrapper that read the payload, convert screen position to canvas coordinates using `screenToFlowPosition`, and create new nodes at that position with empty label, default color, and the dragged shape. Node IDs are generated using the shape name, timestamp, and a counter. Created `CanvasNodeRenderer` component to render nodes as bordered rectangles with centered labels (shape-specific visuals to be added later). `npm run build` passes.
-- feature 13: Node shape rendering — Replaced the placeholder `CanvasNodeRenderer` with proper per-shape visuals via shared `NodeShapeVisual` (`components/editor/node-shape-visual.tsx`). CSS shapes: rectangle (rounded-lg), pill (full radius), circle (full radius). SVG shapes: diamond, hexagon, and cylinder, all scaling with node width/height. Borders use a muted text-color alpha at rest and the full palette text color when the node is selected. Shape panel drag shows a cursor-attached ghost preview (same shape + default size, semi-transparent) that clears on drop or drag cancel; browser default drag image is suppressed. Drop/create logic and panel layout unchanged; still driven by Liveblocks collaborative state. `npm run build` passes.
-- feature 14: Node editing — Selected nodes show React Flow `NodeResizer` handles (min 80×40, subtle dark-canvas styling). Double-click opens centered inline label editing via an overlaid `textarea` (`nodrag` / `nopan` / `nowheel` so text interaction does not drag or pan). Label updates as the user types through `useReactFlow().updateNodeData`, which emits replace changes into Liveblocks via the existing `onNodesChange` path. Editing closes on blur or Escape. Empty labels show a centered muted "Label" placeholder (nodes only; drag ghosts stay blank). All four sides expose connectable `Handle`s (top/right/bottom/left). Shape rendering geometry, shape panel, and drop-create logic unchanged. `npm run build` passes.
-- feature 15: Node color toolbar — Selected nodes show a floating color toolbar above the node (`NodeColorToolbar` in `components/editor/node-color-toolbar.tsx`) with one swatch per `NODE_COLORS` pair from `types/canvas.ts` (8 predefined fill/text pairs from `ui-context.md`). Active swatch is ringed with its text color; hover applies a tight glow from the pair's text color. Swatch click calls `updateNodeData(id, { color })` so both background and text update immediately through Liveblocks collaborative state (no server calls). Toolbar uses `nodrag`/`nopan`/`nowheel` plus pointer stopPropagation so interactions do not drag nodes or pan the canvas. Label font size scales with node dimensions and text length (`computeLabelFontSize`); resize handles enlarged (14×14 corners, thicker edge lines) for easier grab. Scope limited to predefined palette only — no full color picker, no drag/drop or selection rebuild. `npm run build` passes.
-- feature 16: Edge behavior — Custom `CanvasEdgeRenderer` (`components/editor/canvas-edge.tsx`) replaces default edges with smooth-step (right-angle) routing, light `#f8fafc` stroke with rounded ends, closed arrow markers, dimmed rest opacity that brightens on hover/selection, and a wider invisible `interactionWidth` for easier click/hover. Canvas registers `edgeTypes.canvasEdge` and `defaultEdgeOptions` so new connections use the custom type with arrows. Node connection handles (top/right/bottom/left) stay small white dots with a dark border, hidden by default and faded in via `group-hover` on the node. Double-click an edge to edit its label; label position uses `EdgeLabelRenderer` + `labelX`/`labelY` from `getSmoothStepPath` (no manual midpoint math). Growing pill input; save/close on blur, Enter, or Escape; saved labels render as pill badges; active unlabeled edges show a faint "Label" hint; `nodrag`/`nopan`/`nowheel` plus stopPropagation keep label interaction off the canvas pan/drag path. Label writes go through `updateEdgeData` into the existing Liveblocks edge data flow. Scope limited to edge rendering, labels, and connection handles — node creation and shape panel unchanged. `npm run build` passes.
-
-## In Progress
+Keep this file short. Read feature specs + code for detail.
+
+## Phase
+
+- **Feature 17** — completed
+- Next: feature 18 (TBD)
+
+## Stack (quick)
+
+| Layer | Tech |
+| --- | --- |
+| App | Next.js 16 + TypeScript |
+| UI | Tailwind v4 + shadcn (dark-only tokens in `globals.css`) |
+| Auth | Clerk (`proxy.ts` middleware) |
+| DB | Prisma 7 + PostgreSQL (`lib/prisma.ts`, `prisma/models/`) |
+| Canvas | Liveblocks + React Flow (`@liveblocks/react-flow`) |
+| Types | `types/canvas.ts` — `CanvasNode` / `CanvasEdge` |
+
+## Done (features 01–17)
+
+| # | Feature | Key locations |
+| --- | --- | --- |
+| 01 | Design system | `components/ui/*`, `app/globals.css` |
+| 02 | Editor chrome | `editor-navbar.tsx`, `project-sidebar.tsx` |
+| 03 | Auth | Clerk provider, `/sign-in`, `/sign-up`, `proxy.ts` |
+| 04 | Project dialogs | create/rename/delete dialogs, mock → later wired |
+| 05 | Prisma | `Project`, `ProjectCollaborator`, `lib/prisma.ts` |
+| 06 | Project APIs | `app/api/projects/**` |
+| 07 | Editor home wired | `hooks/use-project-actions.ts`, `app/editor/page.tsx` |
+| 08 | Workspace shell | `app/editor/[roomId]`, `workspace-shell.tsx`, access checks |
+| 09 | Share dialog | collaborators APIs, `share-dialog.tsx` |
+| 10 | Liveblocks setup | `liveblocks.config.ts`, `POST /api/liveblocks-auth` |
+| 11 | Base canvas | `canvas.tsx` + `useLiveblocksFlow` |
+| 12 | Shape panel | `shape-panel.tsx` drag → drop create nodes |
+| 13 | Node shapes | `node-shape-visual.tsx`, drag ghost |
+| 14 | Node editing | resize, label edit, 4 handles — `canvas-node.tsx` |
+| 15 | Color toolbar | `node-color-toolbar.tsx`, `NODE_COLORS` |
+| 16 | Edge behavior | `canvas-edge.tsx` — smooth-step, arrows, labels |
+| 17 | Canvas ergonomics | `canvas-controls.tsx`, `hooks/useKeyboardShortcuts.ts` |
+
+## Feature 17 (current)
+
+- Bottom-left pill bar: zoom out / fit / zoom in | undo / redo
+- Zoom → React Flow (`duration: 200`)
+- Undo/redo → Liveblocks `useUndo` / `useRedo` / `useCanUndo` / `useCanRedo`
+- Shortcuts (window): `+`/`=` zoom in, `-` zoom out, `Mod+Z` undo, `Mod+Shift+Z` / `Mod+Y` redo
+- Skip shortcuts in input/textarea/contenteditable
+- MiniMap removed
+
+## Architecture invariants
+
+- RSC by default; `"use client"` only for interactivity / realtime
+- Project metadata in Postgres; canvas graph in Liveblocks room storage
+- Auth + ownership checked on every mutation API
+- UI tokens only (`bg-base`, `text-copy-*`, etc.) — no raw color utilities
+- Canvas types stay shared: `types/canvas.ts`
+- Do not invent features — follow `context/feature-specs/*` and user context
+
+## Open
 
 - None
 
-## Next Up
-
-- feature 17: TBD
-
-## Open Questions
-
-- Not yet
-
-## Architecture Decisions
-
-- shadcn/ui over Tailwind v4 (CSS-based token config via @theme inline in globals.css, no tailwind.config.js).
-
-- Dark-only theme: all shadcn :root variables set to dark values directly — no .dark class switching.
-
-- Do not modify generated components/ui/* files after shadcn installation.
-
-## Session Notes
-
-- Add context needed to resume work in the next session.
-- 2026-07-16: feature 16 implemented exactly per spec. Custom edge renderer with smooth-step path, arrow markers via `defaultEdgeOptions` + `MarkerType.ArrowClosed`, hover/selection brighten, wide interaction hit area without thicker visible stroke. Inline edge labels via `EdgeLabelRenderer` + `getSmoothStepPath` midpoint coords; collaborative updates via `updateEdgeData`. Handles on all four node sides fade in on node hover only. Node creation / shape panel / node renderer geometry left alone.
-- 2026-07-16: feature 15 implemented exactly per spec. Color toolbar floats above selected nodes only; 8 swatches from existing `NODE_COLORS` (fill + paired text). Color change is client-only via `updateNodeData` into Liveblocks. Also addressed spec issues: dynamic label font scaling with node size/text amount, and more accessible NodeResizer hit targets. Drag/drop and selection logic untouched; no freeform color picker.
-- 2026-07-16: feature 14 implemented exactly per spec. Resize via `NodeResizer` (visible only when selected, min size enforced). Label edit via double-click → centered textarea overlay; live `updateNodeData` writes through Liveblocks; close on blur/Escape; `nodrag`/`nopan` block canvas interaction while typing. Four side handles for connections. Scope limited to resize + label editing (no shape panel / drop / geometry changes).
-- 2026-07-16: feature 13 implemented exactly per spec. Shared visual component powers both nodes and the drag ghost so preview matches drop. Scope limited to shape rendering + drag preview only (no resize, label editing, or drop-logic changes).
+## Context files (read order for new work)
 
-- 2026-07-15: Features 10 and 11 were reconciled with their specifications and verified. The Liveblocks auth endpoint now accepts the SDK's `{ room }` payload from `LiveblocksProvider` (the room is the project ID), fixing the previous `roomId is required` 400 and resulting connection failure. It uses the workspace project-access helper before creating the private room and issuing the ID token. `liveblocks.config.ts` now types the specified presence and user metadata. The base canvas remains limited to the specified Liveblocks-backed React Flow foundation; premature custom node and edge renderers were removed. `npm run build` passes with no Liveblocks-related errors.
-- 2026-07-15: Development startup dependencies were aligned with the implemented Next.js 16 App Router and Prisma 7 code: `next` is pinned to `16.2.10`, `prisma` to `^7.8.0`, and Clerk UI to `^1.25.3`. Added the missing `@liveblocks/node@3.22.0` server SDK required by `app/api/liveblocks-auth`. `npm run build` now completes successfully and `npm run dev` is running on `http://localhost:3000`.
-- 2026-07-14: feature 03 auth pages UI refined to match the reference layout — 50/50 grid, brand panel on the left with logo + headline + three icon-chipped feature rows + footer copyright, form panel on the right with a rounded-3xl `bg-bg-elevated` card housing the Clerk form and a contextual "Don't have an account? / Sign up" link below. Left panel uses `bg-bg-surface` so it differentiates from the base. Brand wordmark is "Ghost dev" (matches the screenshot). Geist Sans is the body default from `--font-geist-sans`; no new fonts added.
-- 2026-07-15: feature 04 implemented exactly per spec. Dialog state is centralized in `useProjectDialogs` (no `useReducer`; small surface, `useState` + `useTransition` is enough). The dialog form pattern (controlled name value, ref-based auto-focus on open) means the hook owns the field state, so the dialog components stay presentational. Slug preview uses the same `slugify` helper that mutation uses, so the preview matches the stored value. Mobile backdrop is a sibling `<button>` rendered before the `<aside>` and only enabled on `md:hidden` — clicking it calls `onClose`, which is the same prop the X button uses. Two pre-existing lint errors in `components/ui/input.tsx` and `components/ui/textarea.tsx` (empty `extends React.HTMLAttributes` interfaces from shadcn) are unchanged — those files are protected foundation components.
-- 2026-07-15: feature 05 implemented exactly per spec. Schema split mirrors the planned "one file per aggregate" pattern from the context files (the spec's `prisma/models/project.prisma` becomes the home for project-related models, leaving `schema.prisma` as a thin shell with just `generator` + `datasource`). `ProjectCollaborator` was modelled with the `project` relation field plus the FK column — Prisma only requires one side, but having the typed `project` field on the child model means callers can `include: { project: true }` and get a typed return without a second query. The unique constraint on `(projectId, email)` is the project's hard rule (one row per email per project), so it's enforced at the DB layer. The Accelerate branch installs `@prisma/extension-accelerate` (the spec listed it as "Already installed" but the package wasn't in `package.json` — added it) and wires `withAccelerate()` to the base `PrismaClient` constructed with `accelerateUrl`. The non-Accelerate branch uses `new PrismaPg({ connectionString })` per the v7 driver-adapter workflow (`datasourceUrl` does not exist on `PrismaClient` in v7). Both branches return the same `PrismaClient` type so the consumer import is unchanged.
-- 2026-07-15: feature 06 implemented exactly per spec. Auth check uses `auth().userId` from `@clerk/nextjs/server` rather than `auth.protect()` — per the Next.js 16 docs, `protect()` returns 404 for unauthenticated API requests, but the spec mandates a 401, so the routes check the auth state explicitly and return `NextResponse.json({ error: "Unauthorized" }, { status: 401 })` themselves. The owner check uses a targeted `findUnique({ select: { id, ownerId } })` (no `select *`) and runs the comparison in TS rather than a Prisma `where` clause — the result codes are cleaner and the lookup doubles as the "does the project exist" check (404 vs 403 vs success). `DELETE` returns 204 with no body (`new NextResponse(null, { status: 204 })`) per REST convention. `PATCH` validates the trimmed `name` and returns 400 on a missing/blank value, so a client that submits an empty rename gets a clear error instead of a silent no-op. Both `params` are awaited as `Promise<{ projectId: string }>` per the Next.js 16 route handler contract (the older `params` is a plain object shape is no longer valid). The collection `POST` accepts an optional body — `request.json()` is wrapped in `try`/`catch` so a request with no body or a malformed body still creates a project with the default name. UI is unchanged (the spec said "Do not wire the UI yet").
-- 2026-07-15: feature 08 implemented exactly per spec. Created `lib/project-access.ts` with `getCurrentUser()` (uses Clerk `clerkClient` to fetch user and get primary email) and `getProjectWithAccess()` (checks owner via `ownerId` match or collaborator via `ProjectCollaborator` unique constraint). Page component at `app/editor/[roomId]/page.tsx` is a server component that redirects unauthenticated users to `/sign-in`, shows `AccessDenied` for missing/unauthorized projects, and passes project data to the client shell. `WorkspaceShell` component renders full-viewport layout with top navbar (project name, share button, AI chat toggle), left sidebar (current room highlighted with accent border), canvas placeholder (dark background + centered text), and right sidebar placeholder for future AI chat. No canvas logic, Liveblocks, AI chat, or sharing behavior added yet per scope. `npm run build` passes; pre-existing shadcn lint errors unchanged.
-- 2026-07-15: features 10 + 11 implemented back-to-back per spec. For feature 10, the auth route chose **ID tokens** over access tokens because the spec mandates "ensure the Liveblocks room exists (create only if needed)" — that semantic is `liveblocks.getOrCreateRoom`, which is only available on the ID-token auth path (access tokens can be issued per-request but you still need a separate server-side `getOrCreateRoom` call to provision a room before any user can enter; ID tokens collapse both into one happy path). The room is created with `defaultAccesses: []` (private) and `usersAccesses: { [userId]: ["room:write"] }` for the caller — project membership is already enforced by the existing `getProjectWithAccess` helper, so the room permissions are belt-and-suspenders rather than the primary gate. `groupIds: []` is required by the `Identity` type signature (Liveblocks treats it as `string[]`, not optional, even when no groups are used). For feature 11, the canvas mounts an in-component `CanvasErrorBoundary` (class component, ~30 lines) rather than pulling in `react-error-boundary` — keeps the dep footprint flat and matches the existing "single-purpose, no extra deps" tone of the project. `useLiveblocksFlow` is called with the typed `CanvasNode` / `CanvasEdge` generics so storage writes are type-checked end to end. `nodeTypes` / `edgeTypes` are wrapped in `useMemo([])` to keep the references stable across renders (React Flow will tear down and re-instantiate any node whose type mapping changes by reference, so this matters). `CanvasPlaceholder` is fully removed from the workspace shell in favor of `<Canvas roomId={currentRoomId} />` — the four duplicate definitions that briefly existed during the edit were cleaned up before the final build. `npm run build` passes; pre-existing shadcn lint errors in `components/ui/input.tsx` and `components/ui/textarea.tsx` unchanged.
+1. `project-overview.md`
+2. `architecture-context.md`
+3. `ui-context.md`
+4. `code-standards.md`
+5. `ai-workflow-rules.md`
+6. This tracker + the active feature spec
diff --git a/hooks/useKeyboardShortcuts.ts b/hooks/useKeyboardShortcuts.ts
new file mode 100644
index 0000000..27f8f48
--- /dev/null
+++ b/hooks/useKeyboardShortcuts.ts
@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect } from "react";
+import type { ReactFlowInstance } from "@xyflow/react";
+
+const ZOOM_DURATION_MS = 200;
+
+interface UseKeyboardShortcutsOptions {
+  /** React Flow instance used for zoom in / zoom out. */
+  reactFlow: ReactFlowInstance;
+  /** Liveblocks (or equivalent) undo handler. */
+  undo: () => void;
+  /** Liveblocks (or equivalent) redo handler. */
+  redo: () => void;
+}
+
+/**
+ * Returns true when the event target is an editable field so canvas
+ * shortcuts do not fire while the user is typing a label.
+ */
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
+    return true;
+  }
+
+  if (target.isContentEditable) return true;
+
+  // Also treat elements inside contenteditable hosts as typing targets
+  if (target.closest("[contenteditable='true'], [contenteditable='']")) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Window-level canvas keyboard shortcuts.
+ *
+ * - `+` / `=` zoom in
+ * - `-` zoom out
+ * - `Cmd/Ctrl + Z` undo
+ * - `Cmd/Ctrl + Shift + Z` or `Cmd/Ctrl + Y` redo
+ *
+ * Shortcuts are ignored while focus is in an input, textarea, or editable field.
+ */
+export function useKeyboardShortcuts({
+  reactFlow,
+  undo,
+  redo,
+}: UseKeyboardShortcutsOptions): void {
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent): void {
+      if (isEditableTarget(event.target)) return;
+
+      const mod = event.metaKey || event.ctrlKey;
+      const key = event.key;
+
+      // Undo / redo (modifier combinations)
+      if (mod && key.toLowerCase() === "z") {
+        event.preventDefault();
+        if (event.shiftKey) {
+          redo();
+        } else {
+          undo();
+        }
+        return;
+      }
+
+      if (mod && key.toLowerCase() === "y") {
+        event.preventDefault();
+        redo();
+        return;
+      }
+
+      // Zoom (no modifiers — avoid stealing browser zoom / other chords)
+      if (mod || event.altKey) return;
+
+      if (key === "+" || key === "=") {
+        event.preventDefault();
+        void reactFlow.zoomIn({ duration: ZOOM_DURATION_MS });
+        return;
+      }
+
+      if (key === "-") {
+        event.preventDefault();
+        void reactFlow.zoomOut({ duration: ZOOM_DURATION_MS });
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [reactFlow, undo, redo]);
+}