styles: ship optional core + default reference stylesheets - #26
Merged
jonathanKingston merged 3 commits intoJul 5, 2026
Merged
Conversation
The renderer emits a documented set of class hooks (stream-pending-*, contains-task-list, mermaid-diagram, hljs-*, …) but shipped no CSS, so every consumer had to reconstruct styling from the class contract in ARCHITECTURE.md. Add two optional stylesheets, both scoped under a `.streaming-markdown` class the host puts on its render sink: - styles/core.css: structural rules the output needs to render correctly regardless of theme — pending-state whitespace, task-list marker suppression, code-block whitespace, and layout-blowout guards. No colour/spacing/type. - styles/default.css: imports core.css and layers a batteries-included look (spacing, typography, tables, links, VS Code Dark+ highlight.js palette), retheming via --sm-* custom properties that each carry a fallback. Authored with native CSS nesting. Wire up package exports/files and mark *.css as sideEffects so bundlers keep the imports. Document in README and cross-reference from the class contract in ARCHITECTURE.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FzxuME5EjN8PnsdcF5in6s
The DOM streaming renderer wraps committed content in `.stream-complete` and emits a `.stream-pending-block` tail (streaming.ts). Add the adjacency spacing for that tail to default.css so consumers don't have to reproduce it; the existing first-child rule already covers pending-heading top-margin reset. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FzxuME5EjN8PnsdcF5in6s
`:is(td, th) > code:only-child { overflow-wrap: anywhere; display: block }`
forced char-level wrapping on every table cell's lone code span. That is
host-specific table nuance (e.g. a consumer that pins a first "id" column and
wants it on one line) rather than a generic default, and it overrode such a
host rule. Table blowout is already handled generically by the base cell
`overflow-wrap: break-word` and the table's `overflow-x: auto`; leave the
lone-code-span policy to the host.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FzxuME5EjN8PnsdcF5in6s
jonathanKingston
force-pushed
the
claude/streaming-markdown-css-examples-2fwp20
branch
from
July 5, 2026 18:38
e32257f to
20c72cd
Compare
jonathanKingston
added a commit
to copse-dev/agent-pane
that referenced
this pull request
Jul 5, 2026
## Why `@copse/streaming-markdown` now ships its markdown styling as `core.css` + `default.css` (scoped under `.streaming-markdown`). Adopt it here and delete the duplicated rules so the package is the single source of truth for markdown-output styling. Depends on copse-dev/streaming-markdown#26. ## What **−284 / +33 lines.** - Bump the `@copse/streaming-markdown` pin to the commit that ships `styles/`. - Import `styles/default.css` in `main.ts` (before `global.css` so app rules win ties) and add the `.streaming-markdown` scope class to every render sink: conversation messages, subagent cards, pr-pane, review-panel, context-panel. - Bridge the package's `--sm-*` knobs onto agent-pane's theme tokens in `conversation.css`, so rendered markdown still tracks the active theme. - **Delete** the migrated rules: base typography, lists, task lists, all `stream-pending`/`stream-complete` rules, inline code, links, `pre`/`code`, tables, blockquote, hr, and the whole `hljs` theme (`syntax-highlight.css` removed). - **Keep** host-only chrome the package never emits: code/table copy buttons, mermaid expand/zoom dialog + folded affordance + fallback, artifact images, and the app-specific wide-table first-column pinning (it out-specifies the library's generic rule, so table behavior is unchanged). ## Verification - ✅ Edited `global.css` bundles through esbuild (agent-pane's bundler) with no errors. - ✅ Package-CSS import type-checks via the ambient `declare module '*.css'` (`src/renderer/css.d.ts`). - ✅ No dangling references to the removed file; no tests assert the deleted CSS. -⚠️ Not yet run against a full install: `npm run typecheck` / app build / WebdriverIO e2e need an environment where the new dependency pin is installed. Before merge, run those and eyeball a streamed message, a mermaid diagram, and a wide PR table for visual drift — the two judgment calls are the `--sm-*` bridge reproducing spacing/colours exactly, and the wide-table first-column pinning still holding. ## Merge ordering Merge streaming-markdown#26 first. The dep is pinned to a **commit SHA** on that branch; if #26 is **squash-merged** (SHA changes), update this pin to the resulting `main` commit before merging here. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01FzxuME5EjN8PnsdcF5in6s --- _Generated by [Claude Code](https://claude.ai/code/session_01FzxuME5EjN8PnsdcF5in6s)_ --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The renderer emits a documented set of class hooks (
stream-pending-*,contains-task-list,mermaid-diagram,hljs-*, …) but shipped no CSS, so every consumer had to reconstruct styling from the class contract inARCHITECTURE.md. This adds optional reference stylesheets while keeping the package host-independent (no auto-injection, opt-in import).What
Two layered stylesheets under a new
styles/dir, both scoped under a.streaming-markdownclass the host adds to its render sink:styles/core.css— structural only: the rules the emitter's output needs to render correctly regardless of theme (pending-state whitespace, task-list marker suppression, code-block whitespace, layout-blowout guards). No colours, spacing, or typography.styles/default.css— importscore.cssand layers a batteries-included look (spacing, typography, tables, links, blockquotes, VS Code Dark+highlight.jspalette). Every value isvar(--sm-*, <fallback>), so it stands alone and rethemes cleanly.Authored with native CSS nesting (works in any current engine; a bundler can lower it for old targets). Also covers the
.stream-complete/.stream-pending-blockpending-tail spacing, sincestreaming.tsemits those classes.Package wiring:
exportssubpaths for both files,"styles"infiles, andsideEffects: ["**/*.css"]so bundlers don't drop the imports.Usage
Retheme by setting
--sm-*custom properties (--sm-border,--sm-accent,--sm-code-bg, …) — see the header comment instyles/default.css.Notes
ARCHITECTURE.md) only.default.cssthrough esbuild (@importresolves, nesting parses, no warnings).🤖 Generated with Claude Code
https://claude.ai/code/session_01FzxuME5EjN8PnsdcF5in6s
Generated by Claude Code