feat: Implement draggable toolbar and integrate theming into renderer

TODO.txt

···
     - Flowchart: process, decision, terminator, data, document
     - Diagrams: server, db, queue, user, browser, mobile
     - UI: button, input, card, modal
+    - Etc: Post-It style/sticky notes, index cards, speech bubble
 
 (DoD): Stencils load as data and can spawn shapes deterministically.
 
···
       without exporting.
 - [ ] Markdown layout caching
     - cache layout per (md, w, style) to avoid re-parsing on every render
+- [ ] Bug Fix: Cursor Mapping
+    - Investigate cursor position getting stuck or offsetting after window resize.

apps/web/src/app.css

···
-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
 
 :root {
 	--bg-primary: #eceff4;
···
 	--bg-primary: #161821;
 	--bg-secondary: #1e2132;
 	--bg-tertiary: #272c42;
-
 	--fg-primary: #c6c8d1;
 	--fg-secondary: #89b8c2;
 	--fg-tertiary: #84a0c6;
 	--fg-muted: #6b7089;
-
 	--accent-purple: #a093c7;
 	--accent-cyan: #89b8c2;
 	--accent-blue: #84a0c6;
 	--accent-search: #e4aa80;
-
 	--color-error: #e27878;
 	--color-warning: #e2a478;
 	--color-success: #b4be82;
 	--color-info: #e4aa80;
 	--color-purple: #a093c7;
-
 	--line-numbers: #444b71;
 	--selection: #272c42;
-
 	--surface: var(--bg-primary);
 	--surface-elevated: var(--bg-secondary);
 	--surface-overlay: var(--bg-tertiary);
···
 	--border: var(--line-numbers);
 	--accent: var(--accent-blue);
 	--accent-hover: var(--accent-cyan);
+    color-scheme: dark;
 }
 
 * {
···
 }
 
 body {
-	font-family: 'Work Sans', sans-serif;
+	font-family: 'Inter', sans-serif;
+	background-color: var(--surface);
+	color: var(--text);
+	line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+button {
+	font-family: 'Inter', sans-serif;
+}
+
+::selection {
+	background-color: var(--accent);
+	color: var(--surface);
+}
+
+/* Markdown Styling */
+.markdown-body {
+    color: var(--text);
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.markdown-body h1 { font-size: 2em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
+.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
+.markdown-body h3 { font-size: 1.25em; }
+.markdown-body h4 { font-size: 1em; }
+
+.markdown-body p {
+    margin-bottom: 1em;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+    padding-left: 2em;
+    margin-bottom: 1em;
+}
+
+.markdown-body blockquote {
+    padding: 0 1em;
+    color: var(--text-muted);
+    border-left: 0.25em solid var(--border);
+    margin-bottom: 1em;
+}
+
+.markdown-body code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: var(--bg-secondary);
+    border-radius: 6px;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}
+
+.markdown-body pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: var(--bg-secondary);
+    border-radius: 6px;
+    margin-bottom: 1em;
+}
+
+.markdown-body pre code {
+    background-color: transparent;
+    padding: 0;
+}
+
+.markdown-body a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+.markdown-body a:hover {
+    text-decoration: underline;
+}
+
+.markdown-body hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: var(--border);
+    border: 0;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: 'Inter', sans-serif;
 	background-color: var(--surface);
 	color: var(--text);
 	line-height: 1.25;
 }
 
 button {
-	font-family: 'Work Sans', sans-serif;
+	font-family: 'Inter', sans-serif;
 }
 
 ::selection {

apps/web/src/lib/assets/grip-vertical.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>

apps/web/src/lib/canvas/canvas-store.svelte.ts

···
 import { createPlatformRepo, detectPlatform } from "$lib/platform";
 import { createBrushStore, createPersistenceManager, createSnapStore, createStatusStore } from "$lib/status";
 import type { BrushStore, SnapStore, StatusStore } from "$lib/status";
+import { themeStore } from "$lib/theme.svelte";
 import {
   ArrowTool,
   Camera,
···
         get: () => ({ isPointerDown: pointerState.isPointerDown, snappedWorld: pointerState.snappedWorld }),
       },
       handleProvider: { get: () => handleState.getSnapshot() },
+      themeProvider: { get: () => themeStore.current },
     });
 
     const unsubStore = store.subscribe(() => renderer?.markDirty());
     const unsubSnap = snapStore.subscribe(() => renderer?.markDirty());
