@hraness/design-kit 0.31.1 → 0.32.0

package/dist/stylex.css

@@ -57,10 +57,30 @@
     padding: .3rem .85rem;
   }
 
+  .xk2ntsi {
+    padding: .4rem .4rem 0 1rem;
+  }
+
   .x3699eh {
     padding: .55rem .9rem;
   }
 
+  .x1xplop1 {
+    padding: .5rem 1rem 1rem;
+  }
+
+  .xde91s7 {
+    padding: .5rem 1rem 4rem;
+  }
+
+  .x1i4hug3 {
+    padding: .65rem .8rem;
+  }
+
+  .xz0q7xm {
+    padding: .6rem .8rem;
+  }
+
   .x19qf9ol {
     padding: .6rem 1.1rem;
   }
@@ -77,10 +97,18 @@
     padding: 0;
   }
 
+  .x194jd1b {
+    padding: 1.1rem 7rem 1rem 1rem;
+  }
+
   .x1dk9mx5 {
     padding: 1.25rem clamp(.8rem, 2vw, 1.5rem);
   }
 
+  .x67o20r {
+    padding: 1rem 1rem 0;
+  }
+
   .x1nn0urv {
     padding: clamp(1.25rem, 2.5vw, 1.75rem);
   }
@@ -208,6 +236,10 @@
     border-bottom: var(--hraness-marketing-surface-rule);
   }
 
+  .x3ugid2 {
+    border-color: color-mix(in srgb,var(--foreground, CanvasText) 15%,transparent);
+  }
+
   .x1agitey {
     border-color: color-mix(in srgb,var(--hraness-design-procedural-ripple-color) 46%,transparent);
   }
@@ -444,6 +476,10 @@
     gap: .3rem 1rem;
   }
 
+  .xbcm6b9 {
+    gap: .3rem;
+  }
+
   .x1rcpt3j {
     gap: .45rem;
   }
@@ -452,6 +488,10 @@
     gap: .4rem;
   }
 
+  .xpraio3 {
+    gap: .55rem;
+  }
+
   .x339ura {
     gap: .5rem 1.25rem;
   }
@@ -788,6 +828,10 @@
     border-radius: .25rem;
   }
 
+  .xr5lfjo:focus-visible {
+    outline: 2px solid var(--focus, Highlight);
+  }
+
   .x11dsm9b:focus-visible {
     outline: 2px solid var(--hraness-marketing-accent, var(--focus, Highlight));
   }
@@ -1195,6 +1239,10 @@
     background-color: var(--_mark-accent);
   }
 
+  .x17tv4j5 {
+    background-color: var(--background, Canvas);
+  }
+
   .x11gw9ax {
     background-color: var(--background);
   }
@@ -1203,6 +1251,10 @@
     background-color: var(--card, var(--surface, #111217));
   }
 
+  .x11tn3as {
+    background-color: var(--foreground, CanvasText);
+  }
+
   .x1uslotl {
     background-color: var(--grid);
   }
@@ -1279,6 +1331,10 @@
     background-color: var(--secondary);
   }
 
+  .xw51l6n {
+    background-color: var(--surface, Canvas);
+  }
+
   .xuvt9l {
     background-color: var(--surface);
   }
@@ -1307,10 +1363,6 @@
     background-image: linear-gradient(142deg, #d8dce7 0, #666d7d 22%, #f4f5f8 43%, #4f5563 67%, #c9ced9 100%);
   }
 
-  .xs51ml9 {
-    background-image: linear-gradient(180deg,#ffffff38,transparent 52%),linear-gradient(160deg,transparent,color-mix(in srgb,var(--_mark-accent) 78%,black));
-  }
-
   .x1hkejs3 {
     background-image: linear-gradient(180deg,#ffffff3d,transparent 48%),linear-gradient(160deg,color-mix(in srgb,var(--_mark-accent) 26%,transparent),color-mix(in srgb,var(--_mark-accent) 6%,transparent) 74%);
   }
@@ -1855,6 +1907,10 @@
     color: var(--_mark-on-accent, #f7f6f2);
   }
 
+  .x19ydol1 {
+    color: var(--background, Canvas);
+  }
+
   .x1gu5z8g {
     color: var(--card-foreground, var(--foreground, currentColor));
   }
@@ -1951,6 +2007,10 @@
     contain: paint;
   }
 
+  .x1w8g7s4 {
+    container-name: hraness-agent-setup;
+  }
+
   .x1bd2tma {
     container-name: hraness-platform-install;
   }
@@ -2059,6 +2119,10 @@
     font-family: inherit;
   }
 
