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

package/src/components/DoseDesignWorkspaceView.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+/**
+ * Complete ControlWorkspaceView page shell for WellPlate + DoseCalculator dose design.
+ *
+ * @example Recommended
+ * ```vue
+ * <DoseDesignWorkspaceView v-model="values" title="Dose Design" />
+ * ```
+ */
+import { computed } from 'vue'
+import type { TopBarVariant } from '../types'
+import type { FormEnhancements } from '../types/form-builder'
+import type {
+  ControlModel,
+  ControlModelBinding,
+  ControlSchema,
+  ControlWorkspaceOptions,
+  DoseDesignControlModelOptions,
+  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'
+
+type DoseDesignSidebarVariant = 'default' | 'analysis'
+type ComponentProps = Record<string, unknown>
+type ComponentPropsById = Record<string, ComponentProps>
+type ComponentBinding = { id: string, component: string, props: ComponentProps }
+type ComponentBindingsById = Record<string, ComponentBinding>
+type ResolvedControlWorkspace = UseControlWorkspaceReturn<ControlSchema>
+
+interface DoseDesignWorkspaceSlotProps {
+  workspace: ResolvedControlWorkspace
+  bindings: ResolvedControlWorkspace['bindings']
+  values: ResolvedControlWorkspace['values']
+  componentBindings: ComponentBinding[]
+  componentBindingsById: ComponentBindingsById
+  componentPropsById: ComponentPropsById
+  wellPlateProps: ComponentProps
+  doseCalculatorProps: ComponentProps
+}
+
+interface Props {
+  /** Model returned by defineDoseDesignControlModel(), or a custom compatible ControlWorkspace model. */
+  model?: ControlModel | ControlModelBinding
+  /** Workspace returned by useControlWorkspace(). Use for full manual control. */
+  workspace?: UseControlWorkspaceReturn<ControlSchema>
+  /** Options used when this view creates the default dose-design model internally. */
+  doseDesignOptions?: DoseDesignControlModelOptions
+  /** Options passed to the internally generated ControlWorkspaceView workspace. */
+  controlOptions?: ControlWorkspaceOptions
+  /** Initial values for the internally generated workspace. */
+  initialValues?: Record<string, unknown>
+  /** External values for the internally generated workspace. Supports default v-model. */
+  modelValue?: Record<string, unknown>
+  /** External values for the internally generated workspace. Supports v-model:values. */
+  values?: Record<string, unknown>
+  /** Named component props id for the generated WellPlate binding. */
+  plateId?: string
+  /** Named component props id for the generated DoseCalculator binding. */
+  doseId?: string
+  /** Extra props merged into the generated WellPlate binding. */
+  wellPlateProps?: ComponentProps
+  /** Extra props merged into the generated DoseCalculator binding. */
+  doseCalculatorProps?: ComponentProps
+  /** AppTopBar title. */
+  title?: string
+  /** AppTopBar subtitle. */
+  subtitle?: string
+  /** AppTopBar visual variant. */
+  topBarVariant?: TopBarVariant
+  /** AppSidebar/AppLayout sidebar width. */
+  sidebarWidth?: string
+  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
+  sidebarVariant?: DoseDesignSidebarVariant
+  /** 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. */
+  dense?: boolean
+  /** Whether AppTopBar should show generated settings. */
+  showSettings?: boolean
+  /** Render FormBuilder actions in the default generated forms. */
+  showFormActions?: boolean
+  /** Runtime FormBuilder enhancements passed to generated forms. */
+  formEnhancements?: FormEnhancements<Record<string, unknown>>
+  /** Loading/saving state passed to generated forms. */
+  formLoading?: boolean
+  /** Disabled state passed to generated forms. */
+  formDisabled?: boolean
+  /** Readonly state passed to generated forms. */
+  formReadonly?: boolean
+  /** FormBuilder size in generated forms. */
+  formSize?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  model: undefined,
+  workspace: undefined,
+  doseDesignOptions: () => ({}),
+  controlOptions: () => ({}),
+  initialValues: undefined,
+  modelValue: undefined,
+  values: undefined,
+  plateId: undefined,
+  doseId: undefined,
+  wellPlateProps: () => ({}),
+  doseCalculatorProps: () => ({}),
+  title: 'Dose Design Workspace',
+  subtitle: undefined,
+  topBarVariant: 'card',
+  sidebarWidth: '320px',
+  sidebarVariant: 'analysis',
+  responsiveSidebar: true,
+  sidebarPosition: 'left',
+  sidebarTitle: undefined,
+  sidebarSubtitle: undefined,
+  sidebarBadge: undefined,
+  floating: false,
+  dense: true,
+  showSettings: true,
+  showFormActions: false,
+  formEnhancements: undefined,
+  formLoading: false,
+  formDisabled: false,
+  formReadonly: false,
+  formSize: 'md',
+})
+
+const emit = defineEmits<{
+  /** Emitted when generated workspace values change through WellPlate, FormBuilder, AppSidebar, or AppTopBar settings. */
+  'update:modelValue': [values: Record<string, unknown>]
+  /** Emitted when generated workspace values change through WellPlate, FormBuilder, AppSidebar, or AppTopBar settings. */
+  'update:values': [values: Record<string, unknown>]
+  /** Forwarded from the internal ControlWorkspaceView when form actions are enabled. */
+  submit: [values: Record<string, unknown>]
+  /** Forwarded from the internal ControlWorkspaceView when form actions are enabled. */
+  cancel: []
+}>()
+
+defineSlots<{
+  default?: (props: DoseDesignWorkspaceSlotProps) => unknown
+  plate?: (props: DoseDesignWorkspaceSlotProps) => unknown
+  dose?: (props: DoseDesignWorkspaceSlotProps) => unknown
+}>()
+
+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'
+}
+
+function resolvedDoseId(): string {
+  return props.doseId ?? props.doseDesignOptions.componentProps?.doseId ?? 'dose'
+}
+
+function wellPlateBinding(componentPropsById: ComponentPropsById): ComponentProps {
+  return {
+    size: 'fill',
+    selectionMode: 'multiple',
+    ...(componentPropsById[resolvedPlateId()] ?? {}),
+    ...props.wellPlateProps,
+  }
+}
+
+function doseCalculatorBinding(componentPropsById: ComponentPropsById): ComponentProps {
+  return {
+    ...(componentPropsById[resolvedDoseId()] ?? {}),
+    ...props.doseCalculatorProps,
+  }
+}
+
+function slotProps(slotProps: {
+  workspace: ResolvedControlWorkspace
+  bindings: ResolvedControlWorkspace['bindings']
+  values: ResolvedControlWorkspace['values']
+  componentBindings: ComponentBinding[]
+  componentBindingsById: ComponentBindingsById
+  componentPropsById: ComponentPropsById
+}): DoseDesignWorkspaceSlotProps {
+  return {
+    ...slotProps,
+    wellPlateProps: wellPlateBinding(slotProps.componentPropsById),
+    doseCalculatorProps: doseCalculatorBinding(slotProps.componentPropsById),
+  }
+}
+</script>
+
+<template>
+  <ControlWorkspaceView
+    v-bind="controlWorkspaceRecipe"
+    @update:model-value="emit('update:modelValue', $event)"
+    @update:values="emit('update:values', $event)"
+    @submit="emit('submit', $event)"
+    @cancel="emit('cancel')"
+  >
+    <template #default="workspaceSlotProps">
+      <slot v-bind="slotProps(workspaceSlotProps)">
+        <div class="mint-dose-design-workspace">
+          <slot name="plate" v-bind="slotProps(workspaceSlotProps)">
+            <WellPlate v-bind="wellPlateBinding(workspaceSlotProps.componentPropsById)" />
+          </slot>
+          <slot name="dose" v-bind="slotProps(workspaceSlotProps)">
+            <DoseCalculator v-bind="doseCalculatorBinding(workspaceSlotProps.componentPropsById)" />
+          </slot>
+        </div>
+      </slot>
+    </template>
+  </ControlWorkspaceView>
+</template>
+
+<style scoped>
+.mint-dose-design-workspace {
+  display: grid;
+  grid-template-columns: minmax(360px, 1fr) minmax(300px, 420px);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
+}
+
+@media (max-width: 900px) {
+  .mint-dose-design-workspace {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>

package/src/components/DropdownButton.story.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DropdownButton from './DropdownButton.vue'
+import type { ButtonVariant, ButtonSize, SelectOption } from '../types'
+
+const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
+const sizes: ButtonSize[] = ['sm', 'md', 'lg']
+
+const selected = ref<string | undefined>(undefined)
+
+const basicOptions: SelectOption<string>[] = [
+  { value: 'csv', label: 'CSV' },
+  { value: 'xlsx', label: 'Excel (.xlsx)' },
+  { value: 'json', label: 'JSON' },
+  { value: 'tsv', label: 'TSV', disabled: true },
+]
+
+const descriptiveOptions: SelectOption<string>[] = [
+  { value: 'quick', label: 'Quick Analysis', description: 'Basic statistics and QC checks' },
+  { value: 'full', label: 'Full Analysis', description: 'Comprehensive dose-response fitting' },
+  { value: 'custom', label: 'Custom Pipeline', description: 'Configure analysis steps manually' },
+]
+</script>
+
+<template>
+  <Story title="Action/DropdownButton">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <DropdownButton
+            v-model="selected"
+            :options="basicOptions"
+            :variant="state.variant"
+            :size="state.size"
+            :disabled="state.disabled"
+            :loading="state.loading"
+            :placeholder="state.placeholder"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+      </template>
+    </Variant>
+
+    <Variant title="All Variants">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
+        <div v-for="variant in variants" :key="variant" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <DropdownButton
+            :options="basicOptions"
+            :variant="variant"
+            placeholder="Export as..."
+          />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">{{ variant }}</span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Descriptions">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <DropdownButton
+          :options="descriptiveOptions"
+          variant="primary"
+          placeholder="Run Analysis..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Pre-selected Value">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <DropdownButton
+          model-value="xlsx"
+          :options="basicOptions"
+          variant="secondary"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled Option">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <DropdownButton
+          :options="basicOptions"
+          variant="secondary"
+          placeholder="Export format"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/DropdownButton.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+/** Button that opens a dropdown menu for selecting one option from a list. */
+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'
+
+/**
+ * DropdownButton - Button-style select with dropdown menu for option selection.
+ *
+ * @example
+ * ```vue
+ * <DropdownButton
+ *   v-model="selectedValue"
+ *   :options="[
+ *     { value: 'a', label: 'Option A' },
+ *     { value: 'b', label: 'Option B', description: 'Additional info' }
+ *   ]"
+ *   variant="secondary"
+ * />
+ * ```
+ */
+interface Props {
+  /** Selected option value */
+  modelValue?: string | number
+  /** Available options */
+  options: SelectOptionInput<string | number>[]
+  /** Placeholder text when no option is selected */
+  placeholder?: string
+  /** Button style variant */
+  variant?: ButtonVariant
+  /** Button size */
+  size?: ButtonSize
+  /** Disable interaction */
+  disabled?: boolean
+  /** Show loading spinner */
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'secondary',
+  size: 'md',
+  disabled: false,
+  loading: false,
+})
+
+/**
+ * @event update:modelValue - Emitted when an option is selected (v-model support)
+ * @event select - Emitted when an option is selected, includes full option object
+ */
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+  select: [option: SelectOption<string | number>]
+}>()
+
+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)
+  return found?.label ?? String(props.modelValue)
+})
+
+function toggle() {
+  if (props.disabled || props.loading) return
+  toggleDropdown()
+}
+
+function selectOption(option: SelectOption<string | number>) {
+  if (option.disabled) return
+  emit('update:modelValue', option.value)
+  emit('select', option)
+  close()
+}
+</script>
+
+<template>
+  <div ref="rootRef" class="mint-dropdown-button">
+    <button
+      ref="triggerRef"
+      type="button"
+      :disabled="disabled || loading"
+      :class="[
+        'mint-dropdown-button__trigger',
+        `mint-dropdown-button__trigger--${variant}`,
+        `mint-dropdown-button__trigger--${size}`,
+        {
+          'mint-dropdown-button__trigger--disabled': disabled || loading,
+          'mint-dropdown-button__trigger--open': isOpen,
+        },
+      ]"
+      :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" />
+        <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+      </svg>
+      <span class="mint-dropdown-button__label">{{ selectedLabel }}</span>
+      <svg
+        :class="['mint-dropdown-button__chevron', { 'mint-dropdown-button__chevron--open': isOpen }]"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </button>
+
+    <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="[
+            'mint-dropdown-button__option',
+            {
+              'mint-dropdown-button__option--selected': option.value === modelValue,
+              'mint-dropdown-button__option--disabled': option.disabled,
+            },
+          ]"
+          @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">
+            {{ option.description }}
+          </span>
+          <svg
+            v-if="option.value === modelValue"
+            class="mint-dropdown-button__option-check"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        </li>
+      </ul>
+    </Transition>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/dropdown-button.css';
+</style>

