@monimesl/dot-cli 0.1.0-alpha.15 → 0.1.0-alpha.18

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/{cache → dash/cache}/controller.ts

@@ -37,6 +37,10 @@ export default definePage({
       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 keeps it for 30 seconds.</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,48 @@
+import type { DashRequest } from '@monimesl/dot-runtime';
+import { HostError } 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,
+  actions: {
+    // Makes the call a button names, and shows how it ended.
+    async show(_state, event: DotEvent<unknown, { 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;
+        }
+        this.setState({ code: 'none', message: 'It worked' });
+      } catch (error) {
+        if (error instanceof HostError) {
+          this.setState({ code: error.code, message: error.message });
+        } else {
+          this.setState({ code: 'not a HostError', message: (error as Error).message });
+        }
+      }
+      wait = null;
+      this.setState({ waiting: false });
+    },
+    cancelWait() {
+      wait?.cancel();
+    },
+  },
+});

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

@@ -0,0 +1,6 @@
+export default {
+  waiting: false,
+  // The last call's outcome: the HostError's code and message, or how it ended.
+  code: '',
+  message: '',
+};

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

@@ -0,0 +1,51 @@
+<View>
+  <Text variant="title">Calls and errors</Text>
+  <Text>Every this.dash call goes to Dash and comes back later, so await it. When it fails, it throws a HostError with a code that says why.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">timeout</Text>
+    <Text variant="caption" tone="muted">The last argument of a call can set a timeout, in milliseconds. This waits 5 seconds with a timeout of 1.</Text>
+    <Button variant="secondary" data-call="timeout" onClick="show">Wait too long</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">cancel</Text>
+    <Text variant="caption" tone="muted">A call can be cancelled while it runs. Calls still running when the page closes are cancelled for you.</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" data-call="cancelled" onClick="show" disabled="{{ waiting }}">Wait 10 seconds</Button>
+      <Button variant="secondary" onClick="cancelWait" disabled="{{ !waiting }}">Cancel</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">HostError codes</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="cancelled" value="The person closed it, or the call was cancelled" />
+      <DetailRow label="timeout" value="It took longer than the timeout" />
+      <DetailRow label="denied" value="Not allowed, such as a missing permission" />
+      <DetailRow label="invalid" value="The call's options are wrong" />
+      <DetailRow label="unsupported" value="This Dash can't do it" />
+      <DetailRow label="failed" value="Anything else went wrong" />
+    </View>
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" data-call="invalid" onClick="show">Pick a date between bad limits</Button>
+      <Button variant="secondary" data-call="denied" onClick="show">Reach an unlisted host</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The last call</Text>
+    <View variant="card" gap="none">
+      <If condition="{{ code }}">
+        <DetailRow label="error.code" value="{{ code }}" weight="bold" />
+        <DetailRow label="error.message" value="{{ message }}" />
+      </If>
+      <ElseIf condition="{{ waiting }}">
+        <Text tone="muted">Waiting…</Text>
+      </ElseIf>
+      <Else>
+        <Text tone="muted">Use a button above</Text>
+      </Else>
+    </View>
+  </View>
+</View>

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

@@ -1,4 +1,6 @@
-import type { Archive, Song } from './state';
+import { HostError } from '@monimesl/dot-runtime';
+
+import type { Archive, Document, Song } from './state';
 import state from './state';
 
 const PICTURE = 'pictures/artwork.jpg';
@@ -29,11 +31,15 @@ export default definePage({
           time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
         }))
         .reverse();
+      const documents: Document[] = entries
+        .filter((entry) => entry.kind === 'file' && entry.path.startsWith('documents/'))
+        .map((entry) => ({ path: entry.path, name: entry.name }));
       const { used, quota } = await this.dash.storage.file.usage();
       const kept = await this.dash.storage.file.stat(PICTURE);
       this.setState({
         songs,
         archives,
+        documents,
         usage: `${used} bytes used of ${quota / 1024 / 1024} MB`,
         picture: kept ? (await this.dash.storage.file.open(PICTURE)).url : '',
       });
