@jxsuite/studio 6.1.1 → 8.0.0

package/src/panels/style-utils.ts

@@ -1,16 +1,88 @@
 /** Style utilities — pure CSS helper functions used by the style panel. */
 
-import type { JxMutableNode } from "@jxsuite/schema/types";
+import { isNumber, isString } from "@jxsuite/schema/guards";
+import type { JxMutableNode, JxStyle } from "@jxsuite/schema/types";
 
 import { activeTab } from "../workspace/workspace";
 import { getEffectiveStyle } from "../site-context";
 import cssMeta from "../../data/css-meta.json";
 
+/** One `$show` condition: the row is offered while `prop` holds one of `values`, or any value. */
+export interface CssShowCondition {
+  prop: string;
+  values: string[];
+}
+
+/** One Modern Font Stacks preset a `fontFamily` entry offers. */
+export interface CssFontPreset {
+  title: string;
+  value: string;
+}
+
+/** Every kind of value a css-meta entry holds under any of its keys. */
+type CssMetaValue =
+  | string
+  | number
+  | boolean
+  | string[]
+  | CssShowCondition[]
+  | CssFontPreset[]
+  | Record<string, string>;
+
+/**
+ * What `css-meta.json` says about one CSS property: which section files it, where in that section,
+ * and which control edits it. Every entry in the file carries `$order`; the rest is per property.
+ *
+ * The index signature is what keeps an entry assignable to the open records `inferInputType()` and
+ * `propLabel()` read it through; it admits only the value kinds the file actually holds.
+ */
+export interface CssMetaEntry {
+  $order: number;
+  $section?: string;
+  $label?: string;
+  $input?: string;
+  $buttonValues?: string[];
+  $icons?: Record<string, string>;
+  $keywords?: string[];
+  $longhands?: string[];
+  /** `true` on a shorthand row; the shorthand's own name on each of its longhands. */
+  $shorthand?: string | boolean;
+  $shorthandType?: string;
+  $show?: CssShowCondition[];
+  $span?: number;
+  $units?: string[];
+  enum?: string[];
+  examples?: string[];
+  presets?: CssFontPreset[];
+  format?: string;
+  type?: string;
+  minimum?: number;
+  maximum?: number;
+  [key: string]: CssMetaValue | undefined;
+}
+
+/** A shorthand's longhand, with its own css-meta entry. */
+export interface CssLonghand {
+  name: string;
+  entry: CssMetaEntry;
+}
+
+/**
+ * Css-meta's property table, by property name. The JSON module's inferred type is checked against
+ * {@link CssMetaEntry} here, once, so a key the file stops carrying is a type error at this line.
+ */
+export const cssDefs: Readonly<Record<string, CssMetaEntry>> = cssMeta.$defs;
+
 let cssInitialMap = new Map<string, string>();
 
 /** Initialise cssInitialMap from webdata — call once during bootstrap. */
 export function initCssData(webdata: { cssProps: string[][] }) {
-  cssInitialMap = new Map(webdata.cssProps as [string, string][]);
+  cssInitialMap = new Map<string, string>();
+  for (const [name, initial] of webdata.cssProps) {
+    if (name !== undefined && initial !== undefined) {
+      cssInitialMap.set(name, initial);
+    }
+  }
 }
 
 /** Get the CSS initial-value map (populated by initCssData). */
@@ -18,31 +90,30 @@ export function getCssInitialMap() {
   return cssInitialMap;
 }
 
+/**
+ * A declaration's value rather than a nested block (`:hover`, `@--md`) or a block list.
+ *
+ * Exactly the `typeof value !== "object"` test the Style tab has always made, so a `null` a JSON
+ * document might hold still counts as a block, never as a value.
+ */
+export function isDeclarationValue(value: JxStyle[string]): value is string | number | undefined {
+  return typeof value !== "object";
+}
+
 // ─── Condition helpers ──────────────────────────────────────────────────────
 
