@umodeapporg/ui 0.30.1 → 0.31.1

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

@@ -1 +1 @@
-{"version":3,"file":"FlowInspector.js","sources":["../../../../src/components/UI/Flow/FlowInspector.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledInput from '@/components/Form/ControlledInput';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nimport { useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from './FlowEditorProvider';\nimport { isFlowNodeRemovable } from './flowGraph';\nimport type { IFlowIssue } from './flowTypes';\nimport { useFlowLabels } from './useFlowLabels';\n\ninterface IFlowInspectorProps {\n  issues?: Array<IFlowIssue>;\n  readOnly?: boolean;\n  /** Renders nothing while no block is selected, instead of the empty state. */\n  hideWhenEmpty?: boolean;\n  className?: string;\n}\n\n/** The side panel of the selected block: its name, its own settings panel and its issues. */\nconst FlowInspector: React.FC<IFlowInspectorProps> = ({\n  issues = [],\n  readOnly = false,\n  hideWhenEmpty = false,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n  const registry = useFlowBlockRegistry();\n  const store = useFlowEditorStore();\n  const selectedNodeIds = useFlowEditor((state) => state.selectedNodeIds);\n  const selectedNode = useFlowEditor((state) =>\n    state.selectedNodeIds.length === 1\n      ? state.graph.nodes.find((node) => node.nodeId === state.selectedNodeIds[0])\n      : undefined,\n  );\n\n  const shellClass = mergeClasses(\n    'flex h-full min-h-0 flex-col gap-y-3 rounded-xl border border-border bg-surface p-4',\n    className,\n  );\n\n  if (!selectedNode || selectedNodeIds.length !== 1) {\n    if (hideWhenEmpty) return null;\n    return (\n      <aside className={shellClass} aria-label={t('flow.inspector.title')}>\n        <NoDataFound size=\"sm\" variant=\"waiting\" message={t('flow.inspector.empty')} />\n      </aside>\n    );\n  }\n\n  const definition = registry.get(selectedNode.type);\n  const nodeIssues = (Array.isArray(issues) ? issues : []).filter((issue) => issue.nodeId === selectedNode.nodeId);\n  const ConfigPanel = definition?.ConfigPanel;\n  const canDuplicate = definition?.category !== 'trigger';\n  const canRemove = isFlowNodeRemovable(selectedNode, registry);\n\n  return (\n    <aside className={shellClass} aria-label={t('flow.inspector.title')}>\n      <div className=\"flex items-center gap-x-2\">\n        <span className=\"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground-muted\">\n          <MaterialSymbol\n            icon={definition?.resolveIcon?.(selectedNode.config) ?? definition?.icon ?? 'help'}\n            size={18}\n            aria-hidden\n          />\n        </span>\n        <div className=\"flex min-w-0 flex-col\">\n          {definition && (\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {labels.categories[definition.category]}\n            </span>\n          )}\n          <span className=\"truncate text-sm font-semibold text-foreground\">\n            {definition?.resolveLabel?.(selectedNode.config) ?? definition?.label ?? selectedNode.type}\n          </span>\n        </div>\n        <ControlledTooltip content={t('flow.inspector.close')} placement=\"left\">\n          <ControlledButton\n            aria-label={t('flow.inspector.close')}\n            defaultHtmlButton\n            onClick={() => store.getState().setSelection({ nodeIds: [], edgeIds: [] })}\n            className=\"interactive ml-auto flex size-8 shrink-0 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\"\n          >\n            <MaterialSymbol icon=\"close\" size={18} aria-hidden />\n          </ControlledButton>\n        </ControlledTooltip>\n      </div>\n\n      <ControlledInput\n        label={t('flow.inspector.label')}\n        value={selectedNode.label ?? ''}\n        disabled={readOnly}\n        onChange={(event) => store.getState().updateNodeLabel(selectedNode.nodeId, event.target.value)}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col gap-y-3 overflow-y-auto\">\n        {ConfigPanel ? (\n          <ConfigPanel\n            config={selectedNode.config}\n            readOnly={readOnly}\n            onChange={(next) => store.getState().updateNodeConfig(selectedNode.nodeId, next)}\n          />\n        ) : (\n          <NoDataFound compact variant=\"error\" message={t('flow.inspector.unknownBlock')} />\n        )}\n\n        {nodeIssues.length > 0 && (\n          <ul className=\"flex flex-col gap-y-1\">\n            {nodeIssues.map((issue) => (\n              <li key={`${issue.code}|${issue.edgeId ?? ''}`} className=\"flex items-start gap-x-2\">\n                <MaterialSymbol\n                  icon={issue.severity === 'error' ? 'error' : 'warning'}\n                  size={16}\n                  className={issue.severity === 'error' ? 'text-danger-emphasis' : 'text-warning-emphasis'}\n                  aria-hidden\n                />\n                <span className=\"text-xs text-foreground-muted\">{labels.issueMessage(issue)}</span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n\n      {!readOnly && (canDuplicate || canRemove) && (\n        <div className=\"flex gap-x-2\">\n          {canDuplicate && (\n            <ControlledButton\n              size=\"sm\"\n              variant=\"outlined\"\n              tone=\"neutral\"\n              className=\"normal-case\"\n              onClick={() => store.getState().duplicateSelected()}\n            >\n              <MaterialSymbol icon=\"content_copy\" size={16} aria-hidden />\n              {t('flow.inspector.duplicate')}\n            </ControlledButton>\n          )}\n          {canRemove && (\n            <ControlledButton\n              size=\"sm\"\n              variant=\"outlined\"\n              tone=\"danger\"\n              className=\"normal-case\"\n              onClick={() => store.getState().removeSelected()}\n            >\n              <MaterialSymbol icon=\"delete\" size={16} aria-hidden />\n              {t('flow.inspector.delete')}\n            </ControlledButton>\n          )}\n        </div>\n      )}\n    </aside>\n  );\n};\n\nexport default FlowInspector;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FlowInspector.js","sources":["../../../../src/components/UI/Flow/FlowInspector.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledInput from '@/components/Form/ControlledInput';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nimport { useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from './FlowEditorProvider';\nimport { selectFlowInspectedNodeId } from './flowEditorStore';\nimport { isFlowNodeRemovable } from './flowGraph';\nimport type { IFlowIssue } from './flowTypes';\nimport { useFlowLabels } from './useFlowLabels';\n\ninterface IFlowInspectorProps {\n  issues?: Array<IFlowIssue>;\n  readOnly?: boolean;\n  /** Renders nothing while no block is selected, instead of the empty state. */\n  hideWhenEmpty?: boolean;\n  className?: string;\n}\n\n/** The side panel of the selected block: its name, its own settings panel and its issues. */\nconst FlowInspector: React.FC<IFlowInspectorProps> = ({\n  issues = [],\n  readOnly = false,\n  hideWhenEmpty = false,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n  const registry = useFlowBlockRegistry();\n  const store = useFlowEditorStore();\n  const selectedNode = useFlowEditor((state) => {\n    const inspectedNodeId = selectFlowInspectedNodeId(state);\n    return inspectedNodeId ? state.graph.nodes.find((node) => node.nodeId === inspectedNodeId) : undefined;\n  });\n\n  const shellClass = mergeClasses(\n    'flex h-full min-h-0 flex-col gap-y-3 rounded-xl border border-border bg-surface p-4',\n    className,\n  );\n\n  if (!selectedNode) {\n    if (hideWhenEmpty) return null;\n    return (\n      <aside className={shellClass} aria-label={t('flow.inspector.title')}>\n        <NoDataFound size=\"sm\" variant=\"waiting\" message={t('flow.inspector.empty')} />\n      </aside>\n    );\n  }\n\n  const definition = registry.get(selectedNode.type);\n  const nodeIssues = (Array.isArray(issues) ? issues : []).filter((issue) => issue.nodeId === selectedNode.nodeId);\n  const ConfigPanel = definition?.ConfigPanel;\n  const canDuplicate = definition?.category !== 'trigger';\n  const canRemove = isFlowNodeRemovable(selectedNode, registry);\n\n  return (\n    <aside className={shellClass} aria-label={t('flow.inspector.title')}>\n      <div className=\"flex items-center gap-x-2\">\n        <span className=\"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground-muted\">\n          <MaterialSymbol\n            icon={definition?.resolveIcon?.(selectedNode.config) ?? definition?.icon ?? 'help'}\n            size={18}\n            aria-hidden\n          />\n        </span>\n        <div className=\"flex min-w-0 flex-col\">\n          {definition && (\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {labels.categories[definition.category]}\n            </span>\n          )}\n          <span className=\"truncate text-sm font-semibold text-foreground\">\n            {definition?.resolveLabel?.(selectedNode.config) ?? definition?.label ?? selectedNode.type}\n          </span>\n        </div>\n        <ControlledTooltip content={t('flow.inspector.close')} placement=\"left\">\n          <ControlledButton\n            aria-label={t('flow.inspector.close')}\n            defaultHtmlButton\n            onClick={() => store.getState().setSelection({ nodeIds: [], edgeIds: [] })}\n            className=\"interactive ml-auto flex size-8 shrink-0 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\"\n          >\n            <MaterialSymbol icon=\"close\" size={18} aria-hidden />\n          </ControlledButton>\n        </ControlledTooltip>\n      </div>\n\n      <ControlledInput\n        label={t('flow.inspector.label')}\n        value={selectedNode.label ?? ''}\n        disabled={readOnly}\n        onChange={(event) => store.getState().updateNodeLabel(selectedNode.nodeId, event.target.value)}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col gap-y-3 overflow-y-auto\">\n        {ConfigPanel ? (\n          <ConfigPanel\n            config={selectedNode.config}\n            readOnly={readOnly}\n            onChange={(next) => store.getState().updateNodeConfig(selectedNode.nodeId, next)}\n          />\n        ) : (\n          <NoDataFound compact variant=\"error\" message={t('flow.inspector.unknownBlock')} />\n        )}\n\n        {nodeIssues.length > 0 && (\n          <ul className=\"flex flex-col gap-y-1\">\n            {nodeIssues.map((issue) => (\n              <li key={`${issue.code}|${issue.edgeId ?? ''}`} className=\"flex items-start gap-x-2\">\n                <MaterialSymbol\n                  icon={issue.severity === 'error' ? 'error' : 'warning'}\n                  size={16}\n                  className={issue.severity === 'error' ? 'text-danger-emphasis' : 'text-warning-emphasis'}\n                  aria-hidden\n                />\n                <span className=\"text-xs text-foreground-muted\">{labels.issueMessage(issue)}</span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n\n      {!readOnly && (canDuplicate || canRemove) && (\n        <div className=\"flex gap-x-2\">\n          {canDuplicate && (\n            <ControlledButton\n              size=\"sm\"\n              variant=\"outlined\"\n              tone=\"neutral\"\n              className=\"normal-case\"\n              onClick={() => store.getState().duplicateSelected()}\n            >\n              <MaterialSymbol icon=\"content_copy\" size={16} aria-hidden />\n              {t('flow.inspector.duplicate')}\n            </ControlledButton>\n          )}\n          {canRemove && (\n            <ControlledButton\n              size=\"sm\"\n              variant=\"outlined\"\n              tone=\"danger\"\n              className=\"normal-case\"\n              onClick={() => store.getState().removeSelected()}\n            >\n              <MaterialSymbol icon=\"delete\" size={16} aria-hidden />\n              {t('flow.inspector.delete')}\n            </ControlledButton>\n          )}\n        </div>\n      )}\n    </aside>\n  );\n};\n\nexport default FlowInspector;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+interface IFlowSelectionBarProps {
+    selectedCount: number;
+    canDelete: boolean;
+    onDuplicate: () => void;
+    onDelete: () => void;
+    onClear: () => void;
+}
+/** What can be done with several selected items at once: blocks and annotations alike. */
+declare const FlowSelectionBar: React.FC<IFlowSelectionBarProps>;
+export default FlowSelectionBar;

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

@@ -0,0 +1,56 @@
+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";
+const SelectionAction = ({ icon, label, onClick, disabled, danger }) => /* @__PURE__ */ jsxs(
+  ControlledButton,
+  {
+    defaultHtmlButton: true,
+    onClick,
+    disabled,
+    className: danger ? "interactive flex h-8 items-center gap-x-1.5 rounded-lg px-2.5 text-sm font-medium text-danger-emphasis hover:bg-danger-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40" : "interactive flex h-8 items-center gap-x-1.5 rounded-lg px-2.5 text-sm font-medium 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 }),
+      /* @__PURE__ */ jsx("span", { children: label })
+    ]
+  }
+);
+const FlowSelectionBar = ({
+  selectedCount,
+  canDelete,
+  onDuplicate,
+  onDelete,
+  onClear
+}) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1 rounded-xl border border-border bg-surface p-1 shadow-md", children: [
+    /* @__PURE__ */ jsx("span", { className: "px-2 text-sm font-medium text-foreground", children: t("flow.selection.count", { count: selectedCount }) }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-5 w-px bg-border" }),
+    /* @__PURE__ */ jsx(SelectionAction, { icon: "content_copy", label: t("flow.selection.duplicate"), onClick: onDuplicate }),
+    /* @__PURE__ */ jsx(
+      SelectionAction,
+      {
+        icon: "delete",
+        label: t("flow.selection.delete"),
+        onClick: onDelete,
+        disabled: !canDelete,
+        danger: true
+      }
+    ),
+    /* @__PURE__ */ jsx(ControlledTooltip, { content: t("flow.selection.clear"), placement: "top", children: /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        "aria-label": t("flow.selection.clear"),
+        defaultHtmlButton: true,
+        onClick: onClear,
+        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",
+        children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 18, "aria-hidden": true })
+      }
+    ) })
+  ] });
+};
+export {
+  FlowSelectionBar as default
+};
+//# sourceMappingURL=FlowSelectionBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowSelectionBar.js","sources":["../../../../src/components/UI/Flow/FlowSelectionBar.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';\n\ninterface IFlowSelectionBarProps {\n  selectedCount: number;\n  canDelete: boolean;\n  onDuplicate: () => void;\n  onDelete: () => void;\n  onClear: () => void;\n}\n\ninterface ISelectionActionProps {\n  icon: SymbolCodepoints;\n  label: string;\n  onClick: () => void;\n  disabled?: boolean;\n  danger?: boolean;\n}\n\nconst SelectionAction: React.FC<ISelectionActionProps> = ({ icon, label, onClick, disabled, danger }) => (\n  <ControlledButton\n    defaultHtmlButton\n    onClick={onClick}\n    disabled={disabled}\n    className={\n      danger\n        ? 'interactive flex h-8 items-center gap-x-1.5 rounded-lg px-2.5 text-sm font-medium text-danger-emphasis hover:bg-danger-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40'\n        : 'interactive flex h-8 items-center gap-x-1.5 rounded-lg px-2.5 text-sm font-medium 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  >\n    <MaterialSymbol icon={icon} size={18} aria-hidden />\n    <span>{label}</span>\n  </ControlledButton>\n);\n\n/** What can be done with several selected items at once: blocks and annotations alike. */\nconst FlowSelectionBar: React.FC<IFlowSelectionBarProps> = ({\n  selectedCount,\n  canDelete,\n  onDuplicate,\n  onDelete,\n  onClear,\n}) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <div className=\"flex items-center gap-x-1 rounded-xl border border-border bg-surface p-1 shadow-md\">\n      <span className=\"px-2 text-sm font-medium text-foreground\">\n        {t('flow.selection.count', { count: selectedCount })}\n      </span>\n      <span aria-hidden className=\"h-5 w-px bg-border\" />\n      <SelectionAction icon=\"content_copy\" label={t('flow.selection.duplicate')} onClick={onDuplicate} />\n      <SelectionAction\n        icon=\"delete\"\n        label={t('flow.selection.delete')}\n        onClick={onDelete}\n        disabled={!canDelete}\n        danger\n      />\n      <ControlledTooltip content={t('flow.selection.clear')} placement=\"top\">\n        <ControlledButton\n          aria-label={t('flow.selection.clear')}\n          defaultHtmlButton\n          onClick={onClear}\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\"\n        >\n          <MaterialSymbol icon=\"close\" size={18} aria-hidden />\n        </ControlledButton>\n      </ControlledTooltip>\n    </div>\n  );\n};\n\nexport default FlowSelectionBar;\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,kBAAmD,CAAC,EAAE,MAAM,OAAO,SAAS,UAAU,aAC1F;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,mBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,WACE,SACI,yPACA;AAAA,IAGN,UAAA;AAAA,MAAA,oBAAC,gBAAA,EAAe,MAAY,MAAM,IAAI,eAAW,MAAC;AAAA,MAClD,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AACf;AAIF,MAAM,mBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE,qBAAC,OAAA,EAAI,WAAU,sFACb,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,4CACb,UAAA,EAAE,wBAAwB,EAAE,OAAO,cAAA,CAAe,EAAA,CACrD;AAAA,IACA,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAU,sBAAqB;AAAA,IACjD,oBAAC,mBAAgB,MAAK,gBAAe,OAAO,EAAE,0BAA0B,GAAG,SAAS,aAAa;AAAA,IACjG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,uBAAuB;AAAA,QAChC,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QACX,QAAM;AAAA,MAAA;AAAA,IAAA;AAAA,wBAEP,mBAAA,EAAkB,SAAS,EAAE,sBAAsB,GAAG,WAAU,OAC/D,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY,EAAE,sBAAsB;AAAA,QACpC,mBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,WAAU;AAAA,QAEV,8BAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,IAAI,eAAW,KAAA,CAAC;AAAA,MAAA;AAAA,IAAA,EACrD,CACF;AAAA,EAAA,GACF;AAEJ;"}

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":";AAWO,MAAM,wBAAoD;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,wBAAoD;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,0BAAwD,CAAC,QAAQ,UAAU,OAAO;AAExF,MAAM,+BAAsE;AAAA,EACjF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,MAAM,2BAA2B;AAEjC,MAAM,yBAAyB;AAE/B,MAAM,0BAA0B;AAEvC,MAAM,iBAAiB,CAAC,UAAoC,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK;AAE9G,MAAM,UAAU,CAAC,UACf,eAAgB,OAAqC,CAAC,KAAK,eAAgB,OAAqC,CAAC;AAE5G,MAAM,gBAAgB,CAAC,eAC5B,6BAA6B,WAAW,UAAU,QAAQ,KAAK,6BAA6B;AAGvF,MAAM,qBAAqB,CAAC,gBACjC,YAAY,OAAO,CAAC,SAAS,eAAe,KAAK,IAAI,SAAS,WAAW,QAAQ,CAAC,GAAG,CAAC,IAAI;AAMrF,MAAM,mBAAmB,CAAC,WAAyC;AACxE,QAAM,CAAC,OAAO,GAAG,IAAI,IAAI;AACzB,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,KAAK,WAAW,EAAG,QAAO,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC;AACrD,QAAM,SAAS,KAAK,IAAI,CAAC,OAAO,UAAU;AACxC,UAAM,WAAW,OAAO,KAAK,KAAK;AAClC,WAAO,KAAK,SAAS,CAAC,IAAI,SAAS,CAAC,KAAK,SAAS,IAAI,MAAM,KAAK,CAAC,KAAK,SAAS,IAAI,MAAM,KAAK,CAAC;AAAA,EAClG,CAAC;AACD,QAAM,OAAO,KAAK,KAAK,SAAS,CAAC,KAAK;AACtC,SAAO,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,IAAI,OAAO,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC;AAC1E;AAGO,MAAM,2BAA2B,CAAC,gBAAiD;AACxF,MAAI,CAAC,MAAM,QAAQ,WAAW,UAAU,CAAA;AACxC,SAAO,YAAY,QAAQ,CAAC,cAAsC;AAChE,UAAM,aAAa;AACnB,QAAI,CAAC,cAAc,OAAO,WAAW,iBAAiB,YAAY,CAAC,WAAW,aAAc,QAAO,CAAA;AACnG,QAAI,CAAC,sBAAsB,SAAS,WAAW,IAA2B,UAAU,CAAA;AACpF,QAAI,CAAC,QAAQ,WAAW,QAAQ,UAAU,CAAA;AAC1C,UAAM,QAAQ,eAAe,WAAW,MAAM,KAAK,IAAI,WAAW,KAAK,QAAQ;AAC/E,UAAM,SAAS,eAAe,WAAW,MAAM,MAAM,IAAI,WAAW,KAAK,SAAS;AAClF,UAAM,SAAS,MAAM,QAAQ,WAAW,MAAM,IAAI,WAAW,OAAO,OAAO,OAAO,IAAI;AACtF,UAAM,iBAAiB,WAAW,SAAS,WAAW,WAAW,SAAS;AAC1E,QAAK,mBAAmB,QAAQ,UAAU,KAAK,KAAO,WAAW,SAAS,aAAa,CAAC,QAAQ,OAAS,QAAO,CAAA;AAChH,WAAO;AAAA,MACL;AAAA,QACE,cAAc,WAAW;AAAA,QACzB,MAAM,WAAW;AAAA,QACjB,UAAU,EAAE,GAAG,WAAW,SAAS,GAAG,GAAG,WAAW,SAAS,EAAA;AAAA,QAC7D,MAAM;AAAA,UACJ,OAAO,KAAK,IAAI,OAAO,wBAAwB;AAAA,UAC/C,QAAQ,KAAK,IAAI,QAAQ,wBAAwB;AAAA,QAAA;AAAA,QAEnD,MAAM,sBAAsB,SAAS,WAAW,IAA2B,IACtE,WAAW,OACZ;AAAA,QACJ,GAAI,wBAAwB,SAAS,WAAW,MAA+B,IAC3E,EAAE,QAAQ,WAAW,OAAA,IACrB,CAAA;AAAA,QACJ,GAAI,OAAO,WAAW,SAAS,WAAW,EAAE,MAAM,WAAW,KAAA,IAAS,CAAA;AAAA,QACtE,GAAI,eAAe,WAAW,IAAI,IAAI,EAAE,MAAM,WAAW,KAAA,IAAS,CAAA;AAAA,QAClE,GAAI,SAAS,EAAE,WAAW,CAAA;AAAA,MAAC;AAAA,IAC7B;AAAA,EAEJ,CAAC;AACH;AAMO,MAAM,kBAAkB,CAC7B,QACA,YAC+E;AAC/E,QAAM,KAAK,OAAO,IAAI,CAAC,UAAU,MAAM,CAAC;AACxC,QAAM,KAAK,OAAO,IAAI,CAAC,UAAU,MAAM,CAAC;AACxC,QAAM,OAAO,KAAK,IAAI,GAAG,EAAE,IAAI;AAC/B,QAAM,MAAM,KAAK,IAAI,GAAG,EAAE,IAAI;AAC9B,SAAO;AAAA,IACL,UAAU,EAAE,GAAG,MAAM,GAAG,IAAA;AAAA,IACxB,MAAM;AAAA,MACJ,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,EAAE,IAAI,OAAO,SAAS,wBAAwB;AAAA,MAC1E,QAAQ,KAAK,IAAI,KAAK,IAAI,GAAG,EAAE,IAAI,MAAM,SAAS,wBAAwB;AAAA,IAAA;AAAA,IAE5E,QAAQ,OAAO,IAAI,CAAC,WAAW,EAAE,GAAG,MAAM,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM;AAAA,EAAA;AAE3E;AAGO,MAAM,aAAa,CAAC,OAAsB,SAAsE;AAAA,EACrH,UAAU,EAAE,GAAG,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC,EAAA;AAAA,EACnE,MAAM;AAAA,IACJ,OAAO,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,GAAG,wBAAwB;AAAA,IACnE,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,GAAG,wBAAwB;AAAA,EAAA;AAExE;AAGO,MAAM,wBAAwB,CACnC,QACA,MACA,OACqC;AACrC,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,SAAS,KAAK,QAAQ,IAAI,GAAG,QAAQ,KAAK,QAAQ;AACxD,QAAM,SAAS,KAAK,SAAS,IAAI,GAAG,SAAS,KAAK,SAAS;AAC3D,SAAO,OAAO,IAAI,CAAC,WAAW,EAAE,GAAG,MAAM,IAAI,QAAQ,GAAG,MAAM,IAAI,SAAS;AAC7E;AAEO,MAAM,uBAAuB,CAAC,aAAqC,WACxE,YAAY,IAAI,CAAC,gBAAgB;AAAA,EAC/B,GAAG;AAAA,EACH,cAAc,aAAA;AAAA,EACd,UAAU,EAAE,GAAG,WAAW,SAAS,IAAI,QAAQ,GAAG,WAAW,SAAS,IAAI,OAAA;AAAA,EAC1E,QAAQ,WAAW,QAAQ,IAAI,CAAC,WAAW,EAAE,GAAG,QAAQ;AAC1D,EAAE;"}

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

