Skip to content
NockerlDesignv2.0.0

Code block

In review
Live · web

Full chrome: filename · language · copy (tab to it, hit Enter)

backoff.ts
import { CodeBlock } from '@dizyx/nockerl-react';
export function Viewer() {
return <CodeBlock filename="backoff.ts"
language="typescript" showLineNumbers lines={lines} />;
}
// nextDelay caps the exponential backoff at 30s and adds jitter so a fleet never stampedes

No header · line numbers · a quiet, recessed well

{
"engine": "cloud-agent",
"maxBudgetUsd": 5,
"streaming": true
}

Wrap toggle: long line scrolls (off) or reflows (on)

Wrap lines
gateway.ts
import { CodeBlock } from '@dizyx/nockerl-react';
export function Viewer() {
return <CodeBlock filename="backoff.ts"
language="typescript" showLineNumbers lines={lines} />;
}
// nextDelay caps the exponential backoff at 30s and adds jitter so a fleet never stampedes

Unified diff: added / removed (warm status + a +/- glyph, never color alone)

backoff.kt
fun nextDelay(attempt: Int): Long =
minOf(15_000, 1_000 shl attempt)
minOf(30_000, 1_000 shl attempt)
.plus(Random.nextLong(250))

Copy writes to the clipboard and confirms Copied for ~2s · the code region is a focusable, scrollable target. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)


export function FileViewer({ source }: { source: string }) {
  return (
    <CodeBlock
      filename="backoff.ts"
      language="typescript"
      code={source}
      showLineNumbers
      highlightLines={[4]}
      onCopy={() => track('code.copy')}
    />
  );
}


// Unified-diff mode: added/removed lines get a warm wash + a +/- gutter.
<CodeBlock filename="backoff.kt" language="kotlin" diff oldCode={before} code={after} />;

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
code *stringThe source to display. Rendered in the font.family.mono well.
filenamestringShown in the header bar. Omit → the block renders with no header.
language'typescript' | 'kotlin' | 'swift' | 'json' | 'shell'Drives the cyan-soft language pill + the file-type tint dot.
showLineNumbersbooleanfalseRight-aligned, muted line-number gutter (sticky under horizontal scroll).
highlightLinesnumber[][]Lines to emphasize: a faint cyan wash + a left cyan rail (a shape, not a glow). This inset rail is the one sanctioned Law 6 carve-out (adjudication B18): editorial emphasis inside a code surface only, always paired with a wash, never status, never selection, and never outside code.
wrapbooleanfalseSoft-wrap long lines. Off → lines scroll horizontally (the app default).
diffbooleanfalseUnified-diff mode: a +/- gutter with warm added/removed washes.
oldCodestringThe pre-change source, diffed against code when diff is set.
onCopy() => voidFires after a successful copy. The button confirms Copied for ~2s.