@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/editor-2d/floorplan-quick-measure-layer.tsx

@@ -0,0 +1,212 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { type RefObject, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import {
+  createQuickMeasurementPointerScheduler,
+  resolveQuickMeasurementReport,
+} from '../../lib/quick-measurement'
+import {
+  activateQuickMeasurementHudSource,
+  clearQuickMeasurementHudSource,
+  publishQuickMeasurementHudSource,
+} from '../../store/use-quick-measurement-hud'
+import { useFloorplanRender } from './floorplan-render-context'
+
+type FloorplanQuickMeasureHit = {
+  nodeId: string
+  point: { x: number; y: number }
+}
+
+function nodeIdFromElement(element: Element | null): string | null {
+  const entry = element?.closest<SVGGElement>('.floorplan-registry-entry[data-node-id]')
+  return entry?.dataset.nodeId ?? null
+}
+
+function nodeIdAtPointer(svg: SVGSVGElement, event: PointerEvent): string | null {
+  const direct = event.target instanceof Element ? nodeIdFromElement(event.target) : null
+  if (direct) return direct
+  for (const element of document.elementsFromPoint(event.clientX, event.clientY)) {
+    if (!svg.contains(element)) continue
+    const nodeId = nodeIdFromElement(element)
+    if (nodeId) return nodeId
+  }
+  return null
+}
+
+function pointAtPointer(
+  group: SVGGElement,
+  event: PointerEvent,
+): FloorplanQuickMeasureHit['point'] | null {
+  const matrix = group.getScreenCTM()
+  if (!matrix) return null
+  const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse())
+  return { x: point.x, y: point.y }
+}
+
+function FloorplanSmartMarker({
+  hit,
+  pinned,
+  unitsPerPixel,
+  markerRef,
+}: {
+  hit?: FloorplanQuickMeasureHit
+  pinned: boolean
+  unitsPerPixel: number
+  markerRef?: RefObject<SVGGElement | null>
+}) {
+  const localRef = useRef<SVGGElement>(null)
+  const ref = markerRef ?? localRef
+
+  useLayoutEffect(() => {
+    if (!hit) ref.current?.setAttribute('display', 'none')
+  }, [hit, ref])
+
+  return (
+    <g ref={ref} transform={hit ? `translate(${hit.point.x} ${hit.point.y})` : undefined}>
+      <circle
+        cx={0}
+        cy={0}
+        fill="none"
+        r={(pinned ? 11 : 8) * unitsPerPixel}
+        stroke={pinned ? '#0e7490' : '#0891b2'}
+        strokeWidth={pinned ? 2.5 : 2}
+        vectorEffect="non-scaling-stroke"
+      />
+      {pinned ? <circle cx={0} cy={0} fill="#0e7490" r={2.75 * unitsPerPixel} /> : null}
+    </g>
+  )
+}
+
+function showFloorplanSmartMarker(
+  marker: SVGGElement | null,
+  point: FloorplanQuickMeasureHit['point'],
+) {
+  if (!marker) return
+  marker.setAttribute('transform', `translate(${point.x} ${point.y})`)
+  marker.removeAttribute('display')
+}
+
+function hideFloorplanSmartMarker(marker: SVGGElement | null) {
+  marker?.setAttribute('display', 'none')
+}
+
+export function FloorplanQuickMeasureLayer() {
+  const groupRef = useRef<SVGGElement>(null)
+  const hoverRef = useRef<FloorplanQuickMeasureHit | null>(null)
+  const hoverNodeIdRef = useRef<string | null>(null)
+  const candidateNodeIdRef = useRef<string | null | undefined>(undefined)
+  const candidateHasReportRef = useRef(false)
+  const hoverMarkerRef = useRef<SVGGElement>(null)
+  const [hoverNodeId, setHoverNodeId] = useState<string | null>(null)
+  const [pinned, setPinned] = useState<FloorplanQuickMeasureHit | null>(null)
+  const nodes = useScene((state) => state.nodes)
+  const candidateNodesRef = useRef(nodes)
+  const levelId = useViewer((state) => state.selection.levelId)
+  const levelRef = useRef(levelId)
+  const renderContext = useFloorplanRender()
+  const hoverReport = useMemo(
+    () => resolveQuickMeasurementReport(hoverNodeId, nodes),
+    [hoverNodeId, nodes],
+  )
+  const pinnedReport = useMemo(
+    () => resolveQuickMeasurementReport(pinned?.nodeId ?? null, nodes),
+    [pinned?.nodeId, nodes],
+  )
+
+  useEffect(() => {
+    if (levelRef.current === levelId) return
+    levelRef.current = levelId
+    hoverRef.current = null
+    hoverNodeIdRef.current = null
+    candidateNodeIdRef.current = undefined
+    candidateHasReportRef.current = false
+    hideFloorplanSmartMarker(hoverMarkerRef.current)
+    setHoverNodeId(null)
+    setPinned(null)
+  }, [levelId])
+
+  useEffect(() => {
+    const group = groupRef.current
+    const svg = groupRef.current?.ownerSVGElement
+    if (!(group && svg)) return
+    const updateHover = (next: FloorplanQuickMeasureHit | null) => {
+      hoverRef.current = next
+      if (next) showFloorplanSmartMarker(hoverMarkerRef.current, next.point)
+      else hideFloorplanSmartMarker(hoverMarkerRef.current)
+      const nextNodeId = next?.nodeId ?? null
+      if (nextNodeId === hoverNodeIdRef.current) return
+      hoverNodeIdRef.current = nextNodeId
+      setHoverNodeId(nextNodeId)
+    }
+    const processPointerMove = (event: PointerEvent) => {
+      activateQuickMeasurementHudSource('2d')
+      const candidateNodeId = nodeIdAtPointer(svg, event)
+      const sceneNodes = useScene.getState().nodes
+      if (candidateNodesRef.current !== sceneNodes) {
+        candidateNodesRef.current = sceneNodes
+        candidateNodeIdRef.current = undefined
+      }
+      if (candidateNodeId !== candidateNodeIdRef.current) {
+        candidateNodeIdRef.current = candidateNodeId
+        candidateHasReportRef.current = Boolean(
+          resolveQuickMeasurementReport(candidateNodeId, sceneNodes),
+        )
+      }
+      const point = candidateHasReportRef.current ? pointAtPointer(group, event) : null
+      updateHover(candidateNodeId && point ? { nodeId: candidateNodeId, point } : null)
+    }
+    const pointerScheduler = createQuickMeasurementPointerScheduler(processPointerMove)
+    const onPointerMove = (event: PointerEvent) => pointerScheduler.enqueue(event)
+    const clear = () => {
+      pointerScheduler.clear()
+      updateHover(null)
+    }
+    const onClick = (event: MouseEvent) => {
+      const next = hoverRef.current
+      if (!(next && event.button === 0)) return
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      activateQuickMeasurementHudSource('2d')
+      setPinned(next)
+    }
+
+    svg.addEventListener('pointermove', onPointerMove, true)
+    svg.addEventListener('pointerleave', clear)
+    svg.addEventListener('click', onClick, true)
+    return () => {
+      svg.removeEventListener('pointermove', onPointerMove, true)
+      svg.removeEventListener('pointerleave', clear)
+      svg.removeEventListener('click', onClick, true)
+      pointerScheduler.clear()
+    }
+  }, [])
+
+  const unitsPerPixel = Math.max(renderContext?.unitsPerPixel ?? 0.01, 1e-6)
+  const activeHit = hoverReport ? hoverRef.current : pinnedReport ? pinned : null
+  const report = hoverReport ?? pinnedReport
+  const lensState =
+    pinnedReport && activeHit?.nodeId === pinned?.nodeId ? ('pinned' as const) : ('live' as const)
+
+  useEffect(() => {
+    publishQuickMeasurementHudSource('2d', report ? { lensState, report } : null)
+  }, [lensState, report])
+
+  useEffect(() => () => clearQuickMeasurementHudSource('2d'), [])
+
+  return (
+    <g pointerEvents="none" ref={groupRef}>
+      {pinned && pinnedReport ? (
+        <FloorplanSmartMarker hit={pinned} pinned unitsPerPixel={unitsPerPixel} />
+      ) : null}
+      <FloorplanSmartMarker
+        markerRef={hoverMarkerRef}
+        pinned={false}
+        unitsPerPixel={unitsPerPixel}
+      />
+    </g>
+  )
+}
+
+export default FloorplanQuickMeasureLayer

