@monimesl/dot-cli 0.1.0-alpha.9 → 1.0.0-beta.0

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

@@ -0,0 +1,3 @@
+export default {
+  balance: 'SLE 1,250.00',
+};

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

@@ -0,0 +1,101 @@
+<View>
+  <Text variant="title">Styles</Text>
+  <Text>A View's colours, outlines, corners and sizes come from the theme, so a dot looks right in light and dark.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">background</Text>
+    <Text variant="caption" tone="muted">With primary, write text with tone="onPrimary" so it reads.</Text>
+    <View background="primary" radius="large" padding="large" gap="small">
+      <Text variant="caption" tone="onPrimary">Your balance</Text>
+      <Text variant="display" tone="onPrimary" numeric>{{ balance }}</Text>
+    </View>
+    <Text variant="caption" tone="muted">The page's own colours</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="background" border="subtle" radius="medium" padding="small">
+        <Text>background</Text>
+      </View>
+      <View background="surface" border="subtle" radius="medium" padding="small">
+        <Text>surface</Text>
+      </View>
+      <View background="muted" radius="medium" padding="small">
+        <Text>muted</Text>
+      </View>
+    </View>
+    <Text variant="caption" tone="muted">A tone is a soft tint</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="info" radius="medium" padding="small">
+        <Text tone="info" weight="medium">New</Text>
+      </View>
+      <View background="success" radius="medium" padding="small">
+        <Text tone="success" weight="medium">Paid</Text>
+      </View>
+      <View background="warning" radius="medium" padding="small">
+        <Text tone="warning" weight="medium">Due Friday</Text>
+      </View>
+      <View background="danger" radius="medium" padding="small">
+        <Text tone="danger" weight="medium">Failed</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Theme colours</Text>
+    <Text variant="caption" tone="muted">The theme in dot.ts can set primary, background, surface, text, muted, border and subtle, for light and dark, and a page can set its own with configs.colors. Left out, they're Dash's, or worked out from a new background. The theme can also name its own colours, such as gold and ink here, to use as a background or a text tone.</Text>
+    <View direction="row" gap="small" align="center">
+      <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
+        <Text weight="medium" tone="ink">Gold member</Text>
+      </View>
+      <Text tone="gold" weight="bold">Since 2024</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">border and radius</Text>
+    <Text variant="caption" tone="muted">border is none, subtle or strong. radius rounds the corners, and full makes a circle or a pill.</Text>
+    <View direction="row" gap="medium" align="end" wrap>
+      <View width="56" height="56" background="muted" radius="none" />
+      <View width="56" height="56" background="muted" radius="small" />
+      <View width="56" height="56" background="muted" radius="medium" />
+      <View width="56" height="56" background="muted" radius="large" />
+      <View width="56" height="56" background="muted" radius="full" />
+      <View width="56" height="56" border="subtle" radius="medium" />
+      <View width="56" height="56" border="strong" radius="medium" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">width and height</Text>
+    <Text variant="caption" tone="muted">In points, or fill for all the room there is.</Text>
+    <View background="muted" radius="medium" width="120" height="40" justify="center" align="center">
+      <Text>120 points</Text>
+    </View>
+    <View background="muted" radius="medium" width="fill" height="40" justify="center" align="center">
+      <Text>fill</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">minHeight, maxWidth and aspect</Text>
+    <Text variant="caption" tone="muted">minHeight keeps a box tall when it holds little. maxWidth stops it growing too wide. aspect sets its height from its width.</Text>
+    <View variant="card" minHeight="96" justify="center">
+      <Text>At least 96 points tall</Text>
+    </View>
+    <View variant="card" maxWidth="200">
+      <Text>No wider than 200 points, however wide the phone is</Text>
+    </View>
+    <View background="muted" radius="large" aspect="16:9" justify="center" align="center">
+      <Text>16:9</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Together</Text>
+    <Text variant="caption" tone="muted">A price with even digits, and the old one crossed out.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <Text variant="subtitle">Freetown Jazz Night</Text>
+      <View grow />
+      <Text tone="muted" decoration="strikethrough" numeric>SLE 150</Text>
+      <Text weight="bold" numeric>SLE 120</Text>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,41 @@
+import type { Release } from './state';
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Tabs and chips' } },
+  mutations: {
+    chooseTab: (state, event: ValueEvent) => {
+      const tab = event.detail.value;
+      return { tab, shown: filter(state.releases, { ...state, tab }) };
+    },
+    chooseGenre: (state, event: DataEvent<{ genre: string }>) => {
+      const { genre } = event.data;
+      return { genre, shown: filter(state.releases, { ...state, genre }) };
+    },
+    search: (state, event: ValueEvent) => {
+      const query = event.detail.value;
+      return { query, shown: filter(state.releases, { ...state, query }) };
+    },
+    clearFilters: (state) => ({ tab: 'all', genre: 'All', query: '', shown: state.releases }),
+    chooseWhere: (_state, event: ValueEvent) => ({ where: event.detail.value }),
+    toggleLiked: (state) => ({ liked: !state.liked }),
+  },
+});
+
+interface Filters {
+  tab: string;
+  genre: string;
+  // Words the title contains, in any case.
+  query: string;
+}
+
+function filter(releases: readonly Release[], { tab, genre, query }: Filters): Release[] {
+  const words = query.trim().toLowerCase();
+  return releases.filter(
+    (release) =>
+      (tab === 'all' || release.kind === tab) &&
+      (genre === 'All' || release.genre === genre) &&
+      release.title.toLowerCase().includes(words),
+  );
+}

