@quario/html 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -7,6 +7,49 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.7.0] - 2026-09-07
+
+### Added
+
+- **Styled runs render as spans.** A cell value written as a list of styled runs
+  emits one `<span style="…">` per styled run, carrying that run's whole
+  resolved inline style; unstyled runs stay bare, so a cell with no runs emits
+  exactly the markup it always did. Every interpolated value is escaped as
+  before, and the span's own CSS is escaped like any other attribute value.
+
+### Changed
+
+- **A `format` inside a sentence now presents where the engine says it does.** A
+  cell mixing literal text and one interpolation under a `format` renders the
+  value plainly, as the spreadsheet and CSV targets already did; splitting the
+  value into styled runs is how a value inside a sentence is formatted.
+
+- **The reference stylesheet no longer paints a look no other target has.**
+  `@quario/html/style.css` dropped the hairline under a table's header row, the
+  hairline and bold weight on its total rows, and the rule above the report
+  footer. A report that declares no borders now renders without them on screen,
+  which is what the PDF and the worksheet have always shown for the same
+  report — the difference was the stylesheet's alone, and it also surfaced as a
+  cell whose computed border colour failed keeping a black stroke here while
+  every other target drew nothing. The sheet now carries the band-role defaults,
+  the table's structure and the honor and pagination rules, and no look beyond
+  them. The classes are unchanged, so a host that wants the old look adds three
+  rules to its own sheet after the shipped one:
+
+  ```css
+  .q-table thead th {
+    border-bottom: 0.5pt solid #000;
+  }
+  .q-table tfoot td {
+    border-top: 0.5pt solid #000;
+    font-weight: bold;
+  }
+  .q-item.q-report-footer {
+    border-top: 1pt solid #000;
+    padding-top: 4pt;
+  }
+  ```
+
 ## [0.6.0] - 2026-09-07
 
 ### Added

package/README.md

@@ -175,8 +175,11 @@ Host CSS targets these classes:
 ### The reference stylesheet
 
 The package ships the default look as a real stylesheet, `@quario/html/style.css`: the band-role
