From 4acdd1e5710068ff7beb6a7be0ad8f90a18f4549 Mon Sep 17 00:00:00 2001 From: Marcos Paulo Date: Sat, 5 Sep 2026 06:06:56 +0000 Subject: [PATCH] feat: add primitives Eyebrow, Rule, Callout, CodeBlock MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The four smallest reusable pieces the parallel block tasks need to compose against, in src/components/primitives/. Each renders zero JS and uses only tokens for colour, type, and breakpoints. Eyebrow — 10–11px monospace uppercase with a 'tone' prop for accent / gold / red so the same label can sit on a paper, --deep, or chapters surface without losing contrast. The guide surface uses 'accent', the .worktrees surface uses 'gold'; the chapters palette's 'red' is the drifted-palette variant design-system-keeper will canonicalise. Rule — the gold-top-border section divider. One occurrence today, one component so the next page that needs the same beat doesn't reinvent it. Body slot expects for the clamp(24px, 3.3vw, 42px) emphasis. Callout — gold-background emphasis block. 'label' variant (default) matches .callout (150px label + body); 'split' variant matches the full-guide .thesis (2 equal columns, aside slot for the signal visualisation). Both share the gold bg + Eyebrow label + strong body. CodeBlock — 
 on --ink with gold text. The canonical 'code on dark'
surface used across the guide. 'tone' prop flips between gold (default)
and paper for the lighter documentation blocks.

All four fold in the existing 800px breakpoint that .rule and .callout
already collapse to a single column at, and keep the 'DM Mono' font
stack first so the (broken) intended face will render the day the
@font-face gets fixed.

Did not touch: tokens.css (design-system-keeper), verify.mjs
(verification-engineer), astro.config.mjs (astro-architect), any page,
or any existing CSS file.
---
 src/components/primitives/Callout.astro   | 103 ++++++++++++++++++++++
 src/components/primitives/CodeBlock.astro |  49 ++++++++++
 src/components/primitives/Eyebrow.astro   |  51 +++++++++++
 src/components/primitives/Rule.astro      |  69 +++++++++++++++
 4 files changed, 272 insertions(+)
 create mode 100644 src/components/primitives/Callout.astro
 create mode 100644 src/components/primitives/CodeBlock.astro
 create mode 100644 src/components/primitives/Eyebrow.astro
 create mode 100644 src/components/primitives/Rule.astro

diff --git a/src/components/primitives/Callout.astro b/src/components/primitives/Callout.astro
new file mode 100644
index 0000000..8e9d1e2
--- /dev/null
+++ b/src/components/primitives/Callout.astro
@@ -0,0 +1,103 @@
+---
+// Callout — gold-background emphasis block. Covers the two existing variants
+// the source uses:
+//   • `variant="label"` (default) — 150px label + body. Matches `.callout`.
+//   • `variant="split"` — 2 equal columns; the named `aside` slot fills the
+//     right column. Matches the full-guide `.thesis` (where the right side
+//     holds a "signal" visualisation).
+//
+// Background is always `var(--gold)`. The label uses the Eyebrow treatment.
+// The body slot expects a `` for the `clamp(22px, 3vw, 36px)`
+// emphasis; without one, the body falls back to inherited body type.
+
+interface Props {
+  /** Short uppercase label, same treatment as Eyebrow. */
+  label: string;
+  /** Colour tone for the label. */
+  tone?: 'accent' | 'gold' | 'red';
+  /** Layout variant. Defaults to the label+body `.callout` shape. */
+  variant?: 'label' | 'split';
+}
+
+const { label, tone = 'accent', variant = 'label' } = Astro.props;
+---
+
+

+  {label}
+  

+  {
+    variant === 'split' && (
+      

+        
+      

+    )
+  }
+

+
+
diff --git a/src/components/primitives/CodeBlock.astro b/src/components/primitives/CodeBlock.astro
new file mode 100644
index 0000000..23ef3f5
--- /dev/null
+++ b/src/components/primitives/CodeBlock.astro
@@ -0,0 +1,49 @@
+---
+// CodeBlock — `
` on `--ink` with gold text. Default treatment matches
+// `.worktrees pre` from `styles.css` and the dark pre blocks across the
+// guide (rule stage-detail, skill-detail, example-grid, copy-lab, prompt-card,
+// install-skills). It is the one canonical "code on dark" surface — every
+// page-level variation (the `.skills>pre` lighter text, the `.builder-artifact`
+// grid backdrop, etc.) layers extra styles on top via the call site.
+//
+// `tone` flips between the warm `--gold` (default) and the lighter `--paper`
+// for the few blocks that read as documentation rather than terminal output.
+
+interface Props {
+  /** Text colour, mapped to a token. Default is the warm gold used on every
+   *  current `.worktrees pre` and rule `.stage-detail pre` style. */
+  tone?: 'gold' | 'paper';
+  /** Optional accessible label. Use when the contents have no heading context. */
+  label?: string;
+}
+
+const { tone = 'gold', label } = Astro.props;
+---
+
+
+  
+

+
+
diff --git a/src/components/primitives/Eyebrow.astro b/src/components/primitives/Eyebrow.astro
new file mode 100644
index 0000000..fdde4e0
--- /dev/null
+++ b/src/components/primitives/Eyebrow.astro
@@ -0,0 +1,51 @@
+---
+// Eyebrow — the small uppercase monospace label that opens almost every
+// section on the guide surface. Single most repeated treatment on the site
+// (19+ HTML occurrences) and a signature of the design.
+//
+// `tone` maps directly to the design-system tokens. Pages inside a `--deep`
+// surface (e.g. `.worktrees`) pass `tone="gold"` so the label stays readable
+// on the dark background. Chapters pages (drifted palette) use `tone="red"`.
+//
+// The font stack keeps 'DM Mono' first — when the broken @font-face gets
+// fixed, the intended face will render. Today it falls through to the generic
+// monospace, which is what the site has been rendering all along.
+
+interface Props {
+  /** Short uppercase label, rendered literally. Wrap in markup at the call site
+   *  if you need an inline icon or emphasis inside the eyebrow. */
+  label: string;
+  /** Colour tone. Maps to a token; defaults to the guide-surface accent. */
+  tone?: 'accent' | 'gold' | 'red';
+  /** Element override. The default `
` matches the source markup; pass
+   *  `"span"` when the eyebrow sits inside another block. */
+  as?: 'p' | 'span' | 'div';
+}
+
+const { label, tone = 'accent', as: Tag = 'p' } = Astro.props;
+---
+
+{label}
+
+
diff --git a/src/components/primitives/Rule.astro b/src/components/primitives/Rule.astro
new file mode 100644
index 0000000..a0fafb1
--- /dev/null
+++ b/src/components/primitives/Rule.astro
@@ -0,0 +1,69 @@
+---
+// Rule — the gold-top-border section divider. One occurrence today
+// (`