@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { useReactFlow, Panel } from "@xyflow/react";
+const ControlButton = ({ icon, label, onClick, disabled }) => /* @__PURE__ */ jsx(ControlledTooltip, { content: label, placement: "right", children: /* @__PURE__ */ jsx(
+  ControlledButton,
+  {
+    "aria-label": label,
+    defaultHtmlButton: true,
+    onClick,
+    disabled,
+    className: "interactive flex size-8 items-center justify-center rounded-lg text-foreground-muted hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
+    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: 18, "aria-hidden": true })
+  }
+) });
+const FlowZoomControls = ({
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onLayout,
+  position = "top-left"
+}) => {
+  const { t } = useTranslation("ui");
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  return /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      position,
+      className: "flex flex-col gap-y-1 rounded-xl border border-border bg-surface p-1 shadow-sm",
+      children: [
+        /* @__PURE__ */ jsx(ControlButton, { icon: "add", label: t("flow.controls.zoomIn"), onClick: () => void zoomIn() }),
+        /* @__PURE__ */ jsx(ControlButton, { icon: "remove", label: t("flow.controls.zoomOut"), onClick: () => void zoomOut() }),
+        /* @__PURE__ */ jsx(
+          ControlButton,
+          {
+            icon: "fit_screen",
+            label: t("flow.controls.fitView"),
+            onClick: () => void fitView({ padding: 0.2 })
+          }
+        ),
+        onLayout && /* @__PURE__ */ jsx(ControlButton, { icon: "account_tree", label: t("flow.controls.layout"), onClick: onLayout }),
+        onUndo && /* @__PURE__ */ jsx(ControlButton, { icon: "undo", label: t("flow.controls.undo"), onClick: onUndo, disabled: !canUndo }),
+        onRedo && /* @__PURE__ */ jsx(ControlButton, { icon: "redo", label: t("flow.controls.redo"), onClick: onRedo, disabled: !canRedo })
+      ]
+    }
+  );
+};
+export {
+  FlowZoomControls as default
+};
+//# sourceMappingURL=FlowZoomControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowZoomControls.js","sources":["../../../../src/components/UI/Flow/FlowZoomControls.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { Panel, type PanelPosition, useReactFlow } from '@xyflow/react';\n\ninterface IFlowZoomControlsProps {\n  onUndo?: () => void;\n  onRedo?: () => void;\n  canUndo?: boolean;\n  canRedo?: boolean;\n  onLayout?: () => void;\n  position?: PanelPosition;\n}\n\ninterface IControlButtonProps {\n  icon: SymbolCodepoints;\n  label: string;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nconst ControlButton: React.FC<IControlButtonProps> = ({ icon, label, onClick, disabled }) => (\n  <ControlledTooltip content={label} placement=\"right\">\n    <ControlledButton\n      aria-label={label}\n      defaultHtmlButton\n      onClick={onClick}\n      disabled={disabled}\n      className=\"interactive flex size-8 items-center justify-center rounded-lg text-foreground-muted hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\"\n    >\n      <MaterialSymbol icon={icon} size={18} aria-hidden />\n    </ControlledButton>\n  </ControlledTooltip>\n);\n\n/** Zoom, fit and history controls drawn with the library's own buttons. */\nconst FlowZoomControls: React.FC<IFlowZoomControlsProps> = ({\n  onUndo,\n  onRedo,\n  canUndo,\n  canRedo,\n  onLayout,\n  position = 'top-left',\n}) => {\n  const { t } = useTranslation('ui');\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  return (\n    <Panel\n      position={position}\n      className=\"flex flex-col gap-y-1 rounded-xl border border-border bg-surface p-1 shadow-sm\"\n    >\n      <ControlButton icon=\"add\" label={t('flow.controls.zoomIn')} onClick={() => void zoomIn()} />\n      <ControlButton icon=\"remove\" label={t('flow.controls.zoomOut')} onClick={() => void zoomOut()} />\n      <ControlButton\n        icon=\"fit_screen\"\n        label={t('flow.controls.fitView')}\n        onClick={() => void fitView({ padding: 0.2 })}\n      />\n      {onLayout && <ControlButton icon=\"account_tree\" label={t('flow.controls.layout')} onClick={onLayout} />}\n      {onUndo && <ControlButton icon=\"undo\" label={t('flow.controls.undo')} onClick={onUndo} disabled={!canUndo} />}\n      {onRedo && <ControlButton icon=\"redo\" label={t('flow.controls.redo')} onClick={onRedo} disabled={!canRedo} />}\n    </Panel>\n  );\n};\n\nexport default FlowZoomControls;\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,gBAA+C,CAAC,EAAE,MAAM,OAAO,SAAS,SAAA,MAC5E,oBAAC,mBAAA,EAAkB,SAAS,OAAO,WAAU,SAC3C,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,cAAY;AAAA,IACZ,mBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,WAAU;AAAA,IAEV,8BAAC,gBAAA,EAAe,MAAY,MAAM,IAAI,eAAW,KAAA,CAAC;AAAA,EAAA;AACpD,GACF;AAIF,MAAM,mBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,QAAQ,SAAS,QAAA,IAAY,aAAA;AAErC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,eAAA,EAAc,MAAK,OAAM,OAAO,EAAE,sBAAsB,GAAG,SAAS,MAAM,KAAK,OAAA,EAAO,CAAG;AAAA,QAC1F,oBAAC,eAAA,EAAc,MAAK,UAAS,OAAO,EAAE,uBAAuB,GAAG,SAAS,MAAM,KAAK,QAAA,EAAQ,CAAG;AAAA,QAC/F;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,EAAE,uBAAuB;AAAA,YAChC,SAAS,MAAM,KAAK,QAAQ,EAAE,SAAS,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAE7C,YAAY,oBAAC,eAAA,EAAc,MAAK,gBAAe,OAAO,EAAE,sBAAsB,GAAG,SAAS,SAAA,CAAU;AAAA,QACpG,UAAU,oBAAC,eAAA,EAAc,MAAK,QAAO,OAAO,EAAE,oBAAoB,GAAG,SAAS,QAAQ,UAAU,CAAC,QAAA,CAAS;AAAA,QAC1G,UAAU,oBAAC,eAAA,EAAc,MAAK,QAAO,OAAO,EAAE,oBAAoB,GAAG,SAAS,QAAQ,UAAU,CAAC,QAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjH;"}

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

