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

package/src/components/AppSidebar.vue

@@ -2,144 +2,78 @@
 /**
  * AppSidebar - Context-sensitive toolkit panel
  *
- * Shows tool sections relevant to the active view. Sections are defined via
- * the `panels` config and rendered as flat groups (header row + hairline,
- * no nested card). Controls can be provided through named slots or
- * auto-rendered from FormBuilder schemas.
+ * Shows tool sections relevant to the active view. Sections come from the
+ * spec: a `controls` model built with `defineControlModel()` generates them,
+ * and hand-written `panels` are merged over the generated ones. Each section
+ * renders as a flat group (header row + hairline, no nested card). Controls
+ * can be provided through named slots or auto-rendered from the section forms.
  *
  * When activeView is omitted, the first non-empty panel view is selected.
  * When no view has matching panels, the sidebar hides entirely.
  *
  * @example Recommended
  * ```vue
- * <AppSidebar v-model="values" :model="sidebarModel" />
+ * <AppSidebar v-model:values="values" :spec="{ title: 'Parameters', controls: sidebarModel }" />
  * ```
  */
 import { computed, ref, useSlots, type Slots } from 'vue'
-import type { PillNavItem, SidebarToolSection, SidebarToolSectionAction } from '../types'
-import type { FormEnhancements, FormSchema } from '../types/form-builder'
+import type { PluginWorkspaceSidebarSpec, SidebarToolSection, SidebarToolSectionAction } from '../types'
+import type { FormSchema } from '../types/form-builder'
 import {
   controlsToSectionFormSchemas,
   controlsToSidebarPanels,
   getControlDefaults,
-  mergeControlWorkspaceOptions,
-  resolveControlModel,
-  type ControlModel,
-  type ControlModelBinding,
-  type ControlSchema,
-  type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
-import FormBuilder from './FormBuilder.vue'
+import { applySpecDefaults } from '../composables/componentSpecs'
+import FormSchemaInternal from './internal/FormSchemaInternal.vue'
 
 interface Props {
-  /** Optional chrome title rendered above generated sections. */
-  title?: string
-  /** Optional secondary chrome copy rendered below title. */
-  subtitle?: string
-  /** Optional compact badge/count rendered in the chrome header. */
-  badge?: string | number
-  /** Map of view IDs to their tool sections */
-  panels?: Record<string, SidebarToolSection[]>
+  /** Structure: header, sections, forms, width, side, collapse. Optional: every option has a default. */
+  spec?: PluginWorkspaceSidebarSpec
   /** Which view's panels to display. Defaults to the first non-empty panel view. */
   activeView?: string
-  /** Floating shell with absolute positioning. Prefer letting `AppLayout` own this; it stays for standalone use. */
-  floating?: boolean
-  /** Section density. `compact` (default) is the 36px header row; `comfortable` restores the roomier spacing. */
-  density?: 'compact' | 'comfortable'
-  /** @deprecated Compact is now the default; removed in MINT 1.4. Pass `density="comfortable"` for the roomier layout. */
-  dense?: boolean
-  /** Width when visible. */
-  width?: string
-  /** Position sidebar on left or right side */
-  side?: 'left' | 'right'
-  /** Toggle state map: sectionId → boolean */
-  toggleState?: Record<string, boolean>
-  /** Optional FormBuilder schemas keyed by section ID. Used when no section slot is provided. */
-  forms?: Record<string, FormSchema>
-  /** Generated view IDs from useControlSchema(). Consumed for clean v-bind ergonomics. */
-  viewIds?: string[]
-  /** Generated AppTopBar pillNav-compatible view items from useControlSchema(). Consumed for clean v-bind ergonomics. */
-  viewItems?: PillNavItem[]
-  /** Default view ID used when activeView is omitted. */
-  defaultView?: string
-  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step sidebar/form generation. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact control schema. When provided, AppSidebar generates panels, section forms, and default values. */
-  controls?: ControlSchema
-  /** Options passed to compact control schema generation, including shared initialValues. */
-  controlOptions?: ControlWorkspaceOptions
-  /** DOM id for the scrollable content area. Use with Teleport when route/tab children own sidebar controls. */
-  contentId?: string
-  /** Render the sidebar shell even when no panel matches the active view. Useful for default-slot or Teleport-driven sidebars. */
-  showWhenEmpty?: boolean
-  /** Shared values for auto-rendered section forms. Supports default v-model. */
-  modelValue?: Record<string, unknown>
-  /** Shared values for auto-rendered section forms */
+  /** Values of the section forms. Bind with `v-model:values`. */
   values?: Record<string, unknown>
-  /** Runtime FormBuilder enhancements for auto-rendered section forms */
-  formEnhancements?: FormEnhancements<Record<string, unknown>>
-  /** Show submit/cancel actions inside auto-rendered section forms */
-  showFormActions?: boolean
-  /** Loading/saving state for auto-rendered section forms */
+  /** Collapsed state. Bind with `v-model:collapsed`; unbound, the sidebar keeps its own. */
+  collapsed?: boolean
+  /** On / off state of the section toggles, keyed by section id. */
+  toggleState?: Record<string, boolean>
+  /** Loading / saving state of the section forms. */
   formLoading?: boolean
-  /** Disabled state for auto-rendered section forms */
+  /** Disabled state of the section forms. */
   formDisabled?: boolean
-  /** Readonly state for auto-rendered section forms */
+  /** Readonly state of the section forms. */
   formReadonly?: boolean
-  /** Size passed to auto-rendered section forms */
-  formSize?: 'sm' | 'md' | 'lg'
-  /** Show a built-in collapse/expand button in the sidebar chrome. */
-  collapsible?: boolean
-  /** Controlled collapsed state. */
-  collapsed?: boolean
-  /** Initial collapsed state when collapsed is uncontrolled. */
-  defaultCollapsed?: boolean
-  /** Width when collapsed. */
-  collapsedWidth?: string
-  /** Accessible label for the collapse action. */
-  collapseButtonLabel?: string
-  /** Accessible label for the expand action. */
-  expandButtonLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
-  subtitle: undefined,
-  badge: undefined,
-  panels: () => ({}),
+  spec: () => ({}),
   activeView: '',
-  floating: true,
-  density: undefined,
-  dense: undefined,
-  width: '280px',
-  side: 'left',
-  toggleState: () => ({}),
-  forms: () => ({}),
-  viewIds: () => [],
-  viewItems: () => [],
-  defaultView: '',
-  model: undefined,
-  controlOptions: () => ({}),
-  contentId: undefined,
-  showWhenEmpty: false,
-  modelValue: undefined,
   values: () => ({}),
-  showFormActions: false,
+  collapsed: undefined,
+  toggleState: () => ({}),
   formLoading: false,
   formDisabled: false,
   formReadonly: false,
+})
+
+const config = computed(() => applySpecDefaults({
+  panels: {},
+  forms: {},
+  floating: true,
+  dense: true,
+  width: '280px',
+  position: 'left',
+  whenEmpty: false,
   formSize: 'sm',
   collapsible: false,
-  collapsed: undefined,
-  defaultCollapsed: false,
   collapsedWidth: '3rem',
   collapseButtonLabel: 'Collapse sidebar',
   expandButtonLabel: 'Expand sidebar',
-})
+}, props.spec))
 
 const emit = defineEmits<{
   'update:toggle': [sectionId: string, value: boolean]
-  'update:modelValue': [values: Record<string, unknown>]
   'update:values': [values: Record<string, unknown>]
   'update:collapsed': [value: boolean]
   'section-action': [sectionId: string, actionId: string]
@@ -148,7 +82,7 @@ const emit = defineEmits<{
 }>()
 
 const slots: Slots = useSlots()
-const internalCollapsed = ref(props.defaultCollapsed)
+const internalCollapsed = ref(false)
 const collapsedModel = computed({
   get: () => props.collapsed ?? internalCollapsed.value,
   set: (value: boolean) => {
@@ -157,10 +91,6 @@ const collapsedModel = computed({
   },
 })
 
-const resolvedDensity = computed(() =>
-  props.density ?? (props.dense === false ? 'comfortable' : 'compact'),
-)
-
 // Per-section open state; falls back to `defaultOpen` until the user toggles.
 const openState = ref<Record<string, boolean>>({})
 
@@ -172,53 +102,45 @@ function toggleSection(section: SidebarToolSection) {
   openState.value[section.id] = !isSectionOpen(section)
 }
 
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-
-const resolvedControls = computed<ControlSchema | undefined>(() =>
-  props.controls ?? resolvedModel.value?.controls,
-)
-
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
-)
+// Own computed: a new spec object with the same control model keeps the generated schemas,
+// so the section forms keep their errors, touched and dirty state.
+const controlModel = computed(() => config.value.controls)
 
 const generatedPanels = computed<Record<string, SidebarToolSection[]>>(() => {
-  if (!resolvedControls.value) return {}
-  return controlsToSidebarPanels(resolvedControls.value, resolvedControlOptions.value)
+  const model = controlModel.value
+  return model ? controlsToSidebarPanels(model.controls, model.controlOptions) : {}
 })
 
 const generatedForms = computed<Record<string, FormSchema>>(() => {
-  if (!resolvedControls.value) return {}
-  return controlsToSectionFormSchemas(resolvedControls.value, resolvedControlOptions.value)
+  const model = controlModel.value
+  return model ? controlsToSectionFormSchemas(model.controls, model.controlOptions) : {}
 })
 
 const generatedDefaults = computed<Record<string, unknown>>(() => {
-  if (!resolvedControls.value) return {}
+  const model = controlModel.value
+  if (!model) return {}
   return {
-    ...getControlDefaults(resolvedControls.value),
-    ...(resolvedControlOptions.value.initialValues ?? {}),
+    ...getControlDefaults(model.controls),
+    ...(model.controlOptions.initialValues ?? {}),
   }
 })
 
 const resolvedPanels = computed<Record<string, SidebarToolSection[]>>(() =>
-  mergeSidebarPanels(generatedPanels.value, props.panels),
+  mergeSidebarPanels(generatedPanels.value, config.value.panels),
 )
 
 const resolvedForms = computed<Record<string, FormSchema>>(() => ({
   ...generatedForms.value,
-  ...props.forms,
+  ...config.value.forms,
 }))
 
 const resolvedValues = computed<Record<string, unknown>>(() => ({
   ...generatedDefaults.value,
-  ...(props.modelValue ?? props.values),
+  ...props.values,
 }))
 
 const resolvedActiveView = computed(() => {
   if (props.activeView) return props.activeView
-  if (props.defaultView) return props.defaultView
   return firstVisibleViewId(resolvedPanels.value)
 })
 
@@ -228,27 +150,25 @@ const activeSections = computed<SidebarToolSection[]>(() => {
 })
 
 const isVisible = computed<boolean>(() =>
-  activeSections.value.length > 0 || props.showWhenEmpty || Boolean(slots.default),
+  activeSections.value.length > 0 || config.value.whenEmpty || Boolean(slots.default),
 )
 
 const sidebarClasses = computed<string[]>(() => [
   'mint-sidebar',
-  `mint-sidebar--${props.side}`,
-  props.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
-  resolvedDensity.value === 'comfortable' ? 'mint-sidebar--comfortable' : '',
-  props.collapsible ? 'mint-sidebar--collapsible' : '',
+  `mint-sidebar--${config.value.position}`,
+  config.value.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
+  config.value.dense ? '' : 'mint-sidebar--comfortable',
+  config.value.collapsible ? 'mint-sidebar--collapsible' : '',
   collapsedModel.value ? 'mint-sidebar--collapsed' : '',
   !isVisible.value ? 'mint-sidebar--hidden' : '',
 ])
 
 const sidebarStyle = computed<Record<string, string>>(() => ({
-  width: collapsedModel.value ? props.collapsedWidth : props.width,
+  width: collapsedModel.value ? config.value.collapsedWidth : config.value.width,
 }))
 
 function handleFormUpdate(values: Record<string, unknown>) {
-  const nextValues = { ...resolvedValues.value, ...values }
-  emit('update:modelValue', nextValues)
-  emit('update:values', nextValues)
+  emit('update:values', { ...resolvedValues.value, ...values })
 }
 
 function handleFormSubmit(sectionId: string, values: Record<string, unknown>) {
@@ -339,7 +259,7 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
   >
     <!-- Header slot / built-in chrome -->
     <div
-      v-if="$slots.header || title || subtitle || badge !== undefined || collapsible"
+      v-if="$slots.header || config.title || config.subtitle || config.badge !== undefined || config.collapsible"
       class="mint-sidebar__header"
     >
       <slot
@@ -349,16 +269,16 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
       >
         <div v-if="!collapsedModel" class="mint-sidebar__heading">
           <div class="mint-sidebar__heading-copy">
-            <h2 v-if="title" class="mint-sidebar__title">{{ title }}</h2>
-            <p v-if="subtitle" class="mint-sidebar__subtitle">{{ subtitle }}</p>
+            <h2 v-if="config.title" class="mint-sidebar__title">{{ config.title }}</h2>
+            <p v-if="config.subtitle" class="mint-sidebar__subtitle">{{ config.subtitle }}</p>
           </div>
-          <span v-if="badge !== undefined" class="mint-sidebar__badge">{{ badge }}</span>
+          <span v-if="config.badge !== undefined" class="mint-sidebar__badge">{{ config.badge }}</span>
         </div>
         <button
-          v-if="collapsible"
+          v-if="config.collapsible"
           type="button"
           class="mint-sidebar__collapse-button"
-          :aria-label="collapsedModel ? expandButtonLabel : collapseButtonLabel"
+          :aria-label="collapsedModel ? config.expandButtonLabel : config.collapseButtonLabel"
           :aria-expanded="!collapsedModel"
           @click="toggleCollapsed"
         >
@@ -382,7 +302,7 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
     <!-- Tool sections -->
     <div
       v-if="!collapsedModel"
-      :id="contentId"
+      :id="config.contentId"
       class="mint-sidebar__sections"
     >
       <div
@@ -502,16 +422,15 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
         <Transition name="collapse">
           <div v-show="isSectionOpen(section)" class="mint-sidebar__group-body">
             <slot :name="`section-${section.id}`">
-              <FormBuilder
+              <FormSchemaInternal
                 v-if="resolvedForms[section.id]"
                 :model-value="resolvedValues"
                 :schema="resolvedForms[section.id]"
-                :enhancements="formEnhancements"
+                :enhancements="config.controls?.controlOptions.enhancements"
                 :loading="formLoading"
                 :disabled="formDisabled"
                 :readonly="formReadonly"
-                :size="formSize"
-                :show-actions="showFormActions"
+                :size="config.formSize"
                 @update:model-value="handleFormUpdate"
                 @submit="handleFormSubmit(section.id, $event)"
                 @cancel="handleFormCancel(section.id)"

package/src/components/AppToastContainer.story.vue

@@ -29,7 +29,7 @@ function showAll() {
 
 function triggerLongToast(type: 'success' | 'error') {
   const duration = type === 'success' ? 4000 : 6000
-  toast.show(`Progress bar TTL demo — ${duration}ms`, type, duration)
+  toast[type](`Progress bar TTL demo — ${duration}ms`, { duration })
 }
 </script>
 

package/src/components/AppTopBar.story.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import AppTopBar from './AppTopBar.vue'
+import Avatar from './Avatar.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import type {
   TopBarVariant,
   PillNavItem,
   PageSelectorItem,
-  AccountMenuItem,
   PluginInfo,
 } from '../types'
 
@@ -40,8 +40,6 @@ const samplePageSelector: PageSelectorItem[] = [
   { id: 'admin', label: 'Admin' },
 ]
 
-// Theme is now surfaced as a top-level icon button (show-theme-toggle),
-// not as an account-menu item. Menu holds identity-level actions only.
 const samplePluginPages: PageSelectorItem[] = [
   { id: 'peaks', label: 'Peak integration' },
   { id: 'calibration', label: 'Calibration' },
@@ -51,18 +49,16 @@ const samplePluginPages: PageSelectorItem[] = [
 const samplePlugin: PluginInfo = {
   id: 'lcms-analysis',
   name: 'LC-MS Analysis',
+  display_name: 'LC-MS Analysis',
   version: '2.4.0',
+  plugin_type: 'analysis',
   icon: 'activity',
   color: 'cyan',
   route_prefix: '/lcms',
   api_prefix: '/api/lcms',
+  settings_api: 'platform',
 }
 
-const sampleAccountMenu: AccountMenuItem[] = [
-  { id: 'profile', label: 'Profile' },
-  { id: 'settings', label: 'Settings' },
-]
-
 </script>
 
 <template>
@@ -71,23 +67,19 @@ const sampleAccountMenu: AccountMenuItem[] = [
 
     <Variant title="Refresh · Experiments-view layout">
       <!-- Exact layout used by the platform's Experiments and Projects pages:
-           title+subtitle on the left, pill-nav centered, theme-toggle +
-           avatar-with-name on the right. -->
+           title+subtitle on the left, pill-nav centered, theme toggle on
+           the right. The platform renders its account menu in #account. -->
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
-          variant="card"
+          :spec="{
+            pills: samplePillNav.slice(1, 3),
+            themeToggle: true,
+            homePath: '',
+            standaloneLabel: false,
+          }"
           title="Experiments"
           subtitle="Manage and track your experiments"
-          :pill-nav="samplePillNav.slice(1, 3)"
-          current-pill-id="experiments"
-          show-theme-toggle
-          show-admin
-          :show-standalone-label="false"
-          :account-menu="sampleAccountMenu"
-          user-name="Estrella"
-          user-initial="ES"
-          user-email="estrella@morscher.lab"
-          home-path=""
+          pill="experiments"
         >
           <template #icon>
             <div
@@ -110,19 +102,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Refresh · Workspace">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 22rem;">
         <AppTopBar
+          :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
           :page-selector="samplePageSelector"
           current-page-selector-id="workspace"
-          :pill-nav="samplePillNav"
-          current-pill-id="workspace"
-          show-theme-toggle
-          show-admin
-          :account-menu="sampleAccountMenu"
-          user-name="Estrella"
-          user-initial="ES"
-          user-email="estrella@morscher.lab"
-          :show-notifications="true"
-          :has-notification-dot="true"
-          home-path=""
+          pill="workspace"
         />
       </div>
     </Variant>
@@ -131,18 +114,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider>
           <AppTopBar
+            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
             :page-selector="samplePageSelector"
             current-page-selector-id="experiments"
-            :pill-nav="samplePillNav"
-            current-pill-id="experiments"
-            show-theme-toggle
-            show-admin
-            :account-menu="sampleAccountMenu"
-            user-name="Estrella"
-            user-initial="ES"
-            user-email="estrella@morscher.lab"
-            :show-notifications="true"
-            home-path=""
+            pill="experiments"
           />
         </ExperimentProvider>
       </div>
@@ -152,17 +127,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider :plugin="samplePlugin">
           <AppTopBar
+            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
             :page-selector="samplePluginPages"
             current-page-selector-id="peaks"
-            :pill-nav="samplePillNav"
-            current-pill-id="experiments"
-            show-theme-toggle
-            :account-menu="sampleAccountMenu"
-            user-name="Estrella"
-            user-initial="ES"
-            user-email="estrella@morscher.lab"
-            :show-notifications="true"
-            home-path=""
+            pill="experiments"
           />
         </ExperimentProvider>
       </div>
@@ -171,17 +139,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Refresh · Admin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
+          :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
           :page-selector="samplePageSelector"
           current-page-selector-id="admin"
-          :pill-nav="samplePillNav"
-          current-pill-id="admin"
-          show-theme-toggle
-          :account-menu="sampleAccountMenu"
-          user-name="Estrella"
-          user-initial="ES"
-          user-email="estrella@morscher.lab"
-          :show-notifications="true"
-          home-path=""
+          pill="admin"
         />
       </div>
     </Variant>
@@ -190,37 +151,33 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <ExperimentProvider :preselect="false">
           <AppTopBar
+            :spec="{ pills: samplePillNav, themeToggle: true, homePath: '' }"
             :page-selector="samplePageSelector"
             current-page-selector-id="workspace"
-            :pill-nav="samplePillNav"
-            current-pill-id="workspace"
-            show-theme-toggle
-            :account-menu="sampleAccountMenu"
-            user-name="Estrella"
-            user-initial="ES"
-            user-email="estrella@morscher.lab"
-            :show-notifications="true"
-            home-path=""
+            pill="workspace"
           />
         </ExperimentProvider>
       </div>
     </Variant>
 
-    <Variant title="Refresh · Avatar without username (signed-out / dev)">
-      <!-- When no `user-name` is passed, the trigger collapses to the avatar
-           circle only. Matches platform's dev-mode (auth disabled) state. -->
+    <Variant title="Refresh · Account slot">
+      <!-- The host application renders its account controls in #account. -->
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
-          variant="card"
+          :spec="{
+            pills: samplePillNav.slice(1, 3),
+            themeToggle: true,
+            homePath: '',
+            standaloneLabel: false,
+          }"
           title="Experiments"
           subtitle="Manage and track your experiments"
-          :pill-nav="samplePillNav.slice(1, 3)"
-          current-pill-id="experiments"
-          show-theme-toggle
-          :show-standalone-label="false"
-          :account-menu="sampleAccountMenu"
-          home-path=""
-        />
+          pill="experiments"
+        >
+          <template #account>
+            <Avatar name="Estrella" size="sm" />
+          </template>
+        </AppTopBar>
       </div>
     </Variant>
 
@@ -230,12 +187,14 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <AppTopBar
+            :spec="{
+              variant: state.variant,
+              logo: state.showLogo,
+              themeToggle: state.showThemeToggle,
+              homePath: state.homePath,
+            }"
             :title="state.title"
             :subtitle="state.subtitle"
-            :variant="state.variant"
-            :show-logo="state.showLogo"
-            :show-theme-toggle="state.showThemeToggle"
-            :home-path="state.homePath"
           />
         </div>
       </template>
@@ -257,9 +216,9 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Base · Title + Subtitle">
       <div style="padding: 2rem;">
         <AppTopBar
+          :spec="{ themeToggle: true }"
           title="Dose-Response Analysis"
           subtitle="Experiment EXP-2024-001"
-          :show-theme-toggle="true"
         />
       </div>
     </Variant>
@@ -267,12 +226,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Navigation · Page selector">
       <div style="padding: 2rem;">
         <AppTopBar
+          :spec="{ themeToggle: true, homePath: '' }"
           title="Results"
           :page-selector="samplePageSelector"
           current-page-selector-id="plugins"
-          variant="card"
-          :show-theme-toggle="true"
-          home-path=""
         />
       </div>
     </Variant>
@@ -280,11 +237,9 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Navigation · Pill nav">
       <div style="padding: 2rem;">
         <AppTopBar
+          :spec="{ pills: samplePillNav.slice(0, 3), homePath: '' }"
           title="Experiment View"
-          :pill-nav="samplePillNav.slice(0, 3)"
-          current-pill-id="workspace"
-          variant="card"
-          home-path=""
+          pill="workspace"
         />
       </div>
     </Variant>
@@ -292,18 +247,16 @@ const sampleAccountMenu: AccountMenuItem[] = [
     <Variant title="Navigation · Pill nav with dropdown and dot">
       <div style="padding: 2rem;">
         <AppTopBar
+          :spec="{ pills: platformPillNav, homePath: '' }"
           title="Projects"
-          :pill-nav="platformPillNav"
-          current-pill-id="projects"
-          variant="card"
-          home-path=""
+          pill="projects"
         />
       </div>
     </Variant>
 
     <Variant title="Base · Minimal (logo only)">
       <div style="padding: 2rem;">
-        <AppTopBar :show-logo="true" home-path="/" />
+        <AppTopBar :spec="{ logo: true, homePath: '/' }" />
       </div>
     </Variant>
 
@@ -311,10 +264,8 @@ const sampleAccountMenu: AccountMenuItem[] = [
       <div style="padding: 2rem;">
         <ExperimentProvider>
           <AppTopBar
+            :spec="{ themeToggle: true, homePath: '' }"
             title="Analysis"
-            variant="card"
-            :show-theme-toggle="true"
-            home-path=""
           />
         </ExperimentProvider>
       </div>