feat(docsite): playground design editor + code-driven theming

[ernestt]

Summary

Reframes the docsite playground around teaching global vs. local theming, with the code as the single source of truth for the theme.

• Code-driven theming — the example now wraps its UI in a <Theme> with an inline defineTheme({...}) literal. The Theme editor, presets, and element targeting all read/write that literal (new themeSource.ts), so panel edits and hand-edits round-trip and the share URL carries the theme.
• New "Design Editor" left-panel view — select an element in the preview to edit it in one panel with a Properties / Style switcher. Style applies either locally (a one-off xstyle via a managed stylex.create block — new instanceStyleSource.ts) or globally (theme component overrides), with hover previews of the affected elements. Empty state prompts you to pick the select tool.
• Theme editor reorganized into Presets / Custom / Advanced; the preset picker is extracted into a shared ThemePicker reused by the /themes explorer (dedupes the sidebar + carousel).
• Neutral default — the playground seeds the Neutral theme (matching the docsite's other component previews); the default example is responsive with a cleaner footer (two buttons, no dividers).
• Targeting polish — outlines hug each element's real border-radius; selection shows the element solid + same-type siblings faint.

Files of note

• New: themeSource.ts, styleOverride/ (StyleScopeEditor, StyleOverrideFields, instanceStyleSource), designEditor/DesignEditor.tsx, themeEditor/componentThemeTargets.ts, components/ThemePicker.tsx.
• Removed: themeEditor/ComponentTokensPanel.tsx (folded into the targeting flow).
• Refactored: PlaygroundClient, preview/page.tsx, targetingOverlay, ThemeEditor, ThemePackagePage, previewThemes, defaultCode.

Test plan

• pnpm -F @xds/docsite typecheck
• pnpm -F @xds/docsite test — 186 tests pass, incl. new themeSource + instanceStyleSource suites
• eslint clean on all changed files
• Manual browser smoke: select → edit props; Apply Locally writes pgStyles/xstyle; Apply Globally writes the theme; presets/custom/advanced tabs; deselect; default Neutral seed

Made with Cursor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
astryx	Ignored		Jun 24, 2026 4:51pm

[github-actions]

🚀 Vercel Preview Deployment

Status	✅ Deployed
Preview	Open Preview
Commit	5217102
Inspect	Vercel Dashboard
Workflow	View Logs

No authentication required — anyone with the link can view the preview.

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.6KB	0B

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

[cixzhang]

There's a lot of changes from parts of the repo that don't seem intentional. Can you revert them and focus only on the docsite updates? Otherwise you'll likely run into merge conflict issues with the prefix update. Make sure you rebase over main only only bring in the intended changes to the docsite.

[ernestt]

Thanks @cixzhang — good catch, and you were right that those weren't intentional. I've rebuilt the branch so it's now docsite-only (21 files) on top of latest main.

Root cause: the ~300 non-docsite files were pure prettier reformatting (table padding, JSX line-reflows — no behavioral changes). They came from a single git merge commit I made to pull in main: a merge stages every merged path (not just the conflicted ones), and the lint-staged pre-commit hook then ran prettier --write across all of them, reformatting files to this branch's prettier output, which diverged from how they're committed on main. None of my actual feature commits touched anything outside apps/docsite/.

Fix: I reset the branch to current origin/main, re-applied only the intended docsite changes (and re-did the @xds → @astryxdesign renames against the live tree, plus picked up #3015's autoSaveId rename in PlaygroundClient), and committed staging only docsite paths so the hook can't reformat anything else. Verified: typecheck, 186 docsite tests, and eslint all pass.

The diff is now just the playground/theming work. Sorry for the noise!