@pascal-app/editor 0.9.1 → 1.0.0-beta.1

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-registered-tool-layer.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { createSceneApi, nodeRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { type ComponentType, lazy, Suspense, useCallback, useMemo } from 'react'
+import {
+  type FloorplanToolContext,
+  getFloorplanNodeExtension,
+} from '../../lib/floorplan/floorplan-extension'
+import {
+  type FloorplanMode,
+  isFloorplanToolAvailableInMode,
+} from '../../lib/floorplan/floorplan-mode'
+import useEditor from '../../store/use-editor'
+import useFloorplanMode from '../../store/use-floorplan-mode'
+
+const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType<FloorplanToolContext>>()
+
+function registeredFloorplanTool(
+  tool: string | null,
+  mode: FloorplanMode,
+): ComponentType<FloorplanToolContext> | null {
+  if (!tool) return null
+  const extension = getFloorplanNodeExtension(nodeRegistry.get(tool))
+  if (!isFloorplanToolAvailableInMode(extension?.availableModes, mode)) return null
+  const loader = extension?.tool
+  if (!loader) return null
+  const cached = lazyToolCache.get(loader)
+  if (cached) return cached
+  const component = lazy(loader)
+  lazyToolCache.set(loader, component)
+  return component
+}
+
+export function FloorplanRegisteredToolLayer() {
+  const mode = useEditor((state) => state.mode)
+  const tool = useEditor((state) => state.tool)
+  const floorplanMode = useFloorplanMode((state) => state.mode)
+  const gridSnapStep = useEditor((state) => state.gridSnapStep)
+  const toolDefaults = useEditor((state) =>
+    state.tool ? (state.toolDefaults[state.tool] ?? null) : null,
+  )
+  const activeLevelId = useViewer((state) => state.selection.levelId)
+  const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
+  const sceneApi = useMemo(() => createSceneApi(useScene), [])
+  const selectNode = useCallback(
+    (id: Parameters<FloorplanToolContext['selectNode']>[0]) =>
+      useViewer.getState().setSelection({ selectedIds: [id] }),
+    [],
+  )
+  const finishTool = useCallback(() => {
+    useEditor.getState().setTool(null)
+    useEditor.getState().setMode('select')
+  }, [])
+  if (mode !== 'build') return null
+  const Tool = registeredFloorplanTool(tool, floorplanMode)
+  return Tool ? (
+    <Suspense fallback={null}>
+      <Tool
+        activeLevelId={activeLevelId}
+        finishTool={finishTool}
+        gridSnapStep={gridSnapStep}
+        metricNotation={metricNotation}
+        sceneApi={sceneApi}
+        selectNode={selectNode}
+        toolDefaults={toolDefaults}
+        unit={unit}
+      />
+    </Suspense>
+  ) : null
+}

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

@@ -4,19 +4,97 @@ 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 { type MouseEvent, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { useShallow } from 'zustand/react/shallow'
+import { useReducedMotion } from '../../hooks/use-reduced-motion'
+import { resolveMoveActionNode } from '../../lib/direct-manipulation'
+import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
+import {
+  createFreshPlacementSubtree,
+  duplicatesAsFreshSubtree,
+  prepareFreshPlacementRootDuplicate,
+} from '../../lib/fresh-planar-placement'
+import { curveReshapeScope } from '../../lib/interaction/scope'
+import { playBlockedQuickActionFeedback } from '../../lib/quick-action-feedback'
+import { collectQuickActionNodeScope } from '../../lib/quick-action-nodes'
 import { sfxEmitter } from '../../lib/sfx-bus'
+import { cn } from '../../lib/utils'
 import useEditor from '../../store/use-editor'
+import useInteractionScope, {
+  useIsCurveReshape,
+  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]
+  const def = selected ? nodeRegistry.get(selected.type) : undefined
+  if (!def?.quickActions) return null
+  return collectQuickActionNodeScope(nodes, selectedId, def.quickActionNodeScope)
+}
 
 /**
  * Floating Move / Duplicate / Delete buttons that appear above the
@@ -34,30 +112,68 @@ import { NodeActionMenu } from '../editor/node-action-menu'
  *    `<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.
+ *  - Curve (wall only): enters curve reshape mode. The selected wall's
+ *    midpoint curve handle remains visible so it can be dragged in plan.
  *  - 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.
+ *  - Duplicate: creates a fresh subtree when the kind opts in, otherwise a
+ *    root-only copy, then hands that real draft to the placement cursor.
  *  - 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).
+ * Hidden while moving or curving so the menu does not compete with the active affordance.
  */
 export function FloorplanRegistryActionMenu() {
-  const selectedId = useViewer((s) => s.selection.selectedIds[0]) as AnyNodeId | undefined
-  const movingNode = useEditor((s) => s.movingNode)
+  const reducedMotion = useReducedMotion()
+  // 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 isCurveReshape = useIsCurveReshape()
   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 canCurve = useScene((s) => {
+    if (!selectedId) return false
+    const selectedNode = s.nodes[selectedId]
+    if (!selectedNode) return false
+    const definition = nodeRegistry.get(selectedNode.type)
+    const canCurveNode = getFloorplanNodeExtension(definition)?.actionMenu?.canCurve
+    return (
+      !!definition?.floorplanAffordances?.curve &&
+      !!canCurveNode?.({
+        node: selectedNode as never,
+        nodes: s.nodes,
+      })
+    )
+  })
   const def = selectedKind ? nodeRegistry.get(selectedKind) : null
   const isRegistryKind = !!def
-  const isVisible = isRegistryKind && !movingNode
+  const isVisible =
+    isRegistryKind &&
+    def?.presentation?.actionMenu !== false &&
+    !movingNode &&
+    !isCurveReshape &&
+    isFloorplanHovered
   const isWall = selectedKind === 'wall'
+  const quickActionNodes = useScene(
+    useShallow((s) => collectQuickActionNodes(s.nodes, selectedId ?? null)),
+  )
 
   useEffect(() => {
     if (!(isVisible && selectedId)) {
@@ -117,6 +233,14 @@ export function FloorplanRegistryActionMenu() {
   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)
@@ -133,7 +257,13 @@ export function FloorplanRegistryActionMenu() {
 
   const handleMove = () => {
     sfxEmitter.emit('sfx:item-pick')
-    setMovingNode(node as never)
+    const sceneNodes = useScene.getState().nodes
+    setMovingNode(resolveMoveActionNode(node, sceneNodes) 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
@@ -181,21 +311,40 @@ export function FloorplanRegistryActionMenu() {
     )
   }
 
+  const handleCurve = () => {
+    if (!canCurve) return
+    sfxEmitter.emit('sfx:item-pick')
+    useInteractionScope.getState().begin(curveReshapeScope(node.id))
+  }
+
   const handleDuplicate = () => {
     if (!node.parentId) return
     sfxEmitter.emit('sfx:item-pick')
     useScene.temporal.getState().pause()
-    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>)
-        : {}
-    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()
+    let draftId: AnyNodeId | null = null
+    try {
+      if (duplicatesAsFreshSubtree(node as AnyNode)) {
+        draftId = createFreshPlacementSubtree(node.id as AnyNodeId)
+        const draft = draftId ? useScene.getState().nodes[draftId] : null
+        if (!draft) return
+        setMovingNode(draft as never)
+      } else {
+        const cloned = prepareFreshPlacementRootDuplicate(node as AnyNode)
+        const parsed = def.schema.parse(cloned) as AnyNode
+        draftId = parsed.id as AnyNodeId
+        useScene.getState().createNode(parsed, node.parentId as AnyNodeId)
+        setMovingNode(parsed as never)
+      }
+      setMovingNodeOrigin('2d')
+      useViewer.getState().setSelection({ selectedIds: [] })
+    } catch (error) {
+      if (draftId && useScene.getState().nodes[draftId]) {
+        useScene.getState().deleteNode(draftId)
+      }
+      console.error('Failed to duplicate node', error)
+    } finally {
+      useScene.temporal.getState().resume()
+    }
   }
 
   const handleDelete = () => {
@@ -204,9 +353,25 @@ export function FloorplanRegistryActionMenu() {
     useViewer.getState().setSelection({ selectedIds: [] })
   }
 
+  const handleQuickAction = (action: NodeQuickAction, event: MouseEvent<HTMLButtonElement>) => {
+    if (action.disabled) {
+      if (action.blockedFeedback) {
+        playBlockedQuickActionFeedback(event.currentTarget, reducedMotion)
+      }
+      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"
+      className="pointer-events-none fixed z-30 flex w-max flex-col items-center"
       style={{
         left: position.left,
         top: position.top,
@@ -215,12 +380,46 @@ export function FloorplanRegistryActionMenu() {
     >
       <NodeActionMenu
         onAddHole={canAddHole ? handleAddHole : undefined}
+        onCurve={canCurve ? handleCurve : 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-disabled={action.disabled || undefined}
+              aria-label={action.title ?? action.label}
+              className={cn(
+                'tooltip-trigger flex items-center rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground',
+                action.disabled &&
+                  'cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground',
+              )}
+              disabled={action.disabled && !action.blockedFeedback}
+              key={action.id}
+              onClick={(event) => handleQuickAction(action, event)}
+              title={action.title ?? action.label}
+              type="button"
+            >
+              <span className="flex items-center gap-1.5" data-quick-action-feedback>
+                <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" data-quick-action-label>
+                  {action.label}
+                </span>
+              </span>
+            </button>
+          ))}
+        </div>
+      ) : null}
     </div>,
     document.body,
   )