sheleg-design-skill 1.46.0 → 1.47.0

package/CHANGELOG.md

@@ -6,6 +6,92 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.47.0] - 2026-08-22
+
+### `patchbay` — the thirty-second pack, and the first read off a page with no tokens at all
+
+Measured 2026-08-22 off <https://nautilustrader.io/> with `getComputedStyle` on the running
+page. Named for its register under ADR-0001 — named ports, drawn cords, live signal — not for
+the source brand.
+
+**The reference declares zero custom properties.** It is Material UI with Emotion, so there was
+no author-side vocabulary to lift and every value in the token layer was read off a painted
+element. Two of the pack's findings come straight out of that: the MUI theme's own defaults
+leak through where a variant was not overridden, so the page's **59.2px hero is tracked
++0.555px** — positive tracking on a display line, two selectors away from designed styles that
+track −0.3px — and **fourteen text nodes render in Roboto**, which is not one of the three fonts
+the page loads.
+
+**The signature element is a live architecture diagram, and it is measured rather than
+admired.** 21 cords carrying 32 particles, distributed 12 / 7 / 2 at one, two and three
+particles each. Every multi-particle cord divides its own period evenly: the seven pairs are
+offset by exactly half their duration — 1.25s on a 2.5s cord, all seven — and both triples by a
+third, at 0.4 / 1.2333 / 2.0667 and 0.5 / 1.3333 / 2.1667. Consecutive cords start 0.1s apart,
+so the board has no visible beginning. Each cord is an inline `<svg>` with a path, an endpoint
+dot, an arrowhead marker and one `<circle>` per particle driven by `<animateMotion>` — no
+JavaScript, no library, one element per dot.
+
+Three corrections the arithmetic produced:
+
+* **The reference paints two muted greys and only one of them is legible.** `#848895` is
+  4.86:1; `#686B75`, in 13 text nodes, is **3.23:1**. There is no room for a corrected third
+  step below 4.86, so the pack ships **one** muted tier and says which token replaces the other
+  in each of its two uses.
+* **The diagram's group labels are 2.70:1** — 9px mono uppercase at 30% white, the least
+  legible text on the page. Corrected to 50%, which is 5.19:1 and which the reference already
+  uses for its own diagram legend further down. The ladder already had the step.
+* **The status set is derived and its constraint is unusual.** The accent is a mint-cyan, so
+  the ordinary dark-UI green collides with it under dichromacy: `instrument-console`'s `#46D39A`
+  separates from this accent by **3.51** under simulated CVD against a floor of 8. Every
+  candidate that clears the floor is light, which is why `--ok` sits above `--warn` and
+  `--danger` in luminance rather than beside them.
+
+### The reduced-motion doctrine gained the three holes this page measures
+
+`MOTION_DOCTRINE.md` §9 has always said an animation without a reduced-motion path is a bug.
+What it did not say is that the usual one-rule remedy — zero every duration — **cannot reach
+three layers**, all three of them live on this one reference:
+
+* **It cannot stop SMIL.** `<animateMotion>` is not a CSS animation and does not read
+  `animation-duration`. All 32 particles keep moving with the preference on. `pauseAnimations()`
+  is the fix and it has to be wired by hand; `kits/patchbay/src/Diagram.tsx` wires it.
+* **It cannot stop JavaScript.** The reference's reveal writes `opacity` and `transform` inline
+  per scroll frame across 48 wrappers, so with the preference on the content is **still hidden
+  until scrolled**.
+* **It teleports a loop that does not end where it began.** Collapsing to `.01ms` jumps to the
+  final keyframe. That is safe here only because all four ambient light loops are written with
+  `0%` and `100%` identical — so write perpetual loops that way and the cheap remedy stops being
+  a gamble.
+
+### What the reference gets wrong, kept because a pack that only admires is not evidence
+
+* **`0+` renders on a live page, in two separate sections.** The count-up animates from zero and
+  has no state for *the fetch did not return*, so the failure renders as a precise, confident,
+  wrong number under `GITHUB STARS`, `DOWNLOADS`, `DISCORD MEMBERS` and `TESTING`. `Stat` in the
+  kit refuses: an empty value renders the skeleton and announces itself, never a zero.
+* **The reveal freezes on a programmatic jump.** Measured at eight scroll positions from 700px
+  to 1700px reached with `scrollTo`: the target stayed `opacity: 0` at every one and the section
+  never appeared. Reached by wheel, it reveals normally — which is what makes it a deep-link,
+  anchor and print-stylesheet defect rather than a broken page.
+
+### Three numbers that were already stale beside this change
+
+Found while registering the pack, none of them this run's regression: the slash command said
+**"the twenty-nine are"** over a list of thirty-one — invisible to the count gate because the
+numeral named no noun, which is the exact failure the skeleton's rule 6 warns about, so it now
+names one; `SURFACE_COMPOSITION.md` said **sixteen** token layers declare `@role non-text:` and
+the tree says nineteen; and `FIGMA_BRIDGE.md` said **ten** packs ship a theme twin against a
+derived eleven. The widened remainder in `SKILL.md` went stale for the **third consecutive
+release** and the gate caught it, which is what that check was written for.
+
+### ADR-0001 now records that it was broken twice
+
+`outrank` and `babylove` both shipped on 2026-08-21 carrying their source brand as the pack
+name, and neither run added an entry. Recorded rather than left to be rediscovered — a register
+showing an unbroken chain of eleven applications was making a claim the library does not
+support. **Neither is renamed:** the ADR's own Consequences make a pack name a public API across
+four channels, which is what makes renaming after release a breaking change.
+
 ## [1.46.0] - 2026-08-22
 
 ### `babylove` — the thirty-first pack, and the other end of the same question

