@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/chat-core.css

@@ -0,0 +1,469 @@
+
+/* ==========================================================================
+   Chat core (@digithings-ai/ui) — the digichat turn grammar (canon §16).
+   Owned by components/chat/*: <ChatTranscript> term-surface pane,
+   <ChatMessage> marker+body grid rows, <ChatStreamCursor> blink caret, and
+   the <ChatMarkdown>/<ChatCodeBlock> rich-text frame. Only what CANNOT be a
+   token utility lives here (canon migrate-vs-leave): the pane shadow +
+   light-theme surface combinator + prop-driven ::before session header, the
+   caret blink keyframes, and the markdown element combinators with their
+   color-mix washes and ::marker accents.
+   Import once in the app shell:
+     @import "@digithings-ai/ui/styles/chat-core.css";
+   ========================================================================== */
+
+/* ── transcript pane ──────────────────────────────────────────────────── */
+
+.chat-transcript {
+  /* component sizing tokens (chat-core) */
+  --chat-transcript-head-pad: 0.7rem;
+  --chat-transcript-head-gap: 0.2rem;
+  --chat-transcript-head-fs: 0.62rem;
+  box-shadow: 0 30px 60px -42px rgba(0, 0, 0, 0.65);
+}
+
+.chat-transcript--flat {
+  box-shadow: none;
+}
+
+/* Light theme: the pane sits on --surface, not the dark term wash. The
+   combinator's specificity is the point — it wins over bg-term-bg. */
+:root[data-theme="light"] .chat-transcript {
+  background: var(--surface);
+}
+
+/* Faint session header, prop-driven: `session` renders as data-session and
+   the ::before mirrors it, so the header stays pure chrome. */
+.chat-transcript[data-session]::before {
+  content: attr(data-session);
+  display: block;
+  padding-bottom: var(--chat-transcript-head-pad);
+  margin-bottom: var(--chat-transcript-head-gap);
+  border-bottom: 1px solid var(--term-hair);
+  font-family: var(--font-mono);
+  font-size: var(--chat-transcript-head-fs);
+  letter-spacing: 0.06em;
+  color: var(--term-mute);
+}
+
+/* Live-thread variant: thin scrollbar has no token utility. */
+.chat-transcript--scroll {
+  scrollbar-width: thin;
+}
+
+/* ── message row ──────────────────────────────────────────────────────── */
+
+/* Position anchor so hover affordances (a per-turn copy button, digichat-ui's
+   .dc-msg-copy) can pin to the row. Geometry is TSX utilities:
+   grid-cols-[1.25rem_minmax(0,1fr)] — the digichat .dc-term-row grid. */
+.chat-msg {
+  position: relative;
+}
+
+/* ── streaming caret ──────────────────────────────────────────────────── */
+
+/* The ▍ read as a glyph-metric-free block: same mark as digichat-ui's
+   .dt-cur and digichat's .dc-term-streaming::after. Holds a steady block
+   under reduced motion. */
+.chat-cursor {
+  --chat-cursor-w: 0.4375rem;
+  --chat-cursor-h: 0.875rem;
+  --chat-cursor-gap: 0.125rem;
+  --chat-cursor-drop: -0.125rem;
+  display: inline-block;
+  width: var(--chat-cursor-w);
+  height: var(--chat-cursor-h);
+  margin-inline-start: var(--chat-cursor-gap);
+  background: var(--accent);
+  vertical-align: var(--chat-cursor-drop);
+  animation: chat-cursor-blink 1.1s steps(1) infinite;
+}
+
+@keyframes chat-cursor-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ── markdown frame ───────────────────────────────────────────────────── */
+
+/* Element combinators, not per-node classes: any markdown renderer that
+   emits bare tags inside .chat-md picks up the grammar (digichat-ui's
+   .dc-md-* rules map 1:1 onto these). */
+.chat-md {
+  /* component sizing tokens (chat-core markdown grammar) */
+  --chat-md-block-y: 0.8rem;      /* rhythm between block elements */
+  --chat-md-inline-gap: 0.8rem;   /* action rows inside a caption */
+  --chat-md-para-y: 0.6rem;       /* paragraph / list rhythm */
+  --chat-md-list-indent: 1.3rem;
+  --chat-md-gap: 0.3rem;
+  --chat-md-h-fs: 1.15rem;
+  --chat-md-marker-fs: 0.8rem;
+  --chat-md-pad-inline: 0.9rem;
+  --chat-md-pre-pad-y: 0.75rem;
+  --chat-md-code-fs: 0.76rem;
+  --chat-md-caption-pad: 0.4rem 0.7rem;
+  --chat-md-caption-fs: 0.62rem;
+  --chat-md-table-fs: 0.78rem;
+  --chat-md-th-fs: 0.6rem;
+  --chat-md-cell-pad: 0.4rem 0.6rem;
+  --chat-md-copy-hit: 1.5rem;     /* 24px WCAG 2.5.8 floor */
+  --chat-md-copy-bleed: 0.375rem; /* 6px padding / -6px margin pair */
+  color: var(--ink-soft);
+}
+
+.chat-md > *:first-child {
+  margin-top: 0;
+}
+
+.chat-md > *:last-child {
+  margin-bottom: 0;
+}
+
+/* Assistant turns flatten the heading scale — every level reads as the same
+   display-face section head (the transcript, not the page, owns hierarchy). */
+/* h5/h6 are included because ChatMarkdownSource downshifts markdown headings two
+   levels (h1→h3 … h4→h6) so streamed model text cannot claim the page's <h1>.
+   Without them, a `###` in an answer would render structurally correct and
+   completely unstyled. h1/h2 stay listed for any caller that renders the
+   children path with its own heading tags. */
+.chat-md h1,
+.chat-md h2,
+.chat-md h3,
+.chat-md h4,
+.chat-md h5,
+.chat-md h6 {
+  margin: 0 0 var(--space-2, 0.5rem);
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: var(--chat-md-h-fs);
+  color: var(--ink);
+}
+
+.chat-md p {
+  margin: var(--chat-md-para-y) 0;
+}
+
+.chat-md strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.chat-md em {
+  color: var(--ink);
+}
+
+.chat-md code {
+  font-family: var(--font-mono);
+  font-size: 0.82em;
+  padding: 0.1rem 0.35rem;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--ink) 8%, transparent);
+  color: var(--ink);
+}
+
+/* Tailwind preflight zeroes list-style on ul/ol — restore it here or the
+   ::marker accents below never render (carried silently from the specimen,
+   fixed at promotion). */
+.chat-md ul,
+.chat-md ol {
+  margin: var(--chat-md-para-y) 0;
+  padding-inline-start: var(--chat-md-list-indent);
+  display: flex;
+  flex-direction: column;
+  gap: var(--chat-md-gap);
+}
+
+.chat-md ul {
+  list-style: disc;
+}
+
+.chat-md ol {
+  list-style: decimal;
+}
+
+.chat-md li {
+  padding-inline-start: 0.2rem;
+}
+
+/* remark-gfm task lists carry their own checkbox; the disc from `.chat-md ul`
+   would sit beside it as a second marker. */
+.chat-md ul.contains-task-list {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.chat-md ul li::marker {
+  color: var(--accent);
+}
+
+.chat-md ol li::marker {
+  color: var(--ink-mute);
+  font-family: var(--font-mono);
+  font-size: var(--chat-md-marker-fs);
+}
+
+.chat-md blockquote {
+  margin: var(--chat-md-block-y) 0;
+  padding: var(--space-2, 0.5rem) var(--chat-md-pad-inline);
+  border-inline-start: 2px solid var(--accent);
+  background: color-mix(in srgb, var(--accent) 7%, transparent);
+  color: var(--ink-soft);
+  font-style: italic;
+}
+
+.chat-md a {
+  color: var(--accent);
+  text-underline-offset: 2px;
+}
+
+.chat-md hr {
+  border: 0;
+  border-top: 1px solid var(--hair);
+  margin: var(--chat-md-block-y) 0;
+}
+
+.chat-md table {
+  width: 100%;
+  margin: var(--chat-md-block-y) 0;
+  border-collapse: collapse;
+  font-family: var(--font-mono);
+  font-size: var(--chat-md-table-fs);
+}
+
+.chat-md th,
+.chat-md td {
+  text-align: start;
+  padding: var(--chat-md-cell-pad);
+  border-bottom: 1px solid var(--hair);
+}
+
+.chat-md thead th {
+  font-weight: 400;
+  font-size: var(--chat-md-th-fs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-mute);
+}
+
+.chat-md td {
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Bare fenced block (a renderer without <ChatCodeBlock>) reads as the same
+   hairline box, just captionless. */
+.chat-md > pre {
+  margin: var(--chat-md-block-y) 0;
+  padding: var(--chat-md-pre-pad-y) var(--chat-md-pad-inline);
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--ink) 4%, transparent);
+  overflow-x: auto;
+}
+
+.chat-md > pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: var(--chat-md-code-fs);
+  line-height: 1.6;
+  color: var(--ink);
+  white-space: pre;
+}
+
+/* ── fenced code figure + copy affordance ─────────────────────────────── */
+
+.chat-md-code {
+  margin: var(--chat-md-block-y) 0;
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--ink) 4%, transparent);
+}
+
+.chat-md-code figcaption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--chat-md-caption-pad);
+  border-bottom: 1px solid var(--hair);
+  font-family: var(--font-mono);
+  font-size: var(--chat-md-caption-fs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-mute);
+}
+
+.chat-md-code pre {
+  margin: 0;
+  padding: var(--chat-md-pre-pad-y) var(--chat-md-pad-inline);
+  overflow-x: auto;
+}
+
+.chat-md-code code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: var(--chat-md-code-fs);
+  line-height: 1.6;
+  color: var(--ink);
+  white-space: pre;
+}
+
+.chat-md-copy {
+  /* WCAG 2.5.8 (AA): the bare "copy"/"copied" label renders well under the
+     24x24px minimum touch target (~27x16px, height is the shortfall). Grow
+     the hit area with padding, then pull the flow box back with a margin
+     of the exact same magnitude on every side (6px in, 6px out) so the
+     margin-box — what actually reserves space in the figcaption's
+     `justify-content: space-between` row — nets to zero change on both
+     axes, not just vertically. Nothing here — at rest or in the :hover /
+     .is-copied states below — paints a background or border, so the extra
+     padding stays invisible; only the click/tap target grows, never the
+     visible pill. min-width/min-height are a hard floor in case glyph
+     metrics ever come in smaller than assumed here.
+     */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--chat-md-copy-hit);
+  min-height: var(--chat-md-copy-hit);
+  padding: var(--chat-md-copy-bleed);
+  margin: calc(-1 * var(--chat-md-copy-bleed));
+  border: none;
+  background: transparent;
+  color: var(--ink-mute);
+  font-family: var(--font-mono);
+  font-size: var(--chat-md-caption-fs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  transition: color 0.2s var(--ease);
+}
+
+.chat-md-copy:hover {
+  color: var(--accent);
+}
+
+.chat-md-copy.is-copied {
+  color: var(--up);
+}
+
+/* ── mermaid diagram figure ───────────────────────────────────────────────
+   Same hairline box as .chat-md-code — a diagram is a fence that happened to
+   draw. Colour inside the SVG comes from mermaid themeVariables filled with
+   these same tokens (ChatMermaidBlock), so the only job here is the frame,
+   the fit, and a couple of belt-and-braces overrides for the chrome mermaid
+   emits with no theme variable of its own. */
+
+.chat-md-mermaid {
+  margin: var(--chat-md-block-y) 0;
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--ink) 4%, transparent);
+}
+
+.chat-md-mermaid figcaption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--chat-md-inline-gap);
+  padding: var(--chat-md-caption-pad);
+  border-bottom: 1px solid var(--hair);
+  font-family: var(--font-mono);
+  font-size: var(--chat-md-caption-fs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-mute);
+}
+
+.chat-md-mermaid-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--chat-md-inline-gap);
+}
+
+/* The parse-failure caption borrows the negative-semantics token so a diagram
+   that could not be drawn says so without a second affordance. */
+.chat-md-mermaid[data-state="source"] figcaption > span:first-child {
+  color: var(--down);
+}
+
+.chat-md-mermaid-fig {
+  padding: var(--chat-md-pad-inline);
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+  animation: chat-mermaid-in 0.24s var(--ease) both;
+}
+
+.chat-md-mermaid-fig svg {
+  max-width: 100%;
+  height: auto;
+  background: transparent;
+}
+
+/* Edge labels and cluster titles are the two places mermaid still paints a
+   literal white plate under text; force them onto the surface token so the
+   light theme does not get a white patch on paper and the dark theme does not
+   get a white patch at all. */
+.chat-md-mermaid-fig .edgeLabel,
+.chat-md-mermaid-fig .edgeLabel rect,
+.chat-md-mermaid-fig .label-container {
+  fill: var(--surface);
+  background: transparent;
+  color: var(--ink-soft);
+}
+
+.chat-md-mermaid pre {
+  margin: 0;
+  padding: var(--chat-md-pre-pad-y) var(--chat-md-pad-inline);
+  overflow-x: auto;
+}
+
+.chat-md-mermaid code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: var(--chat-md-code-fs);
+  line-height: 1.6;
+  color: var(--ink);
+  white-space: pre;
+}
+
+@keyframes chat-mermaid-in {
+  from {
+    opacity: 0;
+  }
+}
+
+
+/* ── table scroll box ─────────────────────────────────────────────────────
+   Wide GFM tables scroll inside their own box; the .chat-md table combinator
+   above still owns the type. */
+.chat-md-table {
+  margin: var(--chat-md-block-y) 0;
+  overflow-x: auto;
+}
+
+.chat-md-table > table {
+  margin: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-cursor {
+    animation: none;
+  }
+
+  .chat-md-copy {
+    transition: none;
+  }
+
+  .chat-md-mermaid-fig {
+    animation: none;
+  }
+}