core.css

/*
 * @copse/streaming-markdown — core (structural) styles
 *
 * The minimum rules required for the renderer's output to display CORRECTLY,
 * independent of any theme: streaming pending-state whitespace, task-list
 * marker suppression, code-block whitespace, and layout-blowout guards. It
 * carries no colours, spacing, or typography — pair it with your own theme, or
 * import `default.css` (which imports this file) for a batteries-included look.
 *
 * Everything is scoped under `.streaming-markdown`. Put that class on the
 * element you assign rendered markdown to. Authored with native CSS nesting.
 *
 * Class contract: see docs/ARCHITECTURE.md in the source repo.
 */

.streaming-markdown {
  /* Pending (mid-stream) blocks hold raw text before a block is committed;
     preserve the source whitespace so partial lines read correctly. */
  & .stream-pending {
    white-space: pre-wrap;
  }
  & .stream-pending-paragraph,
  & p.stream-pending-paragraph {
    display: block;
    margin: 0;
    white-space: pre-wrap;
  }
  & li.stream-pending-list-item {
    white-space: normal;
  }
  & .stream-pending-list-continuation,
  & span.stream-pending-list-continuation {
    white-space: normal;
  }
  & .stream-pending-heading,
  & div.stream-pending-heading,
  & p.stream-pending-heading {
    display: block;
    white-space: normal;
  }
  & blockquote.stream-pending-blockquote p {
    margin: 0;
    white-space: pre-wrap;
  }

  /* GFM task lists: the checkbox is the marker, so drop the bullet and the
     hanging indent. `li.task-list-item` also covers a task item mixed into an
     otherwise-bulleted list. */
  & ul.contains-task-list {
    padding-inline-start: 0;
    list-style: none;
  }
  & li.task-list-item {
    list-style: none;
  }
  & li.task-list-item input[type='checkbox'] {
    margin-inline-end: 0.45em;
    vertical-align: middle;
    cursor: default;
  }

  /* Fenced/indented code keeps its own whitespace and never inherits inline
     `code` chrome; scroll instead of widening the container. */
  & pre {
    /* overflow-y explicit so overflow-x: auto doesn't get it promoted to auto
       (a spurious vertical scrollbar from sub-pixel content extent). The block
       auto-sizes to its lines by default. If you cap code-block height, set
       `overflow-y: auto` yourself to restore vertical scroll. */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: pre;
  }
  & pre code {
    white-space: pre;
    background: none;
    padding: 0;
  }

  /* Pending math shows its TeX source verbatim; wrap instead of blowing out.
     Rendered KaTeX (display mode) scrolls inside its own block. */
  & .math-block--pending pre.math,
  & .math-block--error pre.math {
    white-space: pre-wrap;
  }
  & .math-block--rendered {
    /* Horizontal scroll for wide equations. overflow-y must be set explicitly:
       leaving it `visible` makes the spec promote it to `auto` alongside
       overflow-x, and KaTeX's sub-pixel vertical extent then trips a spurious
       vertical scrollbar. The block auto-sizes to its content, so nothing real
       is ever clipped. */
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Blowout guards: keep wide tables and rendered diagrams inside the column. */
  & table {
    max-width: 100%;
  }
  /* Opt-in `tableWrapper` scroll region (default class): a table wider than the
     column — many columns, or an unbreakable URL in a cell — scrolls inside it
     instead of overflowing the message. The table's min-content width still
     wins over its own max-width, so the wrapper is what actually contains it.
     overflow-y explicit for the same reason as `pre` above. A custom
     `tableWrapper.className` needs this rule under that class. */
  & .table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  & .mermaid-diagram svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Reserve height while the diagram is pending so hydrating the escaped
     source into an SVG doesn't shove the content (and scroll position) below
     it — the same "pending carries its committed size" contract the pending
     headings follow. Overridable: set `--sm-diagram-min-height: 0` to opt out. */
  & .mermaid-diagram {
    min-height: var(--sm-diagram-min-height, 160px);
  }
}