package/README.md

@@ -11,7 +11,7 @@ problem — invented colors, six accent hues, dark mode retrofitted later.
 
 This skill is the taste layer. It gives a coding agent **one motion
 methodology** for cinematic, scroll-driven pages, **a motion doctrine** that
-decides whether to animate before it decides how, and **thirty-one locked style
+decides whether to animate before it decides how, and **thirty-two locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -51,6 +51,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `briefing-room` | dark 16:9 deck: one blue hue top to bottom (OKLCH), mono slide furniture, 1-bit dithered art, claims as titles | investor & board decks, technical briefings, talks published as a page |
 | `atrium` | warm cream daylight field with no dark bands, one terracotta accent, light serif with italic asides, fluted-glass hero over photography | consumer health, longevity & diagnostics, wellness, premium care, high-trust DTC |
 | `babylove` | white with one orange in six steps and nothing else declared — seven tokens over Tailwind's defaults, two card levels nested at 16 and 8px, no shadow and no dark theme | SEO and AI-visibility SaaS with a long time-to-value — the minimal-system answer to the same brief `outrank` answers maximally |
+| `patchbay` | near-black under a faint 40px grid, one mint-cyan doing every functional job, elevation made of 8% hairlines with no shadow anywhere, and a live architecture diagram whose cords carry SMIL particles | engines, message buses, pipelines, schedulers and open-source front doors — anything whose argument is an architecture rather than a promise |
 | `outrank` | white field with one violet that carries text in both directions, a 5px light ring standing in for a button shadow, and two type families split by how long a thing is read | SEO and growth SaaS, agent-run back-office — the pack for a product that ships a landing and a dashboard at once |
 | `orchard` | warm oat field of rounded slabs, sage brand + one candy-orange action, rounded geometric display, soft-3D pills built from inset light | friendly consumer biotech, DTC wellness, testing kits & supplements |
 | `field-notes` | warm green-cast paper ruled by hairlines, one rust accent, a hero that dissolves into the page instead of ending, numbered mono eyebrows, crop marks, colour that encodes how a claim is known | open-source & developer tools sold on auditability — code intelligence, provenance, evals, agent memory |
