@pgcorp/ui-kit 0.1.0

package/src/components/layout/SWorkbenchPanelShell.vue

@@ -0,0 +1,286 @@
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="workbench-panel" data-testid="workbench-panel-shell">
+    <slot name="dialogs" />
+
+    <div class="workbench-header">
+      <slot name="header-navigation" />
+      <div class="title-container">
+        <slot name="title" />
+      </div>
+      <slot name="header-actions" />
+    </div>
+
+    <slot name="status" />
+
+    <slot v-if="renderState.mode === 'creating'" name="creating" />
+
+    <SAsyncState v-else :state="renderState.state">
+      <template v-if="$slots.loading" #loading="slotProps">
+        <slot name="loading" v-bind="slotProps" />
+      </template>
+      <template v-if="$slots.error" #error="slotProps">
+        <slot name="error" v-bind="slotProps" />
+      </template>
+
+      <div
+        ref="shellRef"
+        class="workbench-shell"
+        :class="shellClasses"
+        :style="shellStyle"
+      >
+        <div class="workbench-shell-main" data-testid="workbench-shell-main">
+          <div class="workbench-shell-main-content">
+            <slot name="main" />
+          </div>
+        </div>
+
+        <div
+          v-if="showSecondary"
+          class="workbench-shell-secondary-wrap"
+          :class="`workbench-shell-secondary-wrap--${secondaryPlacement}`"
+        >
+          <SDockRegion
+            :placement="dockPlacement"
+            :visible="showSecondary"
+            :size="secondarySizePx"
+            :min-size="secondaryBounds.min"
+            :max-size="secondaryBounds.max"
+            :resize-step="16"
+            :resize-label="secondaryResizeLabel"
+            :resize-test-id="secondaryResizeTestId"
+            :hide-resize-handle-on-narrow="secondaryResponsiveStack"
+            :responsive-size="secondaryResponsiveStack ? 'fill-on-narrow' : 'fixed'"
+            handle-variant="overlay"
+            surface="transparent"
+            @resize-start="refreshSecondaryBounds"
+            @resize="resizeSecondary"
+          >
+            <div
+              class="workbench-shell-secondary flex flex-col"
+              :class="`workbench-shell-secondary--${secondaryPlacement}`"
+              data-testid="workbench-shell-secondary"
+            >
+              <div
+                v-if="$slots['secondary-header'] || $slots['secondary-actions']"
+                class="workbench-shell-secondary-header"
+                :class="{ 'workbench-shell-secondary-header--sticky': secondaryStickyHeader }"
+                data-testid="workbench-shell-secondary-header"
+              >
+                <div class="workbench-shell-secondary-header-main">
+                  <slot name="secondary-header" />
+                </div>
+                <div class="workbench-shell-secondary-header-actions">
+                  <slot name="secondary-actions" />
+                </div>
+              </div>
+
+              <div
+                class="workbench-shell-secondary-content"
+                :class="{ 'flex min-h-0 flex-col': isBottomDock }"
+                data-testid="workbench-shell-secondary-content"
+              >
+                <slot name="secondary" />
+              </div>
+            </div>
+          </SDockRegion>
+        </div>
+      </div>
+    </SAsyncState>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue'
+import SAsyncState from '../shared/feedback/SAsyncState.vue'
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+import {
+  validateBoolean,
+  validateExactString,
+} from '../../internal/runtimeContract'
+import SDockRegion from './SDockRegion.vue'
+import type { WorkbenchPanelState } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+type SecondaryPlacement = 'none' | 'right-drawer' | 'bottom-dock'
+type SecondarySize = 'sm' | 'md' | 'lg'
+const RIGHT_DRAWER_WIDTHS: Record<SecondarySize, number> = {
+  sm: 320,
+  md: 384,
+  lg: 480,
+}
+
+const BOTTOM_DOCK_HEIGHTS: Record<SecondarySize, number> = {
+  sm: 240,
+  md: 304,
+  lg: 384,
+}
+
+const props = withDefaults(defineProps<{
+  state: WorkbenchPanelState
+  secondaryPlacement?: SecondaryPlacement
+  secondaryOpen?: boolean
+  secondarySize?: SecondarySize
+  secondaryStickyHeader?: boolean
+  secondaryResponsiveStack?: boolean
+}>(), {
+  secondaryPlacement: 'none',
+  secondaryOpen: true,
+  secondarySize: 'md',
+  secondaryStickyHeader: false,
+  secondaryResponsiveStack: false,
+})
+
+const slots = useSlots()
+const ownedAttrs = useOwnedAttrs({ component: 'SWorkbenchPanelShell', owner: 'workbench panel root' })
+const shellRef = ref<HTMLElement | null>(null)
+const secondarySizePx = ref(resolveSecondarySizePx(props.secondaryPlacement, props.secondarySize))
+const secondaryBounds = ref(resolveSecondaryBounds())
+let shellResizeObserver: ResizeObserver | null = null
+const renderState = computed(() => {
+  assertShellOptions()
+  const candidate: unknown = props.state
+  if (
+    typeof candidate !== 'object'
+    || candidate === null
+    || Array.isArray(candidate)
+    || Reflect.get(candidate, 'status') !== 'creating'
+  ) {
+    return {
+      mode: 'async' as const,
+      state: candidate as Exclude<WorkbenchPanelState, { status: 'creating' }>,
+    }
+  }
+  if (Object.keys(candidate).length !== 1) {
+    throw new TypeError('SWorkbenchPanelShell: state со status=creating должен содержать только поле status')
+  }
+  return { mode: 'creating' as const }
+})
+
+const hasSecondary = computed(() =>
+  Boolean(slots.secondary || slots['secondary-header'] || slots['secondary-actions'])
+)
+
+const showSecondary = computed(() =>
+  props.secondaryPlacement !== 'none'
+  && props.secondaryOpen
+  && hasSecondary.value
+)
+
+const isBottomDock = computed(() => props.secondaryPlacement === 'bottom-dock')
+const dockPlacement = computed<'right' | 'bottom'>(() => isBottomDock.value ? 'bottom' : 'right')
+const secondaryResizeLabel = computed(() => isBottomDock.value
+  ? 'Изменить высоту нижней панели'
+  : 'Изменить ширину боковой панели')
+const secondaryResizeTestId = computed(() => isBottomDock.value
+  ? 'workbench-shell-resize-handle-bottom'
+  : 'workbench-shell-resize-handle-right')
+
+const shellClasses = computed(() => [
+  `workbench-shell--${props.secondaryPlacement}`,
+  `workbench-shell--secondary-${props.secondarySize}`,
+  {
+    'workbench-shell--secondary-open': showSecondary.value,
+    'workbench-shell--secondary-responsive-stack': props.secondaryResponsiveStack,
+  },
+])
+
+const shellStyle = computed<Record<string, string>>(() => {
+  return {
+    '--workbench-secondary-size': `${secondarySizePx.value}px`,
+  }
+})
+
+watch(
+  () => [props.secondaryPlacement, props.secondarySize] as const,
+  ([secondaryPlacement, secondarySize]) => {
+    secondarySizePx.value = resolveSecondarySizePx(secondaryPlacement, secondarySize)
+    secondaryBounds.value = resolveSecondaryBounds()
+  },
+  { immediate: true },
+)
+
+function resolveSecondarySizePx(
+  secondaryPlacement: SecondaryPlacement,
+  secondarySize: SecondarySize,
+): number {
+  if (secondaryPlacement === 'bottom-dock') {
+    return BOTTOM_DOCK_HEIGHTS[secondarySize]
+  }
+
+  return RIGHT_DRAWER_WIDTHS[secondarySize]
+}
+
+function resolveSecondaryBounds(): { min: number, max: number } {
+  const shell = shellRef.value
+  if (!shell) {
+    return props.secondaryPlacement === 'bottom-dock'
+      ? { min: 192, max: 640 }
+      : { min: 248, max: 768 }
+  }
+
+  if (props.secondaryPlacement === 'right-drawer') {
+    if (shell.clientWidth <= 0) return { min: 248, max: 768 }
+    const shellWidth = Math.max(shell.clientWidth, 320)
+    const minWidth = Math.min(320, Math.max(248, Math.floor(shellWidth * 0.34)))
+    const maxWidth = Math.max(minWidth, Math.floor(shellWidth * 0.62))
+    return { min: minWidth, max: maxWidth }
+  }
+
+  if (props.secondaryPlacement === 'bottom-dock') {
+    if (shell.clientHeight <= 0) return { min: 192, max: 640 }
+    const shellHeight = Math.max(shell.clientHeight, 320)
+    const minHeight = Math.min(320, Math.max(192, Math.floor(shellHeight * 0.24)))
+    const maxHeight = Math.max(minHeight, Math.floor(shellHeight * 0.68))
+    return { min: minHeight, max: maxHeight }
+  }
+
+  return { min: 0, max: 0 }
+}
+
+function refreshSecondaryBounds(): void {
+  const bounds = resolveSecondaryBounds()
+  secondaryBounds.value = bounds
+  secondarySizePx.value = Math.min(bounds.max, Math.max(bounds.min, secondarySizePx.value))
+}
+
+function resizeSecondary(nextSize: number): void {
+  refreshSecondaryBounds()
+  secondarySizePx.value = Math.min(
+    secondaryBounds.value.max,
+    Math.max(secondaryBounds.value.min, nextSize),
+  )
+}
+
+function assertShellOptions(): void {
+  validateExactString(
+    'SWorkbenchPanelShell',
+    'secondaryPlacement',
+    props.secondaryPlacement,
+    ['none', 'right-drawer', 'bottom-dock'] as const,
+  )
+  validateExactString(
+    'SWorkbenchPanelShell',
+    'secondarySize',
+    props.secondarySize,
+    ['sm', 'md', 'lg'] as const,
+  )
+  validateBoolean('SWorkbenchPanelShell', 'secondaryOpen', props.secondaryOpen)
+  validateBoolean('SWorkbenchPanelShell', 'secondaryStickyHeader', props.secondaryStickyHeader)
+  validateBoolean('SWorkbenchPanelShell', 'secondaryResponsiveStack', props.secondaryResponsiveStack)
+}
+
+onMounted(() => {
+  refreshSecondaryBounds()
+  if (typeof ResizeObserver === 'undefined' || !shellRef.value) return
+  shellResizeObserver = new ResizeObserver(refreshSecondaryBounds)
+  shellResizeObserver.observe(shellRef.value)
+})
+
+onBeforeUnmount(() => {
+  shellResizeObserver?.disconnect()
+  shellResizeObserver = null
+})
+</script>
+
+<style lang="postcss" src="./SWorkbenchPanelShell.css" scoped></style>

