@umodeapporg/ui 0.0.0-canary.ca10e69

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/FlowBlockNode.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { SymbolCodepoints } from '../MaterialSymbol';
+import { Node, NodeProps } from '@xyflow/react';
+import { TFlowIssueSeverity, TFlowPortId, TFlowRunStepStatus } from './flowTypes';
+export declare const FLOW_INPUT_HANDLE_ID = "in";
+export interface IFlowAddableBlock {
+    type: string;
+    label: string;
+    icon: SymbolCodepoints;
+}
+export interface IFlowBlockNodeData extends Record<string, unknown> {
+    icon: SymbolCodepoints;
+    title: string;
+    categoryLabel: string;
+    summary?: ReactNode;
+    hasInput: boolean;
+    outputs: Array<TFlowPortId>;
+    /** Ports already wired: their edge carries the label, so the port does not repeat it. */
+    connectedPorts: Array<TFlowPortId>;
+    portLabels: Record<TFlowPortId, string>;
+    /** What a free port can grow into; empty in a read-only canvas. */
+    addableBlocks: Array<IFlowAddableBlock>;
+    onAddFromPort?: (port: TFlowPortId, type: string) => void;
+    disabled?: boolean;
+    issueSeverity?: TFlowIssueSeverity;
+    issueCount: number;
+    runStatus?: TFlowRunStepStatus;
+}
+export type TFlowBlockNode = Node<IFlowBlockNodeData, 'flowBlock'>;
+/**
+ * Input on the left edge, output ports spread along the right edge; a lone `next` port needs no
+ * label. A free port shows a "+" that adds the next block already wired to it.
+ */
+declare const FlowBlockNode: React.FC<NodeProps<TFlowBlockNode>>;
+export default FlowBlockNode;

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

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledMenu from "../ControlledMenu.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { useUpdateNodeInternals, Handle, Position } from "@xyflow/react";
+import FlowNodeShell from "./FlowNodeShell.js";
+const FLOW_INPUT_HANDLE_ID = "in";
+const portTop = (index, count) => `${(index + 1) / (count + 1) * 100}%`;
+const FlowBlockNode = ({ id, data, selected }) => {
+  const { t } = useTranslation("ui");
+  const updateNodeInternals = useUpdateNodeInternals();
+  const outputs = Array.isArray(data.outputs) ? data.outputs : [];
+  const handleSignature = `${data.hasInput ? FLOW_INPUT_HANDLE_ID : ""}|${outputs.join(",")}`;
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [id, handleSignature, updateNodeInternals]);
+  const connectedPorts = Array.isArray(data.connectedPorts) ? data.connectedPorts : [];
+  const addableBlocks = Array.isArray(data.addableBlocks) ? data.addableBlocks : [];
+  const showPortLabels = !(outputs.length === 1 && outputs[0] === "next");
+  const canAdd = Boolean(data.onAddFromPort) && addableBlocks.length > 0;
+  return /* @__PURE__ */ jsxs(
+    FlowNodeShell,
+    {
+      icon: data.icon,
+      title: data.title,
+      categoryLabel: data.categoryLabel,
+      summary: data.summary,
+      selected,
+      disabled: data.disabled,
+      issueSeverity: data.issueSeverity,
+      issueCount: data.issueCount,
+      runStatus: data.runStatus,
+      className: showPortLabels ? "pr-12" : void 0,
+      children: [
+        data.hasInput && /* @__PURE__ */ jsx(Handle, { id: FLOW_INPUT_HANDLE_ID, type: "target", position: Position.Left, className: "umode-flow-handle" }),
+        outputs.map((port, index) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            id: port,
+            type: "source",
+            position: Position.Right,
+            className: "umode-flow-handle",
+            "data-port": port,
+            style: { top: portTop(index, outputs.length) },
+            children: showPortLabels && !connectedPorts.includes(port) && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 whitespace-nowrap text-xxs font-semibold text-foreground-subtle", children: data.portLabels[port] })
+          },
+          port
+        )),
+        canAdd && outputs.map(
+          (port, index) => connectedPorts.includes(port) ? null : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "nodrag nopan absolute -right-10 -translate-y-1/2",
+              style: { top: portTop(index, outputs.length) },
+              children: /* @__PURE__ */ jsx(
+                ControlledMenu,
+                {
+                  placement: "right-start",
+                  triggerTooltip: t("flow.node.addBlock"),
+                  items: addableBlocks.map((block) => ({
+                    key: block.type,
+                    label: block.label,
+                    icon: block.icon,
+                    onClick: () => data.onAddFromPort?.(port, block.type)
+                  })),
+                  trigger: /* @__PURE__ */ jsx(
+                    ControlledButton,
+                    {
+                      "aria-label": t("flow.node.addBlock"),
+                      defaultHtmlButton: true,
+                      className: "interactive flex size-6 items-center justify-center rounded-full border border-border-emphasis bg-surface text-foreground-muted shadow-sm hover:border-brand-border hover:bg-brand-soft hover:text-brand-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "add", size: 16, "aria-hidden": true })
+                    }
+                  )
+                }
+              )
+            },
+            `add|${port}`
+          )
+        )
+      ]
+    }
+  );
+};
+export {
+  FLOW_INPUT_HANDLE_ID,
+  FlowBlockNode as default
+};
+//# sourceMappingURL=FlowBlockNode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowBlockNode.js","sources":["../../../../src/components/UI/Flow/FlowBlockNode.tsx"],"sourcesContent":["import { ReactNode, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledMenu from '@/components/UI/ControlledMenu';\nimport { MaterialSymbol, type SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { Handle, type Node, type NodeProps, Position, useUpdateNodeInternals } from '@xyflow/react';\n\nimport FlowNodeShell from './FlowNodeShell';\nimport type { TFlowIssueSeverity, TFlowPortId, TFlowRunStepStatus } from './flowTypes';\n\nexport const FLOW_INPUT_HANDLE_ID = 'in';\n\nexport interface IFlowAddableBlock {\n  type: string;\n  label: string;\n  icon: SymbolCodepoints;\n}\n\nexport interface IFlowBlockNodeData extends Record<string, unknown> {\n  icon: SymbolCodepoints;\n  title: string;\n  categoryLabel: string;\n  summary?: ReactNode;\n  hasInput: boolean;\n  outputs: Array<TFlowPortId>;\n  /** Ports already wired: their edge carries the label, so the port does not repeat it. */\n  connectedPorts: Array<TFlowPortId>;\n  portLabels: Record<TFlowPortId, string>;\n  /** What a free port can grow into; empty in a read-only canvas. */\n  addableBlocks: Array<IFlowAddableBlock>;\n  onAddFromPort?: (port: TFlowPortId, type: string) => void;\n  disabled?: boolean;\n  issueSeverity?: TFlowIssueSeverity;\n  issueCount: number;\n  runStatus?: TFlowRunStepStatus;\n}\n\nexport type TFlowBlockNode = Node<IFlowBlockNodeData, 'flowBlock'>;\n\nconst portTop = (index: number, count: number): string => `${((index + 1) / (count + 1)) * 100}%`;\n\n/**\n * Input on the left edge, output ports spread along the right edge; a lone `next` port needs no\n * label. A free port shows a \"+\" that adds the next block already wired to it.\n */\nconst FlowBlockNode: React.FC<NodeProps<TFlowBlockNode>> = ({ id, data, selected }) => {\n  const { t } = useTranslation('ui');\n  const updateNodeInternals = useUpdateNodeInternals();\n  const outputs = Array.isArray(data.outputs) ? data.outputs : [];\n  const handleSignature = `${data.hasInput ? FLOW_INPUT_HANDLE_ID : ''}|${outputs.join(',')}`;\n\n  // React Flow measures handle positions only when the node is resized. An edge whose handle was\n  // not in that measurement is never drawn, so remeasure after mount and whenever the ports change.\n  useEffect(() => {\n    updateNodeInternals(id);\n  }, [id, handleSignature, updateNodeInternals]);\n  const connectedPorts = Array.isArray(data.connectedPorts) ? data.connectedPorts : [];\n  const addableBlocks = Array.isArray(data.addableBlocks) ? data.addableBlocks : [];\n  const showPortLabels = !(outputs.length === 1 && outputs[0] === 'next');\n  const canAdd = Boolean(data.onAddFromPort) && addableBlocks.length > 0;\n\n  return (\n    <FlowNodeShell\n      icon={data.icon}\n      title={data.title}\n      categoryLabel={data.categoryLabel}\n      summary={data.summary}\n      selected={selected}\n      disabled={data.disabled}\n      issueSeverity={data.issueSeverity}\n      issueCount={data.issueCount}\n      runStatus={data.runStatus}\n      className={showPortLabels ? 'pr-12' : undefined}\n    >\n      {data.hasInput && (\n        <Handle id={FLOW_INPUT_HANDLE_ID} type=\"target\" position={Position.Left} className=\"umode-flow-handle\" />\n      )}\n      {outputs.map((port, index) => (\n        <Handle\n          key={port}\n          id={port}\n          type=\"source\"\n          position={Position.Right}\n          className=\"umode-flow-handle\"\n          data-port={port}\n          style={{ top: portTop(index, outputs.length) }}\n        >\n          {showPortLabels && !connectedPorts.includes(port) && (\n            <span className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 whitespace-nowrap text-xxs font-semibold text-foreground-subtle\">\n              {data.portLabels[port]}\n            </span>\n          )}\n        </Handle>\n      ))}\n      {canAdd &&\n        outputs.map((port, index) =>\n          connectedPorts.includes(port) ? null : (\n            <div\n              key={`add|${port}`}\n              className=\"nodrag nopan absolute -right-10 -translate-y-1/2\"\n              style={{ top: portTop(index, outputs.length) }}\n            >\n              <ControlledMenu\n                placement=\"right-start\"\n                triggerTooltip={t('flow.node.addBlock')}\n                items={addableBlocks.map((block) => ({\n                  key: block.type,\n                  label: block.label,\n                  icon: block.icon,\n                  onClick: () => data.onAddFromPort?.(port, block.type),\n                }))}\n                trigger={\n                  <ControlledButton\n                    aria-label={t('flow.node.addBlock')}\n                    defaultHtmlButton\n                    className=\"interactive flex size-6 items-center justify-center rounded-full border border-border-emphasis bg-surface text-foreground-muted shadow-sm hover:border-brand-border hover:bg-brand-soft hover:text-brand-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                  >\n                    <MaterialSymbol icon=\"add\" size={16} aria-hidden />\n                  </ControlledButton>\n                }\n              />\n            </div>\n          ),\n        )}\n    </FlowNodeShell>\n  );\n};\n\nexport default FlowBlockNode;\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,uBAAuB;AA6BpC,MAAM,UAAU,CAAC,OAAe,UAA0B,IAAK,QAAQ,MAAM,QAAQ,KAAM,GAAG;AAM9F,MAAM,gBAAqD,CAAC,EAAE,IAAI,MAAM,eAAe;AACrF,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,sBAAsB,uBAAA;AAC5B,QAAM,UAAU,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,UAAU,CAAA;AAC7D,QAAM,kBAAkB,GAAG,KAAK,WAAW,uBAAuB,EAAE,IAAI,QAAQ,KAAK,GAAG,CAAC;AAIzF,YAAU,MAAM;AACd,wBAAoB,EAAE;AAAA,EACxB,GAAG,CAAC,IAAI,iBAAiB,mBAAmB,CAAC;AAC7C,QAAM,iBAAiB,MAAM,QAAQ,KAAK,cAAc,IAAI,KAAK,iBAAiB,CAAA;AAClF,QAAM,gBAAgB,MAAM,QAAQ,KAAK,aAAa,IAAI,KAAK,gBAAgB,CAAA;AAC/E,QAAM,iBAAiB,EAAE,QAAQ,WAAW,KAAK,QAAQ,CAAC,MAAM;AAChE,QAAM,SAAS,QAAQ,KAAK,aAAa,KAAK,cAAc,SAAS;AAErE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,eAAe,KAAK;AAAA,MACpB,SAAS,KAAK;AAAA,MACd;AAAA,MACA,UAAU,KAAK;AAAA,MACf,eAAe,KAAK;AAAA,MACpB,YAAY,KAAK;AAAA,MACjB,WAAW,KAAK;AAAA,MAChB,WAAW,iBAAiB,UAAU;AAAA,MAErC,UAAA;AAAA,QAAA,KAAK,YACJ,oBAAC,QAAA,EAAO,IAAI,sBAAsB,MAAK,UAAS,UAAU,SAAS,MAAM,WAAU,oBAAA,CAAoB;AAAA,QAExG,QAAQ,IAAI,CAAC,MAAM,UAClB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,IAAI;AAAA,YACJ,MAAK;AAAA,YACL,UAAU,SAAS;AAAA,YACnB,WAAU;AAAA,YACV,aAAW;AAAA,YACX,OAAO,EAAE,KAAK,QAAQ,OAAO,QAAQ,MAAM,EAAA;AAAA,YAE1C,UAAA,kBAAkB,CAAC,eAAe,SAAS,IAAI,KAC9C,oBAAC,QAAA,EAAK,WAAU,iIACb,UAAA,KAAK,WAAW,IAAI,EAAA,CACvB;AAAA,UAAA;AAAA,UAXG;AAAA,QAAA,CAcR;AAAA,QACA,UACC,QAAQ;AAAA,UAAI,CAAC,MAAM,UACjB,eAAe,SAAS,IAAI,IAAI,OAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO,EAAE,KAAK,QAAQ,OAAO,QAAQ,MAAM,EAAA;AAAA,cAE3C,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,gBAAgB,EAAE,oBAAoB;AAAA,kBACtC,OAAO,cAAc,IAAI,CAAC,WAAW;AAAA,oBACnC,KAAK,MAAM;AAAA,oBACX,OAAO,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA,oBACZ,SAAS,MAAM,KAAK,gBAAgB,MAAM,MAAM,IAAI;AAAA,kBAAA,EACpD;AAAA,kBACF,SACE;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,cAAY,EAAE,oBAAoB;AAAA,sBAClC,mBAAiB;AAAA,sBACjB,WAAU;AAAA,sBAEV,8BAAC,gBAAA,EAAe,MAAK,OAAM,MAAM,IAAI,eAAW,KAAA,CAAC;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACnD;AAAA,cAAA;AAAA,YAEJ;AAAA,YAtBK,OAAO,IAAI;AAAA,UAAA;AAAA,QAuBlB;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGR;"}

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

@@ -0,0 +1,23 @@
+import { PanelPosition } from '@xyflow/react';
+import { IFlowIssue, IFlowRunOverlay } from './flowTypes';
+export interface IFlowCanvasProps {
+    issues?: Array<IFlowIssue>;
+    runOverlay?: IFlowRunOverlay | null;
+    readOnly?: boolean;
+    /** Accessible name of the canvas region, from `t()`. Defaults to the library label. */
+    ariaLabel?: string;
+    className?: string;
+    /** Where the zoom and history controls sit. */
+    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
+ * gesture (drag, connect, select, delete, shortcuts) into a store action, so undo
+ * and the dirty flag see all of them.
+ */
+declare const FlowCanvas: React.FC<IFlowCanvasProps>;
+export default FlowCanvas;