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

package/dist/browser.d.ts

@@ -368,8 +368,13 @@ interface StrokePoint extends BoardPoint {
      */
     erase?: number;
 }
-/** Which drawing tool made a stroke; undefined means marker (back-compat). */
-type StrokeTool = "marker" | "highlighter";
+/**
+ * Which drawing tool made a stroke; undefined means marker (back-compat).
+ * `"shape"` (rect/ellipse/line/arrow/polygon/star/heart) renders at its
+ * exact configured width with no pressure variance or end taper — a
+ * geometric outline, not an expressive ink mark.
+ */
+type StrokeTool = "marker" | "highlighter" | "shape";
 interface Stroke extends Lockable {
     id: string;
     color: string;

package/dist/browser.js

@@ -1739,7 +1739,15 @@ function changeToOps(change, restoring = false) {
 //#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
@@ -1754,8 +1762,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,
@@ -2031,7 +2039,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 = [];
@@ -36308,8 +36316,8 @@ var INK_Z = .02;
 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);
@@ -36354,6 +36362,8 @@ function buildRibbonGeometry(points, baseWidth, z = INK_Z) {
 //#endregion
 //#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)
@@ -36378,12 +36388,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);
 	}
 	/**
@@ -36395,7 +36405,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;
@@ -36455,7 +36465,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) {
@@ -36464,7 +36474,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);
@@ -44603,9 +44613,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) {
@@ -44739,7 +44750,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));
@@ -44972,10 +44983,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) {
@@ -45046,10 +45054,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) {
@@ -45073,10 +45078,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) {
@@ -45153,6 +45155,7 @@ var ShapeTool = class {
 				id: crypto.randomUUID(),
 				color: this.ctx.inkColor(),
 				baseWidth: this.ctx.shapeStrokeWidth(),
+				tool: "shape",
 				points
 			}));
 			this.ctx.clusters.assign(strokes[0]);
@@ -45186,7 +45189,7 @@ 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.shapeStrokeWidth());
+				this.previews[i].geometry = buildRibbonGeometry(polyline, this.ctx.shapeStrokeWidth(), void 0, false);
 			}
 		}
 	}

package/dist/core.d.ts

@@ -425,8 +425,13 @@ interface StrokePoint extends BoardPoint {
      */
     erase?: number;
 }
