@morscherlab/mint-sdk 1.2.0 → 1.2.2

package/src/components/AppToastContainer.vue

@@ -1,17 +1,25 @@
 <script setup lang="ts">
-/** Preferred toast container driven by useToast, with auto-dismiss progress bar and click-to-close on each notification. */
+/** Preferred toast container driven by useToast: title/detail, up to two actions, TTL or indeterminate bar, click-to-close. */
 import { useToast } from '../composables/useToast'
-import type { Toast } from '../types'
+import type { Toast, ToastAction } from '../types'
 
 const { toasts, dismiss } = useToast()
 
-// Semantic accents come from the shared tokens rather than a fourth copy of
-// the same four hexes.
-const accentColors: Record<Toast['type'], string> = {
-  success: 'var(--mint-success)',
-  error: 'var(--mint-error)',
-  warning: 'var(--mint-warning)',
-  info: 'var(--mint-info)',
+function title(toast: Toast): string {
+  return toast.title ?? toast.message
+}
+
+function actions(toast: Toast): ToastAction[] {
+  return (toast.actions ?? []).slice(0, 2)
+}
+
+function progress(toast: Toast): NonNullable<Toast['progress']> {
+  return toast.progress ?? 'ttl'
+}
+
+function runAction(toast: Toast, action: ToastAction) {
+  action.onClick()
+  dismiss(toast.id)
 }
 </script>
 
@@ -22,36 +30,70 @@ const accentColors: Record<Toast['type'], string> = {
         <div
           v-for="toast in toasts"
           :key="toast.id"
-          :class="['mint-toast__item', `mint-toast__item--${toast.type}`]"
-          :style="{
-            borderLeftColor: accentColors[toast.type],
-          }"
-          role="alert"
+          :class="[
+            'mint-toast__item',
+            `mint-toast__item--${toast.type}`,
+            (toast.count ?? 1) > 1 ? 'mint-toast__item--stacked' : '',
+          ]"
+          :role="toast.type === 'error' || toast.type === 'warning' ? 'alert' : 'status'"
           @click="dismiss(toast.id)"
         >
           <!-- Lucide circle-check -->
-          <svg v-if="toast.type === 'success'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-if="toast.type === 'success'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
           </svg>
           <!-- Lucide circle-x -->
-          <svg v-else-if="toast.type === 'error'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else-if="toast.type === 'error'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
           </svg>
           <!-- Lucide triangle-alert -->
-          <svg v-else-if="toast.type === 'warning'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else-if="toast.type === 'warning'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
           </svg>
           <!-- Lucide info -->
-          <svg v-else class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
           </svg>
-          <span class="mint-toast__message">{{ toast.message }}</span>
+
+          <div class="mint-toast__body">
+            <div class="mint-toast__title">
+              <span class="mint-toast__message">{{ title(toast) }}</span>
+              <span v-if="(toast.count ?? 1) > 1" class="mint-toast__count">×{{ toast.count }}</span>
+            </div>
+            <div v-if="toast.detail" class="mint-toast__detail">{{ toast.detail }}</div>
+            <div v-if="actions(toast).length" class="mint-toast__actions">
+              <button
+                v-for="action in actions(toast)"
+                :key="action.label"
+                type="button"
+                :class="['mint-toast__action', action.primary ? 'mint-toast__action--primary' : '']"
+                @click.stop="runAction(toast, action)"
+              >
+                {{ action.label }}
+              </button>
+            </div>
+          </div>
+
+          <button
+            v-if="toast.dismissible !== false"
+            type="button"
+            class="mint-toast__close"
+            aria-label="Dismiss"
+            @click.stop="dismiss(toast.id)"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
+              <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+            </svg>
+          </button>
+
           <span
+            v-if="progress(toast) === 'ttl'"
             class="mint-toast__progress"
-            :style="{
-              backgroundColor: accentColors[toast.type],
-              animationDuration: `${toast.duration ?? 3500}ms`,
-            }"
+            :style="{ animationDuration: `${toast.duration ?? 3500}ms` }"
+          />
+          <span
+            v-else-if="progress(toast) === 'indeterminate'"
+            class="mint-toast__progress mint-toast__progress--indeterminate"
           />
         </div>
       </TransitionGroup>

