sheleg-design-skill 1.41.0 → 1.42.0

package/CHANGELOG.md

@@ -4,6 +4,57 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [1.42.0] - 2026-08-17
+
+**The twenty-eighth pack, and the first one measured for its tempo rather than its
+surface.** `proscenium` is extracted from [mailmodo.com](https://www.mailmodo.com/), read
+off live computed styles in a headless Chrome at 1440×1000 and at 390, 768 and 1024 for
+the ramp. What it takes from the reference is the *cadence* — two acts, then the same call
+to action, again, with one dark act at the middle — which is why it forks against
+`showroom` on tempo rather than on look.
+
+### Added
+
+- **`proscenium`**, from [mailmodo.com](https://www.mailmodo.com/) — a white field
+  carrying two cool acts and **one deep indigo act at the middle** (`#07061d` to `#2a0b78`
+  at 86.41%, stops measured), ink that is an indigo rather than a grey, an electric violet
+  at `#5a45fe` filling a control that stays **nearly square at 4px against cards at 16**,
+  one family at nine weights, and a framed product panel the fold cuts off. Widened
+  contract, addressable origin, every stated ratio recomputed by the palette gate.
+- **A reference kit**, with the six-component spine plus `StatusDot`, `Skeleton`, `Frame`
+  and this pack's own `Stage` — the one dark act, which the kit's stylesheet teaches to
+  strip elevation from any card standing inside it.
+
+### Three values the reference has and this pack declines, each marked at its declaration
+
+- **The rem base.** Mailmodo steps the root font size by viewport — 10px at 390 and 768,
+  11px at 1024, 13px at 1440 — and lets every rem follow. It is coherent and it overrides
+  the reader's own text-size preference, so the pack takes the *endpoints* (27px→62px on
+  the display, 28px→62px on an act heading) and ships them as clamp slopes with a rem term
+  in the sum.
+- **The heading ink.** The reference sets headings to pure black against an indigo body
+  ink. The move is worth keeping and the literal is not: pure black as a field or an ink is
+  banned library-wide as an unfinished default and the slop lint fails on it, so the pack
+  ships `#05041c` — 20.18:1 on the field against black's 21.00.
+- **The amber.** `#9e7613` is 4.15:1 on white, under AA for body text. The hue is the
+  reference's; the step down to `#8a6510` (5.32 / 4.91 / 4.68) is the pack's.
+
+`--ok`, `--danger` and the entire dark register are pack decisions rather than
+measurements — the reference paints no success and no error state and has no dark mode. The
+dark register is derived from the one dark thing the reference does have: the stage act's
+own two stops carry the field and the panel.
+
+### Fixed
+
+- **A self-test plant that had stopped finding its target.** The core-contract remainder
+  fixture matched `The other \w+ answer all four`; at the twenty-eighth pack the remainder
+  became "twenty-one", which a bare `\w+` cannot match, so the plant changed nothing and
+  the self-test still reported it as caught. A fixture that cannot find its own target is a
+  hole in the gate, and it opens on exactly the release the plant exists to catch.
+
+### Ratchet
+
+`test/floors.json` raised 2422/1287/504 → 3222/1811/615.
 ## [1.41.0] - 2026-08-17
 
 **A style pack is a token layer and a set of rules. It does not ship a button** — and until

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 **twenty-seven locked style
+decides whether to animate before it decides how, and **twenty-eight locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -71,6 +71,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `notation` | a near-white page drawn **entirely in hairlines instead of cards**, radii of 2 and 4px, a slab serif held at weight 300 against a monospace, **no bold anywhere**, an ink primary that leaves the accent free to mark what can be read, and one chamfered corner per page | **developer and technical products sold on restraint** — open source front pages, workspaces for people who dislike being sold to, documentation homes (standalone) |
 | `almanac` | **oatmeal paper rather than white**, seams at 2px and 4px with **no 1px anywhere**, a 104px display at weight 500 with a line-height below one that locks its lines into a block, uppercase mono tags notched through the edges of drawn boxes, and one object per page floating on four stacked shadow stops | **pages that assert a category** — a manifesto, a company saying what this kind of thing is, a product whose argument is editorial rather than functional (standalone) |
 | `vitrine` | a white field drawn **entirely in hairlines**, a serif display over a sans body, an ink primary so the accent stays free to mark what can be read, a grey panel that groups without lifting, and **one framed record** with a 1px inset highlight carrying the page's evidence | **the front door of a product sold on trust** — B2B software under evaluation, security and compliance surfaces, specification and comparison pages (standalone) |
+| `proscenium` | a white field carrying two cool acts and **one deep indigo act at the middle**, ink that is an indigo rather than a grey, an electric violet that fills a control staying **nearly square at 4px** against cards at 16, one family at nine weights, and a framed product panel the fold cuts off | **product-led marketing front doors whose argument is a demonstration** — SaaS home pages, launch and tour pages, any page with six or more acts that needs a repeated beat (standalone) |
 | `ledger` | warm cream paper where elevation is a **1px hairline at 12% ink** and no card casts a shadow, radii of 7.5/10/15/20 nested concentrically, an **ink** primary button, and a terracotta accent forbidden from filling any control — it labels, as a 10px monospace uppercase kicker — over 32px data rows, with a seal on every card stating how its number is known | the console of a product that answers questions **about data** — AI analysts, BI surfaces, query workspaces, agents that read a warehouse and write back a figure |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
@@ -146,7 +147,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 twenty-seven style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The twenty-eight 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 |
 
@@ -217,7 +218,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 twenty-seven kits, so switching packs swaps identity rather than API,
+identical in all twenty-eight 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.
@@ -263,7 +264,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 twenty-seven
+installers and `diff -r`s the result against the source, then builds all twenty-eight
 kits.
 
 `test/scenarios.md` (T1–T19) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,7 +234,7 @@ ${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/              twenty-seven style packs — instrument-console (dark console),
+  styles/              twenty-eight 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), orchard (friendly
@@ -276,7 +276,11 @@ ${c("bold", "What it installs")}
                        almanac (oatmeal paper at 2px with no 1px anywhere and a
                        display set below a line-height of one), vitrine (a white
                        hairline field with a serif display, an ink primary, and
-                       one framed record carrying the evidence) —
+                       one framed record carrying the evidence),
+                       proscenium (a white field with two cool acts and one deep
+                       indigo act at the middle, a violet filling a control that
+                       stays nearly square at 4px against cards at 16, and a
+                       framed product panel the fold cuts off) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);