@@ -1,14 +1,28 @@
 import { StoreApi } from 'zustand/vanilla';
 import { IFlowBlockRegistry } from './flowBlockRegistry';
-import { IFlowGraph, IFlowNode, IFlowPosition, TFlowPortId } from './flowTypes';
+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;
@@ -27,15 +41,20 @@ export interface IFlowEditorState {
     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: {
-        nodeIds?: Array<string>;
-        edgeIds?: Array<string>;
-    }) => 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. */
@@ -47,3 +66,8 @@ export type TFlowEditorStore = StoreApi<IFlowEditorState>;
  * 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;

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

@@ -1,5 +1,6 @@
 import { createStore } from "zustand/vanilla";
 import { generateUUID } from "../../../helpers/utilityHelpers.js";
+import { cloneFlowAnnotations, normalizeFlowAnnotations } from "./flowAnnotations.js";
 import { flowOutputsOf } from "./flowBlockRegistry.js";
 import { isFlowNodeRemovable, canConnect, reachableFrom, FLOW_LEVEL_GAP, FLOW_SIBLING_GAP, layoutFlowByLevels } from "./flowGraph.js";
 const HISTORY_LIMIT = 50;
@@ -9,7 +10,8 @@ const isPosition = (position) => typeof position?.x === "number" && typeof posit
 const normalizeGraph = (graph, registry) => {
   const normalized = {
     nodes: Array.isArray(graph?.nodes) ? graph.nodes : [],
-    edges: Array.isArray(graph?.edges) ? graph.edges : []
+    edges: Array.isArray(graph?.edges) ? graph.edges : [],
+    annotations: normalizeFlowAnnotations(graph?.annotations)
   };
   if (normalized.nodes.every((node) => isPosition(node.position))) return normalized;
   const layout = layoutFlowByLevels(normalized, registry);
@@ -21,6 +23,7 @@ const normalizeGraph = (graph, registry) => {
   };
 };
 const withoutNodes = (graph, nodeIds) => ({
+  ...graph,
   nodes: graph.nodes.filter((node) => !nodeIds.has(node.nodeId)),
   edges: graph.edges.filter((edge) => !nodeIds.has(edge.source) && !nodeIds.has(edge.target))
 });