@@ -58,6 +64,22 @@ export default definePage({
       await this.dash.storage.file.remove('setlist', { recursive: true });
       await this.actions.refresh();
     },
+    // A picked file goes when the dot closes, so it's saved into the dot's own folder.
+    async attach() {
+      try {
+        const file = await this.dash.storage.file.pick({ types: ['application/pdf', 'image/*'] });
+        await this.dash.storage.file.createFolder('documents');
+        await this.dash.storage.file.save(file, `documents/${file.name}`, { overwrite: true });
+        this.setState({ attachNote: '' });
+        await this.actions.refresh();
+      } catch (error) {
+        // Closing the picker or scanner isn't a problem to show.
+        const closedByPerson = error instanceof HostError && error.code === 'cancelled';
+        if (!closedByPerson) {
+          this.setState({ attachNote: (error as Error).message });
+        }
+      }
+    },
     async forgetPicture() {
       await this.dash.storage.file.remove(PICTURE);
       await this.actions.refresh();

package/dist/templates/showcase/pages/{files → dash/files}/state.ts

@@ -4,6 +4,11 @@ export interface Archive {
   time: string;
 }
 
+export interface Document {
+  path: string;
+  name: string;
+}
+
 export interface Song {
   path: string;
   text: string;
@@ -16,4 +21,7 @@ export default {
   archives: [] as Archive[],
   usage: '',
   picture: '',
+  // Files the person attached, kept in the dot's documents folder.
+  documents: [] as Document[],
+  attachNote: '',
 };

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

@@ -0,0 +1,79 @@
+<View>
+  <Text variant="title">dash.storage.file</Text>
+  <Text>Each dot has its own folder on the phone. Other dots can't see it, and its files stay after the dot closes.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">write, read and list</Text>
+    <Text variant="caption" tone="muted">A setlist, where each song is a text file. Add some, then close and reopen the dot: they are still here.</Text>
+    <View variant="card" gap="small">
+      <Input label="Song" placeholder="Exodus, by Drizilik" value="{{ draft }}" maxLength="80" onChange="setDraft" onSubmit="save" />
+      <View direction="row" gap="small" wrap>
+        <Button onClick="save" disabled="{{ !draft }}">Add to the setlist</Button>
+        <Button variant="secondary" onClick="archive" disabled="{{ songs.length === 0 }}">Archive it</Button>
+        <Button variant="secondary" onClick="clearSetlist" disabled="{{ songs.length === 0 }}">Clear it</Button>
+      </View>
+      <For each="{{ songs }}" item="song" key="path">
+        <View gap="none">
+          <Text>{{ song.text }}</Text>
+          <Text variant="caption" tone="muted">{{ song.path }}</Text>
+        </View>
+      </For>
+      <If condition="{{ songs.length === 0 }}">
+        <Text variant="caption" tone="muted">No songs yet</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">createFolder, move, copy and remove</Text>
+    <Text variant="caption" tone="muted">Archive it moves the setlist folder into archive/. Tap an archived setlist to copy it back. Clear it removes the folder and all in it.</Text>
+    <View variant="card" gap="small">
+      <If condition="{{ archives.length > 0 }}">
+        <List>
+          <For each="{{ archives }}" item="archive" key="path">
+            <ListItem icon="playlist" title="Archived at {{ archive.time }}" subtitle="{{ archive.path }}" value="Copy back" data-path="{{ archive.path }}" onTap="copyBack" />
+          </For>
+        </List>
+      </If>
+      <Else>
+        <Text variant="caption" tone="muted">None yet. Add songs, then archive the setlist.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">pick and save</Text>
+    <Text variant="caption" tone="muted">pick lets the person choose a file from the phone, with the files permission. A picked file goes when the dot closes, so save copies it into the dot's folder.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="attach">Attach your concert ticket</Button>
+      <For each="{{ documents }}" item="document" key="path">
+        <View gap="none">
+          <Text>{{ document.name }}</Text>
+          <Text variant="caption" tone="muted">{{ document.path }}</Text>
+        </View>
+      </For>
+      <If condition="{{ attachNote }}">
+        <Text variant="caption" tone="muted">{{ attachNote }}</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">stat and open</Text>
+    <Text variant="caption" tone="muted">stat tells whether a file is there. open gives an address to show it with. This is the artwork kept on the dash.network page.</Text>
+    <View variant="card" gap="small">
+      <If condition="{{ picture }}">
+        <Image src="{{ picture }}" alt="Kept artwork" width="64" height="64" />
+        <Button variant="secondary" onClick="forgetPicture">Forget it</Button>
+      </If>
+      <Else>
+        <Text variant="caption" tone="muted">None yet. On the dash.network page, search, download the artwork and tap Keep.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">usage</Text>
+    <Text>{{ usage }}</Text>
+  </View>
+</View>

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

@@ -0,0 +1,32 @@
+import { HostError } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+// Closing a picker or scanner isn't a problem to show.
+function problemToShow(error: unknown): string {
+  const closedByPerson = error instanceof HostError && error.code === 'cancelled';
+  return closedByPerson ? '' : (error as Error).message;
+}
+
+export default definePage({
+  initialState: state,
+  actions: {
+    async pickPhoto(_state, event: DotEvent<unknown, { source: 'library' | 'camera' }>) {
+      try {
+        const photo = await this.dash.media.pickPhoto({ source: event.data.source });
+        const details = `${photo.name}, ${Math.round(photo.size / 1024)} KB as a JPEG`;
+        this.setState({ photo, photoDetails: details, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+    async scanTicket() {
+      try {
+        const { text } = await this.dash.media.scanCode();
+        this.setState({ scanned: text, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,12 @@
+export interface Photo {
+  name: string;
+  size: number;
+  url: string;
+}
+
+export default {
+  photo: null as Photo | null,
+  photoDetails: '',
+  scanned: '',
+  note: '',
+};

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

@@ -0,0 +1,34 @@
+<View>
+  <Text variant="title">dash.media</Text>
+  <Text>Photos and codes from the camera. Each needs a permission in dot.json, which Dash asks the person for the first time.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">pickPhoto</Text>
+    <Text variant="caption" tone="muted">source="library" needs the photoLibrary permission, and source="camera" the camera one. The photo comes back as a JPEG file.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" data-source="library" onClick="pickPhoto">Choose a photo</Button>
+        <Button variant="secondary" data-source="camera" onClick="pickPhoto">Take a photo</Button>
+      </View>
+      <If condition="{{ photo }}">
+        <Image src="{{ photo.url }}" alt="The photo you picked" aspect="4:3" fit="contain" />
+        <Text variant="caption" tone="muted">{{ photoDetails }}. It goes when the dot closes, unless the dot saves it with dash.storage.file.save.</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">scanCode</Text>
+    <Text variant="caption" tone="muted">Opens Dash's scanner until it reads a QR code. It needs the camera permission.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="scanTicket">Scan a ticket's QR code</Button>
+      <If condition="{{ scanned }}">
+        <Text>{{ scanned }}</Text>
+      </If>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

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

@@ -0,0 +1,80 @@
+<View>
+  <Text variant="title">dash.network.http</Text>
+  <Text>Dash sends the dot's requests, only to the hosts listed in dot.json. This page searches Apple's music catalog.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">request</Text>
+    <Text variant="caption" tone="muted">The answer comes as text, or as JSON with as: 'json'. timeout gives up after a while.</Text>
+    <View variant="card" gap="small">
+      <Input label="Artist" placeholder="Drizilik" value="{{ artist }}" maxLength="40" onChange="setArtist" onSubmit="search" />
+      <View direction="row" wrap gap="small">
+        <Button onClick="search" loading="{{ searching }}" disabled="{{ !artist }}">Search</Button>
+        <Button variant="secondary" onClick="searchAsText" disabled="{{ !artist }}">Read as text</Button>
+      </View>
+      <If condition="{{ raw }}">
+        <Text variant="caption" tone="muted">The answer as text starts with: {{ raw }}</Text>
+      </If>
+    </View>
+
+    <Text variant="caption" tone="muted">The same answer read as JSON, with artwork. Near the end, the list loads 10 more, up to 50. {{ releases.length }} so far.</Text>
+    <If condition="{{ releases.length > 0 }}">
+      <List onEndReached="loadMore">
+        <For each="{{ releases }}" item="release" key="id">
+          <ListItem image="{{ release.artwork }}" title="{{ release.title }}" subtitle="{{ release.album }} · {{ release.year }}" />
+        </For>
+      </List>
+    </If>
+    <Else>
+      <View variant="card">
+        <EmptyState icon="search" title="No songs yet" text="Search for an artist, such as Drizilik, Kao Denero or Emmerson." />
+      </View>
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Sending JSON</Text>
+    <Text variant="caption" tone="muted">method: 'POST' with a body. httpbin sends back what it got.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="sendJson">Send the first song as JSON</Button>
+      <If condition="{{ echo }}">
+        <Text>httpbin got {{ echo }}</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">download and upload</Text>
+    <Text variant="caption" tone="muted">download saves the answer as a file. upload sends files with form fields. Then share the file, or keep it in the dot's folder.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" onClick="download" disabled="{{ releases.length === 0 }}">Download</Button>
+        <Button variant="secondary" onClick="upload" disabled="{{ !picture.id }}">Upload</Button>
+        <Button variant="secondary" onClick="sharePicture" disabled="{{ !picture.id }}">Share</Button>
+        <Button variant="secondary" onClick="keep" disabled="{{ !picture.id || kept }}">Keep</Button>
+      </View>
+      <If condition="{{ picture.url }}">
+        <View direction="row" align="center" gap="medium">
+          <Image src="{{ picture.url }}" alt="Artwork" width="64" height="64" />
+          <Text variant="caption" tone="muted">{{ picture.size }} bytes, in a temporary file until the dot closes</Text>
+        </View>
+      </If>
+      <If condition="{{ uploaded }}">
+        <Text>httpbin got the file field "{{ uploaded }}"</Text>
+      </If>
+      <If condition="{{ kept }}">
+        <Text>Saved in the dot's folder. See the dash.storage.file page.</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Hosts dot.json doesn't list</Text>
+    <Text variant="caption" tone="muted">Dash turns the request down.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="tryUnlistedHost">Reach example.com</Button>
+      <If condition="{{ note }}">
+        <Text variant="caption" tone="muted">{{ note }}</Text>
+      </If>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,26 @@
+<View>
+  <Text variant="title">dash.storage.secret</Text>
+  <Text>Secrets hold sign-in tokens from the dot's own server. Dash keeps them encrypted on the phone. A dot can keep up to 8, of up to 4 KB each.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">set, get, remove and clear</Text>
+    <Text variant="caption" tone="muted">A sign-in that stays. Sign out removes the token, and Forget every secret clears them all.</Text>
+    <View variant="card" gap="small">
+      <If condition="{{ token }}">
+        <Text>Signed in as {{ signedInAs }}</Text>
+        <Text variant="caption" tone="muted">Session token {{ token }}</Text>
+        <View direction="row" gap="small">
+          <Button variant="secondary" onClick="signOut">Sign out</Button>
+          <Button variant="secondary" onClick="forgetAll">Forget every secret</Button>
+        </View>
+      </If>
+      <Else>
+        <Input label="Name" placeholder="Mariama" value="{{ name }}" maxLength="40" onChange="setName" onSubmit="signIn" />
+        <Button onClick="signIn" disabled="{{ !name }}">Sign in</Button>
+        <Text variant="caption" tone="muted">Sign in, then close and reopen the dot. You stay signed in.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <Notice tone="warning" title="Keep keys off the phone">Only the token is a secret here: your name is in the cache. Never put API keys in a dot's code or .env, since anyone with the dot can read them.</Notice>
+</View>