package/dist/templates/showcase/pages/{filters → components/tabs}/state.ts

@@ -67,7 +67,9 @@ export default {
   songs: releases.filter((item) => item.kind === 'song').length,
   genres: ['All', 'Kriofusion', 'Afropop', 'Hip hop', 'R&B', 'Palm-wine', 'Gospel', 'Bubu'],
   genre: 'All',
-  // Gen Z's shows, at home in Sierra Leone and abroad.
+  query: '',
+  liked: false,
+  // Shows at home in Sierra Leone, and abroad in the Mano River region.
   where: 'home',
   home: [
     {
@@ -84,35 +86,42 @@ export default {
       date: '28 November 2025',
       city: 'Freetown',
     },
-  ] as Show[],
-  abroad: [
     {
-      id: 'detty-rave',
-      title: 'Detty Rave, with Mr Eazi',
-      place: 'Drizilik joins him for "Sabi Road"',
-      date: 'December 2025',
-      city: 'Accra',
+      id: 'christmas-jam',
+      title: 'Christmas Jam',
+      place: 'Coronation Field',
+      date: '26 December 2025',
+      city: 'Bo',
+    },
+    {
+      id: 'gospel-night',
+      title: 'Gospel Night',
+      place: 'Kenema City Hall',
+      date: '15 November 2025',
+      city: 'Kenema',
     },
+  ] as Show[],
+  abroad: [
     {
-      id: 'steel-yard',
-      title: 'Drizilik Live In London',
-      place: 'The Steel Yard',
-      date: '16 November 2025',
-      city: 'London',
+      id: 'monrovia-live',
+      title: 'Salone Sounds Live',
+      place: 'EJS Ministerial Complex',
+      date: '20 December 2025',
+      city: 'Monrovia',
     },
     {
-      id: 'howard-theatre',
-      title: 'Drizilik live',
-      place: 'Howard Theatre',
-      date: '6 July 2024',
-      city: 'Washington',
+      id: 'mano-river-festival',
+      title: 'Mano River Music Festival',
+      place: 'Palais du Peuple',
+      date: '8 November 2025',
+      city: 'Conakry',
     },
     {
-      id: 'freedom-festival',
-      title: 'Freedom Festival',
-      place: "In Hull, Freetown's twin city",
-      date: '2–3 September 2022',
-      city: 'Hull',
+      id: 'abidjan-night',
+      title: 'Salone Night',
+      place: 'Palais de la Culture',
+      date: '13 September 2025',
+      city: 'Abidjan',
     },
   ] as Show[],
 };

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

@@ -0,0 +1,57 @@
+<View>
+  <Text variant="title">Tabs and chips</Text>
+  <Text>Tabs change what the page shows. Chips and a search narrow it down. Try Songs with Palm-wine: nothing matches.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Tabs and Chip</Text>
+    <Text variant="caption" tone="muted">The underline tabs, with a badge for each count. A chip is selected when the page says so. An Input with type="search" and clearable makes a search box.</Text>
+    <Tabs variant="underline" value="{{ tab }}" onChange="chooseTab">
+      <Tab value="all" label="All" />
+      <Tab value="album" label="Albums" badge="{{ albums }}" />
+      <Tab value="song" label="Songs" badge="{{ songs }}" />
+    </Tabs>
+    <Input type="search" placeholder="Search by title" clearable value="{{ query }}" onChange="search" />
+    <View direction="row" gap="small" wrap>
+      <For each="{{ genres }}" item="option" key="*this">
+        <Chip label="{{ option }}" selected="{{ option === genre }}" data-genre="{{ option }}" onTap="chooseGenre" />
+      </For>
+    </View>
+    <If condition="{{ shown.length > 0 }}">
+      <List>
+        <For each="{{ shown }}" item="release" key="id">
+          <ListItem icon="{{ release.kind === 'album' ? 'playlist' : 'music' }}" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.genre }}">
+            <Badge>{{ release.year }}</Badge>
+          </ListItem>
+        </For>
+      </List>
+    </If>
+    <Else>
+      <EmptyState icon="search" title="Nothing here" text="No release matches this tab, genre and search.">
+        <Button variant="secondary" onClick="clearFilters">Clear filters</Button>
+      </EmptyState>
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Chip with an icon</Text>
+    <Text variant="caption" tone="muted">A disabled chip can't be tapped, such as a filter with nothing behind it.</Text>
+    <View direction="row" gap="small" wrap>
+      <Chip icon="heart" label="Liked" selected="{{ liked }}" onTap="toggleLiked" />
+      <Chip icon="download" label="Downloaded" disabled />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">variant="segmented"</Text>
+    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region.</Text>
+    <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
+      <Tab value="home" label="Sierra Leone" />
+      <Tab value="abroad" label="Abroad" />
+    </Tabs>
+    <List>
+      <For each="{{ where === 'home' ? home : abroad }}" item="show" key="id">
+        <ListItem icon="ticket" title="{{ show.title }}" subtitle="{{ show.place }} · {{ show.date }}" value="{{ show.city }}" />
+      </For>
+    </List>
+  </View>
+</View>

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

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Text and links' } },
+  mutations: {
+    like: (state) => ({ likes: state.likes + 1 }),
+    unlike: (state) => ({ likes: Math.max(0, state.likes - 1) }),
+  },
+});

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

