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

package/dist/react.js

@@ -126,7 +126,11 @@ function validateStrokes(raw) {
 	for (let index = 0; index < raw.length; index += 1) {
 		const value = raw[index];
 		const path = `strokes[${index}]`;
-		if (!isRecord(value) || !nonempty(value.id) || !nonempty(value.color) || !positive(value.baseWidth) || !optionalEnum(value.tool, ["marker", "highlighter"]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
+		if (!isRecord(value) || !nonempty(value.id) || !nonempty(value.color) || !positive(value.baseWidth) || !optionalEnum(value.tool, [
+			"marker",
+			"highlighter",
+			"shape"
+		]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
 		const points = [];
 		for (let pointIndex = 0; pointIndex < value.points.length; pointIndex += 1) {
 			const point = normalizePoint(value.points[pointIndex]);
@@ -407,9 +411,21 @@ var HIGHLIGHT_COLORS = {
 };
 var NOTE_COLORS = {
 	yellow: "#FDE68A",
+	amber: "#FCD34D",
+	orange: "#FDBA74",
+	peach: "#FED7AA",
+	red: "#FCA5A5",
+	rose: "#FECACA",
 	pink: "#FBCFE8",
+	magenta: "#F9A8D4",
+	purple: "#D8B4FE",
+	lavender: "#E9D5FF",
 	blue: "#BFDBFE",
-	green: "#BBF7D0"
+	cornflower: "#93C5FD",
+	sky: "#7DD3FC",
+	cyan: "#BAE6FD",
+	green: "#BBF7D0",
+	mint: "#86EFAC"
 };
 var TEXT_DEFAULT_SIZE = 1.8;
 function cloneText(block) {
@@ -35926,12 +35942,16 @@ var FRAGMENT = `
     return max(lineAlpha2.x, lineAlpha2.y);
   }
 
-  // Distance from p's nearest grid intersection, in world units. Dot radius
-  // matches the configured line width in pixels, same anti-aliasing.
+  // Distance from p's nearest grid intersection, in world units. A line's
+  // width reads as visible even at 1px because it spans the whole screen;
+  // an isolated dot at that same 1px radius gets almost entirely eaten by
+  // anti-aliasing and all but disappears. Scaling the radius up keeps a
+  // dot's on-screen weight comparable to a line drawn with the same
+  // uGridLineWidthPx, rather than using it literally as a radius.
   float gridDotAlpha(vec2 p) {
     vec2 cell = mod(p, uGridSpacing) - uGridSpacing * 0.5;
     float dist = length(cell);
-    float radius = uGridLineWidthPx * uWorldPerPixel;
+    float radius = uGridLineWidthPx * uWorldPerPixel * 1.75;
     float aa = uWorldPerPixel;
     return 1.0 - smoothstep(radius - aa * 0.5, radius + aa * 0.5, dist);
   }
@@ -36508,6 +36528,7 @@ var StrokeRenderer = class {
 			if (mesh) {
 				mesh.geometry.dispose();
 				mesh.geometry = buildRibbonGeometry(stroke.points, stroke.baseWidth, strokeZ(stroke), handDrawn(stroke));
+				mesh.material = stroke.tool === "highlighter" ? this.materials.highlight(stroke.color) : this.materials.get(stroke.color);
 			}
 		}
 		for (const stroke of change.transformed) {
@@ -44687,7 +44708,7 @@ function distToSegmentSq(p, a, b) {
 }
 //#endregion
 //#region src/interaction/tools/eraserTool.ts
-var DECAY_PER_PASS = .4;
+var DECAY_PER_PASS = 1;
 /** A point can take another decay pass after this long — rubbing works. */
 var REARM_MS = 250;
 var EraserTool = class {
@@ -44781,19 +44802,11 @@ var EraserTool = class {
 			const runs = partitionByErasure(current.points);
 			const survives = runs.filter((r) => r.survives && r.points.length >= 2);
 			const keepId = survives.length === 1 && survives[0].points.length === current.points.length;
-			const m = current.matrix;
 			for (const run of runs) if (run.survives && run.points.length >= 2) after.push({
 				...current,
 				id: keepId ? current.id : crypto.randomUUID(),
 				points: run.points
 			});
-			else if (!run.survives) {
-				const world = m ? run.points.map((p) => ({
-					...p,
-					...apply(m, p)
-				})) : run.points;
-				this.ctx.renderer.addGhost(world, current.color, current.baseWidth * (m ? avgScale(m) : 1), current.tool !== "shape");
-			}
 		}
 		doc.removeStrokes(before.map((s) => s.id));
 		doc.addStrokes(after.map(cloneStroke));
@@ -45001,10 +45014,10 @@ function buildShape(kind, a, b, step, constrain) {
 		case "ellipse": return [ellipse(a, targetB, step)];
 		case "line": return [sampleSegment(a, constrain ? snappedEnd(a, b) : b, step)];
 		case "arrow": return arrow(a, constrain ? snappedEnd(a, b) : b, step);
-		case "triangle": return [polygon(3, a, targetB, step, -Math.PI / 2)];
+		case "triangle": return [polygon(3, a, targetB, step, Math.PI / 2)];
 		case "diamond": return [polygon(4, a, targetB, step, 0)];
-		case "pentagon": return [polygon(5, a, targetB, step, -Math.PI / 2)];
-		case "hexagon": return [polygon(6, a, targetB, step, -Math.PI / 2)];
+		case "pentagon": return [polygon(5, a, targetB, step, Math.PI / 2)];
+		case "hexagon": return [polygon(6, a, targetB, step, Math.PI / 2)];
 		case "octagon": return [polygon(8, a, targetB, step, Math.PI / 8)];
 		case "star": return [star(5, a, targetB, step)];
 		case "heart": return [heart(a, targetB, step)];
@@ -45203,6 +45216,7 @@ var ShapeTool = class {
 			this.ctx.clusters.assign(strokes[0]);
 			for (const s of strokes) s.clusterId = strokes[0].clusterId;
 			this.ctx.history.execute(new AddStrokesCommand(strokes));
+			this.ctx.selection.set(strokes.map((s) => s.id));
 			this.ctx.setTool?.("select");
 		}
 		this.ctx.transition("idle");
@@ -45784,6 +45798,13 @@ var HANDLE_HIT_PX = 12;
 var ROTATE_OFFSET_PX = 26;
 var ROTATE_HIT_PX = 14;
 var COLOR = 2450411;
+/**
+* Visual-only outset between the selected object and the gizmo's outline/
+* handles — the object's actual bounding box (used for resize math, see
+* `anchorPoint`/`handlePoint`'s callers in `selectTool.ts`) never changes;
+* only where the outline and handle meshes are *drawn* and hit-tested does.
+*/
+var GAP_PX = 8;
 var SelectionGizmo = class {
 	constructor(scene) {
 		this.group = new Group();
@@ -45798,7 +45819,7 @@ var SelectionGizmo = class {
 		this.outline = new LineLoop(new BufferGeometry(), this.lineMaterial);
 		this.outline.position.z = GIZMO_Z;
 		this.outline.frustumCulled = false;
-		const handleGeometry = new PlaneGeometry(1, 1);
+		const handleGeometry = new CircleGeometry(.5, 20);
 		const handleMaterial = new MeshBasicMaterial({ color: COLOR });
 		const makeHandle = () => new Mesh(handleGeometry, handleMaterial);
 		this.handles = {
@@ -45826,18 +45847,19 @@ var SelectionGizmo = class {
 		if (!box) return;
 		this.lineMaterial.color.setHex(locked ? 16096779 : COLOR);
 		this.rotateHandle.visible = !locked;
+		const visual = this.visualBox(box, wpp);
 		const positions = new Float32Array([
-			box.minX,
-			box.minY,
+			visual.minX,
+			visual.minY,
 			GIZMO_Z,
-			box.maxX,
-			box.minY,
+			visual.maxX,
+			visual.minY,
 			GIZMO_Z,
-			box.maxX,
-			box.maxY,
+			visual.maxX,
+			visual.maxY,
 			GIZMO_Z,
-			box.minX,
-			box.maxY,
+			visual.minX,
+			visual.maxY,
 			GIZMO_Z
 		]);
 		this.outline.geometry.dispose();
@@ -45849,17 +45871,27 @@ var SelectionGizmo = class {
 		for (const [handle, mesh] of Object.entries(this.handles)) {
 			mesh.visible = !locked;
 			if (!locked) {
-				const p = this.handlePoint(handle, box);
+				const p = this.handlePoint(handle, visual);
 				mesh.position.set(p.x, p.y, GIZMO_Z);
 				mesh.scale.set(size, size, 1);
 			}
 		}
 		if (!locked) {
-			const rotate = this.rotatePoint(box, wpp);
+			const rotate = this.rotatePoint(visual, wpp);
 			this.rotateHandle.position.set(rotate.x, rotate.y, GIZMO_Z);
 			this.rotateHandle.scale.set(size, size, 1);
 		}
 	}
+	/** The object's real bbox outset by `GAP_PX`, screen-constant — where the outline/handles are drawn and hit-tested. Never used for resize math (see `anchorPoint`). */
+	visualBox(box, wpp) {
+		const gap = GAP_PX * wpp;
+		return {
+			minX: box.minX - gap,
+			minY: box.minY - gap,
+			maxX: box.maxX + gap,
+			maxY: box.maxY + gap
+		};
+	}
 	handlePoint(handle, box) {
 		const midX = (box.minX + box.maxX) / 2;
 		const midY = (box.minY + box.maxY) / 2;
@@ -45947,7 +45979,8 @@ var SelectionGizmo = class {
 		if (!this.box || this.isLocked) return null;
 		const handleR = HANDLE_HIT_PX * this.wpp;
 		const edgeSlop = 6 * this.wpp;
-		const rotate = this.rotatePoint(this.box, this.wpp);
+		const visual = this.visualBox(this.box, this.wpp);
+		const rotate = this.rotatePoint(visual, this.wpp);
 		if (Math.hypot(p.x - rotate.x, p.y - rotate.y) < ROTATE_HIT_PX * this.wpp) return { kind: "rotate" };
 		for (const handle of [
 			"nw",
@@ -45959,13 +45992,13 @@ var SelectionGizmo = class {
 			"e",
 			"w"
 		]) {
-			const hp = this.handlePoint(handle, this.box);
+			const hp = this.handlePoint(handle, visual);
 			if (Math.abs(p.x - hp.x) < handleR && Math.abs(p.y - hp.y) < handleR) return {
 				kind: "scale",
 				handle
 			};
 		}
-		const { minX, maxX, minY, maxY } = this.box;
+		const { minX, maxX, minY, maxY } = visual;
 		const inX = p.x >= minX - edgeSlop && p.x <= maxX + edgeSlop;
 		const inY = p.y >= minY - edgeSlop && p.y <= maxY + edgeSlop;
 		if (inX && Math.abs(p.y - maxY) < edgeSlop) return {
@@ -45985,7 +46018,7 @@ var SelectionGizmo = class {
 			handle: "w"
 		};
 		const pad = 2 * this.wpp;
-		if (p.x >= minX - pad && p.x <= maxX + pad && p.y >= minY - pad && p.y <= maxY + pad) return { kind: "inside" };
+		if (p.x >= this.box.minX - pad && p.x <= this.box.maxX + pad && p.y >= this.box.minY - pad && p.y <= this.box.maxY + pad) return { kind: "inside" };
 		return null;
 	}
 	rotatePoint(box, wpp) {
@@ -48218,6 +48251,112 @@ function createBoardControllerWithEngine(options, existingEngine) {
 		})),
 		...[...document.allCustomObjects()].map((value) => clone(toBoardObject(value)))
 	];
+	const projectToScreen = (point) => engine ? engine.boardToScreen(point) : {
+		x: (point.x - view.x) * view.zoom,
+		y: (view.y - point.y) * view.zoom
+	};
+	const lockFields = (item) => ({
+		locked: !!item.locked,
+		...item.lockedBy ? { lockedBy: item.lockedBy } : {},
+		...item.lockedByName ? { lockedByName: item.lockedByName } : {}
+	});
+	const lockFieldsMany = (items) => {
+		const locked = items.filter((i) => i.locked);
+		if (locked.length === 0) return { locked: false };
+		const lockedBys = [...new Set(locked.map((i) => i.lockedBy).filter((v) => !!v))];
+		const names = [...new Set(locked.map((i) => i.lockedByName).filter((v) => !!v))];
+		return {
+			locked: true,
+			...lockedBys.length === 1 ? { lockedBy: lockedBys[0] } : {},
+			...names.length === 1 ? { lockedByName: names[0] } : {}
+		};
+	};
+	const strokeClusterAnchor = (strokes) => {
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		for (const s of strokes) for (const p of s.points) {
+			const world = s.matrix ? apply(s.matrix, p) : p;
+			minX = Math.min(minX, world.x);
+			maxX = Math.max(maxX, world.x);
+			minY = Math.min(minY, world.y);
+			maxY = Math.max(maxY, world.y);
+		}
+		if (!Number.isFinite(minX)) return projectToScreen({
+			x: 0,
+			y: 0
+		});
+		return projectToScreen({
+			x: (minX + maxX) / 2,
+			y: maxY + 1.4
+		});
+	};
+	/** Per-type anchor formulas mirror `ScrawlEngine.getSelectedItemInfo` exactly, so a Host-built toolbar lands in the same spot the SDK's own would. */
+	const anchorFor = (obj) => {
+		switch (obj.type) {
+			case "note": return projectToScreen({
+				x: obj.x,
+				y: obj.y + obj.size / 2 + 1
+			});
+			case "text": {
+				const { width } = measureTextBlock(obj.text, obj.fontSize);
+				return projectToScreen({
+					x: obj.x + width / 2,
+					y: obj.y + 1
+				});
+			}
+			case "table": {
+				const { width } = measureTable(obj);
+				return projectToScreen({
+					x: obj.x + width / 2,
+					y: obj.y + 1.2
+				});
+			}
+			case "image": return projectToScreen({
+				x: obj.x,
+				y: obj.y + obj.height / 2 + 1.2
+			});
+			case "timer": return projectToScreen({
+				x: obj.x,
+				y: obj.y + obj.size / 2 + 1.2
+			});
+			case "custom": {
+				const b = obj.fallback.bounds;
+				return projectToScreen(apply(obj.transform, {
+					x: b.x + b.width / 2,
+					y: b.y + b.height + 1
+				}));
+			}
+			case "stroke": return strokeClusterAnchor([obj]);
+		}
+	};
+	const computeFocusedItem = () => {
+		if (selection.length === 0) return null;
+		if (selection.length === 1) {
+			const obj = readObject(selection[0]);
+			if (!obj) return null;
+			if (obj.type === "custom") return {
+				type: "custom",
+				id: obj.id,
+				locked: false,
+				screenPosition: anchorFor(obj)
+			};
+			return {
+				type: obj.type,
+				id: obj.id,
+				...lockFields(obj),
+				screenPosition: anchorFor(obj)
+			};
+		}
+		const objects = selection.map(readObject);
+		if (!objects.every((o) => o?.type === "stroke")) return null;
+		const clusterId = objects[0].clusterId;
+		if (!clusterId || !objects.every((o) => o.clusterId === clusterId)) return null;
+		return {
+			type: "stroke",
+			id: objects[0].id,
+			...lockFieldsMany(objects),
+			screenPosition: strokeClusterAnchor(objects)
+		};
+	};
 	const updateObject = (id, patch) => {
 		assertMutable();
 		const before = readObject(id);
@@ -48259,6 +48398,7 @@ function createBoardControllerWithEngine(options, existingEngine) {
 			zoom: view.zoom,
 			readOnly,
 			selection: Object.freeze([...selection]),
+			focusedItem: computeFocusedItem(),
 			strokeCount: [...document.all()].length,
 			objectCount: allObjects().length,
 			canUndo: history.canUndo,
@@ -48673,10 +48813,7 @@ function createBoardControllerWithEngine(options, existingEngine) {
 				changed();
 			},
 			get: () => ({ ...view }),
-			boardToScreen: (point) => engine ? engine.boardToScreen(point) : {
-				x: (point.x - view.x) * view.zoom,
-				y: (view.y - point.y) * view.zoom
-			},
+			boardToScreen: (point) => projectToScreen(point),
 			screenToBoard: (point) => engine ? engine.screenToBoard(point.x, point.y) ?? {
 				x: point.x,
 				y: point.y
@@ -48713,6 +48850,81 @@ function createBoardControllerWithEngine(options, existingEngine) {
 			update(id, patch) {
 				updateObject(id, patch);
 			},
+			duplicate(ids) {
+				assertMutable();
+				const objects = [...new Set(ids)].map(readObject).filter((o) => !!o);
+				if (objects.length === 0) return [];
+				const DX = 1.5;
+				const DY = -1.5;
+				const newClusterIds = /* @__PURE__ */ new Map();
+				const clusterIdFor = (oldClusterId) => {
+					let next = newClusterIds.get(oldClusterId);
+					if (!next) {
+						next = crypto.randomUUID();
+						newClusterIds.set(oldClusterId, next);
+					}
+					return next;
+				};
+				const commands = [];
+				const newIds = [];
+				for (const obj of objects) {
+					const id = createId();
+					newIds.push(id);
+					const rest = { ...obj };
+					delete rest.locked;
+					delete rest.lockedBy;
+					delete rest.lockedByName;
+					let duplicated;
+					if (obj.type === "stroke") {
+						const matrix = obj.matrix ?? [
+							1,
+							0,
+							0,
+							1,
+							0,
+							0
+						];
+						duplicated = {
+							...rest,
+							id,
+							matrix: [
+								matrix[0],
+								matrix[1],
+								matrix[2],
+								matrix[3],
+								matrix[4] + DX,
+								matrix[5] + DY
+							],
+							...obj.clusterId ? { clusterId: clusterIdFor(obj.clusterId) } : {}
+						};
+					} else if (obj.type === "custom") {
+						const t = obj.transform;
+						duplicated = {
+							...rest,
+							id,
+							transform: [
+								t[0],
+								t[1],
+								t[2],
+								t[3],
+								t[4] + DX,
+								t[5] + DY
+							]
+						};
+						delete duplicated.lock;
+					} else duplicated = {
+						...rest,
+						id,
+						x: obj.x + DX,
+						y: obj.y + DY
+					};
+					validateBoardObject(duplicated.type, duplicated);
+					commands.push(addCommand(duplicated.type, duplicated));
+				}
+				executeHistory(() => history.execute(new CommandBatch("duplicate content", commands)));
+				changed();
+				return newIds;
+			},
 			table: {
 				addRow(tableId) {
 					const table = document.getTable(tableId);
@@ -49660,14 +49872,17 @@ function InlineEditors({ controller, renderPortal }) {
 		if (editor?.kind === "text") {
 			const text = editor.text;
 			if (editor.id === null) {
-				if (text.trim()) controller.content.add({
-					type: "text",
-					x: editor.boardX,
-					y: editor.boardY,
-					text,
-					color: editor.color,
-					fontSize: TEXT_DEFAULT_SIZE
-				});
+				if (text.trim()) {
+					const newId = controller.content.add({
+						type: "text",
+						x: editor.boardX,
+						y: editor.boardY,
+						text,
+						color: editor.color,
+						fontSize: TEXT_DEFAULT_SIZE
+					});
+					controller.content.select([newId]);
+				}
 			} else if (!text.trim()) controller.content.remove([editor.id]);
 			else controller.content.update(editor.id, { text });
 		}
@@ -49862,6 +50077,366 @@ function InlineEditors({ controller, renderPortal }) {
 	}))] });
 }
 //#endregion
+//#region src/ui/toolbar/focused-item-toolbar.tsx
+var NOTE_SIZES = [
+	["Small", 7],
+	["Medium", 10],
+	["Large", 14]
+];
+var TEXT_SIZES = [
+	["Small", 1.2],
+	["Medium", 1.8],
+	["Large", 2.6]
+];
+var SHAPE_WIDTHS = [
+	["Thin", .1],
+	["Medium", .15],
+	["Thick", .3]
+];
+/** Matches the native selection gizmo's own outset (renderer/selection/gizmo.ts's GAP_PX), for a consistent look. */
+var HANDLE_GAP_PX = 8;
+var MIN_SIZE = 4;
+var MAX_SIZE = 30;
+var HANDLE_CORNERS = [
+	"nw",
+	"ne",
+	"sw",
+	"se"
+];
+/**
+* Floating toolbar above the focused note, shape, or text block — Colour,
+* Size (note/text) or Width (shape), Lock/Unlock, Duplicate, Delete.
+* Table/image/timer/custom objects and plain (non-shape) ink strokes never
+* get a toolbar here — out of scope for this destination.
+*
+* Lock/Unlock carries no per-user ownership gating: nothing else in this
+* SDK enforces lock ownership either (`content.update` never checks
+* `locked`, and the engine's own internal unlock check has no way for a
+* Host to ever supply a real user id) — locking is advisory UI state
+* throughout, and this toolbar matches that rather than inventing an
+* enforcement story alone.
+*
+* A shape can be several strokes sharing one `clusterId` (e.g. an arrow's
+* shaft + head) — every action here applies to the whole cluster. Resolved
+* via `query.all()` + `clusterId`, not `snapshot.selection`: a canvas click
+* on one member selects every member internally, but the public selection
+* bridge only ever reports one id (`FocusedItem.id` is singular by design),
+* so reconstructing the cluster from the document is the reliable path
+* regardless of how the selection was made.
+*
+* A focused note also gets drag-to-resize corner handles — notes have no
+* gizmo of their own (the native selection gizmo is ink-stroke/shape-only),
+* so this is that capability's default-ui-owned equivalent. Proportional
+* (always-square) resize from the note's own centre, clamped to
+* `[MIN_SIZE, MAX_SIZE]`, independent of which corner is grabbed.
+*/
+function FocusedItemToolbar({ controller, snapshot }) {
+	const focused = snapshot.focusedItem;
+	if (!focused) return null;
+	const obj = controller.query.get(focused.id);
+	if (!obj) return null;
+	if (obj.type === "note") return /* @__PURE__ */ jsx(NoteToolbar, {
+		controller,
+		snapshot,
+		note: obj,
+		locked: focused.locked,
+		anchor: focused.screenPosition
+	});
+	if (obj.type === "text") return /* @__PURE__ */ jsx(TextToolbar, {
+		controller,
+		snapshot,
+		text: obj,
+		locked: focused.locked,
+		anchor: focused.screenPosition
+	});
+	if (obj.type === "stroke" && obj.tool === "shape") return /* @__PURE__ */ jsx(ShapeToolbar, {
+		controller,
+		snapshot,
+		stroke: obj,
+		locked: focused.locked,
+		anchor: focused.screenPosition
+	});
+	return null;
+}
+function ToolbarShell({ anchor, children }) {
+	if (!anchor) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "Selected object",
+		className: "scrawl-board__focus-toolbar",
+		role: "toolbar",
+		style: {
+			left: anchor.x,
+			top: anchor.y
+		},
+		children
+	});
+}
+function NoteToolbar({ controller, snapshot, note, locked, anchor }) {
+	const mutable = snapshot.status === "ready" && !snapshot.readOnly;
+	const locked_ = !mutable || locked;
+	const half = note.size / 2;
+	const cornerA = controller.view.boardToScreen({
+		x: note.x - half,
+		y: note.y + half
+	});
+	const cornerB = controller.view.boardToScreen({
+		x: note.x + half,
+		y: note.y - half
+	});
+	const outline = {
+		left: Math.min(cornerA.x, cornerB.x) - HANDLE_GAP_PX,
+		top: Math.min(cornerA.y, cornerB.y) - HANDLE_GAP_PX,
+		right: Math.max(cornerA.x, cornerB.x) + HANDLE_GAP_PX,
+		bottom: Math.max(cornerA.y, cornerB.y) + HANDLE_GAP_PX
+	};
+	const handlePoints = {
+		nw: {
+			x: outline.left,
+			y: outline.top
+		},
+		ne: {
+			x: outline.right,
+			y: outline.top
+		},
+		sw: {
+			x: outline.left,
+			y: outline.bottom
+		},
+		se: {
+			x: outline.right,
+			y: outline.bottom
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "scrawl-board__focus-outline",
+			"data-locked": locked,
+			style: {
+				left: outline.left,
+				top: outline.top,
+				width: outline.right - outline.left,
+				height: outline.bottom - outline.top
+			}
+		}),
+		mutable && !locked && HANDLE_CORNERS.map((corner) => /* @__PURE__ */ jsx(ResizeHandle, {
+			controller,
+			note,
+			corner,
+			x: handlePoints[corner].x,
+			y: handlePoints[corner].y
+		}, corner)),
+		/* @__PURE__ */ jsxs(ToolbarShell, {
+			anchor,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "scrawl-board__style-group",
+					children: [/* @__PURE__ */ jsx("span", { children: "Size" }), NOTE_SIZES.map(([label, size]) => /* @__PURE__ */ jsx("button", {
+						"aria-label": `${label} note`,
+						"aria-pressed": note.size === size,
+						disabled: locked_,
+						onClick: () => controller.content.update(note.id, { size }),
+						type: "button",
+						children: label[0]
+					}, label))]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "scrawl-board__style-group",
+					children: [/* @__PURE__ */ jsx("span", { children: "Colour" }), Object.entries(NOTE_COLORS).map(([name, value]) => /* @__PURE__ */ jsx("button", {
+						"aria-label": `${name} note`,
+						"aria-pressed": note.color.toLowerCase() === value.toLowerCase(),
+						disabled: locked_,
+						onClick: () => controller.content.update(note.id, { color: value }),
+						type: "button",
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							style: { backgroundColor: value }
+						})
+					}, value))]
+				}),
+				/* @__PURE__ */ jsx(LockDuplicateDelete, {
+					controller,
+					mutable,
+					locked,
+					ids: [note.id]
+				})
+			]
+		})
+	] });
+}
+/**
+* One corner handle — drag distance from the note's own centre (its `x`/`y`
+* already *is* the centre) drives a proportional, always-square resize,
+* independent of which corner is grabbed. `note` is fresh every render (a
+* new `content.update` during drag triggers a new snapshot), so the
+* closure never goes stale.
+*/
+function ResizeHandle({ controller, note, corner, x, y }) {
+	const [dragging, setDragging] = useState(false);
+	const nudge = (delta) => {
+		const half = Math.max(MIN_SIZE / 2, Math.min(MAX_SIZE / 2, note.size / 2 + delta));
+		controller.content.update(note.id, { size: half * 2 });
+	};
+	return /* @__PURE__ */ jsx("span", {
+		"aria-label": `Resize note (${corner})`,
+		"aria-valuemax": MAX_SIZE,
+		"aria-valuemin": MIN_SIZE,
+		"aria-valuenow": note.size,
+		role: "slider",
+		tabIndex: 0,
+		className: "scrawl-board__focus-handle",
+		"data-orientation": corner === "nw" || corner === "se" ? "nwse" : "nesw",
+		style: {
+			left: x,
+			top: y
+		},
+		onKeyDown: (event) => {
+			if (event.key === "ArrowUp" || event.key === "ArrowRight") {
+				event.preventDefault();
+				nudge(.5);
+			} else if (event.key === "ArrowDown" || event.key === "ArrowLeft") {
+				event.preventDefault();
+				nudge(-.5);
+			}
+		},
+		onPointerDown: (event) => {
+			event.stopPropagation();
+			event.currentTarget.setPointerCapture(event.pointerId);
+			setDragging(true);
+		},
+		onPointerMove: (event) => {
+			if (!dragging) return;
+			const board = controller.view.screenToBoard({
+				x: event.clientX,
+				y: event.clientY
+			});
+			const half = Math.max(MIN_SIZE / 2, Math.min(MAX_SIZE / 2, Math.max(Math.abs(board.x - note.x), Math.abs(board.y - note.y))));
+			controller.content.update(note.id, { size: half * 2 });
+		},
+		onPointerUp: (event) => {
+			event.currentTarget.releasePointerCapture(event.pointerId);
+			setDragging(false);
+		}
+	});
+}
+function TextToolbar({ controller, snapshot, text, locked, anchor }) {
+	const mutable = snapshot.status === "ready" && !snapshot.readOnly;
+	const locked_ = !mutable || locked;
+	return /* @__PURE__ */ jsxs(ToolbarShell, {
+		anchor,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "scrawl-board__style-group",
+				children: [/* @__PURE__ */ jsx("span", { children: "Size" }), TEXT_SIZES.map(([label, fontSize]) => /* @__PURE__ */ jsx("button", {
+					"aria-label": `${label} text`,
+					"aria-pressed": Math.abs(text.fontSize - fontSize) < .001,
+					disabled: locked_,
+					onClick: () => controller.content.update(text.id, { fontSize }),
+					type: "button",
+					children: label[0]
+				}, label))]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "scrawl-board__style-group",
+				children: [/* @__PURE__ */ jsx("span", { children: "Colour" }), Object.entries(INK_COLORS).map(([name, value]) => /* @__PURE__ */ jsx("button", {
+					"aria-label": `${name} text`,
+					"aria-pressed": text.color.toLowerCase() === value.toLowerCase(),
+					disabled: locked_,
+					onClick: () => controller.content.update(text.id, { color: value }),
+					type: "button",
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: { backgroundColor: value }
+					})
+				}, value))]
+			}),
+			/* @__PURE__ */ jsx(LockDuplicateDelete, {
+				controller,
+				mutable,
+				locked,
+				ids: [text.id]
+			})
+		]
+	});
+}
+function ShapeToolbar({ controller, snapshot, stroke, locked, anchor }) {
+	const mutable = snapshot.status === "ready" && !snapshot.readOnly;
+	const locked_ = !mutable || locked;
+	const ids = (stroke.clusterId ? controller.query.all().filter((o) => o.type === "stroke" && o.clusterId === stroke.clusterId) : [stroke]).map((m) => m.id);
+	const applyToAll = (patch) => {
+		for (const id of ids) controller.content.update(id, patch);
+	};
+	return /* @__PURE__ */ jsxs(ToolbarShell, {
+		anchor,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "scrawl-board__style-group",
+				children: [/* @__PURE__ */ jsx("span", { children: "Width" }), SHAPE_WIDTHS.map(([label, width]) => /* @__PURE__ */ jsx("button", {
+					"aria-label": `${label} stroke`,
+					"aria-pressed": Math.abs(stroke.baseWidth - width) < .001,
+					disabled: locked_,
+					onClick: () => applyToAll({ baseWidth: width }),
+					type: "button",
+					children: label
+				}, label))]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "scrawl-board__style-group",
+				children: [/* @__PURE__ */ jsx("span", { children: "Colour" }), Object.entries(INK_COLORS).map(([name, value]) => /* @__PURE__ */ jsx("button", {
+					"aria-label": `${name} shape`,
+					"aria-pressed": stroke.color.toLowerCase() === value.toLowerCase(),
+					disabled: locked_,
+					onClick: () => applyToAll({ color: value }),
+					type: "button",
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: { backgroundColor: value }
+					})
+				}, value))]
+			}),
+			/* @__PURE__ */ jsx(LockDuplicateDelete, {
+				controller,
+				mutable,
+				locked,
+				ids
+			})
+		]
+	});
+}
+function LockDuplicateDelete({ controller, mutable, locked, ids }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "scrawl-board__style-group",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": locked ? "Unlock" : "Lock",
+				disabled: !mutable,
+				onClick: () => {
+					for (const id of ids) controller.content.update(id, locked ? { locked: false } : { locked: true });
+				},
+				type: "button",
+				children: locked ? "Unlock" : "Lock"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": "Duplicate",
+				disabled: !mutable || locked,
+				onClick: () => {
+					const newIds = controller.content.duplicate(ids);
+					if (newIds.length) controller.content.select(newIds);
+				},
+				type: "button",
+				children: "Duplicate"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": "Delete",
+				disabled: !mutable || locked,
+				onClick: () => controller.content.remove(ids),
+				type: "button",
+				children: "Delete"
+			})
+		]
+	});
+}
+//#endregion
 //#region src/ui/toolbar/style-shelf.tsx
 var ERASER_RADII = [
 	["Fine", 1],
@@ -49900,7 +50475,7 @@ var SHELF_TOOLS = /* @__PURE__ */ new Set([
 	"timer"
 ]);
 /** Contextual per-tool style controls — visible while a styleable tool is active. */
-function StyleShelf({ controller, snapshot }) {
+function StyleShelf({ controller, snapshot, anchor }) {
 	if (!SHELF_TOOLS.has(snapshot.tool)) return null;
 	const mutable = snapshot.status === "ready" && !snapshot.readOnly;
 	const { style } = snapshot;
@@ -49908,7 +50483,12 @@ function StyleShelf({ controller, snapshot }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-label": "Board style",
 		className: "scrawl-board__style-shelf",
+		"data-anchored": !!anchor,
 		role: "toolbar",
+		style: anchor ? {
+			left: anchor.x,
+			top: anchor.y
+		} : void 0,
 		children: [
 			snapshot.tool === "highlighter" && /* @__PURE__ */ jsxs("div", {
 				className: "scrawl-board__style-group",
@@ -50138,6 +50718,7 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 	const [panel, setPanel] = useState(null);
 	const [query, setQuery] = useState("");
 	const [announcement, setAnnouncement] = useState("Board controls ready");
+	const [styleShelfAnchor, setStyleShelfAnchor] = useState(void 0);
 	const importRef = useRef(null);
 	const openerRef = useRef(null);
 	const searchRef = useRef(null);
@@ -50148,6 +50729,25 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 	useEffect(() => {
 		if (panel === "search") searchRef.current?.focus();
 	}, [panel]);
+	useEffect(() => {
+		const recompute = () => {
+			const root = chromeRef.current;
+			const button = root?.querySelector(".scrawl-board__tools button[aria-pressed=\"true\"]");
+			if (!root || !button) {
+				setStyleShelfAnchor(void 0);
+				return;
+			}
+			const buttonRect = button.getBoundingClientRect();
+			const rootRect = root.getBoundingClientRect();
+			setStyleShelfAnchor({
+				x: buttonRect.left + buttonRect.width / 2 - rootRect.left,
+				y: buttonRect.top - rootRect.top
+			});
+		};
+		recompute();
+		window.addEventListener("resize", recompute);
+		return () => window.removeEventListener("resize", recompute);
+	}, [snapshot.tool]);
 	const open = (next, opener) => {
 		openerRef.current = opener;
 		setPanel(next);
@@ -50376,9 +50976,14 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 				]
 			}),
 			renderSlot(slots?.stylePanel, enabled("styleShelf") && /* @__PURE__ */ jsx(StyleShelf, {
+				anchor: styleShelfAnchor,
 				controller,
 				snapshot
 			})),
+			enabled("focusedItemToolbar") && /* @__PURE__ */ jsx(FocusedItemToolbar, {
+				controller,
+				snapshot
+			}),
 			ContextMenu && /* @__PURE__ */ jsx(ContextMenu, {
 				controller,
 				snapshot
@@ -51021,4 +51626,4 @@ function ScrawlBoard({ documentId, initialDocument, onReady, className, style })
 	});
 }
 //#endregion
-export { AssetResolutionError, DefaultBoardChrome, InlineEditors, MultiplayerCursors, SUPPORTED_ASSET_MEDIA_TYPES, Scrawl, ScrawlBoard, ScrawlCanvas, ScrawlDefaultUI, ScrawlPortal, ScrawlProvider, StyleShelf, assetRef, clampAssetCacheBytes, cloneCustomObject, isAssetRef, resolveScrawlTheme, scrawlThemePresets, useScrawlController, useScrawlSnapshot, useScrawlTheme, validateScrawlTheme };
+export { AssetResolutionError, DefaultBoardChrome, FocusedItemToolbar, InlineEditors, MultiplayerCursors, SUPPORTED_ASSET_MEDIA_TYPES, Scrawl, ScrawlBoard, ScrawlCanvas, ScrawlDefaultUI, ScrawlPortal, ScrawlProvider, StyleShelf, assetRef, clampAssetCacheBytes, cloneCustomObject, isAssetRef, resolveScrawlTheme, scrawlThemePresets, useScrawlController, useScrawlSnapshot, useScrawlTheme, validateScrawlTheme };