package/src/components/layout/_internal/SAppBrand.css

@@ -0,0 +1,45 @@
+@reference "../../../styles/reference.css";
+
+.s-app-brand__text {
+  min-width: 0;
+}
+
+.s-app-brand__content {
+  @apply flex min-w-0 items-center gap-3;
+}
+
+.s-app-brand__icon {
+  @apply flex shrink-0 items-center justify-center bg-primary-500 text-primary-contrast shadow-md shadow-primary-500/20;
+  width: var(--s-app-brand-icon-size);
+  height: var(--s-app-brand-icon-size);
+  border-radius: var(--s-app-brand-icon-radius);
+}
+
+.s-app-brand__text {
+  @apply flex flex-col;
+}
+
+.s-app-brand__title,
+.s-app-brand__subtitle {
+  @apply truncate;
+}
+
+.s-app-brand__title {
+  @apply text-base font-semibold tracking-wide;
+}
+
+.s-app-brand__content[data-placement='header'] .s-app-brand__title {
+  @apply text-surface-950 dark:text-surface-0;
+}
+
+.s-app-brand__subtitle {
+  @apply text-surface-500;
+}
+
+.s-app-brand__content[data-placement='sidebar'] .s-app-brand__subtitle {
+  @apply text-xs;
+}
+
+.s-app-brand__content[data-placement='header'] .s-app-brand__subtitle {
+  @apply text-sm;
+}

