@hraness/design-kit 0.34.0 → 0.35.1

package/dist/{chunk-h4k7yv6x.js → chunk-6ts4955n.js}

@@ -1,3 +1,28 @@
+import {
+  highlightCode
+} from "./chunk-he8eznb1.js";
+
+// src/react/syntax-code.tsx
+import { jsx } from "react/jsx-runtime";
+function SyntaxCode({
+  className,
+  code,
+  language,
+  styles
+}) {
+  const highlighted = highlightCode(code, language, styles === undefined ? {} : {
+    styles
+  });
+  const classes = className === undefined ? highlighted.className : `${highlighted.className} ${className}`;
+  return /* @__PURE__ */ jsx("code", {
+    className: classes,
+    "data-language": highlighted.language,
+    dangerouslySetInnerHTML: {
+      __html: highlighted.html
+    }
+  });
+}
+
 // src/react/platform-install.stylex.ts
 import * as stylex from "@stylexjs/stylex";
 var ink = "var(--hraness-marketing-ink, var(--foreground, CanvasText))";
@@ -118,11 +143,12 @@ var platformInstallStyles = {
   },
   command: {
     kWkggS: "xvpcapb x9yvj25",
-    kVAM5u: "x1ls9zlr x1w1tqly",
+    kVAM5u: "xtxfw9o x1w1tqly",
     kaIpWk: "x1yt6v20",
     ksu8eU: "x1y0btm7",
     kMzoRj: "xmkeg23",
     kB7OPa: "x9f619",
+    kGVxlE: "x1s13key xwaqzdf",
     k1xSpc: "xrvj5dj",
     k7Eaqz: "xeuugli",
     kVQacm: "xb3r6kr",
@@ -188,38 +214,6 @@ var platformInstallStyles = {
     kmVPX3: "x1717udv",
     $$css: true
   },
-  copy: {
-    kGNEyG: "x6s0dn4",
-    kysU6D: "xjyslct",
-    kWkggS: "xf7cb96 x3oli7v xnwy5bs",
-    kVAM5u: "x1ls9zlr x1ylmb6m",
-    kaIpWk: "x116uinm",
-    ksu8eU: "x1y0btm7",
-    kMzoRj: "xmkeg23",
-    kB7OPa: "x9f619",
-    kMwMTN: "x1p5laik x1ggml12",
-    kkrTdU: "x1ypdohk",
-    k1xSpc: "x3nfvp2 x1cfwndu",
-    kmuXW: "x2lah0s",
-    kMv6JI: "x1vnz01h",
-    kGuDYH: "x1dcheo9",
-    k63SB2: "xk50ysn",
-    kOIVth: "x73f2yu",
-    kLWn49: "xo5v014",
-    kogj98: "x1ghz6dp",
-    kAzted: "x1in32aq x1rewkhn",
-    kI3sdo: "x1a2a7pz x11dsm9b",
-    kInvED: "x1y3gkto",
-    k8WAf4: "x1267ecw",
-    kg3NbH: "x1f6otoe",
-    $$css: true
-  },
-  copyIcon: {
-    kZKoxP: "x1at03k5",
-    kmuXW: "x2lah0s",
-    kzqmXN: "x2tfi8i",
-    $$css: true
-  },
   alternatives: {
     k1xSpc: "xrvj5dj",
     kOIVth: "x1uma3xh",
@@ -236,6 +230,14 @@ var platformInstallStyles = {
     kogj98: "x1ghz6dp",
     $$css: true
   },
+  commandNote: {
+    kLZC3w: "x1h3am7x x19dwuzr",
+    kPef9Z: "x13fuv20",
+    kEafiO: "x178xt8z",
+    k8WAf4: "x8fiyw4",
+    kg3NbH: "x1fi0nvg",
+    $$css: true
+  },
   unavailable: {
     kVAM5u: "x1ls9zlr x1w1tqly",
     kaIpWk: "x1yt6v20",
@@ -341,8 +343,6 @@ var hooks = {
   code: "hraness-platform-install__code",
   command: "hraness-platform-install__command",
   commandBar: "hraness-platform-install__command-bar",
-  copy: "hraness-platform-install__copy",
-  copyIcon: "hraness-platform-install__copy-icon",
   icon: "hraness-platform-icon",
   markSymbols: "hraness-platform-install__marks",
   note: "hraness-platform-install__note",
@@ -365,4 +365,4 @@ function platformInstallClassName(parts, caller) {
   return [...hookNames, atoms, caller].filter(Boolean).join(" ");
 }
 
-export { platformInstallClassName };
+export { SyntaxCode, platformInstallClassName };

package/dist/chunk-gmea6p0d.js

@@ -0,0 +1,13 @@
+// src/diagrams.ts
+var 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'
+});
+
+export { diagramMetrics };

package/dist/{chunk-mr1vdcjq.js → chunk-tzd7177a.js}

@@ -1,6 +1,7 @@
 import {
+  SyntaxCode,
   platformInstallClassName
-} from "./chunk-h4k7yv6x.js";
+} from "./chunk-6ts4955n.js";
 import {
   detectPlatform,
   isKnownPlatformId,
@@ -12,7 +13,102 @@ import {
 
 // src/react/platform-install.tsx
 import { useCallback, useEffect, useId, useRef, useState } from "react";
+
+// src/react/setup-copy-button.stylex.ts
+import * as stylex from "@stylexjs/stylex";
+var setupCopyButtonStyles = {
+  button: {
+    kGNEyG: "x6s0dn4",
+    kysU6D: "xjyslct",
+    kWkggS: "x17tv4j5 x1lf5oka xnwy5bs",
+    kVAM5u: "x3ugid2 x1ylmb6m",
+    kaIpWk: "x116uinm",
+    ksu8eU: "x1y0btm7",
+    kMzoRj: "xmkeg23",
+    kB7OPa: "x9f619",
+    kMwMTN: "xm06a53 x1ggml12",
+    kkrTdU: "x1ypdohk",
+    k1xSpc: "x3nfvp2 x1cfwndu",
+    kmuXW: "x2lah0s",
+    kMv6JI: "xtls1wf",
+    kGuDYH: "x1dcheo9",
+    k63SB2: "xk50ysn",
+    kOIVth: "x1neeqzj",
+    kjj79g: "xl56j7k",
+    kLWn49: "xo5v014",
+    kogj98: "x1ghz6dp",
+    kAzted: "xgbkey0",
+    kI3sdo: "x1a2a7pz xr5lfjo",
+    kInvED: "x1hl8ikr",
+    kmVPX3: "x1i4hug3",
+    $$css: true
+  },
+  icon: {
+    kZKoxP: "x1l36t39",
+    kmuXW: "x2lah0s",
+    kzqmXN: "xcdlrvm",
+    $$css: true
+  }
+};
+function setupCopyButtonClassName(part, caller) {
+  return [`hraness-setup-copy__${part}`, stylex.props(setupCopyButtonStyles[part]).className, caller].filter(Boolean).join(" ");
+}
+
+// src/react/setup-copy-button.tsx
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function SetupCopyButton({
+  className,
+  iconClassName,
+  onCopy,
+  state,
+  subject,
+  failedLabel = "Copy failed"
+}) {
+  return /* @__PURE__ */ jsxs("button", {
+    "aria-busy": state === "copying" || undefined,
+    "aria-label": `${state === "copied" ? "Copied" : "Copy"} ${subject}`,
+    className: setupCopyButtonClassName("button", className),
+    "data-copy-state": state,
+    disabled: state === "copying",
+    onClick: onCopy,
+    type: "button",
+    children: [
+      /* @__PURE__ */ jsx("svg", {
+        "aria-hidden": "true",
+        className: setupCopyButtonClassName("icon", iconClassName),
+        fill: "none",
+        focusable: "false",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        viewBox: "0 0 24 24",
+        children: state === "copied" ? /* @__PURE__ */ jsx("path", {
+          d: "M5 12.5l4.5 4.5L19 7.5"
+        }) : /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx("rect", {
+              height: "12",
+              rx: "2",
+              width: "12",
+              x: "8",
+              y: "8"
+            }),
+            /* @__PURE__ */ jsx("path", {
+              d: "M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx("span", {
+        children: state === "copied" ? "Copied" : state === "copying" ? "Copying" : state === "failed" ? failedLabel : "Copy"
+      })
+    ]
+  });
+}
+
+// src/react/platform-install.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var copyResetMilliseconds = 2000;
 function assertTargets(platforms, defaultPlatform) {
   if (platforms.length === 0)
@@ -81,17 +177,17 @@ function PlatformMarkSymbols({
   ids,
   symbolId
 }) {
-  return /* @__PURE__ */ jsx("svg", {
+  return /* @__PURE__ */ jsx2("svg", {
     "aria-hidden": "true",
     className: platformInstallClassName(["markSymbols"]),
     focusable: "false",
     xmlns: "http://www.w3.org/2000/svg",
     children: ids.map((id) => {
       const mark = platformMark(id);
-      return /* @__PURE__ */ jsx("symbol", {
+      return /* @__PURE__ */ jsx2("symbol", {
         id: symbolId(id),
         viewBox: mark.viewBox,
-        children: /* @__PURE__ */ jsx("path", {
+        children: /* @__PURE__ */ jsx2("path", {
           d: mark.path
         })
       }, id);
@@ -102,7 +198,7 @@ function PlatformMarkUse({
   platform,
   symbolId
 }) {
-  return /* @__PURE__ */ jsx("svg", {
+  return /* @__PURE__ */ jsx2("svg", {
     "aria-hidden": "true",
     className: platformInstallClassName(["icon"]),
     "data-platform": platform,
@@ -110,95 +206,58 @@ function PlatformMarkUse({
     focusable: "false",
     viewBox: platformMark(platform).viewBox,
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx("use", {
+    children: /* @__PURE__ */ jsx2("use", {
       href: `#${symbolId}`
     })
   });
 }
-function CopyGlyph({
-  copied
-}) {
-  return /* @__PURE__ */ jsx("svg", {
-    "aria-hidden": "true",
-    className: platformInstallClassName(["copyIcon"]),
-    fill: "none",
-    focusable: "false",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    viewBox: "0 0 24 24",
-    children: copied ? /* @__PURE__ */ jsx("path", {
-      d: "M5 12.5l4.5 4.5L19 7.5"
-    }) : /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx("rect", {
-          height: "12",
-          rx: "2",
-          width: "12",
-          x: "8",
-          y: "8"
-        }),
-        /* @__PURE__ */ jsx("path", {
-          d: "M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"
-        })
-      ]
-    })
-  });
-}
 function CommandBlock({
   caption,
   command,
   copyKey,
   onCopy,
+  note,
   status,
   subject
 }) {
   const preRef = useRef(null);
   const state = status?.key === copyKey ? status.ok ? "copied" : "failed" : "idle";
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs2("div", {
     className: platformInstallClassName(["command"]),
     "data-copy-state": state,
     children: [
-      /* @__PURE__ */ jsxs("div", {
+      /* @__PURE__ */ jsxs2("div", {
         className: platformInstallClassName(["commandBar", (caption === undefined || caption === "") && "commandBarEmpty"]),
         children: [
-          /* @__PURE__ */ jsx("span", {
+          /* @__PURE__ */ jsx2("span", {
             className: platformInstallClassName(["shell"]),
             children: caption
           }),
-          /* @__PURE__ */ jsxs("button", {
-            className: platformInstallClassName(["copy"]),
-            "data-copy-state": state,
-            onClick: () => onCopy(copyKey, command, subject, preRef.current),
-            type: "button",
-            children: [
-              /* @__PURE__ */ jsx(CopyGlyph, {
-                copied: state === "copied"
-              }),
-              /* @__PURE__ */ jsx("span", {
-                children: state === "copied" ? "Copied" : state === "failed" ? "Select to copy" : "Copy"
-              }),
-              /* @__PURE__ */ jsxs("span", {
-                className: platformInstallClassName(["status"]),
-                children: [
-                  " ",
-                  subject
-                ]
-              })
-            ]
+          /* @__PURE__ */ jsx2(SetupCopyButton, {
+            className: "hraness-platform-install__copy",
+            iconClassName: "hraness-platform-install__copy-icon",
+            failedLabel: "Select to copy",
+            onCopy: () => onCopy(copyKey, command, subject, preRef.current),
+            state,
+            subject
           })
         ]
       }),
-      /* @__PURE__ */ jsx("pre", {
+      /* @__PURE__ */ jsx2("pre", {
         "aria-label": subject,
         className: platformInstallClassName(["pre"]),
         ref: preRef,
         tabIndex: 0,
-        children: /* @__PURE__ */ jsx("code", {
+        children: /* @__PURE__ */ jsx2(SyntaxCode, {
           className: platformInstallClassName(["code"]),
-          children: command
+          code: command,
+          language: "shell",
+          styles: "classes"
         })
+      }),
+      note === undefined ? null : /* @__PURE__ */ jsx2("div", {
+        className: platformInstallClassName(["note", "commandNote"]),
+        children: note
       })
     ]
   });
@@ -283,25 +342,25 @@ function PlatformInstall({
     event.preventDefault();
     choose(target, true);
   };
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs2("div", {
     className: platformInstallClassName(["root"], className),
     "data-hraness-platform-install": "",
     "data-selected-platform": current,
     "data-selection-source": source,
     id,
     children: [
-      /* @__PURE__ */ jsx(PlatformMarkSymbols, {
+      /* @__PURE__ */ jsx2(PlatformMarkSymbols, {
         ids,
         symbolId
       }),
-      /* @__PURE__ */ jsx("div", {
+      /* @__PURE__ */ jsx2("div", {
         "aria-label": label,
         className: platformInstallClassName(["tablist"]),
         onKeyDown,
         role: "tablist",
         children: platforms.map((target) => {
           const isSelected = target.id === current;
-          return /* @__PURE__ */ jsxs("button", {
+          return /* @__PURE__ */ jsxs2("button", {
             "aria-controls": `${baseId}-panel-${target.id}`,
             "aria-selected": isSelected,
             className: platformInstallClassName(["tab", isSelected && "tabSelected"]),
@@ -319,11 +378,11 @@ function PlatformInstall({
             tabIndex: isSelected ? 0 : -1,
             type: "button",
             children: [
-              /* @__PURE__ */ jsx(PlatformMarkUse, {
+              /* @__PURE__ */ jsx2(PlatformMarkUse, {
                 platform: target.id,
                 symbolId: symbolId(target.id)
               }),
-              /* @__PURE__ */ jsx("span", {
+              /* @__PURE__ */ jsx2("span", {
                 className: platformInstallClassName(["tabLabel"]),
                 children: labelOf(target)
               })
@@ -334,7 +393,7 @@ function PlatformInstall({
       platforms.map((target) => {
         const name = labelOf(target);
         const alternatives = target.alternatives ?? [];
-        return /* @__PURE__ */ jsx("div", {
+        return /* @__PURE__ */ jsx2("div", {
           "aria-labelledby": `${baseId}-tab-${target.id}`,
           className: platformInstallClassName(["panel"]),
           "data-availability": target.unavailable === true ? "unavailable" : "available",
@@ -342,38 +401,39 @@ function PlatformInstall({
           hidden: target.id !== current,
           id: `${baseId}-panel-${target.id}`,
           role: "tabpanel",
-          children: /* @__PURE__ */ jsxs("div", {
+          children: /* @__PURE__ */ jsxs2("div", {
             className: platformInstallClassName(["panelBody"]),
             children: [
-              /* @__PURE__ */ jsxs("p", {
+              /* @__PURE__ */ jsxs2("p", {
                 className: platformInstallClassName(["panelLabel"]),
                 children: [
-                  /* @__PURE__ */ jsx(PlatformMarkUse, {
+                  /* @__PURE__ */ jsx2(PlatformMarkUse, {
                     platform: target.id,
                     symbolId: symbolId(target.id)
                   }),
-                  /* @__PURE__ */ jsx("span", {
+                  /* @__PURE__ */ jsx2("span", {
                     children: name
                   })
                 ]
               }),
-              target.unavailable === true ? /* @__PURE__ */ jsx("div", {
+              target.unavailable === true ? /* @__PURE__ */ jsx2("div", {
                 className: platformInstallClassName(["unavailable"]),
                 children: target.unavailableNote
               }) : null,
-              target.command === undefined ? null : /* @__PURE__ */ jsx(CommandBlock, {
+              target.command === undefined ? null : /* @__PURE__ */ jsx2(CommandBlock, {
                 caption: target.shell,
                 command: target.command,
                 copyKey: `${target.id}:primary`,
                 onCopy: copy,
+                note: target.note,
                 status,
                 subject: `${name} install command`
               }),
-              alternatives.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
+              alternatives.length === 0 ? null : /* @__PURE__ */ jsx2("ul", {
                 "aria-label": `Other ways to install on ${name}`,
                 className: platformInstallClassName(["alternatives"]),
-                children: alternatives.map((alternative, index) => /* @__PURE__ */ jsx("li", {
-                  children: /* @__PURE__ */ jsx(CommandBlock, {
+                children: alternatives.map((alternative, index) => /* @__PURE__ */ jsx2("li", {
+                  children: /* @__PURE__ */ jsx2(CommandBlock, {
                     caption: [alternative.label, alternative.shell].filter(Boolean).join(" · "),
                     command: alternative.command,
                     copyKey: `${target.id}:${index}`,
@@ -383,7 +443,7 @@ function PlatformInstall({
                   })
                 }, `${alternative.label}-${index}`))
               }),
-              target.note === undefined ? null : /* @__PURE__ */ jsx("div", {
+              target.command !== undefined || target.note === undefined ? null : /* @__PURE__ */ jsx2("div", {
                 className: platformInstallClassName(["note"]),
                 children: target.note
               })
@@ -391,7 +451,7 @@ function PlatformInstall({
           })
         }, target.id);
       }),
-      /* @__PURE__ */ jsx("p", {
+      /* @__PURE__ */ jsx2("p", {
         "aria-live": "polite",
         className: platformInstallClassName(["status"]),
         role: "status",
@@ -401,4 +461,4 @@ function PlatformInstall({
   });
 }
 
-export { PlatformInstall };
+export { SetupCopyButton, PlatformInstall };

package/dist/index.js

@@ -64,7 +64,10 @@ import {
   themeFor,
   typeScale,
   typography
-} from "./chunk-4d79eskk.js";
+} from "./chunk-c80g58j1.js";
+import {
+  diagramMetrics
+} from "./chunk-gmea6p0d.js";
 import {
   detectPlatform,
   isKnownPlatformId,
@@ -189,6 +192,7 @@ export {
   fontFallbacks,
   escapeArticleHtml,
   elevation,
+  diagramMetrics,
   detectPlatform,
   designThemes,
   designThemeStorageKey,

package/dist/mockups/client.js

@@ -335,7 +335,7 @@ function StepThrough({
           className: "hkm-tabs hkm-step-tabs",
           role: "tablist",
           children: steps.map((entry, position) => /* @__PURE__ */ jsxs("button", {
-            "aria-controls": `${id}-panel`,
+            "aria-controls": `${id}-panel-${entry.id}`,
             "aria-selected": position === current,
             className: "hkm-tab",
             "data-hkm-done": position < current ? "" : undefined,
@@ -363,32 +363,52 @@ function StepThrough({
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        "aria-labelledby": `${id}-tab-${step.id}`,
-        className: "hkm-showcase-stage",
-        "data-hkm-animated": animated ? "" : undefined,
-        id: `${id}-panel`,
-        role: "tabpanel",
-        children: /* @__PURE__ */ jsx(FitToWidth, {
-          minWidth,
-          children: step.render({
-            animated,
-            theme
+        className: "hkm-showcase-stage hkm-step-stage",
+        children: steps.map((entry, position) => /* @__PURE__ */ jsx("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,
+          role: "tabpanel",
+          children: /* @__PURE__ */ jsx(FitToWidth, {
+            minWidth,
+            children: entry.render({
+              animated: position === current && animated,
+              theme
+            })
           })
-        })
+        }, entry.id))
       }),
       /* @__PURE__ */ jsxs("div", {
         className: "hkm-step-nav",
         children: [
           /* @__PURE__ */ jsx("button", {
+            "aria-label": "Back",
             className: "hkm-step-button",
             disabled: current === 0,
             onClick: () => go(current - 1),
             type: "button",
-            children: "Back"
+            children: /* @__PURE__ */ jsx("svg", {
+              "aria-hidden": "true",
+              focusable: "false",
+              height: "28",
+              viewBox: "0 0 24 24",
+              width: "28",
+              children: /* @__PURE__ */ jsx("path", {
+                d: "m14.5 5-7 7 7 7",
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.75"
+              })
+            })
           }),
           /* @__PURE__ */ jsxs("span", {
             "aria-live": "polite",
-            className: "hkm-showcase-status",
+            className: "hkm-showcase-status hkm-step-announcement",
             children: [
               "Step ",
               current + 1,
@@ -398,12 +418,27 @@ function StepThrough({
             ]
           }),
           /* @__PURE__ */ jsx("button", {
+            "aria-label": "Next",
             className: "hkm-step-button",
             "data-hkm-primary": "",
             disabled: current === steps.length - 1,
             onClick: () => go(current + 1),
             type: "button",
-            children: "Next"
+            children: /* @__PURE__ */ jsx("svg", {
+              "aria-hidden": "true",
+              focusable: "false",
+              height: "28",
+              viewBox: "0 0 24 24",
+              width: "28",
+              children: /* @__PURE__ */ jsx("path", {
+                d: "m9.5 5 7 7-7 7",
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.75"
+              })
+            })
           })
         ]
       }),