Remove global glyph state

apps/desktop/src/renderer/src/components/debug/DebugPanel.tsx

@@ -1,37 +1,15 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useSignalText } from "@/hooks/useSignalText";
 import { useEditor } from "@/workspace/WorkspaceContext";
 import { Separator } from "@shift/ui";
 import { effect } from "@/lib/signals";
-import { useSignalState, useSignalTrigger } from "@/lib/signals/useSignal";
 
 function formatCoords(x: number, y: number): string {
   return `(${Math.round(x)}, ${Math.round(y)})`;
 }
 
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
 export function DebugPanel() {
   const editor = useEditor();
-  const instance = useSignalState(editor.previewGlyphInstanceCell);
-  const layer = useSignalState(editor.editingGlyphLayerCell);
-  useSignalTrigger(instance?.xAdvanceCell);
-
-  const glyphStats = useMemo(() => {
-    if (!instance) return { pointCount: "0", snapshotSize: "—" };
-
-    const snapshot = layer?.state ?? null;
-    const bytes = snapshot ? new Blob([JSON.stringify(snapshot)]).size : null;
-
-    return {
-      pointCount: `${instance.geometry.allPoints.length}`,
-      snapshotSize: bytes === null ? "—" : formatBytes(bytes),
-    };
-  }, [instance, layer]);
 
   useEffect(() => {
     editor.startFpsMonitor();
@@ -61,7 +39,7 @@ export function DebugPanel() {
       if (upmRef.current) upmRef.current.textContent = formatCoords(coords.scene.x, coords.scene.y);
       if (screenRef.current) screenRef.current.textContent = formatCoords(screen.x, screen.y);
       if (worldRef.current)
-        worldRef.current.textContent = formatCoords(coords.glyphLocal.x, coords.glyphLocal.y);
+        worldRef.current.textContent = formatCoords(coords.scene.x, coords.scene.y);
     });
     return () => fx.dispose();
   }, [editor]);