package/src/components/EmptyState.story.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import EmptyState from './EmptyState.vue'
+import type { EmptyStateColor, EmptyStateSize } from '../types'
+
+const colors: EmptyStateColor[] = ['primary', 'cta', 'success', 'warning', 'error', 'muted']
+const sizes: EmptyStateSize[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Feedback/EmptyState">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <EmptyState
+            :title="state.title"
+            :description="state.description"
+            :color="state.color"
+            :size="state.size"
+            :action-label="state.showAction ? state.actionLabel : undefined"
+            @action="() => console.log('Action clicked')"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.description" title="Description" />
+        <HstSelect
+          v-model="state.color"
+          title="Color"
+          :options="colors.map(c => ({ label: c, value: c }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.showAction" title="Show Action" />
+        <HstText v-model="state.actionLabel" title="Action Label" />
+      </template>
+    </Variant>
+
+    <Variant title="No Experiments">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="No experiments yet"
+          description="Create your first experiment to get started with data analysis."
+          action-label="Create Experiment"
+          color="primary"
+          @action="() => console.log('Create experiment')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Results">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="No results found"
+          description="Try adjusting your search filters or broadening your query."
+          color="muted"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="Something went wrong"
+          description="We couldn't load the plate data. Please check your connection and try again."
+          color="error"
+          action-label="Retry"
+          icon-path="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+          @action="() => console.log('Retry')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Colors">
+      <div style="padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
+        <EmptyState
+          v-for="color in colors"
+          :key="color"
+          :title="`${color.charAt(0).toUpperCase() + color.slice(1)} state`"
+          description="Example description text."
+          :color="color"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 3rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <EmptyState
+            :title="`Empty state (${size})`"
+            description="This shows the different size options available."
+            :size="size"
+            color="muted"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Content">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="Upload your data"
+          description="Drag and drop CSV or Excel files, or click below to browse."
+          color="cta"
+        >
+          <div style="margin-top: 1rem; padding: 2rem; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem; text-align: center;">
+            <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">
+              Drop files here or click to upload
+            </p>
+          </div>
+        </EmptyState>
+      </div>
+    </Variant>
+    <Variant title="Inline variant — inside panels">
+      <div style="padding: 2rem; max-width: 640px;">
+        <EmptyState
+          variant="inline"
+          color="primary"
+          title="No experiments yet"
+          description="Create one to start designing your next assay."
+          action-label="New experiment"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>