@@ -0,0 +1,38 @@
+import { IFlowAnnotation, IFlowPosition, IFlowSize, TFlowAnnotationKind, TFlowAnnotationStroke, TFlowAnnotationTone } from './flowTypes';
+export declare const FLOW_ANNOTATION_KINDS: Array<TFlowAnnotationKind>;
+export declare const FLOW_ANNOTATION_TONES: Array<TFlowAnnotationTone>;
+export declare const FLOW_ANNOTATION_STROKES: Array<TFlowAnnotationStroke>;
+export declare const FLOW_ANNOTATION_STROKE_WIDTH: Record<TFlowAnnotationStroke, number>;
+/** A box never collapses to nothing: a zero-wide arrow or a dot still has to be grabbed. */
+export declare const FLOW_ANNOTATION_MIN_SIZE = 8;
+/** Puts the first line of a new note on the point that was clicked, not below it. */
+export declare const FLOW_TEXT_CARET_OFFSET = 14;
+/** Keeps a long scribble from bloating the saved flow. */
+export declare const FLOW_DRAWING_MAX_POINTS = 2000;
+export declare const strokeWidthOf: (annotation: Pick<IFlowAnnotation, "stroke">) => number;
+/** The number a new step takes: one past the highest on the canvas. */
+export declare const nextFlowStepNumber: (annotations: Array<IFlowAnnotation>) => number;
+/**
+ * A freehand stroke as a smooth path: each recorded point becomes the control of a curve through the
+ * midpoints, which takes the jitter of the pointer out without moving the stroke.
+ */
+export declare const smoothStrokePath: (points: Array<IFlowPosition>) => string;
+/** Coerces what a host stored: an entry the canvas cannot draw is dropped, never rendered half-broken. */
+export declare const normalizeFlowAnnotations: (annotations: unknown) => Array<IFlowAnnotation>;
+/**
+ * Turns points in canvas coordinates into an annotation box: its position is the top-left corner
+ * (padded so the stroke is not clipped) and the points become relative to it.
+ */
+export declare const boxAroundPoints: (points: Array<IFlowPosition>, padding: number) => {
+    position: IFlowPosition;
+    size: IFlowSize;
+    points: Array<IFlowPosition>;
+};
+/** A box spanning two corners dragged in any direction. */
+export declare const boxBetween: (start: IFlowPosition, end: IFlowPosition) => {
+    position: IFlowPosition;
+    size: IFlowSize;
+};
+/** Scales a stroke with its box when the box is resized. */
+export declare const scaleAnnotationPoints: (points: Array<IFlowPosition> | undefined, from: IFlowSize, to: IFlowSize) => Array<IFlowPosition> | undefined;
+export declare const cloneFlowAnnotations: (annotations: Array<IFlowAnnotation>, offset: number) => Array<IFlowAnnotation>;

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

