.md

Content blocks

Building blocks for page content: feature, check, and numbered list rows, prompt bubbles, the page actions, the scripted terminal, and API preview states.

Feature item

A rule-topped feature row, like the website's feature columns: an optional icon (project it with the icon attribute, in an icon badge) next to a semibold title and a gray description.

Example

Data models

Typed schemas with validation, defaults, and computed properties

Relationships

Connect models via references — products to categories, orders to users

Indexed queries

Indexed properties answer filters without scanning every item

Real-time updates

Upsert, delete, refresh data — lists update automatically

Usage

<docs-feature-item title="Feature Name" description="Feature description">
  <docs-icon-badge icon size="sm">
    <docs-icon name="box" size="sm" />
  </docs-icon-badge>
</docs-feature-item>

Prompt bubble

A chat-style "user prompt": a square ink author tile next to a panel framed by the 1.5px rule, used on the Agentic recipes and setup pages to show the prompt a user types to the agent. The prompt text is projected; author sets the tile's label (default 'You').

Example

You
What's in products.csv?

Usage

<docs-prompt-bubble>What's in products.csv?</docs-prompt-bubble>

<!-- Custom avatar label -->
<docs-prompt-bubble author="Me">{{ recipe.prompt }}</docs-prompt-bubble>

Copy as Markdown

The page actions next to the breadcrumb: a mint "Copy as Markdown" button that copies the page's raw .md (generated at build time) and an outline .md link that opens it, for agents and curious readers. The docs layout renders it once.

Example

.md

Usage

<docs-copy-markdown />

API preview state

Wraps the loading / ready / failed states of an interactive API preview so every SDK query and fn page renders the same spinner and error message (an error-tinted pill). The ready-state content must be passed as a child <ng-template> — it is rendered lazily only when ready is true, so bindings inside it are never evaluated while data is still loading. Inputs: loading, ready, loadingText, errorText.

Example (loading state)

Loading data...

Usage

<docs-api-preview-state
  [loading]="isLoading()"
  [ready]="!!result()"
  loadingText="Loading data..."
  errorText="Failed to load data"
>
  <ng-template>
    <!-- ready content — rendered lazily, only when [ready] is true -->
    <docs-stat-tile label="Sum">{{ stats()!.sum }}</docs-stat-tile>
  </ng-template>
</docs-api-preview-state>

Check list item

A checklist row: a square mint marker with a black check (the mark a checked docs-checkbox shows) next to the label — for "what you'll get" or requirement lists. Inputs: text (required). Stack several in a column for a checklist.

Example

Type-safe data models with validation
Indexed queries on in-memory data
Real-time updates with automatic list refresh

Usage

<docs-check-list-item text="Type-safe data models" />

Numbered list item

An ordered step row: the step number in semibold ink, no circle, next to the gray label. Inputs: number and text (both required). Wrap items in a <ul> or <ol>.

Example

  • 1Install the dcupl CLI
  • 2Scaffold a project with dcupl init
  • 3Run the local data app

Usage

<ul class="list-none pl-0">
  <docs-numbered-list-item [number]="1" text="Install the dcupl CLI" />
  <docs-numbered-list-item [number]="2" text="Scaffold a project" />
</ul>

Next steps

The footer that guides readers on: rule-topped columns (a 2px rule, a semibold title with an arrow, a gray description), like the website's feature rows, at the bottom of guide and reference pages. In component pages use <docs-next-steps> directly; in Markdown pages use the :::next-steps directive.

Example

Component usage

<docs-next-steps
  [links]="[
    { label: 'Quick start', path: '/sdk/quick-start', desc: 'Set up dcupl in under 5 minutes' },
    { label: 'Models', path: '/sdk/core-concepts/models', desc: 'Define schemas and relationships' },
  ]"
/>

<!-- Optional custom heading (default: 'Next steps') -->
<docs-next-steps heading="Continue reading" [links]="links" />

Markdown directive

:::next-steps{heading="Next steps"}
- [Quick start](/sdk/quick-start) — Set up dcupl in under 5 minutes
- [Models](/sdk/core-concepts/models) — Define schemas and relationships
:::

<!-- {heading="..."} is optional; description after — is optional -->

Scripted terminal

An animated terminal that replays a captured CLI session — commands type themselves in, output streams beneath, then the next step begins. It is drawn like the code panels: a rule-framed editor surface under a light header strip (title, a "Terminal" pill, Skip / Replay and the mint Copy button); gray prompts, white commands, results in mint and warnings in yellow. Playback starts when the terminal scrolls into view, can be replayed or skipped (click the body), and copies all commands. It is SSR-safe (the full session renders statically first) and honours prefers-reduced-motion. Used across the Agentic and CLI docs.

Example

zsh — example session

create an in-memory daemon: dcupl app create --auto-update --json — output: { "appId": "app_8f3a", "status": "running" }

ingest a CSV: dcupl app data upsert --file products.csv --model Product --json — output: { "model": "Product", "upserted": 1284, "applied": true }

Props

  • steps: TerminalStep[] — the session: each step has a command, optional output, outputLang ('json' | 'text'), comment, and pauseAfter.
  • title: string — the window-chrome label (default 'zsh — dcupl').
  • typeSpeed: number — characters typed per second (default 55).

Usage

import { ScriptedTerminalComponent, TerminalStep } from '../components/ui';

steps: TerminalStep[] = [
  {
    comment: 'create an in-memory daemon',
    command: 'dcupl app create --auto-update --json',
    outputLang: 'json',
    output: '{ "appId": "app_8f3a", "status": "running" }',
  },
];

// template
// <docs-scripted-terminal [steps]="steps" title="zsh — dcupl" />