@aiaiai-pt/design-system 0.5.6 → 0.5.8

package/components/GeoSearch.svelte

@@ -1,25 +1,23 @@
 <!--
   @component GeoSearch
 
-  Geocoding search input powered by Nominatim (OpenStreetMap).
-  Wraps Combobox with built-in address/place search and debounced API calls.
-  Emits lon/lat coordinates when a result is selected.
+  Bidirectional geocoding input powered by Nominatim (OpenStreetMap).
+  Forward: type address → get coordinates.
+  Reverse: set `coords` prop → shows resolved address.
   Consumes --combobox-* tokens from components.css.
 
-  @example Basic
+  @example Forward geocoding
   <GeoSearch onlocation={(lon, lat) => console.log(lon, lat)} />
 
-  @example With label and bounding box bias
+  @example Bidirectional (MapPicker sets coords on click → address shows)
   <GeoSearch
-    label="Search location"
-    placeholder="City, address, or place..."
-    viewbox={[-9.5, 38.5, -8.8, 39.0]}
-    onlocation={(lon, lat) => { mapCenter = [lon, lat]; mapZoom = 15; }}
+    bind:coords={pickedCoords}
+    onlocation={(lon, lat) => { mapCenter = [lon, lat]; }}
   />
 
-  @example Custom provider URL
+  @example With viewbox bias
   <GeoSearch
-    providerUrl="https://my-nominatim.example.com/search"
+    viewbox={[-9.5, 38.5, -8.8, 39.0]}
     onlocation={(lon, lat) => console.log(lon, lat)}
   />
 -->
@@ -45,6 +43,8 @@
     viewbox = undefined,
     /** @type {((lon: number, lat: number, item: { label: string, value: string }) => void) | undefined} */
     onlocation = undefined,
+    /** @type {[number, number] | undefined} — set externally to reverse-geocode and show address */
+    coords = $bindable(undefined),
     /** @type {string} */
     class: className = '',
     ...rest
@@ -55,6 +55,36 @@
   let loading = $state(false);
   let value = $state('');
   let debounceTimer = 0;