package/src/components/editor-2d/floorplan-registry-action-menu.tsx

@@ -0,0 +1,392 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type CeilingNode,
+  createSceneApi,
+  getWallMidpointHandlePoint,
+  type NodeQuickAction,
+  nodeRegistry,
+  runAsSingleSceneHistoryStep,
+  type SlabNode,
+  useLiveNodeOverrides,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useShallow } from 'zustand/react/shallow'
+import {
+  createFreshPlacementSubtree,
+  duplicatesAsFreshSubtree,
+} from '../../lib/fresh-planar-placement'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+import { useMovingNode } from '../../store/use-interaction-scope'
+import { NodeActionMenu } from '../editor/node-action-menu'
+import { IconRefGlyph } from '../ui/icon-ref'
+
+function SideAddGlyph({ direction }: { direction: 'left' | 'right' }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-3.5 w-3.5"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.7"
+      viewBox="0 0 24 24"
+    >
+      <rect x="8" y="7" width="9" height="10" rx="1.75" />
+      <path d="M12.5 7v10" />
+      {direction === 'left' ? (
+        <>
+          <path d="M6.5 12H2.75" />
+          <path d="m5.5 9.75-2.75 2.25 2.75 2.25" />
+        </>
+      ) : (
+        <>
+          <path d="M17.5 12h3.75" />
+          <path d="m18.5 9.75 2.75 2.25-2.75 2.25" />
+        </>
+      )}
+    </svg>
+  )
+}
+
+// Builtin string tokens map to the generic glyphs above; kind-owned marks
+// arrive as IconRef objects and render through the shared IconRefGlyph.
+// Mirrors the 3D floating-action-menu (2D ↔ 3D parity).
+function QuickActionIcon({ action }: { action: NodeQuickAction }) {
+  const icon = action.icon
+  if (!icon) return null
+  if (typeof icon === 'object') return <IconRefGlyph icon={icon} size={14} />
+  switch (icon) {
+    case 'add-left':
+      return <SideAddGlyph direction="left" />
+    case 'add-right':
+      return <SideAddGlyph direction="right" />
+    default:
+      return null
+  }
+}
+
+function collectQuickActionNodes(
+  nodes: Record<AnyNodeId, AnyNode>,
+  selectedId: string | null,
+): Record<AnyNodeId, AnyNode> | null {
+  if (!selectedId) return null
+  const selected = nodes[selectedId as AnyNodeId]
+  if (!selected || !nodeRegistry.get(selected.type)?.quickActions) return null
+
+  const collected: Record<AnyNodeId, AnyNode> = { [selected.id as AnyNodeId]: selected }
+  const add = (id: string | null | undefined) => {
+    if (!id) return
+    const node = nodes[id as AnyNodeId]
+    if (node) collected[node.id as AnyNodeId] = node
+  }
+  const addChildren = (node: AnyNode | undefined) => {
+    for (const childId of (node as { children?: readonly string[] } | undefined)?.children ?? []) {
+      add(childId)
+    }
+  }
+
+  add(selected.parentId ?? null)
+  addChildren(selected)
+  const parent = selected.parentId ? nodes[selected.parentId as AnyNodeId] : undefined
+  addChildren(parent)
+
+  return collected
+}
+
+/**
+ * Floating Move / Duplicate / Delete buttons that appear above the
+ * selected registered kind in the floor plan view.
+ *
+ * Lives outside the floorplan-panel.tsx monolith. Reads selection from
+ * `useViewer`, finds the rendered `[data-node-id]` <g> inside the floor
+ * plan scene, polls its bounding rect via rAF while open, and portals
+ * an HTML overlay positioned at the top of the bounding box.
+ *
+ * Buttons:
+ *  - Move: sets `movingNode` in useEditor. Enabled when the kind has
+ *    `capabilities.movable`, `def.floorplanMoveTarget`, OR
+ *    `def.affordanceTools.move` (slab / ceiling). The
+ *    `<FloorplanRegistryMoveOverlay>` / dispatcher picks the right path.
+ *    Walls are excluded — their move is reached via the side-arrow
+ *    handles emitted from `def.floorplan`, not via a menu button.
+ *  - Add hole (slab + ceiling only): inserts a small default-square
+ *    hole at the polygon centroid via `updateNode`. Mirrors the legacy
+ *    `handleAddHole` in `floating-action-menu.tsx`.
+ *  - Duplicate: deep-clones the node, marks it new, sets it as the
+ *    movingNode (placement cursor) — same UX pattern as 3D duplicate.
+ *  - Delete: calls `deleteNode(id)`. Cascade is handled by the registry's
+ *    `relations.cascadeDelete` if declared on the def.
+ *
+ * Hidden while in a move state (so we don't show buttons over a ghost).
+ */
+export function FloorplanRegistryActionMenu() {
+  // Sole selection only — a multi-selection gets the group menu
+  // (`FloorplanGroupActionMenu`), whose actions target the whole selection.
+  const selectedId = useViewer((s) =>
+    s.selection.selectedIds.length === 1 ? s.selection.selectedIds[0] : undefined,
+  ) as AnyNodeId | undefined
+  const movingNode = useMovingNode()
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setMovingNodeOrigin = useEditor((s) => s.setMovingNodeOrigin)
+  // Gate on floorplan hover so this 2D menu never coexists with the 3D
+  // FloatingActionMenu in split view — that menu hides while the floorplan
+  // is hovered, so this one must only show then. Mirrors the legacy
+  // FloorplanActionMenuLayer guard. Without it a registry kind (e.g. a
+  // duct) shows two Duplicate buttons whenever the pointer is outside the
+  // 2D panel.
+  const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
+
+  // Only show for registered kinds (skip legacy kinds — they have their
+  // own FloorplanActionMenuLayer entries).
+  const selectedKind = useScene((s) => (selectedId ? (s.nodes[selectedId]?.type ?? null) : null))
+  const def = selectedKind ? nodeRegistry.get(selectedKind) : null
+  const isRegistryKind = !!def
+  const isVisible =
+    isRegistryKind && def?.presentation?.actionMenu !== false && !movingNode && isFloorplanHovered
+  const isWall = selectedKind === 'wall'
+  const quickActionNodes = useScene(
+    useShallow((s) => collectQuickActionNodes(s.nodes, selectedId ?? null)),
+  )
+
+  useEffect(() => {
+    if (!(isVisible && selectedId)) {
+      setPosition(null)
+      return
+    }
+    let raf = 0
+    const tick = () => {
+      raf = requestAnimationFrame(tick)
+      const sceneEl = document.querySelector('[data-floorplan-scene]') as SVGGElement | null
+      const svgEl = sceneEl?.ownerSVGElement ?? null
+      const ctm = sceneEl?.getScreenCTM() ?? null
+      if (!(sceneEl && svgEl && ctm)) {
+        setPosition(null)
+        return
+      }
+
+      // Walls: anchor at the wall midpoint in screen space so the menu
+      // sits over the centre of the wall (not the top of its screen-axis
+      // bounding box). Menu itself stays horizontal. Read live overrides
+      // too so the anchor tracks the wall during side-arrow / endpoint
+      // drags. For curved walls `getWallMidpointHandlePoint` returns the
+      // apex point on the arc at t=0.5, matching what the renderer draws.
+      if (isWall) {
+        const sceneNode = useScene.getState().nodes[selectedId] as WallNode | undefined
+        if (!sceneNode) {
+          setPosition(null)
+          return
+        }
+        const overrides = useLiveNodeOverrides.getState().get(selectedId) as
+          | Partial<WallNode>
+          | undefined
+        const wall = (overrides ? { ...sceneNode, ...overrides } : sceneNode) as WallNode
+        const planMid = getWallMidpointHandlePoint(wall)
+        const midPt = svgEl.createSVGPoint()
+        midPt.x = planMid.x
+        midPt.y = planMid.y
+        const midScreen = midPt.matrixTransform(ctm)
+        setPosition({ left: midScreen.x, top: midScreen.y })
+        return
+      }
+
+      const el = sceneEl.querySelector(`[data-node-id="${selectedId}"]`) as SVGGElement | null
+      if (el) {
+        const rect = el.getBoundingClientRect()
+        setPosition({ left: rect.left + rect.width / 2, top: rect.top })
+      } else {
+        setPosition(null)
+      }
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [isVisible, selectedId, isWall])
+
+  if (!(isVisible && selectedId && position && def)) return null
+
+  const node = useScene.getState().nodes[selectedId]
+  if (!node) return null
+
+  const quickActions =
+    quickActionNodes && nodeRegistry.get(node.type)?.quickActions
+      ? (nodeRegistry.get(node.type)?.quickActions?.({
+          node: node as never,
+          nodes: quickActionNodes,
+        }) ?? [])
+      : []
+
+  // Move button is enabled when any of:
+  //   - `capabilities.movable` (generic translate-on-XZ — shelf / spawn / fence)
+  //   - `def.floorplanMoveTarget` (anchor-aware 2D — door / window / item)
+  //   - `def.affordanceTools.move` (kind-owned 3D mover — slab / ceiling / wall)
+  // From the menu's perspective all three are "this kind can move from
+  // the floor plan." The `MoveTool` dispatcher resolves the right path —
+  // walls land on their bespoke `MoveWallTool` (perpendicular slide
+  // with linked-wall cascade) via `affordanceTools.move`.
+  const canMove =
+    !!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move
+  const canDuplicate = def.capabilities.duplicable !== false
+  const canDelete = def.capabilities.deletable !== false
+  const canAddHole = node.type === 'slab' || node.type === 'ceiling'
+
+  const handleMove = () => {
+    sfxEmitter.emit('sfx:item-pick')
+    setMovingNode(node as never)
+    // 2D-owned move: `FloorplanRegistryMoveOverlay` runs the whole gesture.
+    // Mark the origin (after `setMovingNode`, which resets it to null) so
+    // `ToolManager` keeps the 3D affordance mover from also adopting the node
+    // and reverting it on unmount. Mirrors the orange move-dot path.
+    setMovingNodeOrigin('2d')
+    // Match the legacy 3D `floating-action-menu`: clear selection so
+    // selection-gated affordances unmount during the drag. Specifically
+    // the slab / ceiling boundary editor (`ToolManager` shows it when
+    // `selectedSlabId !== undefined`) would otherwise stay visible
+    // and render its vertex / edge handles on top of the moving mesh
+    // in split-view 3D. The move overlay reads `movingNode`, not the
+    // selection, so clearing it doesn't disturb the move itself; the
+    // commit path re-selects the node when it ends.
+    useViewer.getState().setSelection({ selectedIds: [] })
+  }
+
+  const handleAddHole = () => {
+    if (!canAddHole) return
+    const surfaceNode = node as SlabNode | CeilingNode
+    const polygon = surfaceNode.polygon
+    if (!polygon || polygon.length < 3) return
+
+    let cx = 0
+    let cz = 0
+    for (const [x, z] of polygon) {
+      cx += x
+      cz += z
+    }
+    cx /= polygon.length
+    cz /= polygon.length
+
+    const holeSize = 0.5
+    const newHole: Array<[number, number]> = [
+      [cx - holeSize, cz - holeSize],
+      [cx + holeSize, cz - holeSize],
+      [cx + holeSize, cz + holeSize],
+      [cx - holeSize, cz + holeSize],
+    ]
+    const currentHoles = surfaceNode.holes ?? []
+    const currentMetadata = currentHoles.map(
+      (_, index) => surfaceNode.holeMetadata?.[index] ?? { source: 'manual' as const },
+    )
+    sfxEmitter.emit('sfx:structure-build')
+    useScene.getState().updateNode(
+      selectedId as AnyNodeId,
+      {
+        holes: [...currentHoles, newHole],
+        holeMetadata: [...currentMetadata, { source: 'manual' as const }],
+      } as Partial<AnyNode>,
+    )
+  }
+
+  const handleDuplicate = () => {
+    if (!node.parentId) return
+    sfxEmitter.emit('sfx:item-pick')
+    useScene.temporal.getState().pause()
+    if (duplicatesAsFreshSubtree(node as AnyNode)) {
+      const draftId = createFreshPlacementSubtree(node.id as AnyNodeId)
+      const draft = draftId ? useScene.getState().nodes[draftId] : null
+      if (draft) {
+        setMovingNode(draft as never)
+        setMovingNodeOrigin('2d')
+        useScene.temporal.getState().resume()
+        return
+      }
+      useScene.temporal.getState().resume()
+      return
+    }
+    const cloned = structuredClone(node) as AnyNode & { id?: AnyNodeId }
+    delete (cloned as { id?: AnyNodeId }).id
+    const prevMeta =
+      cloned.metadata && typeof cloned.metadata === 'object' && !Array.isArray(cloned.metadata)
+        ? (cloned.metadata as Record<string, unknown>)
+        : {}
+    // Mark fresh + hand to the placement cursor so the copy follows the
+    // pointer and only lands on the next click — same gesture for every
+    // kind. Polyline runs (duct / pipe / lineset) ride the same path:
+    // `FloorplanRegistryMoveOverlay` translates their whole `path`, so they
+    // no longer need the old "offset + drop already-placed" special case.
+    cloned.metadata = { ...prevMeta, isNew: true }
+    const parsed = def.schema.parse(cloned) as AnyNode
+    useScene.getState().createNode(parsed, node.parentId as AnyNodeId)
+    setMovingNode(parsed as never)
+    useScene.temporal.getState().resume()
+  }
+
+  const handleDelete = () => {
+    sfxEmitter.emit('sfx:item-delete')
+    useScene.getState().deleteNode(selectedId)
+    useViewer.getState().setSelection({ selectedIds: [] })
+  }
+
+  const handleQuickAction = (action: NodeQuickAction) => {
+    if (action.disabled) return
+    const run = () => action.run({ node, sceneApi: createSceneApi(useScene) })
+    const result = action.history === 'single' ? runAsSingleSceneHistoryStep(useScene, run) : run()
+    if (result?.selectedIds) useViewer.getState().setSelection({ selectedIds: result.selectedIds })
+    if (result?.selectedIds) {
+      const selectedDifferentNode = result.selectedIds.some((id) => id !== node.id)
+      sfxEmitter.emit(selectedDifferentNode ? 'sfx:item-place' : 'sfx:item-pick')
+    }
+  }
+
+  return createPortal(
+    <div
+      className="pointer-events-none fixed z-30 flex w-max flex-col items-center"
+      style={{
+        left: position.left,
+        top: position.top,
+        transform: 'translate(-50%, calc(-100% - 32px))',
+      }}
+    >
+      <NodeActionMenu
+        onAddHole={canAddHole ? handleAddHole : undefined}
+        onDelete={canDelete ? handleDelete : undefined}
+        onDuplicate={canDuplicate ? handleDuplicate : undefined}
+        onMove={canMove ? handleMove : undefined}
+        onPointerDown={(event) => event.stopPropagation()}
+        onPointerUp={(event) => event.stopPropagation()}
+      />
+      {quickActions.length > 0 ? (
+        <div
+          className="pointer-events-auto mt-1 inline-flex w-max items-center justify-center gap-0.5 rounded-lg border border-border/50 bg-background/90 px-1.5 py-1 shadow-md backdrop-blur-md"
+          onPointerDown={(event) => event.stopPropagation()}
+          onPointerUp={(event) => event.stopPropagation()}
+        >
+          {quickActions.map((action) => (
+            <button
+              aria-label={action.title ?? action.label}
+              className="tooltip-trigger flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+              disabled={action.disabled}
+              key={action.id}
+              onClick={() => handleQuickAction(action)}
+              title={action.title ?? action.label}
+              type="button"
+            >
+              <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-current">
+                <QuickActionIcon action={action} />
+              </span>
+              <span className="whitespace-nowrap leading-none">{action.label}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>,
+    document.body,
+  )
+}