@monimesl/dot-cli 0.1.0-alpha.19 → 0.1.0-alpha.21

package/dist/templates/showcase/dot.ts

@@ -10,6 +10,7 @@ export default defineDot({
     'basics/control-flow',
     'basics/events',
     'basics/navigation',
+    'basics/pick-genre',
     'basics/hooks',
     'basics/bars',
     // What a view can show.
@@ -30,6 +31,7 @@ export default defineDot({
     'dash/ui',
     'dash/system',
     'dash/media',
+    'dash/contacts',
     'dash/network',
     'dash/files',
     'dash/cache',

package/dist/templates/showcase/pages/basics/bars/controller.ts

@@ -5,7 +5,7 @@ export default definePage({
   // What Dash's bars show when the page opens, on top of the configs in dot.ts.
   configs: { navigationBar: { title: 'Bars' } },
   mutations: {
-    setTitle: (_state, event: DotEvent<{ value: string }>) => ({ title: event.detail.value }),
+    setTitle: (_state, event: ValueEvent) => ({ title: event.detail.value }),
   },
   actions: {
     // While the page runs, setNavigationBar changes what configs set.

package/dist/templates/showcase/pages/basics/control-flow/controller.ts

@@ -5,7 +5,7 @@ export default definePage({
   configs: { navigationBar: { title: 'If and For' } },
   mutations: {
     // Sells five tickets for the show the button belongs to.
-    sell: (state, event: DotEvent<unknown, { id: string }>) => ({
+    sell: (state, event: DataEvent<{ id: string }>) => ({
       shows: state.shows.map((show) =>
         show.id === event.data.id ? { ...show, left: Math.max(0, show.left - 5) } : show,
       ),

package/dist/templates/showcase/pages/basics/events/controller.ts

@@ -20,22 +20,22 @@ export default definePage({
       ...describe('countTap', event),
     }),
     // `detail` is what the component sends: text for an Input...
-    setSong: (_state, event: DotEvent<{ value: string }>) => ({
+    setSong: (_state, event: ValueEvent) => ({
       song: event.detail.value,
       ...describe('setSong', event),
     }),
     // ...a number for a Slider...
-    setVolume: (_state, event: DotEvent<{ value: number }>) => ({
+    setVolume: (_state, event: ValueEvent<number>) => ({
       volume: event.detail.value,
       ...describe('setVolume', event),
     }),
     // ...and checked for a Switch.
-    setLoud: (_state, event: DotEvent<{ checked: boolean }>) => ({
+    setLoud: (_state, event: CheckedEvent) => ({
       loud: event.detail.checked,
       ...describe('setLoud', event),
     }),
     // `data` holds the element's data- attributes, as text.
-    play: (_state, event: DotEvent<unknown, { artist: string; year: string }>) => ({
+    play: (_state, event: DataEvent<{ artist: string; year: string }>) => ({
       song: `${event.data.artist}, ${event.data.year}`,
       ...describe('play', event),
     }),

package/dist/templates/showcase/pages/basics/events/view.dml

@@ -31,7 +31,7 @@
 
   <View gap="small">
     <Text variant="subtitle">event.detail</Text>
-    <Text variant="caption" tone="muted">What the component sends, such as the text typed or the switch's new state.</Text>
+    <Text variant="caption" tone="muted">What the component sends, such as the text typed or the switch's new state. In the controller, type the event as ValueEvent, CheckedEvent or IndexEvent.</Text>
     <View variant="card">
       <Input label="Song" placeholder="Exodus" value="{{ song }}" onChange="setSong" />
       <Slider label="Volume" min="0" max="10" showValue value="{{ volume }}" onChange="setVolume" />
@@ -41,7 +41,7 @@
 
   <View gap="small">
     <Text variant="subtitle">event.data</Text>
-    <Text variant="caption" tone="muted">The data- attributes of the element, such as data-artist. They tell one handler which item was used. Their values arrive as text.</Text>
+    <Text variant="caption" tone="muted">The data- attributes of the element, such as data-artist. They tell one handler which item was used. Their values arrive as text. In the controller, type the event as DataEvent.</Text>
     <View variant="card" direction="row" wrap gap="small">
       <Button variant="secondary" data-artist="Drizilik" data-year="2021" onClick="play">Exodus</Button>
       <Button variant="secondary" data-artist="ApreeL" data-year="2025" onClick="play">Control</Button>

package/dist/templates/showcase/pages/basics/hooks/controller.ts

@@ -28,6 +28,12 @@ export default definePage({
     onUnload() {
       lastClosed = new Date().toLocaleTimeString('en-GB');
     },
+    // Runs when the person pulls the page down from its top. The spinner shows until it finishes,
+    // here after a second, as a real page would wait for its server.
+    async onRefresh() {
+      await this.dash.system.delay(1000);
+      this.setState((current) => ({ runs: ran(current.runs, 'onRefresh') }));
+    },
   },
   actions: {
     openAnother() {

package/dist/templates/showcase/pages/basics/hooks/view.dml

@@ -13,6 +13,11 @@
     <Button variant="secondary" onClick="openAnother">Open another page</Button>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">onRefresh</Text>
+    <Text variant="caption" tone="muted">Pull this page down from its top, then let go. Only a page with onRefresh can be pulled, and its spinner shows until the hook finishes.</Text>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">onUnload</Text>
     <View variant="card">

package/dist/templates/showcase/pages/basics/navigation/controller.ts

@@ -30,5 +30,12 @@ export default definePage({
     home() {
       this.navigation.reset('index');
     },
+    async chooseGenre() {
+      const genre = await this.navigation.pushForResult<string>('basics/pick-genre');
+      // Undefined when the person went back without choosing.
+      if (genre) {
+        this.setState({ genre });
+      }
+    },
   },
 });

package/dist/templates/showcase/pages/basics/navigation/state.ts

@@ -6,4 +6,6 @@ export default {
   trail: '',
   // The options this page opened with, as text.
   options: '',
+  // What the genre page gave back.
+  genre: '',
 };

package/dist/templates/showcase/pages/basics/navigation/view.dml

@@ -34,4 +34,15 @@
     <Text variant="caption" tone="muted">Closes every page and opens one, such as the home page.</Text>
     <Button variant="secondary" onClick="home">Start over</Button>
   </View>
+
+  <View gap="small">
+    <Text variant="subtitle">pushForResult and backWithResult</Text>
+    <Text variant="caption" tone="muted">Opens a page that gives something back, such as a choice. It gives undefined when the person goes back without choosing.</Text>
+    <View variant="card" direction="row" align="center" gap="medium">
+      <View grow>
+        <Text>{{ genre ? 'Your genre: ' + genre : 'No genre chosen yet' }}</Text>
+      </View>
+      <Button variant="secondary" onClick="chooseGenre">Choose a genre</Button>
+    </View>
+  </View>
 </View>

package/dist/templates/showcase/pages/basics/pick-genre/controller.ts

@@ -0,0 +1,12 @@
+import state from './state';
+
+// Opened by the navigation page with pushForResult. It gives back the genre the person taps.
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Choose a genre' } },
+  actions: {
+    pick(_state, event: DataEvent<{ genre: string }>) {
+      this.navigation.backWithResult(event.data.genre);
+    },
+  },
+});

package/dist/templates/showcase/pages/basics/pick-genre/state.ts

@@ -0,0 +1,3 @@
+export default {
+  genres: ['Palm-wine', 'Gumbe', 'Milo jazz', 'Afropop', 'Kriofusion', 'Gospel'],
+};

package/dist/templates/showcase/pages/basics/pick-genre/view.dml

@@ -0,0 +1,9 @@
+<View>
+  <Text variant="title">Choose a genre</Text>
+  <Text>Tap one to give it back to the page that opened this one. Going back gives nothing.</Text>
+  <List>
+    <For each="{{ genres }}" item="genre" key="*this">
+      <ListItem icon="music" title="{{ genre }}" data-genre="{{ genre }}" onTap="pick" />
+    </For>
+  </List>
+</View>

package/dist/templates/showcase/pages/components/carousel/controller.ts

@@ -34,7 +34,7 @@ export default definePage({
     },
   },
   mutations: {
-    showChapter: (_state, event: DotEvent<{ index: number }>) => ({ chapter: event.detail.index }),
+    showChapter: (_state, event: IndexEvent) => ({ chapter: event.detail.index }),
     back: (state) => ({ chapter: Math.max(state.chapter - 1, 0) }),
     next: (state) => ({ chapter: Math.min(state.chapter + 1, state.chapters.length - 1) }),
   },

package/dist/templates/showcase/pages/components/feedback/controller.ts

@@ -1,4 +1,4 @@
-import state from './state';
+import state, { paymentSteps } from './state';
 
 export default definePage({
   initialState: state,
@@ -11,12 +11,22 @@ export default definePage({
     // A toast lasts its default time unless the button gives one, in milliseconds.
     showToast: (
       _state,
-      event: DotEvent<unknown, { message: string; tone: string; duration?: string }>,
+      event: DataEvent<{ message: string; tone: string; duration?: string }>,
     ) => ({
       toast: event.data.message,
       toastTone: event.data.tone,
       toastDuration: event.data.duration ? Number(event.data.duration) : undefined,
     }),
     clearToast: () => ({ toast: '' }),
+    hideTip: () => ({ tipShown: false }),
+    advancePayment: (state) => {
+      const paymentStage = state.paymentStage + 1;
+      return { paymentStage, payment: paymentSteps(paymentStage) };
+    },
+    failPayment: (state) => ({
+      paymentFailed: true,
+      payment: paymentSteps(state.paymentStage, true),
+    }),
+    restartPayment: () => ({ paymentStage: 0, paymentFailed: false, payment: paymentSteps(0) }),
   },
 });

package/dist/templates/showcase/pages/components/feedback/state.ts

@@ -1,3 +1,31 @@
+export type StepStatus = 'done' | 'current' | 'upcoming' | 'failed';
+
+export interface PaymentStep {
+  title: string;
+  text: string;
+  status: StepStatus;
+}
+
+// Sending Le 500 to Fatmata Conteh in Bo.
+const PAYMENT = [
+  { title: 'Paid', text: 'Le 500 from your wallet' },
+  { title: 'Sent', text: 'On its way to Bo' },
+  { title: 'Received', text: 'By Fatmata Conteh' },
+];
+
+// The payment's steps when `stage` of them are done. The next one is under way, or failed.
+export function paymentSteps(stage: number, failed = false): PaymentStep[] {
+  return PAYMENT.map((step, index) => {
+    let status: StepStatus = 'upcoming';
+    if (index < stage) {
+      status = 'done';
+    } else if (index === stage) {
+      status = failed ? 'failed' : 'current';
+    }
+    return { ...step, status };
+  });
+}
+
 export default {
   progress: 40,
   busy: false,
@@ -5,4 +33,9 @@ export default {
   toast: '',
   toastTone: 'default',
   toastDuration: undefined as number | undefined,
+  tipShown: true,
+  // How many steps are done, and whether the next one failed, which ends the payment.
+  paymentStage: 0,
+  paymentFailed: false,
+  payment: paymentSteps(0),
 };

package/dist/templates/showcase/pages/components/feedback/view.dml

@@ -72,7 +72,10 @@
 
   <View gap="small">
     <Text variant="subtitle">Notice</Text>
-    <Text variant="caption" tone="muted">A message that stays in the page, in a tone.</Text>
+    <Text variant="caption" tone="muted">A message that stays in the page, in a tone. With onClose it shows a close button, and the page hides it.</Text>
+    <If condition="{{ tipShown }}">
+      <Notice tone="info" title="Tip" onClose="hideTip">Hold a song to add it to a playlist.</Notice>
+    </If>
     <Notice title="Heads up">Doors open at 7 pm, and the music starts at 8.</Notice>
     <Notice tone="info" title="New">Tickets for gospel night in Kenema are on sale.</Notice>
     <Notice tone="success" title="Booked">Two tickets for Salone Sounds Live.</Notice>
@@ -80,6 +83,23 @@
     <Notice tone="danger" title="Payment failed">The bank didn't answer. Try again.</Notice>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">Steps</Text>
+    <Text variant="caption" tone="muted">What happened and what comes next, such as a payment's progress. Each Step is done, current, upcoming or failed.</Text>
+    <View variant="card">
+      <Steps>
+        <For each="{{ payment }}" item="step" key="title">
+          <Step title="{{ step.title }}" text="{{ step.text }}" status="{{ step.status }}" />
+        </For>
+      </Steps>
+      <View direction="row" gap="small">
+        <Button variant="secondary" onClick="advancePayment" disabled="{{ paymentFailed || paymentStage === payment.length }}">Next step</Button>
+        <Button variant="secondary" onClick="failPayment" disabled="{{ paymentFailed || paymentStage === payment.length }}">Fail it</Button>
+        <Button variant="secondary" onClick="restartPayment" disabled="{{ paymentStage === 0 }}">Start over</Button>
+      </View>
+    </View>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">Badge</Text>
     <Text variant="caption" tone="muted">A short status.</Text>

package/dist/templates/showcase/pages/components/forms/controller.ts

@@ -1,12 +1,11 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import type { TicketType } from './state';
 import state, { SHOWS, TICKETS } from './state';
 
-type Typed = DotEvent<{ value: string }>;
-type Toggled = DotEvent<{ checked: boolean }>;
-
-// "2" tickets of a Le 1,200 type -> "Le 2,400"
-function total(tickets: string, ticket: TicketType): string {
-  const leones = (Number(tickets) || 0) * TICKETS[ticket].price;
+// 2 tickets of a Le 1,200 type -> "Le 2,400"
+function total(tickets: number, ticket: TicketType): string {
+  const leones = tickets * TICKETS[ticket].price;
   return `Le ${leones.toLocaleString('en-US')}`;
 }
 
@@ -14,36 +13,35 @@ export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Forms' } },
   mutations: {
-    setShow: (_state, event: Typed) => ({
+    setShow: (_state, event: ValueEvent) => ({
       show: event.detail.value,
       showName: SHOWS[event.detail.value] ?? 'Not chosen yet',
     }),
-    setName: (_state, event: Typed) => ({ name: event.detail.value }),
-    setEmail: (_state, event: Typed) => ({ email: event.detail.value }),
-    setPhone: (_state, event: Typed) => ({ phone: event.detail.value }),
-    setTickets: (state, event: Typed) => ({
+    setName: (_state, event: ValueEvent) => ({ name: event.detail.value }),
+    setEmail: (_state, event: ValueEvent) => ({ email: event.detail.value }),
+    setPhone: (_state, event: ValueEvent) => ({ phone: event.detail.value }),
+    setTickets: (state, event: ValueEvent<number>) => ({
       tickets: event.detail.value,
       total: total(event.detail.value, state.ticket),
     }),
-    setShoutOut: (_state, event: Typed) => ({ shoutOut: event.detail.value }),
-    setPromo: (_state, event: Typed) => ({ promo: event.detail.value }),
-    setChairs: (_state, event: DotEvent<{ value: number }>) => ({ chairs: event.detail.value }),
-    setTip: (_state, event: DotEvent<{ value: number }>) => ({ tip: event.detail.value }),
-    setTicket: (state, event: DotEvent<{ value: TicketType }>) => ({
+    setShoutOut: (_state, event: ValueEvent) => ({ shoutOut: event.detail.value }),
+    setPromo: (_state, event: ValueEvent) => ({ promo: event.detail.value }),
+    setChairs: (_state, event: ValueEvent<number>) => ({ chairs: event.detail.value }),
+    setTip: (_state, event: ValueEvent<number>) => ({ tip: event.detail.value }),
+    setTicket: (state, event: ValueEvent<TicketType>) => ({
       ticket: event.detail.value,
       ticketName: TICKETS[event.detail.value].name,
       total: total(state.tickets, event.detail.value),
     }),
-    setETickets: (_state, event: Toggled) => ({ eTickets: event.detail.checked }),
-    setAgreed: (_state, event: Toggled) => ({ agreed: event.detail.checked }),
+    setETickets: (_state, event: CheckedEvent) => ({ eTickets: event.detail.checked }),
+    setAgreed: (_state, event: CheckedEvent) => ({ agreed: event.detail.checked }),
   },
   actions: {
     async send(state) {
-      const count = Number(state.tickets);
+      const count = state.tickets;
       const errors = {
         show: state.show ? '' : 'Choose a show',
         phone: state.phone.length < 8 ? 'Enter a phone number, such as 76 123456' : '',
-        tickets: count >= 1 && count <= 10 ? '' : 'Buy from 1 to 10 tickets',
         shoutOut: state.shoutOut.includes('http')
           ? 'Links are not read out. Write words only.'
           : '',
@@ -64,9 +62,11 @@ export default definePage({
           sent: `${count} ${count === 1 ? 'ticket' : 'tickets'}, sent to +232 ${phone}`,
         });
       } catch (error) {
-        this.setState({ failure: (error as Error).message });
+        this.setState({ failure: errorMessage(error) });
+      } finally {
+        // However the request ends, the button stops spinning and takes taps again.
+        this.setState({ sending: false });
       }
-      this.setState({ sending: false });
     },
   },
 });

package/dist/templates/showcase/pages/components/forms/state.ts

@@ -18,11 +18,11 @@ export default {
   // The order, as the summary shows it.
   showName: 'Not chosen yet',
   ticketName: TICKETS.regular.name,
-  total: 'Le 0',
+  total: `Le ${2 * TICKETS.regular.price}`,
   name: '',
   email: '',
   phone: '',
-  tickets: '',
+  tickets: 2,
   promo: '',
   chairs: 2,
   tip: 20,
@@ -30,7 +30,7 @@ export default {
   ticket: 'regular' as TicketType,
   eTickets: true,
   agreed: false,
-  errors: { show: '', phone: '', tickets: '', shoutOut: '' },
+  errors: { show: '', phone: '', shoutOut: '' },
   sending: false,
   sent: '',
   failure: '',

package/dist/templates/showcase/pages/components/forms/view.dml

@@ -20,11 +20,18 @@
       <Input label="Name" placeholder="Mariama Kamara" value="{{ name }}" maxLength="40" onChange="setName" />
       <Input label="Email" type="email" placeholder="mariama@example.com" hint="{{ eTickets ? 'For the e-tickets' : 'Turn on e-tickets below to use it' }}" value="{{ email }}" disabled="{{ !eTickets }}" onChange="setEmail" />
       <Input label="Phone" type="phone" prefix="+232" placeholder="76 123456" value="{{ phone }}" error="{{ errors.phone }}" onChange="setPhone" />
-      <Input label="Tickets" type="number" placeholder="2" suffix="at most 10" value="{{ tickets }}" error="{{ errors.tickets }}" onChange="setTickets" />
       <Input label="Promo code" type="password" placeholder="Hidden as you type" value="{{ promo }}" onChange="setPromo" onSubmit="send" />
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">Stepper</Text>
+    <Text variant="caption" tone="muted">A count changed one at a time. min and max keep it in range, so there's nothing to check.</Text>
+    <View variant="card">
+      <Stepper label="Tickets" min="1" max="10" hint="At most 10 for each person" value="{{ tickets }}" onChange="setTickets" />
+    </View>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">RadioGroup and Radio</Text>
     <Text variant="caption" tone="muted">One choice from a few. A Radio, or the whole group, can be disabled.</Text>
@@ -69,7 +76,7 @@
     <View variant="card" gap="none">
       <DetailRow label="Show" value="{{ showName }}" />
       <DetailRow label="Ticket" value="{{ ticketName }}" />
-      <DetailRow label="How many" value="{{ tickets || '0' }}" />
+      <DetailRow label="How many" value="{{ tickets }}" />
       <Divider />
       <DetailRow label="Total" value="{{ total }}" weight="bold" paddingTop="medium" />
       <DetailRow label="Paid" value="{{ sent ? 'Yes' : 'Not yet' }}" tone="{{ sent ? 'success' : 'warning' }}" />

package/dist/templates/showcase/pages/components/icons/controller.ts

@@ -7,7 +7,7 @@ export default definePage({
     clearToast: () => ({ toast: '' }),
   },
   actions: {
-    async copyName(_state, event: DotEvent<unknown, { name: string }>) {
+    async copyName(_state, event: DataEvent<{ name: string }>) {
       await this.dash.system.copyText(event.data.name);
       this.setState({ toast: `Copied "${event.data.name}"` });
     },

package/dist/templates/showcase/pages/components/images/controller.ts

@@ -1,3 +1,5 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import state from './state';
 
 // AUDACITY's id in Apple's catalog; its cover's address can change, so the page looks it up.
@@ -25,7 +27,7 @@ export default definePage({
             : { coverNote: "Apple's catalog has no cover for it" },
         );
       } catch (error) {
-        this.setState({ coverNote: (error as Error).message });
+        this.setState({ coverNote: errorMessage(error) });
       }
     },
   },

package/dist/templates/showcase/pages/components/images/view.dml

@@ -67,4 +67,17 @@
       </Else>
     </View>
   </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Avatar</Text>
+    <Text variant="caption" tone="muted">A person's photo, round. Without one, or when it fails to load, their initials show.</Text>
+    <View variant="card" direction="row" align="center" gap="large">
+      <Avatar name="Salone Sounds" image="statics/logo.png" size="large" />
+      <Avatar name="Mariama Kamara" size="large" />
+      <Avatar name="Fatmata Conteh" />
+      <Avatar name="Boii" size="small" />
+      <Avatar name="Kao Denero" image="{{ missing }}" />
+    </View>
+    <Text variant="caption" tone="muted">The last one's picture is missing, so it shows KD.</Text>
+  </View>
 </View>

package/dist/templates/showcase/pages/components/layout/controller.ts

@@ -45,10 +45,10 @@ export default definePage({
     nextAlign: (state) => ({ align: after(ALIGNS, state.align) }),
     nextGap: (state) => ({ gap: after(SPACES, state.gap) }),
     toggleWrap: (state) => ({ wrap: !state.wrap }),
-    openSection: (_state, event: DotEvent<unknown, { name: string }>) => ({
+    openSection: (_state, event: DataEvent<{ name: string }>) => ({
       section: event.data.name,
     }),
-    showFirst: (_state, event: DotEvent<{ index: number }>) => ({ first: event.detail.index }),
+    showFirst: (_state, event: IndexEvent) => ({ first: event.detail.index }),
     shelfStart: () => ({ first: 0 }),
     shelfEnd: (state) => ({ first: state.releases.length - 1 }),
     playSong: (state) => ({ playing: !state.playing }),

package/dist/templates/showcase/pages/components/lists/controller.ts

@@ -7,7 +7,7 @@ export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Lists' } },
   mutations: {
-    choose: (state, event: DotEvent<unknown, { id: string }>) => {
+    choose: (state, event: DataEvent<{ id: string }>) => {
       const artist = state.artists.find((candidate) => candidate.id === event.data.id);
       return { chosen: artist?.name ?? '' };
     },

package/dist/templates/showcase/pages/components/lists/view.dml

@@ -50,6 +50,24 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">Disclosure</Text>
+    <Text variant="caption" tone="muted">A row that opens to show more, such as an answer. The person opens and closes it, and open sets how it starts.</Text>
+    <View variant="card" gap="none">
+      <Disclosure title="Can I get a refund?" subtitle="Tickets and refunds" open>
+        <Text>Yes, until the Friday before the show. After that, you can give your ticket to someone else.</Text>
+      </Disclosure>
+      <Divider />
+      <Disclosure title="When do doors open?">
+        <Text>At 6 pm. The music starts at 7.</Text>
+      </Disclosure>
+      <Divider />
+      <Disclosure title="Is there parking?">
+        <Text>Yes, at the Lumley junction car park, a short walk away.</Text>
+      </Disclosure>
+    </View>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">EmptyState</Text>
     <Text variant="caption" tone="muted">Shows when a list has nothing in it, with a way forward.</Text>

package/dist/templates/showcase/pages/components/money/controller.ts

@@ -1,7 +1,5 @@
 import state from './state';
 
-type Typed = DotEvent<{ value: string }>;
-
 // The code this page accepts; a real dot checks it with its server.
 const RIGHT_CODE = '123456';
 
@@ -12,7 +10,7 @@ export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Money and codes' } },
   mutations: {
-    setAmount: (_state, event: DotEvent<{ value: number | null }>) => {
+    setAmount: (_state, event: ValueEvent<number | null>) => {
       const amount = event.detail.value;
       if (!amount) {
         return { amount, amountText: '', request: '' };
@@ -23,20 +21,20 @@ export default definePage({
         request: `https://pay.example.com/tip?amount=${amount}&currency=SLE&in=cents`,
       };
     },
-    setCode: (_state, event: Typed) => ({ code: event.detail.value, codeError: '' }),
-    checkCode: (_state, event: Typed) => {
+    setCode: (_state, event: ValueEvent) => ({ code: event.detail.value, codeError: '' }),
+    checkCode: (_state, event: ValueEvent) => {
       if (event.detail.value === RIGHT_CODE) {
         return { verified: true };
       }
       return { code: '', codeError: 'That code is wrong. Try again.' };
     },
     startAgain: () => ({ verified: false, code: '' }),
-    setPin: (_state, event: Typed) => ({ pin: event.detail.value }),
+    setPin: (_state, event: ValueEvent) => ({ pin: event.detail.value }),
     clearPin: () => ({ pin: '' }),
-    setLocked: (_state, event: DotEvent<{ checked: boolean }>) => ({
+    setLocked: (_state, event: CheckedEvent) => ({
       locked: event.detail.checked,
     }),
-    setPledge: (_state, event: DotEvent<{ value: number | null }>) => {
+    setPledge: (_state, event: ValueEvent<number | null>) => {
       const pledge = event.detail.value;
       return {
         pledge,

package/dist/templates/showcase/pages/components/sheets/controller.ts

@@ -4,14 +4,14 @@ export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Sheets' } },
   mutations: {
-    openRelease: (state, event: DotEvent<unknown, { id: string }>) => ({
+    openRelease: (state, event: DataEvent<{ id: string }>) => ({
       selected: state.releases.find((release) => release.id === event.data.id) ?? null,
     }),
     // A sheet doesn't close itself: the page sets `open` back to false.
     closeRelease: () => ({ selected: null }),
     openRating: () => ({ rating: true }),
     closeRating: () => ({ rating: false }),
-    setStars: (_state, event: DotEvent<{ value: number }>) => ({ stars: event.detail.value }),
+    setStars: (_state, event: ValueEvent<number>) => ({ stars: event.detail.value }),
     saveRating: (state) => ({ rating: false, saved: state.stars, toast: 'Thanks for rating' }),
     clearToast: () => ({ toast: '' }),
   },