@aiaiai-pt/design-system 0.5.7 → 0.6.0

package/components/MapPicker.svelte

@@ -199,7 +199,8 @@
 
       map = new OlMap({
         target: container,
-        layers: [tileLayer, vectorLayer],        view: new View({
+        layers: [tileLayer, vectorLayer],
+        view: new View({
           center: initialCenter,
           zoom,
         }),

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/Tree.svelte

@@ -0,0 +1,92 @@
+<!--
+  @component Tree
+
+  Recursive hierarchy view with expand/collapse and selection.
+  Renders TreeNodes from a nested data array. v1: no drag-and-drop,
+  no cascading selection, no virtualization.
+
+  Data shape (recursive):
+    { id: string | number, label: string, children?: TreeNode[], disabled?: boolean }
+
+  Keyboard navigation:
+    ArrowDown / ArrowUp — move focus between visible rows
+    ArrowRight         — expand current node (or move to first child if already open)
+    ArrowLeft          — collapse current node (or move to parent if already closed)
+    Enter / Space      — select current node
+    Home / End         — jump to first/last visible row
+
+  @example Basic
+    <Tree {items} onselect={(id) => (selectedId = id)} />
+
+  @example Controlled expansion
+    <Tree {items} bind:expanded onselect={(id) => (selectedId = id)} />
+
+  Consumes --tree-* tokens from components.css.
+-->
+<script>
+  import TreeNode from './TreeNode.svelte';
+
+  /**
+   * @typedef {Object} TreeItem
+   * @property {string | number} id
+   * @property {string} label
+   * @property {TreeItem[]} [children]
+   * @property {boolean} [disabled]
+   */
+
+  let {
+    /** @type {TreeItem[]} */
+    items = [],
+    /** @type {string | number | null} */
+    selectedId = $bindable(null),
+    /** @type {Set<string | number>} */
+    expanded = $bindable(new Set()),
+    /** @type {(id: string | number) => void | undefined} */
+    onselect = undefined,
+    /** @type {(id: string | number, open: boolean) => void | undefined} */
+    ontoggle = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  /** @param {string | number} id */
+  function toggle(id) {
+    const next = new Set(expanded);
+    const open = !next.has(id);
+    if (open) next.add(id);
+    else next.delete(id);
+    expanded = next;
+    ontoggle?.(id, open);
+  }
+
+  /** @param {string | number} id */
+  function select(id) {
+    selectedId = id;
+    onselect?.(id);
+  }
+</script>
+
+<ul class="tree {className}" role="tree" {...rest}>
+  {#each items as node (node.id)}
+    <TreeNode
+      {node}
+      depth={0}
+      {expanded}
+      {selectedId}
+      ontoggle={toggle}
+      onselect={select}
+    />
+  {/each}
+</ul>
+
+<style>
+  .tree {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tree-gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+</style>

package/components/Tree.svelte.d.ts

@@ -0,0 +1,46 @@
+export default Tree;
+type Tree = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Tree
+ *
+ * Recursive hierarchy view with expand/collapse and selection.
+ * Renders TreeNodes from a nested data array. v1: no drag-and-drop,
+ * no cascading selection, no virtualization.
+ *
+ * Data shape (recursive):
+ *   { id: string | number, label: string, children?: TreeNode[], disabled?: boolean }
+ *
+ * Keyboard navigation:
+ *   ArrowDown / ArrowUp — move focus between visible rows
+ *   ArrowRight         — expand current node (or move to first child if already open)
+ *   ArrowLeft          — collapse current node (or move to parent if already closed)
+ *   Enter / Space      — select current node
+ *   Home / End         — jump to first/last visible row
+ *
+ * @example Basic
+ *   <Tree {items} onselect={(id) => (selectedId = id)} />
+ *
+ * @example Controlled expansion
+ *   <Tree {items} bind:expanded onselect={(id) => (selectedId = id)} />
+ *
+ * Consumes --tree-* tokens from components.css.
+ */
+declare const Tree: import("svelte").Component<{
+    items?: any[];
+    selectedId?: any;
+    expanded?: any;
+    onselect?: any;
+    ontoggle?: any;
+    class?: string;
+} & Record<string, any>, {}, "expanded" | "selectedId">;
+type $$ComponentProps = {
+    items?: any[];
+    selectedId?: any;
+    expanded?: any;
+    onselect?: any;
+    ontoggle?: any;
+    class?: string;
+} & Record<string, any>;

package/components/TreeNode.svelte

@@ -0,0 +1,211 @@
+<!--
+  @component TreeNode
+
+  One node in a Tree. Recursive via `svelte:self` for descendants.
+  Not typically used directly — see `Tree.svelte`.
+-->
+<script>
+  import TreeNode from './TreeNode.svelte';
+
+  /**
+   * @typedef {Object} TreeItem
+   * @property {string | number} id
+   * @property {string} label
+   * @property {TreeItem[]} [children]
+   * @property {boolean} [disabled]
+   */
+
+  let {
+    /** @type {TreeItem} */
+    node,
+    /** @type {number} */
+    depth = 0,
+    /** @type {Set<string | number>} */
+    expanded = new Set(),
+    /** @type {string | number | null} */
+    selectedId = null,
+    /** @type {(id: string | number) => void} */
+    ontoggle,
+    /** @type {(id: string | number) => void} */
+    onselect,
+  } = $props();
+
+  let hasChildren = $derived(
+    Array.isArray(node.children) && node.children.length > 0
+  );
+  let isOpen = $derived(expanded.has(node.id));
+  let isSelected = $derived(selectedId === node.id);
+
+  /** @param {KeyboardEvent} event */
+  function handleKey(event) {
+    if (node.disabled) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onselect(node.id);
+    } else if (event.key === 'ArrowRight' && hasChildren && !isOpen) {
+      event.preventDefault();
+      ontoggle(node.id);
+    } else if (event.key === 'ArrowLeft' && hasChildren && isOpen) {
+      event.preventDefault();
+      ontoggle(node.id);
+    }
+  }
+</script>
+
+<li class="tree-node" role="none">
+  <div
+    class="tree-node-row"
+    class:tree-node-row--selected={isSelected}
+    class:tree-node-row--disabled={node.disabled}
+    role="treeitem"
+    aria-expanded={hasChildren ? isOpen : undefined}
+    aria-selected={isSelected}
+    tabindex={isSelected ? 0 : -1}
+    style:--tree-depth={depth}
+    onkeydown={handleKey}
+  >
+    {#if hasChildren}
+      <button
+        type="button"
+        class="tree-toggle"
+        class:tree-toggle--open={isOpen}
+        aria-label={isOpen ? 'Collapse' : 'Expand'}
+        aria-hidden="true"
+        tabindex="-1"
+        onclick={(e) => {
+          e.stopPropagation();
+          ontoggle(node.id);
+        }}
+      >
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 14 14"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M5 3L10 7L5 11"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    {:else}
+      <span class="tree-toggle-spacer" aria-hidden="true"></span>
+    {/if}
+
+    <button
+      type="button"
+      class="tree-label"
+      disabled={node.disabled}
+      onclick={() => onselect(node.id)}
+    >
+      {node.label}
+    </button>
+  </div>
+
+  {#if hasChildren && isOpen}
+    <ul role="group" class="tree-group">
+      {#each node.children ?? [] as child (child.id)}
+        <TreeNode
+          node={child}
+          depth={depth + 1}
+          {expanded}
+          {selectedId}
+          {ontoggle}
+          {onselect}
+        />
+      {/each}
+    </ul>
+  {/if}
+</li>
+
+<style>
+  .tree-node {
+    list-style: none;
+  }
+
+  .tree-node-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    padding-left: calc(var(--tree-depth, 0) * var(--tree-indent));
+    border-radius: var(--tree-node-radius);
+    transition: background var(--tree-node-transition);
+  }
+
+  .tree-node-row:hover:not(.tree-node-row--disabled) {
+    background: var(--tree-node-bg-hover);
+  }
+
+  .tree-node-row--selected {
+    background: var(--tree-node-bg-selected);
+  }
+
+  .tree-node-row--disabled {
+    opacity: 0.5;
+  }
+
+  .tree-toggle,
+  .tree-toggle-spacer {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  .tree-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--tree-node-caret-color);
+    transition: transform var(--duration-fast) var(--easing-default);
+  }
+
+  .tree-toggle--open {
+    transform: rotate(90deg);
+  }
+
+  .tree-label {
+    flex: 1;
+    min-width: 0;
+    text-align: left;
+    background: transparent;
+    border: none;
+    padding: var(--tree-node-padding-y) var(--tree-node-padding-x);
+    cursor: pointer;
+    font-family: var(--tree-node-font);
+    font-size: var(--tree-node-font-size);
+    color: var(--tree-node-color);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .tree-label:disabled {
+    cursor: not-allowed;
+  }
+
+  .tree-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--tree-gap);
+    margin-top: var(--tree-gap);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tree-toggle,
+    .tree-node-row {
+      transition: none;
+    }
+  }
+</style>

package/components/TreeNode.svelte.d.ts

@@ -0,0 +1,28 @@
+export default TreeNode;
+type TreeNode = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TreeNode
+ *
+ * One node in a Tree. Recursive via `svelte:self` for descendants.
+ * Not typically used directly — see `Tree.svelte`.
+ */
+declare const TreeNode: import("svelte").Component<{
+    node: any;
+    depth?: number;
+    expanded?: any;
+    selectedId?: any;
+    ontoggle: any;
+    onselect: any;
+}, {}, "">;
+import TreeNode from './TreeNode.svelte';
+type $$ComponentProps = {
+    node: any;
+    depth?: number;
+    expanded?: any;
+    selectedId?: any;
+    ontoggle: any;
+    onselect: any;
+};

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";
@@ -80,6 +82,8 @@ export { default as CollapsibleSection } from "./CollapsibleSection.svelte";
 export { default as OptionGrid } from "./OptionGrid.svelte";
 export { default as ConditionTable } from "./ConditionTable.svelte";
 export { default as LogViewer } from "./LogViewer.svelte";
+export { default as Tree } from "./Tree.svelte";
+export { default as TreeNode } from "./TreeNode.svelte";
 
 // Data & navigation
 export { default as DataTable } from "./DataTable.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.5.7",
+  "version": "0.6.0",
   "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);
@@ -431,6 +441,25 @@
   --list-item-leading-gap: var(--space-xs);
   --list-item-trailing-gap: var(--space-xs);
 
+  /* ═══════════════════════════════════════════════
+     TREE
+     ═══════════════════════════════════════════════ */
+
+  --tree-gap: var(--space-2xs);
+  --tree-indent: var(--space-md);
+  --tree-node-padding-x: var(--space-sm);
+  --tree-node-padding-y: var(--space-xs);
+  --tree-node-radius: var(--radius-sm);
+  --tree-node-font: var(--type-body-font);
+  --tree-node-font-size: var(--type-body-size);
+  --tree-node-color: var(--color-text);
+  --tree-node-color-hover: var(--color-text);
+  --tree-node-color-selected: var(--color-text);
+  --tree-node-bg-hover: var(--color-surface-secondary);
+  --tree-node-bg-selected: var(--color-surface-tertiary);
+  --tree-node-caret-color: var(--color-text-secondary);
+  --tree-node-transition: var(--duration-instant) var(--easing-default);
+
   /* ═══════════════════════════════════════════════
      FILE UPLOAD
      ═══════════════════════════════════════════════ */