@umodeapporg/ui 0.30.1 → 0.31.0

package/dist/assets/umode-ui.css

@@ -433,3 +433,35 @@
   stroke: rgb(var(--color-border-strong));
   fill: rgb(var(--color-border-strong));
 }
+
+.umode-flow .react-flow__selection {
+  background: rgb(var(--color-primary) / 0.08);
+  border: 1px solid rgb(var(--color-primary) / 0.6);
+  border-radius: 0.25rem;
+}
+
+/* The box xyflow draws around a marquee selection sits over the blocks and swallows the click that
+   should pick one of them. Dragging any selected block already moves the whole selection. */
+.umode-flow .react-flow__nodesselection {
+  display: none;
+}
+
+.umode-flow--drawing .react-flow__pane {
+  cursor: crosshair;
+}
+
+.umode-flow .umode-flow-annotation-handle {
+  width: 0.5rem;
+  height: 0.5rem;
+  border: 1.5px solid rgb(var(--color-primary));
+  border-radius: 0.125rem;
+  background: rgb(var(--color-surface));
+}
+
+.umode-flow .umode-flow-annotation-line {
+  border-color: transparent;
+}
+
+.umode-flow .umode-flow-annotation-text {
+  font-family: 'Virgil', 'Segoe Print', 'Bradley Hand', cursive;
+}

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

