@morscherlab/mint-sdk 1.2.0-beta.4 → 1.2.0-beta.5

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -14,6 +14,7 @@ import type {
   UseBioTemplatePresetWorkspaceReturn,
 } from '../composables/useBioTemplatePresetWorkspace'
 import { useBioTemplatePresetWorkspace } from '../composables/useBioTemplatePresetWorkspace'
+import { bioTemplatePresetWorkspaceProps } from '../composables/workspaceRecipes'
 import AlertBox from './AlertBox.vue'
 import AppSidebar from './AppSidebar.vue'
 import BaseButton from './BaseButton.vue'
@@ -96,19 +97,13 @@ const props = withDefaults(defineProps<Props>(), {
   resetLabel: 'Reset defaults',
 })
 
-const externalValues = computed(() => props.modelValue ?? props.values)
-const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() => {
-  if (props.initialValues === undefined && externalValues.value === undefined) return props.workspaceOptions
-
-  return {
-    ...props.workspaceOptions,
-    initialValues: {
-      ...(props.workspaceOptions.initialValues ?? {}),
-      ...(props.initialValues ?? {}),
-      ...(externalValues.value ?? {}),
-    },
-  }
-})
+// Thin recipe over bioTemplatePresetWorkspaceProps(): merges workspaceOptions/initialValues/
+// v-model into the options useBioTemplatePresetWorkspace() consumes (see workspaceRecipes.ts).
+const resolvedPresetProps = computed(() => bioTemplatePresetWorkspaceProps(props))
+const externalValues = computed(() => resolvedPresetProps.value.externalValues)
+const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() =>
+  resolvedPresetProps.value.resolvedWorkspaceOptions
+)
 
 let generatedWorkspaceScope: EffectScope | undefined
 

package/src/components/ComponentBindingRenderer.vue

@@ -16,6 +16,7 @@ import ReagentList from './ReagentList.vue'
 import SampleSelector from './SampleSelector.vue'
 import ScheduleCalendar from './ScheduleCalendar.vue'
 import WellPlate from './WellPlate.vue'
+import { isRecord } from '../utils/records'
 
 export interface ComponentBindingRendererBinding {
   id?: string
@@ -173,9 +174,6 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
   }
 }
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value)
-}
 </script>
 
 <template>

package/src/components/ControlWorkspaceView.vue

@@ -20,7 +20,8 @@ import type {
   ControlWorkspaceOptions,
   UseControlWorkspaceReturn,
 } from '../composables/useControlSchema'
-import { mergeControlWorkspaceOptions, resolveControlModel, useControlWorkspace } from '../composables/useControlSchema'
+import { useControlWorkspace } from '../composables/useControlSchema'
+import { controlWorkspaceProps } from '../composables/workspaceRecipes'
 import AppLayout from './AppLayout.vue'
 import AppSidebar from './AppSidebar.vue'
 import AppTopBar from './AppTopBar.vue'
@@ -161,27 +162,15 @@ const props = withDefaults(defineProps<Props>(), {
   formSize: 'md',
 })
 
-const externalValues = computed(() => props.modelValue ?? props.values)
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-const resolvedControls = computed<ControlSchema>(() => props.controls ?? resolvedModel.value?.controls ?? {})
-const baseControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
-)
-
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() => {
-  if (props.initialValues === undefined && externalValues.value === undefined) return baseControlOptions.value
-
-  return {
-    ...baseControlOptions.value,
-    initialValues: {
-      ...(baseControlOptions.value.initialValues ?? {}),
-      ...(props.initialValues ?? {}),
-      ...(externalValues.value ?? {}),
-    },
-  }
-})
+// Thin recipe over controlWorkspaceProps(): resolves model/controls/controlOptions/v-model
+// into the schema + options pair useControlWorkspace() consumes, shared with
+// DoseDesignWorkspaceView (which forwards its own props here) and
+// BioTemplatePresetWorkspaceView's equivalent options merge.
+const resolvedWorkspaceModel = computed(() => controlWorkspaceProps(props))
+const externalValues = computed(() => resolvedWorkspaceModel.value.externalValues)
+const resolvedModel = computed(() => resolvedWorkspaceModel.value.resolvedModel)
+const resolvedControls = computed(() => resolvedWorkspaceModel.value.resolvedControls)
+const resolvedControlOptions = computed(() => resolvedWorkspaceModel.value.resolvedControlOptions)
 
 let generatedWorkspaceScope: EffectScope | undefined
 

package/src/components/DoseDesignWorkspaceView.vue

@@ -19,6 +19,7 @@ import type {
   UseControlWorkspaceReturn,
 } from '../composables/useControlSchema'
 import { defineDoseDesignControlModel } from '../composables/useControlSchema'
+import { doseDesignWorkspaceProps } from '../composables/workspaceRecipes'
 import ControlWorkspaceView from './ControlWorkspaceView.vue'
 import DoseCalculator from './DoseCalculator.vue'
 import WellPlate from './WellPlate.vue'
@@ -158,6 +159,10 @@ const resolvedModel = computed<ControlModel | ControlModelBinding>(() =>
   props.model ?? defineDoseDesignControlModel(props.doseDesignOptions)
 )
 
+// Thin recipe: forwards the ~25 props this view shares verbatim with ControlWorkspaceView
+// (see workspaceRecipes.ts) instead of spelling each one out in the template.
+const controlWorkspaceRecipe = computed(() => doseDesignWorkspaceProps(props, resolvedModel.value))
+
 function resolvedPlateId(): string {
   return props.plateId ?? props.doseDesignOptions.componentProps?.plateId ?? 'plate'
 }
@@ -200,31 +205,7 @@ function slotProps(slotProps: {
 
 <template>
   <ControlWorkspaceView
-    :model="resolvedModel"
-    :workspace="workspace"
-    :control-options="controlOptions"
-    :initial-values="initialValues"
-    :model-value="modelValue"
-    :values="values"
-    :title="title"
-    :subtitle="subtitle"
-    :top-bar-variant="topBarVariant"
-    :sidebar-width="sidebarWidth"
-    :sidebar-variant="sidebarVariant"
-    :responsive-sidebar="responsiveSidebar"
-    :sidebar-position="sidebarPosition"
-    :sidebar-title="sidebarTitle"
-    :sidebar-subtitle="sidebarSubtitle"
-    :sidebar-badge="sidebarBadge"
-    :floating="floating"
-    :dense="dense"
-    :show-settings="showSettings"
-    :show-form-actions="showFormActions"
-    :form-enhancements="formEnhancements"
-    :form-loading="formLoading"
-    :form-disabled="formDisabled"
-    :form-readonly="formReadonly"
-    :form-size="formSize"
+    v-bind="controlWorkspaceRecipe"
     @update:model-value="emit('update:modelValue', $event)"
     @update:values="emit('update:values', $event)"
     @submit="emit('submit', $event)"

package/src/components/DropdownButton.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Button that opens a dropdown menu for selecting one option from a list. */
-import { computed } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { SelectOption, SelectOptionInput, ButtonVariant, ButtonSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
 
@@ -53,11 +54,33 @@ const emit = defineEmits<{
   select: [option: SelectOption<string | number>]
 }>()
 
-const { isOpen, rootRef, close, toggle: toggleDropdown } = useDropdownState()
+const { isOpen, rootRef, open, close: closeDropdown, toggle: toggleDropdown } = useDropdownState()
 const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
   props.options.map(normalizeOptionInput)
 )
 
+const triggerRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+
+function optionItems(): HTMLElement[] {
+  if (!panelRef.value) return []
+  return Array.from(panelRef.value.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])'))
+}
+
+function close(returnFocus = false) {
+  closeDropdown()
+  if (returnFocus) {
+    void nextTick(() => triggerRef.value?.focus())
+  }
+}
+
+const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
+  items: optionItems,
+  isOpen: () => isOpen.value,
+  open,
+  close,
+})
+
 const selectedLabel = computed(() => {
   if (props.modelValue === undefined) return props.placeholder ?? 'Select...'
   const found = normalizedOptions.value.find(o => o.value === props.modelValue)
@@ -80,6 +103,7 @@ function selectOption(option: SelectOption<string | number>) {
 <template>
   <div ref="rootRef" class="mint-dropdown-button">
     <button
+      ref="triggerRef"
       type="button"
       :disabled="disabled || loading"
       :class="[
@@ -94,6 +118,7 @@ function selectOption(option: SelectOption<string | number>) {
       :aria-expanded="isOpen"
       aria-haspopup="listbox"
       @click="toggle"
+      @keydown="handleTriggerKeydown"
     >
       <svg v-if="loading" class="mint-dropdown-button__spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
         <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
@@ -116,15 +141,18 @@ function selectOption(option: SelectOption<string | number>) {
     <Transition name="mint-dropdown-button-menu">
       <ul
         v-if="isOpen"
+        ref="panelRef"
         class="mint-dropdown-button__menu"
         role="listbox"
         :aria-activedescendant="modelValue !== undefined ? `mint-dropdown-option-${modelValue}` : undefined"
+        @keydown="handlePanelKeydown"
       >
         <li
           v-for="option in normalizedOptions"
           :id="`mint-dropdown-option-${option.value}`"
           :key="String(option.value)"
           role="option"
+          :tabindex="-1"
           :aria-selected="option.value === modelValue"
           :aria-disabled="option.disabled"
           :class="[
@@ -135,6 +163,8 @@ function selectOption(option: SelectOption<string | number>) {
             },
           ]"
           @click="selectOption(option)"
+          @keydown.enter.prevent="selectOption(option)"
+          @keydown.space.prevent="selectOption(option)"
         >
           <span class="mint-dropdown-button__option-label">{{ option.label }}</span>
           <span v-if="option.description" class="mint-dropdown-button__option-description">

package/src/components/PluginWorkspaceView.props.ts

@@ -1,8 +1,13 @@
 import type {
   AccountMenuItem,
+  ExperimentSummary,
+  PageSelectorItem,
   PageSelectorItemInput,
+  PillNavItem,
   PillNavItemInput,
+  PillNavOption,
   PluginSwitcherInfo,
+  PluginSwitcherPlugin,
   SidebarToolSection,
   TopBarSettingsConfig,
   TopBarVariant,
@@ -156,6 +161,39 @@ export interface PluginWorkspaceViewProps {
   sidebarCloseLabel?: string
 }
 
+/**
+ * Event map for PluginWorkspaceView, shared with the {@link usePluginWorkspace} composable
+ * so its internal pieces can emit through the exact same typed contract as the public component.
+ */
+export interface PluginWorkspaceViewEmits {
+  '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>]
+  '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]
+  'section-action': [sectionId: string, actionId: string]
+  'form-submit': [sectionId: string, values: Record<string, unknown>]
+  'form-cancel': [sectionId: string]
+}
+
+/** Typed `emit` function shape produced by `defineEmits<PluginWorkspaceViewEmits>()`. */
+export type PluginWorkspaceViewEmit = <K extends keyof PluginWorkspaceViewEmits>(
+  event: K,
+  ...args: PluginWorkspaceViewEmits[K]
+) => void
+
 export interface PluginWorkspaceSlotProps {
   activeView: string
   setActiveView: (viewId: string) => void

package/src/components/PluginWorkspaceView.vue

@@ -12,26 +12,19 @@
 import { computed, useSlots } from 'vue'
 import type {
   AccountMenuItem,
-  ExperimentSummary,
-  PageSelectorItem,
   PillNavItem,
   PluginSwitcherPlugin,
   PillNavOption,
 } from '../types'
 import { useAppExperiment } from '../composables/useAppExperiment'
-import AppLayout from './AppLayout.vue'
-import AppSidebar from './AppSidebar.vue'
-import AppTopBar from './AppTopBar.vue'
-import { usePluginWorkspaceControls } from './PluginWorkspaceView.controls'
-import { usePluginWorkspaceNavigation } from './PluginWorkspaceView.navigation'
-import {
-  getPluginWorkspaceSidebarSlotNames,
-  getPluginWorkspaceTopBarSlotNames,
-  hasPluginWorkspaceSidebarSurface,
-} from './PluginWorkspaceView.shell'
+import { usePluginWorkspace } from '../composables/usePluginWorkspace'
+import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
+import WorkspaceShellInternal from './internal/WorkspaceShellInternal.vue'
+import WorkspaceSidebarInternal from './internal/WorkspaceSidebarInternal.vue'
 import type {
   PluginWorkspaceForwardedSlotProps,
   PluginWorkspaceSlotProps,
+  PluginWorkspaceViewEmits,
   PluginWorkspaceViewProps,
 } from './PluginWorkspaceView.props'
 
@@ -103,28 +96,7 @@ const props = withDefaults(defineProps<PluginWorkspaceViewProps>(), {
   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>]
-  '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]
-  'section-action': [sectionId: string, actionId: string]
-  'form-submit': [sectionId: string, values: Record<string, unknown>]
-  'form-cancel': [sectionId: string]
-}>()
+const emit = defineEmits<PluginWorkspaceViewEmits>()
 
 defineSlots<{
   default?: (props: PluginWorkspaceSlotProps) => unknown
@@ -158,82 +130,19 @@ if (props.experimentShell) {
   })
 }
 
-const topBarSlotNames = computed<string[]>(() =>
-  getPluginWorkspaceTopBarSlotNames(slots),
-)
-
-const sidebarSlotNames = computed<string[]>(() =>
-  getPluginWorkspaceSidebarSlotNames(slots),
-)
-
 const {
-  generatedPillNav,
-  generatedDefaultView,
-  internalControlValues,
-  resolvedComponentBindings,
-  resolvedComponentBindingsById,
-  resolvedComponentProps,
-  resolvedComponentPropsById,
+  shell,
+  sidebar,
+  controls,
   handleControlValuesUpdate,
-} = usePluginWorkspaceControls({
-  model: () => props.model,
-  controls: () => props.controls,
-  controlOptions: () => props.controlOptions,
-  modelValue: () => props.modelValue,
-  values: () => props.values,
-  componentBindings: () => props.componentBindings,
-  componentProps: () => props.componentProps,
-  componentPropsById: () => props.componentPropsById,
-  emitValues: (values) => {
-    emit('update:modelValue', values)
-    emit('update:values', values)
-  },
-})
-
-const {
-  resolvedPillNav,
-  resolvedActiveView,
-  resolvedCurrentPillId,
-  resolvedCurrentPageSelectorId,
-  setActiveView,
   handlePageSelectorSelect,
   handlePillSelect,
-} = usePluginWorkspaceNavigation({
-  activeView: () => props.activeView,
-  defaultActiveView: () => props.defaultActiveView,
-  currentPillId: () => props.currentPillId,
-  currentPageSelectorId: () => props.currentPageSelectorId,
-  pillNav: () => props.pillNav,
-  pageSelector: () => props.pageSelector,
-  panelIds: () => Object.keys(props.panels),
-  generatedPillNav,
-  generatedDefaultView,
-  emitActiveView: (viewId) => emit('update:activeView', viewId),
-  emitPageSelectorSelect: (page) => emit('page-selector-select', page),
-  emitPillSelect: (item) => emit('pill-select', item),
+} = usePluginWorkspace({
+  props,
+  slots,
+  emit,
 })
 
-const hasSidebarSurface = computed(() => {
-  return hasPluginWorkspaceSidebarSurface({
-    showSidebar: props.showSidebar,
-    panels: props.panels,
-    forms: props.forms,
-    model: props.model,
-    controls: props.controls,
-    showSidebarWhenEmpty: props.showSidebarWhenEmpty,
-    sidebarContentId: props.sidebarContentId,
-    sidebarTitle: props.sidebarTitle,
-    sidebarSubtitle: props.sidebarSubtitle,
-    sidebarBadge: props.sidebarBadge,
-    hasSidebarSlot: Boolean(slots.sidebar),
-    sidebarSlotCount: sidebarSlotNames.value.length,
-  })
-})
-
-function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
-  emit('pill-option-select', option, item)
-}
-
 function handleToggle(sectionId: string, value: boolean) {
   emit('update:toggle', sectionId, value)
 }
@@ -249,126 +158,48 @@ function handleFormCancel(sectionId: string) {
 </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"
+  <WorkspaceShellInternal
+    :shell="shell"
+    @page-selector-select="handlePageSelectorSelect"
+    @pill-select="handlePillSelect"
+    @pill-option-select="(option: PillNavOption, item: PillNavItem) => emit('pill-option-select', option, item)"
+    @plugin-switcher-select="(plugin: PluginSwitcherPlugin) => emit('plugin-switcher-select', plugin)"
+    @plugin-switcher-install="emit('plugin-switcher-install')"
+    @account-menu-select="(item: AccountMenuItem) => emit('account-menu-select', item)"
+    @sign-out="emit('sign-out')"
+    @notifications-click="emit('notifications-click')"
+    @settings-values-change="emit('settings-values-change', $event)"
+    @admin-click="emit('admin-click')"
   >
-    <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"
-          :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)"
-          @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 v-if="slots.topbar" #topbar="scope">
+      <slot name="topbar" v-bind="scope" />
     </template>
 
-    <template v-if="hasSidebarSurface" #sidebar>
+    <template
+      v-for="slotName in shell.topBarSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <!-- @vue-ignore dynamic SDK slot forwarding for AppTopBar passthrough slots -->
       <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"
+        :name="slotName"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+
+    <template v-if="shell.hasSidebarSurface" #sidebar="scope">
+      <slot name="sidebar" v-bind="scope">
+        <WorkspaceSidebarInternal
+          :sidebar="sidebar"
           @update:model-value="handleControlValuesUpdate"
           @update:collapsed="emit('update:sidebarCollapsed', $event)"
           @update:toggle="handleToggle"
-          @section-action="(sectionId, actionId) => emit('section-action', sectionId, actionId)"
+          @section-action="(sectionId: string, actionId: string) => emit('section-action', sectionId, actionId)"
           @form-submit="handleFormSubmit"
           @form-cancel="handleFormCancel"
         >
           <template
-            v-for="slotName in sidebarSlotNames"
+            v-for="slotName in sidebar.slotNames"
             :key="slotName"
             #[slotName]="slotProps"
           >
@@ -378,18 +209,16 @@ function handleFormCancel(sectionId: string) {
               v-bind="slotProps ?? {}"
             />
           </template>
-        </AppSidebar>
+        </WorkspaceSidebarInternal>
       </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 #default>
+      <WorkspaceControlsInternal :controls="controls">
+        <template #default="controlsScope">
+          <slot v-bind="controlsScope" />
+        </template>
+      </WorkspaceControlsInternal>
+    </template>
+  </WorkspaceShellInternal>
 </template>