@adatechnology/conversations-ui 0.1.0-rc.41 → 0.1.0-rc.42

package/dist/flows/index.js

@@ -858,8 +858,42 @@ function FlowPortalNode({ data }) {
 var flowPortalNodeTypes = { flowPortal: FlowPortalNode };
 
 // src/flows/FlowPalette.tsx
-import { useEffect, useRef, useState as useState2 } from "react";
+import { useEffect, useLayoutEffect, useRef, useState as useState2 } from "react";
 import { Plus as Plus2, MessageCircleQuestion as MessageCircleQuestion2, GitBranch as GitBranch3, Zap as Zap2, Diamond as Diamond2, ChevronRight } from "lucide-react";
+
+// src/flows/flowMenuPlacement.ts
+var DEFAULT_GAP = 4;
+var DEFAULT_MARGIN = 8;
+function clamp(value, minimum, maximum) {
+  return Math.max(minimum, Math.min(value, Math.max(minimum, maximum)));
+}
+function placeFloatingPanel({
+  anchor,
+  panel,
+  viewport,
+  prefer,
+  gap = DEFAULT_GAP,
+  margin = DEFAULT_MARGIN
+}) {
+  const maxHeight = Math.min(panel.height, viewport.height - margin * 2);
+  let left;
+  if (prefer === "side") {
+    const toTheRight = anchor.right + gap;
+    const toTheLeft = anchor.left - gap - panel.width;
+    left = toTheRight + panel.width <= viewport.width - margin ? toTheRight : toTheLeft;
+  } else {
+    left = anchor.left + gap;
+  }
+  left = clamp(left, margin, viewport.width - margin - panel.width);
+  const top = prefer === "side" ? anchor.top : anchor.bottom;
+  return {
+    left,
+    top: clamp(top, margin, viewport.height - margin - maxHeight),
+    maxHeight
+  };
+}
+
+// src/flows/FlowPalette.tsx
 import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var QUESTION_TYPES = ["text", "money", "date", "int", "cpf"];
 function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
@@ -867,6 +901,38 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
     { actionKind: "handoff", label: labels.actionKindLabels.handoff ?? "Encaminhar para atendimento" }
   ];
   const [submenu, setSubmenu] = useState2(null);
+  const questionTriggerRef = useRef(null);
+  const actionTriggerRef = useRef(null);
+  const submenuRef = useRef(null);
+  const [placement, setPlacement] = useState2(null);
+  useLayoutEffect(() => {
+    if (!submenu) {
+      setPlacement(null);
+      return;
+    }
+    const trigger = submenu === "question" ? questionTriggerRef.current : actionTriggerRef.current;
+    const panel = submenuRef.current;
+    if (!trigger || !panel) return;
+    const anchor = trigger.getBoundingClientRect();
+    setPlacement(
+      placeFloatingPanel({
+        anchor: { left: anchor.left, top: anchor.top, right: anchor.right, bottom: anchor.bottom },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: "side"
+      })
+    );
+  }, [submenu]);
+  const submenuStyle = {
+    position: "fixed",
+    left: placement?.left ?? 0,
+    top: placement?.top ?? 0,
+    maxHeight: placement?.maxHeight,
+    overflowY: "auto",
+    // Até a medição terminar o painel existe mas não aparece — senão ele pisca um quadro na
+    // posição errada, que é justamente o salto que esta correção remove.
+    visibility: placement ? "visible" : "hidden"
+  };
   function select(spec) {
     onSelect(spec);
     setSubmenu(null);
@@ -876,6 +942,7 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
       /* @__PURE__ */ jsxs6(
         "button",
         {
+          ref: questionTriggerRef,
           "data-cv-tooltip": labels.palette.question,
           "aria-label": labels.palette.question,
           onMouseEnter: () => setSubmenu("question"),
@@ -891,17 +958,25 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
           ]
         }
       ),
