@aiaiai-pt/design-system 0.1.0

package/components/CollapsibleSection.svelte

@@ -0,0 +1,160 @@
+<!--
+  @component CollapsibleSection
+
+  Animated expand/collapse container for grouped content.
+  Built on native <details>/<summary> for no-JS accessibility.
+  Consumes --type-label-* and --color-* tokens.
+
+  @example Basic
+  <CollapsibleSection title="Advanced Options" bind:open>
+    <p>Content here</p>
+  </CollapsibleSection>
+
+  @example With badge count and action buttons
+  <CollapsibleSection title="Filters" bind:open badge={3}>
+    {#snippet actions()}
+      <Button variant="ghost" size="sm">Clear</Button>
+    {/snippet}
+    <p>Filter content</p>
+  </CollapsibleSection>
+-->
+<script>
+  import Badge from './Badge.svelte';
+
+  let {
+    /** @type {string} */
+    title = '',
+    /** @type {boolean} */
+    open = $bindable(false),
+    /** @type {string | number | undefined} */
+    badge = undefined,
+    /** @type {boolean} */
+    defaultOpen = false,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    actions = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  // Seed open from defaultOpen at creation time (mount-only, no effect needed)
+  if (defaultOpen && !open) open = defaultOpen;
+
+  /** @param {Event} e */
+  function handleToggle(e) {
+    open = /** @type {HTMLDetailsElement} */ (e.currentTarget).open;
+  }
+</script>
+
+<details
+  class="collapsible-section {className}"
+  {open}
+  ontoggle={handleToggle}
+  {...rest}
+>
+  <summary class="collapsible-summary">
+    <div class="collapsible-header">
+      <svg
+        class="collapsible-caret"
+        class:collapsible-caret--open={open}
+        width="14"
+        height="14"
+        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>
+      <span class="collapsible-title">{title}</span>
+      {#if badge !== undefined}
+        <Badge variant="neutral">{badge}</Badge>
+      {/if}
+    </div>
+    {#if actions}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="collapsible-actions" onclick={(e) => e.stopPropagation()}>
+        {@render actions()}
+      </div>
+    {/if}
+  </summary>
+
+  {#if open && children}
+    <div class="collapsible-content">
+      {@render children()}
+    </div>
+  {/if}
+</details>
+
+<style>
+  .collapsible-section {
+    border-bottom: var(--elevation-border);
+  }
+
+  .collapsible-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    user-select: none;
+    padding: var(--space-sm) 0;
+    list-style: none;
+  }
+
+  /* Remove default marker */
+  .collapsible-summary::-webkit-details-marker {
+    display: none;
+  }
+  .collapsible-summary::marker {
+    display: none;
+    content: '';
+  }
+
+  .collapsible-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .collapsible-caret {
+    color: var(--color-text-secondary);
+    transition: transform var(--duration-fast) var(--easing-default);
+    flex-shrink: 0;
+  }
+
+  .collapsible-caret--open {
+    transform: rotate(90deg);
+  }
+
+  .collapsible-title {
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    font-weight: var(--type-label-weight);
+    letter-spacing: var(--type-label-tracking);
+    line-height: var(--type-label-leading);
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+  }
+
+  .collapsible-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+  }
+
+  .collapsible-content {
+    padding-top: var(--space-md);
+    padding-bottom: var(--space-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .collapsible-caret {
+      transition: none;
+    }
+  }
+</style>

package/components/Combobox.svelte

@@ -0,0 +1,396 @@
+<!--
+  @component Combobox
+
+  Searchable select composing Input + Popover + filtered list.
+  Supports grouped items, description text, and highlighted matches.
+  Consumes --combobox-* tokens from components.css.
+
+  @example Basic
+  <Combobox
+    label="FUNCTION"
+    items={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
+    bind:value={selected}
+  />
+
+  @example With groups and descriptions
+  <Combobox
+    label="NODE TYPE"
+    placeholder="Search node types..."
+    items={[
+      { value: 'llm', label: 'LLM', group: 'Processing', description: 'AI model call' },
+      { value: 'fn', label: 'Function', group: 'Integration', description: 'HTTP endpoint' },
+    ]}
+    bind:value={selected}
+  />
+-->
+<script module>
+  let _comboboxUid = 0;
+</script>
+
+<script>
+  /**
+   * @typedef {{ value: string, label: string, group?: string, description?: string }} ComboboxItem
+   */
+
+  import Popover from './Popover.svelte';
+
+  let {
+    /** @type {ComboboxItem[]} */
+    items = [],
+    /** @type {string} */
+    value = $bindable(''),
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    placeholder = 'Search...',
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string | undefined} */
+    error = undefined,
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {string} */
+    size = 'md',
+    /** @type {((value: string) => void) | undefined} */
+    onchange = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const comboboxId = `combobox-${_comboboxUid++}`;
+  const listboxId = `${comboboxId}-listbox`;
+
+  /** @type {HTMLInputElement | undefined} */
+  let inputEl;
+  /** @type {HTMLElement | undefined} */
+  let anchorEl = $state();
+
+  let open = $state(false);
+  let query = $state('');
+  let activeIndex = $state(-1);
+
+  const hintId = $derived(`${comboboxId}-hint`);
+  const hasHint = $derived(!!error || !!help);
+
+  // Selected item label for display
+  const selectedItem = $derived(items.find(i => i.value === value));
+
+  // Filter items by query
+  const filtered = $derived.by(() => {
+    if (!query) return items;
+    const q = query.toLowerCase();
+    return items.filter(i =>
+      i.label.toLowerCase().includes(q) ||
+      (i.description && i.description.toLowerCase().includes(q))
+    );
+  });
+
+  // Group filtered items
+  const grouped = $derived.by(() => {
+    /** @type {Map<string, ComboboxItem[]>} */
+    const groups = new Map();
+    for (const item of filtered) {
+      const key = item.group ?? '';
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key)?.push(item);
+    }
+    return groups;
+  });
+
+  // Precompute index map for O(1) lookup in grouped render loop
+  const filteredIndexMap = $derived(new Map(filtered.map((item, i) => [item, i])));
+
+  /**
+   * @param {ComboboxItem} item
+   */
+  function selectItem(item) {
+    value = item.value;
+    query = '';
+    open = false;
+    onchange?.(item.value);
+    inputEl?.focus();
+  }
+
+  /** @param {KeyboardEvent} e */
+  function handleKeydown(e) {
+    if (!open) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+        e.preventDefault();
+        open = true;
+        return;
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        activeIndex = (activeIndex + 1) % filtered.length;
+        scrollActiveIntoView();
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        activeIndex = activeIndex <= 0 ? filtered.length - 1 : activeIndex - 1;
+        scrollActiveIntoView();
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filtered.length) {
+          selectItem(filtered[activeIndex]);
+        }
+        break;
+      case 'Escape':
+        // Popover handles Escape close
+        break;
+      case 'Tab':
+        open = false;
+        break;
+    }
+  }
+
+  function scrollActiveIntoView() {
+    requestAnimationFrame(() => {
+      const el = document.getElementById(`${comboboxId}-option-${activeIndex}`);
+      el?.scrollIntoView({ block: 'nearest' });
+    });
+  }
+
+  function handleInput() {
+    if (!open) open = true;
+    activeIndex = -1;
+  }
+
+  function handleFocus() {
+    if (!disabled) open = true;
+  }
+
+  function handlePopoverClose() {
+    query = '';
+    activeIndex = -1;
+  }
+
+  /**
+   * Highlight matching text in a label
+   * @param {string} text
+   * @param {string} q
+   * @returns {{ before: string, match: string, after: string } | null}
+   */
+  function getHighlight(text, q) {
+    if (!q) return null;
+    const lower = text.toLowerCase();
+    const idx = lower.indexOf(q.toLowerCase());
+    if (idx === -1) return null;
+    return {
+      before: text.slice(0, idx),
+      match: text.slice(idx, idx + q.length),
+      after: text.slice(idx + q.length),
+    };
+  }
+</script>
+
+<div class="combobox {className}" bind:this={anchorEl} {...rest}>
+  {#if label}
+    <label class="combobox-label" for={comboboxId}>{label}</label>
+  {/if}
+
+  <input
+    bind:this={inputEl}
+    id={comboboxId}
+    type="text"
+    class="combobox-input combobox-input-{size}"
+    class:combobox-input-error={!!error}
+    role="combobox"
+    aria-expanded={open}
+    aria-controls={listboxId}
+    aria-activedescendant={activeIndex >= 0 ? `${comboboxId}-option-${activeIndex}` : undefined}
+    aria-invalid={error ? true : undefined}
+    aria-describedby={hasHint ? hintId : undefined}
+    {placeholder}
+    {disabled}
+    value={open ? query : (selectedItem?.label ?? '')}
+    oninput={(e) => { query = /** @type {HTMLInputElement} */ (e.currentTarget).value; handleInput(); }}
+    onkeydown={handleKeydown}
+    onfocus={handleFocus}
+    autocomplete="off"
+  />
+
+  {#if error}
+    <span id={hintId} class="combobox-error-text" role="alert">{error}</span>
+  {:else if help}
+    <span id={hintId} class="combobox-help">{help}</span>
+  {/if}
+
+  <Popover bind:open anchor={anchorEl} matchWidth onclose={handlePopoverClose}>
+    <ul
+      id={listboxId}
+      class="combobox-list"
+      role="listbox"
+      aria-label={label ?? 'Options'}
+    >
+      {#if filtered.length === 0}
+        <li class="combobox-empty" role="option" aria-selected="false" aria-disabled="true">
+          No results found
+        </li>
+      {:else}
+        {#each [...grouped.entries()] as [group, groupItems]}
+          {#if group}
+            <li class="combobox-group" role="presentation">{group}</li>
+          {/if}
+          {#each groupItems as item}
+            {@const idx = filteredIndexMap.get(item) ?? -1}
+            {@const isActive = idx === activeIndex}
+            {@const isSelected = item.value === value}
+            {@const hl = getHighlight(item.label, query)}
+            <li
+              id="{comboboxId}-option-{idx}"
+              class="combobox-item"
+              class:combobox-item-active={isActive}
+              class:combobox-item-selected={isSelected}
+              role="option"
+              aria-selected={isSelected}
+              onmousedown={(e) => { e.preventDefault(); selectItem(item); }}
+              onmouseenter={() => { activeIndex = idx; }}
+            >
+              <span class="combobox-item-label">
+                {#if hl}
+                  {hl.before}<mark class="combobox-highlight">{hl.match}</mark>{hl.after}
+                {:else}
+                  {item.label}
+                {/if}
+              </span>
+              {#if item.description}
+                <span class="combobox-item-description">{item.description}</span>
+              {/if}
+            </li>
+          {/each}
+        {/each}
+      {/if}
+    </ul>
+  </Popover>
+</div>
+
+<style>
+  .combobox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--input-label-gap);
+    width: 100%;
+    position: relative;
+  }
+
+  .combobox-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .combobox-input {
+    font-family: var(--input-font);
+    font-size: var(--input-font-size);
+    border: var(--input-border);
+    border-radius: var(--input-radius);
+    background: var(--input-bg);
+    color: var(--input-text);
+    transition: border var(--input-transition);
+    width: 100%;
+  }
+
+  .combobox-input-sm { height: var(--input-sm-height); padding: 0 var(--input-sm-padding-x); }
+  .combobox-input-md { height: var(--input-md-height); padding: 0 var(--input-md-padding-x); }
+  .combobox-input-lg { height: var(--input-lg-height); padding: 0 var(--input-lg-padding-x); }
+
+  .combobox-input::placeholder { color: var(--input-placeholder); }
+  .combobox-input:focus { outline: none; border: var(--input-border-focus); }
+  .combobox-input:disabled { opacity: 0.5; cursor: not-allowed; }
+  .combobox-input-error { border-color: var(--input-error-border-color); }
+
+  .combobox-help {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-help-color);
+  }
+
+  .combobox-error-text {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-error-text);
+  }
+
+  /* ─── Dropdown list ─── */
+  .combobox-list {
+    list-style: none;
+    margin: 0;
+    padding: var(--space-xs) 0;
+    max-height: var(--combobox-list-max-height);
+    overflow-y: auto;
+  }
+
+  .combobox-group {
+    font-family: var(--combobox-group-font);
+    font-size: var(--combobox-group-size);
+    letter-spacing: var(--combobox-group-tracking);
+    color: var(--combobox-group-color);
+    padding: var(--combobox-group-padding);
+    text-transform: uppercase;
+  }
+
+  .combobox-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: var(--combobox-item-padding);
+    border-radius: var(--combobox-item-radius);
+    margin: 0 var(--space-xs);
+    cursor: pointer;
+    font-family: var(--input-font);
+    font-size: var(--input-font-size);
+    color: var(--color-text);
+  }
+
+  .combobox-item-active,
+  .combobox-item:hover {
+    background: var(--combobox-item-hover-bg);
+  }
+
+  .combobox-item-selected {
+    background: var(--combobox-item-active-bg);
+    color: var(--combobox-item-active-color);
+  }
+
+  .combobox-item-selected.combobox-item-active {
+    background: var(--combobox-item-active-bg);
+  }
+
+  .combobox-item-label {
+    line-height: 1.4;
+  }
+
+  .combobox-item-description {
+    font-family: var(--combobox-description-font);
+    font-size: var(--combobox-description-size);
+    color: var(--combobox-description-color);
+  }
+
+  .combobox-highlight {
+    background: transparent;
+    color: var(--combobox-highlight-color);
+    font-weight: var(--raw-font-weight-semibold);
+  }
+
+  .combobox-empty {
+    padding: var(--combobox-item-padding);
+    margin: 0 var(--space-xs);
+    color: var(--combobox-empty-color);
+    font-family: var(--input-font);
+    font-size: var(--input-font-size);
+    font-style: italic;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .combobox-input {
+      transition: none;
+    }
+  }
+</style>

package/components/EmptyState.svelte

@@ -0,0 +1,148 @@
+<!--
+  @component EmptyState
+
+  Shown when there's nothing to display. Different contexts need different copy.
+  Consumes --empty-* tokens from components.css.
+
+  @example First use
+  <EmptyState
+    heading="Create your first project"
+    body="Projects organize your work into focused spaces."
+    actionLabel="NEW PROJECT"
+    onaction={() => create()}
+  >
+    {#snippet icon()}
+      <PhPlusCircle size={48} />
+    {/snippet}
+  </EmptyState>
+
+  @example Error recovery
+  <EmptyState
+    heading="Couldn't load your projects"
+    body="The server didn't respond. Check your connection."
+    actionLabel="TRY AGAIN"
+    actionVariant="secondary"
+    onaction={() => retry()}
+  >
+    {#snippet icon()}
+      <PhWarningCircle size={48} />
+    {/snippet}
+  </EmptyState>
+-->
+<script>
+  let {
+    /** @type {string} */
+    heading,
+    /** @type {string | undefined} */
+    body = undefined,
+    /** @type {string | undefined} */
+    actionLabel = undefined,
+    /** @type {'primary' | 'secondary'} */
+    actionVariant = 'primary',
+    /** @type {(() => void) | undefined} */
+    onaction = undefined,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    icon = undefined,
+    ...rest
+  } = $props();
+</script>
+
+<div class="empty-state {className}" {...rest}>
+  {#if icon}
+    <div class="empty-icon">{@render icon()}</div>
+  {/if}
+
+  <h3 class="empty-heading">{heading}</h3>
+
+  {#if body}
+    <p class="empty-body">{body}</p>
+  {/if}
+
+  {#if actionLabel && onaction}
+    <button
+      class="empty-action"
+      class:empty-action-secondary={actionVariant === 'secondary'}
+      onclick={onaction}
+    >
+      <span class="empty-action-label">{actionLabel}</span>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--empty-gap);
+    text-align: center;
+    padding: var(--space-2xl) var(--space-lg);
+  }
+
+  .empty-icon {
+    width: var(--empty-icon-size);
+    height: var(--empty-icon-size);
+    color: var(--empty-icon-color);
+  }
+
+  .empty-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .empty-heading {
+    font-family: var(--empty-heading-font);
+    font-size: var(--empty-heading-size);
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  .empty-body {
+    font-family: var(--empty-body-font);
+    font-size: var(--empty-body-size);
+    color: var(--empty-body-color);
+    margin: 0;
+    max-width: 320px;
+  }
+
+  .empty-action {
+    font-family: var(--button-font);
+    font-size: var(--button-md-font-size);
+    letter-spacing: var(--button-tracking);
+    height: var(--button-md-height);
+    padding: 0 var(--button-md-padding-x);
+    border: none;
+    border-radius: var(--button-radius);
+    background: var(--color-accent);
+    color: var(--color-text-on-accent);
+    cursor: pointer;
+    transition: background var(--button-transition);
+  }
+
+  .empty-action:hover {
+    background: var(--color-accent-hover);
+  }
+
+  .empty-action:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .empty-action-secondary {
+    background: transparent;
+    color: var(--color-text);
+    border: var(--elevation-border);
+  }
+
+  .empty-action-secondary:hover {
+    background: var(--color-surface-secondary);
+  }
+
+  .empty-action-label {
+    font-family: inherit;
+    font-size: inherit;
+    letter-spacing: inherit;
+  }
+</style>