@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.11

package/src/components/WellPlate.geometry.ts

@@ -37,8 +37,67 @@ export const WELL_PLATE_SIZE_CONFIGS: Record<WellPlateSize, WellPlateSizeConfig>
   fill: { cellWidth: '100%', cellHeight: '32px', headerWidth: '32px', headerHeight: '24px', fontSize: '0.75rem', gap: '2px' },
 }
 
+/**
+ * Spreadsheet-style row label for a zero-based row index: A…Z, then AA, AB, …
+ *
+ * This is the single row-label generator for the SDK — plate grids, rack
+ * grids, well-id parsing and the template builders all go through it.
+ */
+export function rowLabel(index: number): string {
+  let label = ''
+  let current = index
+  for (;;) {
+    label = String.fromCharCode(65 + (current % 26)) + label
+    current = Math.floor(current / 26) - 1
+    if (current < 0) return label
+  }
+}
+
+/** Inverse of {@link rowLabel}: 'A' → 0, 'Z' → 25, 'AA' → 26. */
+export function rowIndex(label: string): number {
+  return [...label].reduce((value, char) => value * 26 + char.charCodeAt(0) - 64, 0) - 1
+}
+
 export function createPlateRowLabels(config: WellPlateConfig): string[] {
-  return Array.from({ length: config.rows }, (_, index) => String.fromCharCode(65 + index))
+  return Array.from({ length: config.rows }, (_, index) => rowLabel(index))
+}
+
+function plateConfigOrThrow(format: number): WellPlateConfig {
+  const config = PLATE_CONFIGS[format as WellPlateFormat]
+  if (!config) throw new Error(`Unsupported plate format '${format}'.`)
+  return config
+}
+
+/** Every well id of a plate, row-major (A1, A2, … B1, …). */
+export function wellIdsForFormat(format: number): string[] {
+  const { rows, cols } = plateConfigOrThrow(format)
+  return Array.from({ length: rows }, (_, row) =>
+    Array.from({ length: cols }, (_col, col) => `${rowLabel(row)}${col + 1}`)
+  ).flat()
+}
+
+/** Throw unless `wellId` names a well that exists on a `format`-well plate. */
+export function assertWellInFormat(wellId: string, format: number): void {
+  const { rows, cols } = plateConfigOrThrow(format)
+  const match = /^([A-Z]+)([1-9][0-9]*)$/.exec(wellId.toUpperCase())
+  if (!match) {
+    throw new Error(`Invalid well id '${wellId}'.`)
+  }
+  const row = rowIndex(match[1])
+  const col = Number(match[2]) - 1
+  if (row < 0 || col < 0 || row >= rows || col >= cols) {
+    throw new Error(`Well '${wellId}' is outside a ${format}-well plate.`)
+  }
+}
+
+/** Coerce an unknown value to a supported plate format, else `fallback`. */
+export function readPlateFormat(value: unknown, fallback: WellPlateFormat): WellPlateFormat {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string'
+      ? Number(value)
+      : Number.NaN
+  return parsed in PLATE_CONFIGS ? (parsed as WellPlateFormat) : fallback
 }
 
 export function createPlateColumnLabels(config: WellPlateConfig): number[] {

package/src/components/WellPlate.interaction.ts

@@ -11,6 +11,7 @@ import {
   type WellPlateCoordinate,
 } from './WellPlate.geometry'
 import { parseDroppedSampleTransfer } from './WellPlate.sampleDrop'
+import { useReorderAnnouncer } from '../composables/useListReorder'
 
 export interface WellPlateInteractionOptions {
   modelValue: () => string[]
@@ -64,6 +65,7 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
   const hoveredWell = ref<string | null>(null)
   const editingWellId = ref<string | null>(null)
   const editPopupPosition = ref({ x: 0, y: 0 })
+  const { announcement, announce, announcerStyle } = useReorderAnnouncer()
 
   const selectedWellSet = computed(() => new Set(options.modelValue()))
 
@@ -215,6 +217,45 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
     dragTargetWell.value = null
   }
 
+  // Keyboard alternative to the well-to-well drag. The plate is a 2D grid, not a
+  // list, so it cannot use `useListReorder`'s index maths: instead Alt+Enter (or
+  // Alt+Space) picks a filled well up, the same chord on another well drops it
+  // there, and Escape cancels. Every step is announced politely.
+  function handleWellMoveKeydown(well: Well, event: KeyboardEvent) {
+    if (options.disabled() || options.readonly() || options.selectionMode() !== 'drag') return
+
+    if (event.key === 'Escape' && dragSourceWell.value) {
+      event.preventDefault()
+      announce(`Move cancelled. ${dragSourceWell.value} stays in place.`)
+      dragSourceWell.value = null
+      dragTargetWell.value = null
+      return
+    }
+
+    if (!event.altKey || (event.key !== 'Enter' && event.key !== ' ')) return
+    event.preventDefault()
+
+    const source = dragSourceWell.value
+    if (!source) {
+      if (!well.sampleType) {
+        announce(`Well ${well.id} is empty and cannot be moved.`)
+        return
+      }
+      dragSourceWell.value = well.id
+      announce(`Well ${well.id} picked up. Move to another well and press Alt and Enter to drop it.`)
+      return
+    }
+
+    if (source !== well.id) {
+      options.emitWellMove(source, well.id)
+      announce(`Well ${source} moved to ${well.id}.`)
+    } else {
+      announce(`Move cancelled. ${source} stays in place.`)
+    }
+    dragSourceWell.value = null
+    dragTargetWell.value = null
+  }
+
   function parseDroppedSample(event: DragEvent, wellId: string): WellSampleDropData | null {
     const customParser = options.sampleDropParser()
     if (customParser) return customParser(event, { wellId, event }) ?? null
@@ -267,6 +308,9 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
     handleDragLeave,
     handleDrop,
     handleDragEnd,
+    handleWellMoveKeydown,
     handleKeyDown,
+    moveAnnouncement: announcement,
+    moveAnnouncerStyle: announcerStyle,
   }
 }

