@hraness/design-kit 0.36.5 → 0.39.0

package/dist/provider-marks.js

@@ -6,7 +6,7 @@ import {
   providerMarkMonogram,
   providerMarkOnAccent,
   providerMarks
-} from "./chunk-sabcr66p.js";
+} from "./chunk-w1y1m3m7.js";
 import"./chunk-5gtx3pza.js";
 export {
   providerMarks,

package/dist/react/index.js

@@ -49,6 +49,7 @@ import {
   MarketingInterfaceGrid,
   MarketingMain,
   MarketingMaker,
+  MarketingMarquee,
   MarketingNotice,
   MarketingPage,
   MarketingPillars,
@@ -89,7 +90,7 @@ import {
   marketingProofFrameAddress,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-xa28y4fg.js";
+} from "../chunk-1dgm85ta.js";
 import {
   SyntaxCode
 } from "../chunk-6ts4955n.js";
@@ -121,8 +122,8 @@ import {
   resolveStatusPage,
   statusPageRoutesAttribute,
   suggestStatusRoute
-} from "../chunk-thv5t11w.js";
-import"../chunk-gmea6p0d.js";
+} from "../chunk-dc8v05zh.js";
+import"../chunk-6mx403v5.js";
 import"../chunk-wzvdn8ey.js";
 import"../chunk-he8eznb1.js";
 import"../chunk-77391vmq.js";
@@ -132,7 +133,16 @@ import {
   characterLength,
   xPostLength
 } from "../chunk-cejpzyfh.js";
-import"../chunk-sabcr66p.js";
+import {
+  BrowserFrame
+} from "../chunk-vy0pt84a.js";
+import {
+  StepThrough
+} from "../chunk-fxwed3e5.js";
+import {
+  SampleText
+} from "../chunk-fcs5qekr.js";
+import"../chunk-w1y1m3m7.js";
 import {
   __require
 } from "../chunk-5gtx3pza.js";
@@ -5976,7 +5986,7 @@ var designGallerySections = [{
   label: "Syntax"
 }];
 var designGalleryTouchKinds = ["button", "link", "radio", "range"];
-var designGalleryRecipeCoverage = ["@hraness/ui primitives", "animated rail stage", "application shells", "article layer", "charts", "chat message and composer", "dither surface", "fader", "foil card surface", "layout surfaces", "Lantern material", "playback transport", "plain site and publication grammar", "product-marketing grammar", "Nebula Sans typography", "procedural effects", "platform install commands", "production preview notice", "relative time", "status pages", "syntax highlighting"];
+var designGalleryRecipeCoverage = ["@hraness/ui primitives", "animated rail stage", "application shells", "article layer", "charts", "chat message and composer", "dither surface", "fader", "foil card surface", "layout surfaces", "Lantern material", "playback transport", "plain site and publication grammar", "product-marketing grammar", "Nebula Sans typography", "procedural effects", "platform install commands", "production preview notice", "relative time", "responsive product walkthroughs", "status pages", "syntax highlighting"];
 var designGalleryRelativeTimeNow = Date.UTC(2026, 8, 26, 12, 0, 0);
 var relativeTimeExamples = [{
   id: "seconds",
@@ -6044,6 +6054,116 @@ var foilDeckExamples = [{
   ornament: "facets",
   preset: "max"
 }];
+function GalleryJobPreview({
+  state
+}) {
+  const completed = state === "saved";
+  return /* @__PURE__ */ jsx17(BrowserFrame, {
+    describe: `A conceptual job interface shows a weekly report ${state === "ready" ? "ready to run" : state === "running" ? "being prepared" : "saved beside its source"}.`,
+    url: "relay.example/jobs/weekly-report",
+    children: /* @__PURE__ */ jsxs15("div", {
+      className: "design-gallery__walkthrough-preview",
+      children: [
+        /* @__PURE__ */ jsx17("p", {
+          className: "design-gallery__walkthrough-context",
+          children: "WORKSPACE / JOBS"
+        }),
+        /* @__PURE__ */ jsxs15("p", {
+          className: "design-gallery__walkthrough-title",
+          children: [
+            /* @__PURE__ */ jsx17(SampleText, {
+              children: "Weekly report"
+            }),
+            /* @__PURE__ */ jsx17("span", {
+              className: "design-gallery__walkthrough-state",
+              children: state === "ready" ? "Ready" : completed ? "Saved" : "Running"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs15("dl", {
+          className: "design-gallery__walkthrough-facts",
+          children: [
+            /* @__PURE__ */ jsxs15("div", {
+              children: [
+                /* @__PURE__ */ jsx17("dt", {
+                  children: "Source"
+                }),
+                /* @__PURE__ */ jsx17("dd", {
+                  children: /* @__PURE__ */ jsx17(SampleText, {
+                    children: "orders.csv"
+                  })
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs15("div", {
+              children: [
+                /* @__PURE__ */ jsx17("dt", {
+                  children: "Run"
+                }),
+                /* @__PURE__ */ jsx17("dd", {
+                  children: /* @__PURE__ */ jsx17(SampleText, {
+                    children: state === "ready" ? "On demand" : "run-042"
+                  })
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs15("ol", {
+          className: "design-gallery__walkthrough-checks",
+          children: [
+            /* @__PURE__ */ jsxs15("li", {
+              children: [
+                /* @__PURE__ */ jsx17("span", {
+                  children: "Check input"
+                }),
+                /* @__PURE__ */ jsx17("span", {
+                  children: state === "ready" ? "Waiting" : "Complete"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs15("li", {
+              children: [
+                /* @__PURE__ */ jsx17("span", {
+                  children: "Build report"
+                }),
+                /* @__PURE__ */ jsx17("span", {
+                  children: state === "ready" ? "Waiting" : completed ? "Complete" : "In progress"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs15("li", {
+              children: [
+                /* @__PURE__ */ jsx17("span", {
+                  children: "Save output"
+                }),
+                /* @__PURE__ */ jsx17("span", {
+                  children: completed ? "Complete" : "Waiting"
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs15("div", {
+          className: "design-gallery__walkthrough-result",
+          children: [
+            /* @__PURE__ */ jsx17("span", {
+              children: completed ? "Saved report" : "Output"
+            }),
+            /* @__PURE__ */ jsx17("strong", {
+              children: /* @__PURE__ */ jsx17(SampleText, {
+                children: completed ? "weekly-report.md" : "Weekly report"
+              })
+            }),
+            /* @__PURE__ */ jsx17("span", {
+              children: completed ? "12 sections · Source attached" : "Available after the run finishes"
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
 function DesignSystemGallery({
   isNestedInMain = false
 }) {
@@ -6477,6 +6597,37 @@ function DesignSystemGallery({
                     }),
                     summary: "Relay runs the same job wherever you start it and writes a log you can read afterward: inputs, outputs, and how long it took."
                   }),
+                  /* @__PURE__ */ jsx17(MarketingMarquee, {
+                    action: {
+                      href: "#gallery-install",
+                      label: "Set up your agent"
+                    },
+                    id: "design-gallery-marquee",
+                    items: [{
+                      name: "Claude Code"
+                    }, {
+                      name: "Codex"
+                    }, {
+                      name: "Cursor"
+                    }, {
+                      name: "Gemini CLI"
+                    }, {
+                      name: "GitHub Copilot"
+                    }, {
+                      name: "Goose"
+                    }, {
+                      name: "opencode"
+                    }, {
+                      name: "Crush"
+                    }, {
+                      name: "Aider"
+                    }, {
+                      name: "Amp"
+                    }, {
+                      name: "Devin"
+                    }],
+                    label: "Works with {count} coding agents"
+                  }),
                   /* @__PURE__ */ jsx17(MarketingPillars, {
                     ariaLabel: "Relay in three points",
                     presentation: "benefits",
@@ -6600,6 +6751,39 @@ Run the job, then show me its log.`,
                       })
                     ]
                   }),
+                  /* @__PURE__ */ jsx17(MarketingSection, {
+                    heading: "Show the result at each step.",
+                    headingId: "gallery-walkthrough",
+                    headingLevel: 3,
+                    label: "Walkthrough",
+                    summary: "Use short labels and visible explanations beside a compact illustration of what changes.",
+                    children: /* @__PURE__ */ jsx17(StepThrough, {
+                      fit: "fill",
+                      label: "Run a Relay job",
+                      steps: [{
+                        id: "choose",
+                        label: "Choose a job",
+                        hint: "Pick a saved job and review the file it reads before starting the run.",
+                        render: () => /* @__PURE__ */ jsx17(GalleryJobPreview, {
+                          state: "ready"
+                        })
+                      }, {
+                        id: "run",
+                        label: "Watch the run",
+                        hint: "See the input check, transformation, and saved output as separate stages.",
+                        render: () => /* @__PURE__ */ jsx17(GalleryJobPreview, {
+                          state: "running"
+                        })
+                      }, {
+                        id: "inspect",
+                        label: "Read the result",
+                        hint: "Open the saved report with the run ID and source file beside it.",
+                        render: () => /* @__PURE__ */ jsx17(GalleryJobPreview, {
+                          state: "saved"
+                        })
+                      }]
+                    })
+                  }),
                   /* @__PURE__ */ jsx17(MarketingPrimitives, {
                     columns: 3,
                     heading: "Three objects cover most work.",
@@ -8336,6 +8520,7 @@ export {
   MarketingPillars,
   MarketingPage,
   MarketingNotice,
+  MarketingMarquee,
   MarketingMaker,
   MarketingMain,
   MarketingInterfaceGrid,

package/dist/react/server.js

@@ -36,6 +36,7 @@ import {
   MarketingInterfaceGrid,
   MarketingMain,
   MarketingMaker,
+  MarketingMarquee,
   MarketingNotice,
   MarketingPage,
   MarketingPillars,
@@ -68,16 +69,16 @@ import {
   marketingProofFrameAddress,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-xa28y4fg.js";
+} from "../chunk-1dgm85ta.js";
 import {
   SyntaxCode
 } from "../chunk-6ts4955n.js";
-import"../chunk-gmea6p0d.js";
+import"../chunk-6mx403v5.js";
 import"../chunk-wzvdn8ey.js";
 import"../chunk-he8eznb1.js";
 import"../chunk-77391vmq.js";
 import"../chunk-cejpzyfh.js";
-import"../chunk-sabcr66p.js";
+import"../chunk-w1y1m3m7.js";
 import"../chunk-5gtx3pza.js";
 export {
   proceduralRecipeVersion,
@@ -113,6 +114,7 @@ export {
   MarketingPillars,
   MarketingPage,
   MarketingNotice,
+  MarketingMarquee,
   MarketingMaker,
   MarketingMain,
   MarketingInterfaceGrid,