@@ -39,18 +42,21 @@ const createFlowEditorStore = (initialGraph, registry) => createStore()((set, ge
   let lastCoalesce = null;
   const commit = (next, selection, coalesceKey) => {
     const { graph, past } = get();
+    const nextGraph = next.annotations === void 0 ? { ...next, annotations: graph.annotations ?? [] } : next;
     const now = Date.now();
     const extendsLastStep = coalesceKey !== void 0 && lastCoalesce?.key === coalesceKey && now - lastCoalesce.at < COALESCE_WINDOW_MS;
     lastCoalesce = coalesceKey === void 0 ? null : { key: coalesceKey, at: now };
     set({
-      graph: next,
+      graph: nextGraph,
       past: extendsLastStep ? past : [...past, graph].slice(-HISTORY_LIMIT),
       future: [],
       isDirty: true,
       ...selection?.nodeIds ? { selectedNodeIds: selection.nodeIds } : {},
-      ...selection?.edgeIds ? { selectedEdgeIds: selection.edgeIds } : {}
+      ...selection?.edgeIds ? { selectedEdgeIds: selection.edgeIds } : {},
+      ...selection?.annotationIds ? { selectedAnnotationIds: selection.annotationIds } : {}
     });
   };
+  const annotationsOf = (graph) => graph.annotations ?? [];
   const cloneNodes = (nodes, offset) => {
     const instancesByType = /* @__PURE__ */ new Map();
     get().graph.nodes.forEach((node) => instancesByType.set(node.type, (instancesByType.get(node.type) ?? 0) + 1));
@@ -72,10 +78,13 @@ const createFlowEditorStore = (initialGraph, registry) => createStore()((set, ge
     graph: normalizeGraph(initialGraph, registry),
     selectedNodeIds: [],
     selectedEdgeIds: [],
+    selectedAnnotationIds: [],
     past: [],
     future: [],
     clipboard: [],
+    annotationClipboard: [],
     isDirty: false,
+    isAreaSelecting: false,
     replaceGraph: (graph, options) => {
       set((state) => ({
         graph: normalizeGraph(graph, currentRegistry),
@@ -83,6 +92,7 @@ const createFlowEditorStore = (initialGraph, registry) => createStore()((set, ge
         future: [],
         selectedNodeIds: [],
         selectedEdgeIds: [],
+        selectedAnnotationIds: [],
         isDirty: Boolean(options?.keepHistory)
       }));
     },
@@ -217,6 +227,51 @@ const createFlowEditorStore = (initialGraph, registry) => createStore()((set, ge
         isDirty: true
       });
     },
+    addAnnotation: (annotation) => {
+      const { graph } = get();
+      const created = { ...annotation, annotationId: generateUUID() };
+      commit(
+        { ...graph, annotations: [...annotationsOf(graph), created] },
+        { nodeIds: [], edgeIds: [], annotationIds: [created.annotationId] }
+      );
+      return created.annotationId;
+    },
+    updateAnnotations: (annotationIds, patch) => {
+      const { graph } = get();
+      const targets = new Set(annotationIds);
+      if (targets.size === 0) return;
+      commit(
+        {
+          ...graph,
+          annotations: annotationsOf(graph).map(
+            (annotation) => targets.has(annotation.annotationId) ? { ...annotation, ...patch } : annotation
+          )
+        },
+        void 0,
+        patch.text !== void 0 ? `annotation-text:${annotationIds.join(",")}` : void 0
+      );
+    },
+    setAnnotationGeometry: (geometry) => {
+      const { graph } = get();
+      set({
+        graph: {
+          ...graph,
+          annotations: annotationsOf(graph).map(
+            (annotation) => geometry[annotation.annotationId] ? { ...annotation, ...geometry[annotation.annotationId] } : annotation
+          )
+        },
+        isDirty: true
+      });
+    },
+    removeAnnotations: (annotationIds) => {
+      const { graph, selectedAnnotationIds } = get();
+      const removed = new Set(annotationIds);
+      if (!annotationsOf(graph).some((annotation) => removed.has(annotation.annotationId))) return;
+      commit(
+        { ...graph, annotations: annotationsOf(graph).filter((annotation) => !removed.has(annotation.annotationId)) },
+        { annotationIds: selectedAnnotationIds.filter((id) => !removed.has(id)) }
+      );
+    },
     connect: (source, sourcePort, target) => {
       const { graph } = get();
       if (!canConnect(graph, currentRegistry, { source, sourcePort, target })) return false;
@@ -225,46 +280,87 @@ const createFlowEditorStore = (initialGraph, registry) => createStore()((set, ge
       return true;
     },
     removeSelected: () => {
-      const { graph, selectedNodeIds, selectedEdgeIds } = get();
+      const { graph, selectedNodeIds, selectedEdgeIds, selectedAnnotationIds } = get();
       const removableNodeIds = graph.nodes.filter((node) => selectedNodeIds.includes(node.nodeId) && isFlowNodeRemovable(node, currentRegistry)).map((node) => node.nodeId);
-      if (removableNodeIds.length === 0 && selectedEdgeIds.length === 0) return;
-      const removedEdges = new Set(selectedEdgeIds);
+      const removedNodes = new Set(removableNodeIds);
+      const selectedNodes = new Set(selectedNodeIds);
+      const removedEdges = new Set(
+        graph.edges.filter((edge) => selectedEdgeIds.includes(edge.edgeId)).filter(
+          (edge) => removedNodes.has(edge.source) || removedNodes.has(edge.target) || !selectedNodes.has(edge.source) && !selectedNodes.has(edge.target)
+        ).map((edge) => edge.edgeId)
+      );
+      const removedAnnotations = new Set(selectedAnnotationIds);
+      const annotations = annotationsOf(graph).filter(
+        (annotation) => !removedAnnotations.has(annotation.annotationId)
+      );
+      const removesAnnotations = annotations.length !== annotationsOf(graph).length;
+      if (removedNodes.size === 0 && removedEdges.size === 0 && !removesAnnotations) return;
       const next = withoutNodes(
-        { ...graph, edges: graph.edges.filter((edge) => !removedEdges.has(edge.edgeId)) },
-        new Set(removableNodeIds)
+        { ...graph, edges: graph.edges.filter((edge) => !removedEdges.has(edge.edgeId)), annotations },
+        removedNodes
       );
-      commit(next, { nodeIds: [], edgeIds: [] });
+      commit(next, { nodeIds: [], edgeIds: [], annotationIds: [] });
     },
     duplicateSelected: () => {
-      const { graph, selectedNodeIds } = get();
+      const { graph, selectedNodeIds, selectedAnnotationIds } = get();
       const selected = graph.nodes.filter((node) => selectedNodeIds.includes(node.nodeId));
       const copies = cloneNodes(selected, PASTE_OFFSET);
-      if (copies.length === 0) return;
+      const annotationCopies = cloneFlowAnnotations(
+        annotationsOf(graph).filter((annotation) => selectedAnnotationIds.includes(annotation.annotationId)),
+        PASTE_OFFSET
+      );
+      if (copies.length === 0 && annotationCopies.length === 0) return;
       commit(
-        { ...graph, nodes: [...graph.nodes, ...copies] },
-        { nodeIds: copies.map((node) => node.nodeId), edgeIds: [] }
+        {
+          ...graph,
+          nodes: [...graph.nodes, ...copies],
+          annotations: [...annotationsOf(graph), ...annotationCopies]
+        },
+        {
+          nodeIds: copies.map((node) => node.nodeId),
+          edgeIds: [],
+          annotationIds: annotationCopies.map((annotation) => annotation.annotationId)
+        }
       );
     },
     copySelected: () => {
-      const { graph, selectedNodeIds } = get();
-      set({ clipboard: graph.nodes.filter((node) => selectedNodeIds.includes(node.nodeId)) });
+      const { graph, selectedNodeIds, selectedAnnotationIds } = get();
+      set({
+        clipboard: graph.nodes.filter((node) => selectedNodeIds.includes(node.nodeId)),
+        annotationClipboard: annotationsOf(graph).filter(
+          (annotation) => selectedAnnotationIds.includes(annotation.annotationId)
+        )
+      });
     },
     paste: () => {
-      const { graph, clipboard } = get();
+      const { graph, clipboard, annotationClipboard } = get();
       const copies = cloneNodes(clipboard, PASTE_OFFSET);
-      if (copies.length === 0) return;
+      const annotationCopies = cloneFlowAnnotations(annotationClipboard, PASTE_OFFSET);
+      if (copies.length === 0 && annotationCopies.length === 0) return;
       commit(
-        { ...graph, nodes: [...graph.nodes, ...copies] },
-        { nodeIds: copies.map((node) => node.nodeId), edgeIds: [] }
+        {
+          ...graph,
+          nodes: [...graph.nodes, ...copies],
+          annotations: [...annotationsOf(graph), ...annotationCopies]
+        },
+        {
+          nodeIds: copies.map((node) => node.nodeId),
+          edgeIds: [],
+          annotationIds: annotationCopies.map((annotation) => annotation.annotationId)
+        }
       );
-      set({ clipboard: copies });
+      set({ clipboard: copies, annotationClipboard: annotationCopies });
     },
-    setSelection: ({ nodeIds, edgeIds }) => {
+    setSelection: ({ nodeIds, edgeIds, annotationIds }) => {
       set((state) => ({
         selectedNodeIds: nodeIds ?? state.selectedNodeIds,
-        selectedEdgeIds: edgeIds ?? state.selectedEdgeIds
+        selectedEdgeIds: edgeIds ?? state.selectedEdgeIds,
+        selectedAnnotationIds: annotationIds ?? state.selectedAnnotationIds
       }));
     },
+    setAreaSelecting: (active) => {
+      if (get().isAreaSelecting !== active) set({ isAreaSelecting: active });
+    },
     undo: () => {
       const { graph, past, future } = get();
       const previous = past[past.length - 1];
@@ -275,6 +371,7 @@ const createFlowEditorStore = (initialGraph, registry) => createStore()((set, ge
         future: [graph, ...future].slice(0, HISTORY_LIMIT),
         selectedNodeIds: [],
         selectedEdgeIds: [],
+        selectedAnnotationIds: [],
         isDirty: true
       });
     },
@@ -288,6 +385,7 @@ const createFlowEditorStore = (initialGraph, registry) => createStore()((set, ge
         future: future.slice(1),
         selectedNodeIds: [],
         selectedEdgeIds: [],
+        selectedAnnotationIds: [],
         isDirty: true
       });
     },
@@ -296,7 +394,9 @@ const createFlowEditorStore = (initialGraph, registry) => createStore()((set, ge
     }
   };
 });
+const selectFlowInspectedNodeId = (state) => state.selectedNodeIds.length === 1 && state.selectedAnnotationIds.length === 0 && !state.isAreaSelecting ? state.selectedNodeIds[0] ?? null : null;
 export {
-  createFlowEditorStore
+  createFlowEditorStore,
+  selectFlowInspectedNodeId
 };
 //# sourceMappingURL=flowEditorStore.js.map