@pgcorp/ui-kit 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",
@@ -252,6 +252,9 @@
       "shared/controls/SMenuSurface.vue": [
         "src/components/shared/controls/SMenuSurface.vue"
       ],
+      "shared/controls/SRange.vue": [
+        "src/components/shared/controls/SRange.vue"
+      ],
       "shared/controls/SSegmentedControl.vue": [
         "src/components/shared/controls/SSegmentedControl.vue"
       ],
@@ -480,6 +483,7 @@
     "./shared/controls/SListbox.vue": "./src/components/shared/controls/SListbox.vue",
     "./shared/controls/SMarker.vue": "./src/components/shared/controls/SMarker.vue",
     "./shared/controls/SMenuSurface.vue": "./src/components/shared/controls/SMenuSurface.vue",
+    "./shared/controls/SRange.vue": "./src/components/shared/controls/SRange.vue",
     "./shared/controls/SSegmentedControl.vue": "./src/components/shared/controls/SSegmentedControl.vue",
     "./shared/controls/SSelect.vue": "./src/components/shared/controls/SSelect.vue",
     "./shared/controls/STextarea.vue": "./src/components/shared/controls/STextarea.vue",
@@ -549,7 +553,7 @@
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.15",
     "@uiw/codemirror-extensions-langs": "^4.25.8",
-    "codemirror": "^6.0.2",
+    "codemirror": "6.0.2",
     "codemirror-lang-makefile": "^0.1.1",
     "dompurify": "^3.4.12",
     "graphology": "^0.26.0",

package/src/components/layout/SSideMenuButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'mt-2': offsetTop }">
+  <div class="w-full" :class="{ 'mt-2': offsetTop }">
     <SDropdownMenu
       v-if="contextMenuItems.length && contextMenuTrigger === 'click'"
       v-slot="{ triggerAttrs }"
@@ -93,12 +93,13 @@ const buttonProps = computed(() => {
     'contentAlign': props.showLabel ? 'start' as const : 'center' as const,
     'disabled': props.disabled,
     'iconOnly': !props.showLabel,
+    'iconSize': 'large' as const,
     'label': props.showLabel ? props.title : undefined,
     'leadingIcon': props.icon,
     'severity': props.active && !props.disabled ? 'primary' as const : 'secondary' as const,
-    'shape': props.showLabel ? 'row' as const : 'circle' as const,
-    'size': 'md' as const,
-    'width': props.showLabel ? 'full' as const : 'auto' as const,
+    'shape': 'row' as const,
+    'size': props.showLabel ? 'md' as const : 'lg' as const,
+    'width': 'full' as const,
   }
 })
 </script>

package/src/components/layout/SSideMenuRail.vue

@@ -3,16 +3,13 @@
     v-if="visible"
     v-bind="ownedAttrs.bindings()"
     class="flex h-full min-h-0 flex-shrink-0 flex-col gap-1 overflow-x-hidden overflow-y-auto border-r border-surface-200 bg-surface-0 p-1 transition-[width] duration-[var(--s-motion-fast)] dark:border-surface-800 dark:bg-surface-950"
-    :class="expanded ? 'w-56 items-stretch' : 'w-12 items-center'"
+    :class="expanded ? 'w-56 items-stretch' : 'w-14 items-stretch'"
   >
-    <div class="flex flex-col gap-1" :class="expanded ? 'items-stretch' : 'items-center'">
+    <div class="flex flex-col items-stretch gap-1">
       <slot name="top" />
     </div>
 
-    <div
-      class="mt-auto flex flex-col gap-1"
-      :class="expanded ? 'items-stretch' : 'items-center'"
-    >
+    <div class="mt-auto flex flex-col items-stretch gap-1">
       <slot name="bottom" />
     </div>
   </div>

package/src/components/shared/_internal/STreeNode.vue