package/src/components/layout/_internal/SAppBrand.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import SLink from '../../shared/controls/SLink.vue'
+import SAppBrandContent from './SAppBrandContent.vue'
+
+withDefaults(defineProps<{
+  title: string
+  subtitle?: string
+  to?: RouteLocationRaw | null
+  placement: 'sidebar' | 'header'
+}>(), {
+  subtitle: '',
+  to: null,
+})
+
+const slots = useSlots()
+const hasLogo = computed(() => Boolean(slots.logo))
+const hasIcon = computed(() => Boolean(slots.icon))
+</script>
+
+<template>
+  <div class="s-app-brand" :data-placement="placement">
+    <SLink v-if="to" :to="to" variant="brand" :aria-label="hasLogo ? title : undefined">
+      <SAppBrandContent :title="title" :subtitle="subtitle" :placement="placement" :has-logo="hasLogo" :has-icon="hasIcon">
+        <template v-if="hasLogo" #logo><slot name="logo" /></template>
+        <template v-if="hasIcon" #icon><slot name="icon" /></template>
+      </SAppBrandContent>
+    </SLink>
+    <div v-else data-s-app-brand-passive>
+      <SAppBrandContent :title="title" :subtitle="subtitle" :placement="placement" :has-logo="hasLogo" :has-icon="hasIcon">
+        <template v-if="hasLogo" #logo><slot name="logo" /></template>
+        <template v-if="hasIcon" #icon><slot name="icon" /></template>
+      </SAppBrandContent>
+    </div>
+  </div>
+</template>

