feat(M5): selection transform, inspector, z-order & per-object lock (pillars 2 & 3, v0)

apps/web/src/features/canvas/SelectionInspector.tsx

@@ -0,0 +1,252 @@
+import { useMemo } from "react";
+import type { YShape } from "@notux/types";
+import { useShapeStore, useToolStore } from "@notux/canvas";
+import { COLORS } from "./palette";
+
+interface Props {
+  pageId: string;
+}
+
+// The stroke/outline color a shape exposes for editing (asset has none).
+function shapeColor(s: YShape): string | undefined {
+  switch (s.kind) {
+    case "rect":
+    case "ellipse":
+    case "line":
+    case "arrow":
+      return s.stroke;
+    case "text":
+    case "stroke":
+      return s.color;
+    case "asset":
+      return undefined;
+  }
+}
+
+function colorPatch(s: YShape, color: string): Partial<YShape> | null {
+  switch (s.kind) {
+    case "rect":
+    case "ellipse":
+    case "line":
+    case "arrow":
+      return { stroke: color };
+    case "text":
+    case "stroke":
+      return { color };
+    case "asset":
+      return null;
+  }
+}
+
+// The common value across the selection, or "mixed" when they differ.
+function shared<T>(
+  items: YShape[],
+  pick: (s: YShape) => T | undefined,
+): T | "mixed" | undefined {
+  let acc: T | undefined;
+  let seen = false;
+  for (const s of items) {
+    const v = pick(s);
+    if (v === undefined) continue;
+    if (!seen) {
+      acc = v;
+      seen = true;
+    } else if (acc !== v) {
+      return "mixed";
+    }
+  }
+  return seen ? acc : undefined;
+}
+
+export function SelectionInspector({ pageId }: Props) {
+  const selection = useToolStore((s) => s.selection);
+  const revision = useShapeStore((s) => s.revision);
+
+  const selected = useMemo(() => {
+    const store = useShapeStore.getState();
+    return Array.from(selection)
+      .map((id) => store.getShape(pageId, id))
+      .filter((s): s is YShape => !!s);
+    // revision so the panel reflects model edits / undo immediately.
+  }, [selection, revision, pageId]);
+
+  if (selected.length === 0) return null;
+
+  const store = useShapeStore.getState();
+  const ids = selected.map((s) => s.id);
+
+  function patchEach(make: (s: YShape) => Partial<YShape> | null) {
+    store.transact(() => {
+      for (const s of selected) {
+        const p = make(s);
+        if (p) store.updateShape(pageId, s.id, p);
+      }
+    });
+  }
+
+  const isFillKind = (s: YShape) => s.kind === "rect" || s.kind === "ellipse";
+  const hasColor = selected.some((s) => shapeColor(s) !== undefined);
+  const fillShapes = selected.filter(isFillKind);
+  const textShapes = selected.filter((s) => s.kind === "text");
+
+  const currentColor = shared(selected, shapeColor);
+  const currentFill = shared(fillShapes, (s) =>
+    isFillKind(s) ? (s as { fill: string | null }).fill : undefined,
+  );
+  const currentOpacity = shared(selected, (s) => s.opacity ?? 1);
+  const currentSize = shared(textShapes, (s) =>
+    s.kind === "text" ? s.size : undefined,
+  );
+  const allLocked = shared(selected, (s) => !!s.locked) === true;
+
+  const opacityValue =
+    typeof currentOpacity === "number" ? Math.round(currentOpacity * 100) : 100;
+
+  return (
+    <div
+      className="selection-inspector"
+      role="region"
+      aria-label="Selection properties"
+    >
+      {hasColor && (
+        <div className="selection-inspector__row selection-inspector__row--swatches">
+          {COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              className={
+                "tool-palette__swatch" +
+                (currentColor === c ? " tool-palette__swatch--active" : "")
+              }
+              style={{ background: c }}
+              onClick={() => patchEach((s) => colorPatch(s, c))}
+              title={c}
+              aria-label={`Stroke ${c}`}
+            />
+          ))}
+        </div>
+      )}
+
+      {fillShapes.length > 0 && (
+        <div className="selection-inspector__row">
+          <span className="selection-inspector__label">Fill</span>
+          <div className="selection-inspector__swatches">
+            <button
+              type="button"
+              className={
+                "tool-palette__swatch selection-inspector__none" +
+                (currentFill === null ? " tool-palette__swatch--active" : "")
+              }
+              onClick={() =>
+                patchEach((s) => (isFillKind(s) ? { fill: null } : null))
+              }
+              title="No fill"
+              aria-label="No fill"
+            />
+            {COLORS.map((c) => (
+              <button
+                key={c}
+                type="button"
+                className={
+                  "tool-palette__swatch" +
+                  (currentFill === c ? " tool-palette__swatch--active" : "")
+                }
+                style={{ background: c }}
+                onClick={() =>
+                  patchEach((s) => (isFillKind(s) ? { fill: c } : null))
+                }
+                title={c}
+                aria-label={`Fill ${c}`}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="selection-inspector__row">
+        <span className="selection-inspector__label">Opacity</span>
+        <input
+          className="selection-inspector__range"
+          type="range"
+          min={0}
+          max={100}
+          value={opacityValue}
+          onChange={(e) =>
+            patchEach(() => ({ opacity: Number(e.target.value) / 100 }))
+          }
+          aria-label="Opacity"
+        />
+      </div>
+
+      {textShapes.length > 0 && (
+        <div className="selection-inspector__row">
+          <span className="selection-inspector__label">Size</span>
+          <input
+            className="selection-inspector__num"
+            type="number"
+            min={8}
+            value={typeof currentSize === "number" ? currentSize : ""}
+            placeholder={currentSize === "mixed" ? "—" : ""}
+            onChange={(e) => {
+              const n = Number(e.target.value);
+              if (Number.isFinite(n) && n > 0) {
+                patchEach((s) => (s.kind === "text" ? { size: n } : null));
+              }
+            }}
+            aria-label="Font size"
+          />
+        </div>
+      )}
+
+      <div className="selection-inspector__row selection-inspector__actions">
+        <button
+          type="button"
+          className="selection-inspector__btn"
+          onClick={() => store.bringToFront(pageId, ids)}
+          title="Bring to front"
+          aria-label="Bring to front"
+        >
+          ⤒
+        </button>
+        <button
+          type="button"
+          className="selection-inspector__btn"
+          onClick={() => store.bringForward(pageId, ids)}
+          title="Bring forward"
+          aria-label="Bring forward"
+        >
+          ↑
+        </button>
+        <button
+          type="button"
+          className="selection-inspector__btn"
+          onClick={() => store.sendBackward(pageId, ids)}
+          title="Send backward"
+          aria-label="Send backward"
+        >
+          ↓
+        </button>
+        <button
+          type="button"
+          className="selection-inspector__btn"
+          onClick={() => store.sendToBack(pageId, ids)}
+          title="Send to back"
+          aria-label="Send to back"
+        >
+          ⤓
+        </button>
+      </div>
+
+      <button
+        type="button"
+        className={
+          "selection-inspector__lock" +
+          (allLocked ? " selection-inspector__lock--on" : "")
+        }
+        onClick={() => patchEach(() => ({ locked: !allLocked }))}
+      >
+        {allLocked ? "Unlock" : "Lock"}
+      </button>
+    </div>
+  );
+}

apps/web/src/features/canvas/ToolPalette.tsx

@@ -1,5 +1,6 @@
 import type { ToolKind } from "@notux/types";
 import { useToolStore } from "@notux/canvas";
+import { COLORS, SIZES } from "./palette";
 
 interface ToolDef {
   kind: ToolKind;
@@ -19,9 +20,6 @@ const TOOLS: ToolDef[] = [
   { kind: "text", label: "Text", glyph: "T" },
 ];
 
-const COLORS = ["#ffffff", "#5ac8fa", "#ffd60a", "#ff453a", "#34c759", "#bf5af2"];
-const SIZES = [2, 4, 8, 14];
-
 // Temporary palette — the real Liquid Glass dock lands in M7.
 export function ToolPalette() {
   const tool = useToolStore((s) => s.tool);

apps/web/src/features/canvas/palette.ts

@@ -0,0 +1,11 @@
+// Shared swatch + stroke-size presets, used by both the ToolPalette and the
+// SelectionInspector so they stay visually consistent.
+export const COLORS = [
+  "#ffffff",
+  "#5ac8fa",
+  "#ffd60a",
+  "#ff453a",
+  "#34c759",
+  "#bf5af2",
+];
+export const SIZES = [2, 4, 8, 14];

apps/web/src/routes/Board.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { CanvasStage, useShapeStore } from "@notux/canvas";
+import { CanvasStage, DEFAULT_PAGE_ID, useShapeStore } from "@notux/canvas";
 import { SaveStatus } from "../features/canvas/SaveStatus";
+import { SelectionInspector } from "../features/canvas/SelectionInspector";
 import { ToolPalette } from "../features/canvas/ToolPalette";
 
 export default function Board() {
@@ -47,6 +48,7 @@ export default function Board() {
     <div className="board">
       <CanvasStage boardId={boardId!} />
       <ToolPalette />
+      <SelectionInspector pageId={DEFAULT_PAGE_ID} />
       <SaveStatus />
       <Link className="board__home-link" to="/">
         ← Home