# Data display

Code, the live model preview, icons, badges, tables, and stats, in the website's language: ink, rules, mint for the active thing.

## Code block

Highlighted code on the dark editor surface, framed by the rule, with an optional filename or title header strip and the mint copy button. Uses the same Shiki highlighter and dcupl theme as markdown code blocks (see [Code blocks](/design-system/code-blocks)).

### Basic

```bash
npm install @dcupl/core
```

### With filename

```ts filename="app.ts"
const dcupl = new Dcupl();
await dcupl.init();
const list = dcupl.lists.create({ modelKey: 'Product' });
```

### With title

```bash title="Install dependencies"
npm install @dcupl/core @dcupl/loader
```

#### Usage

```html
<docs-code-block
  [code]="myCode"
  language="ts"
  filename="example.ts"
/>

<docs-code-block
  code="npm install @dcupl/core"
  language="bash"
  title="Install"
/>
```

## Model preview

"What this model holds once data is loaded": the website's Data Explorer table under a model's code. The properties are the columns, each with a mono type chip; a few demo items are the rows (ids in mono, numbers right-aligned, booleans as chips with `true` in mint, arrays as tag chips). A yellow **Demo data** pill says the rows are made up.

It is linked to its code: point at a column header (or focus it with Tab) and the column and the matching property line light up, the line with a mint tint and a mint bar; point at a property line and its column lights up. A line matches when it holds `key: '<prop>'` with the property's `type: '…'`, so a reference that reuses a key doesn't. The code is `linkedCode` (an element or an element id) or, by default, the nearest code block before the preview in the same section.

### Example

```typescript filename="category.model.ts"
const categoryModel: ModelDefinition = {
  key: 'Category',
  properties: [
    { key: 'key', type: 'string' },
    { key: 'label', type: 'string' },
    { key: 'productCount', type: 'int' },
    { key: 'featured', type: 'boolean' },
  ],
};
```

*Category — 4 properties · what this model holds once data is loaded — Demo data*

| key , string | label , string | productCount , int | featured , boolean |
| --- | --- | --- | --- |
| cable | Cable | 128 | true |
| switch | Switch | 64 | false |
| lighting | Lighting | 212 | true |

Point at a property in the code to find its column. Ids are keys other models reference.

Inputs: `model`, `properties` (`ModelPreviewProperty[]` of `{ key, type, mono? }`, in column order), `rows` (`ModelPreviewRow[]`), `note` (a footer sentence, e.g. units) and `linkedCode`. Concept pages add it with a section's `preview` field.

#### Usage

```html
<docs-code-block [code]="productModelSource" language="typescript" filename="product.model.ts" />
<docs-model-preview
  model="Product"
  [properties]="[
    { key: 'sku', type: 'string', mono: true },
    { key: 'price', type: 'int' },
    { key: 'inStock', type: 'boolean' },
  ]"
  [rows]="[{ sku: 'SKU-1001', price: 4290, inStock: true }]"
  note="Prices are ints, in cents."
/>

<!-- Or point it at a specific code block -->
<div #code><docs-code-block … /></div>
<docs-model-preview [linkedCode]="code" … />
```

## Icon badge

A square-ish (4px) icon tile filled with the accent: ink with a white icon in light mode, mint with a black icon in dark mode. Project a `<docs-icon>` (or a short label, as here). There are no color variants.

### Sizes

1

2

3

4

#### Usage

```html
<docs-icon-badge size="md">
  <docs-icon name="box" size="md" />
</docs-icon-badge>
```

## Icon

Inline SVG icons from a fixed, curated set in `icon-registry.ts` (a spec fails on any raw `<svg>` outside it). Icons inherit the current text color (`currentColor`), so style them with any `text-*` token. Inputs: `name` (`IconName`, required) and `size` (`sm | md | lg`). Often paired with `docs-icon-badge`.

### Sizes

### All icons

`lightning`

`dollar`

`lock`

`refresh`

`box`

`chart`

`sliders`

`gear`

`code`

`terminal`

`components`

`monitor`

`check`

`link`

`filter`

`copy`

`external-link`

`chevron-down`

`chevron-left`

`chevron-right`

`x`

`menu`

`search`

`sun`

`moon`

`clock`

`text-lines`

`document`

`arrow-up`

`arrow-down`

`info`

`alert-success`

`alert-warning`

`alert-error`

`link-2`

`copy-2`

`check-2`

#### Usage

```html
<docs-icon name="lightning" size="md" />

<!-- Inherits text color via currentColor: -->
<span class="text-accent"><docs-icon name="check" /></span>

<!-- Inside an icon badge: -->
<docs-icon-badge size="sm"><docs-icon name="box" size="sm" /></docs-icon-badge>
```

## Badge

Square-ish (4px) tags, the shape of the website's pills: `default` is neutral (`surface-muted`), `success` mint, `warning` yellow, `error` the muted error tint, `info` an ink outline. Brand fills carry black text.

### Variants

Default

Success

Warning

Error

Info

### Sizes

Small

Medium

### Use cases

v2.0.0

Stable

Beta

Deprecated

#### Usage

```html
<docs-badge variant="success">Stable</docs-badge>
<docs-badge variant="info" size="sm">v2.0.0</docs-badge>
```

## Reference table

A data-driven reference table for flag/command lists, like the website's reference tables: an uppercase head row on the 1.5px rule, hairline rows, no outer frame. The first column renders as inline code; pass `cols` for a header row or omit it for a headerless table. Scrolls horizontally on narrow screens.

| Flag | Description |
| --- | --- |
| `--json` | Emit machine-readable JSON output |
| `--yes` | Skip confirmation prompts |
| `--version <id>` | Target a specific version |

#### Usage

```ts
cols = ['Flag', 'Description'];          // omit for a headerless table
rows: string[][] = [
  ['--json', 'Emit machine-readable JSON output'],
];

// template
// <docs-ref-table [cols]="cols" [rows]="rows" />
```

## Stat tile

A labelled stat on a 2px rule, like the website's stat rows — an uppercase group label over a big semibold value — used in the aggregation and range API previews. The value is projected, so it can be a formatted expression. Toggle `span2` to span two grid columns and `center` to center the content.

### Example

Sum

6,687

Average

66.87

Count

100

#### Usage

```html
<div class="grid grid-cols-2 gap-3">
  <docs-stat-tile label="Sum">6,687</docs-stat-tile>
  <docs-stat-tile label="Average">66.87</docs-stat-tile>
  <docs-stat-tile label="Count" span2 center>100</docs-stat-tile>
</div>
```