tldraw 4.1.0-canary.e653ec63c99b → 4.1.0-canary.e87046ba1a0c

package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Minimap/MinimapManager.ts"],
-  "sourcesContent": ["import {\n\tBox,\n\tComputedCache,\n\tEditor,\n\tTLShape,\n\tVec,\n\tatom,\n\tbind,\n\tclamp,\n\tcomputed,\n\treact,\n\ttlenv,\n\tuniqueId,\n} from '@tldraw/editor'\nimport { getRgba } from './getRgba'\nimport { BufferStuff, appendVertices, setupWebGl } from './minimap-webgl-setup'\nimport { pie, rectangle, roundedRectangle } from './minimap-webgl-shapes'\n\nexport class MinimapManager {\n\tdisposables = [] as (() => void)[]\n\n\t@bind\n\tclose() {\n\t\treturn this.disposables.forEach((d) => d())\n\t}\n\tgl: ReturnType<typeof setupWebGl>\n\tshapeGeometryCache: ComputedCache<Float32Array | null, TLShape>\n\tconstructor(\n\t\tpublic editor: Editor,\n\t\tpublic readonly elem: HTMLCanvasElement,\n\t\tpublic readonly container: HTMLElement\n\t) {\n\t\tthis.gl = setupWebGl(elem)\n\t\tthis.shapeGeometryCache = editor.store.createComputedCache('webgl-geometry', (r: TLShape) => {\n\t\t\tconst bounds = editor.getShapeMaskedPageBounds(r.id)\n\t\t\tif (!bounds) return null\n\t\t\tconst arr = new Float32Array(12)\n\t\t\trectangle(arr, 0, bounds.x, bounds.y, bounds.w, bounds.h)\n\t\t\treturn arr\n\t\t})\n\t\tthis.colors = this._getColors()\n\t\tthis.disposables.push(this._listenForCanvasResize(), react('minimap render', this.render))\n\t}\n\n\tprivate _getColors() {\n\t\tconst style = getComputedStyle(this.editor.getContainer())\n\n\t\treturn {\n\t\t\tshapeFill: getRgba(style.getPropertyValue('--tl-color-text-3').trim()),\n\t\t\tselectFill: getRgba(style.getPropertyValue('--tl-color-selected').trim()),\n\t\t\tviewportFill: getRgba(style.getPropertyValue('--tl-color-muted-1').trim()),\n\t\t\tbackground: getRgba(style.getPropertyValue('--tl-color-low').trim()),\n\t\t}\n\t}\n\n\tprivate colors: ReturnType<MinimapManager['_getColors']>\n\t// this should be called after dark/light mode changes have propagated to the dom\n\tupdateColors() {\n\t\tthis.colors = this._getColors()\n\t}\n\n\treadonly id = uniqueId()\n\t@computed\n\tgetDpr() {\n\t\treturn this.editor.getInstanceState().devicePixelRatio\n\t}\n\n\t@computed\n\tgetContentPageBounds() {\n\t\tconst viewportPageBounds = this.editor.getViewportPageBounds()\n\t\tconst commonShapeBounds = this.editor.getCurrentPageBounds()\n\t\treturn commonShapeBounds\n\t\t\t? Box.Expand(commonShapeBounds, viewportPageBounds)\n\t\t\t: viewportPageBounds\n\t}\n\n\t@computed\n\tgetContentScreenBounds() {\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\t\tconst topLeft = this.editor.pageToScreen(contentPageBounds.point)\n\t\tconst bottomRight = this.editor.pageToScreen(\n\t\t\tnew Vec(contentPageBounds.maxX, contentPageBounds.maxY)\n\t\t)\n\t\treturn new Box(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)\n\t}\n\n\tprivate _getCanvasBoundingRect() {\n\t\tconst { x, y, width, height } = this.elem.getBoundingClientRect()\n\t\treturn new Box(x, y, width, height)\n\t}\n\n\tprivate readonly canvasBoundingClientRect = atom('canvasBoundingClientRect', new Box())\n\n\tgetCanvasScreenBounds() {\n\t\treturn this.canvasBoundingClientRect.get()\n\t}\n\n\tprivate _listenForCanvasResize() {\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tconst rect = this._getCanvasBoundingRect()\n\t\t\tthis.canvasBoundingClientRect.set(rect)\n\t\t})\n\t\tobserver.observe(this.elem)\n\t\tobserver.observe(this.container)\n\t\treturn () => observer.disconnect()\n\t}\n\n\t@computed\n\tgetCanvasSize() {\n\t\tconst rect = this.canvasBoundingClientRect.get()\n\t\tconst dpr = this.getDpr()\n\t\treturn new Vec(rect.width * dpr, rect.height * dpr)\n\t}\n\n\t@computed\n\tgetCanvasClientPosition() {\n\t\treturn this.canvasBoundingClientRect.get().point\n\t}\n\n\toriginPagePoint = new Vec()\n\toriginPageCenter = new Vec()\n\n\tisInViewport = false\n\n\t/** Get the canvas's true bounds converted to page bounds. */\n\t@computed getCanvasPageBounds() {\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\n\t\tconst aspectRatio = canvasScreenBounds.width / canvasScreenBounds.height\n\n\t\tlet targetWidth = contentPageBounds.width\n\t\tlet targetHeight = targetWidth / aspectRatio\n\t\tif (targetHeight < contentPageBounds.height) {\n\t\t\ttargetHeight = contentPageBounds.height\n\t\t\ttargetWidth = targetHeight * aspectRatio\n\t\t}\n\n\t\tconst box = new Box(0, 0, targetWidth, targetHeight)\n\t\tbox.center = contentPageBounds.center\n\t\treturn box\n\t}\n\n\t@computed getZoom() {\n\t\treturn this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width\n\t}\n\n\t@computed getCanvasPageBoundsArray() {\n\t\tconst { x, y, w, h } = this.getCanvasPageBounds()\n\t\treturn new Float32Array([x, y, w, h])\n\t}\n\n\tgetMinimapPagePoint(clientX: number, clientY: number) {\n\t\tconst canvasPageBounds = this.getCanvasPageBounds()\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\n\t\t// first offset the canvas position\n\t\tlet x = clientX - canvasScreenBounds.x\n\t\tlet y = clientY - canvasScreenBounds.y\n\n\t\t// then multiply by the ratio between the page and screen bounds\n\t\tx *= canvasPageBounds.width / canvasScreenBounds.width\n\t\ty *= canvasPageBounds.height / canvasScreenBounds.height\n\n\t\t// then add the canvas page bounds' offset\n\t\tx += canvasPageBounds.minX\n\t\ty += canvasPageBounds.minY\n\n\t\treturn new Vec(x, y, 1)\n\t}\n\n\tminimapScreenPointToPagePoint(x: number, y: number, shiftKey = false, clampToBounds = false) {\n\t\tconst { editor } = this\n\t\tconst vpPageBounds = editor.getViewportPageBounds()\n\n\t\tlet { x: px, y: py } = this.getMinimapPagePoint(x, y)\n\n\t\tif (clampToBounds) {\n\t\t\tconst shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()\n\n\t\t\tconst minX = shapesPageBounds.minX - vpPageBounds.width / 2\n\t\t\tconst maxX = shapesPageBounds.maxX + vpPageBounds.width / 2\n\t\t\tconst minY = shapesPageBounds.minY - vpPageBounds.height / 2\n\t\t\tconst maxY = shapesPageBounds.maxY + vpPageBounds.height / 2\n\n\t\t\tconst lx = Math.max(0, minX + vpPageBounds.width - px)\n\t\t\tconst rx = Math.max(0, -(maxX - vpPageBounds.width - px))\n\t\t\tconst ly = Math.max(0, minY + vpPageBounds.height - py)\n\t\t\tconst ry = Math.max(0, -(maxY - vpPageBounds.height - py))\n\n\t\t\tpx += (lx - rx) / 2\n\t\t\tpy += (ly - ry) / 2\n\n\t\t\tpx = clamp(px, minX, maxX)\n\t\t\tpy = clamp(py, minY, maxY)\n\t\t}\n\n\t\tif (shiftKey) {\n\t\t\tconst { originPagePoint } = this\n\t\t\tconst dx = Math.abs(px - originPagePoint.x)\n\t\t\tconst dy = Math.abs(py - originPagePoint.y)\n\t\t\tif (dx > dy) {\n\t\t\t\tpy = originPagePoint.y\n\t\t\t} else {\n\t\t\t\tpx = originPagePoint.x\n\t\t\t}\n\t\t}\n\n\t\treturn new Vec(px, py)\n\t}\n\n\t@bind\n\trender() {\n\t\t// make sure we update when dark mode switches\n\t\tconst context = this.gl.context\n\t\tconst canvasSize = this.getCanvasSize()\n\n\t\tthis.gl.setCanvasPageBounds(this.getCanvasPageBoundsArray())\n\n\t\tthis.elem.width = canvasSize.x\n\t\tthis.elem.height = canvasSize.y\n\t\tcontext.viewport(0, 0, canvasSize.x, canvasSize.y)\n\n\t\t// this affects which color transparent shapes are blended with\n\t\t// during rendering. If we were to invert this any shapes narrower\n\t\t// than 1 px in screen space would have much lower contrast. e.g.\n\t\t// draw shapes on a large canvas.\n\t\tcontext.clearColor(\n\t\t\tthis.colors.background[0],\n\t\t\tthis.colors.background[1],\n\t\t\tthis.colors.background[2],\n\t\t\t1\n\t\t)\n\n\t\tcontext.clear(context.COLOR_BUFFER_BIT)\n\n\t\tconst selectedShapes = new Set(this.editor.getSelectedShapeIds())\n\n\t\tconst colors = this.colors\n\t\tlet selectedShapeOffset = 0\n\t\tlet unselectedShapeOffset = 0\n\n\t\tconst ids = this.editor.getCurrentPageShapeIdsSorted()\n\n\t\tfor (let i = 0, len = ids.length; i < len; i++) {\n\t\t\tconst shapeId = ids[i]\n\t\t\tconst geometry = this.shapeGeometryCache.get(shapeId)\n\t\t\tif (!geometry) continue\n\n\t\t\tconst len = geometry.length\n\n\t\t\tif (selectedShapes.has(shapeId)) {\n\t\t\t\tappendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)\n\t\t\t\tselectedShapeOffset += len\n\t\t\t} else {\n\t\t\t\tappendVertices(this.gl.unselectedShapes, unselectedShapeOffset, geometry)\n\t\t\t\tunselectedShapeOffset += len\n\t\t\t}\n\t\t}\n\n\t\tthis.drawShapes(this.gl.unselectedShapes, unselectedShapeOffset, colors.shapeFill)\n\t\tthis.drawShapes(this.gl.selectedShapes, selectedShapeOffset, colors.selectFill)\n\n\t\tthis.drawViewport()\n\t\tthis.drawCollaborators()\n\t}\n\n\tprivate drawShapes(stuff: BufferStuff, len: number, color: Float32Array) {\n\t\tthis.gl.prepareTriangles(stuff, len)\n\t\tthis.gl.setFillColor(color)\n\t\tthis.gl.drawTriangles(len)\n\t}\n\n\tprivate drawViewport() {\n\t\tconst viewport = this.editor.getViewportPageBounds()\n\t\tconst len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * this.getZoom())\n\n\t\tthis.gl.prepareTriangles(this.gl.viewport, len)\n\t\tthis.gl.setFillColor(this.colors.viewportFill)\n\t\tthis.gl.drawTrianglesTransparently(len)\n\t\tif (tlenv.isSafari) {\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t}\n\t}\n\n\tdrawCollaborators() {\n\t\tconst collaborators = this.editor.getCollaboratorsOnCurrentPage()\n\t\tif (!collaborators.length) return\n\n\t\t// just draw a little circle for each collaborator\n\t\tconst numSegmentsPerCircle = 20\n\t\tconst dataSizePerCircle = numSegmentsPerCircle * 6\n\t\tconst totalSize = dataSizePerCircle * collaborators.length\n\n\t\t// expand vertex array if needed\n\t\tif (this.gl.collaborators.vertices.length < totalSize) {\n\t\t\tthis.gl.collaborators.vertices = new Float32Array(totalSize)\n\t\t}\n\n\t\tconst vertices = this.gl.collaborators.vertices\n\t\tlet offset = 0\n\t\tconst zoom = this.getZoom()\n\t\tfor (const { cursor } of collaborators) {\n\t\t\tif (!cursor) continue\n\t\t\tpie(vertices, {\n\t\t\t\tcenter: Vec.From(cursor),\n\t\t\t\tradius: 3 * zoom,\n\t\t\t\toffset,\n\t\t\t\tnumArcSegments: numSegmentsPerCircle,\n\t\t\t})\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\n\t\tthis.gl.prepareTriangles(this.gl.collaborators, totalSize)\n\n\t\toffset = 0\n\t\tfor (const { color } of collaborators) {\n\t\t\tthis.gl.setFillColor(getRgba(color))\n\t\t\tthis.gl.context.drawArrays(this.gl.context.TRIANGLES, offset / 2, dataSizePerCircle / 2)\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tComputedCache,\n\tEditor,\n\tTLShape,\n\tVec,\n\tatom,\n\tbind,\n\tclamp,\n\tcomputed,\n\treact,\n\ttlenv,\n\tuniqueId,\n} from '@tldraw/editor'\nimport { getRgba } from './getRgba'\nimport { BufferStuff, appendVertices, setupWebGl } from './minimap-webgl-setup'\nimport { pie, rectangle, roundedRectangle } from './minimap-webgl-shapes'\n\nexport class MinimapManager {\n\tdisposables = [] as (() => void)[]\n\n\t@bind\n\tclose() {\n\t\treturn this.disposables.forEach((d) => d())\n\t}\n\tgl: ReturnType<typeof setupWebGl>\n\tshapeGeometryCache: ComputedCache<Float32Array | null, TLShape>\n\tconstructor(\n\t\tpublic editor: Editor,\n\t\tpublic readonly elem: HTMLCanvasElement,\n\t\tpublic readonly container: HTMLElement\n\t) {\n\t\tthis.gl = setupWebGl(elem)\n\t\tthis.shapeGeometryCache = editor.store.createComputedCache('webgl-geometry', (r: TLShape) => {\n\t\t\tconst bounds = editor.getShapeMaskedPageBounds(r.id)\n\t\t\tif (!bounds) return null\n\t\t\tconst arr = new Float32Array(12)\n\t\t\trectangle(arr, 0, bounds.x, bounds.y, bounds.w, bounds.h)\n\t\t\treturn arr\n\t\t})\n\t\tthis.colors = this._getColors()\n\t\tthis.disposables.push(this._listenForCanvasResize(), react('minimap render', this.render))\n\t}\n\n\tprivate _getColors() {\n\t\tconst style = getComputedStyle(this.editor.getContainer())\n\n\t\treturn {\n\t\t\tshapeFill: getRgba(style.getPropertyValue('--tl-color-text-3').trim()),\n\t\t\tselectFill: getRgba(style.getPropertyValue('--tl-color-selected').trim()),\n\t\t\tviewportFill: getRgba(style.getPropertyValue('--tl-color-muted-1').trim()),\n\t\t\tbackground: getRgba(style.getPropertyValue('--tl-color-low').trim()),\n\t\t}\n\t}\n\n\tprivate colors: ReturnType<MinimapManager['_getColors']>\n\t// this should be called after dark/light mode changes have propagated to the dom\n\tupdateColors() {\n\t\tthis.colors = this._getColors()\n\t}\n\n\treadonly id = uniqueId()\n\t@computed\n\tgetDpr() {\n\t\treturn this.editor.getInstanceState().devicePixelRatio\n\t}\n\n\t@computed\n\tgetContentPageBounds() {\n\t\tconst viewportPageBounds = this.editor.getViewportPageBounds()\n\t\tconst commonShapeBounds = this.editor.getCurrentPageBounds()\n\t\treturn commonShapeBounds\n\t\t\t? Box.Expand(commonShapeBounds, viewportPageBounds)\n\t\t\t: viewportPageBounds\n\t}\n\n\t@computed\n\tgetContentScreenBounds() {\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\t\tconst topLeft = this.editor.pageToScreen(contentPageBounds.point)\n\t\tconst bottomRight = this.editor.pageToScreen(\n\t\t\tnew Vec(contentPageBounds.maxX, contentPageBounds.maxY)\n\t\t)\n\t\treturn new Box(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)\n\t}\n\n\tprivate _getCanvasBoundingRect() {\n\t\tconst { x, y, width, height } = this.elem.getBoundingClientRect()\n\t\treturn new Box(x, y, width, height)\n\t}\n\n\tprivate readonly canvasBoundingClientRect = atom('canvasBoundingClientRect', new Box())\n\n\tgetCanvasScreenBounds() {\n\t\treturn this.canvasBoundingClientRect.get()\n\t}\n\n\tprivate _listenForCanvasResize() {\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tconst rect = this._getCanvasBoundingRect()\n\t\t\tthis.canvasBoundingClientRect.set(rect)\n\t\t})\n\t\tobserver.observe(this.elem)\n\t\tobserver.observe(this.container)\n\t\treturn () => observer.disconnect()\n\t}\n\n\t@computed\n\tgetCanvasSize() {\n\t\tconst rect = this.canvasBoundingClientRect.get()\n\t\tconst dpr = this.getDpr()\n\t\treturn new Vec(rect.width * dpr, rect.height * dpr)\n\t}\n\n\t@computed\n\tgetCanvasClientPosition() {\n\t\treturn this.canvasBoundingClientRect.get().point\n\t}\n\n\toriginPagePoint = new Vec()\n\toriginPageCenter = new Vec()\n\n\tisInViewport = false\n\n\t/** Get the canvas's true bounds converted to page bounds. */\n\t@computed getCanvasPageBounds() {\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\n\t\tconst aspectRatio = canvasScreenBounds.width / canvasScreenBounds.height\n\n\t\tlet targetWidth = contentPageBounds.width\n\t\tlet targetHeight = targetWidth / aspectRatio\n\t\tif (targetHeight < contentPageBounds.height) {\n\t\t\ttargetHeight = contentPageBounds.height\n\t\t\ttargetWidth = targetHeight * aspectRatio\n\t\t}\n\n\t\tconst box = new Box(0, 0, targetWidth, targetHeight)\n\t\tbox.center = contentPageBounds.center\n\t\treturn box\n\t}\n\n\t@computed getZoom() {\n\t\treturn this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width\n\t}\n\n\t@computed getCanvasPageBoundsArray() {\n\t\tconst { x, y, w, h } = this.getCanvasPageBounds()\n\t\treturn new Float32Array([x, y, w, h])\n\t}\n\n\tgetMinimapPagePoint(clientX: number, clientY: number) {\n\t\tconst canvasPageBounds = this.getCanvasPageBounds()\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\n\t\t// first offset the canvas position\n\t\tlet x = clientX - canvasScreenBounds.x\n\t\tlet y = clientY - canvasScreenBounds.y\n\n\t\t// then multiply by the ratio between the page and screen bounds\n\t\tx *= canvasPageBounds.width / canvasScreenBounds.width\n\t\ty *= canvasPageBounds.height / canvasScreenBounds.height\n\n\t\t// then add the canvas page bounds' offset\n\t\tx += canvasPageBounds.minX\n\t\ty += canvasPageBounds.minY\n\n\t\treturn new Vec(x, y, 1)\n\t}\n\n\tminimapScreenPointToPagePoint(x: number, y: number, shiftKey = false, clampToBounds = false) {\n\t\tconst { editor } = this\n\t\tconst vpPageBounds = editor.getViewportPageBounds()\n\n\t\tlet { x: px, y: py } = this.getMinimapPagePoint(x, y)\n\n\t\tif (clampToBounds) {\n\t\t\tconst shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()\n\n\t\t\tconst minX = shapesPageBounds.minX - vpPageBounds.width / 2\n\t\t\tconst maxX = shapesPageBounds.maxX + vpPageBounds.width / 2\n\t\t\tconst minY = shapesPageBounds.minY - vpPageBounds.height / 2\n\t\t\tconst maxY = shapesPageBounds.maxY + vpPageBounds.height / 2\n\n\t\t\tconst lx = Math.max(0, minX + vpPageBounds.width - px)\n\t\t\tconst rx = Math.max(0, -(maxX - vpPageBounds.width - px))\n\t\t\tconst ly = Math.max(0, minY + vpPageBounds.height - py)\n\t\t\tconst ry = Math.max(0, -(maxY - vpPageBounds.height - py))\n\n\t\t\tpx += (lx - rx) / 2\n\t\t\tpy += (ly - ry) / 2\n\n\t\t\tpx = clamp(px, minX, maxX)\n\t\t\tpy = clamp(py, minY, maxY)\n\t\t}\n\n\t\tif (shiftKey) {\n\t\t\tconst { originPagePoint } = this\n\t\t\tconst dx = Math.abs(px - originPagePoint.x)\n\t\t\tconst dy = Math.abs(py - originPagePoint.y)\n\t\t\tif (dx > dy) {\n\t\t\t\tpy = originPagePoint.y\n\t\t\t} else {\n\t\t\t\tpx = originPagePoint.x\n\t\t\t}\n\t\t}\n\n\t\treturn new Vec(px, py)\n\t}\n\n\t@bind\n\trender() {\n\t\t// make sure we update when dark mode switches\n\t\tconst context = this.gl.context\n\t\tconst canvasSize = this.getCanvasSize()\n\n\t\tthis.gl.setCanvasPageBounds(this.getCanvasPageBoundsArray())\n\n\t\tthis.elem.width = canvasSize.x\n\t\tthis.elem.height = canvasSize.y\n\t\tcontext.viewport(0, 0, canvasSize.x, canvasSize.y)\n\n\t\t// this affects which color transparent shapes are blended with\n\t\t// during rendering. If we were to invert this any shapes narrower\n\t\t// than 1 px in screen space would have much lower contrast. e.g.\n\t\t// draw shapes on a large canvas.\n\t\tcontext.clearColor(\n\t\t\tthis.colors.background[0],\n\t\t\tthis.colors.background[1],\n\t\t\tthis.colors.background[2],\n\t\t\t1\n\t\t)\n\n\t\tcontext.clear(context.COLOR_BUFFER_BIT)\n\n\t\tconst selectedShapes = new Set(this.editor.getSelectedShapeIds())\n\n\t\tconst colors = this.colors\n\t\tlet selectedShapeOffset = 0\n\t\tlet unselectedShapeOffset = 0\n\n\t\tconst ids = this.editor.getCurrentPageShapeIdsSorted()\n\n\t\tfor (let i = 0, len = ids.length; i < len; i++) {\n\t\t\tconst shapeId = ids[i]\n\t\t\tconst geometry = this.shapeGeometryCache.get(shapeId)\n\t\t\tif (!geometry) continue\n\n\t\t\tconst len = geometry.length\n\n\t\t\tconst shape = this.editor.getShape(shapeId)\n\t\t\tif (shape) {\n\t\t\t\tconst shapeUtil = this.editor.getShapeUtil(shape.type)\n\t\t\t\tif (shapeUtil.hideInMinimap?.(shape)) continue\n\t\t\t}\n\n\t\t\tif (selectedShapes.has(shapeId)) {\n\t\t\t\tappendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)\n\t\t\t\tselectedShapeOffset += len\n\t\t\t} else {\n\t\t\t\tappendVertices(this.gl.unselectedShapes, unselectedShapeOffset, geometry)\n\t\t\t\tunselectedShapeOffset += len\n\t\t\t}\n\t\t}\n\n\t\tthis.drawShapes(this.gl.unselectedShapes, unselectedShapeOffset, colors.shapeFill)\n\t\tthis.drawShapes(this.gl.selectedShapes, selectedShapeOffset, colors.selectFill)\n\n\t\tthis.drawViewport()\n\t\tthis.drawCollaborators()\n\t}\n\n\tprivate drawShapes(stuff: BufferStuff, len: number, color: Float32Array) {\n\t\tthis.gl.prepareTriangles(stuff, len)\n\t\tthis.gl.setFillColor(color)\n\t\tthis.gl.drawTriangles(len)\n\t}\n\n\tprivate drawViewport() {\n\t\tconst viewport = this.editor.getViewportPageBounds()\n\t\tconst len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * this.getZoom())\n\n\t\tthis.gl.prepareTriangles(this.gl.viewport, len)\n\t\tthis.gl.setFillColor(this.colors.viewportFill)\n\t\tthis.gl.drawTrianglesTransparently(len)\n\t\tif (tlenv.isSafari) {\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t}\n\t}\n\n\tdrawCollaborators() {\n\t\tconst collaborators = this.editor.getCollaboratorsOnCurrentPage()\n\t\tif (!collaborators.length) return\n\n\t\t// just draw a little circle for each collaborator\n\t\tconst numSegmentsPerCircle = 20\n\t\tconst dataSizePerCircle = numSegmentsPerCircle * 6\n\t\tconst totalSize = dataSizePerCircle * collaborators.length\n\n\t\t// expand vertex array if needed\n\t\tif (this.gl.collaborators.vertices.length < totalSize) {\n\t\t\tthis.gl.collaborators.vertices = new Float32Array(totalSize)\n\t\t}\n\n\t\tconst vertices = this.gl.collaborators.vertices\n\t\tlet offset = 0\n\t\tconst zoom = this.getZoom()\n\t\tfor (const { cursor } of collaborators) {\n\t\t\tif (!cursor) continue\n\t\t\tpie(vertices, {\n\t\t\t\tcenter: Vec.From(cursor),\n\t\t\t\tradius: 3 * zoom,\n\t\t\t\toffset,\n\t\t\t\tnumArcSegments: numSegmentsPerCircle,\n\t\t\t})\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\n\t\tthis.gl.prepareTriangles(this.gl.collaborators, totalSize)\n\n\t\toffset = 0\n\t\tfor (const { color } of collaborators) {\n\t\t\tthis.gl.setFillColor(getRgba(color))\n\t\t\tthis.gl.context.drawArrays(this.gl.context.TRIANGLES, offset / 2, dataSizePerCircle / 2)\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": ["len"]
 }