@@ -0,0 +1,3 @@
+export default {
+  likes: 12,
+};

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

@@ -0,0 +1,95 @@
+<View>
+  <Text variant="title">Text and links</Text>
+  <Text>Text shows words. Its variant sets the size, and the theme sets the font and colours.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">variant</Text>
+    <View variant="card" gap="small">
+      <Text variant="display" numeric>SLE 1,250</Text>
+      <Text variant="title">Palm-wine, a title</Text>
+      <Text variant="subtitle">S. E. Rogie, a subtitle</Text>
+      <Text variant="lead">A lead opens an article. It's a little bigger than body text.</Text>
+      <Text variant="body">Guitar music for a calm evening. This is body text, the default.</Text>
+      <Text variant="caption">Recorded in Freetown, in a caption</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">tone</Text>
+    <View variant="card" direction="row" wrap gap="medium">
+      <Text tone="default">default</Text>
+      <Text tone="muted">muted</Text>
+      <Text tone="info">info</Text>
+      <Text tone="success">success</Text>
+      <Text tone="warning">warning</Text>
+      <Text tone="danger">danger</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">weight, italic and decoration</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="medium">
+        <Text weight="regular">regular</Text>
+        <Text weight="medium">medium</Text>
+        <Text weight="bold">bold</Text>
+        <Text italic>italic</Text>
+      </View>
+      <View direction="row" wrap gap="medium">
+        <Text decoration="underline">underline</Text>
+        <Text decoration="strikethrough">strikethrough</Text>
+        <Text decoration="none">none</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">align and numeric</Text>
+    <Text variant="caption" tone="muted">numeric gives every digit the same width, so amounts line up.</Text>
+    <View variant="card" gap="small">
+      <Text align="start">At the start</Text>
+      <Text align="center">In the center</Text>
+      <Text align="end">At the end</Text>
+      <Text align="end" numeric>SLE 1,111.11</Text>
+      <Text align="end" numeric>SLE 8,888.88</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">maxLines</Text>
+    <Text variant="caption" tone="muted">Cuts the text off after this many lines.</Text>
+    <View variant="card">
+      <Text maxLines="2">Sierra Leone's Refugee All Stars came together in refugee camps in Guinea, recorded their first album, Living Like a Refugee, back in Freetown, and carried Salone music to stages around the world. Two lines are allowed here, so the rest is cut off.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">leading and selectable</Text>
+    <Text variant="caption" tone="muted">leading moves the lines closer or further apart. selectable lets the person copy the text: hold your finger on the last one.</Text>
+    <View variant="card" gap="medium">
+      <Text leading="tight">Tight lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+      <Text leading="normal">Normal lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+      <Text leading="relaxed" selectable>Relaxed lines, and you can select them. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Text inside text</Text>
+    <View variant="card">
+      <Text>Text can hold <Text weight="bold">bold</Text> and <Text tone="danger">red</Text> words.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Link</Text>
+    <Text variant="caption" tone="muted">With href, a link opens a web page in the phone's browser. With onTap, it runs a handler.</Text>
+    <View variant="card" gap="small">
+      <Text>Read about <Link href="https://en.wikipedia.org/wiki/Music_of_Sierra_Leone">the music of Sierra Leone</Link>.</Text>
+      <View direction="row" gap="medium">
+        <Link onTap="like">Like the song</Link>
+        <Link tone="danger" onTap="unlike">Take it back</Link>
+      </View>
+      <Text tone="muted">{{ likes }} {{ likes === 1 ? 'like' : 'likes' }}</Text>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/dash/account/controller.ts

