@hraness/design-kit 0.36.4 → 0.38.0

package/dist/provider-marks.js

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

package/dist/react/index.js

@@ -89,7 +89,7 @@ import {
   marketingProofFrameAddress,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-0s71p361.js";
+} from "../chunk-13bq7myc.js";
 import {
   SyntaxCode
 } from "../chunk-6ts4955n.js";
@@ -121,7 +121,7 @@ import {
   resolveStatusPage,
   statusPageRoutesAttribute,
   suggestStatusRoute
-} from "../chunk-thv5t11w.js";
+} from "../chunk-s222cmt9.js";
 import"../chunk-gmea6p0d.js";
 import"../chunk-wzvdn8ey.js";
 import"../chunk-he8eznb1.js";
@@ -132,7 +132,16 @@ import {
   characterLength,
   xPostLength
 } from "../chunk-cejpzyfh.js";
-import"../chunk-sabcr66p.js";
+import {
+  BrowserFrame
+} from "../chunk-san9drwt.js";
+import {
+  StepThrough
+} from "../chunk-z974c20s.js";
+import {
+  SampleText
+} from "../chunk-kz59614q.js";
+import"../chunk-gpsekwkj.js";
 import {
   __require
 } from "../chunk-5gtx3pza.js";
@@ -2180,8 +2189,8 @@ var paletteMenuStyles = {
     k1xSpc: "x3nfvp2",
     kjj79g: "xl56j7k",
     kH6xsr: "x3ct3a4",
-    kVQ08L: "x1qwoi4t",
-    kdYMnH: "x9hh0qe",
+    kVQ08L: "x5zky9q",
+    kdYMnH: "xq5ipov",
     kjBf7l: "xb2ck1y",
     kInvED: "x1ewu8gn",
     k8WAf4: "x18g2hj5",
@@ -5211,8 +5220,8 @@ var themeStyles = {
     kAXs8y: "xr5dkdi",
     kULEZF: "x130h922 xqnxffv",
     kLWn49: "x15bjb6t",
-    kVQ08L: "xd0akbl x9me654",
-    kdYMnH: "x1o8ym9z x11je3w3",
+    kVQ08L: "x5c9nq0 xczs0xf",
+    kdYMnH: "xye2cm2 x12c0uzw",
     kSiTet: "xijokvz",
     kjBf7l: "x14pgi42 x1x84bn5",
     kInvED: "xecyca2",
@@ -5976,7 +5985,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 +6053,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
 }) {
@@ -6600,6 +6719,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.",
@@ -8027,18 +8179,23 @@ function resolveHeader(root, header) {
     return root.querySelector(header);
   return root.querySelector(stickyOffsetHeaderSelector);
 }
-function resolveTarget(header, target) {
+function resolveTargets(header, target) {
   if (target !== undefined)
-    return target;
-  const page = header.closest(".hraness-marketing-page");
-  return page ?? header.ownerDocument.documentElement;
+    return [target];
+  const targets = new Set([header.ownerDocument.documentElement]);
+  for (let ancestor = header;ancestor !== null; ancestor = ancestor.parentElement) {
+    if (ancestor.matches(".hraness-marketing-page, [data-hraness-marketing-preset]"))
+      targets.add(ancestor);
+  }
+  return [...targets];
 }
 function measureStickyOffset(header) {
   return `${header.getBoundingClientRect().height}px`;
 }
 function publishStickyOffset(header, target) {
   const value = measureStickyOffset(header);
-  resolveTarget(header, target).style.setProperty(stickyOffsetCustomProperty, value);
+  for (const destination of resolveTargets(header, target))
+    destination.style.setProperty(stickyOffsetCustomProperty, value);
   return value;
 }
 function syncStickyOffset(options = {}) {
@@ -8049,22 +8206,42 @@ function syncStickyOffset(options = {}) {
   const header = resolveHeader(root, options.header);
   if (header === null)
     return () => {};
-  const target = resolveTarget(header, options.target);
+  const targets = resolveTargets(header, options.target);
+  const prior = targets.map((target) => ({
+    target,
+    value: target.style.getPropertyValue(stickyOffsetCustomProperty),
+    priority: typeof target.style.getPropertyPriority === "function" ? target.style.getPropertyPriority(stickyOffsetCustomProperty) : ""
+  }));
+  let published;
   const publish = () => {
-    publishStickyOffset(header, target);
+    published = measureStickyOffset(header);
+    for (const target of targets)
+      target.style.setProperty(stickyOffsetCustomProperty, published);
+  };
+  const restore = () => {
+    for (const {
+      target,
+      value,
+      priority
+    } of prior) {
+      if (target.style.getPropertyValue(stickyOffsetCustomProperty) !== published || typeof target.style.getPropertyPriority === "function" && target.style.getPropertyPriority(stickyOffsetCustomProperty) !== "")
+        continue;
+      if (value)
+        target.style.setProperty(stickyOffsetCustomProperty, value, priority);
+      else
+        target.style.removeProperty(stickyOffsetCustomProperty);
+    }
   };
   publish();
   const view = document2.defaultView;
   if (view === null || typeof view.ResizeObserver !== "function") {
-    return () => {
-      target.style.removeProperty(stickyOffsetCustomProperty);
-    };
+    return restore;
   }
   const observer = new view.ResizeObserver(publish);
   observer.observe(header);
   return () => {
     observer.disconnect();
-    target.style.removeProperty(stickyOffsetCustomProperty);
+    restore();
   };
 }
 

package/dist/react/server.js

@@ -68,7 +68,7 @@ import {
   marketingProofFrameAddress,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-0s71p361.js";
+} from "../chunk-13bq7myc.js";
 import {
   SyntaxCode
 } from "../chunk-6ts4955n.js";
@@ -77,7 +77,7 @@ import"../chunk-wzvdn8ey.js";
 import"../chunk-he8eznb1.js";
 import"../chunk-77391vmq.js";
 import"../chunk-cejpzyfh.js";
-import"../chunk-sabcr66p.js";
+import"../chunk-gpsekwkj.js";
 import"../chunk-5gtx3pza.js";
 export {
   proceduralRecipeVersion,