@umodeapporg/ui 0.30.0 → 0.31.0

package/dist/components/UI/Flow/FlowAnnotationNode.js

@@ -0,0 +1,231 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { mergeClasses } from "../../../helpers/mergeClasses.js";
+import { NodeResizer } from "@xyflow/react";
+import { FLOW_ANNOTATION_MIN_SIZE, strokeWidthOf, smoothStrokePath } from "./flowAnnotations.js";
+const FLOW_ANNOTATION_TONE_CLASS = {
+  neutral: "text-foreground-muted",
+  brand: "text-brand-emphasis",
+  info: "text-info-emphasis",
+  success: "text-success-emphasis",
+  warning: "text-warning-emphasis",
+  danger: "text-danger-emphasis"
+};
+const FLOW_ANNOTATION_STROKE_CLASS = {
+  neutral: "stroke-foreground-muted",
+  brand: "stroke-brand",
+  info: "stroke-info",
+  success: "stroke-success",
+  warning: "stroke-warning",
+  danger: "stroke-danger"
+};
+const ARROWHEAD_CLASS = {
+  neutral: "fill-foreground-muted",
+  brand: "fill-brand",
+  info: "fill-info",
+  success: "fill-success",
+  warning: "fill-warning",
+  danger: "fill-danger"
+};
+const FLOW_ANNOTATION_SWATCH_CLASS = {
+  neutral: "bg-foreground-muted",
+  brand: "bg-brand",
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger"
+};
+const STEP_TONE_CLASS = {
+  neutral: "bg-ink text-ink-fg",
+  brand: "bg-brand text-brand-fg",
+  info: "bg-info text-info-fg",
+  success: "bg-success text-success-fg",
+  warning: "bg-warning text-warning-fg",
+  danger: "bg-danger text-danger-fg"
+};
+const FLOW_ANNOTATION_TEXT_SIZE_CLASS = {
+  thin: "text-base",
+  medium: "text-xl",
+  thick: "text-3xl"
+};
+const HIT_BAND_PX = 12;
+const HIT_POINTER_EVENTS = "stroke";
+const MARKER_ORIENT = "auto-start-reverse";
+const RESIZE_HANDLE_CLASS = "umode-flow-annotation-handle";
+const RESIZE_LINE_CLASS = "umode-flow-annotation-line";
+const TEXTAREA_WRAP = "off";
+const FOCUS_ATTEMPTS = 10;
+const EMPTY_LINE_FILLER = "​";
+const flowAnnotationMarkerUrl = (markerId) => `url(#${markerId})`;
+const FlowAnnotationArrowMarker = ({
+  markerId,
+  tone
+}) => /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: markerId, viewBox: "0 0 10 10", refX: 7, refY: 5, markerWidth: 4, markerHeight: 4, orient: MARKER_ORIENT, children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: ARROWHEAD_CLASS[tone] }) }) });
+const AnnotationShape = ({ annotation, markerId }) => {
+  const { width, height } = annotation.size;
+  const strokeWidth = strokeWidthOf(annotation);
+  const inset = strokeWidth / 2;
+  const [start, end] = annotation.points ?? [];
+  const hasArrowhead = annotation.kind === "arrow";
+  const shape = (() => {
+    if (annotation.kind === "rectangle")
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: inset,
+          y: inset,
+          width: Math.max(width - strokeWidth, 0),
+          height: Math.max(height - strokeWidth, 0),
+          rx: 4
+        }
+      );
+    if (annotation.kind === "ellipse")
+      return /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx: width / 2,
+          cy: height / 2,
+          rx: Math.max(width / 2 - inset, 0),
+          ry: Math.max(height / 2 - inset, 0)
+        }
+      );
+    if ((annotation.kind === "arrow" || annotation.kind === "line") && start && end)
+      return /* @__PURE__ */ jsx("line", { x1: start.x, y1: start.y, x2: end.x, y2: end.y });
+    return /* @__PURE__ */ jsx("path", { d: smoothStrokePath(annotation.points ?? []) });
+  })();
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 h-full w-full overflow-visible", fill: "none", children: [
+    hasArrowhead && /* @__PURE__ */ jsx(FlowAnnotationArrowMarker, { markerId, tone: annotation.tone }),
+    /* @__PURE__ */ jsx(
+      "g",
+      {
+        className: FLOW_ANNOTATION_STROKE_CLASS[annotation.tone],
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        markerEnd: hasArrowhead ? flowAnnotationMarkerUrl(markerId) : void 0,
+        children: shape
+      }
+    ),
+    /* @__PURE__ */ jsx("g", { stroke: "transparent", strokeWidth: strokeWidth + HIT_BAND_PX, pointerEvents: HIT_POINTER_EVENTS, children: shape })
+  ] });
+};
+const FlowAnnotationNode = ({ id, data, selected }) => {
+  const { annotation, readOnly, editing, placeholder } = data;
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (!editing) return void 0;
+    let frame = 0;
+    let attemptsLeft = FOCUS_ATTEMPTS;
+    const focusTextarea = () => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      textarea.focus();
+      if (document.activeElement === textarea) {
+        textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+        return;
+      }
+      attemptsLeft -= 1;
+      if (attemptsLeft > 0) frame = window.requestAnimationFrame(focusTextarea);
+    };
+    focusTextarea();
+    return () => window.cancelAnimationFrame(frame);
+  }, [editing]);
+  const markerId = `umode-flow-annotation-arrow-${id}`;
+  const isText = annotation.kind === "text";
+  const toneClass = FLOW_ANNOTATION_TONE_CLASS[annotation.tone] ?? FLOW_ANNOTATION_TONE_CLASS.neutral;
+  const textSizeClass = FLOW_ANNOTATION_TEXT_SIZE_CLASS[annotation.stroke ?? "medium"];
+  const textMetricsClass = mergeClasses("umode-flow-annotation-text whitespace-pre", textSizeClass, "leading-snug");
+  const canResize = !readOnly && selected && !editing && !isText && annotation.kind !== "step";
+  const content = (() => {
+    if (annotation.kind === "step")
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: mergeClasses(
+            "umode-flow-annotation-text pointer-events-auto flex h-full w-full items-center justify-center rounded-full text-lg leading-none shadow-sm",
+            STEP_TONE_CLASS[annotation.tone] ?? STEP_TONE_CLASS.danger
+          ),
+          children: annotation.step
+        }
+      );
+    if (!isText) return /* @__PURE__ */ jsx(AnnotationShape, { annotation, markerId });
+    const text = annotation.text ?? "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "presentation",
+        onDoubleClick: readOnly || editing ? void 0 : data.onEditStart,
+        className: mergeClasses(
+          "umode-flow-annotation-text pointer-events-auto relative inline-block whitespace-pre leading-snug",
+          textSizeClass
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": editing,
+              className: mergeClasses(textMetricsClass, "block min-w-[0.5rem]", editing && "invisible"),
+              children: `${text}${EMPTY_LINE_FILLER}`
+            }
+          ),
+          editing && /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              "aria-label": placeholder,
+              value: text,
+              wrap: TEXTAREA_WRAP,
+              onChange: (event) => data.onTextChange(event.target.value),
+              onBlur: data.onEditEnd,
+              onKeyDown: (event) => {
+                if (event.key === "Escape") event.currentTarget.blur();
+              },
+              className: mergeClasses(
+                textMetricsClass,
+                "nodrag nopan nowheel absolute inset-0 h-full w-full select-text resize-none overflow-hidden border-0 bg-transparent p-0 text-current focus:outline-none focus:ring-0"
+              )
+            }
+          )
+        ]
+      }
+    );
+  })();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: mergeClasses(
+        isText ? "relative inline-block" : "relative h-full w-full",
+        toneClass,
+        selected && !editing && "rounded-md outline-dashed outline-2 outline-offset-4 outline-border-emphasis"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          NodeResizer,
+          {
+            isVisible: canResize,
+            minWidth: FLOW_ANNOTATION_MIN_SIZE,
+            minHeight: FLOW_ANNOTATION_MIN_SIZE,
+            handleClassName: RESIZE_HANDLE_CLASS,
+            lineClassName: RESIZE_LINE_CLASS,
+            onResizeStart: data.onResizeStart,
+            onResize: (_event, params) => data.onResize({
+              position: { x: params.x, y: params.y },
+              size: { width: params.width, height: params.height }
+            })
+          }
+        ),
+        content
+      ]
+    }
+  );
+};
+export {
+  FLOW_ANNOTATION_STROKE_CLASS,
+  FLOW_ANNOTATION_SWATCH_CLASS,
+  FLOW_ANNOTATION_TEXT_SIZE_CLASS,
+  FLOW_ANNOTATION_TONE_CLASS,
+  FlowAnnotationArrowMarker,
+  FlowAnnotationNode as default,
+  flowAnnotationMarkerUrl
+};
+//# sourceMappingURL=FlowAnnotationNode.js.map