package/cursor/rules/sheleg-design.mdc

@@ -86,7 +86,12 @@ four stacked shadow stops, for pages that assert a category;
 vitrine — a white field drawn entirely in hairlines, a serif display over a sans
 body, an ink primary, a grey panel that groups without lifting, and one framed
 record with a 1px inset highlight carrying the page's evidence, for the front
-door of a product sold on trust);
+door of a product sold on trust;
+proscenium — a white field carrying two cool acts and one deep indigo act at the
+middle, an electric violet filling a control that stays nearly square at 4px
+against cards at 16, one family at nine weights, and a framed product panel the
+fold cuts off, for product-led marketing front doors whose argument is a
+demonstration);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/proscenium",
+  "globalName": "ShelegProscenium",
+  "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/proscenium/.design-sync/conventions.md

@@ -0,0 +1,50 @@
+# Proscenium — the contract this design system ships under
+
+**Register.** Choose Proscenium for **product-led marketing front doors whose
+argument is a demonstration**: SaaS home pages, launch and tour pages, any page with
+six or more acts that needs a repeated beat. Light is the default register and dark
+is a first-class twin; both come from the same tokens, so build every screen against
+`var(--…)` and never a literal.
+
+**The page is a sequence of acts on a fixed beat.** Two acts, then the same call to
+action, again. The reader is never more than two acts from the next one, and the
+cadence — not a divider or a colour — is what keeps a long page legible.
+
+**One dark act, at the middle.** `--stage` is a measured gradient and the pack allows
+exactly one block of it per page. A second makes the page read as a section list, and
+it is the most likely drift because the block is the easiest thing on the page to
+like.
+
+**The control stays nearly square.** Radius 4 on buttons against 16 on cards, both
+measured. Closing that gap is the single fastest way to make a page in this pack look
+like every other generated landing page.
+
+**The product is on screen before any claim is made**, inside a frame the fold cuts
+off. `Frame cropped` is the signature: the panel runs off the viewport rather than
+sitting complete inside it.
+
+**Three shadows, three jobs.** `--shadow-card` (94px of blur, violet-tinted) carries
+an argument card; `--shadow-hair` (a hard 1px 2px, no blur) carries a container card;
+`--shadow-control` belongs to the primary button. A control never takes the card's
+shadow and a card never takes the control's. Inside the dark act there is no shadow
+at all — at 9% on a gradient it reads as dirt.
+
+**Status is never by colour alone.** Every state is a dot or an icon **plus a word**,
+and `StatusDot` makes the label a required prop so the rule cannot be skipped by
+omission.
+
+**Two status colours and the whole dark register are pack decisions, not
+measurements.** The reference paints no success and no error state and has no dark
+mode; the token layer marks each substitution at its declaration. Read them as
+decisions, and re-check them if the reference ever ships the real thing.
+
+**Bans** (verbatim from the pack):
+
+- No second dark act; no scroll clock, no scrub, no parallax.
+- No status by colour alone.
+- No card shadow on a control, and no control shadow on a card.
+- No closing the 4/16 radius gap.
+- No second family, and no swapping Inter for a system stack "for now".
+- No logo wall and no invented counter — a page with no real logos builds its proof
+  rail from product facts and leaves no hole where one would go.
+- No bloom under running text; no fixed CTA bar on a phone.