-/** Which drawing tool made a stroke; undefined means marker (back-compat). */
-type StrokeTool = "marker" | "highlighter";
+/**
+ * Which drawing tool made a stroke; undefined means marker (back-compat).
+ * `"shape"` (rect/ellipse/line/arrow/polygon/star/heart) renders at its
+ * exact configured width with no pressure variance or end taper — a
+ * geometric outline, not an expressive ink mark.
+ */
+type StrokeTool = "marker" | "highlighter" | "shape";
 interface Stroke extends Lockable {
     id: string;
     color: string;
@@ -1061,7 +1066,15 @@ interface RibbonEdgePoint {
     /** 1 = intact ink, 0 = fully erased (from the erasure channel). */
     alpha: number;
 }
-declare function ribbonEdges(points: StrokePoint[], baseWidth: number): RibbonEdgePoint[];
+/**
+ * @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).
+ */
+declare function ribbonEdges(points: StrokePoint[], baseWidth: number, handDrawn?: boolean): RibbonEdgePoint[];
 
 declare class SpatialIndex {
     private readonly doc;

package/dist/core.js

@@ -1732,7 +1732,15 @@ function changeToOps(change, restoring = false) {
 //#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
@@ -1747,8 +1755,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,
@@ -2061,7 +2069,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 = [];

package/dist/index.d.ts

@@ -428,8 +428,13 @@ interface StrokePoint extends BoardPoint {
      */
     erase?: number;
 }
-/** Which drawing tool made a stroke; undefined means marker (back-compat). */
-type StrokeTool = "marker" | "highlighter";
+/**
+ * Which drawing tool made a stroke; undefined means marker (back-compat).
+ * `"shape"` (rect/ellipse/line/arrow/polygon/star/heart) renders at its
+ * exact configured width with no pressure variance or end taper — a
+ * geometric outline, not an expressive ink mark.
+ */
+type StrokeTool = "marker" | "highlighter" | "shape";
 interface Stroke extends Lockable {
     id: string;
     color: string;
@@ -1064,7 +1069,15 @@ interface RibbonEdgePoint {
     /** 1 = intact ink, 0 = fully erased (from the erasure channel). */
     alpha: number;
 }
-declare function ribbonEdges(points: StrokePoint[], baseWidth: number): RibbonEdgePoint[];
+/**
+ * @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).
+ */
+declare function ribbonEdges(points: StrokePoint[], baseWidth: number, handDrawn?: boolean): RibbonEdgePoint[];
 
 declare class SpatialIndex {
     private readonly doc;
@@ -1690,6 +1703,13 @@ interface ScrawlTheme {
     textMuted?: string;
     /** Borders and dividers between UI chrome elements. */
     edge?: string;
+    /**
+     * Brand accent color. Drives the active/selected state of toolbar
+     * controls (e.g. the active tool button): its icon/text render in this
+     * color, and its background is automatically derived as a light tint of
+     * it (via `color-mix`) — set this one token and both follow.
+     */
+    primary?: string;
     /** Focus ring color. Checked for contrast against `surface`. */
     focus?: string;
     /** Selection highlight color (e.g. selected list items, not board object selection). */
@@ -1762,6 +1782,19 @@ interface DefaultBoardChromeProps {
     style?: React.CSSProperties;
     regions?: Partial<Record<DefaultUIRegion, boolean>>;
     slots?: DefaultUISlots;
+    /**
+     * Swap in your own icon for a tool's primary toolbar button — pass any
+     * icon from any library (`<Pencil />`, `<Icon icon="..." />`, an inline
+     * `<svg>`, whatever). A tool with no entry here keeps its default text
+     * label, so this is opt-in per tool, not all-or-nothing. Aria labeling
+     * and the keyboard-shortcut tooltip stay text-based regardless, so the
+     * board remains fully accessible even with icon-only buttons.
+     *
+     * Only affects the six primary toolbar buttons (select/marker/
+     * highlighter/eraser/note/text) — the "more tools" overflow menu is a
+     * native `<select>`, which can only render plain text `<option>`s.
+     */
+    icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
 type DefaultUIRegion = "tools" | "history" | "view" | "style" | "search" | "import" | "export" | "inlineEditing" | "styleShelf";
 /** Props for the toolbar/topBar/stylePanel/contextMenu slots. */
@@ -1791,7 +1824,7 @@ interface DefaultUISlots {
      */
     contextMenu?: ComponentType<BoardSlotProps> | null;
 }
-declare function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots }: DefaultBoardChromeProps): react.JSX.Element;
+declare function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots, icons }: DefaultBoardChromeProps): react.JSX.Element;
 
 interface InlineEditorsProps {
     controller: BoardController;
@@ -1848,8 +1881,14 @@ interface ScrawlProps extends Omit<CreateBoardControllerOptions, "canvas"> {
     onThemeDiagnostic?: (diagnostic: ScrawlThemeDiagnostic) => void;
     /** Provide null for a headless Board, or an existing canvas to control its identity. */
     canvas?: HTMLCanvasElement | null;
+    /**
+     * Per-tool icon override for the default toolbar's primary buttons —
+     * only applies when you don't supply `children` (i.e. you're using the
+     * SDK's default UI). See DefaultBoardChromeProps.icons.
+     */
+    icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
-declare function Scrawl({ children, preset, theme, portalContainer, className, style, onReady, onError, onThemeDiagnostic, canvas: suppliedCanvas, ...options }: ScrawlProps): react.JSX.Element;
+declare function Scrawl({ children, preset, theme, portalContainer, className, style, onReady, onError, onThemeDiagnostic, canvas: suppliedCanvas, icons, ...options }: ScrawlProps): react.JSX.Element;
 interface ScrawlCanvasProps {
     element?: HTMLCanvasElement;
     className?: string;
@@ -1864,8 +1903,10 @@ interface ScrawlDefaultUIProps {
     regions?: Partial<Record<DefaultUIRegion, boolean>>;
     /** Replace (component) or hide (null) a coarse region; omit for the SDK default. */
     slots?: DefaultUISlots;
+    /** Per-tool icon override for the primary toolbar buttons — see DefaultBoardChromeProps.icons. */
+    icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
-declare function ScrawlDefaultUI({ className, style, regions, slots }: ScrawlDefaultUIProps): react.JSX.Element;
+declare function ScrawlDefaultUI({ className, style, regions, slots, icons }: ScrawlDefaultUIProps): react.JSX.Element;
 declare function ScrawlPortal({ children }: {
     children: ReactNode;
 }): react.ReactPortal | null;

package/dist/index.js

@@ -1778,7 +1778,15 @@ function changeToOps(change, restoring = false) {
 //#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,
@@ -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 = [];
@@ -36388,8 +36396,8 @@ var INK_Z = .02;
 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);
@@ -36434,6 +36442,8 @@ function buildRibbonGeometry(points, baseWidth, z = INK_Z) {
 //#endregion
 //#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)
@@ -36458,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);
 	}
 	/**
@@ -36475,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;
@@ -36535,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) {
@@ -36544,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);
@@ -44683,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) {
@@ -44819,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));
@@ -45052,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) {
@@ -45126,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) {
@@ -45153,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) {
@@ -45233,6 +45235,7 @@ var ShapeTool = class {
 				id: crypto.randomUUID(),
 				color: this.ctx.inkColor(),
 				baseWidth: this.ctx.shapeStrokeWidth(),
+				tool: "shape",
 				points
 			}));
 			this.ctx.clusters.assign(strokes[0]);
@@ -45266,7 +45269,7 @@ 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.shapeStrokeWidth());
+				this.previews[i].geometry = buildRibbonGeometry(polyline, this.ctx.shapeStrokeWidth(), void 0, false);
 			}
 		}
 	}
@@ -49427,6 +49430,7 @@ var scrawlThemePresets = Object.freeze({
 		text: "#1c1c1a",
 		textMuted: "#62625c",
 		edge: "#d4d4cc",
+		primary: "#1856a3",
 		focus: "#1856a3",
 		selection: "#d9e8f7",
 		danger: "#a3302b",
@@ -49459,6 +49463,7 @@ var scrawlThemePresets = Object.freeze({
 		text: "#f4f4ee",
 		textMuted: "#b7b8ae",
 		edge: "#484a42",
+		primary: "#9dc8ef",
 		focus: "#9dc8ef",
 		selection: "#314b63",
 		danger: "#ffaaa3",
@@ -49492,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",
@@ -49524,6 +49530,7 @@ var colorTokens = /* @__PURE__ */ new Set([
 	"text",
 	"textMuted",
 	"edge",
+	"primary",
 	"focus",
 	"selection",
 	"danger",
@@ -50165,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");
@@ -50319,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", {
@@ -50782,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);
@@ -50878,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" }) {
@@ -50914,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,

package/dist/react.d.ts

@@ -371,8 +371,13 @@ interface StrokePoint extends BoardPoint {
      */
     erase?: number;
 }
-/** Which drawing tool made a stroke; undefined means marker (back-compat). */
-type StrokeTool = "marker" | "highlighter";
+/**
+ * Which drawing tool made a stroke; undefined means marker (back-compat).
+ * `"shape"` (rect/ellipse/line/arrow/polygon/star/heart) renders at its
+ * exact configured width with no pressure variance or end taper — a
+ * geometric outline, not an expressive ink mark.
+ */
+type StrokeTool = "marker" | "highlighter" | "shape";
 interface Stroke extends Lockable {
     id: string;
     color: string;
@@ -1064,6 +1069,13 @@ interface ScrawlTheme {
     textMuted?: string;
     /** Borders and dividers between UI chrome elements. */
     edge?: string;
+    /**
+     * Brand accent color. Drives the active/selected state of toolbar
+     * controls (e.g. the active tool button): its icon/text render in this
+     * color, and its background is automatically derived as a light tint of
+     * it (via `color-mix`) — set this one token and both follow.
+     */
+    primary?: string;
     /** Focus ring color. Checked for contrast against `surface`. */
     focus?: string;
     /** Selection highlight color (e.g. selected list items, not board object selection). */
@@ -1136,6 +1148,19 @@ interface DefaultBoardChromeProps {
     style?: React.CSSProperties;
     regions?: Partial<Record<DefaultUIRegion, boolean>>;
     slots?: DefaultUISlots;
+    /**
+     * Swap in your own icon for a tool's primary toolbar button — pass any
+     * icon from any library (`<Pencil />`, `<Icon icon="..." />`, an inline
+     * `<svg>`, whatever). A tool with no entry here keeps its default text
+     * label, so this is opt-in per tool, not all-or-nothing. Aria labeling
+     * and the keyboard-shortcut tooltip stay text-based regardless, so the
+     * board remains fully accessible even with icon-only buttons.
+     *
+     * Only affects the six primary toolbar buttons (select/marker/
+     * highlighter/eraser/note/text) — the "more tools" overflow menu is a
+     * native `<select>`, which can only render plain text `<option>`s.
+     */
+    icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
 type DefaultUIRegion = "tools" | "history" | "view" | "style" | "search" | "import" | "export" | "inlineEditing" | "styleShelf";
 /** Props for the toolbar/topBar/stylePanel/contextMenu slots. */
@@ -1165,7 +1190,7 @@ interface DefaultUISlots {
      */
     contextMenu?: ComponentType<BoardSlotProps> | null;
 }
-declare function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots }: DefaultBoardChromeProps): react.JSX.Element;
+declare function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots, icons }: DefaultBoardChromeProps): react.JSX.Element;
 
 interface InlineEditorsProps {
     controller: BoardController;
@@ -1222,8 +1247,14 @@ interface ScrawlProps extends Omit<CreateBoardControllerOptions, "canvas"> {
     onThemeDiagnostic?: (diagnostic: ScrawlThemeDiagnostic) => void;
     /** Provide null for a headless Board, or an existing canvas to control its identity. */
     canvas?: HTMLCanvasElement | null;
+    /**
+     * Per-tool icon override for the default toolbar's primary buttons —
+     * only applies when you don't supply `children` (i.e. you're using the
+     * SDK's default UI). See DefaultBoardChromeProps.icons.
+     */
+    icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
-declare function Scrawl({ children, preset, theme, portalContainer, className, style, onReady, onError, onThemeDiagnostic, canvas: suppliedCanvas, ...options }: ScrawlProps): react.JSX.Element;
+declare function Scrawl({ children, preset, theme, portalContainer, className, style, onReady, onError, onThemeDiagnostic, canvas: suppliedCanvas, icons, ...options }: ScrawlProps): react.JSX.Element;
 interface ScrawlCanvasProps {
     element?: HTMLCanvasElement;
     className?: string;
@@ -1238,8 +1269,10 @@ interface ScrawlDefaultUIProps {
     regions?: Partial<Record<DefaultUIRegion, boolean>>;
     /** Replace (component) or hide (null) a coarse region; omit for the SDK default. */
     slots?: DefaultUISlots;
+    /** Per-tool icon override for the primary toolbar buttons — see DefaultBoardChromeProps.icons. */
+    icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
-declare function ScrawlDefaultUI({ className, style, regions, slots }: ScrawlDefaultUIProps): react.JSX.Element;
+declare function ScrawlDefaultUI({ className, style, regions, slots, icons }: ScrawlDefaultUIProps): react.JSX.Element;
 declare function ScrawlPortal({ children }: {
     children: ReactNode;
 }): react.ReactPortal | null;

package/dist/react.js

@@ -1748,7 +1748,15 @@ function changeToOps(change, restoring = false) {
 //#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
@@ -1763,8 +1771,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,
@@ -2073,7 +2081,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 = [];
@@ -36350,8 +36358,8 @@ var INK_Z = .02;
 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);
@@ -36396,6 +36404,8 @@ function buildRibbonGeometry(points, baseWidth, z = INK_Z) {
 //#endregion
 //#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)
@@ -36420,12 +36430,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);
 	}
 	/**
@@ -36437,7 +36447,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;
@@ -36497,7 +36507,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) {
@@ -36506,7 +36516,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);
@@ -44645,9 +44655,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) {
@@ -44781,7 +44792,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));
@@ -45014,10 +45025,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) {
@@ -45088,10 +45096,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) {
@@ -45115,10 +45120,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) {
@@ -45195,6 +45197,7 @@ var ShapeTool = class {
 				id: crypto.randomUUID(),
 				color: this.ctx.inkColor(),
 				baseWidth: this.ctx.shapeStrokeWidth(),
+				tool: "shape",
 				points
 			}));
 			this.ctx.clusters.assign(strokes[0]);
@@ -45228,7 +45231,7 @@ 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.shapeStrokeWidth());
+				this.previews[i].geometry = buildRibbonGeometry(polyline, this.ctx.shapeStrokeWidth(), void 0, false);
 			}
 		}
 	}
@@ -49389,6 +49392,7 @@ var scrawlThemePresets = Object.freeze({
 		text: "#1c1c1a",
 		textMuted: "#62625c",
 		edge: "#d4d4cc",
+		primary: "#1856a3",
 		focus: "#1856a3",
 		selection: "#d9e8f7",
 		danger: "#a3302b",
@@ -49421,6 +49425,7 @@ var scrawlThemePresets = Object.freeze({
 		text: "#f4f4ee",
 		textMuted: "#b7b8ae",
 		edge: "#484a42",
+		primary: "#9dc8ef",
 		focus: "#9dc8ef",
 		selection: "#314b63",
 		danger: "#ffaaa3",
@@ -49454,6 +49459,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",
@@ -49486,6 +49492,7 @@ var colorTokens = /* @__PURE__ */ new Set([
 	"text",
 	"textMuted",
 	"edge",
+	"primary",
 	"focus",
 	"selection",
 	"danger",
@@ -50127,7 +50134,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");
@@ -50281,7 +50288,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", {
@@ -50744,7 +50754,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);
@@ -50840,7 +50850,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" }) {
@@ -50876,10 +50886,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,

package/dist/styles.css

@@ -151,7 +151,8 @@
 
 [data-scrawl-root] [data-scrawl-default-ui] button[aria-pressed="true"],
 [data-scrawl-portal] .scrawl-board__panel button[aria-pressed="true"] {
-  background: var(--scrawl-color-selection);
+  background: color-mix(in srgb, var(--scrawl-color-primary), var(--scrawl-color-surface) 82%);
+  color: var(--scrawl-color-primary);
   font-weight: var(--scrawl-font-weight-strong);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrawl-board/board",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "description": "The Scrawl Board SDK: an embeddable, collaborative infinite-canvas whiteboard for React and vanilla JS/TS apps.",
   "license": "Apache-2.0",
   "repository": {