-      submenu === "question" && /* @__PURE__ */ jsx7("div", { className: "absolute left-full top-0 ml-1 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1", children: QUESTION_TYPES.map((qt) => /* @__PURE__ */ jsx7(
-        "button",
+      submenu === "question" && /* @__PURE__ */ jsx7(
+        "div",
         {
-          "data-cv-tooltip": labels.questionTypeLabels[qt],
-          "aria-label": labels.questionTypeLabels[qt],
-          onClick: () => select({ kind: "question", questionType: qt }),
-          className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
-          children: labels.questionTypeLabels[qt]
-        },
-        qt
-      )) })
+          ref: submenuRef,
+          style: submenuStyle,
+          className: "z-50 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
+          children: QUESTION_TYPES.map((qt) => /* @__PURE__ */ jsx7(
+            "button",
+            {
+              "data-cv-tooltip": labels.questionTypeLabels[qt],
+              "aria-label": labels.questionTypeLabels[qt],
+              onClick: () => select({ kind: "question", questionType: qt }),
+              className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+              children: labels.questionTypeLabels[qt]
+            },
+            qt
+          ))
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs6(
       "button",
@@ -937,6 +1012,7 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
       /* @__PURE__ */ jsxs6(
         "button",
         {
+          ref: actionTriggerRef,
           "data-cv-tooltip": labels.palette.action,
           "aria-label": labels.palette.action,
           onMouseEnter: () => setSubmenu("action"),
@@ -952,17 +1028,25 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
           ]
         }
       ),
-      submenu === "action" && /* @__PURE__ */ jsx7("div", { className: "absolute left-full top-0 ml-1 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1", children: resolvedActionOptions.map((option) => /* @__PURE__ */ jsx7(
-        "button",
+      submenu === "action" && /* @__PURE__ */ jsx7(
+        "div",
         {
-          "data-cv-tooltip": option.label,
-          "aria-label": option.label,
-          onClick: () => select({ kind: "action", actionKind: option.actionKind }),
-          className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
-          children: option.label
-        },
-        option.actionKind
-      )) })
+          ref: submenuRef,
+          style: submenuStyle,
+          className: "z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
+          children: resolvedActionOptions.map((option) => /* @__PURE__ */ jsx7(
+            "button",
+            {
+              "data-cv-tooltip": option.label,
+              "aria-label": option.label,
+              onClick: () => select({ kind: "action", actionKind: option.actionKind }),
+              className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+              children: option.label
+            },
+            option.actionKind
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -1541,7 +1625,7 @@ function FlowNodePanel({
 }
 
 // src/flows/FlowsWorkspace.tsx
-import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
 import {
   ReactFlow as ReactFlow2,
   Background as Background2,
@@ -1872,6 +1956,7 @@ var EDGE_COLOR_LINEAR = "#94a3b8";
 var FOCUS_MAX_ZOOM = 1;
 var FOCUS_PADDING = 0.2;
 var FOCUS_DURATION_MS = 400;
+var QUICK_ADD_MENU_GAP = 12;
 var EDGE_COLOR_BRANCH = "#8b5cf6";
 var EDGE_COLOR_FALLBACK = "#cbd5e1";
 var EDGE_COLOR_LIVE = "#3b82f6";
@@ -1941,6 +2026,8 @@ function FlowsWorkspace({
   const [flowInstance, setFlowInstance] = useState6(null);
   const [pendingFocusNodeId, setPendingFocusNodeId] = useState6(null);
   const [pendingFocusFlowKey, setPendingFocusFlowKey] = useState6(null);
+  const quickAddMenuRef = useRef3(null);
+  const [quickAddPlacement, setQuickAddPlacement] = useState6(null);
   const reloadGraphs = useCallback(async () => {
     try {
       const loaded = await api.getGraphs();
@@ -2239,6 +2326,31 @@ function FlowsWorkspace({
     });
     setPendingFocusFlowKey(null);
   }, [pendingFocusFlowKey, flowInstance, rfNodes]);
+  useLayoutEffect2(() => {
+    if (!quickAddFrom) {
+      setQuickAddPlacement(null);
+      return;
+    }
+    const panel = quickAddMenuRef.current;
+    if (!panel) return;
+    const { x, y } = quickAddFrom.anchor;
+    setQuickAddPlacement(
+      placeFloatingPanel({
+        anchor: { left: x, top: y, right: x, bottom: y },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: "below",
+        gap: QUICK_ADD_MENU_GAP
+      })
+    );
+  }, [quickAddFrom]);
+  const quickAddMenuStyle = {
+    left: quickAddPlacement?.left ?? 0,
+    top: quickAddPlacement?.top ?? 0,
+    maxHeight: quickAddPlacement?.maxHeight,
+    overflowY: "auto",
+    visibility: quickAddPlacement ? "visible" : "hidden"
+  };
   const onNodesChange = useCallback((changes) => {
     setRfNodes((current) => applyNodeChanges(changes, current));
   }, []);
@@ -2620,8 +2732,9 @@ function FlowsWorkspace({
       /* @__PURE__ */ jsxs11(
         "div",
         {
+          ref: quickAddMenuRef,
           className: "fixed z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
-          style: { left: quickAddFrom.anchor.x + 12, top: quickAddFrom.anchor.y },
+          style: quickAddMenuStyle,
           children: [
             /* @__PURE__ */ jsx12("p", { className: "px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500", children: labels.quickAdd.title }),
             /* @__PURE__ */ jsx12(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.41",
+  "version": "0.1.0-rc.42",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/flows/FlowPalette.tsx

@@ -1,5 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Plus, MessageCircleQuestion, GitBranch, Zap, Diamond, ChevronRight } from 'lucide-react'
+
+import { placeFloatingPanel, type FloatingPlacement } from './flowMenuPlacement'
 import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
 import type { FlowActionKind, FlowQuestionType } from './flowGraph'
 
@@ -45,6 +47,43 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
     { actionKind: 'handoff', label: labels.actionKindLabels.handoff ?? 'Encaminhar para atendimento' },
   ]
   const [submenu, setSubmenu] = useState<'question' | 'action' | null>(null)
+  const questionTriggerRef = useRef<HTMLButtonElement>(null)
+  const actionTriggerRef = useRef<HTMLButtonElement>(null)
+  const submenuRef = useRef<HTMLDivElement>(null)
+  const [placement, setPlacement] = useState<FloatingPlacement | null>(null)
+
+  // `fixed` posicionado por medição, e não preso ao item por CSS: alinhado sempre à direita e ao
+  // topo do item, o submenu era cortado pela borda da tela — e sem rolagem os últimos itens ficavam
+  // inalcançáveis. Roda antes da pintura, então não pisca.
+  useLayoutEffect(() => {
+    if (!submenu) {
+      setPlacement(null)
+      return
+    }
+    const trigger = submenu === 'question' ? questionTriggerRef.current : actionTriggerRef.current
+    const panel = submenuRef.current
+    if (!trigger || !panel) return
+    const anchor = trigger.getBoundingClientRect()
+    setPlacement(
+      placeFloatingPanel({
+        anchor: { left: anchor.left, top: anchor.top, right: anchor.right, bottom: anchor.bottom },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: 'side',
+      }),
+    )
+  }, [submenu])
+
+  const submenuStyle = {
+    position: 'fixed' as const,
+    left: placement?.left ?? 0,
+    top: placement?.top ?? 0,
+    maxHeight: placement?.maxHeight,
+    overflowY: 'auto' as const,
+    // Até a medição terminar o painel existe mas não aparece — senão ele pisca um quadro na
+    // posição errada, que é justamente o salto que esta correção remove.
+    visibility: placement ? ('visible' as const) : ('hidden' as const),
+  }
 
   function select(spec: NewNodeSpec) {
     onSelect(spec)
@@ -55,6 +94,7 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
     <>
       <div className="relative">
         <button
+          ref={questionTriggerRef}
           data-cv-tooltip={labels.palette.question} aria-label={labels.palette.question}
           onMouseEnter={() => setSubmenu('question')}
           onClick={() => setSubmenu(submenu === 'question' ? null : 'question')}
@@ -66,7 +106,11 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
           <ChevronRight size={13} className="text-gray-400" />
         </button>
         {submenu === 'question' && (
-          <div className="absolute left-full top-0 ml-1 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1">
+          <div
+            ref={submenuRef}
+            style={submenuStyle}
+            className="z-50 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1"
+          >
             {QUESTION_TYPES.map((qt) => (
               <button
                 data-cv-tooltip={labels.questionTypeLabels[qt]} aria-label={labels.questionTypeLabels[qt]}
@@ -101,6 +145,7 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
 
       <div className="relative">
         <button
+          ref={actionTriggerRef}
           data-cv-tooltip={labels.palette.action} aria-label={labels.palette.action}
           onMouseEnter={() => setSubmenu('action')}
           onClick={() => setSubmenu(submenu === 'action' ? null : 'action')}
@@ -112,7 +157,11 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
           <ChevronRight size={13} className="text-gray-400" />
         </button>
         {submenu === 'action' && (
-          <div className="absolute left-full top-0 ml-1 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1">
+          <div
+            ref={submenuRef}
+            style={submenuStyle}
+            className="z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1"
+          >
             {resolvedActionOptions.map((option) => (
               <button
                 data-cv-tooltip={option.label} aria-label={option.label}

package/src/flows/FlowsWorkspace.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import {
   ReactFlow,
   Background,
@@ -51,6 +51,7 @@ import {
   removeNodeAndCleanRefs,
   resolveConnection,
 } from './flowEditorOps'
+import { placeFloatingPanel, type FloatingPlacement } from './flowMenuPlacement'
 import {
   computeAutoLayout,
   targetsOf,
@@ -103,6 +104,9 @@ const EDGE_COLOR_LINEAR = '#94a3b8'
 const FOCUS_MAX_ZOOM = 1
 const FOCUS_PADDING = 0.2
 const FOCUS_DURATION_MS = 400
+
+/** Folga entre o "+" e o menu que ele abre. */
+const QUICK_ADD_MENU_GAP = 12
 const EDGE_COLOR_BRANCH = '#8b5cf6'
 const EDGE_COLOR_FALLBACK = '#cbd5e1'
 const EDGE_COLOR_LIVE = '#3b82f6'
@@ -268,6 +272,8 @@ export function FlowsWorkspace({
   const [flowInstance, setFlowInstance] = useState<ReactFlowInstance | null>(null)
   const [pendingFocusNodeId, setPendingFocusNodeId] = useState<string | null>(null)
   const [pendingFocusFlowKey, setPendingFocusFlowKey] = useState<string | null>(null)
+  const quickAddMenuRef = useRef<HTMLDivElement>(null)
+  const [quickAddPlacement, setQuickAddPlacement] = useState<FloatingPlacement | null>(null)
 
   const reloadGraphs = useCallback(async () => {
     try {
@@ -663,6 +669,35 @@ export function FlowsWorkspace({
     setPendingFocusFlowKey(null)
   }, [pendingFocusFlowKey, flowInstance, rfNodes])
 
+  // O menu do "+" saía da tela quando o card estava perto da borda: a âncora era usada crua, sem
+  // consultar o tamanho da janela. Mede depois de montar e reposiciona antes da pintura.
+  useLayoutEffect(() => {
+    if (!quickAddFrom) {
+      setQuickAddPlacement(null)
+      return
+    }
+    const panel = quickAddMenuRef.current
+    if (!panel) return
+    const { x, y } = quickAddFrom.anchor
+    setQuickAddPlacement(
+      placeFloatingPanel({
+        anchor: { left: x, top: y, right: x, bottom: y },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: 'below',
+        gap: QUICK_ADD_MENU_GAP,
+      }),
+    )
+  }, [quickAddFrom])
+
+  const quickAddMenuStyle = {
+    left: quickAddPlacement?.left ?? 0,
+    top: quickAddPlacement?.top ?? 0,
+    maxHeight: quickAddPlacement?.maxHeight,
+    overflowY: 'auto' as const,
+    visibility: quickAddPlacement ? ('visible' as const) : ('hidden' as const),
+  }
+
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     setRfNodes((current) => applyNodeChanges(changes, current))
   }, [])
@@ -1071,8 +1106,9 @@ export function FlowsWorkspace({
         <>
           <div className="fixed inset-0 z-40" onClick={() => setQuickAddFrom(null)} />
           <div
+            ref={quickAddMenuRef}
             className="fixed z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1"
-            style={{ left: quickAddFrom.anchor.x + 12, top: quickAddFrom.anchor.y }}
+            style={quickAddMenuStyle}
           >
             <p className="px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">
               {labels.quickAdd.title}

package/src/flows/flowMenuPlacement.test.ts

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * O caso que originou isto: o submenu "Ação" aberto perto do rodapé mostrava metade da lista, com
+ * "Enviar catálogo de produtos" cortado pela borda — e sem rolagem, o item era inalcançável.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { placeFloatingPanel } from './flowMenuPlacement'
+
+const VIEWPORT = { width: 1200, height: 800 }
+const rect = (left: number, top: number, width = 0, height = 0) => ({
+  left,
+  top,
+  right: left + width,
+  bottom: top + height,
+})
+
+describe('menu abaixo do ponto clicado', () => {
+  it('fica onde foi pedido quando há espaço', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(100, 100),
+      panel: { width: 256, height: 300 },
+      viewport: VIEWPORT,
+      prefer: 'below',
+    })
+
+    expect(placement.left).toBeGreaterThanOrEqual(100)
+    expect(placement.top).toBe(100)
+    expect(placement.maxHeight).toBe(300)
+  })
+
+  it('encosta na borda direita em vez de sair dela', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(1150, 100),
+      panel: { width: 256, height: 300 },
+      viewport: VIEWPORT,
+      prefer: 'below',
+    })
+
+    expect(placement.left + 256).toBeLessThanOrEqual(VIEWPORT.width)
+  })
+
+  it('sobe quando não cabe para baixo, em vez de vazar pelo rodapé', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(100, 700),
+      panel: { width: 256, height: 300 },
+      viewport: VIEWPORT,
+      prefer: 'below',
+    })
+
+    expect(placement.top + placement.maxHeight).toBeLessThanOrEqual(VIEWPORT.height)
+    expect(placement.top).toBeLessThan(700)
+  })
+})
+
+describe('submenu ao lado do item', () => {
+  it('abre à direita quando cabe', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(300, 200, 256, 36),
+      panel: { width: 256, height: 240 },
+      viewport: VIEWPORT,
+      prefer: 'side',
+    })
+
+    expect(placement.left).toBeGreaterThanOrEqual(300 + 256)
+  })
+
+  it('vira para a esquerda quando não cabe à direita', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(900, 200, 256, 36),
+      panel: { width: 256, height: 240 },
+      viewport: VIEWPORT,
+      prefer: 'side',
+    })
+
+    expect(placement.left).toBeLessThan(900)
+    expect(placement.left).toBeGreaterThanOrEqual(0)
+  })
+
+  it('lista longa perto do rodapé ganha rolagem em vez de ser cortada', () => {
+    // O caso da captura: submenu de ações mais alto que o espaço abaixo do item.
+    const placement = placeFloatingPanel({
+      anchor: rect(300, 620, 256, 36),
+      panel: { width: 256, height: 520 },
+      viewport: VIEWPORT,
+      prefer: 'side',
+    })
+
+    expect(placement.top + placement.maxHeight).toBeLessThanOrEqual(VIEWPORT.height)
+    expect(placement.maxHeight).toBeLessThanOrEqual(520)
+  })
+
+  it('painel mais alto que a tela cabe inteiro na tela, rolando por dentro', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(300, 400, 256, 36),
+      panel: { width: 256, height: 2000 },
+      viewport: VIEWPORT,
+      prefer: 'side',
+    })
+
+    expect(placement.top).toBeGreaterThanOrEqual(0)
+    expect(placement.maxHeight).toBeLessThan(VIEWPORT.height)
+    expect(placement.top + placement.maxHeight).toBeLessThanOrEqual(VIEWPORT.height)
+  })
+})
+
+describe('os menus do editor usam a conta acima', () => {
+  /**
+   * A função pura pode estar correta e ninguém chamá-la. Estes dois amarram o uso: sem eles a
+   * correção some no primeiro refactor e o menu volta a encostar na borda.
+   */
+  it('o menu do "+" mede antes de posicionar, em vez de usar a âncora crua', async () => {
+    const content = await Bun.file(`${import.meta.dir}/FlowsWorkspace.tsx`).text()
+
+    expect(content).toContain('placeFloatingPanel')
+    expect(content).not.toContain('left: quickAddFrom.anchor.x + 12')
+  })
+
+  it('o submenu não fica mais preso ao item por CSS', async () => {
+    const content = await Bun.file(`${import.meta.dir}/FlowPalette.tsx`).text()
+
+    expect(content).toContain('placeFloatingPanel')
+    // Verifica o uso em JSX, não a menção: o comentário do arquivo cita a classe antiga para
+    // explicar o que mudou, e casar com o texto solto reprovaria a própria explicação.
+    expect(content).not.toContain('className="absolute left-full')
+    expect(content).toContain('overflowY')
+  })
+})

package/src/flows/flowMenuPlacement.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * Onde um menu flutuante do editor pode aparecer sem sair da tela.
+ *
+ * Existe porque tanto o menu do "+" quanto os submenus dele eram posicionados por uma âncora crua:
+ * o menu em `fixed` na coordenada do clique, os submenus em `left-full top-0`. Card perto da borda
+ * direita jogava o menu para fora; item de ação perto do rodapé cortava a lista no meio, e não havia
+ * como rolar nem alcançar o resto — o menu ficava preso contra a borda.
+ *
+ * A conta é pura de propósito: é ela que decide se o operador consegue clicar na opção, e testá-la
+ * exige apenas números.
+ */
+
+/** Retângulo do gatilho. Um clique é um retângulo de tamanho zero. */
+export type AnchorRect = {
+  readonly left: number
+  readonly top: number
+  readonly right: number
+  readonly bottom: number
+}
+
+export type PanelSize = {
+  readonly width: number
+  readonly height: number
+}
+
+export type ViewportSize = {
+  readonly width: number
+  readonly height: number
+}
+
+export type FloatingPlacement = {
+  readonly left: number
+  readonly top: number
+  /** Teto de altura: acima disso o painel rola por dentro em vez de vazar pelo rodapé. */
+  readonly maxHeight: number
+}
+
+export type PlaceFloatingPanelParams = {
+  readonly anchor: AnchorRect
+  readonly panel: PanelSize
+  readonly viewport: ViewportSize
+  /** `side`: submenu sai ao lado do item; `below`: menu sai abaixo do ponto clicado. */
+  readonly prefer: 'side' | 'below'
+  readonly gap?: number
+  readonly margin?: number
+}
+
+const DEFAULT_GAP = 4
+const DEFAULT_MARGIN = 8
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  // `maximum` menor que `minimum` acontece com painel maior que a viewport: a margem de cima manda,
+  // porque cortar em cima esconde o começo da lista.
+  return Math.max(minimum, Math.min(value, Math.max(minimum, maximum)))
+}
+
+export function placeFloatingPanel({
+  anchor,
+  panel,
+  viewport,
+  prefer,
+  gap = DEFAULT_GAP,
+  margin = DEFAULT_MARGIN,
+}: PlaceFloatingPanelParams): FloatingPlacement {
+  const maxHeight = Math.min(panel.height, viewport.height - margin * 2)
+
+  let left: number
+  if (prefer === 'side') {
+    // Vira para a esquerda quando não cabe à direita — o inverso de escolher sempre um lado.
+    const toTheRight = anchor.right + gap
+    const toTheLeft = anchor.left - gap - panel.width
+    left = toTheRight + panel.width <= viewport.width - margin ? toTheRight : toTheLeft
+  } else {
+    left = anchor.left + gap
+  }
+  left = clamp(left, margin, viewport.width - margin - panel.width)
+
+  const top = prefer === 'side' ? anchor.top : anchor.bottom
+  return {
+    left,
+    top: clamp(top, margin, viewport.height - margin - maxHeight),
+    maxHeight,
+  }
+}