@hraness/design-kit 0.36.1 → 0.36.2

package/dist/stylex.css

@@ -2203,6 +2203,14 @@
     filter: saturate(1.08);
   }
 
+  .x1kfky9y {
+    flex-basis: 10rem;
+  }
+
+  .x1vhnul8 {
+    flex-basis: 3.5rem;
+  }
+
   .xdl72j9 {
     flex-basis: auto;
   }
@@ -2535,10 +2543,6 @@
     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;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.36.1",
+  "version": "0.36.2",
   "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.36.1"
+      "version": "0.36.2"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/mockups/client.tsx

@@ -93,7 +93,7 @@ export function FitToWidth({ children, className, minWidth = 400 }: Readonly<{ c
 
   const scaled = fit !== null && fit.scale < 1;
   return (
-    <div className={joinMockupClasses("hkm-fit", className)} ref={outer} style={scaled ? { height: fit.height } : undefined}>
+    <div className={joinMockupClasses("hkm-fit", className)} data-hkm-min-width={minWidth} ref={outer} style={scaled ? { height: fit.height } : undefined}>
       <div
         className="hkm-fit-inner"
         data-hkm-scaled={scaled ? "" : undefined}
@@ -350,10 +350,48 @@ export type ThroughStep = Readonly<{
   render: (state: Readonly<{ animated: boolean; theme: MockupTheme | undefined }>) => ReactNode;
 }>;
 
+/** Fill owns the outer shell and its top-level frames, never nested width-fit graphics. */
+function fillFrames(stage: HTMLElement): HTMLElement[] {
+  const frames: HTMLElement[] = [];
+  for (const panel of stage.querySelectorAll<HTMLElement>(":scope > .hkm-step-panel, :scope > .hkm-mode-surface")) {
+    const fit = panel.querySelector<HTMLElement>(":scope > .hkm-fit");
+    if (fit === null) continue;
+    for (const root of fit.querySelectorAll<HTMLElement>(".hkm-root")) {
+      const enclosingRoot = root.parentElement?.closest(".hkm-root");
+      if (root.closest(".hkm-fit") === fit && (enclosingRoot === null || enclosingRoot === undefined || !fit.contains(enclosingRoot))) frames.push(root);
+    }
+  }
+  return frames;
+}
+
+function presentationBodies(stage: HTMLElement): HTMLElement[] {
+  return fillFrames(stage).flatMap((frame) => [...frame.querySelectorAll<HTMLElement>(':scope > .hkm-window > [data-hkm-density="presentation"]')]);
+}
+
+/** Detached clones have no ResizeObserver. Recreate explicit graphic fits from the inside out. */
+function measureNestedFits(stage: HTMLElement): void {
+  const fits = [...stage.querySelectorAll<HTMLElement>("[data-hkm-min-width]")].filter((fit) => fit.parentElement?.classList.contains("hkm-step-panel") !== true && fit.parentElement?.classList.contains("hkm-mode-surface") !== true);
+  for (const fit of fits) {
+    const inner = fit.querySelector<HTMLElement>(":scope > .hkm-fit-inner");
+    if (inner === null) continue;
+    fit.style.removeProperty("height");
+    inner.style.removeProperty("transform");
+    inner.style.width = `${Math.max(fit.clientWidth, Number(fit.dataset.hkmMinWidth))}px`;
+  }
+  for (const fit of fits.reverse()) {
+    const inner = fit.querySelector<HTMLElement>(":scope > .hkm-fit-inner");
+    if (inner === null || inner.offsetWidth <= 0) continue;
+    const scale = Math.min(1, fit.clientWidth / inner.offsetWidth);
+    fit.style.height = `${inner.offsetHeight * scale}px`;
+    inner.style.transform = `scale(${scale})`;
+  }
+}
+
 /** 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;
+  for (const frame of fillFrames(stage)) frame.setAttribute("data-hkm-fill-frame", "");
   const probe = stage.cloneNode(true) as HTMLDivElement;
   probe.setAttribute("aria-hidden", "true");
   probe.setAttribute("inert", "");
@@ -362,7 +400,7 @@ function fitShowcaseStage(stage: HTMLDivElement, minimumHeight: number): void {
   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 body of presentationBodies(probe)) body.style.removeProperty("--hkm-terminal-presentation-size");
   for (const fixture of probe.querySelectorAll<HTMLElement>("[data-hkm-measurement]")) fixture.hidden = false;
   // Even a reduced-motion reset can introduce tiny all-property transitions.
   // Synchronous measurements need final styles throughout the owned copy,
@@ -373,6 +411,7 @@ function fitShowcaseStage(stage: HTMLDivElement, minimumHeight: number): void {
   }
   owner.append(probe);
   try {
+    measureNestedFits(probe);
     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.
@@ -380,8 +419,8 @@ function fitShowcaseStage(stage: HTMLDivElement, minimumHeight: number): void {
     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"]')];
+    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;
@@ -438,7 +477,8 @@ function useFittedShowcaseStage(fit: "natural" | "fill", source: unknown, variat
       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");
+      for (const body of presentationBodies(node)) body.style.removeProperty("--hkm-terminal-presentation-size");
+      for (const frame of fillFrames(node)) frame.removeAttribute("data-hkm-fill-frame");
     };
   }, [fit, source, variation, minimumHeight]);
   return stage;

package/src/mockups.css

@@ -2533,35 +2533,37 @@
   .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"] [data-hkm-measuring] [data-hkm-fill-frame] > .hkm-window > .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) {
+  .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) {
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) > :is(.hkm-step-panel, .hkm-mode-surface) > .hkm-fit,
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) > :is(.hkm-step-panel, .hkm-mode-surface) > .hkm-fit > .hkm-fit-inner,
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) :is([data-hkm-fill-frame], [data-hkm-fill-frame] > .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) {
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) [data-hkm-fill-frame] > .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 {
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) [data-hkm-fill-frame] > .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) {
+  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) [data-hkm-fill-frame] > .hkm-window > :is(.hkm-title-bar, .hkm-browser-bar) {
     flex: none;
   }
 

package/src/product-marketing.css

@@ -1710,8 +1710,9 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 }
 
 .hraness-marketing-card[data-layout="icon"] {
-  display: grid;
-  grid-template-columns: 3.5rem minmax(0, 1fr);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
   gap: 1rem;
   padding: 1.125rem;
@@ -1724,6 +1725,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 
 .hraness-marketing-card__icon {
   display: flex;
+  flex: 0 0 3.5rem;
   align-items: center;
   justify-content: center;
   inline-size: 3.5rem;
@@ -1740,6 +1742,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 
 .hraness-marketing-card__copy {
   display: grid;
+  flex: 1 1 10rem;
   align-content: center;
   min-inline-size: 0;
   gap: 0.35rem;

package/src/react/product-marketing.stylex.ts

@@ -2502,8 +2502,9 @@ export const marketingStyles = stylex.create({
     "text-decoration": "none"
   },
   "cardIcon": {
-    "display": "grid",
-    "grid-template-columns": "3.5rem minmax(0, 1fr)",
+    "display": "flex",
+    "flex-direction": "row",
+    "flex-wrap": "wrap",
     "align-items": "center",
     "gap": "1rem",
     "padding": "1.125rem",
@@ -2518,6 +2519,9 @@ export const marketingStyles = stylex.create({
   },
   "card__icon": {
     "display": "flex",
+    "flex-grow": "0",
+    "flex-shrink": "0",
+    "flex-basis": "3.5rem",
     "align-items": "center",
     "justify-content": "center",
     "inline-size": "3.5rem",
@@ -2527,6 +2531,9 @@ export const marketingStyles = stylex.create({
   },
   "card__copy": {
     "display": "grid",
+    "flex-grow": "1",
+    "flex-shrink": "1",
+    "flex-basis": "10rem",
     "align-content": "center",
     "min-inline-size": "0",
     "gap": "0.35rem"