---

## Sankey
Flow diagram (Sankey) for visualizing multi-stage data or value
pipelines. Nodes are split into layers; paths are rendered as cubic Bezier
curves with value-proportional width. The layout algorithm is embedded (no
d3-sankey dependency, ISC license attributed).

Hovering/focusing a node or path highlights the connected paths and
neighboring nodes. A ResizeObserver adapts the width responsively. An
sr-only table provides a screen-reader fallback with source/target/value.

**Import:** `import { Sankey } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Sankey
  nodes={[
    { id: 'gas',  label: 'Gas',     intent: 'primary' },
    { id: 'pot',  label: 'Pool',    intent: 'neutral' },
    { id: 'heat', label: 'Heating', intent: 'success' }
  ]}
  links={[
    { source: 'gas', target: 'pot',  value: 220609 },
    { source: 'pot', target: 'heat', value: 220609 }
  ]}
  formatValue={(v) => formatCurrency(v)}
  height={400}
/>
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: neutral)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| links | `SankeyLink[]` | yes |  | Link list. |
| nodes | `SankeyNode[]` | yes |  | Node list. |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ...SankeyVariants | `VariantProps` | no |  | Styling variants from SankeyVariants |
| class | `string` | no |  | Extra classes merged onto the wrapper. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| defaultOpacity | `number` | no | 0.45 | Default stroke opacity of paths without hover. |
| dimmedOpacity | `number` | no | 0.25 | Hover opacity of the non-focused paths. |
| formatPercent | `(percent: number) => string` | no |  | Format function for percentages (tooltip). |
| formatValue | `(value: number) => string` | no |  | Format function for values (tooltip + sr-only table). |
| height | `number | 'auto'` | no | 400 | Height of the diagram. Accepts a fixed pixel number or `'auto'`.  `'auto'` scales with the node count: roughly `nodes.length × (12 + nodePadding)`, clamped to `[280, 800]`. Useful when the number of nodes varies at runtime and a fixed pixel value would be too small or too large. |
| highlightedOpacity | `number` | no | 0.7 | Stroke opacity of the highlighted paths. |
| highlightOnHover | `boolean` | no | true | Hover highlight (paths + connected nodes). |
| intent | `SankeyIntent` | no | 'neutral' | Default intent for nodes without their own `intent`. |
| iterations | `number` | no | 6 | Number of relaxation iterations in the layout. |
| linkContent | `Snippet<[link: SankeyLaidOutLinkWithMeta]>` | no |  | Custom snippet for path rendering (instead of the default cubic Bezier). |
| nodeAlign | `'left' | 'right' | 'center' | 'justify'` | no | 'justify' | Where nodes go that the layering leaves short of the last layer.  Layers come from the **longest** path to a node, so this moves only two kinds: `right` and `justify` push sinks (no outgoing links) to the last layer, `center` puts fully isolated nodes (no links at all) in the middle, `left` moves nothing. On an evenly layered graph — every source-to-sink path the same length — all four values render identically.  Not d3-sankey's `nodeAlign`, which positions every node. |
| nodeContent | `Snippet<[node: SankeyLaidOutNodeWithMeta]>` | no |  | Custom snippet for node content (inside the SVG, instead of the label). |
| nodePadding | `number` | no | 16 | Vertical gap between nodes within a layer. |
| nodeWidth | `number` | no | 24 | Pixel width of a node. |
| onLinkClick | `(link: SankeyLaidOutLinkWithMeta) => void` | no |  | Click callback for a path. |
| onNodeClick | `(node: SankeyLaidOutNodeWithMeta) => void` | no |  | Click callback for a node. |
| preset | `string` | no |  | Preset name. |
| showValues | `boolean` | no | false | Persistently display values next to node labels (instead of only in the hover tooltip). Useful for print, PDF attachments, static screenshots, or tenant- and client-facing statements where hovering is not possible. Uses `formatValue` for formatting. |
| slotClasses | `Partial<Record<SankeySlots, string>>` | no |  | Per-slot class overrides. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| tooltip | `Snippet<[datum: SankeyLaidOutNodeWithMeta | SankeyLaidOutLinkWithMeta, kind: 'node' | 'link']>` | no |  | Custom tooltip content for node or path. |
| unstyled | `boolean` | no |  | Remove default classes. |
| width | `number` | no |  | Optional fixed width. Default: derived from the container via ResizeObserver. Set a value only if you need SSR-stable layouts and are willing to give up responsiveness. |

Inherited from:
- Omit<SankeyVariants, never> (omit-pattern)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)

### Types
```ts
type SankeyIntent = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral'
```

```ts
interface SankeyNode {
/** Unique ID — referenced by `links.source`/`links.target`. */
  id: string;
  /** Display label rendered at the node. */
  label: string;
  /** Overrides the default intent from the component palette. */
  intent?: SankeyIntent;
  /** Arbitrary metadata for tooltip/snippets. */
  meta?: Record<string, unknown>;
}
```

```ts
interface SankeyLink {
/** ID of the source node (must exist in nodes). */
  source: string;
  /** ID of the target node. */
  target: string;
  /** Numeric value — determines the path width. */
  value: number;
  /** Overrides the default intent (default: intent of the source node). */
  intent?: SankeyIntent;
  /** Arbitrary metadata. */
  meta?: Record<string, unknown>;
}
```

```ts
type SankeyLaidOutNodeWithMeta = SankeyLaidOutNode & {
  meta?: Record<string, unknown>;
}
```

```ts
type SankeyLaidOutLinkWithMeta = SankeyLaidOutLink & {
  meta?: Record<string, unknown>;
}
```

```ts
interface SankeyLaidOutLink {
source: SankeyLaidOutNode;
  target: SankeyLaidOutNode;
  value: number;
  meta?: TLinkMeta;
  /** Y coordinate at the source node (midpoint of the link height). */
  y0: number;
  /** Y coordinate at the target node. */
  y1: number;
  /** Pixel width of the link (proportional to value). */
  width: number;
  /** Index (for stable ordering / iteration). */
  index: number;
}
```

```ts
interface SankeyLaidOutNode {
id: string;
  meta?: TNodeMeta;
  /** Layer index (0 = leftmost). */
  layer: number;
  /** Left pixel coordinate (X0). */
  x0: number;
  /** Right pixel coordinate (X1 = X0 + nodeWidth). */
  x1: number;
  /** Top pixel coordinate. */
  y0: number;
  /** Bottom pixel coordinate. */
  y1: number;
  /** Effective node value (max(Σ incoming, Σ outgoing)). */
  value: number;
  sourceLinks: SankeyLaidOutLink[];
  targetLinks: SankeyLaidOutLink[];
}
```

### Slots (slotClasses keys)
`wrapper`, `svg`, `node`, `nodeRect`, `nodeLabel`, `nodeValue`, `link`, `tooltip`, `tooltipLabel`, `tooltipDetail`