# Layout & structure

The logo, containers, page scaffolding, steppers, and timelines for structuring documentation pages and sequential walkthroughs.

## Logo

The dcupl mark (two arcs) and the "dcupl" wordmark in semibold Hanken Grotesk, as on the website, with an optional mono suffix. It draws in `currentColor`, so it works on light, dark and inverted surfaces. Inputs: `size` (the wordmark's font size in px, default `22`; the mark scales with it) and `suffix`. The top navigation uses `suffix="docs"`.

dcupldocs

dcupl

dcupl

#### Usage

```html
<docs-logo suffix="docs" />
<docs-logo [size]="32" />
```

## Card

A flat card with 6px corners and no shadow. Where a link grid can be rule-topped columns (Box Grid, Next Steps), prefer those; use a card when a boxed panel is really needed. Renders as a router link when `href` is set.

### Variants

#### default

A panel framed by the 1.5px rule (`landing` looks the same).

#### bordered

A quieter panel with a hairline border.

### Link cards

A hairline border that turns into the rule on hover, with an arrow in the corner that nudges right.

- [Quick start](/sdk/quick-start) — Build a working example in 5 minutes

- [Core concepts](/sdk/core-concepts) — Understand models, lists, and queries

#### Usage

```html
<docs-card variant="link" href="/path" padding="md">
  <h4>Card Title</h4>
  <p>Card description</p>
</docs-card>
```

## Section header

A section heading on the docs scale (`docs-h2`: 32px semibold, tight tracking) with an optional gray subtitle.

### Example

## Key capabilities

## How it works

Three simple steps to get started with dcupl

## Centered header

This header is centered for hero sections

#### Usage

```html
<docs-section-header
  title="Section Title"
  subtitle="Optional subtitle text"
  [centered]="true"
/>
```

## Step card

A numbered step as a rule-topped column: a big semibold number, a title and a gray description, with projected content (e.g. a snippet) underneath. For "How it works" rows.

### Example

### Define models

Create typed schemas with properties, relationships, and validation rules.

```text
dcupl.models.set({
  key: 'Product',
  properties: [...]
});
```

### Load data

Inline arrays, fetch from APIs, or use the Loader with Console.

```text
dcupl.data.set(products, {
  model: 'Product'
});
```

### Query instantly

Filter, sort, aggregate, and analyze — all in-memory, indexed.

```text
dcupl.lists.create({
  modelKey: 'Product'
});
```

#### Usage

```html
<docs-step-card
  [step]="1"
  title="Step Title"
  description="Step description"
>
  <!-- Optional content -->
</docs-step-card>
```

## Box grid

A responsive grid of rule-topped columns, like the website's feature rows — the unified pattern for pillars, lifecycle/step flows, feature grids and link grids. Toggle `numbered` for big semibold numbers and `connectors` for arrows between columns. Set `columns` to 2, 3, or 4. Each `DocsBoxItem` also supports an optional `meta` field — a small pill in the top-right corner (e.g. a duration).

### Numbered (pillars)

### Machine-readable output

Every command accepts a global --json flag, so agents parse structured output instead of scraping text.

`--json`

### An explicit lifecycle

Mutations stage changes that you apply with a build step, so state stays predictable and inspectable.

`dcupl app build`

### The dcupl skill

A Claude Code plugin that encodes dcupl domain knowledge, command patterns, and the non-obvious gotchas.

### Numbered with connectors (lifecycle)

### create

Start a daemon (an in-memory SDK instance)

### mutate

Ingest data — stages changes

### build

Apply staged changes (or use --auto-update)

### query

Query, facet & aggregate — then destroy

### Compact (dense step row)

Tighter padding and a smaller number for dense, scannable sequences.

### create

Start a daemon (an in-memory SDK instance)

### mutate

Ingest data — stages changes

### build

Apply staged changes (or use --auto-update)

### query

Query, facet & aggregate — then destroy

### Plain (feature grid)

### Machine-readable output

Every command accepts a global --json flag, so agents parse structured output instead of scraping text.

`--json`

### An explicit lifecycle

Mutations stage changes that you apply with a build step, so state stays predictable and inspectable.

`dcupl app build`

### The dcupl skill

A Claude Code plugin that encodes dcupl domain knowledge, command patterns, and the non-obvious gotchas.

### With icons

Each item can carry an `icon` (in an icon badge) instead of a number.

### Fast

In-memory, indexed queries that return instantly.

### Secure

Scoped access with per-model permissions.

### Composable

Models, lists, and references that build up.

### Link cards

Add an `href` to make a column a router link: an arrow follows the title and nudges right on hover, and the title underlines.

- [Quick start](/sdk/quick-start) — Build a working example in 5 minutes
- [Core concepts](/sdk) — Understand models, lists, and queries

#### Usage

```html
<!-- Numbered pillars (default 3 columns) -->
<docs-box-grid [items]="pillars" numbered />

<!-- Lifecycle: 4 columns, numbered, with arrow connectors -->
<docs-box-grid [items]="lifecycle" [columns]="4" numbered connectors />

<!-- Compact: denser padding + smaller number for tight step rows -->
<docs-box-grid [items]="lifecycle" [columns]="4" numbered connectors compact />

<!-- Plain feature grid -->
<docs-box-grid [items]="features" [columns]="2" />

// item shape:
// {
//   title: string;
//   body?: string;
//   code?: string;    // inline code chip
//   icon?: IconName;  // shown instead of a number
//   href?: string;    // makes the column a router link (arrow after the title)
//   meta?: string;    // small pill in the top-right corner (e.g. a duration)
// }
```

## Page header

The standard header for `.page.ts` pages: the `h1` on the `docs-h1` scale and a projected lead paragraph (which keeps its own inline links). There is no label above the title: the layout's breadcrumb says where the page sits. Used across the CLI and Agentic guide pages.

# Example page

The lead paragraph is projected, so it can contain **markup** and links.

#### Usage

```html
<docs-page-header title="Quickstart">
  <p class="max-w-2xl text-lg text-text-secondary">
    Lead paragraph with <a routerLink="/cli">links</a> preserved.
  </p>
</docs-page-header>
```

## Concept page shell

The standard shell for SDK concept pages: a `DocsPageHeader` (title + lead), the section layout, and a `DocsNextSteps` footer, so page files only declare their sections and next-step links. Each section (`docs-scroll-sync-split-layout`) reads like a markdown section: an h2 under the 1.5px rule, text in the prose styles (17px ink, square bullets, ruled tables), then the section's code block at full column width — one column at every width, since the 56rem column is too narrow to set code beside text. A section can add a `preview` (`ConceptModelPreview`): a `docs-model-preview` under its code, linked to the property lines, as on [SDK › Models](/sdk/core-concepts/models). The headings carry the section ids, so the layout's "On this page" list tracks them. Inputs: `title`, `lead`, `sections` (`ConceptSection[]`), `nextSteps` (`NextStepLink[]`), and `nextStepsHeading`. It needs page data, so there is no live demo here.

#### Usage

```html
<docs-concept-page-shell
  title="Models"
  lead="Define the structure and schema of your data."
  [sections]="sections"
  [nextSteps]="nextSteps"
/>

// sections: ConceptSection[] = [{
//   id: 'what-is-model',
//   title: 'What is a Model?',
//   content: '<p>…</p>',
//   code: productModelSource,
//   codeLanguage: 'typescript',
//   codeFilename: 'product.model.ts',
//   preview: { model: 'Product', properties, rows, note: 'Prices are ints, in cents.' },
// }];
```

## Timeline

A two-column timeline for milestone or process narratives: a hairline down the middle, steps alternating left and right, the step number in a square marker on the line (mint for `variant="highlight"`). Compose `docs-timeline` with `docs-timeline-step` children. Step inputs: `step`, `badge`, `title`, `description` (required), plus `contentOrder` (`left | right`), `variant` (`default | highlight`), and `isLast`. Project a `visual` slot for the opposite column and an optional `link` slot. The center rail and alternating layout appear at `md` and up.

### Example

Step one

### Model your data

Define typed schemas with properties, relationships, and validation.

```bash
dcupl generate model Product
```

1

Step two

### Query instantly

Run indexed, faceted queries in memory, without a round trip to a server.

```ts
catalog.getList('products')
```

2

#### Usage

```html
<docs-timeline>
  <docs-timeline-step
    [step]="1"
    badge="Step one"
    title="Model your data"
    description="Define typed schemas with validation."
    contentOrder="left"
  >
    <docs-code-block visual code="dcupl generate model Product" language="bash" />
  </docs-timeline-step>
  <docs-timeline-step
    [step]="2"
    badge="Step two"
    title="Query instantly"
    description="Run indexed, faceted queries."
    contentOrder="right"
    variant="highlight"
    [isLast]="true"
  >
    <docs-code-block visual code="catalog.getList('products')" language="ts" />
  </docs-timeline-step>
</docs-timeline>
```

## Stepper

A vertical numbered stepper for sequential walkthroughs — a hairline left rail with square ink number markers and arbitrary projected content per step. Replaces the hand-rolled `<ol class="… border-l … pl-8">` + absolute number-badge markup duplicated across guide pages. Compose `docs-stepper` with `docs-stepper-step` children; step inputs: `step` (number) and `title`. Titles render as real `<h2>` elements so they still feed the page's table of contents.

### Example

## Step 1: Scaffold a project

Create a new project from the default starter.

```bash
dcupl init my-project
```

## Step 2: Run the dev server

Start the local development server on port 8083.

#### Usage

```html
<docs-stepper>
  <docs-stepper-step [step]="1" title="Scaffold a project">
    <p>Create a new project from the default starter.</p>
    <docs-code-block code="dcupl init my-project" language="bash" theme="dark" />
  </docs-stepper-step>
  <docs-stepper-step [step]="2" title="Run the dev server">
    <p>Start the local development server on port 8083.</p>
  </docs-stepper-step>
</docs-stepper>
```