@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/settings/section-tab-panel.css

@@ -0,0 +1,157 @@
+.ui-workbench-section-tab-panel {
+  --ui-workbench-section-tab-panel-content-padding-inline: var(--workbench-panel-padding-inline);
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.ui-workbench-section-tab-panel__bar {
+  position: relative;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.ui-workbench-section-tab-panel__tabs-scroll {
+  overflow: hidden;
+  min-width: 0;
+}
+
+.ui-workbench-section-tab-panel__tabs {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: flex-end;
+  width: 100%;
+  gap: 0;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--color-border-subtle);
+  scrollbar-width: none;
+}
+
+.ui-workbench-section-tab-panel__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-workbench-section-tab-panel__tab {
+  flex: 0 0 auto;
+  align-self: stretch;
+  min-height: 28px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 10px;
+  border: 0;
+  border-bottom: 3px solid transparent;
+  border-radius: var(--shell-radius-tab, var(--radius-sm)) var(--shell-radius-tab, var(--radius-sm))
+    0 0;
+  margin-bottom: -1px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.35;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.ui-workbench-section-tab-panel[data-equal-width-tabs='true'] .ui-workbench-section-tab-panel__tab {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.ui-workbench-section-tab-panel__tab:hover {
+  color: var(--color-text);
+  background: var(--color-surface);
+}
+
+.ui-workbench-section-tab-panel__tab[data-active='true'] {
+  color: var(--color-text);
+  background: var(--color-editor-bg, var(--color-bg));
+  border-bottom-color: var(--color-accent);
+  font-weight: 600;
+}
+
+.ui-workbench-section-tab-panel__tab:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+
+.ui-workbench-section-tab-panel__tab span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-section-tab-panel__tab em {
+  flex: 0 0 auto;
+  color: var(--color-text-subtle);
+  font-size: var(--font-size-xs);
+  font-style: normal;
+}
+
+.ui-workbench-section-tab-panel__tab[data-active='true'] em {
+  color: var(--color-accent);
+}
+
+.ui-workbench-section-tab-panel__bar::before,
+.ui-workbench-section-tab-panel__bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 18px;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.ui-workbench-section-tab-panel__bar::before {
+  left: 0;
+  background: linear-gradient(
+    to right,
+    var(--color-surface, var(--color-bg)) 0%,
+    color-mix(in srgb, var(--color-surface, var(--color-bg)) 72%, transparent) 55%,
+    transparent 100%
+  );
+}
+
+.ui-workbench-section-tab-panel__bar::after {
+  right: 0;
+  background: linear-gradient(
+    to left,
+    var(--color-surface, var(--color-bg)) 0%,
+    color-mix(in srgb, var(--color-surface, var(--color-bg)) 72%, transparent) 55%,
+    transparent 100%
+  );
+}
+
+.ui-workbench-section-tab-panel[data-tab-scroll-at-start='false']:hover
+  .ui-workbench-section-tab-panel__bar::before,
+.ui-workbench-section-tab-panel[data-tab-scroll-at-start='false']:focus-within
+  .ui-workbench-section-tab-panel__bar::before,
+.ui-workbench-section-tab-panel[data-tab-scroll-at-end='false']:hover
+  .ui-workbench-section-tab-panel__bar::after,
+.ui-workbench-section-tab-panel[data-tab-scroll-at-end='false']:focus-within
+  .ui-workbench-section-tab-panel__bar::after {
+  opacity: 1;
+}
+
+.ui-workbench-section-tab-panel__scroll {
+  min-height: 0;
+  height: 100%;
+  /* Padding lives on the viewport so the absolute overlay rail can sit on the edge. */
+  padding-inline: 0;
+}
+
+.ui-workbench-section-tab-panel__scroll > .ui-scroll-area__viewport {
+  overscroll-behavior: contain;
+  padding-inline: var(--ui-workbench-section-tab-panel-content-padding-inline);
+}

package/src/workbench/settings/sectionScrollSpyDom.ts

@@ -0,0 +1,139 @@
+import type { WorkbenchSectionedPanelScrollSpyAxis } from './sectionedPanelScrollSpy';
+import { resolveWorkbenchSectionedPanelClampedScrollTarget } from './sectionedPanelScrollSpy';
+
+export function findPanelSection(content: HTMLElement, anchorId: string) {
+  return (
+    Array.from(content.children).find(
+      (child): child is HTMLElement => child instanceof HTMLElement && child.id === anchorId,
+    ) ?? null
+  );
+}
+
+export function readSectionStart(
+  content: HTMLElement,
+  section: HTMLElement,
+  axis: WorkbenchSectionedPanelScrollSpyAxis,
+) {
+  if (axis === 'horizontal') {
+    if (section.parentElement === content) {
+      return section.offsetLeft;
+    }
+
+    const containerRect = content.getBoundingClientRect();
+    const sectionRect = section.getBoundingClientRect();
+    return sectionRect.left - containerRect.left + content.scrollLeft;
+  }
+
+  if (section.parentElement === content) {
+    return section.offsetTop;
+  }
+
+  const containerRect = content.getBoundingClientRect();
+  const sectionRect = section.getBoundingClientRect();
+  return sectionRect.top - containerRect.top + content.scrollTop;
+}
+
+function readSectionSpan(section: HTMLElement, axis: WorkbenchSectionedPanelScrollSpyAxis) {
+  return axis === 'horizontal' ? section.offsetWidth : section.offsetHeight;
+}
+
+export function readSectionPositions(
+  content: HTMLElement,
+  anchorOrder: readonly string[],
+  axis: WorkbenchSectionedPanelScrollSpyAxis,
+) {
+  return anchorOrder
+    .map((anchorId) => {
+      const section = findPanelSection(content, anchorId);
+      if (!section) return null;
+
+      const start = readSectionStart(content, section, axis);
+      const span = readSectionSpan(section, axis);
+
+      return {
+        anchorId,
+        start,
+        end: start + span,
+      };
+    })
+    .filter(
+      (section): section is { anchorId: string; start: number; end: number } => section !== null,
+    );
+}
+
+function easeOutCubic(progress: number) {
+  return 1 - (1 - progress) ** 3;
+}
+
+/** Fixed-duration scroll for section nav clicks (distance-independent, unlike native smooth). */
+export function animateSectionPanelScrollTo({
+  axis,
+  durationMs,
+  element,
+  onComplete,
+  target,
+}: {
+  axis: WorkbenchSectionedPanelScrollSpyAxis;
+  durationMs: number;
+  element: HTMLElement;
+  onComplete: () => void;
+  target: number;
+}): () => void {
+  const metrics =
+    axis === 'horizontal'
+      ? {
+          clientSize: element.clientWidth,
+          scrollSize: element.scrollWidth,
+          scrollPosition: element.scrollLeft,
+        }
+      : {
+          clientSize: element.clientHeight,
+          scrollSize: element.scrollHeight,
+          scrollPosition: element.scrollTop,
+        };
+
+  const clampedTarget = resolveWorkbenchSectionedPanelClampedScrollTarget({
+    clientSize: metrics.clientSize,
+    scrollSize: metrics.scrollSize,
+    targetScrollPosition: target,
+  });
+  const start = metrics.scrollPosition;
+
+  const writeScrollPosition = (value: number) => {
+    if (axis === 'horizontal') {
+      element.scrollLeft = value;
+      return;
+    }
+
+    element.scrollTop = value;
+  };
+
+  if (durationMs <= 0 || Math.abs(clampedTarget - start) < 1) {
+    writeScrollPosition(clampedTarget);
+    onComplete();
+    return () => {};
+  }
+
+  const startedAt = performance.now();
+  let frameId = 0;
+
+  const tick = (now: number) => {
+    const progress = Math.min(1, (now - startedAt) / durationMs);
+    writeScrollPosition(start + (clampedTarget - start) * easeOutCubic(progress));
+
+    if (progress < 1) {
+      frameId = requestAnimationFrame(tick);
+      return;
+    }
+
+    onComplete();
+  };
+
+  frameId = requestAnimationFrame(tick);
+
+  return () => {
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}

package/src/workbench/settings/sectioned-panel.css

@@ -0,0 +1,162 @@
+.ui-workbench-sectioned-panel {
+  --ui-workbench-navigation-panel-nav-min-width: 200px;
+  --ui-workbench-navigation-panel-nav-width: 240px;
+  --ui-workbench-sectioned-panel-content-padding-left: 50px;
+}
+
+.ui-workbench-sectioned-panel-root {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.ui-workbench-sectioned-panel__nav {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  padding: 0;
+}
+
+.ui-workbench-sectioned-panel__nav-shell {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  height: 100%;
+}
+
+.ui-workbench-sectioned-panel__nav-links {
+  display: grid;
+  flex: 1;
+  align-content: start;
+  gap: 2px;
+  min-height: 0;
+  padding: 0 0 8px;
+}
+
+.ui-workbench-sectioned-panel__nav-link {
+  min-width: 0;
+  min-height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 3px 12px;
+  border: 1px solid transparent;
+  border-radius: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.35;
+  text-decoration: none;
+}
+
+.ui-workbench-sectioned-panel__nav-link:hover {
+  color: var(--color-text);
+  background: var(--color-surface);
+}
+
+.ui-workbench-sectioned-panel__nav-link[data-active='true'] {
+  color: var(--color-text);
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+  box-shadow: inset 2px 0 0 var(--color-accent);
+  font-weight: 600;
+}
+
+.ui-workbench-sectioned-panel__nav-link:focus-visible {
+  border-color: var(--color-accent);
+  outline: none;
+}
+
+.ui-workbench-sectioned-panel__nav-link span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-sectioned-panel__nav-link em {
+  flex: 0 0 auto;
+  color: var(--color-text-subtle);
+  font-size: var(--font-size-xs);
+  font-style: normal;
+}
+
+.ui-workbench-sectioned-panel__nav-link[data-active='true'] em {
+  color: var(--color-accent);
+}
+
+.ui-workbench-sectioned-panel .ui-workbench-sectioned-panel__body {
+  overflow: hidden;
+}
+
+.ui-workbench-sectioned-panel .ui-workbench-navigation-panel__content-scroll {
+  overflow: hidden;
+}
+
+.ui-workbench-sectioned-panel__scroll {
+  min-height: 0;
+  height: 100%;
+  /* Padding lives on the viewport so the absolute overlay rail can sit on the edge. */
+  padding-left: 0;
+}
+
+.ui-workbench-sectioned-panel__scroll > .ui-scroll-area__viewport {
+  overscroll-behavior: contain;
+  padding-left: var(--ui-workbench-sectioned-panel-content-padding-left);
+}
+
+.ui-workbench-sectioned-panel__nav-footer {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  padding: 0 6px 10px;
+}
+
+.ui-workbench-sectioned-panel__nav-reveal-zone {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 3;
+  width: 72px;
+  height: 72px;
+  pointer-events: auto;
+}
+
+.ui-workbench-sectioned-panel__nav-open-overlay {
+  position: absolute;
+  left: 10px;
+  bottom: 14px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.ui-workbench-sectioned-panel__nav-reveal-zone:hover
+  .ui-workbench-sectioned-panel__nav-open-overlay,
+.ui-workbench-sectioned-panel__nav-reveal-zone:focus-within
+  .ui-workbench-sectioned-panel__nav-open-overlay {
+  opacity: 1;
+}
+
+.ui-workbench-sectioned-panel__nav-open-overlay .ui-workbench-sectioned-panel__nav-toggle {
+  pointer-events: auto;
+}
+
+.ui-workbench-sectioned-panel__nav-toggle {
+  color: var(--color-text-muted);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+}
+
+.ui-workbench-sectioned-panel__nav-toggle--overlay {
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-text) 12%, transparent);
+}
+
+.ui-workbench-sectioned-panel__nav-toggle:hover {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}