Overhaul glyph grid loading and scroll pipeline

AGENTS.md

@@ -63,14 +63,17 @@ This project uses **pnpm** (v9.0.0) as its package manager.
 
 ### Code Quality
 
-- `pnpm format` - Format code with Prettier
-- `pnpm format:check` - Check formatting without modifying files
+- `pnpm format` - Format `apps/` and `packages/` with Oxfmt
+- `pnpm format:check` - Check Oxfmt formatting without modifying files
+- `pnpm format:files <paths...>` - Format only the specified files with Oxfmt
 - `pnpm lint` - Lint code with Oxlint (auto-fix)
 - `pnpm lint:check` - Lint code without auto-fix
 - `pnpm typecheck` - Type check with tsgo
 - `cargo fmt` - Format Rust code (run after any Rust changes)
 - `cargo clippy` - Lint Rust code (run after any Rust changes)
 
+Use repository scripts when a matching command exists; they encode the intended tool, scope, and version. Run all TypeScript/JavaScript formatting through `pnpm format`, `pnpm format:check`, or `pnpm format:files`; never invoke Oxfmt directly and never use Prettier in this repository.
+
 ### Testing
 
 - `pnpm test` - Run all tests once through Turbo

apps/desktop/src/main/app/App.ts

@@ -4,6 +4,8 @@ import {
   clipboard,
   ipcMain,
   MessageChannelMain,
+  screen,
+  type Rectangle,
   type WebContents,
 } from "electron";
 import started from "electron-squirrel-startup";
@@ -124,9 +126,17 @@ export class App {
     });
   }
 
-  #createWindow(): Window {
+  #createWindow(autoShow = true, bounds?: Rectangle): Window {
     const window = new Window({
       preloadPath: path.join(__dirname, "preload.js"),
+      autoShow,
+      ...(bounds
+        ? {
+            width: bounds.width,
+            height: bounds.height,
+            browserWindowOptions: { x: bounds.x, y: bounds.y },
+          }
+        : {}),
     });
     this.#windows.add(window);
 
@@ -216,6 +226,14 @@ export class App {
       event.sender.postMessage("workspace.port", null, [port2]);
       this.#log.info("workspace port sent to renderer");
     });
+    ipc.handle(ipcMain, "workspace.ready", (event) => {
+      this.#workspaceForSender(event.sender, "workspace.ready");
+      const window = this.#requireWindowForWebContents(event.sender);
+      const browserWindow = window.window;
+      if (browserWindow.isVisible() || browserWindow.isMinimized()) return;
+
+      window.focus();
+    });
   }
 
   #commandContext(): CommandContext {
@@ -284,9 +302,13 @@ export class App {
 
   #openWorkspaceWindow(opener: Window, session: WorkspaceSession): void {
     const closeOpener = this.#workspaces.getForBrowserWindow(opener.window) === null;
-    const workspaceWindow = this.#createWindow();
+
+    const bounds = screen.getDisplayMatching(opener.window.getBounds()).workArea;
+    const workspaceWindow = this.#createWindow(false, bounds);
+
     this.#workspaces.attachWindow(session.workspaceId, workspaceWindow);
     this.#loadWorkspace(workspaceWindow);
+
     if (closeOpener) opener.close();
   }
 

apps/desktop/src/main/windows/Window.ts

@@ -10,6 +10,7 @@ export interface WindowOptions {
   maximised?: boolean;
   preloadPath: string;
   browserWindowOptions?: BrowserWindowConstructorOptions;
+  autoShow: boolean;
 }
 
 const WINDOW_DEFAULT_OPTIONS: Omit<WindowOptions, "preloadPath"> = {
@@ -18,6 +19,7 @@ const WINDOW_DEFAULT_OPTIONS: Omit<WindowOptions, "preloadPath"> = {
   title: "Shift",
   minWidth: 1200,
   maximised: false,
+  autoShow: false,
 };
 
 /** Chrome zoom steps, matching the browser-conventional ladder. */
@@ -59,21 +61,23 @@ export class Window {
       height: windowOptions.height,
       title: windowOptions.title,
       minWidth: windowOptions.minWidth,
-      show: windowOptions.maximised,
+      show: false,
       webPreferences: {
         ...BROWSER_WINDOW_DEFAULT_OPTIONS.webPreferences,
         ...windowOptions.browserWindowOptions?.webPreferences,
         preload: windowOptions.preloadPath,
       },
     });
 
+    if (windowOptions.autoShow) {
+      this.#window.once("ready-to-show", () => {
+        this.#window.show();
+      });
+    }
+
     if (windowOptions.maximised) {
       this.#window.maximize();
     }