package/src/components/BasePill.story.vue

@@ -16,6 +16,7 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
             :size="state.size"
             :removable="state.removable"
             :disabled="state.disabled"
+            :dot="state.dot"
             @remove="() => console.log('Remove clicked')"
           >
             {{ state.label }}
@@ -37,6 +38,7 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
         />
         <HstCheckbox v-model="state.removable" title="Removable" />
         <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.dot" title="Status dot" />
       </template>
     </Variant>
 

package/src/components/BasePill.vue

@@ -28,6 +28,8 @@ interface Props {
   disabled?: boolean
   /** Show icon slot */
   icon?: boolean
+  /** Leading status dot in the pill's tone color */
+  dot?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   removable: false,
   disabled: false,
   icon: false,
+  dot: false,
 })
 
 /**
@@ -64,6 +67,7 @@ function handleRemove(event: MouseEvent) {
       { 'mint-pill--disabled': disabled, 'mint-pill--with-icon': icon },
     ]"
   >
+    <span v-if="dot" class="mint-pill__dot" aria-hidden="true" />
     <span v-if="icon" class="mint-pill__icon">
       <slot name="icon" />
     </span>

package/src/components/BaseTabs.story.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import BaseTabs from './BaseTabs.vue'
 import type { TabItem } from '../types'
 
-const activeTab = ref('overview')
 
 const basicTabs: TabItem[] = [
   { id: 'overview', label: 'Overview' },
@@ -25,12 +23,9 @@ const tabsWithIcons: TabItem[] = [
   { id: 'analysis', label: 'Analysis', icon: '\u{1F52C}' },
 ]
 
-const variants = ['underline', 'pills'] as const
-
 function initPlayground() {
   return {
     activeTab: 'overview',
-    variant: 'underline' as const,
   }
 }
 </script>
@@ -43,7 +38,6 @@ function initPlayground() {
           <BaseTabs
             v-model="state.activeTab"
             :tabs="basicTabs"
-            :variant="state.variant"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
             Active tab: <code>{{ state.activeTab }}</code>
@@ -52,11 +46,6 @@ function initPlayground() {
       </template>
 
       <template #controls="{ state }">
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
-        />
         <HstSelect
           v-model="state.activeTab"
           title="Active Tab"
@@ -65,27 +54,11 @@ function initPlayground() {
       </template>
     </Variant>
 
-    <Variant title="All Variants">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem;">
-        <div v-for="variant in variants" :key="variant">
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ variant }}
-          </p>
-          <BaseTabs
-            v-model="activeTab"
-            :tabs="basicTabs"
-            :variant="variant"
-          />
-        </div>
-      </div>
-    </Variant>
-
     <Variant title="With Badges">
       <div style="padding: 2rem;">
         <BaseTabs
           model-value="inbox"
           :tabs="tabsWithBadges"
-          variant="underline"
         />
       </div>
     </Variant>
@@ -95,7 +68,6 @@ function initPlayground() {
         <BaseTabs
           model-value="plate"
           :tabs="tabsWithIcons"
-          variant="pills"
         />
       </div>
     </Variant>
@@ -105,23 +77,9 @@ function initPlayground() {
         <BaseTabs
           model-value="inbox"
           :tabs="tabsWithBadges"
-          variant="underline"
         />
       </div>
     </Variant>
 
-    <Variant title="Pills — matches SegmentedControl.card">
-      <div style="padding: 2rem; display: flex; justify-content: center;">
-        <BaseTabs
-          v-model="activeTab"
-          variant="pills"
-          :tabs="[
-            { id: 'overview', label: 'Overview' },
-            { id: 'samples', label: 'Samples' },
-            { id: 'results', label: 'Results' },
-          ]"
-        />
-      </div>
-    </Variant>
   </Story>
 </template>

package/src/components/BaseTabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Renders a tab bar with underline or pills variant, badges, icons, and disabled tab support. */
+/** Renders an underline tab bar with mono count badges, icons, and disabled tab support. */
 import { computed, type ComponentPublicInstance } from 'vue'
 import type { TabItem, TabItemInput } from '../types'
 import { normalizeItemInput } from '../utils/items'
