@principal-ai/subsystems-react 0.28.1 → 0.28.3

package/src/subsystem/model.test.ts

@@ -29,8 +29,10 @@ import {
   packageColor,
   subsystemGraphLayoutKey,
   describeConstructBreakdown,
+  reorderWalkthroughs,
+  reorderTargetIndex,
 } from './model';
-import type { SubsystemComponent, SubsystemComponentEdge } from './model';
+import type { SubsystemComponent, SubsystemComponentEdge, SubsystemWalkthrough } from './model';
 
 const comps: SubsystemComponent[] = [
   { alias: 'reader', name: 'SessionReader', construct: 'class', file: 'SessionReader.ts', purl: 'pkg:github/principal-ai/agent-monitoring' },
@@ -793,3 +795,76 @@ describe('module badge labels', () => {
     expect(moduleBadgeWidth('src/…/nodes.tsx')).toBeLessThan(moduleBadgeWidth('packages/…/nodes.tsx'));
   });
 });
+
+describe('reorderWalkthroughs', () => {
+  const wts: SubsystemWalkthrough[] = [
+    { id: 'a', title: 'A', steps: [] },
+    { id: 'b', title: 'B', steps: [] },
+    { id: 'c', title: 'C', steps: [] },
+  ];
+  const ids = (list: SubsystemWalkthrough[]) => list.map((w) => w.id);
+
+  test('moves an item forward to the target index', () => {
+    expect(ids(reorderWalkthroughs(wts, 0, 2))).toEqual(['b', 'c', 'a']);
+  });
+
+  test('moves an item backward to the target index', () => {
+    expect(ids(reorderWalkthroughs(wts, 2, 0))).toEqual(['c', 'a', 'b']);
+  });
+
+  test('returns a new array and leaves the input untouched', () => {
+    const next = reorderWalkthroughs(wts, 1, 2);
+    expect(next).not.toBe(wts);
+    expect(ids(wts)).toEqual(['a', 'b', 'c']);
+    expect(ids(next)).toEqual(['a', 'c', 'b']);
+  });
+
+  test('no-op when source and target match', () => {
+    expect(ids(reorderWalkthroughs(wts, 1, 1))).toEqual(['a', 'b', 'c']);
+  });
+
+  test('out-of-range source returns a shallow copy unchanged', () => {
+    const next = reorderWalkthroughs(wts, 5, 0);
+    expect(next).not.toBe(wts);
+    expect(ids(next)).toEqual(['a', 'b', 'c']);
+  });
+
+  test('clamps a target beyond the end to the last slot', () => {
+    expect(ids(reorderWalkthroughs(wts, 0, 99))).toEqual(['b', 'c', 'a']);
+  });
+});
+
+describe('reorderTargetIndex', () => {
+  // Boundaries are the n+1 gaps between rows: 0 is above row 0, n is below
+  // the last row. Dragging row `from` to boundary `b` lands it at b, minus one
+  // when b is past from (removing the row shifts later gaps down).
+  test('dragging down past a row lands after it', () => {
+    expect(reorderTargetIndex(2, 0)).toBe(1);
+    expect(reorderTargetIndex(3, 0)).toBe(2);
+  });
+
+  test('dragging up lands at the boundary', () => {
+    expect(reorderTargetIndex(0, 2)).toBe(0);
+    expect(reorderTargetIndex(1, 2)).toBe(1);
+  });
+
+  test('the boundaries around the dragged row are no-ops', () => {
+    expect(reorderTargetIndex(1, 1)).toBe(1);
+    expect(reorderTargetIndex(2, 1)).toBe(1);
+  });
+
+  test('dropping the first row above itself is a no-op', () => {
+    expect(reorderTargetIndex(0, 0)).toBe(0);
+  });
+
+  test('composes with reorderWalkthroughs to match the indicator', () => {
+    const wts: SubsystemWalkthrough[] = [
+      { id: 'a', title: 'A', steps: [] },
+      { id: 'b', title: 'B', steps: [] },
+      { id: 'c', title: 'C', steps: [] },
+    ];
+    // Drag A onto the gap below B (boundary 2) → A lands between B and C.
+    const target = reorderTargetIndex(2, 0);
+    expect(reorderWalkthroughs(wts, 0, target).map((w) => w.id)).toEqual(['b', 'a', 'c']);
+  });
+});

package/src/subsystem/model.ts

@@ -349,6 +349,37 @@ export function walkthroughStepGraphEdgeId(
   return derivedGraphEdgeId(step.from, step.to, step.mechanism);
 }
 
+/**
+ * Move one walkthrough from `from` to `to`, returning a new array. Used by the
+ * flows panel's drag-to-reorder: the array order is the walkthroughs' display
+ * order, so a reorder is just an array splice. Out-of-range `from` returns a
+ * shallow copy unchanged; `to` is clamped into range.
+ */
+export function reorderWalkthroughs(
+  walkthroughs: readonly SubsystemWalkthrough[],
+  from: number,
+  to: number,
+): SubsystemWalkthrough[] {
+  const next = [...walkthroughs];
+  if (!Number.isInteger(from) || from < 0 || from >= next.length) return next;
+  const target = Math.max(0, Math.min(to, next.length - 1));
+  if (target === from) return next;
+  const [moved] = next.splice(from, 1);
+  if (moved) next.splice(target, 0, moved);
+  return next;
+}
+
+/**
+ * Final index for a drag-reorder given the insertion `boundary` (one of the
+ * `n + 1` gaps between rows) and the dragged row's `from` index. Removing the
+ * dragged row shifts every boundary after it down one, so a boundary past
+ * `from` maps to `boundary - 1`. Feed the result to `reorderWalkthroughs` as
+ * `to`; a result equal to `from` is a no-op.
+ */
+export function reorderTargetIndex(boundary: number, from: number): number {
+  return boundary - (boundary > from ? 1 : 0);
+}
+
 export function deriveGraphEdges(doc: {
   relations?: readonly SubsystemRelation[];
   walkthroughs?: readonly SubsystemWalkthrough[];