> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Supply Chain Viewer

> Interactive supply chain visualization component.

The Supply Chain Viewer renders an interactive, hierarchical view of a product's supply chain from Tier 1 to Tier N.

## Quick start

```html theme={null}
<script src="https://cdn.heychocolate.com/widgets/v1/supply-chain-viewer.js"></script>

<hc-supply-chain-viewer
  product-id="prod_abc123"
  api-key="sk_live_your_key"
></hc-supply-chain-viewer>
```

## Attributes

| Attribute        | Type    | Required | Description                                       |
| ---------------- | ------- | -------- | ------------------------------------------------- |
| `product-id`     | String  | Yes      | Product identifier                                |
| `api-key`        | String  | Yes      | API key                                           |
| `max-tier`       | Number  | No       | Maximum tier depth to display (default: all)      |
| `theme`          | String  | No       | `light`, `dark`, `auto`                           |
| `layout`         | String  | No       | `tree`, `graph`, `map` (default: `tree`)          |
| `show-impact`    | Boolean | No       | Show CO2 contribution per node (default: `true`)  |
| `show-transport` | Boolean | No       | Show transport methods on edges (default: `true`) |
| `interactive`    | Boolean | No       | Enable click/hover interactions (default: `true`) |
| `height`         | String  | No       | Component height (default: `500px`)               |

## Layout modes

### Tree

Hierarchical tree layout showing parent-child relationships:

```html theme={null}
<hc-supply-chain-viewer product-id="prod_abc123" layout="tree"></hc-supply-chain-viewer>
```

### Graph

Network graph with force-directed positioning:

```html theme={null}
<hc-supply-chain-viewer product-id="prod_abc123" layout="graph"></hc-supply-chain-viewer>
```

### Map

Geographic map view showing supplier locations:

```html theme={null}
<hc-supply-chain-viewer product-id="prod_abc123" layout="map"></hc-supply-chain-viewer>
```

## Events

```javascript theme={null}
const viewer = document.querySelector('hc-supply-chain-viewer');

viewer.addEventListener('hc:supplier-selected', (e) => {
  console.log('Supplier:', e.detail.supplier.name);
  console.log('CO2 contribution:', e.detail.supplier.co2Contribution);
});

viewer.addEventListener('hc:tier-expanded', (e) => {
  console.log('Expanded tier:', e.detail.tier);
});
```

## Styling

```css theme={null}
hc-supply-chain-viewer {
  --hc-sc-bg: #ffffff;
  --hc-sc-node-bg: #f5f5f5;
  --hc-sc-node-border: #e0e0e0;
  --hc-sc-edge-color: #bdbdbd;
  --hc-sc-highlight: #F83B00;
  --hc-sc-font: inherit;
}
```