@@ -689,24 +689,30 @@ onBeforeUnmount(() => {
 }
 
 .s-tree-node-wrapper--compact .s-tree-node {
-  min-height: 1.75rem;
+  min-height: var(--s-control-hitbox-xs);
   gap: 0.25rem;
   padding: 0 0.25rem;
 }
 
+.s-tree-node-children {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 .s-tree-node-wrapper--overlay-actions .s-tree-node {
   position: relative;
   display: grid;
   overflow: hidden;
-  grid-template-columns: minmax(0, 1fr) max-content;
-  gap: 1.25rem;
+  grid-template-columns: minmax(0, 1fr) max-content max-content;
+  column-gap: 1.25rem;
   padding-right: 0.78rem;
 }
 
 .s-tree-node-wrapper--overlay-actions .s-tree-node-right {
   position: relative;
   z-index: var(--s-layer-sticky);
-  grid-column: 2;
+  grid-column: 3;
   justify-content: flex-end;
 }
 

package/src/components/shared/_internal/sidebarGroupContext.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
 
 import type { SectionState, SidebarSectionsState } from '../containers/sidebar';
 
@@ -20,9 +20,11 @@ export type SidebarSectionStyle = Readonly<Record<string, string | number>>;
 export interface SidebarGroupContext {
   readonly sectionsState: ComputedRef<SidebarSectionsState>;
   readonly orderedSections: ComputedRef<readonly RegisteredSidebarSection[]>;
+  readonly geometryRevision: Readonly<Ref<number>>;
   registerSection(registration: SidebarSectionRegistration): () => void;
   toggleSection(key: string): void;
   getSectionStyle(key: string): SidebarSectionStyle;
+  getSectionSize(key: string): number;
   beginResize(topKey: string, bottomKey: string): void;
   resizeSections(topKey: string, bottomKey: string, requestedTopSize: number): void;
   finishResize(topKey: string, bottomKey: string): void;

package/src/components/shared/_internal/tabsContext.ts

@@ -35,6 +35,7 @@ export interface STabsContext {
   readonly activeKey: ComputedRef<string | null>
   readonly activationMode: ComputedRef<STabsActivationMode>
   readonly closeButtonMode: ComputedRef<'reserve' | 'overlay'>
+  readonly closeButtonVisibility: ComputedRef<'always' | 'active-hover' | 'hover'>
   readonly tabDensity: ComputedRef<'compact' | 'default' | 'comfortable'>
   readonly registerTab: (registration: STabRegistration) => STabRegistrationKey
   readonly unregisterTab: (key: STabRegistrationKey) => void

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

@@ -45,7 +45,7 @@ export interface Props {
   state?: SAsyncStateContract;
   sectionsState: SidebarSectionsState;
   layout?: 'desktop' | 'mobile';
-  scrollBehavior?: 'auto' | 'body' | 'self';
+  scrollBehavior?: 'auto' | 'body' | 'self' | 'child';
 }
 
 withDefaults(defineProps<Props>(), {
@@ -53,7 +53,7 @@ withDefaults(defineProps<Props>(), {
   icon: undefined,
   state: () => ({ status: 'ready' }),
   layout: 'desktop',
-  scrollBehavior: 'auto',
+  scrollBehavior: 'child',
 });
 
 const emit = defineEmits<SidebarGroupEmits>();

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

@@ -105,7 +105,7 @@
   pointer-events: none;
 }
 
-.s-panel-content[data-grow='true'] > * {
+.s-panel-content[data-grow='true']:not(.s-panel-content--scroll-child) > * {
   flex-shrink: 0;
 }
 
@@ -121,6 +121,12 @@
   overflow: hidden;
 }
 
+.s-panel-content[data-grow='true'].s-panel-content--scroll-child > :not(.s-panel-scroll-end-spacer) {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .s-panel-footer {
   @apply flex min-h-8 min-w-0 flex-wrap items-center border-t border-surface-200 px-3 py-1.5 text-xs text-surface-500;
   @apply dark:border-surface-700 dark:text-surface-400;

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

@@ -65,7 +65,11 @@
         </template>
         <slot />
       </SAsyncState>
-      <div v-if="grow" class="s-panel-scroll-end-spacer" aria-hidden="true"></div>
+      <div
+        v-if="grow && scrollBehavior !== 'child'"
+        class="s-panel-scroll-end-spacer"
+        aria-hidden="true"
+      ></div>
     </div>
     <div v-if="$slots.footer" :id="validatedFooterId" class="s-panel-footer">
       <slot name="footer" />

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

@@ -1,6 +1,7 @@
 @reference "../../../styles/reference.css";
 
 .s-sidebar-group {
+  --s-sidebar-collapsed-section-height: 1.75rem;
   @apply w-full;
   @apply flex flex-col;
   @apply min-h-0;
@@ -9,4 +10,3 @@
 }
 
 /* Этот файл определяет базовый flex-контейнер для группы секций. */
-

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;
@@ -154,6 +171,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;
@@ -262,6 +283,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;
 }

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

@@ -7,7 +7,11 @@
     :data-size="size"
     :data-width="width"
     :data-content-align="contentAlign"
+    :data-density="density"
+    :data-spacing="spacing"
+    :data-hover-surface="hoverSurface"
     :data-icon-only="isIconOnly"
+    :data-icon-size="iconSize"
     :data-appearance="appearance"
     :data-shape="shape"
     :data-loading="loading || undefined"
@@ -70,6 +74,10 @@ defineOptions({ inheritAttrs: false })
 
 export type SButtonSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'
 export type SButtonSize = 'xs' | 'sm' | 'md' | 'lg'
+export type SButtonIconSize = 'default' | 'large'
+export type SButtonDensity = 'default' | 'compact'
+export type SButtonSpacing = 'default' | 'tight'
+export type SButtonHoverSurface = 'self' | 'parent'
 export type SButtonWidth = 'auto' | 'fit' | 'full'
 export type SButtonContentAlign = 'center' | 'start' | 'between'
 export type SButtonAppearance = 'solid' | 'soft' | 'outline' | 'ghost' | 'text'
@@ -93,6 +101,10 @@ export interface Props {
   loadingLabel?: string
   leadingIcon?: Component
   trailingIcon?: Component
+  iconSize?: SButtonIconSize
+  density?: SButtonDensity
+  spacing?: SButtonSpacing
+  hoverSurface?: SButtonHoverSurface
   badge?: string | number
   badgeSeverity?: BadgeSeverity
   shortcut?: string
@@ -116,6 +128,10 @@ const props = withDefaults(defineProps<Props>(), {
   loadingLabel: undefined,
   leadingIcon: undefined,
   trailingIcon: undefined,
+  iconSize: 'default',
+  density: 'default',
+  spacing: 'default',
+  hoverSurface: 'self',
   badge: undefined,
   badgeSeverity: 'secondary',
   shortcut: undefined,

package/src/components/shared/controls/SContextToggleButton.vue

@@ -30,7 +30,7 @@ export interface Props {
   partial?: boolean
   addTitle?: string
   removeTitle?: string
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   loading?: boolean
 }
 

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

@@ -14,6 +14,10 @@
     color var(--s-motion-standard) ease;
 }
 
+.s-interactive-surface[data-appearance='plain'] {
+  @apply border-transparent bg-transparent dark:border-transparent dark:bg-transparent;
+}
+
 .s-interactive-surface__activation {
   @apply absolute inset-0 z-10 block h-full w-full cursor-pointer border-0 bg-transparent p-0;
   border-radius: inherit;

package/src/components/shared/controls/SInteractiveSurface.vue

@@ -17,6 +17,7 @@ export type InteractiveSurfaceDensity = 'compact' | 'comfortable'
 export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
 export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
 export type InteractiveSurfaceFill = 'content' | 'container'
+export type InteractiveSurfaceAppearance = 'card' | 'plain'
 
 /**
  * Единственный semantic-контракт поверхности: passive, action или ровно одна link-target.
@@ -55,6 +56,7 @@ export interface Props {
   padding?: InteractiveSurfacePadding
   radius?: InteractiveSurfaceRadius
   fill?: InteractiveSurfaceFill
+  appearance?: InteractiveSurfaceAppearance
   contentAlign?: 'start' | 'center'
   /** Полный binding явного STooltip trigger, направляемый на activation owner. / Complete explicit STooltip trigger binding routed to the activation owner. */
   tooltipTrigger?: STooltipTriggerBinding
@@ -67,6 +69,7 @@ const props = withDefaults(defineProps<Props>(), {
   padding: 'md',
   radius: 'lg',
   fill: 'content',
+  appearance: 'card',
   contentAlign: 'start',
   tooltipTrigger: undefined,
 })
@@ -285,6 +288,7 @@ function activateAction(event: MouseEvent): void {
     :data-padding="padding"
     :data-radius="radius"
     :data-fill="fill"
+    :data-appearance="appearance"
     :data-selected="selected || undefined"
     :data-pressed="surfacePressed"
     :data-disabled="surfaceDisabled || undefined"

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

@@ -0,0 +1,35 @@
+@reference "../../../styles/reference.css";
+
+.s-range {
+  @apply flex min-w-0 items-center gap-3;
+}
+
+.s-range__input {
+  width: 100%;
+  min-height: var(--s-control-hitbox-sm);
+  cursor: pointer;
+  accent-color: var(--color-primary-500);
+}
+
+.s-range__input:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-offset);
+}
+
+.s-range__input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.s-range__input[aria-readonly="true"] {
+  cursor: default;
+  opacity: 0.8;
+}
+
+.s-range__input[aria-invalid="true"] {
+  accent-color: var(--color-danger-500);
+}
+
+.s-range__value {
+  @apply min-w-12 text-right font-mono text-xs text-surface-600 dark:text-surface-300;
+}

package/src/components/shared/controls/SRange.vue

@@ -0,0 +1,129 @@
+<template>
+  <SField
+    :control-id="inputId"
+    :label="label"
+    :disabled="disabled"
+    :readonly="readonly"
+    :required="required"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :invalid="invalid"
+  >
+    <template #default="field">
+      <div class="s-range">
+        <input
+          v-bind="ownedAttrs.bindings()"
+          :id="field.controlId"
+          class="s-range__input"
+          type="range"
+          :min="validatedMin"
+          :max="validatedMax"
+          :step="validatedStep"
+          :value="validatedValue"
+          :disabled="field.disabled"
+          :aria-invalid="field.invalid || undefined"
+          :aria-readonly="field.readonly || undefined"
+          :aria-required="field.required || undefined"
+          :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+          @input="onInput"
+        />
+        <output v-if="showValue" class="s-range__value" :for="field.controlId">
+          {{ validatedValue }}
+        </output>
+      </div>
+    </template>
+  </SField>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { resolveOptionalDomId } from '../../../internal/runtimeContract'
+import SField from './SField.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  modelValue: number
+  min: number
+  max: number
+  step?: number
+  label: string
+  id?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  invalid?: boolean
+  helpText?: string
+  errorMessage?: string
+  showValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  id: undefined,
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  helpText: undefined,
+  errorMessage: undefined,
+  showValue: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+function finiteNumber(field: string, value: number): number {
+  if (!Number.isFinite(value)) {
+    throw new TypeError(`SRange: ${field} должен быть конечным числом / must be a finite number`)
+  }
+  return value
+}
+
+const validatedMin = computed(() => finiteNumber('min', props.min))
+const validatedMax = computed(() => {
+  const value = finiteNumber('max', props.max)
+  if (value <= validatedMin.value) {
+    throw new RangeError('SRange: max должен быть больше min / max must be greater than min')
+  }
+  return value
+})
+const validatedStep = computed(() => {
+  const value = finiteNumber('step', props.step)
+  if (value <= 0) {
+    throw new RangeError('SRange: step должен быть больше нуля / step must be greater than zero')
+  }
+  return value
+})
+const validatedValue = computed(() => {
+  const value = finiteNumber('modelValue', props.modelValue)
+  if (value < validatedMin.value || value > validatedMax.value) {
+    throw new RangeError('SRange: modelValue должен находиться внутри [min, max] / must be within [min, max]')
+  }
+  return value
+})
+
+const generatedId = useId()
+const inputId = computed(() => resolveOptionalDomId('SRange', 'id', props.id, `s-range-${generatedId}`))
+const ownedAttrs = useOwnedAttrs({ component: 'SRange', owner: 'native range input' })
+useInteractiveLeafRegistration({ owner: 'SRange' })
+
+function onInput(event: Event): void {
+  const target = event.currentTarget
+  if (!(target instanceof HTMLInputElement)) {
+    throw new TypeError('SRange: input event owner must be the native range input')
+  }
+  if (props.readonly) {
+    target.value = String(validatedValue.value)
+    return
+  }
+  const value = Number(target.value)
+  finiteNumber('input value', value)
+  emit('update:modelValue', value)
+}
+</script>
+
+<style lang="postcss" src="./SRange.css" scoped></style>

package/src/components/shared/data-display/SCodeBlock.vue

@@ -6,7 +6,7 @@
       's-code-block--radius-none': validatedSurfaceRadius === 'none',
       's-code-block--radius-xl': validatedSurfaceRadius === 'xl',
       's-code-block--interactive': !validatedReadOnly,
-      's-code-block--viewport': validatedViewport !== 'content',
+      's-code-block--viewport': !['content', 'document'].includes(validatedViewport),
     }"
   >
     <div v-if="validatedShowHeader" class="s-code-block-header">

package/src/components/shared/data-display/SCodeEditor.css

@@ -11,6 +11,21 @@
   max-height: var(--s-code-editor-viewport-content-max);
 }
 
+.s-code-editor[data-viewport='document'] {
+  overflow: visible;
+}
+
+.s-code-editor[data-viewport='document'] :deep(.cm-editor) {
+  height: auto;
+  max-height: none;
+  overflow: visible;
+}
+
+.s-code-editor[data-viewport='document'][data-variant] :deep(.cm-scroller) {
+  height: auto;
+  overflow: visible;
+}
+
 .s-code-editor[data-viewport='compact'] {
   height: var(--s-code-editor-viewport-compact);
 }

package/src/components/shared/data-display/SCodeEditor.vue

@@ -179,6 +179,20 @@ const resolvedExtensions = computed<Extension[]>(() => {
   const capabilities = resolvedCapabilities.value
   const language = resolvedLanguage.value
   const result: Extension[] = [...(trustedChannel?.extensions.value ?? [])]
+  if (validatedViewport.value === 'document') {
+    result.push(EditorView.theme({
+      '&.cm-editor': {
+        height: 'auto',
+        maxHeight: 'none',
+        overflow: 'visible',
+      },
+      '.cm-scroller': {
+        height: 'auto',
+        overflow: 'visible',
+      },
+    }))
+    result.push(EditorView.lineWrapping)
+  }
   const languageExtension = getCodeMirrorLanguageExtension(language)
   if (languageExtension) result.push(languageExtension)
   if (runtimeTheme.value.mode === 'dark') result.push(oneDark)

package/src/components/shared/navigation/STab.vue

@@ -11,6 +11,7 @@
       class="s-tab-container"
       :class="{ 's-tab-container--selected': state.active }"
       :data-close-mode="ctx.closeButtonMode.value"
+      :data-close-visibility="ctx.closeButtonVisibility.value"
       :data-disabled="state.disabled || undefined"
       :data-editing="editing || undefined"
       :style="containerStyle"
@@ -192,7 +193,7 @@ const hasContextMenu = computed(() => Boolean(props.contextMenuItems?.length))
 const containerStyle = computed(() => {
   const siblingSpace = hasSiblingActions.value ? siblingActionsWidth.value : 0
   const basePaddingInline = 'var(--s-tab-base-padding-inline)'
-  const paddingInlineEnd = ctx.closeButtonMode.value === 'overlay' && siblingSpace > 0
+  const paddingInlineEnd = ctx.closeButtonMode.value === 'reserve' && siblingSpace > 0
     ? `calc(${basePaddingInline} + ${siblingSpace}px + var(--s-tab-sibling-actions-gap))`
     : basePaddingInline
   return {
@@ -250,13 +251,19 @@ onBeforeUnmount(() => {
   min-width: var(--s-tab-min-width);
   max-width: var(--s-tab-max-width);
   height: var(--s-tab-row-height);
-  border-bottom: var(--s-tab-indicator-width) solid transparent;
   border-radius: var(--s-tab-radius);
   overflow: hidden;
 }
 
-.s-tab-container--selected {
-  border-color: var(--s-tab-selected-border-color);
+.s-tab-container::after {
+  @apply pointer-events-none absolute inset-x-0 bottom-0;
+  height: var(--s-tab-indicator-width);
+  background-color: transparent;
+  content: '';
+}
+
+.s-tab-container--selected::after {
+  background-color: var(--s-tab-selected-border-color);
 }
 
 .s-tab__trigger {
@@ -265,8 +272,7 @@ onBeforeUnmount(() => {
   width: 100%;
   min-height: var(--s-tab-trigger-min-height);
   margin: 0;
-  padding-block-start: calc(var(--s-tab-padding-block) + var(--s-tab-content-offset-y));
-  padding-block-end: var(--s-tab-padding-block);
+  padding-block: var(--s-tab-padding-block);
   padding-inline-start: var(--s-tab-padding-inline-start);
   padding-inline-end: var(--s-tab-padding-inline-end);
   border-radius: inherit;
@@ -348,6 +354,25 @@ onBeforeUnmount(() => {
   z-index: var(--s-layer-sticky);
 }
 
+.s-tab-container[data-close-visibility='active-hover']:not(.s-tab-container--selected):not(:hover):not(:focus-within) .s-tab__sibling-actions {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.s-tab-container[data-close-visibility='hover']:not(:hover):not(:focus-within) .s-tab__sibling-actions {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.s-tab-container:is(
+  [data-close-visibility='active-hover'],
+  [data-close-visibility='hover']
+) .s-tab__sibling-actions {
+  transition:
+    opacity var(--s-motion-fast) ease,
+    visibility var(--s-motion-fast) ease;
+}
+
 .s-tab-container[data-close-mode='overlay'] .s-tab__sibling-actions {
   @apply absolute inset-y-0 right-0;
 }

package/src/components/shared/navigation/STabs.vue

@@ -11,6 +11,7 @@
     :data-list-width="tabListWidth"
     :data-tone="tone"
     :data-close-mode="closeButtonMode"
+    :data-close-visibility="closeButtonVisibility"
     :data-radius="surfaceRadius"
     :data-surface="surface"
     :data-has-panels="composition === 'custom' ? 'custom' : ($slots.panels ? 'true' : 'false')"
@@ -121,6 +122,8 @@ export interface Props {
   tabDensity?: 'compact' | 'default' | 'comfortable'
   /** Резервирует или перекрывает место sibling close action. / Reserves or overlays sibling close-action space. */
   closeButtonMode?: 'reserve' | 'overlay'
+  /** Видимость sibling close/action region. / Visibility policy for the sibling close/action region. */
+  closeButtonVisibility?: 'always' | 'active-hover' | 'hover'
   /** Скругление owner surface. / Radius of the owner surface. */
   surfaceRadius?: 'default' | 'none'
   /** Фон owner surface. / Background of the owner surface. */
@@ -156,6 +159,7 @@ const props = withDefaults(defineProps<Props>(), {
   tabListWidth: 'auto',
   tabDensity: 'default',
   closeButtonMode: 'reserve',
+  closeButtonVisibility: 'always',
   surfaceRadius: 'default',
   surface: 'default',
 })
@@ -236,6 +240,7 @@ const activeKey = computed<string | null>(() => (
 ))
 const activationMode = computed(() => props.activationMode)
 const closeMode = computed(() => props.closeButtonMode)
+const closeVisibility = computed(() => props.closeButtonVisibility)
 const density = computed(() => props.tabDensity)
 
 function identityIds(tabKey: string): { tabId: string; panelId: string } {
@@ -456,6 +461,7 @@ const context: STabsContext = {
   activeKey,
   activationMode,
   closeButtonMode: closeMode,
+  closeButtonVisibility: closeVisibility,
   tabDensity: density,
   registerTab,
   unregisterTab,
@@ -522,7 +528,7 @@ defineExpose({
   --s-tab-base-padding-inline: 1rem;
   --s-tab-padding-inline: var(--s-tab-base-padding-inline);
   --s-tab-padding-block: 0;
-  --s-tab-content-offset-y: 2px;
+  --s-tab-content-offset-y: 0;
   --s-tab-trigger-min-height: var(--s-control-hitbox-sm);
   --s-tab-indicator-width: 2px;
   --s-tab-radius: 0.375rem 0.375rem 0 0;
@@ -575,7 +581,7 @@ defineExpose({
 
 .s-tabs[data-density='compact'] { --s-tab-row-height: 2rem; --s-tab-base-padding-inline: 0.5rem; }
 .s-tabs[data-density='comfortable'] { --s-tab-row-height: 3rem; --s-tab-base-padding-inline: 1.125rem; }
-.s-tabs[data-sizing='content'] { --s-tab-min-width: 7rem; --s-tab-max-width: none; }
+.s-tabs[data-sizing='content'] { --s-tab-min-width: 0; --s-tab-max-width: 15rem; }
 .s-tabs[data-sizing='compact'] { --s-tab-max-width: 10.5rem; }
 .s-tabs[data-sizing='wide'] { --s-tab-max-width: 20rem; }
 .s-tabs[data-sizing='equal'] {

package/src/internal/codeEditorContract.ts

@@ -5,7 +5,7 @@ import {
   validateNonEmptyString,
 } from './runtimeContract'
 
-export const CODE_EDITOR_VIEWPORTS = ['content', 'compact', 'standard', 'expanded', 'fill'] as const
+export const CODE_EDITOR_VIEWPORTS = ['content', 'document', 'compact', 'standard', 'expanded', 'fill'] as const
 export const CODE_EDITOR_VARIANTS = ['code', 'sql'] as const
 export const CODE_EDITOR_KEY_BEHAVIORS = ['indent', 'focus-next'] as const
 export const CODE_EDITOR_CURSOR_ACTIVITY_MODES = ['editable', 'always'] as const

package/src/internal/ownedAttrs.ts

@@ -175,6 +175,13 @@ export const ownedAttributeSchemas = Object.freeze({
     step: 'string-or-number',
     title: 'string',
   }),
+  SRange: defineOwnedAttributeSchema({
+    'aria-describedby': 'string',
+    'aria-label': 'string',
+    'data-testid': 'data',
+    onBlur: 'listener',
+    onFocus: 'listener',
+  }),
   SInlineTokenEditor: defineOwnedAttributeSchema({
     'aria-describedby': 'string',
     'aria-label': 'string',