feat(sections): PR1 — shared design foundation (tokens, panel primitives, shared.js)#26
Closed
BunsDev wants to merge 3 commits into
Closed
feat(sections): PR1 — shared design foundation (tokens, panel primitives, shared.js)#26BunsDev wants to merge 3 commits into
BunsDev wants to merge 3 commits into
Conversation
- New thesis headline 'Summon agents that remember.' with Fraunces italic as the single display-type moment (new dep: @fontsource-variable/fraunces, italic axis only) - Download CTA collapsed from 4-chip grid + heading + badge into one platform-detected primary button and a quiet 'also on' mono row; JS retargets the primary and keeps all four platforms one click away (works fully without JS) - Terminal card restructured as a real session: typed command on top, familiar state (sigil, role, memory restored) as output, roster tabs with arrow-key tablist navigation - Signature element: continuity timeline across the hero base plotting a familiar's memory over 47 days, ending in a pulsing 'today' node; replaces the icon feature grid that duplicated ProofGrid; rotates to a vertical thread on mobile - Contrast bumps on small mono labels; reduced-motion and no-JS paths verified; verify-static.mjs assertions updated to the new CTA Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Terminal cursor hugs the end of the typed command again (flex: 0 1 auto instead of grow, still shrinkable for long commands) - Orchestrated hero load: copy lands, terminal answers (+0.12s), then the continuity thread grows node by node left to right (+0.28-0.70s) - Reword Architecture.astro frontmatter comment — the literal '<script>' text tripped vite's dep-scanner on every dev boot Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…shared.js Groundwork for the five-section overhaul (Architecture, HowItWorks, Compare, QuickStart, Ecosystem). Purely additive; no element consumes the new utilities yet, so there are no visual changes beyond a subtle per-section chapter divider. - global.css: motion/layout tokens (--ease-out, --dur-*, --section-py, --gutter), shared panel surfaces (--panel-bg, --panel-shadow, accent scale), .panel/.panel--arrival + .panel-inset (with .is-active and guarded hover), .swap-fade content-swap, a unified :where() focus ring consuming the previously-unused --oc-focus-ring, .section-header--wide, a faint .content-section::before chapter divider, and a .reveal-stagger utility (existing grids keep working; extended to 6 items). - shared.js (new): fadeSwap, wireRadioGroup, typewriter, grid2DNav — extracted from the hero + HowItWorks so later sections reuse them. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Establishes a shared design/motion foundation for upcoming below-the-fold section overhauls by adding new global tokens and reusable UI primitives, plus shared interaction helpers. Despite the description calling this “purely additive”, this PR also materially updates the Hero and Download CTA markup/styles/behavior.
Changes:
- Add new global CSS tokens and primitives (panel surfaces, inset states, swap-fade, unified focus ring, reveal stagger, chapter divider).
- Introduce
src/scripts/shared.jswith reusable interaction helpers for future sections. - Rework Hero terminal + platform download CTA (markup, styling, and platform-detection logic), and add Fraunces variable font for the hero display word.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/global.css | Adds shared tokens/primitives, focus ring unification, reveal staggering updates, and chapter dividers; also updates Hero/CTA styling and continuity timeline styles. |
| src/scripts/shared.js | New shared interaction utilities (fade swap, roving-tabindex helpers, typewriter, grid navigation). |
| src/scripts/main.js | Updates Hero “summon session” behavior and rewrites Download CTA platform detection to retarget a single primary button + alt row. |
| src/pages/index.astro | Adds Fraunces variable italic import for hero display styling. |
| src/components/Hero.astro | Updates hero copy/structure, replaces feature grid with continuity timeline, and updates terminal/roster markup. |
| src/components/DownloadCTA.astro | Replaces 4-button download grid with a single primary link plus compact alt platform row. |
| src/components/Architecture.astro | Minor comment wording update. |
| scripts/verify-static.mjs | Updates static verification to match new Download CTA markup/order and scopes checks to CTA block. |
| package.json | Adds @fontsource-variable/fraunces dependency. |
| pnpm-lock.yaml | Locks new Fraunces font dependency. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+752
to
+757
| .continuity-events { | ||
| list-style: none; | ||
| display: grid; | ||
| grid-template-columns: repeat(4, 1fr); | ||
| gap: 24px; | ||
| } |
Comment on lines
+884
to
+891
| .content-section::before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; left: var(--gutter); right: var(--gutter); | ||
| height: 1px; | ||
| background: linear-gradient(90deg, transparent, var(--oc-border-subtle) 15%, var(--oc-border-subtle) 85%, transparent); | ||
| } | ||
| .content-section--flush::before { display: none; } |
Comment on lines
+712
to
+715
| .roster-tab:focus-visible { | ||
| outline: none; | ||
| box-shadow: 0 0 0 2px rgba(154,142,205,0.55); | ||
| } |
Comment on lines
+13
to
+24
| export function fadeSwap(el, repaint, opts) { | ||
| var ms = (opts && opts.ms) || 200; | ||
| if (!el || !motionOn()) { | ||
| if (repaint) repaint(); | ||
| return; | ||
| } | ||
| el.classList.add('is-swapping'); | ||
| setTimeout(function () { | ||
| if (repaint) repaint(); | ||
| el.classList.remove('is-swapping'); | ||
| }, ms); | ||
| } |
Comment on lines
+78
to
+85
| var order = Array.from(nodes); | ||
| if (!order.length) return; | ||
| function move(idx) { | ||
| idx = Math.max(0, Math.min(order.length - 1, idx)); | ||
| order.forEach(function (n, k) { n.setAttribute('tabindex', k === idx ? '0' : '-1'); }); | ||
| order[idx].focus(); | ||
| if (onFocus) onFocus(order[idx], idx); | ||
| } |
| <span class="familiar-role" data-role>code steward · tools · git</span> | ||
| </div> | ||
| <span class="familiar-badge badge-active">active</span> | ||
| <span class="familiar-badge badge-active" data-badge>awake</span> |
| free & open source · runs locally | ||
| </p> | ||
|
|
||
| <h1>Summon agents<br>that <em>remember.</em></h1> |
This was referenced Jul 7, 2026
Merged
Member
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Foundation for the five-section overhaul
First of a staged series overhauling the below-the-fold sections
(Architecture, How It Works, Compare, Quick Start, Ecosystem) so they
share one visual + motion language matching the recently-polished Hero,
and fix each section's specific UX gaps.
This PR is purely additive — no element consumes the new utilities
yet, so the only visible change is a subtle per-section chapter divider.
It establishes the primitives every later PR builds on.
global.css
--ease-out,--dur-ui/-reveal/-swap,--section-py,--gutter), shared panel surfaces (--panel-bg,--panel-bg-arrival,--panel-shadow) and an accent scale (--accent-wash/-active/-line/-strong)..panel/.panel--arrival(hero-grade glass frame),.panel-inset(+.is-active, guarded hover,.is-cardlift),.swap-fadecontent-swap.:where(...):focus-visiblering that finally consumes the previously-unused--oc-focus-ring;.section-header--wide; a faint.content-section::beforechapter divider (with.content-section--flushopt-out)..reveal-staggerutility replaces the hardcoded parent-specific stagger block; existing grids keep working and it's extended to 6 items.shared.js (new)
fadeSwap,wireRadioGroup,typewriter,grid2DNav— extracted from the hero + HowItWorks so later section PRs reuse them instead of duplicating.Verification
npm run build✓ ·npm run check✓Staged series
PR1 foundation → PR2 QuickStart → PR3 Compare → PR4 Ecosystem → PR5 HowItWorks → PR6 Architecture. Each subsequent PR stacks on the prior branch so its diff stays isolated.
🤖 Generated with Claude Code