package/kits/proscenium/README.md

@@ -0,0 +1,27 @@
+# @sheleg-design/proscenium
+
+The React reference kit for the SHELEG **Proscenium** style pack — a white field
+carrying two cool acts and one deep indigo act at the middle (light default, dark
+twin), an electric violet filling a control that stays nearly square at 4px against
+cards at 16, and a framed product panel the fold cuts off.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/proscenium.css` byte for byte, and the rules the design agent must obey
+are in [`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+```bash
+npm install && npm run build
+```
+
+## The spine
+
+`Button`, `Card`, `Chip`, `Stat`, `Heading`, `Rule` — identical names, props and
+types in every SHELEG kit. Switching packs swaps identity, not API.
+
+## This pack's own
+
+`Frame` is the signature element — the proscenium arch, and `cropped` is the prop
+that carries it. `Stage` is the one dark act, and the pack allows exactly one per
+page. `StatusDot` requires its label, because this pack states status is never by
+colour alone. `Skeleton` is static. See
+[`styles/proscenium.md`](../../plugins/sheleg-design/skills/sheleg-design/styles/proscenium.md).

package/kits/proscenium/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sheleg-design/proscenium",
+  "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/proscenium/src/Button.md

@@ -0,0 +1,23 @@
+---
+category: Actions
+---
+
+Min-height 44, radius **4**, weight 600, label at 16 — and the radius is the
+point. The reference's control is nearly square while its cards sit at 16, and
+that gap is what keeps a roomy page from reading as soft. Rounding this to match
+the card is the single most likely edit to make a page in this pack generic.
+
+`primary` fills with the accent, carries `--shadow-control`, and states its
+label colour on the rule rather than inheriting it, because an anchor reset that
+says `color: inherit` will otherwise win the label and paint ink on accent.
+`secondary` is the 1px `--edge` bordered one with no shadow; `ghost` carries no
+fill and takes `--accent-deep` for its label.
+
+**Active flattens the shadow instead of moving the control.** Nothing translates
+and nothing scales — a button that pops on click has left this pack.
+
+```tsx
+<Button onClick={book}>Book a walkthrough</Button>
+<Button variant="secondary" onClick={tour}>See it in action</Button>
+<Button variant="ghost" size="sm" onClick={dismiss}>Not now</Button>
+```

