@scrawl-board/board 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/browser.js

@@ -5161,10 +5161,18 @@ function pointerToPlane(clientX, clientY, canvas, camera, z) {
 	};
 }
 //#endregion
+//#region src/renderer/canvas/displayColor.ts
+function displayColor(hex) {
+	return new THREE.Color().setStyle(hex, THREE.NoColorSpace);
+}
+function setDisplayColor(color, hex) {
+	color.setStyle(hex, THREE.NoColorSpace);
+}
+//#endregion
 //#region src/renderer/canvas/fog.ts
 function createFogUniforms(color) {
 	return {
-		uFogColor: { value: new THREE.Color(color) },
+		uFogColor: { value: displayColor(color) },
 		uFogNear: { value: 100 },
 		uFogFar: { value: 900 }
 	};
@@ -5301,9 +5309,9 @@ function createBoardSurface(fog, theme) {
 		vertexShader: VERTEX$1,
 		fragmentShader: FRAGMENT,
 		uniforms: {
-			uColor: { value: new THREE.Color(theme.color) },
+			uColor: { value: displayColor(theme.color) },
 			uGridMode: { value: GRID_MODE_CODE[theme.gridMode] },
-			uGridColor: { value: new THREE.Color(theme.gridColor) },
+			uGridColor: { value: displayColor(theme.gridColor) },
 			uGridSpacing: { value: Math.max(.001, theme.gridSpacing) },
 			uGridLineWidthPx: { value: Math.max(.1, theme.gridLineWidth) },
 			uWorldPerPixel: { value: .05 },
@@ -5319,9 +5327,9 @@ function createBoardSurface(fog, theme) {
 /** 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);
+	setDisplayColor(uniforms.uColor.value, theme.color);
 	uniforms.uGridMode.value = GRID_MODE_CODE[theme.gridMode];
-	uniforms.uGridColor.value.set(theme.gridColor);
+	setDisplayColor(uniforms.uGridColor.value, 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];
@@ -5674,7 +5682,7 @@ var InkMaterials = class {
 			vertexShader: VERTEX,
 			fragmentShader,
 			uniforms: {
-				uColor: { value: new THREE.Color(color) },
+				uColor: { value: displayColor(color) },
 				...this.fog
 			},
 			transparent: true,

package/dist/index.d.ts

@@ -2910,16 +2910,8 @@ interface DefaultBoardChromeProps {
     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.
+     * Override any built-in tool icon. Tools without an override keep the
+     * SDK's outline icon. Accessible labels and shortcut tooltips are preserved.
      */
     icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
@@ -3022,11 +3014,8 @@ interface StyleShelfProps {
     controller: BoardController;
     snapshot: BoardSnapshot;
     /**
-     * Root-relative screen point (e.g. the active tool button's own position)
-     * to anchor above instead of the default: centred over the whole
-     * `.scrawl-board__tools` toolbar. `DefaultBoardChrome` supplies this
-     * automatically; omit it when rendering `StyleShelf` standalone (its own
-     * layout has no toolbar button to anchor to) to keep the centred default.
+     * Root-relative point beside the active tool. DefaultBoardChrome supplies
+     * this automatically and keeps the shelf within the board bounds.
      */
     anchor?: {
         x: number;
@@ -3072,7 +3061,7 @@ interface ScrawlProps extends Omit<CreateBoardControllerOptions, "canvas"> {
     /** 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 —
+     * Per-tool icon override for the default toolbar and More tools buttons —
      * only applies when you don't supply `children` (i.e. you're using the
      * SDK's default UI). See DefaultBoardChromeProps.icons.
      */
@@ -3104,7 +3093,7 @@ 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. */
+    /** Per-tool icon override for the toolbar and More tools buttons — see DefaultBoardChromeProps.icons. */
     icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
 declare function ScrawlDefaultUI({ className, style, regions, slots, icons }: ScrawlDefaultUIProps): react.JSX.Element;

package/dist/index.js

@@ -5319,10 +5319,18 @@ function pointerToPlane(clientX, clientY, canvas, camera, z) {
 	};
 }
 //#endregion
+//#region src/renderer/canvas/displayColor.ts
+function displayColor(hex) {
+	return new THREE.Color().setStyle(hex, THREE.NoColorSpace);
+}
+function setDisplayColor(color, hex) {
+	color.setStyle(hex, THREE.NoColorSpace);
+}
+//#endregion
 //#region src/renderer/canvas/fog.ts
 function createFogUniforms(color) {
 	return {
-		uFogColor: { value: new THREE.Color(color) },
+		uFogColor: { value: displayColor(color) },
 		uFogNear: { value: 100 },
 		uFogFar: { value: 900 }
 	};
@@ -5459,9 +5467,9 @@ function createBoardSurface(fog, theme) {
 		vertexShader: VERTEX$1,
 		fragmentShader: FRAGMENT,
 		uniforms: {
-			uColor: { value: new THREE.Color(theme.color) },
+			uColor: { value: displayColor(theme.color) },
 			uGridMode: { value: GRID_MODE_CODE[theme.gridMode] },
-			uGridColor: { value: new THREE.Color(theme.gridColor) },
+			uGridColor: { value: displayColor(theme.gridColor) },
 			uGridSpacing: { value: Math.max(.001, theme.gridSpacing) },
 			uGridLineWidthPx: { value: Math.max(.1, theme.gridLineWidth) },
 			uWorldPerPixel: { value: .05 },
@@ -5477,9 +5485,9 @@ function createBoardSurface(fog, theme) {
 /** 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);
+	setDisplayColor(uniforms.uColor.value, theme.color);
 	uniforms.uGridMode.value = GRID_MODE_CODE[theme.gridMode];
-	uniforms.uGridColor.value.set(theme.gridColor);
+	setDisplayColor(uniforms.uGridColor.value, 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];
@@ -5832,7 +5840,7 @@ var InkMaterials = class {
 			vertexShader: VERTEX,
 			fragmentShader,
 			uniforms: {
-				uColor: { value: new THREE.Color(color) },
+				uColor: { value: displayColor(color) },
 				...this.fog
 			},
 			transparent: true,
@@ -23048,6 +23056,50 @@ function LockDuplicateDelete({ controller, mutable, locked, ids }) {
 	});
 }
 //#endregion
+//#region src/ui/toolbar/tool-icon.tsx
+var PATHS = {
+	select: "m5 3 14 9-7 1-3 7Z",
+	marker: "m4 16 11-11 4 4L8 20H4Zm9-9 4 4",
+	highlighter: "m5 14 8-10 6 5-8 10Zm0 0 6 5M4 20h8",
+	eraser: "m3 14 9-10 9 8-7 8H9Zm4-4 9 8M14 20h7",
+	note: "M5 3h14v12l-6 6H5ZM13 21v-6h6",
+	text: "M4 5h16M12 5v15M8 20h8M4 5v3M20 5v3",
+	pan: "M8 12V5a2 2 0 0 1 4 0v6-7a2 2 0 0 1 4 0v7-5a2 2 0 0 1 4 0v9c0 8-11 9-14 3l-3-5a2 2 0 0 1 3-2l2 2",
+	table: "M3 4h18v16H3ZM3 10h18M9 4v16",
+	image: "M3 4h18v16H3Zm0 12 5-5 5 5 3-3 5 5M15 8h.01",
+	comment: "M4 4h16v12H9l-5 4Z",
+	stamp: "M8 14v-3a5 5 0 1 1 8 0v3l4 3v3H4v-3ZM4 17h16",
+	timer: "M9 2h6M12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 3v5l3 2",
+	"shape:line": "M4 20 20 4",
+	"shape:arrow": "M4 20 20 4M9 4h11v11",
+	"shape:rect": "M4 5h16v14H4Z",
+	"shape:ellipse": "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+	"shape:triangle": "m12 3 10 18H2Z",
+	"shape:diamond": "m12 2 10 10-10 10L2 12Z",
+	"shape:pentagon": "m12 2 10 8-4 12H6L2 10Z",
+	"shape:hexagon": "m7 3 10 0 5 9-5 9H7l-5-9Z",
+	"shape:octagon": "M8 2h8l6 6v8l-6 6H8l-6-6V8Z",
+	"shape:star": "m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1Z",
+	"shape:heart": "M12 21 3 12C-3 3 8-1 12 6c4-7 15-3 9 6Z",
+	more: "M12 4v16M4 12h16",
+	undo: "M9 5 4 10l5 5M4 10h10a6 6 0 0 1 6 6v3",
+	redo: "m15 5 5 5-5 5M20 10H10a6 6 0 0 0-6 6v3"
+};
+function ToolIcon({ tool }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		width: "22",
+		height: "22",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.7",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: PATHS[tool] ?? PATHS.more })
+	});
+}
+//#endregion
 //#region src/ui/toolbar/style-shelf.tsx
 var ERASER_RADII = [
 	["Fine", 1],
@@ -23096,6 +23148,7 @@ function StyleShelf({ controller, snapshot, anchor }) {
 		className: "scrawl-board__style-shelf",
 		"data-anchored": !!anchor,
 		role: "toolbar",
+		"aria-orientation": "vertical",
 		style: anchor ? {
 			left: anchor.x,
 			top: anchor.y
@@ -23132,17 +23185,29 @@ function StyleShelf({ controller, snapshot, anchor }) {
 			snapshot.tool === "eraser" && /* @__PURE__ */ jsxs("div", {
 				className: "scrawl-board__style-group",
 				children: [/* @__PURE__ */ jsx("span", { children: "Eraser size" }), ERASER_RADII.map(([label, radius]) => /* @__PURE__ */ jsx("button", {
+					"aria-label": label,
+					title: label,
 					"aria-pressed": style.eraserRadius === radius,
 					disabled: !mutable,
 					onClick: () => controller.style.set({ eraserRadius: radius }),
 					type: "button",
-					children: label
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							backgroundColor: "currentColor",
+							width: 4 + radius * 3,
+							height: 4 + radius * 3
+						}
+					})
 				}, label))]
 			}),
 			snapshot.tool === "table" && /* @__PURE__ */ jsxs("div", {
 				className: "scrawl-board__style-group",
 				children: [
-					/* @__PURE__ */ jsx("span", { children: "Rows" }),
+					/* @__PURE__ */ jsxs("span", {
+						"aria-live": "polite",
+						children: ["Rows: ", style.tableRows]
+					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "Fewer rows",
 						disabled: !mutable,
@@ -23150,10 +23215,6 @@ function StyleShelf({ controller, snapshot, anchor }) {
 						type: "button",
 						children: "−"
 					}),
-					/* @__PURE__ */ jsx("span", {
-						"aria-live": "polite",
-						children: style.tableRows
-					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "More rows",
 						disabled: !mutable,
@@ -23161,7 +23222,10 @@ function StyleShelf({ controller, snapshot, anchor }) {
 						type: "button",
 						children: "+"
 					}),
-					/* @__PURE__ */ jsx("span", { children: "Cols" }),
+					/* @__PURE__ */ jsxs("span", {
+						"aria-live": "polite",
+						children: ["Cols: ", style.tableCols]
+					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "Fewer columns",
 						disabled: !mutable,
@@ -23169,10 +23233,6 @@ function StyleShelf({ controller, snapshot, anchor }) {
 						type: "button",
 						children: "−"
 					}),
-					/* @__PURE__ */ jsx("span", {
-						"aria-live": "polite",
-						children: style.tableCols
-					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "More columns",
 						disabled: !mutable,
@@ -23327,6 +23387,7 @@ var INKS = [
 ];
 function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots, icons }) {
 	const [panel, setPanel] = useState(null);
+	const [moreOpen, setMoreOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [announcement, setAnnouncement] = useState("Board controls ready");
 	const [styleShelfAnchor, setStyleShelfAnchor] = useState(void 0);
@@ -23341,25 +23402,46 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 		if (panel === "search") searchRef.current?.focus();
 	}, [panel]);
 	useEffect(() => {
+		const root = chromeRef.current;
+		if (!root) return;
 		const recompute = () => {
-			const root = chromeRef.current;
-			const button = root?.querySelector(".scrawl-board__tools button[aria-pressed=\"true\"]");
-			if (!root || !button) {
+			const button = root.querySelector(".scrawl-board__tools button[aria-pressed=\"true\"]") ?? root.querySelector("[aria-label=\"More Board tools\"]");
+			if (!button) {
 				setStyleShelfAnchor(void 0);
 				return;
 			}
 			const buttonRect = button.getBoundingClientRect();
 			const rootRect = root.getBoundingClientRect();
+			const shelf = root.querySelector(".scrawl-board__style-shelf");
 			setStyleShelfAnchor({
-				x: buttonRect.left + buttonRect.width / 2 - rootRect.left,
-				y: buttonRect.top - rootRect.top
+				x: buttonRect.right - rootRect.left + 12,
+				y: Math.max(12, Math.min(buttonRect.top - rootRect.top, rootRect.height - (shelf?.offsetHeight ?? 0) - 12))
 			});
 		};
 		recompute();
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(recompute);
+		observer?.observe(root);
+		const shelf = root.querySelector(".scrawl-board__style-shelf");
+		if (shelf) observer?.observe(shelf);
+		root.addEventListener("scroll", recompute, true);
 		window.addEventListener("resize", recompute);
-		return () => window.removeEventListener("resize", recompute);
-	}, [snapshot.tool]);
+		return () => {
+			observer?.disconnect();
+			root.removeEventListener("scroll", recompute, true);
+			window.removeEventListener("resize", recompute);
+		};
+	}, [snapshot.tool, moreOpen]);
+	useEffect(() => {
+		if (!moreOpen) return;
+		chromeRef.current?.querySelector(".scrawl-board__more-tools button")?.focus();
+		const dismiss = (event) => {
+			if (!event.target.closest(".scrawl-board__more-tools, [aria-label=\"More Board tools\"]")) setMoreOpen(false);
+		};
+		document.addEventListener("pointerdown", dismiss);
+		return () => document.removeEventListener("pointerdown", dismiss);
+	}, [moreOpen]);
 	const open = (next, opener) => {
+		setMoreOpen(false);
 		openerRef.current = opener;
 		setPanel(next);
 	};
@@ -23368,6 +23450,8 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 		queueMicrotask(() => openerRef.current?.focus());
 	}, []);
 	const chooseTool = (tool) => {
+		if (moreOpen) chromeRef.current?.querySelector("[aria-label=\"More Board tools\"]")?.focus();
+		setMoreOpen(false);
 		controller.tools.select(tool);
 		const label = [...PRIMARY_TOOLS, ...MORE_TOOLS].find((item) => item.tool === tool)?.label ?? tool;
 		setAnnouncement(`${label} tool selected`);
@@ -23375,6 +23459,13 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 	const onKeyDown = (event) => {
 		const editing = event.target.matches("input, textarea, select, [contenteditable=true]");
 		const modifier = event.metaKey || event.ctrlKey;
+		if (event.key === "Escape" && moreOpen) {
+			event.preventDefault();
+			event.stopPropagation();
+			setMoreOpen(false);
+			chromeRef.current?.querySelector("[aria-label=\"More Board tools\"]")?.focus();
+			return;
+		}
 		if (event.key === "Escape" && panel) {
 			event.preventDefault();
 			event.stopPropagation();
@@ -23491,6 +23582,7 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 				"aria-label": "Board tools",
 				className: "scrawl-board__tools",
 				role: "toolbar",
+				"aria-orientation": "vertical",
 				children: [
 					enabled("tools") && /* @__PURE__ */ jsxs(Fragment, { children: [PRIMARY_TOOLS.map(({ tool, label, key }) => /* @__PURE__ */ jsx("button", {
 						"aria-label": `${label} tool`,
@@ -23499,37 +23591,31 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 						onClick: () => chooseTool(tool),
 						title: `${label} (${key})`,
 						type: "button",
-						children: icons?.[tool] ? /* @__PURE__ */ jsx("span", {
+						children: /* @__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", {
-							"aria-label": "More Board tools",
-							disabled: !mutable,
-							onChange: (event) => chooseTool(event.currentTarget.value),
-							value: MORE_TOOLS.some((item) => item.tool === snapshot.tool) ? snapshot.tool : "",
-							children: [/* @__PURE__ */ jsx("option", {
-								value: "",
-								children: "Choose"
-							}), MORE_TOOLS.map(({ tool, label }) => /* @__PURE__ */ jsx("option", {
-								value: tool,
-								children: label
-							}, tool))]
-						})]
+							children: icons?.[tool] ?? /* @__PURE__ */ jsx(ToolIcon, { tool })
+						})
+					}, tool)), /* @__PURE__ */ jsx("button", {
+						"aria-label": "More Board tools",
+						"aria-expanded": moreOpen,
+						disabled: !mutable,
+						onClick: () => setMoreOpen((value) => !value),
+						title: "More tools",
+						type: "button",
+						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "more" })
 					})] }),
-					enabled("style") && /* @__PURE__ */ jsxs("button", {
+					enabled("style") && /* @__PURE__ */ jsx("button", {
 						"aria-label": "Ink style",
 						"aria-expanded": panel === "style",
 						disabled: !mutable,
+						title: "Ink style",
 						onClick: (event) => open("style", event.currentTarget),
 						type: "button",
-						children: [/* @__PURE__ */ jsx("span", {
+						children: /* @__PURE__ */ jsx("span", {
 							"aria-hidden": "true",
 							className: "scrawl-board__ink-sample",
 							style: { backgroundColor: snapshot.style.inkColor }
-						}), "Ink"]
+						})
 					}),
 					enabled("history") && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 						"aria-label": "Undo",
@@ -23538,8 +23624,9 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 							controller.history.undo();
 							setAnnouncement("Undo");
 						},
+						title: "Undo",
 						type: "button",
-						children: "Undo"
+						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "undo" })
 					}), /* @__PURE__ */ jsx("button", {
 						"aria-label": "Redo",
 						disabled: !snapshot.canRedo || !mutable,
@@ -23547,11 +23634,31 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 							controller.history.redo();
 							setAnnouncement("Redo");
 						},
+						title: "Redo",
 						type: "button",
-						children: "Redo"
+						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "redo" })
 					})] })
 				]
 			})),