package/src/components/WellPlate.story.vue

@@ -121,6 +121,8 @@ const doseWells = generateDoseWells()
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     format: 96 as WellPlateFormat,
     selectionMode: 'multiple' as WellPlateSelectionMode,
     size: 'md' as WellPlateSize,
@@ -141,6 +143,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <WellPlate
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="selectedWells"
             :format="state.format"
             :wells="generateMockWells(state.format)"
@@ -161,6 +165,10 @@ function initState() {
       </template>
 
       <template #controls="{ state }">
+
+        <HstCheckbox v-model="state.loading" title="Loading" />
+
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.format"
           title="Format"

package/src/components/WellPlate.vue

@@ -32,6 +32,7 @@ import {
   wellStyle,
 } from './WellPlate.rendering'
 import { DEFAULT_WELL_LEGEND_ITEMS } from './WellPlate.legend'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   modelValue?: string[]
@@ -59,6 +60,19 @@ interface Props {
   rowConditions?: RowCondition[]
   allowSampleDrop?: boolean
   sampleDropParser?: WellSampleDropParser
+  /** Replace the plate grid with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the plate grid is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /**
+   * Opt-in empty-state headline. A blank plate is meaningful, so the empty
+   * state only replaces the grid when this message is supplied and no wells
+   * carry data.
+   */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -114,6 +128,12 @@ interface WellEditorSlotProps {
 
 defineSlots<{
   'well-editor'?: (props: WellEditorSlotProps) => unknown
+  /** Replaces the default loading placeholder. */
+  loading?: () => unknown
+  /** Replaces the default error placeholder. */
+  error?: (props: { error: string }) => unknown
+  /** Replaces the default empty placeholder. */
+  empty?: () => unknown
 }>()
 
 const plateRef = ref<HTMLElement | null>(null)
@@ -166,7 +186,10 @@ const {
   handleDragLeave,
   handleDrop,
   handleDragEnd,
+  handleWellMoveKeydown,
   handleKeyDown,
+  moveAnnouncement,
+  moveAnnouncerStyle,
 } = useWellPlateInteraction({
   modelValue: () => props.modelValue,
   selectionMode: () => props.selectionMode,
@@ -233,6 +256,11 @@ const containerStyle = computed(() =>
   }
 )
 
+/** Empty state is opt-in: it needs an `emptyMessage` and a plate with no well data. */
+const showEmptyState = computed(() =>
+  Boolean(props.emptyMessage) && Object.keys(props.wells).length === 0,
+)
+
 const tableStyle = computed(() => ({
   borderCollapse: 'separate' as const,
   borderSpacing: sizeConfig.value.gap,
@@ -246,7 +274,25 @@ const tableStyle = computed(() => ({
     :class="['mint-well-plate', isFillMode ? 'mint-well-plate--fill' : 'mint-well-plate--inline']"
     :style="containerStyle"
   >
-    <div class="mint-well-plate__scroll">
+    <div v-if="error" class="mint-well-plate__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-well-plate__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" loading-label="Loading plate" />
+      </slot>
+    </div>
+
+    <div v-else-if="showEmptyState" class="mint-well-plate__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" :title="emptyMessage" />
+      </slot>
+    </div>
+
+    <div v-else class="mint-well-plate__scroll">
       <div class="mint-well-plate__content">
         <table
           ref="tableRef"
@@ -390,8 +436,9 @@ const tableStyle = computed(() => ({
                 @dragleave="handleDragLeave"
                 @drop="handleDrop(well, $event)"
                 @dragend="handleDragEnd"
-                @keydown.enter="handleWellClick(well, $event as unknown as MouseEvent)"
-                @keydown.space.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
+                @keydown="handleWellMoveKeydown(well, $event)"
+                @keydown.enter.exact="handleWellClick(well, $event as unknown as MouseEvent)"
+                @keydown.space.exact.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
               >
                 <!-- Well label text (from metadata.label) -->
                 <span
@@ -489,9 +536,8 @@ const tableStyle = computed(() => ({
         />
       </slot>
     </template>
+
+    <!-- Keyboard well-move announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="moveAnnouncerStyle">{{ moveAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/well-plate.css';
-</style>

package/src/components/index.ts

@@ -7,12 +7,14 @@ export { default as BaseCheckbox } from './BaseCheckbox.vue'
 export { default as BaseToggle } from './BaseToggle.vue'
 export { default as BaseRadioGroup } from './BaseRadioGroup.vue'
 export { default as BaseSlider } from './BaseSlider.vue'
+/** Range slider with a gradient color track and color-coded value badge for threshold visualization. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `BaseSlider` instead. */
 export { default as ColorSlider } from './ColorSlider.vue'
 export { default as BaseTabs } from './BaseTabs.vue'
 export { default as BaseModal } from './BaseModal.vue'
 export { default as SegmentedControl } from './SegmentedControl.vue'
 export { default as MultiSelect } from './MultiSelect.vue'
 export { default as BasePill } from './BasePill.vue'
+/** Button that opens a dropdown menu for selecting one option from a list. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `ActionMenu` instead. */
 export { default as DropdownButton } from './DropdownButton.vue'
 export { default as Calendar } from './Calendar.vue'
 export { default as DataFrame } from './DataFrame.vue'
@@ -22,6 +24,7 @@ export { default as FormField } from './FormField.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as TimePicker } from './TimePicker.vue'
 export { default as TagsInput } from './TagsInput.vue'
+export { default as SecretInput } from './SecretInput.vue'
 export { default as NumberInput } from './NumberInput.vue'
 export { default as FileUploader } from './FileUploader.vue'
 
@@ -97,11 +100,15 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 
 // Scientific display components
 export { default as ScientificNumber } from './ScientificNumber.vue'
+/** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
 export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
+/** Filterable instrument alert/event list keyed by each alert's required stable event_key. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
 export { default as InstrumentAlertLog } from './InstrumentAlertLog.vue'
 export { default as InstrumentStateBadge } from './InstrumentStateBadge.vue'
+/** Compact card for live instrument monitor status, sample, method, sequence progress, and ETA. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
 export { default as InstrumentStatusCard } from './InstrumentStatusCard.vue'
+/** Table for Xcalibur-compatible LCMS sequence rows with optional reorder/remove/duplicate controls. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
 export { default as LcmsSequenceTable } from './LcmsSequenceTable.vue'
 
 // Scientific input components
@@ -125,8 +132,10 @@ export { default as ExperimentCodeBadge } from './ExperimentCodeBadge.vue'
 
 // Scheduling / booking components
 export { default as DateTimePicker } from './DateTimePicker.vue'
+/** Paired start/end time pickers that validate range order and display computed duration. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `TimePicker` instead. */
 export { default as TimeRangeInput } from './TimeRangeInput.vue'
 export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
+/** Card displaying a lab resource with availability status, specs, tags, and a book action. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
 export { default as ResourceCard } from './ResourceCard.vue'
 export { default as SectionCard } from './SectionCard.vue'
 

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -24,7 +24,7 @@ const emit = defineEmits<{
   select: [page: PageSelectorItem]
 }>()
 
-const { isOpen, rootRef, close, toggle } = useDropdownState()
+const { isOpen, rootRef, triggerRef, close, toggle } = useDropdownState()
 const normalizedPages = computed<PageSelectorItem[]>(() => props.pages.map(normalizeItemInput))
 
 const current = computed<PageSelectorItem | undefined>(() =>
@@ -45,6 +45,7 @@ function handleSelect(page: PageSelectorItem) {
 <template>
   <div ref="rootRef" class="mint-page-selector" :style="{ minWidth }">
     <button
+      ref="triggerRef"
       type="button"
       class="mint-page-selector__trigger"
       :class="{ 'mint-page-selector__trigger--open': isOpen }"
@@ -121,7 +122,3 @@ function handleSelect(page: PageSelectorItem) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../../styles/components/app-page-selector.css';
-</style>

package/src/components/internal/AppTopBarPillNavInternal.vue

@@ -188,7 +188,3 @@ useEventListener(() => document, 'click', handleClickOutside)
     </div>
   </nav>
 </template>
-
-<style>
-@import '../../styles/components/app-pill-nav.css';
-</style>

package/src/components/internal/DataStateInternal.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+/**
+ * Shared loading / error / empty presentation for the SDK data components.
+ *
+ * Internal: not exported from the package entrypoints. Data components render
+ * this instead of hand-rolling their own placeholder markup so that the
+ * loading, error and empty states look the same everywhere.
+ */
+import { computed } from 'vue'
+import EmptyState from '../EmptyState.vue'
+import LoadingSpinner from '../LoadingSpinner.vue'
+
+/** Single-path warning triangle used for the error state. */
+const ERROR_ICON_PATH
+  = 'M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'
+  + 'M12 9v4M12 17h.01'
+
+interface Props {
+  /** Which of the three placeholder states to render. */
+  state: 'loading' | 'error' | 'empty'
+  /** Headline for the empty/error state. */
+  title?: string
+  /** Supporting copy for the empty/error state. */
+  description?: string
+  /** Custom `<path d>` for the empty state icon (the error state has its own). */
+  iconPath?: string
+  /** Placeholder scale; also drives the loading spinner size. */
+  size?: 'sm' | 'md' | 'lg'
+  /** `EmptyState` layout variant. */
+  variant?: 'illustrated' | 'inline'
+  /** Accessible label (and visible caption) for the loading state. */
+  loadingLabel?: string
+  /** Optional call-to-action rendered under the empty/error copy. */
+  actionLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'illustrated',
+  loadingLabel: 'Loading',
+})
+
+const emit = defineEmits<{
+  action: []
+}>()
+
+const spinnerSize = computed(() => (props.size === 'sm' ? 'sm' : props.size === 'lg' ? 'lg' : 'md'))
+</script>
+
+<template>
+  <div
+    :class="['mint-data-state', `mint-data-state--${state}`, `mint-data-state--${size}`]"
+    :data-state="state"
+  >
+    <template v-if="state === 'loading'">
+      <LoadingSpinner :size="spinnerSize" :label="loadingLabel" />
+      <p class="mint-data-state__loading-text" aria-hidden="true">{{ loadingLabel }}</p>
+    </template>
+    <EmptyState
+      v-else
+      :title="title"
+      :description="description"
+      :icon-path="state === 'error' ? ERROR_ICON_PATH : iconPath"
+      :color="state === 'error' ? 'error' : 'muted'"
+      :size="size"
+      :variant="variant"
+      :action-label="actionLabel"
+      @action="emit('action')"
+    >
+      <slot />
+    </EmptyState>
+  </div>
+</template>
+

package/src/components/internal/FormSectionRenderer.vue

@@ -72,7 +72,3 @@ const gridStyle = computed(() => ({
     <slot :name="`section:${section.id}:after`" :form="builder.form" />
   </div>
 </template>
-
-<style>
-@import '../../styles/components/form-builder.css';
-</style>

package/src/components/internal/WellEditPopupInternal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch, computed } from 'vue'
 import type { Well, WellEditData, WellEditField } from '../../types'
 import { useEventListener } from '../../composables/useEventListener'
+import { useFocusTrap } from '../../composables/useFocusTrap'
 
 interface Props {
   wellId: string
@@ -86,6 +87,22 @@ function handleKeydown(e: KeyboardEvent) {
 
 useEventListener(() => document, 'keydown', handleKeydown)
 
+// The popup has no open/close prop of its own — the parent mounts and unmounts it —
+// so the trap activates on mount and releases (restoring focus) just before unmount,
+// the same lifecycle BaseModal drives off `modelValue`.
+const containerRef = ref<HTMLElement | null>(null)
+const trapActive = ref(false)
+
+useFocusTrap({ containerRef, active: trapActive })
+
+onMounted(() => {
+  trapActive.value = true
+})
+
+onBeforeUnmount(() => {
+  trapActive.value = false
+})
+
 const sampleTypeButtons = [
   { type: 'sample', label: 'S', tooltip: 'Sample' },
   { type: 'blank', label: 'B', tooltip: 'Blank' },
@@ -101,8 +118,10 @@ const sampleTypeButtons = [
 
     <!-- Popup -->
     <div
+      ref="containerRef"
       class="mint-well-edit-popup"
       :style="popupStyle"
+      tabindex="-1"
       @click.stop
     >
       <!-- Header -->
@@ -224,7 +243,3 @@ const sampleTypeButtons = [
     </div>
   </Teleport>
 </template>
-
-<style>
-@import '../../styles/components/well-edit-popup.css';
-</style>

package/src/components/internal/WorkspaceControlsInternal.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Internal: renders PluginWorkspaceView's default (main content) slot bound to the
+ * control-schema-derived scoped-slot payload (active view, values, component bindings/props).
+ * Not part of the public SDK surface — see PluginWorkspaceView.vue for the public component.
+ */
+import type { PluginWorkspaceControlsModel } from '../../composables/pluginWorkspaceModel'
+
+defineProps<{
+  controls: PluginWorkspaceControlsModel
+}>()
+
+defineSlots<{
+  default?: (props: PluginWorkspaceControlsModel) => unknown
+}>()
+</script>
+
+<template>
+  <slot v-bind="controls" />
+</template>

package/src/components/internal/WorkspaceShellInternal.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * Internal: AppLayout + AppTopBar for PluginWorkspaceView, driven by a single `shell` model.
+ * Owns the responsive/collapse layout props and the top bar's default rendering; the caller
+ * decides whether to override the `topbar`/`sidebar` slots and supplies the sidebar content.
+ * Not part of the public SDK surface — see PluginWorkspaceView.vue for the public component.
+ */
+import type {
+  AccountMenuItem,
+  PageSelectorItem,
+  PillNavItem,
+  PillNavOption,
+  PluginSwitcherPlugin,
+} from '../../types'
+import AppLayout from '../AppLayout.vue'
+import AppTopBar from '../AppTopBar.vue'
+import type { PluginWorkspaceShellModel } from '../../composables/pluginWorkspaceModel'
+
+defineProps<{
+  shell: PluginWorkspaceShellModel
+}>()
+
+const emit = defineEmits<{
+  'page-selector-select': [page: PageSelectorItem]
+  'pill-select': [item: PillNavItem]
+  'pill-option-select': [option: PillNavOption, item: PillNavItem]
+  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
+  'plugin-switcher-install': []
+  'account-menu-select': [item: AccountMenuItem]
+  'sign-out': []
+  'notifications-click': []
+  'settings-values-change': [data: Record<string, unknown>]
+  'admin-click': []
+}>()
+
+function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
+  emit('pill-option-select', option, item)
+}
+
+defineSlots<{
+  topbar?: (props: PluginWorkspaceShellModel['controls']) => unknown
+  sidebar?: (props: PluginWorkspaceShellModel['controls']) => unknown
+  default?: (props: PluginWorkspaceShellModel['controls']) => unknown
+  icon?: (props: Record<string, unknown>) => unknown
+  logo?: (props: Record<string, unknown>) => unknown
+  'page-selector-icon'?: (props: Record<string, unknown>) => unknown
+  'page-selector-item-icon'?: (props: Record<string, unknown>) => unknown
+  nav?: (props: Record<string, unknown>) => unknown
+  center?: (props: Record<string, unknown>) => unknown
+  actions?: (props: Record<string, unknown>) => unknown
+  'account-menu-items'?: (props: Record<string, unknown>) => unknown
+  'account-menu-item-icon'?: (props: Record<string, unknown>) => unknown
+  'settings-appearance'?: (props: Record<string, unknown>) => unknown
+}>()
+</script>
+
+<template>
+  <AppLayout
+    class="mint-plugin-workspace-view"
+    :sidebar-position="shell.sidebarPosition"
+    :sidebar-width="shell.sidebarWidth"
+    :floating="shell.floating"
+    :responsive-sidebar="shell.responsiveSidebar"
+    :sidebar-toggle-label="shell.sidebarToggleLabel"
+    :sidebar-close-label="shell.sidebarCloseLabel"
+  >
+    <template #topbar>
+      <slot name="topbar" v-bind="shell.controls">
+        <AppTopBar
+          :title="shell.title"
+          :subtitle="shell.subtitle"
+          :variant="shell.topBarVariant"
+          :home-path="shell.homePath"
+          :show-logo="shell.showLogo"
+          :page-selector="shell.pageSelector"
+          :current-page-selector-id="shell.currentPageSelectorId"
+          :plugin-switcher="shell.pluginSwitcher"
+          :pill-nav="shell.pillNav"
+          :current-pill-id="shell.currentPillId"
+          :show-theme-toggle="shell.showThemeToggle"
+          :show-settings="shell.showSettings"
+          :settings-config="shell.settingsConfig"
+          :show-standalone-label="shell.showStandaloneLabel"
+          :standalone-label="shell.standaloneLabel"
+          :account-menu="shell.accountMenu"
+          :show-notifications="shell.showNotifications"
+          :has-notification-dot="shell.hasNotificationDot"
+          :show-admin="shell.showAdmin"
+          :admin-path="shell.adminPath"
+          :user-name="shell.userName"
+          :user-initial="shell.userInitial"
+          :user-email="shell.userEmail"
+          @page-selector-select="emit('page-selector-select', $event)"
+          @pill-select="emit('pill-select', $event)"
+          @pill-option-select="handlePillOptionSelect"
+          @plugin-switcher-select="emit('plugin-switcher-select', $event)"
+          @plugin-switcher-install="emit('plugin-switcher-install')"
+          @account-menu-select="emit('account-menu-select', $event)"
+          @sign-out="emit('sign-out')"
+          @notifications-click="emit('notifications-click')"
+          @settings-values-change="emit('settings-values-change', $event)"
+          @admin-click="emit('admin-click')"
+        >
+          <template
+            v-for="slotName in shell.topBarSlotNames"
+            :key="slotName"
+            #[slotName]="slotProps"
+          >
+            <!-- @vue-ignore dynamic SDK slot forwarding for AppTopBar passthrough slots -->
+            <slot
+              :name="slotName"
+              v-bind="slotProps ?? {}"
+            />
+          </template>
+        </AppTopBar>
+      </slot>
+    </template>
+
+    <template v-if="shell.hasSidebarSurface" #sidebar>
+      <slot name="sidebar" v-bind="shell.controls" />
+    </template>
+
+    <slot v-bind="shell.controls" />
+  </AppLayout>
+</template>