+
+    $effect(() => {
+      themeStore.current;
+      renderer?.markDirty();
+    });
 
     inputAdapter = createInputAdapter({
       canvas,

apps/web/src/lib/components/Icon.svelte

···
 <script lang="ts">
 	import CloseIcon from '$lib/assets/close.svg?raw';
 	import FolderIcon from '$lib/assets/folder.svg?raw';
+    import GripVerticalIcon from '$lib/assets/grip-vertical.svg?raw';
 	import InfoCircleIcon from '$lib/assets/info-circle.svg?raw';
 	import MoonIcon from '$lib/assets/moon.svg?raw';
 	import PencilIcon from '$lib/assets/pencil.svg?raw';
 	import SunIcon from '$lib/assets/sun.svg?raw';
 	import TrashIcon from '$lib/assets/trash.svg?raw';
 
-	export type IconName = 'close' | 'folder' | 'info-circle' | 'moon' | 'pencil' | 'sun' | 'trash';
+	export type IconName = 'close' | 'folder' | 'grip-vertical' | 'info-circle' | 'moon' | 'pencil' | 'sun' | 'trash';
 
 	type Props = { name: IconName; size?: number; color?: string };
 
···
 	const icons: Record<IconName, string> = {
 		close: CloseIcon,
 		folder: FolderIcon,
+        'grip-vertical': GripVerticalIcon,
 		'info-circle': InfoCircleIcon,
 		moon: MoonIcon,
 		pencil: PencilIcon,

apps/web/src/lib/components/Toolbar.svelte

···
 		shapeBounds,
 		SnapshotCommand
 	} from 'inkfinite-core';
+    import { fade } from 'svelte/transition';
 	import icon from '../assets/favicon.svg';
 	import ArrowPopover from './ArrowPopover.svelte';
 	import BrushPopover from './BrushPopover.svelte';
···
 		}
 	});
 
+    let showColorControls = $derived(
+        toolSupportsStyles(currentTool) || 
+        toolSupportsFill(currentTool) || 
+        getSelectedShapes(editorState).some(s => shapeSupportsFill(s) || shapeSupportsStroke(s))
+    );
+
+	let position = $state({ x: 20, y: 20 });
+	let isDragging = $state(false);
+	let dragOffset = $state({ x: 0, y: 0 });
+	let toolbarEl = $state<HTMLElement | null>(null);
+
 	$effect(() => {
 		if (!zoomMenuOpen || typeof document === 'undefined') {
 			return;
···
 		return () => document.removeEventListener('pointerdown', handlePointerDown);
 	});
 
+	function handleDragStart(event: PointerEvent) {
+		isDragging = true;
+		dragOffset = {
+			x: event.clientX - position.x,
+			y: event.clientY - position.y
+		};
+
+		if(typeof document !== 'undefined') document.body.style.userSelect = 'none';
+        
+
+        (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+	}
+
+	function handleDragMove(event: PointerEvent) {
+		if (!isDragging) return;
+		position = {
+			x: event.clientX - dragOffset.x,
+			y: event.clientY - dragOffset.y
+		};
+	}
+
+	function handleDragEnd(event: PointerEvent) {
+		isDragging = false;
+		if(typeof document !== 'undefined') document.body.style.userSelect = '';
+        (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);
+	}
+
 	function openInfo() {
 		infoOpen = true;
 	}
···
 		);
 	}
 
+    function toolSupportsStyles(tool: ToolId): boolean {
+        return (
+            tool === 'rect' ||
+            tool === 'ellipse' ||
+            tool === 'line' ||
+            tool === 'arrow'
+        );
+    }
+
+    function toolSupportsFill(tool: ToolId): boolean {
+        return tool === 'rect' || tool === 'ellipse' || tool === 'text';
+    }
+
 	function getSharedColor<T extends ShapeRecord>(
 		shapes: T[],
 		extract: (shape: T) => string | null | undefined
···
 	}
 </script>
 
