@hraness/design-kit 0.33.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.33.0",
+  "version": "0.35.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",
@@ -126,7 +126,9 @@
     "./testing": {
       "types": "./src/testing.ts",
       "import": "./dist/testing.js"
-    }
+    },
+    "./marketing-comparison.css": "./src/marketing-comparison.css",
+    "./marketing-diagram.css": "./src/marketing-diagram.css"
   },
   "main": "./dist/index.js",
   "types": "./src/index.ts",
@@ -209,6 +211,8 @@
     "src/react/production-data-preview-notice.stylex.ts",
     "src/react/product-marketing.stylex.ts",
     "src/react/product-marketing.tsx",
+    "src/react/marketing-account.tsx",
+    "src/react/marketing-account.stylex.ts",
     "src/react/route-state.stylex.ts",
     "src/react/route-state.tsx",
     "src/react/server.ts",
@@ -296,7 +300,14 @@
     "src/agent-setup.ts",
     "src/react/agent-setup-prompt.tsx",
     "src/react/agent-setup-prompt.stylex.ts",
-    "AGENT_SETUP.md"
+    "AGENT_SETUP.md",
+    "src/react/marketing-comparison.tsx",
+    "src/react/marketing-comparison.stylex.ts",
+    "src/marketing-comparison.css",
+    "src/diagrams.ts",
+    "src/react/marketing-diagram.tsx",
+    "src/react/marketing-diagram.stylex.ts",
+    "src/marketing-diagram.css"
   ],
   "scripts": {
     "build": "bun run ./scripts/build.ts",

package/portfolio-inventory.json

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

package/src/diagrams.ts

@@ -0,0 +1,11 @@
+/** Shared source-space measurements for diagrams; generators retain layout ownership. */
+export const diagramMetrics = Object.freeze({
+  labelSize: 20,
+  detailSize: 16,
+  strokeWidth: 1.5,
+  arrowheadSize: 6,
+  nodePadding: 24,
+  nodeGap: 48,
+  minimumCanvasWidth: 640,
+  fontFamily: '"Nebula Sans", ui-sans-serif, system-ui, sans-serif',
+});

package/src/index.ts

@@ -274,3 +274,5 @@ export type ThemeColors = {
 export function themeFor(mode: ColorMode): ThemeColors {
   return colors[mode];
 }
+
+export * from "./diagrams.js";

package/src/marketing-comparison.css

@@ -0,0 +1,162 @@
+/* Raw HTML counterpart to the shared MarketingComparison composition. */
+@layer components.hraness-design-kit.legacy {
+.hraness-marketing-comparison {
+  margin: 0;
+  min-inline-size: 0;
+  color: var(--hraness-marketing-ink, var(--foreground));
+  font-family: var(--font-text);
+}
+
+.hraness-marketing-comparison__scroll {
+  overflow-x: auto;
+  max-inline-size: 100%;
+}
+
+.hraness-marketing-comparison__scroll:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 3px;
+}
+
+.hraness-marketing-comparison__table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  text-align: start;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+}
+
+.hraness-marketing-comparison__caption {
+  padding-block-end: 1.25rem;
+  text-align: start;
+  font-size: 1.125rem;
+  font-weight: 550;
+  color: var(--foreground);
+}
+
+.hraness-marketing-comparison__corner {
+  min-inline-size: 9rem;
+  border-block-end: 1px solid var(--line);
+}
+
+.hraness-marketing-comparison__option {
+  padding: 1rem;
+  min-inline-size: 8.5rem;
+  border-block-end: 1px solid var(--line);
+  vertical-align: bottom;
+  font-weight: 600;
+}
+
+.hraness-marketing-comparison__option-label {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.hraness-marketing-comparison__mark {
+  object-fit: contain;
+  flex-shrink: 0;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+}
+
+.hraness-marketing-comparison__row-label {
+  padding: 1rem 1rem 1rem 0;
+  min-inline-size: 9rem;
+  max-inline-size: 15rem;
+  border-block-end: 1px solid var(--line);
+  vertical-align: top;
+  font-weight: 500;
+}
+
+.hraness-marketing-comparison__cell {
+  padding: 1rem;
+  border-block-end: 1px solid var(--line);
+  vertical-align: top;
+}
+
+.hraness-marketing-comparison [data-highlight] {
+  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
+  color: var(--foreground);
+}
+
+@media (forced-colors: active) {
+.hraness-marketing-comparison [data-highlight] {
+  background-color: Canvas;
+}
+}
+
+.hraness-marketing-comparison__value {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.hraness-marketing-comparison__label {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.45rem;
+}
+
+.hraness-marketing-comparison__glyph {
+  flex-shrink: 0;
+  margin-block-start: 0.1rem;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+}
+
+.hraness-marketing-comparison [data-comparison-status="yes"] .hraness-marketing-comparison__glyph {
+  color: var(--hraness-studio-emerald);
+}
+
+@media (forced-colors: active) {
+.hraness-marketing-comparison [data-comparison-status="yes"] .hraness-marketing-comparison__glyph {
+  color: CanvasText;
+}
+}
+
+.hraness-marketing-comparison [data-comparison-status="no"] .hraness-marketing-comparison__glyph {
+  color: var(--muted);
+}
+
+@media (forced-colors: active) {
+.hraness-marketing-comparison [data-comparison-status="no"] .hraness-marketing-comparison__glyph {
+  color: CanvasText;
+}
+}
+
+.hraness-marketing-comparison [data-comparison-status="partial"] .hraness-marketing-comparison__glyph,
+.hraness-marketing-comparison [data-comparison-status="depends"] .hraness-marketing-comparison__glyph,
+.hraness-marketing-comparison [data-comparison-status="optional"] .hraness-marketing-comparison__glyph {
+  color: var(--hraness-studio-amber);
+}
+
+@media (forced-colors: active) {
+.hraness-marketing-comparison [data-comparison-status="partial"] .hraness-marketing-comparison__glyph,
+.hraness-marketing-comparison [data-comparison-status="depends"] .hraness-marketing-comparison__glyph,
+.hraness-marketing-comparison [data-comparison-status="optional"] .hraness-marketing-comparison__glyph {
+  color: CanvasText;
+}
+}
+
+.hraness-marketing-comparison__text {
+  font-variant-numeric: tabular-nums;
+}
+
+.hraness-marketing-comparison__detail {
+  display: block;
+  color: var(--muted);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.45;
+  margin-block-start: 0.2rem;
+  max-inline-size: 26ch;
+}
+
+.hraness-marketing-comparison__note {
+  color: var(--muted);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-block-start: 1rem;
+  max-inline-size: 76ch;
+}
+
+}

package/src/marketing-diagram.css

@@ -0,0 +1,24 @@
+/* SVG source conventions shared by React and generated diagram consumers. */
+@layer components.hraness-design-kit.legacy {
+.hraness-diagram {
+  --diagram-accent: var(--primary);
+  margin: 0;
+  min-inline-size: 0;
+  color: var(--foreground);
+  font-family: var(--font-text);
+}
+.hraness-diagram__scroll { max-inline-size: 100%; overflow-x: auto; }
+.hraness-diagram__scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
+.hraness-diagram__canvas { display: block; inline-size: 100%; min-inline-size: 40rem; block-size: auto; color: var(--diagram-accent); font-family: var(--font-text); font-size: 20px; }
+.hraness-diagram__label { fill: var(--foreground); font-family: var(--font-text); font-size: 20px; font-weight: 500; }
+.hraness-diagram__detail { fill: var(--muted); font-family: var(--font-text); font-size: 16px; font-weight: 400; }
+.hraness-diagram__node { fill: var(--background); stroke: var(--line); stroke-width: 1; }
+.hraness-diagram__connector,
+.hraness-diagram__icon { color: var(--diagram-accent); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.hraness-diagram figcaption { margin-block-start: 1rem; max-inline-size: 76ch; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
+@media (forced-colors: active) {
+  .hraness-diagram { --diagram-accent: CanvasText; }
+  .hraness-diagram__label, .hraness-diagram__detail { fill: CanvasText; }
+  .hraness-diagram__node { fill: Canvas; stroke: CanvasText; }
+}
+}

package/src/mockups/client.tsx

@@ -315,14 +315,15 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
 export type ThroughStep = Readonly<{
   id: string;
   label: string;
-  /** One sentence under the stage that says what this step shows. */
+  /** Optional accessible context; the visual keeps its own explanation. */
   hint?: string;
   render: (state: Readonly<{ animated: boolean; theme: MockupTheme | undefined }>) => ReactNode;
 }>;
 
 /**
- * Walks a flow one step at a time: numbered step tabs, Back and Next buttons,
- * and a live hint. The keyboard model matches `ModeShowcase`.
+ * 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`.
  */
 export function StepThrough({
   caption,
@@ -369,7 +370,7 @@ export function StepThrough({
         <div aria-label={label} className="hkm-tabs hkm-step-tabs" role="tablist">
           {steps.map((entry, position) => (
             <button
-              aria-controls={`${id}-panel`}
+              aria-controls={`${id}-panel-${entry.id}`}
               aria-selected={position === current}
               className="hkm-tab"
               data-hkm-done={position < current ? "" : undefined}
@@ -391,24 +392,31 @@ export function StepThrough({
           ))}
         </div>
       </div>
-      <div
-        aria-labelledby={`${id}-tab-${step.id}`}
-        className="hkm-showcase-stage"
-        data-hkm-animated={animated ? "" : undefined}
-        id={`${id}-panel`}
-        role="tabpanel"
-      >
-        <FitToWidth minWidth={minWidth}>{step.render({ animated, theme })}</FitToWidth>
+      <div className="hkm-showcase-stage hkm-step-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"
+          >
+            <FitToWidth minWidth={minWidth}>{entry.render({ animated: position === current && animated, theme })}</FitToWidth>
+          </div>
+        ))}
       </div>
       <div className="hkm-step-nav">
-        <button className="hkm-step-button" disabled={current === 0} onClick={() => go(current - 1)} type="button">
-          Back
+        <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">
+        <span aria-live="polite" className="hkm-showcase-status hkm-step-announcement">
           Step {current + 1} of {steps.length}{step.hint === undefined ? "" : `. ${step.hint}`}
         </span>
-        <button className="hkm-step-button" data-hkm-primary="" disabled={current === steps.length - 1} onClick={() => go(current + 1)} type="button">
-          Next
+        <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>
       </div>
       {captionText === undefined ? null : (

package/src/mockups.css

@@ -2503,6 +2503,25 @@
     }
   }
 
+  /* Folder tabs share an edge with the stable-height walkthrough stage. */
+  .hkm-showcase.hkm-steps { 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-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-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; }
+  .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; }
+
   /* ---------------------------------------------------------------- */
   /* Motion                                                           */
   /* ---------------------------------------------------------------- */

package/src/plain-publication.css

@@ -37,7 +37,8 @@
   .plain-site.plain-publication
     a:not(.hraness-design-skip-link):is(:hover, :focus-visible)
 ) {
-  text-decoration: underline;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
 }
 
 :where(.plain-site.plain-publication a:not(.hraness-design-skip-link):focus-visible) {
@@ -697,7 +698,8 @@
 
 .plain-site.plain-publication.plain-publication--embedded .plain-publication__byline a {
   color: inherit;
-  text-decoration: underline;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
   text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
   text-decoration-thickness: 1px;
 }
@@ -716,7 +718,8 @@
 }
 
 .plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a {
-  text-decoration: underline;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
   text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
   text-decoration-thickness: 1px;
   text-underline-offset: 0.18em;
@@ -777,7 +780,7 @@
   line-height: 1.5;
 }
 
-.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table) {
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table, .hraness-marketing-comparison__table) {
   inline-size: 100%;
   margin: 1.5rem 0;
   border-collapse: collapse;
@@ -786,7 +789,7 @@
   line-height: 1.5;
 }
 
-.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table) :is(th, td) {
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table, .hraness-marketing-comparison__table) :is(th, td) {
   padding: 0.55rem 0.65rem 0.55rem 0;
   border-top: 1px solid var(--plain-line);
   overflow-wrap: break-word;
@@ -794,7 +797,7 @@
   vertical-align: top;
 }
 
-.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table) thead th {
+.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table, .hraness-marketing-comparison__table) thead th {
   border-top: 0;
   color: var(--plain-muted);
   font-weight: 700;