@pgcorp/ui-kit 0.1.0

package/src/components/shared/containers/SSidebarGroup.vue

@@ -0,0 +1,443 @@
+<template>
+  <div v-bind="ownedAttrs.bindings()" ref="groupRef" class="s-sidebar-group">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue';
+
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import {
+  sidebarGroupContextKey,
+  type RegisteredSidebarSection,
+  type SidebarSectionRegistration,
+  type SidebarSectionStyle,
+} from '../_internal/sidebarGroupContext';
+import {
+  assertSidebarSectionsState,
+  createSidebarSectionsTransition,
+  sidebarSectionsStateEqual,
+  type SectionState,
+  type SidebarGroupEmits,
+  type SidebarSectionReplacement,
+  type SidebarSectionsState,
+} from './sidebar';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  sectionsState: SidebarSectionsState;
+}>();
+
+const emit = defineEmits<SidebarGroupEmits>();
+
+const ownedAttrs = useOwnedAttrs({ component: 'SSidebarGroup', owner: 'sidebar group root' });
+const groupRef = ref<HTMLDivElement | null>(null);
+const registrations = shallowRef<readonly SidebarSectionRegistration[]>([]);
+let resizeObserver: ResizeObserver | null = null;
+let mounted = false;
+let geometryRevision = 0;
+let activeResizePair: Readonly<{ topKey: string; bottomKey: string }> | null = null;
+
+assertSidebarSectionsState(props.sectionsState);
+
+function currentState(): SidebarSectionsState {
+  assertSidebarSectionsState(props.sectionsState);
+  return props.sectionsState;
+}
+
+function measuredHeight(element: HTMLElement, coordinate: string): number {
+  const height = element.offsetHeight;
+  if (!Number.isFinite(height) || height < 0) {
+    throw new RangeError(`SSidebarGroup: ${coordinate}.offsetHeight must be a non-negative finite number`);
+  }
+  return height;
+}
+
+function measuredContainerHeight(): number {
+  const element = groupRef.value;
+  if (!element) throw new Error('SSidebarGroup: mounted group element is unavailable');
+  const height = element.clientHeight;
+  if (!Number.isFinite(height) || height < 0) {
+    throw new RangeError('SSidebarGroup: group clientHeight must be a non-negative finite number');
+  }
+  return height;
+}
+
+function compareRegistrations(
+  left: SidebarSectionRegistration,
+  right: SidebarSectionRegistration,
+): number {
+  const position = left.element.compareDocumentPosition(right.element);
+  if (position & Node.DOCUMENT_POSITION_DISCONNECTED) {
+    throw new Error(
+      `SSidebarGroup: registered sections '${left.key}' and '${right.key}' are not in one DOM tree`,
+    );
+  }
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+  throw new Error(`SSidebarGroup: registered sections '${left.key}' and '${right.key}' have ambiguous DOM order`);
+}
+
+const orderedSections = computed<readonly RegisteredSidebarSection[]>(() => {
+  const state = currentState();
+  return [...registrations.value]
+    .sort(compareRegistrations)
+    .map((registration) => {
+      const section = state[registration.key];
+      if (!section) {
+        throw new Error(
+          `SSidebarGroup: registered section '${registration.key}' has no controlled state`,
+        );
+      }
+      return {
+        key: registration.key,
+        element: registration.element,
+        state: section,
+      };
+    });
+});
+
+function registeredSection(key: string): RegisteredSidebarSection {
+  const section = orderedSections.value.find((candidate) => candidate.key === key);
+  if (!section) {
+    throw new Error(`SSidebarGroup: mounted geometry is unavailable for section '${key}'`);
+  }
+  return section;
+}
+
+function emitTransition(replacements: readonly SidebarSectionReplacement[]): void {
+  const state = currentState();
+  const next = createSidebarSectionsTransition(state, replacements);
+  if (!sidebarSectionsStateEqual(next, state)) emit('update-sections', next);
+}
+
+function scheduleGeometryReconciliation(): void {
+  const revision = ++geometryRevision;
+  queueMicrotask(() => {
+    if (!mounted || revision !== geometryRevision || activeResizePair !== null) return;
+    reconcileContainerGeometry();
+  });
+}
+
+function reconcileContainerGeometry(): void {
+  const containerHeight = measuredContainerHeight();
+  if (containerHeight === 0) return;
+  const sections = orderedSections.value;
+  const openSections = sections.filter((section) => section.state.isOpen);
+  if (openSections.length === 0) return;
+  const flexibleIndex = openSections.findIndex((section) => section.state.size === null);
+  if (flexibleIndex < 0) {
+    throw new Error('SSidebarGroup: controlled state has no flexible open section');
+  }
+
+  const closedHeight = sections
+    .filter((section) => !section.state.isOpen)
+    .reduce((sum, section) => (
+      sum + measuredHeight(section.element, `sections.${section.key}`)
+    ), 0);
+  const fixedSections = openSections.filter((_, index) => index !== flexibleIndex);
+  const fixedHeight = fixedSections.reduce((sum, section) => {
+    if (section.state.size === null) {
+      throw new Error(`SSidebarGroup: section '${section.key}' unexpectedly owns flexible size`);
+    }
+    return sum + section.state.size;
+  }, 0);
+  const flexible = openSections[flexibleIndex]!;
+  let overflow = closedHeight + fixedHeight + flexible.state.minSize - containerHeight;
+  if (overflow <= 0) return;
+
+  const orderedCandidates = openSections
+    .map((section, index) => ({ section, index }))
+    .filter(({ index }) => index !== flexibleIndex)
+    .map(({ section, index }) => ({
+      section,
+      distance: Math.abs(index - flexibleIndex),
+    }))
+    .sort((left, right) => left.distance - right.distance);
+  const replacements: SidebarSectionReplacement[] = [];
+  for (const candidate of orderedCandidates) {
+    if (overflow <= 0) break;
+    const size = candidate.section.state.size;
+    if (size === null) {
+      throw new Error(`SSidebarGroup: section '${candidate.section.key}' unexpectedly owns flexible size`);
+    }
+    const available = size - candidate.section.state.minSize;
+    if (available <= 0) continue;
+    const reduction = Math.min(available, overflow);
+    replacements.push({
+      key: candidate.section.key,
+      state: { ...candidate.section.state, size: size - reduction },
+    });
+    overflow -= reduction;
+  }
+  if (replacements.length > 0) emitTransition(replacements);
+}
+
+function registerSection(registration: SidebarSectionRegistration): () => void {
+  if (typeof registration.key !== 'string' || registration.key.trim().length === 0) {
+    throw new TypeError('SSidebarGroup: registered section key must be non-empty');
+  }
+  if (!(registration.element instanceof HTMLElement)) {
+    throw new TypeError('SSidebarGroup: registered section element must be an HTMLElement');
+  }
+  if (!Object.hasOwn(currentState(), registration.key)) {
+    throw new Error(`SSidebarGroup: registered section '${registration.key}' has no controlled state`);
+  }
+  if (registrations.value.some((current) => current.key === registration.key)) {
+    throw new Error(`SSidebarGroup: duplicate registered section key '${registration.key}'`);
+  }
+  if (registrations.value.some((current) => current.element === registration.element)) {
+    throw new Error('SSidebarGroup: one section element cannot be registered under multiple keys');
+  }
+  const storedRegistration = Object.freeze({ ...registration });
+  registrations.value = Object.freeze([...registrations.value, storedRegistration]);
+  scheduleGeometryReconciliation();
+  let active = true;
+  return () => {
+    if (!active) return;
+    active = false;
+    registrations.value = Object.freeze(
+      registrations.value.filter((current) => current !== storedRegistration),
+    );
+    scheduleGeometryReconciliation();
+  };
+}
+
+function nearestOpenSection(
+  source: RegisteredSidebarSection,
+  candidates: readonly RegisteredSidebarSection[],
+): RegisteredSidebarSection {
+  const sections = orderedSections.value;
+  const sourceIndex = sections.findIndex((section) => section.key === source.key);
+  const ordered = [...candidates].sort((left, right) => {
+    const leftDistance = Math.abs(sections.findIndex((section) => section.key === left.key) - sourceIndex);
+    const rightDistance = Math.abs(sections.findIndex((section) => section.key === right.key) - sourceIndex);
+    return leftDistance - rightDistance;
+  });
+  const target = ordered[0];
+  if (!target) throw new Error(`SSidebarGroup: no open neighbor exists for section '${source.key}'`);
+  return target;
+}
+
+function toggleSection(key: string): void {
+  const state = currentState();
+  const current = state[key];
+  if (!current) throw new Error(`SSidebarGroup: cannot toggle unknown section '${key}'`);
+  const openSections = Object.entries(state)
+    .filter(([, section]) => section.isOpen)
+    .map(([sectionKey]) => sectionKey);
+
+  if (current.isOpen) {
+    if (current.size === null && openSections.length > 1) {
+      const source = registeredSection(key);
+      const neighbors = orderedSections.value.filter(
+        (section) => section.key !== key && section.state.isOpen,
+      );
+      const nextFlexible = nearestOpenSection(source, neighbors);
+      emitTransition([
+        {
+          key,
+          state: {
+            ...current,
+            size: Math.max(current.minSize, measuredHeight(source.element, `sections.${key}`)),
+          },
+        },
+        { key: nextFlexible.key, state: { ...nextFlexible.state, size: null } },
+      ]);
+    }
+    emit('toggle-section', key);
+    return;
+  }
+
+  if (openSections.length === 0) {
+    if (current.size !== null) emitTransition([{ key, state: { ...current, size: null } }]);
+    emit('toggle-section', key);
+    return;
+  }
+
+  const source = registeredSection(key);
+  let nextSize = current.size ?? current.minSize;
+  const containerHeight = measuredContainerHeight();
+  if (containerHeight > 0) {
+    const occupiedMinimum = orderedSections.value.reduce((sum, section) => {
+      if (section.key === key) return sum;
+      if (section.state.isOpen) return sum + section.state.minSize;
+      return sum + measuredHeight(section.element, `sections.${section.key}`);
+    }, 0);
+    nextSize = Math.min(nextSize, Math.max(current.minSize, containerHeight - occupiedMinimum));
+  }
+  void source;
+  if (current.size !== nextSize) {
+    emitTransition([{ key, state: { ...current, size: nextSize } }]);
+  }
+  emit('toggle-section', key);
+}
+
+function getSectionStyle(key: string): SidebarSectionStyle {
+  const state = currentState()[key];
+  if (!state) throw new Error(`SSidebarGroup: cannot style unknown section '${key}'`);
+  if (!state.isOpen) {
+    return Object.freeze({ flexGrow: 0, flexShrink: 0, flexBasis: 'auto', overflow: 'hidden' });
+  }
+  if (state.size !== null) {
+    return Object.freeze({
+      flexBasis: `${state.size}px`,
+      flexGrow: 0,
+      flexShrink: 0,
+      minHeight: `${state.minSize}px`,
+    });
+  }
+  return Object.freeze({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '0%',
+    minHeight: `${state.minSize}px`,
+  });
+}
+
+function resizePair(
+  topKey: string,
+  bottomKey: string,
+): readonly [RegisteredSidebarSection, RegisteredSidebarSection] {
+  const sections = orderedSections.value;
+  const topIndex = sections.findIndex((section) => section.key === topKey);
+  if (topIndex < 0) throw new Error(`SSidebarGroup: unknown resize top section '${topKey}'`);
+  const bottomIndex = sections.findIndex((section) => section.key === bottomKey);
+  if (bottomIndex < 0) throw new Error(`SSidebarGroup: unknown resize bottom section '${bottomKey}'`);
+  const top = sections[topIndex]!;
+  const bottom = sections[bottomIndex]!;
+  if (!top.state.isOpen || !bottom.state.isOpen) {
+    throw new Error('SSidebarGroup: both resize sections must be open');
+  }
+  const nextOpen = sections.find((section, index) => index > topIndex && section.state.isOpen);
+  if (!nextOpen || nextOpen.key !== bottomKey || bottomIndex <= topIndex) {
+    throw new Error(
+      `SSidebarGroup: '${topKey}' and '${bottomKey}' must be consecutive open sections`,
+    );
+  }
+  return [top, bottom];
+}
+
+function beginResize(topKey: string, bottomKey: string): void {
+  resizePair(topKey, bottomKey);
+  if (activeResizePair !== null) {
+    throw new Error(
+      `SSidebarGroup: resize '${activeResizePair.topKey}'/'${activeResizePair.bottomKey}' is already active`,
+    );
+  }
+  activeResizePair = Object.freeze({ topKey, bottomKey });
+  geometryRevision += 1;
+}
+
+function resizeSections(topKey: string, bottomKey: string, requestedTopSize: number): void {
+  if (!Number.isFinite(requestedTopSize)) {
+    throw new RangeError('SSidebarGroup: requestedTopSize must be a finite number');
+  }
+  if (
+    activeResizePair !== null
+    && (activeResizePair.topKey !== topKey || activeResizePair.bottomKey !== bottomKey)
+  ) {
+    throw new Error('SSidebarGroup: resize update does not match the active section pair');
+  }
+  const [top, bottom] = resizePair(topKey, bottomKey);
+  const topHeight = Math.max(
+    top.state.minSize,
+    measuredHeight(top.element, `sections.${top.key}`),
+  );
+  const bottomHeight = Math.max(
+    bottom.state.minSize,
+    measuredHeight(bottom.element, `sections.${bottom.key}`),
+  );
+  const minimumPairSize = top.state.minSize + bottom.state.minSize;
+  const measuredPairSize = Math.max(minimumPairSize, topHeight + bottomHeight);
+  const containerHeight = measuredContainerHeight();
+  const occupiedByOthers = orderedSections.value.reduce((sum, section) => {
+    if (section.key === topKey || section.key === bottomKey) return sum;
+    return sum + measuredHeight(section.element, `sections.${section.key}`);
+  }, 0);
+  const availablePairSize = containerHeight > 0
+    ? Math.max(minimumPairSize, containerHeight - occupiedByOthers)
+    : measuredPairSize;
+  const pairSize = Math.max(minimumPairSize, Math.min(measuredPairSize, availablePairSize));
+  const maximumTopSize = pairSize - bottom.state.minSize;
+  const nextTopSize = Math.min(maximumTopSize, Math.max(top.state.minSize, requestedTopSize));
+  const nextBottomSize = pairSize - nextTopSize;
+  const flexibleOwner = top.state.size === null ? bottom.key : (
+    bottom.state.size === null ? bottom.key : null
+  );
+  const nextTop: SectionState = { ...top.state, size: nextTopSize };
+  const nextBottom: SectionState = {
+    ...bottom.state,
+    size: flexibleOwner === bottom.key ? null : nextBottomSize,
+  };
+  if (
+    nextTop.size === top.state.size
+    && nextBottom.size === bottom.state.size
+  ) return;
+  emitTransition([
+    { key: top.key, state: nextTop },
+    { key: bottom.key, state: nextBottom },
+  ]);
+}
+
+function finishResize(topKey: string, bottomKey: string): void {
+  if (activeResizePair === null) {
+    throw new Error('SSidebarGroup: cannot finish a resize that is not active');
+  }
+  if (activeResizePair.topKey !== topKey || activeResizePair.bottomKey !== bottomKey) {
+    throw new Error('SSidebarGroup: resize end does not match the active section pair');
+  }
+  activeResizePair = null;
+  scheduleGeometryReconciliation();
+}
+
+provide(sidebarGroupContextKey, {
+  sectionsState: computed(currentState),
+  orderedSections,
+  registerSection,
+  toggleSection,
+  getSectionStyle,
+  beginResize,
+  resizeSections,
+  finishResize,
+});
+
+watch(
+  () => props.sectionsState,
+  () => {
+    currentState();
+    scheduleGeometryReconciliation();
+  },
+  { deep: true, flush: 'post' },
+);
+
+onMounted(() => {
+  mounted = true;
+  const element = groupRef.value;
+  if (!element) throw new Error('SSidebarGroup: group element is unavailable during mount');
+  resizeObserver = new ResizeObserver(scheduleGeometryReconciliation);
+  resizeObserver.observe(element);
+  scheduleGeometryReconciliation();
+});
+
+onBeforeUnmount(() => {
+  mounted = false;
+  geometryRevision += 1;
+  activeResizePair = null;
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  registrations.value = Object.freeze([]);
+});
+</script>
+
+<style lang="postcss" src="./SSidebarGroup.css" scoped></style>

