@allbluecn/web-app 0.17.2 → 0.18.1

package/src/components/design/canvas/panels/toolbar.tsx

@@ -0,0 +1,663 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useEffect, useRef, useState, type ComponentType } from "react"
+import {
+  ArrowRight,
+  ChevronDown,
+  Circle,
+  Hand,
+  Minus,
+  Monitor,
+  MousePointer2,
+  PenTool,
+  Shapes,
+  Smartphone,
+  Square,
+  SquarePlus,
+  Tablet,
+  TabletSmartphone,
+  Type,
+} from "lucide-react"
+import { detectPlatform, formatForDisplay, type Hotkey } from "@tanstack/hotkeys"
+import { cn } from "@/lib/utils"
+import { m } from "@/paraglide/messages.js"
+import { Button } from "@allbluecn/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@allbluecn/ui/dropdown-menu"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Separator } from "@allbluecn/ui/separator"
+
+import { isTypingTarget } from "../tools/dom"
+import type { ToolId } from "../document/types"
+import { FRAME_PRESETS, framePresetCorners, type FramePresetItem, type FramePresetKind } from "../document/frames"
+import { useFrameCustomPresets } from "../document/frame-custom-presets"
+import { createFrameController, createPresetFrame } from "../tools/frame-tool"
+import { createFreehandController, createPenController, isFreehandPen, type PenController } from "../tools/pen-tool"
+import { createShapeController, type ToolController, type ToolEngine } from "../tools/shape-tools"
+import { createTextController } from "../tools/text-tool"
+import {
+  createPolylineController,
+  polylineModeOfVariant,
+  type PolylineController,
+  type PolylineVariant,
+} from "../tools/polyline-tools"
+
+import { useCanvasHost, useCanvasSnapshot } from "../react/canvas-hooks"
+import { SHAPE_VARIANT_GROUPS, SHAPE_VARIANTS, type ShapeVariantDefinition } from "./shape-variants"
+import { usePanMode, useTool, useCanvasCursor } from "../react/hooks"
+
+export type ToolDefinition = {
+  id: ToolId
+  hotkey?: Hotkey
+  label: () => string
+  icon: ComponentType<{ className?: string }>
+}
+
+export const TOOL_DEFINITIONS: readonly ToolDefinition[] = [
+  { id: "select", hotkey: "V", label: m.canvas_toolSelect, icon: MousePointer2 },
+  { id: "frame", hotkey: "A", label: m.canvas_toolFrame, icon: TabletSmartphone },
+  { id: "rect", hotkey: "R", label: m.canvas_toolRect, icon: Square },
+  { id: "ellipse", hotkey: "O", label: m.canvas_toolEllipse, icon: Circle },
+  { id: "line", hotkey: "L", label: m.canvas_toolLine, icon: Minus },
+  { id: "arrow", label: m.canvas_toolArrow, icon: ArrowRight },
+  { id: "pen", hotkey: "P", label: m.canvas_toolPen, icon: PenTool },
+  { id: "text", hotkey: "T", label: m.canvas_toolText, icon: Type },
+]
+
+export const TOOL_HOTKEYS: Partial<Record<ToolId, Hotkey>> = Object.fromEntries(
+  TOOL_DEFINITIONS.filter((tool) => tool.hotkey).map((tool) => [tool.id, tool.hotkey!]),
+) as Partial<Record<ToolId, Hotkey>>
+
+
+// 图形库变体注册表（规格 FS-2.1，React 层状态）：仅承载 id/分组/工具种类/文案/图标，
+// 变体的落库默认参数由 tools 层 shape-tools 按 variant id 解析（FS-2.2），两层经 id 解耦
+
+function VerticalLineIcon({ className }: { className?: string }) {
+  return <Minus className={cn("rotate-90", className)} />
+}
+
+const FLAT_TOOL_IDS: readonly ToolId[] = ["select", "pen", "text"]
+
+const FRAME_LABELS: Record<FramePresetKind, () => string> = {
+  desktop: m.canvas_frame_desktop,
+  tablet: m.canvas_frame_tablet,
+  mobile: m.canvas_frame_mobile,
+  custom: m.canvas_frame_custom,
+}
+
+function isInsideCanvasUi(target: EventTarget | null): boolean {
+  let current = target as HTMLElement | Text | null
+  while (current instanceof HTMLElement) {
+    if (current.hasAttribute("data-canvas-ui")) return true
+    current = current.parentElement
+  }
+  return false
+}
+
+function useHotkeyPlatform(): "mac" | "windows" | "linux" {
+  const [platform, setPlatform] = useState<"mac" | "windows" | "linux">("windows")
+
+  useEffect(() => {
+    setPlatform(detectPlatform())
+  }, [])
+
+  return platform
+}
+
+export function formatToolHotkey(hotkey: Hotkey, platform: "mac" | "windows" | "linux" = "windows"): string {
+  return formatForDisplay(hotkey, { platform, separatorToken: " " })
+}
+
+type DrawingHostRef = { current: HTMLElement | null }
+
+export function useCanvasDrawing(hostRef: DrawingHostRef, shapeVariant?: string | null) {
+  const snapshot = useCanvasSnapshot()
+  const { setTool } = useTool()
+  const controllerRef = useRef<ToolController | null>(null)
+  const activeRef = useRef(false)
+  const tool = snapshot.tool
+  const enabled = Boolean(snapshot.engine) && !snapshot.readOnly
+
+  const selectTool = (id: ToolId) => {
+    if (isTypingTarget(document.activeElement)) return
+    setTool(id)
+  }
+
+  useEffect(() => {
+    if (!enabled) return
+    const hotkeyMap = new Map<string, ToolId>()
+    for (const definition of TOOL_DEFINITIONS) {
+      const hotkey = definition.hotkey
+      if (!hotkey) continue
+      hotkeyMap.set(hotkey.toLowerCase(), definition.id)
+    }
+    const handler = (e: KeyboardEvent) => {
+      if (isTypingTarget(e.target as HTMLElement)) return
+      if (e.ctrlKey || e.metaKey || e.altKey) return
+      const id = hotkeyMap.get(e.key.toLowerCase())
+      if (id) {
+        e.preventDefault()
+        selectTool(id)
+      }
+    }
+    document.addEventListener("keydown", handler)
+    return () => document.removeEventListener("keydown", handler)
+  }, [enabled])
+
+  useEffect(() => {
+    if (!enabled || tool === "select") return
+    const engine = snapshot.engine
+    if (!engine) return
+
+    const controller = createController(engine, tool, shapeVariant)
+    if (!controller) return
+    controllerRef.current = controller
+
+    const resolvePoint = (event: PointerEvent) => {
+      const point = engine.toCanvas(event.clientX, event.clientY)
+      return point ?? { x: 0, y: 0 }
+    }
+
+    // FS-2.3 单击加点模式：折线/平滑曲线/自由/平滑多边形——pointerdown 记点、
+    // pointermove 橡皮筋（不按键也跟随）、双击/Enter/Esc 结束；趋势图与拖拽
+    // 工具共用 pointerup 结束的拖拽接线
+    if (polylineModeOf(tool, shapeVariant) === "click") {
+      const polyline = controller as PolylineController
+      const onPointerDown = (event: PointerEvent) => {
+        if (event.button !== 0 || isInsideCanvasUi(event.target)) return
+        controller.begin(resolvePoint(event), { shiftKey: event.shiftKey })
+      }
+      const onPointerMove = (event: PointerEvent) => {
+        if (!polyline.drawing) return
+        controller.move(resolvePoint(event), { shiftKey: event.shiftKey })
+      }
+      const onDoubleClick = () => {
+        if (polyline.drawing) controller.end()
+      }
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (isTypingTarget(event.target as HTMLElement)) return
+        if (!polyline.drawing) return
+        if (event.key === "Enter" || event.key === "Escape") {
+          event.preventDefault()
+          controller.end()
+        } else if (event.key === "Backspace" || event.key === "Delete") {
+          // 绘制中拦截删除键：useDeleteSelection 在 document 冒泡相，冒泡相注册
+          // 的 stopPropagation 来不及拦截（同钢笔分支 457c1ef76 病灶）——「选中
+          // A → 绘制折线中按 Backspace」会误删 A
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }
+      window.addEventListener("pointerdown", onPointerDown, true)
+      window.addEventListener("pointermove", onPointerMove)
+      window.addEventListener("dblclick", onDoubleClick)
+      // keydown 捕获相：同钢笔分支，先于 document 冒泡相的删除监听
+      window.addEventListener("keydown", onKeyDown, true)
+      return () => {
+        window.removeEventListener("pointerdown", onPointerDown, true)
+        window.removeEventListener("pointermove", onPointerMove)
+        window.removeEventListener("dblclick", onDoubleClick)
+        window.removeEventListener("keydown", onKeyDown, true)
+        controller.dispose()
+        controllerRef.current = null
+      }
+    }
+
+    // FS-1.1 锚点式钢笔：pointerdown 放锚点（拖拽拉手柄）、pointerup 提交锚点、
+    // pointermove 橡皮筋（不按键也跟随）、双击/Enter/Esc 结束、Backspace/Delete
+    // 逐点回退。自由手绘变体（freehand）不走此分支，沿用下方拖拽接线
+    if (tool === "pen" && !isFreehandPen(shapeVariant)) {
+      const pen = controller as PenController
+      const pointerOpts = (event: PointerEvent) => ({
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+      })
+      const onPointerDown = (event: PointerEvent) => {
+        if (event.button !== 0 || isInsideCanvasUi(event.target)) return
+        controller.begin(resolvePoint(event), pointerOpts(event))
+      }
+      const onPointerMove = (event: PointerEvent) => {
+        if (!pen.drawing) return
+        controller.move(resolvePoint(event), pointerOpts(event))
+      }
+      const onPointerUp = (event: PointerEvent) => {
+        if (!pen.drawing) return
+        controller.end(resolvePoint(event), pointerOpts(event))
+      }
+      const onDoubleClick = () => {
+        if (pen.drawing) pen.finish()
+      }
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (isTypingTarget(event.target as HTMLElement)) return
+        if (!pen.drawing) return
+        if (event.key === "Enter" || event.key === "Escape") {
+          event.preventDefault()
+          pen.finish()
+          // Esc 结束路径后一并退出钢笔工具（Figma/Sketch 惯例）；Enter 保持钢笔连续绘制
+          if (event.key === "Escape") setTool("select")
+        } else if (event.key === "Backspace" || event.key === "Delete") {
+          event.preventDefault()
+          event.stopPropagation()
+          pen.removeLastAnchor()
+        }
+      }
+      window.addEventListener("pointerdown", onPointerDown, true)
+      window.addEventListener("pointermove", onPointerMove)
+      window.addEventListener("pointerup", onPointerUp)
+      window.addEventListener("dblclick", onDoubleClick)
+      // keydown 必须捕获相：useDeleteSelection 在 document 冒泡相（冒泡顺序
+      // document 先于 window），冒泡相注册的 stopPropagation 来不及拦截——
+      // 「选中 A → 切钢笔 → 绘制中按 Backspace」会同时删 A 并回退锚点
+      window.addEventListener("keydown", onKeyDown, true)
+      return () => {
+        window.removeEventListener("pointerdown", onPointerDown, true)
+        window.removeEventListener("pointermove", onPointerMove)
+        window.removeEventListener("pointerup", onPointerUp)
+        window.removeEventListener("dblclick", onDoubleClick)
+        window.removeEventListener("keydown", onKeyDown, true)
+        controller.dispose()
+        controllerRef.current = null
+      }
+    }
+
+    const onPointerDown = (event: PointerEvent) => {
+      if (event.button !== 0 || isInsideCanvasUi(event.target)) return
+      activeRef.current = true
+      controller.begin(resolvePoint(event), { shiftKey: event.shiftKey })
+    }
+    const onPointerMove = (event: PointerEvent) => {
+      if (!activeRef.current) return
+      controller.move(resolvePoint(event), { shiftKey: event.shiftKey })
+    }
+    const onPointerUp = (event: PointerEvent) => {
+      if (!activeRef.current) return
+      activeRef.current = false
+      controller.end(resolvePoint(event), { shiftKey: event.shiftKey })
+    }
+
+    window.addEventListener("pointerdown", onPointerDown, true)
+    window.addEventListener("pointermove", onPointerMove)
+    window.addEventListener("pointerup", onPointerUp)
+
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown, true)
+      window.removeEventListener("pointermove", onPointerMove)
+      window.removeEventListener("pointerup", onPointerUp)
+      controller.dispose()
+      controllerRef.current = null
+      activeRef.current = false
+    }
+  }, [enabled, tool, snapshot.engine, shapeVariant])
+}
+
+// 变体 → 单击加点交互模式；变体与工具种类不匹配时忽略（热键切工具后残留 variant 的防御）
+function polylineModeOf(tool: ToolId, variant?: string | null): "click" | "drag" | null {
+  const definition = variant ? SHAPE_VARIANTS.find((candidate) => candidate.id === variant) : undefined
+  return polylineModeOfVariant(definition && definition.kind === tool ? variant : undefined)
+}
+
+function createController(engine: ToolEngine, tool: ToolId, variant?: string | null): ToolController | null {
+  // FS-2.3 单击加点工具族：折线/平滑曲线/趋势图/自由多边形/平滑多边形
+  const mode = polylineModeOf(tool, variant)
+  if (mode && variant) return createPolylineController(engine, variant as PolylineVariant)
+  switch (tool) {
+    case "frame":
+      return createFrameController(engine)
+    case "rect":
+    case "ellipse":
+    case "line":
+    case "arrow":
+    case "polygon":
+    case "star": {
+      // 变体与工具种类不匹配时忽略变体（热键切工具后残留 variant 的防御）
+      const definition = variant
+        ? SHAPE_VARIANTS.find((candidate) => candidate.id === variant)
+        : undefined
+      return createShapeController(engine, tool, definition && definition.kind === tool ? definition.id : undefined)
+    }
+    case "pen":
+      // FS-1.3 自由手绘变体保留既有拖拽实现；默认 pen = 锚点式钢笔（FS-1.1）
+      if (isFreehandPen(variant)) return createFreehandController(engine)
+      return createPenController(engine)
+    case "text":
+      return createTextController(engine)
+    default:
+      return null
+  }
+}
+
+function ToolButton({
+  definition,
+  active,
+  onSelect,
+  platform,
+  overrideIcon,
+}: {
+  definition: ToolDefinition
+  active: boolean
+  onSelect: () => void
+  platform: "mac" | "windows" | "linux"
+  overrideIcon?: ComponentType<{ className?: string }>
+}) {
+  const { icon: DefaultIcon, hotkey, label } = definition
+  const Icon = overrideIcon ?? DefaultIcon
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label={label()}
+            aria-pressed={active}
+            onClick={onSelect}
+            className={cn("rounded-md", active && "bg-muted text-foreground")}
+          />
+        }
+      >
+        <Icon className="size-4" />
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <span className="flex items-center gap-2">
+          <span>{label()}</span>
+          {hotkey ? (
+            <kbd className="rounded border border-border bg-muted/60 px-1.5 py-0.5 text-[11px] font-semibold text-foreground">
+              {formatToolHotkey(hotkey, platform)}
+            </kbd>
+          ) : null}
+        </span>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+function ShapeLibraryButton({
+  variant,
+  onVariantChange,
+}: {
+  variant: string | null
+  onVariantChange: (variant: string | null) => void
+}) {
+  const { tool, setTool } = useTool()
+  const [open, setOpen] = useState(false)
+  const activeVariant = SHAPE_VARIANTS.find((definition) => definition.id === variant && definition.kind === tool)
+  const Icon = activeVariant?.icon ?? Shapes
+  const shapeActive = Boolean(activeVariant)
+
+  const selectVariant = (definition: ShapeVariantDefinition) => {
+    // 再次点击同一变体 = 取消绘制模式回到选择工具
+    if (tool === definition.kind && variant === definition.id) {
+      onVariantChange(null)
+      setTool("select")
+    } else {
+      onVariantChange(definition.id)
+      setTool(definition.kind)
+    }
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <PopoverTrigger
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={m.canvas_shapeTools()}
+                  aria-pressed={shapeActive}
+                  className={cn("rounded-md", shapeActive && "bg-muted text-foreground")}
+                />
+              }
+            />
+          }
+        >
+          <span className="flex items-center gap-0.5">
+            <Icon className="size-4" />
+            <ChevronDown className="size-3 opacity-60" />
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">{m.canvas_shapeTools()}</TooltipContent>
+      </Tooltip>
+      <PopoverContent align="start" sideOffset={8} className="w-auto gap-2 p-2">
+        {SHAPE_VARIANT_GROUPS.map((group) => (
+          <div key={group.id} className="flex flex-col gap-1">
+            <div className="px-1 text-xs font-medium text-muted-foreground">{group.label()}</div>
+            <div className="grid grid-cols-5 gap-0.5">
+              {SHAPE_VARIANTS.filter((definition) => definition.group === group.id).map((definition) => {
+                const active = tool === definition.kind && variant === definition.id
+                const VariantIcon = definition.icon
+                return (
+                  <Tooltip key={`${group.id}-${definition.id}`}>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={definition.label()}
+                          aria-pressed={active}
+                          onClick={() => selectVariant(definition)}
+                          className={cn("rounded-md", active && "bg-muted text-foreground")}
+                        >
+                          <VariantIcon className={cn("size-4", definition.iconClassName)} />
+                        </Button>
+                      }
+                    />
+                    <TooltipContent side="bottom">{definition.label()}</TooltipContent>
+                  </Tooltip>
+                )
+              })}
+            </div>
+          </div>
+        ))}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function FrameToolButton() {
+  const { tool, setTool } = useTool()
+  const snapshot = useCanvasSnapshot()
+  const platform = useHotkeyPlatform()
+  const engine = snapshot.engine
+  const readOnly = snapshot.readOnly
+  const disabled = readOnly || !engine
+  const customPresets = useFrameCustomPresets()
+  const frameDef = TOOL_DEFINITIONS.find((definition) => definition.id === "frame")
+  const frameActive = tool === "frame"
+
+  if (!frameDef) return null
+
+  const { icon: FrameIcon, hotkey, label } = frameDef
+  // 自定义预设条目带 id（localStorage 主键），静态预设无 id 以 name 作 key
+  const itemsOf = (kind: FramePresetKind): (FramePresetItem & { id?: string })[] =>
+    kind === "custom" ? customPresets : FRAME_PRESETS[kind].items
+
+  return (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={label()}
+                  aria-pressed={frameActive}
+                  className={cn("rounded-md", frameActive && "bg-muted text-foreground")}
+                />
+              }
+            />
+          }
+        >
+          <span className="flex items-center gap-0.5">
+            <FrameIcon className="size-4" />
+            <ChevronDown className="size-3 opacity-60" />
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <span className="flex items-center gap-2">
+            <span>{label()}</span>
+            {hotkey ? (
+              <kbd className="rounded border border-border bg-muted/60 px-1.5 py-0.5 text-[11px] font-semibold text-foreground">
+                {formatToolHotkey(hotkey, platform)}
+              </kbd>
+            ) : null}
+          </span>
+        </TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent align="start" className="min-w-44">
+        <DropdownMenuItem
+          disabled={disabled}
+          onClick={() => setTool("frame")}
+          className="gap-2"
+        >
+          <FrameIcon className="size-4" />
+          <span className="flex-1">{m.canvas_frame_free()}</span>
+          {hotkey ? (
+            <kbd className="rounded border border-border bg-muted/60 px-1.5 py-0.5 text-[11px] font-semibold text-foreground">
+              {formatToolHotkey(hotkey, platform)}
+            </kbd>
+          ) : null}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        {(Object.keys(FRAME_PRESETS) as FramePresetKind[]).map((kind) => {
+          const items = itemsOf(kind)
+          // 自定义组为空（用户尚未保存）时不渲染该子菜单
+          if (items.length === 0) return null
+          const KindIcon = kind === "desktop" ? Monitor : kind === "tablet" ? Tablet : kind === "mobile" ? Smartphone : SquarePlus
+          return (
+            <DropdownMenuSub key={kind}>
+              <DropdownMenuSubTrigger disabled={disabled}>
+                <span className="flex items-center gap-2">
+                  <KindIcon className="size-4" />
+                  {FRAME_LABELS[kind]()}
+                </span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+              {items.map((item) => (
+                <DropdownMenuItem
+                  key={item.id ?? item.name}
+                  disabled={disabled}
+                  onClick={() => {
+                    if (!engine) return
+                    createPresetFrame(engine, {
+                      kind,
+                      width: item.width,
+                      height: item.height,
+                      corners: framePresetCorners(item),
+                      model: item.model,
+                    })
+                  }}
+                >
+                  {item.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export type CanvasToolbarProps = {
+  className?: string
+}
+
+export function CanvasToolbar({ className }: CanvasToolbarProps) {
+  const { tool, setTool } = useTool()
+  const hostRef = useCanvasHost()
+  const platform = useHotkeyPlatform()
+  const { panMode } = usePanMode()
+  const [shapeVariant, setShapeVariant] = useState<string | null>(null)
+  useCanvasDrawing(hostRef, shapeVariant)
+  useCanvasCursor(hostRef)
+
+  // 工具变化后清理不再匹配的变体（绘制完成自动回 select / 热键切换工具）
+  useEffect(() => {
+    setShapeVariant((prev) => {
+      if (!prev) return prev
+      const definition = SHAPE_VARIANTS.find((candidate) => candidate.id === prev)
+      return definition && definition.kind === tool ? prev : null
+    })
+  }, [tool])
+
+  const definitionsById: Partial<Record<ToolId, ToolDefinition>> = Object.fromEntries(
+    TOOL_DEFINITIONS.map((definition) => [definition.id, definition]),
+  )
+
+  return (
+    <div
+      data-canvas-ui
+      className={cn(
+        "flex items-center gap-1 rounded-lg border border-border bg-background p-1 shadow-xs",
+        className,
+      )}
+    >
+      {FLAT_TOOL_IDS.filter((id) => id === "select").map((id) => {
+        const definition = definitionsById[id]
+        if (!definition) return null
+        return (
+          <ToolButton
+            key={id}
+            definition={definition}
+            active={tool === id}
+            onSelect={() => setTool(id)}
+            platform={platform}
+            overrideIcon={panMode ? Hand : undefined}
+          />
+        )
+      })}
+      <ShapeLibraryButton variant={shapeVariant} onVariantChange={setShapeVariant} />
+      {FLAT_TOOL_IDS.filter((id) => id === "pen" || id === "text").map((id) => {
+        const definition = definitionsById[id]
+        if (!definition) return null
+        return (
+          <ToolButton
+            key={id}
+            definition={definition}
+            active={tool === id}
+            onSelect={() => setTool(id)}
+            platform={platform}
+          />
+        )
+      })}
+      <Separator orientation="vertical" className="mx-0.5 mt-1 h-4" />
+      <FrameToolButton />
+    </div>
+  )
+}