@principal-ai/subsystems-react 0.28.2 → 0.28.4

package/src/subsystem/WalkthroughsPanel.tsx

@@ -13,8 +13,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { DragEvent as ReactDragEvent } from 'react';
 import { useTheme } from '@principal-ade/industry-theme';
-import { GripVertical, Pause, Play, X } from 'lucide-react';
+import { ChevronDown, GripVertical, Pause, Play } from 'lucide-react';
 import {
+  PROPOSED_COLOR,
   reorderTargetIndex,
   reorderWalkthroughs,
   walkthroughStepGraphEdgeId,
@@ -33,9 +34,10 @@ interface WalkthroughReorderHandle {
 }
 
 /** One collapsible walkthrough in the sidebar's flows panel. Clicking the
- *  title: closed → open + select; open and unselected → select; open and
- *  selected → close + clear focus. The right-aligned close button collapses
- *  without selecting. A step row focuses that step's edge. */
+ *  title: closed → open + select; open with a step selected → select the whole
+ *  flow (deselect the step, stay open); open with the whole flow selected →
+ *  close + clear focus. The right-aligned close button collapses without
+ *  selecting. A step row focuses that step's edge. */
 function WalkthroughFlow({
   walkthrough,
   collapsed,
@@ -50,6 +52,7 @@ function WalkthroughFlow({
   reorder,
   dragActive,
   isHoverSuppressed,
+  proposedAliases,
 }: {
   walkthrough: SubsystemWalkthrough;
   collapsed: boolean;
@@ -69,13 +72,23 @@ function WalkthroughFlow({
   dragActive?: boolean;
   /** True just after a drop; ignores the browser's synthetic hover until the pointer moves. */
   isHoverSuppressed?: () => boolean;
+  /**
+   * Aliases of components marked `proposed`. A row whose steps touch one gets
+   * its title tinted, and each such step (index and title) is tinted too
+   * (darkgoldenrod, same as the proposed node treatment).
+   */
+  proposedAliases?: ReadonlySet<string>;
 }) {
   const { theme } = useTheme();
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const hoverBg = theme.colors.background;
   const wholeFlowActive = active !== null && active.stepIndex === null;
+  // A step is "proposed" when either endpoint is a proposed component.
+  const stepProposed = (from: string, to: string) =>
+    proposedAliases != null && (proposedAliases.has(from) || proposedAliases.has(to));
+  const touchesProposed = walkthrough.steps.some((s) => stepProposed(s.from, s.to));
   const [headerHover, setHeaderHover] = useState(false);
-  const [closeHover, setCloseHover] = useState(false);
+  const [collapseHover, setCollapseHover] = useState(false);
   const [playHover, setPlayHover] = useState(false);
   const [gripHover, setGripHover] = useState(false);
   const [hoveredStep, setHoveredStep] = useState<number | null>(null);
@@ -101,7 +114,7 @@ function WalkthroughFlow({
   // drop. Reset every row's hover whenever a drag starts or ends.
   useEffect(() => {
     setHeaderHover(false);
-    setCloseHover(false);
+    setCollapseHover(false);
     setPlayHover(false);
     setGripHover(false);
     setHoveredStep(null);
@@ -170,11 +183,14 @@ function WalkthroughFlow({
             if (collapsed) {
               onToggleCollapsed(walkthrough.id);
               onFocusFlow(walkthrough);
-            } else if (active === null) {
-              onFocusFlow(walkthrough);
-            } else {
+            } else if (active !== null && active.stepIndex === null) {
+              // Whole flow already selected → collapse + clear.
               onToggleCollapsed(walkthrough.id);
               onClearFocus();
+            } else {
+              // Expanded with nothing (or a step) selected → select the whole
+              // flow, which deselects any focused step without collapsing.
+              onFocusFlow(walkthrough);
             }
           }}
           style={{
@@ -197,7 +213,7 @@ function WalkthroughFlow({
               fontSize: theme.fontSizes[1],
               fontFamily: theme.fonts.monospace,
               fontWeight: 600,
-              color: theme.colors.text,
+              color: touchesProposed ? PROPOSED_COLOR : theme.colors.text,
             }}
           >
             {walkthrough.title}
@@ -235,9 +251,10 @@ function WalkthroughFlow({
           </button>
           <button
             type="button"
-            aria-label={`Close ${walkthrough.title}`}
-            onMouseEnter={() => setCloseHover(true)}
-            onMouseLeave={() => setCloseHover(false)}
+            aria-label={`Collapse ${walkthrough.title}`}
+            title="Collapse"
+            onMouseEnter={() => setCollapseHover(true)}
+            onMouseLeave={() => setCollapseHover(false)}
             onClick={(e) => {
               e.stopPropagation();
               onToggleCollapsed(walkthrough.id);
@@ -253,13 +270,13 @@ function WalkthroughFlow({
               padding: 0,
               border: 'none',
               borderRadius: 4,
-              background: closeHover ? theme.colors.border : 'transparent',
-              color: closeHover ? theme.colors.text : muted,
+              background: collapseHover ? theme.colors.border : 'transparent',
+              color: collapseHover ? theme.colors.text : muted,
               cursor: 'pointer',
               transition: 'background 120ms ease, color 120ms ease',
             }}
           >
-            <X size={12} strokeWidth={2} />
+            <ChevronDown size={14} strokeWidth={2} />
           </button>
           </>
         )}
@@ -302,6 +319,7 @@ function WalkthroughFlow({
         >
           {walkthrough.steps.map((step, i) => {
             const stepActive = active !== null && active.stepIndex === i;
+            const proposed = stepProposed(step.from, step.to);
             return (
               <button
                 key={`${walkthroughStepGraphEdgeId(step)}-${i}`}
@@ -309,6 +327,7 @@ function WalkthroughFlow({
                   stepButtonRefs.current[i] = el;
                 }}
                 type="button"
+                title={proposed ? 'Step touches a proposed component' : undefined}
                 onMouseEnter={() => {
                   setHoveredStep(i);
                   onHoverStep(walkthrough, i);
@@ -319,9 +338,9 @@ function WalkthroughFlow({
                   alignItems: 'center',
                   gap: 8,
                   minWidth: 0,
-                  padding: '8px 8px 8px 12px',
+                  padding: '8px 8px 8px 17px',
                   textAlign: 'left',
-                  borderRadius: 6,
+                  borderRadius: 0,
                   border: 'none',
                   outline: 'none',
                   background: stepActive || hoveredStep === i ? hoverBg : 'transparent',
@@ -335,7 +354,12 @@ function WalkthroughFlow({
                     width: 14,
                     fontSize: theme.fontSizes[0],
                     fontFamily: theme.fonts.monospace,
-                    color: stepActive ? theme.colors.text : muted,
+                    fontWeight: proposed ? 700 : undefined,
+                    color: proposed
+                      ? PROPOSED_COLOR
+                      : stepActive
+                        ? theme.colors.text
+                        : muted,
                   }}
                 >
                   {i + 1}
@@ -349,7 +373,7 @@ function WalkthroughFlow({
                     whiteSpace: 'nowrap',
                     fontSize: theme.fontSizes[1],
                     fontFamily: theme.fonts.monospace,
-                    color: theme.colors.text,
+                    color: proposed ? PROPOSED_COLOR : theme.colors.text,
                   }}
                 >
                   {step.symbol}
@@ -387,6 +411,12 @@ export interface WalkthroughsPanelProps {
    * for a read-only panel.
    */
   onReorder?: (next: SubsystemWalkthrough[]) => void;
+  /**
+   * Aliases of components marked `proposed`. A row whose steps touch one gets
+   * its title tinted, and each such step (index and title) is tinted too
+   * (darkgoldenrod, same as the proposed node treatment).
+   */
+  proposedAliases?: ReadonlySet<string>;
 }
 
 /**
@@ -408,6 +438,7 @@ export function WalkthroughsPanel({
   onHoverFlow,
   onLeaveStep,
   onReorder,
+  proposedAliases,
 }: WalkthroughsPanelProps) {
   const { theme } = useTheme();
   // Reordering is offered only while every row is collapsed: the compact list
@@ -522,15 +553,42 @@ export function WalkthroughsPanel({
             onDragOver={reorderable ? (e) => handleDragOver(e, i) : undefined}
             onDrop={reorderable ? handleDrop : undefined}
             style={{
+              position: 'relative',
               opacity: isDragging ? 0.45 : 1,
-              boxShadow: showTop
-                ? `inset 0 2px 0 ${accent}`
-                : showBottom
-                  ? `inset 0 -2px 0 ${accent}`
-                  : undefined,
-              transition: 'opacity 120ms ease, box-shadow 120ms ease',
+              transition: 'opacity 120ms ease',
             }}
           >
+            {/* Overlays so the divider/drop line stay visible above the row's
+                own (opaque) hover background. Accent paints over the divider. */}
+            {i > 0 && (
+              <div
+                aria-hidden
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  height: 1,
+                  background: theme.colors.border,
+                  pointerEvents: 'none',
+                }}
+              />
+            )}
+            {(showTop || showBottom) && (
+              <div
+                aria-hidden
+                style={{
+                  position: 'absolute',
+                  left: 0,
+                  right: 0,
+                  height: 2,
+                  zIndex: 2,
+                  background: accent,
+                  pointerEvents: 'none',
+                  ...(showTop ? { top: 0 } : { bottom: 0 }),
+                }}
+              />
+            )}
             <WalkthroughFlow
               walkthrough={tl}
               collapsed={!expandedWalkthroughs.has(tl.id)}
@@ -560,6 +618,7 @@ export function WalkthroughsPanel({
               }
               dragActive={dragIndex != null}
               isHoverSuppressed={isHoverSuppressed}
+              proposedAliases={proposedAliases}
             />
           </div>
         );