@scrawl-board/board 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/index.js

@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/core-internal/assets.ts
+//#region src/core/shapes/assets.ts
 var ASSET_REF_PATTERN = /^asset:[a-z0-9](?:[a-z0-9.-]{0,61}[a-z0-9])?:[A-Za-z0-9._~-]+$/;
 /** Hard ceiling on a reference's own wire length — independent of any resource limit below. */
 var ASSET_REF_MAX_BYTES = 512;
@@ -41,7 +41,7 @@ function clampAssetCacheBytes(value) {
 	return Math.min(ASSET_CACHE_BYTES_MAX, Math.max(ASSET_CACHE_BYTES_MIN, Math.floor(value)));
 }
 //#endregion
-//#region src/core-internal/identifiers.ts
+//#region src/core/document/identifiers.ts
 function documentId(value) {
 	if (!value) throw new TypeError("DocumentId cannot be empty");
 	return value;
@@ -51,7 +51,7 @@ function strokeId(value) {
 	return value;
 }
 //#endregion
-//#region src/document-schema.ts
+//#region src/core/document/document-schema.ts
 var CURRENT_DOCUMENT_SCHEMA_VERSION = 1;
 var DocumentRecoveryError = class extends Error {
 	constructor(code, message, originalBytes, path) {
@@ -259,7 +259,7 @@ function validation(message, path) {
 	return new DocumentRecoveryError("DOCUMENT_VALIDATION_FAILED", message, void 0, path);
 }
 //#endregion
-//#region src/core-internal/affine2d.ts
+//#region src/core/shapes/affine2d.ts
 var IDENTITY = [
 	1,
 	0,
@@ -343,7 +343,7 @@ function avgScale(m) {
 	return (Math.hypot(m[0], m[1]) + Math.hypot(m[2], m[3])) / 2;
 }
 //#endregion
-//#region src/core-internal/boardSearch.ts
+//#region src/core/document/boardSearch.ts
 function hay(s) {
 	return s.toLowerCase();
 }
@@ -408,7 +408,7 @@ function searchBoard(query, board) {
 	return hits;
 }
 //#endregion
-//#region src/core-internal/types.ts
+//#region src/core/shapes/types.ts
 /** Erasure level at which a point counts as fully erased. */
 var ERASE_THRESHOLD = .95;
 function cloneStroke(stroke) {
@@ -484,7 +484,7 @@ function cloneImage(img) {
 	return { ...img };
 }
 //#endregion
-//#region src/core-internal/clusterStore.ts
+//#region src/core/document/clusterStore.ts
 /** A stroke joins a cluster last written to within this window at full reach. */
 var RECENT_MS = 8e3;
 /** Older clusters are still joinable, at half the gap threshold. */
@@ -655,7 +655,7 @@ function clamp$3(v, lo, hi) {
 	return Math.min(hi, Math.max(lo, v));
 }
 //#endregion
-//#region src/core-internal/extensionTypes.ts
+//#region src/core/shapes/extensionTypes.ts
 function cloneCustomObject(object) {
 	return {
 		...object,
@@ -665,7 +665,7 @@ function cloneCustomObject(object) {
 	};
 }
 //#endregion
-//#region src/core-internal/kitchenTimer.ts
+//#region src/core/shapes/kitchenTimer.ts
 var TIMER_DEFAULT_SIZE = 12;
 var TIMER_DEFAULT_DURATION_MS = 300 * 1e3;
 var TIMER_PRESETS_MS = [
@@ -722,7 +722,7 @@ function formatTimer(ms) {
 	return `${Math.floor(total / 60)}:${(total % 60).toString().padStart(2, "0")}`;
 }
 //#endregion
-//#region src/core-internal/itemLock.ts
+//#region src/core/shapes/itemLock.ts
 /**
 * Apply or clear a lock in place. Unlock always drops the holder so a stale
 * name cannot linger on an unlocked item.
@@ -759,7 +759,7 @@ function serializeLock(item) {
 	};
 }
 //#endregion
-//#region src/core-internal/document.ts
+//#region src/core/document/document.ts
 /**
 * The one place a live Stroke becomes its wire representation — in
 * particular, points collapse from {x,y,pressure,erase?} objects into
@@ -1318,7 +1318,7 @@ function computeBBox(stroke) {
 	return world;
 }
 //#endregion
-//#region src/core-internal/commands.ts
+//#region src/core/commands/commands.ts
 /** One drawing action — a marker stroke, or a shape's strokes as one unit. */
 var AddStrokesCommand = class {
 	constructor(strokes) {
@@ -1660,7 +1660,7 @@ var LockItemsCommand = class {
 	}
 };
 //#endregion
-//#region src/core-internal/history.ts
+//#region src/core/history/history.ts
 var LIMIT = 200;
 var History = class {
 	constructor(doc) {
@@ -1721,7 +1721,7 @@ var History = class {
 	}
 };
 //#endregion
-//#region src/core-internal/ops.ts
+//#region src/core/events/ops.ts
 var ADDED = [
 	["added", "strokes"],
 	["notesAdded", "notes"],
@@ -1775,10 +1775,18 @@ function changeToOps(change, restoring = false) {
 	return ops;
 }
 //#endregion
-//#region src/core-internal/ribbonEdges.ts
+//#region src/core/shapes/ribbonEdges.ts
 var MIN_WIDTH_FACTOR = .35;
 var END_TAPER = .55;
-function ribbonEdges(points, baseWidth) {
+/**
+* @param handDrawn Default `true`: ink's organic feel — width follows
+* per-point pressure, and both ends taper. Pass `false` for a geometric
+* shape outline, which has no real pressure signal and isn't a pen stroke
+* with a lift-off: it renders at the exact `baseWidth`, uniformly, with no
+* taper at its start/end (which, for a closed shape, is the same point —
+* tapering it would visibly pinch just that one corner).
+*/
+function ribbonEdges(points, baseWidth, handDrawn = true) {
 	const pts = points.length === 1 ? [points[0], {
 		...points[0],
 		x: points[0].x + baseWidth * .05
@@ -1793,8 +1801,8 @@ function ribbonEdges(points, baseWidth) {
 		const len = Math.hypot(dx, dy) || 1;
 		dx /= len;
 		dy /= len;
-		let width = baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * pts[i].pressure);
-		if (i === 0 || i === n - 1) width *= END_TAPER;
+		let width = handDrawn ? baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * pts[i].pressure) : baseWidth;
+		if (handDrawn && (i === 0 || i === n - 1)) width *= END_TAPER;
 		const hw = width / 2;
 		out[i] = {
 			lx: pts[i].x - dy * hw,
@@ -1807,7 +1815,7 @@ function ribbonEdges(points, baseWidth) {
 	return out;
 }
 //#endregion
-//#region src/core-internal/spatialIndex.ts
+//#region src/core/document/spatialIndex.ts
 var CELL = 8;
 var SpatialIndex = class {
 	constructor(doc) {
@@ -1880,7 +1888,7 @@ function cellsOf(box) {
 	return keys;
 }
 //#endregion
-//#region src/core-internal/stamps.ts
+//#region src/core/shapes/stamps.ts
 var STAMP_SIZE = 6;
 var STAMPS = [
 	{
@@ -1929,7 +1937,7 @@ function isStampKind(value) {
 	return typeof value === "string" && STAMPS.some((s) => s.kind === value);
 }
 //#endregion
-//#region src/core-internal/presence.ts
+//#region src/collaboration/presence/presence.ts
 /** Keep beacons clear of typical chrome at the top and bottom of the Board. */
 var BEACON_INSET = {
 	top: 72,
@@ -1965,7 +1973,7 @@ function clamp$2(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
 //#endregion
-//#region src/core-internal/svg.ts
+//#region src/persistence/serialization/svg.ts
 /** Matches the key light used by the board shader and note shadows. */
 var LIGHT = {
 	x: -.25,
@@ -2107,7 +2115,7 @@ function strokeToPaths(stroke) {
 		y,
 		pressure,
 		...erase > 0 ? { erase } : {}
-	})), stroke.baseWidth);
+	})), stroke.baseWidth, stroke.tool !== "shape");
 	const transform = stroke.matrix ? ` transform="matrix(${fmt(stroke.matrix[0])} ${fmt(-stroke.matrix[1])} ${fmt(-stroke.matrix[2])} ${fmt(stroke.matrix[3])} ${fmt(stroke.matrix[4])} ${fmt(-stroke.matrix[5])})"` : "";
 	const baseOpacity = stroke.tool === "highlighter" ? .4 : 1;
 	const paths = [];
@@ -2336,7 +2344,7 @@ function fmt(n) {
 var SDK_PACKAGE_NAME = "@scrawl-board/board";
 var SDK_DEVELOPMENT_VERSION = "0.0.0-development";
 //#endregion
-//#region src/core-internal/sceneGeometry.ts
+//#region src/core/shapes/sceneGeometry.ts
 var EMPTY_BOUNDS = {
 	x: 0,
 	y: 0,
@@ -2400,7 +2408,7 @@ function textCorners(x, y, text, fontSize, align, m) {
 	return rectCorners(x + (align === "center" ? -width / 2 : align === "end" ? -width : 0), y, width, height, m);
 }
 //#endregion
-//#region src/core-internal/customObjects.ts
+//#region src/core/shapes/customObjects.ts
 var FALLBACK_LABEL_MAX_LENGTH = 80;
 function toReadonly(object) {
 	return object;
@@ -2529,7 +2537,7 @@ function extensionIdFromType(type) {
 	return slash === -1 ? type : type.slice(0, slash);
 }
 //#endregion
-//#region src/core-internal/extensionRegistry.ts
+//#region src/core/shapes/extensionRegistry.ts
 function buildExtensionRegistry(extensions) {
 	const list = extensions ?? [];
 	const diagnostics = [];
@@ -2626,7 +2634,7 @@ function isWellFormedNamespacedId(id) {
 	return isWellFormedId(id) && id.includes("/") && !id.startsWith("/") && !id.endsWith("/");
 }
 //#endregion
-//#region src/core-internal/assetValidation.ts
+//#region src/persistence/adapters/assetValidation.ts
 function sniffImageMediaType(bytes) {
 	if (bytes.length >= 8 && bytes[0] === 137 && bytes[1] === 80 && bytes[2] === 78 && bytes[3] === 71 && bytes[4] === 13 && bytes[5] === 10 && bytes[6] === 26 && bytes[7] === 10) return "image/png";
 	if (bytes.length >= 3 && bytes[0] === 255 && bytes[1] === 216 && bytes[2] === 255) return "image/jpeg";
@@ -2713,7 +2721,7 @@ function validateDecodedDimensions(width, height) {
 	};
 }
 //#endregion
-//#region src/assetController.ts
+//#region src/persistence/adapters/assetController.ts
 var FAILURE_COALESCE_MS = 4e3;
 var AssetController = class {
 	constructor(resolver, options) {
@@ -2892,7 +2900,7 @@ function toAssetResolutionError(cause, ref) {
 	return new AssetResolutionError("unknown", true, cause instanceof Error ? cause.message : String(cause), ref);
 }
 //#endregion
-//#region src/core-internal/assetExport.ts
+//#region src/persistence/serialization/assetRefCollector.ts
 /** Every unique Asset reference in the document, and which object(s) use it. */
 function collectDocumentAssetRefs(doc, registry) {
 	const refs = /* @__PURE__ */ new Map();
@@ -2919,7 +2927,7 @@ function collectSceneAssetRefs(node, objectId, add) {
 	if (node.kind === "group") for (const child of node.children) collectSceneAssetRefs(child, objectId, add);
 }
 //#endregion
-//#region src/assetExport.ts
+//#region src/persistence/serialization/assetExport.ts
 /** Strict mode's rejection — never contains credentials, a fetchable location, or a raw resolver message. */
 var SvgAssetExportError = class extends Error {
 	constructor(missingAssets) {
@@ -2975,7 +2983,7 @@ function toDataUri(bytes, mediaType) {
 	return `data:${mediaType};base64,${btoa(binary)}`;
 }
 //#endregion
-//#region src/assetIngestion.ts
+//#region src/persistence/adapters/assetIngestion.ts
 async function decodeDimensionsWithImageBitmap(bytes, mediaType) {
 	const blob = new Blob([bytes], { type: mediaType });
 	let bitmap;
@@ -35621,7 +35629,7 @@ var WebGLRenderer = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/data/auditEvents.ts
+//#region src/core/events/auditEvents.ts
 var BY_LABEL = {
 	draw: {
 		action: "create",
@@ -35741,7 +35749,7 @@ function lowerFirst(s) {
 	return s.charAt(0).toLowerCase() + s.slice(1);
 }
 //#endregion
-//#region ../../src/scrawl/assets/AssetTextureCache.ts
+//#region src/renderer/shapes/AssetTextureCache.ts
 var AssetTextureCache = class {
 	constructor(assetController) {
 		this.assetController = assetController;
@@ -35832,7 +35840,7 @@ function toDecodeError(cause, ref) {
 	return new AssetResolutionError("decode-failed", false, cause instanceof Error ? cause.message : String(cause), ref);
 }
 //#endregion
-//#region ../../src/scrawl/engine/raycast.ts
+//#region src/renderer/canvas/raycast.ts
 var origin$1 = new Vector3();
 var target = new Vector3();
 function pointerToBoard(clientX, clientY, canvas, camera) {
@@ -35863,7 +35871,7 @@ function pointerToPlane(clientX, clientY, canvas, camera, z) {
 	};
 }
 //#endregion
-//#region ../../src/scrawl/engine/fog.ts
+//#region src/renderer/canvas/fog.ts
 function createFogUniforms(color) {
 	return {
 		uFogColor: { value: new Color(color) },
@@ -35884,18 +35892,24 @@ var FOG_GLSL = `
   }
 `;
 //#endregion
-//#region ../../src/scrawl/engine/boardSurface.ts
+//#region src/renderer/canvas/boardSurface.ts
 var GRID_MODE_CODE = {
 	none: 0,
 	line: 1,
 	dot: 2
 };
+var TEXTURE_CODE = {
+	flat: 0,
+	textured: 1
+};
 /** Used when a caller doesn't supply one (e.g. ScrawlEngine constructed without a Host theme). */
 var DEFAULT_BOARD_SURFACE_THEME = {
 	color: "#f5f5f3",
 	gridMode: "none",
 	gridColor: "#deded8",
-	gridSpacing: 5
+	gridSpacing: 5,
+	gridLineWidth: 1,
+	surfaceTexture: "flat"
 };
 /** Grid alpha fades out below this on-screen spacing (px) — otherwise it aliases into a solid wash when zoomed out. */
 var GRID_FADE_MIN_PX = 3;
@@ -35916,8 +35930,10 @@ var FRAGMENT = `
   uniform float uGridMode;
   uniform vec3 uGridColor;
   uniform float uGridSpacing;
-  uniform float uGridLineWorld;
+  uniform float uWorldPerPixel;
+  uniform float uGridLineWidthPx;
   uniform float uGridFade;
+  uniform float uSurfaceTexture;
   varying vec3 vWorldPos;
 
   float hash(vec2 p) {
@@ -35937,37 +35953,45 @@ var FRAGMENT = `
   ${FOG_GLSL}
 
   // Distance from p's nearest axis-aligned grid line, in world units.
+  // A crisp, ~uGridLineWidthPx-wide line: full alpha to its half-width, a
+  // ~1px anti-aliased falloff beyond that — not a wide, soft-edged band.
   float gridLineAlpha(vec2 p) {
     vec2 cell = mod(p, uGridSpacing);
     vec2 distToLine = min(cell, uGridSpacing - cell);
-    vec2 lineAlpha2 = 1.0 - smoothstep(uGridLineWorld, uGridLineWorld * 2.0, distToLine);
+    float halfWidth = 0.5 * uGridLineWidthPx * uWorldPerPixel;
+    float aa = uWorldPerPixel;
+    vec2 lineAlpha2 = 1.0 - smoothstep(halfWidth - aa * 0.5, halfWidth + aa * 0.5, distToLine);
     return max(lineAlpha2.x, lineAlpha2.y);
   }
 
-  // Distance from p's nearest grid intersection, in world units.
+  // Distance from p's nearest grid intersection, in world units. Dot radius
+  // matches the configured line width in pixels, same anti-aliasing.
   float gridDotAlpha(vec2 p) {
     vec2 cell = mod(p, uGridSpacing) - uGridSpacing * 0.5;
     float dist = length(cell);
-    float radius = uGridLineWorld * 1.5;
-    return 1.0 - smoothstep(radius, radius * 2.0, dist);
+    float radius = uGridLineWidthPx * uWorldPerPixel;
+    float aa = uWorldPerPixel;
+    return 1.0 - smoothstep(radius - aa * 0.5, radius + aa * 0.5, dist);
   }
 
   void main() {
     vec3 col = uColor;
 
-    // Melamine micro-texture: two octaves of value noise, +-1.75% brightness.
-    float n = vnoise(vWorldPos.xy * 2.3) * 0.6 + vnoise(vWorldPos.xy * 9.7) * 0.4;
-    col *= 1.0 + (n - 0.5) * 0.035;
+    if (uSurfaceTexture > 0.5) {
+      // Melamine micro-texture: two octaves of value noise, +-1.75% brightness.
+      float n = vnoise(vWorldPos.xy * 2.3) * 0.6 + vnoise(vWorldPos.xy * 9.7) * 0.4;
+      col *= 1.0 + (n - 0.5) * 0.035;
 
-    // Satin sheen: Fresnel rim + a specular band from the key light. Both are
-    // ~zero in the straight-on working view and bloom as the camera tilts.
-    vec3 V = normalize(cameraPosition - vWorldPos);
-    vec3 N = vec3(0.0, 0.0, 1.0);
-    float fres = pow(1.0 - max(dot(N, V), 0.0), 3.0);
-    vec3 L = normalize(vec3(-0.25, 0.4, 0.88));
-    vec3 H = normalize(L + V);
-    float spec = pow(max(dot(N, H), 0.0), 90.0);
-    col += (fres * 0.18 + spec * 0.06) * vec3(1.0);
+      // Satin sheen: Fresnel rim + a specular band from the key light. Both
+      // are ~zero in the straight-on working view and bloom as the camera tilts.
+      vec3 V = normalize(cameraPosition - vWorldPos);
+      vec3 N = vec3(0.0, 0.0, 1.0);
+      float fres = pow(1.0 - max(dot(N, V), 0.0), 3.0);
+      vec3 L = normalize(vec3(-0.25, 0.4, 0.88));
+      vec3 H = normalize(L + V);
+      float spec = pow(max(dot(N, H), 0.0), 90.0);
+      col += (fres * 0.18 + spec * 0.06) * vec3(1.0);
+    }
 
     if (uGridMode > 0.5 && uGridFade > 0.001) {
       float gridAlpha = (uGridMode < 1.5 ? gridLineAlpha(vWorldPos.xy) : gridDotAlpha(vWorldPos.xy)) * uGridFade;
@@ -35987,8 +36011,10 @@ function createBoardSurface(fog, theme) {
 			uGridMode: { value: GRID_MODE_CODE[theme.gridMode] },
 			uGridColor: { value: new Color(theme.gridColor) },
 			uGridSpacing: { value: Math.max(.001, theme.gridSpacing) },
-			uGridLineWorld: { value: .05 },
+			uGridLineWidthPx: { value: Math.max(.1, theme.gridLineWidth) },
+			uWorldPerPixel: { value: .05 },
 			uGridFade: { value: 0 },
+			uSurfaceTexture: { value: TEXTURE_CODE[theme.surfaceTexture] },
 			...fog
 		}
 	});
@@ -35996,13 +36022,15 @@ function createBoardSurface(fog, theme) {
 	mesh.name = "board-surface";
 	return mesh;
 }
-/** Applies a theme change (initial or live) — everything except the per-frame fade/line-width. */
+/** Applies a theme change (initial or live) — everything except the per-frame fade/pixel-ratio. */
 function setBoardSurfaceTheme(mesh, theme) {
 	const uniforms = mesh.material.uniforms;
 	uniforms.uColor.value.set(theme.color);
 	uniforms.uGridMode.value = GRID_MODE_CODE[theme.gridMode];
 	uniforms.uGridColor.value.set(theme.gridColor);
 	uniforms.uGridSpacing.value = Math.max(.001, theme.gridSpacing);
+	uniforms.uGridLineWidthPx.value = Math.max(.1, theme.gridLineWidth);
+	uniforms.uSurfaceTexture.value = TEXTURE_CODE[theme.surfaceTexture];
 }
 /** Keep the plane centered under the view, larger than the fog horizon, and the grid's on-screen weight/fade current. */
 function updateBoardSurface(mesh, centerX, centerY, fogFar, worldPerPixel) {
@@ -36010,7 +36038,7 @@ function updateBoardSurface(mesh, centerX, centerY, fogFar, worldPerPixel) {
 	const size = fogFar * 2.5;
 	mesh.scale.set(size, size, 1);
 	const uniforms = mesh.material.uniforms;
-	uniforms.uGridLineWorld.value = worldPerPixel;
+	uniforms.uWorldPerPixel.value = worldPerPixel;
 	const t = (uniforms.uGridSpacing.value / Math.max(1e-6, worldPerPixel) - GRID_FADE_MIN_PX) / (GRID_FADE_MAX_PX - GRID_FADE_MIN_PX);
 	uniforms.uGridFade.value = MathUtils.clamp(t, 0, 1);
 }
@@ -36183,7 +36211,7 @@ var CameraRig = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/engine/scene.ts
+//#region src/renderer/canvas/scene.ts
 var SceneRig = class {
 	constructor(canvas, boardTheme) {
 		this.renderer = new WebGLRenderer({
@@ -36230,7 +36258,7 @@ var SceneRig = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/ink/inkMaterial.ts
+//#region src/renderer/shapes/inkMaterial.ts
 var VERTEX = `
   attribute float aAlpha;
   varying vec2 vUv;
@@ -36361,15 +36389,15 @@ var InkMaterials = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/ink/ribbonGeometry.ts
+//#region src/renderer/shapes/ribbonGeometry.ts
 /** Ink floats a hair above the board to avoid z-fighting with the surface. */
 var INK_Z = .02;
 /** Highlighter always renders under opaque ink (build prompt §4.1). */
 var HIGHLIGHT_Z = .016;
 /** Ghosts sit under everything so live strokes always read on top. */
 var GHOST_Z = .012;
-function buildRibbonGeometry(points, baseWidth, z = INK_Z) {
-	const edges = ribbonEdges(points, baseWidth);
+function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
+	const edges = ribbonEdges(points, baseWidth, handDrawn);
 	const n = edges.length;
 	const positions = new Float32Array(n * 2 * 3);
 	const uvs = new Float32Array(n * 2 * 2);
@@ -36412,8 +36440,10 @@ function buildRibbonGeometry(points, baseWidth, z = INK_Z) {
 	return geometry;
 }
 //#endregion
-//#region ../../src/scrawl/ink/strokeRenderer.ts
+//#region src/renderer/shapes/strokeRenderer.ts
 var strokeZ = (stroke) => stroke.tool === "highlighter" ? HIGHLIGHT_Z : INK_Z;
+/** Shapes (rect/ellipse/line/arrow/...) are geometric outlines, not pressure-sensitive ink. */
+var handDrawn = (stroke) => stroke.tool !== "shape";
 /**
 * Derives ink meshes from the document by subscription — the document never
 * knows the renderer exists. Also hosts session-only ghosts (decision Q7)
@@ -36438,12 +36468,12 @@ var StrokeRenderer = class {
 		this.ghostGroup.visible = visible;
 	}
 	/** Leave a smeared residue of an erased span (never persisted). */
-	addGhost(points, color, baseWidth) {
+	addGhost(points, color, baseWidth, handDrawn = true) {
 		if (points.length < 2) return;
 		const mesh = new Mesh(buildRibbonGeometry(points.map((p) => ({
 			...p,
 			erase: 0
-		})), baseWidth * 1.7, GHOST_Z), this.materials.ghost(color));
+		})), baseWidth * 1.7, GHOST_Z, handDrawn), this.materials.ghost(color));
 		this.ghostGroup.add(mesh);
 	}
 	/**
@@ -36455,7 +36485,7 @@ var StrokeRenderer = class {
 		if (this.meshes.has(stroke.id) || this.retiredLive.has(stroke.id) || stroke.points.length < 2) return;
 		this.liveUser.set(stroke.id, userId);
 		const existing = this.liveMeshes.get(stroke.id);
-		const geometry = buildRibbonGeometry(stroke.points, stroke.baseWidth, strokeZ(stroke));
+		const geometry = buildRibbonGeometry(stroke.points, stroke.baseWidth, strokeZ(stroke), handDrawn(stroke));
 		if (existing) {
 			existing.geometry.dispose();
 			existing.geometry = geometry;
@@ -36515,7 +36545,7 @@ var StrokeRenderer = class {
 			const mesh = this.meshes.get(stroke.id);
 			if (mesh) {
 				mesh.geometry.dispose();
-				mesh.geometry = buildRibbonGeometry(stroke.points, stroke.baseWidth, strokeZ(stroke));
+				mesh.geometry = buildRibbonGeometry(stroke.points, stroke.baseWidth, strokeZ(stroke), handDrawn(stroke));
 			}
 		}
 		for (const stroke of change.transformed) {
@@ -36524,7 +36554,7 @@ var StrokeRenderer = class {
 		}
 	}
 	create(stroke) {
-		const mesh = new Mesh(buildRibbonGeometry(stroke.points, stroke.baseWidth, strokeZ(stroke)), stroke.tool === "highlighter" ? this.materials.highlight(stroke.color) : this.materials.get(stroke.color));
+		const mesh = new Mesh(buildRibbonGeometry(stroke.points, stroke.baseWidth, strokeZ(stroke), handDrawn(stroke)), stroke.tool === "highlighter" ? this.materials.highlight(stroke.color) : this.materials.get(stroke.color));
 		mesh.matrixAutoUpdate = false;
 		syncMatrix(mesh, stroke);
 		this.meshes.set(stroke.id, mesh);
@@ -36545,7 +36575,7 @@ function syncMatrix(mesh, stroke) {
 	mesh.matrixWorldNeedsUpdate = true;
 }
 //#endregion
-//#region ../../src/scrawl/scene-objects/markerProp.ts
+//#region src/renderer/shapes/markerProp.ts
 var BODY_LENGTH = 11;
 var BODY_RADIUS = .85;
 var TIP_LENGTH = 1.6;
@@ -36641,7 +36671,7 @@ var MarkerProp = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/scene-objects/noteGeometry.ts
+//#region src/renderer/shapes/noteGeometry.ts
 /**
 * Height of the sheet above the board at (u, v) ∈ [0,1]².
 * v = 1 is the adhesive edge (always 0); u = 1 is the peel corner side.
@@ -36685,7 +36715,7 @@ function applyCurl(geometry, curl, peel) {
 	color.needsUpdate = true;
 }
 //#endregion
-//#region ../../src/scrawl/scene-objects/stickyNotes.ts
+//#region src/renderer/shapes/stickyNotes.ts
 var TEXTURE_SIZE = 512;
 var FOCUS_COLOR$4 = 2450411;
 var CURL = .3;
@@ -43261,7 +43291,7 @@ SYNCABLE_PROPS.forEach((prop) => {
 new Box3();
 new Color();
 //#endregion
-//#region ../../src/scrawl/scene-objects/tables.ts
+//#region src/renderer/shapes/tables.ts
 var FONT_URL$2 = "/fonts/inter-medium.woff";
 var TABLE_Z = .012;
 var HEADER_Z = .014;
@@ -43610,7 +43640,7 @@ var TablesRenderer = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/scene-objects/textBlocks.ts
+//#region src/renderer/text/textBlocks.ts
 var FONT_URL$1 = "/fonts/inter-medium.woff";
 var TEXT_Z = .02;
 var FOCUS_COLOR$2 = 2450411;
@@ -43714,7 +43744,7 @@ var TextBlocksRenderer = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/scene-objects/comments.ts
+//#region src/renderer/shapes/comments.ts
 var PIN_Z = .04;
 var PIN_WIDTH = 3.6;
 var PIN_HEIGHT = 3.6;
@@ -43882,7 +43912,7 @@ function drawBubblePath(ctx, x, y, w, h, r, tailX, tailY, tailW) {
 	ctx.closePath();
 }
 //#endregion
-//#region ../../src/scrawl/scene-objects/images.ts
+//#region src/renderer/shapes/images.ts
 var IMAGE_Z = .015;
 var FRAME_BORDER = .4;
 var FOCUS_COLOR$1 = 2450411;
@@ -44092,7 +44122,7 @@ function applyPlaceholderTexture(visual, label) {
 	visual.imageMesh.material.needsUpdate = true;
 }
 //#endregion
-//#region ../../src/scrawl/scene-objects/kitchenTimers.ts
+//#region src/renderer/shapes/kitchenTimers.ts
 var FACE_SIZE = 256;
 var BODY_COLOR = 14753096;
 var KNOB_COLOR = 16448250;
@@ -44290,7 +44320,7 @@ function renderTimerFace(timer, canvas, now = Date.now()) {
 	return c;
 }
 //#endregion
-//#region ../../src/scrawl/scene-objects/customObjects.ts
+//#region src/renderer/shapes/customObjects.ts
 var FONT_URL = "/fonts/inter-medium.woff";
 var CUSTOM_Z = .02;
 var FOCUS_COLOR = 2450411;
@@ -44652,7 +44682,7 @@ function disposeObject3D(obj) {
 	});
 }
 //#endregion
-//#region ../../src/scrawl/tools/hitTest.ts
+//#region src/interaction/pointer/hitTest.ts
 /** Topmost (most recently added) stroke under the point, or null. */
 function hitStroke(doc, index, p, slop) {
 	const candidates = index.query(p.x - slop, p.y - slop, p.x + slop, p.y + slop);
@@ -44663,9 +44693,10 @@ function hitStroke(doc, index, p, slop) {
 		const scale = m ? avgScale(m) : 1;
 		let prev = null;
 		let prevWidth = 0;
+		const handDrawn = stroke.tool !== "shape";
 		for (const point of stroke.points) {
 			const world = m ? apply(m, point) : point;
-			const width = stroke.baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * point.pressure) * scale;
+			const width = (handDrawn ? stroke.baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * point.pressure) : stroke.baseWidth) * scale;
 			if (prev) {
 				const reach = Math.max(width, prevWidth) / 2 + slop;
 				if (distToSegmentSq(p, prev, world) <= reach * reach) {
@@ -44693,7 +44724,7 @@ function distToSegmentSq(p, a, b) {
 	return dx * dx + dy * dy;
 }
 //#endregion
-//#region ../../src/scrawl/tools/eraserTool.ts
+//#region src/interaction/tools/eraserTool.ts
 var DECAY_PER_PASS = .4;
 /** A point can take another decay pass after this long — rubbing works. */
 var REARM_MS = 250;
@@ -44799,7 +44830,7 @@ var EraserTool = class {
 					...p,
 					...apply(m, p)
 				})) : run.points;
-				this.ctx.renderer.addGhost(world, current.color, current.baseWidth * (m ? avgScale(m) : 1));
+				this.ctx.renderer.addGhost(world, current.color, current.baseWidth * (m ? avgScale(m) : 1), current.tool !== "shape");
 			}
 		}
 		doc.removeStrokes(before.map((s) => s.id));
@@ -44821,7 +44852,7 @@ function partitionByErasure(points) {
 	return runs;
 }
 //#endregion
-//#region ../../src/scrawl/tools/noteDrag.ts
+//#region src/interaction/tools/noteDrag.ts
 /**
 * Drag the focused note in X/Y. The grab is resolved on the note's own
 * z-plane, not the board, so the note doesn't jump under a tilted ray.
@@ -44888,7 +44919,7 @@ var NoteDragState = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/imageDrag.ts
+//#region src/interaction/tools/imageDrag.ts
 /** Drag the focused image in X/Y; one command per drag. */
 var ImageDragState = class {
 	constructor(ctx) {
@@ -44940,7 +44971,7 @@ var ImageDragState = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/timerDrag.ts
+//#region src/interaction/tools/timerDrag.ts
 /** Drag the focused timer in X/Y; one command per drag. */
 var TimerDragState = class {
 	constructor(ctx) {
@@ -44992,7 +45023,7 @@ var TimerDragState = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/shapes.ts
+//#region src/interaction/tools/shapeGeometry.ts
 /** Uniform synthetic pressure; the ink shader supplies the hand-drawn feel. */
 var PRESSURE = .7;
 var MIN_ELLIPSE_SEGMENTS = 24;
@@ -45032,10 +45063,7 @@ function rect(a, b, step) {
 		a
 	];
 	const out = [];
-	for (let i = 0; i < corners.length - 1; i++) {
-		const edge = sampleSegment(corners[i], corners[i + 1], step);
-		out.push(...i === 0 ? edge : edge.slice(1));
-	}
+	for (let i = 0; i < corners.length - 1; i++) out.push(...sampleSegment(corners[i], corners[i + 1], step));
 	return out;
 }
 function ellipse(a, b, step) {
@@ -45106,10 +45134,7 @@ function polygon(sides, a, b, step, startAngle = -Math.PI / 2) {
 	}
 	vertices.push(vertices[0]);
 	const out = [];
-	for (let i = 0; i < vertices.length - 1; i++) {
-		const edge = sampleSegment(vertices[i], vertices[i + 1], step);
-		out.push(...i === 0 ? edge : edge.slice(1));
-	}
+	for (let i = 0; i < vertices.length - 1; i++) out.push(...sampleSegment(vertices[i], vertices[i + 1], step));
 	return out;
 }
 function star(points, a, b, step) {
@@ -45133,10 +45158,7 @@ function star(points, a, b, step) {
 	}
 	vertices.push(vertices[0]);
 	const out = [];
-	for (let i = 0; i < vertices.length - 1; i++) {
-		const edge = sampleSegment(vertices[i], vertices[i + 1], step);
-		out.push(...i === 0 ? edge : edge.slice(1));
-	}
+	for (let i = 0; i < vertices.length - 1; i++) out.push(...sampleSegment(vertices[i], vertices[i + 1], step));
 	return out;
 }
 function heart(a, b, step) {
@@ -45181,7 +45203,7 @@ function snappedEnd(a, b) {
 	};
 }
 //#endregion
-//#region ../../src/scrawl/tools/shapeTool.ts
+//#region src/interaction/tools/shapeTool.ts
 var MIN_DRAG_PX$1 = 4;
 /** Drag out a shape; live preview through the real ink material. */
 var ShapeTool = class {
@@ -45212,7 +45234,8 @@ var ShapeTool = class {
 			const strokes = this.polylines.map((points) => ({
 				id: crypto.randomUUID(),
 				color: this.ctx.inkColor(),
-				baseWidth: this.ctx.baseWidth(),
+				baseWidth: this.ctx.shapeStrokeWidth(),
+				tool: "shape",
 				points
 			}));
 			this.ctx.clusters.assign(strokes[0]);
@@ -45246,13 +45269,13 @@ var ShapeTool = class {
 			this.previews[i].visible = polyline !== void 0;
 			if (polyline) {
 				this.previews[i].geometry.dispose();
-				this.previews[i].geometry = buildRibbonGeometry(polyline, this.ctx.baseWidth());
+				this.previews[i].geometry = buildRibbonGeometry(polyline, this.ctx.shapeStrokeWidth(), void 0, false);
 			}
 		}
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/tableDrag.ts
+//#region src/interaction/tools/tableDrag.ts
 function getHandleCursor(handle) {
 	switch (handle) {
 		case "nw":
@@ -45372,7 +45395,7 @@ var TableDragState = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/tableTool.ts
+//#region src/interaction/tools/tableTool.ts
 var MIN_DRAG_PX = 6;
 var TableTool = class {
 	constructor(ctx) {
@@ -45503,7 +45526,7 @@ var TableTool = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/commentTool.ts
+//#region src/interaction/tools/commentTool.ts
 /** Click on the board to drop a new comment pin or open an existing one. */
 var CommentTool = class {
 	constructor(ctx) {
@@ -45538,7 +45561,7 @@ var CommentTool = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/textDrag.ts
+//#region src/interaction/tools/textDrag.ts
 /** Drag the focused text block in X/Y; one command per drag. */
 var TextDragState = class {
 	constructor(ctx) {
@@ -45590,7 +45613,7 @@ var TextDragState = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/fsm.ts
+//#region src/interaction/tools/fsm.ts
 var ToolStateMachine = class {
 	constructor() {
 		this.states = /* @__PURE__ */ new Map();
@@ -45792,7 +45815,7 @@ var IdleState = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/gizmo.ts
+//#region src/renderer/selection/gizmo.ts
 var GIZMO_Z = .05;
 var HANDLE_PX = 9;
 var HANDLE_HIT_PX = 12;
@@ -46023,7 +46046,7 @@ function boxesEqual(a, b) {
 	return a.minX === b.minX && a.minY === b.minY && a.maxX === b.maxX && a.maxY === b.maxY;
 }
 //#endregion
-//#region ../../src/scrawl/ink/pressure.ts
+//#region src/interaction/tools/pressure.ts
 var SIM_MAX = 1;
 var SIM_MIN = .3;
 var SMOOTHING = .25;
@@ -46045,7 +46068,7 @@ function clamp(v, lo, hi) {
 	return Math.min(hi, Math.max(lo, v));
 }
 //#endregion
-//#region ../../src/scrawl/ink/strokeBuilder.ts
+//#region src/interaction/tools/strokeBuilder.ts
 var StrokeBuilder = class {
 	constructor() {
 		this.points = [];
@@ -46095,7 +46118,7 @@ function catmullRom(v0, v1, v2, v3, t) {
 	return .5 * (2 * v1 + (-v0 + v2) * t + (2 * v0 - 5 * v1 + 4 * v2 - v3) * t2 + (-v0 + 3 * v1 - 3 * v2 + v3) * t3);
 }
 //#endregion
-//#region ../../src/scrawl/tools/markerTool.ts
+//#region src/interaction/tools/markerTool.ts
 /** Sample spacing while drawing, in screen pixels. */
 var MIN_SAMPLE_PX = 1.5;
 /** A highlighter is a chisel tip: near-constant width, little pressure play. */
@@ -46198,7 +46221,7 @@ var MarkerTool = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/orbitTool.ts
+//#region src/interaction/tools/orbitTool.ts
 /**
 * Orbit-preview (build prompt §4.2): alt-drag tilts the camera off-axis to
 * read the board's material and depth; releasing eases back to the working
@@ -46233,7 +46256,7 @@ var OrbitTool = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/panTool.ts
+//#region src/interaction/tools/panTool.ts
 /** Grab-pan: content follows the pointer. */
 var PanTool = class {
 	constructor(ctx) {
@@ -46263,7 +46286,7 @@ var PanTool = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/selection.ts
+//#region src/renderer/selection/selection.ts
 /** The set of selected stroke ids. Drops ids the document no longer has. */
 var SelectionManager = class {
 	constructor(doc) {
@@ -46314,7 +46337,7 @@ var SelectionManager = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/tools/selectTool.ts
+//#region src/interaction/tools/selectTool.ts
 var HIT_SLOP_PX = 4;
 var CLICK_TOLERANCE_PX = 3;
 var MIN_SCALE = .05;
@@ -46530,7 +46553,7 @@ function safeRatio(numerator, denominator) {
 	return raw;
 }
 //#endregion
-//#region ../../src/scrawl/tools/customTool.ts
+//#region src/interaction/tools/customTool.ts
 function extensionIdFromToolId(toolId) {
 	const slash = toolId.indexOf("/");
 	return slash === -1 ? toolId : toolId.slice(0, slash);
@@ -46645,12 +46668,19 @@ var ExtensionCommandBatch = class {
 	}
 };
 //#endregion
-//#region ../../src/scrawl/ScrawlEngine.ts
+//#region src/composition/ScrawlEngine.ts
 /** Marker stroke width in board units (~1% of the default view height). */
 var BASE_WIDTH = .5;
 /** Highlighter chisel width — wide enough to cover a line of handwriting. */
 var HIGHLIGHT_WIDTH = 2.2;
 /**
+* Shape (rectangle, ellipse, arrow, ...) border width in board units.
+* Deliberately thinner than BASE_WIDTH: a shape border reads as a crisp,
+* structural line, not an expressive marker stroke — this is also the
+* fallback when no Host theme configures ScrawlTheme.shapeStrokeWidth.
+*/
+var DEFAULT_SHAPE_STROKE_WIDTH = .15;
+/**
 * Identity of a rendered selection badge: which item, its lock state, and
 * where it sits on screen (rounded to the pixel, so sub-pixel camera drift
 * does not churn React).
@@ -46671,10 +46701,11 @@ function emptyExtensionRegistry() {
 * React never reaches past this class.
 */
 var ScrawlEngine = class {
-	constructor(canvas, documentId$1, extensionRegistry = emptyExtensionRegistry(), assetController = new AssetController(void 0), boardTheme = DEFAULT_BOARD_SURFACE_THEME) {
+	constructor(canvas, documentId$1, extensionRegistry = emptyExtensionRegistry(), assetController = new AssetController(void 0), boardTheme = DEFAULT_BOARD_SURFACE_THEME, shapeStrokeWidth = DEFAULT_SHAPE_STROKE_WIDTH) {
 		this.canvas = canvas;
 		this.extensionRegistry = extensionRegistry;
 		this.boardTheme = boardTheme;
+		this.shapeStrokeWidth = shapeStrokeWidth;
 		this.onToolChange = null;
 		this.onZoomChange = null;
 		this.onAuditEvent = null;
@@ -46769,6 +46800,7 @@ var ScrawlEngine = class {
 			setTool: (t) => this.setTool(t),
 			inkColor: () => this.tool === "highlighter" ? this.highlightColor : this.color,
 			baseWidth: () => this.tool === "highlighter" ? HIGHLIGHT_WIDTH : BASE_WIDTH,
+			shapeStrokeWidth: () => this.shapeStrokeWidth,
 			activeTool: () => this.tool,
 			isSpaceHeld: () => this.spaceHeld,
 			pointerToBoard: (e) => pointerToBoard(e.clientX, e.clientY, canvas, this.scene.cameraRig.camera),
@@ -47033,6 +47065,10 @@ var ScrawlEngine = class {
 		this.boardTheme = theme;
 		this.scene.applyBoardTheme(theme);
 	}
+	/** Live update of the shape tool's border width (board units). Already-drawn shapes keep the width they were drawn with. */
+	setShapeStrokeWidth(width) {
+		this.shapeStrokeWidth = width;
+	}
 	/**
 	* Snap to a peer's camera. No-op while drawing so pointer-to-board
 	* mapping does not warp the in-progress stroke.
@@ -48094,7 +48130,7 @@ var ScrawlEngine = class {
 	}
 };
 //#endregion
-//#region src/controller-internal.ts
+//#region src/composition/controller-internal.ts
 function createBoardController(options) {
 	return createBoardControllerWithEngine(options);
 }
@@ -48112,9 +48148,12 @@ function createBoardControllerWithEngine(options, existingEngine) {
 		color: options.boardTheme?.surface ?? DEFAULT_BOARD_SURFACE_THEME.color,
 		gridMode: options.boardTheme?.gridMode ?? DEFAULT_BOARD_SURFACE_THEME.gridMode,
 		gridColor: options.boardTheme?.gridColor ?? DEFAULT_BOARD_SURFACE_THEME.gridColor,
-		gridSpacing: options.boardTheme?.gridSpacing ?? DEFAULT_BOARD_SURFACE_THEME.gridSpacing
+		gridSpacing: options.boardTheme?.gridSpacing ?? DEFAULT_BOARD_SURFACE_THEME.gridSpacing,
+		gridLineWidth: options.boardTheme?.gridLineWidth ?? DEFAULT_BOARD_SURFACE_THEME.gridLineWidth,
+		surfaceTexture: options.boardTheme?.surfaceTexture ?? DEFAULT_BOARD_SURFACE_THEME.surfaceTexture
 	};
-	const engine = existingEngine ?? (options.canvas ? new ScrawlEngine(options.canvas, options.document.id, extensionRegistry, assetController, currentBoardTheme) : null);
+	let currentShapeStrokeWidth = options.boardTheme?.shapeStrokeWidth ?? .15;
+	const engine = existingEngine ?? (options.canvas ? new ScrawlEngine(options.canvas, options.document.id, extensionRegistry, assetController, currentBoardTheme, currentShapeStrokeWidth) : null);
 	const document = engine?.document ?? new BoardDocument(documentId(options.document.id));
 	const history = engine?.history ?? new History(document);
 	const createId = options.createId ?? (() => crypto.randomUUID());
@@ -48603,9 +48642,15 @@ function createBoardControllerWithEngine(options, existingEngine) {
 				color: theme.surface ?? currentBoardTheme.color,
 				gridMode: theme.gridMode ?? currentBoardTheme.gridMode,
 				gridColor: theme.gridColor ?? currentBoardTheme.gridColor,
-				gridSpacing: theme.gridSpacing ?? currentBoardTheme.gridSpacing
+				gridSpacing: theme.gridSpacing ?? currentBoardTheme.gridSpacing,
+				gridLineWidth: theme.gridLineWidth ?? currentBoardTheme.gridLineWidth,
+				surfaceTexture: theme.surfaceTexture ?? currentBoardTheme.surfaceTexture
 			};
 			engine?.applyBoardTheme(currentBoardTheme);
+			if (theme.shapeStrokeWidth !== void 0) {
+				currentShapeStrokeWidth = theme.shapeStrokeWidth;
+				engine?.setShapeStrokeWidth(currentShapeStrokeWidth);
+			}
 		} },
 		view: {
 			fit() {
@@ -49376,7 +49421,7 @@ function createLocalBoard(options) {
 	};
 }
 //#endregion
-//#region src/theme.ts
+//#region src/ui/theme.ts
 var scrawlThemePresets = Object.freeze({
 	light: Object.freeze({
 		surface: "#ffffff",
@@ -49385,6 +49430,7 @@ var scrawlThemePresets = Object.freeze({
 		text: "#1c1c1a",
 		textMuted: "#62625c",
 		edge: "#d4d4cc",
+		primary: "#1856a3",
 		focus: "#1856a3",
 		selection: "#d9e8f7",
 		danger: "#a3302b",
@@ -49403,9 +49449,12 @@ var scrawlThemePresets = Object.freeze({
 		motionEasing: "cubic-bezier(0.2, 0, 0, 1)",
 		density: "comfortable",
 		boardSurface: "#f5f5f3",
+		boardSurfaceTexture: "flat",
 		gridMode: "none",
 		gridColor: "#deded8",
-		gridSpacing: 5
+		gridSpacing: 5,
+		gridLineWidth: 1,
+		shapeStrokeWidth: .15
 	}),
 	dark: Object.freeze({
 		surface: "#171816",
@@ -49414,6 +49463,7 @@ var scrawlThemePresets = Object.freeze({
 		text: "#f4f4ee",
 		textMuted: "#b7b8ae",
 		edge: "#484a42",
+		primary: "#9dc8ef",
 		focus: "#9dc8ef",
 		selection: "#314b63",
 		danger: "#ffaaa3",
@@ -49432,9 +49482,12 @@ var scrawlThemePresets = Object.freeze({
 		motionEasing: "cubic-bezier(0.2, 0, 0, 1)",
 		density: "comfortable",
 		boardSurface: "#232420",
+		boardSurfaceTexture: "flat",
 		gridMode: "none",
 		gridColor: "#33352f",
-		gridSpacing: 5
+		gridSpacing: 5,
+		gridLineWidth: 1,
+		shapeStrokeWidth: .15
 	})
 });
 var variableNames = {
@@ -49444,6 +49497,7 @@ var variableNames = {
 	text: "--scrawl-color-text",
 	textMuted: "--scrawl-color-text-muted",
 	edge: "--scrawl-color-edge",
+	primary: "--scrawl-color-primary",
 	focus: "--scrawl-color-focus",
 	selection: "--scrawl-color-selection",
 	danger: "--scrawl-color-danger",
@@ -49462,9 +49516,12 @@ var variableNames = {
 	motionEasing: "--scrawl-motion-easing",
 	density: "--scrawl-density",
 	boardSurface: "--scrawl-board-surface",
+	boardSurfaceTexture: "--scrawl-board-surface-texture",
 	gridMode: "--scrawl-grid-mode",
 	gridColor: "--scrawl-grid-color",
-	gridSpacing: "--scrawl-grid-spacing"
+	gridSpacing: "--scrawl-grid-spacing",
+	gridLineWidth: "--scrawl-grid-line-width",
+	shapeStrokeWidth: "--scrawl-shape-stroke-width"
 };
 var colorTokens = /* @__PURE__ */ new Set([
 	"surface",
@@ -49473,6 +49530,7 @@ var colorTokens = /* @__PURE__ */ new Set([
 	"text",
 	"textMuted",
 	"edge",
+	"primary",
 	"focus",
 	"selection",
 	"danger",
@@ -49520,10 +49578,22 @@ function validateScrawlTheme(theme) {
 			token,
 			message: "Expected none, line, or dot"
 		});
+		else if (token === "boardSurfaceTexture" && value !== "flat" && value !== "textured") diagnostics.push({
+			token,
+			message: "Expected flat or textured"
+		});
 		else if (token === "gridSpacing" && (!finiteNumber(value) || value < .5 || value > 50)) diagnostics.push({
 			token,
 			message: "Expected spacing 0.5-50 board units"
 		});
+		else if (token === "gridLineWidth" && (!finiteNumber(value) || value < .5 || value > 8)) diagnostics.push({
+			token,
+			message: "Expected line width 0.5-8px"
+		});
+		else if (token === "shapeStrokeWidth" && (!finiteNumber(value) || value < .01 || value > 5)) diagnostics.push({
+			token,
+			message: "Expected stroke width 0.01-5 board units"
+		});
 		else if ((token.endsWith("Family") || token.startsWith("elevation") || token === "motionEasing") && (typeof value !== "string" || !value.trim() || /[;{}]/.test(value))) diagnostics.push({
 			token,
 			message: "Expected a safe CSS value"
@@ -49594,12 +49664,12 @@ function luminance(color) {
 	return channels[0] * .2126 + channels[1] * .7152 + channels[2] * .0722;
 }
 function formatValue(token, value) {
-	if (token === "baseFontSize" || token === "controlRadius" || token === "panelRadius") return `${value}px`;
+	if (token === "baseFontSize" || token === "controlRadius" || token === "panelRadius" || token === "gridLineWidth") return `${value}px`;
 	if (token === "motionDuration") return `${value}ms`;
 	return String(value);
 }
 //#endregion
-//#region src/inline-editing.tsx
+//#region src/ui/dialogs/inline-editing.tsx
 /** Inline note, text, and table-cell editors — driven entirely by public controller events and commands. */
 function InlineEditors({ controller, renderPortal }) {
 	const [editor, setEditor] = useState(null);
@@ -49830,7 +49900,7 @@ function InlineEditors({ controller, renderPortal }) {
 	}))] });
 }
 //#endregion
-//#region src/style-shelf.tsx
+//#region src/ui/toolbar/style-shelf.tsx
 var ERASER_RADII = [
 	["Fine", 1],
 	["Medium", 2],
@@ -49993,7 +50063,7 @@ function StyleShelf({ controller, snapshot }) {
 	});
 }
 //#endregion
-//#region src/default-ui.tsx
+//#region src/ui/default-ui.tsx
 var PRIMARY_TOOLS = [
 	{
 		tool: "select",
@@ -50102,7 +50172,7 @@ var INKS = [
 	["Forest", "#315d46"],
 	["Oxblood", "#773f3b"]
 ];
-function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots }) {
+function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots, icons }) {
 	const [panel, setPanel] = useState(null);
 	const [query, setQuery] = useState("");
 	const [announcement, setAnnouncement] = useState("Board controls ready");
@@ -50256,7 +50326,10 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 						onClick: () => chooseTool(tool),
 						title: `${label} (${key})`,
 						type: "button",
-						children: label
+						children: icons?.[tool] ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: icons[tool]
+						}) : label
 					}, tool)), /* @__PURE__ */ jsxs("label", {
 						className: "scrawl-board__tool-select",
 						children: [/* @__PURE__ */ jsx("span", { children: "More tools" }), /* @__PURE__ */ jsxs("select", {
@@ -50522,7 +50595,7 @@ function download(blob, name) {
 	URL.revokeObjectURL(url);
 }
 //#endregion
-//#region src/presence.tsx
+//#region src/ui/panels/presence.tsx
 var labelStyle = {
 	borderRadius: 999,
 	color: "#fff",
@@ -50682,9 +50755,12 @@ function ScrawlProvider({ controller, children, preset = "light", theme, portalC
 	useEffect(() => {
 		controller.boardTheme.set({
 			surface: resolved.values.boardSurface,
+			surfaceTexture: resolved.values.boardSurfaceTexture,
 			gridMode: resolved.values.gridMode,
 			gridColor: resolved.values.gridColor,
-			gridSpacing: resolved.values.gridSpacing
+			gridSpacing: resolved.values.gridSpacing,
+			gridLineWidth: resolved.values.gridLineWidth,
+			shapeStrokeWidth: resolved.values.shapeStrokeWidth
 		});
 	}, [controller, resolved]);
 	useDeferredDisposal(controller, disposeOnUnmount);
@@ -50716,7 +50792,7 @@ function ScrawlProvider({ controller, children, preset = "light", theme, portalC
 		})
 	});
 }
-function Scrawl({ children, preset, theme, portalContainer, className, style, onReady, onError, onThemeDiagnostic, canvas: suppliedCanvas, ...options }) {
+function Scrawl({ children, preset, theme, portalContainer, className, style, onReady, onError, onThemeDiagnostic, canvas: suppliedCanvas, icons, ...options }) {
 	const [runtime, setRuntime] = useState(null);
 	const runtimeRef = useRef(null);
 	const ownedCanvasRef = useRef(null);
@@ -50737,9 +50813,12 @@ function Scrawl({ children, preset, theme, portalContainer, className, style, on
 				const resolved = resolveScrawlTheme(preset, theme);
 				const boardTheme = {
 					surface: resolved.values.boardSurface,
+					surfaceTexture: resolved.values.boardSurfaceTexture,
 					gridMode: resolved.values.gridMode,
 					gridColor: resolved.values.gridColor,
-					gridSpacing: resolved.values.gridSpacing
+					gridSpacing: resolved.values.gridSpacing,
+					gridLineWidth: resolved.values.gridLineWidth,
+					shapeStrokeWidth: resolved.values.shapeStrokeWidth
 				};
 				controller = createBoardController({
 					...options,
@@ -50809,7 +50888,7 @@ function Scrawl({ children, preset, theme, portalContainer, className, style, on
 		onThemeDiagnostic,
 		className,
 		style,
-		children: [runtime.canvas && /* @__PURE__ */ jsx(ScrawlCanvas, { element: runtime.canvas }), children ?? /* @__PURE__ */ jsx(ScrawlDefaultUI, {})]
+		children: [runtime.canvas && /* @__PURE__ */ jsx(ScrawlCanvas, { element: runtime.canvas }), children ?? /* @__PURE__ */ jsx(ScrawlDefaultUI, { icons })]
 	});
 }
 function ScrawlCanvas({ element, className, style, "aria-label": ariaLabel = "Scrawl Board" }) {
@@ -50845,10 +50924,11 @@ function ScrawlCanvas({ element, className, style, "aria-label": ariaLabel = "Sc
 		style
 	});
 }
-function ScrawlDefaultUI({ className, style, regions, slots }) {
+function ScrawlDefaultUI({ className, style, regions, slots, icons }) {
 	return /* @__PURE__ */ jsx(DefaultBoardChrome, {
 		className,
 		controller: useScrawlController(),
+		icons,
 		regions,
 		renderPortal: (children) => /* @__PURE__ */ jsx(ScrawlPortal, { children }),
 		slots,