package/src/components/layout/_internal/SAppBrandContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  title: string
+  subtitle?: string
+  placement: 'sidebar' | 'header'
+  hasLogo?: boolean
+  hasIcon?: boolean
+}>(), {
+  subtitle: '',
+  hasLogo: false,
+  hasIcon: false,
+})
+</script>
+
+<template>
+  <span class="s-app-brand__content" :data-placement="placement">
+    <slot v-if="hasLogo" name="logo" />
+    <template v-else>
+      <span v-if="hasIcon" class="s-app-brand__icon" aria-hidden="true">
+        <slot name="icon" />
+      </span>
+      <span class="s-app-brand__text">
+        <span class="s-app-brand__title">{{ title }}</span>
+        <span v-if="subtitle" class="s-app-brand__subtitle">{{ subtitle }}</span>
+      </span>
+    </template>
+  </span>
+</template>
+
+<style lang="postcss" src="./SAppBrand.css" scoped></style>

package/src/components/layout/types.ts

@@ -0,0 +1,28 @@
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { BadgeSeverity } from '../shared/data-display/SBadge.vue'
+import type { SAsyncStateContract } from '../shared/feedback/SAsyncState.vue'
+
+export type ShellBadgeSeverity = BadgeSeverity
+
+/**
+ * Точное взаимоисключающее состояние рабочей панели.
+ * Exact mutually exclusive workbench panel state.
+ */
+type WorkbenchPanelAsyncState = Exclude<SAsyncStateContract, { status: 'empty' }> extends infer State
+  ? State extends { status: 'loading' }
+    ? State & { message: string }
+    : State
+  : never
+
+export type WorkbenchPanelState = { status: 'creating' } | WorkbenchPanelAsyncState
+
+export interface AppShellNavigationItem {
+  key: string
+  label: string
+  to: RouteLocationRaw
+  icon?: Component
+  badgeLabel?: string
+  badgeSeverity?: ShellBadgeSeverity
+  active?: boolean
+}

