@n-uf/hypr-tiling 26.7.0

package/dist/devtools.mjs

@@ -0,0 +1,2286 @@
+import {
+  DEFAULT_DRAG_HOP_EASING,
+  DEFAULT_GHOST_PICKUP_SCALE_PERCENT,
+  DRAG_ANIMATION_SPEED_MAX_PERCENT,
+  DRAG_ANIMATION_SPEED_MIN_PERCENT,
+  GHOST_PICKUP_SCALE_MAX_PERCENT,
+  GHOST_PICKUP_SCALE_MIN_PERCENT,
+  SWAP_BOUNCE_MAX_PERCENT,
+  SWAP_BOUNCE_MIN_PERCENT,
+  TILING_OBSERVABILITY_COLOR_DEFAULTS,
+  TILING_OBSERVABILITY_COLOR_ENABLE_DEFAULTS,
+  TilingRendererWithObservability,
+  insertLeafAdjacent,
+  moveLeafToRoot,
+  moveLeafToSplitContainer,
+  resolveDragAnimationDurationMs,
+  toggleSplitAxis,
+  usePrefersReducedMotion
+} from "./chunk-ZCGZOWOY.mjs";
+
+// react/tiling-observability-panel.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ANIMATION_CONTROL_DEFAULTS = {
+  speedLinked: true,
+  ghostTransitSpeedPercent: 100,
+  survivorReflowSpeedPercent: 100,
+  swapBounceMagnitudePercent: 30,
+  ghostPickupScalePercent: DEFAULT_GHOST_PICKUP_SCALE_PERCENT,
+  coherentTransit: true
+};
+var DRAG_HOP_EASING_PRESETS = [
+  { id: "snappy", label: "snappy", value: DEFAULT_DRAG_HOP_EASING },
+  { id: "linear", label: "linear", value: "linear" },
+  { id: "ease-out", label: "ease out", value: "ease-out" },
+  { id: "overshoot", label: "overshoot", value: "cubic-bezier(0.34, 1.56, 0.64, 1)" }
+];
+var LIVE_LEDGER_RETENTION_LIMIT = 60;
+var CONTROL_PANE_WIDTH_PX = 320;
+var CONTROL_PANE_STATUS_LINE_HEIGHT_PX = 16;
+var CONTROL_PANE_STATUS_BADGE_WIDTH_CLASS = "w-20";
+var CONTROL_PANE_INTENT_BADGE_RESERVED_ROWS = 1;
+var CONTROL_PANE_INTENT_BADGE_RESERVED_HEIGHT_PX = CONTROL_PANE_STATUS_LINE_HEIGHT_PX * CONTROL_PANE_INTENT_BADGE_RESERVED_ROWS;
+var CONTROL_PANE_REASON_RESERVED_ROWS = 3;
+var CONTROL_PANE_REASON_RESERVED_HEIGHT_PX = CONTROL_PANE_STATUS_LINE_HEIGHT_PX * CONTROL_PANE_REASON_RESERVED_ROWS;
+var RESIZE_CAPABILITY_OPTIONS = [
+  { value: "both", label: "entire", title: "Resize every divider (width + height)" },
+  { value: "horizontal", label: "hor", title: "Resize only width dividers (side-by-side panes, x-axis)" },
+  { value: "vertical", label: "ver", title: "Resize only height dividers (stacked panes, y-axis)" },
+  { value: "none", label: "none", title: "Disable all divider resizing" }
+];
+var DRAG_MODE_OPTIONS = [
+  { value: "live", label: "live", title: "Hyprland-style detach: source leaf is detached on pickup, the remaining tree reflows once to close the gap, a ghost follows the cursor, and the drop commits once on release (reverts on cancel/Escape)" },
+  { value: "preview", label: "preview", title: "Non-committing preview via translucent projected landing overlays (S' / T' / successor); layout tree untouched until drop" }
+];
+var SLOT_COMMITMENT_OPTIONS = [
+  { value: "delta-responsive", label: "delta", title: "Delta-responsive (default): after the ghost hops into a slot, it re-evaluates the target eagerly once the cursor travels beyond the re-aim delta (24px) from the seat anchor \u2014 re-aim without fully exiting the pane" },
+  { value: "zone-exit-hold", label: "hold", title: "Zone-exit hold (anchored / sticky): after the ghost hops into a slot it stays pinned through small cursor movements; the target re-resolves only when the cursor crosses OUT of the seated pane's hit zone" }
+];
+var LIVE_STATUS_VISIBILITY_OPTIONS = [
+  { value: false, label: "off", title: "Hide the live status readout (default)" },
+  { value: true, label: "on", title: "Show the live status readout (mode / drag mode / ghost / source / target / intent / validity / telemetry / blocked reason)" }
+];
+function keyChordModifierPrefix(modifiers) {
+  const parts = [
+    modifiers.ctrl ? "Ctrl" : null,
+    modifiers.alt ? "Alt" : null,
+    modifiers.shift ? "Shift" : null,
+    modifiers.meta ? "Meta" : null
+  ].filter((part) => part != null);
+  return parts.join("+");
+}
+function formatKeyModifiersLabel(modifiers) {
+  const prefix = keyChordModifierPrefix(modifiers);
+  return prefix.length === 0 ? "(none)" : prefix;
+}
+function formatKeyCodeLabel(code) {
+  if (code === "BracketLeft") {
+    return "[";
+  }
+  if (code === "BracketRight") {
+    return "]";
+  }
+  if (code === "Escape") {
+    return "Esc";
+  }
+  const digitMatch = /^Digit([0-9])$/.exec(code);
+  if (digitMatch != null) {
+    return digitMatch[1];
+  }
+  return code;
+}
+function formatKeyChordLabel(chord) {
+  const prefix = keyChordModifierPrefix(chord);
+  const keyLabel = formatKeyCodeLabel(chord.code);
+  return prefix.length === 0 ? keyLabel : `${prefix}+${keyLabel}`;
+}
+function axisPathLabel(axisPath) {
+  if (axisPath.length === 0) {
+    return "none";
+  }
+  return axisPath.join(" -> ");
+}
+function normalizeReasonToken(reason) {
+  if (reason == null || reason.trim().length === 0) {
+    return "none";
+  }
+  if (reason === "none") {
+    return "none";
+  }
+  return reason.replace(/[-_]+/g, " ").toLowerCase();
+}
+function normalizeReasonList(reasons) {
+  if (reasons.length === 0) {
+    return "none";
+  }
+  return reasons.map((reason) => normalizeReasonToken(reason)).join(" | ");
+}
+function readIntentToken(input) {
+  const isBlocked = input.validityLabel === "blocked" || input.action === "none" && input.blockedReasonLabel !== "none";
+  if (isBlocked) {
+    return "blocked";
+  }
+  if (input.action === "swap") {
+    return "swap";
+  }
+  if (input.action === "edge-insert") {
+    if (input.edgeLabel === "left") {
+      return "left";
+    }
+    if (input.edgeLabel === "right") {
+      return "right";
+    }
+    if (input.edgeLabel === "top") {
+      return "top";
+    }
+    if (input.edgeLabel === "bottom") {
+      return "bottom";
+    }
+    return "split";
+  }
+  if (input.action === "split-container-insert") {
+    return "split";
+  }
+  return "none";
+}
+function readIntentBadgeClass(intentToken) {
+  if (intentToken === "blocked") {
+    return "bg-rose-500";
+  }
+  if (intentToken === "swap") {
+    return "bg-emerald-500";
+  }
+  if (intentToken === "left") {
+    return "bg-sky-500";
+  }
+  if (intentToken === "right") {
+    return "bg-violet-500";
+  }
+  if (intentToken === "top") {
+    return "bg-amber-500";
+  }
+  if (intentToken === "bottom") {
+    return "bg-teal-500";
+  }
+  if (intentToken === "split") {
+    return "bg-cyan-500";
+  }
+  return "bg-slate-500";
+}
+var GROUP_TOGGLE_OPTIONS = [
+  { value: false, label: "off" },
+  { value: true, label: "on" }
+];
+function SegmentedToggle(props) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", role: "group", "aria-label": props.ariaLabel, children: GROUP_TOGGLE_OPTIONS.map((option) => {
+    const isActive = props.enabled === option.value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": isActive,
+        title: option.value ? props.onTitle : props.offTitle,
+        onClick: () => props.onEnabledChange(option.value),
+        className: `rounded border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.1em] transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/55 focus-visible:ring-offset-1 focus-visible:ring-offset-slate-950 motion-reduce:transition-none ${isActive ? "border-cyan-300/70 bg-cyan-500/20 text-cyan-100" : "border-white/10 bg-slate-950 text-slate-400 hover:border-white/25"}`,
+        children: option.label
+      },
+      `${props.ariaLabel}-${option.label}`
+    );
+  }) });
+}
+function StickyPinToggle(props) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": props.sticky,
+      "aria-label": props.ariaLabel,
+      title: "Pin this section above the scroll area so it stays visible (sticky). Off by default; toggles independently of on/off.",
+      onClick: () => props.onStickyChange(!props.sticky),
+      className: `rounded border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.1em] transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/55 focus-visible:ring-offset-1 focus-visible:ring-offset-slate-950 motion-reduce:transition-none ${props.sticky ? "border-amber-300/70 bg-amber-500/20 text-amber-100" : "border-white/10 bg-slate-950 text-slate-400 hover:border-white/25"}`,
+      children: "pin"
+    }
+  );
+}
+function GroupToggleHeader(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate font-mono text-[10px] uppercase tracking-[0.13em] text-slate-500", children: props.label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        StickyPinToggle,
+        {
+          sticky: props.sticky,
+          onStickyChange: props.onStickyChange,
+          ariaLabel: `${props.ariaLabel} sticky`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SegmentedToggle,
+        {
+          enabled: props.enabled,
+          onEnabledChange: props.onEnabledChange,
+          ariaLabel: props.ariaLabel,
+          offTitle: props.offTitle,
+          onTitle: props.onTitle
+        }
+      )
+    ] })
+  ] });
+}
+var RANGE_SLIDER_STYLE = `
+.hypr-range-scope input[type="range"].hypr-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 16px;
+  background: transparent;
+  cursor: pointer;
+}
+.hypr-range-scope input[type="range"].hypr-range:focus {
+  outline: none;
+}
+.hypr-range-scope input[type="range"].hypr-range::-webkit-slider-runnable-track {
+  height: 6px;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(
+    to right,
+    rgba(34, 211, 238, 0.9) 0%,
+    rgba(34, 211, 238, 0.9) var(--hypr-range-fill, 0%),
+    rgba(148, 163, 184, 0.22) var(--hypr-range-fill, 0%),
+    rgba(148, 163, 184, 0.22) 100%
+  );
+}
+.hypr-range-scope input[type="range"].hypr-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -7px;
+  height: 16px;
+  width: 16px;
+  border-radius: 9999px;
+  background: #cffafe;
+  border: 2px solid rgba(34, 211, 238, 0.95);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55);
+  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
+}
+.hypr-range-scope input[type="range"].hypr-range:hover::-webkit-slider-thumb {
+  transform: scale(1.15);
+}
+.hypr-range-scope input[type="range"].hypr-range:active::-webkit-slider-thumb {
+  transform: scale(1.25);
+  background: #ffffff;
+}
+.hypr-range-scope input[type="range"].hypr-range:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.45);
+}
+.hypr-range-scope input[type="range"].hypr-range::-moz-range-track {
+  height: 6px;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(148, 163, 184, 0.22);
+}
+.hypr-range-scope input[type="range"].hypr-range::-moz-range-progress {
+  height: 6px;
+  border-radius: 9999px;
+  background: rgba(34, 211, 238, 0.9);
+}
+.hypr-range-scope input[type="range"].hypr-range::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 9999px;
+  background: #cffafe;
+  border: 2px solid rgba(34, 211, 238, 0.95);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
+  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
+}
+.hypr-range-scope input[type="range"].hypr-range:hover::-moz-range-thumb {
+  transform: scale(1.15);
+}
+.hypr-range-scope input[type="range"].hypr-range:active::-moz-range-thumb {
+  transform: scale(1.25);
+  background: #ffffff;
+}
+.hypr-range-scope input[type="range"].hypr-range:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.45);
+}
+.hypr-range-scope input[type="range"].hypr-range:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.hypr-range-scope input[type="range"].hypr-range:disabled::-webkit-slider-thumb {
+  transform: none;
+}
+.hypr-range-scope input[type="range"].hypr-range:disabled::-moz-range-thumb {
+  transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hypr-range-scope input[type="range"].hypr-range::-webkit-slider-thumb,
+  .hypr-range-scope input[type="range"].hypr-range::-moz-range-thumb {
+    transition: none;
+  }
+}
+`;
+var STYLED_CHECKBOX_STYLE_HREF = "hypr-tiling-styled-checkbox";
+var CHECKBOX_STYLE = `
+.hpt-checkbox-box {
+  position: relative;
+  display: inline-flex;
+  height: 16px;
+  width: 16px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+.hpt-checkbox {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 4px;
+  border: 1px solid rgb(255 255 255 / 0.25);
+  background-color: rgb(2 6 23);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45);
+  color-scheme: dark;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+.hpt-checkbox:hover {
+  border-color: rgb(103 232 249 / 0.6);
+}
+.hpt-checkbox:checked {
+  background-color: rgb(34 211 238);
+  border-color: rgb(103 232 249);
+  box-shadow: 0 0 0 1px rgb(34 211 238 / 0.45);
+}
+.hpt-checkbox:focus-visible {
+  box-shadow: 0 0 0 2px rgb(34 211 238 / 0.65) !important;
+}
+.hpt-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.hpt-checkbox-tick {
+  position: relative;
+  height: 14px;
+  width: 14px;
+  color: rgb(2 6 23);
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: opacity 150ms, transform 150ms;
+}
+.hpt-checkbox:checked ~ .hpt-checkbox-tick {
+  opacity: 1;
+  transform: scale(1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .hpt-checkbox,
+  .hpt-checkbox-tick {
+    transition: none;
+  }
+}
+`;
+function StyledCheckbox(props) {
+  return /* @__PURE__ */ jsxs("span", { className: "hpt-checkbox-box", children: [
+    /* @__PURE__ */ jsx("style", { href: STYLED_CHECKBOX_STYLE_HREF, precedence: "default", children: CHECKBOX_STYLE }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "hpt-checkbox",
+        checked: props.checked,
+        disabled: props.disabled,
+        title: props.title,
+        "aria-label": props.ariaLabel,
+        onChange: (event) => props.onChange(event.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsx("svg", { className: "hpt-checkbox-tick", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M3.5 8.5l3 3 6-7",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) })
+  ] });
+}
+function RangeSlider(props) {
+  const span = props.max - props.min;
+  const ratio = span <= 0 ? 0 : (props.value - props.min) / span;
+  const clamped = Math.min(1, Math.max(0, ratio));
+  const fillStyle = { "--hypr-range-fill": `${clamped * 100}%` };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "range",
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      value: props.value,
+      disabled: props.disabled,
+      title: props.title,
+      "aria-label": props.ariaLabel,
+      style: fillStyle,
+      onChange: (event) => props.onChange(Number(event.target.value)),
+      className: "hypr-range w-full"
+    }
+  );
+}
+function SubjectColorRow(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        StyledCheckbox,
+        {
+          checked: props.enabled,
+          onChange: props.onEnabledChange,
+          title: `Enable ${props.label} overlay`
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: props.label })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        value: props.color,
+        disabled: !props.enabled,
+        onChange: (event) => props.onColorChange(event.target.value),
+        className: "h-7 w-12 shrink-0 rounded border border-white/15 bg-slate-950 disabled:opacity-40"
+      }
+    )
+  ] });
+}
+function hasEnabledProjectedFill(enables) {
+  return enables.projectedSourceFillEnabled || enables.projectedTargetFillEnabled || enables.projectedSuccessorFillEnabled;
+}
+function TilingObservabilityPanel(props) {
+  const isLiveDragModeActive = props.interactionCapabilities.dragMode === "live";
+  const isDraggingActive = props.liveHitLog?.isDragging === true || props.liveDropIntent != null;
+  const isHoveringActive = props.liveHitLog != null && !isDraggingActive;
+  const isLiveStatusIdle = !isDraggingActive && !isHoveringActive;
+  const liveModeLabel = isLiveStatusIdle ? "idle" : isDraggingActive ? "dragging" : "hovering";
+  const liveGhostLabel = !isLiveDragModeActive ? "n/a (preview)" : isDraggingActive && props.liveHitLog?.dragSourceLeafId != null ? `detached ${props.liveHitLog.dragSourceLeafId}` : "idle";
+  const liveSourceLabel = isLiveStatusIdle ? "none" : isDraggingActive ? props.liveHitLog?.sourceLeafId ?? "none" : props.liveHitLog?.sourceLeafId ?? "none";
+  const liveTargetLabel = isLiveStatusIdle ? "none" : isDraggingActive ? props.liveDropIntent?.leafId ?? props.liveHitLog?.hoveredLeafId ?? "none" : props.liveHitLog?.hoveredLeafId ?? "none";
+  const liveIntentAction = isLiveStatusIdle ? "none" : props.liveDropIntent?.action ?? props.liveHitLog?.intent?.action ?? "none";
+  const liveIntentEdgeLabel = isLiveStatusIdle ? "none" : props.liveDropIntent?.finalEdge ?? props.liveDropIntent?.selectedSplitZone ?? props.liveHitLog?.intent?.finalEdge ?? props.liveHitLog?.intent?.selectedSplitZone ?? "none";
+  const liveValidityLabel = isLiveStatusIdle ? "none" : props.liveHitLog?.centerIsValid == null ? liveIntentAction === "none" ? "none" : "unknown" : props.liveHitLog.centerIsValid ? "valid" : "blocked";
+  const liveBlockedReasonLabel = isLiveStatusIdle ? "none" : props.liveHitLog?.centerBlockedReason ?? props.liveDropIntent?.blockedReason ?? props.liveHitLog?.intent?.blockedReason ?? "none";
+  const liveIntentToken = readIntentToken({
+    action: liveIntentAction,
+    edgeLabel: liveIntentEdgeLabel,
+    blockedReasonLabel: liveBlockedReasonLabel,
+    validityLabel: liveValidityLabel
+  });
+  const liveIntentBadgeClass = readIntentBadgeClass(liveIntentToken);
+  const liveCursorXLabel = props.liveHitLog == null ? "none" : props.liveHitLog.cursorViewport.x.toFixed(1);
+  const liveCursorYLabel = props.liveHitLog == null ? "none" : props.liveHitLog.cursorViewport.y.toFixed(1);
+  const sourcePaneFootprint = props.liveHitLog?.sourcePaneFootprint ?? null;
+  const liveSourceXLabel = sourcePaneFootprint == null ? "none" : sourcePaneFootprint.left.toFixed(1);
+  const liveSourceYLabel = sourcePaneFootprint == null ? "none" : sourcePaneFootprint.top.toFixed(1);
+  const liveSourceXPlusWLabel = sourcePaneFootprint == null ? "none" : (sourcePaneFootprint.left + sourcePaneFootprint.width).toFixed(1);
+  const liveSourceYPlusHLabel = sourcePaneFootprint == null ? "none" : (sourcePaneFootprint.top + sourcePaneFootprint.height).toFixed(1);
+  const updateObservabilityColor = React.useCallback(
+    (field, value) => {
+      props.setObservabilityColors((previous) => ({
+        ...previous,
+        [field]: value
+      }));
+    },
+    [props]
+  );
+  const updateObservabilityColorEnable = React.useCallback(
+    (field, value) => {
+      props.setObservabilityColorEnables(
+        (previous) => ({
+          ...previous,
+          [field]: value
+        })
+      );
+    },
+    [props]
+  );
+  const projectedFillAlphaEnabled = hasEnabledProjectedFill(props.observabilityColorEnables);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const resolvedGhostTransitDurationMs = resolveDragAnimationDurationMs(props.ghostTransitSpeedPercent);
+  const resolvedSurvivorReflowDurationMs = resolveDragAnimationDurationMs(props.survivorReflowSpeedPercent);
+  const liveStatusReadout = /* @__PURE__ */ jsxs("section", { className: "shrink-0 min-w-0 max-w-full overflow-hidden rounded border border-cyan-300/40 bg-slate-900/90 p-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "font-mono text-[9px] uppercase tracking-[0.12em] text-cyan-200", children: "live status" }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 grid grid-cols-2 gap-x-2 gap-y-0.5 font-mono text-[10px] uppercase tracking-[0.12em]", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-slate-500", children: "mode" }),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-200", children: liveModeLabel }),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-500", title: "Drag feedback mode: preview (projected S'/T'/successor overlays) vs live (Hyprland detach: source detached on pickup, ghost follows cursor, commit on release)", children: "drag mode" }),
+      /* @__PURE__ */ jsx("div", { className: isLiveDragModeActive ? "text-cyan-200" : "text-slate-200", children: props.interactionCapabilities.dragMode }),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-500", title: "Live (Hyprland) ghost: the dragged source detached from the frozen tree and following the cursor", children: "ghost" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: isLiveDragModeActive && isDraggingActive && props.liveHitLog?.dragSourceLeafId != null ? "text-cyan-200" : "text-slate-200",
+          title: "Live (Hyprland) ghost: the dragged source detached from the frozen tree and following the cursor",
+          children: liveGhostLabel
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-500", title: "Pane currently under the cursor", children: "source" }),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-200", title: "Pane currently under the cursor", children: liveSourceLabel }),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-500", title: "Drop resolver hover target", children: "target" }),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-200", title: "Drop resolver hover target", children: liveTargetLabel }),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-500", children: "intent" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "min-w-0 max-w-full overflow-hidden",
+          style: {
+            height: CONTROL_PANE_INTENT_BADGE_RESERVED_HEIGHT_PX,
+            minHeight: CONTROL_PANE_INTENT_BADGE_RESERVED_HEIGHT_PX,
+            maxHeight: CONTROL_PANE_INTENT_BADGE_RESERVED_HEIGHT_PX,
+            lineHeight: CONTROL_PANE_STATUS_LINE_HEIGHT_PX / 16
+          },
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${CONTROL_PANE_STATUS_BADGE_WIDTH_CLASS} ${liveIntentBadgeClass} inline-flex max-w-full items-center justify-center rounded px-2 py-0.5 font-semibold uppercase tracking-[0.12em] text-white whitespace-nowrap`,
+              children: liveIntentToken
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "text-slate-500", children: "validity" }),
+      /* @__PURE__ */ jsx("div", { className: liveValidityLabel === "blocked" ? "text-rose-200" : "text-emerald-200", children: liveValidityLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/70 px-1.5 py-0.5 text-slate-200", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-0.5 font-mono text-[9px] uppercase tracking-[0.11em] text-slate-500", children: "telemetry" }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid w-full min-w-0 max-w-full gap-1",
+          style: {
+            gridTemplateColumns: "repeat(auto-fit, minmax(118px, 1fr))"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 w-full rounded border border-white/10 bg-slate-900/80 px-1.5 py-0.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-mono text-[9px] uppercase tracking-[0.1em] text-slate-500", children: "cursor" }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-0.5 space-y-0.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-slate-500", children: "x" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-x-auto whitespace-nowrap text-right text-[10px] tabular-nums", children: liveCursorXLabel })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-slate-500", children: "y" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-x-auto whitespace-nowrap text-right text-[10px] tabular-nums", children: liveCursorYLabel })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 w-full rounded border border-white/10 bg-slate-900/80 px-1.5 py-0.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-mono text-[9px] uppercase tracking-[0.1em] text-slate-500", children: "source pane" }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-0.5 space-y-0.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-slate-500", children: "x" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-x-auto whitespace-nowrap text-right text-[10px] tabular-nums", children: liveSourceXLabel })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-slate-500", children: "y" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-x-auto whitespace-nowrap text-right text-[10px] tabular-nums", children: liveSourceYLabel })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-slate-500", children: "x+w" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-x-auto whitespace-nowrap text-right text-[10px] tabular-nums", children: liveSourceXPlusWLabel })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-slate-500", children: "y+h" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-x-auto whitespace-nowrap text-right text-[10px] tabular-nums", children: liveSourceYPlusHLabel })
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mt-1.5 min-w-0 max-w-full rounded border border-white/10 bg-slate-950/70 px-2 py-1 font-mono text-[10px] tracking-[0.12em] text-slate-300",
+        style: {
+          height: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+          minHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+          maxHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+          lineHeight: CONTROL_PANE_STATUS_LINE_HEIGHT_PX / 16
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "text-slate-500 uppercase", children: "blocked reason:" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 overflow-x-auto whitespace-nowrap normal-case", children: normalizeReasonToken(liveBlockedReasonLabel) })
+        ]
+      }
+    )
+  ] });
+  const previewOverlaysGroup = /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+    /* @__PURE__ */ jsx(
+      GroupToggleHeader,
+      {
+        label: "preview overlays",
+        enabled: props.previewOverlaysEnabled,
+        onEnabledChange: props.setPreviewOverlaysEnabled,
+        sticky: props.previewOverlaysSticky,
+        onStickyChange: props.setPreviewOverlaysSticky,
+        ariaLabel: "preview overlays group",
+        offTitle: "Disable the projected overlay layers (S' / T' / successor landing geometry) and collapse the controls. Per-control states are preserved for re-enabling. Debugging aid: off by default.",
+        onTitle: "Enable the projected overlay layers and expand the controls (projected geometry layers + shared fill alpha)."
+      }
+    ),
+    props.previewOverlaysEnabled ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300", title: "Show projected geometry overlays from reducer projection", children: [
+        /* @__PURE__ */ jsx(
+          StyledCheckbox,
+          {
+            checked: props.showDropPreviewOverlays,
+            onChange: props.setShowDropPreviewOverlays
+          }
+        ),
+        "show projected overlay layers"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/70 p-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "projected overlay fill alpha (shared): ",
+          projectedFillAlphaEnabled ? `${props.projectedOverlayBgAlphaPercent}%` : "off (no fill enabled)"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: 0,
+            max: 100,
+            step: 1,
+            disabled: !projectedFillAlphaEnabled,
+            value: props.projectedOverlayBgAlphaPercent,
+            onChange: props.setProjectedOverlayBgAlphaPercent,
+            title: "Shared fill transparency for enabled projected source/target/successor fills"
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+  const subjectColorsGroup = /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+    /* @__PURE__ */ jsx(
+      GroupToggleHeader,
+      {
+        label: "subject colors",
+        enabled: props.subjectColorsEnabled,
+        onEnabledChange: props.setSubjectColorsEnabled,
+        sticky: props.subjectColorsSticky,
+        onStickyChange: props.setSubjectColorsSticky,
+        ariaLabel: "subject colors group",
+        offTitle: "Disable all subject-color overlays (drag source/target borders and projected source/target/successor borders & fills) and collapse the controls. Per-color states are preserved for re-enabling. Debugging aid: off by default.",
+        onTitle: "Enable the subject-color overlays and expand the per-subject color/enable rows."
+      }
+    ),
+    props.subjectColorsEnabled ? /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        SubjectColorRow,
+        {
+          label: "drag source border",
+          enabled: props.observabilityColorEnables.dragSourceBorderEnabled,
+          color: props.observabilityColors.dragSourceBorderColorHex,
+          onEnabledChange: (enabled) => updateObservabilityColorEnable("dragSourceBorderEnabled", enabled),
+          onColorChange: (color) => updateObservabilityColor("dragSourceBorderColorHex", color)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubjectColorRow,
+        {
+          label: "drag target border",
+          enabled: props.observabilityColorEnables.dragTargetBorderEnabled,
+          color: props.observabilityColors.dragTargetBorderColorHex,
+          onEnabledChange: (enabled) => updateObservabilityColorEnable("dragTargetBorderEnabled", enabled),
+          onColorChange: (color) => updateObservabilityColor("dragTargetBorderColorHex", color)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubjectColorRow,
+        {
+          label: "projected source border",
+          enabled: props.observabilityColorEnables.projectedSourceBorderEnabled,
+          color: props.observabilityColors.projectedSourceBorderColorHex,
+          onEnabledChange: (enabled) => updateObservabilityColorEnable("projectedSourceBorderEnabled", enabled),
+          onColorChange: (color) => updateObservabilityColor("projectedSourceBorderColorHex", color)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubjectColorRow,
+        {
+          label: "projected target border",
+          enabled: props.observabilityColorEnables.projectedTargetBorderEnabled,
+          color: props.observabilityColors.projectedTargetBorderColorHex,
+          onEnabledChange: (enabled) => updateObservabilityColorEnable("projectedTargetBorderEnabled", enabled),
+          onColorChange: (color) => updateObservabilityColor("projectedTargetBorderColorHex", color)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubjectColorRow,
+        {
+          label: "projected source fill",
+          enabled: props.observabilityColorEnables.projectedSourceFillEnabled,
+          color: props.observabilityColors.projectedSourceFillColorHex,
+          onEnabledChange: (enabled) => updateObservabilityColorEnable("projectedSourceFillEnabled", enabled),
+          onColorChange: (color) => updateObservabilityColor("projectedSourceFillColorHex", color)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubjectColorRow,
+        {
+          label: "projected target fill",
+          enabled: props.observabilityColorEnables.projectedTargetFillEnabled,
+          color: props.observabilityColors.projectedTargetFillColorHex,
+          onEnabledChange: (enabled) => updateObservabilityColorEnable("projectedTargetFillEnabled", enabled),
+          onColorChange: (color) => updateObservabilityColor("projectedTargetFillColorHex", color)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubjectColorRow,
+        {
+          label: "projected successor border",
+          enabled: props.observabilityColorEnables.projectedSuccessorBorderEnabled,
+          color: props.observabilityColors.projectedSuccessorBorderColorHex,
+          onEnabledChange: (enabled) => updateObservabilityColorEnable("projectedSuccessorBorderEnabled", enabled),
+          onColorChange: (color) => updateObservabilityColor("projectedSuccessorBorderColorHex", color)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubjectColorRow,
+        {
+          label: "projected successor fill",
+          enabled: props.observabilityColorEnables.projectedSuccessorFillEnabled,
+          color: props.observabilityColors.projectedSuccessorFillColorHex,
+          onEnabledChange: (enabled) => updateObservabilityColorEnable("projectedSuccessorFillEnabled", enabled),
+          onColorChange: (color) => updateObservabilityColor("projectedSuccessorFillColorHex", color)
+        }
+      )
+    ] }) : null
+  ] });
+  const dropIntentDebugGroup = /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+    /* @__PURE__ */ jsx(
+      GroupToggleHeader,
+      {
+        label: "drop intent debug",
+        enabled: props.dropIntentDebugEnabled,
+        onEnabledChange: props.setDropIntentDebugEnabled,
+        sticky: props.dropIntentDebugSticky,
+        onStickyChange: props.setDropIntentDebugSticky,
+        ariaLabel: "drop intent debug group",
+        offTitle: "Disable the in-pane drop-intent debug visuals (directional border hints, hint background, debug labels) and collapse the controls. Per-control states are preserved for re-enabling. Debugging aid: off by default.",
+        onTitle: "Enable the in-pane drop-intent debug visuals and expand the controls (border hints, hint background, debug labels)."
+      }
+    ),
+    props.dropIntentDebugEnabled ? /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300", title: "In-pane directional border hints (left/right/top/bottom/center). Requires drag target border enabled.", children: [
+        /* @__PURE__ */ jsx(
+          StyledCheckbox,
+          {
+            checked: props.showDropBorderHints,
+            onChange: props.setShowDropBorderHints
+          }
+        ),
+        "show drop intent border hints"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+          title: "Enable translucent fill for in-pane drop intent hints only (left/right/top/bottom/center)",
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledCheckbox,
+              {
+                checked: props.showDropIntentTranslucentBg,
+                onChange: props.setShowDropIntentTranslucentBg
+              }
+            ),
+            "show drop intent hint background"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300", title: "Debug labels for drag source, drop target, and drop intent", children: [
+        /* @__PURE__ */ jsx(
+          StyledCheckbox,
+          {
+            checked: props.showDropIntentDebug,
+            onChange: props.setShowDropIntentDebug
+          }
+        ),
+        "show drop intent debug labels"
+      ] })
+    ] }) : null
+  ] });
+  const hitZoneOverlaysGroup = /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+    /* @__PURE__ */ jsx(
+      GroupToggleHeader,
+      {
+        label: "hit-zone overlays",
+        enabled: props.hitZoneOverlaysEnabled,
+        onEnabledChange: props.setHitZoneOverlaysEnabled,
+        sticky: props.hitZoneOverlaysSticky,
+        onStickyChange: props.setHitZoneOverlaysSticky,
+        ariaLabel: "hit-zone overlays group",
+        offTitle: "Disable the persistent pane hit-zone debug overlay (center swap / edge split zones) and collapse the controls. Per-control states (alpha, subject colors) are preserved for re-enabling. Transient geometry-adjustment previews still fire. Debugging aid: off by default.",
+        onTitle: "Enable the persistent pane hit-zone debug overlay across every pane and expand the controls (alpha, subject colors)."
+      }
+    ),
+    props.hitZoneOverlaysEnabled ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+          title: "Always show center swap and edge split hit zones for every pane",
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledCheckbox,
+              {
+                checked: props.showPaneHitZones,
+                onChange: props.setShowPaneHitZones
+              }
+            ),
+            "show pane hit zones"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/70 p-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "pane hit-zone alpha: ",
+          props.paneHitZonesAlphaPercent,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: 0,
+            max: 100,
+            step: 1,
+            value: props.paneHitZonesAlphaPercent,
+            onChange: props.setPaneHitZonesAlphaPercent,
+            title: "Hit-zone overlay transparency"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/70 p-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: "hit-zone subject colors" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+            "left edge",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: props.observabilityColors.hitZoneLeftColorHex,
+                onChange: (event) => updateObservabilityColor("hitZoneLeftColorHex", event.target.value),
+                className: "h-7 w-12 shrink-0 rounded border border-white/15 bg-slate-950"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+            "right edge",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: props.observabilityColors.hitZoneRightColorHex,
+                onChange: (event) => updateObservabilityColor("hitZoneRightColorHex", event.target.value),
+                className: "h-7 w-12 shrink-0 rounded border border-white/15 bg-slate-950"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+            "top edge",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: props.observabilityColors.hitZoneTopColorHex,
+                onChange: (event) => updateObservabilityColor("hitZoneTopColorHex", event.target.value),
+                className: "h-7 w-12 shrink-0 rounded border border-white/15 bg-slate-950"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+            "bottom edge",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: props.observabilityColors.hitZoneBottomColorHex,
+                onChange: (event) => updateObservabilityColor("hitZoneBottomColorHex", event.target.value),
+                className: "h-7 w-12 shrink-0 rounded border border-white/15 bg-slate-950"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+            "center zone",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: props.observabilityColors.hitZoneCenterColorHex,
+                onChange: (event) => updateObservabilityColor("hitZoneCenterColorHex", event.target.value),
+                className: "h-7 w-12 shrink-0 rounded border border-white/15 bg-slate-950"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+            "blocked zone",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: props.observabilityColors.hitZoneBlockedColorHex,
+                onChange: (event) => updateObservabilityColor("hitZoneBlockedColorHex", event.target.value),
+                className: "h-7 w-12 shrink-0 rounded border border-white/15 bg-slate-950"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }) : null
+  ] });
+  const hitZoneGeometryGroup = /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+    /* @__PURE__ */ jsx(
+      GroupToggleHeader,
+      {
+        label: "hit-zone geometry",
+        enabled: props.hitZoneGeometryEnabled,
+        onEnabledChange: props.setHitZoneGeometryEnabled,
+        sticky: props.hitZoneGeometrySticky,
+        onStickyChange: props.setHitZoneGeometrySticky,
+        ariaLabel: "hit-zone geometry group",
+        offTitle: "Collapse the drop hit-zone geometry knobs (center swap fraction, center floor, hysteresis). The current geometry values stay live and keep driving zone resolution; only the controls are hidden. Advanced tuning: off by default.",
+        onTitle: "Expand the drop hit-zone geometry knobs (center swap fraction, center floor, hysteresis). Adjusting any knob briefly previews the resolved zones across EVERY pane."
+      }
+    ),
+    props.hitZoneGeometryEnabled ? /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/70 p-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "center swap X: ",
+          Math.round(props.interactionCapabilities.dropHitZoneGeometry.centerRatioX * 100),
+          "% (edge band ",
+          Math.round((1 - props.interactionCapabilities.dropHitZoneGeometry.centerRatioX) / 2 * 100),
+          "%)"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: 5,
+            max: 95,
+            step: 1,
+            value: Math.round(props.interactionCapabilities.dropHitZoneGeometry.centerRatioX * 100),
+            onChange: (value) => props.setInteractionCapabilities(
+              (previous) => ({
+                ...previous,
+                dropHitZoneGeometry: {
+                  ...previous.dropHitZoneGeometry,
+                  // X axis drives the left/right swap-zone boundary; keep the
+                  // representative `centerRatio` synced to X for the telemetry readouts.
+                  centerRatio: value / 100,
+                  centerRatioX: value / 100
+                }
+              })
+            ),
+            title: "HORIZONTAL fraction of the pane spanned by the central SWAP rectangle (drives the left/right swap-zone boundary). Independent of the vertical axis so a non-square pane can carry an axis-specific swap-zone proportion."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/70 p-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "center swap Y: ",
+          Math.round(props.interactionCapabilities.dropHitZoneGeometry.centerRatioY * 100),
+          "% (edge band ",
+          Math.round((1 - props.interactionCapabilities.dropHitZoneGeometry.centerRatioY) / 2 * 100),
+          "%)"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: 5,
+            max: 95,
+            step: 1,
+            value: Math.round(props.interactionCapabilities.dropHitZoneGeometry.centerRatioY * 100),
+            onChange: (value) => props.setInteractionCapabilities(
+              (previous) => ({
+                ...previous,
+                dropHitZoneGeometry: {
+                  ...previous.dropHitZoneGeometry,
+                  centerRatioY: value / 100
+                }
+              })
+            ),
+            title: "VERTICAL fraction of the pane spanned by the central SWAP rectangle (drives the top/bottom swap-zone boundary). Independent of the horizontal axis (per-axis centerRatio)."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/70 p-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "center floor: ",
+          props.interactionCapabilities.dropHitZoneGeometry.centerMinPx,
+          "px"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: 0,
+            max: 80,
+            step: 1,
+            value: props.interactionCapabilities.dropHitZoneGeometry.centerMinPx,
+            onChange: (value) => props.setInteractionCapabilities(
+              (previous) => ({
+                ...previous,
+                dropHitZoneGeometry: {
+                  ...previous.dropHitZoneGeometry,
+                  centerMinPx: value
+                }
+              })
+            ),
+            title: "Floor (CSS px) for the center rectangle extent so tiny panes keep a usable swap target when width * centerRatio would collapse it."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/70 p-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "hysteresis: ",
+          props.interactionCapabilities.dropHitZoneGeometry.hysteresisPx,
+          "px"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: 0,
+            max: 24,
+            step: 1,
+            value: props.interactionCapabilities.dropHitZoneGeometry.hysteresisPx,
+            onChange: (value) => props.setInteractionCapabilities(
+              (previous) => ({
+                ...previous,
+                dropHitZoneGeometry: {
+                  ...previous.dropHitZoneGeometry,
+                  hysteresisPx: value
+                }
+              })
+            ),
+            title: "Boundary stickiness (pane-local CSS px): once the cursor is in a zone it must cross the boundary by this much before the classification switches. 0 disables hysteresis."
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+  const animationGroup = /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+    /* @__PURE__ */ jsx(
+      GroupToggleHeader,
+      {
+        label: "animation",
+        enabled: props.animationControlsEnabled,
+        onEnabledChange: props.setAnimationControlsEnabled,
+        sticky: props.animationControlsSticky,
+        onStickyChange: props.setAnimationControlsSticky,
+        ariaLabel: "animation group",
+        offTitle: "Disable the live-drag motion choreography (split transit/reflow speeds, swap bounce, ghost pickup-scale, coherent non-intersecting transit) and collapse the controls. Placement becomes instant; per-control values are preserved for re-enabling.",
+        onTitle: "Enable the live-drag motion choreography and expand the controls (link toggle, transit + reflow speeds, swap bounce magnitude, ghost pickup scale, coherent non-intersecting transit)."
+      }
+    ),
+    props.animationControlsEnabled ? /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+      prefersReducedMotion ? /* @__PURE__ */ jsx("div", { className: "rounded border border-amber-400/40 bg-amber-500/10 px-2 py-1 font-mono text-[9px] uppercase leading-relaxed tracking-[0.12em] text-amber-200", children: "reduced motion active \u2014 drag choreography is suppressed; these knobs have no visible effect until the OS setting is cleared" }) : null,
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+          title: "Link the ghost transit speed and the survivor reflow speed. Linked (default): one slider drives both at equal (parity) timing \u2014 the only regime where coherent non-intersecting transit is geometrically valid. Unlinked: two independent sliders; coherent transit is gated off while speeds can diverge.",
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledCheckbox,
+              {
+                checked: props.animationSpeedLinked,
+                onChange: (checked) => {
+                  props.setAnimationSpeedLinked(checked);
+                  if (checked) {
+                    props.setSurvivorReflowSpeedPercent(props.ghostTransitSpeedPercent);
+                  }
+                }
+              }
+            ),
+            "link transit + reflow speed"
+          ]
+        }
+      ),
+      props.animationSpeedLinked ? /* @__PURE__ */ jsxs("div", { className: "pl-0.5", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "drag animation speed: ",
+          props.ghostTransitSpeedPercent,
+          "% (",
+          resolvedGhostTransitDurationMs,
+          "ms transit + reflow)"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: DRAG_ANIMATION_SPEED_MIN_PERCENT,
+            max: DRAG_ANIMATION_SPEED_MAX_PERCENT,
+            step: 5,
+            value: props.ghostTransitSpeedPercent,
+            onChange: (value) => {
+              props.setGhostTransitSpeedPercent(value);
+              props.setSurvivorReflowSpeedPercent(value);
+            },
+            title: "Linked speed for both the ghost transit (hop) and the survivor reflow, scaled from the 170ms baseline (100% = default). Slowest 10% \u2248 1700ms."
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "pl-0.5", children: [
+          /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+            "ghost transit speed: ",
+            props.ghostTransitSpeedPercent,
+            "% (",
+            resolvedGhostTransitDurationMs,
+            "ms hop)"
+          ] }),
+          /* @__PURE__ */ jsx(
+            RangeSlider,
+            {
+              min: DRAG_ANIMATION_SPEED_MIN_PERCENT,
+              max: DRAG_ANIMATION_SPEED_MAX_PERCENT,
+              step: 5,
+              value: props.ghostTransitSpeedPercent,
+              onChange: props.setGhostTransitSpeedPercent,
+              title: "Speed of the dragged ghost's hop-in/out + pickup entrance, scaled from the 170ms baseline (100% = default)."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "pl-0.5", children: [
+          /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+            "survivor reflow speed: ",
+            props.survivorReflowSpeedPercent,
+            "% (",
+            resolvedSurvivorReflowDurationMs,
+            "ms reflow)"
+          ] }),
+          /* @__PURE__ */ jsx(
+            RangeSlider,
+            {
+              min: DRAG_ANIMATION_SPEED_MIN_PERCENT,
+              max: DRAG_ANIMATION_SPEED_MAX_PERCENT,
+              step: 5,
+              value: props.survivorReflowSpeedPercent,
+              onChange: props.setSurvivorReflowSpeedPercent,
+              title: "Speed of the affected (survivor / displaced) panes' reflow transform, scaled from the 170ms baseline (100% = default)."
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "pl-0.5", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "swap bounce magnitude: ",
+          props.swapBounceMagnitudePercent,
+          "% ",
+          props.swapBounceMagnitudePercent === 0 ? "(no overshoot)" : "(overshoot)"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: SWAP_BOUNCE_MIN_PERCENT,
+            max: SWAP_BOUNCE_MAX_PERCENT,
+            step: 5,
+            value: props.swapBounceMagnitudePercent,
+            onChange: props.setSwapBounceMagnitudePercent,
+            title: "Landing overshoot amplitude for the ghost seated hop-in + survivor settle (easeOutBack). 0% = today's monotonic settle. Per-element, so it is valid under split (unlinked) speeds; inert while the coherent-transit dip owns the swap landing. Skipped under prefers-reduced-motion."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "pl-0.5", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "hop easing: ",
+          DRAG_HOP_EASING_PRESETS.find((preset) => preset.value === props.dragHopEasing)?.label ?? "custom"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "drag hop easing preset", children: DRAG_HOP_EASING_PRESETS.map((preset) => {
+          const isActive = preset.value === props.dragHopEasing;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => props.setDragHopEasing(preset.value),
+              title: `Set the ghost hop + cursor transit timing function to ${preset.value} (the survivor reflow falls back to this curve).`,
+              className: `rounded border px-2 py-1 font-mono text-[9px] uppercase tracking-[0.12em] transition-colors ${isActive ? "border-sky-400/70 bg-sky-500/20 text-sky-200" : "border-white/10 bg-slate-950/70 text-slate-400 hover:border-white/20 hover:text-slate-200"}`,
+              children: preset.label
+            },
+            preset.id
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "pl-0.5", children: [
+        /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+          "ghost pickup scale: ",
+          props.interactionCapabilities.ghostPickupScalePercent,
+          "% (of source bbox)"
+        ] }),
+        /* @__PURE__ */ jsx(
+          RangeSlider,
+          {
+            min: GHOST_PICKUP_SCALE_MIN_PERCENT,
+            max: GHOST_PICKUP_SCALE_MAX_PERCENT,
+            step: 5,
+            value: props.interactionCapabilities.ghostPickupScalePercent,
+            onChange: (value) => props.setInteractionCapabilities(
+              (previous) => ({
+                ...previous,
+                ghostPickupScalePercent: value
+              })
+            ),
+            title: "Size the lifted ghost relative to the source pane's full bbox on drag start. <100% reads as lifted/shrunk; the ghost morphs from this size toward the resolved slot's bbox on hop-in. Skipped under prefers-reduced-motion."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: `flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] ${props.animationSpeedLinked ? "text-slate-300" : "text-slate-600"}`,
+          title: "Coherent non-intersecting transit. On a SWAP the moving ghost and the displaced target dip toward ~70% mid-transit so their crossing paths never visually overlap, then scale back into place. Only valid at equal (parity) timing, so it is disabled while the transit + reflow speeds are unlinked.",
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledCheckbox,
+              {
+                checked: props.animationSpeedLinked && props.interactionCapabilities.coherentTransit,
+                disabled: !props.animationSpeedLinked,
+                onChange: (checked) => props.setInteractionCapabilities(
+                  (previous) => ({
+                    ...previous,
+                    coherentTransit: checked
+                  })
+                )
+              }
+            ),
+            "coherent non-intersecting transit"
+          ]
+        }
+      ),
+      props.animationSpeedLinked ? null : /* @__PURE__ */ jsx("div", { className: "pl-6 font-mono text-[9px] uppercase tracking-[0.12em] text-slate-500", children: "requires linked transit + reflow speed" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            props.setAnimationSpeedLinked(ANIMATION_CONTROL_DEFAULTS.speedLinked);
+            props.setGhostTransitSpeedPercent(ANIMATION_CONTROL_DEFAULTS.ghostTransitSpeedPercent);
+            props.setSurvivorReflowSpeedPercent(ANIMATION_CONTROL_DEFAULTS.survivorReflowSpeedPercent);
+            props.setSwapBounceMagnitudePercent(ANIMATION_CONTROL_DEFAULTS.swapBounceMagnitudePercent);
+            props.setDragHopEasing(DEFAULT_DRAG_HOP_EASING);
+            props.setInteractionCapabilities(
+              (previous) => ({
+                ...previous,
+                ghostPickupScalePercent: ANIMATION_CONTROL_DEFAULTS.ghostPickupScalePercent,
+                coherentTransit: ANIMATION_CONTROL_DEFAULTS.coherentTransit
+              })
+            );
+          },
+          className: "mt-1 w-full rounded border border-white/15 bg-slate-900/80 px-2 py-1 font-mono text-[9px] uppercase tracking-[0.14em] text-slate-300 transition-colors hover:border-cyan-300/50 hover:text-cyan-100",
+          title: "Restore the ANIMATION group to its defaults: linked speeds at 100%, swap bounce 30%, ghost pickup scale 90%, coherent transit on.",
+          children: "reset group to defaults"
+        }
+      )
+    ] }) : null
+  ] });
+  const isLiveStatusPinned = props.showLiveStatus && props.liveStatusSticky;
+  const anyGroupPinned = isLiveStatusPinned || props.previewOverlaysSticky || props.subjectColorsSticky || props.dropIntentDebugSticky || props.hitZoneOverlaysSticky || props.hitZoneGeometrySticky || props.animationControlsSticky;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: "hypr-range-scope h-full min-h-0 shrink-0 overflow-hidden rounded-xl border border-cyan-100/20 bg-[linear-gradient(180deg,rgba(15,23,42,0.84),rgba(2,6,23,0.94))] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.05),0_0_22px_rgba(34,211,238,0.12)] backdrop-blur",
+      style: {
+        width: CONTROL_PANE_WIDTH_PX,
+        minWidth: CONTROL_PANE_WIDTH_PX,
+        maxWidth: CONTROL_PANE_WIDTH_PX
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: RANGE_SLIDER_STYLE }),
+        /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 min-w-0 max-w-full flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx("section", { className: "shrink-0 min-w-0 max-w-full overflow-hidden rounded-lg border border-cyan-100/20 bg-slate-900/80 p-1.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "min-w-0 flex-1 truncate font-mono text-[10px] uppercase tracking-[0.13em] text-slate-400",
+                title: "Show or hide the live status readout. Hidden by default so it is opt-in rather than always pinned to the top of the pane. Pin keeps it above the scroll area when shown.",
+                children: "live status panel"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                StickyPinToggle,
+                {
+                  sticky: props.liveStatusSticky,
+                  onStickyChange: props.setLiveStatusSticky,
+                  ariaLabel: "live status panel sticky"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", role: "group", "aria-label": "live status panel visibility", children: LIVE_STATUS_VISIBILITY_OPTIONS.map((option) => {
+                const isActive = props.showLiveStatus === option.value;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": isActive,
+                    title: option.title,
+                    onClick: () => props.setShowLiveStatus(option.value),
+                    className: `rounded border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.1em] transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/55 focus-visible:ring-offset-1 focus-visible:ring-offset-slate-950 motion-reduce:transition-none ${isActive ? "border-cyan-300/70 bg-cyan-500/20 text-cyan-100" : "border-white/10 bg-slate-950 text-slate-400 hover:border-white/25"}`,
+                    children: option.label
+                  },
+                  `live-status-${option.label}`
+                );
+              }) })
+            ] })
+          ] }) }),
+          anyGroupPinned ? /* @__PURE__ */ jsxs("div", { className: "mt-3 shrink-0 min-w-0 max-w-full space-y-3 overflow-hidden", children: [
+            isLiveStatusPinned ? liveStatusReadout : null,
+            props.animationControlsSticky ? animationGroup : null,
+            props.previewOverlaysSticky ? previewOverlaysGroup : null,
+            props.subjectColorsSticky ? subjectColorsGroup : null,
+            props.dropIntentDebugSticky ? dropIntentDebugGroup : null,
+            props.hitZoneOverlaysSticky ? hitZoneOverlaysGroup : null,
+            props.hitZoneGeometrySticky ? hitZoneGeometryGroup : null
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 min-h-0 min-w-0 max-w-full flex-1 space-y-3 overflow-y-auto overflow-x-hidden pr-1", children: [
+            props.showLiveStatus && !props.liveStatusSticky ? liveStatusReadout : null,
+            props.animationControlsSticky ? null : animationGroup,
+            /* @__PURE__ */ jsxs("section", { className: "min-w-0 max-w-full space-y-3 overflow-hidden rounded-lg border border-cyan-100/15 bg-slate-900/65 p-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-cyan-200", children: "primary controls" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded-lg border border-cyan-200/25 bg-slate-950/65 p-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-[0.13em] text-slate-500", children: "interaction capabilities" }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "mb-1 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400",
+                        title: "Divider resize axis: horizontal = width dividers (side-by-side), vertical = height dividers (stacked)",
+                        children: "resize dividers"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1", role: "group", "aria-label": "resize capability", children: RESIZE_CAPABILITY_OPTIONS.map((option) => {
+                      const isActive = props.interactionCapabilities.resize === option.value;
+                      return /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-pressed": isActive,
+                          title: option.title,
+                          onClick: () => props.setInteractionCapabilities(
+                            (previous) => ({
+                              ...previous,
+                              resize: option.value
+                            })
+                          ),
+                          className: `rounded border px-2 py-1 font-mono text-[10px] uppercase tracking-[0.1em] transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/55 focus-visible:ring-offset-1 focus-visible:ring-offset-slate-950 motion-reduce:transition-none ${isActive ? "border-cyan-300/70 bg-cyan-500/20 text-cyan-100" : "border-white/10 bg-slate-950 text-slate-400 hover:border-white/25"}`,
+                          children: option.label
+                        },
+                        `resize-${option.value}`
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "Render split-divider handle chrome between panes. Off hides separator paint/hover affordance but keeps divider hit-targets and resize capability behavior.",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            checked: props.interactionCapabilities.resizeHandlesVisible,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                resizeHandlesVisible: checked
+                              })
+                            )
+                          }
+                        ),
+                        "show resize handles"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "Live-drag slot hop-in. On (default): the single ghost hops INTO and FILLS the resolved slot as the single instance \u2014 no separate empty reservation lingers. Off: the ghost free-follows the cursor and the in-tree content-less reservation slot stays shown (reservation-plus-ghost duality).",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            disabled: !props.interactionCapabilities.rearrange || props.interactionCapabilities.dragMode !== "live",
+                            checked: props.interactionCapabilities.slotHopInEnabled,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                slotHopInEnabled: checked
+                              })
+                            )
+                          }
+                        ),
+                        "slot hop-in"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "Drag-to-rearrange (move / swap / edge-insert). When off, panes are not draggable and no drop overlays activate.",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            checked: props.interactionCapabilities.rearrange,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                rearrange: checked
+                              })
+                            )
+                          }
+                        ),
+                        "drag rearrange"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "pl-5", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "mb-1 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400",
+                        title: "Drag feedback mode: preview = non-committing projected overlays; live = Hyprland detach (source detached on pickup, frozen tree, ghost follows cursor, commit on release)",
+                        children: "drag mode"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", role: "group", "aria-label": "drag mode", children: DRAG_MODE_OPTIONS.map((option) => {
+                      const isActive = props.interactionCapabilities.dragMode === option.value;
+                      return /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-pressed": isActive,
+                          disabled: !props.interactionCapabilities.rearrange,
+                          title: option.title,
+                          onClick: () => props.setInteractionCapabilities(
+                            (previous) => ({
+                              ...previous,
+                              dragMode: option.value
+                            })
+                          ),
+                          className: `rounded border px-2 py-1 font-mono text-[10px] uppercase tracking-[0.1em] transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/55 focus-visible:ring-offset-1 focus-visible:ring-offset-slate-950 motion-reduce:transition-none ${isActive ? "border-cyan-300/70 bg-cyan-500/20 text-cyan-100" : "border-white/10 bg-slate-950 text-slate-400 hover:border-white/25"} ${props.interactionCapabilities.rearrange ? "" : "opacity-40"}`,
+                          children: option.label
+                        },
+                        `drag-mode-${option.value}`
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "pl-5", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "mb-1 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400",
+                        title: "Live-drag slot re-resolution after the single ghost hops INTO and FILLS a slot: delta-responsive (default) re-aims once the cursor moves past the 24px delta; zone-exit-hold pins the seated slot until the cursor leaves the seated pane.",
+                        children: "slot commitment"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", role: "group", "aria-label": "slot commitment", children: SLOT_COMMITMENT_OPTIONS.map((option) => {
+                      const isActive = props.interactionCapabilities.slotCommitment.mode === option.value;
+                      const isDisabled = !props.interactionCapabilities.rearrange || props.interactionCapabilities.dragMode !== "live";
+                      return /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-pressed": isActive,
+                          disabled: isDisabled,
+                          title: option.title,
+                          onClick: () => props.setInteractionCapabilities(
+                            (previous) => ({
+                              ...previous,
+                              slotCommitment: { ...previous.slotCommitment, mode: option.value }
+                            })
+                          ),
+                          className: `rounded border px-2 py-1 font-mono text-[10px] uppercase tracking-[0.1em] transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/55 focus-visible:ring-offset-1 focus-visible:ring-offset-slate-950 motion-reduce:transition-none ${isActive ? "border-cyan-300/70 bg-cyan-500/20 text-cyan-100" : "border-white/10 bg-slate-950 text-slate-400 hover:border-white/25"} ${isDisabled ? "opacity-40" : ""}`,
+                          children: option.label
+                        },
+                        `slot-commitment-${option.value}`
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 pl-5 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "Allow touch pointers to start a drag. When off, touch is reserved for tap/scroll and only mouse/pen can drag. The drag FSM runs on Pointer Events, so touch shares the same pickup/drop machinery as mouse.",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            disabled: !props.interactionCapabilities.rearrange,
+                            checked: props.interactionCapabilities.touchDrag.enable,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                touchDrag: { ...previous.touchDrag, enable: checked }
+                              })
+                            )
+                          }
+                        ),
+                        "touch drag"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "pl-5", children: [
+                    /* @__PURE__ */ jsxs("label", { className: "mb-1 block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: [
+                      "touch long-press: ",
+                      props.interactionCapabilities.touchDrag.longPressMs,
+                      "ms"
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      RangeSlider,
+                      {
+                        min: 0,
+                        max: 600,
+                        step: 10,
+                        value: props.interactionCapabilities.touchDrag.longPressMs,
+                        disabled: !props.interactionCapabilities.rearrange || !props.interactionCapabilities.touchDrag.enable,
+                        onChange: (value) => props.setInteractionCapabilities(
+                          (previous) => ({
+                            ...previous,
+                            touchDrag: { ...previous.touchDrag, longPressMs: value }
+                          })
+                        ),
+                        title: "How long a finger must be held before a touch press becomes a drag (the tap/scroll-vs-drag disambiguator). A pre-long-press scroll-axis flick releases to the page. Mouse/pen ignore this delay (immediate threshold pickup). 0 = a held touch picks up at once.",
+                        ariaLabel: "touch long-press delay in milliseconds"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "Pane focus selection. When off, clicking / focusing a pane does not select it.",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            checked: props.interactionCapabilities.focus,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                focus: checked
+                              })
+                            )
+                          }
+                        ),
+                        "pane focus selection"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "Maximize-to-viewport. Adds a per-pane maximize/restore header button and binds Alt+Enter / Esc. Non-destructive render-mode (layout tree untouched).",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            checked: props.interactionCapabilities.maximize.enable,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                maximize: { ...previous.maximize, enable: checked }
+                              })
+                            )
+                          }
+                        ),
+                        "maximize (Alt+Enter / Esc)"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "Tab-like pane switching. Binds Alt+[ / Alt+] cycle and Alt+1..9 jump. When maximized, switching also switches which pane is maximized.",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            checked: props.interactionCapabilities.paneSwitching.enable,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                paneSwitching: { ...previous.paneSwitching, enable: checked }
+                              })
+                            )
+                          }
+                        ),
+                        "pane switching (Alt+[ / Alt+] / Alt+1..9)"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 pl-5 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "Render the tab strip above the tiling region. Cycle/jump shortcuts still work when off.",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            disabled: !props.interactionCapabilities.paneSwitching.enable,
+                            checked: props.interactionCapabilities.paneSwitching.showTabStrip,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                paneSwitching: { ...previous.paneSwitching, showTabStrip: checked }
+                              })
+                            )
+                          }
+                        ),
+                        "tab strip visible"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex items-center gap-2 pl-5 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300",
+                      title: "macOS Cmd+Tab-style visual switcher overlay while cycling panes with Alt held. Release Alt to commit, Esc to cancel. Cycle/jump shortcuts still work when off (they activate immediately).",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          StyledCheckbox,
+                          {
+                            disabled: !props.interactionCapabilities.paneSwitching.enable,
+                            checked: props.interactionCapabilities.paneSwitching.showSwitcherOverlay,
+                            onChange: (checked) => props.setInteractionCapabilities(
+                              (previous) => ({
+                                ...previous,
+                                paneSwitching: { ...previous.paneSwitching, showSwitcherOverlay: checked }
+                              })
+                            )
+                          }
+                        ),
+                        "cmd-tab switcher overlay"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "rounded border border-white/10 bg-slate-950/60 p-1.5 font-mono text-[9px] uppercase tracking-[0.12em] text-slate-500", children: [
+                    /* @__PURE__ */ jsx("div", { className: "mb-0.5 text-slate-400", children: "keymap" }),
+                    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-0.5 normal-case tracking-normal", children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "maximize: ",
+                        formatKeyChordLabel(props.interactionCapabilities.keymap.toggleMaximize),
+                        " | restore: ",
+                        formatKeyChordLabel(props.interactionCapabilities.keymap.restore)
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "prev: ",
+                        formatKeyChordLabel(props.interactionCapabilities.keymap.previousPane),
+                        " | next: ",
+                        formatKeyChordLabel(props.interactionCapabilities.keymap.nextPane),
+                        " | jump: ",
+                        formatKeyModifiersLabel(props.interactionCapabilities.keymap.jumpToPane),
+                        "+1..9"
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-[0.13em] text-slate-500", children: "source and target routing" }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("label", { className: "block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: "drag source pane" }),
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      value: props.selectedSourceLeafId,
+                      onChange: (event) => {
+                        props.setSelectedSourceLeafId(event.target.value);
+                        props.setFocusedLeafId(event.target.value);
+                      },
+                      className: "w-full min-w-0 max-w-full rounded border border-white/10 bg-slate-950 px-2 py-1 font-mono text-[11px] text-slate-200",
+                      children: props.leafIds.map((leafId) => /* @__PURE__ */ jsx("option", { value: leafId, children: leafId }, `source-${leafId}`))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("label", { className: "block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: "drop target pane" }),
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      value: props.selectedTargetLeafId,
+                      onChange: (event) => {
+                        props.setSelectedTargetLeafId(event.target.value);
+                        props.setFocusedLeafId(event.target.value);
+                      },
+                      className: "w-full min-w-0 max-w-full rounded border border-white/10 bg-slate-950 px-2 py-1 font-mono text-[11px] text-slate-200",
+                      children: props.leafIds.map((leafId) => /* @__PURE__ */ jsx("option", { value: leafId, children: leafId }, `target-${leafId}`))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("label", { className: "block font-mono text-[10px] uppercase tracking-[0.14em] text-slate-400", children: "destination split container" }),
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      value: props.selectedSplitId,
+                      onChange: (event) => props.setSelectedSplitId(event.target.value),
+                      className: "w-full min-w-0 max-w-full rounded border border-white/10 bg-slate-950 px-2 py-1 font-mono text-[11px] text-slate-200",
+                      children: props.splitNodes.map((splitNode) => /* @__PURE__ */ jsxs("option", { value: splitNode.id, children: [
+                        splitNode.id,
+                        " (",
+                        splitNode.axis,
+                        ")"
+                      ] }, `split-${splitNode.id}`))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-300", children: [
+                    /* @__PURE__ */ jsx(
+                      StyledCheckbox,
+                      {
+                        checked: props.preserveParentSplitAxis,
+                        onChange: props.setPreserveParentSplitAxis
+                      }
+                    ),
+                    "preserve parent split axis"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-[0.13em] text-slate-500", children: "pane move and insert actions" }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => insertLeafAdjacent(
+                        previous,
+                        props.selectedSourceLeafId,
+                        props.selectedTargetLeafId,
+                        "left",
+                        { preserveParentSplitAxis: props.preserveParentSplitAxis, splitRatio: 0.5 }
+                      )),
+                      className: "rounded border border-cyan-300/35 bg-cyan-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-cyan-100",
+                      children: "insert left"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => insertLeafAdjacent(
+                        previous,
+                        props.selectedSourceLeafId,
+                        props.selectedTargetLeafId,
+                        "right",
+                        { preserveParentSplitAxis: props.preserveParentSplitAxis, splitRatio: 0.5 }
+                      )),
+                      className: "rounded border border-cyan-300/35 bg-cyan-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-cyan-100",
+                      children: "insert right"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => insertLeafAdjacent(
+                        previous,
+                        props.selectedSourceLeafId,
+                        props.selectedTargetLeafId,
+                        "top",
+                        { preserveParentSplitAxis: props.preserveParentSplitAxis, splitRatio: 0.5 }
+                      )),
+                      className: "rounded border border-cyan-300/35 bg-cyan-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-cyan-100",
+                      children: "insert top"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => insertLeafAdjacent(
+                        previous,
+                        props.selectedSourceLeafId,
+                        props.selectedTargetLeafId,
+                        "bottom",
+                        { preserveParentSplitAxis: props.preserveParentSplitAxis, splitRatio: 0.5 }
+                      )),
+                      className: "rounded border border-cyan-300/35 bg-cyan-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-cyan-100",
+                      children: "insert bottom"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => moveLeafToRoot(previous, props.selectedSourceLeafId, "first", { splitRatio: 0.5 })),
+                      className: "rounded border border-violet-300/35 bg-violet-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-violet-100",
+                      children: "move root first"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => moveLeafToRoot(previous, props.selectedSourceLeafId, "second", { splitRatio: 0.5 })),
+                      className: "rounded border border-violet-300/35 bg-violet-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-violet-100",
+                      children: "move root second"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => moveLeafToSplitContainer(
+                        previous,
+                        props.selectedSourceLeafId,
+                        props.selectedSplitId,
+                        "first",
+                        { preserveParentSplitAxis: true, splitRatio: 0.5 }
+                      )),
+                      className: "rounded border border-sky-300/35 bg-sky-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-sky-100",
+                      children: "move to split first"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => moveLeafToSplitContainer(
+                        previous,
+                        props.selectedSourceLeafId,
+                        props.selectedSplitId,
+                        "second",
+                        { preserveParentSplitAxis: true, splitRatio: 0.5 }
+                      )),
+                      className: "rounded border border-sky-300/35 bg-sky-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-sky-100",
+                      children: "move to split second"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.setLayout((previous) => toggleSplitAxis(previous, props.selectedSplitId)),
+                      className: "col-span-2 rounded border border-pink-300/35 bg-pink-500/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-pink-100",
+                      children: "toggle split axis"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-[0.13em] text-slate-500", children: "focus controls" }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.runDirectionalFocus("left"),
+                      className: "rounded border border-white/15 bg-black/40 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-200",
+                      children: "left"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.runDirectionalFocus("right"),
+                      className: "rounded border border-white/15 bg-black/40 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-200",
+                      children: "right"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.runDirectionalFocus("up"),
+                      className: "rounded border border-white/15 bg-black/40 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-200",
+                      children: "up"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => props.runDirectionalFocus("down"),
+                      className: "rounded border border-white/15 bg-black/40 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-200",
+                      children: "down"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "mt-2 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-500", children: "arrows also drive focus navigation" })
+              ] }),
+              props.previewOverlaysSticky ? null : previewOverlaysGroup,
+              props.subjectColorsSticky ? null : subjectColorsGroup,
+              props.dropIntentDebugSticky ? null : dropIntentDebugGroup,
+              props.hitZoneOverlaysSticky ? null : hitZoneOverlaysGroup,
+              props.hitZoneGeometrySticky ? null : hitZoneGeometryGroup,
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-[0.13em] text-slate-500", children: "basic layout tuning" }),
+                /* @__PURE__ */ jsxs("label", { className: "block font-mono text-[10px] uppercase tracking-[0.15em] text-slate-400", children: [
+                  "gap px: ",
+                  props.config.gapPx
+                ] }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: 4,
+                    max: 24,
+                    step: 1,
+                    value: props.config.gapPx,
+                    onChange: (value) => props.setConfig((previous) => ({
+                      ...previous,
+                      gapPx: value
+                    }))
+                  }
+                ),
+                /* @__PURE__ */ jsxs("label", { className: "mt-3 block font-mono text-[10px] uppercase tracking-[0.15em] text-slate-400", children: [
+                  "min pane px: ",
+                  props.config.minPaneSizePx
+                ] }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: 80,
+                    max: 260,
+                    step: 10,
+                    value: props.config.minPaneSizePx,
+                    onChange: (value) => props.setConfig((previous) => ({
+                      ...previous,
+                      minPaneSizePx: value
+                    }))
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: "mt-3 min-w-0 max-w-full space-y-2 overflow-hidden rounded border border-white/10 bg-slate-900/70 p-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-cyan-200", children: "diagnostics" }),
+              /* @__PURE__ */ jsxs("details", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+                /* @__PURE__ */ jsxs("summary", { className: "cursor-pointer list-none font-mono text-[10px] uppercase tracking-[0.13em] text-slate-300", children: [
+                  "stream ledger (",
+                  props.observabilityLedgerEntries.length,
+                  "/",
+                  LIVE_LEDGER_RETENTION_LIMIT,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "mt-2 max-h-[180px] min-h-0 min-w-0 max-w-full overflow-y-auto overflow-x-hidden rounded border border-white/10 bg-slate-950/85 p-2", children: props.observabilityLedgerEntries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-slate-500", children: "waiting for hover or drag activity" }) : /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-1", children: props.observabilityLedgerEntries.map((ledgerEntry) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "w-full min-w-0 overflow-x-auto overflow-y-hidden font-mono text-[10px] leading-4 tracking-[0.08em] text-slate-200",
+                    children: /* @__PURE__ */ jsxs("div", { className: "inline-block min-w-max whitespace-nowrap", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-cyan-200", children: ledgerEntry.timestampLabel }),
+                      " ",
+                      ledgerEntry.streamLine
+                    ] })
+                  },
+                  ledgerEntry.id
+                )) }) })
+              ] }),
+              /* @__PURE__ */ jsxs("details", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+                /* @__PURE__ */ jsx("summary", { className: "cursor-pointer list-none font-mono text-[10px] uppercase tracking-[0.13em] text-slate-300", children: "hit resolver snapshot" }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 min-w-0 max-w-full space-y-1 overflow-x-auto overflow-y-hidden font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "hovered pane id: ",
+                    props.liveHitLog?.hoveredLeafId ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "source leaf id (hovered pane): ",
+                    props.liveHitLog?.sourceLeafId ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "drag source leaf id (drag origin): ",
+                    props.liveHitLog?.dragSourceLeafId ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "pointer mode: ",
+                    props.liveHitLog?.isDragging ? "dragging" : "hover/move"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "resolver zone: ",
+                    props.liveHitLog?.resolverZone ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "center ratio: ",
+                    props.liveHitLog?.centerRatio?.toFixed(2) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "edge threshold ratio: ",
+                    props.liveHitLog?.edgeThresholdRatio?.toFixed(2) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "center rect px: ",
+                    props.liveHitLog == null ? "none" : `${props.liveHitLog.centerRectWidthPx.toFixed(1)} \xD7 ${props.liveHitLog.centerRectHeightPx.toFixed(1)}`
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "center valid: ",
+                    props.liveHitLog?.centerIsValid == null ? "none" : props.liveHitLog.centerIsValid ? "valid" : "blocked"
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "overflow-y-auto overflow-x-auto whitespace-nowrap normal-case",
+                      style: {
+                        height: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        minHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        maxHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        lineHeight: CONTROL_PANE_STATUS_LINE_HEIGHT_PX / 16
+                      },
+                      children: [
+                        "center blocked reason: ",
+                        normalizeReasonToken(props.liveHitLog?.centerBlockedReason)
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "center distance px: ",
+                    props.liveHitLog?.intent?.centerDistancePx?.toFixed(1) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "nearest edge distance px: ",
+                    props.liveHitLog?.intent?.nearestEdgeDistancePx?.toFixed(1) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "selected edge distance px: ",
+                    props.liveHitLog?.intent?.selectedSplitDistancePx?.toFixed(1) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "selected edge candidate: ",
+                    props.liveHitLog?.intent?.selectedSplitZone ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { children: "edge validity:" }),
+                  props.liveHitLog == null || props.liveHitLog.edgeDiagnostics.length === 0 ? /* @__PURE__ */ jsx("div", { className: "pl-2 text-slate-500", children: "none" }) : props.liveHitLog.edgeDiagnostics.map((edgeDiagnostic) => /* @__PURE__ */ jsxs("div", { className: "pl-2 text-slate-200", children: [
+                    edgeDiagnostic.zone,
+                    ": ",
+                    edgeDiagnostic.isValid ? "valid" : "blocked",
+                    " | reason",
+                    " ",
+                    edgeDiagnostic.rejectionReason ?? "none"
+                  ] }, `live-hit-edge-${edgeDiagnostic.zone}`))
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("details", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+                /* @__PURE__ */ jsx("summary", { className: "cursor-pointer list-none font-mono text-[10px] uppercase tracking-[0.13em] text-slate-300", children: "drop intent internals" }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 min-w-0 max-w-full space-y-1 overflow-x-auto overflow-y-hidden font-mono text-[10px] uppercase tracking-[0.12em] text-slate-300", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "resolved action: ",
+                    props.liveDropIntent?.action ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "dominant edge: ",
+                    props.liveDropIntent?.dominantEdge ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "selected final edge: ",
+                    props.liveDropIntent?.finalEdge ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "overflow-y-auto overflow-x-auto whitespace-nowrap normal-case",
+                      style: {
+                        height: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        minHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        maxHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        lineHeight: CONTROL_PANE_STATUS_LINE_HEIGHT_PX / 16
+                      },
+                      children: [
+                        "fallback reason: ",
+                        normalizeReasonToken(props.liveDropIntent?.fallbackReason)
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "overflow-y-auto overflow-x-auto whitespace-nowrap normal-case",
+                      style: {
+                        height: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        minHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        maxHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        lineHeight: CONTROL_PANE_STATUS_LINE_HEIGHT_PX / 16
+                      },
+                      children: [
+                        "blocked reason: ",
+                        normalizeReasonToken(props.liveDropIntent?.blockedReason)
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "axis path / depth: ",
+                    props.liveDropIntent == null ? "none" : `${axisPathLabel(props.liveDropIntent.axisPath)} (d=${props.liveDropIntent.axisPath.length})`
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "edge threshold ratio: ",
+                    props.liveDropIntent?.edgeThresholdRatio?.toFixed(2) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "center rect px: ",
+                    props.liveDropIntent == null ? "none" : `${props.liveDropIntent.centerRectWidthPx?.toFixed(1) ?? "none"} \xD7 ${props.liveDropIntent.centerRectHeightPx?.toFixed(1) ?? "none"}`
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "pane-local cursor px: ",
+                    props.liveDropIntent == null ? "none" : `${props.liveDropIntent.paneLocalX?.toFixed(1) ?? "none"}, ${props.liveDropIntent.paneLocalY?.toFixed(1) ?? "none"}`
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "center distance px: ",
+                    props.liveDropIntent?.centerDistancePx?.toFixed(1) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "nearest edge distance px: ",
+                    props.liveDropIntent?.nearestEdgeDistancePx?.toFixed(1) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "selected split candidate: ",
+                    props.liveDropIntent?.selectedSplitZone ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "selected split distance px: ",
+                    props.liveDropIntent?.selectedSplitDistancePx?.toFixed(1) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "center ratio: ",
+                    props.liveDropIntent?.tuning.centerRatio?.toFixed(2) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "hysteresis px: ",
+                    props.liveDropIntent?.tuning.hysteresisPx?.toFixed(1) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "device pixel ratio: ",
+                    props.liveDropIntent?.tuning.devicePixelRatio?.toFixed(2) ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "target split id: ",
+                    props.liveDropIntent?.targetSplitId ?? "none"
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "overflow-y-auto overflow-x-auto whitespace-nowrap normal-case",
+                      style: {
+                        height: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        minHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        maxHeight: CONTROL_PANE_REASON_RESERVED_HEIGHT_PX,
+                        lineHeight: CONTROL_PANE_STATUS_LINE_HEIGHT_PX / 16
+                      },
+                      children: [
+                        "rejected split reasons:",
+                        " ",
+                        props.liveDropIntent == null ? "none" : normalizeReasonList(props.liveDropIntent.rejectedSplitReasons)
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("details", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-950/60 p-2", children: [
+                /* @__PURE__ */ jsx("summary", { className: "cursor-pointer list-none font-mono text-[10px] uppercase tracking-[0.13em] text-slate-300", children: "layout state snapshot" }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 min-w-0 max-w-full space-y-2 overflow-hidden", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 font-mono text-[10px] uppercase tracking-[0.13em]", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "rounded border border-white/10 bg-slate-900/80 p-2", children: [
+                      /* @__PURE__ */ jsx("div", { className: "text-slate-500", children: "split nodes" }),
+                      /* @__PURE__ */ jsx("div", { className: "mt-1 text-cyan-200", children: props.splitCount })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "rounded border border-white/10 bg-slate-900/80 p-2", children: [
+                      /* @__PURE__ */ jsx("div", { className: "text-slate-500", children: "leaf nodes" }),
+                      /* @__PURE__ */ jsx("div", { className: "mt-1 text-cyan-200", children: props.leafIds.length })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-x-auto overflow-y-hidden rounded border border-white/10 bg-slate-900/80 p-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] uppercase tracking-[0.13em] text-slate-500", children: "tile order by leaf traversal" }),
+                    /* @__PURE__ */ jsx("div", { className: "mt-1 font-mono text-[11px] text-slate-200", children: props.tileOrder.join(" -> ") })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded border border-white/10 bg-slate-900/80 p-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] uppercase tracking-[0.13em] text-slate-500", children: "active focus leaf" }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 font-mono text-[11px] text-violet-100", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${CONTROL_PANE_STATUS_BADGE_WIDTH_CLASS} inline-flex items-center justify-center rounded-full border border-violet-200/60 bg-violet-500/20 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-[0.14em] text-violet-100`,
+                          children: "focused"
+                        }
+                      ),
+                      props.focusedLeafId ?? "none"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "max-h-[45vh] min-h-[180px] min-w-0 max-w-full overflow-y-auto overflow-x-auto rounded border border-white/10 bg-slate-950/80 p-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-[0.14em] text-slate-500", children: "live layout json" }),
+                    /* @__PURE__ */ jsx("pre", { className: "w-max min-w-full font-mono text-[10px] leading-4 text-slate-300", children: JSON.stringify(props.layout, null, 2) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-x-auto overflow-y-hidden rounded border border-white/10 bg-slate-950/70 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.13em] text-slate-300", children: [
+                    "projected overlays rendered: ",
+                    props.projectedOverlayRenderCount
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-x-auto overflow-y-hidden rounded border border-white/10 bg-slate-950/70 px-2 py-1 font-mono text-[9px] tracking-[0.08em] text-slate-300", children: [
+                    /* @__PURE__ */ jsx("div", { className: "uppercase text-slate-500", children: "overlay border legend" }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+                      "drag source:",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "inline-block rounded border px-1", style: { borderColor: props.observabilityColors.dragSourceBorderColorHex }, children: "custom" }),
+                      " ",
+                      "| drop target:",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "inline-block rounded border px-1", style: { borderColor: props.observabilityColors.dragTargetBorderColorHex }, children: "custom" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "projected S' (source landing):",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "inline-block rounded border px-1", style: { borderColor: props.observabilityColors.projectedSourceBorderColorHex }, children: "custom" }),
+                      " ",
+                      "| projected T' (target landing, swap only):",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "inline-block rounded border px-1", style: { borderColor: props.observabilityColors.projectedTargetBorderColorHex }, children: "custom" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "projected Su' (successor promotion, insert/move):",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "inline-block rounded border px-1", style: { borderColor: props.observabilityColors.projectedSuccessorBorderColorHex }, children: "custom" })
+                    ] })
+                  ] }),
+                  props.showPaneHitZones ? /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-x-auto overflow-y-hidden rounded border border-white/10 bg-slate-950/70 px-2 py-1 font-mono text-[9px] tracking-[0.08em] text-slate-300", children: [
+                    /* @__PURE__ */ jsx("div", { className: "uppercase text-slate-500", children: "pane hit-zone legend" }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+                      "edge split zones:",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "rounded border px-1 text-sky-100", style: { borderColor: props.observabilityColors.hitZoneLeftColorHex, backgroundColor: `${props.observabilityColors.hitZoneLeftColorHex}33` }, children: "left" }),
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "rounded border px-1 text-violet-100", style: { borderColor: props.observabilityColors.hitZoneRightColorHex, backgroundColor: `${props.observabilityColors.hitZoneRightColorHex}33` }, children: "right" }),
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "rounded border px-1 text-amber-100", style: { borderColor: props.observabilityColors.hitZoneTopColorHex, backgroundColor: `${props.observabilityColors.hitZoneTopColorHex}33` }, children: "top" }),
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "rounded border px-1 text-teal-100", style: { borderColor: props.observabilityColors.hitZoneBottomColorHex, backgroundColor: `${props.observabilityColors.hitZoneBottomColorHex}33` }, children: "bottom" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "center swap zone: ",
+                      /* @__PURE__ */ jsx("span", { className: "rounded border px-1 text-emerald-100", style: { borderColor: props.observabilityColors.hitZoneCenterColorHex, backgroundColor: `${props.observabilityColors.hitZoneCenterColorHex}33` }, children: "center rect" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "blocked edge/center: ",
+                      /* @__PURE__ */ jsx("span", { className: "rounded border px-1 text-rose-100", style: { borderColor: props.observabilityColors.hitZoneBlockedColorHex, backgroundColor: `${props.observabilityColors.hitZoneBlockedColorHex}33` }, children: "blocked" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "text-slate-400", children: [
+                      "validity source leaf: ",
+                      props.selectedSourceLeafId
+                    ] })
+                  ] }) : null
+                ] })
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ANIMATION_CONTROL_DEFAULTS,
+  TILING_OBSERVABILITY_COLOR_DEFAULTS,
+  TILING_OBSERVABILITY_COLOR_ENABLE_DEFAULTS,
+  TilingObservabilityPanel,
+  TilingRendererWithObservability as TilingRenderer
+};