data-display — wyrd.component.code-block

CodeBlock

Read-only source display with optional filename chrome and line numbers.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/code-block.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: CodeBlock  tag: wyrd-code-block  package: wyrd.component.code-block  title: Code block  summary: Read-only source display with optional filename chrome and line numbers.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: data-display  composition: leaf  interactive: falsetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: source      type:        kind: string      required: true      serializable: true      summary: Source text rendered verbatim.    - name: language      type:        kind: string      required: false      default: text      reflects: true      serializable: true      summary: Language identifier exposed for syntax-highlighting adapters.    - name: filename      type:        kind: string      required: false      default: ""      reflects: true      serializable: true      summary: Optional source filename shown in the header.    - name: show-line-numbers      type:        kind: boolean      required: false      default: true      reflects: true      serializable: true      summary: Whether each source line carries a visible line number.  slots: []  events: []  states:    - name: default      source: platform      summary: Source is visible in a fixed dark surface.  parts:    - name: root      summary: Fixed-surface figure.    - name: header      summary: Optional filename and language chrome.    - name: code      summary: Verbatim source text.    - name: line-number      summary: Repeated line-number gutter.  tokens:    background: color.surface-fixed    foreground: color.on-surface-fixed    border-color: color.outline    accent: color.accent    radius: rounded.md    padding: spacing.mdmessages: []obligations:  accessibility:    role: none    keyboard: []    semantics:      - Uses native pre and code semantics on web.      - Line numbers are hidden from assistive technology and source text remains copyable without gutter content.      - Language and filename are supplemental metadata, not the accessible name of the source.  behavior:    model: stateless    interactions: []    hostEffects: []  conditions:    - rtl    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - source      - language      - filename      - show-line-numbers    serializableSlots: []    eventBindings: []    notes: CodeBlock serializes its source and display metadata.examples:  - name: yaml-contract    state: default    properties:      source: "identity:\n  name: Button"      language: yaml      filename: button.yml      show-line-numbers: true    slots: {}  - name: plain    state: default    properties:      source: pnpm run build      language: bash      filename: ""      show-line-numbers: false    slots: {}

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

yaml-contract state: default

identity:
  name: Button

Usage

import { WyrdCodeBlock } from "@wyrd-company/react";

<WyrdCodeBlock source="identity:
  name: Button" language="yaml" filename="button.yml" showLineNumbers />

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdCodeBlock(
  source: 'identity:
  name: Button',
  language: 'yaml',
  filename: 'button.yml',
  showLineNumbers: true,
)

plain state: default

pnpm run build

Usage

import { WyrdCodeBlock } from "@wyrd-company/react";

<WyrdCodeBlock source="pnpm run build" language="bash" filename="" showLineNumbers={false} />

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdCodeBlock(
  source: 'pnpm run build',
  language: 'bash',
  filename: '',
  showLineNumbers: false,
)

Properties

Name	Type	Default	Summary
`source`	`string`	`undefined`	Source text rendered verbatim.
`language`	`string`	`text`	Language identifier exposed for syntax-highlighting adapters.
`filename`	`string`		Optional source filename shown in the header.
`show-line-numbers`	`boolean`	`true`	Whether each source line carries a visible line number.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`background`	`color.surface-fixed`
`foreground`	`color.on-surface-fixed`
`border-color`	`color.outline`
`accent`	`color.accent`
`radius`	`rounded.md`
`padding`	`spacing.md`

States

State	Source	Summary
`default`	platform	Source is visible in a fixed dark surface.

SDUI

Status: serializable. CodeBlock serializes its source and display metadata.

Serializable	Members
Properties	`source, language, filename, show-line-numbers`
Slots	`—`
Events	`—`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Properties

Tokens

States

Accessibility

SDUI