@@ -87,19 +65,6 @@ export function DebugPanel() {
           <span ref={fpsRef} className="text-ui text-muted font-mono tabular-nums" />
         </div>
         <Separator className="bg-gray-300" />
-        <div className="flex flex-col">
-          <h2 className="text-ui font-medium">Canvas</h2>
-          <div className="flex items-center justify-between gap-4 text-ui text-muted">
-            <span>Total Points</span>
-            <span className="font-mono tabular-nums">{glyphStats.pointCount}</span>
-          </div>
-          <div className="flex items-center justify-between gap-4 text-ui text-muted">
-            <span>Snapshot Size</span>
-            <span className="font-mono tabular-nums">{glyphStats.snapshotSize}</span>
-          </div>
-        </div>
-        <Separator className="bg-gray-300" />
-        <Separator className="bg-gray-300" />
         <div className="flex flex-col">
           <h2 className="text-sm font-medium">Coordinates</h2>
           <h2 className="text-ui font-medium text-muted">Mouse</h2>

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

@@ -5,13 +5,17 @@ import UnionIcon from "@/assets/sidebar-right/union.svg";
 import IntersectIcon from "@/assets/sidebar-right/intersect.svg";
 import SubtractIcon from "@/assets/sidebar-right/subtract.svg";
 import { useEditor } from "@/workspace/WorkspaceContext";
+import { useSignalState } from "@/lib/signals";
+import { isContourId } from "@shift/types";
 
 export const BooleanOps = () => {
   const editor = useEditor();
-  const selectedContourIds = editor.selection.contourIds;
+  const selection = useSignalState(editor.selection.stateCell);
+  const selectedContourIds = selection.ids.filter(isContourId);
 
-  if (selectedContourIds.size < 2) return null;
+  if (selectedContourIds.length < 2) return null;
   const [contourIdA, contourIdB] = selectedContourIds;
+  if (!contourIdA || !contourIdB) return null;
 
   return (
     <SidebarSection title="Boolean">

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

@@ -11,7 +11,7 @@ import { StaticScene } from "./StaticScene";
 import { DebugPanel } from "../debug/DebugPanel";
 import { TextInput } from "../text/HiddenTextInput";
 import { Vec2 } from "@shift/geo";
-import { asGlyphId } from "@shift/types";
+import { asGlyphId, mintNodeId } from "@shift/types";
 
 export const Canvas: FC = () => {
   const editor = useEditor();
@@ -20,25 +20,28 @@ export const Canvas: FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const cursorStyle = useSignalState(editor.cursorCell);
+  const activeSourceId = useSignalState(editor.activeSourceIdCell);
+  const glyphId = glyphIdParam ? asGlyphId(glyphIdParam) : null;
 
   useEffect(() => {
-    if (!glyphIdParam) {
+    if (!glyphId) {
       editor.scene.clear();
-      return undefined;
+      return;
     }
 
-    const glyphId = asGlyphId(glyphIdParam);
-    if (!editor.font.glyph(glyphId)) {
-      editor.scene.clear();
-      return undefined;
-    }
-
-    editor.scene.clear();
-    const itemId = editor.scene.addGlyph({ glyphId, origin: { x: 0, y: 0 } });
-    editor.scene.setGeometryItems([itemId]);
-
-    return () => editor.scene.clear();
-  }, [editor, glyphIdParam]);
+    editor.scene.setNodes([
+      {
+        id: mintNodeId(),
+        type: "node",
+        kind: "glyph",
+        parentId: null,
+        index: "a0",
+        glyphId,
+        sourceId: activeSourceId ?? editor.font.defaultSource.id,
+        position: { x: 0, y: 0 },
+      },
+    ]);
+  }, [activeSourceId, editor, glyphId]);
 
   useEffect(() => {
     const element = containerRef.current;

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

@@ -61,7 +61,7 @@ export const InteractiveScene = () => {
 
   const handleMouseUp = useCallback(
     (e: React.MouseEvent<HTMLCanvasElement>) => {
-      toolManager.handlePointerUp(getScreenPoint(e));
+      toolManager.handlePointerUp(getScreenPoint(e), getModifiers(e));
       editor.stopEdgePan();
     },
     [toolManager, editor],

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

@@ -1,31 +1,23 @@
-import { useState } from "react";
 import { Separator } from "@shift/ui";
+import { isAnchorId, isPointId } from "@shift/types";
 import { TransformSection } from "./sidebar-right/TransformSection";
 import { ScaleSection } from "./sidebar-right/ScaleSection";
 import { TransformOriginProvider } from "@/context/TransformOriginContext";
 import { useEditor } from "@/workspace/WorkspaceContext";
 import { useSignalState } from "@/lib/signals";
-import { useSignalEffect } from "@/hooks/useSignalEffect";
 import { GlyphSection } from "./sidebar-right/GlyphSection";
 import { AnchorSection } from "./sidebar-right/AnchorSection";
 import { BooleanOps } from "./BooleanOps";
 
 export const RightSidebar = () => {
   const editor = useEditor();
   const zoom = useSignalState(editor.zoomCell);
+  const selection = useSignalState(editor.selection.stateCell);
   const zoomPercent = Math.round(zoom * 100);
   const { familyName } = editor.font.metadata;
 
-  const [hasPointSelection, setHasPointSelection] = useState(false);
-  const [hasAnchorSelection, setHasAnchorSelection] = useState(false);
-
-  useSignalEffect(() => {
-    const { pointIds, anchorIds } = editor.selection.stateCell.value;
-    const nextPoints = pointIds.size > 0;
-    const nextAnchors = anchorIds.size > 0;
-    setHasPointSelection((prev) => (prev === nextPoints ? prev : nextPoints));
-    setHasAnchorSelection((prev) => (prev === nextAnchors ? prev : nextAnchors));
-  });
+  const hasPointSelection = selection.ids.some(isPointId);
+  const hasAnchorSelection = selection.ids.some(isAnchorId);
 
   return (
     <aside className="h-full w-full min-w-0 bg-panel border-l border-line-subtle flex flex-col overflow-hidden">

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

@@ -10,7 +10,7 @@ interface ToolbarIconProps {
   Icon: SVG;
   name: ToolName;
   tooltip: string;
-  activeTool: ToolName;
+  activeTool: ToolName | null;
   onClick: () => void;
 }
 export const ToolbarIcon: FC<ToolbarIconProps> = ({ Icon, name, tooltip, activeTool, onClick }) => {