@hraness/design-kit 0.35.2 → 0.36.0

package/dist/stylex.css

@@ -109,6 +109,10 @@
     padding: 0;
   }
 
+  .x1aetswf {
+    padding: 1.125rem;
+  }
+
   .x194jd1b {
     padding: 1.1rem 7rem 1rem 1rem;
   }
@@ -1084,6 +1088,10 @@
     accent-color: var(--primary, Highlight);
   }
 
+  .xc26acl {
+    align-content: center;
+  }
+
   .xcdzlcm {
     align-content: space-between;
   }
@@ -1675,6 +1683,10 @@
     block-size: 1rem;
   }
 
+  .x1vlpzvb {
+    block-size: 3.5rem;
+  }
+
   .x18o2qet {
     block-size: 4.5rem;
   }
@@ -2523,6 +2535,10 @@
     grid-template-columns: 2.25rem minmax(0, 1fr);
   }
 
+  .xrdwe0 {
+    grid-template-columns: 3.5rem minmax(0, 1fr);
+  }
+
   .xx9t13c {
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
@@ -2631,6 +2647,10 @@
     inline-size: 2rem;
   }
 
+  .x1pf0uk5 {
+    inline-size: 3.5rem;
+  }
+
   .x6qm275 {
     inline-size: 4.5rem;
   }
@@ -2966,6 +2986,10 @@
     max-block-size: min(38rem, 75dvh);
   }
 
+  .x1vj640n {
+    max-block-size: none;
+  }
+
   .xgyk9h7 {
     max-inline-size: 100%;
   }
@@ -4101,6 +4125,12 @@
     }
   }
 
