Skip to content

D-3: DesignSystem — add BlockCodeContainer primitive #253

@kirich1409

Description

@kirich1409

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

  • BlockCodeContainer.swift with public init(language:showLineNumbers:content:).
  • Renders correctly with 1, 10, 100, 1000 lines of code; horizontal scroll works for lines > 200 chars.
  • Language badge displays when language != nil, hidden otherwise.
  • Line numbers column is fixed-width, aligns with content.
  • .textSelection(.enabled) on content — verified via VoiceOver + ⌘C copies selection.
  • DS.Color.codeBackground token added to DS.Color if missing (4 appearances in Asset Catalog).
  • Added to DesignSystemCatalog — previews with / without language, with / without line numbers, light/dark/HCR.
  • Owner approval for ds-api.

Relationships

Metadata

Metadata

Assignees

No one assigned

    Labels

    complexity:SdialogueDialogue feature — structured chat UI for agent sessionsds-apiChanges to DesignSystem public API — requires owner approvalfrontendwave-1

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions