@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.1

package/src/components/PluginWorkspaceView.controls.ts

@@ -4,10 +4,6 @@ import type { PillNavItem } from '../types'
 import type {
   ControlComponentBinding,
   ControlComponentBindingsById,
-  ControlComponentBindingsConfig,
-  ControlComponentPropsByIdMap,
-  ControlComponentPropsMap,
-  ControlModel,
   ControlModelBinding,
   ControlSchema,
   ControlWorkspaceOptions,
@@ -19,24 +15,15 @@ import {
   controlsToViewItems,
   getControlDefaults,
   getDefaultControlView,
-  mergeControlWorkspaceOptions,
-  resolveControlModel,
 } from '../composables/useControlSchema'
 
 export interface PluginWorkspaceControlsOptions {
-  model: () => ControlModel | ControlModelBinding | undefined
-  controls: () => ControlSchema | undefined
-  controlOptions: () => ControlWorkspaceOptions
-  modelValue: () => Record<string, unknown> | undefined
+  model: () => ControlModelBinding | undefined
   values: () => Record<string, unknown> | undefined
-  componentBindings: () => ControlComponentBindingsConfig | undefined
-  componentProps: () => ControlComponentPropsMap | undefined
-  componentPropsById: () => ControlComponentPropsByIdMap | undefined
   emitValues: (values: Record<string, unknown>) => void
 }
 
 export interface PluginWorkspaceControls {
-  resolvedModel: ComputedRef<ControlModelBinding | undefined>
   resolvedControls: ComputedRef<ControlSchema | undefined>
   resolvedControlOptions: ComputedRef<ControlWorkspaceOptions>
   generatedPillNav: ComputedRef<PillNavItem[]>
@@ -52,19 +39,13 @@ export interface PluginWorkspaceControls {
 export function usePluginWorkspaceControls(
   options: PluginWorkspaceControlsOptions,
 ): PluginWorkspaceControls {
-  const resolvedModel = computed<ControlModelBinding | undefined>(() =>
-    resolveControlModel(options.model()),
-  )
+  const resolvedModel = computed<ControlModelBinding | undefined>(() => options.model())
 
-  const resolvedControls = computed<ControlSchema | undefined>(() =>
-    options.controls() ?? resolvedModel.value?.controls,
-  )
+  const resolvedControls = computed<ControlSchema | undefined>(() => resolvedModel.value?.controls)
 
-  const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
-    mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, options.controlOptions()),
-  )
+  const resolvedControlOptions = computed<ControlWorkspaceOptions>(() => resolvedModel.value?.controlOptions ?? {})
 
-  const externalControlValues = computed(() => options.modelValue() ?? options.values())
+  const externalControlValues = computed(() => options.values())
   const internalControlValues = reactive<Record<string, unknown>>({})
   let syncingControlValues = false
 
@@ -111,24 +92,24 @@ export function usePluginWorkspaceControls(
   const resolvedComponentBindings = computed(() =>
     controlValuesToComponentBindings(
       internalControlValues,
-      options.componentBindings() ?? resolvedModel.value?.componentBindings,
+      resolvedModel.value?.componentBindings,
     ),
   )
 
   const resolvedComponentBindingsById = computed(() =>
     controlValuesToComponentBindingsById(
       internalControlValues,
-      options.componentBindings() ?? resolvedModel.value?.componentBindings,
+      resolvedModel.value?.componentBindings,
     ),
   )
 
   const resolvedComponentProps = computed(() => {
-    const mapping = options.componentProps() ?? resolvedModel.value?.componentProps
+    const mapping = resolvedModel.value?.componentProps
     return mapping === undefined ? {} : controlValuesToComponentProps(internalControlValues, mapping)
   })
 
   const resolvedComponentPropsById = computed(() => {
-    const mappings = options.componentPropsById() ?? resolvedModel.value?.componentPropsById
+    const mappings = resolvedModel.value?.componentPropsById
     if (mappings === undefined) return {}
 
     return Object.fromEntries(
@@ -167,7 +148,6 @@ export function usePluginWorkspaceControls(
   )
 
   return {
-    resolvedModel,
     resolvedControls,
     resolvedControlOptions,
     generatedPillNav,

package/src/components/PluginWorkspaceView.navigation.ts

@@ -1,7 +1,5 @@
 import { computed, ref, type ComputedRef, type Ref, type WritableComputedRef } from 'vue'
 import type {
-  PageSelectorItem,
-  PageSelectorItemInput,
   PillNavItem,
   PillNavItemInput,
 } from '../types'
@@ -10,16 +8,12 @@ type ReadableRef<T> = Readonly<Ref<T>>
 
 export interface PluginWorkspaceNavigationOptions {
   activeView: () => string | undefined
-  defaultActiveView: () => string | undefined
   currentPillId: () => string | undefined
-  currentPageSelectorId: () => string | undefined
   pillNav: () => PillNavItemInput[] | undefined
-  pageSelector: () => PageSelectorItemInput[] | undefined
   panelIds: () => string[]
   generatedPillNav: ReadableRef<readonly PillNavItem[]>
   generatedDefaultView: ReadableRef<string>
   emitActiveView: (viewId: string) => void
-  emitPageSelectorSelect: (page: PageSelectorItem) => void
   emitPillSelect: (item: PillNavItem) => void
 }
 
@@ -28,16 +22,14 @@ export interface PluginWorkspaceNavigation {
   firstConfiguredViewId: ComputedRef<string>
   resolvedActiveView: WritableComputedRef<string>
   resolvedCurrentPillId: ComputedRef<string>
-  resolvedCurrentPageSelectorId: ComputedRef<string>
   setActiveView: (viewId: string) => void
-  handlePageSelectorSelect: (page: PageSelectorItem) => void
   handlePillSelect: (item: PillNavItem) => void
 }
 
 export function usePluginWorkspaceNavigation(
   options: PluginWorkspaceNavigationOptions,
 ): PluginWorkspaceNavigation {
-  const internalActiveView = ref(options.defaultActiveView())
+  const internalActiveView = ref<string>()
 
   const resolvedPillNav = computed<PillNavItemInput[] | undefined>(() => {
     if (options.pillNav() !== undefined) return options.pillNav()
@@ -47,10 +39,8 @@ export function usePluginWorkspaceNavigation(
   })
 
   const firstConfiguredViewId = computed(() =>
-    options.defaultActiveView()
-      ?? firstItemId(options.pillNav())
+    firstItemId(options.pillNav())
       ?? options.generatedDefaultView.value
-      ?? firstItemId(options.pageSelector())
       ?? options.panelIds()[0]
       ?? '',
   )
@@ -59,7 +49,6 @@ export function usePluginWorkspaceNavigation(
     get: () =>
       options.activeView()
         ?? options.currentPillId()
-        ?? options.currentPageSelectorId()
         ?? internalActiveView.value
         ?? firstConfiguredViewId.value,
     set: (value: string) => {
@@ -69,19 +58,11 @@ export function usePluginWorkspaceNavigation(
   })
 
   const resolvedCurrentPillId = computed(() => options.currentPillId() ?? resolvedActiveView.value)
-  const resolvedCurrentPageSelectorId = computed(() =>
-    options.currentPageSelectorId() ?? resolvedActiveView.value,
-  )
 
   function setActiveView(viewId: string) {
     resolvedActiveView.value = viewId
   }
 
-  function handlePageSelectorSelect(page: PageSelectorItem) {
-    setActiveView(page.id)
-    options.emitPageSelectorSelect(page)
-  }
-
   function handlePillSelect(item: PillNavItem) {
     setActiveView(item.id)
     options.emitPillSelect(item)
@@ -92,9 +73,7 @@ export function usePluginWorkspaceNavigation(
     firstConfiguredViewId,
     resolvedActiveView,
     resolvedCurrentPillId,
-    resolvedCurrentPageSelectorId,
     setActiveView,
-    handlePageSelectorSelect,
     handlePillSelect,
   }
 }

package/src/components/PluginWorkspaceView.props.ts

@@ -1,160 +1,31 @@
 import type {
-  AccountMenuItem,
   ExperimentSummary,
-  PageSelectorItem,
-  PageSelectorItemInput,
   PillNavItem,
-  PillNavItemInput,
   PillNavOption,
-  SidebarToolSection,
-  TopBarSettingsConfig,
-  TopBarVariant,
+  PluginWorkspaceViewSpec,
 } from '../types'
-import type { FormEnhancements, FormSchema } from '../types/form-builder'
 import type {
   ControlComponentBinding,
   ControlComponentBindingsById,
-  ControlComponentBindingsConfig,
-  ControlComponentPropsByIdMap,
-  ControlComponentPropsMap,
-  ControlModel,
-  ControlModelBinding,
-  ControlSchema,
-  ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
 
-export type PluginWorkspaceSidebarVariant = 'default' | 'analysis'
-
 export interface PluginWorkspaceViewProps {
-  /** 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. Pass [] to suppress integrated platform fallback. */
-  pageSelector?: PageSelectorItemInput[]
-  /** Active page selector id. Defaults to activeView. */
-  currentPageSelectorId?: string
-  /** 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 admin shortcut. */
-  showAdmin?: boolean
-  /** Route used by the admin shortcut. */
-  adminPath?: string
-  /** Account display name. */
-  userName?: string
-  /** Explicit account avatar initial. */
-  userInitial?: string
-  /** Account email shown in the avatar menu. */
-  userEmail?: string
-  /** Enable the built-in AppTopBar experiment popover and selector flow. The current experiment comes from the shared experiment store, not from a prop. Keep this comment on one line — the docs extractor drops multi-line JSDoc. */
-  experimentShell?: boolean
-  /** 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
-  /** @deprecated No-op, removed in MINT 1.4. AppSidebar has one look now; the former `analysis` preset is the default. */
-  sidebarVariant?: PluginWorkspaceSidebarVariant
-  /** Sidebar CSS width. Defaults to AppSidebar's 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 true. */
-  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. */
+  /** Structure built with definePluginWorkspaceView(). Optional: every option has a default. */
+  spec?: PluginWorkspaceViewSpec
+  /** Active pill id. Bind with `v-model:pill`; defaults to the active view. */
+  pill?: string
+  /** Active workspace view. Bind with `v-model:view`; unbound, the workspace keeps its own. */
+  view?: string
+  /** Values of the sidebar control model. Bind with `v-model:values`. */
   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. */
+  /** Sidebar collapsed state. Bind with `v-model:sidebar-collapsed`. */
+  sidebarCollapsed?: boolean
+  /** Loading / saving state of the sidebar forms. */
   formLoading?: boolean
-  /** Disabled state for auto-rendered sidebar forms. */
+  /** Disabled state of the sidebar forms. */
   formDisabled?: boolean
-  /** Readonly state for auto-rendered sidebar forms. */
+  /** Readonly state of the 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
 }
 
 /**
@@ -162,20 +33,15 @@ export interface PluginWorkspaceViewProps {
  * 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]
+  'update:pill': [pillId: string]
+  'update:view': [view: string]
+  'update:values': [values: Record<string, unknown>]
+  'update:sidebarCollapsed': [value: boolean]
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
-  '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>]

package/src/components/PluginWorkspaceView.shell.ts

@@ -1,13 +1,11 @@
+import type { PluginWorkspaceSidebarSpec } from '../types'
+
 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',
 ])
 
@@ -21,16 +19,7 @@ const sidebarForwardedSlots = new Set([
 type SlotKeyMap = Readonly<Record<string, unknown>>
 
 export interface PluginWorkspaceSidebarSurfaceOptions {
-  showSidebar: boolean
-  panels: Record<string, unknown>
-  forms: Record<string, unknown>
-  model: unknown
-  controls: unknown
-  showSidebarWhenEmpty: boolean
-  sidebarContentId?: string
-  sidebarTitle?: string
-  sidebarSubtitle?: string
-  sidebarBadge?: string | number
+  sidebar: false | PluginWorkspaceSidebarSpec
   hasSidebarSlot: boolean
   sidebarSlotCount: number
 }
@@ -50,17 +39,17 @@ export function getPluginWorkspaceSidebarSlotNames(slots: SlotKeyMap): string[]
 export function hasPluginWorkspaceSidebarSurface(
   options: PluginWorkspaceSidebarSurfaceOptions,
 ): boolean {
-  if (!options.showSidebar) return false
+  const { sidebar } = options
+  if (sidebar === false) return false
   return (
-    Object.keys(options.panels).length > 0
-    || Object.keys(options.forms).length > 0
-    || options.model !== undefined
-    || options.controls !== undefined
-    || options.showSidebarWhenEmpty
-    || options.sidebarContentId !== undefined
-    || options.sidebarTitle !== undefined
-    || options.sidebarSubtitle !== undefined
-    || options.sidebarBadge !== undefined
+    Object.keys(sidebar.panels ?? {}).length > 0
+    || Object.keys(sidebar.forms ?? {}).length > 0
+    || sidebar.controls !== undefined
+    || Boolean(sidebar.whenEmpty)
+    || sidebar.contentId !== undefined
+    || sidebar.title !== undefined
+    || sidebar.subtitle !== undefined
+    || sidebar.badge !== undefined
     || options.hasSidebarSlot
     || options.sidebarSlotCount > 0
   )

package/src/components/PluginWorkspaceView.story.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { ExperimentSummary, PillNavItem, SidebarToolSection } from '../types'
+import type { ExperimentSummary, PillNavItem, SidebarToolSection, WellPlateSpec } from '../types'
 import { defineDoseDesignControlModel } from '../composables/useControlSchema'
+import { definePluginWorkspaceView } from '../composables/componentSpecs'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
 import AlertBox from './AlertBox.vue'
@@ -13,8 +14,6 @@ import FileUploader from './FileUploader.vue'
 import FormField from './FormField.vue'
 import WellPlate from './WellPlate.vue'
 
-type SidebarVariant = 'analysis' | 'default'
-
 const pillNav: PillNavItem[] = [
   { id: 'data', label: 'Data' },
   { id: 'analysis', label: 'Analysis' },
@@ -70,6 +69,27 @@ const doseDesignModel = defineDoseDesignControlModel({
   },
 })
 const doseDesignValues = ref({})
+
+const routeWorkspace = definePluginWorkspaceView({
+  title: 'Route Workspace',
+  subtitle: 'Sidebar target is owned by the active route',
+  topBar: { pills: pillNav },
+  sidebar: {
+    title: 'Run Tools',
+    subtitle: 'Teleported controls',
+    contentId: 'workspace-route-sidebar',
+    collapsible: true,
+  },
+})
+
+const doseWorkspace = definePluginWorkspaceView({
+  title: 'Dose Design',
+  subtitle: 'Experiment-aware workspace generated from one model',
+  experiment: true,
+  topBar: { settings: { title: 'Workspace settings', showAppearance: true } },
+  sidebar: { title: 'Design Controls', subtitle: 'Plate and dose setup', controls: doseDesignModel },
+  save: { handler: saveDoseDesign },
+})
 // Read-only echo of the shell's selection events. The workspace itself reads
 // the current experiment from the shared store, not from a prop.
 const lastExperimentEvent = ref<string>('')
@@ -78,7 +98,6 @@ const state = ref({
   title: 'Plugin Workspace',
   sidebarTitle: 'Analysis Tools',
   sidebarSubtitle: 'Current run',
-  sidebarVariant: 'analysis' as SidebarVariant,
   responsiveSidebar: true,
   floating: true,
   dense: true,
@@ -102,23 +121,23 @@ async function saveDoseDesign() {
     <Variant title="Plugin Shell">
       <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
         <PluginWorkspaceView
-          :title="state.title"
-          subtitle="Topbar, sidebar, settings, and content in one component"
-          :pill-nav="pillNav"
-          :panels="panels"
-          :sidebar-title="state.sidebarTitle"
-          :sidebar-subtitle="state.sidebarSubtitle"
-          :sidebar-variant="state.sidebarVariant"
-          :responsive-sidebar="state.responsiveSidebar"
-          :floating="state.floating"
-          :dense="state.dense"
-          show-settings
-          show-theme-toggle
-          :settings-config="{ title: 'Workspace settings', showAppearance: true }"
+          :spec="definePluginWorkspaceView({
+            title: state.title,
+            subtitle: 'Topbar, sidebar, settings, and content in one component',
+            floating: state.floating,
+            topBar: { pills: pillNav, settings: { title: 'Workspace settings', showAppearance: true } },
+            sidebar: {
+              title: state.sidebarTitle,
+              subtitle: state.sidebarSubtitle,
+              responsive: state.responsiveSidebar,
+              dense: state.dense,
+              panels,
+            },
+          })"
         >
           <template #section-import>
             <FileUploader accept=".csv,.txt" size="sm" />
-            <AlertBox type="info">
+            <AlertBox tone="info">
               Import controls stay colocated with the shell.
             </AlertBox>
           </template>
@@ -147,12 +166,14 @@ async function saveDoseDesign() {
                   { metric: 'Compounds', value: 12 },
                   { metric: 'QC flags', value: 1 },
                 ]"
-                :columns="[
-                  { key: 'metric', label: 'Metric' },
-                  { key: 'value', label: 'Value' },
-                ]"
-                size="sm"
-                max-height="320px"
+                :spec="{
+                  columns: [
+                    { key: 'metric', label: 'Metric' },
+                    { key: 'value', label: 'Value' },
+                  ],
+                  size: 'sm',
+                  maxHeight: '320px',
+                }"
               />
             </div>
           </template>
@@ -163,14 +184,6 @@ async function saveDoseDesign() {
         <HstText v-model="state.title" title="Title" />
         <HstText v-model="state.sidebarTitle" title="Sidebar title" />
         <HstText v-model="state.sidebarSubtitle" title="Sidebar subtitle" />
-        <HstSelect
-          v-model="state.sidebarVariant"
-          title="Sidebar variant"
-          :options="[
-            { label: 'Analysis', value: 'analysis' },
-            { label: 'Default', value: 'default' },
-          ]"
-        />
         <HstCheckbox v-model="state.responsiveSidebar" title="Responsive sidebar" />
         <HstCheckbox v-model="state.floating" title="Floating" />
         <HstCheckbox v-model="state.dense" title="Dense" />
@@ -180,15 +193,8 @@ async function saveDoseDesign() {
     <Variant title="Route-owned Sidebar">
       <div style="min-height: 560px; background: var(--bg-secondary, #f8fafc);">
         <PluginWorkspaceView
-          title="Route Workspace"
-          subtitle="Sidebar target is owned by the active route"
-          :pill-nav="pillNav"
-          current-pill-id="analysis"
-          sidebar-title="Run Tools"
-          sidebar-subtitle="Teleported controls"
-          sidebar-content-id="workspace-route-sidebar"
-          :sidebar-collapsible="true"
-          show-settings
+          :spec="routeWorkspace"
+          pill="analysis"
         >
           <template #footer>
             <BaseButton variant="primary" size="sm" full-width>
@@ -206,7 +212,7 @@ async function saveDoseDesign() {
                     size="sm"
                   />
                 </FormField>
-                <AlertBox type="success">
+                <AlertBox tone="success">
                   Route content can own this surface.
                 </AlertBox>
               </div>
@@ -221,11 +227,13 @@ async function saveDoseDesign() {
                   { metric: 'Targets', value: 18 },
                   { metric: 'Batches', value: 4 },
                 ]"
-                :columns="[
-                  { key: 'metric', label: 'Metric' },
-                  { key: 'value', label: 'Value' },
-                ]"
-                size="sm"
+                :spec="{
+                  columns: [
+                    { key: 'metric', label: 'Metric' },
+                    { key: 'value', label: 'Value' },
+                  ],
+                  size: 'sm',
+                }"
               />
             </div>
           </template>
@@ -237,17 +245,8 @@ async function saveDoseDesign() {
       <ExperimentProvider>
         <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
           <PluginWorkspaceView
-            v-model="doseDesignValues"
-            :model="doseDesignModel"
-            title="Dose Design"
-            subtitle="Experiment-aware workspace generated from one model"
-            sidebar-title="Design Controls"
-            sidebar-subtitle="Plate and dose setup"
-            experiment-shell
-            :experiment-save="saveDoseDesign"
-            show-settings
-            show-theme-toggle
-            :settings-config="{ title: 'Workspace settings', showAppearance: true }"
+            v-model:values="doseDesignValues"
+            :spec="doseWorkspace"
             @experiment-select="handleExperimentSelect"
             @experiment-detach="handleExperimentDetach"
           >
@@ -256,11 +255,14 @@ async function saveDoseDesign() {
                 <section class="plugin-workspace-story__dose-panel plugin-workspace-story__dose-panel--plate">
                   <WellPlate
                     v-bind="componentBindingsById.plate.props"
-                    size="fill"
-                    selection-mode="multiple"
+                    :spec="{
+                      ...componentBindingsById.plate.props.spec as WellPlateSpec,
+                      size: 'fill',
+                      selectionMode: 'multiple',
+                      showLegend: true,
+                      heatmap: { enabled: true, min: 0, max: 100, colorScale: 'viridis' },
+                    }"
                     readonly
-                    show-legend
-                    :heatmap="{ enabled: true, min: 0, max: 100, colorScale: 'viridis' }"
                   />
                 </section>