@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/PluginWorkspaceView.vue

@@ -0,0 +1,708 @@
+<script setup lang="ts">
+/** Standard plugin workspace shell that combines AppLayout, AppTopBar, and AppSidebar with LEAF-style defaults. */
+import { computed, reactive, ref, useSlots, watch } from 'vue'
+import type {
+  AccountMenuItem,
+  ExperimentSummary,
+  PageSelectorItem,
+  PageSelectorItemInput,
+  PillNavItem,
+  PillNavItemInput,
+  PluginSwitcherInfo,
+  PluginSwitcherPlugin,
+  SidebarToolSection,
+  TopBarSettingsConfig,
+  PillNavOption,
+  TopBarVariant,
+} from '../types'
+import type { FormEnhancements, FormSchema } from '../types/form-builder'
+import type {
+  ControlComponentBinding,
+  ControlComponentBindingsById,
+  ControlComponentBindingsConfig,
+  ControlComponentPropsByIdMap,
+  ControlComponentPropsMap,
+  ControlModel,
+  ControlModelBinding,
+  ControlSchema,
+  ControlWorkspaceOptions,
+} from '../composables/useControlSchema'
+import {
+  controlValuesToComponentBindings,
+  controlValuesToComponentBindingsById,
+  controlValuesToComponentProps,
+  controlsToViewItems,
+  defineControlModel,
+  getDefaultControlView,
+  getControlDefaults,
+  mergeControlWorkspaceOptions,
+} from '../composables/useControlSchema'
+import {
+  useAppExperiment,
+  type AppExperimentRecord,
+} from '../composables/useAppExperiment'
+import AppLayout from './AppLayout.vue'
+import AppSidebar from './AppSidebar.vue'
+import AppTopBar from './AppTopBar.vue'
+
+type SidebarVariant = 'default' | 'analysis'
+
+interface Props {
+  /** App or plugin title shown in the top bar. */
+  title?: string
+  /** Secondary copy shown under the title. */
+  subtitle?: string
+  /** Top bar visual treatment. */
+  topBarVariant?: TopBarVariant
+  /** Home link used by the top bar brand icon. */
+  homePath?: string
+  /** Show the default MINT logo when no icon/logo slot is provided. */
+  showLogo?: boolean
+  /** Preferred route-level page selector entries. */
+  pageSelector?: PageSelectorItemInput[]
+  /** Active page selector id. Defaults to activeView. */
+  currentPageSelectorId?: string
+  /** Optional plugin switcher shown in the left navigation position. */
+  pluginSwitcher?: PluginSwitcherInfo
+  /** Preferred centered navigation for local modes inside the current route. */
+  pillNav?: PillNavItemInput[]
+  /** Active centered pill id. Defaults to activeView. */
+  currentPillId?: string
+  /** Show the theme toggle button. */
+  showThemeToggle?: boolean
+  /** Show the settings button and modal. */
+  showSettings?: boolean
+  /** Built-in settings modal configuration. */
+  settingsConfig?: TopBarSettingsConfig
+  /** Show the standalone badge when not integrated into the platform. */
+  showStandaloneLabel?: boolean
+  /** Custom standalone badge label. */
+  standaloneLabel?: string
+  /** Account dropdown entries. */
+  accountMenu?: AccountMenuItem[]
+  /** Show the notifications icon button. */
+  showNotifications?: boolean
+  /** Draw a notification dot on the notifications icon. */
+  hasNotificationDot?: boolean
+  /** Show the classic admin shortcut. */
+  showAdmin?: boolean
+  /** Route used by the classic admin shortcut. */
+  adminPath?: string
+  /** Show the classic profile button when accountMenu is not provided. */
+  showProfile?: boolean
+  /** Classic profile display name. */
+  userName?: string
+  /** Explicit classic profile initial. */
+  userInitial?: string
+  /** Classic profile email. */
+  userEmail?: string
+  /** Enable the built-in AppTopBar experiment popover and selector flow. */
+  experimentShell?: boolean
+  /** Current experiment mirrored into the AppTopBar experiment chip when experimentShell is enabled. */
+  experiment?: AppExperimentRecord | null
+  /** Save handler used by the AppTopBar experiment chip. Return a message to flash success. */
+  experimentSave?: () => string | null | Promise<string | null>
+  /** Disable the experiment save action. */
+  experimentSaveDisabled?: boolean
+  /** Tooltip shown when the experiment save action is disabled. */
+  experimentSaveDisabledMessage?: string
+
+  /** Active workspace view used by top bar navigation and sidebar panels. */
+  activeView?: string
+  /** Initial active view when activeView is uncontrolled. */
+  defaultActiveView?: string
+  /** Map of view IDs to sidebar tool sections. */
+  panels?: Record<string, SidebarToolSection[]>
+  /** Optional FormBuilder schemas keyed by section ID. */
+  forms?: Record<string, FormSchema>
+  /** Sidebar chrome title. */
+  sidebarTitle?: string
+  /** Sidebar chrome subtitle. */
+  sidebarSubtitle?: string
+  /** Optional compact badge/count rendered in the sidebar header. */
+  sidebarBadge?: string | number
+  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar language. */
+  sidebarVariant?: SidebarVariant
+  /** Sidebar CSS width. Defaults to AppSidebar's variant width. */
+  sidebarWidth?: string
+  /** Sidebar position in AppLayout. */
+  sidebarPosition?: 'left' | 'right'
+  /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
+  responsiveSidebar?: boolean
+  /** Render the sidebar shell even when no panel matches the active view. */
+  showSidebarWhenEmpty?: boolean
+  /** Disable the built-in sidebar surface entirely. */
+  showSidebar?: boolean
+  /** DOM id for the AppSidebar scrollable content area. Use with route/tab-owned Teleport sidebars. */
+  sidebarContentId?: string
+  /** Compact AppSidebar density. */
+  dense?: boolean
+  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to AppSidebar's variant behavior. */
+  sidebarCollapsible?: boolean
+  /** Sidebar width when collapsed. */
+  sidebarCollapsedWidth?: string
+  /** Accessible label for the sidebar collapse action. */
+  sidebarCollapseButtonLabel?: string
+  /** Accessible label for the sidebar expand action. */
+  sidebarExpandButtonLabel?: string
+  /** Floating AppLayout style. */
+  floating?: boolean
+  /** Optional compact control model for generated sidebar forms. */
+  model?: ControlModel | ControlModelBinding
+  /** Compact control schema for generated sidebar forms. */
+  controls?: ControlSchema
+  /** Options passed to compact control schema generation. */
+  controlOptions?: ControlWorkspaceOptions
+  /** Optional SDK component bindings exposed to the default slot with resolved props. */
+  componentBindings?: ControlComponentBindingsConfig
+  /** Optional mapping from workspace values to component props exposed to the default slot. */
+  componentProps?: ControlComponentPropsMap
+  /** Optional named mappings from workspace values to component props exposed to the default slot. */
+  componentPropsById?: ControlComponentPropsByIdMap
+  /** Shared values for auto-rendered sidebar forms. Supports default v-model. */
+  modelValue?: Record<string, unknown>
+  /** Shared values for auto-rendered sidebar forms. */
+  values?: Record<string, unknown>
+  /** Runtime FormBuilder enhancements for auto-rendered sidebar forms. */
+  formEnhancements?: FormEnhancements<Record<string, unknown>>
+  /** Show submit/cancel actions inside auto-rendered sidebar forms. */
+  showFormActions?: boolean
+  /** Loading/saving state for auto-rendered sidebar forms. */
+  formLoading?: boolean
+  /** Disabled state for auto-rendered sidebar forms. */
+  formDisabled?: boolean
+  /** Readonly state for auto-rendered sidebar forms. */
+  formReadonly?: boolean
+  /** Size passed to auto-rendered sidebar forms. */
+  formSize?: 'sm' | 'md' | 'lg'
+  /** Controlled sidebar collapsed state. */
+  sidebarCollapsed?: boolean
+  /** Initial sidebar collapsed state when uncontrolled. */
+  defaultSidebarCollapsed?: boolean
+  /** Accessible label for the mobile sidebar toggle. */
+  sidebarToggleLabel?: string
+  /** Accessible label used when the mobile sidebar is open. */
+  sidebarCloseLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Workspace',
+  subtitle: undefined,
+  topBarVariant: 'card',
+  homePath: '/',
+  showLogo: true,
+  pageSelector: undefined,
+  currentPageSelectorId: undefined,
+  pluginSwitcher: undefined,
+  pillNav: undefined,
+  currentPillId: undefined,
+  showThemeToggle: false,
+  showSettings: false,
+  settingsConfig: undefined,
+  showStandaloneLabel: true,
+  standaloneLabel: 'Standalone',
+  accountMenu: undefined,
+  showNotifications: false,
+  hasNotificationDot: false,
+  showAdmin: false,
+  adminPath: '/admin',
+  showProfile: false,
+  userName: undefined,
+  userInitial: undefined,
+  userEmail: undefined,
+  experimentShell: false,
+  experiment: undefined,
+  experimentSave: undefined,
+  experimentSaveDisabled: false,
+  experimentSaveDisabledMessage: undefined,
+  activeView: undefined,
+  defaultActiveView: undefined,
+  panels: () => ({}),
+  forms: () => ({}),
+  sidebarTitle: undefined,
+  sidebarSubtitle: undefined,
+  sidebarBadge: undefined,
+  sidebarVariant: 'analysis',
+  sidebarWidth: undefined,
+  sidebarPosition: 'left',
+  responsiveSidebar: true,
+  showSidebarWhenEmpty: false,
+  showSidebar: true,
+  sidebarContentId: undefined,
+  dense: true,
+  sidebarCollapsible: undefined,
+  sidebarCollapsedWidth: '3rem',
+  sidebarCollapseButtonLabel: 'Collapse sidebar',
+  sidebarExpandButtonLabel: 'Expand sidebar',
+  floating: true,
+  model: undefined,
+  controls: undefined,
+  controlOptions: () => ({}),
+  componentBindings: undefined,
+  componentProps: undefined,
+  componentPropsById: undefined,
+  modelValue: undefined,
+  values: undefined,
+  formEnhancements: undefined,
+  showFormActions: false,
+  formLoading: false,
+  formDisabled: false,
+  formReadonly: false,
+  formSize: 'sm',
+  sidebarCollapsed: undefined,
+  defaultSidebarCollapsed: false,
+  sidebarToggleLabel: 'Open workspace sidebar',
+  sidebarCloseLabel: 'Close workspace sidebar',
+})
+
+const emit = defineEmits<{
+  'update:activeView': [value: string]
+  'page-selector-select': [page: PageSelectorItem]
+  'pill-select': [item: PillNavItem]
+  'pill-option-select': [option: PillNavOption, item: PillNavItem]
+  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
+  'plugin-switcher-install': []
+  'account-menu-select': [item: AccountMenuItem]
+  'sign-out': []
+  'notifications-click': []
+  'settings-values-change': [data: Record<string, unknown>]
+  'profile-click': []
+  'admin-click': []
+  'experiment-select': [experiment: ExperimentSummary]
+  'experiment-detach': []
+  'update:modelValue': [values: Record<string, unknown>]
+  'update:values': [values: Record<string, unknown>]
+  'update:sidebarCollapsed': [value: boolean]
+  'update:toggle': [sectionId: string, value: boolean]
+  'form-submit': [sectionId: string, values: Record<string, unknown>]
+  'form-cancel': [sectionId: string]
+}>()
+
+interface PluginWorkspaceSlotProps {
+  activeView: string
+  setActiveView: (viewId: string) => void
+  values: Record<string, unknown>
+  componentBindings: ControlComponentBinding[]
+  componentBindingsById: ControlComponentBindingsById
+  componentProps: Record<string, unknown>
+  componentPropsById: Record<string, Record<string, unknown>>
+}
+
+type ForwardedSlotProps = Record<string, unknown>
+
+defineSlots<{
+  default?: (props: PluginWorkspaceSlotProps) => unknown
+  topbar?: (props: PluginWorkspaceSlotProps) => unknown
+  sidebar?: (props: PluginWorkspaceSlotProps) => unknown
+  icon?: (props: ForwardedSlotProps) => unknown
+  logo?: (props: ForwardedSlotProps) => unknown
+  'page-selector-icon'?: (props: ForwardedSlotProps) => unknown
+  'page-selector-item-icon'?: (props: ForwardedSlotProps) => unknown
+  nav?: (props: ForwardedSlotProps) => unknown
+  center?: (props: ForwardedSlotProps) => unknown
+  actions?: (props: ForwardedSlotProps) => unknown
+  'account-menu-items'?: (props: ForwardedSlotProps) => unknown
+  'account-menu-item-icon'?: (props: ForwardedSlotProps) => unknown
+  'settings-appearance'?: (props: ForwardedSlotProps) => unknown
+  header?: (props: ForwardedSlotProps) => unknown
+  collapsed?: (props: ForwardedSlotProps) => unknown
+  footer?: (props: ForwardedSlotProps) => unknown
+}>()
+
+const topBarForwardedSlots = new Set([
+  'icon',
+  'logo',
+  'page-selector-icon',
+  'page-selector-item-icon',
+  'nav',
+  'center',
+  'actions',
+  'account-menu-items',
+  'account-menu-item-icon',
+  'settings-appearance',
+])
+
+const sidebarForwardedSlots = new Set([
+  'header',
+  'collapsed',
+  'footer',
+])
+
+const slots = useSlots()
+const internalActiveView = ref(props.defaultActiveView)
+
+if (props.experimentShell) {
+  useAppExperiment({
+    experiment: computed(() => props.experiment),
+    onSelect: experiment => emit('experiment-select', experiment),
+    onSave: props.experimentSave,
+    onDetach: () => emit('experiment-detach'),
+    saveDisabled: computed(() => props.experimentSaveDisabled),
+    saveDisabledMessage: computed(() => props.experimentSaveDisabledMessage),
+  })
+}
+
+const topBarSlotNames = computed<string[]>(() =>
+  Object.keys(slots).filter(name =>
+    topBarForwardedSlots.has(name) || name.startsWith('settings-tab-'),
+  ),
+)
+
+const sidebarSlotNames = computed<string[]>(() =>
+  Object.keys(slots).filter(name =>
+    sidebarForwardedSlots.has(name) || name.startsWith('section-'),
+  ),
+)
+
+const resolvedModel = computed<ControlModelBinding | undefined>(() => {
+  if (props.model === undefined) return undefined
+  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+})
+
+const resolvedControls = computed<ControlSchema | undefined>(() =>
+  props.controls ?? resolvedModel.value?.controls,
+)
+
+const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
+  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions),
+)
+
+const externalControlValues = computed(() => props.modelValue ?? props.values)
+const internalControlValues = reactive<Record<string, unknown>>({})
+let syncingControlValues = false
+
+const generatedControlDefaults = computed<Record<string, unknown>>(() => {
+  if (!resolvedControls.value) return {}
+  return {
+    ...getControlDefaults(resolvedControls.value),
+    ...(resolvedControlOptions.value.initialValues ?? {}),
+  }
+})
+
+syncResolvedControlValues()
+
+watch(
+  [generatedControlDefaults, externalControlValues],
+  syncResolvedControlValues,
+  { deep: true },
+)
+
+watch(
+  internalControlValues,
+  () => {
+    if (syncingControlValues) return
+    emitControlValues()
+  },
+  { deep: true, flush: 'sync' },
+)
+
+const resolvedComponentBindings = computed(() =>
+  controlValuesToComponentBindings(
+    internalControlValues,
+    props.componentBindings ?? resolvedModel.value?.componentBindings,
+  ),
+)
+
+const resolvedComponentBindingsById = computed(() =>
+  controlValuesToComponentBindingsById(
+    internalControlValues,
+    props.componentBindings ?? resolvedModel.value?.componentBindings,
+  ),
+)
+
+const resolvedComponentProps = computed(() => {
+  const mapping = props.componentProps ?? resolvedModel.value?.componentProps
+  return mapping === undefined ? {} : controlValuesToComponentProps(internalControlValues, mapping)
+})
+
+const resolvedComponentPropsById = computed(() => {
+  const mappings = props.componentPropsById ?? resolvedModel.value?.componentPropsById
+  if (mappings === undefined) return {}
+
+  return Object.fromEntries(
+    Object.entries(mappings).map(([id, mapping]) => [
+      id,
+      controlValuesToComponentProps(internalControlValues, mapping),
+    ]),
+  )
+})
+
+const generatedPillNav = computed<PillNavItem[]>(() => {
+  if (!resolvedControls.value) return []
+  return controlsToViewItems(resolvedControls.value, resolvedControlOptions.value)
+})
+
+const generatedDefaultView = computed(() => {
+  if (!resolvedControls.value) return ''
+  return getDefaultControlView(resolvedControls.value, resolvedControlOptions.value)
+})
+
+const resolvedPillNav = computed<PillNavItemInput[] | undefined>(() => {
+  if (props.pillNav !== undefined) return props.pillNav
+  return generatedPillNav.value.length > 0 ? generatedPillNav.value : undefined
+})
+
+const firstConfiguredViewId = computed(() =>
+  props.defaultActiveView
+    ?? firstItemId(props.pillNav)
+    ?? generatedDefaultView.value
+    ?? firstItemId(props.pageSelector)
+    ?? Object.keys(props.panels)[0]
+    ?? '',
+)
+
+const resolvedActiveView = computed({
+  get: () =>
+    props.activeView
+      ?? props.currentPillId
+      ?? props.currentPageSelectorId
+      ?? internalActiveView.value
+      ?? firstConfiguredViewId.value,
+  set: (value: string) => {
+    internalActiveView.value = value
+    emit('update:activeView', value)
+  },
+})
+
+const resolvedCurrentPillId = computed(() => props.currentPillId ?? resolvedActiveView.value)
+const resolvedCurrentPageSelectorId = computed(() => props.currentPageSelectorId ?? resolvedActiveView.value)
+
+const hasSidebarSurface = computed(() => {
+  if (!props.showSidebar) return false
+  return (
+    Object.keys(props.panels).length > 0
+    || Object.keys(props.forms).length > 0
+    || props.model !== undefined
+    || props.controls !== undefined
+    || props.showSidebarWhenEmpty
+    || props.sidebarContentId !== undefined
+    || props.sidebarTitle !== undefined
+    || props.sidebarSubtitle !== undefined
+    || props.sidebarBadge !== undefined
+    || Boolean(slots.sidebar)
+    || sidebarSlotNames.value.length > 0
+  )
+})
+
+function firstItemId(items?: readonly (string | { id: string })[]): string | undefined {
+  const item = items?.[0]
+  if (item === undefined) return undefined
+  return typeof item === 'string' ? item : item.id
+}
+
+function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
+  return 'controls' in model && 'controlOptions' in model
+}
+
+function setActiveView(viewId: string) {
+  resolvedActiveView.value = viewId
+}
+
+function handlePageSelectorSelect(page: PageSelectorItem) {
+  setActiveView(page.id)
+  emit('page-selector-select', page)
+}
+
+function handlePillSelect(item: PillNavItem) {
+  setActiveView(item.id)
+  emit('pill-select', item)
+}
+
+function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
+  emit('pill-option-select', option, item)
+}
+
+function handleToggle(sectionId: string, value: boolean) {
+  emit('update:toggle', sectionId, value)
+}
+
+function handleControlValuesUpdate(values: Record<string, unknown>) {
+  syncingControlValues = true
+  replaceControlValues({
+    ...generatedControlDefaults.value,
+    ...values,
+  })
+  syncingControlValues = false
+  emitControlValues()
+}
+
+function handleFormSubmit(sectionId: string, values: Record<string, unknown>) {
+  emit('form-submit', sectionId, values)
+}
+
+function handleFormCancel(sectionId: string) {
+  emit('form-cancel', sectionId)
+}
+
+function syncResolvedControlValues() {
+  syncingControlValues = true
+  replaceControlValues({
+    ...generatedControlDefaults.value,
+    ...(externalControlValues.value === undefined ? internalControlValues : externalControlValues.value),
+  })
+  syncingControlValues = false
+}
+
+function replaceControlValues(values: Record<string, unknown>) {
+  for (const key of Object.keys(internalControlValues)) {
+    if (!(key in values)) {
+      delete internalControlValues[key]
+    }
+  }
+  Object.assign(internalControlValues, values)
+}
+
+function emitControlValues() {
+  const nextValues = { ...internalControlValues }
+  emit('update:modelValue', nextValues)
+  emit('update:values', nextValues)
+}
+
+</script>
+
+<template>
+  <AppLayout
+    class="mint-plugin-workspace-view"
+    :sidebar-position="sidebarPosition"
+    :sidebar-width="sidebarWidth"
+    :floating="floating"
+    :responsive-sidebar="responsiveSidebar"
+    :sidebar-toggle-label="sidebarToggleLabel"
+    :sidebar-close-label="sidebarCloseLabel"
+  >
+    <template #topbar>
+      <slot
+        name="topbar"
+        :active-view="resolvedActiveView"
+        :set-active-view="setActiveView"
+        :values="internalControlValues"
+        :component-bindings="resolvedComponentBindings"
+        :component-bindings-by-id="resolvedComponentBindingsById"
+        :component-props="resolvedComponentProps"
+        :component-props-by-id="resolvedComponentPropsById"
+      >
+        <AppTopBar
+          :title="title"
+          :subtitle="subtitle"
+          :variant="topBarVariant"
+          :home-path="homePath"
+          :show-logo="showLogo"
+          :page-selector="pageSelector"
+          :current-page-selector-id="resolvedCurrentPageSelectorId"
+          :plugin-switcher="pluginSwitcher"
+          :pill-nav="resolvedPillNav"
+          :current-pill-id="resolvedCurrentPillId"
+          :show-theme-toggle="showThemeToggle"
+          :show-settings="showSettings"
+          :settings-config="settingsConfig"
+          :show-standalone-label="showStandaloneLabel"
+          :standalone-label="standaloneLabel"
+          :account-menu="accountMenu"
+          :show-notifications="showNotifications"
+          :has-notification-dot="hasNotificationDot"
+          :show-admin="showAdmin"
+          :admin-path="adminPath"
+          :show-profile="showProfile"
+          :user-name="userName"
+          :user-initial="userInitial"
+          :user-email="userEmail"
+          @page-selector-select="handlePageSelectorSelect"
+          @pill-select="handlePillSelect"
+          @pill-option-select="handlePillOptionSelect"
+          @plugin-switcher-select="emit('plugin-switcher-select', $event)"
+          @plugin-switcher-install="emit('plugin-switcher-install')"
+          @account-menu-select="emit('account-menu-select', $event)"
+          @sign-out="emit('sign-out')"
+          @notifications-click="emit('notifications-click')"
+          @settings-values-change="emit('settings-values-change', $event)"
+          @profile-click="emit('profile-click')"
+          @admin-click="emit('admin-click')"
+        >
+          <template
+            v-for="slotName in topBarSlotNames"
+            :key="slotName"
+            #[slotName]="slotProps"
+          >
+            <!-- @vue-ignore dynamic SDK slot forwarding for AppTopBar passthrough slots -->
+            <slot
+              :name="slotName"
+              v-bind="slotProps ?? {}"
+            />
+          </template>
+        </AppTopBar>
+      </slot>
+    </template>
+
+    <template v-if="hasSidebarSurface" #sidebar>
+      <slot
+        name="sidebar"
+        :active-view="resolvedActiveView"
+        :set-active-view="setActiveView"
+        :values="internalControlValues"
+        :component-bindings="resolvedComponentBindings"
+        :component-bindings-by-id="resolvedComponentBindingsById"
+        :component-props="resolvedComponentProps"
+        :component-props-by-id="resolvedComponentPropsById"
+      >
+        <AppSidebar
+          :title="sidebarTitle"
+          :subtitle="sidebarSubtitle"
+          :badge="sidebarBadge"
+          :variant="sidebarVariant"
+          :panels="panels"
+          :active-view="resolvedActiveView"
+          :floating="false"
+          :dense="dense"
+          :width="sidebarWidth"
+          :side="sidebarPosition"
+          :forms="forms"
+          :content-id="sidebarContentId"
+          :show-when-empty="showSidebarWhenEmpty || sidebarContentId !== undefined"
+          :model="model"
+          :controls="controls"
+          :control-options="controlOptions"
+          :values="internalControlValues"
+          :form-enhancements="formEnhancements"
+          :show-form-actions="showFormActions"
+          :form-loading="formLoading"
+          :form-disabled="formDisabled"
+          :form-readonly="formReadonly"
+          :form-size="formSize"
+          :collapsible="sidebarCollapsible"
+          :collapsed="sidebarCollapsed"
+          :default-collapsed="defaultSidebarCollapsed"
+          :collapsed-width="sidebarCollapsedWidth"
+          :collapse-button-label="sidebarCollapseButtonLabel"
+          :expand-button-label="sidebarExpandButtonLabel"
+          @update:model-value="handleControlValuesUpdate"
+          @update:collapsed="emit('update:sidebarCollapsed', $event)"
+          @update:toggle="handleToggle"
+          @form-submit="handleFormSubmit"
+          @form-cancel="handleFormCancel"
+        >
+          <template
+            v-for="slotName in sidebarSlotNames"
+            :key="slotName"
+            #[slotName]="slotProps"
+          >
+            <!-- @vue-ignore dynamic SDK slot forwarding for AppSidebar section-* passthrough slots -->
+            <slot
+              :name="slotName"
+              v-bind="slotProps ?? {}"
+            />
+          </template>
+        </AppSidebar>
+      </slot>
+    </template>
+
+    <slot
+      :active-view="resolvedActiveView"
+      :set-active-view="setActiveView"
+      :values="internalControlValues"
+      :component-bindings="resolvedComponentBindings"
+      :component-bindings-by-id="resolvedComponentBindingsById"
+      :component-props="resolvedComponentProps"
+      :component-props-by-id="resolvedComponentPropsById"
+    />
+  </AppLayout>
+</template>