@@ -0,0 +1,32 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Account' } },
+  mutations: {
+    setNonce: (_state, event: ValueEvent) => ({ nonce: event.detail.value }),
+  },
+  actions: {
+    async signIn(state) {
+      try {
+        const { fullName, alias, accountIdToken } = await this.dash.account.signIn({
+          mode: 'simple',
+          nonce: state.nonce,
+        });
+        this.setState({ fullName, alias, accountIdToken, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async signInWithOidc() {
+      try {
+        const { id } = await this.dash.account.signIn({ mode: 'oidc', scopes: ['profile'] });
+        this.setState({ oidcNote: `Signed in as ${id}` });
+      } catch (error) {
+        this.setState({ oidcNote: errorMessage(error) });
+      }
+    },
+  },
+});

package/dist/templates/showcase/pages/dash/account/state.ts

@@ -0,0 +1,9 @@
+export default {
+  // A fixed nonce, so the token names the person the same way each time in this dot.
+  nonce: 'salone-sounds',
+  fullName: '',
+  alias: '',
+  accountIdToken: '',
+  note: '',
+  oidcNote: '',
+};

package/dist/templates/showcase/pages/dash/account/view.dml

@@ -0,0 +1,33 @@
+<View>
+  <Text variant="title">dash.account</Text>
+  <Text>Who is signed in to Dash. It needs the account permission in dot.json.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">signIn</Text>
+    <Text variant="caption" tone="muted">With mode "simple", Dash says who the person is: their full name, the phone number or email address they use Dash with, and a token Monime makes from this dot's id, their Monimeer id and the nonce, with a key only it knows. The same nonce gives the same token, on any phone. It names the person, but proves nothing to the dot's server.</Text>
+    <View variant="card" gap="medium">
+      <Input label="Nonce" value="{{ nonce }}" onChange="setNonce" />
+      <Button onClick="signIn">Sign in with Dash</Button>
+      <If condition="{{ fullName }}">
+        <View gap="none">
+          <DetailRow label="fullName" value="{{ fullName }}" />
+          <DetailRow label="alias" value="{{ alias }}" />
+          <DetailRow label="accountIdToken" value="{{ accountIdToken }}" />
+        </View>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">signIn with OpenID Connect</Text>
+    <Text variant="caption" tone="muted">With mode "oidc", Dash will give an ID token the dot's server checks with Monime's keys, and only the details the person agrees to share. It isn't ready yet, so Dash says so.</Text>
+    <Button variant="secondary" onClick="signInWithOidc">Sign in with OpenID Connect</Button>
+    <If condition="{{ oidcNote }}">
+      <Notice tone="info">{{ oidcNote }}</Notice>
+    </If>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

package/dist/templates/showcase/pages/{cache → dash/cache}/controller.ts

@@ -2,10 +2,11 @@ import state from './state';
 
 const RECENT = 'recent/';
 const GENRE = 'genre';
-const RECENT_SECONDS = 30;
+const RECENT_MILLISECONDS = 30_000;
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Cache' } },
   hooks: {
     async onShow() {
       await this.actions.refresh();
@@ -26,17 +27,21 @@ export default definePage({
       });
     },
     // Each view lasts 30 seconds, then the cache forgets it.
-    async view(_state, event: DotEvent<unknown, { id: string; name: string }>) {
+    async view(_state, event: DataEvent<{ id: string; name: string }>) {
       await this.dash.storage.cache.set(`${RECENT}${event.data.id}`, event.data.name, {
-        ttl: RECENT_SECONDS,
+        ttl: RECENT_MILLISECONDS,
       });
       await this.actions.refresh();
     },
     // With no ttl, the genre lasts until it's removed.
-    async setGenre(_state, event: DotEvent<{ value: string }>) {
+    async setGenre(_state, event: ValueEvent) {
       await this.dash.storage.cache.set(GENRE, event.detail.value);
       await this.actions.refresh();
     },
+    async forgetGenre() {
+      await this.dash.storage.cache.remove(GENRE);
+      await this.actions.refresh();
+    },
     async clear() {
       await this.dash.storage.cache.clear();
       await this.actions.refresh();

package/dist/templates/showcase/pages/dash/cache/view.dml

@@ -0,0 +1,48 @@
+<View>
+  <Text variant="title">dash.storage.cache</Text>
+  <Text>The cache keeps small values by name, such as text, numbers or JSON. A value can expire after a while, or stay until it's removed.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">set with a ttl, keys and get</Text>
+    <Text variant="caption" tone="muted">Tap an artist. ttl: 30_000 keeps it for 30 seconds, as times are in milliseconds.</Text>
+    <List>
+      <For each="{{ artists }}" item="artist" key="id">
+        <ListItem icon="microphone" title="{{ artist.name }}" data-id="{{ artist.id }}" data-name="{{ artist.name }}" onTap="view" />
+      </For>
+    </List>
+    <View variant="card" gap="small">
+      <If condition="{{ recent.length > 0 }}">
+        <For each="{{ recent }}" item="name" key="*this">
+          <Text>{{ name }}</Text>
+        </For>
+      </If>
+      <Else>
+        <Text variant="caption" tone="muted">No artists viewed in the last 30 seconds</Text>
+      </Else>
+      <Button variant="secondary" onClick="refresh">Check again</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">set without a ttl, and exists</Text>
+    <Text variant="caption" tone="muted">Your favourite genre stays until it's removed, even after the dot closes.</Text>
+    <View variant="card">
+      <Select label="Genre" placeholder="Choose a genre" value="{{ genre }}" onChange="setGenre">
+        <Option value="Afropop" label="Afropop" />
+        <Option value="Palm-wine" label="Palm-wine" />
+        <Option value="Gumbe" label="Gumbe" />
+      </Select>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">remove and clear</Text>
+    <View variant="card" gap="small">
+      <Text>Keys in the cache: {{ keys || 'none' }}</Text>
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" onClick="forgetGenre" disabled="{{ !genre }}">Forget the genre</Button>
+        <Button variant="secondary" onClick="clear" disabled="{{ !keys }}">Clear the cache</Button>
+      </View>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/dash/calls/controller.ts

@@ -0,0 +1,67 @@
+import type { DashRequest } from '@monimesl/dot-runtime';
+import { errorMessage, isDashError } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+// The long wait, kept so the Cancel button can stop it.
+let wait: DashRequest<void> | null = null;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Calls and errors' } },
+  hooks: {
+    async onLoad() {
+      this.setState({ picksPhones: this.dash.supports('contacts.pickPhone') });
+      try {
+        const { apiVersions } = await this.dash.system.info();
+        this.setState({ apiVersions: apiVersions.join(', ') });
+      } catch (error) {
+        this.setState({ apiVersions: errorMessage(error) });
+      }
+    },
+  },
+  actions: {
+    // Makes the call a button names, and shows how it ended.
+    async show(_state, event: DataEvent<{ call: string }>) {
+      this.setState({ code: '', message: '' });
+      try {
+        switch (event.data.call) {
+          case 'timeout':
+            // Gives up after 1 second on a wait of 5.
+            await this.dash.system.delay(5000, { timeout: 1000 });
+            break;
+          case 'cancelled':
+            wait = this.dash.system.delay(10_000);
+            this.setState({ waiting: true });
+            await wait;
+            break;
+          case 'invalid':
+            await this.dash.ui.pickDate({ min: '2026-12-31', max: '2026-01-01' });
+            break;
+          case 'denied':
+            await this.dash.network.http.request({ url: 'https://example.com' });
+            break;
+          case 'missing':
+            await this.dash.storage.file.read('never-saved.txt');
+            break;
+        }
+        this.setState({ code: 'none', message: 'It worked' });
+      } catch (error) {
+        if (isDashError(error)) {
+          this.setState({ code: error.code, message: error.message });
+        } else {
+          this.setState({ code: 'not a DashError', message: errorMessage(error) });
+        }
+      } finally {
+        wait = null;
+        this.setState({ waiting: false });
+      }
+    },
+    async closeDot() {
+      await this.dash.dot.close();
+    },
+    cancelWait() {
+      wait?.cancel();
+    },
+  },
+});

package/dist/templates/showcase/pages/dash/calls/state.ts

@@ -0,0 +1,9 @@
+export default {
+  waiting: false,
+  // The last call's outcome: the DashError's code and message, or how it ended.
+  code: '',
+  message: '',
+  // What this Dash offers, for the supports section.
+  apiVersions: '',
+  picksPhones: false,
+};