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

package/dist/templates/showcase/dot.ts

@@ -1,5 +1,7 @@
 import { logger } from '@monimesl/dot-runtime';
 
+import { swatchColors } from './palette';
+
 export default defineDot({
   // Folders under pages/, as the home page lists them. The first opens when the dot starts.
   pages: [
@@ -13,6 +15,9 @@ export default defineDot({
     'basics/pick-genre',
     'basics/hooks',
     'basics/bars',
+    'basics/colors',
+    'basics/share',
+    'basics/concert',
     // What a view can show.
     'components/layout',
     'components/styles',
@@ -32,19 +37,22 @@ export default defineDot({
     'dash/system',
     'dash/media',
     'dash/contacts',
+    'dash/account',
+    'dash/crypto',
     'dash/network',
     'dash/files',
     'dash/cache',
     'dash/secrets',
     'dash/calls',
   ],
-  // The showcase's own colours, used by name on the Styles page.
+  // The showcase's own colours, used by name on the Styles page, and the Page colours swatches.
   theme: {
     colors: {
       custom: {
         gold: { light: '#f5c542', dark: '#d4a72c' },
         // Dark text that reads on gold in both light and dark.
         ink: { light: '#1c1c1e', dark: '#1c1c1e' },
+        ...swatchColors(),
       },
     },
   },

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

@@ -14,14 +14,25 @@ export default definePage({
     },
     toggleColors(state) {
       const colored = !state.colored;
-      // Undefined puts Dash's own colours back.
+      // Undefined puts Dash's own colours back. Without a textColor, Dash picks text that reads on
+      // the bar.
       this.setNavigationBar({
         // The green of Sierra Leone's flag.
         backgroundColor: colored ? '#1EB53A' : undefined,
-        textColor: colored ? '#FFFFFF' : undefined,
       });
       this.setState({ colored });
     },
+    togglePainted(state) {
+      const painted = !state.painted;
+      // A pale sky by day, the night over Freetown by dark. Undefined puts the theme's back. Cards,
+      // fields and quieter text follow the background, unless the page sets those too.
+      if (painted) {
+        this.setColors({ background: { light: '#E3F2FD', dark: '#0B1A2E' } });
+      } else {
+        this.setColors({ background: { light: undefined, dark: undefined } });
+      }
+      this.setState({ painted });
+    },
     toggleNavigationBar(state) {
       const navigationBarHidden = !state.navigationBarHidden;
       this.setNavigationBar({ hidden: navigationBarHidden });

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

@@ -1,6 +1,7 @@
 export default {
   title: 'Bars',
   colored: false,
+  painted: false,
   navigationBarHidden: false,
   tabBarHidden: false,
 };

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

@@ -19,6 +19,14 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">setColors</Text>
+    <Text variant="caption" tone="muted">configs.colors or setColors give a page its own colours, for light and dark, such as its background. Dash paints the background behind the page too, makes cards and fields that sit on it, and picks text, bar and status bar colours that read on it. The Page colours page has more.</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="togglePainted">{{ painted ? 'Theme background' : 'Sky background' }}</Button>
+    </View>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">setTabBar</Text>
     <View variant="card">

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

@@ -0,0 +1,112 @@
+import type { HexColor, PageColors, SchemeColor } from '@monimesl/dot-runtime';
+
+import type { Swatch } from '../../../palette';
+import { BACKGROUNDS, BAR_COLORS, OWN_SURFACES, PRIMARIES } from '../../../palette';
+import state from './state';
+
+const HEX_COLOR = /^#[0-9a-fA-F]{6}$/;
+// Undefined for light and dark puts the theme's colour back.
+const THEME: SchemeColor = { light: undefined, dark: undefined };
+
+interface Choices {
+  background: string;
+  primary: string;
+  surfaces: string;
+  customLight: string;
+  customDark: string;
+}
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Page colours' } },
+  mutations: {
+    setCustomLight: (_state, event: ValueEvent) => ({ customLight: event.detail.value }),
+    setCustomDark: (_state, event: ValueEvent) => ({ customDark: event.detail.value }),
+  },
+  actions: {
+    chooseBackground(state, event: DataEvent<{ name: string }>) {
+      const choices = { ...state, background: event.data.name };
+      this.setColors(colorsFor(choices));
+      this.setState({ background: choices.background, code: codeFor(choices) });
+    },
+    useCustom(state) {
+      const light = state.customLight.trim();
+      // One colour is enough: it's used in dark too.
+      const dark = state.customDark.trim() || light;
+      if (!HEX_COLOR.test(light) || !HEX_COLOR.test(dark)) {
+        this.setState({ customError: 'Write a colour as # and six digits, such as #FFF3E0' });
+        return;
+      }
+      const choices = { ...state, background: 'custom', customLight: light, customDark: dark };
+      this.setColors(colorsFor(choices));
+      this.setState({ background: 'custom', customError: '', code: codeFor(choices) });
+    },
+    choosePrimary(state, event: DataEvent<{ name: string }>) {
+      const choices = { ...state, primary: event.data.name };
+      this.setColors(colorsFor(choices));
+      this.setState({ primary: choices.primary, code: codeFor(choices) });
+    },
+    chooseSurfaces(state, event: ValueEvent) {
+      const choices = { ...state, surfaces: event.detail.value };
+      this.setColors(colorsFor(choices));
+      this.setState({ surfaces: choices.surfaces, code: codeFor(choices) });
+    },
+    chooseNavigationBar(_state, event: DataEvent<{ name: string }>) {
+      const color = BAR_COLORS.find((swatch) => swatch.name === event.data.name);
+      // Without a textColor, Dash picks text that reads on the bar.
+      this.setNavigationBar({ backgroundColor: color?.light });
+      this.setState({ navigationBar: event.data.name });
+    },
+    reset(state) {
+      const choices = { ...state, background: '', primary: '', surfaces: 'derived' };
+      this.setColors(colorsFor(choices));
+      this.setNavigationBar({ backgroundColor: undefined });
+      this.setState({
+        background: '',
+        primary: '',
+        surfaces: 'derived',
+        navigationBar: '',
+        customError: '',
+        code: codeFor(choices),
+      });
+    },
+  },
+});
+
+// Every colour the page can change here, so one put back to the theme's is cleared too.
+function colorsFor(choices: Choices): PageColors {
+  const own = choices.surfaces === 'own';
+  return {
+    background: backgroundFor(choices),
+    primary: swatchFor(PRIMARIES, choices.primary),
+    surface: own ? OWN_SURFACES.surface : THEME,
+    muted: own ? OWN_SURFACES.muted : THEME,
+    border: own ? OWN_SURFACES.border : THEME,
+  };
+}
+
+function backgroundFor(choices: Choices): SchemeColor {
+  if (choices.background === 'custom') {
+    return { light: choices.customLight as HexColor, dark: choices.customDark as HexColor };
+  }
+  return swatchFor(BACKGROUNDS, choices.background);
+}
+
+function swatchFor(swatches: readonly Swatch[], name: string): SchemeColor {
+  const swatch = swatches.find((candidate) => candidate.name === name);
+  if (!swatch) {
+    return THEME;
+  }
+  return { light: swatch.light, dark: swatch.dark };
+}
+
+// The colours chosen, one line each, as they go in a setColors call.
+function codeFor(choices: Choices): string[] {
+  const lines: string[] = [];
+  for (const [name, color] of Object.entries(colorsFor(choices))) {
+    if (color?.light) {
+      lines.push(`${name}: { light: '${color.light}', dark: '${color.dark}' },`);
+    }
+  }
+  return lines;
+}

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

@@ -0,0 +1,17 @@
+import { BACKGROUNDS, PRIMARIES } from '../../../palette';
+
+export default {
+  backgrounds: BACKGROUNDS,
+  primaries: PRIMARIES,
+  // The swatch chosen for each, or '' for the theme's own.
+  background: '',
+  primary: '',
+  navigationBar: '',
+  // 'derived' lets Dash work out cards and fields from the background. 'own' sets them.
+  surfaces: 'derived',
+  customLight: '',
+  customDark: '',
+  customError: '',
+  // The colours the choices add up to, as lines of a setColors call.
+  code: [] as string[],
+};

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

@@ -0,0 +1,142 @@
+<View>
+  <Text variant="title">Page colours</Text>
+  <Text>A page can have its own colours, for light and dark, on top of the theme's. Pick some and watch the page follow. Dash paints the background behind the page, and picks text, bar and status bar colours that read on it. Try each with the phone in dark mode too.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">background</Text>
+    <Text variant="caption" tone="muted">Each swatch has a light and a dark colour. On the strong ones, Dash turns the text and the status bar light.</Text>
+    <View variant="card">
+      <Grid columns="3" gap="medium">
+        <View align="center" gap="small" data-name="" onTap="chooseBackground">
+          <View width="52" height="52" radius="full" background="muted" border="{{ background === '' ? 'strong' : 'subtle' }}" justify="center" align="center">
+            <Icon name="refresh" tone="muted" />
+          </View>
+          <Text variant="caption" align="center" weight="{{ background === '' ? 'bold' : 'regular' }}">Theme's</Text>
+        </View>
+        <For each="{{ backgrounds }}" item="swatch" key="name">
+          <View align="center" gap="small" data-name="{{ swatch.name }}" onTap="chooseBackground">
+            <View width="52" height="52" radius="full" background="{{ swatch.name }}" border="{{ background === swatch.name ? 'strong' : 'subtle' }}" />
+            <Text variant="caption" align="center" maxLines="2" weight="{{ background === swatch.name ? 'bold' : 'regular' }}">{{ swatch.label }}</Text>
+          </View>
+        </For>
+      </Grid>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Your own background</Text>
+    <Text variant="caption" tone="muted">Any colour as # and six digits. Leave dark empty to use the light one in dark too. If text can't be read on it, dotctl dev warns you.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" gap="small">
+        <View grow>
+          <Input label="Light" placeholder="#FFF3E0" value="{{ customLight }}" maxLength="7" onChange="setCustomLight" onSubmit="useCustom" />
+        </View>
+        <View grow>
+          <Input label="Dark" placeholder="#2B1A0E" value="{{ customDark }}" maxLength="7" onChange="setCustomDark" onSubmit="useCustom" />
+        </View>
+      </View>
+      <If condition="{{ customError }}">
+        <Text variant="caption" tone="danger">{{ customError }}</Text>
+      </If>
+      <Button variant="secondary" onClick="useCustom" disabled="{{ !customLight }}">Use this background</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">primary</Text>
+    <Text variant="caption" tone="muted">Buttons, switches, links and selected chips. Text on it, with tone="onPrimary", turns dark or light to read.</Text>
+    <View variant="card">
+      <Grid columns="5" gap="small">
+        <View align="center" gap="small" data-name="" onTap="choosePrimary">
+          <View width="40" height="40" radius="full" background="muted" border="{{ primary === '' ? 'strong' : 'subtle' }}" justify="center" align="center">
+            <Icon name="refresh" size="small" tone="muted" />
+          </View>
+          <Text variant="caption" align="center" weight="{{ primary === '' ? 'bold' : 'regular' }}">Theme's</Text>
+        </View>
+        <For each="{{ primaries }}" item="swatch" key="name">
+          <View align="center" gap="small" data-name="{{ swatch.name }}" onTap="choosePrimary">
+            <View width="40" height="40" radius="full" background="{{ swatch.name }}" border="{{ primary === swatch.name ? 'strong' : 'none' }}" />
+            <Text variant="caption" align="center" maxLines="2" weight="{{ primary === swatch.name ? 'bold' : 'regular' }}">{{ swatch.label }}</Text>
+          </View>
+        </For>
+      </Grid>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">surface, muted and border</Text>
+    <Text variant="caption" tone="muted">Left out, Dash works out cards, fields, quiet fills and lines from the background, so they sit well on it. A page can set them itself instead.</Text>
+    <Tabs variant="segmented" value="{{ surfaces }}" onChange="chooseSurfaces">
+      <Tab value="derived" label="Worked out" />
+      <Tab value="own" label="The page's own" />
+    </Tabs>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The navigation bar</Text>
+    <Text variant="caption" tone="muted">setNavigationBar gives the bar its own colour. Without a textColor, Dash picks text that reads on it.</Text>
+    <View direction="row" gap="small" wrap>
+      <Chip label="Dash's" selected="{{ navigationBar === '' }}" data-name="" onTap="chooseNavigationBar" />
+      <Chip label="Flag green" selected="{{ navigationBar === 'flagGreen' }}" data-name="flagGreen" onTap="chooseNavigationBar" />
+      <Chip label="Atlantic" selected="{{ navigationBar === 'atlantic' }}" data-name="atlantic" onTap="chooseNavigationBar" />
+      <Chip label="Ink" selected="{{ navigationBar === 'ink' }}" data-name="ink" onTap="chooseNavigationBar" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">What follows</Text>
+    <Text variant="caption" tone="muted">Everything on the page takes its colours from these, so nothing here sets one.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" align="center" gap="medium">
+        <Avatar name="Emmerson Bockarie" />
+        <View gap="none" grow>
+          <Text weight="bold">Emmerson</Text>
+          <Text variant="caption" tone="muted">Kill Me Pikin · 2008</Text>
+        </View>
+        <Badge tone="success">New</Badge>
+      </View>
+      <Input label="Your name" placeholder="Aminata Kamara" />
+      <Switch label="Tell me about new songs" checked />
+      <ProgressBar value="60" />
+      <View direction="row" gap="small" wrap>
+        <Chip label="Afropop" selected />
+        <Chip label="Gumbe" />
+        <Chip label="Palm-wine" />
+      </View>
+      <View direction="row" gap="small" wrap>
+        <Button>Play</Button>
+        <Button variant="secondary">Add to a playlist</Button>
+      </View>
+      <Text>Read about <Link href="https://en.wikipedia.org/wiki/Music_of_Sierra_Leone">the music of Sierra Leone</Link>.</Text>
+    </View>
+    <List>
+      <ListItem icon="music" title="Ballot Paper" subtitle="Emmerson" value="4:12" />
+      <ListItem icon="music" title="Salone" subtitle="Drizilik" value="3:48" />
+    </List>
+    <View background="muted" radius="medium" padding="medium">
+      <Text variant="caption">A quiet fill, such as for a note</Text>
+    </View>
+    <View background="primary" radius="medium" padding="medium">
+      <Text tone="onPrimary" weight="medium">On the primary colour</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The call</Text>
+    <Text variant="caption" tone="muted">What you picked, as a dot would write it. configs.colors in definePage takes the same.</Text>
+    <View variant="card" gap="none">
+      <If condition="{{ code.length > 0 }}">
+        <Text selectable>this.setColors({</Text>
+        <For each="{{ code }}" item="line" key="*this">
+          <Text paddingStart="large" selectable>{{ line }}</Text>
+        </For>
+        <Text selectable>});</Text>
+      </If>
+      <Else>
+        <Text tone="muted">The theme's own colours. Pick some above to see the call.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <Button variant="secondary" onClick="reset">Put the theme's colours back</Button>
+</View>

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

@@ -0,0 +1,16 @@
+import { CONCERTS } from '../share/concerts';
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Concert' } },
+  // Dash's Share opens this page, with its concert option and no other.
+  share: { options: ['concert'] },
+  hooks: {
+    // From a link, the options can be anything, so look the concert up rather than trust it.
+    onLoad(options) {
+      const concert = CONCERTS.find((candidate) => candidate.id === options.concert) ?? null;
+      this.setState({ concert, buyer: options.buyer ?? '' });
+    },
+  },
+});

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

@@ -0,0 +1,7 @@
+import type { Concert } from '../share/concerts';
+
+export default {
+  concert: null as Concert | null,
+  // Who the page was opened for. A shared link never carries it.
+  buyer: '',
+};

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

@@ -0,0 +1,20 @@
+<View>
+  <If condition="{{ concert }}">
+    <Text variant="title">{{ concert.title }}</Text>
+    <View variant="card" gap="small">
+      <DetailRow label="Where" value="{{ concert.place }}" />
+      <DetailRow label="When" value="{{ concert.date }}" />
+      <DetailRow label="From" value="{{ concert.price }}" />
+    </View>
+    <If condition="{{ buyer }}">
+      <Notice tone="info">Opened for {{ buyer }}. buyer isn't in share's options, so a shared link leaves it out.</Notice>
+    </If>
+    <Else>
+      <Notice tone="success">Opened from a link: it carried the concert, and nothing else.</Notice>
+    </Else>
+    <Text variant="caption" tone="muted">Tap ••• then Share. The link opens this concert.</Text>
+  </If>
+  <Else>
+    <EmptyState icon="search" title="No such concert" text="The link may be old, or written by hand." />
+  </Else>
+</View>

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

@@ -3,7 +3,13 @@ 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' } },
+  configs: {
+    navigationBar: { title: 'Choose a genre' },
+    // This page's own background: a warm Salone sunset by day, the evening after it by dark. Dash
+    // paints it behind the page, makes the list's cards to match, and picks text and bar colours
+    // that read on it. Going back shows the page below in its own colours again.
+    colors: { background: { light: '#FFF3E0', dark: '#2B1A0E' } },
+  },
   actions: {
     pick(_state, event: DataEvent<{ genre: string }>) {
       this.navigation.backWithResult(event.data.genre);

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

@@ -1,6 +1,7 @@
 <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>
+  <Text variant="caption" tone="muted">This page sets its own background in configs.colors, and its cards follow it. Going back shows the page below in its own colours.</Text>
   <List>
     <For each="{{ genres }}" item="genre" key="*this">
       <ListItem icon="music" title="{{ genre }}" data-genre="{{ genre }}" onTap="pick" />

package/dist/templates/showcase/pages/basics/share/concerts.ts

@@ -0,0 +1,31 @@
+export interface Concert {
+  id: string;
+  title: string;
+  place: string;
+  date: string;
+  price: string;
+}
+
+export const CONCERTS: Concert[] = [
+  {
+    id: 'jazz-night',
+    title: 'Freetown Jazz Night',
+    place: 'Family Kingdom, Freetown',
+    date: 'Saturday 24 October',
+    price: 'SLE 150',
+  },
+  {
+    id: 'emmerson-live',
+    title: 'Emmerson Live',
+    place: 'National Stadium, Freetown',
+    date: 'Friday 18 December',
+    price: 'SLE 300',
+  },
+  {
+    id: 'gumbe-night',
+    title: 'Gumbe Night',
+    place: 'Coronation Field, Bo',
+    date: 'Saturday 7 November',
+    price: 'SLE 100',
+  },
+];

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

@@ -0,0 +1,12 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Share links' } },
+  actions: {
+    // buyer is for this person only. The concert page leaves it out of its link.
+    open(_state, event: DataEvent<{ concert: string }>) {
+      this.navigation.push('basics/concert', { concert: event.data.concert, buyer: 'Aminata' });
+    },
+  },
+});

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

@@ -0,0 +1,5 @@
+import { CONCERTS } from './concerts';
+
+export default {
+  concerts: CONCERTS,
+};

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

@@ -0,0 +1,21 @@
+<View>
+  <Text variant="title">Share links</Text>
+  <Text>Dash's ••• menu has Share. It shares a link to the dot, which opens its first page. A page can let the link open it instead, with some of its options.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">definePage({ share })</Text>
+    <Text variant="caption" tone="muted">share: { options: ['concert'] } lets the link open the page with its concert option. Options not on the list stay out of the link, so nothing private goes in it. Write share out in place: the build reads it.</Text>
+    <Text variant="caption" tone="muted">Open a concert, then tap ••• and Share.</Text>
+    <List>
+      <For each="{{ concerts }}" item="concert" key="id">
+        <ListItem icon="ticket" title="{{ concert.title }}" subtitle="{{ concert.place }} · {{ concert.date }}" data-concert="{{ concert.id }}" onTap="open" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Opening a link</Text>
+    <Text variant="caption" tone="muted">Dash opens the dot on its first page, with the linked page on top, so Back leads home. If the dot is open, it starts again from the link. A page that doesn't share, or that the dot no longer has, opens the first page.</Text>
+    <Notice tone="warning">Anyone can write a link, so check its options in onLoad, as the concert page does.</Notice>
+  </View>
+</View>

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

@@ -40,7 +40,7 @@
 
   <View gap="small">
     <Text variant="subtitle">Theme colours</Text>
-    <Text variant="caption" tone="muted">The dot's own colours, named in dot.ts: gold and ink. Use the names as a background or a text tone.</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>

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

@@ -0,0 +1,23 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.account' } },
+  mutations: {
+    setNonce: (_state, event: ValueEvent) => ({ nonce: event.detail.value }),
+  },
+  actions: {
+    async read(state) {
+      try {
+        const { fullName, accountIdToken } = await this.dash.account.readProfile({
+          nonce: state.nonce,
+        });
+        this.setState({ fullName, accountIdToken, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

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

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

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

@@ -0,0 +1,23 @@
+<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">readProfile</Text>
+    <Text variant="caption" tone="muted">Gives the person's full name, and a token: a hash of their Monimeer id, this dot's id and the nonce. The same nonce gives the same token. Dash makes it on the phone, so 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="read">Read the profile</Button>
+      <If condition="{{ fullName }}">
+        <View gap="none">
+          <DetailRow label="fullName" value="{{ fullName }}" />
+          <DetailRow label="accountIdToken" value="{{ accountIdToken }}" />
+        </View>
+      </If>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

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

@@ -2,7 +2,7 @@ import state from './state';
 
 const RECENT = 'recent/';
 const GENRE = 'genre';
-const RECENT_SECONDS = 30;
+const RECENT_MILLISECONDS = 30_000;
 
 export default definePage({
   initialState: state,
@@ -29,7 +29,7 @@ export default definePage({
     // Each view lasts 30 seconds, then the cache forgets it.
     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();
     },

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

@@ -4,7 +4,7 @@
 
   <View gap="small">
     <Text variant="subtitle">set with a ttl, keys and get</Text>
-    <Text variant="caption" tone="muted">Tap an artist. ttl: 30 keeps it for 30 seconds.</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" />

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

@@ -9,6 +9,17 @@ 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 }>) {
@@ -43,6 +54,9 @@ export default definePage({
         this.setState({ waiting: false });
       }
     },
+    async closeDot() {
+      await this.dash.dot.close();
+    },
     cancelWait() {
       wait?.cancel();
     },