@morscherlab/mint-sdk 1.2.0 → 1.2.1

package/src/components/AppSidebar.vue

@@ -3,8 +3,9 @@
  * AppSidebar - Context-sensitive toolkit panel
  *
  * Shows tool sections relevant to the active view. Sections are defined via
- * the `panels` config and rendered as CollapsibleCards. Controls can be
- * provided through named slots or auto-rendered from FormBuilder schemas.
+ * 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.
  *
  * When activeView is omitted, the first non-empty panel view is selected.
  * When no view has matching panels, the sidebar hides entirely.
@@ -15,7 +16,7 @@
  * ```
  */
 import { computed, ref, useSlots, type Slots } from 'vue'
-import type { PillNavItem, SidebarToolSection } from '../types'
+import type { PillNavItem, SidebarToolSection, SidebarToolSectionAction } from '../types'
 import type { FormEnhancements, FormSchema } from '../types/form-builder'
 import {
   controlsToSectionFormSchemas,
@@ -28,7 +29,6 @@ import {
   type ControlSchema,
   type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
-import CollapsibleCard from './CollapsibleCard.vue'
 import FormBuilder from './FormBuilder.vue'
 
 interface Props {
@@ -38,17 +38,17 @@ interface Props {
   subtitle?: string
   /** Optional compact badge/count rendered in the chrome header. */
   badge?: string | number
-  /** Visual preset for common plugin sidebars. `analysis` preserves the LEAF-style MINT analysis sidebar design language. */
-  variant?: 'default' | 'analysis'
   /** Map of view IDs to their tool sections */
   panels?: Record<string, SidebarToolSection[]>
   /** Which view's panels to display. Defaults to the first non-empty panel view. */
   activeView?: string
-  /** Floating variant with absolute positioning. Defaults to false for analysis variant. */
+  /** Floating shell with absolute positioning. Prefer letting `AppLayout` own this; it stays for standalone use. */
   floating?: boolean
-  /** Compact layout: smaller headers, tighter spacing, no icon backgrounds */
+  /** Section density. `compact` (default) is the 36px header row; `comfortable` restores the roomier spacing. */
+  density?: 'compact' | 'comfortable'
+  /** @deprecated Compact is now the default. Pass `density="comfortable"` for the roomier layout. */
   dense?: boolean
-  /** Width when visible. Defaults to 20rem for analysis variant, otherwise 280px. */
+  /** Width when visible. */
   width?: string
   /** Position sidebar on left or right side */
   side?: 'left' | 'right'
@@ -88,7 +88,7 @@ interface Props {
   formReadonly?: boolean
   /** Size passed to auto-rendered section forms */
   formSize?: 'sm' | 'md' | 'lg'
-  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to true for analysis variant. */
+  /** Show a built-in collapse/expand button in the sidebar chrome. */
   collapsible?: boolean
   /** Controlled collapsed state. */
   collapsed?: boolean
@@ -106,12 +106,12 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   subtitle: undefined,
   badge: undefined,
-  variant: 'default',
   panels: () => ({}),
   activeView: '',
-  floating: undefined,
-  dense: false,
-  width: undefined,
+  floating: true,
+  density: undefined,
+  dense: undefined,
+  width: '280px',
   side: 'left',
   toggleState: () => ({}),
   forms: () => ({}),
@@ -129,7 +129,7 @@ const props = withDefaults(defineProps<Props>(), {
   formDisabled: false,
   formReadonly: false,
   formSize: 'sm',
-  collapsible: undefined,
+  collapsible: false,
   collapsed: undefined,
   defaultCollapsed: false,
   collapsedWidth: '3rem',
@@ -157,10 +157,20 @@ const collapsedModel = computed({
   },
 })
 
-const isAnalysisVariant = computed(() => props.variant === 'analysis')
-const resolvedFloating = computed(() => props.floating ?? !isAnalysisVariant.value)
-const resolvedWidth = computed(() => props.width ?? (isAnalysisVariant.value ? '20rem' : '280px'))
-const resolvedCollapsible = computed(() => props.collapsible ?? isAnalysisVariant.value)
+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>>({})
+
+function isSectionOpen(section: SidebarToolSection): boolean {
+  return openState.value[section.id] ?? section.defaultOpen !== false
+}
+
+function toggleSection(section: SidebarToolSection) {
+  openState.value[section.id] = !isSectionOpen(section)
+}
 
 const resolvedModel = computed<ControlModelBinding | undefined>(() => {
   return resolveControlModel(props.model)
@@ -224,16 +234,15 @@ const isVisible = computed<boolean>(() =>
 const sidebarClasses = computed<string[]>(() => [
   'mint-sidebar',
   `mint-sidebar--${props.side}`,
-  `mint-sidebar--${props.variant}`,
-  resolvedFloating.value ? 'mint-sidebar--floating' : 'mint-sidebar--static',
-  props.dense ? 'mint-sidebar--dense' : '',
-  resolvedCollapsible.value ? 'mint-sidebar--collapsible' : '',
+  props.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
+  resolvedDensity.value === 'comfortable' ? 'mint-sidebar--comfortable' : '',
+  props.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 : resolvedWidth.value,
+  width: collapsedModel.value ? props.collapsedWidth : props.width,
 }))
 
 function handleFormUpdate(values: Record<string, unknown>) {
@@ -282,6 +291,17 @@ function badgeToneClass(section: SidebarToolSection): string {
   return `mint-sidebar__rail-badge--${section.badgeTone ?? 'cta'}`
 }
 
+function tagToneClass(section: SidebarToolSection): string {
+  return `mint-sidebar__tag--${section.badgeTone ?? 'cta'}`
+}
+
+function actionClasses(action: SidebarToolSectionAction): string[] {
+  return [
+    'mint-sidebar__group-action',
+    action.tone ? `mint-sidebar__group-action--${action.tone}` : '',
+  ]
+}
+
 function mergeSidebarPanels(
   generated: Record<string, SidebarToolSection[]>,
   explicit: Record<string, SidebarToolSection[]>,
@@ -319,7 +339,7 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
   >
     <!-- Header slot / built-in chrome -->
     <div
-      v-if="$slots.header || title || subtitle || badge !== undefined || resolvedCollapsible"
+      v-if="$slots.header || title || subtitle || badge !== undefined || collapsible"
       class="mint-sidebar__header"
     >
       <slot
@@ -335,7 +355,7 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
           <span v-if="badge !== undefined" class="mint-sidebar__badge">{{ badge }}</span>
         </div>
         <button
-          v-if="resolvedCollapsible"
+          v-if="collapsible"
           type="button"
           class="mint-sidebar__collapse-button"
           :aria-label="collapsedModel ? expandButtonLabel : collapseButtonLabel"
@@ -365,41 +385,141 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
       :id="contentId"
       class="mint-sidebar__sections"
     >
-      <CollapsibleCard
+      <div
         v-for="section in activeSections"
         :key="section.id"
-        :title="section.label"
-        :subtitle="section.subtitle"
-        :icon="section.icon"
-        :icon-color="section.iconColor"
-        :icon-bg="section.iconBg"
-        :badge="section.badge"
-        :badge-tone="section.badgeTone"
-        :actions="section.actions"
-        :dense="dense"
-        :default-open="section.defaultOpen !== false"
-        :show-toggle="section.showToggle"
-        :toggle-value="toggleState[section.id] ?? false"
-        @action="handleSectionAction(section.id, $event)"
-        @update:toggle-value="emit('update:toggle', section.id, $event)"
+        :class="['mint-sidebar__group', isSectionOpen(section) ? 'mint-sidebar__group--open' : 'mint-sidebar__group--closed']"
       >
-        <slot :name="`section-${section.id}`">
-          <FormBuilder
-            v-if="resolvedForms[section.id]"
-            :model-value="resolvedValues"
-            :schema="resolvedForms[section.id]"
-            :enhancements="formEnhancements"
-            :loading="formLoading"
-            :disabled="formDisabled"
-            :readonly="formReadonly"
-            :size="formSize"
-            :show-actions="showFormActions"
-            @update:model-value="handleFormUpdate"
-            @submit="handleFormSubmit(section.id, $event)"
-            @cancel="handleFormCancel(section.id)"
-          />
-        </slot>
-      </CollapsibleCard>
+        <div class="mint-sidebar__group-head">
+          <button
+            type="button"
+            class="mint-sidebar__group-toggle"
+            :aria-expanded="isSectionOpen(section)"
+            @click="toggleSection(section)"
+          >
+            <span
+              v-if="section.icon"
+              class="mint-sidebar__group-icon"
+              :style="railIconStyle(section)"
+            >
+              <svg
+                v-if="isSvgIcon(section.icon)"
+                class="mint-sidebar__group-svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <template v-if="Array.isArray(section.icon)">
+                  <path v-for="(d, i) in section.icon" :key="i" :d="d" />
+                </template>
+                <path v-else :d="section.icon" />
+              </svg>
+              <span v-else class="mint-sidebar__group-text-icon">{{ section.icon }}</span>
+            </span>
+            <span class="mint-sidebar__group-copy">
+              <span class="mint-sidebar__group-label">{{ section.label }}</span>
+              <span v-if="section.subtitle" class="mint-sidebar__group-subtitle">{{ section.subtitle }}</span>
+            </span>
+          </button>
+
+          <div class="mint-sidebar__group-tail">
+            <span
+              v-if="section.badge !== undefined"
+              :class="['mint-sidebar__tag', tagToneClass(section)]"
+            >
+              {{ section.badge }}
+            </span>
+
+            <button
+              v-for="action in section.actions ?? []"
+              :key="action.id"
+              type="button"
+              :class="actionClasses(action)"
+              :style="action.iconColor ? { color: action.iconColor } : undefined"
+              :disabled="action.disabled"
+              :aria-label="action.label"
+              :title="action.label"
+              @click="handleSectionAction(section.id, action.id)"
+            >
+              <svg
+                v-if="action.icon && isSvgIcon(action.icon)"
+                class="mint-sidebar__group-action-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <template v-if="Array.isArray(action.icon)">
+                  <path v-for="(d, i) in action.icon" :key="i" :d="d" />
+                </template>
+                <path v-else :d="action.icon" />
+              </svg>
+              <span v-else-if="action.icon">{{ action.icon }}</span>
+            </button>
+
+            <button
+              v-if="section.showToggle"
+              type="button"
+              role="switch"
+              :aria-checked="toggleState[section.id] ?? false"
+              :aria-label="`Enable ${section.label}`"
+              :class="['mint-sidebar__switch', (toggleState[section.id] ?? false) ? 'mint-sidebar__switch--on' : '']"
+              @click="emit('update:toggle', section.id, !(toggleState[section.id] ?? false))"
+            >
+              <span class="mint-sidebar__switch-knob" />
+            </button>
+
+            <button
+              type="button"
+              class="mint-sidebar__chevron-button"
+              :aria-label="isSectionOpen(section) ? 'Collapse section' : 'Expand section'"
+              :aria-expanded="isSectionOpen(section)"
+              @click="toggleSection(section)"
+            >
+              <svg
+                :class="['mint-sidebar__chevron', isSectionOpen(section) ? 'mint-sidebar__chevron--open' : '']"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <Transition name="collapse">
+          <div v-show="isSectionOpen(section)" class="mint-sidebar__group-body">
+            <slot :name="`section-${section.id}`">
+              <FormBuilder
+                v-if="resolvedForms[section.id]"
+                :model-value="resolvedValues"
+                :schema="resolvedForms[section.id]"
+                :enhancements="formEnhancements"
+                :loading="formLoading"
+                :disabled="formDisabled"
+                :readonly="formReadonly"
+                :size="formSize"
+                :show-actions="showFormActions"
+                @update:model-value="handleFormUpdate"
+                @submit="handleFormSubmit(section.id, $event)"
+                @cancel="handleFormCancel(section.id)"
+              />
+            </slot>
+          </div>
+        </Transition>
+      </div>
 
       <slot
         :sections="activeSections"

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/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')