@aiaiai-pt/design-system 0.5.8 → 0.7.0

package/components/DataTable.svelte

@@ -27,6 +27,21 @@
 
   @example Loading
   <DataTable {columns} rows={[]} loading />
+
+  @example Custom cell rendering (badges, chips, components)
+  Pass a `cell` snippet to override the default per-cell text rendering.
+  The default behavior (using `column.render` to produce a string) is
+  preserved when no `cell` snippet is provided.
+
+  <DataTable {columns} {rows}>
+    {#snippet cell({ row, column, value })}
+      {#if column.key === 'status'}
+        <Badge variant={statusVariant(value)}>{value}</Badge>
+      {:else}
+        {value ?? '-'}
+      {/if}
+    {/snippet}
+  </DataTable>
 -->
 <script>
   /**
@@ -65,6 +80,23 @@
     on_select = undefined,
     /** @type {((row: Record<string, unknown>) => void) | undefined} */
     on_row_click = undefined,
+    /**
+     * Optional per-cell render override. When provided, called for every td
+     * with `{ row, column, value }`; the snippet's output replaces the
+     * default text rendering. When omitted, the default text path runs
+     * (`column.render` then `String(value)`) so existing consumers keep
+     * working unchanged.
+     *
+     * Why a snippet rather than passing a Svelte component class via
+     * `column.render`: snippets accept the full row context (not just the
+     * value), let consumers compose any DS primitive (Badge, Tag, Status,
+     * Button) without bringing those imports into the DS surface, and
+     * Svelte 5's snippet API is the canonical way to parameterize child
+     * rendering. `column.render` stays for the common string case.
+     *
+     * @type {import('svelte').Snippet<[{ row: Record<string, unknown>, column: ColumnDef, value: unknown }]> | undefined}
+     */
+    cell = undefined,
     /** @type {import('svelte').Snippet | undefined} */
     children = undefined,
     /** @type {string} */
@@ -258,7 +290,11 @@
               {/if}
               {#each columns as col}
                 <td class="table-td">
-                  {render_cell(col, row[col.key], row)}
+                  {#if cell}
+                    {@render cell({ row, column: col, value: row[col.key] })}
+                  {:else}
+                    {render_cell(col, row[col.key], row)}
+                  {/if}
                 </td>
               {/each}
             </tr>

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/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

@@ -82,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.8",
+  "version": "0.7.0",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",

package/tokens/components.css

@@ -441,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
      ═══════════════════════════════════════════════ */