default.css

/*
 * @copse/streaming-markdown — default theme
 *
 * A batteries-included look for rendered markdown. Imports core.css (structural
 * rules) and layers spacing, typography, colour, tables, and a highlight.js
 * syntax theme on top. Everything is scoped under `.streaming-markdown`.
 *
 *   import '@copse/streaming-markdown/styles/default.css'
 *   el.classList.add('streaming-markdown')
 *
 * Retheme by setting the `--sm-*` custom properties on `.streaming-markdown`
 * (or any ancestor) — each has a fallback so the sheet also stands alone:
 *
 *   --sm-line-height   line-height for prose            (1.55)
 *   --sm-space-xs/sm/md   spacing scale                 (4px / 8px / 12px)
 *   --sm-radius        corner radius                    (4px)
 *   --sm-font-mono     monospace family for code        (system mono stack)
 *   --sm-font-size-sm  size for code / tables           (0.85em)
 *   --sm-fg-muted      secondary text (quotes, footnotes) (#999)
 *   --sm-border        borders / rules                  (#3c3c3c)
 *   --sm-accent        links                            (#007acc)
 *   --sm-code-bg       inline/block code + quote bg     (#252526)
 *   --sm-th-stripe     even table-row background        (rgba(255,255,255,.02))
 *   --sm-error         diagram error glyph              (#f48771)
 *   --sm-alert-note / --sm-alert-tip / --sm-alert-important /
 *   --sm-alert-warning / --sm-alert-caution
 *                      GitHub-alert accent per type     (GitHub dark palette)
 *
 * The `.hljs-*` rules below are a VS Code Dark+ palette; override by
 * redeclaring those selectors after this import.
 */

@import './core.css';

