@conduction/docusaurus-preset 3.28.0 → 3.32.0

package/src/components/LeafMock/LeafMock.jsx

@@ -0,0 +1,173 @@
+/**
+ * <LeafMock />
+ *
+ * Token-built abstract of one workspace integration leaf: the small
+ * panels that show *what an app plugs into* — contacts, the meetings
+ * calendar, mail, files. Used on Showcase items and app detail pages
+ * that previously reused a generic <AppMock> for every leaf.
+ *
+ * Same abstraction level as <AppMock> (honeycomb.io/technologies/*):
+ * greeked content, tokens only, no real text beyond short labels.
+ * Four variants:
+ *
+ *   - contacts: address-book rows with pointy-top hex avatars and a
+ *     mint sync arrow to a phone silhouette
+ *   - calendar: mini month grid with one highlighted day and a
+ *     linked-event chip (lavender bar)
+ *   - mail:     message list with one highlighted row carrying a
+ *     mint "create from email" action chip
+ *   - files:    folder/file rows with a link-to-record chip (forest)
+ *
+ * Usage:
+ *
+ *   <LeafMock leaf="contacts" />
+ *   <LeafMock leaf="calendar" caption size="sm" />
+ *
+ * Props:
+ *   - leaf:      'contacts' | 'calendar' | 'mail' | 'files' (required)
+ *   - size:      'sm' | 'md' (default)  — frame width
+ *   - caption:   string | true          — small label below the frame;
+ *                `true` uses the variant's default label
+ *   - className: string
+ */
+
+import React from 'react';
+import styles from './LeafMock.module.css';
+
+function Greek({w, tone = 'sub'}) {
+  return <span className={[styles.greek, styles[`greek-${tone}`]].join(' ')} style={{width: w}} />;
+}
+
+function ContactsLeaf() {
+  return (
+    <div className={styles.contacts}>
+      <div className={styles.contactList}>
+        {[0, 1, 2].map((i) => (
+          <div key={i} className={styles.contactRow}>
+            <span className={[styles.hexAvatar, styles[`hexAvatar-${i}`]].join(' ')} />
+            <span className={styles.contactLines}>
+              <Greek w="64%" tone="title" />
+              <Greek w="44%" />
+            </span>
+          </div>
+        ))}
+      </div>
+      <svg className={styles.syncArrow} viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M4 9h13m0 0l-3.5-3.5M17 9l-3.5 3.5M20 15H7m0 0l3.5-3.5M7 15l3.5 3.5" />
+      </svg>
+      <div className={styles.phone}>
+        <div className={styles.phoneScreen}>
+          <span className={styles.phoneRow} />
+          <span className={styles.phoneRow} />
+          <span className={styles.phoneRow} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CalendarLeaf() {
+  /* 7×4 mini month; day 10 (index 9) is the highlighted, linked day. */
+  const days = Array.from({length: 28}, (_, i) => i);
+  return (
+    <div className={styles.calendar}>
+      <div className={styles.monthGrid}>
+        {days.map((i) => (
+          <span key={i} className={[styles.day, i === 9 && styles.dayActive].filter(Boolean).join(' ')} />
+        ))}
+      </div>
+      <div className={styles.eventChip}>
+        <span className={styles.eventBar} />
+        <span className={styles.eventLines}>
+          <Greek w="70%" tone="title" />
+          <Greek w="46%" />
+        </span>
+        <svg className={styles.linkIcon} viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6L12.5 17.5" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function MailLeaf() {
+  return (
+    <div className={styles.mail}>
+      {[0, 1, 2].map((i) => (
+        <div key={i} className={[styles.mailRow, i === 1 && styles.mailRowActive].filter(Boolean).join(' ')}>
+          <span className={styles.mailDot} />
+          <span className={styles.mailLines}>
+            <Greek w="58%" tone="title" />
+            <Greek w="82%" />
+          </span>
+          {i === 1 && (
+            <span className={styles.actionChip}>
+              <svg className={styles.plusIcon} viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+              <Greek w="26px" tone="chip" />
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function FilesLeaf() {
+  return (
+    <div className={styles.files}>
+      {[0, 1, 2].map((i) => (
+        <div key={i} className={styles.fileRow}>
+          <span className={[styles.fileIcon, i === 0 && styles.folderIcon].filter(Boolean).join(' ')} />
+          <span className={styles.fileLines}>
+            <Greek w={i === 1 ? '72%' : '54%'} tone="title" />
+          </span>
+          {i === 1 && (
+            <span className={[styles.actionChip, styles.recordChip].join(' ')}>
+              <svg className={styles.linkIcon} viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6L12.5 17.5" />
+              </svg>
+              <Greek w="26px" tone="chip" />
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const VARIANTS = {
+  contacts: {Component: ContactsLeaf, label: 'Contacts leaf'},
+  calendar: {Component: CalendarLeaf, label: 'Calendar leaf'},
+  mail:     {Component: MailLeaf,     label: 'Mail leaf'},
+  files:    {Component: FilesLeaf,    label: 'Files leaf'},
+};
+
+export default function LeafMock({leaf, size = 'md', caption, className}) {
+  const variant = VARIANTS[leaf];
+  if (!variant) {
+    return (
+      <div className={styles.lm}>
+        <div className={[styles.frame, styles[`size-${size}`], className].filter(Boolean).join(' ')}>
+          <div className={styles.empty}>Unknown leaf: {leaf}</div>
+        </div>
+      </div>
+    );
+  }
+  const {Component, label} = variant;
+  return (
+    <div className={styles.lm}>
+      <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
+        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
+          <Component />
+        </div>
+        {caption && (
+          <figcaption className={styles.caption}>
+            {caption === true ? label : caption}
+          </figcaption>
+        )}
+      </figure>
+    </div>
+  );
+}

package/src/components/LeafMock/LeafMock.module.css

@@ -0,0 +1,237 @@
+/**
+ * <LeafMock /> styles. Scoped under `.lm` (display: contents), the
+ * same convention as AppMock's `.am`, so the file also works as a
+ * plain global stylesheet for static specimen pages.
+ *
+ * Tokens only. Accent discipline per leaf: contacts sync = mint,
+ * calendar event bar = lavender, mail action chip = mint, files
+ * record chip = forest. No orange anywhere in this component.
+ */
+
+.lm { display: contents; }
+
+.lm .figure {
+  margin: 0;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+  max-width: 100%;
+}
+
+.lm .frame {
+  width: 100%;
+  max-width: 360px;
+  aspect-ratio: 4 / 3;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  font-family: var(--conduction-typography-font-family-body);
+}
+.lm .size-sm { max-width: 240px; }
+.lm .size-md { max-width: 360px; }
+
+.lm .caption {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--c-cobalt-400);
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.lm .empty {
+  color: var(--c-cobalt-400);
+  font-size: 13px;
+}
+
+/* ---- Greeked lines ---- */
+
+.lm .greek { display: block; height: 3px; border-radius: 1px; background: var(--c-cobalt-200); }
+.lm .greek-title { height: 4px; background: var(--c-cobalt-700); }
+.lm .greek-chip { height: 3px; background: currentColor; opacity: 0.8; }
+
+/* ---- Contacts leaf ---- */
+
+.lm .contacts {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+}
+.lm .contactList {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+.lm .contactRow { display: flex; align-items: center; gap: 8px; }
+.lm .hexAvatar {
+  width: 20px;
+  height: 23px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-300);
+  flex-shrink: 0;
+}
+.lm .hexAvatar-1 { background: var(--c-lavender-300); }
+.lm .hexAvatar-2 { background: var(--c-cobalt-200); }
+.lm .contactLines { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+
+.lm .syncArrow {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  fill: none;
+  stroke: var(--c-mint-500);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.lm .phone {
+  width: 44px;
+  height: 82px;
+  border: 2px solid var(--c-cobalt-300);
+  border-radius: 9px;
+  padding: 6px 5px;
+  flex-shrink: 0;
+}
+.lm .phoneScreen {
+  height: 100%;
+  border-radius: 4px;
+  background: var(--c-cobalt-50);
+  padding: 6px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.lm .phoneRow { display: block; height: 3px; border-radius: 1px; background: var(--c-cobalt-200); }
+
+/* ---- Calendar leaf ---- */
+
+.lm .calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+  max-width: 220px;
+}
+.lm .monthGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 5px;
+}
+.lm .day {
+  aspect-ratio: 1;
+  border-radius: 3px;
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+}
+.lm .dayActive { background: var(--c-lavender-300); border-color: var(--c-lavender-500); }
+
+.lm .eventChip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-1);
+  padding: 7px 9px;
+}
+.lm .eventBar {
+  width: 4px;
+  align-self: stretch;
+  border-radius: 2px;
+  background: var(--c-lavender-500);
+  flex-shrink: 0;
+}
+.lm .eventLines { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.lm .linkIcon {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  color: var(--c-cobalt-400);
+}
+
+/* ---- Mail leaf ---- */
+
+.lm .mail {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.lm .mailRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 9px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+}
+.lm .mailRowActive { background: var(--c-cobalt-50); border-color: var(--c-cobalt-100); }
+.lm .mailDot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--c-cobalt-200);
+  flex-shrink: 0;
+}
+.lm .mailLines { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+
+.lm .actionChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border-radius: var(--radius-pill);
+  background: var(--c-mint-500);
+  color: white;
+  flex-shrink: 0;
+}
+.lm .plusIcon {
+  width: 10px;
+  height: 10px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+}
+.lm .actionChip .linkIcon { color: white; width: 10px; height: 10px; }
+
+/* ---- Files leaf ---- */
+
+.lm .files {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+.lm .fileRow { display: flex; align-items: center; gap: 8px; }
+.lm .fileIcon {
+  width: 16px;
+  height: 19px;
+  border-radius: 2px;
+  background: var(--c-cobalt-200);
+  flex-shrink: 0;
+}
+.lm .folderIcon {
+  height: 14px;
+  background: var(--c-cobalt-300);
+  border-radius: 2px 4px 2px 2px;
+}
+.lm .fileLines { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.lm .recordChip { background: var(--c-forest-500); }

package/src/components/RotatingCards/RotatingCards.module.css

@@ -16,7 +16,9 @@
 }
 
 /* ---------- Header ---------- */
-.head { max-width: 70ch; margin: 0 0 var(--space-8); }
+/* Full-width head: only the lede keeps the 70ch reading measure, so
+   the title fills the line instead of balance-wrapping early. */
+.head { margin: 0 0 var(--space-8); }
 .eyebrow {
   display: inline-flex; align-items: center; gap: var(--space-2);
   font-family: var(--conduction-typography-font-family-code);
@@ -28,8 +30,9 @@
 .title {
   font-size: 40px; font-weight: 700; letter-spacing: -0.02em;
   line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
+  text-wrap: pretty; /* run full width; no artificial two-line balance */
 }
-.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; }
+.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; max-width: 70ch; }
 
 /* ---------- The stack ---------- */
 .stack {

package/src/components/Showcase/Showcase.module.css

@@ -12,7 +12,9 @@
 }
 
 /* ---------- Header ---------- */
-.head { max-width: 70ch; margin: 0 0 var(--space-8); }
+/* Full-width head: only the lede keeps the 70ch reading measure, so
+   the title fills the line instead of balance-wrapping early. */
+.head { margin: 0 0 var(--space-8); }
 .eyebrow {
   display: inline-flex; align-items: center; gap: var(--space-2);
   font-family: var(--conduction-typography-font-family-code);
@@ -24,8 +26,9 @@
 .title {
   font-size: 40px; font-weight: 700; letter-spacing: -0.02em;
   line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
+  text-wrap: pretty; /* run full width; no artificial two-line balance */
 }
-.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; }
+.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; max-width: 70ch; }
 
 /* ---------- Body ---------- */
 .body { display: grid; gap: var(--space-8); align-items: stretch; }

package/src/components/WidgetShelf/WidgetShelf.jsx

@@ -27,9 +27,19 @@
  *     ]}
  *   />
  *
- * Layout: 2 or 3 columns depending on widget count, responsive
- * to viewport. Each card has the panel (preview) at the top,
- * title + description below.
+ * Layout: by default a single-row carousel that auto-scrolls slowly
+ * (marquee-style, seamless loop via a duplicated track), pausing on
+ * hover and on keyboard focus. The duplicate copy is aria-hidden so
+ * assistive tech reads each widget once; the first copy keeps normal
+ * semantics. `prefers-reduced-motion: reduce` collapses the carousel
+ * to the static wrapping grid, which is also what `carousel={false}`
+ * renders: 2 or 3 columns depending on widget count, responsive to
+ * viewport. Each card has the panel (preview) at the top, title +
+ * description below.
+ *
+ * Props (beyond eyebrow/title/lede/widgets/columns/className):
+ *   - carousel: boolean (default true) — false renders the static grid
+ *   - speed:    number — seconds per full carousel loop (default 45)
  */
 
 import React from 'react';
@@ -41,11 +51,20 @@ export default function WidgetShelf({
   lede,
   widgets = [],
   columns,
+  carousel = true,
+  speed = 45,
   className,
 }) {
   const cols = columns || (widgets.length >= 4 ? 3 : Math.min(widgets.length, 3));
+  const cards = widgets.map((w, i) => (
+    <article key={i} className={styles.card}>
+      <div className={styles.panel}>{w.panel}</div>
+      {w.title && <h3 className={styles.cardTitle}>{w.title}</h3>}
+      {w.desc && <p className={styles.cardDesc}>{w.desc}</p>}
+    </article>
+  ));
   return (
-    <section className={[styles.shelf, className].filter(Boolean).join(' ')}>
+    <section className={[styles.shelf, carousel && styles.carousel, className].filter(Boolean).join(' ')}>
       {(eyebrow || title || lede) && (
         <header className={styles.head}>
           {eyebrow && <div className={styles.eyebrow}><span className={styles.h}></span>{eyebrow}</div>}
@@ -53,15 +72,35 @@ export default function WidgetShelf({
           {lede && <p className={styles.lede}>{lede}</p>}
         </header>
       )}
-      <div className={[styles.grid, styles[`cols-${cols}`]].join(' ')}>
-        {widgets.map((w, i) => (
-          <article key={i} className={styles.card}>
-            <div className={styles.panel}>{w.panel}</div>
-            {w.title && <h3 className={styles.cardTitle}>{w.title}</h3>}
-            {w.desc && <p className={styles.cardDesc}>{w.desc}</p>}
-          </article>
-        ))}
-      </div>
+      {carousel ? (
+        <div className={styles.viewport}>
+          <div
+            className={styles.track}
+            style={{'--ws-speed': `${speed}s`}}
+          >
+            <div className={[styles.group, styles[`cols-${cols}`]].join(' ')}>
+              {cards}
+            </div>
+            {/* Seamless-loop duplicate. Hidden from assistive tech so
+                each widget is announced once; under reduced motion the
+                CSS removes it entirely and the first group becomes the
+                static grid. */}
+            <div className={[styles.group, styles.dup].join(' ')} aria-hidden="true">
+              {widgets.map((w, i) => (
+                <article key={i} className={styles.card}>
+                  <div className={styles.panel}>{w.panel}</div>
+                  {w.title && <h3 className={styles.cardTitle}>{w.title}</h3>}
+                  {w.desc && <p className={styles.cardDesc}>{w.desc}</p>}
+                </article>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className={[styles.grid, styles[`cols-${cols}`]].join(' ')}>
+          {cards}
+        </div>
+      )}
     </section>
   );
 }

package/src/components/WidgetShelf/WidgetShelf.module.css

@@ -1,7 +1,12 @@
 /**
- * <WidgetShelf /> styles. Header + responsive grid of widget-preview
- * cards. Each card has a tinted panel containing the widget mock,
- * with title + description below.
+ * <WidgetShelf /> styles. Header + widget-preview cards. Each card
+ * has a tinted panel containing the widget mock, with title +
+ * description below.
+ *
+ * Two layouts: the default single-row carousel (slow marquee, track
+ * duplicated for a seamless loop, paused on hover/focus) and the
+ * static responsive grid (carousel={false}, and what
+ * prefers-reduced-motion collapses the carousel to).
  */
 
 .shelf {
@@ -11,7 +16,11 @@
   font-family: var(--conduction-typography-font-family-body);
 }
 
-.head { max-width: 70ch; margin: 0 0 var(--space-8); }
+/* The head runs full width so the title can fill the line; only the
+   lede (body text) keeps the 70ch reading measure. Capping the whole
+   head at 70ch forced titles into an early wrap, which the base
+   h1-h6 `text-wrap: balance` then split into two even lines. */
+.head { margin: 0 0 var(--space-8); }
 .eyebrow {
   display: inline-flex; align-items: center; gap: var(--space-2);
   font-family: var(--conduction-typography-font-family-code);
@@ -23,8 +32,9 @@
 .title {
   font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
   line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
+  text-wrap: pretty; /* run full width; no artificial two-line balance */
 }
-.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; }
+.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; max-width: 70ch; }
 
 .grid {
   display: grid;
@@ -34,6 +44,75 @@
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
 @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
 
+/* ---- Carousel (default) ----
+ *
+ * Marquee mechanics: the track holds two identical groups of cards
+ * and translates from 0 to -50% on a slow linear loop; because each
+ * group carries a trailing padding equal to the card gap, -50% of
+ * the track lands exactly one group later and the loop is seamless.
+ * The duplicate group is aria-hidden in the JSX so screen readers
+ * hear each widget once. Hover or keyboard focus anywhere in the
+ * viewport pauses the animation. */
+
+.viewport {
+  overflow: hidden;
+  /* Soft fade at both edges so cards enter/exit gently. */
+  -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
+  mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
+}
+
+.track {
+  display: flex;
+  width: max-content;
+  animation: wsMarquee var(--ws-speed, 45s) linear infinite;
+}
+
+.viewport:hover .track,
+.viewport:focus-within .track {
+  animation-play-state: paused;
+}
+
+.group {
+  display: flex;
+  gap: var(--space-5);
+  padding-right: var(--space-5);
+}
+
+.carousel .card {
+  width: 340px;
+  flex: 0 0 auto;
+}
+@media (max-width: 700px) { .carousel .card { width: 280px; } }
+
+@keyframes wsMarquee {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+
+/* Reduced motion: drop the duplicate copy and render the first group
+   as the static wrapping grid — identical to carousel={false}. The
+   .cols-2 / .cols-3 class on the group supplies the column template. */
+@media (prefers-reduced-motion: reduce) {
+  .viewport {
+    overflow: visible;
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+  .track { animation: none; display: block; width: 100%; }
+  .group {
+    display: grid;
+    gap: var(--space-5);
+    padding-right: 0;
+    width: 100%;
+  }
+  /* After .group so its display wins the equal-specificity contest. */
+  .group.dup { display: none; }
+  .carousel .card { width: auto; }
+}
+@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
+  .group { grid-template-columns: 1fr; }
+}
+
 .card {
   background: white;
   border: 1px solid var(--c-cobalt-100);

package/src/components/index.js

@@ -77,6 +77,10 @@ export {default as ComposeBlock} from './ComposeBlock/ComposeBlock.jsx';
 export {default as AppsGrid} from './AppsGrid/AppsGrid.jsx';
 export {default as AppMock} from './AppMock/AppMock.jsx';
 export {default as WidgetMock} from './WidgetMock/WidgetMock.jsx';
+export {default as FlowMock} from './FlowMock/FlowMock.jsx';
+export {default as LeafMock} from './LeafMock/LeafMock.jsx';
+export {default as BuildMock} from './BuildMock/BuildMock.jsx';
+export {default as KanbanMock} from './KanbanMock/KanbanMock.jsx';
 export {default as SidebarMock} from './SidebarMock/SidebarMock.jsx';
 export {default as MockScene} from './MockScene/MockScene.jsx';
 export {default as IntegrationIcon} from './IntegrationIcon/IntegrationIcon.jsx';

package/src/components/primitives/SectionHead.module.css

@@ -27,6 +27,12 @@
   letter-spacing: -0.02em;
   color: var(--c-cobalt-900);
   margin: 0;
+  /* Section titles run the full line before wrapping. The kit's base
+     h1-h6 rule sets `text-wrap: balance`, which splits a title into
+     two near-equal lines even when it fits comfortably on one; the
+     PO decision is that section titles fill the available width.
+     `pretty` keeps orphan control without the artificial balance. */
+  text-wrap: pretty;
 }
 @media (max-width: 700px) { .title { font-size: 32px; } }