@pgcorp/ui-kit 0.1.2 → 0.3.0

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

@@ -43,9 +43,10 @@ const emit = defineEmits<SidebarGroupEmits>();
 const ownedAttrs = useOwnedAttrs({ component: 'SSidebarGroup', owner: 'sidebar group root' });
 const groupRef = ref<HTMLDivElement | null>(null);
 const registrations = shallowRef<readonly SidebarSectionRegistration[]>([]);
+const effectiveSizes = new Map<string, number>();
 let resizeObserver: ResizeObserver | null = null;
 let mounted = false;
-let geometryRevision = 0;
+const geometryRevision = ref(0);
 let activeResizePair: Readonly<{ topKey: string; bottomKey: string }> | null = null;
 
 assertSidebarSectionsState(props.sectionsState);
@@ -122,65 +123,74 @@ function emitTransition(replacements: readonly SidebarSectionReplacement[]): voi
 }
 
 function scheduleGeometryReconciliation(): void {
-  const revision = ++geometryRevision;
+  const revision = ++geometryRevision.value;
   queueMicrotask(() => {
-    if (!mounted || revision !== geometryRevision || activeResizePair !== null) return;
+    if (!mounted || revision !== geometryRevision.value || activeResizePair !== null) return;
     reconcileContainerGeometry();
   });
 }
 
+function fitOpenSectionSizes(
+  openSections: readonly RegisteredSidebarSection[],
+  availableSize: number,
+): ReadonlyMap<string, number> {
+  const minimumTotal = openSections.reduce((sum, section) => sum + section.state.minSize, 0);
+  const targetSize = Math.max(minimumTotal, availableSize);
+  const flexible = openSections.find((section) => section.state.size === null);
+  const sizes = new Map<string, number>();
+
+  for (const section of openSections) {
+    const remembered = effectiveSizes.get(section.key);
+    const preferred = remembered ?? section.state.size ?? section.state.minSize;
+    sizes.set(section.key, Math.max(section.state.minSize, preferred));
+  }
+
+  let delta = targetSize - [...sizes.values()].reduce((sum, size) => sum + size, 0);
+  if (delta > 0) {
+    const growTarget = flexible ?? openSections.at(-1);
+    if (growTarget) sizes.set(growTarget.key, sizes.get(growTarget.key)! + delta);
+    delta = 0;
+  }
+
+  if (delta < 0) {
+    const flexibleIndex = flexible
+      ? openSections.findIndex((section) => section.key === flexible.key)
+      : openSections.length - 1;
+    const shrinkOrder = openSections
+      .map((section, index) => ({ section, distance: Math.abs(index - flexibleIndex) }))
+      .sort((left, right) => left.distance - right.distance);
+    let overflow = -delta;
+    for (const { section } of shrinkOrder) {
+      if (overflow <= 0) break;
+      const size = sizes.get(section.key)!;
+      const reduction = Math.min(size - section.state.minSize, overflow);
+      sizes.set(section.key, size - reduction);
+      overflow -= reduction;
+    }
+  }
+
+  return sizes;
+}
+
 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;
+  const nextSizes = fitOpenSectionSizes(openSections, containerHeight - closedHeight);
+  let changed = false;
+  for (const section of openSections) {
+    const nextSize = nextSizes.get(section.key)!;
+    if (effectiveSizes.get(section.key) !== nextSize) changed = true;
+    effectiveSizes.set(section.key, nextSize);
   }
