@pgcorp/ui-kit 0.1.0

package/src/components/layout/SAppShell.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, useSlots } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+import { validateNonEmptyString } from '../../internal/runtimeContract'
+import SBadge from '../shared/data-display/SBadge.vue'
+import SPanel from '../shared/containers/SPanel.vue'
+import SLink from '../shared/controls/SLink.vue'
+import type { AppShellNavigationItem, ShellBadgeSeverity } from './types'
+import SAppBrand from './_internal/SAppBrand.vue'
+
+defineOptions({ inheritAttrs: false })
+
+interface SharedProps {
+  brandTitle: string
+  brandTo?: RouteLocationRaw | null
+  brandSubtitle?: string
+}
+
+export interface SAppShellAppProps extends SharedProps {
+  mode?: 'app'
+  pageEyebrow?: string
+  pageTitle: string
+  pageBadgeLabel?: string
+  pageBadgeSeverity?: ShellBadgeSeverity
+  userLabel?: string
+  navigation?: readonly AppShellNavigationItem[]
+  navigationLabel?: string
+  showSidebar?: boolean
+}
+
+export interface SAppShellPublicProps extends SharedProps {
+  mode: 'public'
+  pageEyebrow?: never
+  pageTitle?: never
+  pageBadgeLabel?: never
+  pageBadgeSeverity?: never
+  userLabel?: never
+  navigation?: never
+  navigationLabel?: never
+  showSidebar?: never
+}
+
+export type Props = SAppShellAppProps | SAppShellPublicProps
+
+interface RuntimeProps extends SharedProps {
+  mode?: 'app' | 'public'
+  pageEyebrow?: string
+  pageTitle?: string
+  pageBadgeLabel?: string
+  pageBadgeSeverity?: ShellBadgeSeverity
+  userLabel?: string
+  navigation?: readonly AppShellNavigationItem[]
+  navigationLabel?: string
+  showSidebar?: boolean
+}
+
+const props = defineProps<RuntimeProps>()
+function requireComponentInstance() {
+  const instance = getCurrentInstance()
+  if (!instance) throw new Error('SAppShell: component instance unavailable during setup')
+  return instance
+}
+const componentInstance = requireComponentInstance()
+const slots = useSlots()
+const hasBrandIcon = computed(() => Boolean(slots['brand-icon']))
+const hasBrandLogo = computed(() => Boolean(slots['brand-logo']))
+
+type ResolvedShell =
+  | { mode: 'public' }
+  | {
+      mode: 'app'
+      navigation: readonly AppShellNavigationItem[]
+      navigationLabel: string
+      pageBadgeLabel: string
+      pageBadgeSeverity: ShellBadgeSeverity
+      pageEyebrow: string
+      pageTitle: string
+      showSidebar: boolean
+      userLabel: string
+    }
+
+const appOnlyPropNames = [
+  'pageEyebrow',
+  'pageTitle',
+  'pageBadgeLabel',
+  'pageBadgeSeverity',
+  'userLabel',
+  'navigation',
+  'navigationLabel',
+  'showSidebar',
+] as const
+
+function toKebabCase(value: string): string {
+  return value.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)
+}
+
+function hasExplicitProp(propName: string): boolean {
+  const vnodeProps = componentInstance.vnode.props
+  return vnodeProps !== null && (
+    Object.hasOwn(vnodeProps, propName)
+    || Object.hasOwn(vnodeProps, toKebabCase(propName))
+  )
+}
+
+const shell = computed<ResolvedShell>(() => {
+  validateNonEmptyString('SAppShell', 'brandTitle', props.brandTitle)
+  if (props.mode === 'public') {
+    for (const propName of appOnlyPropNames) {
+      if (hasExplicitProp(propName)) {
+        throw new TypeError(`SAppShell: app-only prop '${propName}' недоступен в public mode / is unavailable in public mode`)
+      }
+    }
+    return { mode: 'public' }
+  }
+
+  return {
+    mode: 'app',
+    navigation: props.navigation ?? [],
+    navigationLabel: validateNonEmptyString(
+      'SAppShell',
+      'navigationLabel',
+      props.navigationLabel ?? 'Основная навигация',
+    ),
+    pageBadgeLabel: props.pageBadgeLabel ?? '',
+    pageBadgeSeverity: props.pageBadgeSeverity ?? 'info',
+    pageEyebrow: props.pageEyebrow ?? '',
+    pageTitle: validateNonEmptyString('SAppShell', 'pageTitle', props.pageTitle),
+    showSidebar: hasExplicitProp('showSidebar') ? props.showSidebar === true : true,
+    userLabel: props.userLabel ?? '',
+  }
+})
+
+const shouldShowSidebar = computed(() => shell.value.mode === 'app' && shell.value.showSidebar)
+const ownedAttrs = useOwnedAttrs({ component: 'SAppShell', owner: 'application shell root' })
+</script>
+
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="min-h-screen">
+    <div class="mx-auto flex min-h-screen max-w-[1680px] gap-6 p-4 lg:p-6">
+      <aside
+        v-if="shouldShowSidebar"
+        class="hidden w-72 shrink-0 self-start lg:flex lg:flex-col"
+      >
+        <div class="sticky top-0">
+          <SPanel surface-overflow="clip">
+            <template #header>
+              <SAppBrand
+                :title="brandTitle"
+                :subtitle="brandSubtitle"
+                :to="brandTo"
+                placement="sidebar"
+              >
+                <template v-if="hasBrandLogo" #logo><slot name="brand-logo" /></template>
+                <template v-if="hasBrandIcon" #icon><slot name="brand-icon" /></template>
+              </SAppBrand>
+            </template>
+            <nav class="space-y-2 px-2 pb-2" :aria-label="shell.mode === 'app' ? shell.navigationLabel : undefined">
+              <SLink
+                v-for="item in shell.mode === 'app' ? shell.navigation : []"
+                :key="item.key"
+                :to="item.to"
+                variant="navigation"
+                width="full"
+                :active="item.active"
+                :leading-icon="item.icon"
+              >
+                {{ item.label }}
+                <template v-if="item.badgeLabel" #trailing>
+                  <SBadge :severity="item.badgeSeverity ?? 'secondary'">
+                    {{ item.badgeLabel }}
+                  </SBadge>
+                </template>
+              </SLink>
+            </nav>
+            <template #actions>
+              <slot name="sidebar-actions" />
+            </template>
+          </SPanel>
+        </div>
+      </aside>
+
+      <div class="min-w-0 flex-1">
+        <header
+          class="mb-6 px-1"
+          :class="shell.mode === 'app'
+            ? 'rounded-[1.4rem] border border-surface-200/80 bg-surface-0/88 px-4 py-3 shadow-sm backdrop-blur dark:border-surface-700 dark:bg-surface-900/74'
+            : 'rounded-[var(--s-app-shell-floating-radius)] border border-surface-200/80 bg-surface-0/82 px-4 py-3 shadow-[var(--s-app-shell-floating-shadow)] backdrop-blur dark:border-surface-700 dark:bg-surface-900/72'"
+        >
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div v-if="shell.mode === 'app'" class="min-w-0">
+              <div v-if="shell.pageEyebrow" class="text-xs uppercase tracking-[0.3em] text-surface-500">{{ shell.pageEyebrow }}</div>
+              <div class="flex flex-wrap items-center gap-2">
+                <h1 class="text-lg font-semibold">{{ shell.pageTitle }}</h1>
+                <SBadge v-if="shell.pageBadgeLabel" :severity="shell.pageBadgeSeverity">
+                  {{ shell.pageBadgeLabel }}
+                </SBadge>
+              </div>
+              <div v-if="shell.userLabel" class="text-sm text-surface-500">
+                {{ shell.userLabel }}
+              </div>
+            </div>
+
+            <SAppBrand
+              v-else
+              :title="brandTitle"
+              :subtitle="brandSubtitle"
+              :to="brandTo"
+              placement="header"
+            >
+              <template v-if="hasBrandLogo" #logo>
+                <slot name="brand-logo" />
+              </template>
+              <template v-if="hasBrandIcon" #icon>
+                <slot name="brand-icon" />
+              </template>
+            </SAppBrand>
+
+            <div class="flex flex-wrap items-center gap-2">
+              <slot name="header-actions" />
+            </div>
+          </div>
+        </header>
+
+        <slot name="banner" />
+        <main class="pb-8 pt-1">
+          <slot />
+        </main>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/layout/SDockRegion.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    v-if="contract.visible"
+    v-bind="ownedAttrs.bindings()"
+    :class="containerClasses"
+    :data-dock-placement="contract.placement"
+    :data-responsive-size="contract.responsiveSize"
+  >
+    <template v-for="part in orderedParts" :key="part">
+      <SResizeHandle
+        v-if="part === 'handle'"
+        :orientation="handleOrientation"
+        :value-direction="handleValueDirection"
+        :variant="contract.handleVariant"
+        :label="resolvedResizeLabel"
+        :data-test-id="contract.resizeTestId ?? `${contract.placement}-dock-resizer`"
+        :hidden-on-narrow="contract.hideResizeHandleOnNarrow"
+        :resizing="effectiveResizing"
+        :value="size"
+        :min="minSize"
+        :max="maxSize"
+        :step="resizeStep"
+        @resize-start="handleResizeStart"
+        @resize="emit('resize', $event)"
+        @resize-end="handleResizeEnd"
+      />
+
+      <div
+        v-else
+        :data-testid="`${placement}-dock-panel`"
+        :class="panelClasses"
+        :style="panelStyle"
+      >
+        <slot />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type CSSProperties } from 'vue'
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+import {
+  validateBoolean,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../internal/runtimeContract'
+import SResizeHandle from './SResizeHandle.vue'
+
+defineOptions({ inheritAttrs: false })
+
+type DockPlacement = 'left' | 'right' | 'bottom'
+
+const props = withDefaults(defineProps<{
+  placement: DockPlacement
+  visible: boolean
+  size: number
+  minSize?: number
+  maxSize?: number
+  resizeStep?: number
+  resizing?: boolean
+  surface?: 'base' | 'subtle' | 'transparent'
+  elevated?: boolean
+  resizeLabel?: string
+  resizeTestId?: string
+  handleVariant?: 'inline' | 'overlay'
+  hideResizeHandleOnNarrow?: boolean
+  responsiveSize?: 'fixed' | 'fill-on-narrow'
+}>(), {
+  minSize: 0,
+  maxSize: 4096,
+  resizeStep: 10,
+  resizing: false,
+  surface: 'base',
+  elevated: false,
+  resizeLabel: undefined,
+  resizeTestId: undefined,
+  handleVariant: 'inline',
+  hideResizeHandleOnNarrow: false,
+  responsiveSize: 'fixed',
+})
+
+const emit = defineEmits<{
+  (event: 'resize-start', pointerEvent: PointerEvent): void
+  (event: 'resize', size: number): void
+  (event: 'resize-end', size: number): void
+}>()
+
+const pointerResizing = ref(false)
+const ownedAttrs = useOwnedAttrs({ component: 'SDockRegion', owner: 'dock region root' })
+const contract = computed(() => ({
+  placement: validateExactString(
+    'SDockRegion', 'placement', props.placement, ['left', 'right', 'bottom'] as const,
+  ),
+  visible: validateBoolean('SDockRegion', 'visible', props.visible),
+  surface: validateExactString(
+    'SDockRegion', 'surface', props.surface, ['base', 'subtle', 'transparent'] as const,
+  ),
+  elevated: validateBoolean('SDockRegion', 'elevated', props.elevated),
+  handleVariant: validateExactString(
+    'SDockRegion', 'handleVariant', props.handleVariant, ['inline', 'overlay'] as const,
+  ),
+  hideResizeHandleOnNarrow: validateBoolean(
+    'SDockRegion', 'hideResizeHandleOnNarrow', props.hideResizeHandleOnNarrow,
+  ),
+  responsiveSize: validateExactString(
+    'SDockRegion', 'responsiveSize', props.responsiveSize, ['fixed', 'fill-on-narrow'] as const,
+  ),
+  resizeTestId: props.resizeTestId === undefined
+    ? undefined
+    : validateNonEmptyString('SDockRegion', 'resizeTestId', props.resizeTestId),
+}))
+const effectiveResizing = computed(() => props.resizing || pointerResizing.value)
+
+const handleOrientation = computed(() => contract.value.placement === 'bottom' ? 'horizontal' : 'vertical')
+const handleValueDirection = computed(() => contract.value.placement === 'left' ? 'forward' : 'reverse')
+const orderedParts = computed<readonly ('panel' | 'handle')[]>(() => contract.value.placement === 'left'
+  ? ['panel', 'handle']
+  : ['handle', 'panel'])
+
+const resolvedResizeLabel = computed(() => {
+  if (props.resizeLabel !== undefined) {
+    return validateNonEmptyString('SDockRegion', 'resizeLabel', props.resizeLabel)
+  }
+  if (contract.value.placement === 'bottom') return 'Изменить высоту нижней панели'
+  if (contract.value.placement === 'left') return 'Изменить ширину левой панели'
+  return 'Изменить ширину правой панели'
+})
+
+function handleResizeStart(event: PointerEvent): void {
+  pointerResizing.value = true
+  emit('resize-start', event)
+}
+
+function handleResizeEnd(size: number): void {
+  pointerResizing.value = false
+  emit('resize-end', size)
+}
+
+const containerClasses = computed(() => contract.value.placement === 'bottom'
+  ? 'contents'
+  : ['flex min-h-0 flex-shrink-0', { relative: contract.value.handleVariant === 'overlay' }])
+
+const panelClasses = computed(() => [
+  's-dock-region__panel relative flex-shrink-0',
+  contract.value.placement === 'bottom' ? 'flex min-h-0 flex-col' : 'h-full min-h-0',
+  contract.value.surface === 'base'
+    ? 'bg-surface-0 dark:bg-surface-900'
+    : contract.value.surface === 'subtle'
+      ? 'bg-surface-50 dark:bg-surface-850'
+      : 'bg-transparent',
+  {
+    'transition-none': effectiveResizing.value,
+    'z-[var(--s-layer-navigation)] overflow-visible': contract.value.elevated,
+    'z-[var(--s-layer-affordance)] overflow-hidden': contract.value.placement === 'bottom' && !contract.value.elevated,
+  },
+])
+
+const panelStyle = computed<CSSProperties>(() => {
+  if (![props.size, props.minSize, props.maxSize, props.resizeStep].every(Number.isFinite)) {
+    throw new RangeError('SDockRegion: size, minSize, maxSize и resizeStep должны быть конечными числами')
+  }
+  if (props.minSize > props.maxSize) {
+    throw new RangeError(`SDockRegion: minSize ${props.minSize} не может превышать maxSize ${props.maxSize}`)
+  }
+  if (props.size < props.minSize || props.size > props.maxSize) {
+    throw new RangeError(
+      `SDockRegion: size ${props.size} должен находиться в диапазоне ${props.minSize}..${props.maxSize}`,
+    )
+  }
+  if (props.resizeStep <= 0) {
+    throw new RangeError('SDockRegion: resizeStep должен быть больше нуля')
+  }
+
+  return { '--s-dock-region-size': `${props.size}px` }
+})
+</script>
+
+<style scoped>
+.s-dock-region__panel {
+  width: var(--s-dock-region-size);
+}
+
+[data-dock-placement='bottom'] > .s-dock-region__panel {
+  width: 100%;
+  height: var(--s-dock-region-size);
+}
+
+@media (max-width: 1023px) {
+  [data-responsive-size='fill-on-narrow'] {
+    width: 100%;
+    height: 100%;
+  }
+
+  [data-responsive-size='fill-on-narrow'] > .s-dock-region__panel {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

package/src/components/layout/SResizeHandle.vue

@@ -0,0 +1,251 @@
+<template>
+  <button
+    v-bind="ownedAttrs.bindings()"
+    type="button"
+    role="separator"
+    :aria-orientation="orientation"
+    :aria-label="validatedLabel"
+    :aria-valuenow="validatedRange.value"
+    :aria-valuemin="validatedRange.min"
+    :aria-valuemax="validatedRange.max"
+    :aria-disabled="disabled || undefined"
+    :disabled="disabled"
+    :title="validatedLabel"
+    :data-testid="dataTestId"
+    :data-resizing="effectiveResizing || undefined"
+    :data-hidden-on-narrow="hiddenOnNarrow || undefined"
+    :class="handleClasses"
+    @pointerdown="handlePointerDown"
+    @keydown="handleKeydown"
+  >
+    <span aria-hidden="true" :class="lineClasses"></span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../internal/passiveContentContract'
+import {
+  acquirePointerInteractionLease,
+  type PointerInteractionLease,
+} from '../../internal/pointerInteractionLease'
+import { validateNonEmptyString } from '../../internal/runtimeContract'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  orientation: 'vertical' | 'horizontal'
+  variant?: 'inline' | 'overlay'
+  valueDirection?: 'forward' | 'reverse'
+  label: string
+  dataTestId?: string
+  resizing?: boolean
+  hiddenOnNarrow?: boolean
+  disabled?: boolean
+  value?: number
+  min?: number
+  max?: number
+  step?: number
+  pointerScale?: number
+}>(), {
+  orientation: 'vertical',
+  variant: 'inline',
+  valueDirection: 'forward',
+  dataTestId: undefined,
+  resizing: false,
+  hiddenOnNarrow: false,
+  disabled: false,
+  value: 50,
+  min: 0,
+  max: 100,
+  step: 10,
+  pointerScale: 1,
+})
+
+const emit = defineEmits<{
+  (event: 'resize-start', pointerEvent: PointerEvent): void
+  (event: 'resize', value: number): void
+  (event: 'resize-end', value: number): void
+}>()
+
+type PointerResizeState = {
+  pointerId: number
+  startCoordinate: number
+  startValue: number
+  latestValue: number
+  target: HTMLButtonElement
+  interactionLease: PointerInteractionLease
+}
+
+const pointerResizeState = ref<PointerResizeState | null>(null)
+const ownedAttrs = useOwnedAttrs({ component: 'SResizeHandle', owner: 'native separator button' })
+useInteractiveLeafRegistration({ owner: 'SResizeHandle' })
+const effectiveResizing = computed(() => props.resizing || pointerResizeState.value !== null)
+const validatedLabel = computed(() => validateNonEmptyString('SResizeHandle', 'label', props.label))
+const validatedRange = computed(() => {
+  assertRangeContract()
+  return { value: props.value, min: props.min, max: props.max }
+})
+
+function assertRangeContract(): void {
+  if (![props.value, props.min, props.max, props.step, props.pointerScale].every(Number.isFinite)) {
+    throw new RangeError('SResizeHandle: value, min, max, step и pointerScale должны быть конечными числами')
+  }
+  if (props.min > props.max) {
+    throw new RangeError(`SResizeHandle: min ${props.min} не может превышать max ${props.max}`)
+  }
+  if (props.value < props.min || props.value > props.max) {
+    throw new RangeError(
+      `SResizeHandle: value ${props.value} должен находиться в диапазоне ${props.min}..${props.max}`,
+    )
+  }
+  if (props.step <= 0) {
+    throw new RangeError('SResizeHandle: step должен быть больше нуля')
+  }
+  if (props.pointerScale <= 0) {
+    throw new RangeError('SResizeHandle: pointerScale должен быть больше нуля')
+  }
+}
+
+function clampValue(value: number): number {
+  return Math.min(props.max, Math.max(props.min, value))
+}
+
+function pointerCoordinate(event: PointerEvent): number {
+  return props.orientation === 'vertical' ? event.clientX : event.clientY
+}
+
+function handlePointerMove(event: PointerEvent): void {
+  const state = pointerResizeState.value
+  if (!state || state.pointerId !== event.pointerId) return
+
+  const direction = props.valueDirection === 'forward' ? 1 : -1
+  const delta = (pointerCoordinate(event) - state.startCoordinate) * direction * props.pointerScale
+  const nextValue = clampValue(state.startValue + delta)
+  if (nextValue === state.latestValue) return
+
+  state.latestValue = nextValue
+  emit('resize', nextValue)
+}
+
+function finishPointerResize(event: PointerEvent): void {
+  const state = pointerResizeState.value
+  if (!state || state.pointerId !== event.pointerId) return
+  cleanupPointerResize(true)
+}
+
+function handleLostPointerCapture(event: PointerEvent): void {
+  const state = pointerResizeState.value
+  if (!state || state.pointerId !== event.pointerId) return
+  cleanupPointerResize(true)
+}
+
+function cleanupPointerResize(emitEnd: boolean): void {
+  const state = pointerResizeState.value
+  if (!state) return
+
+  window.removeEventListener('pointermove', handlePointerMove)
+  window.removeEventListener('pointerup', finishPointerResize)
+  window.removeEventListener('pointercancel', finishPointerResize)
+  state.target.removeEventListener('lostpointercapture', handleLostPointerCapture)
+  try {
+    if (state.target.hasPointerCapture?.(state.pointerId)) {
+      state.target.releasePointerCapture(state.pointerId)
+    }
+  } finally {
+    state.interactionLease.release()
+    pointerResizeState.value = null
+  }
+
+  if (emitEnd) emit('resize-end', state.latestValue)
+}
+
+function handlePointerDown(event: PointerEvent): void {
+  if (props.disabled || (event.pointerType !== 'touch' && event.button !== 0)) return
+  assertRangeContract()
+  cleanupPointerResize(false)
+
+  const target = event.currentTarget as HTMLButtonElement
+  const interactionLease = acquirePointerInteractionLease({
+    cursor: props.orientation === 'vertical' ? 'col-resize' : 'row-resize',
+  })
+  try {
+    target.focus({ preventScroll: true })
+    target.setPointerCapture?.(event.pointerId)
+    event.preventDefault()
+  } catch (error: unknown) {
+    interactionLease.release()
+    throw error
+  }
+
+  pointerResizeState.value = {
+    pointerId: event.pointerId,
+    startCoordinate: pointerCoordinate(event),
+    startValue: props.value,
+    latestValue: props.value,
+    target,
+    interactionLease,
+  }
+  window.addEventListener('pointermove', handlePointerMove)
+  window.addEventListener('pointerup', finishPointerResize)
+  window.addEventListener('pointercancel', finishPointerResize)
+  target.addEventListener('lostpointercapture', handleLostPointerCapture)
+  emit('resize-start', event)
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (props.disabled) return
+  assertRangeContract()
+  const backwardKey = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'
+  const forwardKey = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'
+  const decreaseKey = props.valueDirection === 'forward' ? backwardKey : forwardKey
+  const increaseKey = props.valueDirection === 'forward' ? forwardKey : backwardKey
+  let nextValue: number | undefined
+
+  if (event.key === decreaseKey) nextValue = props.value - props.step
+  if (event.key === increaseKey) nextValue = props.value + props.step
+  if (event.key === 'Home') nextValue = props.min
+  if (event.key === 'End') nextValue = props.max
+  if (nextValue === undefined) return
+
+  event.preventDefault()
+  emit('resize', clampValue(nextValue))
+}
+
+onBeforeUnmount(() => {
+  cleanupPointerResize(false)
+})
+
+const handleClasses = computed(() => [
+  's-resize-handle group flex touch-none border-0 bg-transparent p-0',
+  { 'max-lg:hidden': props.hiddenOnNarrow },
+  props.variant === 'inline'
+    ? 'relative flex-shrink-0'
+    : 'pointer-events-auto absolute z-[var(--s-layer-floating)] items-center justify-center',
+  props.orientation === 'vertical'
+    ? props.variant === 'inline'
+      ? 'w-1.5 self-stretch cursor-col-resize items-stretch justify-center'
+      : 'inset-y-3 left-2 w-8 -translate-x-1/2 cursor-col-resize'
+    : props.variant === 'inline'
+      ? 'h-1.5 w-full cursor-row-resize items-center justify-stretch'
+      : 'inset-x-5 top-0 h-8 -translate-y-1/2 cursor-row-resize',
+])
+
+const lineClasses = computed(() =>
+  props.orientation === 'vertical'
+    ? props.variant === 'inline'
+      ? 'block h-full w-px bg-surface-200 transition-colors group-hover:bg-primary-500/45 dark:bg-surface-700 dark:group-hover:bg-primary-500/55'
+      : 'block h-24 w-1.5 rounded-full border border-surface-200/80 bg-surface-0/95 shadow-sm transition-colors group-hover:border-primary-300 group-hover:bg-primary-50/95 group-data-[resizing=true]:border-primary-300 group-data-[resizing=true]:bg-primary-50/95 dark:border-surface-700/80 dark:bg-surface-850/95 dark:group-hover:border-primary-500/70 dark:group-hover:bg-surface-800/95 dark:group-data-[resizing=true]:border-primary-500/70 dark:group-data-[resizing=true]:bg-surface-800/95'
+    : props.variant === 'inline'
+      ? 'block h-px w-full bg-surface-200 transition-colors group-hover:bg-primary-500/45 dark:bg-surface-700 dark:group-hover:bg-primary-500/55'
+      : 'block h-1.5 w-24 rounded-full border border-surface-200/80 bg-surface-0/95 shadow-sm transition-colors group-hover:border-primary-300 group-hover:bg-primary-50/95 group-data-[resizing=true]:border-primary-300 group-data-[resizing=true]:bg-primary-50/95 dark:border-surface-700/80 dark:bg-surface-850/95 dark:group-hover:border-primary-500/70 dark:group-hover:bg-surface-800/95 dark:group-data-[resizing=true]:border-primary-500/70 dark:group-data-[resizing=true]:bg-surface-800/95',
+)
+</script>
+
+<style scoped>
+.s-resize-handle:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-offset);
+}
+</style>