+			moreOpen && enabled("tools") && slots?.toolbar !== null && /* @__PURE__ */ jsx("div", {
+				"aria-label": "More tools",
+				className: "scrawl-board__more-tools",
+				role: "toolbar",
+				"aria-orientation": "vertical",
+				children: MORE_TOOLS.map(({ tool, label }) => /* @__PURE__ */ jsx("button", {
+					"aria-label": `${label} tool`,
+					"aria-pressed": snapshot.tool === tool,
+					disabled: !mutable,
+					"data-tool": tool,
+					onClick: () => chooseTool(tool),
+					title: label,
+					type: "button",
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: icons?.[tool] ?? /* @__PURE__ */ jsx(ToolIcon, { tool })
+					})
+				}, tool))
+			}),
 			enabled("view") && /* @__PURE__ */ jsxs("div", {
 				"aria-label": "Board view",
 				className: "scrawl-board__view",
@@ -23586,7 +23693,7 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 					})
 				]
 			}),
-			renderSlot(slots?.stylePanel, enabled("styleShelf") && /* @__PURE__ */ jsx(StyleShelf, {
+			renderSlot(slots?.stylePanel, enabled("styleShelf") && !moreOpen && /* @__PURE__ */ jsx(StyleShelf, {
 				anchor: styleShelfAnchor,
 				controller,
 				snapshot

package/dist/react.d.ts

@@ -1735,16 +1735,8 @@ interface DefaultBoardChromeProps {
     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.
+     * Override any built-in tool icon. Tools without an override keep the
+     * SDK's outline icon. Accessible labels and shortcut tooltips are preserved.
      */
     icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
@@ -1847,11 +1839,8 @@ interface StyleShelfProps {
     controller: BoardController;
     snapshot: BoardSnapshot;
     /**
-     * Root-relative screen point (e.g. the active tool button's own position)
-     * to anchor above instead of the default: centred over the whole
-     * `.scrawl-board__tools` toolbar. `DefaultBoardChrome` supplies this
-     * automatically; omit it when rendering `StyleShelf` standalone (its own
-     * layout has no toolbar button to anchor to) to keep the centred default.
+     * Root-relative point beside the active tool. DefaultBoardChrome supplies
+     * this automatically and keeps the shelf within the board bounds.
      */
     anchor?: {
         x: number;
@@ -1897,7 +1886,7 @@ interface ScrawlProps extends Omit<CreateBoardControllerOptions, "canvas"> {
     /** 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 —
+     * Per-tool icon override for the default toolbar and More tools buttons —
      * only applies when you don't supply `children` (i.e. you're using the
      * SDK's default UI). See DefaultBoardChromeProps.icons.
      */
@@ -1929,7 +1918,7 @@ 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. */
+    /** Per-tool icon override for the toolbar and More tools buttons — see DefaultBoardChromeProps.icons. */
     icons?: Partial<Record<BuiltInTool, ReactNode>>;
 }
 declare function ScrawlDefaultUI({ className, style, regions, slots, icons }: ScrawlDefaultUIProps): react.JSX.Element;

package/dist/react.js

@@ -5203,10 +5203,18 @@ function pointerToPlane(clientX, clientY, canvas, camera, z) {
 	};
 }
 //#endregion
+//#region src/renderer/canvas/displayColor.ts
+function displayColor(hex) {
+	return new THREE.Color().setStyle(hex, THREE.NoColorSpace);
+}
+function setDisplayColor(color, hex) {
+	color.setStyle(hex, THREE.NoColorSpace);
+}
+//#endregion
 //#region src/renderer/canvas/fog.ts
 function createFogUniforms(color) {
 	return {
-		uFogColor: { value: new THREE.Color(color) },
+		uFogColor: { value: displayColor(color) },
 		uFogNear: { value: 100 },
 		uFogFar: { value: 900 }
 	};
@@ -5343,9 +5351,9 @@ function createBoardSurface(fog, theme) {
 		vertexShader: VERTEX$1,
 		fragmentShader: FRAGMENT,
 		uniforms: {
-			uColor: { value: new THREE.Color(theme.color) },
+			uColor: { value: displayColor(theme.color) },
 			uGridMode: { value: GRID_MODE_CODE[theme.gridMode] },
-			uGridColor: { value: new THREE.Color(theme.gridColor) },
+			uGridColor: { value: displayColor(theme.gridColor) },
 			uGridSpacing: { value: Math.max(.001, theme.gridSpacing) },
 			uGridLineWidthPx: { value: Math.max(.1, theme.gridLineWidth) },
 			uWorldPerPixel: { value: .05 },
@@ -5361,9 +5369,9 @@ function createBoardSurface(fog, theme) {
 /** 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);
+	setDisplayColor(uniforms.uColor.value, theme.color);
 	uniforms.uGridMode.value = GRID_MODE_CODE[theme.gridMode];
-	uniforms.uGridColor.value.set(theme.gridColor);
+	setDisplayColor(uniforms.uGridColor.value, 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];
@@ -5716,7 +5724,7 @@ var InkMaterials = class {
 			vertexShader: VERTEX,
 			fragmentShader,
 			uniforms: {
-				uColor: { value: new THREE.Color(color) },
+				uColor: { value: displayColor(color) },
 				...this.fog
 			},
 			transparent: true,
@@ -22765,6 +22773,50 @@ function LockDuplicateDelete({ controller, mutable, locked, ids }) {
 	});
 }
 //#endregion
+//#region src/ui/toolbar/tool-icon.tsx
+var PATHS = {
+	select: "m5 3 14 9-7 1-3 7Z",
+	marker: "m4 16 11-11 4 4L8 20H4Zm9-9 4 4",
+	highlighter: "m5 14 8-10 6 5-8 10Zm0 0 6 5M4 20h8",
+	eraser: "m3 14 9-10 9 8-7 8H9Zm4-4 9 8M14 20h7",
+	note: "M5 3h14v12l-6 6H5ZM13 21v-6h6",
+	text: "M4 5h16M12 5v15M8 20h8M4 5v3M20 5v3",
+	pan: "M8 12V5a2 2 0 0 1 4 0v6-7a2 2 0 0 1 4 0v7-5a2 2 0 0 1 4 0v9c0 8-11 9-14 3l-3-5a2 2 0 0 1 3-2l2 2",
+	table: "M3 4h18v16H3ZM3 10h18M9 4v16",
+	image: "M3 4h18v16H3Zm0 12 5-5 5 5 3-3 5 5M15 8h.01",
+	comment: "M4 4h16v12H9l-5 4Z",
+	stamp: "M8 14v-3a5 5 0 1 1 8 0v3l4 3v3H4v-3ZM4 17h16",
+	timer: "M9 2h6M12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 3v5l3 2",
+	"shape:line": "M4 20 20 4",
+	"shape:arrow": "M4 20 20 4M9 4h11v11",
+	"shape:rect": "M4 5h16v14H4Z",
+	"shape:ellipse": "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+	"shape:triangle": "m12 3 10 18H2Z",
+	"shape:diamond": "m12 2 10 10-10 10L2 12Z",
+	"shape:pentagon": "m12 2 10 8-4 12H6L2 10Z",
+	"shape:hexagon": "m7 3 10 0 5 9-5 9H7l-5-9Z",
+	"shape:octagon": "M8 2h8l6 6v8l-6 6H8l-6-6V8Z",
+	"shape:star": "m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1Z",
+	"shape:heart": "M12 21 3 12C-3 3 8-1 12 6c4-7 15-3 9 6Z",
+	more: "M12 4v16M4 12h16",
+	undo: "M9 5 4 10l5 5M4 10h10a6 6 0 0 1 6 6v3",
+	redo: "m15 5 5 5-5 5M20 10H10a6 6 0 0 0-6 6v3"
+};
+function ToolIcon({ tool }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		width: "22",
+		height: "22",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.7",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: PATHS[tool] ?? PATHS.more })
+	});
+}
+//#endregion
 //#region src/ui/toolbar/style-shelf.tsx
 var ERASER_RADII = [
 	["Fine", 1],
@@ -22813,6 +22865,7 @@ function StyleShelf({ controller, snapshot, anchor }) {
 		className: "scrawl-board__style-shelf",
 		"data-anchored": !!anchor,
 		role: "toolbar",
+		"aria-orientation": "vertical",
 		style: anchor ? {
 			left: anchor.x,
 			top: anchor.y
@@ -22849,17 +22902,29 @@ function StyleShelf({ controller, snapshot, anchor }) {
 			snapshot.tool === "eraser" && /* @__PURE__ */ jsxs("div", {
 				className: "scrawl-board__style-group",
 				children: [/* @__PURE__ */ jsx("span", { children: "Eraser size" }), ERASER_RADII.map(([label, radius]) => /* @__PURE__ */ jsx("button", {
+					"aria-label": label,
+					title: label,
 					"aria-pressed": style.eraserRadius === radius,
 					disabled: !mutable,
 					onClick: () => controller.style.set({ eraserRadius: radius }),
 					type: "button",
-					children: label
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							backgroundColor: "currentColor",
+							width: 4 + radius * 3,
+							height: 4 + radius * 3
+						}
+					})
 				}, label))]
 			}),
 			snapshot.tool === "table" && /* @__PURE__ */ jsxs("div", {
 				className: "scrawl-board__style-group",
 				children: [
-					/* @__PURE__ */ jsx("span", { children: "Rows" }),
+					/* @__PURE__ */ jsxs("span", {
+						"aria-live": "polite",
+						children: ["Rows: ", style.tableRows]
+					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "Fewer rows",
 						disabled: !mutable,
@@ -22867,10 +22932,6 @@ function StyleShelf({ controller, snapshot, anchor }) {
 						type: "button",
 						children: "−"
 					}),
-					/* @__PURE__ */ jsx("span", {
-						"aria-live": "polite",
-						children: style.tableRows
-					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "More rows",
 						disabled: !mutable,
@@ -22878,7 +22939,10 @@ function StyleShelf({ controller, snapshot, anchor }) {
 						type: "button",
 						children: "+"
 					}),
-					/* @__PURE__ */ jsx("span", { children: "Cols" }),
+					/* @__PURE__ */ jsxs("span", {
+						"aria-live": "polite",
+						children: ["Cols: ", style.tableCols]
+					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "Fewer columns",
 						disabled: !mutable,
@@ -22886,10 +22950,6 @@ function StyleShelf({ controller, snapshot, anchor }) {
 						type: "button",
 						children: "−"
 					}),
-					/* @__PURE__ */ jsx("span", {
-						"aria-live": "polite",
-						children: style.tableCols
-					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "More columns",
 						disabled: !mutable,
@@ -23044,6 +23104,7 @@ var INKS = [
 ];
 function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots, icons }) {
 	const [panel, setPanel] = useState(null);
+	const [moreOpen, setMoreOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [announcement, setAnnouncement] = useState("Board controls ready");
 	const [styleShelfAnchor, setStyleShelfAnchor] = useState(void 0);
@@ -23058,25 +23119,46 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 		if (panel === "search") searchRef.current?.focus();
 	}, [panel]);
 	useEffect(() => {
+		const root = chromeRef.current;
+		if (!root) return;
 		const recompute = () => {
-			const root = chromeRef.current;
-			const button = root?.querySelector(".scrawl-board__tools button[aria-pressed=\"true\"]");
-			if (!root || !button) {
+			const button = root.querySelector(".scrawl-board__tools button[aria-pressed=\"true\"]") ?? root.querySelector("[aria-label=\"More Board tools\"]");
+			if (!button) {
 				setStyleShelfAnchor(void 0);
 				return;
 			}
 			const buttonRect = button.getBoundingClientRect();
 			const rootRect = root.getBoundingClientRect();
+			const shelf = root.querySelector(".scrawl-board__style-shelf");
 			setStyleShelfAnchor({
-				x: buttonRect.left + buttonRect.width / 2 - rootRect.left,
-				y: buttonRect.top - rootRect.top
+				x: buttonRect.right - rootRect.left + 12,
+				y: Math.max(12, Math.min(buttonRect.top - rootRect.top, rootRect.height - (shelf?.offsetHeight ?? 0) - 12))
 			});
 		};
 		recompute();
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(recompute);
+		observer?.observe(root);
+		const shelf = root.querySelector(".scrawl-board__style-shelf");
+		if (shelf) observer?.observe(shelf);
+		root.addEventListener("scroll", recompute, true);
 		window.addEventListener("resize", recompute);
-		return () => window.removeEventListener("resize", recompute);
-	}, [snapshot.tool]);
+		return () => {
+			observer?.disconnect();
+			root.removeEventListener("scroll", recompute, true);
+			window.removeEventListener("resize", recompute);
+		};
+	}, [snapshot.tool, moreOpen]);
+	useEffect(() => {
+		if (!moreOpen) return;
+		chromeRef.current?.querySelector(".scrawl-board__more-tools button")?.focus();
+		const dismiss = (event) => {
+			if (!event.target.closest(".scrawl-board__more-tools, [aria-label=\"More Board tools\"]")) setMoreOpen(false);
+		};
+		document.addEventListener("pointerdown", dismiss);
+		return () => document.removeEventListener("pointerdown", dismiss);
+	}, [moreOpen]);
 	const open = (next, opener) => {
+		setMoreOpen(false);
 		openerRef.current = opener;
 		setPanel(next);
 	};
@@ -23085,6 +23167,8 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 		queueMicrotask(() => openerRef.current?.focus());
 	}, []);
 	const chooseTool = (tool) => {
+		if (moreOpen) chromeRef.current?.querySelector("[aria-label=\"More Board tools\"]")?.focus();
+		setMoreOpen(false);
 		controller.tools.select(tool);
 		const label = [...PRIMARY_TOOLS, ...MORE_TOOLS].find((item) => item.tool === tool)?.label ?? tool;
 		setAnnouncement(`${label} tool selected`);
@@ -23092,6 +23176,13 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 	const onKeyDown = (event) => {
 		const editing = event.target.matches("input, textarea, select, [contenteditable=true]");
 		const modifier = event.metaKey || event.ctrlKey;
+		if (event.key === "Escape" && moreOpen) {
+			event.preventDefault();
+			event.stopPropagation();
+			setMoreOpen(false);
+			chromeRef.current?.querySelector("[aria-label=\"More Board tools\"]")?.focus();
+			return;
+		}
 		if (event.key === "Escape" && panel) {
 			event.preventDefault();
 			event.stopPropagation();
@@ -23208,6 +23299,7 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 				"aria-label": "Board tools",
 				className: "scrawl-board__tools",
 				role: "toolbar",
+				"aria-orientation": "vertical",
 				children: [
 					enabled("tools") && /* @__PURE__ */ jsxs(Fragment, { children: [PRIMARY_TOOLS.map(({ tool, label, key }) => /* @__PURE__ */ jsx("button", {
 						"aria-label": `${label} tool`,
@@ -23216,37 +23308,31 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 						onClick: () => chooseTool(tool),
 						title: `${label} (${key})`,
 						type: "button",
-						children: icons?.[tool] ? /* @__PURE__ */ jsx("span", {
+						children: /* @__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", {
-							"aria-label": "More Board tools",
-							disabled: !mutable,
-							onChange: (event) => chooseTool(event.currentTarget.value),
-							value: MORE_TOOLS.some((item) => item.tool === snapshot.tool) ? snapshot.tool : "",
-							children: [/* @__PURE__ */ jsx("option", {
-								value: "",
-								children: "Choose"
-							}), MORE_TOOLS.map(({ tool, label }) => /* @__PURE__ */ jsx("option", {
-								value: tool,
-								children: label
-							}, tool))]
-						})]
+							children: icons?.[tool] ?? /* @__PURE__ */ jsx(ToolIcon, { tool })
+						})
+					}, tool)), /* @__PURE__ */ jsx("button", {
+						"aria-label": "More Board tools",
+						"aria-expanded": moreOpen,
+						disabled: !mutable,
+						onClick: () => setMoreOpen((value) => !value),
+						title: "More tools",
+						type: "button",
+						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "more" })
 					})] }),
-					enabled("style") && /* @__PURE__ */ jsxs("button", {
+					enabled("style") && /* @__PURE__ */ jsx("button", {
 						"aria-label": "Ink style",
 						"aria-expanded": panel === "style",
 						disabled: !mutable,
+						title: "Ink style",
 						onClick: (event) => open("style", event.currentTarget),
 						type: "button",
-						children: [/* @__PURE__ */ jsx("span", {
+						children: /* @__PURE__ */ jsx("span", {
 							"aria-hidden": "true",
 							className: "scrawl-board__ink-sample",
 							style: { backgroundColor: snapshot.style.inkColor }
-						}), "Ink"]
+						})
 					}),
 					enabled("history") && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 						"aria-label": "Undo",
@@ -23255,8 +23341,9 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 							controller.history.undo();
 							setAnnouncement("Undo");
 						},
+						title: "Undo",
 						type: "button",
-						children: "Undo"
+						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "undo" })
 					}), /* @__PURE__ */ jsx("button", {
 						"aria-label": "Redo",
 						disabled: !snapshot.canRedo || !mutable,
@@ -23264,11 +23351,31 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 							controller.history.redo();
 							setAnnouncement("Redo");
 						},
+						title: "Redo",
 						type: "button",
-						children: "Redo"
+						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "redo" })
 					})] })
 				]
 			})),
