diff --git a/apps/website/app/api/og/route.tsx b/apps/website/app/api/og/route.tsx index 6e6d5a5ab..aa726b3c6 100644 --- a/apps/website/app/api/og/route.tsx +++ b/apps/website/app/api/og/route.tsx @@ -2,14 +2,14 @@ import { ImageResponse } from "next/og"; export const runtime = "edge"; -/* Paper theme (light) — mirrors app/globals.css so social cards match the site. */ +/* Light theme — mirrors app/globals.css so social cards match the site. */ const CANVAS = "#fafafa"; -const HAIRLINE = "#e1e1e1"; +const HAIRLINE = "#e2e2e2"; const INK = "#0a0a0a"; -const TITLE = "#242424"; -const PROSE = "#616161"; -/* sRGB approximation of --color-brand: color(display-p3 0.90663 0.41591 0.13661) */ -const BRAND = "#e5642a"; +const TITLE = "#171717"; +const PROSE = "#525252"; +/* sRGB approximation of --color-brand: color(display-p3 0.184 0.395 0.941) */ +const BRAND = "#2e64ee"; const fetchFont = async (request: Request, path: string) => { const response = await fetch(new URL(path, request.url)); @@ -26,8 +26,8 @@ const fetchFont = async (request: Request, path: string) => { let fontsPromise: Promise<[ArrayBuffer, ArrayBuffer]> | null = null; const getFonts = (request: Request) => (fontsPromise ??= Promise.all([ - fetchFont(request, "/fonts/ekbaumeruniwidthtrial-regular.otf"), - fetchFont(request, "/fonts/ekbaumeruniwidthtrial-medium.otf"), + fetchFont(request, "/fonts/geist-regular.ttf"), + fetchFont(request, "/fonts/geist-medium.ttf"), ]).catch((error) => { fontsPromise = null; throw error; @@ -110,7 +110,7 @@ export const GET = async (request: Request) => { {

40 ? 60 : 78, - fontFamily: "EK Baumer", + fontFamily: "Geist", fontWeight: 500, color: TITLE, lineHeight: 1.05, @@ -145,7 +145,7 @@ export const GET = async (request: Request) => {

{ height: 630, ...(fonts && { fonts: [ - { name: "EK Baumer", data: fonts[0], style: "normal", weight: 400 }, - { name: "EK Baumer", data: fonts[1], style: "normal", weight: 500 }, + { name: "Geist", data: fonts[0], style: "normal", weight: 400 }, + { name: "Geist", data: fonts[1], style: "normal", weight: 500 }, ], }), }, diff --git a/apps/website/app/benchmarks/page.tsx b/apps/website/app/benchmarks/page.tsx index 2c1ec8606..8fcf7d5e9 100644 --- a/apps/website/app/benchmarks/page.tsx +++ b/apps/website/app/benchmarks/page.tsx @@ -1,6 +1,7 @@ import { createPageMetadata } from "@/lib/metadata"; import { AccentLink } from "@/components/prose"; import { PageHeader } from "@/components/page-header"; +import { PageShell } from "@/components/page-shell"; import { BenchmarkLeaderboard } from "@/components/benchmark/leaderboard"; import { TOTAL_CASES, LAST_BENCHMARKED } from "@/components/benchmark/data"; @@ -12,8 +13,8 @@ export const metadata = createPageMetadata({ const BenchmarksPage = () => { return ( -

-
+ +
{

-
+ ); }; diff --git a/apps/website/app/changelog/page.tsx b/apps/website/app/changelog/page.tsx index f60922034..ff21ac6bd 100644 --- a/apps/website/app/changelog/page.tsx +++ b/apps/website/app/changelog/page.tsx @@ -3,6 +3,7 @@ import { readFileSync } from "fs"; import { join } from "path"; import { parseChangelog } from "@/utils/parse-changelog"; import { PageHeader } from "@/components/page-header"; +import { PageShell } from "@/components/page-shell"; export const metadata = createPageMetadata({ title: "Changelog", @@ -20,8 +21,8 @@ const ChangelogPage = () => { const entries = getChangelog(); return ( -
-
+ +
@@ -43,7 +44,7 @@ const ChangelogPage = () => { ))}
-
+ ); }; diff --git a/apps/website/app/demo/page.tsx b/apps/website/app/demo/page.tsx index 0eed0a6e9..06270e070 100644 --- a/apps/website/app/demo/page.tsx +++ b/apps/website/app/demo/page.tsx @@ -68,7 +68,7 @@ interface DemoSectionProps { const DemoSection = ({ label, children }: DemoSectionProps) => (
-

{label}

+

{label}

{children}
); diff --git a/apps/website/app/globals.css b/apps/website/app/globals.css index 21be514fa..090128e0d 100644 --- a/apps/website/app/globals.css +++ b/apps/website/app/globals.css @@ -5,42 +5,36 @@ @custom-variant dark (&:is(.dark *)); /* - * React Grab shares the "Paper" editorial design language of react-bench and - * million.dev: a canvas/card surface, hairline rules, an ink→prose→faint ink - * ramp, an editorial-orange brand accent, and the licensed trial type families - * (EK Baumer Uniwidth sans, Test Signifier serif, GT Mechanik data/numeric, - * Geist Mono). shadcn's neutral tokens below are remapped onto this palette so - * the shadcn primitives inherit the same look instead of a second gray scale. + * React Grab follows million.dev's minimal style: a plain white page, a + * neutral oklch gray ramp, and the million-ui accent blue. Geist carries all + * text; Geist Mono carries code. The token names below predate the restyle so + * every consumer restyles from this one file. */ @theme { /* Surfaces */ --color-canvas: color(display-p3 0.98026 0.98026 0.98026); - --color-line: color(display-p3 0.8954 0.8954 0.8954); - --color-hairline: #e1e1e1; + --color-line: oklch(0.922 0 0); + --color-hairline: oklch(0.922 0 0); - /* Ink ramp */ - --color-ink: #0a0a0a; - --color-title: #242424; - --color-label: #2a2a2a; - --color-prose: #616161; - --color-meta: #484848; - --color-faint: #9a9a9a; + /* Ink ramp (million-ui's neutral steps) */ + --color-ink: oklch(0.145 0 0); + --color-title: oklch(0.205 0 0); + --color-label: oklch(0.269 0 0); + --color-prose: oklch(0.439 0 0); + --color-meta: oklch(0.556 0 0); + --color-faint: oklch(0.708 0 0); /* Inline code chip */ - --color-code: #ededed; - --color-code-ink: #3d3d3d; + --color-code: oklch(0.97 0 0); + --color-code-ink: oklch(0.371 0 0); - /* Editorial-orange brand accent (chroma-balanced for the light background) */ - --color-brand: color(display-p3 0.90663 0.41591 0.13661); + /* million-ui accent blue */ + --color-brand: color(display-p3 0.184 0.395 0.941); - /* Type families — the licensed trial fonts declared via @font-face below. - sans = editorial body, nav, chrome (EK Baumer Uniwidth) - serif = display title, headings (Test Signifier) - mono = eyebrows, code, chrome (Geist Mono) */ - --font-heading: "Test Signifier", Georgia, "Times New Roman", serif; - --font-sans: "EK Baumer Uniwidth", var(--font-geist-sans), system-ui, sans-serif; - --font-serif: "Test Signifier", Georgia, "Times New Roman", serif; - --font-mono: var(--font-geist-mono), "Geist Mono Fallback", ui-monospace, monospace; + --font-heading: var(--font-geist-sans), system-ui, sans-serif; + --font-sans: var(--font-geist-sans), system-ui, sans-serif; + --font-serif: var(--font-geist-sans), system-ui, sans-serif; + --font-mono: var(--font-geist-mono), ui-monospace, monospace; /* Type scale (font-size / line-height pairs) */ --text-eyebrow: 12px; @@ -55,9 +49,9 @@ --text-display--line-height: 1.05; } -/* shadcn semantic tokens → Paper palette. Everything references --color-* +/* shadcn semantic tokens → neutral palette. Everything references --color-* (defined above and flipped under .dark) so the shadcn primitives track the - editorial theme with the light/dark toggle. */ + theme with the light/dark toggle. */ @theme inline { --color-link: var(--link); --color-sidebar-ring: var(--sidebar-ring); @@ -113,11 +107,11 @@ --popover-foreground: var(--color-ink); --primary: var(--color-ink); --primary-foreground: var(--color-canvas); - --secondary: color(display-p3 0.955 0.955 0.955); + --secondary: oklch(0.97 0 0); --secondary-foreground: var(--color-ink); - --muted: color(display-p3 0.955 0.955 0.955); + --muted: oklch(0.97 0 0); --muted-foreground: var(--color-meta); - --accent: color(display-p3 0.955 0.955 0.955); + --accent: oklch(0.97 0 0); --accent-foreground: var(--color-ink); --destructive: oklch(0.577 0.245 27.325); --border: var(--color-line); @@ -132,82 +126,42 @@ --sidebar-foreground: var(--color-prose); --sidebar-primary: var(--color-ink); --sidebar-primary-foreground: var(--color-canvas); - --sidebar-accent: color(display-p3 0.955 0.955 0.955); + --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: var(--color-ink); --sidebar-border: var(--color-line); --sidebar-ring: var(--color-faint); --link: var(--color-brand); - --selection: var(--color-ink); - --selection-foreground: var(--color-canvas); + --selection: oklch(0.883 0.005 286.3); + --selection-foreground: var(--color-ink); } -/* - * Dark theme. Overrides the Paper --color-* tokens (which the shadcn tokens - * above reference), so a single .dark class flips both systems. Values are the - * original dark Paper export. - */ .dark { --color-canvas: color(display-p3 0.054 0.054 0.054); - --color-line: color(display-p3 0.106 0.106 0.106); - --color-hairline: #1d1d1d; + --color-line: oklch(1 0 0 / 10%); + --color-hairline: oklch(1 0 0 / 10%); - --color-ink: #e8e8e8; - --color-title: #c6c6c6; - --color-label: #bfbfbf; - --color-prose: #848484; - --color-meta: #9d9d9d; - --color-faint: #515151; + --color-ink: oklch(0.985 0 0); + --color-title: oklch(0.922 0 0); + --color-label: oklch(0.87 0 0); + --color-prose: oklch(0.708 0 0); + --color-meta: oklch(0.708 0 0); + --color-faint: oklch(0.439 0 0); - --color-code: #282828; - --color-code-ink: #b4b4b4; + --color-code: oklch(0.269 0 0); + --color-code-ink: oklch(0.87 0 0); - --color-brand: color(display-p3 1 0.514 0.261); + --color-brand: color(display-p3 0.393 0.576 1); - --secondary: color(display-p3 0.14 0.14 0.14); - --muted: color(display-p3 0.14 0.14 0.14); - --accent: color(display-p3 0.14 0.14 0.14); + --secondary: oklch(0.269 0 0); + --muted: oklch(0.269 0 0); + --accent: oklch(0.269 0 0); --accent-foreground: var(--color-ink); --secondary-foreground: var(--color-ink); - --sidebar-accent: color(display-p3 0.14 0.14 0.14); + --sidebar-accent: oklch(0.269 0 0); --destructive: oklch(0.704 0.191 22.216); -} -/* Licensed trial fonts ported from the Paper design. */ -@font-face { - font-family: "EK Baumer Uniwidth"; - src: url("/fonts/ekbaumeruniwidthtrial-regular.otf") format("opentype"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "EK Baumer Uniwidth"; - src: url("/fonts/ekbaumeruniwidthtrial-medium.otf") format("opentype"); - font-weight: 500; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "Test Signifier"; - src: url("/fonts/test-signifier-regular.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "Test Signifier"; - src: url("/fonts/test-signifier-medium.woff2") format("woff2"); - font-weight: 500; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "Test Signifier"; - src: url("/fonts/test-signifier-regular-italic.woff2") format("woff2"); - font-weight: 400; - font-style: italic; - font-display: swap; + --selection: oklch(0.37 0.005 286.3); } @layer base { @@ -232,8 +186,6 @@ font-synthesis: none; -webkit-font-smoothing: antialiased; } - /* Inverted highlight — near-foreground fill, near-background text. Token-driven - so it flips with the theme. */ ::selection { background: var(--selection); color: var(--selection-foreground); @@ -306,19 +258,6 @@ } } -/* Diagonal hairline hatch — a faint "instrument panel" texture used behind the - masthead and footer. The stroke color is supplied via --line. */ -.paper-hatch { - --line: var(--color-hairline); - background-image: repeating-linear-gradient( - 45deg, - var(--line) 0, - var(--line) 1px, - transparent 1px, - transparent 7px - ); -} - /* Page entrance: the main content fades in on first paint. */ .page-fade-in { animation: page-fade-in 120ms ease-out both; diff --git a/apps/website/app/privacy/page.tsx b/apps/website/app/privacy/page.tsx index fa2bff479..64e58dc2e 100644 --- a/apps/website/app/privacy/page.tsx +++ b/apps/website/app/privacy/page.tsx @@ -1,6 +1,7 @@ import { createPageMetadata } from "@/lib/metadata"; import { AccentLink } from "@/components/prose"; import { PageHeader } from "@/components/page-header"; +import { PageShell } from "@/components/page-shell"; export const metadata = createPageMetadata({ title: "Privacy Policy", @@ -10,8 +11,8 @@ export const metadata = createPageMetadata({ const PrivacyPage = () => { return ( -
-
+ +
{
-
+ ); }; diff --git a/apps/website/components/benchmark/leaderboard.tsx b/apps/website/components/benchmark/leaderboard.tsx index c17094497..21e838c63 100644 --- a/apps/website/components/benchmark/leaderboard.tsx +++ b/apps/website/components/benchmark/leaderboard.tsx @@ -75,9 +75,7 @@ const Row = ({ row }: { row: BenchmarkRow }) => { > {/* eslint-disable-next-line @next/next/no-img-element */} - - {row.resolver} - + {row.resolver} {oneDecimal(row.speed)}s @@ -101,7 +99,7 @@ export const BenchmarkLeaderboard = () => { tabIndex={0} className="scrollbar-none -mx-6 overflow-x-auto px-6 sm:mx-0 sm:px-0" > -
+
Resolver Time diff --git a/apps/website/components/demo/live-clock.tsx b/apps/website/components/demo/live-clock.tsx index f9f2f50dc..1039cd0c2 100644 --- a/apps/website/components/demo/live-clock.tsx +++ b/apps/website/components/demo/live-clock.tsx @@ -24,7 +24,7 @@ export const LiveClock = () => { return (
- Local time + Local time {now ? formatTime(now) : "--:--:--"} diff --git a/apps/website/components/demo/marquee-ticker.tsx b/apps/website/components/demo/marquee-ticker.tsx index 81a575ebe..958bdc785 100644 --- a/apps/website/components/demo/marquee-ticker.tsx +++ b/apps/website/components/demo/marquee-ticker.tsx @@ -9,7 +9,7 @@ const TickerRun = ({ ariaHidden = false }: { ariaHidden?: boolean }) => (
{TICKER_PHRASES.map((phrase) => ( - {phrase} + {phrase} ✦ ))} diff --git a/apps/website/components/demo/motion-gallery.tsx b/apps/website/components/demo/motion-gallery.tsx index c5ef6d8f9..075e74565 100644 --- a/apps/website/components/demo/motion-gallery.tsx +++ b/apps/website/components/demo/motion-gallery.tsx @@ -9,7 +9,7 @@ interface MotionTileProps { const MotionTile = ({ label, children }: MotionTileProps) => (
{children}
- {label} + {label}
); diff --git a/apps/website/components/demo/three-dimensional-scene.tsx b/apps/website/components/demo/three-dimensional-scene.tsx index d719d4169..5bdd27374 100644 --- a/apps/website/components/demo/three-dimensional-scene.tsx +++ b/apps/website/components/demo/three-dimensional-scene.tsx @@ -25,10 +25,8 @@ export const ThreeDimensionalScene = () => { ) : null}
- - React Three Fiber - - + React Three Fiber + Live scene diff --git a/apps/website/components/grab-demo.tsx b/apps/website/components/grab-demo.tsx index 93fa4e507..8127a4934 100644 --- a/apps/website/components/grab-demo.tsx +++ b/apps/website/components/grab-demo.tsx @@ -377,7 +377,7 @@ export const GrabDemo = () => { )}
-
+
{/* Below md the terminal overlays the lower half of the stage, so the headline sits higher to stay visible above it. */}

(
React Grab diff --git a/apps/website/components/page-shell.tsx b/apps/website/components/page-shell.tsx index a21efd3ed..1462f0654 100644 --- a/apps/website/components/page-shell.tsx +++ b/apps/website/components/page-shell.tsx @@ -1,11 +1,9 @@ export const PageShell = ({ children }: { children: React.ReactNode }) => { return (
-
-
- {children} -
-
+
+ {children} +
); }; diff --git a/apps/website/public/fonts/ekbaumeruniwidthtrial-medium.otf b/apps/website/public/fonts/ekbaumeruniwidthtrial-medium.otf deleted file mode 100644 index b6115f0e2..000000000 Binary files a/apps/website/public/fonts/ekbaumeruniwidthtrial-medium.otf and /dev/null differ diff --git a/apps/website/public/fonts/ekbaumeruniwidthtrial-regular.otf b/apps/website/public/fonts/ekbaumeruniwidthtrial-regular.otf deleted file mode 100644 index de64f26ba..000000000 Binary files a/apps/website/public/fonts/ekbaumeruniwidthtrial-regular.otf and /dev/null differ diff --git a/apps/website/public/fonts/geist-medium.ttf b/apps/website/public/fonts/geist-medium.ttf new file mode 100644 index 000000000..8b295ed1a Binary files /dev/null and b/apps/website/public/fonts/geist-medium.ttf differ diff --git a/apps/website/public/fonts/geist-regular.ttf b/apps/website/public/fonts/geist-regular.ttf new file mode 100644 index 000000000..67e699256 Binary files /dev/null and b/apps/website/public/fonts/geist-regular.ttf differ diff --git a/apps/website/public/fonts/test-signifier-medium.woff2 b/apps/website/public/fonts/test-signifier-medium.woff2 deleted file mode 100644 index 39c74bfaa..000000000 Binary files a/apps/website/public/fonts/test-signifier-medium.woff2 and /dev/null differ diff --git a/apps/website/public/fonts/test-signifier-regular-italic.woff2 b/apps/website/public/fonts/test-signifier-regular-italic.woff2 deleted file mode 100644 index 82ffe6ebb..000000000 Binary files a/apps/website/public/fonts/test-signifier-regular-italic.woff2 and /dev/null differ diff --git a/apps/website/public/fonts/test-signifier-regular.woff2 b/apps/website/public/fonts/test-signifier-regular.woff2 deleted file mode 100644 index 161461a49..000000000 Binary files a/apps/website/public/fonts/test-signifier-regular.woff2 and /dev/null differ diff --git a/packages/grab/CHANGELOG.md b/packages/grab/CHANGELOG.md index 756677861..4cee97bff 100644 --- a/packages/grab/CHANGELOG.md +++ b/packages/grab/CHANGELOG.md @@ -22,7 +22,6 @@ ### Patch Changes - 9a1c4f0: Ship the accumulated selection, copy, customization, and reliability improvements since 0.1.48: - - Grab elements inside open Shadow DOM roots and same-origin iframes, including nested and transformed frames, while preserving source context, overlays, drag selection, editor navigation, and cleanup behavior. - Select Three.js and React Three Fiber objects directly from canvas renderers, with component metadata, source context, bounds, CSS extraction, and editing support. - Add public element-picker primitives for filtered or container-scoped hit testing, safe bounds snapshots, transactional page freezing, and editor navigation. The `grab` alias now exposes its documented `primitives` and stylesheet subpaths too. diff --git a/packages/react-grab/CHANGELOG.md b/packages/react-grab/CHANGELOG.md index 494e8386e..6d9b67630 100644 --- a/packages/react-grab/CHANGELOG.md +++ b/packages/react-grab/CHANGELOG.md @@ -24,7 +24,6 @@ ### Patch Changes - 9a1c4f0: Ship the accumulated selection, copy, customization, and reliability improvements since 0.1.48: - - Grab elements inside open Shadow DOM roots and same-origin iframes, including nested and transformed frames, while preserving source context, overlays, drag selection, editor navigation, and cleanup behavior. - Select Three.js and React Three Fiber objects directly from canvas renderers, with component metadata, source context, bounds, CSS extraction, and editing support. - Add public element-picker primitives for filtered or container-scoped hit testing, safe bounds snapshots, transactional page freezing, and editor navigation. The `grab` alias now exposes its documented `primitives` and stylesheet subpaths too. @@ -40,7 +39,6 @@ - bc3a591: Fix the grab hanging on "Grabbing…" when the app saturates the dev server's connection pool. Source resolution (bundle and source-map fetches via bippy, plus Next.js server-frame symbolication) now runs through a concurrency-capped, abortable queue with a timeout, so it no longer queues indefinitely behind the app's own requests. Requires bippy ≥0.5.42 so an aborted source-map fetch no longer poisons bippy's cache and later grabs recover. Also fixes: - - A click immediately after keyboard navigation selecting a stale element instead of the one under the pointer. - The page jumping when focus is restored after a grab (focus now restores with `preventScroll`). - Being unable to select page content while a modal sets `body { pointer-events: none }` (e.g. Radix), via a hit-test override. @@ -63,7 +61,6 @@ - 5407d4e: Surface deeper copy context for wrapper-heavy elements. App-owned shared-UI / design-system frames (files under `components/ui/`, `packages/ui/`, `design-system(s)/`, or `primitives/`, e.g. shadcn's `components/ui` or a monorepo `packages/ui`) are now treated like `node_modules` frames: still shown, but exempt from the compact line budget, so a grabbed wrapper digs through its UI primitives to the meaningful feature source by default. Adds a `maxContextLines` option (also settable via the script `data-options` attribute) to raise the budget further for large apps and agent/edit prompts — restoring the option the CLI already writes. Also hardens the trace: a non-finite/negative `maxContextLines` no longer disables the hard line cap (it falls back to the default), and consecutive duplicate trace lines from shared-UI frames are collapsed so the output stays readable. - - @react-grab/cli@0.1.47 ## 0.1.46