@react-x11/components 0.9.0 → 0.11.0

package/src/html/css/ua.ts

@@ -26,6 +26,10 @@ export function lookKey(look: RootLook): string {
     look.borderColor,
     look.mutedColor,
     look.background,
+    look.surface,
+    look.controlPadY,
+    look.controlBorder,
+    look.controlRadius,
   ].join('|');
 }
 
@@ -40,8 +44,11 @@ export function uaStylesheet(look: RootLook): Stylesheet {
 }
 
 /**
- * Margins are in `em` throughout, so a document that sets `font-size` on
- * `body` scales its whitespace with its text the way a browser's does.
+ * Margins above and below are in `em`, so a document that sets `font-size`
+ * on `body` scales its whitespace with its text the way a browser's does.
+ * The indents of lists, definitions and figures are the HTML standard's
+ * 40px (15.3.3, 15.3.8), whatever the size: a list in a 10px sidebar is
+ * indented as far as one in the body.
  */
 function uaText(look: RootLook): string {
   const mono = look.monoFamily;
@@ -52,10 +59,21 @@ article, aside, footer, header, hgroup, main, nav, section, details,
 summary, dir, menu, center, marquee {
   display: block;
 }
+/* <map> is inline (HTML 15.3.1), so an <area> in it the author gives a
+   display of its own is drawn */
 head, link, meta, style, script, title, base, template, noscript, param,
-source, track, col, colgroup, datalist, area, map, rp { display: none; }
-
-body { margin: 8px; color: ${look.color}; font-family: ${look.fontFamily}; }
+source, track, col, colgroup, datalist, area, rp { display: none; }
+
+/* HTML's bidi rules for the two elements that are about it: <bdi> takes
+   its first strong letter's direction, and <bdo> overrides. The \`dir\`
+   attribute's isolation is a presentational hint (\`hints\`), where the
+   attribute is read already, rather than a selector every element tries */
+bdi { unicode-bidi: plaintext; }
+bdo { unicode-bidi: isolate-override; }
+
+/* the theme's colour and font are the root's (\`initialStyle\`), and the
+   body inherits them, from an author's \`html\` rule too */
+body { margin: 8px; }
 html { color: ${look.color}; }
 
 p { margin: 1em 0; }
@@ -66,16 +84,18 @@ h4 { font-size: 1em;    font-weight: bold; margin: 1.33em 0; }
 h5 { font-size: 0.83em; font-weight: bold; margin: 1.67em 0; }
 h6 { font-size: 0.67em; font-weight: bold; margin: 2.33em 0; }
 
-ul, ol { margin: 1em 0; padding-left: 2.5em; }
+ul, ol { margin: 1em 0; padding-left: 40px; }
 ul { list-style-type: disc; }
 ol { list-style-type: decimal; }
+ol, ul, menu, dir { counter-reset: list-item; }
+ol[reversed] { counter-reset: reversed(list-item); }
 li { display: list-item; }
 ul ul, ol ul { list-style-type: circle; }
 ul ul ul, ol ol ul, ul ol ul, ol ul ul { list-style-type: square; }
 ul ul, ul ol, ol ul, ol ol { margin: 0; }
 
 dl { margin: 1em 0; }
-dd { margin-left: 2.5em; }
+dd { margin-left: 40px; }
 dt { font-weight: bold; }
 
 blockquote {
@@ -106,39 +126,51 @@ big { font-size: 1.17em; }
 sub { vertical-align: sub; font-size: 0.75em; }
 sup { vertical-align: super; font-size: 0.75em; }
 mark { background-color: #fff2a8; color: #1a1a1a; }
-abbr { text-decoration: none; }
-center { text-align: center; }
+/* the HTML standard's rendering (15.3.4): an abbreviation with its
+   expansion in a title says so */
+abbr[title], acronym[title] { text-decoration: dotted underline; }
+center { text-align: -webkit-center; }
 nobr { white-space: nowrap; }
+q::before { content: open-quote; }
+q::after { content: close-quote; }
 
 /* Deliberately no 'a:hover' rule, though a browser's sheet has one: a
    document containing any ':hover' selector has to be restyled as the
    pointer moves, and a rule that changes nothing (the link is already
-   underlined) would make every plain document pay that. */
-a { color: ${look.linkColor}; text-decoration: underline; cursor: pointer; }
+   underlined) would make every plain document pay that. An 'a' with no
+   'href' is an anchor, not a link, and is drawn as the text around it. */
+a[href] { color: ${look.linkColor}; text-decoration: underline; cursor: pointer; }
 
 hr {
-  margin: 0.5em 0;
+  margin: 0.5em auto;
   border: none;
   border-top: 1px solid ${look.borderColor};
   height: 0;
 }
 
 img { display: inline-block; }
-figure { margin: 1em 2.5em; }
+/* never loaded: a box of its own size, framed as a browser frames one */
+iframe { border: 2px inset; }
+/* a poster is drawn within the video's box at its own ratio (HTML 15.4.1) */
+video { object-fit: contain; }
+figure { margin: 1em 40px; }
 
-table { display: table; border-collapse: separate; border-spacing: 2px; }
+table { display: table; border-collapse: separate; border-spacing: 2px; box-sizing: border-box; }
 caption { display: table-caption; text-align: center; }
 thead { display: table-header-group; }
 tbody { display: table-row-group; }
 tfoot { display: table-footer-group; }
 tr { display: table-row; }
-td { display: table-cell; padding: 1px; vertical-align: middle; }
+/* HTML's rendering rules: the rows are middle, and a cell takes its row's,
+   so a <tr valign="top"> sets its cells at the top */
+thead, tbody, tfoot, tr { vertical-align: middle; }
+td { display: table-cell; padding: 1px; vertical-align: inherit; }
 th {
   display: table-cell;
   padding: 1px;
   font-weight: bold;
   text-align: center;
-  vertical-align: middle;
+  vertical-align: inherit;
 }
 colgroup { display: table-column-group; }
 col { display: table-column; }
@@ -159,13 +191,30 @@ input, button, select, textarea, meter, progress {
 input[type=checkbox] { margin: 3px 4px 3px 4px; }
 input[type=radio] { margin: 3px 4px 3px 5px; }
 input[type=hidden] { display: none; }
+/* A <button> is drawn rather than mounted: its content is the document's —
+   an icon, a label in spans, a pill of the page's own design, which is what
+   most buttons on the web are — and the page restyles it as it restyles
+   anything. What the sheet gives one the page left alone is the palette's
+   control, the chrome a mounted widget around it has. */
+button {
+  vertical-align: baseline;
+  padding: ${look.controlPadY}px 0.75em;
+  border: ${look.controlBorder}px solid ${look.borderColor};
+  border-radius: ${look.controlRadius}px;
+  background-color: ${look.surface};
+  color: ${look.color};
+  text-align: center;
+  cursor: pointer;
+}
+button[disabled] { color: ${look.mutedColor}; cursor: default; }
 textarea { vertical-align: top; }
 fieldset { margin: 0 2px; padding: 0.35em 0.75em 0.6em; border: 1px solid ${look.borderColor}; }
 legend { display: block; padding: 0 2px; }
 label { cursor: pointer; }
 
 details { margin: 0.5em 0; }
-summary { display: block; cursor: pointer; font-weight: bold; }
+summary { display: list-item; counter-increment: list-item 0; list-style: disclosure-closed inside; cursor: pointer; }
+details[open] > summary:first-of-type { list-style-type: disclosure-open; }
 
 /* 'hidden' is an attribute, not a style, and a document that uses it expects
    it to win over the display above. */

package/src/html/css/values.ts

@@ -13,11 +13,15 @@
 // layout can resolve them against a new containing block on its own.
 //
 // Colours are the other half of that decision, from the other side: they are
-// kept as **strings**, never parsed. ntk's context takes a CSS colour for
-// `fillStyle` and parses it behind its own cache, so parsing here would be
-// work done twice — and the only questions this renderer actually asks about
-// a colour are "is it `transparent`" and "is it `currentColor`", both of
-// which are string comparisons.
+// kept as **strings**, never parsed into components, since the only
+// questions this renderer asks about a colour are "is it `transparent`" and
+// "is it `currentColor`", both string comparisons. A named or hex colour
+// goes to the context as written. A functional one is read once, in
+// `color.ts`, and written back in the form every context reads the same.
+
+import type { ComputedStyle } from './style.js';
+import { functionalColor } from './color.js';
+import { LARGEST, parseMath, parseMathNumber } from './calc.js';
 
 /** A length that layout may still have to resolve. */
 export type Len = number | Pct | 'auto';
@@ -25,6 +29,12 @@ export type Len = number | Pct | 'auto';
 /** A percentage of something layout knows and computed style does not. */
 export interface Pct {
   pct: number;
+  /** A length added to it: `calc(100% - 20px)`, or a background position
+   *  written from its far edge, `right 10px`. */
+  px?: number;
+  /** In place of the two: `min()` or `max()` with a percentage among its
+   *  arguments, which is a different sum at every base (`calc.ts`). */
+  of?: { max: boolean; args: Len[] };
 }
 
 export const AUTO = 'auto';
@@ -41,8 +51,16 @@ export function isPct(len: Len): len is Pct {
  */
 export function resolve(len: Len, base: number, fallback = 0): number {
   if (typeof len === 'number') return len;
-  if (len === AUTO) return fallback;
-  return Number.isFinite(base) ? (len.pct / 100) * base : fallback;
+  if (len === AUTO || !Number.isFinite(base)) return fallback;
+  const px = len.of ? compared(len.of, base) : ofBase(len, base);
+  return px > LARGEST ? LARGEST : px < -LARGEST ? -LARGEST : px;
+}
+
+/** A gap between flex items or grid tracks: a length, or a percentage of
+ *  the content box's size along it — of nothing where that is not known,
+ *  as a gap in an intrinsic size is (CSS Box Alignment 3, 8.3). */
+export function gapOf(len: Len, base: number): number {
+  return Math.max(0, resolve(len, Number.isFinite(base) ? base : 0));
 }
 
 /** Resolve, but keep "indefinite" distinguishable from zero — what a height
@@ -50,8 +68,21 @@ export function resolve(len: Len, base: number, fallback = 0): number {
  *  "there is no height here". */
 export function resolveOrNull(len: Len, base: number): number | null {
   if (typeof len === 'number') return len;
-  if (len === AUTO) return null;
-  return Number.isFinite(base) ? (len.pct / 100) * base : null;
+  if (len === AUTO || !Number.isFinite(base)) return null;
+  return len.of ? compared(len.of, base) : ofBase(len, base);
+}
+
+function ofBase(len: Pct, base: number): number {
+  return (len.pct / 100) * base + (len.px ?? 0);
+}
+
+function compared(of: { max: boolean; args: Len[] }, base: number): number {
+  let out = of.max ? -Infinity : Infinity;
+  for (const arg of of.args) {
+    const v = resolve(arg, base);
+    out = of.max ? Math.max(out, v) : Math.min(out, v);
+  }
+  return out;
 }
 
 /**
@@ -76,10 +107,37 @@ export interface UnitContext {
   vh: number;
   /** Device pixels per CSS pixel — the display scale. */
   scale: number;
+  /** The x-height of the font the lengths are in, asked only for a length
+   *  in `ex`; half an em where it is missing. */
+  ex?: () => number;
+  /** The advance of that font's "0", asked only for a length in `ch`; half
+   *  an em where it is missing. */
+  ch?: () => number;
+  /** A computed `font-family` list with the families the document loads
+   *  itself, with `@font-face`, put as the text engine knows them — see
+   *  `fonts.ts`. Absent, the list is the one the author wrote. */
+  families?: (list: string) => string;
+  /** The element's line height and the root's, for `lh` and `rlh`, asked
+   *  only for a length in them; 1.2em where they are missing. */
+  lh?: () => number;
+  rlh?: () => number;
+  /** Every property at its initial value, which `initial` sets one to. */
+  initial?: ComputedStyle;
 }
 
-const LENGTH_RE =
-  /^([+-]?(?:\d+\.?\d*|\.\d+))(px|em|rem|pt|pc|in|cm|mm|ex|ch|vw|vh|vmin|vmax|q|%)?$/;
+/** A CSS number (CSS Syntax 3 4.3.12): a sign, digits with at most one
+ *  point and a digit after it, and an exponent — `1e1px` is ten pixels, and
+ *  `1.px` is no length. */
+const NUMBER_SRC = '[+-]?(?:\\d*\\.\\d+|\\d+)(?:e[+-]?\\d+)?';
+
+const LENGTH_RE = new RegExp(
+  `^(${NUMBER_SRC})(px|em|rem|pt|pc|in|cm|mm|ex|ch|lh|rlh|vw|vh|vmin|vmax|q|%)?$`,
+);
+
+const NUMBER_RE = new RegExp(`^${NUMBER_SRC}$`, 'i');
+
+/** A math function: `calc()`, `min()`, `max()` or `clamp()`. */
+const MATH = /^(?:-webkit-)?calc\(|^(?:min|max|clamp)\(/i;
 
 /**
  * Parse a length. Returns `null` for anything that is not one, which is how
@@ -99,12 +157,24 @@ export function parseLength(
   if (v === 'auto') return AUTO;
   if (v === '0') return 0;
   const m = LENGTH_RE.exec(v);
-  if (!m) return null;
+  if (!m) {
+    // `calc()` and its kin, down to pixels and a percentage (CSS Values 4 10)
+    if (!MATH.test(v)) return null;
+    return parseMath(v, (token) => {
+      const len = parseLength(token, ctx);
+      return typeof len === 'number' ? len : null;
+    });
+  }
   const n = Number(m[1]);
   const unit = m[2];
-  if (!unit) return bareIsPx ? n * ctx.scale : null;
+  // a zero needs no unit however it is written — `-0`, `+0`, `0.0`
+  if (!unit) return n === 0 ? 0 : bareIsPx ? n * ctx.scale : null;
   if (unit === '%') return { pct: n };
-  return n * unitScale(unit, ctx);
+  // Kept to what a browser holds: a `1e308px` height or margin, which a
+  // hostile or broken page writes, added up past what a number holds, and
+  // the document's height came to infinity
+  const px = n * unitScale(unit, ctx);
+  return px > LARGEST ? LARGEST : px < -LARGEST ? -LARGEST : px;
 }
 
 /** Device pixels per one of `unit`. The absolute units are CSS pixels and
@@ -130,13 +200,23 @@ function unitScale(unit: string, ctx: UnitContext): number {
       return (96 / 25.4) * ctx.scale;
     case 'q':
       return (96 / 101.6) * ctx.scale;
-    // Approximations rather than font queries: both are within a few percent
-    // for every text face, and asking the font manager here would make the
-    // cascade depend on font loading.
+    // The font's own x-height where the cascade was handed a way to ask
+    // for it, and half an em where it was not, which is within a few
+    // percent for most text faces — and for Ahem, whose x-height is 0.8em,
+    // is not.
     case 'ex':
-      return ctx.em * 0.5;
+      return ctx.ex ? ctx.ex() : ctx.em * 0.5;
+    // the advance of the font's "0" (CSS Values 4, 6.1.1), where the
+    // cascade can ask for it: half an em is Times's, a little under
+    // Arial's, and half of Ahem's and a monospace font's
     case 'ch':
-      return ctx.em * 0.5;
+      return ctx.ch ? ctx.ch() : ctx.em * 0.5;
+    // the computed `line-height`, `normal` as the font's own (CSS Values
+    // 4, 6.1.1)
+    case 'lh':
+      return ctx.lh ? ctx.lh() : ctx.em * 1.2;
+    case 'rlh':
+      return ctx.rlh ? ctx.rlh() : ctx.rem * 1.2;
     case 'vw':
       return ctx.vw / 100;
     case 'vh':
@@ -152,19 +232,20 @@ function unitScale(unit: string, ctx: UnitContext): number {
 
 /** A plain number — `flex-grow`, `opacity`, `z-index`, `line-height`. */
 export function parseNumber(value: string): number | null {
-  const n = Number(value.trim());
+  // `Number()` alone reads `0x10`, `1.` and white space as numbers
+  const v = value.trim();
+  if (!NUMBER_RE.test(v)) return MATH.test(v) ? parseMathNumber(v) : null;
+  const n = Number(v);
   return Number.isFinite(n) ? n : null;
 }
 
 /** `opacity: 50%` is as legal as `opacity: .5`. */
 export function parseAlpha(value: string): number | null {
   const v = value.trim();
-  if (v.endsWith('%')) {
-    const n = Number(v.slice(0, -1));
-    return Number.isFinite(n) ? Math.max(0, Math.min(1, n / 100)) : null;
-  }
-  const n = Number(v);
-  return Number.isFinite(n) ? Math.max(0, Math.min(1, n)) : null;
+  const pct = v.endsWith('%');
+  const n = parseNumber(pct ? v.slice(0, -1) : v);
+  if (n === null) return null;
+  return Math.max(0, Math.min(1, pct ? n / 100 : n));
 }
 
 /**
@@ -231,33 +312,21 @@ export function fourSides<T>(parts: T[]): [T, T, T, T] {
   return [a, b, c, d];
 }
 
-/** `url(x)`, `url("x")`, or a bare token. `null` for `none`. */
-export function parseUrl(value: string): string | null {
-  const v = value.trim();
-  if (!v || v.toLowerCase() === 'none') return null;
-  const m = /^url\(\s*(.*?)\s*\)$/i.exec(v);
-  const inner = m ? m[1] : v;
-  return unquote(inner) || null;
-}
-
-export function unquote(value: string): string {
-  const v = value.trim();
-  if (
-    v.length >= 2 &&
-    (v[0] === '"' || v[0] === "'") &&
-    v[v.length - 1] === v[0]
-  ) {
-    return v.slice(1, -1);
-  }
-  return v;
-}
-
 /** A colour as it is about to be used: `currentColor` resolved against the
  *  element's own ink, everything else passed through. */
 export function inkColor(color: string, current: string): string {
-  return color === 'currentColor' ? current : color;
+  if (color === 'currentColor') return current;
+  // a `color-mix()` with `currentColor` in it waits for the colour too;
+  // every other functional colour was read when it was parsed
+  if (color.charCodeAt(0) === 99 && color.startsWith('color-mix(')) {
+    return functionalColor(color.replace(CURRENT, current)) ?? current;
+  }
+  return color;
 }
 
+const CURRENT = /currentcolor/gi;
+const HAS_CURRENT = /currentcolor/i;
+
 /** Whether a colour paints anything at all. Two string tests rather than a
  *  parse, for the reason at the top of the file. */
 export function isTransparent(color: string | null | undefined): boolean {
@@ -269,6 +338,24 @@ export function isTransparent(color: string | null | undefined): boolean {
   return /^(?:rgba|hsla)\([^)]*[,/]\s*0*(?:\.0+)?\s*\)$/.test(c);
 }
 
+/**
+ * A colour's opacity, 0 to 1, as `parseColor` leaves it: a hex colour's
+ * fourth or eighth digits, an `rgba()`'s last number, and nothing for
+ * `transparent`; every other colour, `currentColor` among them, is taken
+ * for opaque.
+ */
+export function alphaOf(color: string): number {
+  if (color === 'transparent') return 0;
+  if (color.charCodeAt(0) === 35) {
+    // `#rgba` and `#rrggbbaa`
+    if (color.length === 5) return parseInt(color[4], 16) / 15;
+    if (color.length === 9) return parseInt(color.slice(7), 16) / 255;
+    return 1;
+  }
+  const m = /^rgba\([^)]*,\s*([\d.]+)\s*\)$/.exec(color);
+  return m ? Number(m[1]) : 1;
+}
+
 /**
  * A colour token. `null` means the value was not a colour, which is what a
  * shorthand parser branches on.
@@ -287,11 +374,24 @@ export function parseColor(value: string): string | null {
   if (lower === 'transparent') return 'transparent';
   if (lower === 'inherit' || lower === 'initial' || lower === 'unset')
     return null;
-  if (v.startsWith('#')) return /^#[0-9a-f]{3,8}$/i.test(v) ? v : null;
-  if (/^(?:rgb|rgba|hsl|hsla|color|lab|lch|oklab|oklch)\(/i.test(v)) return v;
+  // three, four, six or eight digits: ntk's context throws from paint on
+  // five or seven, and a typo'd `#ff000` took the application down
+  if (v.startsWith('#')) return HEX_COLOR.test(v) ? v : null;
+  if (/^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\(/i.test(v)) {
+    // a mix with `currentColor` in it is kept to be mixed where it is used
+    // (`inkColor`), once it is known to be one
+    if (HAS_CURRENT.test(v) && /^color-mix\(/i.test(v)) {
+      return functionalColor(v.replace(CURRENT, '#000')) === null
+        ? null
+        : `color-mix(${v.slice(v.indexOf('(') + 1)}`;
+    }
+    return functionalColor(v);
+  }
   return NAMED_COLORS.has(lower) ? lower : null;
 }
 
+const HEX_COLOR = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+
 /**
  * The CSS named colours. The list is here rather than reached through ntk's
  * `parse-color` because the only question asked of it is "is this token a