package/dist-cjs/lib/ui/components/SharePanel/PeopleMenu.js

@@ -24,6 +24,8 @@ module.exports = __toCommonJS(PeopleMenu_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
 var import_radix_ui = require("radix-ui");
+var import_constants = require("../../constants");
+var import_breakpoints = require("../../context/breakpoints");
 var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_PeopleMenuAvatar = require("./PeopleMenuAvatar");
@@ -38,10 +40,12 @@ function PeopleMenu({ children }) {
   const userColor = (0, import_editor.useValue)("user", () => editor.user.getColor(), [editor]);
   const userName = (0, import_editor.useValue)("user", () => editor.user.getName(), [editor]);
   const [isOpen, onOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)("people menu");
+  const breakpoint = (0, import_breakpoints.useBreakpoint)();
+  const maxAvatars = breakpoint <= import_constants.PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5;
   if (!userIds.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_radix_ui.Popover.Root, { onOpenChange, open: isOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Trigger, { dir: "ltr", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "tlui-people-menu__avatars-button", title: msg("people-menu.title"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-people-menu__avatars", children: [
-      userIds.slice(-5).map((userId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuAvatar.PeopleMenuAvatar, { userId }, userId)),
+      userIds.slice(-maxAvatars).map((userId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuAvatar.PeopleMenuAvatar, { userId }, userId)),
       userIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
@@ -52,7 +56,7 @@ function PeopleMenu({ children }) {
           children: userName?.[0] ?? ""
         }
       ),
-      userIds.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuMore.PeopleMenuMore, { count: userIds.length - 5 })
+      userIds.length > maxAvatars && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuMore.PeopleMenuMore, { count: userIds.length - maxAvatars })
     ] }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_radix_ui.Popover.Content,

package/dist-cjs/lib/ui/components/SharePanel/PeopleMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/SharePanel/PeopleMenu.tsx"],
-  "sourcesContent": ["import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport { ReactNode } from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\n\tif (!userIds.length) return null\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-5).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{userIds.length > 5 && <PeopleMenuMore count={userIds.length - 5} />}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</_Popover.Trigger>\n\t\t\t<_Popover.Portal container={container}>\n\t\t\t\t<_Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCK;AAlCL,oBAA8D;AAC9D,sBAAoC;AAEpC,2BAA8B;AAC9B,4BAA+B;AAC/B,8BAAiC;AACjC,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AAQ5B,SAAS,WAAW,EAAE,SAAS,GAAoB;AACzD,QAAM,UAAM,sCAAe;AAE3B,QAAM,gBAAY,4BAAa;AAC/B,QAAM,aAAS,yBAAU;AAEzB,QAAM,cAAU,0BAAW;AAC3B,QAAM,gBAAY,wBAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,eAAW,wBAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,QAAI,oCAAc,aAAa;AAE1D,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACC,6CAAC,gBAAAA,QAAS,MAAT,EAAc,cAA4B,MAAM,QAChD;AAAA,gDAAC,gBAAAA,QAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC,sDAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GAClF,uDAAC,SAAI,WAAU,6BACb;AAAA,cAAQ,MAAM,EAAE,EAAE,IAAI,CAAC,WACvB,4CAAC,4CAA8B,UAAR,MAAwB,CAC/C;AAAA,MACA,QAAQ,SAAS,KACjB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB;AAAA,UAClB;AAAA,UAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,MACnB;AAAA,MAEA,QAAQ,SAAS,KAAK,4CAAC,wCAAe,OAAO,QAAQ,SAAS,GAAG;AAAA,OACnE,GACD,GACD;AAAA,IACA,4CAAC,gBAAAA,QAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,gBAAAA,QAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,uDAAC,SAAI,WAAU,6BACd;AAAA,sDAAC,SAAI,WAAU,6BACd,sDAAC,gDAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,4CAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,4CAAC,wCAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport { ReactNode } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\tconst breakpoint = useBreakpoint()\n\tconst maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5\n\n\tif (!userIds.length) return null\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-maxAvatars).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{userIds.length > maxAvatars && <PeopleMenuMore count={userIds.length - maxAvatars} />}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</_Popover.Trigger>\n\t\t\t<_Popover.Portal container={container}>\n\t\t\t\t<_Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCK;AAtCL,oBAA8D;AAC9D,sBAAoC;AAEpC,uBAAoC;AACpC,yBAA8B;AAC9B,2BAA8B;AAC9B,4BAA+B;AAC/B,8BAAiC;AACjC,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AAQ5B,SAAS,WAAW,EAAE,SAAS,GAAoB;AACzD,QAAM,UAAM,sCAAe;AAE3B,QAAM,gBAAY,4BAAa;AAC/B,QAAM,aAAS,yBAAU;AAEzB,QAAM,cAAU,0BAAW;AAC3B,QAAM,gBAAY,wBAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,eAAW,wBAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,QAAI,oCAAc,aAAa;AAC1D,QAAM,iBAAa,kCAAc;AACjC,QAAM,aAAa,cAAc,qCAAoB,YAAY,IAAI;AAErE,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACC,6CAAC,gBAAAA,QAAS,MAAT,EAAc,cAA4B,MAAM,QAChD;AAAA,gDAAC,gBAAAA,QAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC,sDAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GAClF,uDAAC,SAAI,WAAU,6BACb;AAAA,cAAQ,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,WAChC,4CAAC,4CAA8B,UAAR,MAAwB,CAC/C;AAAA,MACA,QAAQ,SAAS,KACjB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB;AAAA,UAClB;AAAA,UAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,MACnB;AAAA,MAEA,QAAQ,SAAS,cAAc,4CAAC,wCAAe,OAAO,QAAQ,SAAS,YAAY;AAAA,OACrF,GACD,GACD;AAAA,IACA,4CAAC,gBAAAA,QAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,gBAAAA,QAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,uDAAC,SAAI,WAAU,6BACd;AAAA,sDAAC,SAAI,WAAU,6BACd,sDAAC,gDAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,4CAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,4CAAC,wCAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
   "names": ["_Popover"]
 }

package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js

@@ -219,71 +219,79 @@ function StylePanelFontPicker() {
   );
 }
 function StylePanelTextAlignPicker() {
-  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
+  const { styles, enhancedA11yMode } = (0, import_StylePanelContext.useStylePanelContext)();
   const msg = (0, import_useTranslation.useTranslation)();
   const textAlign = styles.get(import_editor.DefaultTextAlignStyle);
   if (textAlign === void 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.align"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_StylePanelButtonPicker.StylePanelButtonPicker,
-      {
-        title: msg("style-panel.align"),
-        uiType: "align",
-        style: import_editor.DefaultTextAlignStyle,
-        items: import_styles.STYLES.textAlign,
-        value: textAlign
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiToolbar.TldrawUiToolbarButton,
-      {
-        type: "icon",
-        title: msg("style-panel.vertical-align"),
-        "data-testid": "vertical-align",
-        disabled: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-      }
-    )
+  const title = msg("style-panel.align");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    enhancedA11yMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: title, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_StylePanelButtonPicker.StylePanelButtonPickerInline,
+        {
+          title,
+          uiType: "align",
+          style: import_editor.DefaultTextAlignStyle,
+          items: import_styles.STYLES.textAlign,
+          value: textAlign
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TldrawUiToolbar.TldrawUiToolbarButton,
+        {
+          type: "icon",
+          title: msg("style-panel.vertical-align"),
+          "data-testid": "vertical-align",
+          disabled: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+        }
+      )
+    ] })
   ] });
 }
 function StylePanelLabelAlignPicker() {
-  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
+  const { styles, enhancedA11yMode } = (0, import_StylePanelContext.useStylePanelContext)();
   const msg = (0, import_useTranslation.useTranslation)();
   const labelAlign = styles.get(import_editor.DefaultHorizontalAlignStyle);
   const verticalLabelAlign = styles.get(import_editor.DefaultVerticalAlignStyle);
   if (labelAlign === void 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.label-align"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_StylePanelButtonPicker.StylePanelButtonPicker,
-      {
-        title: msg("style-panel.label-align"),
-        uiType: "align",
-        style: import_editor.DefaultHorizontalAlignStyle,
-        items: import_styles.STYLES.horizontalAlign,
-        value: labelAlign
-      }
-    ),
-    verticalLabelAlign === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiToolbar.TldrawUiToolbarButton,
-      {
-        type: "icon",
-        title: msg("style-panel.vertical-align"),
-        "data-testid": "vertical-align",
-        disabled: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_StylePanelDropdownPicker.StylePanelDropdownPicker,
-      {
-        type: "icon",
-        id: "geo-vertical-alignment",
-        uiType: "verticalAlign",
-        stylePanelType: "vertical-align",
-        style: import_editor.DefaultVerticalAlignStyle,
-        items: import_styles.STYLES.verticalAlign,
-        value: verticalLabelAlign
-      }
-    )
+  const title = msg("style-panel.label-align");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    enhancedA11yMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: title, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_StylePanelButtonPicker.StylePanelButtonPickerInline,
+        {
+          title,
+          uiType: "align",
+          style: import_editor.DefaultHorizontalAlignStyle,
+          items: import_styles.STYLES.horizontalAlign,
+          value: labelAlign
+        }
+      ),
+      verticalLabelAlign === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TldrawUiToolbar.TldrawUiToolbarButton,
+        {
+          type: "icon",
+          title: msg("style-panel.vertical-align"),
+          "data-testid": "vertical-align",
+          disabled: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_StylePanelDropdownPicker.StylePanelDropdownPickerInline,
+        {
+          type: "icon",
+          id: "geo-vertical-alignment",
+          uiType: "verticalAlign",
+          stylePanelType: "vertical-align",
+          style: import_editor.DefaultVerticalAlignStyle,
+          items: import_styles.STYLES.verticalAlign,
+          value: verticalLabelAlign
+        }
+      )
+    ] })
   ] });
 }
 function StylePanelGeoShapePicker() {

package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx"],
-  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport { StylePanelDropdownPicker } from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, enhancedA11yMode } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && (\n\t\t\t\t<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>\n\t\t\t)}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.fill')}\n\t\t\tuiType=\"fill\"\n\t\t\tstyle={DefaultFillStyle}\n\t\t\titems={STYLES.fill}\n\t\t\tvalue={fill}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\n\treturn (\n\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.align')}>\n\t\t\t<StylePanelButtonPicker\n\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\tuiType=\"align\"\n\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\titems={STYLES.textAlign}\n\t\t\t\tvalue={textAlign}\n\t\t\t/>\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\tdisabled\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\n\treturn (\n\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.label-align')}>\n\t\t\t<StylePanelButtonPicker\n\t\t\t\ttitle={msg('style-panel.label-align')}\n\t\t\t\tuiType=\"align\"\n\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\tvalue={labelAlign}\n\t\t\t/>\n\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t) : (\n\t\t\t\t<StylePanelDropdownPicker\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker, StylePanelButtonPickerInline } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport {\n\tStylePanelDropdownPicker,\n\tStylePanelDropdownPickerInline,\n} from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, enhancedA11yMode } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && (\n\t\t\t\t<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>\n\t\t\t)}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.fill')}\n\t\t\tuiType=\"fill\"\n\t\t\tstyle={DefaultFillStyle}\n\t\t\titems={STYLES.fill}\n\t\t\tvalue={fill}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\tconst title = msg('style-panel.align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\tvalue={textAlign}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\tconst title = msg('style-panel.label-align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t/>\n\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\tdisabled\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t) : (\n\t\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCE;AAvCF,oBAmBO;AACP,mBAAkB;AAClB,oBAAuB;AACvB,oBAA4B;AAC5B,4BAA+B;AAC/B,gCAAmC;AACnC,4BAA+B;AAC/B,6BAAuD;AACvD,oCAAqE;AACrE,+BAAqC;AACrC,4CAA+C;AAC/C,sCAGO;AACP,kCAAqC;AAG9B,SAAS,2BAA2B;AAC1C,SACC,4EACC;AAAA,iDAAC,qBACA;AAAA,kDAAC,yBAAsB;AAAA,MACvB,4CAAC,2BAAwB;AAAA,OAC1B;AAAA,IACA,6CAAC,qBACA;AAAA,kDAAC,wBAAqB;AAAA,MACtB,4CAAC,wBAAqB;AAAA,MACtB,4CAAC,wBAAqB;AAAA,OACvB;AAAA,IACA,6CAAC,qBACA;AAAA,kDAAC,wBAAqB;AAAA,MACtB,4CAAC,6BAA0B;AAAA,MAC3B,4CAAC,8BAA2B;AAAA,OAC7B;AAAA,IACA,6CAAC,qBACA;AAAA,kDAAC,4BAAyB;AAAA,MAC1B,4CAAC,6BAA0B;AAAA,MAC3B,4CAAC,6BAA0B;AAAA,MAC3B,4CAAC,0BAAuB;AAAA,OACzB;AAAA,KACD;AAEF;AAQO,SAAS,kBAAkB,EAAE,SAAS,GAA2B;AACvE,SAAO,4CAAC,SAAI,WAAU,6BAA6B,UAAS;AAC7D;AAGO,SAAS,wBAAwB;AACvC,QAAM,EAAE,OAAO,QAAI,+CAAqB;AACxC,QAAM,UAAM,sCAAe;AAC3B,QAAM,QAAQ,OAAO,IAAI,+BAAiB;AAC1C,MAAI,UAAU,OAAW,QAAO;AAEhC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,mBAAmB;AAAA,MAC9B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,qBAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAEA,MAAM,2BAA2B,CAAC,KAAK,MAAM,KAAK,MAAM,CAAC;AAElD,SAAS,0BAA0B;AACzC,QAAM,aAAS,yBAAU;AACzB,QAAM,EAAE,eAAe,iBAAiB,QAAI,+CAAqB;AAEjE,QAAM,cAAU,wBAAS,WAAW,MAAM,OAAO,iBAAiB,GAAG,CAAC,MAAM,CAAC;AAC7E,QAAM,iBAAa,2BAAY;AAC/B,QAAM,UAAM,sCAAe;AAE3B,QAAM,2BAA2B,aAAAA,QAAM;AAAA,IACtC,CAAC,UAAkB;AAClB,YAAM,OAAO,yBAAyB,KAAK;AAC3C,aAAO,IAAI,MAAM;AAChB,YAAI,OAAO,KAAK,QAAQ,GAAG;AAC1B,iBAAO,4BAA4B,IAAI;AAAA,QACxC;AACA,eAAO,wBAAwB,IAAI;AACnC,eAAO,oBAAoB,EAAE,iBAAiB,KAAK,CAAC;AAAA,MACrD,CAAC;AAED,iBAAW,aAAa,EAAE,QAAQ,eAAe,IAAI,WAAW,MAAM,CAAC;AAAA,IACxE;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACpB;AAEA,MAAI,YAAY,OAAW,QAAO;AAElC,QAAM,eACL,QAAQ,SAAS,UACd,KACA,yBAAyB;AAAA,QACzB;AAAA,MAAM;AAAA,MAA0B,CAAC,qBAChC,KAAK,IAAI,mBAAmB,QAAQ,KAAK;AAAA,IAC1C;AAAA,EACD;AAEH,SACC,4EACE;AAAA,wBACA,4CAAC,oDAAsB,cAAI,qBAAqB,GAAE;AAAA,IAEnD;AAAA,MAAC;AAAA;AAAA,QACA,eAAY;AAAA,QACZ,OAAO,gBAAgB,IAAI,eAAe,yBAAyB,SAAS;AAAA,QAC5E,OAAO,QAAQ,SAAS,UAAU,sBAAsB,iBAAiB,QAAQ,KAAK;AAAA,QACtF,eAAe;AAAA,QACf,OAAO,yBAAyB,SAAS;AAAA,QACzC,OAAO,IAAI,qBAAqB;AAAA,QAChC;AAAA,QACA,mBAAmB;AAAA;AAAA,IACpB;AAAA,KACD;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,EAAE,OAAO,QAAI,+CAAqB;AACxC,QAAM,UAAM,sCAAe;AAC3B,QAAM,OAAO,OAAO,IAAI,8BAAgB;AACxC,MAAI,SAAS,OAAW,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,kBAAkB;AAAA,MAC7B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,qBAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,EAAE,OAAO,QAAI,+CAAqB;AACxC,QAAM,UAAM,sCAAe;AAC3B,QAAM,OAAO,OAAO,IAAI,8BAAgB;AACxC,MAAI,SAAS,OAAW,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,kBAAkB;AAAA,MAC7B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,qBAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,aAAS,yBAAU;AACzB,QAAM,EAAE,QAAQ,cAAc,QAAI,+CAAqB;AACvD,QAAM,UAAM,sCAAe;AAC3B,QAAM,OAAO,OAAO,IAAI,8BAAgB;AACxC,MAAI,SAAS,OAAW,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,kBAAkB;AAAA,MAC7B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,qBAAO;AAAA,MACd,OAAO;AAAA,MACP,eAAe,CAAC,OAAO,UAAU;AAChC,sBAAc,OAAO,KAAK;AAC1B,cAAM,mBAAmB,OAAO,oBAAoB;AACpD,YAAI,iBAAiB,SAAS,GAAG;AAChC,mDAAsB,QAAQ,gBAAgB;AAAA,QAC/C;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,EAAE,OAAO,QAAI,+CAAqB;AACxC,QAAM,UAAM,sCAAe;AAC3B,QAAM,OAAO,OAAO,IAAI,8BAAgB;AACxC,MAAI,SAAS,OAAW,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,kBAAkB;AAAA,MAC7B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,qBAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,EAAE,QAAQ,iBAAiB,QAAI,+CAAqB;AAC1D,QAAM,UAAM,sCAAe;AAC3B,QAAM,YAAY,OAAO,IAAI,mCAAqB;AAClD,MAAI,cAAc,OAAW,QAAO;AACpC,QAAM,QAAQ,IAAI,mBAAmB;AAErC,SACC,4EACE;AAAA,wBAAoB,4CAAC,oDAAsB,iBAAM;AAAA,IAClD,6CAAC,0CAAgB,aAAY,cAAa,OAAO,OAChD;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,QAAO;AAAA,UACP,OAAO;AAAA,UACP,OAAO,qBAAO;AAAA,UACd,OAAO;AAAA;AAAA,MACR;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,OAAO,IAAI,4BAA4B;AAAA,UACvC,eAAY;AAAA,UACZ,UAAQ;AAAA,UAER,sDAAC,gDAAmB,MAAK,yBAAwB;AAAA;AAAA,MAClD;AAAA,OACD;AAAA,KACD;AAEF;AAGO,SAAS,6BAA6B;AAC5C,QAAM,EAAE,QAAQ,iBAAiB,QAAI,+CAAqB;AAC1D,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAa,OAAO,IAAI,yCAA2B;AACzD,QAAM,qBAAqB,OAAO,IAAI,uCAAyB;AAC/D,MAAI,eAAe,OAAW,QAAO;AACrC,QAAM,QAAQ,IAAI,yBAAyB;AAE3C,SACC,4EACE;AAAA,wBAAoB,4CAAC,oDAAsB,iBAAM;AAAA,IAClD,6CAAC,0CAAgB,aAAY,cAAa,OAAO,OAChD;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,QAAO;AAAA,UACP,OAAO;AAAA,UACP,OAAO,qBAAO;AAAA,UACd,OAAO;AAAA;AAAA,MACR;AAAA,MACC,uBAAuB,SACvB;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,OAAO,IAAI,4BAA4B;AAAA,UACvC,eAAY;AAAA,UACZ,UAAQ;AAAA,UAER,sDAAC,gDAAmB,MAAK,yBAAwB;AAAA;AAAA,MAClD,IAEA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,IAAG;AAAA,UACH,QAAO;AAAA,UACP,gBAAe;AAAA,UACf,OAAO;AAAA,UACP,OAAO,qBAAO;AAAA,UACd,OAAO;AAAA;AAAA,MACR;AAAA,OAEF;AAAA,KACD;AAEF;AAGO,SAAS,2BAA2B;AAC1C,QAAM,EAAE,OAAO,QAAI,+CAAqB;AACxC,QAAM,MAAM,OAAO,IAAI,8BAAgB;AACvC,MAAI,QAAQ,OAAW,QAAO;AAE9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAM;AAAA,MACN,MAAK;AAAA,MACL,IAAG;AAAA,MACH,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,OAAO;AAAA,MACP,OAAO,qBAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,EAAE,OAAO,QAAI,+CAAqB;AACxC,QAAM,YAAY,OAAO,IAAI,iCAAmB;AAChD,MAAI,cAAc,OAAW,QAAO;AAEpC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAG;AAAA,MACH,MAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,OAAO;AAAA,MACP,OAAO,qBAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,EAAE,OAAO,QAAI,+CAAqB;AACxC,QAAM,eAAe,OAAO,IAAI,yCAA2B;AAC3D,QAAM,iBAAiB,OAAO,IAAI,2CAA6B;AAC/D,MAAI,iBAAiB,UAAa,mBAAmB,OAAW,QAAO;AAEvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,SAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,qBAAO;AAAA,MACf,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,qBAAO;AAAA,MACf,QAAQ;AAAA,MACR,QAAO;AAAA,MACP,QAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,yBAAyB;AACxC,QAAM,EAAE,OAAO,QAAI,+CAAqB;AACxC,QAAM,SAAS,OAAO,IAAI,kCAAoB;AAC9C,MAAI,WAAW,OAAW,QAAO;AAEjC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,IAAG;AAAA,MACH,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,OAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO,qBAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;",
   "names": ["React"]
 }

