@wxxb789/anc 0.0.1

package/src/styles/graph.css

@@ -0,0 +1,317 @@
+/*
+ * The graph.
+ *
+ * Loaded on every page that draws one, via a conditional `<link>` gated on the
+ * graph having edges — owner decision 7's pattern, the same way `code.css` and
+ * `diagram.css` reach only the pages that need them. A note with no
+ * neighbourhood requests nothing.
+ *
+ * **The region's own frame is in `global.css`, not here**, and that split is a
+ * fix rather than a preference: the region renders on every note page, with an
+ * empty state where there is no neighbourhood, so a frame in this conditional
+ * sheet left that empty state unstyled on every page of the published site.
+ * What lives here is only what a page that actually draws a figure needs.
+ *
+ * **Nothing here carries information by colour alone** (WCAG 1.4.1,
+ * requirements section 17). The three edge directions are three line *shapes*:
+ * an outgoing edge is solid with one arrowhead, an incoming one dashed, a
+ * mutual one solid with an arrowhead at each end. The subject node is larger
+ * and ringed. Every one of those distinctions survives a monochrome print and a
+ * reader who cannot see hue at all — and each node's accessible name states its
+ * relationship in words regardless.
+ *
+ * **No animation, so `prefers-reduced-motion` needs no rule.** The layout is
+ * computed at build time and never moves; there is no force simulation to
+ * settle and no transition to suppress. The global reduce block in `global.css`
+ * still covers the focus transitions this file inherits.
+ *
+ * Colour comes from the same tokens as everything else, so both themes follow
+ * `light-dark()` with no second palette and no script.
+ */
+
+.graph {
+  margin-block: var(--space-6);
+  /* `figure` carries a user-agent `margin-inline: 40px` that would indent the
+     graph relative to the prose around it. */
+  margin-inline: 0;
+}
+
+.graph-canvas {
+  /* A graph wider than the measure scrolls rather than widening the page.
+     `tabindex="0"` is on the element in the markup: a scrollable region must be
+     reachable by keyboard, and the browser then scrolls it with the arrows.
+     The focus ring comes from `global.css`'s universal `:focus-visible`, which
+     already sets exactly this outline — restating it here was 87 bytes of a
+     conditional stylesheet that changed no computed value. */
+  overflow-x: auto;
+  text-align: center;
+}
+
+/*
+ * The figure scrolls rather than shrinking past legibility.
+ *
+ * `min-width` is what makes the scroll container real. With `max-width: 100%`
+ * alone the SVG always fits its parent, so `overflow-x: auto` could never
+ * trigger and the `tabindex="0"` beside it was a focus stop that did nothing —
+ * while a 60-node `/graph/` squeezed into 320 px rendered its labels at about
+ * five CSS pixels. Below this width the figure scrolls sideways instead, which
+ * is the same treatment a wide diagram and a wide code fence already get.
+ *
+ * `max-width: 100%` still caps it on a wide viewport, and without `height:
+ * auto` the browser keeps the attribute height and distorts the aspect ratio.
+ * The `width` and `height` attributes hold the intrinsic size, so the figure
+ * has a ratio before this stylesheet arrives and nothing shifts when it does.
+ */
+.graph-svg {
+  display: block;
+  margin-inline: auto;
+  min-width: 22rem;
+  max-width: 100%;
+  height: auto;
+}
+
+.graph-edge {
+  stroke: var(--color-line-strong);
+  stroke-width: 1.5;
+  fill: none;
+}
+
+/*
+ * An edge the reader's note *receives* is dashed; one it *sends* is solid.
+ *
+ * Shape, not hue — this is the whole of requirements section 13.2's "incoming
+ * and outgoing edges visually distinguished" and section 17's "no information
+ * encoded by color alone". The dash pattern is coarse enough to read at the
+ * scale a 320 px viewport shrinks the figure to.
+ *
+ * Only the subject's own neighbourhood has a direction at all: `/graph/` has no
+ * subject, so its edges are all plain solid, which is honest — there is no
+ * "incoming" without a somewhere to come in to.
+ */
+.graph-edge-incoming {
+  stroke-dasharray: 6 4;
+}
+
+/* A mutual edge carries an arrowhead at both ends, which is its distinction.
+   It is drawn slightly heavier so the pair reads as one relationship rather
+   than as a line somebody drew twice. */
+.graph-edge-mutual {
+  stroke-width: 2;
+}
+
+.graph-arrow {
+  fill: var(--color-line-strong);
+  stroke: none;
+}
+
+.graph-dot {
+  fill: var(--color-surface);
+  stroke: var(--color-link);
+  stroke-width: 2;
+}
+
+/*
+ * The note the reader is on: larger, filled, and ringed.
+ *
+ * Three distinctions rather than one, because a reader who cannot see the fill
+ * colour still meets a bigger circle with a heavier edge. Requirements section
+ * 13.2 asks for the current page emphasized; the node's accessible name also
+ * says "this note" in words.
+ */
+.graph-node-subject .graph-dot {
+  fill: var(--color-accent);
+  stroke: var(--color-accent);
+  stroke-width: 3;
+}
+
+.graph-label {
+  fill: var(--color-text);
+  /* `px` rather than `rem`: the label is positioned in the SVG's own user units
+     and the `viewBox` scales the whole figure with the reader's text size
+     already, so a `rem` here would scale it twice and push labels over their
+     neighbours. */
+  font-size: 13px;
+  font-family: var(--font-sans);
+  text-anchor: middle;
+}
+
+.graph-node-subject .graph-label {
+  font-weight: 650;
+}
+
+/*
+ * The focus ring, on the node rather than on the anchor's bounding box.
+ *
+ * An `<a>` wrapping SVG shapes has a bounding box that spans the circle and its
+ * label, so the default ring is a wide rectangle that overlaps its neighbours'.
+ * Ringing the circle itself puts the indicator on the thing the reader is
+ * actually on. `outline` on an SVG child is honoured by every current engine;
+ * the stroke change is what carries it where it is not, so the indicator can
+ * never be absent (WCAG 2.4.7).
+ */
+.graph-node:focus-visible {
+  outline: none;
+}
+
+.graph-node:focus-visible .graph-dot {
+  stroke: var(--color-focus);
+  stroke-width: 4;
+}
+
+.graph-node:focus-visible .graph-label,
+.graph-node:hover .graph-label {
+  fill: var(--color-link);
+  text-decoration: underline;
+}
+
+.graph-node:hover .graph-dot {
+  fill: var(--color-wash);
+  stroke: var(--color-link);
+}
+
+/* The figcaption carries the derivation — how the layout was built, which a
+   reader cannot see by looking at it. */
+.graph figcaption {
+  max-width: var(--measure);
+  margin-top: var(--space-2);
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+/*
+ * The equivalent table, in a native disclosure.
+ *
+ * `<details>` rather than an always-open table: the same data twice in a row is
+ * a long page, and the native element is keyboard-operable, announced as one
+ * control, and costs no script. No `interpolate-size` transition here — the
+ * explorer's collapse animates because it is navigation a reader opens
+ * repeatedly; this one is opened once, and an animation would be motion with no
+ * purpose to justify it.
+ */
+.graph-table {
+  margin-top: var(--space-6);
+}
+
+.graph-table summary {
+  padding: var(--space-2) 0;
+  color: var(--color-link);
+  cursor: pointer;
+}
+
+/*
+ * The table's own scroll container.
+ *
+ * Four columns do not fit 320 px — the narrowest supported viewport — and the
+ * article's Markdown tables have the same problem with no fix, because a
+ * wrapper is the pipeline's to emit and `display: block` on the `<table>`
+ * itself would strip its semantics (TK-02's deferral, still recorded in
+ * `global.css`). This table is rendered by a component, so the wrapper is
+ * simply written.
+ *
+ * Its `tabindex="0"` is unconditional even though the container only scrolls at
+ * narrow widths — measured: 350 px of content in 288 px at 320 px, and no
+ * overflow at 768 or 1280. That is the same shape `<pre>` and `.diagram-canvas`
+ * already have, and for the same reason: whether a region scrolls depends on
+ * the viewport and on the content, so the alternative is a keyboard stop that
+ * appears and disappears as a reader resizes. This is not the dead stop the
+ * figure's own `min-width` fixed — that one could *never* scroll at any width,
+ * which is a different fault.
+ */
+.graph-table-scroll {
+  overflow-x: auto;
+}
+
+.graph-table table {
+  width: 100%;
+  margin-top: var(--space-2);
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.graph-table th,
+.graph-table td {
+  padding: var(--space-2);
+  border-bottom: 1px solid var(--color-line-strong);
+  text-align: left;
+  /* A title is the one cell that can be long, and a long one would otherwise
+     set the column's width from its longest unbroken word. Wrapping keeps the
+     table close to its container; the scroll wrapper above is what handles the
+     rest, since four columns do not fit 320 px however they wrap. */
+  overflow-wrap: break-word;
+}
+
+.graph-table thead th {
+  color: var(--color-muted);
+  font-weight: 650;
+}
+
+.graph-table tbody th {
+  font-weight: 400;
+}
+
+/* The degree column, which is the one cell holding a bare number. */
+.graph-table td:nth-child(3) {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The notes at the other end of a row's lines: a list, not a sentence, so a
+   screen reader announces how many there are before reading them. */
+.graph-joined {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.graph-none {
+  color: var(--color-muted);
+}
+
+.graph-bound {
+  max-width: var(--measure);
+  margin-top: var(--space-4);
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+@media print {
+  /* A scroll container prints as its visible window, cutting the figure off at
+     the page edge. Letting it size itself prints the whole graph. */
+  .graph-canvas {
+    overflow-x: visible;
+  }
+
+  /*
+   * The table is the graph's equivalent representation (requirements section
+   * 17), so a printed page has to carry it — and a closed `<details>` prints
+   * closed, which drops it from paper entirely.
+   *
+   * `content-visibility: visible` on `::details-content` is what opens it:
+   * `details[open]` cannot be set from CSS, and Chromium hides a closed
+   * disclosure's content with `content-visibility: hidden` on that
+   * pseudo-element rather than with `display`. This repository already measured
+   * that once — `tests/rendered-page.test.ts` records it for the explorer rail's
+   * collapse — and two earlier versions of this rule ignored it: one set only
+   * `list-style: none`, the other overrode `display` on a `<div>` that was
+   * already block. Both left the table off the printed page while claiming in a
+   * comment to have fixed it. Verified by `checkVisibility()` on a body cell
+   * under `media: print`, not by reading a bounding box, which a hidden element
+   * still reports.
+   *
+   * The marker goes because a disclosure triangle on paper points at an
+   * interaction nobody can perform.
+   */
+  .graph-table > summary {
+    list-style: none;
+  }
+
+  .graph-table::details-content {
+    content-visibility: visible;
+  }
+
+  .graph-table-scroll {
+    /* A scroll container prints as its visible window, cutting the right-hand
+       columns off at the page edge. */
+    overflow-x: visible;
+  }
+}

package/src/styles/math.css

@@ -0,0 +1,376 @@
+/*
+ * Math.
+ *
+ * Loaded only on pages whose body contains an expression, via the conditional
+ * `<link>` in `src/pages/notes/[slug].astro` gated on `RenderedNote.hasMath` —
+ * owner decision 7. A page with no math pays nothing, which is asserted by
+ * `tests/math-and-diagrams.test.ts` in both directions.
+ *
+ * Temml's own stylesheet is vendored below rather than imported from
+ * `node_modules`, for two reasons that are properties of this project rather
+ * than preferences. It must be **same-origin** — requirements §19.3 sets
+ * `style-src 'self'` and `font-src 'self'`, so the upstream advice to load it
+ * from a CDN is not available. And it must be **edited**: upstream declares
+ * `src: url('Temml.woff2')`, a relative reference that resolves against
+ * whatever path the sheet is served from, which is not where Astro puts the
+ * font. The `@font-face` below points at `/fonts/Temml.woff2`, copied verbatim
+ * from the package by `public/fonts/`.
+ *
+ * Sections marked "Temml 0.13.4" are upstream, trimmed to the rules this
+ * projection can reach: the Firefox and WebKit correction blocks are kept
+ * whole, because they are what makes an accent sit in the right place in those
+ * browsers, and dropping them would ship subtly wrong typesetting to half the
+ * readers. What is dropped is the `\cancelto` mask image — a `data:image/svg+xml`
+ * URL that the privacy residue scan rejects as a non-image `data:` URL, and
+ * whose command (`\cancelto`) reaches nothing in this corpus.
+ */
+
+@font-face {
+  font-family: 'Temml';
+  src: url('/fonts/Temml.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  /* The font supplies exactly the script capitals in U+1D49C–U+1D4B5. Naming
+     the range means a browser fetches it only for an expression that uses
+     `\mathscr`, so most math pages never request the 9.4 KB at all. */
+  unicode-range: U+1D49C-1D4B5;
+  font-display: swap;
+}
+
+math {
+  font-family: 'Cambria Math', 'STIXTwoMath-Regular', 'NotoSansMath-Regular', math;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  font-size-adjust: none;
+  text-indent: 0;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  direction: ltr;
+  /* Prevent Firefox from omitting the dot on i or j. */
+  font-feature-settings: 'dtls' off;
+}
+
+math * {
+  border-color: currentColor;
+}
+
+/* `display: block` is needed in Firefox and Safari; Chromium honours the
+   `display: block math` that Temml writes inline — which the sanitizer strips,
+   so this rule is what makes display math a block in every browser. */
+math.tml-display {
+  display: block;
+  width: 100%;
+}
+
+*.mathcal {
+  font-feature-settings: 'ss01';
+}
+
+math .mathscr {
+  font-family: 'Temml';
+}
+
+mo.tml-prime {
+  font-family: 'Temml';
+}
+
+/* Cramped superscripts in WebKit */
+mfrac > :nth-child(2),
+msqrt,
+mover > :first-child {
+  math-shift: compact;
+}
+
+.menclose {
+  display: inline-block;
+  position: relative;
+  padding: 0.5ex 0;
+}
+
+@supports (-moz-appearance: none) {
+  /* \vec without italic correction for Firefox */
+  .tml-vec {
+    transform: scale(0.75);
+  }
+  .ff-narrow {
+    width: 0;
+  }
+  .ff-nudge-left {
+    margin-left: -0.2em;
+  }
+  /* Squash hidden mrows in \bordermatrix. */
+  .ff-squash mtd {
+    display: block;
+    height: 0;
+  }
+}
+
+@supports (not (-moz-appearance: none)) {
+  /* Chromium and WebKit */
+  mo.tml-prime {
+    font-family: 'Temml';
+  }
+  .tml-sml-pad {
+    padding-left: 0.05em;
+  }
+  .tml-med-pad {
+    padding-left: 0.1em;
+  }
+  .tml-lrg-pad {
+    padding-left: 0.15em;
+  }
+}
+
+@supports (-webkit-backdrop-filter: blur(1px)) {
+  /* WebKit vertical and italic correction on accents */
+  .wbk-acc { transform: translate(0, 0.431em); }
+  .wbk-sml { transform: translate(0.07em, 0); }
+  .wbk-sml-acc { transform: translate(0.07em, 0.431em); }
+  .wbk-sml-vec { transform: scale(0.75) translate(0.07em, 0); }
+  .wbk-med { transform: translate(0.14em, 0); }
+  .wbk-med-acc { transform: translate(0.14em, 0.431em); }
+  .wbk-med-vec { transform: scale(0.75) translate(0.14em, 0); }
+  .wbk-lrg { transform: translate(0.21em, 0); }
+  .wbk-lrg-acc { transform: translate(0.21em, 0.431em); }
+  .wbk-lrg-vec { transform: scale(0.75) translate(0.21em, 0); }
+}
+
+/* \cancel and \phase paint with a background; get them to print. */
+menclose {
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+/* Array cell justification in Firefox and WebKit */
+.tml-right { text-align: right; }
+.tml-left { text-align: left; }
+
+/* CD labels that grow leftward in Firefox and WebKit */
+.tml-shift-left { margin-left: -200%; }
+
+/* Chromium only */
+@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {
+  .chr-sml { transform: translate(0.07em, 0); }
+  .chr-sml-vec { transform: scale(0.75) translate(0.07em, 0); }
+  .chr-med { transform: translate(0.14em, 0); }
+  .chr-med-vec { transform: scale(0.75) translate(0.14em, 0); }
+  .chr-lrg { transform: translate(0.21em, 0); }
+  .chr-lrg-vec { transform: scale(0.75) translate(0.21em, 0); }
+
+  .tml-shift-left { margin-left: -100%; }
+
+  /* MathML Core and Chromium do not support the MathML 3 <menclose>
+     attributes, so these reproduce them. */
+  menclose {
+    position: relative;
+    padding: 0.5ex 0;
+  }
+  .tml-overline {
+    padding: 0.1em 0 0 0;
+    border-top: 0.065em solid;
+  }
+  .tml-underline {
+    padding: 0 0 0.1em 0;
+    border-bottom: 0.065em solid;
+  }
+  .tml-cancel {
+    display: inline-block;
+    position: absolute;
+    left: 0.5px;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: currentColor;
+  }
+  .upstrike {
+    clip-path: polygon(0.05em 100%, 0 calc(100% - 0.05em), calc(100% - 0.05em) 0, 100% 0.05em);
+  }
+  .downstrike {
+    clip-path: polygon(0 0.05em, 0.05em 0, 100% calc(100% - 0.05em), calc(100% - 0.05em) 100%);
+  }
+  .sout {
+    clip-path: polygon(0 calc(55% + 0.0333em), 0 calc(55% - 0.0333em), 100% calc(55% - 0.0333em), 100% calc(55% + 0.0333em));
+  }
+  .tml-xcancel {
+    clip-path: polygon(0.05em 0, 0 0.05em, calc(50% - 0.05em) 50%, 0 calc(100% - 0.05em), 0.05em 100%, 50% calc(50% + 0.05em), calc(100% - 0.05em) 100%, 100% calc(100% - 0.05em), calc(50% + 0.05em) 50%, 100% 0.05em, calc(100% - 0.05em) 0, 50% calc(50% - 0.05em));
+  }
+  .longdiv-top {
+    border-top: 0.067em solid;
+    padding: 0.1em 0.2em 0.2em 0.433em;
+  }
+  .longdiv-arc {
+    position: absolute;
+    top: 0;
+    bottom: 0.1em;
+    left: -0.4em;
+    width: 0.7em;
+    border: 0.067em solid;
+    transform: translateY(-0.067em);
+    border-radius: 70%;
+    clip-path: inset(0 0 0 0.4em);
+    box-sizing: border-box;
+  }
+  .menclose {
+    display: inline-block;
+    text-align: left;
+    position: relative;
+  }
+  .phasor-bottom {
+    border-bottom: 0.067em solid;
+    padding: 0.2em 0.2em 0.1em 0.6em;
+  }
+  .phasor-angle {
+    display: inline-block;
+    position: absolute;
+    left: 0.5px;
+    bottom: -0.04em;
+    height: 100%;
+    aspect-ratio: 0.5;
+    background-color: currentColor;
+    clip-path: polygon(0.05em 100%, 0 calc(100% - 0.05em), calc(100% - 0.05em) 0, 100% 0.05em);
+  }
+  .tml-fbox {
+    padding: 3pt;
+    border: 1px solid;
+  }
+  .circle-pad { padding: 0.267em; }
+  .textcircle {
+    position: absolute;
+    inset: 0;
+    border: 0.067em solid;
+    border-radius: 50%;
+  }
+  .actuarial {
+    padding: 0.03889em 0.03889em 0 0.03889em;
+    border-width: 0.08em 0.08em 0 0;
+    border-style: solid;
+    margin-right: 0.03889em;
+  }
+  /* Stretch \widetilde */
+  .tml-tilde-2 { transform: scale(2, 1.1); }
+  .tml-tilde-3 { transform: scale(3, 1.1); }
+  .tml-tilde-4 { transform: scale(4, 1.1); }
+  /* Stretch \widehat */
+  .tml-hat-1 { transform: scale(1.9, 1); }
+  .tml-hat-2 { transform: scale(3.9, 1); }
+  .tml-hat-3 { transform: scale(5.8, 1); }
+  .tml-hat-4 { transform: scale(7.8, 1); }
+
+  .tml-right { text-align: -webkit-right; }
+  .tml-left { text-align: -webkit-left; }
+}
+
+.special-fraction {
+  font-family: 'STIX TWO', 'Times New Roman', Times, Tinos, serif;
+}
+
+/* Line-breaking in Chromium */
+math {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+
+math > mrow {
+  padding: 0.5ex 0;
+}
+
+/* Default mtd top padding is 0.5ex per MathML Core; adjust for jot and small. */
+mtable.tml-jot mtd {
+  padding-top: 0.7ex;
+  padding-bottom: 0.7ex;
+}
+
+mtable.tml-small mtd {
+  padding-top: 0.35ex;
+  padding-bottom: 0.35ex;
+}
+
+@-moz-document url-prefix() {
+  /* Firefox: avoid flex-wrap and adjust array row spacing. */
+  math { display: inline; }
+  math > mrow { padding: 0; }
+  mtd,
+  mtable.tml-small mtd { padding-top: 0; padding-bottom: 0; }
+  mtable.tml-jot mtd { padding-top: 0.2ex; padding-bottom: 0; }
+}
+
+/* AMS environment auto-numbering. The counter is reset on the article rather
+   than on `body`, as upstream does: the article is the numbering scope a reader
+   expects, and resetting on `body` would number across the page chrome. */
+.prose {
+  counter-reset: tmlEqnNo;
+}
+
+.tml-eqn::before {
+  counter-increment: tmlEqnNo;
+  content: '(' counter(tmlEqnNo) ')';
+}
+
+/*
+ * This projection's own rules.
+ *
+ * Six classes reproducing the inline declarations that measurably change
+ * layout. `src/lib/math.ts` documents which they are, how they were chosen —
+ * by dropping each property group in a real browser and re-measuring — and why
+ * the other 33 declarations Temml emits need no rule at all.
+ */
+
+.math-boxed {
+  border: 1px solid currentColor;
+}
+
+.math-boxed-pad {
+  padding: 3pt;
+}
+
+.math-cell-rule-right {
+  border-right: 0.06em solid currentColor;
+}
+
+.math-cell-rule-bottom {
+  border-bottom: 0.06em solid currentColor;
+}
+
+.math-cell-tight {
+  padding: 0;
+}
+
+.math-cell-tight-top {
+  padding-top: 0;
+}
+
+.math-cell-tight-bottom {
+  padding-bottom: 0;
+}
+
+/*
+ * Placement in the article.
+ *
+ * Display math is a block that can be wider than the measure — a long
+ * derivation does not wrap — so it scrolls horizontally rather than pushing the
+ * page wide, and the scroll container is focusable so a keyboard reader can
+ * reach it (axe `scrollable-region-focusable`, WCAG 2.1.1).
+ */
+.math-display {
+  display: block;
+  margin-block: var(--space-6);
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* Room for the focus ring, which would otherwise be clipped by the scroll
+     container's own edge. */
+  padding: var(--space-1);
+}
+
+.math-display:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.math-inline {
+  /* Keeps an inline expression from setting the line height of its paragraph. */
+  display: inline-block;
+  vertical-align: baseline;
+}