package/dist/components/UI/Flow/FlowAnnotationNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAnnotationNode.js","sources":["../../../../src/components/UI/Flow/FlowAnnotationNode.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { type Node, type NodeProps, NodeResizer } from '@xyflow/react';\n\nimport { FLOW_ANNOTATION_MIN_SIZE, smoothStrokePath, strokeWidthOf } from './flowAnnotations';\nimport type { IFlowAnnotationGeometry } from './flowEditorStore';\nimport type { IFlowAnnotation, TFlowAnnotationStroke, TFlowAnnotationTone } from './flowTypes';\n\n/** Text ink: the tone's `-emphasis`, the variant validated for reading. */\nexport const FLOW_ANNOTATION_TONE_CLASS: Record<TFlowAnnotationTone, string> = {\n  neutral: 'text-foreground-muted',\n  brand: 'text-brand-emphasis',\n  info: 'text-info-emphasis',\n  success: 'text-success-emphasis',\n  warning: 'text-warning-emphasis',\n  danger: 'text-danger-emphasis',\n};\n\n/** Strokes are graphics, not text: they take the tone's fill colour, validated at 3:1 for exactly that. */\nexport const FLOW_ANNOTATION_STROKE_CLASS: Record<TFlowAnnotationTone, string> = {\n  neutral: 'stroke-foreground-muted',\n  brand: 'stroke-brand',\n  info: 'stroke-info',\n  success: 'stroke-success',\n  warning: 'stroke-warning',\n  danger: 'stroke-danger',\n};\n\nconst ARROWHEAD_CLASS: Record<TFlowAnnotationTone, string> = {\n  neutral: 'fill-foreground-muted',\n  brand: 'fill-brand',\n  info: 'fill-info',\n  success: 'fill-success',\n  warning: 'fill-warning',\n  danger: 'fill-danger',\n};\n\nexport const FLOW_ANNOTATION_SWATCH_CLASS: Record<TFlowAnnotationTone, string> = {\n  neutral: 'bg-foreground-muted',\n  brand: 'bg-brand',\n  info: 'bg-info',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-danger',\n};\n\n/** A step is a solid badge: the fill is the tone and the number takes the tone's own ink. */\nconst STEP_TONE_CLASS: Record<TFlowAnnotationTone, string> = {\n  neutral: 'bg-ink text-ink-fg',\n  brand: 'bg-brand text-brand-fg',\n  info: 'bg-info text-info-fg',\n  success: 'bg-success text-success-fg',\n  warning: 'bg-warning text-warning-fg',\n  danger: 'bg-danger text-danger-fg',\n};\n\nexport const FLOW_ANNOTATION_TEXT_SIZE_CLASS: Record<TFlowAnnotationStroke, string> = {\n  thin: 'text-base',\n  medium: 'text-xl',\n  thick: 'text-3xl',\n};\n\n/** The invisible band around a stroke that still catches the pointer: a thin line is hard to grab. */\nconst HIT_BAND_PX = 12;\nconst HIT_POINTER_EVENTS = 'stroke';\nconst MARKER_ORIENT = 'auto-start-reverse';\nconst RESIZE_HANDLE_CLASS = 'umode-flow-annotation-handle';\nconst RESIZE_LINE_CLASS = 'umode-flow-annotation-line';\nconst TEXTAREA_WRAP = 'off';\nconst FOCUS_ATTEMPTS = 10;\n/** Keeps a trailing empty line (or an empty note) one line tall in the hidden mirror. */\nconst EMPTY_LINE_FILLER = '​';\n\nexport const flowAnnotationMarkerUrl = (markerId: string): string => `url(#${markerId})`;\n\n/** The arrowhead, painted with the stroke colour of the arrow that uses it. */\nexport const FlowAnnotationArrowMarker: React.FC<{ markerId: string; tone: TFlowAnnotationTone }> = ({\n  markerId,\n  tone,\n}) => (\n  <defs>\n    <marker id={markerId} viewBox=\"0 0 10 10\" refX={7} refY={5} markerWidth={4} markerHeight={4} orient={MARKER_ORIENT}>\n      <path d=\"M 0 0 L 10 5 L 0 10 z\" className={ARROWHEAD_CLASS[tone]} />\n    </marker>\n  </defs>\n);\n\nexport interface IFlowAnnotationNodeData extends Record<string, unknown> {\n  annotation: IFlowAnnotation;\n  readOnly: boolean;\n  editing: boolean;\n  placeholder: string;\n  onTextChange: (text: string) => void;\n  onEditStart: () => void;\n  onEditEnd: () => void;\n  onResizeStart: () => void;\n  onResize: (geometry: IFlowAnnotationGeometry) => void;\n}\n\nexport type TFlowAnnotationNode = Node<IFlowAnnotationNodeData, 'flowAnnotation'>;\n\ninterface IAnnotationShapeProps {\n  annotation: IFlowAnnotation;\n  markerId: string;\n}\n\n/** Draws the stroke twice: once visible, once wide and transparent to catch the pointer. */\nconst AnnotationShape: React.FC<IAnnotationShapeProps> = ({ annotation, markerId }) => {\n  const { width, height } = annotation.size;\n  const strokeWidth = strokeWidthOf(annotation);\n  const inset = strokeWidth / 2;\n  const [start, end] = annotation.points ?? [];\n  const hasArrowhead = annotation.kind === 'arrow';\n\n  const shape = (() => {\n    if (annotation.kind === 'rectangle')\n      return (\n        <rect\n          x={inset}\n          y={inset}\n          width={Math.max(width - strokeWidth, 0)}\n          height={Math.max(height - strokeWidth, 0)}\n          rx={4}\n        />\n      );\n    if (annotation.kind === 'ellipse')\n      return (\n        <ellipse\n          cx={width / 2}\n          cy={height / 2}\n          rx={Math.max(width / 2 - inset, 0)}\n          ry={Math.max(height / 2 - inset, 0)}\n        />\n      );\n    if ((annotation.kind === 'arrow' || annotation.kind === 'line') && start && end)\n      return <line x1={start.x} y1={start.y} x2={end.x} y2={end.y} />;\n    return <path d={smoothStrokePath(annotation.points ?? [])} />;\n  })();\n\n  return (\n    <svg aria-hidden className=\"pointer-events-none absolute inset-0 h-full w-full overflow-visible\" fill=\"none\">\n      {hasArrowhead && <FlowAnnotationArrowMarker markerId={markerId} tone={annotation.tone} />}\n      <g\n        className={FLOW_ANNOTATION_STROKE_CLASS[annotation.tone]}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        markerEnd={hasArrowhead ? flowAnnotationMarkerUrl(markerId) : undefined}\n      >\n        {shape}\n      </g>\n      <g stroke=\"transparent\" strokeWidth={strokeWidth + HIT_BAND_PX} pointerEvents={HIT_POINTER_EVENTS}>\n        {shape}\n      </g>\n    </svg>\n  );\n};\n\n/**\n * One annotation on the canvas. Shapes only catch the pointer on their stroke, so a frame drawn\n * around blocks never steals the click meant for what is inside it; once selected, the whole box\n * can be dragged. Text is written in Virgil, the hand-drawn face of Excalidraw.\n */\nconst FlowAnnotationNode: React.FC<NodeProps<TFlowAnnotationNode>> = ({ id, data, selected }) => {\n  const { annotation, readOnly, editing, placeholder } = data;\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  // xyflow keeps a new node `visibility: hidden` until it is measured, and a hidden field refuses\n  // focus: keep trying for a few frames, or the keys typed next land on the canvas as tool shortcuts.\n  useEffect(() => {\n    if (!editing) return undefined;\n    let frame = 0;\n    let attemptsLeft = FOCUS_ATTEMPTS;\n    const focusTextarea = () => {\n      const textarea = textareaRef.current;\n      if (!textarea) return;\n      textarea.focus();\n      if (document.activeElement === textarea) {\n        textarea.setSelectionRange(textarea.value.length, textarea.value.length);\n        return;\n      }\n      attemptsLeft -= 1;\n      if (attemptsLeft > 0) frame = window.requestAnimationFrame(focusTextarea);\n    };\n    focusTextarea();\n    return () => window.cancelAnimationFrame(frame);\n  }, [editing]);\n\n  const markerId = `umode-flow-annotation-arrow-${id}`;\n  const isText = annotation.kind === 'text';\n  const toneClass = FLOW_ANNOTATION_TONE_CLASS[annotation.tone] ?? FLOW_ANNOTATION_TONE_CLASS.neutral;\n  const textSizeClass = FLOW_ANNOTATION_TEXT_SIZE_CLASS[annotation.stroke ?? 'medium'];\n  // The mirror and the field must measure the same: one face, one size, one line height, no wrap.\n  const textMetricsClass = mergeClasses('umode-flow-annotation-text whitespace-pre', textSizeClass, 'leading-snug');\n  const canResize = !readOnly && selected && !editing && !isText && annotation.kind !== 'step';\n\n  const content = (() => {\n    if (annotation.kind === 'step')\n      return (\n        <div\n          className={mergeClasses(\n            'umode-flow-annotation-text pointer-events-auto flex h-full w-full items-center justify-center rounded-full text-lg leading-none shadow-sm',\n            STEP_TONE_CLASS[annotation.tone] ?? STEP_TONE_CLASS.danger,\n          )}\n        >\n          {annotation.step}\n        </div>\n      );\n    if (!isText) return <AnnotationShape annotation={annotation} markerId={markerId} />;\n\n    // Like Excalidraw: no box, no placeholder, only the caret. The hidden mirror gives the note the\n    // size of what is typed, so it grows as you write and only breaks a line on Enter.\n    const text = annotation.text ?? '';\n    return (\n      <div\n        role=\"presentation\"\n        onDoubleClick={readOnly || editing ? undefined : data.onEditStart}\n        className={mergeClasses(\n          'umode-flow-annotation-text pointer-events-auto relative inline-block whitespace-pre leading-snug',\n          textSizeClass,\n        )}\n      >\n        <span\n          aria-hidden={editing}\n          className={mergeClasses(textMetricsClass, 'block min-w-[0.5rem]', editing && 'invisible')}\n        >\n          {`${text}${EMPTY_LINE_FILLER}`}\n        </span>\n        {editing && (\n          <textarea\n            ref={textareaRef}\n            aria-label={placeholder}\n            value={text}\n            wrap={TEXTAREA_WRAP}\n            onChange={(event) => data.onTextChange(event.target.value)}\n            onBlur={data.onEditEnd}\n            onKeyDown={(event) => {\n              if (event.key === 'Escape') event.currentTarget.blur();\n            }}\n            className={mergeClasses(\n              textMetricsClass,\n              'nodrag nopan nowheel absolute inset-0 h-full w-full select-text resize-none overflow-hidden border-0 bg-transparent p-0 text-current focus:outline-none focus:ring-0',\n            )}\n          />\n        )}\n      </div>\n    );\n  })();\n\n  return (\n    <div\n      className={mergeClasses(\n        isText ? 'relative inline-block' : 'relative h-full w-full',\n        toneClass,\n        selected && !editing && 'rounded-md outline-dashed outline-2 outline-offset-4 outline-border-emphasis',\n      )}\n    >\n      <NodeResizer\n        isVisible={canResize}\n        minWidth={FLOW_ANNOTATION_MIN_SIZE}\n        minHeight={FLOW_ANNOTATION_MIN_SIZE}\n        handleClassName={RESIZE_HANDLE_CLASS}\n        lineClassName={RESIZE_LINE_CLASS}\n        onResizeStart={data.onResizeStart}\n        onResize={(_event, params) =>\n          data.onResize({\n            position: { x: params.x, y: params.y },\n            size: { width: params.width, height: params.height },\n          })\n        }\n      />\n      {content}\n    </div>\n  );\n};\n\nexport default FlowAnnotationNode;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Flow/FlowAnnotationToolbar.d.ts

@@ -0,0 +1,32 @@
+import { SymbolCodepoints } from '../MaterialSymbol';
+import { TFlowAnnotationStroke, TFlowAnnotationTone, TFlowCanvasTool, TFlowShapeTool } from './flowTypes';
+interface IFlowAnnotationToolbarProps {
+    tool: TFlowCanvasTool;
+    /** The shape the shape button draws: the last one picked in its menu. */
+    shapeTool: TFlowShapeTool;
+    onToolChange: (tool: TFlowCanvasTool) => void;
+    tone: TFlowAnnotationTone;
+    onToneChange: (tone: TFlowAnnotationTone) => void;
+    stroke: TFlowAnnotationStroke;
+    onStrokeChange: (stroke: TFlowAnnotationStroke) => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo: () => void;
+    onRedo: () => void;
+    canDelete: boolean;
+    onDelete: () => void;
+    onClose: () => void;
+}
+export declare const FLOW_TOOL_ICON: Record<TFlowCanvasTool, SymbolCodepoints>;
+/** Single keys, as in Figma and Excalidraw. */
+export declare const FLOW_TOOL_SHORTCUT: Partial<Record<TFlowCanvasTool, string>>;
+/**
+ * The annotation toolbar, laid out like the annotation bar of a screenshot tool: what to draw, its
+ * colour and weight, history, delete, and close.
+ */
+declare const FlowAnnotationToolbar: React.FC<IFlowAnnotationToolbarProps>;
+/** What the closed toolbar leaves on the canvas: one button that opens it again. */
+export declare const FlowAnnotationLauncher: React.FC<{
+    onOpen: () => void;
+}>;
+export default FlowAnnotationToolbar;

package/dist/components/UI/Flow/FlowAnnotationToolbar.js

@@ -0,0 +1,298 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledMenu from "../ControlledMenu.js";
+import ControlledPopover from "../ControlledPopover.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { mergeClasses } from "../../../helpers/mergeClasses.js";
+import { FLOW_ANNOTATION_SWATCH_CLASS } from "./FlowAnnotationNode.js";
+import { FLOW_ANNOTATION_TONES, FLOW_ANNOTATION_STROKES, FLOW_ANNOTATION_STROKE_WIDTH } from "./flowAnnotations.js";
+const TEXT_TOOL = "text";
+const FLOW_TOOL_ICON = {
+  select: "arrow_selector_tool",
+  drawing: "edit",
+  line: "pen_size_2",
+  arrow: "north_east",
+  rectangle: "check_box_outline_blank",
+  ellipse: "radio_button_unchecked",
+  step: "counter_1",
+  [TEXT_TOOL]: "title"
+};
+const FLOW_TOOL_SHORTCUT = {
+  select: "V",
+  drawing: "P",
+  line: "L",
+  arrow: "A",
+  rectangle: "R",
+  ellipse: "O",
+  [TEXT_TOOL]: "T"
+};
+const SHAPE_TOOLS = ["line", "arrow", "rectangle", "ellipse", "step"];
+const ICON_BUTTON_CLASS = "interactive flex h-8 items-center justify-center gap-x-0.5 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40";
+const toolButtonClass = (active) => mergeClasses(
+  ICON_BUTTON_CLASS,
+  "min-w-8 px-1.5",
+  active ? "bg-brand-soft text-brand-emphasis" : "text-foreground-muted hover:bg-muted hover:text-foreground"
+);
+const Divider = () => /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-0.5 h-5 w-px shrink-0 bg-border" });
+const CHOICE_CLASS = "interactive flex w-full items-center gap-x-2.5 rounded-lg px-2.5 py-1.5 text-sm text-foreground-muted hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+const FlowAnnotationToolbar = ({
+  tool,
+  shapeTool,
+  onToolChange,
+  tone,
+  onToneChange,
+  stroke,
+  onStrokeChange,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  canDelete,
+  onDelete,
+  onClose
+}) => {
+  const { t } = useTranslation("ui");
+  const [colorOpen, setColorOpen] = useState(false);
+  const [strokeOpen, setStrokeOpen] = useState(false);
+  const toolLabels = {
+    select: t("flow.annotations.tools.select"),
+    drawing: t("flow.annotations.tools.drawing"),
+    line: t("flow.annotations.tools.line"),
+    arrow: t("flow.annotations.tools.arrow"),
+    rectangle: t("flow.annotations.tools.rectangle"),
+    ellipse: t("flow.annotations.tools.ellipse"),
+    step: t("flow.annotations.tools.step"),
+    [TEXT_TOOL]: t("flow.annotations.tools.text")
+  };
+  const toneLabels = {
+    danger: t("flow.annotations.tones.danger"),
+    warning: t("flow.annotations.tones.warning"),
+    success: t("flow.annotations.tones.success"),
+    info: t("flow.annotations.tones.info"),
+    brand: t("flow.annotations.tones.brand"),
+    neutral: t("flow.annotations.tones.neutral")
+  };
+  const strokeLabels = {
+    thin: t("flow.annotations.strokes.thin"),
+    medium: t("flow.annotations.strokes.medium"),
+    thick: t("flow.annotations.strokes.thick")
+  };
+  const tooltipOf = (target) => {
+    const shortcut = FLOW_TOOL_SHORTCUT[target];
+    return shortcut ? t("flow.annotations.tools.withShortcut", { label: toolLabels[target], shortcut }) : toolLabels[target];
+  };
+  const toolButton = (target) => /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltipOf(target), placement: "top", children: /* @__PURE__ */ jsx(
+    ControlledButton,
+    {
+      "aria-label": toolLabels[target],
+      "aria-pressed": tool === target,
+      defaultHtmlButton: true,
+      onClick: () => onToolChange(target),
+      className: toolButtonClass(tool === target),
+      children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: FLOW_TOOL_ICON[target], size: 18, "aria-hidden": true })
+    }
+  ) }, target);
+  const isShapeActive = SHAPE_TOOLS.includes(tool);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": t("flow.annotations.toolbar"),
+      className: "flex items-center gap-x-0.5 rounded-xl border border-border bg-surface p-1 shadow-md",
+      children: [
+        toolButton("select"),
+        toolButton("drawing"),
+        /* @__PURE__ */ jsx(
+          ControlledMenu,
+          {
+            placement: "top-start",
+            triggerTooltip: t("flow.annotations.tools.shapes"),
+            items: SHAPE_TOOLS.map((shape) => ({
+              key: shape,
+              label: toolLabels[shape],
+              icon: FLOW_TOOL_ICON[shape],
+              onClick: () => onToolChange(shape)
+            })),
+            trigger: /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                "aria-label": t("flow.annotations.tools.shapes"),
+                "aria-pressed": isShapeActive,
+                defaultHtmlButton: true,
+                className: toolButtonClass(isShapeActive),
+                children: [
+                  /* @__PURE__ */ jsx(MaterialSymbol, { icon: FLOW_TOOL_ICON[shapeTool], size: 18, "aria-hidden": true }),
+                  /* @__PURE__ */ jsx(MaterialSymbol, { icon: "expand_more", size: 14, "aria-hidden": true })
+                ]
+              }
+            )
+          }
+        ),
+        toolButton(TEXT_TOOL),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(
+          ControlledPopover,
+          {
+            placement: "top",
+            open: colorOpen,
+            onOpenChange: setColorOpen,
+            triggerTooltip: t("flow.annotations.color"),
+            contentClassName: "flex items-center gap-x-1 p-1.5",
+            trigger: /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                "aria-label": t("flow.annotations.color"),
+                defaultHtmlButton: true,
+                className: mergeClasses(toolButtonClass(false), "px-1.5"),
+                children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: mergeClasses("size-4 rounded-full", FLOW_ANNOTATION_SWATCH_CLASS[tone]) }),
+                  /* @__PURE__ */ jsx(MaterialSymbol, { icon: "expand_more", size: 14, "aria-hidden": true })
+                ]
+              }
+            ),
+            children: FLOW_ANNOTATION_TONES.map((option) => /* @__PURE__ */ jsx(ControlledTooltip, { content: toneLabels[option], placement: "top", children: /* @__PURE__ */ jsx(
+              ControlledButton,
+              {
+                "aria-label": toneLabels[option],
+                "aria-pressed": tone === option,
+                defaultHtmlButton: true,
+                onClick: () => {
+                  onToneChange(option);
+                  setColorOpen(false);
+                },
+                className: mergeClasses(
+                  "interactive flex size-8 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  tone === option ? "bg-muted-active" : "hover:bg-muted"
+                ),
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: mergeClasses("size-5 rounded-full", FLOW_ANNOTATION_SWATCH_CLASS[option]) })
+              }
+            ) }, option))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ControlledPopover,
+          {
+            placement: "top",
+            open: strokeOpen,
+            onOpenChange: setStrokeOpen,
+            triggerTooltip: t("flow.annotations.stroke"),
+            contentClassName: "flex w-40 flex-col p-1",
+            trigger: /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                "aria-label": t("flow.annotations.stroke"),
+                defaultHtmlButton: true,
+                className: mergeClasses(toolButtonClass(false), "px-1.5"),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "w-5 rounded-full bg-current",
+                      style: { height: FLOW_ANNOTATION_STROKE_WIDTH[stroke] }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(MaterialSymbol, { icon: "expand_more", size: 14, "aria-hidden": true })
+                ]
+              }
+            ),
+            children: FLOW_ANNOTATION_STROKES.map((option) => /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                "aria-pressed": stroke === option,
+                defaultHtmlButton: true,
+                onClick: () => {
+                  onStrokeChange(option);
+                  setStrokeOpen(false);
+                },
+                className: mergeClasses(CHOICE_CLASS, stroke === option && "bg-muted text-foreground"),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "w-6 shrink-0 rounded-full bg-current",
+                      style: { height: FLOW_ANNOTATION_STROKE_WIDTH[option] }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: strokeLabels[option] })
+                ]
+              },
+              option
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(ControlledTooltip, { content: t("flow.controls.undo"), placement: "top", children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            "aria-label": t("flow.controls.undo"),
+            defaultHtmlButton: true,
+            disabled: !canUndo,
+            onClick: onUndo,
+            className: toolButtonClass(false),
+            children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "undo", size: 18, "aria-hidden": true })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ControlledTooltip, { content: t("flow.controls.redo"), placement: "top", children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            "aria-label": t("flow.controls.redo"),
+            defaultHtmlButton: true,
+            disabled: !canRedo,
+            onClick: onRedo,
+            className: toolButtonClass(false),
+            children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "redo", size: 18, "aria-hidden": true })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ControlledTooltip, { content: t("flow.annotations.deleteSelection"), placement: "top", children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            "aria-label": t("flow.annotations.deleteSelection"),
+            defaultHtmlButton: true,
+            disabled: !canDelete,
+            onClick: onDelete,
+            className: toolButtonClass(false),
+            children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "delete", size: 18, "aria-hidden": true })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(ControlledTooltip, { content: t("flow.annotations.close"), placement: "top", children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            "aria-label": t("flow.annotations.close"),
+            defaultHtmlButton: true,
+            onClick: onClose,
+            className: toolButtonClass(false),
+            children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 18, "aria-hidden": true })
+          }
+        ) })
+      ]
+    }
+  );
+};
+const FlowAnnotationLauncher = ({ onOpen }) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs(
+    ControlledButton,
+    {
+      defaultHtmlButton: true,
+      onClick: onOpen,
+      className: "interactive flex h-9 items-center gap-x-1.5 rounded-xl border border-border bg-surface px-3 text-sm font-medium text-foreground-muted shadow-md hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      children: [
+        /* @__PURE__ */ jsx(MaterialSymbol, { icon: "edit", size: 18, "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { children: t("flow.annotations.open") })
+      ]
+    }
+  );
+};
+export {
+  FLOW_TOOL_ICON,
+  FLOW_TOOL_SHORTCUT,
+  FlowAnnotationLauncher,
+  FlowAnnotationToolbar as default
+};
+//# sourceMappingURL=FlowAnnotationToolbar.js.map

