Code block

In review

Live · web

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

backoff.tstypescript

1import { CodeBlock } from '@dizyx/nockerl-react';

2

3export function Viewer() {

4 return <CodeBlock filename="backoff.ts"

5 language="typescript" showLineNumbers lines={lines} />;

6}

7// nextDelay caps the exponential backoff at 30s and adds jitter so a fleet never stampedes

No header · line numbers · a quiet, recessed well

1{

2 "engine": "cloud-agent",

3 "maxBudgetUsd": 5,

4 "streaming": true

5}

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

Wrap lines

gateway.tstypescript

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

1fun nextDelay(attempt: Int): Long =

- minOf(15_000, 1_000 shl attempt)

2+ minOf(30_000, 1_000 shl attempt)

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

TypeScriptKotlinSwift

// 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} />;

// Android: Jetpack Compose (canonical). The dedicated viewer body lives in
// com.nockerl.app.files.ui; the diff variant in com.nockerl.app.chat.ui.
import com.nockerl.app.files.ui.FileViewerContent
import com.nockerl.app.files.ui.LanguageBadge
import com.nockerl.app.chat.domain.computeDiff

// Header chrome (filename + language pill) is supplied by the surrounding sheet:
LanguageBadge(language = "TypeScript")

// The recessed, 2D-scrollable monospace well (line-number gutter; lines never wrap):
FileViewerContent(
    content = state.viewerContent,   // FileContent(content, language, isBinary, error)
    isLoading = state.isViewerLoading,
    modifier = Modifier.fillMaxSize(),
)

// Unified diff for an Edit/Write (red/green lines, +/- gutter, copy of the new content):
val diffLines = computeDiff(old = before, new = after)   // List<DiffLine>

// macOS: SwiftUI, from the NockerlDesign SwiftPM package. `NockerlCodeBlock` is a
// RECESSED monospace well (code sinks into the page, law §2): an optional filename
// header that also hosts the copy button, an optional line-number gutter, and
// horizontal scrolling. Lines NEVER wrap unless `wrap` is set. Replaces Voice's raw
// `.monospaced` Text. The `code` argument is the first positional.
import NockerlDesign

NockerlCodeBlock(
    source,                       // the source text, rendered verbatim
    filename: "backoff.swift",    // header title + copy button; omit → no header
    showLineNumbers: true
)

// No filename → the well renders without a header (copy still appears where the
// platform has a pasteboard).
NockerlCodeBlock(snippet)

// Soft-wrap long lines instead of scrolling horizontally.
NockerlCodeBlock(longLine, wrap: true)

// Syntax highlighting, highlight-lines, and the unified-diff mode are documented
// web/Android-first follow-ups, not in NockerlDesign yet.

Parameters

TypeScriptKotlinSwift

Prop	Type	Default	Description
code *	string	n/a	The source to display. Rendered in the font.family.mono well.
filename	string	n/a	Shown in the header bar. Omit → the block renders with no header.
language	'typescript' | 'kotlin' | 'swift' | 'json' | 'shell'	n/a	Drives the cyan-soft language pill + the file-type tint dot.
showLineNumbers	boolean	false	Right-aligned, muted line-number gutter (sticky under horizontal scroll).
highlightLines	number[]	[]	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: editorial emphasis inside a code surface only, always paired with a wash, never status, never selection, and never outside code.
wrap	boolean	false	Soft-wrap long lines. Off → lines scroll horizontally (the app default).
diff	boolean	false	Unified-diff mode: a +/- gutter with warm added/removed washes.
oldCode	string	n/a	The pre-change source, diffed against code when diff is set.
onCopy	() => void	n/a	Fires after a successful copy. The button confirms Copied for ~2s.

Parameter	Type	Default	Description
content *	FileContent?	n/a	FileContent(content, language, isBinary, error). Drives the well + its empty / binary / error states.
isLoading *	Boolean	n/a	Shows a centered progress indicator while the file is fetched.
modifier	Modifier	Modifier	Applied to the content root. Pass Modifier.fillMaxSize() for a full viewer.
language	String	n/a	LanguageBadge(language), the cyan-soft pill beside the filename in the sheet top bar.
diffLines	List<DiffLine>	n/a	DiffView input from computeDiff(old, new); each DiffLine(type, text, lineNumber) is ADDED / REMOVED / UNCHANGED.
newContent	String	n/a	The resulting content the DiffView copy button writes to the clipboard.

NockerlCodeBlock is the recessed well: a filename header (which also hosts the copy button), an optional line-number gutter, and horizontal scroll. It renders the platform .monospaced design (the Swift token build emits no mono type role yet; see drift). The code argument is the first positional.

Parameter	Type	Default	Description
code *	String	n/a	First positional arg: the source text, rendered verbatim in the mono well.
filename	String?	nil	Header title (e.g. "backoff.swift"). The header also hosts the copy button; omit → no header (copy still shows where the platform has a pasteboard).
showLineNumbers	Bool	false	Render the muted, right-aligned line-number gutter.
wrap	Bool	false	Soft-wrap long lines instead of scrolling horizontally (horizontal scroll is the default idiom).

Cross-platform drift (tracked for reconciliation)

These are the real divergences:

• Swift now ships the well. NockerlCodeBlock (NockerlDesign) provides the recessed well, filename header, copy, line-number gutter, and horizontal scroll, replacing Voice’s raw .monospaced Text. Syntax highlighting, highlight-lines, and diff are not in it yet (web/Android-first follow-ups).
• Mono font token: the ratified code face is Space Mono, but the Swift token build emits no mono type role and the package bundles no fonts, so NockerlCodeBlock renders the platform .monospaced design. Emitting + bundling the mono token is the flagged follow-up.
• Syntax highlighting: the Android file viewer is plain monospace (highlighting deferred), and NockerlCodeBlock is too; only the markdown renderer + this web demo tint syntax. The well + chrome are identical either way. Pick one policy.
• Language pill: NockerlCodeBlock takes no language (no pill), and there is also no file-type.swift token. Add both when the language affordance lands on Swift.
• Diff ships on Android (DiffView) and is specified for web; Swift has none.