@@ -0,0 +1,123 @@
+import { generateUUID } from "../../../helpers/utilityHelpers.js";
+const FLOW_ANNOTATION_KINDS = [
+  "text",
+  "rectangle",
+  "ellipse",
+  "line",
+  "arrow",
+  "step",
+  "drawing"
+];
+const FLOW_ANNOTATION_TONES = [
+  "danger",
+  "warning",
+  "success",
+  "info",
+  "brand",
+  "neutral"
+];
+const FLOW_ANNOTATION_STROKES = ["thin", "medium", "thick"];
+const FLOW_ANNOTATION_STROKE_WIDTH = {
+  thin: 2,
+  medium: 3.5,
+  thick: 6
+};
+const FLOW_ANNOTATION_MIN_SIZE = 8;
+const FLOW_TEXT_CARET_OFFSET = 14;
+const FLOW_DRAWING_MAX_POINTS = 2e3;
+const isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+const isPoint = (value) => isFiniteNumber(value?.x) && isFiniteNumber(value?.y);
+const strokeWidthOf = (annotation) => FLOW_ANNOTATION_STROKE_WIDTH[annotation.stroke ?? "medium"] ?? FLOW_ANNOTATION_STROKE_WIDTH.medium;
+const nextFlowStepNumber = (annotations) => annotations.reduce((highest, annotation) => Math.max(highest, annotation.step ?? 0), 0) + 1;
+const smoothStrokePath = (points) => {
+  const [first, ...rest] = points;
+  if (!first) return "";
+  if (rest.length === 0) return `M ${first.x} ${first.y} l 0 0`;
+  const curves = rest.map((point, index) => {
+    const previous = points[index] ?? first;
+    return `Q ${previous.x} ${previous.y} ${(previous.x + point.x) / 2} ${(previous.y + point.y) / 2}`;
+  });
+  const last = rest[rest.length - 1] ?? first;
+  return `M ${first.x} ${first.y} ${curves.join(" ")} L ${last.x} ${last.y}`;
+};
+const normalizeFlowAnnotations = (annotations) => {
+  if (!Array.isArray(annotations)) return [];
+  return annotations.flatMap((candidate) => {
+    const annotation = candidate;
+    if (!annotation || typeof annotation.annotationId !== "string" || !annotation.annotationId) return [];
+    if (!FLOW_ANNOTATION_KINDS.includes(annotation.kind)) return [];
+    if (!isPoint(annotation.position)) return [];
+    const width = isFiniteNumber(annotation.size?.width) ? annotation.size.width : FLOW_ANNOTATION_MIN_SIZE;
+    const height = isFiniteNumber(annotation.size?.height) ? annotation.size.height : FLOW_ANNOTATION_MIN_SIZE;
+    const points = Array.isArray(annotation.points) ? annotation.points.filter(isPoint) : void 0;
+    const needsTwoPoints = annotation.kind === "arrow" || annotation.kind === "line";
+    if (needsTwoPoints && (points?.length ?? 0) < 2 || annotation.kind === "drawing" && !points?.length) return [];
+    return [
+      {
+        annotationId: annotation.annotationId,
+        kind: annotation.kind,
+        position: { x: annotation.position.x, y: annotation.position.y },
+        size: {
+          width: Math.max(width, FLOW_ANNOTATION_MIN_SIZE),
+          height: Math.max(height, FLOW_ANNOTATION_MIN_SIZE)
+        },
+        tone: FLOW_ANNOTATION_TONES.includes(annotation.tone) ? annotation.tone : "neutral",
+        ...FLOW_ANNOTATION_STROKES.includes(annotation.stroke) ? { stroke: annotation.stroke } : {},
+        ...typeof annotation.text === "string" ? { text: annotation.text } : {},
+        ...isFiniteNumber(annotation.step) ? { step: annotation.step } : {},
+        ...points ? { points } : {}
+      }
+    ];
+  });
+};
+const boxAroundPoints = (points, padding) => {
+  const xs = points.map((point) => point.x);
+  const ys = points.map((point) => point.y);
+  const left = Math.min(...xs) - padding;
+  const top = Math.min(...ys) - padding;
+  return {
+    position: { x: left, y: top },
+    size: {
+      width: Math.max(Math.max(...xs) - left + padding, FLOW_ANNOTATION_MIN_SIZE),
+      height: Math.max(Math.max(...ys) - top + padding, FLOW_ANNOTATION_MIN_SIZE)
+    },
+    points: points.map((point) => ({ x: point.x - left, y: point.y - top }))
+  };
+};
+const boxBetween = (start, end) => ({
+  position: { x: Math.min(start.x, end.x), y: Math.min(start.y, end.y) },
+  size: {
+    width: Math.max(Math.abs(end.x - start.x), FLOW_ANNOTATION_MIN_SIZE),
+    height: Math.max(Math.abs(end.y - start.y), FLOW_ANNOTATION_MIN_SIZE)
+  }
+});
+const scaleAnnotationPoints = (points, from, to) => {
+  if (!points) return void 0;
+  const scaleX = from.width > 0 ? to.width / from.width : 1;
+  const scaleY = from.height > 0 ? to.height / from.height : 1;
+  return points.map((point) => ({ x: point.x * scaleX, y: point.y * scaleY }));
+};
+const cloneFlowAnnotations = (annotations, offset) => annotations.map((annotation) => ({
+  ...annotation,
+  annotationId: generateUUID(),
+  position: { x: annotation.position.x + offset, y: annotation.position.y + offset },
+  points: annotation.points?.map((point) => ({ ...point }))
+}));
+export {
+  FLOW_ANNOTATION_KINDS,
+  FLOW_ANNOTATION_MIN_SIZE,
+  FLOW_ANNOTATION_STROKES,
+  FLOW_ANNOTATION_STROKE_WIDTH,
+  FLOW_ANNOTATION_TONES,
+  FLOW_DRAWING_MAX_POINTS,
+  FLOW_TEXT_CARET_OFFSET,
+  boxAroundPoints,
+  boxBetween,
+  cloneFlowAnnotations,
+  nextFlowStepNumber,
+  normalizeFlowAnnotations,
+  scaleAnnotationPoints,
+  smoothStrokePath,
+  strokeWidthOf
+};
+//# sourceMappingURL=flowAnnotations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flowAnnotations.js","sources":["../../../../src/components/UI/Flow/flowAnnotations.ts"],"sourcesContent":["import { generateUUID } from '@/helpers/utilityHelpers';\n\nimport type {\n  IFlowAnnotation,\n  IFlowPosition,\n  IFlowSize,\n  TFlowAnnotationKind,\n  TFlowAnnotationStroke,\n  TFlowAnnotationTone,\n} from './flowTypes';\n\nexport const FLOW_ANNOTATION_KINDS: Array<TFlowAnnotationKind> = [\n  'text',\n  'rectangle',\n  'ellipse',\n  'line',\n  'arrow',\n  'step',\n  'drawing',\n];\n\nexport const FLOW_ANNOTATION_TONES: Array<TFlowAnnotationTone> = [\n  'danger',\n  'warning',\n  'success',\n  'info',\n  'brand',\n  'neutral',\n];\n\nexport const FLOW_ANNOTATION_STROKES: Array<TFlowAnnotationStroke> = ['thin', 'medium', 'thick'];\n\nexport const FLOW_ANNOTATION_STROKE_WIDTH: Record<TFlowAnnotationStroke, number> = {\n  thin: 2,\n  medium: 3.5,\n  thick: 6,\n};\n\n/** A box never collapses to nothing: a zero-wide arrow or a dot still has to be grabbed. */\nexport const FLOW_ANNOTATION_MIN_SIZE = 8;\n/** Puts the first line of a new note on the point that was clicked, not below it. */\nexport const FLOW_TEXT_CARET_OFFSET = 14;\n/** Keeps a long scribble from bloating the saved flow. */\nexport const FLOW_DRAWING_MAX_POINTS = 2000;\n\nconst isFiniteNumber = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);\n\nconst isPoint = (value: unknown): value is IFlowPosition =>\n  isFiniteNumber((value as IFlowPosition | undefined)?.x) && isFiniteNumber((value as IFlowPosition | undefined)?.y);\n\nexport const strokeWidthOf = (annotation: Pick<IFlowAnnotation, 'stroke'>): number =>\n  FLOW_ANNOTATION_STROKE_WIDTH[annotation.stroke ?? 'medium'] ?? FLOW_ANNOTATION_STROKE_WIDTH.medium;\n\n/** The number a new step takes: one past the highest on the canvas. */\nexport const nextFlowStepNumber = (annotations: Array<IFlowAnnotation>): number =>\n  annotations.reduce((highest, annotation) => Math.max(highest, annotation.step ?? 0), 0) + 1;\n\n/**\n * A freehand stroke as a smooth path: each recorded point becomes the control of a curve through the\n * midpoints, which takes the jitter of the pointer out without moving the stroke.\n */\nexport const smoothStrokePath = (points: Array<IFlowPosition>): string => {\n  const [first, ...rest] = points;\n  if (!first) return '';\n  if (rest.length === 0) return `M ${first.x} ${first.y} l 0 0`;\n  const curves = rest.map((point, index) => {\n    const previous = points[index] ?? first;\n    return `Q ${previous.x} ${previous.y} ${(previous.x + point.x) / 2} ${(previous.y + point.y) / 2}`;\n  });\n  const last = rest[rest.length - 1] ?? first;\n  return `M ${first.x} ${first.y} ${curves.join(' ')} L ${last.x} ${last.y}`;\n};\n\n/** Coerces what a host stored: an entry the canvas cannot draw is dropped, never rendered half-broken. */\nexport const normalizeFlowAnnotations = (annotations: unknown): Array<IFlowAnnotation> => {\n  if (!Array.isArray(annotations)) return [];\n  return annotations.flatMap((candidate): Array<IFlowAnnotation> => {\n    const annotation = candidate as Partial<IFlowAnnotation> | null;\n    if (!annotation || typeof annotation.annotationId !== 'string' || !annotation.annotationId) return [];\n    if (!FLOW_ANNOTATION_KINDS.includes(annotation.kind as TFlowAnnotationKind)) return [];\n    if (!isPoint(annotation.position)) return [];\n    const width = isFiniteNumber(annotation.size?.width) ? annotation.size.width : FLOW_ANNOTATION_MIN_SIZE;\n    const height = isFiniteNumber(annotation.size?.height) ? annotation.size.height : FLOW_ANNOTATION_MIN_SIZE;\n    const points = Array.isArray(annotation.points) ? annotation.points.filter(isPoint) : undefined;\n    const needsTwoPoints = annotation.kind === 'arrow' || annotation.kind === 'line';\n    if ((needsTwoPoints && (points?.length ?? 0) < 2) || (annotation.kind === 'drawing' && !points?.length)) return [];\n    return [\n      {\n        annotationId: annotation.annotationId,\n        kind: annotation.kind as TFlowAnnotationKind,\n        position: { x: annotation.position.x, y: annotation.position.y },\n        size: {\n          width: Math.max(width, FLOW_ANNOTATION_MIN_SIZE),\n          height: Math.max(height, FLOW_ANNOTATION_MIN_SIZE),\n        },\n        tone: FLOW_ANNOTATION_TONES.includes(annotation.tone as TFlowAnnotationTone)\n          ? (annotation.tone as TFlowAnnotationTone)\n          : 'neutral',\n        ...(FLOW_ANNOTATION_STROKES.includes(annotation.stroke as TFlowAnnotationStroke)\n          ? { stroke: annotation.stroke }\n          : {}),\n        ...(typeof annotation.text === 'string' ? { text: annotation.text } : {}),\n        ...(isFiniteNumber(annotation.step) ? { step: annotation.step } : {}),\n        ...(points ? { points } : {}),\n      },\n    ];\n  });\n};\n\n/**\n * Turns points in canvas coordinates into an annotation box: its position is the top-left corner\n * (padded so the stroke is not clipped) and the points become relative to it.\n */\nexport const boxAroundPoints = (\n  points: Array<IFlowPosition>,\n  padding: number,\n): { position: IFlowPosition; size: IFlowSize; points: Array<IFlowPosition> } => {\n  const xs = points.map((point) => point.x);\n  const ys = points.map((point) => point.y);\n  const left = Math.min(...xs) - padding;\n  const top = Math.min(...ys) - padding;\n  return {\n    position: { x: left, y: top },\n    size: {\n      width: Math.max(Math.max(...xs) - left + padding, FLOW_ANNOTATION_MIN_SIZE),\n      height: Math.max(Math.max(...ys) - top + padding, FLOW_ANNOTATION_MIN_SIZE),\n    },\n    points: points.map((point) => ({ x: point.x - left, y: point.y - top })),\n  };\n};\n\n/** A box spanning two corners dragged in any direction. */\nexport const boxBetween = (start: IFlowPosition, end: IFlowPosition): { position: IFlowPosition; size: IFlowSize } => ({\n  position: { x: Math.min(start.x, end.x), y: Math.min(start.y, end.y) },\n  size: {\n    width: Math.max(Math.abs(end.x - start.x), FLOW_ANNOTATION_MIN_SIZE),\n    height: Math.max(Math.abs(end.y - start.y), FLOW_ANNOTATION_MIN_SIZE),\n  },\n});\n\n/** Scales a stroke with its box when the box is resized. */\nexport const scaleAnnotationPoints = (\n  points: Array<IFlowPosition> | undefined,\n  from: IFlowSize,\n  to: IFlowSize,\n): Array<IFlowPosition> | undefined => {\n  if (!points) return undefined;\n  const scaleX = from.width > 0 ? to.width / from.width : 1;\n  const scaleY = from.height > 0 ? to.height / from.height : 1;\n  return points.map((point) => ({ x: point.x * scaleX, y: point.y * scaleY }));\n};\n\nexport const cloneFlowAnnotations = (annotations: Array<IFlowAnnotation>, offset: number): Array<IFlowAnnotation> =>\n  annotations.map((annotation) => ({\n    ...annotation,\n    annotationId: generateUUID(),\n    position: { x: annotation.position.x + offset, y: annotation.position.y + offset },\n    points: annotation.points?.map((point) => ({ ...point })),\n  }));\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { IFlowBlockDefinition, TFlowPortId } from './flowTypes';
+export interface IFlowBlockRegistry {
+    list: Array<IFlowBlockDefinition>;
+    get: (type: string) => IFlowBlockDefinition | undefined;
+}
+/**
+ * Erases the config type so blocks with different configs live in one registry. The
+ * canvas only hands each block the config it created, so the cast never crosses blocks.
+ */
+export declare const defineFlowBlock: <TConfig>(definition: IFlowBlockDefinition<TConfig>) => IFlowBlockDefinition;
+export declare const createFlowBlockRegistry: (definitions: Array<IFlowBlockDefinition>) => IFlowBlockRegistry;
+export declare const flowOutputsOf: (definition: IFlowBlockDefinition | undefined, config: unknown) => Array<TFlowPortId>;

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

