@hraness/design-kit 0.35.0 → 0.35.1

package/dist/stylex.css

@@ -712,10 +712,6 @@
     padding-block: .25rem;
   }
 
-  .x1267ecw {
-    padding-block: .35rem;
-  }
-
   .x1bilvtl {
     padding-block: .375rem;
   }
@@ -728,6 +724,10 @@
     padding-block: .5rem;
   }
 
+  .x8fiyw4 {
+    padding-block: .65rem;
+  }
+
   .xo0yzjp {
     padding-block: .75rem;
   }
@@ -816,10 +816,6 @@
     padding-inline: .625rem;
   }
 
-  .x1f6otoe {
-    padding-inline: .65rem;
-  }
-
   .x1ryrjj2 {
     padding-inline: .75rem;
   }
@@ -1283,10 +1279,6 @@
     background-color: color-mix(in srgb,var(--foreground) 8%,transparent);
   }
 
-  .xf7cb96 {
-    background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 4%,var(--hraness-marketing-surface, var(--surface, Canvas)));
-  }
-
   .xy1scu2 {
     background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 5%,var(--hraness-marketing-background, var(--background, Canvas)));
   }
@@ -2587,6 +2579,10 @@
     grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--_hraness-marketing-grid-track, 18rem)),1fr));
   }
 
+  .xe92ajh {
+    grid-template-columns: repeat(var(--_hraness-agent-target-wide-columns, var(--_hraness-agent-target-columns, 1)),minmax(0,1fr));
+  }
+
   .x3g07o8 {
     grid-template-columns: repeat(var(--hraness-marketing-fact-columns, 4),minmax(0,1fr));
   }
@@ -3769,10 +3765,6 @@
     background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 6%,transparent);
   }
 
-  .x3oli7v:hover {
-    background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 9%,var(--hraness-marketing-surface, var(--surface, Canvas)));
-  }
-
   .xjoriyk:hover {
     background-color: color-mix(in srgb,var(--hraness-marketing-related-tone, var(--hraness-marketing-ink)) 6%,transparent);
   }
@@ -4376,6 +4368,10 @@
     border-right-width: 2px;
   }
 
+  .x1h3am7x {
+    border-top-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 12%,transparent);
+  }
+
   .x1v8p93f {
     border-top-color: #0000;
   }
@@ -4392,6 +4388,10 @@
     border-top-style: solid;
   }
 
+  .x178xt8z {
+    border-top-width: 1px;
+  }
+
   .xamhcws {
     border-top-width: 2px;
   }
@@ -4404,10 +4404,6 @@
     bottom: 0;
   }
 
-  .x1at03k5 {
-    height: .95rem;
-  }
-
   .xqtp20y {
     height: 0;
   }
@@ -4540,10 +4536,6 @@
     min-height: 250px;
   }
 
-  .x1in32aq {
-    min-height: 2rem;
-  }
-
   .x13gjtz1 {
     min-height: 3.5rem;
   }
@@ -4628,10 +4620,6 @@
     top: var(--hraness-design-procedural-ripple-y);
   }
 
-  .x2tfi8i {
-    width: .95rem;
-  }
-
   .xnalus7 {
     width: 0;
   }
@@ -5863,6 +5851,18 @@
   }
 }
 