-/** @param {{ prop: string; values: string[] }} cond @param {Record<string, unknown>} styles */
-export function conditionPasses(
-  cond: { prop: string; values: string[] },
-  styles: Record<string, unknown>,
-) {
-  const val = (styles[cond.prop] ?? "") as string;
+/** Whether one `$show` condition holds against the style being edited. */
+export function conditionPasses(cond: CssShowCondition, styles: JxStyle) {
+  const val = styles[cond.prop] ?? "";
   if (cond.values.length === 0) {
     return val !== "" && val !== "initial";
   }
-  return cond.values.includes(val);
+  return isString(val) && cond.values.includes(val);
 }
 
-/**
- * @param {{ $show?: { prop: string; values: string[] }[] }} entry @param {Record<string, unknown>}
- *   styles
- */
-export function allConditionsPass(
-  entry: { $show?: { prop: string; values: string[] }[] },
-  styles: Record<string, unknown>,
-) {
-  return (entry.$show ?? []).every((/** @type {{ prop: string; values: string[] }} */ c) =>
-    conditionPasses(c, styles),
-  );
+/** Whether every `$show` condition of an entry holds; an entry with none always passes. */
+export function allConditionsPass(entry: Pick<CssMetaEntry, "$show">, styles: JxStyle) {
+  return (entry.$show ?? []).every((c) => conditionPasses(c, styles));
 }
 
 // ─── Auto-open sections ─────────────────────────────────────────────────────
@@ -64,11 +135,10 @@ export function autoOpenSections(node: JxMutableNode, currentSections: Record<st
   const style = node.style || {};
   const result = { ...currentSections };
   for (const prop of Object.keys(style)) {
-    if (typeof style[prop] === "object") {
+    if (!isDeclarationValue(style[prop])) {
       continue;
     }
-    const entry = (cssMeta.$defs as Record<string, Record<string, unknown>>)[prop];
-    const section = (entry?.$section as string) ?? "other";
+    const section = cssDefs[prop]?.$section ?? "other";
     if (result[section] === undefined) {
       result[section] = true;
     }
@@ -78,31 +148,21 @@ export function autoOpenSections(node: JxMutableNode, currentSections: Record<st
 
 // ─── Shorthand expand/compress ──────────────────────────────────────────────
 
-/** Get longhands for a shorthand property from css-meta */
-export function getLonghands(shorthandProp: string) {
-  const entry = (cssMeta.$defs as Record<string, Record<string, unknown>>)[shorthandProp];
-  if (entry?.$longhands) {
-    return (entry.$longhands as string[])
-      .map((name: string) => ({
-        entry: (cssMeta.$defs as Record<string, Record<string, unknown>>)[name] || {
-          $order: 0,
-        },
-        name,
-      }))
-      .toSorted(
-        (
-          /** @type {{ entry: Record<string, unknown> }} */ a,
-          /** @type {{ entry: Record<string, unknown> }} */ b,
-        ) => (a.entry.$order as number) - (b.entry.$order as number),
-      );
+/** Get longhands for a shorthand property from css-meta, in their `$order`. */
+export function getLonghands(shorthandProp: string): CssLonghand[] {
+  const listed = cssDefs[shorthandProp]?.$longhands;
+  if (listed) {
+    return listed
+      .map((name) => ({ entry: cssDefs[name] || { $order: 0 }, name }))
+      .toSorted((a, b) => a.entry.$order - b.entry.$order);
   }
-  const result = [];
-  for (const [name, e] of Object.entries(cssMeta.$defs) as [string, Record<string, unknown>][]) {
+  const result: CssLonghand[] = [];
+  for (const [name, e] of Object.entries(cssDefs)) {
     if (e.$shorthand === shorthandProp) {
       result.push({ entry: e, name });
     }
   }
-  result.sort((a, b) => (a.entry.$order as number) - (b.entry.$order as number));
+  result.sort((a, b) => a.entry.$order - b.entry.$order);
   return result;
 }
 
@@ -232,7 +292,7 @@ export function getFontVars() {
   const style = getEffectiveStyle(activeTab.value?.doc.document?.style);
   const vars = [];
   for (const [k, v] of Object.entries(style)) {
-    if (k.startsWith("--font") && (typeof v === "string" || typeof v === "number")) {
+    if (k.startsWith("--font") && (isString(v) || isNumber(v))) {
       vars.push({ name: k, value: String(v) });
     }
   }
@@ -247,12 +307,15 @@ export function getFontVars() {
  * `face`, which is the channel every one of these rows ALSO carries, so a weight is shown in the
  * element's own typeface rather than in the panel's.
  */
-export const TYPO_PREVIEW_CHANNELS: Readonly<Record<string, string>> = {
-  fontStyle: "slant",
-  fontVariant: "variant",
-  fontWeight: "weight",
-  textDecoration: "decoration",
-  textTransform: "transform",
-};
+export const TYPO_PREVIEW_CHANNELS = new Map<string, TypoPreviewChannel>([
+  ["fontStyle", "slant"],
+  ["fontVariant", "variant"],
+  ["fontWeight", "weight"],
+  ["textDecoration", "decoration"],
+  ["textTransform", "transform"],
+]);
+
+/** A `jx-option` drawing channel a typography row previews its value through (ui.md §5.3). */
+export type TypoPreviewChannel = "decoration" | "slant" | "transform" | "variant" | "weight";
 
 export { default as cssMeta } from "../../data/css-meta.json";

package/src/panels/stylebook-doc.ts

@@ -21,7 +21,15 @@ import { isKeyframesAtRule } from "@jxsuite/runtime/css";
 import type { StylebookEntry } from "./stylebook-panel";
 import type { ComponentEntry } from "../files/components";
 import type { JxPath } from "../state";
-import type { JxMutableNode, JxStyle } from "@jxsuite/schema/types";
+import { isNonNullObject, isRef } from "@jxsuite/schema/guards";
+import type { StylebookSpecimens } from "../style/stylebook-specimens";
+import type {
+  JxDocument,
+  JxHeadEntry,
+  JxMutableNode,
+  JxStateDefinition,
+  JxStyle,
+} from "@jxsuite/schema/types";
 
 export interface StylebookDocResult {
   /** The specimen document (plain JSON — safe to post over the bridge). */
@@ -44,8 +52,9 @@ function isTagPath(key: string): boolean {
   );
 }
 
-function isPlainObject(v: unknown): v is Record<string, unknown> {
-  return v !== null && typeof v === "object" && !Array.isArray(v);
+/** A nested style block (a rule or an at-rule body), as opposed to a scalar or a block list. */
+function isStyleBlock(value: JxStyle[string]): value is JxStyle {
+  return isNonNullObject(value) && !Array.isArray(value);
 }
 
 /** The specimen-scoping selector prefix (see the module doc). */
@@ -58,12 +67,11 @@ const SPECIMEN_SCOPE = "& .element-card-preview";
  * `styleUpdate` fast path so an edit round-trips through the exact same transform.
  */
 export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
-  const style = effectiveStyle as Record<string, unknown>;
-  const out: Record<string, unknown> = {};
+  const out: JxStyle = {};
 
   /** Drop the base-width marker, which is not a query and would resolve to `@media --`. */
-  const withoutBaseWidth = (rule: Record<string, unknown>): Record<string, unknown> => {
-    const cleaned: Record<string, unknown> = {};
+  const withoutBaseWidth = (rule: JxStyle): JxStyle => {
+    const cleaned: JxStyle = {};
     for (const [k, v] of Object.entries(rule)) {
       if (k !== "@--") {
         cleaned[k] = v;
@@ -72,8 +80,8 @@ export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
     return cleaned;
   };
 
-  for (const [k, v] of Object.entries(style)) {
-    if (!isPlainObject(v)) {
+  for (const [k, v] of Object.entries(effectiveStyle)) {
+    if (!isStyleBlock(v)) {
       out[k] = v; // Flat scalars + -- custom props.
       continue;
     }
@@ -89,9 +97,9 @@ export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
     }
     if (k.startsWith("@")) {
       // Media block: re-key tag rules inside; non-tag keys (scalars/pseudo) apply to the root.
-      const bucket: Record<string, unknown> = {};
+      const bucket: JxStyle = {};
       for (const [mk, mv] of Object.entries(v)) {
-        if (isPlainObject(mv) && isTagPath(mk)) {
+        if (isStyleBlock(mv) && isTagPath(mk)) {
           bucket[`${SPECIMEN_SCOPE} ${mk}`] = withoutBaseWidth(mv);
         } else {
           bucket[mk] = mv;
@@ -107,34 +115,30 @@ export function transposeStylebookStyle(effectiveStyle: JxStyle): JxStyle {
     out[k] = v;
   }
 
-  return out as JxStyle;
+  return out;
 }
 
 /** Resolve a nested tag path ("table th") in a style object; null when absent. */
-function resolveNestedStyle(
-  style: Record<string, unknown>,
-  tagPath: string,
-): Record<string, unknown> | null {
+function resolveNestedStyle(style: JxStyle, tagPath: string): JxStyle | null {
   const parts = tagPath.split(" ");
-  let obj: unknown = style;
+  let obj: JxStyle[string] = style;
   for (const part of parts) {
-    if (!isPlainObject(obj)) {
+    if (!isStyleBlock(obj)) {
       return null;
     }
     obj = obj[part];
   }
-  return isPlainObject(obj) ? obj : null;
+  return isStyleBlock(obj) ? obj : null;
 }
 
 /** Whether the effective style customizes `tagPath` (directly or under any `@media` block). */
 export function hasTagStyle(rootStyle: JxStyle, tagPath: string): boolean {
-  const style = rootStyle as Record<string, unknown>;
-  const direct = resolveNestedStyle(style, tagPath);
+  const direct = resolveNestedStyle(rootStyle, tagPath);
   if (direct && Object.keys(direct).length > 0) {
     return true;
   }
-  for (const [key, val] of Object.entries(style)) {
-    if (!key.startsWith("@") || !isPlainObject(val)) {
+  for (const [key, val] of Object.entries(rootStyle)) {
+    if (!key.startsWith("@") || !isStyleBlock(val)) {
       continue;
     }
     const nested = resolveNestedStyle(val, tagPath);
@@ -145,6 +149,101 @@ export function hasTagStyle(rootStyle: JxStyle, tagPath: string): boolean {
   return false;
 }
 
+/** One catalogue tag as a list of element defaults draws it: the Styles panel's, and the Outline's. */
+export interface CatalogueRow {
+  /** The catalogue entry the row stands for. */
+  entry: StylebookEntry;
+  tag: string;
+  /** The compound path (`ul li`): the row's key, and what selecting the row selects. */
+  path: string;
+  /** How deep in its specimen the tag sits: 0 for a section's own entries. */
+  depth: number;
+  /** Whether the selection's leaf is this tag ({@link selectionLeaf}). */
+  selected: boolean;
+}
+
+/**
+ * The leaf of a stylebook selection.
+ *
+ * A selection is a compound path (`"ul li"`) and the catalogue draws one row per TAG, so the row
+ * that is marked is the one whose tag is the path's last segment. That is what the tree has always
+ * done; it is written down here because "selected" meaning something other than "equal" is exactly
+ * the kind of thing a reader assumes is a bug.
+ */
+export function selectionLeaf(selection: string | null): string | null {
+  if (!selection) {
+    return null;
+  }
+  return selection.split(" ").pop() ?? null;
+}
+
+/**
+ * Flatten catalogue entries and everything under them into rows, in document order.
+ *
+ * Children are deduplicated by tag: a `<ul>` specimen carries several `<li>`s and they are one row,
+ * because the row selects a TAG and there is one rule per tag path to write. The ONE walk both
+ * lists draw from, so the two cannot drift; what each says about a row (its dot, its label) is the
+ * caller's.
+ *
+ * @param entries A section's entries, or several sections' in order
+ * @param selection The stylebook selection (`shell.stylebook.selection`)
+ */
+export function catalogueRows(
+  entries: readonly StylebookEntry[],
+  selection: string | null,
+): CatalogueRow[] {
+  const leaf = selectionLeaf(selection);
+  const out: CatalogueRow[] = [];
+  const walk = (entry: StylebookEntry, depth: number, parentPath: string): void => {
+    const path = parentPath ? `${parentPath} ${entry.tag}` : entry.tag;
+    out.push({ depth, entry, path, selected: entry.tag === leaf, tag: entry.tag });
+    const children = entry.children
+      ? [...new Map(entry.children.map((child) => [child.tag, child])).values()]
+      : [];
+    for (const child of children) {
+      walk(child, depth + 1, path);
+    }
+  };
+  for (const entry of entries) {
+    walk(entry, 0, "");
+  }
+  return out;
+}
+
+/**
+ * A card's specimen for a component drawn as the first row of a list
+ * (`style/stylebook-specimens.ts`): the list's repeater, reading its row from `rootState[key]` so
+ * two cards' lists cannot collide, and the rest of the page state the row was drawn in, the first
+ * card's value winning a shared name (`$page`, `$site`). Null when the sample is not a repeater
+ * over a state list.
+ */
+export function sampleRowSpecimen(
+  sample: JxDocument,
+  key: string,
+  rootState: Record<string, JxStateDefinition>,
+): JxMutableNode | null {
+  const [list] = Array.isArray(sample.children) ? sample.children : [];
+  if (!isNonNullObject(list) || Array.isArray(list) || !isRef(list.items)) {
+    return null;
+  }
+  const { $ref } = list.items;
+  const listKey = $ref.startsWith("#/state/") ? $ref.slice("#/state/".length) : "";
+  const rows = sample.state?.[listKey];
+  if (!Array.isArray(rows)) {
+    return null;
+  }
+  rootState[key] = rows;
+  for (const [name, value] of Object.entries(sample.state ?? {})) {
+    if (name !== listKey && !(name in rootState)) {
+      rootState[name] = value;
+    }
+  }
+  /* SAFETY: `list` is the repeater object a page's `children` held; only its `items` is replaced,
+     with a ref of the same shape. */
+  const repeater = { ...list, items: { $ref: `#/state/${key}` } } as JxMutableNode;
+  return { children: [repeater], tagName: "div" };
+}
+
 /** Options for {@link buildStylebookDoc}. */
 export interface BuildStylebookDocOpts {
   meta: { $sections: { label: string; elements: StylebookEntry[] }[] };
@@ -153,9 +252,16 @@ export interface BuildStylebookDocOpts {
   effectiveStyle: JxStyle;
   /** Merged $media map (getEffectiveMedia output) — becomes the doc's $media. */
   effectiveMedia: Record<string, string>;
+  /** Merged project+document `$head` (getEffectiveHead output) — becomes the doc's `$head`. */
+  effectiveHead?: JxHeadEntry[];
   filter: string;
   customizedOnly: boolean;
   projectRoot: string | null;
+  /**
+   * How each component card is drawn, by tag (`style/stylebook-specimens.ts`). A component with no
+   * entry is drawn bare, with its declared defaults as attributes.
+   */
+  specimens?: StylebookSpecimens;
 }
 
 /**
@@ -179,16 +285,21 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
   };
 
   const specimenNode = (entry: StylebookEntry): JxMutableNode => {
-    const attributes: Record<string, string> = { ...entry.attributes };
+    const attributes = { ...entry.attributes };
     if (entry.style) {
       attributes.style = entry.style; // Inline CSS text — legacy `el.style.cssText` parity.
     }
-    return {
-      tagName: entry.tag,
-      ...(entry.text ? { textContent: entry.text } : {}),
-      ...(Object.keys(attributes).length > 0 ? { attributes } : {}),
-      ...(entry.children ? { children: entry.children.map(specimenNode) } : {}),
-    } as JxMutableNode;
+    const node: JxMutableNode = { tagName: entry.tag };
+    if (entry.text) {
+      node.textContent = entry.text;
+    }
+    if (Object.keys(attributes).length > 0) {
+      node.attributes = attributes;
+    }
+    if (entry.children) {
+      node.children = entry.children.map(specimenNode);
+    }
+    return node;
   };
 
   /** A card wrapping one specimen; registers card/preview/specimen paths under `tag`. */
@@ -217,19 +328,18 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
         { attributes: { class: "element-card-label" }, tagName: "div", textContent: label },
       ],
       tagName: "div",
-    } as JxMutableNode;
+    };
   };
 
   const sections: JxMutableNode[] = [];
-  const sectionNode = (label: string, cards: JxMutableNode[]): JxMutableNode =>
-    ({
-      attributes: { class: "sb-section" },
-      children: [
-        { attributes: { class: "sb-label" }, tagName: "div", textContent: label },
-        { attributes: { class: "sb-body" }, children: cards, tagName: "div" },
-      ],
-      tagName: "div",
-    }) as JxMutableNode;
+  const sectionNode = (label: string, cards: JxMutableNode[]): JxMutableNode => ({
+    attributes: { class: "sb-section" },
+    children: [
+      { attributes: { class: "sb-label" }, tagName: "div", textContent: label },
+      { attributes: { class: "sb-body" }, children: cards, tagName: "div" },
+    ],
+    tagName: "div",
+  });
 
   // Paths below mirror the assembled tree: root.children[si] = section; section.children[1] =
   // Sb-body; body.children[ci] = card. Sections are appended only when non-empty, so indices are
@@ -264,6 +374,8 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
 
   // Custom components from the registry — live custom elements registered via $elements.
   const $elements: (string | { $ref: string })[] = [];
+  // The data the sample-row cards read: each row's list, and the page context it was drawn in.
+  const rootState: Record<string, JxStateDefinition> = {};
   {
     let comps = opts.components;
     if (filter) {
@@ -287,24 +399,37 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
               "/",
             ),
           });
-          const attributes: Record<string, string> = {};
-          for (const p of comp.props ?? []) {
-            if (p.default !== undefined && p.default !== "false" && p.default !== "''") {
-              attributes[p.name] = String(p.default).replaceAll(/^'|'$/g, "");
+          const drawn = opts.specimens?.get(comp.tagName);
+          if (drawn?.kind === "props") {
+            const specimen: JxMutableNode = { $props: drawn.props, tagName: comp.tagName };
+            return cardNode(comp.tagName, `<${comp.tagName}>`, specimen, cardPath, null);
+          }
+          if (drawn?.kind === "row") {
+            const row = sampleRowSpecimen(drawn.sample.doc, `stylebookRow${ci}`, rootState);
+            if (row) {
+              return cardNode(comp.tagName, `<${comp.tagName}>`, row, cardPath, null);
+            }
+          }
+          if (drawn?.kind !== "none") {
+            const attributes: Record<string, string> = {};
+            for (const p of comp.props ?? []) {
+              if (p.default !== undefined && p.default !== "false" && p.default !== "''") {
+                attributes[p.name] = String(p.default).replaceAll(/^'|'$/g, "");
+              }
             }
+            const specimen: JxMutableNode = { tagName: comp.tagName };
+            if (Object.keys(attributes).length > 0) {
+              specimen.attributes = attributes;
+            }
+            return cardNode(comp.tagName, `<${comp.tagName}>`, specimen, cardPath, null);
           }
-          const specimen = {
-            tagName: comp.tagName,
-            ...(Object.keys(attributes).length > 0 ? { attributes } : {}),
-          } as JxMutableNode;
-          return cardNode(comp.tagName, `<${comp.tagName}>`, specimen, cardPath, null);
         }
         // Npm/format-class components can't be $ref-registered — placeholder box (legacy parity).
-        const fallback = {
+        const fallback: JxMutableNode = {
           attributes: { class: "sb-fallback" },
           tagName: "div",
           textContent: `<${comp.tagName}>`,
-        } as JxMutableNode;
+        };
         return cardNode(comp.tagName, `<${comp.tagName}>`, fallback, cardPath, null);
       });
       sections.push(sectionNode("Components", cards));
@@ -316,17 +441,27 @@ export function buildStylebookDoc(opts: BuildStylebookDocOpts): StylebookDocResu
       attributes: { class: "sb-empty" },
       tagName: "div",
       textContent: opts.customizedOnly ? "No customized elements" : "No matching elements",
-    } as JxMutableNode);
+    });
   }
 
-  const doc = {
-    ...($elements.length > 0 ? { $elements } : {}),
-    $media: opts.effectiveMedia,
-    attributes: { class: "sb-root" },
-    children: sections,
-    style: transposeStylebookStyle(opts.effectiveStyle),
-    tagName: "div",
-  } as JxMutableNode;
+  // Assigned in this order so the posted document keeps its key order: `$elements` leads when present.
+  const doc: JxMutableNode = {};
+  if ($elements.length > 0) {
+    doc.$elements = $elements;
+  }
+  /* The project's `$head` too: its webfont links are what make `fontFamily: 'Barlow'` render as
+     Barlow, and a specimen sheet drawn in the system fallback shows styles the site never has. */
+  if (opts.effectiveHead && opts.effectiveHead.length > 0) {
+    doc.$head = opts.effectiveHead;
+  }
+  doc.$media = opts.effectiveMedia;
+  if (Object.keys(rootState).length > 0) {
+    doc.state = rootState;
+  }
+  doc.attributes = { class: "sb-root" };
+  doc.children = sections;
+  doc.style = transposeStylebookStyle(opts.effectiveStyle);
+  doc.tagName = "div";
 
   return { doc, pathToTag, tagToCardPath };
 }