package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var StylePanelButtonPicker_exports = {};
 __export(StylePanelButtonPicker_exports, {
-  StylePanelButtonPicker: () => StylePanelButtonPicker
+  StylePanelButtonPicker: () => StylePanelButtonPicker,
+  StylePanelButtonPickerInline: () => StylePanelButtonPickerInline
 });
 module.exports = __toCommonJS(StylePanelButtonPicker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -33,7 +34,14 @@ var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 var import_layout = require("../primitives/layout");
 var import_StylePanelContext = require("./StylePanelContext");
 var import_StylePanelSubheading = require("./StylePanelSubheading");
-const StylePanelButtonPicker = (0, import_react.memo)(function StylePanelButtonPicker2(props) {
+function StylePanelButtonPickerInner(props) {
+  const { enhancedA11yMode } = (0, import_StylePanelContext.useStylePanelContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    enhancedA11yMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: props.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: props.title, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelButtonPickerInline, { ...props }) })
+  ] });
+}
+function StylePanelButtonPickerInlineInner(props) {
   const ctx = (0, import_StylePanelContext.useStylePanelContext)();
   const {
     uiType,
@@ -99,49 +107,48 @@ const StylePanelButtonPicker = (0, import_react.memo)(function StylePanelButtonP
     };
   }, [editor, breakpoint, value, onHistoryMark, onValueChange, style]);
   const Layout = items.length > 4 ? import_layout.TldrawUiGrid : import_layout.TldrawUiRow;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    ctx.enhancedA11yMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiToolbar.TldrawUiToolbarToggleGroup,