package/kits/proscenium/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the accent fill — the pack allows one per view. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  children,
+  className,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['ps-btn', `ps-btn--${variant}`, `ps-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/proscenium/src/Card.md

@@ -0,0 +1,26 @@
+---
+category: Surfaces
+---
+
+Radius 16, and **two kinds that are not interchangeable.** The default is the
+container card: `--panel`, a 1px `--border`, and `--shadow-hair` — the measured
+hard `1px 2px 0` with no blur at all. `--argument` drops the border and takes
+`--shadow-card`, which is 94px of blur at 4px of offset in a violet-tinted
+black. That one is for the card carrying the act's argument, not for every card
+in a grid.
+
+**A card is for a group.** A list of statements takes a seam and no box; boxing
+prose is the fastest way to make this pack look like a template.
+
+**Inside the dark act the shadow is gone**, not softened: `--shadow-card` at 9%
+is invisible on the gradient and reads as dirt. The stylesheet already swaps a
+card inside `.ps-stage` to `--stage-panel` with no shadow.
+
+```tsx
+<Card title="Managed accounts" meta="4 held">
+  <AccountRows />
+</Card>
+<Card className="ps-card--argument" title="Know who holds every account">
+  <AccessTable />
+</Card>
+```

package/kits/proscenium/src/Card.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+export interface CardProps {
+  title?: string;
+  /** Right-aligned metadata on the title row: a count, a window, a state. */
+  meta?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ title, meta, children, className }: CardProps) {
+  const head = title !== undefined || meta !== undefined;
+  return (
+    <section className={['ps-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="ps-card__head">
+          {title !== undefined && <h3 className="ps-card__title">{title}</h3>}
+          {meta !== undefined && <span className="ps-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="ps-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/proscenium/src/Chip.md

@@ -0,0 +1,18 @@
+---
+category: Foundations
+---
+
+A pill at `--r-pill`, 13px, weight 500. `neutral` sits on `--panel` inside a
+`--border-strong` hairline; `accent` takes `--accent-weak` with `--accent-deep`
+as its word.
+
+**Radius 16 on a chip is a mistake, not a variant.** A 28px-tall chip at
+`--r-card` is a lozenge — the pack names this one explicitly because it is what
+happens when a card token gets reused for a control.
+
+`selected` keeps its state after the pointer leaves; hover does not.
+
+```tsx
+<Chip>Client / Acme · 10:42</Chip>
+<Chip tone="accent" selected>Needs attention</Chip>
+```

package/kits/proscenium/src/Chip.tsx

@@ -0,0 +1,25 @@
+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={[
+        'ps-chip',
+        `ps-chip--${tone}`,
+        selected ? 'ps-chip--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/proscenium/src/Frame.md

@@ -0,0 +1,23 @@
+---
+category: Signature
+---
+
+**The proscenium arch** — a translucent fill, a 1px `--frame-edge` hairline and
+an inset white glow around a product view. Measured off the reference's hero
+container, `--shadow-frame` and `--frame-fill` together.
+
+`cropped` is the part that carries the pack. The panel is meant to be **cut off
+by the fold**: it drops its bottom padding, its bottom border and its bottom
+radii so the product runs off the viewport rather than sitting complete inside
+it. A page in this pack is remembered as the one where the product was already
+there, and a frame that closes politely above the fold is the version nobody
+remembers.
+
+`foot` is the honesty line: a frame that shows an interface without saying what
+it is drawn from is a mock wearing evidence's clothes.
+
+```tsx
+<Frame cropped caption="What needs attention" foot="Drawn from the product's own routes">
+  <ConsolePanel />
+</Frame>
+```

package/kits/proscenium/src/Frame.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface FrameProps {
+  caption?: string;
+  /** The honesty line under the panel: what this view is drawn from. */
+  foot?: string;
+  /** The fold cuts the panel off — the pack's signature. See Frame.md. */
+  cropped?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Frame({ caption, foot, cropped = false, children, className }: FrameProps) {
+  return (
+    <figure
+      className={['ps-frame', cropped ? 'ps-frame--cropped' : undefined, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {caption !== undefined && <figcaption className="ps-frame__cap">{caption}</figcaption>}
+      <div className="ps-frame__glass">{children}</div>
+      {foot !== undefined && !cropped && <p className="ps-frame__foot">{foot}</p>}
+    </figure>
+  );
+}

package/kits/proscenium/src/Heading.md

@@ -0,0 +1,20 @@
+---
+category: Foundations
+---
+
+Three levels, all fluid, all one family: level 1 is `--t-hero` (27px at 390 →
+62px at 1024, both endpoints measured), level 2 is `--t-act` (28 → 62), level 3
+is `--t-feature` (28 → 39).
+
+The weights are the hierarchy, because the family never changes: 600 on the
+display and the act heading, 700 on the feature heading. The reference loads
+Inter at nine weights and no second face anywhere on the page.
+
+Level 1 is capped at 32ch, which holds it to two lines at 1440. A headline that
+reaches five lines is a broken hero, not a long one.
+
+```tsx
+<Heading level={1}>Your company runs in Telegram</Heading>
+<Heading>Everything around the conversation, in one place</Heading>
+<Heading level={3}>Know who holds every account</Heading>
+```

package/kits/proscenium/src/Heading.tsx

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

package/kits/proscenium/src/Rule.md

@@ -0,0 +1,16 @@
+---
+category: Foundations
+---
+
+A 1px `--border` — the measured seam, and the reference's most-used border by a
+factor of two. `strong` is `--border-strong` and belongs where a divider has to
+be *seen*: between two groups of rows, not between two rows.
+
+Unlike the hairline packs, a rule here is not the elevation model. This pack has
+three named shadows doing three different jobs, and a rule is for structure
+inside a surface that is already separated.
+
+```tsx
+<Rule />
+<Rule tone="strong" />
+```

package/kits/proscenium/src/Rule.tsx

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

package/kits/proscenium/src/Skeleton.md

@@ -0,0 +1,17 @@
+---
+category: Surfaces
+---
+
+The loading idiom, and it is **static**. Blocks at `--r-inner` filled
+`--panel-2`, sized to the element they stand in for — same heights, same widths,
+so nothing jumps when the data lands.
+
+No spinner under 400ms of expected wait, and never a spinner inside a frame that
+has already drawn its arch: the frame is the promise that something is coming,
+and a spinner inside it says the same thing twice.
+
+```tsx
+<Skeleton width="38%" />
+<Skeleton width="72%" />
+<Skeleton height={64} />
+```

package/kits/proscenium/src/Skeleton.tsx

@@ -0,0 +1,17 @@
+export interface SkeletonProps {
+  /** Matches the real element's height, so the layout does not jump on load. */
+  height?: number;
+  /** A CSS width — a percentage for text lines, a length for blocks. */
+  width?: string;
+  className?: string;
+}
+
+export function Skeleton({ height = 14, width = '100%', className }: SkeletonProps) {
+  return (
+    <span
+      className={['ps-skeleton', className].filter(Boolean).join(' ')}
+      style={{ height: `${height}px`, width }}
+      aria-hidden="true"
+    />
+  );
+}

package/kits/proscenium/src/Stage.md

@@ -0,0 +1,22 @@
+---
+category: Signature
+---
+
+**The one dark act.** A full-bleed `--stage` gradient block — measured stops,
+`#07061d` to `#2a0b78` at 86.41% — placed once at the middle of the page.
+
+**Once.** A second `--stage` block makes the page read as a section list rather
+than as a design with a middle, and it is this pack's most likely drift because
+the block is the easiest thing on the page to like. The measured reference has
+exactly one.
+
+Inside it, cards separate by `--stage-panel` and a seam rather than by
+elevation; the stylesheet does that swap for any `.ps-card` inside `.ps-stage`,
+so a card does not have to know where it is standing.
+
+```tsx
+<Stage>
+  <Heading>One operating layer for every team working in Telegram</Heading>
+  <UseCaseCards />
+</Stage>
+```

package/kits/proscenium/src/Stage.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export interface StageProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/** The one dark act. One per page — see Stage.md. */
+export function Stage({ children, className }: StageProps) {
+  return (
+    <section className={['ps-stage', className].filter(Boolean).join(' ')}>
+      <div className="ps-stage__inner">{children}</div>
+    </section>
+  );
+}

package/kits/proscenium/src/Stat.md

@@ -0,0 +1,17 @@
+---
+category: Data
+---
+
+Label above at `--t-meta` uppercase, tracked `--track-wide`, in `--muted`;
+figure at `--t-card` weight 600 in `--ink-strong`; source below in
+`--font-data`.
+
+The label comes first so the eye lands on the figure without hunting. `source`
+is optional and should almost always be given — a figure with no provenance is
+the thing this library's own doctrine bans, and on a page whose whole argument
+is a demonstration an unsourced number is the one element that can make the
+demonstration read as a mock.
+
+```tsx
+<Stat label="Median response" value="2h 14m" source="past 30 days" />
+```