+  @media (width >= 64rem) {
+    .x13f99nf.x13f99nf {
+      grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
+    }
+  }
+
   @media (width >= 50rem) {
     .x2k1869.x2k1869 {
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.35.2",
+  "version": "0.36.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",

package/portfolio-inventory.json

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

package/src/mockups/client.tsx

@@ -6,6 +6,7 @@ import {
   type ReactNode,
   useId,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -145,8 +146,10 @@ export type ModeShowcaseProps<S extends string, M extends string, O extends stri
   status?: (state: Readonly<{ surface: S; mode: M; option: O | undefined }>) => ReactNode;
   /** Optional context that adds to the visual. Omit repeated descriptions or generic disclaimers. */
   caption?: string;
-  /** Page-window height in CSS pixels at full scale. */
+  /** Page-window cap in natural mode; minimum complete stage height in fill mode. */
   height?: number;
+  /** Reserve every authored choice at readable size, up to 128 combinations. */
+  fit?: "natural" | "fill";
   /** Narrowest layout width before the stage scales down. */
   minWidth?: number;
   theme?: MockupTheme;
@@ -164,6 +167,7 @@ export type ModeShowcaseProps<S extends string, M extends string, O extends stri
 export function ModeShowcase<S extends string, M extends string, O extends string = string>({
   caption,
   className,
+  fit = "natural",
   height = 440,
   initial,
   label,
@@ -181,7 +185,9 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
   assertUniqueIds(modes, "ModeShowcase mode");
   if (options !== undefined) assertUniqueIds(options, "ModeShowcase option");
   const captionText = optionalText(caption, "ModeShowcase");
-  if (!(height > 0)) throw new RangeError("ModeShowcase height must be positive.");
+  if (!Number.isFinite(height) || !(height > 0)) throw new RangeError("ModeShowcase height must be finite and positive.");
+  if (fit !== "natural" && fit !== "fill") throw new RangeError("ModeShowcase fit must be natural or fill.");
+  if (fit === "fill" && surfaces.length * modes.length * (options?.length ?? 1) > 128) throw new RangeError("ModeShowcase fill supports up to 128 surface, mode, and option combinations.");
 
   const id = useId();
   const firstSurface = surfaces.find((surface) => surface.id === initial?.surface) ?? itemAt(surfaces, 0, "ModeShowcase surfaces");
@@ -199,6 +205,17 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
   const optionChoice = options?.find((entry) => entry.id === option);
   const optionInactive = optionInactiveModes.includes(mode);
 
+  // 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 className="hkm-fit"><div className="hkm-fit-inner">
+        {entry.render({ animated: false, mode: choice.id, option: optionChoice.id, previousMode: choice.id, theme })}
+      </div></div>
+    </div>
+  )))), [fit, modes, options, surfaces, theme]);
+  const stage = useFittedShowcaseStage(fit, measurements, JSON.stringify([mode, option]), height);
+
   const chooseMode = (next: M) => {
     if (next === mode) return;
     setPreviousMode(mode);
@@ -229,73 +246,86 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
   return (
     <figure
       aria-label={label?.(surface) ?? `Illustration of ${surface.label.toLowerCase()}`}
-      className={joinMockupClasses("hkm-showcase", className)}
+      className={joinMockupClasses("hkm-showcase", "hkm-modes", className)}
+      data-hkm-fit={fit === "fill" ? fit : undefined}
       data-hkm-theme={theme}
       data-nosnippet=""
     >
-      <div className="hkm-showcase-controls">
-        {surfaces.length > 1 ? (
-          <div aria-label="Surface" className="hkm-tabs" role="tablist">
-            {surfaces.map((entry) => (
-              <button
-                aria-controls={`${id}-panel`}
-                aria-selected={entry.id === surface.id}
-                className="hkm-tab"
-                id={`${id}-tab-${entry.id}`}
-                key={entry.id}
-                onClick={() => setSurfaceId(entry.id)}
-                onKeyDown={onTabKey}
-                ref={(element) => {
-                  if (element === null) tabs.current.delete(entry.id);
-                  else tabs.current.set(entry.id, element);
-                }}
-                role="tab"
-                tabIndex={entry.id === surface.id ? 0 : -1}
-                type="button"
-              >
-                {entry.label}
-              </button>
-            ))}
-          </div>
-        ) : null}
-        <div className="hkm-showcase-settings">
-          <div className="hkm-showcase-row">
-            <span className="hkm-showcase-label" id={`${id}-mode`}>{modeLabel}</span>
-            <div aria-labelledby={`${id}-mode`} className="hkm-segmented" role="group">
-              {modes.map((entry) => (
-                <button aria-pressed={entry.id === mode} key={entry.id} onClick={() => chooseMode(entry.id)} type="button">
-                  {entry.label}
-                </button>
-              ))}
-            </div>
-          </div>
-          {options === undefined ? null : (
-            <div className="hkm-showcase-row">
-              <span className="hkm-showcase-label" id={`${id}-option`}>{optionLabel}</span>
-              <div aria-labelledby={`${id}-option`} className="hkm-segmented" role="group">
-                {options.map((entry) => (
-                  <button aria-pressed={entry.id === option} disabled={optionInactive} key={entry.id} onClick={() => chooseOption(entry.id)} type="button">
-                    {entry.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
+      {surfaces.length > 1 ? (
+        <div aria-label="Surface" className="hkm-tabs hkm-folder-tabs" role="tablist">
+          {surfaces.map((entry) => (
+            <button
+              aria-controls={`${id}-panel`}
+              aria-selected={entry.id === surface.id}
+              className="hkm-tab"
+              id={`${id}-tab-${entry.id}`}
+              key={entry.id}
+              onClick={() => setSurfaceId(entry.id)}
+              onKeyDown={onTabKey}
+              ref={(element) => {
+                if (element === null) tabs.current.delete(entry.id);
+                else tabs.current.set(entry.id, element);
+              }}
+              role="tab"
+              tabIndex={entry.id === surface.id ? 0 : -1}
+              type="button"
+            >
+              {entry.label}
+            </button>
+          ))}
         </div>
-        {hint === "" ? null : <p className="hkm-showcase-hint">{hint}</p>}
-      </div>
+      ) : null}
       <div
         aria-labelledby={surfaces.length > 1 ? `${id}-tab-${surface.id}` : undefined}
-        className="hkm-showcase-stage"
-        data-hkm-animated={animated ? "" : undefined}
-        data-hkm-from={animated ? previousMode : undefined}
+        className="hkm-showcase-stage hkm-mode-panel"
         id={`${id}-panel`}
         role={surfaces.length > 1 ? "tabpanel" : undefined}
         style={{ "--hkm-page-height": `${height}px` } as CSSProperties}
       >
-        <FitToWidth minWidth={minWidth}>
-          {surface.render({ animated, mode, option, previousMode, theme })}
-        </FitToWidth>
+        <div className="hkm-showcase-controls">
+          <div className="hkm-showcase-settings">
+            <div className="hkm-showcase-row">
+              <span className="hkm-showcase-label" id={`${id}-mode`}>{modeLabel}</span>
+              <div aria-labelledby={`${id}-mode`} className="hkm-segmented" role="group">
+                {modes.map((entry) => (
+                  <button aria-pressed={entry.id === mode} key={entry.id} onClick={() => chooseMode(entry.id)} type="button">
+                    {entry.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {options === undefined ? null : (
+              <div className="hkm-showcase-row">
+                <span className="hkm-showcase-label" id={`${id}-option`}>{optionLabel}</span>
+                <div aria-labelledby={`${id}-option`} className="hkm-segmented" role="group">
+                  {options.map((entry) => (
+                    <button aria-pressed={entry.id === option} disabled={optionInactive} key={entry.id} onClick={() => chooseOption(entry.id)} type="button">
+                      {entry.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          {hint === "" ? null : <p className="hkm-showcase-hint">{hint}</p>}
+        </div>
+        <div className="hkm-mode-stage" ref={stage}>
+          {measurements}
+          {surfaces.map((entry) => (
+            <div
+              aria-hidden={entry.id !== surface.id}
+              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}
+              key={entry.id}
+            >
+              <FitToWidth minWidth={fit === "fill" ? 1 : minWidth}>
+                {entry.render({ animated: entry.id === surface.id && animated, mode, option, previousMode, theme })}
+              </FitToWidth>
+            </div>
+          ))}
+        </div>
       </div>
       {!hasStatus && captionText === undefined ? null : (
         <figcaption className="hkm-showcase-caption">
@@ -320,6 +350,93 @@ export type ThroughStep = Readonly<{
   render: (state: Readonly<{ animated: boolean; theme: MockupTheme | undefined }>) => ReactNode;
 }>;
 
+/** Measure complete mounted slides at a readable baseline, separately from fitted paint. */
+function fitShowcaseStage(stage: HTMLDivElement, minimumHeight: number): void {
+  const owner = stage.parentElement;
+  if (owner === null || stage.clientWidth <= 0) return;
+  const probe = stage.cloneNode(true) as HTMLDivElement;
+  probe.setAttribute("aria-hidden", "true");
+  probe.setAttribute("inert", "");
+  probe.setAttribute("data-hkm-measuring", "");
+  probe.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;inset:0 auto auto 0;inline-size:${stage.getBoundingClientRect().width}px;block-size:auto;`;
+  for (const sentinel of probe.querySelectorAll("[data-hkm-font-sentinel]")) sentinel.remove();
+  for (const node of probe.querySelectorAll("[id]")) node.removeAttribute("id");
+  for (const node of probe.querySelectorAll("[data-hkm-animated]")) node.removeAttribute("data-hkm-animated");
+  for (const body of probe.querySelectorAll<HTMLElement>('[data-hkm-density="presentation"]')) body.style.removeProperty("--hkm-terminal-presentation-size");
+  for (const fixture of probe.querySelectorAll<HTMLElement>("[data-hkm-measurement]")) fixture.hidden = false;
+  owner.append(probe);
+  try {
+    const naturalHeight = Math.max(minimumHeight, Math.ceil(probe.getBoundingClientRect().height));
+    // 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 = [...stage.querySelectorAll<HTMLElement>('[data-hkm-density="presentation"]')].filter((body) => body.closest("[data-hkm-measurement]") === null);
+    const copies = [...probe.querySelectorAll<HTMLElement>('[data-hkm-density="presentation"]')];
+    for (const [index, copy] of copies.entries()) {
+      const body = bodies[index];
+      if (body === undefined) continue;
+      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);
+      let low = 1;
+      let high = 4;
+      for (let attempt = 0; attempt < 9; attempt += 1) {
+        const candidate = (low + high) / 2;
+        copy.style.setProperty("--hkm-terminal-presentation-size", `${candidate}rem`);
+        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`);
+    }
+    stage.setAttribute("data-hkm-fitted", "");
+  } finally {
+    probe.remove();
+  }
+}
+
+/** Share one measurement lifecycle across surface and walkthrough selectors. */
+function useFittedShowcaseStage(fit: "natural" | "fill", source: unknown, variation = "", minimumHeight = 0) {
+  const stage = useRef<HTMLDivElement>(null);
+  useIsomorphicLayoutEffect(() => {
+    const node = stage.current;
+    if (fit !== "fill" || node === null || typeof ResizeObserver === "undefined") return undefined;
+    // A rem-sized box changes even when both the document and stage are fixed.
+    const fontSentinel = document.createElement("span");
+    fontSentinel.setAttribute("data-hkm-font-sentinel", "");
+    fontSentinel.setAttribute("aria-hidden", "true");
+    fontSentinel.inert = true;
+    fontSentinel.style.cssText = "position:absolute;inline-size:1rem;block-size:1rem;visibility:hidden;pointer-events:none;inset:0 auto auto 0;";
+    node.append(fontSentinel);
+    let previous = "";
+    let disposed = false;
+    const measure = () => {
+      if (disposed) return;
+      const key = `${node.clientWidth}/${getComputedStyle(document.documentElement).fontSize}`;
+      if (key === previous) return;
+      previous = key;
+      fitShowcaseStage(node, minimumHeight);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    observer.observe(document.documentElement);
+    observer.observe(fontSentinel);
+    void document.fonts.ready.then(() => { previous = ""; measure(); });
+    return () => {
+      disposed = true;
+      observer.disconnect();
+      fontSentinel.remove();
+      node.style.removeProperty("--hkm-showcase-fill-height");
+      node.removeAttribute("data-hkm-fitted");
+      for (const body of node.querySelectorAll<HTMLElement>('[data-hkm-density="presentation"]')) body.style.removeProperty("--hkm-terminal-presentation-size");
+    };
+  }, [fit, source, variation, minimumHeight]);
+  return stage;
+}
+
 /**
  * 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.
@@ -329,12 +446,15 @@ export function StepThrough({
   caption,
   className,
   initial,
+  fit = "natural",
   label = "Steps",
   minWidth = 400,
   steps,
   theme,
 }: Readonly<{
   steps: readonly ThroughStep[];
+  /** Fill the tallest natural slide and fit presentation terminals without scaling. */
+  fit?: "natural" | "fill";
   caption?: string;
   initial?: string;
   label?: string;
@@ -343,6 +463,8 @@ export function StepThrough({
   className?: string;
 }>) {
   assertUniqueIds(steps, "StepThrough step");
+  if (fit !== "natural" && fit !== "fill") throw new RangeError("StepThrough fit must be natural or fill.");
+  const stage = useFittedShowcaseStage(fit, steps);
   const captionText = optionalText(caption, "StepThrough");
   const id = useId();
   const [index, setIndex] = useState(() => Math.max(0, steps.findIndex((step) => step.id === initial)));
@@ -365,9 +487,9 @@ export function StepThrough({
   };
 
   return (
-    <figure aria-label={`Illustration: ${label.toLowerCase()}`} className={joinMockupClasses("hkm-showcase", "hkm-steps", className)} data-hkm-theme={theme} data-nosnippet="">
+    <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-step-tabs" role="tablist">
+        <div aria-label={label} className="hkm-tabs hkm-folder-tabs hkm-step-tabs" role="tablist">
           {steps.map((entry, position) => (
             <button
               aria-controls={`${id}-panel-${entry.id}`}
@@ -392,7 +514,7 @@ export function StepThrough({
           ))}
         </div>
       </div>
-      <div className="hkm-showcase-stage hkm-step-stage">
+      <div className="hkm-showcase-stage hkm-step-stage" ref={stage}>
         {steps.map((entry, position) => (
           <div
             aria-hidden={position !== current}
@@ -404,7 +526,9 @@ export function StepThrough({
             key={entry.id}
             role="tabpanel"
           >
-            <FitToWidth minWidth={minWidth}>{entry.render({ animated: position === current && animated, theme })}</FitToWidth>
+            {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>

package/src/mockups/frames.tsx

@@ -106,13 +106,15 @@ const TERMINAL_KINDS = new Set(["input", "output", "comment"]);
  * Commands and output are sample text; keep them to commands the product ships.
  */
 export function TerminalFrame({
+  density = "standard",
   fade,
   height,
   lines,
   prompt = "$",
   title = "Terminal",
   ...root
-}: MockupRootProps & Readonly<{ title?: string; prompt?: string; lines: readonly TerminalLine[]; height?: number; fade?: boolean }>) {
+}: MockupRootProps & Readonly<{ title?: string; prompt?: string; lines: readonly TerminalLine[]; height?: number; fade?: boolean; density?: "standard" | "presentation" }>) {
+  if (density !== "standard" && density !== "presentation") throw new RangeError("Terminal density must be standard or presentation.");
   for (const line of lines) {
     if (!TERMINAL_KINDS.has(line.kind)) throw new TypeError(`Unknown terminal line kind ${JSON.stringify(line.kind)}.`);
   }
@@ -125,7 +127,7 @@ export function TerminalFrame({
           <span className="hkm-title">{title}</span>
           <span />
         </div>
-        <div className="hkm-page hkm-terminal-body" data-hkm-fade={fades ? "" : undefined} style={pageStyle(height)}>
+        <div className="hkm-page hkm-terminal-body" data-hkm-density={density === "presentation" ? density : undefined} data-hkm-fade={fades ? "" : undefined} style={pageStyle(height)}>
           <div className="hkm-terminal-lines">
             {lines.map((line, index) => (
               <div className="hkm-terminal-line" data-hkm-beat={line.beat} data-hkm-line={line.kind} data-hkm-tone={line.tone} key={index}>

package/src/mockups.css

@@ -333,6 +333,15 @@
     font-variant-ligatures: none;
   }
 
+  .hkm-root .hkm-terminal-body[data-hkm-density="presentation"] {
+    font-size: var(--hkm-terminal-presentation-size, 1rem);
+    line-height: 1.5;
+  }
+
+  .hkm-root .hkm-terminal-body[data-hkm-density="presentation"] .hkm-terminal-line {
+    min-block-size: 1.5em;
+  }
+
   .hkm-root .hkm-terminal-lines {
     display: grid;
     gap: 1px;
@@ -2503,24 +2512,66 @@
     }
   }
 
-  /* Folder tabs share an edge with the stable-height walkthrough stage. */
-  .hkm-showcase.hkm-steps { gap: 0; }
+  /* Folder tabs share an edge with each showcase panel. */
+  .hkm-showcase:is(.hkm-steps, .hkm-modes) { gap: 0; }
   .hkm-showcase.hkm-steps .hkm-showcase-controls { padding: 0; border: 0; border-radius: 0; background: transparent; }
-  .hkm-showcase.hkm-steps .hkm-step-tabs { gap: 6px; margin: 0; padding: 0; border: 0; position: relative; z-index: 1; }
-  .hkm-showcase.hkm-steps .hkm-tab { min-block-size: 48px; padding: 12px 18px; border: 1px solid var(--hkm-sc-line); border-block-end: 0; border-radius: 12px 12px 0 0; background: var(--hkm-sc-field); color: var(--hkm-sc-muted); }
-  .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"] { background: var(--hkm-sc-bg); color: var(--hkm-sc-fg); }
-  .hkm-showcase.hkm-steps .hkm-tab:hover { color: var(--hkm-sc-fg); }
+  .hkm-showcase .hkm-folder-tabs { gap: 6px; margin: 0; padding: 0; border: 0; position: relative; z-index: 1; }
+  .hkm-showcase .hkm-folder-tabs .hkm-tab { min-block-size: 48px; padding: 12px 18px; border: 1px solid var(--hkm-sc-line); border-block-end: 0; border-radius: 12px 12px 0 0; background: var(--hkm-sc-field); color: var(--hkm-sc-muted); }
+  .hkm-showcase .hkm-folder-tabs .hkm-tab[aria-selected="true"] { background: var(--hkm-sc-bg); color: var(--hkm-sc-fg); }
+  .hkm-showcase .hkm-folder-tabs .hkm-tab:hover { color: var(--hkm-sc-fg); }
   .hkm-showcase.hkm-steps .hkm-step-stage { display: grid; border: 1px solid var(--hkm-sc-line); border-radius: 0 12px 12px 12px; background: var(--hkm-sc-bg); margin-block-start: -1px; overflow: clip; }
+  .hkm-showcase.hkm-modes .hkm-mode-panel { border: 1px solid var(--hkm-sc-line); border-radius: 12px; background: var(--hkm-sc-bg); overflow: clip; }
+  .hkm-showcase.hkm-modes .hkm-folder-tabs + .hkm-mode-panel { border-start-start-radius: 0; margin-block-start: -1px; }
+  .hkm-showcase.hkm-modes .hkm-showcase-controls { border: 0; border-block-end: 1px solid var(--hkm-sc-line); border-radius: 0; }
+  .hkm-mode-stage { display: grid; min-inline-size: 0; }
+  .hkm-mode-surface { grid-area: 1 / 1; min-inline-size: 0; align-self: start; }
+  .hkm-mode-surface[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
+  .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root,
+  .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root > .hkm-window { border: 0; border-radius: 0; box-shadow: none; }
   .hkm-step-panel { grid-area: 1 / 1; min-inline-size: 0; align-self: start; }
   .hkm-step-panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
   .hkm-showcase.hkm-steps .hkm-step-panel .hkm-root { border-start-start-radius: 0; border-start-end-radius: 0; box-shadow: none; }
+  /* Fill uses the tallest complete slide as its natural height. It does not
+   * scale text or ask fitted font sizes to determine the stage height. */
+  .hkm-showcase[data-hkm-fit="fill"] [data-hkm-measuring] .hkm-page { max-block-size: none; }
+
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) {
+    block-size: var(--hkm-showcase-fill-height, auto);
+  }
+
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) :is(.hkm-step-panel, .hkm-mode-surface) {
+    align-self: stretch;
+    min-block-size: 0;
+  }
+
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) :is(.hkm-fit, .hkm-fit-inner, .hkm-root, .hkm-root > .hkm-window) {
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) .hkm-window:has(> .hkm-page) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) .hkm-window > .hkm-page {
+    flex: 1 1 auto;
+    block-size: auto;
+    min-block-size: 0;
+    max-block-size: none;
+  }
+
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) :is(.hkm-title-bar, .hkm-browser-bar) {
+    flex: none;
+  }
+
   .hkm-showcase.hkm-steps .hkm-step-nav { justify-content: space-between; padding-block-start: 18px; gap: 16px; }
   .hkm-showcase.hkm-steps .hkm-step-button { display: inline-grid; place-items: center; min-inline-size: 52px; min-block-size: 52px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--hkm-sc-fg); }
   .hkm-showcase.hkm-steps .hkm-step-button[data-hkm-primary] { background: var(--hkm-sc-fg); color: var(--hkm-sc-bg); }
   .hkm-showcase.hkm-steps .hkm-step-button:disabled { color: var(--hkm-sc-muted); background: transparent; }
   .hkm-showcase.hkm-steps .hkm-step-button[data-hkm-primary]:disabled { background: var(--hkm-sc-field); }
   .hkm-showcase.hkm-steps .hkm-step-announcement { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-  .hkm-showcase.hkm-steps .hkm-showcase-caption { margin-block-start: 1rem; }
+  .hkm-showcase:is(.hkm-steps, .hkm-modes) .hkm-showcase-caption { margin-block-start: 1rem; }
 
   /* ---------------------------------------------------------------- */
   /* Motion                                                           */

package/src/product-marketing-foundation.css

@@ -415,6 +415,13 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   z-index: 30;
 }
 
+/* Intrinsic media sizing is shared with raw HTML card icons. */
+.hraness-marketing-card__icon > :is(img, svg) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: contain;
+}
+
 .hraness-marketing-card-row,
 .hraness-marketing-interface-grid,
 .hraness-marketing-trust-grid,
@@ -439,6 +446,11 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   display: none;
 }
 
+/* Supplemental proof belongs below both columns of a split hero. */
+.hraness-marketing-hero[data-layout="split"] > :where(.hraness-marketing-proof, .hraness-marketing-facts) {
+  grid-column: 1 / -1;
+}
+
 /* Keep all meaningful hero content above the inert decorative backdrop. */
 .hraness-marketing-hero > :where(.hraness-marketing-hero__copy, .hraness-marketing-hero__frame, .hraness-marketing-proof, .hraness-marketing-facts) {
   position: relative;

package/src/product-marketing.css

@@ -707,6 +707,17 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   padding-block: var(--hraness-marketing-hero-space, clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem));
 }
 
+.hraness-marketing-hero[data-layout="split"] {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+}
+
+@media (min-width: 64rem) {
+  .hraness-marketing-hero[data-layout="split"] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
+  }
+}
+
 /* Hero backdrops are retired. Hand-authored markup that still ships the old
  * backdrop hooks paints nothing and takes no space. */
 .hraness-marketing-hero-backdrop {
@@ -1698,6 +1709,49 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   box-shadow: var(--hraness-marketing-surface-shadow);
 }
 
+.hraness-marketing-card[data-layout="icon"] {
+  display: grid;
+  grid-template-columns: 3.5rem minmax(0, 1fr);
+  align-items: center;
+  gap: 1rem;
+  padding: 1.125rem;
+}
+
+.hraness-marketing-card[data-layout="icon"]:focus-visible {
+  outline: 2px solid var(--hraness-marketing-ink);
+  outline-offset: 3px;
+}
+
+.hraness-marketing-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 3.5rem;
+  block-size: 3.5rem;
+  min-inline-size: 0;
+  pointer-events: none;
+}
+
+.hraness-marketing-card__icon > :is(img, svg) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: contain;
+}
+
+.hraness-marketing-card__copy {
+  display: grid;
+  align-content: center;
+  min-inline-size: 0;
+  gap: 0.35rem;
+}
+
+.hraness-marketing-card[data-layout="icon"] .hraness-marketing-card__meta {
+  overflow: visible;
+  min-block-size: 0;
+  max-block-size: none;
+  overflow-wrap: anywhere;
+}
+
 .hraness-marketing-card__art {
   display: flex;
   flex: 0 0 auto;
@@ -2266,6 +2320,11 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   }
 }
 
+/* Supplemental proof belongs below both columns of a split hero. */
+.hraness-marketing-hero[data-layout="split"] > :where(.hraness-marketing-proof, .hraness-marketing-facts) {
+  grid-column: 1 / -1;
+}
+
 /* Keep all meaningful hero content above the inert decorative backdrop. */
 .hraness-marketing-hero > :where(.hraness-marketing-hero__copy, .hraness-marketing-hero__frame, .hraness-marketing-proof, .hraness-marketing-facts) {
   position: relative;