-<div class="toolbar" role="toolbar" aria-label="Drawing tools">
+<div 
+    class="toolbar" 
+    role="toolbar" 
+    aria-label="Drawing tools"
+    bind:this={toolbarEl}
+    style="position: fixed; left: {position.x}px; top: {position.y}px;"
+    data-dragging={isDragging}
+>
+    <!-- Drag Handle -->
+    <div 
+        class="toolbar__drag-handle"
+        onpointerdown={handleDragStart}
+        onpointermove={handleDragMove}
+        onpointerup={handleDragEnd}
+        aria-label="Drag toolbar"
+        role="button"
+        tabindex="0"
+    >
+        <Icon name="grip-vertical" size={16} />
+    </div>
+
 	<div class="toolbar__brand">
 		<div class="toolbar__logo">
 			<img src={icon} alt="Inkfinite Icon" />
···
 		</button>
 	{/each}
 
-	<div class="toolbar__colors" aria-label="Color controls">
+    {#if showColorControls}
+	<div class="toolbar__colors" aria-label="Color controls" transition:fade={{ duration: 150 }}>
+        {#if toolSupportsFill(currentTool) || getSelectedShapes(editorState).some(shapeSupportsFill)}
 		<label class="toolbar__color-control">
 			<span>Fill</span>
 			<input
 				type="color"
 				value={fillColorValue}
 				onchange={handleFillChange}
-				disabled={fillDisabled}
+				disabled={fillDisabled && !toolSupportsFill(currentTool)}
 				aria-label="Fill color" />
 		</label>
+        {/if}
+        {#if toolSupportsStyles(currentTool) || getSelectedShapes(editorState).some(shapeSupportsStroke)}
 		<label class="toolbar__color-control">
 			<span>Stroke</span>
 			<input
 				type="color"
 				value={strokeColorValue}
 				onchange={handleStrokeChange}
-				disabled={strokeDisabled}
+				disabled={strokeDisabled && !toolSupportsStyles(currentTool)}
 				aria-label="Stroke color" />
 		</label>
+        {/if}
 	</div>
+    {/if}
 
 	<div class="toolbar__divider"></div>
 
···
 	.toolbar {
 		display: flex;
 		gap: 0.75rem;
-		padding: 0.75rem 1rem;
+		padding: 0.75rem 1rem 0.75rem 0.25rem; /* Adjusted padding for handle */
 		background: var(--surface-elevated);
 		border-bottom: 1px solid var(--border);
+        border: 1px solid var(--border);
+        border-radius: 0.75rem;
 		align-items: center;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        z-index: 10;
-        position: relative;
+        z-index: 100;
+        transition: transform 0.1s;
+        touch-action: none;
 	}
+    
+    .toolbar[data-dragging="true"] {
+        transform: scale(1.02);
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+
+    .toolbar__drag-handle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 100%;
+        cursor: grab;
+        color: var(--text-muted);
+        opacity: 0.5;
+        transition: opacity 0.2s;
+        touch-action: none;
+    }
+    
+    .toolbar__drag-handle:hover {
+        opacity: 1;
+        color: var(--text);
+    }
+    
+    .toolbar[data-dragging="true"] .toolbar__drag-handle {
+        cursor: grabbing;
+        opacity: 1;
+        color: var(--accent);
+    }
 
     .toolbar__brand {
         display: flex;
···
 		align-items: center;
 		gap: 0.375rem;
 		padding: 0.625rem 0.875rem;
-		border: 1px solid transparent;
+		border: 1px solid var(--border);
 		border-radius: 0.5rem;
 		background: transparent;
-		color: var(--text-muted);
+		color: var(--text);
 		cursor: pointer;
 		transition: all 0.2s ease;
 		min-width: 68px;
+        opacity: 0.8;
 	}
 
 	.toolbar__tool-button:hover {
 		background: var(--bg-tertiary);
 		color: var(--text);
+        opacity: 1;
+        border-color: var(--text-muted);
 	}
 
 	.toolbar__tool-button:focus {
···
 	.tool-button.active {
 		background: var(--accent);
 		color: var(--surface);
+        border-color: var(--accent);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        opacity: 1;
 	}
 
 	.toolbar__tool-icon {
···
 	}
 
 	.toolbar__divider {
-		width: 1px;
+		width: 2px;
 		background-color: var(--border);
-		margin: 0 1rem;
-		height: 48px;
+		margin: 0 1.25rem;
+		height: 32px;
+        opacity: 0.5;
 	}
 
     .toolbar__info {

packages/core/src/tools/markdown.ts

···
 import { getCurrentPage } from "../reactivity";
 import type { Tool } from "./base";
 
-/**
- * Markdown tool creates markdown block shapes on click
- *
- * Features:
- * - Click to create a markdown block at the pointer position
- * - Block is created with default content and dimensions
- * - Shape is immediately selected after creation
- */
 export class MarkdownTool implements Tool {
   readonly id: ToolId = "markdown";
 
···
       w: 300,
       h: 200,
       fontSize: 16,
-      fontFamily: "sans-serif",
+      fontFamily: "Inter",
       color: "#1f2933",
     }, shapeId);
 

packages/renderer/src/index.ts

···
   cursorProvider?: { get(): CursorState };
   pointerStateProvider?: { get(): PointerVisualState };
   handleProvider?: { get(): HandleRenderState };
+  themeProvider?: { get(): "light" | "dark" };
 };
 
 /**
···
     const cursorState = options?.cursorProvider?.get();
     const pointerState = options?.pointerStateProvider?.get();
     const handleState = options?.handleProvider?.get();
-    drawScene(context, state, viewport, snapSettings, cursorState, pointerState, handleState);
+    const theme = options?.themeProvider?.get() ?? "light";
+    drawScene(context, state, viewport, snapSettings, cursorState, pointerState, handleState, theme);
   }
 
   /**
···
   cursorState?: CursorState,
   pointerState?: PointerVisualState,
   handleState?: HandleRenderState,
+  theme: "light" | "dark" = "light",
 ) {
   context.clearRect(0, 0, viewport.width, viewport.height);
 
···
 
   const shapes = getShapesOnCurrentPage(state);
   for (const shape of shapes) {
-    drawShape(context, state, shape);
+    drawShape(context, state, shape, theme);
   }
 
   drawSelection(context, state, shapes, handleState);
···
 /**
  * Draw a single shape
  */
-function drawShape(context: CanvasRenderingContext2D, state: EditorState, shape: ShapeRecord) {
+function drawShape(
+  context: CanvasRenderingContext2D,
+  state: EditorState,
+  shape: ShapeRecord,
+  theme: "light" | "dark" = "light",
+) {
   context.save();
 
   context.translate(shape.x, shape.y);
···
       break;
     }
     case "markdown": {
-      drawMarkdown(context, shape);
+      drawMarkdown(context, shape, theme);
       break;
     }
     case "stroke": {
···
  * - Lists (ordered and unordered)
  * - Code blocks (```)
  */
-function drawMarkdown(context: CanvasRenderingContext2D, shape: MarkdownShape) {
+function drawMarkdown(context: CanvasRenderingContext2D, shape: MarkdownShape, theme: "light" | "dark" = "light") {
   const { md, w, h, fontSize, fontFamily, color, bg, border } = shape.props;
 
   const width = w;
···
     let prefix = "";
 
     if (line.startsWith("```")) {
-      context.fillStyle = "#f4f4f4";
+      context.fillStyle = theme === "dark" ? "#2e3440" : "#f4f4f4";
       const codeBlockLines = [];
       lineIndex++;
       while (lineIndex < lines.length && !lines[lineIndex].startsWith("```")) {
···
       if (yOffset + codeBlockHeight <= height - padding) {
         context.fillRect(padding, yOffset, width - padding * 2, codeBlockHeight);
 
-        context.fillStyle = "#333";
+        context.fillStyle = theme === "dark" ? "#e5e9f0" : "#333";
         context.font = `normal normal ${fontSize}px monospace`;
 
         for (const [index, codeLine] of codeBlockLines.entries()) {
···
         const { text: segmentText, bold, italic, code } = segment;
 
         if (code) {
-          context.fillStyle = "#f4f4f4";
+          context.fillStyle = theme === "dark" ? "#2e3440" : "#f4f4f4";
           const metrics = context.measureText(segmentText);
           context.fillRect(xOffset, yOffset, metrics.width + 4, currentFontSize * 1.2);
-          context.fillStyle = "#333";
+
+          context.fillStyle = theme === "dark" ? "#e5e9f0" : "#333";
           context.font = `normal normal ${currentFontSize * 0.9}px monospace`;
           context.fillText(segmentText, xOffset + 2, yOffset);
           xOffset += metrics.width + 4;