-      {
-        "data-testid": `style.${uiType}`,
-        type: "single",
-        value: value.type === "shared" ? value.value : void 0,
-        asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layout, { children: items.map((item) => {
-          const isActive = value.type === "shared" && value.value === item.value;
-          const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_TldrawUiToolbar.TldrawUiToolbarToggleItem,
-            {
-              type: "icon",
-              "data-id": item.value,
-              "data-testid": `style.${uiType}.${item.value}`,
-              "aria-label": label + (isActive ? ` (${msg("style-panel.selected")})` : ""),
-              tooltip: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
-                isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                  "(",
-                  msg("style-panel.selected"),
-                  ")"
-                ] }) : null
-              ] }),
-              value: item.value,
-              "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
-              "data-isactive": isActive,
-              title: label,
-              style: style === import_editor.DefaultColorStyle ? { color: (0, import_editor.getColorValue)(theme, item.value, "solid") } : void 0,
-              onPointerEnter: handleButtonPointerEnter,
-              onPointerDown: handleButtonPointerDown,
-              onPointerUp: handleButtonPointerUp,
-              onClick: handleButtonClick,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: item.icon })
-            },
-            item.value
-          );
-        }) })
-      }
-    ) })
-  ] });
-});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_TldrawUiToolbar.TldrawUiToolbarToggleGroup,
+    {
+      "data-testid": `style.${uiType}`,
+      type: "single",
+      value: value.type === "shared" ? value.value : null,
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layout, { children: items.map((item) => {
+        const isActive = value.type === "shared" && value.value === item.value;
+        const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiToolbar.TldrawUiToolbarToggleItem,
+          {
+            type: "icon",
+            "data-id": item.value,
+            "data-testid": `style.${uiType}.${item.value}`,
+            "aria-label": label + (isActive ? ` (${msg("style-panel.selected")})` : ""),
+            tooltip: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
+              isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                "(",
+                msg("style-panel.selected"),
+                ")"
+              ] }) : null
+            ] }),
+            value: item.value,
+            "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
+            "data-isactive": isActive,
+            title: label,
+            style: style === import_editor.DefaultColorStyle ? { color: (0, import_editor.getColorValue)(theme, item.value, "solid") } : void 0,
+            onPointerEnter: handleButtonPointerEnter,
+            onPointerDown: handleButtonPointerDown,
+            onPointerUp: handleButtonPointerUp,
+            onClick: handleButtonClick,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: item.icon })
+          },
+          item.value
+        );
+      }) })
+    }
+  );
+}
+const StylePanelButtonPicker = (0, import_react.memo)(StylePanelButtonPickerInner);
+const StylePanelButtonPickerInline = (0, import_react.memo)(StylePanelButtonPickerInlineInner);
 //# sourceMappingURL=StylePanelButtonPicker.js.map