-
-    this.#window.once("ready-to-show", () => {
-      this.#window.show();
-    });
   }
 
   get window(): BrowserWindow {

apps/desktop/src/preload/preload.ts

@@ -16,6 +16,7 @@ const shiftHost: ShiftHost = {
   },
   workspace: {
     connect: invoke(ipcRenderer, "workspace.connect"),
+    ready: invoke(ipcRenderer, "workspace.ready"),
   },
   ui: {
     onZoomChanged: listen(ipcRenderer, "ui.zoomChanged"),

apps/desktop/src/renderer/src/app/Screens.tsx

@@ -4,7 +4,6 @@ import { Navigate, Outlet, Route, Routes } from "react-router-dom";
 import { Landing } from "@/views/Landing";
 import { Home } from "@/views/Home";
 import { Editor } from "@/views/Editor";
-import { getShiftHost } from "@/host/shiftHost";
 import { useSignalState } from "@/lib/signals/useSignal";
 import { useEditor, useFont, useWorkspace } from "@/workspace/WorkspaceContext";
 import { WorkspaceProvider } from "@/workspace/WorkspaceProvider";
@@ -66,21 +65,10 @@ const WorkspaceScreens = () => {
     };
   }, [workspace]);
 
-  // Side effect of a document loading: give the editor room.
   useEffect(() => {
     if (!documentLoaded) return;
 
-    async function maximiseWorkspaceWindow(): Promise<void> {
-      try {
-        await getShiftHost().commands.run("window.maximise");
-      } catch (error) {
-        console.error("maximise on document load failed", error);
-      }
-    }
-
     editor.setDesignLocation(font.defaultLocation());
-
-    void maximiseWorkspaceWindow();
   }, [documentLoaded, editor, font]);
 
   if (connectionError) {

apps/desktop/src/renderer/src/components/editor/Canvas.tsx

@@ -1,51 +1,21 @@
 import { FC, useEffect, useRef } from "react";
-import { useParams } from "react-router-dom";
 
 import { CanvasContextProvider } from "@/context/CanvasContextProvider";
 import { useDebugSafe } from "@/context/DebugContext";
-import { useSignalState } from "@/lib/signals";
 import { useEditor } from "@/workspace/WorkspaceContext";
 import { zoomMultiplierFromWheel } from "@/lib/transform";
 import { InteractiveScene } from "./InteractiveScene";
 import { StaticScene } from "./StaticScene";
 import { DebugPanel } from "../debug/DebugPanel";
 import { TextInput } from "../text/HiddenTextInput";
 import { Vec2 } from "@shift/geo";
-import { asGlyphId, mintNodeId } from "@shift/types";
 
 export const Canvas: FC = () => {
   const editor = useEditor();
   const debug = useDebugSafe();
 
-  const { glyphId: glyphIdParam } = useParams();
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const activeSourceId = useSignalState(editor.activeSourceIdCell);
-  const glyphId = glyphIdParam ? asGlyphId(glyphIdParam) : null;
-
-  useEffect(() => {
-    if (!glyphId) {
-      editor.scene.clear();
-      return;
-    }
-
-    const id = mintNodeId();
-    editor.scene.setNodes([
-      {
-        id,
-        type: "node",
-        kind: "glyph",
-        parentId: null,
-        index: "a0",
-        glyphId,
-        sourceId: activeSourceId ?? editor.font.defaultSource.id,
-        position: { x: 0, y: 0 },
-      },
-    ]);
-
-    editor.editing.enter(id);
-  }, [activeSourceId, editor, glyphId]);
-
   useEffect(() => {
     const element = containerRef.current;
     if (!element) return undefined;

apps/desktop/src/renderer/src/components/editor/sidebar-right/ScaleSection.tsx

@@ -31,7 +31,7 @@ export const ScaleSection = () => {
     const [node] = glyphNodes;
     if (!node) return null;
 
-    return editor.font.layer(node.glyphId, sourceId);
+    return editor.glyphForId(node.glyphId)?.layerForSource(sourceId) ?? null;
   }, [editor, scene, sourceId]);
   const selectedPointIds = useMemo(() => selection.ids.filter(isPointId), [selection]);
 

apps/desktop/src/renderer/src/components/editor/sidebar-right/TransformSection.tsx

@@ -112,7 +112,7 @@ export const TransformSection = () => {
     const [node] = glyphNodes;
     if (!node) return null;
 
-    return editor.font.layer(node.glyphId, sourceId);
+    return editor.glyphForId(node.glyphId)?.layerForSource(sourceId) ?? null;
   }, [editor, scene, sourceId]);
 
   useEffect(() => {