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

package/src/components/ComponentBindingRenderer.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+/** Render generated SDK component bindings such as WellPlate, DoseCalculator, DataFrame, and PlateMapEditor. */
+import { computed, type Component } from 'vue'
+import DataFrame from './DataFrame.vue'
+import DoseCalculator from './DoseCalculator.vue'
+import ExperimentTimeline from './ExperimentTimeline.vue'
+import PlateMapEditor from './PlateMapEditor.vue'
+import ReagentList from './ReagentList.vue'
+import SampleSelector from './SampleSelector.vue'
+import WellPlate from './WellPlate.vue'
+
+export interface ComponentBindingRendererBinding {
+  id?: string
+  component: string
+  props?: Record<string, unknown> | readonly string[]
+  propsObject?: Record<string, unknown>
+  description?: string
+  template_id?: string
+}
+
+type ComponentBindingRendererLayout = 'grid' | 'stack'
+
+interface Props {
+  /** Single generated SDK component binding to render. */
+  binding?: ComponentBindingRendererBinding
+  /** Generated SDK component bindings to render. */
+  bindings?: ComponentBindingRendererBinding[]
+  /** Optional allow-list of component names, for example ['WellPlate', 'DataFrame']. */
+  include?: string[]
+  /** Optional deny-list of component names. */
+  exclude?: string[]
+  /** Compact child component sizing. */
+  dense?: boolean
+  /** Prefer preview-safe props for editable components. */
+  readonly?: boolean
+  /** Show component/template labels above each rendered component. */
+  showHeaders?: boolean
+  /** Show binding descriptions in each header. */
+  showDescriptions?: boolean
+  /** Grid or vertical stack layout. */
+  layout?: ComponentBindingRendererLayout
+  /** Message shown when no binding can be rendered. */
+  emptyText?: string
+}
+
+type RenderableBinding = ComponentBindingRendererBinding & {
+  id: string
+  componentImpl: Component
+  normalizedProps: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  binding: undefined,
+  bindings: () => [],
+  include: () => [],
+  exclude: () => [],
+  dense: false,
+  readonly: true,
+  showHeaders: true,
+  showDescriptions: true,
+  layout: 'grid',
+  emptyText: 'No renderable SDK component bindings.',
+})
+
+const componentRegistry: Record<string, Component> = {
+  DataFrame,
+  DoseCalculator,
+  ExperimentTimeline,
+  PlateMapEditor,
+  ReagentList,
+  SampleSelector,
+  WellPlate,
+}
+
+const inputBindings = computed<ComponentBindingRendererBinding[]>(() => [
+  ...(props.binding ? [props.binding] : []),
+  ...props.bindings,
+])
+
+const renderableBindings = computed<RenderableBinding[]>(() =>
+  inputBindings.value
+    .filter(binding => isIncluded(binding.component))
+    .map((binding, index) => {
+      const componentImpl = componentRegistry[binding.component]
+      if (!componentImpl) return null
+      return {
+        ...binding,
+        id: binding.id ?? `${binding.component}-${index + 1}`,
+        componentImpl,
+        normalizedProps: normalizeProps(binding),
+      }
+    })
+    .filter((binding): binding is RenderableBinding => binding !== null)
+)
+
+const rendererClasses = computed(() => [
+  'mint-component-binding-renderer',
+  `mint-component-binding-renderer--${props.layout}`,
+  props.dense ? 'mint-component-binding-renderer--dense' : '',
+])
+
+function isIncluded(componentName: string): boolean {
+  if (props.include.length > 0 && !props.include.includes(componentName)) return false
+  return !props.exclude.includes(componentName)
+}
+
+function baseProps(binding: ComponentBindingRendererBinding): Record<string, unknown> {
+  if (binding.propsObject) return { ...binding.propsObject }
+  if (isRecord(binding.props)) return { ...binding.props }
+  return {}
+}
+
+function normalizeProps(binding: ComponentBindingRendererBinding): Record<string, unknown> {
+  const base = baseProps(binding)
+
+  switch (binding.component) {
+    case 'WellPlate':
+      return {
+        ...base,
+        readonly: props.readonly || Boolean(base.readonly),
+        size: props.dense ? 'md' : (base.size ?? 'fill'),
+      }
+    case 'PlateMapEditor':
+      return {
+        ...base,
+        size: props.dense ? 'md' : (base.size ?? 'fill'),
+        showToolbar: props.readonly ? false : (base.showToolbar ?? true),
+        showSidebar: props.readonly ? false : (base.showSidebar ?? true),
+        allowAddPlates: props.readonly ? false : (base.allowAddPlates ?? true),
+        allowAddSamples: props.readonly ? false : (base.allowAddSamples ?? true),
+      }
+    case 'DataFrame':
+      return {
+        ...base,
+        size: props.dense ? 'sm' : (base.size ?? 'md'),
+        maxHeight: base.maxHeight ?? (props.dense ? '280px' : undefined),
+      }
+    case 'ExperimentTimeline':
+      return {
+        ...base,
+        editable: props.readonly ? false : base.editable,
+        size: props.dense ? 'sm' : (base.size ?? 'md'),
+      }
+    case 'ReagentList':
+      return {
+        ...base,
+        readonly: props.readonly || Boolean(base.readonly),
+      }
+    case 'SampleSelector':
+      return {
+        ...base,
+        enableGrouping: props.readonly ? false : (base.enableGrouping ?? true),
+        enableSmartGroup: props.readonly ? false : (base.enableSmartGroup ?? true),
+      }
+    default:
+      return base
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+</script>
+
+<template>
+  <div :class="rendererClasses">
+    <section
+      v-for="renderableBinding in renderableBindings"
+      :key="renderableBinding.id"
+      class="mint-component-binding-renderer__item"
+      :data-component-binding-id="renderableBinding.id"
+      :data-template-id="renderableBinding.template_id"
+      :data-template-component="renderableBinding.component"
+    >
+      <header
+        v-if="showHeaders"
+        class="mint-component-binding-renderer__header"
+      >
+        <div class="mint-component-binding-renderer__title-group">
+          <p class="mint-component-binding-renderer__component">
+            {{ renderableBinding.component }}
+          </p>
+          <p
+            v-if="renderableBinding.template_id || renderableBinding.id"
+            class="mint-component-binding-renderer__source"
+          >
+            {{ renderableBinding.template_id ?? renderableBinding.id }}
+          </p>
+        </div>
+        <p
+          v-if="showDescriptions && renderableBinding.description"
+          class="mint-component-binding-renderer__description"
+        >
+          {{ renderableBinding.description }}
+        </p>
+      </header>
+
+      <div class="mint-component-binding-renderer__body">
+        <component
+          :is="renderableBinding.componentImpl"
+          v-bind="renderableBinding.normalizedProps"
+        />
+      </div>
+    </section>
+
+    <p
+      v-if="renderableBindings.length === 0"
+      class="mint-component-binding-renderer__empty"
+    >
+      {{ emptyText }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.mint-component-binding-renderer {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.mint-component-binding-renderer--grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+}
+
+.mint-component-binding-renderer--stack {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.mint-component-binding-renderer--dense {
+  gap: 0.75rem;
+}
+
+.mint-component-binding-renderer__item {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-card, #ffffff);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgb(15 23 42 / 0.06));
+}
+
+.mint-component-binding-renderer__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  background: var(--bg-secondary, #f8fafc);
+}
+
+.mint-component-binding-renderer__title-group {
+  min-width: 0;
+}
+
+.mint-component-binding-renderer__component {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.mint-component-binding-renderer__source,
+.mint-component-binding-renderer__description,
+.mint-component-binding-renderer__empty {
+  margin: 0;
+  color: var(--text-secondary, #475569);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.mint-component-binding-renderer__description {
+  max-width: 24rem;
+  text-align: right;
+}
+
+.mint-component-binding-renderer__body {
+  min-width: 0;
+  padding: 1rem;
+}
+
+.mint-component-binding-renderer--dense .mint-component-binding-renderer__header,
+.mint-component-binding-renderer--dense .mint-component-binding-renderer__body {
+  padding: 0.75rem;
+}
+
+.mint-component-binding-renderer__empty {
+  padding: 1rem;
+  border: 1px dashed var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-secondary, #f8fafc);
+  text-align: center;
+}
+
+@media (max-width: 720px) {
+  .mint-component-binding-renderer__header {
+    display: block;
+  }
+
+  .mint-component-binding-renderer__description {
+    max-width: none;
+    margin-top: 0.25rem;
+    text-align: left;
+  }
+}
+</style>

package/src/components/ControlWorkspaceView.story.vue

@@ -11,6 +11,8 @@ import {
   type ControlComponentPropsMap,
 } from '../composables/useControlSchema'
 
+type SidebarVariant = 'analysis' | 'default'
+
 const controls = defineControls({
   threshold: {
     type: 'number',
@@ -137,8 +139,11 @@ const MockResultChart = defineComponent({
 function initState() {
   return {
     title: 'Analysis Workspace',
+    sidebarTitle: 'Analysis Controls',
+    sidebarSubtitle: 'Current run',
     sidebarPosition: 'left',
-    navigation: 'pill',
+    sidebarVariant: 'analysis' as SidebarVariant,
+    responsiveSidebar: true,
     floating: false,
     dense: true,
     showSettings: true,
@@ -157,8 +162,11 @@ function initState() {
           <ControlWorkspaceView
             :workspace="workspace"
             :title="state.title"
+            :sidebar-title="state.sidebarTitle"
+            :sidebar-subtitle="state.sidebarSubtitle"
             :sidebar-position="state.sidebarPosition"
-            :navigation="state.navigation"
+            :sidebar-variant="state.sidebarVariant"
+            :responsive-sidebar="state.responsiveSidebar"
             :floating="state.floating"
             :dense="state.dense"
             :show-settings="state.showSettings"
@@ -171,6 +179,8 @@ function initState() {
 
       <template #controls="{ state }">
         <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.sidebarPosition"
           title="Sidebar"
@@ -180,13 +190,14 @@ function initState() {
           ]"
         />
         <HstSelect
-          v-model="state.navigation"
-          title="Navigation"
+          v-model="state.sidebarVariant"
+          title="Sidebar variant"
           :options="[
-            { label: 'Pill', value: 'pill' },
-            { label: 'Tabs', value: 'tabs' },
+            { 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" />
         <HstCheckbox v-model="state.showSettings" title="Settings" />
@@ -228,16 +239,16 @@ function initState() {
           v-model="doseDesignValues"
           :model="doseDesignModel"
           title="Dose Design Workspace"
-          v-slot="{ componentPropsById }"
+          v-slot="{ componentBindingsById }"
         >
           <div class="dose-design-demo">
             <WellPlate
-              v-bind="componentPropsById.plate"
+              v-bind="componentBindingsById.plate.props"
               size="fill"
               selection-mode="multiple"
               :heatmap="{ enabled: true, min: 0, max: 100, colorScale: 'viridis' }"
             />
-            <DoseCalculator v-bind="componentPropsById.dose" />
+            <DoseCalculator v-bind="componentBindingsById.dose.props" />
           </div>
         </ControlWorkspaceView>
       </div>

package/src/components/ControlWorkspaceView.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-/** Page shell that turns a simple controls data model into AppTopBar, AppSidebar, and FormBuilder. */
+/** Complete control workspace component that turns a simple controls data model into AppTopBar, AppSidebar, and FormBuilder forms. */
 import { computed, effectScope, onScopeDispose, shallowRef, toRaw, watch, type EffectScope } from 'vue'
 import type { TopBarVariant } from '../types'
 import type { FormEnhancements } from '../types/form-builder'
 import type {
+  ControlComponentBindingsConfig,
   ControlComponentPropsByIdMap,
   ControlComponentPropsMap,
   ControlModel,
@@ -18,13 +19,15 @@ import AppSidebar from './AppSidebar.vue'
 import AppTopBar from './AppTopBar.vue'
 import FormBuilder from './FormBuilder.vue'
 
-type ControlWorkspaceNavigation = 'tabs' | 'pill'
+type ControlWorkspaceSidebarVariant = 'default' | 'analysis'
 type ResolvedControlWorkspace = UseControlWorkspaceReturn<ControlSchema>
 
 interface ControlWorkspaceDefaultSlotProps {
   workspace: ResolvedControlWorkspace
   bindings: ResolvedControlWorkspace['bindings']
   values: ResolvedControlWorkspace['values']
+  componentBindings: ReturnType<ResolvedControlWorkspace['getComponentBindings']>
+  componentBindingsById: ReturnType<ResolvedControlWorkspace['getComponentBindingsById']>
   componentProps: ReturnType<ResolvedControlWorkspace['getComponentProps']>
   componentPropsById: ReturnType<ResolvedControlWorkspace['getComponentPropsById']>
 }
@@ -32,7 +35,7 @@ interface ControlWorkspaceDefaultSlotProps {
 interface ControlWorkspaceTopbarSlotProps {
   workspace: ResolvedControlWorkspace
   bindings: ResolvedControlWorkspace['bindings']
-  topBar: ResolvedControlWorkspace['topBar']
+  topBar: ResolvedControlWorkspace['bindings']['topBar']['value']
 }
 
 interface ControlWorkspaceSidebarSlotProps {
@@ -62,12 +65,20 @@ interface Props {
   subtitle?: string
   /** AppTopBar visual variant. */
   topBarVariant?: TopBarVariant
-  /** AppTopBar generated navigation style. "pill" uses the preferred AppPillNav surface; "tabs" keeps the legacy prop surface. */
-  navigation?: ControlWorkspaceNavigation
   /** AppSidebar/AppLayout sidebar width. */
   sidebarWidth?: string
+  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
+  sidebarVariant?: ControlWorkspaceSidebarVariant
+  /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
+  responsiveSidebar?: boolean
   /** Sidebar position in AppLayout. */
   sidebarPosition?: 'left' | 'right'
+  /** Optional AppSidebar chrome title for LEAF-style plugin workbenches. */
+  sidebarTitle?: string
+  /** Optional AppSidebar chrome subtitle for active experiment/run context. */
+  sidebarSubtitle?: string
+  /** Optional compact badge/count rendered in the AppSidebar chrome header. */
+  sidebarBadge?: string | number
   /** Floating AppLayout style. */
   floating?: boolean
   /** Compact AppSidebar density. */
@@ -78,6 +89,8 @@ interface Props {
   showFormActions?: boolean
   /** Runtime FormBuilder enhancements passed to generated forms. */
   formEnhancements?: FormEnhancements<Record<string, unknown>>
+  /** 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. */
@@ -120,14 +133,19 @@ const props = withDefaults(defineProps<Props>(), {
   title: 'Workspace',
   subtitle: undefined,
   topBarVariant: 'card',
-  navigation: 'pill',
   sidebarWidth: '320px',
+  sidebarVariant: 'analysis',
+  responsiveSidebar: true,
   sidebarPosition: 'left',
+  sidebarTitle: undefined,
+  sidebarSubtitle: undefined,
+  sidebarBadge: undefined,
   floating: false,
   dense: true,
   showSettings: true,
   showFormActions: false,
   formEnhancements: undefined,
+  componentBindings: undefined,
   componentProps: undefined,
   componentPropsById: undefined,
   formLoading: false,
@@ -177,6 +195,12 @@ function createGeneratedWorkspace(seedValues: Record<string, unknown> = {}) {
 
 const generatedWorkspace = shallowRef<UseControlWorkspaceReturn<ControlSchema>>(createGeneratedWorkspace())
 const resolvedWorkspace = computed<UseControlWorkspaceReturn<ControlSchema>>(() => props.workspace ?? generatedWorkspace.value)
+const resolvedComponentBindings = computed(() =>
+  resolvedWorkspace.value.getComponentBindings(props.componentBindings ?? resolvedModel.value?.componentBindings)
+)
+const resolvedComponentBindingsById = computed(() =>
+  resolvedWorkspace.value.getComponentBindingsById(props.componentBindings ?? resolvedModel.value?.componentBindings)
+)
 const resolvedComponentProps = computed(() =>
   resolvedWorkspace.value.getComponentProps(props.componentProps ?? resolvedModel.value?.componentProps)
 )
@@ -185,9 +209,12 @@ const resolvedComponentPropsById = computed(() =>
 )
 const resolvedBindings = computed<ResolvedControlWorkspace['bindings']>(() => ({
   ...resolvedWorkspace.value.bindings,
+  componentBindings: resolvedComponentBindings,
+  componentBindingsById: resolvedComponentBindingsById,
   componentProps: resolvedComponentProps,
   componentPropsById: resolvedComponentPropsById,
 }))
+const resolvedTopBarSlot = computed(() => resolvedWorkspace.value.bindings.topBar.value)
 
 watch(
   [() => props.model, () => props.controls, () => props.controlOptions, () => props.initialValues],
@@ -265,6 +292,7 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
     class="mint-control-workspace-view"
     :sidebar-position="sidebarPosition"
     :sidebar-width="sidebarWidth"
+    :responsive-sidebar="responsiveSidebar"
     :floating="floating"
   >
     <template #topbar>
@@ -272,19 +300,16 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
         name="topbar"
         :workspace="resolvedWorkspace"
         :bindings="resolvedBindings"
-        :top-bar="resolvedWorkspace.topBar"
+        :top-bar="resolvedTopBarSlot"
       >
         <AppTopBar
           :title="title"
           :subtitle="subtitle"
           :variant="topBarVariant"
-          :tabs="navigation === 'tabs' ? resolvedWorkspace.topBar.tabs : undefined"
-          :current-tab-id="navigation === 'tabs' ? resolvedWorkspace.topBar.currentTabId : undefined"
-          :pill-nav="navigation === 'pill' ? resolvedWorkspace.pillNav.items : undefined"
-          :current-pill-id="navigation === 'pill' ? resolvedWorkspace.pillNav.currentItemId : undefined"
+          :pill-nav="resolvedWorkspace.pillNav.items"
+          :current-pill-id="resolvedWorkspace.pillNav.currentItemId"
           :show-settings="showSettings"
           :settings-config="resolvedWorkspace.topBarSettings.settingsConfig"
-          @tab-select="resolvedWorkspace.topBar.onTabSelect"
           @pill-select="resolvedWorkspace.pillNav.onSelect"
           @settings-values-change="resolvedWorkspace.topBarSettings.onSettingsValuesChange"
         />
@@ -300,6 +325,10 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
       >
         <AppSidebar
           v-bind="resolvedWorkspace.sidebar"
+          :title="sidebarTitle"
+          :subtitle="sidebarSubtitle"
+          :badge="sidebarBadge"
+          :variant="sidebarVariant"
           :floating="false"
           :dense="dense"
           :width="sidebarWidth"
@@ -316,6 +345,8 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
         :workspace="resolvedWorkspace"
         :bindings="resolvedBindings"
         :values="resolvedWorkspace.values"
+        :component-bindings="resolvedComponentBindings"
+        :component-bindings-by-id="resolvedComponentBindingsById"
         :component-props="resolvedComponentProps"
         :component-props-by-id="resolvedComponentPropsById"
       >

package/src/components/DatePicker.vue

@@ -4,7 +4,7 @@ import { ref, computed, watch } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
 import { useDropdownState } from '../composables/useDropdownState'
 import { useEventListener } from '../composables/useEventListener'
-import CalendarGridPanel from './CalendarGridPanel.vue'
+import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
 interface Props {
   modelValue?: string
@@ -159,7 +159,7 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
           aria-modal="true"
           aria-label="Date picker"
         >
-          <CalendarGridPanel
+          <CalendarGridPanelInternal
             :week-days="weekDays"
             :month-year="monthYear"
             :days="calendarDays"

package/src/components/DateTimePicker.vue

@@ -4,7 +4,7 @@ import { computed, watch, nextTick } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
 import { useDropdownState } from '../composables/useDropdownState'
 import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../composables/useTimeUtils'
-import CalendarGridPanel from './CalendarGridPanel.vue'
+import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
 interface Props {
   modelValue?: string
@@ -210,7 +210,7 @@ watch(isOpen, (open) => {
       >
         <!-- Calendar section -->
         <div class="mint-datetime-picker__calendar-section">
-          <CalendarGridPanel
+          <CalendarGridPanelInternal
             :week-days="weekDays"
             :month-year="monthYear"
             :days="calendarDays"

package/src/components/DoseDesignWorkspaceView.story.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DoseDesignWorkspaceView from './DoseDesignWorkspaceView.vue'
+import type { DoseDesignControlModelOptions } from '../composables/useControlSchema'
+
+type SidebarVariant = 'analysis' | 'default'
+
+const initState = () => ({
+  title: 'Dose Design Workspace',
+  includeMolecularWeight: true,
+  plateFormat: 96,
+  selectedWells: ['A1', 'A2', 'B1', 'B2'],
+  sidebarTitle: 'Dose Controls',
+  sidebarSubtitle: 'Plate setup',
+  sidebarVariant: 'analysis' as SidebarVariant,
+  responsiveSidebar: true,
+  showSettings: true,
+})
+
+const state = ref(initState())
+const values = ref<Record<string, unknown>>({})
+
+function doseOptions(): DoseDesignControlModelOptions {
+  return {
+    selectedWells: state.value.selectedWells,
+    plateFormat: state.value.plateFormat,
+    includeMolecularWeight: state.value.includeMolecularWeight,
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/DoseDesignWorkspaceView" :init-state="initState">
+    <Variant title="Playground">
+      <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
+        <DoseDesignWorkspaceView
+          v-model="values"
+          :title="state.title"
+          :dose-design-options="doseOptions()"
+          :sidebar-title="state.sidebarTitle"
+          :sidebar-subtitle="state.sidebarSubtitle"
+          :sidebar-variant="state.sidebarVariant"
+          :responsive-sidebar="state.responsiveSidebar"
+          :show-settings="state.showSettings"
+          :well-plate-props="{
+            heatmap: { enabled: true, min: 0, max: 100, colorScale: 'viridis' },
+          }"
+        />
+      </div>
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.title" title="Title" />
+      <HstText v-model="state.sidebarTitle" title="Sidebar title" />
+      <HstText v-model="state.sidebarSubtitle" title="Sidebar subtitle" />
+      <HstCheckbox v-model="state.includeMolecularWeight" title="Molecular weight" />
+      <HstCheckbox v-model="state.responsiveSidebar" title="Responsive sidebar" />
+      <HstCheckbox v-model="state.showSettings" title="Settings" />
+      <HstSelect
+        v-model="state.sidebarVariant"
+        title="Sidebar variant"
+        :options="[
+          { label: 'Analysis', value: 'analysis' },
+          { label: 'Default', value: 'default' },
+        ]"
+      />
+      <HstSelect
+        v-model="state.plateFormat"
+        title="Plate format"
+        :options="[
+          { label: '96 wells', value: 96 },
+          { label: '384 wells', value: 384 },
+        ]"
+      />
+    </template>
+  </Story>
+</template>