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

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

@@ -0,0 +1,49 @@
+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,
+  configs: { navigationBar: { title: 'Calls and errors' } },
+  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

@@ -7,6 +7,7 @@ const PICTURE = 'pictures/artwork.jpg';
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'dash.storage.file' } },
   hooks: {
     async onShow() {
       await this.actions.refresh();

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,33 @@
+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,
+  configs: { navigationBar: { title: 'dash.media' } },
+  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,8 @@
+import type { DotFile } from '@monimesl/dot-runtime';
+
+export default {
+  photo: null as DotFile | 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/{network → dash/network}/controller.ts

@@ -30,6 +30,7 @@ function searchUrl(artist: string, limit = PAGE): string {
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'dash.network.http' } },
   mutations: {
     setArtist: (_state, event: DotEvent<{ value: string }>) => ({ artist: event.detail.value }),
   },
@@ -103,8 +104,7 @@ export default definePage({
           name: 'artwork.jpg',
         });
         if (response.ok) {
-          const { id, url, size } = response.file;
-          this.setState({ picture: { id, url, size }, kept: false });
+          this.setState({ picture: response.file, kept: false });
         } else {
           this.setState({ note: `Apple answered ${response.status}` });
         }
@@ -113,11 +113,14 @@ export default definePage({
       }
     },
     async upload(state) {
+      if (!state.picture) {
+        return;
+      }
       try {
         const { body } = await this.dash.network.http.upload<Echo>({
           url: 'https://httpbin.org/post',
           fields: { artist: state.artist },
-          files: [{ field: 'artwork', file: state.picture.id }],
+          files: [{ field: 'artwork', file: state.picture }],
           as: 'json',
         });
         this.setState({ uploaded: Object.keys(body.files).join(', ') });
@@ -126,15 +129,21 @@ export default definePage({
       }
     },
     async sharePicture(state) {
+      if (!state.picture) {
+        return;
+      }
       try {
-        await this.dash.system.share({ file: state.picture.id });
+        await this.dash.system.share({ file: state.picture });
       } catch (error) {
         this.setState({ note: (error as Error).message });
       }
     },
     async keep(state) {
+      if (!state.picture) {
+        return;
+      }
       try {
-        await this.dash.storage.file.save(state.picture.id, PICTURE, { overwrite: true });
+        await this.dash.storage.file.save(state.picture, PICTURE, { overwrite: true });
         this.setState({ kept: true });
       } catch (error) {
         this.setState({ note: (error as Error).message });

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

@@ -1,3 +1,5 @@
+import type { DotFile } from '@monimesl/dot-runtime';
+
 export interface Release {
   id: number;
   title: string;
@@ -15,7 +17,8 @@ export default {
   limit: 10,
   searching: false,
   echo: '',
-  picture: { id: '', url: '', size: 0 },
+  // The downloaded artwork, in a temporary file until the dot closes.
+  picture: null as DotFile | null,
   uploaded: '',
   kept: false,
   note: '',

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 }}">Upload</Button>
+        <Button variant="secondary" onClick="sharePicture" disabled="{{ !picture }}">Share</Button>
+        <Button variant="secondary" onClick="keep" disabled="{{ !picture || kept }}">Keep</Button>
+      </View>
+      <If condition="{{ picture }}">
+        <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/{secrets → dash/secrets}/controller.ts

@@ -5,6 +5,7 @@ const NAME = 'session-name';
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'dash.storage.secret' } },
   hooks: {
     async onShow() {
       await this.actions.refresh();

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>

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

@@ -0,0 +1,62 @@
+import type { VibrationStyle } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.system' } },
+  mutations: {
+    clearToast: () => ({ toast: '' }),
+  },
+  actions: {
+    async vibrate(_state, event: DotEvent<unknown, { style: VibrationStyle }>) {
+      await this.dash.system.vibrate({ style: event.data.style });
+    },
+    async copySong() {
+      await this.dash.system.copyText('Exodus, by Drizilik');
+      this.setState({ toast: 'Song copied' });
+    },
+    async shareText() {
+      try {
+        await this.dash.system.share({
+          text: 'Salone Sounds Live, Freetown, 24 October. See you there!',
+        });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async shareLink() {
+      try {
+        await this.dash.system.share({
+          title: 'Music of Sierra Leone',
+          url: 'https://en.wikipedia.org/wiki/Music_of_Sierra_Leone',
+        });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async openDrizilik() {
+      try {
+        await this.dash.system.openUrl('https://drizilik.com/');
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async countDown() {
+      for (let seconds = 10; seconds > 0; seconds--) {
+        this.setState({ showIn: seconds });
+        await this.dash.system.delay(1000);
+      }
+      this.setState({ showIn: 0, toast: "It's showtime" });
+    },
+    async toggleTorch(state) {
+      const next = state.torch === 'on' ? 'off' : 'on';
+      try {
+        await this.dash.system.torch(next);
+        this.setState({ torch: next, note: '' });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,9 @@
+import type { VibrationStyle } from '@monimesl/dot-runtime';
+
+export default {
+  styles: ['light', 'medium', 'heavy', 'success', 'warning', 'error'] as VibrationStyle[],
+  torch: 'off' as 'on' | 'off',
+  showIn: 0,
+  note: '',
+  toast: '',
+};

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

@@ -0,0 +1,59 @@
+<View>
+  <Text variant="title">dash.system</Text>
+  <Text>The phone's own features: vibration, the clipboard, sharing, the browser, timers and the torch.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">vibrate</Text>
+    <Text variant="caption" tone="muted">A short buzz, in a style that suits what happened.</Text>
+    <View variant="card" direction="row" wrap gap="small">
+      <For each="{{ styles }}" item="style" key="*this">
+        <Button variant="secondary" data-style="{{ style }}" onClick="vibrate">{{ style }}</Button>
+      </For>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">copyText</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="copySong">Copy a song's name</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">share</Text>
+    <Text variant="caption" tone="muted">Opens the phone's share sheet with text, a link or a file. The dash.network page shares a file.</Text>
+    <View variant="card" direction="row" wrap gap="small">
+      <Button variant="secondary" onClick="shareText">Share text</Button>
+      <Button variant="secondary" onClick="shareLink">Share a link</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">openUrl</Text>
+    <Text variant="caption" tone="muted">Opens a web page in the phone's browser.</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="openDrizilik">Open Drizilik's website</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">delay</Text>
+    <Text variant="caption" tone="muted">Waits for a number of milliseconds. Dash keeps time, so it's cancelled when the page closes.</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="countDown" disabled="{{ showIn > 0 }}">{{ showIn > 0 ? 'Showtime in ' + showIn + 's' : 'Count down to showtime' }}</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">torch</Text>
+    <Text variant="caption" tone="muted">Turns the camera's light on or off.</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="toggleTorch">{{ torch === 'on' ? 'Turn the torch off' : 'Lights up for the slow song' }}</Button>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>