package/src/components/shared/_internal/SDialogSurface.css

@@ -0,0 +1,127 @@
+@reference "../../../styles/reference.css";
+
+.s-dialog-surface {
+  box-shadow: var(--s-elevation-overlay);
+}
+
+.s-dialog-surface[data-presentation='modal'] {
+  @apply w-full transform overflow-hidden rounded-2xl p-6 text-left align-middle transition-all;
+  @apply bg-surface-0 dark:bg-surface-800;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-surface='subtle'] {
+  @apply bg-surface-50 dark:bg-surface-900;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-scroll='body'] {
+  @apply flex max-h-[calc(100dvh-2rem)] flex-col;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-scroll='body'] .s-dialog-surface__body {
+  @apply min-h-0 flex-1 overflow-y-auto;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-layout='fullscreen'] {
+  @apply min-h-screen rounded-none;
+  max-width: 100%;
+  height: 100%;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-size='sm'] {
+  max-width: 24rem;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-size='md'] {
+  max-width: 28rem;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-size='lg'] {
+  max-width: 32rem;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-size='xl'] {
+  max-width: 36rem;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-size='2xl'] {
+  max-width: 42rem;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-size='3xl'] {
+  max-width: 48rem;
+}
+
+.s-dialog-surface[data-presentation='modal'][data-size='wide'] {
+  max-width: 72rem;
+}
+
+.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__header {
+  @apply flex items-start justify-between border-b border-surface-200 pb-4 dark:border-surface-700;
+}
+
+.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__title {
+  @apply text-lg font-medium leading-6 text-surface-900 dark:text-surface-100;
+}
+
+.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__body {
+  @apply mt-4 text-sm text-surface-600 dark:text-surface-300;
+}
+
+.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__footer {
+  @apply mt-6 flex justify-end gap-3 border-t border-surface-200 pt-4 dark:border-surface-700;
+}
+
+.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__footer[data-layout='split'] {
+  @apply flex-wrap items-center justify-start gap-x-3 gap-y-2;
+}
+
+.s-dialog-surface__footer-start,
+.s-dialog-surface__footer-end {
+  @apply flex min-w-0 flex-wrap items-center gap-2;
+}
+
+.s-dialog-surface__footer-start {
+  @apply mr-auto;
+}
+
+.s-dialog-surface__footer-end {
+  @apply ml-auto justify-end;
+}
+
+.s-dialog-surface[data-presentation='drawer'] {
+  @apply relative flex h-full w-full flex-col overflow-hidden border-l border-surface-200 bg-surface-0 text-surface-900 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-size='sm'] {
+  max-width: 30rem;
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-size='md'] {
+  max-width: 36rem;
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-size='lg'] {
+  max-width: 44rem;
+}
+
+.s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__header {
+  @apply flex items-start gap-3 border-b border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
+}
+
+.s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__title {
+  @apply min-w-0 flex-1 text-lg font-semibold leading-6 text-surface-950 dark:text-surface-0;
+}
+
+.s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__body {
+  @apply flex-1 overflow-y-auto p-5 md:p-6;
+}
+
+.s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__footer {
+  @apply flex flex-wrap justify-end gap-3 border-t border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
+}
+
+@media (max-width: 767px) {
+  .s-dialog-surface[data-presentation='drawer'][data-layout='mobile-fullscreen'] {
+    @apply max-w-full border-l-0;
+  }
+}

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

