@hraness/design-kit 0.34.0 → 0.35.1

package/dist/react/index.js

@@ -8,8 +8,9 @@ import {
   HeroBackdrop
 } from "../chunk-8834fh4n.js";
 import {
-  PlatformInstall
-} from "../chunk-mr1vdcjq.js";
+  PlatformInstall,
+  SetupCopyButton
+} from "../chunk-tzd7177a.js";
 import {
   ArticleBarChart,
   ArticleByline,
@@ -22,11 +23,15 @@ import {
   ArticleTable,
   ArticleVideo,
   BottomBar,
+  ComparisonGlyph,
   ComparisonTable,
+  DiagramArrowhead,
   DitherSurface,
   DockedFooter,
   FoilMark,
   LaunchBeats,
+  MarketingAccount,
+  MarketingAccountActions,
   MarketingActionLink,
   MarketingArticle,
   MarketingCallToAction,
@@ -34,7 +39,9 @@ import {
   MarketingCardArt,
   MarketingCardRow,
   MarketingCodeBlock,
+  MarketingComparison,
   MarketingDataTable,
+  MarketingDiagram,
   MarketingFacts,
   MarketingField,
   MarketingFlow,
@@ -65,7 +72,6 @@ import {
   ProductHero,
   ProviderMark,
   ProviderMarkChip,
-  SyntaxCode,
   TopBar,
   articleFigureKinds,
   createParticleHaloRecipe,
@@ -83,8 +89,10 @@ import {
   marketingProofFrameAddress,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-nwpcjm48.js";
-import"../chunk-h4k7yv6x.js";
+} from "../chunk-6bfr0g23.js";
+import {
+  SyntaxCode
+} from "../chunk-6ts4955n.js";
 import {
   STATUS_PAGE_AGENT_PREFIX,
   STATUS_PAGE_BACK_LABEL,
@@ -113,7 +121,8 @@ import {
   resolveStatusPage,
   statusPageRoutesAttribute,
   suggestStatusRoute
-} from "../chunk-4d79eskk.js";
+} from "../chunk-c80g58j1.js";
+import"../chunk-gmea6p0d.js";
 import"../chunk-wzvdn8ey.js";
 import"../chunk-he8eznb1.js";
 import"../chunk-77391vmq.js";
@@ -282,43 +291,12 @@ var agentSetupStyles = {
     kA33Yr: "x13c0qn1",
     $$css: true
   },
-  copy: {
-    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: "xjb2p0i",
-    kGuDYH: "x1dcheo9",
-    kOIVth: "x1neeqzj",
-    kjj79g: "xl56j7k",
-    kLWn49: "xo5v014",
-    kogj98: "x1ghz6dp",
-    kAzted: "xgbkey0",
-    kI3sdo: "x1a2a7pz xr5lfjo",
-    kInvED: "x1hl8ikr",
-    kmVPX3: "x1i4hug3",
-    $$css: true
-  },
   copyOverlay: {
     krVfgx: "x1of4z1n",
     kt4wiu: "xe388cy",
     kVAEAm: "x10l6tqk",
     $$css: true
   },
-  copyIcon: {
-    kZKoxP: "x1l36t39",
-    kmuXW: "x2lah0s",
-    kzqmXN: "xcdlrvm",
-    $$css: true
-  },
   targets: {
     k1xSpc: "xrvj5dj",
     kOIVth: "x1uma3xh",
@@ -341,6 +319,12 @@ var agentSetupStyles = {
     kmVPX3: "x1717udv",
     $$css: true
   },
+  targetGrid: {
+    kumcoG: "xe92ajh",
+    "--_hraness-agent-target-columns": "x6fuqh4",
+    "--_hraness-agent-target-wide-columns": "x1ii36b5",
+    $$css: true
+  },
   target: {
     kGNEyG: "x6s0dn4",
     kWkggS: "xw51l6n x1jf9jbc xnwy5bs",
@@ -471,7 +455,7 @@ function agentSetupClassName(parts, caller) {
 }
 
 // src/react/agent-setup-prompt.tsx
-import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function commandSubject(entry) {
   return `${entry.label} ${entry.filename === undefined ? "command" : "configuration"}`;
 }
@@ -640,61 +624,20 @@ function useCopy(text, subject, fallback, onCopied) {
     copy
   };
 }
-function CopyGlyph({
-  copied
-}) {
-  return /* @__PURE__ */ jsx2("svg", {
-    "aria-hidden": "true",
-    className: agentSetupClassName(["copyIcon"]),
-    fill: "none",
-    focusable: "false",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    viewBox: "0 0 24 24",
-    children: copied ? /* @__PURE__ */ jsx2("path", {
-      d: "M5 12.5l4.5 4.5L19 7.5"
-    }) : /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx2("rect", {
-          height: "12",
-          rx: "2",
-          width: "12",
-          x: "8",
-          y: "8"
-        }),
-        /* @__PURE__ */ jsx2("path", {
-          d: "M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"
-        })
-      ]
-    })
-  });
-}
 function CopyButton({
   copy,
   overlay = false,
   state,
   subject
 }) {
-  return /* @__PURE__ */ jsxs("button", {
-    "aria-busy": state === "copying" || undefined,
-    "aria-label": `${state === "copied" ? "Copied" : "Copy"} ${subject}`,
-    className: agentSetupClassName(["copy", overlay && "copyOverlay"]),
-    "data-copy-state": state,
-    disabled: state === "copying",
-    onClick: () => {
+  return /* @__PURE__ */ jsx2(SetupCopyButton, {
+    className: agentSetupClassName([overlay && "copyOverlay"], "hraness-agent-setup__copy"),
+    iconClassName: "hraness-agent-setup__copyIcon",
+    onCopy: () => {
       copy();
     },
-    type: "button",
-    children: [
-      /* @__PURE__ */ jsx2(CopyGlyph, {
-        copied: state === "copied"
-      }),
-      /* @__PURE__ */ jsx2("span", {
-        children: state === "copied" ? "Copied" : state === "copying" ? "Copying" : state === "failed" ? "Copy failed" : "Copy"
-      })
-    ]
+    state,
+    subject
   });
 }
 function CopyStatus({
@@ -735,12 +678,15 @@ function AgentSetupPrompt({
   prompt,
   label = "Agent setup",
   targets = [],
+  targetsPlacement = "responsive",
   className,
   onCopied
 }) {
   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")
@@ -843,9 +789,10 @@ function AgentSetupPrompt({
     "aria-label": label,
     className: agentSetupClassName(["root"], className),
     "data-hraness-agent-setup-prompt": "",
+    "data-targets-placement": targetsPlacement,
     children: [
       /* @__PURE__ */ jsxs("div", {
-        className: agentSetupClassName(["layout", targets.length > 0 && "withTargets"]),
+        className: agentSetupClassName(["layout", targets.length > 0 && targetsPlacement === "responsive" && "withTargets"]),
         children: [
           /* @__PURE__ */ jsxs("div", {
             className: agentSetupClassName(["frame"]),
@@ -899,7 +846,7 @@ function AgentSetupPrompt({
                 children: "Open in"
               }),
               /* @__PURE__ */ jsx2("ul", {
-                className: agentSetupClassName(["targetList"]),
+                className: agentSetupClassName(["targetList", targetsPlacement === "below" && "targetGrid"]),
                 children: targets.map((target) => /* @__PURE__ */ jsx2("li", {
                   children: /* @__PURE__ */ jsxs("a", {
                     "aria-busy": target.mode === "copy-and-open" && state === "copying" || undefined,
@@ -1661,11 +1608,11 @@ function PhaserDots({
 }
 
 // src/react/aurora-dots-background.tsx
-import { jsx as jsx5, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
 function AuroraDotsBackground() {
   const backgroundPresentation = stylex5.props(effectsStyles.auroraBackground);
   const dotsPresentation = stylex5.props(effectsStyles.auroraDots);
-  return /* @__PURE__ */ jsxs4(Fragment2, {
+  return /* @__PURE__ */ jsxs4(Fragment, {
     children: [
       /* @__PURE__ */ jsx5("div", {
         "aria-hidden": "true",
@@ -5285,7 +5232,7 @@ var themeStyles = {
 };
 
 // src/react/theme.tsx
-import { jsx as jsx14, jsxs as jsxs12, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12, Fragment as Fragment2 } from "react/jsx-runtime";
 var concreteThemes = ["light", "dark"];
 var emptySubscribe = () => () => {
   return;
@@ -5327,7 +5274,7 @@ function DesignThemeProvider({
   nonce,
   storageKey = designThemeStorageKey
 }) {
-  return /* @__PURE__ */ jsxs12(Fragment3, {
+  return /* @__PURE__ */ jsxs12(Fragment2, {
     children: [
       forcedTheme === undefined ? /* @__PURE__ */ jsx14("script", {
         ...nonce === undefined ? {} : {
@@ -5534,7 +5481,7 @@ function ThemeColorSync({
 }
 
 // src/react/route-state.tsx
-import { jsx as jsx15, jsxs as jsxs13, Fragment as Fragment4 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13, Fragment as Fragment3 } from "react/jsx-runtime";
 var lowerHeading = {
   h1: "h2",
   h2: "h3",
@@ -5626,7 +5573,7 @@ function StatusPage({
           /* @__PURE__ */ jsxs13("div", {
             className: "hraness-status-page__actions",
             children: [
-              onRetry ? /* @__PURE__ */ jsxs13(Fragment4, {
+              onRetry ? /* @__PURE__ */ jsxs13(Fragment3, {
                 children: [
                   /* @__PURE__ */ jsx15("button", {
                     className: "hraness-status-page__action hraness-foil",
@@ -5794,7 +5741,7 @@ function GlobalErrorDocument({
   theme = defaultDesignTheme,
   ...props14
 }) {
-  const content = /* @__PURE__ */ jsxs13(Fragment4, {
+  const content = /* @__PURE__ */ jsxs13(Fragment3, {
     children: [
       diagnostics,
       /* @__PURE__ */ jsx15(RouteErrorPage, {
@@ -5814,7 +5761,7 @@ function GlobalErrorDocument({
             content: theme === "system" ? "light dark" : theme,
             name: "color-scheme"
           }),
-          theme === "system" ? /* @__PURE__ */ jsxs13(Fragment4, {
+          theme === "system" ? /* @__PURE__ */ jsxs13(Fragment3, {
             children: [
               /* @__PURE__ */ jsx15("meta", {
                 content: lightColor,
@@ -5996,7 +5943,7 @@ function RelativeTime({
 }
 
 // src/react/design-gallery.tsx
-import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment5 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment4 } from "react/jsx-runtime";
 var designGallerySections = [{
   id: "foundation",
   label: "Foundation"
@@ -6498,6 +6445,7 @@ function DesignSystemGallery({
                   }),
                   /* @__PURE__ */ jsx17(MarketingPillars, {
                     ariaLabel: "Relay in three points",
+                    presentation: "benefits",
                     columns: 3,
                     pillars: [{
                       label: "No hosted service",
@@ -6583,6 +6531,7 @@ function DesignSystemGallery({
                     children: [
                       /* @__PURE__ */ jsx17(AgentSetupPrompt, {
                         label: "Relay agent setup",
+                        targetsPlacement: "below",
                         prompt: `Install Relay from https://relay.example/install.sh.
 Read the project instructions before making changes.
 Run relay init in this workspace and create a job named sample.
@@ -6637,7 +6586,7 @@ Run the job, then show me its log.`,
                   }),
                   /* @__PURE__ */ jsxs15(MarketingSection, {
                     heading: "A job keeps its name everywhere.",
-                    headingContent: /* @__PURE__ */ jsxs15(Fragment5, {
+                    headingContent: /* @__PURE__ */ jsxs15(Fragment4, {
                       children: [
                         /* @__PURE__ */ jsx17(MarketingCodeBlock, {
                           code: "relay run job-01"
@@ -6844,33 +6793,142 @@ Run the job, then show me its log.`,
                   /* @__PURE__ */ jsx17(MarketingRelated, {
                     columns: 2,
                     groups: [{
-                      heading: "Sibling tools",
+                      heading: "Relationships",
+                      tone: "rose",
                       headingId: "design-gallery-related-tools",
                       items: [{
                         href: "#gallery-install",
                         name: "Ledger",
+                        domain: "ledger.example",
                         role: "Long-term storage for run logs"
                       }, {
                         href: "#marketing",
                         name: "Index",
+                        domain: "index.example",
                         role: "A local search index"
                       }]
                     }, {
                       columns: 1,
-                      heading: "Shared infrastructure",
+                      heading: "Knowledge",
+                      tone: "indigo",
                       headingId: "design-gallery-related-infra",
                       items: [{
                         href: "#marketing",
                         name: "Relay",
+                        domain: "relay.example",
                         role: "The shared job runner"
-                      }],
-                      summary: "The runner the other tools depend on."
+                      }]
                     }],
-                    heading: "Related tools.",
+                    heading: "Other tools from our studio",
                     headingId: "design-gallery-related-title",
-                    headingLevel: 3,
-                    label: "Related",
-                    summary: "Each is a separate release. Its card says how it works with Relay."
+                    headingLevel: 3
+                  }),
+                  /* @__PURE__ */ jsxs15(MarketingDiagram, {
+                    width: 720,
+                    height: 216,
+                    label: "Your sources stay on your device; your chosen agent reads the local workspace.",
+                    children: [
+                      /* @__PURE__ */ jsx17("defs", {
+                        children: /* @__PURE__ */ jsx17(DiagramArrowhead, {
+                          id: "gallery-diagram-arrow"
+                        })
+                      }),
+                      /* @__PURE__ */ jsx17("rect", {
+                        className: "hraness-diagram__node",
+                        x: 24,
+                        y: 40,
+                        width: 276,
+                        height: 136,
+                        rx: 12
+                      }),
+                      /* @__PURE__ */ jsx17("rect", {
+                        className: "hraness-diagram__node",
+                        x: 420,
+                        y: 40,
+                        width: 276,
+                        height: 136,
+                        rx: 12
+                      }),
+                      /* @__PURE__ */ jsx17("path", {
+                        className: "hraness-diagram__icon",
+                        d: "M48 66h18v14H48z M53 84h8 M57 80v4"
+                      }),
+                      /* @__PURE__ */ jsx17("text", {
+                        className: "hraness-diagram__label",
+                        x: 48,
+                        y: 116,
+                        children: "Your sources"
+                      }),
+                      /* @__PURE__ */ jsx17("text", {
+                        className: "hraness-diagram__detail",
+                        x: 48,
+                        y: 143,
+                        children: "Stored on your device"
+                      }),
+                      /* @__PURE__ */ jsx17("path", {
+                        className: "hraness-diagram__connector",
+                        d: "M320 108H400",
+                        markerEnd: "url(#gallery-diagram-arrow)"
+                      }),
+                      /* @__PURE__ */ jsx17("path", {
+                        className: "hraness-diagram__icon",
+                        d: "M444 73h18 M453 64v18 M447 67l12 12 M459 67l-12 12"
+                      }),
+                      /* @__PURE__ */ jsx17("text", {
+                        className: "hraness-diagram__label",
+                        x: 444,
+                        y: 116,
+                        children: "Your chosen agent"
+                      }),
+                      /* @__PURE__ */ jsx17("text", {
+                        className: "hraness-diagram__detail",
+                        x: 444,
+                        y: 143,
+                        children: "Reads the local workspace"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx17(MarketingComparison, {
+                    caption: "Choose where your work lives",
+                    options: [{
+                      name: "Relay"
+                    }, {
+                      name: "Hosted workspace"
+                    }],
+                    highlight: 0,
+                    rows: [{
+                      label: "Works offline",
+                      values: [true, false]
+                    }, {
+                      label: "Bring your model",
+                      values: [true, {
+                        status: "optional",
+                        label: "On some plans"
+                      }]
+                    }, {
+                      label: "Local storage",
+                      values: [true, {
+                        status: "depends",
+                        detail: "Check the provider's export format."
+                      }]
+                    }, {
+                      label: "Cost",
+                      values: ["Free locally", "Subscription"]
+                    }],
+                    note: "An illustrative comparison. Product pages supply current facts and sources."
+                  }),
+                  /* @__PURE__ */ jsx17(MarketingAccount, {
+                    id: "gallery-account",
+                    summary: "Keep your preferences and shared work together.",
+                    children: /* @__PURE__ */ jsx17(MarketingAccountActions, {
+                      primary: {
+                        href: "#gallery-account",
+                        label: "Create account"
+                      },
+                      signIn: {
+                        href: "#gallery-account"
+                      }
+                    })
                   }),
                   /* @__PURE__ */ jsx17(MarketingMaker, {
                     heading: "Who builds Relay",
@@ -8177,7 +8235,9 @@ export {
   MarketingFlow,
   MarketingField,
   MarketingFacts,
+  MarketingDiagram,
   MarketingDataTable,
+  MarketingComparison,
   MarketingCodeBlock,
   MarketingCardRow,
   MarketingCardArt,
@@ -8185,6 +8245,8 @@ export {
   MarketingCallToAction,
   MarketingArticle,
   MarketingActionLink,
+  MarketingAccountActions,
+  MarketingAccount,
   LaunchBeats,
   LanternMaterialGallery,
   HeroBackdrop,
@@ -8196,12 +8258,14 @@ export {
   Fader,
   DockedFooter,
   DitherSurface,
+  DiagramArrowhead,
   DesignThemeProvider,
   DesignSystemGallery,
   DesignPortalThemeProvider,
   DesignPaletteProvider,
   DesignPaletteMenuButton,
   ComparisonTable,
+  ComparisonGlyph,
   ChatMessage,
   ChatComposer,
   BottomBar,

package/dist/react/platform-install.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   PlatformInstall
-} from "../chunk-mr1vdcjq.js";
-import"../chunk-h4k7yv6x.js";
+} from "../chunk-tzd7177a.js";
+import"../chunk-6ts4955n.js";
 import"../chunk-wzvdn8ey.js";
+import"../chunk-he8eznb1.js";
 import"../chunk-5gtx3pza.js";
 export {
   PlatformInstall

package/dist/react/server.js

@@ -10,11 +10,15 @@ import {
   ArticleTable,
   ArticleVideo,
   BottomBar,
+  ComparisonGlyph,
   ComparisonTable,
+  DiagramArrowhead,
   DitherSurface,
   DockedFooter,
   FoilMark,
   LaunchBeats,
+  MarketingAccount,
+  MarketingAccountActions,
   MarketingActionLink,
   MarketingArticle,
   MarketingCallToAction,
@@ -22,7 +26,9 @@ import {
   MarketingCardArt,
   MarketingCardRow,
   MarketingCodeBlock,
+  MarketingComparison,
   MarketingDataTable,
+  MarketingDiagram,
   MarketingFacts,
   MarketingField,
   MarketingFlow,
@@ -53,7 +59,6 @@ import {
   ProductHero,
   ProviderMark,
   ProviderMarkChip,
-  SyntaxCode,
   TopBar,
   articleFigureKinds,
   createParticleHaloRecipe,
@@ -63,8 +68,11 @@ import {
   marketingProofFrameAddress,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-nwpcjm48.js";
-import"../chunk-h4k7yv6x.js";
+} from "../chunk-6bfr0g23.js";
+import {
+  SyntaxCode
+} from "../chunk-6ts4955n.js";
+import"../chunk-gmea6p0d.js";
 import"../chunk-wzvdn8ey.js";
 import"../chunk-he8eznb1.js";
 import"../chunk-77391vmq.js";
@@ -112,7 +120,9 @@ export {
   MarketingFlow,
   MarketingField,
   MarketingFacts,
+  MarketingDiagram,
   MarketingDataTable,
+  MarketingComparison,
   MarketingCodeBlock,
   MarketingCardRow,
   MarketingCardArt,
@@ -120,11 +130,15 @@ export {
   MarketingCallToAction,
   MarketingArticle,
   MarketingActionLink,
+  MarketingAccountActions,
+  MarketingAccount,
   LaunchBeats,
   FoilMark,
   DockedFooter,
   DitherSurface,
+  DiagramArrowhead,
   ComparisonTable,
+  ComparisonGlyph,
   BottomBar,
   ArticleVideo,
   ArticleTable,