User story / Problem statement
Currently the demo app hand-rolls its dropdowns, tooltip, dialog, toasts, segmented controls and progress bar. Readers who study the app to learn Canton have to reverse-engineer our inventions instead of reading a library's docs. The monorepo already picked Zag as its behavior engine for canton-dappbooster, and the app diverges from it.
Expected outcome
Every interactive control in the demo app comes from Ark UI, which wraps the same Zag machines the kit already uses. Generic icons come from lucide-react. A reader can look up any control in public docs.
Acceptance criteria
Alternatives considered
Radix Primitives. Better known, but it is a second behavior engine next to the kit's Zag, and its Toast still leaves the toast list to the caller, so utils/toast.ts would survive. Ark depends on @zag-js/* at the version the kit already resolves, so no duplicate copy lands in the lockfile.
Technical notes
Install @ark-ui/react and lucide-react in dapp/frontend only. canton-dappbooster stays on raw Zag, because its anatomy class strings are the contract canton-theme selects against. Ark Steps touches CreateGrant, so expect a conflict with the separate refactor issue unless one lands first.
User story / Problem statement
Currently the demo app hand-rolls its dropdowns, tooltip, dialog, toasts, segmented controls and progress bar. Readers who study the app to learn Canton have to reverse-engineer our inventions instead of reading a library's docs. The monorepo already picked Zag as its behavior engine for
canton-dappbooster, and the app diverges from it.Expected outcome
Every interactive control in the demo app comes from Ark UI, which wraps the same Zag machines the kit already uses. Generic icons come from
lucide-react. A reader can look up any control in public docs.Acceptance criteria
AccountMenuandRoleSelectuse ArkMenu, andhooks/useDismissable.tsis deletedToast, and the store and timer map inutils/toast.tsare deletedModaluses ArkDialog, andutils/topLayer.tsis deletedInfoTipuses ArkTooltipand opens on touchStepsinstead of astepcounterScheduleBaruses ArkProgressand reports its value to a screen readerNumberInputinstead of stripping characters by regexSelectuses ArkSelectlucide-react, and only the brand and house marks stay hand-rolledAlternatives considered
Radix Primitives. Better known, but it is a second behavior engine next to the kit's Zag, and its
Toaststill leaves the toast list to the caller, soutils/toast.tswould survive. Ark depends on@zag-js/*at the version the kit already resolves, so no duplicate copy lands in the lockfile.Technical notes
Install
@ark-ui/reactandlucide-reactindapp/frontendonly.canton-dappboosterstays on raw Zag, because its anatomy class strings are the contractcanton-themeselects against. ArkStepstouchesCreateGrant, so expect a conflict with the separate refactor issue unless one lands first.