@@ -151,7 +152,7 @@ skills.
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The thirty-one style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirty-two style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
 | `styles/tokens/*.css` | The ready-made token layer per pack, copied verbatim instead of transcribed (`workbench` and `field-notes` each ship a light `:root` plus a `data-theme="dark"` twin) |
 | `styles/STYLE_PACK_TEMPLATE.md` | The pack contract as a skeleton, so a new style is authored against the same headings rather than improvised |
 
@@ -222,7 +223,7 @@ cd ./ds-workbench && npm install && npm run build
 then `/design-sync` in that directory, from Claude Code. Three layers cross: the
 pack's **bans** as the design system's own README, `styles.css` built from
 `tokens/<pack>.css` verbatim, and the components — a six-name spine that is
-identical in all thirty-one kits, so switching packs swaps identity rather than API,
+identical in all thirty-two kits, so switching packs swaps identity rather than API,
 plus each pack's signature parts. **Motion does not cross**, exactly as it does
 not cross into Figma: a kit is the static half of a pack, and saying so is what
 stops an agent inventing motion to fill the silence.
@@ -268,7 +269,7 @@ a pack's four widened sections used to make two gates *quieter* and still green.
 One honest limit: the npx installer is checked by asserting its runtime bundle
 walker exists, not by reading a file list — it has none by design. What proves
 it ships the right files is CI, which installs the bundle through **both**
-installers and `diff -r`s the result against the source, then builds all thirty-one
+installers and `diff -r`s the result against the source, then builds all thirty-two
 kits.
 
 `test/scenarios.md` (T1–T30) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,10 +234,11 @@ ${c("bold", "What it installs")}
   DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
                        what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              thirty-one style packs — instrument-console (dark console),
+  styles/              thirty-two style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
                        product UI), briefing-room (dark 16:9 presentation deck),
-                       atrium (warm cream consumer health), babylove (white +
+                       atrium (warm cream consumer health), patchbay (dark live
+                       schematic), babylove (white +
                           one orange, seven tokens over Tailwind defaults),
                           outrank (white +
                           one violet, a landing and a dashboard in one brand),

package/cursor/rules/sheleg-design.mdc

@@ -15,7 +15,9 @@ console; editorial-luxury — warm editorial; workbench — quiet light/dark
 product UI for dashboards and tools, used standalone without the cinematic
 motion layer; briefing-room — dark 16:9 presentation deck, standalone, slides
 never animate; atrium — warm cream consumer-health field, one terracotta
-accent, fluted-glass hero; babylove — seven brand tokens over Tailwind
+accent, fluted-glass hero; patchbay — a dark live schematic, one mint-cyan, 8% hairlines,
+no shadow, an architecture diagram whose cords carry SMIL particles;
+babylove — seven brand tokens over Tailwind
 defaults, two nested card levels, first-class disconnected states, for
 SEO and AI-visibility SaaS; outrank — a marketing page and a working tool in
 one brand, white with one violet, for SEO and growth SaaS; orchard — friendly

package/kits/patchbay/.design-sync/config.json

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/patchbay",
+  "globalName": "ShelegPatchbay",
+  "shape": "package",
+  "buildCmd": "npm run build",
+  "srcDir": "src",
+  "tsconfig": "tsconfig.json",
+  "cssEntry": "src/styles.css",
+  "docsDir": "src",
+  "readmeHeader": ".design-sync/conventions.md",
+  "guidelinesGlob": [
+    "guidelines/*.md"
+  ]
+}

package/kits/patchbay/.design-sync/conventions.md