package/dist/components/UI/Flow/FlowAnnotationToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAnnotationToolbar.js","sources":["../../../../src/components/UI/Flow/FlowAnnotationToolbar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledMenu from '@/components/UI/ControlledMenu';\nimport ControlledPopover from '@/components/UI/ControlledPopover';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, type SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nimport { FLOW_ANNOTATION_SWATCH_CLASS } from './FlowAnnotationNode';\nimport { FLOW_ANNOTATION_STROKE_WIDTH, FLOW_ANNOTATION_STROKES, FLOW_ANNOTATION_TONES } from './flowAnnotations';\nimport type { TFlowAnnotationStroke, TFlowAnnotationTone, TFlowCanvasTool, TFlowShapeTool } from './flowTypes';\n\ninterface IFlowAnnotationToolbarProps {\n  tool: TFlowCanvasTool;\n  /** The shape the shape button draws: the last one picked in its menu. */\n  shapeTool: TFlowShapeTool;\n  onToolChange: (tool: TFlowCanvasTool) => void;\n  tone: TFlowAnnotationTone;\n  onToneChange: (tone: TFlowAnnotationTone) => void;\n  stroke: TFlowAnnotationStroke;\n  onStrokeChange: (stroke: TFlowAnnotationStroke) => void;\n  canUndo: boolean;\n  canRedo: boolean;\n  onUndo: () => void;\n  onRedo: () => void;\n  canDelete: boolean;\n  onDelete: () => void;\n  onClose: () => void;\n}\n\n// The text tool is keyed by a constant: a literal `text:` key reads as copy to the i18n lint.\nconst TEXT_TOOL: TFlowCanvasTool = 'text';\n\nexport const FLOW_TOOL_ICON: Record<TFlowCanvasTool, SymbolCodepoints> = {\n  select: 'arrow_selector_tool',\n  drawing: 'edit',\n  line: 'pen_size_2',\n  arrow: 'north_east',\n  rectangle: 'check_box_outline_blank',\n  ellipse: 'radio_button_unchecked',\n  step: 'counter_1',\n  [TEXT_TOOL]: 'title',\n};\n\n/** Single keys, as in Figma and Excalidraw. */\nexport const FLOW_TOOL_SHORTCUT: Partial<Record<TFlowCanvasTool, string>> = {\n  select: 'V',\n  drawing: 'P',\n  line: 'L',\n  arrow: 'A',\n  rectangle: 'R',\n  ellipse: 'O',\n  [TEXT_TOOL]: 'T',\n};\n\nconst SHAPE_TOOLS: Array<TFlowShapeTool> = ['line', 'arrow', 'rectangle', 'ellipse', 'step'];\n\nconst ICON_BUTTON_CLASS =\n  'interactive flex h-8 items-center justify-center gap-x-0.5 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40';\n\nconst toolButtonClass = (active: boolean): string =>\n  mergeClasses(\n    ICON_BUTTON_CLASS,\n    'min-w-8 px-1.5',\n    active ? 'bg-brand-soft text-brand-emphasis' : 'text-foreground-muted hover:bg-muted hover:text-foreground',\n  );\n\nconst Divider: React.FC = () => <span aria-hidden className=\"mx-0.5 h-5 w-px shrink-0 bg-border\" />;\n\nconst CHOICE_CLASS =\n  'interactive flex w-full items-center gap-x-2.5 rounded-lg px-2.5 py-1.5 text-sm text-foreground-muted hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';\n\n/**\n * The annotation toolbar, laid out like the annotation bar of a screenshot tool: what to draw, its\n * colour and weight, history, delete, and close.\n */\nconst FlowAnnotationToolbar: React.FC<IFlowAnnotationToolbarProps> = ({\n  tool,\n  shapeTool,\n  onToolChange,\n  tone,\n  onToneChange,\n  stroke,\n  onStrokeChange,\n  canUndo,\n  canRedo,\n  onUndo,\n  onRedo,\n  canDelete,\n  onDelete,\n  onClose,\n}) => {\n  const { t } = useTranslation('ui');\n  const [colorOpen, setColorOpen] = useState(false);\n  const [strokeOpen, setStrokeOpen] = useState(false);\n\n  const toolLabels: Record<TFlowCanvasTool, string> = {\n    select: t('flow.annotations.tools.select'),\n    drawing: t('flow.annotations.tools.drawing'),\n    line: t('flow.annotations.tools.line'),\n    arrow: t('flow.annotations.tools.arrow'),\n    rectangle: t('flow.annotations.tools.rectangle'),\n    ellipse: t('flow.annotations.tools.ellipse'),\n    step: t('flow.annotations.tools.step'),\n    [TEXT_TOOL]: t('flow.annotations.tools.text'),\n  };\n  const toneLabels: Record<TFlowAnnotationTone, string> = {\n    danger: t('flow.annotations.tones.danger'),\n    warning: t('flow.annotations.tones.warning'),\n    success: t('flow.annotations.tones.success'),\n    info: t('flow.annotations.tones.info'),\n    brand: t('flow.annotations.tones.brand'),\n    neutral: t('flow.annotations.tones.neutral'),\n  };\n  const strokeLabels: Record<TFlowAnnotationStroke, string> = {\n    thin: t('flow.annotations.strokes.thin'),\n    medium: t('flow.annotations.strokes.medium'),\n    thick: t('flow.annotations.strokes.thick'),\n  };\n  const tooltipOf = (target: TFlowCanvasTool): string => {\n    const shortcut = FLOW_TOOL_SHORTCUT[target];\n    return shortcut\n      ? t('flow.annotations.tools.withShortcut', { label: toolLabels[target], shortcut })\n      : toolLabels[target];\n  };\n\n  const toolButton = (target: TFlowCanvasTool) => (\n    <ControlledTooltip key={target} content={tooltipOf(target)} placement=\"top\">\n      <ControlledButton\n        aria-label={toolLabels[target]}\n        aria-pressed={tool === target}\n        defaultHtmlButton\n        onClick={() => onToolChange(target)}\n        className={toolButtonClass(tool === target)}\n      >\n        <MaterialSymbol icon={FLOW_TOOL_ICON[target]} size={18} aria-hidden />\n      </ControlledButton>\n    </ControlledTooltip>\n  );\n\n  const isShapeActive = SHAPE_TOOLS.includes(tool as TFlowShapeTool);\n\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label={t('flow.annotations.toolbar')}\n      className=\"flex items-center gap-x-0.5 rounded-xl border border-border bg-surface p-1 shadow-md\"\n    >\n      {toolButton('select')}\n      {toolButton('drawing')}\n      <ControlledMenu\n        placement=\"top-start\"\n        triggerTooltip={t('flow.annotations.tools.shapes')}\n        items={SHAPE_TOOLS.map((shape) => ({\n          key: shape,\n          label: toolLabels[shape],\n          icon: FLOW_TOOL_ICON[shape],\n          onClick: () => onToolChange(shape),\n        }))}\n        trigger={\n          <ControlledButton\n            aria-label={t('flow.annotations.tools.shapes')}\n            aria-pressed={isShapeActive}\n            defaultHtmlButton\n            className={toolButtonClass(isShapeActive)}\n          >\n            <MaterialSymbol icon={FLOW_TOOL_ICON[shapeTool]} size={18} aria-hidden />\n            <MaterialSymbol icon=\"expand_more\" size={14} aria-hidden />\n          </ControlledButton>\n        }\n      />\n      {toolButton(TEXT_TOOL)}\n\n      <Divider />\n\n      <ControlledPopover\n        placement=\"top\"\n        open={colorOpen}\n        onOpenChange={setColorOpen}\n        triggerTooltip={t('flow.annotations.color')}\n        contentClassName=\"flex items-center gap-x-1 p-1.5\"\n        trigger={\n          <ControlledButton\n            aria-label={t('flow.annotations.color')}\n            defaultHtmlButton\n            className={mergeClasses(toolButtonClass(false), 'px-1.5')}\n          >\n            <span aria-hidden className={mergeClasses('size-4 rounded-full', FLOW_ANNOTATION_SWATCH_CLASS[tone])} />\n            <MaterialSymbol icon=\"expand_more\" size={14} aria-hidden />\n          </ControlledButton>\n        }\n      >\n        {FLOW_ANNOTATION_TONES.map((option) => (\n          <ControlledTooltip key={option} content={toneLabels[option]} placement=\"top\">\n            <ControlledButton\n              aria-label={toneLabels[option]}\n              aria-pressed={tone === option}\n              defaultHtmlButton\n              onClick={() => {\n                onToneChange(option);\n                setColorOpen(false);\n              }}\n              className={mergeClasses(\n                'interactive flex size-8 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                tone === option ? 'bg-muted-active' : 'hover:bg-muted',\n              )}\n            >\n              <span aria-hidden className={mergeClasses('size-5 rounded-full', FLOW_ANNOTATION_SWATCH_CLASS[option])} />\n            </ControlledButton>\n          </ControlledTooltip>\n        ))}\n      </ControlledPopover>\n\n      <ControlledPopover\n        placement=\"top\"\n        open={strokeOpen}\n        onOpenChange={setStrokeOpen}\n        triggerTooltip={t('flow.annotations.stroke')}\n        contentClassName=\"flex w-40 flex-col p-1\"\n        trigger={\n          <ControlledButton\n            aria-label={t('flow.annotations.stroke')}\n            defaultHtmlButton\n            className={mergeClasses(toolButtonClass(false), 'px-1.5')}\n          >\n            <span\n              aria-hidden\n              className=\"w-5 rounded-full bg-current\"\n              style={{ height: FLOW_ANNOTATION_STROKE_WIDTH[stroke] }}\n            />\n            <MaterialSymbol icon=\"expand_more\" size={14} aria-hidden />\n          </ControlledButton>\n        }\n      >\n        {FLOW_ANNOTATION_STROKES.map((option) => (\n          <ControlledButton\n            key={option}\n            aria-pressed={stroke === option}\n            defaultHtmlButton\n            onClick={() => {\n              onStrokeChange(option);\n              setStrokeOpen(false);\n            }}\n            className={mergeClasses(CHOICE_CLASS, stroke === option && 'bg-muted text-foreground')}\n          >\n            <span\n              aria-hidden\n              className=\"w-6 shrink-0 rounded-full bg-current\"\n              style={{ height: FLOW_ANNOTATION_STROKE_WIDTH[option] }}\n            />\n            <span>{strokeLabels[option]}</span>\n          </ControlledButton>\n        ))}\n      </ControlledPopover>\n\n      <Divider />\n\n      <ControlledTooltip content={t('flow.controls.undo')} placement=\"top\">\n        <ControlledButton\n          aria-label={t('flow.controls.undo')}\n          defaultHtmlButton\n          disabled={!canUndo}\n          onClick={onUndo}\n          className={toolButtonClass(false)}\n        >\n          <MaterialSymbol icon=\"undo\" size={18} aria-hidden />\n        </ControlledButton>\n      </ControlledTooltip>\n      <ControlledTooltip content={t('flow.controls.redo')} placement=\"top\">\n        <ControlledButton\n          aria-label={t('flow.controls.redo')}\n          defaultHtmlButton\n          disabled={!canRedo}\n          onClick={onRedo}\n          className={toolButtonClass(false)}\n        >\n          <MaterialSymbol icon=\"redo\" size={18} aria-hidden />\n        </ControlledButton>\n      </ControlledTooltip>\n      <ControlledTooltip content={t('flow.annotations.deleteSelection')} placement=\"top\">\n        <ControlledButton\n          aria-label={t('flow.annotations.deleteSelection')}\n          defaultHtmlButton\n          disabled={!canDelete}\n          onClick={onDelete}\n          className={toolButtonClass(false)}\n        >\n          <MaterialSymbol icon=\"delete\" size={18} aria-hidden />\n        </ControlledButton>\n      </ControlledTooltip>\n\n      <Divider />\n\n      <ControlledTooltip content={t('flow.annotations.close')} placement=\"top\">\n        <ControlledButton\n          aria-label={t('flow.annotations.close')}\n          defaultHtmlButton\n          onClick={onClose}\n          className={toolButtonClass(false)}\n        >\n          <MaterialSymbol icon=\"close\" size={18} aria-hidden />\n        </ControlledButton>\n      </ControlledTooltip>\n    </div>\n  );\n};\n\n/** What the closed toolbar leaves on the canvas: one button that opens it again. */\nexport const FlowAnnotationLauncher: React.FC<{ onOpen: () => void }> = ({ onOpen }) => {\n  const { t } = useTranslation('ui');\n  return (\n    <ControlledButton\n      defaultHtmlButton\n      onClick={onOpen}\n      className=\"interactive flex h-9 items-center gap-x-1.5 rounded-xl border border-border bg-surface px-3 text-sm font-medium text-foreground-muted shadow-md hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n    >\n      <MaterialSymbol icon=\"edit\" size={18} aria-hidden />\n      <span>{t('flow.annotations.open')}</span>\n    </ControlledButton>\n  );\n};\n\nexport default FlowAnnotationToolbar;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Flow/FlowCanvas.d.ts

@@ -11,6 +11,8 @@ export interface IFlowCanvasProps {
     controlsPosition?: PanelPosition;
     /** The dot grid behind the blocks. Blocks still snap to the grid when it is hidden. */
     background?: 'dots' | 'none';
+    /** Shows the drawing toolbar (pen, shapes, text). Annotations already in the graph render either way. */
+    annotationTools?: boolean;
 }
 /**
  * The editing surface. Renders the graph held by `FlowEditorProvider` and turns every