@w5-ui/svelte 0.2.1 → 0.4.0

package/src/lib/components/Topbar.svelte

@@ -1,10 +1,27 @@
 <script module lang="ts">
+  import type { AppLogoKey } from '@w5-ui/assets';
+
+  /** Logo identifier. Either a built-in `AppLogoKey` (resolved via
+   *  `@w5-ui/assets`'s `appLogos` map) or a raw URL string — use the
+   *  latter when the consuming app wants to brand an entry with its
+   *  own image without having to upstream a new asset into the
+   *  design system. */
+  export type AppLogo = AppLogoKey | (string & {})
   export interface AppDef { id: string; label: string; logo: AppLogo }
+  export type TopbarStatus = 'ok' | 'warn' | 'danger' | 'neutral';
 </script>
 
 <script lang="ts">
-  
-  import { appLogos, type AppLogoKey as AppLogo } from '@w5-ui/assets';
+  import type { Snippet } from 'svelte';
+  import { appLogos, type AppLogoKey } from '@w5-ui/assets';
+
+  /** Resolve an `AppLogo` to an `<img src>` URL. Known keys go
+   *  through the bundled `appLogos` map; anything else is treated as
+   *  a URL the consumer supplied directly. */
+  function resolveLogo(logo: string): string {
+    if (logo in appLogos) return appLogos[logo as AppLogoKey]
+    return logo
+  }
   import IconButton from './IconButton.svelte';
   import Avatar from './Avatar.svelte';
   import CaretIcon from '../icons/CaretIcon.svelte';
@@ -25,6 +42,21 @@
     apps?: AppDef[];
     initials?: string;
     notificationCount?: number;
+    /** Health colour of the site-name status ring. Defaults to 'ok' (green). */
+    status?: TopbarStatus;
+    /** Optional URL of a square logo (or w5-ui `AppLogoKey`) to render in
+     *  place of the status dot, next to `siteName`. The status colour
+     *  becomes a thin ring AROUND the logo so the health signal is
+     *  preserved without claiming a dedicated dot. Falls back to the
+     *  classic status-dot layout when undefined. */
+    siteLogo?: AppLogo;
+    /** When false, the site label renders as a static element instead of a
+     * site-switcher dropdown trigger. Use for single-site dashboards. */
+    siteSwitchable?: boolean;
+    /** Custom right-side actions snippet. When provided, replaces the default
+     * Search/Updates/Notifications/Help/Avatar block in full. Use to slot in
+     * app-specific controls (theme toggle, status pill, etc.). */
+    actions?: Snippet;
     onappchange?: (payload: string) => void;
   }
 
@@ -34,44 +66,145 @@
     apps = DEFAULT_APPS,
     initials = 'MS',
     notificationCount = 1,
+    status = 'ok',
+    siteLogo,
+    siteSwitchable = true,
+    actions,
     onappchange,
   }: Props = $props();
+
+  // Status-ring colour mapping. We pre-compose the Tailwind class strings here
+  // (rather than inline) so the consumer's Tailwind compiler picks them up
+  // unambiguously via static-string scanning.
+  // Ring background opacities chosen to match dashboard.css exactly
+  // (`.status-ring { background: rgba(<colour>, 0.18) }`).
+  const RING_BG: Record<TopbarStatus, string> = {
+    ok: 'bg-status-success/18',
+    warn: 'bg-status-warning/18',
+    danger: 'bg-status-danger/18',
+    neutral: 'bg-status-neutral/18',
+  };
+  const RING_DOT: Record<TopbarStatus, string> = {
+    ok: 'bg-status-success',
+    warn: 'bg-status-warning',
+    danger: 'bg-status-danger',
+    neutral: 'bg-status-neutral',
+  };
+  /** Solid-colour ring drawn AROUND the site logo (when `siteLogo` is
+   *  set) so the health signal stays visible without the dot+halo
+   *  treatment. Pre-composed for the Tailwind static scanner. */
+  const LOGO_RING: Record<TopbarStatus, string> = {
+    ok: 'ring-status-success',
+    warn: 'ring-status-warning',
+    danger: 'ring-status-danger',
+    neutral: 'ring-status-neutral',
+  };
+
+  let ringWrapClass = $derived(
+    `inline-flex h-[18px] w-[18px] items-center justify-center rounded-full ${RING_BG[status]}`,
+  );
+  let ringDotClass = $derived(`h-2 w-2 rounded-full ${RING_DOT[status]}`);
+  let logoRingClass = $derived(
+    `inline-flex h-6 w-6 items-center justify-center overflow-hidden rounded-full ring-2 ring-inset ${LOGO_RING[status]}`,
+  );
 </script>
 
