feat(playground): integrate DialKit real-time tweaking (draft/exploratory) - #2
Draft
tanthehack wants to merge 1 commit into
Draft
feat(playground): integrate DialKit real-time tweaking (draft/exploratory)#2tanthehack wants to merge 1 commit into
tanthehack wants to merge 1 commit into
Conversation
Add a Motion > Interactive (DialKit) playground section: a live specimen card whose radius/padding/accent/elevation/lift-spring are driven by useDialKit + motion/react. Mount <DialRoot theme=system> as a corner launcher so it coexists with the token TweakPanel, loaded client-only to avoid SSR hydration mismatch. See DIALKIT-NOTES.md for the prototype verdict. Verified: typecheck clean, no console errors, dark-theme sync, card tracks dial values, TweakPanel unobstructed.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Summary
Integrates DialKit (real-time parameter tweaking) into the design-system playground as a new Motion → Interactive (DialKit) section. A live specimen card's radius / padding / accent / elevation / lift-spring are all driven by
useDialKit+motion/react.Verified
pnpm typecheckclean.theme="system").#84CC16/ radius 20 / padding 28).Key decisions (full write-up in
components/playground/DIALKIT-NOTES.md)next/dynamic({ ssr: false })) — DialKit reads a browser store; SSR would hydration-mismatch.Transition(DialKit types it broadly; runtime is motion-compatible).defaultOpen={false}— DialKit defaults to open and persists its state; forcing closed avoids overlapping the right-side TweakPanel.Open questions / follow-ups
motionis now a dependency pulled in solely for this demo — keep only if we lean into DialKit for motion specs.productionEnabledif the playground ever ships to prod.