.streaming-markdown {
  line-height: var(--sm-line-height, 1.55);
  word-break: break-word;

  & strong {
    font-weight: 600;
  }

  & p {
    margin: 0;
    white-space: pre-wrap;
  }

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6,
  & .stream-pending-heading {
    margin: var(--sm-space-md, 12px) 0 var(--sm-space-xs, 4px);
    font-weight: 600;
    line-height: 1.35;
  }

  & > :first-child,
  & h1:first-child,
  & h2:first-child,
  & h3:first-child,
  & h4:first-child,
  & .stream-pending-heading:first-child {
    margin-top: 0;
  }

  /* Vertical rhythm between adjacent blocks. */
  & p + p,
  & p + ul,
  & p + ol,
  & ul + p,
  & ol + p,
  & h1 + p,
  & h2 + p,
  & h3 + p,
  & h4 + p,
  & h5 + p,
  & h6 + p,
  & p + h1,
  & p + h2,
  & p + h3,
  & p + h4,
  & p + h5,
  & p + h6 {
    margin-top: var(--sm-space-sm, 8px);
  }

  & ul,
  & ol {
    margin: var(--sm-space-sm, 8px) 0;
    padding-inline-start: 1.5em;
    list-style-position: outside;
    /* pre-wrap on prose would otherwise render source newlines between items. */
    white-space: normal;
  }
  & li > :first-child {
    margin-top: 0;
  }

  /* Heading sizes are declared explicitly (matching the UA defaults) and each
     pending class carries its committed size, so the pending→committed
     promotion (`.stream-pending-hN` div → `<hN>`) changes color at most —
     never text position or wrapping (#11). Raw `#` markers stay hidden
     mid-stream. */
  & h1,
  & .stream-pending-h1 {
    font-size: 2em;
  }
  & h2,
  & .stream-pending-h2 {
    font-size: 1.5em;
  }
  & h3,
  & .stream-pending-h3 {
    font-size: 1.17em;
  }
  & h4,
  & .stream-pending-h4 {
    font-size: 1em;
  }
  & h5,
  & .stream-pending-h5 {
    font-size: 0.83em;
  }
  & h6,
  & .stream-pending-h6 {
    font-size: 0.67em;
  }

  /* The pending tail (`stream-pending-block`, the block still streaming inside
     `stream-complete`) must sit exactly where the committed block that replaces
     it will, or the answer hops each time a block finishes. So it follows the
     committed rhythm above rather than a flat margin: a pending paragraph (its
     own margin is zeroed in core.css) takes the gap `p + p` / `h2 + p` would
     give it and none after anything else, a pending heading after prose takes
     `p + h2`'s, nothing sits above the first block, and every other pending
     block keeps its element's own margin. */
  & .stream-complete > :is(p, ul, ol, h1, h2, h3, h4, h5, h6) + .stream-pending-paragraph,
  & .stream-complete > p + .stream-pending-heading {
    margin-top: var(--sm-space-sm, 8px);
  }
  & .stream-complete > .stream-pending-block:first-child {
    margin-top: 0;
  }

  & code {
    font-family: var(--sm-font-mono, ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
    font-size: var(--sm-font-size-sm, 0.85em);
    background: var(--sm-code-bg, #252526);
    padding: 1px 4px;
    border-radius: 2px;
  }

  & a {
    color: var(--sm-accent, #007acc);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  & a:hover {
    opacity: 0.85;
  }

  & pre {
    background: var(--sm-code-bg, #252526);
    padding: var(--sm-space-sm, 8px);
    border-radius: var(--sm-radius, 4px);
  }

  & blockquote {
    border-left: 3px solid var(--sm-border, #3c3c3c);
    margin: var(--sm-space-sm, 8px) 0;
    padding: var(--sm-space-xs, 4px) var(--sm-space-sm, 8px);
    color: var(--sm-fg-muted, #999);
    background: var(--sm-code-bg, #252526);
    border-radius: 0 var(--sm-radius, 4px) var(--sm-radius, 4px) 0;
  }
  & blockquote p {
    margin: 0;
  }
  & blockquote p + p {
    margin-top: var(--sm-space-xs, 4px);
  }
  & blockquote.stream-pending-blockquote {
    margin: var(--sm-space-sm, 8px) 0;
  }

  /* GitHub alerts (#72): content, not quoted speech — normal foreground on a
     per-type accent border. The pending marker line carries the same classes,
     so promotion to the committed alert changes nothing visually. */
  & blockquote.markdown-alert {
    background: none;
    color: inherit;
    border-radius: 0;
  }
  & .markdown-alert-title {
    font-weight: 600;
  }
  & blockquote.markdown-alert-note {
    border-left-color: var(--sm-alert-note, #4493f8);
  }
  & blockquote.markdown-alert-note .markdown-alert-title {
    color: var(--sm-alert-note, #4493f8);
  }
  & blockquote.markdown-alert-tip {
    border-left-color: var(--sm-alert-tip, #3fb950);
  }
  & blockquote.markdown-alert-tip .markdown-alert-title {
    color: var(--sm-alert-tip, #3fb950);
  }
  & blockquote.markdown-alert-important {
    border-left-color: var(--sm-alert-important, #ab7df8);
  }
  & blockquote.markdown-alert-important .markdown-alert-title {
    color: var(--sm-alert-important, #ab7df8);
  }
  & blockquote.markdown-alert-warning {
    border-left-color: var(--sm-alert-warning, #d29922);
  }
  & blockquote.markdown-alert-warning .markdown-alert-title {
    color: var(--sm-alert-warning, #d29922);
  }
  & blockquote.markdown-alert-caution {
    border-left-color: var(--sm-alert-caution, #f85149);
  }
  & blockquote.markdown-alert-caution .markdown-alert-title {
    color: var(--sm-alert-caution, #f85149);
  }

  & hr {
    border: none;
    border-top: 1px solid var(--sm-border, #3c3c3c);
    margin: var(--sm-space-md, 12px) 0;
  }

  /* Tables: separated borders + overflow clip so outer corners can round. */
  & table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--sm-border, #3c3c3c);
    border-radius: var(--sm-radius, 4px);
    width: 100%;
    table-layout: auto;
    margin: var(--sm-space-sm, 8px) 0;
    font-size: var(--sm-font-size-sm, 0.85em);
    white-space: normal;
    /* Scroll only when a cell has an unbreakable run (e.g. a long hash).
       overflow-y stays explicit: left visible, the spec promotes it to auto
       alongside overflow-x, and sub-pixel row/border extents then trip a
       spurious vertical scrollbar. The table auto-sizes to its rows, so hidden
       clips nothing real (and still clips square cell corners to the radius). */
    overflow-x: auto;
    overflow-y: hidden;
  }
  /* The wrapper is a focus stop (`tabindex="0"`) so keyboard users can scroll a
     wide table; show where focus is, for keyboard focus only. */
  & .table-wrapper:focus-visible {
    outline: 2px solid var(--sm-accent, #007acc);
    outline-offset: 2px;
  }
  & th,
  & td {
    border-right: 1px solid var(--sm-border, #3c3c3c);
    border-bottom: 1px solid var(--sm-border, #3c3c3c);
    padding: 4px 10px;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    min-width: 0;
  }
  & th:last-child,
  & td:last-child {
    border-right: none;
  }
  & tr:last-child td {
    border-bottom: none;
  }
  & th {
    background: var(--sm-code-bg, #252526);
    font-weight: 600;
  }
  & tbody tr:nth-child(even) td {
    background: var(--sm-th-stripe, rgba(255, 255, 255, 0.02));
  }

  /* GFM footnotes (#72): superscript refs and the trailing section. */
  & sup.footnote-ref {
    font-size: 0.75em;
    /* 0, not 1: a raised superscript with any line box can still grow its
       line, so a mid-stream `[^a]` -> <sup> upgrade nudges the paragraph
       taller and shifts everything below it (streaming jitter). A zero-height
       inline box never affects line layout; the glyph renders unchanged. */
    line-height: 0;
  }
  & sup.footnote-ref a {
    text-decoration: none;
  }
  & section.footnotes {
    margin-top: var(--sm-space-md, 12px);
    border-top: 1px solid var(--sm-border, #3c3c3c);
    padding-top: var(--sm-space-sm, 8px);
    font-size: var(--sm-font-size-sm, 0.85em);
    color: var(--sm-fg-muted, #999);
  }
  & section.footnotes ol {
    margin: 0;
  }
  & a.footnote-backref {
    text-decoration: none;
  }

  & .mermaid-diagram {
    margin: var(--sm-space-sm, 8px) 0;
  }
  & .mermaid-diagram .error-icon {
    fill: var(--sm-error, #f48771);
  }
}

/* Subtle settle-in when the incremental DOM emitter commits a block: the new
   node fades up instead of popping. Opacity only — no transform or layout, so
   it can never cause a shift. Scoped to `.stream-complete` (only emitted by
   `StreamingMarkdownRenderer`, which preserves committed node identity): a
   string-emitter host that reassigns innerHTML per token recreates every node
   each frame and must not re-animate its whole output. */
@media (prefers-reduced-motion: no-preference) {
  .streaming-markdown .stream-complete > :not(.stream-pending-block),
  .streaming-markdown .stream-complete li:not(.stream-pending-block),
  .streaming-markdown .stream-complete tbody tr:not(.stream-pending-row) {
    animation: sm-stream-settle 0.25s ease-out;
  }
}

@keyframes sm-stream-settle {
  from {
    opacity: 0.55;
  }
}

/* highlight.js tokens — VS Code Dark+ inspired. Override by redeclaring these
   selectors after importing this sheet. */
.streaming-markdown {
  & .hljs-comment,
  & .hljs-quote {
    color: #6a9955;
    font-style: italic;
  }
  & .hljs-keyword,
  & .hljs-selector-tag,
  & .hljs-built_in {
    color: #569cd6;
  }
  & .hljs-string,
  & .hljs-regexp {
    color: #ce9178;
  }
  & .hljs-number,
  & .hljs-literal {
    color: #b5cea8;
  }
  & .hljs-title,
  & .hljs-title.function_,
  & .hljs-function .hljs-title {
    color: #dcdcaa;
  }
  & .hljs-type,
  & .hljs-class .hljs-title {
    color: #4ec9b0;
  }
  & .hljs-attr,
  & .hljs-attribute,
  & .hljs-variable,
  & .hljs-template-variable {
    color: #9cdcfe;
  }
  & .hljs-meta,
  & .hljs-symbol {
    color: #d4d4d4;
  }
}