Description
Add BlockCodeContainer — presentational container for code-block rendering (monospaced font, dark surface, rounded corners, horizontal scroll for long lines). Used by DialogueMarkdownView for fenced code blocks, by BashWidget for command/output display, and by specialized tool widgets rendering code.
Spec: Epic #250 §6 (UI concept — specialized tool widgets).
Scope
Create MacApp/Packages/DesignSystem/Sources/DesignSystem/Components/BlockCodeContainer.swift:
```swift
public struct BlockCodeContainer<Content: View>: View {
public init(
language: String? = nil, // displayed in top-right corner (e.g., "swift")
showLineNumbers: Bool = false,
@ViewBuilder content: () -> Content
)
}
```
- Background:
DS.Color.codeBackground (semantic token — new if missing; adapts light/dark/HCR).
- Radius:
DS.Radius.md (.continuous).
- Padding:
DS.Spacing.sm internal.
- Language badge: top-right corner,
DS.Text.caption2 monospaced, tinted DS.Color.textTertiary.
showLineNumbers — prefixes each line with 1-indexed counter in DS.Color.textTertiary.
.textSelection(.enabled) on content so user can copy code.
- Horizontal scroll for lines longer than container width (
ScrollView(.horizontal, showsIndicators: false)).
- No syntax highlighting in MVP (monochrome). Highlight plugs into
content via consumer — the container is presentational only.
Acceptance Criteria
Relationships
Description
Add
BlockCodeContainer— presentational container for code-block rendering (monospaced font, dark surface, rounded corners, horizontal scroll for long lines). Used byDialogueMarkdownViewfor fenced code blocks, byBashWidgetfor command/output display, and by specialized tool widgets rendering code.Spec: Epic #250 §6 (UI concept — specialized tool widgets).
Scope
Create
MacApp/Packages/DesignSystem/Sources/DesignSystem/Components/BlockCodeContainer.swift:```swift
public struct BlockCodeContainer<Content: View>: View {
public init(
language: String? = nil, // displayed in top-right corner (e.g., "swift")
showLineNumbers: Bool = false,
@ViewBuilder content: () -> Content
)
}
```
DS.Color.codeBackground(semantic token — new if missing; adapts light/dark/HCR).DS.Radius.md(.continuous).DS.Spacing.sminternal.DS.Text.caption2monospaced, tintedDS.Color.textTertiary.showLineNumbers— prefixes each line with 1-indexed counter inDS.Color.textTertiary..textSelection(.enabled)on content so user can copy code.ScrollView(.horizontal, showsIndicators: false)).contentvia consumer — the container is presentational only.Acceptance Criteria
BlockCodeContainer.swiftwith publicinit(language:showLineNumbers:content:).language != nil, hidden otherwise..textSelection(.enabled)on content — verified via VoiceOver + ⌘C copies selection.DS.Color.codeBackgroundtoken added toDS.Colorif missing (4 appearances in Asset Catalog).DesignSystemCatalog— previews with / without language, with / without line numbers, light/dark/HCR.ds-api.Relationships