@hraness/design-kit 0.36.5 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.36.5",
+  "version": "0.38.0",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",
@@ -323,7 +323,7 @@
     "test": "bun test --preload ./scripts/register-stylex-test-transform.ts ./src",
     "browser:install": "bun ./node_modules/playwright-core/cli.js install chromium",
     "test:browser": "bun run test:browser:marketing && bun run test:browser:rest",
-    "test:browser:marketing": "bun run ./scripts/product-marketing-browser.ts && bun run ./scripts/marketing-header-browser.ts",
+    "test:browser:marketing": "bun run ./scripts/product-marketing-browser.ts",
     "test:browser:rest": "bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts && bun run ./scripts/agent-setup-browser.ts",
     "test:package": "bun run ./scripts/package-smoke.ts && bun run ./scripts/mockups-import.ts",
     "kb:refresh": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell refresh --root kb",

package/portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.36.5"
+      "version": "0.38.0"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/compiler-foundation.css

@@ -15,4 +15,5 @@
 @import "./status-page.css";
 @import "./product-marketing-foundation.css";
 @import "./design-gallery.css";
+@import "./mockups.css";
 @import "./lantern-material.css";

package/src/design-gallery.css

@@ -7,6 +7,18 @@
 }
 
 @layer components.hraness-design-kit.legacy {
+  .design-gallery__walkthrough-preview { display: grid; gap: 1rem; padding: 1.5rem; font-size: 0.875rem; }
+  .design-gallery__walkthrough-context { margin: 0; color: var(--hkm-muted); font-size: 0.75rem; letter-spacing: 0.06em; }
+  .design-gallery__walkthrough-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; font-size: 1.125rem; font-weight: 600; }
+  .design-gallery__walkthrough-state { padding: 0.25rem 0.5rem; border: 1px solid var(--hkm-line); border-radius: 0.375rem; color: var(--hkm-muted); font-size: 0.75rem; font-weight: 500; }
+  .design-gallery__walkthrough-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
+  .design-gallery__walkthrough-facts dt { margin-block-end: 0.25rem; color: var(--hkm-muted); font-size: 0.75rem; }
+  .design-gallery__walkthrough-facts dd { margin: 0; }
+  .design-gallery__walkthrough-checks { margin: 0; padding: 0; list-style: none; }
+  .design-gallery__walkthrough-checks li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; border-block-start: 1px solid var(--hkm-line); }
+  .design-gallery__walkthrough-checks li > :last-child { color: var(--hkm-muted); }
+  .design-gallery__walkthrough-result { display: grid; gap: 0.375rem; padding: 1rem; border: 1px solid var(--hkm-line); border-radius: 0.625rem; background: var(--hkm-surface); }
+  .design-gallery__walkthrough-result > span { color: var(--hkm-muted); font-size: 0.75rem; }
   .design-gallery__lantern-intro {
     margin: 0;
     max-inline-size: 60ch;

package/src/mockups/client.tsx

@@ -9,6 +9,7 @@ import {
   useMemo,
   useRef,
   useState,
+  version,
 } from "react";
 
 import { joinMockupClasses, type MockupTheme } from "./core.js";
@@ -23,6 +24,18 @@ import { joinMockupClasses, type MockupTheme } from "./core.js";
 // measure only in the browser.
 const useIsomorphicLayoutEffect: typeof useLayoutEffect = typeof document === "undefined" ? () => undefined : useLayoutEffect;
 
+// React 18 drops unknown boolean attributes; React 19 recognizes inert as
+// boolean. Keep the actual HTML attribute in both supported runtimes. The
+// record describes compatibility attributes without claiming React 18's
+// HTMLAttributes (or React 19's boolean-only inert prop) accepts both forms.
+const inertAttribute: Readonly<Record<string, true | "">> = {
+  inert: Number.parseInt(version, 10) >= 19 ? true : "",
+};
+const noInertAttribute: Readonly<Record<string, true | "">> = {};
+function inertAttributes(inactive: boolean): Readonly<Record<string, true | "">> {
+  return inactive ? inertAttribute : noInertAttribute;
+}
+
 function assertUniqueIds(items: readonly Readonly<{ id: string }>[], what: string): void {
   if (items.length === 0) throw new RangeError(`${what} needs at least one entry.`);
   const seen = new Set<string>();
@@ -128,6 +141,8 @@ export type ShowcaseState<M extends string, O extends string = string> = Readonl
 export type ShowcaseSurface<S extends string, M extends string, O extends string = string> = Readonly<{
   id: S;
   label: string;
+  /** Optional explanation of what this surface illustrates. */
+  hint?: string;
   render: (state: ShowcaseState<M, O>) => ReactNode;
 }>;
 
@@ -208,7 +223,7 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
   // Pure, nonanimated authored states reserve one maximum before any choice.
   // They stay hidden and inert; only a detached measurement clone reveals them.
   const measurements = useMemo(() => fit !== "fill" ? null : surfaces.flatMap((entry) => modes.flatMap((choice) => (options ?? [{ id: undefined }]).map((optionChoice) => (
-    <div aria-hidden="true" className="hkm-mode-surface" data-hkm-measurement="" hidden inert key={JSON.stringify([entry.id, choice.id, optionChoice.id])}>
+    <div aria-hidden="true" className="hkm-mode-surface" data-hkm-measurement="" hidden {...inertAttributes(true)} key={JSON.stringify([entry.id, choice.id, optionChoice.id])}>
       <div className="hkm-fit"><div className="hkm-fit-inner">
         {entry.render({ animated: false, mode: choice.id, option: optionChoice.id, previousMode: choice.id, theme })}
       </div></div>
@@ -238,10 +253,12 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
   };
 
   const statusNode = status?.({ mode, option, surface: surface.id });
-  const hint = [modeChoice.hint, optionInactive ? undefined : optionChoice?.hint]
-    .map((text) => optionalText(text, "ModeShowcase hint"))
-    .filter((text) => text !== undefined)
-    .join(" ");
+  const describeChoice = (surfaceHint: string | undefined, modeHint: string | undefined, optionHint: string | undefined) =>
+    [surfaceHint, modeHint, optionHint].map((text) => optionalText(text, "ModeShowcase hint")).filter((text) => text !== undefined).join(" ");
+  const hint = describeChoice(surface.hint, modeChoice.hint, optionInactive ? undefined : optionChoice?.hint);
+  const hints = [...new Set(surfaces.flatMap((entry) => modes.flatMap((choice) =>
+    (optionInactiveModes.includes(choice.id) ? [undefined] : (options ?? [undefined])).map((optionEntry) =>
+      describeChoice(entry.hint, choice.hint, optionEntry?.hint)))))].filter((text) => text !== "");
   const hasStatus = statusNode !== undefined && statusNode !== null && statusNode !== false && statusNode !== "";
   return (
     <figure
@@ -307,7 +324,12 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
               </div>
             )}
           </div>
-          {hint === "" ? null : <p className="hkm-showcase-hint">{hint}</p>}
+          {hints.length === 0 ? null : (
+            <div className="hkm-showcase-hints">
+              <p className="hkm-showcase-hint">{hint}</p>
+              {hints.filter((text) => text !== hint).map((text) => <p aria-hidden="true" className="hkm-showcase-hint" data-hkm-reserving="" {...inertAttributes(true)} key={text}>{text}</p>)}
+            </div>
+          )}
         </div>
         <div className="hkm-mode-stage" ref={stage}>
           {measurements}
@@ -317,7 +339,7 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
               className="hkm-mode-surface"
               data-hkm-animated={entry.id === surface.id && animated ? "" : undefined}
               data-hkm-from={entry.id === surface.id && animated ? previousMode : undefined}
-              inert={entry.id !== surface.id}
+              {...inertAttributes(entry.id !== surface.id)}
               key={entry.id}
             >
               <FitToWidth minWidth={fit === "fill" ? 1 : minWidth}>
@@ -345,7 +367,7 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
 export type ThroughStep = Readonly<{
   id: string;
   label: string;
-  /** Optional accessible context; the visual keeps its own explanation. */
+  /** Optional explanation beside the label, and below the preview on compact screens. */
   hint?: string;
   render: (state: Readonly<{ animated: boolean; theme: MockupTheme | undefined }>) => ReactNode;
 }>;
@@ -416,14 +438,14 @@ function fitShowcaseStage(stage: HTMLDivElement, minimumHeight: number): void {
     // The tallest complete slide establishes the floor. Fitted type never feeds
     // back into it, and changing the active tab never requests a measurement.
     stage.style.setProperty("--hkm-showcase-fill-height", `${naturalHeight}px`);
-    for (const fixture of probe.querySelectorAll("[data-hkm-measurement]")) fixture.remove();
     probe.style.blockSize = `${naturalHeight}px`;
     probe.removeAttribute("data-hkm-measuring");
     const bodies = presentationBodies(stage).filter((body) => body.closest("[data-hkm-measurement]") === null);
     const copies = presentationBodies(probe);
-    for (const [index, copy] of copies.entries()) {
-      const body = bodies[index];
-      if (body === undefined) continue;
+    // Every authored state uses one readable size. A short terminal must not
+    // become a different typographic scale when the next tab has more lines.
+    let sharedSize = 4;
+    for (const copy of copies) {
       const lines = [...copy.querySelectorAll<HTMLElement>(".hkm-terminal-line")];
       const wrappedRows = (line: HTMLElement) => Math.ceil((line.getBoundingClientRect().height - 0.5) / Number.parseFloat(getComputedStyle(line).lineHeight));
       const baselineRows = lines.map(wrappedRows);
@@ -435,8 +457,9 @@ function fitShowcaseStage(stage: HTMLDivElement, minimumHeight: number): void {
         if (copy.scrollHeight <= copy.clientHeight + 1 && copy.scrollWidth <= copy.clientWidth + 1 && lines.every((line, index) => { const baseline = baselineRows[index]; return baseline !== undefined && wrappedRows(line) <= baseline; })) low = candidate;
         else high = candidate;
       }
-      body.style.setProperty("--hkm-terminal-presentation-size", `${Math.floor(low * 1000) / 1000}rem`);
+      sharedSize = Math.min(sharedSize, low);
     }
+    for (const body of bodies) body.style.setProperty("--hkm-terminal-presentation-size", `${Math.floor(sharedSize * 1000) / 1000}rem`);
     stage.setAttribute("data-hkm-fitted", "");
   } finally {
     probe.remove();
@@ -485,9 +508,12 @@ function useFittedShowcaseStage(fit: "natural" | "fill", source: unknown, variat
 }
 
 /**
- * Folder tabs and chevron controls walk a flow. All render functions stay mounted
- * to reserve the tallest panel; inactive panels are inert and visually hidden.
- * The keyboard model matches `ModeShowcase`.
+ * A tabbed walkthrough: the steps and the preview share one edge. Compact
+ * layouts attach a tab strip to the preview's top edge between Back and Next;
+ * at 720px and wider the steps stack on its start edge with their
+ * explanations. All render functions stay mounted to reserve the tallest
+ * panel; inactive panels are inert and visually hidden. The keyboard model
+ * matches `ModeShowcase`.
  */
 export function StepThrough({
   caption,
@@ -500,7 +526,7 @@ export function StepThrough({
   theme,
 }: Readonly<{
   steps: readonly ThroughStep[];
-  /** Fill the tallest natural slide and fit presentation terminals without scaling. */
+  /** Fill the tallest natural slide and fit presentation terminals at one shared size. */
   fit?: "natural" | "fill";
   caption?: string;
   initial?: string;
@@ -516,17 +542,68 @@ export function StepThrough({
   const id = useId();
   const [index, setIndex] = useState(() => Math.max(0, steps.findIndex((step) => step.id === initial)));
   const [animated, setAnimated] = useState(false);
+  const [vertical, setVertical] = useState(false);
+  const layout = useRef<HTMLDivElement>(null);
+  const tablist = useRef<HTMLDivElement>(null);
   const tabs = useRef(new Map<number, HTMLButtonElement>());
   const current = Math.min(index, steps.length - 1);
-  const step = itemAt(steps, current, "StepThrough steps");
+  const hints = steps.map((entry) => optionalText(entry.hint, "StepThrough hint"));
+  const currentHint = hints[current];
+
+  useIsomorphicLayoutEffect(() => {
+    const node = layout.current;
+    if (node === null || typeof ResizeObserver === "undefined") return undefined;
+    const measure = () => setVertical(node.clientWidth >= 720);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  // A strip that cannot show every label in full keeps only the selected
+  // label visible; the rest show their numbers and keep their accessible names.
+  useIsomorphicLayoutEffect(() => {
+    const list = tablist.current;
+    if (list === null || typeof ResizeObserver === "undefined") return undefined;
+    let disposed = false;
+    const measure = () => {
+      if (disposed) return;
+      list.removeAttribute("data-hkm-compact");
+      if (vertical) return;
+      const truncated = [...list.querySelectorAll<HTMLElement>(".hkm-step-label")].some((label) => label.scrollWidth > label.clientWidth + 1);
+      if (truncated) list.setAttribute("data-hkm-compact", "");
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(list);
+    void document.fonts.ready.then(measure);
+    return () => {
+      disposed = true;
+      observer.disconnect();
+      list.removeAttribute("data-hkm-compact");
+    };
+  }, [current, vertical]);
+
+  useIsomorphicLayoutEffect(() => {
+    const list = tablist.current;
+    const selected = tabs.current.get(current);
+    if (vertical || list === null || selected === undefined) return;
+    const bounds = list.getBoundingClientRect();
+    const active = selected.getBoundingClientRect();
+    // Scroll only the owned strip, without moving the surrounding page.
+    if (active.left < bounds.left) list.scrollLeft += active.left - bounds.left;
+    else if (active.right > bounds.right) list.scrollLeft += active.right - bounds.right;
+  }, [current, vertical]);
 
   const go = (next: number, focus = false) => {
     if (next < 0 || next >= steps.length || next === current) return;
     setIndex(next);
     setAnimated(true);
-    if (focus) tabs.current.get(next)?.focus();
+    if (focus) tabs.current.get(next)?.focus({ preventScroll: true });
   };
   const onTabKey = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (vertical && (event.key === "ArrowLeft" || event.key === "ArrowRight")) return;
+    if (!vertical && (event.key === "ArrowUp" || event.key === "ArrowDown")) return;
     const next = nextTabIndex(event.key, current, steps.length);
     if (next === undefined) return;
     event.preventDefault();
@@ -535,61 +612,75 @@ export function StepThrough({
 
   return (
     <figure aria-label={`Illustration: ${label.toLowerCase()}`} className={joinMockupClasses("hkm-showcase", "hkm-steps", className)} data-hkm-fit={fit === "fill" ? fit : undefined} data-hkm-theme={theme} data-nosnippet="">
-      <div className="hkm-showcase-controls">
-        <div aria-label={label} className="hkm-tabs hkm-folder-tabs hkm-step-tabs" role="tablist">
+      <div className="hkm-step-layout" ref={layout}>
+        <div className="hkm-showcase-controls hkm-step-controls">
+          <div className="hkm-step-nav">
+            <button aria-label="Back" className="hkm-step-button" disabled={current === 0} onClick={() => go(current - 1)} type="button">
+              <svg aria-hidden="true" focusable="false" height="20" viewBox="0 0 24 24" width="20"><path d="m14.5 5-7 7 7 7" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.75" /></svg>
+            </button>
+            <span aria-hidden="true" className="hkm-step-count">{current + 1} / {steps.length}</span>
+            <div aria-label={label} aria-orientation={vertical ? "vertical" : "horizontal"} className="hkm-tabs hkm-step-tabs" ref={tablist} role="tablist">
+              {steps.map((entry, position) => (
+                <button
+                  aria-controls={`${id}-panel-${entry.id}`}
+                  aria-describedby={hints[position] === undefined ? undefined : `${id}-hint-${entry.id}`}
+                  aria-label={entry.label}
+                  aria-selected={position === current}
+                  className="hkm-tab"
+                  data-hkm-done={position < current ? "" : undefined}
+                  id={`${id}-tab-${entry.id}`}
+                  key={entry.id}
+                  onClick={() => go(position)}
+                  onKeyDown={onTabKey}
+                  ref={(element) => {
+                    if (element === null) tabs.current.delete(position);
+                    else tabs.current.set(position, element);
+                  }}
+                  role="tab"
+                  tabIndex={position === current ? 0 : -1}
+                  type="button"
+                >
+                  <span aria-hidden="true" className="hkm-step-number">{position + 1}</span>
+                  <span className="hkm-step-copy">
+                    <span className="hkm-step-label">{entry.label}</span>
+                    {hints[position] === undefined ? null : <span className="hkm-step-hint" id={`${id}-hint-${entry.id}`}>{hints[position]}</span>}
+                  </span>
+                </button>
+              ))}
+            </div>
+            <button aria-label="Next" className="hkm-step-button" disabled={current === steps.length - 1} onClick={() => go(current + 1)} type="button">
+              <svg aria-hidden="true" focusable="false" height="20" viewBox="0 0 24 24" width="20"><path d="m9.5 5 7 7-7 7" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.75" /></svg>
+            </button>
+          </div>
+        </div>
+        <div className="hkm-showcase-stage hkm-step-stage" ref={stage}>
           {steps.map((entry, position) => (
-            <button
-              aria-controls={`${id}-panel-${entry.id}`}
-              aria-selected={position === current}
-              className="hkm-tab"
-              data-hkm-done={position < current ? "" : undefined}
-              id={`${id}-tab-${entry.id}`}
+            <div
+              aria-hidden={position !== current}
+              aria-labelledby={`${id}-tab-${entry.id}`}
+              className="hkm-step-panel"
+              data-hkm-animated={position === current && animated ? "" : undefined}
+              id={`${id}-panel-${entry.id}`}
+              {...inertAttributes(position !== current)}
               key={entry.id}
-              onClick={() => go(position)}
-              onKeyDown={onTabKey}
-              ref={(element) => {
-                if (element === null) tabs.current.delete(position);
-                else tabs.current.set(position, element);
-              }}
-              role="tab"
+              role="tabpanel"
               tabIndex={position === current ? 0 : -1}
-              type="button"
             >
-              <span aria-hidden="true" className="hkm-step-number">{position + 1}</span>
-              {entry.label}
-            </button>
+              {fit === "fill"
+                ? <div className="hkm-fit"><div className="hkm-fit-inner">{entry.render({ animated: position === current && animated, theme })}</div></div>
+                : <FitToWidth minWidth={minWidth}>{entry.render({ animated: position === current && animated, theme })}</FitToWidth>}
+            </div>
           ))}
         </div>
-      </div>
-      <div className="hkm-showcase-stage hkm-step-stage" ref={stage}>
-        {steps.map((entry, position) => (
-          <div
-            aria-hidden={position !== current}
-            aria-labelledby={`${id}-tab-${entry.id}`}
-            className="hkm-step-panel"
-            data-hkm-animated={position === current && animated ? "" : undefined}
-            id={`${id}-panel-${entry.id}`}
-            inert={position !== current}
-            key={entry.id}
-            role="tabpanel"
-          >
-            {fit === "fill"
-              ? <div className="hkm-fit"><div className="hkm-fit-inner">{entry.render({ animated: position === current && animated, theme })}</div></div>
-              : <FitToWidth minWidth={minWidth}>{entry.render({ animated: position === current && animated, theme })}</FitToWidth>}
+        {hints.some((hint) => hint !== undefined) ? (
+          <div aria-hidden="true" className="hkm-step-descriptions">
+            {steps.map((entry, position) => <p className="hkm-step-description" data-hkm-active={position === current ? "" : undefined} key={entry.id}>{hints[position]}</p>)}
           </div>
-        ))}
-      </div>
-      <div className="hkm-step-nav">
-        <button aria-label="Back" className="hkm-step-button" disabled={current === 0} onClick={() => go(current - 1)} type="button">
-          <svg aria-hidden="true" focusable="false" height="28" viewBox="0 0 24 24" width="28"><path d="m14.5 5-7 7 7 7" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.75" /></svg>
-        </button>
-        <span aria-live="polite" className="hkm-showcase-status hkm-step-announcement">
-          Step {current + 1} of {steps.length}{step.hint === undefined ? "" : `. ${step.hint}`}
-        </span>
-        <button aria-label="Next" className="hkm-step-button" data-hkm-primary="" disabled={current === steps.length - 1} onClick={() => go(current + 1)} type="button">
-          <svg aria-hidden="true" focusable="false" height="28" viewBox="0 0 24 24" width="28"><path d="m9.5 5 7 7-7 7" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.75" /></svg>
-        </button>
+        ) : null}
       </div>
+      <span aria-live="polite" className="hkm-showcase-status hkm-step-announcement">
+        Step {current + 1} of {steps.length}{currentHint === undefined ? "" : `. ${currentHint}`}
+      </span>
       {captionText === undefined ? null : (
         <figcaption className="hkm-showcase-caption"><span>{captionText}</span></figcaption>
       )}

package/src/mockups/core.tsx

@@ -1,5 +1,7 @@
 import type { CSSProperties, ReactNode } from "react";
 
+import { providerMark, providerMarkMonogram, providerMarkOnAccent } from "../provider-marks.js";
+
 /*
  * Shared pieces for the code-built mockups. Server-safe plain React: no hooks,
  * no context, no StyleX, and no runtime dependency other than React, so a film
@@ -306,6 +308,34 @@ export function MockupGlyph({
   );
 }
 
+/**
+ * A product's brand mark from the shared provider-mark registry, such as
+ * "Apple Contacts", "LinkedIn", or "iMessage". `tile` draws the vendor glyph
+ * in readable ink on the brand color, like an app icon; `glyph` follows the
+ * surrounding text color. Names without a registered mark get a neutral
+ * monogram tile, never an invented logo. Decorative: always aria-hidden, so
+ * name the product in nearby text.
+ */
+export function MockupBrandMark({
+  className,
+  name,
+  size = 32,
+  variant = "tile",
+}: Readonly<{ name: string; size?: number; variant?: "tile" | "glyph"; className?: string }>) {
+  if (!(size > 0)) throw new RangeError("MockupBrandMark size must be positive.");
+  const mark = providerMark(name);
+  const style = { "--hkm-mark-size": `${String(size)}px`, ...(mark === undefined || variant !== "tile" ? {} : { "--hkm-mark-accent": mark.accent, "--hkm-mark-ink": providerMarkOnAccent(mark) }) } as CSSProperties;
+  if (mark === undefined) {
+    return <span aria-hidden="true" className={joinMockupClasses("hkm-brand-mark", className)} data-hkm-monogram="" style={style}>{providerMarkMonogram(name)}</span>;
+  }
+  return (
+    <span aria-hidden="true" className={joinMockupClasses("hkm-brand-mark", className)} data-hkm-mark={mark.id} data-hkm-variant={variant} style={style}>
+      {/* Generated from vendored, sanitized artwork in provider-marks.generated.ts. */}
+      <svg dangerouslySetInnerHTML={{ __html: mark.glyph.body }} fill="currentColor" focusable="false" viewBox={mark.glyph.viewBox} />
+    </span>
+  );
+}
+
 /** The three window buttons at the start of a title bar. Decorative. */
 export function WindowLights() {
   return (