@@ -0,0 +1,20 @@
+const defineFlowBlock = (definition) => definition;
+const createFlowBlockRegistry = (definitions) => {
+  const safeDefinitions = Array.isArray(definitions) ? definitions : [];
+  const byType = new Map(safeDefinitions.map((definition) => [definition.type, definition]));
+  return {
+    list: safeDefinitions,
+    get: (type) => byType.get(type)
+  };
+};
+const flowOutputsOf = (definition, config) => {
+  if (!definition) return [];
+  const resolved = definition.resolveOutputs?.(config);
+  return Array.isArray(resolved) ? resolved : definition.outputs;
+};
+export {
+  createFlowBlockRegistry,
+  defineFlowBlock,
+  flowOutputsOf
+};
+//# sourceMappingURL=flowBlockRegistry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flowBlockRegistry.js","sources":["../../../../src/components/UI/Flow/flowBlockRegistry.ts"],"sourcesContent":["import type { IFlowBlockDefinition, TFlowPortId } from './flowTypes';\n\nexport interface IFlowBlockRegistry {\n  list: Array<IFlowBlockDefinition>;\n  get: (type: string) => IFlowBlockDefinition | undefined;\n}\n\n/**\n * Erases the config type so blocks with different configs live in one registry. The\n * canvas only hands each block the config it created, so the cast never crosses blocks.\n */\nexport const defineFlowBlock = <TConfig>(definition: IFlowBlockDefinition<TConfig>): IFlowBlockDefinition =>\n  definition as unknown as IFlowBlockDefinition;\n\nexport const createFlowBlockRegistry = (definitions: Array<IFlowBlockDefinition>): IFlowBlockRegistry => {\n  const safeDefinitions = Array.isArray(definitions) ? definitions : [];\n  const byType = new Map(safeDefinitions.map((definition) => [definition.type, definition]));\n\n  return {\n    list: safeDefinitions,\n    get: (type) => byType.get(type),\n  };\n};\n\nexport const flowOutputsOf = (definition: IFlowBlockDefinition | undefined, config: unknown): Array<TFlowPortId> => {\n  if (!definition) return [];\n  const resolved = definition.resolveOutputs?.(config);\n  return Array.isArray(resolved) ? resolved : definition.outputs;\n};\n"],"names":[],"mappings":"AAWO,MAAM,kBAAkB,CAAU,eACvC;AAEK,MAAM,0BAA0B,CAAC,gBAAiE;AACvG,QAAM,kBAAkB,MAAM,QAAQ,WAAW,IAAI,cAAc,CAAA;AACnE,QAAM,SAAS,IAAI,IAAI,gBAAgB,IAAI,CAAC,eAAe,CAAC,WAAW,MAAM,UAAU,CAAC,CAAC;AAEzF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK,CAAC,SAAS,OAAO,IAAI,IAAI;AAAA,EAAA;AAElC;AAEO,MAAM,gBAAgB,CAAC,YAA8C,WAAwC;AAClH,MAAI,CAAC,WAAY,QAAO,CAAA;AACxB,QAAM,WAAW,WAAW,iBAAiB,MAAM;AACnD,SAAO,MAAM,QAAQ,QAAQ,IAAI,WAAW,WAAW;AACzD;"}

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

