The MIOSA platform owns a Foundation UI primitive set exposed to the Svelte app through the $foundation alias.

Use this surface for platform screens before adding route-local buttons, inputs, cards, modals, tabs, tables, or page chrome.

Owned primitive surface

Import path

<script lang="ts">
  import { GlassCard, PillButton, Alert, Table } from "$foundation";
</script>

The alias is configured in the platform Svelte config and resolves to:

src/lib/foundations-components/src/lib/ui

Compute workspace audit

The Compute workspace was using this surface inconsistently. Shared Compute components often use $foundation, but several top-level Compute routes still hand-roll controls, tables, cards, and page shells with route-local CSS.

Cleanup order

1. Convert route-level actions and empty/error states to PillButton, Alert, Skeleton, and shared empty-state components.
2. Replace raw form controls with RoundedInput, Input, Select, Checkbox, and Toggle.
3. Replace hand-rolled tabs and chips with Tabs or a shared Compute filter-chip component.
4. Replace raw tables and cards with Foundation table primitives or shared Compute table/card components.
5. Collapse repeated shell CSS into shared Compute layout primitives instead of copying page, console, and main CSS per route.

Verification guardrail

Every migrated route should keep passing:

pnpm check
pnpm test:e2e tests/platform-shell-regression.spec.ts --project=chromium
pnpm build

See also

• UI Components overview
• React components
• Vue components
• Svelte components