@@ -0,0 +1,38 @@
+# Patchbay — what the design agent may not do
+
+A near-black field, one mint-cyan, and a live schematic, measured off
+<https://nautilustrader.io/> on 2026-08-22 with `getComputedStyle`. The
+reference declares no custom properties at all, so every value in the token
+layer was read off a painted element rather than lifted from a stylesheet.
+
+## Bans, each with a measurement behind it
+
+- **No shadow, anywhere.** Not on a card, not on a button, not on the nav. The
+  reference paints none. Elevation is the hairline ladder — 8% white — and a
+  shadow reads as a different design system bolted on.
+- **No white on the accent.** `#00CFBE` takes white at **1.97:1**. A filled
+  accent control takes `--on-accent` (9.81:1). The reference never fills one.
+- **No second functional hue.** `--accent-far` is one stop in one button's
+  gradient. In a diagram, colour means *belongs to the system*; a second hue
+  makes the drawing lie.
+- **No `opacity` for a disabled state.** It composites against whatever is
+  behind it and the resulting ratio is unknowable. Name the pair.
+- **No 30% white label.** The reference sets its diagram group labels at 9px in
+  `rgba(255,255,255,.30)` — **2.70:1**. Use 50%, which is 5.19:1 and which the
+  reference already uses for its own legend.
+- **No counter that renders zero when the fetch failed.** The reference ships
+  `0+` under `GITHUB STARS` on a live page. `Stat` here refuses.
+- **No SMIL animation without a pause path.** CSS `animation-duration` does not
+  reach `<animateMotion>`, so a blanket reduced-motion rule cannot stop it.
+  `Diagram` calls `pauseAnimations()`.
+
+## Two shapes that are easy to get wrong
+
+- **The card is a light, not a fill.** `radial-gradient(circle at 50% 0,
+  --card-lit, --card-base)` with a 1px border in the accent at 14%. The centre
+  stop is a teal-black, so the card reads as lit from its top edge. Flattening
+  it to a solid background loses the whole surface idea.
+- **The node's tint is its only variable.** Every port in the diagram is the
+  same box at the same radius with the same type. The ones that belong to the
+  system are tinted with the accent; everything else is tinted white. Changing
+  the size or the radius to signal importance breaks the drawing's grammar.

package/kits/patchbay/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@sheleg-design/patchbay",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": { ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" } },
+  "files": ["dist", "src"],
+  "scripts": { "build": "tsc -p tsconfig.json" },
+  "peerDependencies": { "react": ">=18" },
+  "devDependencies": { "typescript": "^5.6.0", "@types/react": "^18.3.0" }
+}

package/kits/patchbay/src/Button.md

@@ -0,0 +1,17 @@
+---
+category: Actions
+---
+
+Three variants and none of them is a fill. `primary` is a 135° accent-to-blue
+wash behind a **1.5px `--accent-rim`** border — 3.10:1, which clears the
+boundary floor by 0.10 — with the label in `--ink`. Do not thin that border and
+do not drop its alpha: it is the only edge the control has.
+
+Disabled is a named pair (`--ink-soft` on `--wash`, 4.60:1), never an
+`opacity` multiplier, because a multiplier composites against whatever sits
+behind and the ratio then cannot be computed.
+
+```tsx
+<Button variant="primary">Explore docs</Button>
+<Button>Join the channel</Button>
+```