@@ -0,0 +1,73 @@
+import { StoreApi } from 'zustand/vanilla';
+import { IFlowBlockRegistry } from './flowBlockRegistry';
+import { IFlowAnnotation, IFlowGraph, IFlowNode, IFlowPosition, IFlowSize, TFlowPortId } from './flowTypes';
+export interface IFlowSelection {
+    nodeIds?: Array<string>;
+    edgeIds?: Array<string>;
+    annotationIds?: Array<string>;
+}
+export interface IFlowAnnotationGeometry {
+    position?: IFlowPosition;
+    size?: IFlowSize;
+    points?: Array<IFlowPosition>;
+}
+export interface IFlowEditorState {
+    graph: IFlowGraph;
+    selectedNodeIds: Array<string>;
+    selectedEdgeIds: Array<string>;
+    selectedAnnotationIds: Array<string>;
+    past: Array<IFlowGraph>;
+    future: Array<IFlowGraph>;
+    clipboard: Array<IFlowNode>;
+    annotationClipboard: Array<IFlowAnnotation>;
+    isDirty: boolean;
+    /** A marquee is being drawn: the selection is still changing, so nothing should react to it yet. */
+    isAreaSelecting: boolean;
+    replaceGraph: (graph: IFlowGraph, options?: {
+        keepHistory?: boolean;
+    }) => void;
+    markClean: () => void;
+    /** Snapshot before a gesture that changes the graph in many small steps (a drag). */
+    recordHistory: () => void;
+    addNode: (type: string) => string | null;
+    /** Adds a block right of `sourceNodeId` and wires `sourcePort` to it in one undo step. */
+    addNodeFromPort: (type: string, sourceNodeId: string, sourcePort: TFlowPortId) => string | null;
+    /**
+     * Puts a block in the middle of an edge: the edge now ends at the new block, whose first output
+     * leads to the old target. The old target and everything after it move one column right, so the
+     * new block takes the place it left. One undo step.
+     */
+    insertNodeOnEdge: (type: string, edgeId: string) => string | null;
+    updateNodeConfig: (nodeId: string, config: unknown) => void;
+    updateNodeLabel: (nodeId: string, label: string) => void;
+    moveNodes: (positions: Record<string, IFlowPosition>) => void;
+    /** Adds an annotation and selects it, in one undo step. */
+    addAnnotation: (annotation: Omit<IFlowAnnotation, 'annotationId'>) => string;
+    /** Text and colour changes. Typing in the same note within a second is one undo step. */
+    updateAnnotations: (annotationIds: Array<string>, patch: Partial<Pick<IFlowAnnotation, 'text' | 'tone' | 'stroke'>>) => void;
+    /** Live geometry while dragging or resizing: no undo step, like `moveNodes`. */
+    setAnnotationGeometry: (geometry: Record<string, IFlowAnnotationGeometry>) => void;
+    removeAnnotations: (annotationIds: Array<string>) => void;
+    connect: (source: string, sourcePort: TFlowPortId, target: string) => boolean;
+    removeSelected: () => void;
+    duplicateSelected: () => void;
+    copySelected: () => void;
+    paste: () => void;
+    setSelection: (selection: IFlowSelection) => void;
+    setAreaSelecting: (active: boolean) => void;
+    undo: () => void;
+    redo: () => void;
+    /** The host may rebuild its registry (labels after a language switch); gestures always read the latest. */
+    setRegistry: (registry: IFlowBlockRegistry) => void;
+}
+export type TFlowEditorStore = StoreApi<IFlowEditorState>;
+/**
+ * One store per editor instance (two canvases on a page never share state). The graph
+ * is the source of truth; the canvas only renders it and reports gestures back.
+ */
+export declare const createFlowEditorStore: (initialGraph: IFlowGraph, registry: IFlowBlockRegistry) => TFlowEditorStore;
+/**
+ * The block the side panel edits: exactly one block selected, nothing else, and no marquee still
+ * being drawn. `null` otherwise. Hosts that dock the panel themselves gate it on this.
+ */
+export declare const selectFlowInspectedNodeId: (state: IFlowEditorState) => string | null;