-<header class="topbar">
-  <button type="button" class="site-switch" aria-label="Switch site: {siteName}" aria-haspopup="menu">
-    <span class="status-ring"></span>
-    <span class="site-name" aria-hidden="true">{siteName}</span>
-    <CaretIcon class="caret" />
-  </button>
-  <nav class="app-tabs" aria-label="Apps">
+<!--
+  Motif-aware chrome: surfaces resolve via `var(--bg-page)`, text via
+  `var(--text-1)`, borders via `var(--border-1)`. In dark motif the
+  values still resolve to the original `#0a0a0b` / `#ffffff` /
+  rgba(255,255,255,0.06) so the baseline look is unchanged. Light motif
+  flips them to `#ffffff` / `#0a0a0b` / `#ececee`.
+-->
+<header
+  class="flex h-12 shrink-0 items-center gap-0 bg-bg-page px-2"
+>
+  {#if siteSwitchable}
+    <button
+      type="button"
+      class="flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-row-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      aria-label="Switch site: {siteName}"
+      aria-haspopup="menu"
+      title={`${siteName} — status: ${status}`}
+    >
+      {#if siteLogo !== undefined}
+        <span class={logoRingClass} aria-hidden="true">
+          <img src={resolveLogo(siteLogo)} alt="" width="24" height="24" class="h-full w-full object-cover" />
+        </span>
+      {:else}
+        <span class={ringWrapClass}><span class={ringDotClass}></span></span>
+      {/if}
+      <span class="text-13 font-medium text-text-1" aria-hidden="true">{siteName}</span>
+      <CaretIcon class="h-3.5 w-3.5 text-text-3" />
+    </button>
+  {:else}
+    <div
+      class="flex items-center gap-2 px-2.5 py-1.5"
+      role="presentation"
+      title={`${siteName} — status: ${status}`}
+    >
+      {#if siteLogo !== undefined}
+        <span class={logoRingClass} aria-hidden="true">
+          <img src={resolveLogo(siteLogo)} alt="" width="24" height="24" class="h-full w-full object-cover" />
+        </span>
+      {:else}
+        <span class={ringWrapClass}><span class={ringDotClass}></span></span>
+      {/if}
+      <span class="text-13 font-medium text-text-1">{siteName}</span>
+    </div>
+  {/if}
+
+  <nav class="ml-3.5 flex h-12 items-center gap-0.5" aria-label="Apps">
     {#each apps as a (a.id)}
       <button
         type="button"
-        class="app-tab {a.id === activeApp ? 'active' : ''}"
+        class="flex h-12 w-16 cursor-pointer flex-col items-center justify-center py-1.5 transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05
+          {a.id === activeApp
+            ? 'bg-bg-1 text-text-1'
+            : 'bg-transparent text-text-3 hover:text-text-1'}"
         aria-current={a.id === activeApp ? 'page' : undefined}
         onclick={() => { activeApp = a.id; onappchange?.(a.id); }}
       >
-        <img src={appLogos[a.logo]} alt="" width="24" height="24" />
-        <span class="label">{a.label}</span>
+        <img
+          src={resolveLogo(a.logo)}
+          alt=""
+          width="24"
+          height="24"
+          class="transition-[opacity,filter] duration-150
+            {a.id === activeApp
+              ? 'opacity-100 dark:brightness-[1.6]'
+              : 'opacity-65 hover:opacity-90 dark:hover:brightness-[1.4]'}"
+        />
+        <span class="mt-0.5 text-[10px] font-medium leading-none">{a.label}</span>
       </button>
     {/each}
   </nav>
-  <div class="topbar-spacer"></div>
-  <div class="topbar-right">
-    <IconButton aria-label="Search" title="Search"><SearchIcon /></IconButton>
-    <IconButton aria-label="Updates" title="Updates"><UpdatesIcon /></IconButton>
-    <IconButton
-      aria-label={notificationCount > 0 ? `Notifications, ${notificationCount} new` : 'Notifications'}
-      title="Notifications"
-      style="position:relative;"
-    >
-      <BellIcon />
-      {#if notificationCount > 0}
-        <span aria-hidden="true" style="position:absolute;top:6px;right:6px;width:6px;height:6px;background:#F03A3A;border-radius:50%;border:1.5px solid #0A0A0B;"></span>
-      {/if}
-    </IconButton>
-    <IconButton aria-label="Help" title="Help"><HelpIcon /></IconButton>
-    <Avatar initials={initials} size="sm" alt="Account, {initials}" />
+
+  <div class="flex-1"></div>
+
+  <div class="flex items-center gap-1 pr-2">
+    {#if actions}
+      {@render actions()}
+    {:else}
+      <IconButton aria-label="Search" title="Search"><SearchIcon /></IconButton>
+      <IconButton aria-label="Updates" title="Updates"><UpdatesIcon /></IconButton>
+      <IconButton
+        aria-label={notificationCount > 0
+          ? `Notifications, ${notificationCount} new`
+          : 'Notifications'}
+        title="Notifications"
+        class="relative"
+      >
+        <BellIcon />
+        {#if notificationCount > 0}
+          <span
+            aria-hidden="true"
+            class="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full border-[1.5px] border-bg-page bg-status-danger"
+          ></span>
+        {/if}
+      </IconButton>
+      <IconButton aria-label="Help" title="Help"><HelpIcon /></IconButton>
+      <Avatar initials={initials} size="sm" alt="Account, {initials}" class="ml-1" />
+    {/if}
   </div>
 </header>

package/src/lib/components/TopbarActions.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import IconButton from './IconButton.svelte';
+  import Avatar from './Avatar.svelte';
+  import SearchIcon from '../icons/SearchIcon.svelte';
+  import UpdatesIcon from '../icons/UpdatesIcon.svelte';
+  import BellIcon from '../icons/BellIcon.svelte';
+  import HelpIcon from '../icons/HelpIcon.svelte';
+
+  interface Props {
+    /** Avatar initials shown in the trailing account chip. */
+    initials?: string;
+    /** Unread count surfaced via the bell `aria-label` and the red dot
+     * overlay. `0` hides the dot. */
+    notificationCount?: number;
+  }
+
+  let { initials = 'MS', notificationCount = 1 }: Props = $props();
+</script>
+
+<!--
+  The canonical right-side action group inside <Topbar>: Search, Updates,
+  Notifications (with red dot overlay when unread), Help, and the account
+  <Avatar>. Renders the same five controls in the same order and with the
+  same Tailwind chrome as the default block inside <Topbar> itself, so
+  passing <Topbar actions={...}>{<TopbarActions />}</> behaves identically
+  to omitting the snippet.
+
+  Use it when userland wants to slot extra controls (theme toggle, status
+  pill, environment switch) _alongside_ the canonical block rather than
+  replace it. Compose your custom controls plus <TopbarActions /> and the
+  Topbar keeps the search / bell / avatar rhythm the reference dashboard
+  ships without copying classes, icons, or the inline notif span.
+-->
+<IconButton aria-label="Search" title="Search"><SearchIcon /></IconButton>
+<IconButton aria-label="Updates" title="Updates"><UpdatesIcon /></IconButton>
+<IconButton
+  aria-label={notificationCount > 0
+    ? `Notifications, ${notificationCount} new`
+    : 'Notifications'}
+  title="Notifications"
+  class="relative"
+>
+  <BellIcon />
+  {#if notificationCount > 0}
+    <span
+      aria-hidden="true"
+      class="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full border-[1.5px] border-bg-page bg-status-danger"
+    ></span>
+  {/if}
+</IconButton>
+<IconButton aria-label="Help" title="Help"><HelpIcon /></IconButton>
+<Avatar initials={initials} size="sm" alt="Account, {initials}" class="ml-1" />

package/src/lib/components/TransferList.svelte

@@ -107,22 +107,30 @@
       moveLeft(selTgt);
     }
   }
+
+  const PANEL_CLS = 'flex min-w-0 flex-1 flex-col gap-1.5 rounded-lg border border-border-1 bg-divider p-2';
+  const HEADER_CLS = 'flex items-center justify-between px-1 text-12 font-semibold uppercase tracking-[0.05em] text-text-3';
+  const COUNT_CLS = 'rounded bg-row-active px-1.5 py-0.5 text-11 text-text-4 tabular-nums';
+  const LIST_CLS = 'm-0 flex max-h-[240px] list-none flex-col gap-0.5 overflow-y-auto p-0 focus:outline-none';
+  const ITEM_CLS = 'flex cursor-pointer flex-col items-start gap-0 rounded px-2 py-1.5 text-13 text-text-2 hover:bg-row-hover aria-selected:bg-brand-05/[0.18] aria-selected:text-text-1 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-05';
+  const EMPTY_CLS = 'rounded px-2 py-3 text-center text-11 text-text-4';
+  const BTN_CLS = 'inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded border border-border-2 bg-transparent text-13 text-text-3 hover:bg-row-hover hover:text-text-1 disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05';
 </script>
 
-<div class="tl {className}">
-  <div class="tl__panel">
-    <div class="tl__header">
-      {sourceLabel} <span class="tl__count">{source.length}</span>
+<div class="flex items-start gap-3 {className}">
+  <div class={PANEL_CLS}>
+    <div class={HEADER_CLS}>
+      {sourceLabel} <span class={COUNT_CLS}>{source.length}</span>
     </div>
     <ul
       role="listbox"
       aria-label={sourceLabel}
       aria-multiselectable="true"
-      class="tl__list"
+      class={LIST_CLS}
       onkeydown={srcKey}
     >
       {#if source.length === 0}
-        <li class="tl__empty" role="option" aria-selected="false" aria-disabled="true">Empty</li>
+        <li class={EMPTY_CLS} role="option" aria-selected="false" aria-disabled="true">Empty</li>
       {:else}
         {#each source as item, i (item.id)}
           <li
@@ -130,46 +138,46 @@
             role="option"
             aria-selected={selSrc.has(item.id)}
             tabindex={i === focSrc ? 0 : -1}
-            class="tl__item{selSrc.has(item.id) ? ' tl__item--sel' : ''}"
+            class={ITEM_CLS}
             onclick={() => { focSrc = i; toggleSrc(item.id); }}
             onkeydown={(e) => { if (e.key === ' ') { e.preventDefault(); focSrc = i; toggleSrc(item.id); } }}
           >
-            <span class="tl__item-label">{item.label}</span>
-            {#if item.description}<span class="tl__item-desc">{item.description}</span>{/if}
+            <span>{item.label}</span>
+            {#if item.description}<span class="text-11 text-text-4">{item.description}</span>{/if}
           </li>
         {/each}
       {/if}
     </ul>
   </div>
 
-  <div class="tl__controls" role="group" aria-label="Transfer controls">
-    <button type="button" class="tl__btn" aria-label="Move all to {targetLabel}"
+  <div class="flex flex-col items-center gap-1 pt-7" role="group" aria-label="Transfer controls">
+    <button type="button" class={BTN_CLS} aria-label={`Move all to ${targetLabel}`}
       disabled={source.length === 0}
       onclick={() => moveRight(new Set(source.map((i) => i.id)))}>»</button>
-    <button type="button" class="tl__btn" aria-label="Move selected to {targetLabel}"
+    <button type="button" class={BTN_CLS} aria-label={`Move selected to ${targetLabel}`}
       disabled={selSrc.size === 0}
       onclick={() => moveRight(selSrc)}>›</button>
-    <button type="button" class="tl__btn" aria-label="Move selected back to {sourceLabel}"
+    <button type="button" class={BTN_CLS} aria-label={`Move selected back to ${sourceLabel}`}
       disabled={selTgt.size === 0}
       onclick={() => moveLeft(selTgt)}>‹</button>
-    <button type="button" class="tl__btn" aria-label="Move all back to {sourceLabel}"
+    <button type="button" class={BTN_CLS} aria-label={`Move all back to ${sourceLabel}`}
       disabled={target.length === 0}
       onclick={() => moveLeft(new Set(target.map((i) => i.id)))}>«</button>
   </div>
 
-  <div class="tl__panel">
-    <div class="tl__header">
-      {targetLabel} <span class="tl__count">{target.length}</span>
+  <div class={PANEL_CLS}>
+    <div class={HEADER_CLS}>
+      {targetLabel} <span class={COUNT_CLS}>{target.length}</span>
     </div>
     <ul
       role="listbox"
       aria-label={targetLabel}
       aria-multiselectable="true"
-      class="tl__list"
+      class={LIST_CLS}
       onkeydown={tgtKey}
     >
       {#if target.length === 0}
-        <li class="tl__empty" role="option" aria-selected="false" aria-disabled="true">Empty</li>
+        <li class={EMPTY_CLS} role="option" aria-selected="false" aria-disabled="true">Empty</li>
       {:else}
         {#each target as item, i (item.id)}
           <li
@@ -177,12 +185,12 @@
             role="option"
             aria-selected={selTgt.has(item.id)}
             tabindex={i === focTgt ? 0 : -1}
-            class="tl__item{selTgt.has(item.id) ? ' tl__item--sel' : ''}"
+            class={ITEM_CLS}
             onclick={() => { focTgt = i; toggleTgt(item.id); }}
             onkeydown={(e) => { if (e.key === ' ') { e.preventDefault(); focTgt = i; toggleTgt(item.id); } }}
           >
-            <span class="tl__item-label">{item.label}</span>
-            {#if item.description}<span class="tl__item-desc">{item.description}</span>{/if}
+            <span>{item.label}</span>
+            {#if item.description}<span class="text-11 text-text-4">{item.description}</span>{/if}
           </li>
         {/each}
       {/if}

package/src/lib/components/TreeItem.svelte

@@ -17,12 +17,7 @@
     focusedId: string;
   }
 
-  let {
-    node,
-    expanded,
-    selected,
-    focusedId
-  }: Props = $props();
+  let { node, expanded, selected, focusedId }: Props = $props();
 
   let hasChildren = $derived(!!node.children?.length);
   let isExpanded = $derived(expanded.has(node.id));
@@ -35,15 +30,18 @@
   aria-selected={isSelected}
   tabindex={focusedId === node.id ? 0 : -1}
   data-tree-id={node.id}
-  class="tree__item"
+  class="list-none"
 >
-  <div class="tree__row{isSelected ? ' tree__row--selected' : ''}">
+  <div
+    data-selected={isSelected ? 'true' : undefined}
+    class="flex items-center gap-2 rounded px-2 py-1 text-13 text-text-2 hover:bg-row-hover data-[selected=true]:bg-brand-05/[0.18] data-[selected=true]:text-text-1"
+  >
     {#if hasChildren}
       <svg
-        class="tree__chevron{isExpanded ? ' tree__chevron--open' : ''}"
         viewBox="0 0 12 12"
         fill="none"
         aria-hidden="true"
+        class="h-3 w-3 shrink-0 text-text-4 transition-transform duration-100 motion-reduce:transition-none {isExpanded ? 'rotate-90' : ''}"
       >
         <path
           d="M4 2l4 4-4 4"
@@ -54,13 +52,13 @@
         />
       </svg>
     {:else}
-      <span class="tree__indent" aria-hidden="true"></span>
+      <span class="inline-block w-3 shrink-0" aria-hidden="true"></span>
     {/if}
-    <span class="tree__label">{node.label}</span>
-    {#if node.meta}<span class="tree__meta">{node.meta}</span>{/if}
+    <span class="flex-1 truncate">{node.label}</span>
+    {#if node.meta}<span class="text-11 text-text-4">{node.meta}</span>{/if}
   </div>
   {#if hasChildren && isExpanded && node.children}
-    <ul role="group" class="tree__group">
+    <ul role="group" class="m-0 list-none pl-4">
       {#each node.children as child (child.id)}
         <TreeItem
           node={child}

package/src/lib/components/Unit.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<!--
+  Small inline label that trails a hero number inside a .stat row or a <Card>
+  title row (e.g. "Mbps · down", "Last 24 h", "ms · jitter band"). Renders a
+  <span class="unit"> so the .unit rule in @w5-ui/tokens/dashboard.css sets
+  the canonical muted colour, 12 px size, and inline-block rhythm. Stops
+  userland reaching for inline font-size / color overrides next to bare
+  numbers. Pair with <Stat> (which already wires this internally) for hero
+  tiles, or compose by hand inside a <Card> when the number sits above a
+  chart.
+-->
+<span class="unit {className}">
+  {@render children?.()}
+</span>

package/src/lib/components/VirtualList.svelte

@@ -14,7 +14,7 @@
     height = 400,
     label = undefined,
     overscan = 3,
-    children
+    children,
   }: Props = $props();
 
   let scrollTop = $state(0);
@@ -22,27 +22,30 @@
   let totalHeight = $derived(items.length * itemHeight);
   let firstVisible = $derived(Math.floor(scrollTop / itemHeight));
   let startIndex = $derived(Math.max(0, firstVisible - overscan));
-  let endIndex = $derived(Math.min(items.length, firstVisible + Math.ceil(height / itemHeight) + overscan + 1));
-  let visible = $derived(items.slice(startIndex, endIndex).map((item, i) => ({ item, index: startIndex + i })));
+  let endIndex = $derived(
+    Math.min(items.length, firstVisible + Math.ceil(height / itemHeight) + overscan + 1),
+  );
+  let visible = $derived(
+    items.slice(startIndex, endIndex).map((item, i) => ({ item, index: startIndex + i })),
+  );
 </script>
 
 <div
   role="list"
   aria-label={label}
-  class="vl"
+  class="relative overflow-y-auto"
   style:height="{height}px"
-  style:overflow-y="auto"
   onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
 >
-  <div style:height="{totalHeight}px" style:position="relative">
-    <div style:position="absolute" style:top="{startIndex * itemHeight}px" style:width="100%">
+  <div class="relative" style:height="{totalHeight}px">
+    <div class="absolute left-0 right-0" style:top="{startIndex * itemHeight}px">
       {#each visible as { item, index } (index)}
         <div
           role="listitem"
+          class="overflow-hidden"
           style:height="{itemHeight}px"
-          style:overflow="hidden"
         >
-          {@render children?.({ item, index, })}
+          {@render children?.({ item, index })}
         </div>
       {/each}
     </div>

package/src/lib/index.ts

@@ -28,6 +28,7 @@ export { default as Signal } from './components/Signal.svelte'
 export { default as StatusIndicator } from './components/StatusIndicator.svelte'
 export { default as Donut } from './components/Donut.svelte'
 export { default as Topbar } from './components/Topbar.svelte'
+export type { AppDef, TopbarStatus } from './components/Topbar.svelte'
 export { default as Sidebar } from './components/Sidebar.svelte'
 export type { SidebarSectionDef, SidebarItemDef } from './components/Sidebar.svelte'
 export { default as Skeleton } from './components/Skeleton.svelte'
@@ -271,5 +272,41 @@ export type {
   GroupedListGroup,
   GroupedListItemStatus,
 } from './components/GroupedList.svelte'
+export { default as PageHeader } from './components/PageHeader.svelte'
+export { default as AppLayout } from './components/AppLayout.svelte'
+export { default as Grid } from './components/Grid.svelte'
+export { default as FieldStack } from './components/FieldStack.svelte'
+export { default as FormRow } from './components/FormRow.svelte'
+export { default as FormActions } from './components/FormActions.svelte'
+export { default as TableShell } from './components/TableShell.svelte'
+export { default as TablePager } from './components/TablePager.svelte'
+export { default as Submeta } from './components/Submeta.svelte'
+export { default as Delta } from './components/Delta.svelte'
+export { default as CardMore } from './components/CardMore.svelte'
+export { default as Unit } from './components/Unit.svelte'
+export { default as StatNumber } from './components/StatNumber.svelte'
+export { default as CardTitle } from './components/CardTitle.svelte'
+export { default as Mac } from './components/Mac.svelte'
+export { default as NameCell } from './components/NameCell.svelte'
+export { default as SrOnly } from './components/SrOnly.svelte'
+export { default as NotifDot } from './components/NotifDot.svelte'
+export { default as StatusRing } from './components/StatusRing.svelte'
+export { default as TopbarActions } from './components/TopbarActions.svelte'
+export { default as Muted } from './components/Muted.svelte'
+export { default as Code } from './components/Code.svelte'
+export { default as Eyebrow } from './components/Eyebrow.svelte'
+export { default as Mono } from './components/Mono.svelte'
+export { default as Caption } from './components/Caption.svelte'
+export { default as BodyLg } from './components/BodyLg.svelte'
+export { default as Body } from './components/Body.svelte'
+export { default as Label } from './components/Label.svelte'
+export { default as Display1 } from './components/Display1.svelte'
+export { default as Display2 } from './components/Display2.svelte'
+export { default as H1 } from './components/H1.svelte'
+export { default as H2 } from './components/H2.svelte'
+export { default as H3 } from './components/H3.svelte'
+export { default as H4 } from './components/H4.svelte'
 
 export * from './icons.js'
+
+export { portal } from './actions/portal.ts'