+@container hraness-agent-setup (width >= 20rem) {
+  .x6fuqh4.x6fuqh4 {
+    --_hraness-agent-target-columns: 2;
+  }
+}
+
+@container hraness-agent-setup (width >= 34rem) {
+  .x1ii36b5.x1ii36b5 {
+    --_hraness-agent-target-wide-columns: 3;
+  }
+}
+
 @container hraness-platform-install (width <= 30rem) {
   .x1rp0mr4.x1rp0mr4 {
     --_hraness-platform-install-narrow-tab-font-size: .8125rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "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",
@@ -300,6 +300,8 @@
     "src/agent-setup.ts",
     "src/react/agent-setup-prompt.tsx",
     "src/react/agent-setup-prompt.stylex.ts",
+    "src/react/setup-copy-button.tsx",
+    "src/react/setup-copy-button.stylex.ts",
     "AGENT_SETUP.md",
     "src/react/marketing-comparison.tsx",
     "src/react/marketing-comparison.stylex.ts",

package/portfolio-inventory.json

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

package/src/react/agent-setup-prompt.stylex.ts

@@ -89,39 +89,19 @@ export const agentSetupStyles = stylex.create({
     ":hover": { color: ink },
     "::marker": { content: '""' },
   },
-  copy: {
-    alignItems: "center",
-    appearance: "none",
-    backgroundColor: { default: background, ":hover": surface, [forced]: "ButtonFace" },
-    borderColor: { default: line, [forced]: "ButtonText" },
-    borderRadius: "0.5rem",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    boxSizing: "border-box",
-    color: { default: ink, [forced]: "ButtonText" },
-    cursor: "pointer",
-    display: { default: "inline-flex", [noScript]: "none" },
-    flexShrink: 0,
-    fontFamily: "inherit",
-    fontSize: "0.8125rem",
-    gap: "0.4rem",
-    justifyContent: "center",
-    lineHeight: 1,
-    margin: 0,
-    minBlockSize: "2.75rem",
-    outline: { default: "none", ":focus-visible": `2px solid ${focus}` },
-    outlineOffset: "2px",
-    padding: "0.65rem 0.8rem",
-  },
   copyOverlay: {
     insetBlockEnd: "0.5rem",
     insetInlineEnd: "0.5rem",
     position: "absolute",
   },
-  copyIcon: { blockSize: "1rem", flexShrink: 0, inlineSize: "1rem" },
   targets: { display: "grid", gap: "0.6rem", minInlineSize: 0 },
   targetsLabel: { color: { default: muted, [forced]: "CanvasText" }, fontSize: "0.8125rem", fontWeight: 500, margin: 0 },
   targetList: { display: "grid", gap: "0.45rem", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 10rem), 1fr))", listStyle: "none", margin: 0, padding: 0 },
+  targetGrid: {
+    gridTemplateColumns: "repeat(var(--_hraness-agent-target-wide-columns, var(--_hraness-agent-target-columns, 1)), minmax(0, 1fr))",
+    "--_hraness-agent-target-columns": { default: null, "@container hraness-agent-setup (min-width: 20rem)": "2" },
+    "--_hraness-agent-target-wide-columns": { default: null, "@container hraness-agent-setup (min-width: 34rem)": "3" },
+  },
   target: {
     alignItems: "center",
     backgroundColor: { default: surface, ":hover": background, [forced]: "ButtonFace" },

package/src/react/agent-setup-prompt.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useId, useRef, useState, type KeyboardEvent, ty
 import type { ProviderMarkDescriptor } from "../provider-marks.js";
 import { agentSetupClassName as cx } from "./agent-setup-prompt.stylex.js";
 import { ProviderMark } from "./provider-mark.js";
+import { SetupCopyButton } from "./setup-copy-button.js";
 import { SyntaxCode } from "./syntax-code.js";
 
 export interface AgentSetupTarget {
@@ -20,6 +21,8 @@ export interface AgentSetupPromptProps {
   readonly prompt: string;
   readonly label?: string;
   readonly targets?: readonly AgentSetupTarget[];
+  /** Keep provider actions below the prompt, or place them beside it in wide containers. */
+  readonly targetsPlacement?: "responsive" | "below";
   readonly className?: string;
   /** Runs once after a successful copy; callback failures do not change copy feedback. */
   readonly onCopied?: () => void;
@@ -186,21 +189,8 @@ function useCopy(text: string, subject: string, fallback: () => HTMLElement | nu
   return { state, message, copy };
 }
 
-function CopyGlyph({ copied }: Readonly<{ copied: boolean }>) {
-  return (
-    <svg aria-hidden="true" className={cx(["copyIcon"])} fill="none" focusable="false" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24">
-      {copied ? <path d="M5 12.5l4.5 4.5L19 7.5" /> : <><rect height="12" rx="2" width="12" x="8" y="8" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></>}
-    </svg>
-  );
-}
-
 function CopyButton({ copy, overlay = false, state, subject }: Readonly<{ copy: () => Promise<boolean>; overlay?: boolean; state: CopyState; subject: string }>) {
-  return (
-    <button aria-busy={state === "copying" || undefined} aria-label={`${state === "copied" ? "Copied" : "Copy"} ${subject}`} className={cx(["copy", overlay && "copyOverlay"])} data-copy-state={state} disabled={state === "copying"} onClick={() => { void copy(); }} type="button">
-      <CopyGlyph copied={state === "copied"} />
-      <span>{state === "copied" ? "Copied" : state === "copying" ? "Copying" : state === "failed" ? "Copy failed" : "Copy"}</span>
-    </button>
-  );
+  return <SetupCopyButton className={cx([overlay && "copyOverlay"], "hraness-agent-setup__copy")} iconClassName="hraness-agent-setup__copyIcon" onCopy={() => { void copy(); }} state={state} subject={subject} />;
 }
 
 function CopyStatus({ children }: Readonly<{ children: ReactNode }>) {
@@ -231,10 +221,11 @@ function reserveTargetTab(owner: Window | null): Window | null {
 }
 
 /** A quiet prompt preview with the complete source behind a native disclosure. */
-export function AgentSetupPrompt({ prompt, label = "Agent setup", targets = [], className, onCopied }: AgentSetupPromptProps) {
+export function AgentSetupPrompt({ prompt, label = "Agent setup", targets = [], targetsPlacement = "responsive", className, onCopied }: AgentSetupPromptProps) {
   assertText(prompt, "Agent setup prompt");
   assertText(label, "Agent setup label");
   assertEntries(targets, "Agent setup target");
+  if (targetsPlacement !== "responsive" && targetsPlacement !== "below") throw new RangeError("Unsupported agent setup targets placement.");
   for (const target of targets) {
     assertHref(target.href);
     if (target.mode !== undefined && target.mode !== "prefill" && target.mode !== "copy-and-open") throw new RangeError("Unsupported agent setup target mode.");
@@ -313,8 +304,8 @@ export function AgentSetupPrompt({ prompt, label = "Agent setup", targets = [],
   }, []);
 
   return (
-    <section aria-label={label} className={cx(["root"], className)} data-hraness-agent-setup-prompt="">
-      <div className={cx(["layout", targets.length > 0 && "withTargets"])}>
+    <section aria-label={label} className={cx(["root"], className)} data-hraness-agent-setup-prompt="" data-targets-placement={targetsPlacement}>
+      <div className={cx(["layout", targets.length > 0 && targetsPlacement === "responsive" && "withTargets"])}>
         <div className={cx(["frame"])} data-copy-state={state}>
           <div className={cx(["preview"])} hidden={expanded}>
             <pre aria-label={`${label} preview`} className={cx(["pre", "previewText"])}>{prompt}</pre>
@@ -330,7 +321,7 @@ export function AgentSetupPrompt({ prompt, label = "Agent setup", targets = [],
         {targets.length === 0 ? null : (
           <aside aria-labelledby={`${id}-targets`} className={cx(["targets"])}>
             <p className={cx(["targetsLabel"])} id={`${id}-targets`}>Open in</p>
-            <ul className={cx(["targetList"])}>
+            <ul className={cx(["targetList", targetsPlacement === "below" && "targetGrid"])}>
               {targets.map((target) => (
                 <li key={target.id}>
                   <a aria-busy={target.mode === "copy-and-open" && state === "copying" || undefined} aria-disabled={target.mode === "copy-and-open" && state === "copying" || undefined} aria-label={target.mode === "copy-and-open" ? `Copy prompt and open ${target.label}` : undefined} className={cx(["target"])} data-agent-target={target.id} data-agent-target-mode={target.mode ?? "prefill"} href={target.href} onAuxClick={target.mode === "copy-and-open" ? (event) => { copyAndOpen(event, target); } : undefined} onClick={target.mode === "copy-and-open" ? (event) => { copyAndOpen(event, target); } : undefined} rel="noopener noreferrer" target="_blank">

package/src/react/design-gallery.tsx

@@ -401,6 +401,7 @@ export function DesignSystemGallery({
           <MarketingSection heading="Ask your agent to set it up." headingId="gallery-agent-setup" headingLevel={3} label="Agent setup">
             <AgentSetupPrompt
               label="Relay agent setup"
+              targetsPlacement="below"
               prompt={"Install Relay from https://relay.example/install.sh.\nRead the project instructions before making changes.\nRun relay init in this workspace and create a job named sample.\nRun the job, then show me its log."}
               targets={[
                 { href: "https://claude.ai/new", id: "claude", label: "Claude", mark: "claudecode", mode: "copy-and-open" },

package/src/react/platform-install.stylex.ts

@@ -221,40 +221,6 @@ export const platformInstallStyles = stylex.create({
     fontSize: "inherit",
     padding: 0,
   },
-  copy: {
-    alignItems: "center",
-    appearance: "none",
-    backgroundColor: {
-      default: `color-mix(in srgb, ${ink} 4%, ${surface})`,
-      ":hover": `color-mix(in srgb, ${ink} 9%, ${surface})`,
-      [forced]: "ButtonFace",
-    },
-    borderColor: { default: line, [forced]: "ButtonText" },
-    borderRadius: "0.5rem",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    boxSizing: "border-box",
-    color: { default: ink, [forced]: "ButtonText" },
-    cursor: "pointer",
-    display: { default: "inline-flex", [noScript]: "none" },
-    flexShrink: 0,
-    fontFamily: textFont,
-    fontSize: "0.8125rem",
-    fontWeight: 500,
-    gap: "0.35rem",
-    lineHeight: 1,
-    margin: 0,
-    minBlockSize: { default: "2rem", "@media (pointer: coarse)": "2.75rem" },
-    outline: { default: "none", ":focus-visible": `2px solid ${focusRing}` },
-    outlineOffset: "1px",
-    paddingBlock: "0.35rem",
-    paddingInline: "0.65rem",
-  },
-  copyIcon: {
-    blockSize: "0.95rem",
-    flexShrink: 0,
-    inlineSize: "0.95rem",
-  },
   alternatives: {
     display: "grid",
     gap: "0.6rem",
@@ -269,6 +235,13 @@ export const platformInstallStyles = stylex.create({
     lineHeight: 1.5,
     margin: 0,
   },
+  commandNote: {
+    borderBlockStartColor: { default: line, [forced]: "CanvasText" },
+    borderBlockStartStyle: "solid",
+    borderBlockStartWidth: "1px",
+    paddingBlock: "0.65rem",
+    paddingInline: "0.95rem",
+  },
   unavailable: {
     borderColor: { default: line, [forced]: "CanvasText" },
     borderRadius: "0.75rem",
@@ -359,8 +332,6 @@ const hooks: Partial<Record<Part, string>> = {
   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",

package/src/react/platform-install.tsx

@@ -11,6 +11,7 @@ import {
   platformMark,
   type PlatformId,
 } from "../platforms.js";
+import { SetupCopyButton } from "./setup-copy-button.js";
 import { SyntaxCode } from "./syntax-code.js";
 import { platformInstallClassName as cx } from "./platform-install.stylex.js";
 
@@ -29,7 +30,7 @@ interface PlatformInstallTargetBase {
   readonly label?: string;
   /** Where the command runs, such as "Terminal" or "PowerShell". */
   readonly shell?: string;
-  /** A short qualifier under the command, such as "Apple silicon" or "x86_64 and ARM64, glibc 2.34+". */
+  /** A short qualifier in the primary command footer, such as "Apple silicon" or "Requires Bun 1.3.14+". */
   readonly note?: ReactNode;
   readonly alternatives?: readonly PlatformInstallAlternative[];
 }
@@ -167,22 +168,12 @@ function PlatformMarkUse({ platform, symbolId }: Readonly<{ platform: PlatformId
   );
 }
 
-function CopyGlyph({ copied }: Readonly<{ copied: boolean }>) {
-  return (
-    <svg aria-hidden="true" className={cx(["copyIcon"])} fill="none" focusable="false" stroke="currentColor"
-      strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24">
-      {copied
-        ? <path d="M5 12.5l4.5 4.5L19 7.5" />
-        : <><rect height="12" rx="2" width="12" x="8" y="8" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></>}
-    </svg>
-  );
-}
-
 function CommandBlock({
   caption,
   command,
   copyKey,
   onCopy,
+  note,
   status,
   subject,
 }: Readonly<{
@@ -190,6 +181,7 @@ function CommandBlock({
   command: string;
   copyKey: string;
   onCopy: (key: string, command: string, subject: string, pre: HTMLElement | null) => void;
+  note?: ReactNode;
   status: CopyStatus | null;
   subject: string;
 }>) {
@@ -199,21 +191,20 @@ function CommandBlock({
     <div className={cx(["command"])} data-copy-state={state}>
       <div className={cx(["commandBar", (caption === undefined || caption === "") && "commandBarEmpty"])}>
         <span className={cx(["shell"])}>{caption}</span>
-        <button
-          className={cx(["copy"])}
-          data-copy-state={state}
-          onClick={() => onCopy(copyKey, command, subject, preRef.current)}
-          type="button"
-        >
-          <CopyGlyph copied={state === "copied"} />
-          <span>{state === "copied" ? "Copied" : state === "failed" ? "Select to copy" : "Copy"}</span>
-          <span className={cx(["status"])}> {subject}</span>
-        </button>
+        <SetupCopyButton
+          className="hraness-platform-install__copy"
+          iconClassName="hraness-platform-install__copy-icon"
+          failedLabel="Select to copy"
+          onCopy={() => onCopy(copyKey, command, subject, preRef.current)}
+          state={state}
+          subject={subject}
+        />
       </div>
       {/* Focusable so keyboard users can scroll a long command sideways. */}
       <pre aria-label={subject} className={cx(["pre"])} ref={preRef} tabIndex={0}>
         <SyntaxCode className={cx(["code"])} code={command} language="shell" styles="classes" />
       </pre>
+      {note === undefined ? null : <div className={cx(["note", "commandNote"])}>{note}</div>}
     </div>
   );
 }
@@ -357,6 +348,7 @@ export function PlatformInstall({
                   command={target.command}
                   copyKey={`${target.id}:primary`}
                   onCopy={copy}
+                  note={target.note}
                   status={status}
                   subject={`${name} install command`}
                 />
@@ -377,7 +369,7 @@ export function PlatformInstall({
                   ))}
                 </ul>
               )}
-              {target.note === undefined ? null : <div className={cx(["note"])}>{target.note}</div>}
+              {target.command !== undefined || target.note === undefined ? null : <div className={cx(["note"])}>{target.note}</div>}
             </div>
           </div>
         );

package/src/react/setup-copy-button.stylex.ts

@@ -0,0 +1,39 @@
+import * as stylex from "@stylexjs/stylex";
+
+const ink = "var(--foreground, CanvasText)";
+const surface = "var(--surface, Canvas)";
+const background = "var(--background, Canvas)";
+const forced = "@media (forced-colors: active)";
+
+export const setupCopyButtonStyles = stylex.create({
+  button: {
+    alignItems: "center",
+    appearance: "none",
+    backgroundColor: { default: background, ":hover": surface, [forced]: "ButtonFace" },
+    borderColor: { default: `color-mix(in srgb, ${ink} 15%, transparent)`, [forced]: "ButtonText" },
+    borderRadius: "0.5rem",
+    borderStyle: "solid",
+    borderWidth: "1px",
+    boxSizing: "border-box",
+    color: { default: ink, [forced]: "ButtonText" },
+    cursor: "pointer",
+    display: { default: "inline-flex", "@media (scripting: none)": "none" },
+    flexShrink: 0,
+    fontFamily: "var(--font-text, ui-sans-serif, system-ui, sans-serif)",
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    gap: "0.4rem",
+    justifyContent: "center",
+    lineHeight: 1,
+    margin: 0,
+    minBlockSize: "2.75rem",
+    outline: { default: "none", ":focus-visible": "2px solid var(--focus, Highlight)" },
+    outlineOffset: "2px",
+    padding: "0.65rem 0.8rem",
+  },
+  icon: { blockSize: "1rem", flexShrink: 0, inlineSize: "1rem" },
+});
+
+export function setupCopyButtonClassName(part: keyof typeof setupCopyButtonStyles, caller?: string): string {
+  return [`hraness-setup-copy__${part}`, stylex.props(setupCopyButtonStyles[part]).className, caller].filter(Boolean).join(" ");
+}

package/src/react/setup-copy-button.tsx

@@ -0,0 +1,20 @@
+import { setupCopyButtonClassName as cx } from "./setup-copy-button.stylex.js";
+
+/** Presentation only: each setup composition retains its clipboard and recovery behavior. */
+export function SetupCopyButton({ className, iconClassName, onCopy, state, subject, failedLabel = "Copy failed" }: Readonly<{
+  className?: string;
+  iconClassName?: string;
+  onCopy: () => void;
+  state: "idle" | "copying" | "copied" | "failed";
+  subject: string;
+  failedLabel?: string;
+}>) {
+  return (
+    <button aria-busy={state === "copying" || undefined} aria-label={`${state === "copied" ? "Copied" : "Copy"} ${subject}`} className={cx("button", className)} data-copy-state={state} disabled={state === "copying"} onClick={onCopy} type="button">
+      <svg aria-hidden="true" className={cx("icon", iconClassName)} fill="none" focusable="false" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24">
+        {state === "copied" ? <path d="M5 12.5l4.5 4.5L19 7.5" /> : <><rect height="12" rx="2" width="12" x="8" y="8" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></>}
+      </svg>
+      <span>{state === "copied" ? "Copied" : state === "copying" ? "Copying" : state === "failed" ? failedLabel : "Copy"}</span>
+    </button>
+  );
+}