canvas: the panels move to Geist, and the canvas opens dark

README.md

@@ -198,10 +198,9 @@ status` and `sp-canvas stop` do what they say.
 
 Deep-link a page with `?canvas=<slug>`, and one board of it with
 `?canvas=<slug>#<file>`: it opens in the inspector with the camera on it, and
-clicking any board writes that link into the address bar. The bottom toolbar carries a
-styles-panel toggle alongside tldraw's own tools; the top bar carries a
-force-relayout button. Press it after editing a `layout.json`. A board folder
-added after boot appears on its own.
+clicking any board writes that link into the address bar. Right-clicking the
+canvas offers Force refresh; choose it after editing a `layout.json`. A board
+folder added after boot appears on its own.
 
 ## The workflow
 

RELEASE-NOTES.md

@@ -60,13 +60,23 @@ This needs the toolkit reinstalled, not only the plugin updated: `sp-canvas`
 the panel but every message answers 503. Re-run the README's `uv tool install`
 line with `--force`.
 
-The canvas toolbar drops its shape editing: undo, redo, delete, duplicate and
-the overflow menu of aligns, distributes and reorders are gone from the top
-bar, which leaves comments, Export to Figma, Brand kit, clone and refresh. The
-actions themselves are unchanged — the keyboard and the right-click menu still
-have them. The zoom readout and minimap toggle go from the bottom-left corner
-too, where they sat under the chat panel's composer: zoom is the trackpad, ⌘+
-and ⌘-, and ⇧1 to fit the page.
+The canvas top bar is down to a switch, the page name and two destinations:
+collapse the chat panel, Export to Figma, Brand kit. Everything else on it
+moved. Shape editing, meaning undo, redo, delete, duplicate and the overflow
+of aligns, distributes and reorders, is on the keyboard and the right-click
+menu, where it already was. These boards are written from files by a
+generator, so six buttons for nudging them crowded out the two the bar is
+for. Comment, clone and force refresh join them on the right button. All
+three act on what is under the cursor, or on the page it is on, which is what
+a right-click has already picked out. The hamburger beside the page name goes
+too, and so do the zoom readout and minimap toggle in the bottom-left corner,
+where they sat under the chat panel's composer. Zoom is the trackpad, ⌘+ and
+⌘-, and ⇧1 to fit the page.
+
+The switch for the chat panel is in the canvas's own top-left corner, which is
+the one place it can be whether the panel is open or shut. In the panel's
+header it went away with the panel and needed a second control to bring it
+back.
 
 Under the message box: which model, which effort, and what the last message
 cost. The model list is the agent's own — for Codex it is the list its own
@@ -96,6 +106,29 @@ A plus in the panel's header starts a new session: the log clears and the next
 message has nothing above it. Anything still running keeps running and stays in
 the history list — the button clears the view, it does not stop the agent.
 
+The canvas is dark, and its panels are drawn in Vercel's Geist: its greys and
+its accents, its icons, and Geist Sans and Geist Mono bundled so a board looks
+the same offline as online. The chat panel, the inspector, the top bar and the
+canvas they sit around all read as one app now, on one ground, separated by
+hairlines rather than by shade. tldraw's own chrome comes with them. Its menus,
+its toolbar and its context menu read the same tokens, so a page menu is the
+same black card with the same hairline as a panel's menu, and an icon button
+in the top bar is the same grey, and lights the same way, as one in the chat
+panel's header beside it. The glyphs are Geist's own set rather than a
+transcription of it, and the scrollbars are the app's rather than the
+platform's: one thin grey thumb on whatever ground it is over, in the
+transcript, the slash menu, the history, the notes and the inspector alike.
+Your boards are untouched. A mockup is drawn by its own generator and keeps
+whatever palette it was measured in, scrollbars included.
+
+One thing about a board does change, and it is what the dark ground exposed. A
+mockup used to sit on a white card. A frame paints an opaque white background
+of its own underneath whatever the board draws, invisible while the canvas was
+white and a card around every phone once it is not. The canvas releases it, so
+the canvas shows through wherever a board paints nothing and every pixel the
+board does paint stays as it was. A board that wants a ground, such as a token
+sheet or an evidence sheet, still declares one and looks exactly as it did.
+
 ## v1.3.0
 
 2026-09-15. The inspector moves onto the canvas: you click the board itself,