-weights and sizes, the table look, occupy and newline-as-break on `.q-item` and table cells, and
-the four pagination rules above. Link it, import it through a bundler, or read and inline it.
+weights and sizes, the table's structure (full width, collapsed borders, cell padding, an
+unstyled cell pinned to the top of its row), occupy and newline-as-break on `.q-item` and table
+cells, and the four pagination rules above. It carries no look beyond that — no rule under the
+header row, no bold totals, no stroke above the report footer — because no other target has one
+either. Add them to your own sheet if you want them. Link it, import it through a bundler, or read and inline it.
 Plain Node cannot `import` a `.css` file, so on the server:
 
 ```js

package/lib/index.js

@@ -9,7 +9,7 @@
  * never carries markup-escaped text.
  */
 
-import { display, format, isReportBand, text, walk } from "quario";
+import { display, format, isReportBand, styledRuns, text, walk } from "quario";
 
 /** @type {Record<string, string>} */
 let ESC = {
@@ -27,8 +27,8 @@ let esc = (value) => display(value).replace(/[&<>"']/g, (char) => ESC[char]);
 // exceptions. The engine's own `text` join is the other one -- display text,
 // where a literal is words rather than markup -- and an attribute value takes
 // that one, escaped whole.
-/** @type {(tokens: any[], style?: any, intl?: any) => string} */
-let markup = (tokens, style, intl) => {
+/** @type {(tokens: any[], style: any, intl: any) => string} */
+let joined = (tokens, style, intl) => {
   let out = "";
   for (let token of tokens)
     out += "literal" in token ? token.literal : esc(shown(token.value, style, intl));
@@ -40,6 +40,29 @@ let shown = (value, style, intl) => {
   return text != null ? text : value;
 };
 
+// One styled run: a `<span>` carrying that run's whole resolved inline style,
+// rather than a difference against the cell's -- the engine already composed
+// the two, and a delta would have this target merge them back. An unstyled run
+// stays bare, so a cell with no authored runs emits exactly the markup it
+// always did. The span's own CSS is `esc()`d like any other attribute value.
+/** @type {(styled: { style: any, tokens: any[] }, style: any, intl: any, map: any) => string} */
+let piece = (styled, style, intl, map) => {
+  let body = joined(styled.tokens, styled.style ?? style, intl);
+  if (!styled.style) return body;
+  let inline = css(styled.style, map);
+  return inline ? '<span style="' + esc(inline) + '">' + body + "</span>" : body;
+};
+
+// A cell's markup: its styled runs in order. The grouping is the engine's
+// `styledRuns`, so this target cannot drift from the others (SCHEMA.md, "Event
+// stream").
+/** @type {(map: any) => (tokens: any[], style?: any, intl?: any) => string} */
+let cellMarkup = (map) => (tokens, style, intl) => {
+  let out = "";
+  for (let styled of styledRuns(tokens)) out += piece(styled, style, intl, map);
+  return out;
+};
+
 // base64 for an image's `data:` URI, without Buffer: this package runs in Node
 // and in ES2024 browsers off the same `lib/`, and `btoa` is a standard global
 // in both. The walk is chunked because `fromCharCode(...bytes)` spreads one
@@ -249,15 +272,20 @@ let css = (style, map) => {
 // columns and splits are placement, not the visual defaults this target
 // refuses to supply, so they ride the same escaped attribute path as
 // everything else rather than a second one (CLAUDE.md, the markup edge).
-/** @type {(fonts: any) => (event: { style?: any }, own?: string) => string} */
+/** @type {(fonts: any) => { attr: (event: { style?: any }, own?: string) => string, map: Record<string, string> }} */
 let styling = (fonts) => {
   // The spread is the precedence the option promises: a host mapping is
   // consulted before the three generics, and may replace one. `mapping`
-  // lowercased its keys to match the ones already here.
+  // lowercased its keys to match the ones already here. The table is handed
+  // back beside the attribute writer, because a styled run's span resolves a
+  // `family` against the same one.
   let map = { ...FAMILY, ...mapping(fonts) };
-  return ({ style }, own = "") => {
-    let out = [own, style && css(style, map)].filter(Boolean).join(";");
-    return out ? ' style="' + esc(out) + '"' : "";
+  return {
+    map,
+    attr: ({ style }, own = "") => {
+      let out = [own, style && css(style, map)].filter(Boolean).join(";");
+      return out ? ' style="' + esc(out) + '"' : "";
+    },
   };
 };
 
@@ -302,8 +330,8 @@ let justified = (own, style) =>
 // event to "" through the same function rather than re-deciding per call site.
 /** @type {(event: { path?: string }) => string} */
 let pathAttr = ({ path }) => (path ? ' data-q-path="' + esc(path) + '"' : "");
-/** @type {(list: any[], tag: string, attrs: (event: any) => string, intl: any) => string} */
-let cells = (list, tag, attrs, intl) =>
+/** @type {(list: any[], tag: string, attrs: (event: any) => string, intl: any, markup: any) => string} */
+let cells = (list, tag, attrs, intl, markup) =>
   list
     .map(
       (cell) =>
@@ -342,7 +370,9 @@ let cells = (list, tag, attrs, intl) =>
 export function html(options) {
   let mark = options?.paths ? pathAttr : () => "";
   // The factory's verdict, like `mark`: the mapping is validated once, here.
-  let styleAttr = styling(options?.fonts);
+  let { attr: styleAttr, map: fontMap } = styling(options?.fonts);
+  // A cell's markup, bound to this target's font table once.
+  let markup = cellMarkup(fontMap);
   // The pair every cell carries, bound once rather than threaded as two.
   /** @type {(cell: any) => string} */
   // A span covers several columns; `colspan` is what that is on this surface.
@@ -357,7 +387,7 @@ export function html(options) {
   // the cells, where it arrives as ordinary inline CSS.
   /** @type {(event: any, list: any[], tag: string, intl: any) => string} */
   let tr = (event, list, tag, intl) =>
-    "<tr" + styleAttr(event) + ">" + cells(list, tag, attrs, intl) + "</tr>";
+    "<tr" + styleAttr(event) + ">" + cells(list, tag, attrs, intl, markup) + "</tr>";
   return {
     name: "html",
     compile: (stream) => async (data) => {

package/lib/style.css

@@ -73,15 +73,6 @@
   white-space: pre-line;
 }
 
-.q-table thead th {
-  border-bottom: 0.5pt solid #000;
-}
-
-.q-table tfoot td {
-  border-top: 0.5pt solid #000;
-  font-weight: bold;
-}
-
 .q-item.q-report-header {
   font-size: 14pt;
   font-weight: bold;
@@ -98,8 +89,6 @@
 
 .q-item.q-report-footer {
   margin-top: 10pt;
-  border-top: 1pt solid #000;
-  padding-top: 4pt;
 }
 
 /* A columned container is a fragmentation context on screen, not only in

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quario/html",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "The HTML render target for quario — in the makings, not yet released",
   "homepage": "https://getquario.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -39,12 +39,12 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.3",
     "@size-limit/preset-small-lib": "^13.0.3",
-    "quario": "^0.6.0",
+    "quario": "^0.7.0",
     "size-limit": "^13.0.3",
     "typescript": "^7.0.2"
   },
   "peerDependencies": {
-    "quario": "^0.6.0"
+    "quario": "^0.7.0"
   },
   "size-limit": [
     {