@@ -8,12 +8,9 @@ import { useRovingFocus } from '../composables/useRovingFocus'
 interface Props {
   modelValue: string
   tabs: TabItemInput[]
-  variant?: 'underline' | 'pills'
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'underline',
-})
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: string]
@@ -55,7 +52,7 @@ const { handleKeydown } = useRovingFocus({
 </script>
 
 <template>
-  <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
+  <div class="mint-tabs mint-tabs--underline" role="tablist">
     <button
       v-for="tab in normalizedTabs"
       :id="`mint-tab-${tab.id}`"

package/src/components/ChartContainer.story.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ChartContainer from './ChartContainer.vue'
+import IconButton from './IconButton.vue'
 </script>
 
 <template>
@@ -109,5 +110,25 @@ import ChartContainer from './ChartContainer.vue'
         </ChartContainer>
       </div>
     </Variant>
+
+    <Variant title="Workbench Frame">
+      <div style="height: 420px; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden;">
+        <ChartContainer variant="frame" empty empty-message="Select a sample to populate this chart">
+          <template #header>
+            <strong style="font-size: 0.8125rem; color: var(--text-primary);">Extracted Ion Chromatogram</strong>
+          </template>
+          <template #toolbar>
+            <IconButton size="sm" label="Reset zoom">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                <path d="M4 4v6h6M20 20v-6h-6M5.5 15a7 7 0 0 0 11.8 2M18.5 9A7 7 0 0 0 6.7 7" />
+              </svg>
+            </IconButton>
+          </template>
+          <template #footer>
+            Retention time (min)
+          </template>
+        </ChartContainer>
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/ChartContainer.vue

@@ -9,27 +9,44 @@ interface Props {
   loading?: boolean
   empty?: boolean
   emptyMessage?: string
+  /** `frame` fills its parent and uses compact workbench chrome. */
+  variant?: 'card' | 'frame'
 }
 
 withDefaults(defineProps<Props>(), {
   loading: false,
   empty: false,
   emptyMessage: 'No data available',
+  variant: 'card',
 })
+
+defineSlots<{
+  default?: () => unknown
+  header?: () => unknown
+  toolbar?: () => unknown
+  subhead?: () => unknown
+  empty?: () => unknown
+  legend?: () => unknown
+  footer?: () => unknown
+}>()
 </script>
 
 <template>
-  <div class="mint-chart">
-    <div v-if="title || description || $slots.toolbar" class="mint-chart__header">
-      <div v-if="title || description" class="mint-chart__header-text">
-        <h3 v-if="title" class="mint-chart__title">{{ title }}</h3>
-        <p v-if="description" class="mint-chart__description">{{ description }}</p>
-      </div>
+  <div :class="['mint-chart', `mint-chart--${variant}`]">
+    <div v-if="title || description || $slots.header || $slots.toolbar" class="mint-chart__header">
+      <slot name="header">
+        <div v-if="title || description" class="mint-chart__header-text">
+          <h3 v-if="title" class="mint-chart__title">{{ title }}</h3>
+          <p v-if="description" class="mint-chart__description">{{ description }}</p>
+        </div>
+      </slot>
       <div v-if="$slots.toolbar" class="mint-chart__toolbar">
         <slot name="toolbar" />
       </div>
     </div>
 
+    <slot name="subhead" />
+
     <div class="mint-chart__body">
       <!-- Loading overlay -->
       <div v-if="loading" class="mint-chart__loading-overlay">
@@ -56,5 +73,9 @@ withDefaults(defineProps<Props>(), {
     <div v-if="$slots.legend" class="mint-chart__legend">
       <slot name="legend" />
     </div>
+
+    <div v-if="$slots.footer" class="mint-chart__footer">
+      <slot name="footer" />
+    </div>
   </div>
 </template>

package/src/components/ChemicalFormula.story.vue

@@ -98,5 +98,12 @@ const formulas = [
         </div>
       </div>
     </Variant>
+
+    <Variant title="Formula with Adduct">
+      <div style="display: flex; gap: 1rem; padding: 2rem; align-items: center;">
+        <ChemicalFormula formula="C6H12O6" adduct="[M+H]+" size="sm" />
+        <ChemicalFormula formula="C3H6O3" adduct="[M-H]-" size="sm" pill tone="secondary" />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/ChemicalFormula.vue

@@ -1,17 +1,32 @@
 <script setup lang="ts">
-/** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. */
+/** Renders a chemical formula and optional MS adduct with typographically correct subscripts and charges. */
+import { computed } from 'vue'
 import { useChemicalFormula, type FormulaPart } from '../composables/useChemicalFormula'
+import AdductText from './AdductText.vue'
 
 interface Props {
-  formula: string
+  formula?: string | null
   inline?: boolean
+  adduct?: string | null
+  emptyText?: string
+  pill?: boolean
+  size?: 'xs' | 'sm' | 'inherit'
+  tone?: 'primary' | 'secondary' | 'muted'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
+  formula: null,
   inline: true,
+  adduct: null,
+  emptyText: '-',
+  pill: false,
+  size: 'inherit',
+  tone: 'primary',
 })
 
 const { renderFormulaParts } = useChemicalFormula()
+const formula = computed(() => props.formula?.trim() ?? '')
+const title = computed(() => [formula.value, props.adduct?.trim()].filter(Boolean).join(' '))
 
 function getParts(f: string): FormulaPart[] {
   return renderFormulaParts(f)
@@ -21,15 +36,29 @@ function getParts(f: string): FormulaPart[] {
 <template>
   <component
     :is="inline ? 'span' : 'div'"
-    :class="['mint-chem-formula', !inline ? 'mint-chem-formula--block' : '']"
+    :class="[
+      'mint-chem-formula',
+      !inline ? 'mint-chem-formula--block' : '',
+      `mint-chem-formula--${size}`,
+      `mint-chem-formula--${tone}`,
+      { 'mint-chem-formula--pill': pill, 'mint-chem-formula--empty': !formula },
+    ]"
+    :title="title || undefined"
   >
-    <template v-for="(part, i) in getParts(formula)" :key="i">
-      <span v-if="part.type === 'element'" class="mint-chem-formula__element">{{ part.text }}</span>
-      <span v-else-if="part.type === 'subscript'" class="mint-chem-formula__subscript">{{ part.text }}</span>
-      <span v-else-if="part.type === 'superscript'" class="mint-chem-formula__superscript">{{ part.text }}</span>
-      <span v-else-if="part.type === 'paren'" class="mint-chem-formula__paren">{{ part.text }}</span>
-      <span v-else-if="part.type === 'dot'" class="mint-chem-formula__dot">{{ part.text }}</span>
-      <span v-else-if="part.type === 'charge'" class="mint-chem-formula__charge">{{ part.text }}</span>
+    <template v-if="formula">
+      <span class="mint-chem-formula__formula">
+        <template v-for="(part, i) in getParts(formula)" :key="i">
+          <span v-if="part.type === 'element'" class="mint-chem-formula__element">{{ part.text }}</span>
+          <span v-else-if="part.type === 'subscript'" class="mint-chem-formula__subscript">{{ part.text }}</span>
+          <span v-else-if="part.type === 'superscript'" class="mint-chem-formula__superscript">{{ part.text }}</span>
+          <span v-else-if="part.type === 'paren'" class="mint-chem-formula__paren">{{ part.text }}</span>
+          <span v-else-if="part.type === 'dot'" class="mint-chem-formula__dot">{{ part.text }}</span>
+          <span v-else-if="part.type === 'charge'" class="mint-chem-formula__charge">{{ part.text }}</span>
+        </template>
+      </span>
+      <AdductText v-if="adduct" :value="adduct" size="inherit" />
+      <slot />
     </template>
+    <span v-else>{{ emptyText }}</span>
   </component>
 </template>

package/src/components/FileUploader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Drag-and-drop file upload zone with type filtering, size validation, and folder mode. */
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 interface Props {
   accept?: string
@@ -11,6 +11,9 @@ interface Props {
   mode?: 'file' | 'folder' | 'file+folder'
   /** Hide the selection list when a parent presents the files itself. */
   showFiles?: boolean
+  /** Restore selections owned by a parent form; omitted for internal selection state. */
+  files?: File[]
+  rootName?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,6 +35,12 @@ const inputRef = ref<HTMLInputElement>()
 const selectedFiles = ref<File[]>([])
 const folderName = ref<string | null>(null)
 
+watch(() => [props.files, props.rootName] as const, ([files, rootName]) => {
+  if (files === undefined) return
+  selectedFiles.value = [...files]
+  folderName.value = rootName ?? extractFolderName(files)
+}, { immediate: true })
+
 const isFolder = computed(() => props.mode === 'folder')
 const isMixed = computed(() => props.mode === 'file+folder')
 

package/src/components/FormField.vue

@@ -10,9 +10,13 @@ interface Props {
   showOptional?: boolean
   htmlFor?: string
   fieldId?: string
+  /** `row` puts the label left and the control in a fixed 7.5rem column. Use for numbers, toggles, short enums. */
+  layout?: 'stacked' | 'row'
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  layout: 'stacked',
+})
 
 const errorId = computed(() =>
   props.error && props.fieldId ? `${props.fieldId}-error` : undefined
@@ -26,7 +30,7 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
 </script>
 
 <template>
-  <div class="mint-form-field">
+  <div :class="['mint-form-field', layout === 'row' ? 'mint-form-field--row' : '']">
     <div v-if="label" class="mint-form-field__label-row">
       <label
         :for="htmlFor"
@@ -43,7 +47,10 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
       </span>
     </div>
 
-    <slot :described-by="describedBy" />
+    <div v-if="layout === 'row'" class="mint-form-field__control">
+      <slot :described-by="describedBy" />
+    </div>
+    <slot v-else :described-by="describedBy" />
 
     <p v-if="error" :id="errorId" class="mint-form-field__error" role="alert">
       {{ error }}

package/src/components/GeneratedPathInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { createGeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
 import {
@@ -32,6 +32,13 @@ const emit = defineEmits<{
 }>()
 
 const mode = ref<'file' | 'folder'>('file')
+const selections = computed(() => Array.isArray(props.modelValue)
+  ? props.modelValue
+  : props.modelValue ? [props.modelValue] : [])
+const selectedFiles = computed(() => selections.value.flatMap(selection => selection.files))
+watch(selections, (current) => {
+  if (current.length) mode.value = current.every(selection => selection.rootName) ? 'folder' : 'file'
+}, { immediate: true })
 const artifactOpen = ref(false)
 const artifactLoading = ref(false)
 const artifactError = ref('')
@@ -73,12 +80,7 @@ function selectFiles(
 
 function removeFiles(files: File[]): void {
   const removed = new Set(files)
-  const current = Array.isArray(props.modelValue)
-    ? props.modelValue
-    : props.modelValue
-      ? [props.modelValue]
-      : []
-  const remaining = current.flatMap((selection) => {
+  const remaining = selections.value.flatMap((selection) => {
     const indexes = selection.files
       .map((file, index) => removed.has(file) ? -1 : index)
       .filter(index => index >= 0)
@@ -186,6 +188,8 @@ function artifactFileReference(detail: AnalysisArtifactDetail): ArtifactFileRefe
     <FileUploader
       :key="mode"
       :mode="mode"
+      :files="selectedFiles"
+      :root-name="selections[0]?.rootName"
       :multiple="multiple && mode === 'file'"
       :disabled="disabled"
       @upload="selectFiles"

package/src/components/LayoutResizeHandle.story.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import LayoutResizeHandle from './LayoutResizeHandle.vue'
+
+const width = ref(320)
+</script>
+
+<template>
+  <Story title="Layout/LayoutResizeHandle">
+    <Variant title="Keyboard splitter">
+      <div style="display: flex; height: 16rem; padding: 2rem;">
+        <div :style="{ width: `${width}px`, background: 'var(--bg-secondary)', border: '1px solid var(--border-color)' }">
+          Panel width: {{ width }}px
+        </div>
+        <LayoutResizeHandle
+          v-model="width"
+          orientation="vertical"
+          label="Resize panel"
+          :min="240"
+          :max="480"
+        />
+        <div style="flex: 1; background: var(--bg-tertiary);" />
+      </div>
+    </Variant>
+  </Story>
+</template>