package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, ReactElement, useMemo, useRef } from 'react'\nimport { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiToolbar,\n\tTldrawUiToolbarToggleGroup,\n\tTldrawUiToolbarToggleItem,\n} from '../primitives/TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public */\nexport interface StylePanelButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(\n\tprops: StylePanelButtonPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\tonHistoryMark = ctx.onHistoryMark,\n\t} = props\n\tconst theme = useDefaultColorTheme()\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\tconst Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<>\n\t\t\t{ctx.enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar label={title}>\n\t\t\t\t<TldrawUiToolbarToggleGroup\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttype=\"single\"\n\t\t\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<Layout>\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst isActive = value.type === 'shared' && value.value === item.value\n\t\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\t\ttitle + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\taria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}\n\t\t\t\t\t\t\t\t\ttooltip={\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<div>{label}</div>\n\t\t\t\t\t\t\t\t\t\t\t{isActive ? <div>({msg('style-panel.selected')})</div> : null}\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\t\t\tdata-isactive={isActive}\n\t\t\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</Layout>\n\t\t\t\t</TldrawUiToolbarToggleGroup>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement\n"],
-  "mappings": "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",
-  "names": ["StylePanelButtonPicker", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, useMemo, useRef } from 'react'\nimport { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiToolbar,\n\tTldrawUiToolbarToggleGroup,\n\tTldrawUiToolbarToggleItem,\n} from '../primitives/TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public */\nexport interface StylePanelButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\nfunction StylePanelButtonPickerInner<T extends string>(props: StylePanelButtonPickerProps<T>) {\n\tconst { enhancedA11yMode } = useStylePanelContext()\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{props.title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar label={props.title}>\n\t\t\t\t<StylePanelButtonPickerInline {...props} />\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\nfunction StylePanelButtonPickerInlineInner<T extends string>(\n\tprops: StylePanelButtonPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\tonHistoryMark = ctx.onHistoryMark,\n\t} = props\n\tconst theme = useDefaultColorTheme()\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\tconst Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<TldrawUiToolbarToggleGroup\n\t\t\tdata-testid={`style.${uiType}`}\n\t\t\ttype=\"single\"\n\t\t\tvalue={value.type === 'shared' ? value.value : null}\n\t\t\tasChild\n\t\t>\n\t\t\t<Layout>\n\t\t\t\t{items.map((item) => {\n\t\t\t\t\tconst isActive = value.type === 'shared' && value.value === item.value\n\t\t\t\t\tconst label = title + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\taria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}\n\t\t\t\t\t\t\ttooltip={\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<div>{label}</div>\n\t\t\t\t\t\t\t\t\t{isActive ? <div>({msg('style-panel.selected')})</div> : null}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\tdata-isactive={isActive}\n\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</Layout>\n\t\t</TldrawUiToolbarToggleGroup>\n\t)\n}\n\n/** @public @react */\nexport const StylePanelButtonPicker = memo(StylePanelButtonPickerInner) as <T extends string>(\n\tprops: StylePanelButtonPickerProps<T>\n) => React.JSX.Element\n\n/** @public @react*/\nexport const StylePanelButtonPickerInline = memo(StylePanelButtonPickerInlineInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelButtonPickerProps<T>\n) => React.JSX.Element\n"],
+  "mappings": "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",
+  "names": ["handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
 }