+  let lastReversed = '';
+
+  // Reverse geocode when coords change (map click or initial load)
+  $effect(() => {
+    if (!coords) return;
+    const key = `${coords[0]},${coords[1]}`;
+    if (key === lastReversed) return;
+    lastReversed = key;
+    reverseGeocode(coords[0], coords[1]);
+  });
+
+  async function reverseGeocode(lon, lat) {
+    loading = true;
+    try {
+      const base = providerUrl.replace('/search', '/reverse');
+      const resp = await fetch(`${base}?lon=${lon}&lat=${lat}&format=json`, {
+        headers: { 'Accept': 'application/json' },
+      });
+      if (!resp.ok) return;
+      const result = await resp.json();
+      if (result.display_name) {
+        value = `${lon},${lat}`;
+        items = [{ value: `${lon},${lat}`, label: result.display_name, description: result.type?.replace(/_/g, ' ') ?? '' }];
+      }
+    } catch {
+      // Reverse geocoding failed — leave search bar as-is
+    } finally {
+      loading = false;
+    }
+  }
 
   /** Nominatim rate limit: 1 req/sec. Debounce at 400ms. */
   function handleSearch(query) {

package/components/MapPicker.svelte

@@ -4,11 +4,15 @@
   Interactive map for selecting a point or drawing a polygon.
   OpenLayers with configurable tiles and Draw interaction.
   Draw sketch styled with DS tokens (not OL blue default).
+  Built-in GeoSearch (Nominatim) for address lookup + pan.
   Consumes --map-* tokens from components.css.
 
-  @example Point selection
+  @example Point selection with search
   <MapPicker mode="point" onchange={(coords) => console.log(coords)} />
 
+  @example Without search
+  <MapPicker mode="point" search={false} onchange={(coords) => console.log(coords)} />
+
   @example Polygon drawing
   <MapPicker mode="polygon" onchange={(coords) => console.log(coords)} />
 -->
@@ -19,6 +23,7 @@
 <script>
   import { fromLonLat, toLonLat } from 'ol/proj.js';
   import { createTileLayer, createMapStyles, watchTheme, renderMapError } from './map-utils.js';
+  import GeoSearch from './GeoSearch.svelte';
 
   let {
     /** @type {'point' | 'polygon'} */
@@ -37,6 +42,12 @@
     error = undefined,
     /** @type {boolean} */
     disabled = false,
+    /** @type {boolean} — show GeoSearch bar above map */
+    search = true,
+    /** @type {string} — Nominatim-compatible search endpoint */
+    searchProviderUrl = undefined,
+    /** @type {[number, number, number, number] | undefined} — viewbox bias for search */
+    searchViewbox = undefined,
     /** @type {import('./map-utils.js').TileSourceConfig} */
     tileSource = { type: 'osm' },
     /** @type {((coords: [number, number] | number[][]) => void) | undefined} */
@@ -57,6 +68,45 @@
 
   /** @type {HTMLElement | undefined} */
   let container = $state();
+  /** @type {import('ol/Map.js').default | undefined} */
+  let _map = $state();
+  /** @type {any} — VectorSource for placing markers via search */
+  let _vectorSource;
+  /** @type {any} */
+  let _Feature;
+  /** @type {any} */
+  let _Point;
+
+  // Bidirectional coords for GeoSearch: search → map, map click → reverse geocode
+  let searchCoords = $state(/** @type {[number, number] | undefined} */ (undefined));
+  let initialReverseDone = false;
+
+  // Set searchCoords from initial value (triggers reverse geocode in GeoSearch)
+  $effect(() => {
+    if (!initialReverseDone && value) {
+      searchCoords = /** @type {[number, number]} */ ([...value]);
+      initialReverseDone = true;
+    }
+  });
+
+  function handleGeoLocation(lon, lat) {
+    if (!_map) return;
+    const view = _map.getView();
+    if (view) view.animate({ center: fromLonLat([lon, lat]), zoom: 16, duration: 400 });
+
+    // In point mode, also place a marker and emit the value
+    if (mode === 'point' && _vectorSource && _Feature && _Point) {
+      _vectorSource.clear();
+      _vectorSource.addFeature(new _Feature({ geometry: new _Point(fromLonLat([lon, lat])) }));
+      value = [lon, lat];
+      onchange?.([lon, lat]);
+    }
+  }
+
+  /** Called by MapPicker when user clicks to place a point — triggers reverse geocoding */
+  function handleMapPointPlaced(lon, lat) {
+    searchCoords = [lon, lat];
+  }
 
   $effect(() => {
     if (!container || disabled) return;
@@ -95,6 +145,9 @@
       if (disposed) return;
 
       const vectorSource = new VectorSource();
+      _vectorSource = vectorSource;
+      _Feature = Feature;
+      _Point = Point;
 
       if (value && mode === 'point') {
         vectorSource.addFeature(new Feature({ geometry: new Point(fromLonLat(value)) }));
@@ -133,6 +186,7 @@
           const coords = /** @type {import('ol/geom/Point.js').default} */ (geom).getCoordinates();
           const wgs84 = /** @type {[number, number]} */ (toLonLat(coords));
           value = wgs84;
+          handleMapPointPlaced(wgs84[0], wgs84[1]);
           onchange?.(wgs84);
         } else {
           const coords = /** @type {import('ol/geom/Polygon.js').default} */ (geom).getCoordinates()[0];
@@ -145,14 +199,14 @@
 
       map = new OlMap({
         target: container,
-        layers: [tileLayer, vectorLayer],
-        view: new View({
+        layers: [tileLayer, vectorLayer],        view: new View({
           center: initialCenter,
           zoom,
         }),
       });
 
       map.addInteraction(drawInteraction);
+      _map = map;
 
       disposeTheme = watchTheme(() => {
         styles.refresh();
@@ -173,6 +227,17 @@
     <label class="map-picker-label" for={pickerId}>{label}</label>
   {/if}
 
+  {#if search && !disabled}
+    <GeoSearch
+      placeholder="Search address or place..."
+      providerUrl={searchProviderUrl}
+      viewbox={searchViewbox}
+      onlocation={handleGeoLocation}
+      bind:coords={searchCoords}
+      size="sm"
+    />
+  {/if}
+
   <div
     bind:this={container}
     id={pickerId}

package/components/NotificationBell.svelte

@@ -0,0 +1,293 @@
+<!--
+  @component NotificationBell
+
+  Bell icon button with unread badge, opening a dropdown of notifications.
+  Composes Button (ghost, iconOnly), Badge, Menu, and EmptyState.
+
+  Consumes --notification-* tokens from components.css.
+
+  @example
+  <NotificationBell
+    notifications={[
+      { id: '1', message: 'Maintenance started', eventType: 'maintenance_started', createdAt: '2026-04-16T10:00:00Z' },
+    ]}
+    unreadCount={3}
+    onmarkread={(id) => markAsRead(id)}
+    onmarkallread={() => markAllAsRead()}
+  />
+-->
+<script>
+  import Button from './Button.svelte';
+  import Badge from './Badge.svelte';
+  import EmptyState from './EmptyState.svelte';
+  import Popover from './Popover.svelte';
+
+  /**
+   * @typedef {{ id: string; message: string; eventType: string; entityType?: string; entityId?: string; createdAt?: string; read?: boolean }} Notification
+   */
+
+  let {
+    /** @type {Notification[]} */
+    notifications = [],
+    /** @type {number} */
+    unreadCount = 0,
+    /** @type {((id: string) => void) | undefined} */
+    onmarkread = undefined,
+    /** @type {(() => void) | undefined} */
+    onmarkallread = undefined,
+    /** @type {((notification: Notification) => void) | undefined} */
+    onclick = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  let open = $state(false);
+  /** @type {HTMLElement | undefined} */
+  let anchorRef = $state(undefined);
+
+  /** @type {Record<string, string>} */
+  const eventIcons = {
+    maintenance_started: 'play',
+    maintenance_completed: 'check-fat',
+    inspection_completed: 'clipboard-text',
+    reservation_approved: 'thumbs-up',
+    reservation_rejected: 'thumbs-down',
+  };
+
+  /** @type {Record<string, string>} */
+  const eventColors = {
+    maintenance_started: 'var(--color-info)',
+    maintenance_completed: 'var(--color-success)',
+    inspection_completed: 'var(--color-success)',
+    reservation_approved: 'var(--color-success)',
+    reservation_rejected: 'var(--color-destructive)',
+  };
+
+  /**
+   * @param {string | undefined} iso
+   * @returns {string}
+   */
+  function formatTime(iso) {
+    if (!iso) return '';
+    try {
+      const d = new Date(iso);
+      const now = new Date();
+      const diff = now.getTime() - d.getTime();
+      const mins = Math.floor(diff / 60000);
+      if (mins < 1) return 'Just now';
+      if (mins < 60) return `${mins}m ago`;
+      const hrs = Math.floor(mins / 60);
+      if (hrs < 24) return `${hrs}h ago`;
+      const days = Math.floor(hrs / 24);
+      return `${days}d ago`;
+    } catch {
+      return '';
+    }
+  }
+
+  function handleItemClick(notification) {
+    if (!notification.read && onmarkread) {
+      onmarkread(notification.id);
+    }
+    if (onclick) {
+      onclick(notification);
+    }
+  }
+</script>
+
+<div class="notification-bell {className}" {...rest}>
+  <div class="notification-bell-trigger">
+    <Button
+      variant="ghost"
+      size="md"
+      iconOnly
+      aria-label="Notifications"
+      bind:ref={anchorRef}
+      onclick={() => { open = !open; }}
+    >
+      {#snippet icon()}
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
+          <path d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"/>
+        </svg>
+      {/snippet}
+    </Button>
+
+    {#if unreadCount > 0}
+      <div class="notification-bell-badge">
+        <Badge variant="error">
+          {unreadCount > 99 ? '99+' : unreadCount}
+        </Badge>
+      </div>
+    {/if}
+  </div>
+
+  <Popover bind:open anchor={anchorRef} placement="bottom-end">
+    <div class="notification-panel" role="region" aria-label="Notifications">
+      <div class="notification-header">
+        <span class="notification-title">Notifications</span>
+        {#if unreadCount > 0 && onmarkallread}
+          <button class="notification-mark-all" onclick={onmarkallread}>
+            Mark all read
+          </button>
+        {/if}
+      </div>
+
+      {#if notifications.length === 0}
+        <div class="notification-empty">
+          <EmptyState heading="No notifications" body="You're all caught up" />
+        </div>
+      {:else}
+        <div class="notification-list">
+          {#each notifications as notification (notification.id)}
+            <button
+              class="notification-item"
+              class:notification-item--unread={!notification.read}
+              onclick={() => handleItemClick(notification)}
+            >
+              <div
+                class="notification-item-dot"
+                style:background={!notification.read
+                  ? (eventColors[notification.eventType] || 'var(--color-info)')
+                  : 'transparent'}
+              ></div>
+              <div class="notification-item-body">
+                <span class="notification-item-message">{notification.message}</span>
+                <span class="notification-item-time">{formatTime(notification.createdAt)}</span>
+              </div>
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </Popover>
+</div>
+
+<style>
+  .notification-bell {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .notification-bell-trigger {
+    position: relative;
+  }
+
+  .notification-bell-badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    pointer-events: none;
+  }
+
+  .notification-panel {
+    width: var(--notification-panel-width, 360px);
+    max-height: var(--notification-panel-max-height, 420px);
+    display: flex;
+    flex-direction: column;
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+
+  .notification-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-md) var(--space-lg);
+    border-bottom: var(--elevation-border);
+  }
+
+  .notification-title {
+    font-family: var(--type-heading-font);
+    font-size: var(--type-body-sm-size);
+    font-weight: 600;
+    color: var(--color-text);
+  }
+
+  .notification-mark-all {
+    all: unset;
+    cursor: pointer;
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    letter-spacing: var(--type-label-tracking);
+    color: var(--color-accent);
+    transition: opacity var(--duration-instant) var(--easing-default);
+  }
+
+  .notification-mark-all:hover {
+    opacity: 0.8;
+  }
+
+  .notification-mark-all:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .notification-empty {
+    padding: var(--space-2xl) var(--space-lg);
+  }
+
+  .notification-list {
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .notification-item {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-lg);
+    width: 100%;
+    box-sizing: border-box;
+    transition: background var(--duration-instant) var(--easing-default);
+  }
+
+  .notification-item:hover {
+    background: var(--color-surface-secondary);
+  }
+
+  .notification-item:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: calc(-1 * var(--focus-ring-width));
+  }
+
+  .notification-item--unread {
+    background: var(--color-surface);
+  }
+
+  .notification-item-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-pill);
+    flex-shrink: 0;
+    margin-top: 6px;
+  }
+
+  .notification-item-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .notification-item-message {
+    font-family: var(--type-body-sm-font);
+    font-size: var(--type-body-sm-size);
+    color: var(--color-text);
+    line-height: 1.4;
+  }
+
+  .notification-item--unread .notification-item-message {
+    font-weight: 600;
+  }
+
+  .notification-item-time {
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    color: var(--color-text-muted);
+  }
+</style>

package/components/NotificationBell.svelte.d.ts

@@ -0,0 +1,39 @@
+export default NotificationBell;
+type NotificationBell = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * NotificationBell
+ *
+ * Bell icon button with unread badge, opening a dropdown of notifications.
+ * Composes Button (ghost, iconOnly), Badge, Menu, and EmptyState.
+ *
+ * Consumes --notification-* tokens from components.css.
+ *
+ * @example
+ * <NotificationBell
+ *   notifications={[
+ *     { id: '1', message: 'Maintenance started', eventType: 'maintenance_started', createdAt: '2026-04-16T10:00:00Z' },
+ *   ]}
+ *   unreadCount={3}
+ *   onmarkread={(id) => markAsRead(id)}
+ *   onmarkallread={() => markAllAsRead()}
+ * />
+ */
+declare const NotificationBell: import("svelte").Component<{
+    notifications?: any[];
+    unreadCount?: number;
+    onmarkread?: any;
+    onmarkallread?: any;
+    onclick?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    notifications?: any[];
+    unreadCount?: number;
+    onmarkread?: any;
+    onmarkallread?: any;
+    onclick?: any;
+    class?: string;
+} & Record<string, any>;

package/components/ToastManager.svelte

@@ -0,0 +1,182 @@
+<!--
+  @component ToastManager
+
+  Lifecycle manager for Toast notifications — positioning, stacking,
+  auto-dismiss, and max-visible limit.  Wraps the visual Toast component.
+
+  Mount once in your root layout.  Use the exported `toasts` store to
+  push notifications from anywhere in the app.
+
+  Consumes --toast-manager-* tokens from components.css.
+
+  @example
+  <script>
+    import { ToastManager, toasts } from '@aiaiai-pt/design-system';
+
+    toasts.push({ variant: 'success', message: 'Saved!' });
+    toasts.push({ variant: 'error', message: 'Failed.', autoDismiss: 8000 });
+  </script>
+
+  <ToastManager />
+-->
+<script>
+  import Toast from './Toast.svelte';
+
+  /**
+   * @typedef {'info' | 'success' | 'warning' | 'error'} Variant
+   * @typedef {{ id: string; variant: Variant; message: string; actionLabel?: string; onaction?: () => void; autoDismiss?: number }} ToastItem
+   */
+
+  let {
+    /** @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'} */
+    position = 'top-right',
+    /** @type {number} ms before auto-dismiss (0 = no auto-dismiss) */
+    autoDismiss = 5000,
+    /** @type {number} max visible toasts — oldest removed when exceeded */
+    maxVisible = 5,
+    /** @type {string} */
+    class: className = '',
+  } = $props();
+
+  /** @type {ToastItem[]} */
+  let items = $state([]);
+
+  /** @type {Map<string, ReturnType<typeof setTimeout>>} */
+  const timers = new Map();
+
+  let _idCounter = 0;
+
+  /**
+   * Add a toast.  Returns the toast id for manual removal.
+   * @param {{ variant?: Variant; message: string; actionLabel?: string; onaction?: () => void; autoDismiss?: number }} toast
+   * @returns {string}
+   */
+  export function push(toast) {
+    const id = `toast-${++_idCounter}-${Date.now()}`;
+    const item = {
+      id,
+      variant: toast.variant ?? 'info',
+      message: toast.message,
+      actionLabel: toast.actionLabel,
+      onaction: toast.onaction,
+      autoDismiss: toast.autoDismiss,
+    };
+
+    items = [...items, item];
+
+    // Enforce max visible
+    if (items.length > maxVisible) {
+      const removed = items[0];
+      items = items.slice(1);
+      _clearTimer(removed.id);
+    }
+
+    // Schedule auto-dismiss
+    const duration = item.autoDismiss ?? autoDismiss;
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(id), duration);
+      timers.set(id, timer);
+    }
+
+    return id;
+  }
+
+  /**
+   * Remove a toast by id.
+   * @param {string} id
+   */
+  export function dismiss(id) {
+    _clearTimer(id);
+    items = items.filter((t) => t.id !== id);
+  }
+
+  /** Remove all toasts. */
+  export function clear() {
+    for (const [id] of timers) clearTimeout(timers.get(id));
+    timers.clear();
+    items = [];
+  }
+
+  /**
+   * @param {string} id
+   */
+  function _clearTimer(id) {
+    const timer = timers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.delete(id);
+    }
+  }
+
+  const positionClasses = {
+    'top-right': 'tm-top tm-right',
+    'top-left': 'tm-top tm-left',
+    'bottom-right': 'tm-bottom tm-right',
+    'bottom-left': 'tm-bottom tm-left',
+  };
+</script>
+
+{#if items.length > 0}
+  <div
+    class="toast-manager {positionClasses[position]} {className}"
+    aria-live="polite"
+    aria-relevant="additions removals"
+  >
+    {#each items as item (item.id)}
+      <div class="toast-slot" data-toast-id={item.id}>
+        <Toast
+          variant={item.variant}
+          actionLabel={item.actionLabel}
+          onaction={item.onaction}
+        >
+          {@html item.message}
+        </Toast>
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .toast-manager {
+    position: fixed;
+    z-index: var(--toast-manager-z, 60);
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-manager-gap, var(--space-sm));
+    padding: var(--toast-manager-padding, var(--space-lg));
+    pointer-events: none;
+  }
+
+  .toast-manager > :global(*) {
+    pointer-events: auto;
+  }
+
+  /* Position modifiers */
+  .tm-top { top: 0; }
+  .tm-bottom { bottom: 0; flex-direction: column-reverse; }
+  .tm-right { right: 0; align-items: flex-end; }
+  .tm-left { left: 0; align-items: flex-start; }
+
+  /* Entry animation */
+  .toast-slot {
+    animation: toast-enter var(--duration-normal) var(--easing-enter);
+  }
+
+  @keyframes toast-enter {
+    from {
+      opacity: 0;
+      transform: translateX(var(--toast-manager-enter-offset, 16px));
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .toast-slot {
+      animation: none;
+    }
+  }
+</style>

package/components/ToastManager.svelte.d.ts

@@ -0,0 +1,59 @@
+export default ToastManager;
+type ToastManager = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+} & {
+    push: (toast: {
+        variant?: Variant;
+        message: string;
+        actionLabel?: string;
+        onaction?: () => void;
+        autoDismiss?: number;
+    }) => string;
+    dismiss: (id: string) => void;
+    clear: () => void;
+};
+/**
+ * ToastManager
+ *
+ * Lifecycle manager for Toast notifications — positioning, stacking,
+ * auto-dismiss, and max-visible limit.  Wraps the visual Toast component.
+ *
+ * Mount once in your root layout.  Use the exported `toasts` store to
+ * push notifications from anywhere in the app.
+ *
+ * Consumes --toast-manager-* tokens from components.css.
+ *
+ * @example
+ * <script>
+ *   import { ToastManager, toasts } from '@aiaiai-pt/design-system';
+ *
+ *   toasts.push({ variant: 'success', message: 'Saved!' });
+ *   toasts.push({ variant: 'error', message: 'Failed.', autoDismiss: 8000 });
+ * </script>
+ *
+ * <ToastManager />
+ */
+declare const ToastManager: import("svelte").Component<{
+    position?: string;
+    autoDismiss?: number;
+    maxVisible?: number;
+    class?: string;
+}, {
+    push: (toast: {
+        variant?: "info" | "success" | "warning" | "error";
+        message: string;
+        actionLabel?: string;
+        onaction?: () => void;
+        autoDismiss?: number;
+    }) => string;
+    dismiss: (id: string) => void;
+    clear: () => void;
+}, "">;
+type $$ComponentProps = {
+    position?: string;
+    autoDismiss?: number;
+    maxVisible?: number;
+    class?: string;
+};
+type Variant = "info" | "success" | "warning" | "error";

package/components/index.js

@@ -63,7 +63,9 @@ export { default as TabPanel } from "./TabPanel.svelte";
 // Feedback
 export { default as Alert } from "./Alert.svelte";
 export { default as Toast } from "./Toast.svelte";
+export { default as ToastManager } from "./ToastManager.svelte";
 export { default as EmptyState } from "./EmptyState.svelte";
+export { default as NotificationBell } from "./NotificationBell.svelte";
 
 // Navigation
 export { default as Sidebar } from "./Sidebar.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",

package/tokens/components.css

@@ -244,6 +244,16 @@
   --toast-font-size: var(--type-body-sm-size);
   --toast-max-width: 360px;
 
+  /* Toast Manager */
+  --toast-manager-z: 60;
+  --toast-manager-gap: var(--space-sm);
+  --toast-manager-padding: var(--space-lg);
+  --toast-manager-enter-offset: 16px;
+
+  /* Notification Bell */
+  --notification-panel-width: 360px;
+  --notification-panel-max-height: 420px;
+
   /* Empty state */
   --empty-icon-size: var(--icon-size-2xl);
   --empty-icon-color: var(--color-text-muted);