+  .x1nbx2l5 {
+    font-family: var(--font-mono, ui-monospace,monospace);
+  }
+
   .xpw0y0u {
     font-family: var(--font-mono);
   }
@@ -2067,6 +2131,10 @@
     font-family: var(--font-text, system-ui,sans-serif);
   }
 
+  .xtls1wf {
+    font-family: var(--font-text, ui-sans-serif,system-ui,sans-serif);
+  }
+
   .x1d3so1v {
     font-family: var(--font-text);
   }
@@ -2351,10 +2419,18 @@
     grid-template-columns: minmax(0, 1fr) auto;
   }
 
+  .x1mkdm3x {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .x1xdnkkc {
     grid-template-columns: minmax(12rem, .6fr) minmax(0, 1.4fr);
   }
 
+  .x5m93ek {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+  }
+
   .x1p797x9 {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
   }
@@ -2375,6 +2451,10 @@
     grid-template-columns: repeat(var(--hraness-marketing-pillar-columns, 3),minmax(0,1fr));
   }
 
+  .xkewwhh {
+    grid-template-columns: var(--_hraness-agent-setup-columns, minmax(0,1fr));
+  }
+
   .x16p6thf {
     grid-template-rows: auto minmax(0, 1fr);
   }
@@ -2471,6 +2551,10 @@
     inset-block-start: calc(100% + .5rem);
   }
 
+  .xe388cy {
+    inset-inline-end: .5rem;
+  }
+
   .xtijo5x {
     inset-inline-end: 0;
   }
@@ -2595,6 +2679,10 @@
     line-height: 1.6;
   }
 
+  .x11m8ghp {
+    line-height: 1.65;
+  }
+
   .xo5v014 {
     line-height: 1;
   }
@@ -2655,10 +2743,19 @@
     margin-block-start: .8rem;
   }
 
+  .xsyyole {
+    margin-block-start: 1.5rem;
+  }
+
   .xvc5jky {
     margin-inline-start: auto;
   }
 
+  .xn48363 {
+    -webkit-mask-image: linear-gradient(#000 55%, #0000);
+    mask-image: linear-gradient(#000 55%, #0000);
+  }
+
   .x885qll {
     -webkit-mask-image: radial-gradient(#000 8%, #0000 78%);
     mask-image: radial-gradient(#000 8%, #0000 78%);
@@ -2957,10 +3054,18 @@
     outline-offset: -2px;
   }
 
+  .x1v57pqu {
+    outline-offset: -3px;
+  }
+
   .x1y3gkto {
     outline-offset: 1px;
   }
 
+  .x1hl8ikr {
+    outline-offset: 2px;
+  }
+
   .x1ewu8gn {
     outline-offset: 3px;
   }
@@ -3230,6 +3335,10 @@
     white-space: nowrap;
   }
 
+  .x126k92a {
+    white-space: pre-wrap;
+  }
+
   .x1sdyfia {
     white-space: pre;
   }
@@ -3410,6 +3519,14 @@
     background-color: #0000;
   }
 
+  .x1jf9jbc:hover {
+    background-color: var(--background, Canvas);
+  }
+
+  .x1w11x55:hover {
+    background-color: var(--foreground, CanvasText);
+  }
+
   .xr4j8zq:hover {
     background-color: var(--hraness-foil-surface, var(--surface, var(--background, Canvas)));
   }
@@ -3418,6 +3535,10 @@
     background-color: var(--hraness-marketing-surface, var(--surface, Canvas));
   }
 
+  .x1lf5oka:hover {
+    background-color: var(--surface, Canvas);
+  }
+
   .xn3cpwa:hover {
     background-image: none;
   }
@@ -3442,6 +3563,14 @@
     box-shadow: 0 1px 4px color-mix(in srgb,var(--foreground, CanvasText) 12%,transparent);
   }
 
