fix(manifold): share output range slider

MAP.md

@@ -51,7 +51,7 @@ anchor + locked decisions) and the `docs/specs/*-spec.md` set.
   (Learning/Inputs/Outputs/Settings/Help), `TrainingHealth` (real per-iteration loss curve from
   `nisps_ml_loss_history` + per-layer weight health from `nisps_ml_get_layer_stats`; rendered only at
   the Learning drawer's `expanded` depth — that IS the advanced-surface flag), `VerdictCluster`
-  (mode-aware), `OutputEditor`/`CurvePad`, `icons.tsx`
+  (mode-aware), `OutputEditor`/`DualRange`/`CurvePad`, `icons.tsx`
   (monochrome currentColor SVG), `model.ts` (`MF_MODES` catalogue — schema-backed modes DERIVED from
   `manifold/src/modes/generated/`; carries per-mode `ml` net shape + `engineId`), `output-mode.ts`.
 - `manifold/src/modes/generated/` — codegen output (`*_schema.ts`, do NOT hand-edit): `ModeSchema`

manifold/ONBOARDING.md

@@ -175,7 +175,8 @@ sweep (L22, zero consumers) — don't cite them.
 - `icons.tsx` — monochrome inline-SVG icons (mode icons + drawer icons + `GLYPH_FALLBACK` for when monochrome is off).
 - `VerdictCluster.tsx` — floating bottom-centre feedback UI (perturb ▽ / undo ↺ / commit △ + A/B); labels adapt to feedback mode.
 - `CurvePad.tsx` — square canvas curve editor (vertical drag reshapes [0,1]; ~0.43 ≈ linear). Used in OutputEditor + OutputControlRow.
-- `OutputEditor.tsx` — inline min/max/curve popup for a single output (hover/click on a bar).
+- `OutputEditor.tsx` — inline range/curve popup for a single output (hover/click on a bar), using
+  `DualRange.tsx` for the shared dual-thumb min/max control.
 
 ### Styling — `src/styles/`
 CSS-variable design tokens, no CSS-in-JS. `tokens.css` `@import`s `tokens/{base,colors,fonts,

manifold/src/console/DualRange.tsx

@@ -0,0 +1,102 @@
+/**
+ * DualRange — one bounded, dual-thumb control for an output's routing range.
+ * The same control is used by the main-view output editor and the Outputs
+ * drawer so min/max edits have identical interaction and clamping semantics.
+ */
+import { useRef } from 'react';
+import type { PointerEvent as ReactPointerEvent } from 'react';
+
+export interface DualRangeProps {
+  min: number;
+  max: number;
+  onMin: (value: number) => void;
+  onMax: (value: number) => void;
+}
+
+export function DualRange({ min, max, onMin, onMax }: DualRangeProps) {
+  const track = useRef<HTMLDivElement>(null);
+  const drag = useRef<{ which: 'min' | 'max' | null }>({ which: null });
+
+  const valueAt = (clientX: number) => {
+    const el = track.current;
+    if (!el) return 0;
+    const rect = el.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  };
+
+  const apply = (value: number) => {
+    if (drag.current.which === 'min') onMin(Math.min(value, max));
+    else if (drag.current.which === 'max') onMax(Math.max(value, min));
+  };
+
+  const down = (event: ReactPointerEvent<HTMLDivElement>) => {
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    const value = valueAt(event.clientX);
+    drag.current.which = Math.abs(value - min) <= Math.abs(value - max) ? 'min' : 'max';
+    apply(value);
+  };
+
+  const move = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (drag.current.which) apply(valueAt(event.clientX));
+  };
+
+  const up = () => {
+    drag.current.which = null;
+  };
+
+  return (
+    <div
+      ref={track}
+      onPointerDown={down}
+      onPointerMove={move}
+      onPointerUp={up}
+      onPointerCancel={up}
+      title={`range ${min.toFixed(2)}–${max.toFixed(2)}`}
+      style={{
+        position: 'relative',
+        height: 16,
+        flex: 1,
+        minWidth: 60,
+        background: 'var(--bg-1)',
+        border: '1px solid var(--line)',
+        borderRadius: 'var(--r-pill)',
+        cursor: 'ew-resize',
+        touchAction: 'none',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: `${min * 100}%`,
+          right: `${(1 - max) * 100}%`,
+          background: 'linear-gradient(90deg, #4488ff, var(--accent))',
+          opacity: 0.4,
+          borderRadius: 'var(--r-pill)',
+        }}
+      />
+      <Thumb pct={min} color="#4488ff" />
+      <Thumb pct={max} color="var(--accent)" />
+    </div>
+  );
+}
+
+function Thumb({ pct, color }: { pct: number; color: string }) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '50%',
+        left: `${pct * 100}%`,
+        width: 10,
+        height: 10,
+        marginLeft: -5,
+        marginTop: -5,
+        borderRadius: '50%',
+        background: color,
+        boxShadow: `0 0 6px ${color}`,
+      }}
+    />
+  );
+}

manifold/src/console/OutputEditor.tsx

@@ -5,6 +5,7 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
 import { CurvePad } from './CurvePad';
+import { DualRange } from './DualRange';
 import type { MFParam, ParamStatus } from './model';
 
 const OE_STATUS: { v: ParamStatus; label: string; color: string }[] = [
@@ -160,8 +161,29 @@ export function OutputEditor({ param, onChange, onHold, onLeave, place }: Output
         })}
       </div>
 
-      <MiniSlider label="min" value={param.min} onChange={(v) => onChange({ min: v })} />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <MiniSlider label="max" value={param.max} onChange={(v) => onChange({ max: v })} />
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <span
+            style={{
+              fontSize: 10,
+              color: 'var(--fg-mute)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.08em',
+            }}
+          >
+            range
+          </span>
+          <span style={{ fontSize: 10, color: 'var(--fg-dim)', fontVariantNumeric: 'tabular-nums' }}>
+            {param.min.toFixed(2)}–{param.max.toFixed(2)}
+          </span>
+        </div>
+        <DualRange
+          min={param.min}
+          max={param.max}
+          onMin={(v) => onChange({ min: v })}
+          onMax={(v) => onChange({ max: v })}
+        />
+      </div>
       <MiniSlider
         label={isLive ? 'value · live' : 'value · static'}
         value={param.val}

manifold/src/dock/OutputControlRow.tsx

@@ -7,11 +7,11 @@
  * Writes eagerly through `onChange` into the single shared MFParam store
  * (ConsoleApp owns it) — never a second data path (dock-spec §3.2, §8).
  */
-import { useRef } from 'react';
+import type { CSSProperties } from 'react';
-import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
 import { GROUP_COLOR } from '../console/model';
 import type { MFParam, ParamStatus } from '../console/model';
 import { CurvePad } from '../console/CurvePad';
+import { DualRange } from '../console/DualRange';
 
 const STATE_META: { v: ParamStatus; label: string; color: string }[] = [
   { v: 'off', label: 'off', color: 'var(--fg-dim)' },
@@ -19,99 +19,6 @@ const STATE_META: { v: ParamStatus; label: string; color: string }[] = [
   { v: 'live', label: 'live', color: 'var(--accent)' },
 ];
 
-/** A compact dual-thumb min/max range (min blue, max orange — dock-spec §3.1). */
-function DualRange({
-  min,
-  max,
-  onMin,
-  onMax,
-}: {
-  min: number;
-  max: number;
-  onMin: (v: number) => void;
-  onMax: (v: number) => void;
-}) {
-  const track = useRef<HTMLDivElement>(null);
-  const drag = useRef<{ which: 'min' | 'max' | null }>({ which: null });
-  const valAt = (clientX: number) => {
-    const el = track.current;
-    if (!el) return 0;
-    const r = el.getBoundingClientRect();
-    return Math.max(0, Math.min(1, (clientX - r.left) / r.width));
-  };
-  const down = (e: ReactPointerEvent<HTMLDivElement>) => {
-    e.currentTarget.setPointerCapture?.(e.pointerId);
-    const v = valAt(e.clientX);
-    drag.current.which = Math.abs(v - min) <= Math.abs(v - max) ? 'min' : 'max';
-    apply(v);
-  };
-  const apply = (v: number) => {
-    if (drag.current.which === 'min') onMin(Math.min(v, max));
-    else if (drag.current.which === 'max') onMax(Math.max(v, min));
-  };
-  const move = (e: ReactPointerEvent<HTMLDivElement>) => {
-    if (drag.current.which) apply(valAt(e.clientX));
-  };
-  const up = () => {
-    drag.current.which = null;
-  };
-  return (
-    <div
-      ref={track}
-      onPointerDown={down}
-      onPointerMove={move}
-      onPointerUp={up}
-      onPointerCancel={up}
-      title={`range ${min.toFixed(2)}–${max.toFixed(2)}`}
-      style={{
-        position: 'relative',
-        height: 16,
-        flex: 1,
-        minWidth: 60,
-        background: 'var(--bg-1)',
-        border: '1px solid var(--line)',
-        borderRadius: 'var(--r-pill)',
-        cursor: 'ew-resize',
-        touchAction: 'none',
-      }}
-    >
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: `${min * 100}%`,
-          right: `${(1 - max) * 100}%`,
-          background: 'linear-gradient(90deg, #4488ff, var(--accent))',
-          opacity: 0.4,
-          borderRadius: 'var(--r-pill)',
-        }}
-      />
-      <Thumb pct={min} color="#4488ff" />
-      <Thumb pct={max} color="var(--accent)" />
-    </div>
-  );
-}
-
-function Thumb({ pct, color }: { pct: number; color: string }) {
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        top: '50%',
-        left: `${pct * 100}%`,
-        width: 10,
-        height: 10,
-        marginLeft: -5,
-        marginTop: -5,
-        borderRadius: '50%',
-        background: color,
-        boxShadow: `0 0 6px ${color}`,
-      }}
-    />
-  );
-}
-
 function GlyphToggle({
   on,
   glyph,