package/src/components/shared/containers/SSidebarSection.css

@@ -0,0 +1,41 @@
+@reference "../../../styles/reference.css";
+
+.s-sidebar-section-wrapper {
+  @apply flex flex-col;
+  min-height: 0;
+}
+
+.s-sidebar-section {
+  @apply flex flex-col;
+  @apply min-h-0 flex-grow w-full;
+}
+
+.s-sidebar-section-wrapper + .s-sidebar-section-wrapper .s-sidebar-section {
+  @apply border-t border-surface-200 dark:border-surface-700;
+}
+
+.s-sidebar-section-wrapper--resizable-before .s-sidebar-section {
+  @apply border-t-0;
+}
+
+.s-sidebar-section-header {
+  @apply flex w-full items-center gap-1 px-2 h-7;
+  @apply text-surface-600 dark:text-surface-300;
+  @apply shrink-0;
+}
+.s-sidebar-section-header--mobile {
+  @apply h-6 px-1.5;
+}
+
+.s-sidebar-section-trigger {
+  @apply min-w-0 flex-1;
+}
+
+.s-sidebar-section-actions {
+  @apply flex shrink-0 items-center gap-1 ml-auto;
+}
+
+.s-sidebar-section-content {
+  @apply text-sm text-surface-700 dark:text-surface-300;
+  @apply flex-grow overflow-y-auto min-h-0;
+}