@hraness/design-kit 0.33.0 → 0.34.0

package/dist/stylex.css

@@ -2431,10 +2431,6 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
   }
 
-  .x1p797x9 {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
-  }
-
   .x1vfedg7 {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
   }

package/package.json

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

package/src/product-marketing.css

@@ -1513,11 +1513,13 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 
 .hraness-marketing-interface-grid,
 .hraness-marketing-trust-grid {
+  --hraness-marketing-grid-columns: initial;
+  --_hraness-marketing-grid-track: max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
   display: grid;
   align-items: stretch;
   margin: 0;
   gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr));
 }
 
 .hraness-marketing-interface-grid > *,

package/src/react/design-gallery.tsx

@@ -436,7 +436,7 @@ export function DesignSystemGallery({
             <MarketingSectionLabel size="body">Reference</MarketingSectionLabel>
             <p>Consumer-owned content can include <a href="#gallery-install">links</a> and <code>inline code</code>.</p>
           </MarketingSection>
-          <MarketingInterfaceGrid heading="Choose your interface." headingId="gallery-marketing-interfaces" headingLevel={3} label="Interfaces" interfaces={[
+          <MarketingInterfaceGrid columns={2} heading="Choose your interface." headingId="gallery-marketing-interfaces" headingLevel={3} label="Interfaces" interfaces={[
             { label: "CLI", summary: "Run a named job.", example: <MarketingCodeBlock code="relay run job-01" /> },
             { label: "SDK", summary: "Use typed application code." },
           ]} />
@@ -444,7 +444,7 @@ export function DesignSystemGallery({
             { art: <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="8" /></svg>, href: "#marketing", title: "Grok 4.7", meta: "First observed 21 September 2026." },
             { art: <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><rect x="4" y="4" width="16" height="16" rx="4" /></svg>, href: "#gallery-install", title: "GLM 5.3 Flash", meta: "First observed 26 August 2026. Early DeepSWE coverage on OpenRouter." },
           ]} />
-          <MarketingTrustBoundary heading="What leaves your machine." headingId="gallery-marketing-trust" headingLevel={3} label="Boundary" items={[
+          <MarketingTrustBoundary columns={2} heading="What leaves your machine." headingId="gallery-marketing-trust" headingLevel={3} label="Boundary" items={[
             { label: "Stays local", detail: "Source files and credentials." },
             { label: "Shared", detail: "Only the logs you choose to sync." },
           ]} />
@@ -520,6 +520,7 @@ export function DesignSystemGallery({
             ]}
           />
           <MarketingRelated
+            columns={2}
             groups={[
               {
                 heading: "Sibling tools",
@@ -538,6 +539,7 @@ export function DesignSystemGallery({
                 ],
               },
               {
+                columns: 1,
                 heading: "Shared infrastructure",
                 headingId: "design-gallery-related-infra",
                 items: [

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

@@ -2174,18 +2174,22 @@ export const marketingStyles = stylex.create({
     "line-height": "1.5"
   },
   "interface_grid": {
+    "--hraness-marketing-grid-columns": "initial",
+    "--_hraness-marketing-grid-track": "max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)))",
     "display": "grid",
     "align-items": "stretch",
     "margin": "0",
     "gap": "1rem",
-    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))"
+    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr))"
   },
   "trust_grid": {
+    "--hraness-marketing-grid-columns": "initial",
+    "--_hraness-marketing-grid-track": "max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)))",
     "display": "grid",
     "align-items": "stretch",
     "margin": "0",
     "gap": "1rem",
-    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))"
+    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr))"
   },
   "interface": {
     "display": "grid",
@@ -4458,7 +4462,7 @@ const gridColumns = {
 
 /** Explicit finite columns compose static atoms, including the existing media rules. */
 export function marketingColumnClassName(
-  hook: "hraness-marketing-facts" | "hraness-marketing-pillars" | "hraness-marketing-stats__list" | "hraness-marketing-card-row" | "hraness-marketing-primitives__list",
+  hook: "hraness-marketing-facts" | "hraness-marketing-pillars" | "hraness-marketing-stats__list" | "hraness-marketing-card-row" | "hraness-marketing-primitives__list" | "hraness-marketing-interface-grid" | "hraness-marketing-trust-grid",
   caller: string | undefined,
   columns: MarketingColumnCount | undefined,
 ): string {
@@ -4467,7 +4471,7 @@ export function marketingColumnClassName(
   }
   const columnRecipe = columns === undefined ? undefined
     : (hook === "hraness-marketing-pillars" ? pillarColumns
-      : hook === "hraness-marketing-card-row" || hook === "hraness-marketing-primitives__list" ? gridColumns
+      : hook === "hraness-marketing-card-row" || hook === "hraness-marketing-primitives__list" || hook === "hraness-marketing-interface-grid" || hook === "hraness-marketing-trust-grid" ? gridColumns
         : factColumns)[columns];
   return [hook, stylex.props(recipes[hook].default, columnRecipe).className, caller]
     .filter((value) => value !== undefined && value.length > 0).join(" ");

package/src/react/product-marketing.tsx

@@ -1148,6 +1148,7 @@ export interface MarketingInterface {
 
 export function MarketingInterfaceGrid({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1157,6 +1158,8 @@ export function MarketingInterfaceGrid({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns; cards wrap within the available container width. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1173,7 +1176,7 @@ export function MarketingInterfaceGrid({
       id={id}
     >
       <MarketingCollectionHeader {...{ heading, headingId, headingLevel, label, summary }} prefix="interfaces" />
-      <div className={classNames("hraness-marketing-interface-grid")}>
+      <div className={marketingColumnClassName("hraness-marketing-interface-grid", undefined, columns)}>
         {interfaces.map((entry) => (
           <article className={classNames("hraness-marketing-interface")} key={entry.label}>
             <Heading
@@ -1198,6 +1201,7 @@ export interface MarketingTrustItem {
 
 export function MarketingTrustBoundary({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1207,6 +1211,8 @@ export function MarketingTrustBoundary({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns; cards wrap within the available container width. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1223,7 +1229,7 @@ export function MarketingTrustBoundary({
       id={id}
     >
       <MarketingCollectionHeader {...{ heading, headingId, headingLevel, label, summary }} prefix="trust" />
-      <dl className={classNames("hraness-marketing-trust-grid")}>
+      <dl className={marketingColumnClassName("hraness-marketing-trust-grid", undefined, columns)}>
         {items.map((item) => (
           <div className={classNames("hraness-marketing-trust-item")} key={item.label}>
             <dt className={classNames("hraness-marketing-trust-item__label")}>{item.label}</dt>
@@ -1497,6 +1503,8 @@ export interface MarketingRelatedProduct {
 }
 
 export interface MarketingRelatedGroup {
+  /** Maximum columns for this group, overriding the section default. */
+  readonly columns?: MarketingColumnCount;
   /** Heading naming this tier of siblings, rendered one level below the section heading. */
   readonly heading: string;
   readonly headingId: string;
@@ -1539,6 +1547,7 @@ type MarketingRelatedBody =
 /** Linked cards for sibling products: each shows the product's mark, name, and one-line description. */
 export function MarketingRelated({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1549,6 +1558,8 @@ export function MarketingRelated({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns for each card row; a group can override it. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1557,6 +1568,7 @@ export function MarketingRelated({
   summary?: string;
 }> &
   MarketingRelatedBody) {
+  const defaultColumnProps = columns === undefined ? {} : { columns };
   return (
     <section
       aria-labelledby={headingId}
@@ -1574,7 +1586,7 @@ export function MarketingRelated({
       />
       {groups === undefined
         ? (
-          <MarketingCardRow>
+          <MarketingCardRow {...defaultColumnProps}>
             <MarketingRelatedCards items={items} level={childHeadingLevel(headingLevel)} />
           </MarketingCardRow>
         )
@@ -1592,7 +1604,7 @@ export function MarketingRelated({
                 ? null
                 : <p className={classNames("hraness-marketing-related__group-summary")}>{group.summary}</p>}
             </div>
-            <MarketingCardRow ariaLabel={group.heading}>
+            <MarketingCardRow ariaLabel={group.heading} {...(group.columns === undefined ? defaultColumnProps : { columns: group.columns })}>
               <MarketingRelatedCards items={group.items} level={childHeadingLevel(childHeadingLevel(headingLevel))} />
             </MarketingCardRow>
           </div>