+			moreOpen && enabled("tools") && slots?.toolbar !== null && /* @__PURE__ */ jsx("div", {
+				"aria-label": "More tools",
+				className: "scrawl-board__more-tools",
+				role: "toolbar",
+				"aria-orientation": "vertical",
+				children: MORE_TOOLS.map(({ tool, label }) => /* @__PURE__ */ jsx("button", {
+					"aria-label": `${label} tool`,
+					"aria-pressed": snapshot.tool === tool,
+					disabled: !mutable,
+					"data-tool": tool,
+					onClick: () => chooseTool(tool),
+					title: label,
+					type: "button",
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: icons?.[tool] ?? /* @__PURE__ */ jsx(ToolIcon, { tool })
+					})
+				}, tool))
+			}),
 			enabled("view") && /* @__PURE__ */ jsxs("div", {
 				"aria-label": "Board view",
 				className: "scrawl-board__view",
@@ -23303,7 +23410,7 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 					})
 				]
 			}),
-			renderSlot(slots?.stylePanel, enabled("styleShelf") && /* @__PURE__ */ jsx(StyleShelf, {
+			renderSlot(slots?.stylePanel, enabled("styleShelf") && !moreOpen && /* @__PURE__ */ jsx(StyleShelf, {
 				anchor: styleShelfAnchor,
 				controller,
 				snapshot

package/dist/styles.css

@@ -7,6 +7,7 @@
   --scrawl-color-text-muted: #62625c;
   --scrawl-color-edge: #d4d4cc;
   --scrawl-color-focus: #1856a3;
+  --scrawl-color-primary: #1856a3;
   --scrawl-color-selection: #d9e8f7;
   --scrawl-color-danger: #a3302b;
   --scrawl-color-warning: #805400;
@@ -102,9 +103,10 @@
 [data-scrawl-root] .scrawl-board__actions,
 [data-scrawl-root] .scrawl-board__tools,
 [data-scrawl-root] .scrawl-board__view,
+[data-scrawl-root] .scrawl-board__more-tools,
 [data-scrawl-root] .scrawl-board__style-shelf {
   align-items: center;
-  background: var(--scrawl-color-surface-raised);
+  background: var(--scrawl-color-surface);
   border: 1px solid color-mix(in srgb, var(--scrawl-color-surface-raised), var(--scrawl-color-text) 12%);
   border-radius: var(--scrawl-radius-panel);
   display: flex;
@@ -115,25 +117,45 @@
 }
 
 [data-scrawl-root] .scrawl-board__actions { inset-block-start: 12px; inset-inline-end: 12px; }
-[data-scrawl-root] .scrawl-board__tools { inset-block-end: 12px; inset-inline-start: 50%; max-inline-size: calc(100% - 24px); transform: translateX(-50%); }
+[data-scrawl-root] .scrawl-board__tools {
+  inset-block-start: 50%;
+  inset-inline-start: 12px;
+  inline-size: 54px;
+  max-block-size: calc(100% - 144px);
+  overflow-y: auto;
+  flex-direction: column;
+  transform: translateY(-50%);
+  box-shadow: var(--scrawl-elevation-low);
+}
+[data-scrawl-root] .scrawl-board__tools > button { flex: 0 0 44px; inline-size: 44px; }
+[data-scrawl-root] .scrawl-board__tools button,
+[data-scrawl-root] .scrawl-board__more-tools button { display: flex; align-items: center; justify-content: center; }
+[data-scrawl-root] .scrawl-board__tools svg,
+[data-scrawl-root] .scrawl-board__more-tools svg { display: block; inline-size: 22px; block-size: 22px; }
+[data-scrawl-root] .scrawl-board__tools .scrawl-board__ink-sample { margin: 0; }
+[data-scrawl-root] .scrawl-board__tools :focus-visible,
+[data-scrawl-root] .scrawl-board__more-tools :focus-visible,
+[data-scrawl-root] .scrawl-board__style-shelf :focus-visible { outline-offset: -3px; }
 [data-scrawl-root] .scrawl-board__view { inset-block-end: 12px; inset-inline-end: 12px; }
+[data-scrawl-root] .scrawl-board__more-tools,
 [data-scrawl-root] .scrawl-board__style-shelf {
-  gap: 12px;
-  inset-block-end: 68px;
-  inset-inline-start: 50%;
-  max-inline-size: calc(100% - 24px);
-  overflow-x: auto;
-  transform: translateX(-50%);
+  inset-inline-start: 78px;
+  inset-block-start: 72px;
+  inline-size: 106px;
+  max-block-size: calc(100% - 84px);
+  overflow-y: auto;
+  box-shadow: var(--scrawl-elevation-low);
 }
-/* `anchor` supplied (DefaultBoardChrome's own toolbar): follow the active
-   tool button's own position (set inline as left/top) instead of centring
-   over the whole toolbar — inset-block-end must yield explicitly, since an
-   inline `top` alongside a stylesheet `bottom` would otherwise stretch the
-   box rather than let `top` alone govern its position. */
-[data-scrawl-root] .scrawl-board__style-shelf[data-anchored="true"] {
-  inset-block-end: auto;
-  transform: translate(-50%, calc(-100% - 12px));
+[data-scrawl-root] .scrawl-board__more-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px;
+  inline-size: 100%;
+  white-space: normal;
 }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group > span { grid-column: 1 / -1; text-align: center; }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group button { padding: 4px; font-size: 12px; }
 [data-scrawl-root] .scrawl-board__style-group { align-items: center; display: flex; gap: 6px; white-space: nowrap; }
 [data-scrawl-root] .scrawl-board__style-group > span:first-child { color: var(--scrawl-color-text-muted); font-size: 0.75rem; font-weight: var(--scrawl-font-weight-strong); text-transform: uppercase; }
 [data-scrawl-root] .scrawl-board__style-group button { align-items: center; display: flex; justify-content: center; padding: 6px 10px; }
@@ -221,30 +243,6 @@
 [data-scrawl-root] [data-scrawl-default-ui] button:disabled,
 [data-scrawl-root] [data-scrawl-default-ui] select:disabled { color: var(--scrawl-color-text-muted); cursor: not-allowed; }
 
-[data-scrawl-root] .scrawl-board__tool-select {
-  align-items: center;
-  display: flex;
-  min-block-size: 44px;
-}
-
-[data-scrawl-root] .scrawl-board__tool-select > span { block-size: 1px; clip: rect(0, 0, 0, 0); inline-size: 1px; overflow: hidden; position: absolute; }
-[data-scrawl-root] .scrawl-board__tool-select select {
-  -webkit-appearance: none;
-  appearance: none;
-  /* Chevron drawn from two gradient triangles rather than an embedded asset
-     reference (disallowed by this stylesheet's policy, see styles.test.ts),
-     and currentColor keeps it Theme-aware where a bitmap/SVG asset would
-     need its own colour. */
-  background-image:
-    linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: right 14px center, right 9px center;
-  background-repeat: no-repeat;
-  background-size: 5px 5px, 5px 5px;
-  min-block-size: 44px;
-  padding-inline: 8px 24px;
-}
-
 [data-scrawl-root] .scrawl-board__ink-sample,
 [data-scrawl-portal] .scrawl-board__ink-options span {
   border: 1px solid color-mix(in srgb, currentColor, transparent 72%);
@@ -334,14 +332,16 @@
 }
 [data-scrawl-portal] .scrawl-board__inline-editor-actions button { min-block-size: auto; min-inline-size: auto; padding: 2px 6px; }
 
-@media (max-width: 60rem) {
-  [data-scrawl-root] .scrawl-board__actions,
-  [data-scrawl-root] .scrawl-board__tools { inline-size: calc(100% - 24px); overflow-x: auto; }
-  [data-scrawl-root] .scrawl-board__actions { justify-content: flex-end; }
-  [data-scrawl-root] .scrawl-board__tools { flex-wrap: nowrap; inset-inline-start: 12px; transform: none; }
-  [data-scrawl-root] .scrawl-board__tools :focus-visible { outline-offset: -3px; }
-  [data-scrawl-root] .scrawl-board__view { inset-block-end: 84px; }
+[data-scrawl-portal] .scrawl-board__panel[aria-label="Ink style"] {
+  inset-inline-start: 78px;
+  inset-block-start: 72px;
+  inset-block-end: auto;
+  inline-size: 156px;
+  max-block-size: calc(100% - 84px);
+  transform: none;
 }
+[data-scrawl-portal] .scrawl-board__panel[aria-label="Ink style"] .scrawl-board__panel-heading { flex-direction: column; align-items: stretch; }
+[data-scrawl-portal] .scrawl-board__ink-options { grid-template-columns: 1fr; }
 
 [data-scrawl-root] .scrawl-board__status, [data-scrawl-portal] .scrawl-board__status {
   block-size: 1px;

package/package.json

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