+  .x54addn:hover {
+    color: var(--background, Canvas);
+  }
+
+  .x10zor9s:hover {
+    color: var(--foreground, CanvasText);
+  }
+
   .xucth70:hover {
     color: var(--hraness-marketing-accent-ink);
   }
@@ -3744,7 +3873,16 @@
     .x1e5rwe6.x1e5rwe6 {
       margin-inline-start: calc(-1 * var(--hraness-marketing-gutter));
     }
+  }
+
+  @media (forced-colors: active) {
+    .x1fww0mx.x1fww0mx {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+  }
 
+  @media (width <= 48rem) {
     .x6ri7ij.x6ri7ij {
       max-inline-size: 16ch;
     }
@@ -3982,6 +4120,10 @@
     border-top-width: 2px;
   }
 
+  .x1of4z1n {
+    bottom: .5rem;
+  }
+
   .x1ey2m1c {
     bottom: 0;
   }
@@ -4006,6 +4148,10 @@
     height: 1px;
   }
 
+  .x1l36t39 {
+    height: 1rem;
+  }
+
   .x36qwtl {
     height: 2px;
   }
@@ -4082,6 +4228,14 @@
     margin-bottom: var(--space-2);
   }
 
+  .xz6j1ir {
+    max-height: 10rem;
+  }
+
+  .x1q2tmi7 {
+    max-height: 11rem;
+  }
+
   .x193iq5w {
     max-width: 100%;
   }
@@ -4094,6 +4248,10 @@
     min-height: 2.5rem;
   }
 
+  .xgbkey0 {
+    min-height: 2.75rem;
+  }
+
   .xjjci79 {
     min-height: 250px;
   }
@@ -4102,6 +4260,10 @@
     min-height: 2rem;
   }
 
+  .x13gjtz1 {
+    min-height: 3.5rem;
+  }
+
   .xe8gcm {
     min-height: 3rem;
   }
@@ -4202,6 +4364,10 @@
     width: 1px;
   }
 
+  .xcdlrvm {
+    width: 1rem;
+  }
+
   .x1endk3i {
     width: 64%;
   }
@@ -4391,6 +4557,10 @@
     color: var(--hraness-marketing-muted);
   }
 
+  .x13c0qn1::marker {
+    content: "";
+  }
+
   .x1cpjm7i:before, .x1s928wv:after {
     content: "";
   }
@@ -5337,6 +5507,12 @@
   }
 }
 
+@container hraness-agent-setup (width >= 42rem) {
+  .x18n472x.x18n472x {
+    --_hraness-agent-setup-columns: minmax(0,1fr) minmax(11rem,14rem);
+  }
+}
+
 @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.31.1",
+  "version": "0.32.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",
@@ -292,7 +292,11 @@
     "src/mockups/index.ts",
     "src/mockups/surfaces.tsx",
     "src/mockups.css",