package/kits/patchbay/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the accent fill — at most one per view. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+/** In this pack `primary` is a WASH and a 1.5px rim, not a fill — the reference
+ *  never fills its accent, because white on `--accent` is 1.97:1. */
+export function Button({
+  variant = 'secondary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  children,
+  className,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['pb-btn', `pb-btn--${variant}`, `pb-btn--${size}`, className].filter(Boolean).join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/patchbay/src/Card.md

@@ -0,0 +1,18 @@
+---
+category: Surfaces
+---
+
+**A light, not a fill.** The background is
+`radial-gradient(circle at 50% 0, --card-lit, --card-base)` — a teal-black at
+the top edge falling to near-black — with a 1px border in the accent at 14% and
+no shadow at any state. The card reads as illuminated rather than raised.
+
+Padding is 24px, which is larger than the 14px radius, so **an element flush
+against that padding has no concentric radius**: it is a rectangle. Reaching for
+`--r-node` there produces two curves that are not concentric.
+
+```tsx
+<Card title="Message bus" meta="pub/sub · req/res">
+  <p>Every engine event crosses it.</p>
+</Card>
+```

package/kits/patchbay/src/Card.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export interface CardProps {
+  title?: string;
+  /** Right-aligned metadata on the title row: a count, an id, a timestamp. */
+  meta?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ title, meta, children, className }: CardProps) {
+  return (
+    <section className={['pb-card', className].filter(Boolean).join(' ')}>
+      {(title || meta) && (
+        <header className="pb-card__head">
+          {title && <h3 className="pb-card__title">{title}</h3>}
+          {meta && <span className="pb-card__meta">{meta}</span>}
+        </header>
+      )}
+      {children}
+    </section>
+  );
+}

package/kits/patchbay/src/Chip.md

@@ -0,0 +1,15 @@
+---
+category: Data
+---
+
+The pack's version chip: a pill at `--accent-wash` behind a 25% accent border,
+set in the mono stack at 12px/500 in `--accent` — which it may be, because the
+accent is 8.74:1 on the field.
+
+Its job in the hero is to carry a **machine-checkable fact**: a package name, a
+version, an age. That is the pack's opening move — the page proves it is alive
+instead of claiming it.
+
+```tsx
+<Chip tone="accent">pypi · v2.0.0rc3 · 1d ago</Chip>
+```

package/kits/patchbay/src/Chip.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface ChipProps {
+  children: ReactNode;
+  selected?: boolean;
+  tone?: 'neutral' | 'accent';
+  className?: string;
+}
+
+export function Chip({ children, selected = false, tone = 'neutral', className }: ChipProps) {
+  return (
+    <span
+      className={['pb-chip', tone === 'accent' ? 'pb-chip--accent' : undefined, className]
+        .filter(Boolean)
+        .join(' ')}
+      aria-pressed={selected || undefined}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/patchbay/src/Diagram.md

@@ -0,0 +1,39 @@
+---
+category: Signature
+---
+
+**The live architecture diagram** — the thing a page in this pack is remembered
+by, and the reason the pack is called `patchbay`.
+
+Measured off the reference so it can be rebuilt: **21 cords carrying 32
+particles**, distributed 12 cords with one, 7 with two, 2 with three. Every
+multi-particle cord divides its own period **evenly** — the seven pairs are
+offset by exactly half their duration (1.25s on a 2.5s cord, all seven) and both
+triples by a third (0.4 / 1.2333 / 2.0667 and 0.5 / 1.3333 / 2.1667). That is
+what `(n * dur) / count` reproduces. Consecutive cords start **0.1s** apart, so
+the board has no visible beginning.
+
+Three things that will bite:
+
+- **`<animateMotion>` has no `keyPoints`**, so a particle moves at a constant
+  *parametric* rate rather than a constant visual speed — it appears to speed up
+  through the curved middle of a bezier. On shallow curves that reads as life; on
+  a tight curve it reads as a bug. Keep the control points shallow.
+- **CSS cannot pause SMIL.** `animation-duration: .01ms` under
+  `prefers-reduced-motion` does not reach these dots, which is exactly what the
+  reference ships. The effect above calls `pauseAnimations()` and listens for the
+  preference changing.
+- **`kind="replay"` is a different EDGE, not a quieter one.** The reference uses
+  dashed for its event-replay path while every live edge is solid. Dashing a
+  cord to de-emphasise it makes the drawing say something untrue.
+
+The diagram is `role="img"` with a label, and the port names must also exist as
+real text in the DOM beside it so a screen reader gets the topology as a list.
+
+```tsx
+<Diagram width={943} height={713} title="Engine topology" cords={[
+  { d: 'M 60 110 C 60 150, 87 130, 87 170', dur: 2.5, particles: 2 },
+  { d: 'M 87 170 C 87 240, 300 260, 470 300', dur: 3.5 },
+  { d: 'M 470 300 C 300 380, 120 360, 87 300', dur: 3, kind: 'replay' },
+]} />
+```

package/kits/patchbay/src/Diagram.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+
+export interface DiagramCord {
+  /** An SVG path command string. Keep the control points shallow — see the doc. */
+  d: string;
+  /** Seconds for one traversal. The pack's measured band is 2–3.5s. */
+  dur?: number;
+  /** Particles on this cord. They are phase-spaced evenly across `dur`. */
+  particles?: 1 | 2 | 3;
+  /** A dashed cord is a DIFFERENT KIND of edge, never a quieter one. */
+  kind?: 'live' | 'replay';
+}
+
+export interface DiagramProps {
+  width: number;
+  height: number;
+  cords: DiagramCord[];
+  /** Index of this cord in the board, used for the 0.1s per-cord stagger. */
+  children?: ReactNode;
+  title: string;
+  className?: string;
+}
+
+/** The pack's signature element.
+ *
+ *  Two things here are load-bearing and easy to lose:
+ *
+ *  1. Particles are SVG `<animateMotion>`, which is declarative — no rAF loop,
+ *     no library, one element per dot.
+ *  2. SMIL does NOT read CSS `animation-duration`, so a
+ *     `prefers-reduced-motion` media query cannot stop it. That is the defect
+ *     the reference ships. `pauseAnimations()` below is the fix, and it is the
+ *     reason this component needs an effect at all.
+ */
+export function Diagram({ width, height, cords, children, title, className }: DiagramProps) {
+  const root = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    const svg = root.current;
+    if (!svg) return;
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const apply = () => (query.matches ? svg.pauseAnimations() : svg.unpauseAnimations());
+    apply();
+    query.addEventListener('change', apply);
+    return () => query.removeEventListener('change', apply);
+  }, []);
+
+  return (
+    <svg
+      ref={root}
+      className={['pb-diagram', className].filter(Boolean).join(' ')}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      role="img"
+      aria-label={title}
+    >
+      <defs>
+        <marker id="pb-arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+          <polygon className="pb-diagram__head" points="0 0, 6 3, 0 6" />
+        </marker>
+      </defs>
+      {cords.map((cord, i) => {
+        const dur = cord.dur ?? 2.5;
+        const count = cord.particles ?? 1;
+        const stagger = (i % 10) * 0.1;
+        return (
+          <g key={i}>
+            <path
+              className={`pb-diagram__cord pb-diagram__cord--${cord.kind ?? 'live'}`}
+              d={cord.d}
+              markerEnd="url(#pb-arrow)"
+            />
+            {Array.from({ length: count }, (unused, n) => (
+              <circle key={n} className="pb-diagram__dot" r="2">
+                <animateMotion
+                  path={cord.d}
+                  dur={`${dur}s`}
+                  begin={`${(stagger + (n * dur) / count).toFixed(4)}s`}
+                  repeatCount="indefinite"
+                />
+              </circle>
+            ))}
+          </g>
+        );
+      })}
+      {children}
+    </svg>
+  );
+}

package/kits/patchbay/src/Heading.md

@@ -0,0 +1,15 @@
+---
+category: Foundations
+---
+
+Tracked **negative above 24px and zero below** — which is the pack's decision,
+not the reference's behaviour. MUI's theme default `letter-spacing: 0.00938em`
+leaks into everything the reference did not override, so its 59.2px hero is
+tracked **+0.555px**: positive tracking on a display line, two selectors away
+from designed styles that track −0.3px.
+
+The display face steps rather than clamps: 2.8rem below 900px, 3.7rem above.
+
+```tsx
+<Heading level={1}>The fastest open-source trading engine</Heading>
+```

package/kits/patchbay/src/Heading.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export interface HeadingProps {
+  /** 1 = page title (28px), 2 = section (20px), 3 = card title (15px). */
+  level?: 1 | 2 | 3;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Heading({ level = 2, children, className }: HeadingProps) {
+  const Tag = (['h1', 'h2', 'h3'] as const)[level - 1];
+  return <Tag className={['pb-h', `pb-h--${level}`, className].filter(Boolean).join(' ')}>{children}</Tag>;
+}

package/kits/patchbay/src/Rule.md

@@ -0,0 +1,12 @@
+---
+category: Foundations
+---
+
+The whole elevation model. `hairline` is 8% white at 1.25:1, `strong` is 10% at
+1.34:1, and there is nothing else — no shadow appears anywhere in the reference,
+so separation is a line or it is space.
+
+```tsx
+<Rule />
+<Rule tone="strong" />
+```

package/kits/patchbay/src/Rule.tsx

@@ -0,0 +1,8 @@
+export interface RuleProps {
+  tone?: 'hairline' | 'strong';
+  className?: string;
+}
+
+export function Rule({ tone = 'hairline', className }: RuleProps) {
+  return <hr className={['pb-rule', `pb-rule--${tone}`, className].filter(Boolean).join(' ')} />;
+}

package/kits/patchbay/src/Stat.md

@@ -0,0 +1,17 @@
+---
+category: Data
+---
+
+**The component that refuses to lie.** The reference ships `0+` under
+`GITHUB STARS`, `DOWNLOADS` and `DISCORD MEMBERS` on a live page, and `0+`
+under `TESTING` eight thousand pixels further down: its count-up animates from
+zero and has no state for *the fetch did not return*, so the failure renders as
+a precise, confident, wrong number.
+
+An empty `value` here renders the pulsing skeleton at the figure's real
+geometry and announces itself to a screen reader. It never renders a zero.
+
+```tsx
+<Stat value="9,412" label="GitHub stars" source="api.github.com · hourly" />
+<Stat value="" label="Downloads" />
+```

package/kits/patchbay/src/Stat.tsx

@@ -0,0 +1,26 @@
+export interface StatProps {
+  value: string;
+  label: string;
+  /** Where the figure came from — a query, a window, a dashboard. */
+  source?: string;
+  className?: string;
+}
+
+/** The reference renders `0+` under GITHUB STARS when its fetch does not return.
+ *  A confident wrong number is worse than an absent one, so an empty `value`
+ *  renders the skeleton and never a zero. */
+export function Stat({ value, label, source, className }: StatProps) {
+  const pending = value.trim() === '';
+  return (
+    <div className={['pb-stat', pending ? 'pb-stat--pending' : undefined, className].filter(Boolean).join(' ')}>
+      {pending ? (
+        <span className="pb-stat__skeleton" aria-hidden="true" />
+      ) : (
+        <span className="pb-stat__value">{value}</span>
+      )}
+      <span className="pb-stat__label">{label}</span>
+      {source && <span className="pb-stat__source">{source}</span>}
+      {pending && <span className="pb-sr">{label} is still loading</span>}
+    </div>
+  );
+}

package/kits/patchbay/src/StatusDot.md

@@ -0,0 +1,19 @@
+---
+category: Data
+---
+
+**`label` has no default and no optional marker, which is the whole point.**
+Status in this pack is never by colour alone.
+
+The three status hues are a **pack decision** — the reference paints no success,
+warning or error state anywhere — and they are derived against a constraint most
+packs do not have: the accent is a mint-cyan, so the ordinary dark-UI green
+collides with it under dichromacy. `instrument-console`'s `#46D39A` separates
+from this accent by **3.51** under simulated CVD against a floor of 8, and was
+rejected for it. Every candidate that clears the floor is light, which is why
+`--ok` sits above `--warn` and `--danger` in luminance rather than beside them.
+
+```tsx
+<StatusDot state="ok" label="Connected" />
+<StatusDot state="danger" label="Venue unreachable" />
+```

package/kits/patchbay/src/StatusDot.tsx

@@ -0,0 +1,15 @@
+export interface StatusDotProps {
+  state: 'ok' | 'warn' | 'danger';
+  /** Mandatory. The word carries the state; the dot only repeats it. */
+  label: string;
+  className?: string;
+}
+
+export function StatusDot({ state, label, className }: StatusDotProps) {
+  return (
+    <span className={['pb-status', `pb-status--${state}`, className].filter(Boolean).join(' ')}>
+      <span className="pb-status__dot" aria-hidden="true" />
+      {label}
+    </span>
+  );
+}

package/kits/patchbay/src/index.ts

@@ -0,0 +1,8 @@
+export * from './Button';
+export * from './Card';
+export * from './Chip';
+export * from './Diagram';
+export * from './Heading';
+export * from './Rule';
+export * from './Stat';
+export * from './StatusDot';