[Init] Initial commit - NetMesh terminal manager

components/systemManager/systemManagerTabBarScroll.ts

@@ -0,0 +1,188 @@
+/** Edge buffer so an active tab is not stuck flush against the clip edge. */
+const TAB_COMFORT_EDGE_RATIO = 0.28;
+const TAB_COMFORT_EDGE_MIN = 28;
+const TAB_COMFORT_EDGE_MAX = 72;
+
+export const SYSTEM_MANAGER_TAB_BAR_ICON_ONLY_CLASS = 'system-manager-tab-bar--icon-only';
+
+/** Quiet period after resize before re-evaluating icon-only (side-panel drag). */
+export const SYSTEM_MANAGER_TAB_BAR_SETTLE_MS = 120;
+
+/**
+ * Extra room required before leaving icon-only. Keeps a small hysteresis without
+ * locking the bar into permanent icon-only mode.
+ */
+export const SYSTEM_MANAGER_TAB_BAR_EXPAND_SLACK_PX = 8;
+
+export type SystemManagerTabBarLabeledFit = {
+  /** Labeled tabs need more width than the bar's inner budget. */
+  overflows: boolean;
+  /** Labeled tabs fit with expand slack — safe to show text again. */
+  fitsWithSlack: boolean;
+};
+
+function readFlexGapPx(el: HTMLElement | null | undefined): number {
+  if (!el) return 0;
+  const style = getComputedStyle(el);
+  const raw = style.columnGap || style.gap || '0';
+  const value = parseFloat(raw);
+  return Number.isFinite(value) ? value : 0;
+}
+
+/**
+ * Measure whether the *labeled* tab strip fits in the bar's current width.
+ *
+ * Important: do not use scrollWidth vs clientWidth for the "fits" check.
+ * When content does not overflow, browsers often report scrollWidth === clientWidth,
+ * so "fitsWithSlack" becomes permanently false and icon-only never exits.
+ *
+ * Instead: force labels on, sum real tab (and overflow) box widths, compare to
+ * the bar's inner budget (clientWidth minus horizontal padding).
+ */
+export function measureSystemManagerTabBarLabeledFit(
+  container: HTMLElement | null | undefined,
+  expandSlackPx: number = SYSTEM_MANAGER_TAB_BAR_EXPAND_SLACK_PX,
+): SystemManagerTabBarLabeledFit {
+  if (!container) {
+    return { overflows: false, fitsWithSlack: true };
+  }
+
+  const budget = container.clientWidth;
+  // Hidden / zero-width host: do not pretend labels fit (that would drop
+  // icon-only while the side panel is display:none or still laying out).
+  if (budget <= 0) {
+    return { overflows: false, fitsWithSlack: false };
+  }
+
+  const labelEls = Array.from(
+    container.querySelectorAll<HTMLElement>('.system-manager-tab-label'),
+  );
+  const hadIconOnly = container.classList.contains(SYSTEM_MANAGER_TAB_BAR_ICON_ONLY_CLASS);
+  const prevDisplay = labelEls.map((el) => el.style.display);
+
+  try {
+    if (hadIconOnly) {
+      container.classList.remove(SYSTEM_MANAGER_TAB_BAR_ICON_ONLY_CLASS);
+    }
+    for (const el of labelEls) {
+      // Force visible for measurement even if a stylesheet still hides them.
+      el.style.display = 'inline';
+    }
+    void container.offsetWidth;
+
+    const tabs = Array.from(container.querySelectorAll<HTMLElement>('.system-manager-tab'));
+    let contentWidth = 0;
+    for (const tab of tabs) {
+      contentWidth += tab.getBoundingClientRect().width;
+    }
+
+    const row = tabs[0]?.parentElement ?? null;
+    const gap = readFlexGapPx(row);
+    if (tabs.length > 1) {
+      contentWidth += gap * (tabs.length - 1);
+    }
+
+    const overflow = container.querySelector<HTMLElement>(
+      '[data-section="system-manager-tab-overflow"]',
+    );
+    if (overflow) {
+      const overflowWidth = overflow.getBoundingClientRect().width;
+      if (overflowWidth > 0.5) {
+        contentWidth += overflowWidth + (tabs.length > 0 ? gap : 0);
+      }
+    }
+
+    const style = getComputedStyle(container);
+    const padX = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
+    // clientWidth includes padding; children lay out in the content box.
+    const available = Math.max(0, budget - padX);
+
+    return {
+      overflows: contentWidth > available + 1,
+      fitsWithSlack: contentWidth + expandSlackPx <= available,
+    };
+  } finally {
+    labelEls.forEach((el, i) => {
+      el.style.display = prevDisplay[i] ?? '';
+    });
+    if (hadIconOnly) {
+      container.classList.add(SYSTEM_MANAGER_TAB_BAR_ICON_ONLY_CLASS);
+    }
+  }
+}
+
+/**
+ * Enter icon-only as soon as labels overflow; leave only when they fit with slack.
+ */
+export function resolveSystemManagerTabBarIconOnly(
+  fit: SystemManagerTabBarLabeledFit,
+  currentlyIconOnly: boolean,
+): boolean {
+  if (currentlyIconOnly) {
+    return !fit.fitsWithSlack;
+  }
+  return fit.overflows;
+}
+
+/**
+ * Scroll a system-manager sub-tab into a comfortable position inside its
+ * horizontal tab bar. Uses container.scrollTo so nested panels are not
+ * scrolled by element.scrollIntoView.
+ */
+export function scrollSystemManagerTabIntoView(
+  container: HTMLElement | null | undefined,
+  tab: HTMLElement | null | undefined,
+  behavior: ScrollBehavior = 'smooth',
+): void {
+  if (!container || !tab) return;
+  if (container.scrollWidth <= container.clientWidth + 1) return;
+
+  const containerRect = container.getBoundingClientRect();
+  const tabRect = tab.getBoundingClientRect();
+  const edgeBuffer = Math.min(
+    TAB_COMFORT_EDGE_MAX,
+    Math.max(TAB_COMFORT_EDGE_MIN, containerRect.width * TAB_COMFORT_EDGE_RATIO),
+  );
+
+  const overflowsLeft = tabRect.left < containerRect.left + edgeBuffer;
+  const overflowsRight = tabRect.right > containerRect.right - edgeBuffer;
+  if (!overflowsLeft && !overflowsRight) return;
+
+  const tabCenter =
+    tabRect.left - containerRect.left + container.scrollLeft + tabRect.width / 2;
+  const maxScrollLeft = container.scrollWidth - container.clientWidth;
+  const targetLeft = Math.max(
+    0,
+    Math.min(maxScrollLeft, tabCenter - container.clientWidth / 2),
+  );
+
+  if (Math.abs(container.scrollLeft - targetLeft) < 1) return;
+  container.scrollTo({ left: targetLeft, behavior });
+}
+
+/**
+ * Map a wheel event onto horizontal scrollLeft. Vertical mouse wheel becomes
+ * left/right motion when the bar overflows.
+ *
+ * Returns true when the event was consumed (caller should preventDefault).
+ */
+export function applyHorizontalWheelToScrollContainer(
+  container: HTMLElement,
+  event: Pick<WheelEvent, 'deltaX' | 'deltaY' | 'deltaMode'>,
+): boolean {
+  if (container.scrollWidth <= container.clientWidth + 1) return false;
+
+  // Prefer non-zero deltaX so trackpads that emit both axes feel natural.
+  const rawDelta = event.deltaX !== 0 ? event.deltaX : event.deltaY;
+  if (rawDelta === 0) return false;
+
+  // deltaMode: 0 = pixels, 1 = lines, 2 = pages
+  const scale = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? container.clientWidth : 1;
+  const delta = rawDelta * scale;
+  const maxScrollLeft = container.scrollWidth - container.clientWidth;
+  const next = Math.max(0, Math.min(maxScrollLeft, container.scrollLeft + delta));
+  if (next === container.scrollLeft) return false;
+
+  container.scrollLeft = next;
+  return true;
+}