-  if (replacements.length > 0) emitTransition(replacements);
+  if (changed) geometryRevision.value += 1;
 }
 
 function registerSection(registration: SidebarSectionRegistration): () => void {
@@ -284,27 +294,28 @@ function toggleSection(key: string): void {
 }
 
 function getSectionStyle(key: string): SidebarSectionStyle {
+  void geometryRevision.value;
   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`,
-    });
-  }
+  const effectiveSize = effectiveSizes.get(key) ?? state.size ?? state.minSize;
   return Object.freeze({
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: '0%',
-    minHeight: `${state.minSize}px`,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: `${effectiveSize}px`,
+    minHeight: 'var(--s-sidebar-collapsed-section-height)',
   });
 }
 
+function getSectionSize(key: string): number {
+  void geometryRevision.value;
+  const section = registeredSection(key);
+  if (!section.state.isOpen) return measuredHeight(section.element, `sections.${key}`);
+  return effectiveSizes.get(key) ?? section.state.size ?? section.state.minSize;
+}
+
 function resizePair(
   topKey: string,
   bottomKey: string,
@@ -336,7 +347,7 @@ function beginResize(topKey: string, bottomKey: string): void {
     );
   }
   activeResizePair = Object.freeze({ topKey, bottomKey });
-  geometryRevision += 1;
+  geometryRevision.value += 1;
 }
 
 function resizeSections(topKey: string, bottomKey: string, requestedTopSize: number): void {
@@ -349,45 +360,51 @@ function resizeSections(topKey: string, bottomKey: string, requestedTopSize: num
   ) {
     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}`),
+  resizePair(topKey, bottomKey);
+  const openSections = orderedSections.value.filter((section) => section.state.isOpen);
+  const topOpenIndex = openSections.findIndex((section) => section.key === topKey);
+  const upper = openSections.slice(0, topOpenIndex + 1);
+  const lower = openSections.slice(topOpenIndex + 1);
+  const currentUpperSize = upper.reduce(
+    (sum, section) => sum + (effectiveSizes.get(section.key) ?? measuredHeight(section.element, `sections.${section.key}`)),
+    0,
   );
-  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 delta = requestedTopSize - currentUpperSize;
+  const shrinking = delta > 0 ? [...lower] : [...upper].reverse();
+  const growing = delta > 0 ? upper.at(-1) : lower[0];
+  let transferable = Math.abs(delta);
+  transferable = Math.min(
+    transferable,
+    shrinking.reduce((sum, section) => {
+      const size = effectiveSizes.get(section.key) ?? measuredHeight(section.element, `sections.${section.key}`);
+      return sum + Math.max(0, size - section.state.minSize);
+    }, 0),
   );
-  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 },
-  ]);
+  if (transferable === 0 || !growing) return;
+
+  let remaining = transferable;
+  for (const section of shrinking) {
+    if (remaining <= 0) break;
+    const size = effectiveSizes.get(section.key) ?? measuredHeight(section.element, `sections.${section.key}`);
+    const reduction = Math.min(size - section.state.minSize, remaining);
+    effectiveSizes.set(section.key, size - reduction);
+    remaining -= reduction;
+  }
+  const growSize = effectiveSizes.get(growing.key)
+    ?? measuredHeight(growing.element, `sections.${growing.key}`);
+  effectiveSizes.set(growing.key, growSize + transferable);
+  geometryRevision.value += 1;
+
+  const replacements = openSections
+    .filter((section) => section.state.size !== null)
+    .map((section) => ({
+      key: section.key,
+      state: {
+        ...section.state,
+        size: effectiveSizes.get(section.key)!,
+      } satisfies SectionState,
+    }));
+  if (replacements.length > 0) emitTransition(replacements);
 }
 
 function finishResize(topKey: string, bottomKey: string): void {
@@ -404,9 +421,11 @@ function finishResize(topKey: string, bottomKey: string): void {
 provide(sidebarGroupContextKey, {
   sectionsState: computed(currentState),
   orderedSections,
+  geometryRevision,
   registerSection,
   toggleSection,
   getSectionStyle,
+  getSectionSize,
   beginResize,
   resizeSections,
   finishResize,
@@ -432,7 +451,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   mounted = false;
-  geometryRevision += 1;
+  geometryRevision.value += 1;
   activeResizePair = null;
   resizeObserver?.disconnect();
   resizeObserver = null;

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

@@ -3,11 +3,13 @@
 .s-sidebar-section-wrapper {
   @apply flex flex-col;
   min-height: 0;
+  overflow: hidden;
 }
 
 .s-sidebar-section {
-  @apply flex flex-col;
-  @apply min-h-0 flex-grow w-full;
+  @apply flex flex-col min-h-0 w-full;
+  flex: 1 1 0%;
+  overflow: hidden;
 }
 
 .s-sidebar-section-wrapper + .s-sidebar-section-wrapper .s-sidebar-section {
@@ -19,9 +21,18 @@
 }
 
 .s-sidebar-section-header {
-  @apply flex w-full items-center gap-1 px-2 h-7;
+  @apply flex w-full items-center gap-1 px-1 h-7;
+  @apply bg-surface-50/70 dark:bg-surface-800/55;
   @apply text-surface-600 dark:text-surface-300;
   @apply shrink-0;
+  transition:
+    background-color var(--s-motion-standard) ease,
+    color var(--s-motion-standard) ease;
+}
+
+.s-sidebar-section-header:has([data-sidebar-section-toggle]:hover),
+.s-sidebar-section-header:has([data-sidebar-section-toggle]:focus-visible) {
+  @apply bg-surface-100 text-surface-800 dark:bg-surface-700/70 dark:text-surface-100;
 }
 .s-sidebar-section-header--mobile {
   @apply h-6 px-1.5;
@@ -37,5 +48,6 @@
 
 .s-sidebar-section-content {
   @apply text-sm text-surface-700 dark:text-surface-300;
-  @apply flex-grow overflow-y-auto min-h-0;
+  @apply overflow-y-auto overflow-x-hidden min-h-0;
+  flex: 1 1 0%;
 }

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

@@ -26,6 +26,8 @@
           <SButton
             :id="triggerId"
             :size="layout === 'mobile' ? 'xs' : 'sm'"
+            spacing="tight"
+            hover-surface="parent"
             severity="secondary"
             appearance="ghost"
             shape="row"
@@ -208,14 +210,8 @@ const topSectionIndex = computed(() => {
   return -1;
 });
 
-function measuredHeight(section: RegisteredSidebarSection): number {
-  const height = section.element.offsetHeight;
-  if (!Number.isFinite(height) || height < 0) {
-    throw new RangeError(
-      `SSidebarSection: sections.${section.key}.offsetHeight must be a non-negative finite number`,
-    );
-  }
-  return height;
+function effectiveHeight(section: RegisteredSidebarSection): number {
+  return Math.max(section.state.minSize, groupContext.getSectionSize(section.key));
 }
 
 function resizePair(): readonly [RegisteredSidebarSection, RegisteredSidebarSection] {
@@ -234,17 +230,20 @@ function resizePair(): readonly [RegisteredSidebarSection, RegisteredSidebarSect
 }
 
 const resizeContract = computed(() => {
+  void groupContext.geometryRevision.value;
   const [top, bottom] = resizePair();
-  const value = Math.max(top.state.minSize, top.state.size ?? measuredHeight(top));
-  const bottomSize = Math.max(
-    bottom.state.minSize,
-    bottom.state.size ?? measuredHeight(bottom),
-  );
-  const pairSize = value + bottomSize;
+  const openSections = groupContext.orderedSections.value.filter((section) => section.state.isOpen);
+  const topIndex = openSections.findIndex((section) => section.key === top.key);
+  const upper = openSections.slice(0, topIndex + 1);
+  const lower = openSections.slice(topIndex + 1);
+  const value = upper.reduce((sum, section) => sum + effectiveHeight(section), 0);
+  const minimumUpper = upper.reduce((sum, section) => sum + section.state.minSize, 0);
+  const minimumLower = lower.reduce((sum, section) => sum + section.state.minSize, 0);
+  const totalSize = value + lower.reduce((sum, section) => sum + effectiveHeight(section), 0);
   return {
     value,
-    min: top.state.minSize,
-    max: Math.max(top.state.minSize, pairSize - bottom.state.minSize),
+    min: minimumUpper,
+    max: Math.max(minimumUpper, totalSize - minimumLower),
     testId: `sidebar-resize-${top.key}-${bottom.key}`,
   };
 });

package/src/components/shared/controls/SButton.css

@@ -33,12 +33,29 @@
   font-size: 0.75rem;
 }
 
+.s-button[data-density='compact'][data-size='xs']:not([data-icon-only='true']) {
+  height: var(--s-control-hitbox-xs);
+  min-height: var(--s-control-hitbox-xs);
+  padding-block: 0;
+}
+
 .s-button[data-size='sm']:not([data-icon-only='true']) {
   min-height: var(--s-control-hitbox-sm);
   padding: 0.375rem 0.625rem;
   font-size: 0.75rem;
 }
 
+.s-button[data-spacing='tight'][data-size='sm']:not([data-icon-only='true']) {
+  height: var(--s-control-hitbox-sm);
+  min-height: var(--s-control-hitbox-sm);
+  padding-block: 0;
+  padding-inline: 0.25rem;
+}
+
+.s-button[data-spacing='tight'] .s-button__content {
+  gap: 0.25rem;
+}
+
 .s-button[data-size='md']:not([data-icon-only='true']) {
   min-height: var(--s-control-hitbox-md);
   padding: 0.625rem 1.25rem;
@@ -129,6 +146,10 @@
   background: var(--s-button-solid-background-hover);
 }
 
+.s-button[aria-disabled='true'] {
+  pointer-events: none;
+}
+
 .s-button[data-appearance='solid']:active:not(:disabled) {
   border-color: var(--s-button-solid-background-active);
   background: var(--s-button-solid-background-active);
@@ -154,6 +175,10 @@
   background: var(--s-button-hover-background);
 }
 
+.s-button[data-hover-surface='parent'][data-appearance='ghost']:hover:not(:disabled) {
+  background: transparent;
+}
+
 .s-button[data-appearance='ghost'],
 .s-button[data-appearance='text'] {
   background: transparent;
@@ -198,6 +223,14 @@
   cursor: not-allowed;
 }
 
+.s-button[aria-disabled='true'] {
+  border-color: transparent;
+  background: var(--s-button-disabled-background);
+  box-shadow: none;
+  color: var(--s-button-disabled-foreground);
+  cursor: not-allowed;
+}
+
 .s-button[data-appearance='ghost']:disabled,
 .s-button[data-appearance='text']:disabled {
   background: transparent;
@@ -225,6 +258,7 @@
 .s-button[data-width='fit'] { width: fit-content; }
 .s-button[data-width='full'] .s-button__content { width: 100%; }
 .s-button[data-content-align='start'] .s-button__content { justify-content: flex-start; text-align: left; }
+.s-button[data-content-align='end'] .s-button__content { justify-content: flex-end; text-align: right; }
 .s-button[data-content-align='between'] .s-button__content { justify-content: space-between; text-align: left; }
 
 .s-button[data-shape='pill'],
@@ -262,6 +296,11 @@
   height: var(--s-icon-size-sm);
 }
 
+.s-button[data-icon-size='large'] .s-button__icon {
+  width: var(--s-icon-size-md);
+  height: var(--s-icon-size-md);
+}
+
 .s-button__loader {
   @apply absolute inline-flex;
 }