-    "src/testing.ts"
+    "src/testing.ts",
+    "src/agent-setup.ts",
+    "src/react/agent-setup-prompt.tsx",
+    "src/react/agent-setup-prompt.stylex.ts",
+    "AGENT_SETUP.md"
   ],
   "scripts": {
     "build": "bun run ./scripts/build.ts",
@@ -306,7 +310,7 @@
     "browser:install": "bun ./node_modules/playwright-core/cli.js install chromium",
     "test:browser": "bun run test:browser:marketing && bun run test:browser:rest",
     "test:browser:marketing": "bun run ./scripts/product-marketing-browser.ts",
-    "test:browser:rest": "bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts",
+    "test:browser:rest": "bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts && bun run ./scripts/agent-setup-browser.ts",
     "test:package": "bun run ./scripts/package-smoke.ts && bun run ./scripts/mockups-import.ts",
     "kb:refresh": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell refresh --root kb",
     "kb:check:lane": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell check --root kb --no-catalog",

package/portfolio-inventory.json

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

package/src/agent-setup.ts

@@ -0,0 +1,47 @@
+import type { ProviderMarkId } from "./provider-marks.js";
+
+export type ComputerAgentId = "dot" | "grok-bot" | "muse" | "cursor" | "codex-app" | "devin";
+
+/** A documented product entry or a link that fills a composer without sending. */
+export interface AgentSetupDestination {
+  readonly id: ComputerAgentId;
+  readonly label: string;
+  readonly mark: ProviderMarkId;
+  readonly href: string;
+  readonly mode: "prefill" | "copy-and-open";
+  /** Filter cloud computers out when a product needs the user's local machine. */
+  readonly host: "local" | "cloud";
+}
+
+export interface AgentSetupTargetOptions {
+  /** Use prompt-free entry links when a product keeps its prompt out of URLs. */
+  readonly prefill?: boolean;
+}
+
+/** Cursor's documented maximum; longer prompts use copy and an ordinary entry link. */
+export const MAX_AGENT_SETUP_URL = 10_000;
+
+/**
+ * Product prompts stay with their callers. These destinations are shared by
+ * install pages; capability and URL sources are recorded in AGENT_SETUP.md.
+ * None of these actions sends a prompt or starts work automatically.
+ */
+export function agentSetupTargets(
+  prompt: string,
+  options: AgentSetupTargetOptions = {},
+): readonly AgentSetupDestination[] {
+  if (typeof prompt !== "string" || prompt.trim() === "") throw new RangeError("Agent setup prompt must contain text.");
+  const encoded = options.prefill === false ? "" : encodeURIComponent(prompt);
+  const prefill = (href: string, entry: string) => options.prefill !== false && href.length <= MAX_AGENT_SETUP_URL
+    ? { href, mode: "prefill" as const }
+    : { href: entry, mode: "copy-and-open" as const };
+  const codex = prefill(`codex://new?prompt=${encoded}`, "https://chatgpt.com/codex");
+  return [
+    { id: "dot", label: "OpenAI Dot", mark: "openai", href: "https://chatgpt.com/", mode: "copy-and-open", host: "cloud" },
+    { id: "grok-bot", label: "Grok Bot", mark: "xai", href: "https://cursor.com/dashboard/bot", mode: "copy-and-open", host: "cloud" },
+    { id: "muse", label: "Muse", mark: "meta", href: "https://applink.muse.ai/", mode: "copy-and-open", host: "cloud" },
+    { id: "cursor", label: "Cursor", mark: "cursor", host: "local", ...prefill(`https://cursor.com/link/prompt?text=${encoded}`, "https://cursor.com/") },
+    { id: "codex-app", label: "Codex", mark: "codex", host: codex.mode === "prefill" ? "local" : "cloud", ...codex },
+    { id: "devin", label: "Devin", mark: "devin", href: "https://app.devin.ai/", mode: "copy-and-open", host: "cloud" },
+  ];
+}

package/src/index.ts

@@ -10,6 +10,7 @@ export * from "./status-page-html.js";
 export * from "./provider-marks.js";
 export * from "./platforms.js";
 export * from "./relative-time.js";
+export * from "./agent-setup.js";
 
 export const colors = {
   light: {

package/src/mockups/client.tsx

@@ -40,10 +40,10 @@ function itemAt<T>(items: readonly T[], index: number, what: string): T {
   return item;
 }
 
-function assertCaption(caption: string, component: string): void {
-  if (typeof caption !== "string" || caption.trim() === "") {
-    throw new TypeError(`${component} needs a caption that says the picture is an illustration.`);
-  }
+function optionalText(value: string | undefined, component: string): string | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value !== "string") throw new TypeError(`${component} text must be a string.`);
+  return value.trim() || undefined;
 }
 
 /** Arrow, Home, and End move between tabs, as in the WAI-ARIA tabs pattern. */
@@ -109,8 +109,8 @@ export function FitToWidth({ children, className, minWidth = 400 }: Readonly<{ c
 /* ModeShowcase                                                        */
 /* ------------------------------------------------------------------ */
 
-/** One choice on a showcase axis. `hint` says in one sentence what the choice does. */
-export type ShowcaseChoice<I extends string> = Readonly<{ id: I; label: string; hint: string }>;
+/** One choice on a showcase axis. Add a hint only when its label needs context. */
+export type ShowcaseChoice<I extends string> = Readonly<{ id: I; label: string; hint?: string }>;
 
 /** What a surface's render function receives. */
 export type ShowcaseState<M extends string, O extends string = string> = Readonly<{
@@ -143,8 +143,8 @@ export type ModeShowcaseProps<S extends string, M extends string, O extends stri
   initial?: Readonly<{ surface?: S; mode?: M; option?: O }>;
   /** A live line under the stage that says what the current state shows. */
   status?: (state: Readonly<{ surface: S; mode: M; option: O | undefined }>) => ReactNode;
-  /** Required. Say it is an illustration, such as "Illustration. Names and text are made up." */
-  caption: string;
+  /** Optional context that adds to the visual. Omit repeated descriptions or generic disclaimers. */
+  caption?: string;
   /** Page-window height in CSS pixels at full scale. */
   height?: number;
   /** Narrowest layout width before the stage scales down. */
@@ -180,7 +180,7 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
   assertUniqueIds(surfaces, "ModeShowcase surface");
   assertUniqueIds(modes, "ModeShowcase mode");
   if (options !== undefined) assertUniqueIds(options, "ModeShowcase option");
-  assertCaption(caption, "ModeShowcase");
+  const captionText = optionalText(caption, "ModeShowcase");
   if (!(height > 0)) throw new RangeError("ModeShowcase height must be positive.");
 
   const id = useId();
@@ -221,6 +221,11 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
   };
 
   const statusNode = status?.({ mode, option, surface: surface.id });
+  const hint = [modeChoice.hint, optionInactive ? undefined : optionChoice?.hint]
+    .map((text) => optionalText(text, "ModeShowcase hint"))
+    .filter((text) => text !== undefined)
+    .join(" ");
+  const hasStatus = statusNode !== undefined && statusNode !== null && statusNode !== false && statusNode !== "";
   return (
     <figure
       aria-label={label?.(surface) ?? `Illustration of ${surface.label.toLowerCase()}`}
@@ -277,10 +282,7 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
             </div>
           )}
         </div>
-        <p className="hkm-showcase-hint">
-          {modeChoice.hint}
-          {optionChoice === undefined || optionInactive ? null : ` ${optionChoice.hint}`}
-        </p>
+        {hint === "" ? null : <p className="hkm-showcase-hint">{hint}</p>}
       </div>
       <div
         aria-labelledby={surfaces.length > 1 ? `${id}-tab-${surface.id}` : undefined}
@@ -295,10 +297,12 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
           {surface.render({ animated, mode, option, previousMode, theme })}
         </FitToWidth>
       </div>
-      <figcaption className="hkm-showcase-caption">
-        {statusNode === undefined ? null : <span aria-live="polite" className="hkm-showcase-status">{statusNode}</span>}
-        <span>{caption}</span>
-      </figcaption>
+      {!hasStatus && captionText === undefined ? null : (
+        <figcaption className="hkm-showcase-caption">
+          {hasStatus ? <span aria-live="polite" className="hkm-showcase-status">{statusNode}</span> : null}
+          {captionText === undefined ? null : <span>{captionText}</span>}
+        </figcaption>
+      )}
     </figure>
   );
 }
@@ -330,7 +334,7 @@ export function StepThrough({
   theme,
 }: Readonly<{
   steps: readonly ThroughStep[];
-  caption: string;
+  caption?: string;
   initial?: string;
   label?: string;
   minWidth?: number;
@@ -338,7 +342,7 @@ export function StepThrough({
   className?: string;
 }>) {
   assertUniqueIds(steps, "StepThrough step");
-  assertCaption(caption, "StepThrough");
+  const captionText = optionalText(caption, "StepThrough");
   const id = useId();
   const [index, setIndex] = useState(() => Math.max(0, steps.findIndex((step) => step.id === initial)));
   const [animated, setAnimated] = useState(false);
@@ -407,9 +411,9 @@ export function StepThrough({
           Next
         </button>
       </div>
-      <figcaption className="hkm-showcase-caption">
-        <span>{caption}</span>
-      </figcaption>
+      {captionText === undefined ? null : (
+        <figcaption className="hkm-showcase-caption"><span>{captionText}</span></figcaption>
+      )}
     </figure>
   );
 }