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).

Basic

npm install @dcupl/core

With filename

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

With title

npm install @dcupl/core @dcupl/loader

Usage

<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

const categoryModel: ModelDefinition = {
  key: 'Category',
  properties: [
    { key: 'key', type: 'string' },
    { key: 'label', type: 'string' },
    { key: 'productCount', type: 'int' },
    { key: 'featured', type: 'boolean' },
  ],
};

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

<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

Usage

<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

Usage

<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

Sizes

Use cases

Usage

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

Usage

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

Usage

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