@umodeapporg/ui 0.30.1 → 0.31.0

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