canvas/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "utils": "@/lib/utils",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

canvas/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <meta name="theme-color" content="#f0eeec" />
+    <meta name="theme-color" content="#000000" />
     <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
     <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

canvas/package.json

@@ -11,22 +11,30 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
     "@tldraw/commenting": "^5.4.2",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.3.0",
     "dompurify": "^3.4.15",
+    "geist-icons": "^1.3.0",
     "marked": "^18.0.13",
+    "radix-ui": "^1.6.7",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "remend": "^1.3.1",
     "tldraw": "^5.4.2"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.5.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
     "jsdom": "^30.1.0",
     "oxlint": "^1.82.0",
     "sharp": "^0.35.4",
+    "tailwindcss": "^4.3.3",
     "typescript": "~7.0.2",
     "vite": "^8.3.0",
     "vitest": "^5.0.0"

canvas/src/App.tsx

@@ -6,6 +6,9 @@ import {
   useState,
 } from "react";
 import {
+  Ellipse2d,
+  ImageShapeUtil,
+  Rectangle2d,
   Tldraw,
   commentSchemaRecords,
   createShapeId,
@@ -21,12 +24,12 @@ import {
   type TLPageId,
   type TLAsset,
   type TLAssetStore,
+  type TLImageShape,
   type TLShapeId,
   type TLDefaultColorStyle,
   type TLTextShape,
   useEditor,
   useLocalStore,
-  useValue,
 } from "tldraw";
 import "tldraw/tldraw.css";
 import "@tldraw/commenting/commenting.css";
@@ -83,14 +86,30 @@ import { canvasesDir, canvasesNamespace } from "virtual:canvases";
 import { installCanvasComments, readCommentUser } from "./canvasComments";
 import {
   CanvasChromeContext,
-  canvasChromeAssetUrls,
   canvasChromeComponents,
-  canvasCommentOverrides,
+  canvasUiOverrides,
   canvasCommentTools,
 } from "./canvasChrome";
 
+/**
+ * A picture is the whole of its box. tldraw hit-tests an image that can carry transparency against
+ * its own pixels, so a mockup drawn on nothing answers nothing where it is nothing: the inspector
+ * stays shut and the attach buttons never appear except over the drawing itself. Here a picture is
+ * a tile in a row of tiles, and the empty part of a tile is still that tile.
+ */
+class CanvasImageShapeUtil extends ImageShapeUtil {
+  override getGeometry(shape: TLImageShape) {
+    const box = { width: shape.props.w, height: shape.props.h, isFilled: true };
+    // A circle crop is still a circle; it is only the alpha channel that stops counting.
+    return shape.props.crop?.isCircle
+      ? new Ellipse2d(box)
+      : new Rectangle2d(box);
+  }
+}
+
 const shapeUtils = [
   CanvasFileShapeUtil,
+  CanvasImageShapeUtil,
   CanvasLinkShapeUtil,
   CanvasStatusBannerShapeUtil,
 ];
@@ -137,8 +156,14 @@ const TLDRAW_LICENSE_KEY: string | undefined = import.meta.env
 const storeOptions = {
   persistenceKey: PERSISTENCE_KEY,
   // The same set `<Tldraw>` merges for itself; the schema has to know every type the document
-  // can hold, hand-drawn annotations included.
-  shapeUtils: [...defaultShapeUtils, ...shapeUtils],
+  // can hold, hand-drawn annotations included. A default one of ours stands in for is dropped
+  // rather than listed beside it: the schema refuses the same shape type twice.
+  shapeUtils: [
+    ...defaultShapeUtils.filter(
+      (fallback) => !shapeUtils.some((ours) => ours.type === fallback.type),
+    ),
+    ...shapeUtils,
+  ],
   bindingUtils: defaultBindingUtils,
   assetUtils: defaultAssetUtils,
   records: commentSchemaRecords,
@@ -247,22 +272,6 @@ function LockedLinkClicks() {
   return null;
 }
 
-/** Blacks out the canvas under the welcome board, whose art runs to its own edges. */
-function WelcomeGround() {
-  const editor = useEditor();
-  const isWelcome = useValue(
-    "on the welcome page",
-    () => editor.getCurrentPage().meta.canvasSlug === WELCOME_PAGE_SLUG,
-    [editor],
-  );
-  useEffect(() => {
-    const container = editor.getContainer();
-    container.classList.toggle("canvas-welcome-ground", isWelcome);
-    return () => container.classList.remove("canvas-welcome-ground");
-  }, [editor, isWelcome]);
-  return null;
-}
-
 /**
  * A path as a single shell word. A boards directory is chosen by whoever ran `sp-canvas`, so it
  * can hold a space, and the command below is meant to be copied and run as it stands.
@@ -1232,6 +1241,8 @@ function initializeCanvas(editor: Editor) {
 /** Distance from the viewport's edge to the board the address named, in screen px. */
 const BOARD_ZOOM_INSET = 80;
 
+const CHAT_COLLAPSED_KEY = "sp-chat-collapsed";
+
 export default function App() {
   /** The board open in the inspector: click any board on the canvas to open it, Escape or × to close. */
   const [inspecting, setInspecting] = useState<CanvasLibraryFile | null>(null);
@@ -1241,6 +1252,17 @@ export default function App() {
   const [commentUser, setCommentUser] = useState(readCommentUser);
   /** State rather than a ref: the inspector panel renders outside `<Tldraw>` and needs it. */
   const [editor, setEditor] = useState<Editor | null>(null);
+  /** Whether the chat panel is shut. Here rather than in the panel, because the button that works
+   * it sits in the canvas's top bar, which is the panel's sibling, not its child. Remembered
+   * across reloads, because it is a preference about this window, not about any one board. */
+  const [chatCollapsed, setChatCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem(CHAT_COLLAPSED_KEY) === "true";
+    } catch {
+      // Storage unavailable (private mode, blocked cookies), so the panel starts open.
+      return false;
+    }
+  });
   const store = useLocalStore(storeOptions);
   /** What the inspector has open, spelled the way the address spells it: a board by file name,
    * a picture by its path inside the folder, each with the page it belongs to. For the address
@@ -1325,6 +1347,9 @@ export default function App() {
 
   function handleMount(editor: Editor) {
     setEditor(editor);
+    // tldraw's own dark theme, to match the panel's. A dark rail against tldraw's near-white ground
+    // looks like two apps in one window, and the ground is most of the window.
+    editor.user.updateUserPreferences({ colorScheme: "dark" });
     initializeCanvas(editor);
     // After the library, which is what creates the pages the comments are keyed to.
     const disposeComments = installCanvasComments(editor);
@@ -1359,6 +1384,15 @@ export default function App() {
         inspectBoard: onPick,
         inspectingPath: inspecting?.path ?? null,
         inspectorOpen: Boolean(inspecting || inspectingImage),
+        chatCollapsed,
+        toggleChat: () => {
+          try {
+            localStorage.setItem(CHAT_COLLAPSED_KEY, String(!chatCollapsed));
+          } catch {
+            // Storage unavailable (private mode, blocked cookies), so the choice lasts until a reload.
+          }
+          setChatCollapsed(!chatCollapsed);
+        },
         setInspectorFrame: (frame: HTMLIFrameElement | null) => {
           inspectorFrame.current = frame;
         },
@@ -1369,12 +1403,11 @@ export default function App() {
         {import.meta.env.DEV && <ChatPanel />}
         <main className="tldraw__editor" aria-label="Prototype design canvas">
           <Tldraw
-            assetUrls={canvasChromeAssetUrls}
             components={canvasChromeComponents}
             store={store}
             shapeUtils={shapeUtils}
             tools={canvasCommentTools}
-            overrides={canvasCommentOverrides}
+            overrides={canvasUiOverrides}
             licenseKey={TLDRAW_LICENSE_KEY}
             onMount={handleMount}
           >
@@ -1386,7 +1419,6 @@ export default function App() {
               inspectingPath={inspecting?.path ?? null}
               frame={inspectorFrame}
             />
-            <WelcomeGround />
             <EmptyLibraryNotice />
           </Tldraw>
         </main>

canvas/src/BoardsSheet.tsx

@@ -1,4 +1,4 @@
-import { FigmaMark } from "./FigmaMark";
+import { LogoFigma } from "./geistIcons";
 import { hasBrandMaterial, pageNameFor } from "./canvasLibrary";
 import { sheetRows } from "./sheetLayout";
 import { brandPageUrl, canvasPageUrl } from "./canvasUrl";
@@ -41,7 +41,7 @@ export function BoardsSheet({ slug }: { slug: string }) {
           generated one. */}
       <section className="howto">
         <h2>
-          <FigmaMark height={17} />
+          <LogoFigma size={17} />
           Into Figma, in three steps
         </h2>
         <div className="howto__body">
@@ -99,7 +99,7 @@ export function BoardsSheet({ slug }: { slug: string }) {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <FigmaMark height={19} />
+                <LogoFigma size={19} />
                 <span>
                   Get the Figma plugin
                   <small>Optional · html.to.design by ‹div›RIOTS</small>

canvas/src/CanvasFileShapeUtil.tsx

@@ -65,6 +65,11 @@ function CanvasFile({ shape }: { shape: CanvasFileShape }) {
     border: 0,
     display: "block",
     pointerEvents: isEditing ? "auto" : "none",
+    // The board's own scheme, so the frame composites transparent rather than painting the
+    // white backdrop a frame gets under a document whose scheme differs from its element's.
+    // On the element, so nothing is written into the board. Measured in
+    // docs/2026-09-17-canvas-geist.md.
+    colorScheme: "light",
   };
 
   return (
@@ -118,7 +123,13 @@ function CanvasFile({ shape }: { shape: CanvasFileShape }) {
       ) : hasCanvasFile(shape.props.path) ? null : (
         // A board that exists but is not in yet renders nothing, so the frame fills in when its
         // chunk arrives rather than flashing an error first.
-        <div style={{ padding: 16, font: "13px sans-serif", color: "#a33" }}>
+        <div
+          style={{
+            padding: 16,
+            font: "13px var(--sp-sans)",
+            color: "var(--ds-red-900)",
+          }}
+        >
           Missing source: {shape.props.path}
         </div>
       )}

canvas/src/CanvasLinkShapeUtil.tsx

@@ -71,7 +71,7 @@ const MUTED = "#7C7C86";
 // One step up from the welcome page's black ground, so a card reads as a raised panel.
 const GROUND = "#111115";
 const EDGE = "1px solid #26262C";
-const FONT = "ui-sans-serif, -apple-system, system-ui, sans-serif";
+const FONT = "var(--sp-sans)";
 
 /**
  * Places a board behind the shell's screen so the `[x, y, w, h]` box fills it and sits centred:

canvas/src/CanvasStatusBannerShapeUtil.tsx

@@ -31,7 +31,7 @@ const STATUS_STYLE: Record<
   Exclude<CanvasBoardStatus, "live">,
   { label: string; fill: string; ink: string }
 > = {
-  exploring: { label: "EXPLORING", fill: "#FFB224", ink: "#171717" },
+  exploring: { label: "EXPLORING", fill: "var(--ds-amber-700)", ink: "#171717" },
   outdated: { label: "OUTDATED", fill: "#4D4D4D", ink: "#FFFFFF" },
 };
 
@@ -80,7 +80,7 @@ export class CanvasStatusBannerShapeUtil extends BaseBoxShapeUtil<CanvasStatusBa
           height: shape.props.h,
           background: style.fill,
           color: style.ink,
-          font: `800 42px/${shape.props.h}px -apple-system, BlinkMacSystemFont, sans-serif`,
+          font: `800 42px/${shape.props.h}px var(--sp-sans)`,
           letterSpacing: ".14em",
           textAlign: "center",
         }}