@@ -0,0 +1,117 @@
+<template>
+  <component
+    :is="rootTag"
+    :ref="setSurfaceElement"
+    v-bind="$attrs"
+    class="s-dialog-surface"
+    :data-presentation="presentation.kind"
+    :data-layout="surfaceLayout"
+    :data-size="presentation.size"
+    :data-surface="modalPresentation?.surface"
+    :data-scroll="modalPresentation?.scrollBehavior"
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+    :aria-labelledby="hasHeader ? titleId : undefined"
+    :aria-label="hasHeader ? undefined : accessibleName"
+  >
+    <component :is="headerTag" v-if="hasHeader" class="s-dialog-surface__header">
+      <component :is="headingTag" :id="titleId" class="s-dialog-surface__title">
+        <slot name="header">{{ title }}</slot>
+      </component>
+      <SButton
+        v-if="closable"
+        :leading-icon="X"
+        icon-only
+        appearance="text"
+        size="sm"
+        aria-label="Закрыть"
+        @click="requestClose"
+      />
+    </component>
+
+    <div class="s-dialog-surface__body">
+      <slot />
+    </div>
+
+    <div
+      v-if="hasFooter"
+      class="s-dialog-surface__footer"
+      :data-layout="hasSplitFooter ? 'split' : 'end'"
+    >
+      <template v-if="hasSplitFooter">
+        <div v-if="$slots['footer-start']" class="s-dialog-surface__footer-start">
+          <slot name="footer-start" :close="requestClose" />
+        </div>
+        <div v-if="$slots['footer-end']" class="s-dialog-surface__footer-end">
+          <slot name="footer-end" :close="requestClose" />
+        </div>
+      </template>
+      <slot v-else name="footer" :close="requestClose" />
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, useId, useSlots, type ComponentPublicInstance } from 'vue'
+
+import { X } from '../../icons/sputnigUiIcons'
+import SButton from '../controls/SButton.vue'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import {
+  assertDialogSurfacePresentation,
+  type DialogSurfacePresentation,
+  type ModalDialogSurfacePresentation,
+} from './dialogSurface'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  presentation: DialogSurfacePresentation
+  title?: string
+  accessibleName: string
+  closable: boolean
+  setSurfaceElement: (element: Element | ComponentPublicInstance | null) => void
+}>()
+
+const emit = defineEmits<{
+  'request-close': []
+}>()
+
+defineSlots<{
+  header?: () => unknown
+  default?: () => unknown
+  footer?: (properties: { close: () => void }) => unknown
+  'footer-start'?: (properties: { close: () => void }) => unknown
+  'footer-end'?: (properties: { close: () => void }) => unknown
+}>()
+
+assertDialogSurfacePresentation(props.presentation)
+useInteractiveLeafRegistration({ owner: 'SDialogSurface' })
+
+const slots = useSlots()
+const titleId = `s-dialog-title-${useId()}`
+const isModal = computed(() => props.presentation.kind === 'modal')
+const modalPresentation = computed<ModalDialogSurfacePresentation | null>(() => (
+  props.presentation.kind === 'modal' ? props.presentation : null
+))
+const hasHeader = computed(() => Boolean(props.title || slots.header))
+const hasSplitFooter = computed(() => isModal.value && Boolean(slots['footer-start'] || slots['footer-end']))
+const hasFooter = computed(() => hasSplitFooter.value || Boolean(slots.footer))
+const rootTag = 'div'
+const headerTag = computed(() => (isModal.value ? 'div' : 'header'))
+const headingTag = computed(() => (isModal.value ? 'h3' : 'h2'))
+type DialogSurfaceLayout = 'contained' | 'fullscreen' | 'side-panel' | 'mobile-fullscreen'
+
+const surfaceLayout = computed<DialogSurfaceLayout>(() => {
+  const presentation = props.presentation
+  if (presentation.kind === 'drawer') {
+    return presentation.mobileFullScreen ? 'mobile-fullscreen' : 'side-panel'
+  }
+  return presentation.fullscreen || presentation.size === 'full' ? 'fullscreen' : 'contained'
+})
+
+const requestClose = (): void => emit('request-close')
+</script>
+
+<style lang="postcss" src="./SDialogSurface.css" scoped></style>