@@ -0,0 +1,6 @@
+import { IFlowAnnotationDraft } from './useFlowAnnotationDrawing';
+/** The shape under the pointer while it is drawn, in canvas coordinates so it pans and zooms along. */
+declare const FlowAnnotationDraftPreview: React.FC<{
+    draft: IFlowAnnotationDraft;
+}>;
+export default FlowAnnotationDraftPreview;

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

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ViewportPortal } from "@xyflow/react";
+import { flowAnnotationMarkerUrl, FlowAnnotationArrowMarker, FLOW_ANNOTATION_STROKE_CLASS } from "./FlowAnnotationNode.js";
+import { boxBetween, smoothStrokePath, strokeWidthOf } from "./flowAnnotations.js";
+const DRAFT_MARKER_ID = "umode-flow-annotation-draft-arrow";
+const FlowAnnotationDraftPreview = ({ draft }) => {
+  const { kind, start, current } = draft;
+  const box = boxBetween(start, current);
+  const shape = (() => {
+    if (kind === "rectangle")
+      return /* @__PURE__ */ jsx("rect", { x: box.position.x, y: box.position.y, width: box.size.width, height: box.size.height, rx: 4 });
+    if (kind === "ellipse")
+      return /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx: box.position.x + box.size.width / 2,
+          cy: box.position.y + box.size.height / 2,
+          rx: box.size.width / 2,
+          ry: box.size.height / 2
+        }
+      );
+    if (kind === "arrow")
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: start.x,
+          y1: start.y,
+          x2: current.x,
+          y2: current.y,
+          markerEnd: flowAnnotationMarkerUrl(DRAFT_MARKER_ID)
+        }
+      );
+    if (kind === "line") return /* @__PURE__ */ jsx("line", { x1: start.x, y1: start.y, x2: current.x, y2: current.y });
+    if (kind === "drawing") return /* @__PURE__ */ jsx("path", { d: smoothStrokePath(draft.points) });
+    return null;
+  })();
+  if (!shape) return null;
+  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": true,
+      width: 1,
+      height: 1,
+      fill: "none",
+      className: "pointer-events-none absolute left-0 top-0 overflow-visible",
+      children: [
+        /* @__PURE__ */ jsx(FlowAnnotationArrowMarker, { markerId: DRAFT_MARKER_ID, tone: draft.tone }),
+        /* @__PURE__ */ jsx(
+          "g",
+          {
+            className: FLOW_ANNOTATION_STROKE_CLASS[draft.tone],
+            strokeWidth: strokeWidthOf(draft),
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: shape
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  FlowAnnotationDraftPreview as default
+};
+//# sourceMappingURL=FlowAnnotationDraftPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowAnnotationDraftPreview.js","sources":["../../../../src/components/UI/Flow/FlowAnnotationDraftPreview.tsx"],"sourcesContent":["import { ViewportPortal } from '@xyflow/react';\n\nimport { FLOW_ANNOTATION_STROKE_CLASS, FlowAnnotationArrowMarker, flowAnnotationMarkerUrl } from './FlowAnnotationNode';\nimport { boxBetween, smoothStrokePath, strokeWidthOf } from './flowAnnotations';\nimport type { IFlowAnnotationDraft } from './useFlowAnnotationDrawing';\n\nconst DRAFT_MARKER_ID = 'umode-flow-annotation-draft-arrow';\n\n/** The shape under the pointer while it is drawn, in canvas coordinates so it pans and zooms along. */\nconst FlowAnnotationDraftPreview: React.FC<{ draft: IFlowAnnotationDraft }> = ({ draft }) => {\n  const { kind, start, current } = draft;\n  const box = boxBetween(start, current);\n\n  const shape = (() => {\n    if (kind === 'rectangle')\n      return <rect x={box.position.x} y={box.position.y} width={box.size.width} height={box.size.height} rx={4} />;\n    if (kind === 'ellipse')\n      return (\n        <ellipse\n          cx={box.position.x + box.size.width / 2}\n          cy={box.position.y + box.size.height / 2}\n          rx={box.size.width / 2}\n          ry={box.size.height / 2}\n        />\n      );\n    if (kind === 'arrow')\n      return (\n        <line\n          x1={start.x}\n          y1={start.y}\n          x2={current.x}\n          y2={current.y}\n          markerEnd={flowAnnotationMarkerUrl(DRAFT_MARKER_ID)}\n        />\n      );\n    if (kind === 'line') return <line x1={start.x} y1={start.y} x2={current.x} y2={current.y} />;\n    if (kind === 'drawing') return <path d={smoothStrokePath(draft.points)} />;\n    return null;\n  })();\n\n  if (!shape) return null;\n\n  return (\n    <ViewportPortal>\n      <svg\n        aria-hidden\n        width={1}\n        height={1}\n        fill=\"none\"\n        className=\"pointer-events-none absolute left-0 top-0 overflow-visible\"\n      >\n        <FlowAnnotationArrowMarker markerId={DRAFT_MARKER_ID} tone={draft.tone} />\n        <g\n          className={FLOW_ANNOTATION_STROKE_CLASS[draft.tone]}\n          strokeWidth={strokeWidthOf(draft)}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          {shape}\n        </g>\n      </svg>\n    </ViewportPortal>\n  );\n};\n\nexport default FlowAnnotationDraftPreview;\n"],"names":[],"mappings":";;;;AAMA,MAAM,kBAAkB;AAGxB,MAAM,6BAAwE,CAAC,EAAE,YAAY;AAC3F,QAAM,EAAE,MAAM,OAAO,QAAA,IAAY;AACjC,QAAM,MAAM,WAAW,OAAO,OAAO;AAErC,QAAM,SAAS,MAAM;AACnB,QAAI,SAAS;AACX,iCAAQ,QAAA,EAAK,GAAG,IAAI,SAAS,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI,KAAK,OAAO,QAAQ,IAAI,KAAK,QAAQ,IAAI,GAAG;AAC5G,QAAI,SAAS;AACX,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,IAAI,SAAS,IAAI,IAAI,KAAK,QAAQ;AAAA,UACtC,IAAI,IAAI,SAAS,IAAI,IAAI,KAAK,SAAS;AAAA,UACvC,IAAI,IAAI,KAAK,QAAQ;AAAA,UACrB,IAAI,IAAI,KAAK,SAAS;AAAA,QAAA;AAAA,MAAA;AAG5B,QAAI,SAAS;AACX,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM;AAAA,UACV,IAAI,MAAM;AAAA,UACV,IAAI,QAAQ;AAAA,UACZ,IAAI,QAAQ;AAAA,UACZ,WAAW,wBAAwB,eAAe;AAAA,QAAA;AAAA,MAAA;AAGxD,QAAI,SAAS,OAAQ,QAAO,oBAAC,QAAA,EAAK,IAAI,MAAM,GAAG,IAAI,MAAM,GAAG,IAAI,QAAQ,GAAG,IAAI,QAAQ,GAAG;AAC1F,QAAI,SAAS,UAAW,QAAO,oBAAC,UAAK,GAAG,iBAAiB,MAAM,MAAM,GAAG;AACxE,WAAO;AAAA,EACT,GAAA;AAEA,MAAI,CAAC,MAAO,QAAO;AAEnB,6BACG,gBAAA,EACC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,2BAAA,EAA0B,UAAU,iBAAiB,MAAM,MAAM,MAAM;AAAA,QACxE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,6BAA6B,MAAM,IAAI;AAAA,YAClD,aAAa,cAAc,KAAK;AAAA,YAChC,eAAc;AAAA,YACd,gBAAe;AAAA,YAEd,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -0,0 +1,34 @@
+import { Node, NodeProps } from '@xyflow/react';
+import { IFlowAnnotationGeometry } from './flowEditorStore';
+import { IFlowAnnotation, TFlowAnnotationStroke, TFlowAnnotationTone } from './flowTypes';
+/** Text ink: the tone's `-emphasis`, the variant validated for reading. */
+export declare const FLOW_ANNOTATION_TONE_CLASS: Record<TFlowAnnotationTone, string>;
+/** Strokes are graphics, not text: they take the tone's fill colour, validated at 3:1 for exactly that. */
+export declare const FLOW_ANNOTATION_STROKE_CLASS: Record<TFlowAnnotationTone, string>;
+export declare const FLOW_ANNOTATION_SWATCH_CLASS: Record<TFlowAnnotationTone, string>;
+export declare const FLOW_ANNOTATION_TEXT_SIZE_CLASS: Record<TFlowAnnotationStroke, string>;
+export declare const flowAnnotationMarkerUrl: (markerId: string) => string;
+/** The arrowhead, painted with the stroke colour of the arrow that uses it. */
+export declare const FlowAnnotationArrowMarker: React.FC<{
+    markerId: string;
+    tone: TFlowAnnotationTone;
+}>;
+export interface IFlowAnnotationNodeData extends Record<string, unknown> {
+    annotation: IFlowAnnotation;
+    readOnly: boolean;
+    editing: boolean;
+    placeholder: string;
+    onTextChange: (text: string) => void;
+    onEditStart: () => void;
+    onEditEnd: () => void;
+    onResizeStart: () => void;
+    onResize: (geometry: IFlowAnnotationGeometry) => void;
+}
+export type TFlowAnnotationNode = Node<IFlowAnnotationNodeData, 'flowAnnotation'>;
+/**
+ * One annotation on the canvas. Shapes only catch the pointer on their stroke, so a frame drawn
+ * around blocks never steals the click meant for what is inside it; once selected, the whole box
+ * can be dragged. Text is written in Virgil, the hand-drawn face of Excalidraw.
+ */
+declare const FlowAnnotationNode: React.FC<NodeProps<TFlowAnnotationNode>>;
+export default FlowAnnotationNode;

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;