feat(playground): add local Scraps Checkbox prototyping slice

.gitignore

@@ -12,6 +12,8 @@
 
 # testing
 /coverage
+/playwright-report
+/test-results
 
 # next.js
 /.next/

.storybook/main.ts

@@ -1,4 +1,9 @@
 import type { StorybookConfig } from '@storybook/nextjs-vite';
+import prismComponents from 'prismjs/components.js';
+
+const prismLanguages = Object.keys(prismComponents.languages)
+  .filter(language => language !== 'meta')
+  .map(language => `prismjs/components/prism-${language}.min.js`);
 
 const config: StorybookConfig = {
   "stories": [
@@ -15,6 +20,17 @@ const config: StorybookConfig = {
   "framework": "@storybook/nextjs-vite",
   "staticDirs": [
     "../public"
-  ]
+  ],
+  viteFinal: async config => ({
+    ...config,
+    optimizeDeps: {
+      ...config.optimizeDeps,
+      include: [
+        ...(config.optimizeDeps?.include ?? []),
+        "prismjs",
+        ...prismLanguages,
+      ],
+    },
+  }),
 };
-export default config;
+export default config;

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import type { Preview } from '@storybook/nextjs-vite'
 import '@fontsource/rubik/400.css'
 import '@fontsource/rubik/500.css'
-import '@fontsource/roboto-mono/400.css'
+import '../src/components/ui/roboto-mono.css'
 import '../src/app/globals.css'
 
 const preview: Preview = {

AGENTS.md

@@ -1,5 +1,9 @@
 <!-- BEGIN:nextjs-agent-rules -->
+
 # This is NOT the Next.js you know
 
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
 <!-- END:nextjs-agent-rules -->

README.md

@@ -1,39 +1,104 @@
-# scrapscn
+# Scrapscn
 
-Sentry's design system as a [shadcn](https://ui.shadcn.com) registry.
+Scrapscn is a local playground for Sentry product interface prototypes. It ports regular Scraps components from the Sentry monolith to React and Tailwind. It also provides shadcn registry items as a release format.
 
-One command to theme any shadcn project with Sentry's purple-tinted neutrals, Blurple accent, and Rubik typography — both light and dark modes.
+The canonical source is `static/app/components/core` in `getsentry/sentry`. The current parity baseline is Sentry commit `d91f823d232ddd12a4d2a64554d85fd36df0e278`.
 
-```bash
-npx shadcn add https://scrapscn.sentry.dev/r/sentry-base
-```
+## Parity inventory
+
+[`scraps-parity.json`](scraps-parity.json) is the machine-readable inventory for all 48 regular Scraps modules. It records the pinned canonical source files and public exports, mapped local files, registry items, stories, tests, Figma nodes, playground routes, and completion state.
+
+Run `pnpm parity:validate` to check the inventory. The command fails when:
 
-## What's included
+- A regular Scraps module or public export differs from the pinned contract.
+- A claimed local file, registry item, or Figma node is invalid.
+- The recorded local exports no longer match the implementation.
+- A local UI component is neither mapped to a regular Scraps module nor marked as out of scope.
+- A module is marked complete without its required machine-checkable artifacts and exports.
 
-- **26+ semantic CSS variables** mapped from Sentry's product design tokens (oklch)
-- **Custom tokens** beyond shadcn defaults: `--warning`, `--success`, `--promotion`
-- **Chonky buttons**: Sentry's signature raised embossed depth effect with snap easing
-- **Debossed inputs**: Pressed-in feel with inset shadows, matching the product UI
-- **Semantic Badge & Alert variants**: `info`, `success`, `warning`, `danger`, `promotion`, `muted` — plus feature badges (`alpha`, `beta`, `new`)
-- **Chonky Switch**: Debossed track, embossed thumb, crossfading check/close icons
-- **Typography**: Dammit Sans (headlines), Rubik (body), Roboto Mono (code)
-- **Both modes**: Light and dark are first-class citizens — purple-tinted neutrals, never pure black
-- **WCAG AA compliant**: All text/surface pairs pass 4.5:1 contrast
+Run `pnpm parity:generate` only when you intentionally refresh the inventory from a local `getsentry/sentry` checkout at the pinned commit. Set `SENTRY_REPO_PATH` if that checkout is not at `../sentry`.
 
-## Development
+## Start a prototype
+
+You need Node.js 24 or later and pnpm.
 
 ```bash
 pnpm install
 pnpm dev
 ```
 
-## Deploy
+Open the URL printed by Next.js. The homepage is the playground. It needs no Sentry monolith, account, database, environment variable, or external service.
+
+The preview fills the viewport. Open the floating setup island at the bottom of the page to change Checkbox props, reorder form rows, switch theme or preview width, and reset the page. The island closes when you press Escape, move focus into the preview, or click outside it. Select **Checkbox settings** to open the direct template route. Select **Share** to copy an absolute URL that restores the current review state.
+
+## Create a template
+
+```bash
+pnpm template:create issue-review "Issue review"
+```
+
+The command creates:
+
+```text
+src/templates/issue-review/
+  template.json
+  template.tsx
+```
+
+Edit `template.tsx`. Do not edit a central template registry. Scrapscn generates the template manifest before `pnpm dev` and `pnpm build:next`. The new template appears at `/templates/issue-review` and in playground navigation.
+
+Each template uses local mock data. Put state that reviewers must share in URL parameters.
+
+## Share with Vercel Preview
+
+Push the prototype branch. Open both the Vercel branch URL and the commit URL. The branch URL follows new commits. The commit URL keeps the reviewed version fixed. If deployment protection is active, create a Vercel Shareable Link for an external reviewer.
+
+Verify the direct template route, a hard refresh, the Share URL, and toolbar comments before review. Do not use production data or secrets in a template.
+
+## Figma Dev Mode
+
+The Checkbox Code Connect file is `src/components/ui/checkbox.figma.ts`. It connects Scrapscn to the canonical Checkbox node `3481:4211` in the Sentry Components Figma library. The connection label is `Scrapscn React`, so it does not replace the monolith connection.
+
+Run the local syntax check without credentials:
+
+```bash
+pnpm figma:parse
+```
+
+To inspect all remote property combinations, provide a Figma access token in your shell and run:
+
+```bash
+FIGMA_ACCESS_TOKEN=... pnpm figma:preview
+```
+
+Never commit the token. Before publication, confirm in Dev Mode that size, checked state, and disabled state produce the expected `@/components/ui/checkbox` import and JSX.
 
-Auto-deploys to [scrapscn.sentry.dev](https://scrapscn.sentry.dev) via Vercel on push to `main`.
+For local code to canvas, run the template and use Figma MCP `generate_figma_design`. Its one-time URL includes a `figmacapture` hash that enables the development-only capture script for that visit. Test a Vercel Preview through the separate external-URL capture workflow. Production pages and runtime JavaScript do not load or contain the local capture bootstrap; source maps can retain development source text. The result must contain editable layers. For the return trip, change a connected Checkbox property and its label in the Figma test frame, read that frame through Figma MCP, and update the existing `Checkbox` usage. Do not replace it with raw markup.
 
-## Brand reference
+The approved Sentry page-frame Figma node is not yet recorded. The local page frame is a source-grounded structural prototype. Do not call it pixel-approved until Design provides a node URL and accepts the comparison.
 
-This repo consumes Sentry's brand tokens — it doesn't define them. The canonical sources are:
+## Checks
 
-- **Product tokens**: [`getsentry/sentry`](https://github.com/getsentry/sentry) → `static/app/utils/theme/scraps/`
-- **Brand guidelines**: [live.standards.site/sentry](https://live.standards.site/sentry)
+```bash
+pnpm test
+pnpm lint
+pnpm build:next
+pnpm build-storybook
+pnpm test:playground
+pnpm test:templates
+pnpm test:figma-capture
+pnpm figma:parse
+pnpm figma:preview
+```
+
+`test:playground` starts the production app through `portless`, completes the real browser workflow, and restores the copied URL in a second browser context. `test:templates` validates metadata, discovery, scaffold behavior, imports, and production routes.
+
+The full end state and exact completion gates are in [docs/scraps-parity-goal.md](docs/scraps-parity-goal.md). The first Checkbox slice does not mean all 48 regular Scraps modules are complete.
+
+## Registry release format
+
+Registry installation is not the first parity test. After a module passes the local playground and Figma gates, it can be published as a shadcn item. Existing registry consumers can install the base theme with:
+
+```bash
+npx shadcn add https://scrapscn.sentry.dev/r/sentry-base
+```

THIRD_PARTY_NOTICES.md

@@ -0,0 +1,24 @@
+# Third-party notices
+
+## Sentry source code
+
+Copyright 2008-2024 Functional Software, Inc. dba Sentry
+
+Scrapscn contains copies, modifications, or derivatives of source code from
+the `getsentry/sentry` repository. This material is subject to this license:
+
+Functional Source License, Version 1.1, Apache 2.0 Future License
+
+The applicable Terms and Conditions are available in the Sentry repository at
+the pinned source revision:
+
+https://github.com/getsentry/sentry/blob/d91f823d232ddd12a4d2a64554d85fd36df0e278/LICENSE.md
+
+The `code` registry item includes derivative material from these Sentry source
+files, among others:
+
+- `static/app/components/core/code/codeBlock.tsx`
+- `static/app/components/core/code/index.tsx`
+- `static/app/components/core/code/inlineCode.tsx`
+- `static/app/icons/iconCopy.tsx`
+- `static/app/utils/prism.tsx`

docs/checkbox-slice-evidence.md

@@ -0,0 +1,67 @@
+# Checkbox vertical slice evidence
+
+Date: 2026-08-21
+
+Status: credential-free local checks and local Figma code-to-canvas pass; authenticated Code Connect preview and publication, Vercel capture, round-trip, page-frame approval, and reviewer gates remain open.
+
+## Canonical source
+
+- Sentry commit: `d91f823d232ddd12a4d2a64554d85fd36df0e278`
+- Component: `static/app/components/core/checkbox/checkbox.tsx`
+- Behavior tests: `static/app/components/core/checkbox/checkbox.spec.tsx`
+- Visual cases: `static/app/components/core/checkbox/checkbox.snapshots.tsx`
+- Code Connect migration input: `static/app/components/core/checkbox/checkbox.figma.tsx`
+- Figma component: `https://www.figma.com/design/eTJz6aPgudMY9E6mzyZU0B/%F0%9F%90%A6-Components?node-id=3481-4211`
+
+## Local proof
+
+- `pnpm test`: 17 story files and 84 tests pass.
+- `pnpm lint`: passes.
+- `pnpm build:next`: passes with Next.js 16.3.2.
+- `pnpm build-storybook`: passes.
+- `pnpm test:playground`: 2 production-browser workflows pass. They change Checkbox controls, reorder the stack, use the keyboard, open the template, submit the form, change theme and viewport, copy and restore the Share URL, and verify the physical mobile header and navigation workflow at 390 × 844 px.
+- `pnpm test:templates`: 4 scaffold and metadata tests and 1 production-browser route test pass. The generated manifest is valid, the build prerenders `/templates/checkbox-settings`, and a hard refresh restores item order, disabled state, size, label, theme, viewport, and selected values.
+- `pnpm figma:parse`: passes with label `Scrapscn React`.
+- The Code Connect template uses the exact published Figma values for `size`, `checked`, and `state`. It maps the `Hover`, `Active`, and `Focused` design states to runtime interaction behavior instead of public props.
+- Package registry check: Next.js 16.3.2, React 19.2.8, and React DOM 19.2.8 are the current latest versions on 2026-08-21.
+- Local browser QA at 1440 × 1000 px and 390 × 844 px found no horizontal overflow, console errors, or broken state restoration after the responsive header fix. The mobile navigation opens, closes with Escape, and returns focus to its trigger.
+- The existing development process measured 53.7 ms TTFB, 96 ms LCP and FCP, 0 CLS, 36.9 ms React hydration, and a 378 ms Fast Refresh. Cold development startup was not measured because this Codex process does not have access to the required cmux workspace.
+
+The Checkbox browser assertions cover exact sizes, radii, light and dark border colors, canonical SVG paths, size-specific stroke widths, focus-ring geometry, disabled and read-only behavior, `aria-disabled`, and inherited interaction color. These source-level and computed-style checks do not replace an approved side-by-side image baseline.
+
+## Preview proof
+
+- Git branch: `codex/checkbox-playground-slice`
+- Git commit: `5b75cb8d059641c687b9bcc5e449323f340c0a63`
+- Vercel branch URL: `https://scrapscn-git-codex-checkbox-playground-slice.sentry.dev`
+- Immutable deployment URL for that commit: `https://scrapscn-3j7c2urk2.sentry.dev`
+- Deployment ID: `dpl_9UbEtffSCkeo8yEsU2uxtTM8uwWR`
+- Vercel build: passes with Next.js 16.3.2 and prerenders the template route.
+- Protected route check: authenticated requests to the branch and immutable deployment template URLs return HTTP 200 with the complete review-state query.
+
+Vercel Authentication protects these URLs. An intended reviewer must still open the branch URL, create or use a Shareable Link when needed, and confirm toolbar comments.
+
+## Figma smoke-test proof
+
+- Test file: `https://www.figma.com/design/fbuI9XgwsUA8xEum8WBGw8`
+- Editable code-to-canvas capture: `https://www.figma.com/design/fbuI9XgwsUA8xEum8WBGw8?node-id=3-2`
+- Semantic settings frame: `https://www.figma.com/design/fbuI9XgwsUA8xEum8WBGw8?node-id=5-171`
+- Connected checked Checkbox instance: `https://www.figma.com/design/fbuI9XgwsUA8xEum8WBGw8?node-id=5-178`
+- Code-to-canvas captured the direct local template as a 2000 × 1209 editable frame on 2026-08-21. This proves the local capture path, not the separate Vercel Preview capture gate.
+- The semantic frame uses three published Sentry Checkbox instances: checked, indeterminate, and disabled unchecked. Their component properties use the canonical `size`, `checked`, and `state` vocabularies.
+- Figma MCP design context recognizes the checked instance through the existing monolith connection and returns `<Checkbox size="sm" />` from `@sentry/scraps/checkbox`.
+
+That last result is a deliberate failing assertion for the Scrapscn gate. The local `Scrapscn React` connection has not been published, so Dev Mode cannot return `@/components/ui/checkbox` yet. Publishing through the generic MCP mapping API is unsafe because it only accepts the shared `React` label and could conflict with the monolith connection. The safe path is the Code Connect CLI with the configured `Scrapscn React` label.
+
+## Open manual gates
+
+1. Record the approved Sentry page-frame Figma node URL. The local shell is not pixel-approved without it.
+2. Provide `FIGMA_ACCESS_TOKEN` with Code Connect write and file-content read access. `pnpm figma:preview` must return the exact 45-combination Figma schema, validate every generated snippet, and report all 18 enabled or disabled public Checkbox combinations against the local import.
+3. Publish the `Scrapscn React` connection with the Code Connect CLI, then inspect it in Dev Mode for every Checkbox combination.
+4. Capture the running Vercel Preview template into the recorded test file and compare it with the local capture.
+5. Repeat design-to-code after publication and confirm that it returns the local Checkbox import. Then change a mapped property and the surrounding copy in the recorded semantic frame and complete the return trip to the local template.
+6. Approve a side-by-side Checkbox image baseline against the monolith or approved Figma component.
+7. Confirm reviewer access and comments on the recorded Vercel branch and immutable deployment URLs.
+8. Measure cold `pnpm dev` startup and the five-minute and ten-minute usability criteria with a new user. The local hot-reload measurement is recorded above.
+
+The slice and the 48-module goal remain incomplete until these gates pass.