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

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

@@ -1,29 +1,41 @@
 import type { Release } from './state';
 import state from './state';
 
-type Chosen = DotEvent<{ value: string }>;
-
 export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Tabs and chips' } },
   mutations: {
-    chooseTab: (state, event: Chosen) => {
+    chooseTab: (state, event: ValueEvent) => {
       const tab = event.detail.value;
-      return { tab, shown: filter(state.releases, tab, state.genre) };
+      return { tab, shown: filter(state.releases, { ...state, tab }) };
     },
-    chooseGenre: (state, event: DotEvent<unknown, { genre: string }>) => {
+    chooseGenre: (state, event: DataEvent<{ genre: string }>) => {
       const { genre } = event.data;
-      return { genre, shown: filter(state.releases, state.tab, genre) };
+      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', shown: state.releases }),
-    chooseWhere: (_state, event: Chosen) => ({ where: event.detail.value }),
+    clearFilters: (state) => ({ tab: 'all', genre: 'All', query: '', shown: state.releases }),
+    chooseWhere: (_state, event: ValueEvent) => ({ where: event.detail.value }),
     toggleLiked: (state) => ({ liked: !state.liked }),
   },
 });
 
-function filter(releases: readonly Release[], tab: string, genre: string): Release[] {
+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),
+      (tab === 'all' || release.kind === tab) &&
+      (genre === 'All' || release.genre === genre) &&
+      release.title.toLowerCase().includes(words),
   );
 }

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

@@ -67,6 +67,7 @@ export default {
   songs: releases.filter((item) => item.kind === 'song').length,
   genres: ['All', 'Kriofusion', 'Afropop', 'Hip hop', 'R&B', 'Palm-wine', 'Gospel', 'Bubu'],
   genre: 'All',
+  query: '',
   liked: false,
   // Shows at home in Sierra Leone, and abroad in the Mano River region.
   where: 'home',

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

@@ -1,15 +1,16 @@
 <View>
   <Text variant="title">Tabs and chips</Text>
-  <Text>Tabs change what the page shows. Chips narrow it down. Try Songs with Palm-wine: nothing matches.</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.</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" />
@@ -25,7 +26,7 @@
       </List>
     </If>
     <Else>
-      <EmptyState icon="search" title="Nothing here" text="No release matches this tab and genre.">
+      <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>

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

@@ -27,14 +27,14 @@ 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,
       });
       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();
     },

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

@@ -1,5 +1,5 @@
 import type { DashRequest } from '@monimesl/dot-runtime';
-import { HostError } from '@monimesl/dot-runtime';
+import { errorMessage, isDashError } from '@monimesl/dot-runtime';
 
 import state from './state';
 
@@ -11,7 +11,7 @@ export default definePage({
   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 }>) {
+    async show(_state, event: DataEvent<{ call: string }>) {
       this.setState({ code: '', message: '' });
       try {
         switch (event.data.call) {
@@ -33,14 +33,15 @@ export default definePage({
         }
         this.setState({ code: 'none', message: 'It worked' });
       } catch (error) {
-        if (error instanceof HostError) {
+        if (isDashError(error)) {
           this.setState({ code: error.code, message: error.message });
         } else {
-          this.setState({ code: 'not a HostError', message: (error as Error).message });
+          this.setState({ code: 'not a DashError', message: errorMessage(error) });
         }
+      } finally {
+        wait = null;
+        this.setState({ waiting: false });
       }
-      wait = null;
-      this.setState({ waiting: false });
     },
     cancelWait() {
       wait?.cancel();

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

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

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

@@ -1,6 +1,6 @@
 <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>
+  <Text>Every this.dash call goes to Dash and comes back later, so await it. When it fails, it throws a DashError with a code that says why.</Text>
 
   <View gap="small">
     <Text variant="subtitle">timeout</Text>
@@ -18,7 +18,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="subtitle">HostError codes</Text>
+    <Text variant="subtitle">DashError codes</Text>
+    <Text variant="caption" tone="muted">isDashError(error) tells a Dash call's error from any other, and isDashError(error, 'timeout') also checks its code. Each code has its own check too, such as isDashCancelled(error).</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" />

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

@@ -0,0 +1,30 @@
+import { errorMessage, unlessCancelled } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.contacts' } },
+  actions: {
+    async choose() {
+      try {
+        const contact = await unlessCancelled(this.dash.contacts.pickPhone());
+        if (contact) {
+          this.setState({ contact, note: '' });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async call(state) {
+      if (!state.contact) {
+        return;
+      }
+      try {
+        await this.dash.system.dial(state.contact.phone);
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,6 @@
+import type { PickedContact } from '@monimesl/dot-runtime';
+
+export default {
+  contact: null as PickedContact | null,
+  note: '',
+};

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

@@ -0,0 +1,33 @@
+<View>
+  <Text variant="title">dash.contacts</Text>
+  <Text>The phone's own contacts. The dot sees only the one the person chooses.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">pickPhone</Text>
+    <Text variant="caption" tone="muted">The person chooses one phone number, such as who to send money to. It needs the contacts permission in dot.json.</Text>
+    <View variant="card" gap="medium">
+      <If condition="{{ contact }}">
+        <View direction="row" align="center" gap="medium">
+          <Avatar name="{{ contact.name }}" />
+          <View grow gap="none">
+            <Text weight="medium">{{ contact.name || 'No name' }}</Text>
+            <Text variant="caption" tone="muted">{{ contact.phone }}</Text>
+          </View>
+        </View>
+        <View direction="row" gap="small">
+          <Button variant="secondary" onClick="choose">Choose another</Button>
+          <Button variant="secondary" onClick="call">Call</Button>
+        </View>
+      </If>
+      <Else>
+        <EmptyState icon="users" title="No one chosen" text="Choose a contact to send money to.">
+          <Button onClick="choose">Choose a contact</Button>
+        </EmptyState>
+      </Else>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

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

@@ -1,6 +1,6 @@
-import { HostError } from '@monimesl/dot-runtime';
+import { errorMessage, unlessCancelled } from '@monimesl/dot-runtime';
 
-import type { Archive, Document, Song } from './state';
+import type { Archive, Song } from './state';
 import state from './state';
 
 const PICTURE = 'pictures/artwork.jpg';
@@ -14,7 +14,7 @@ export default definePage({
     },
   },
   mutations: {
-    setDraft: (_state, event: DotEvent<{ value: string }>) => ({ draft: event.detail.value }),
+    setDraft: (_state, event: ValueEvent) => ({ draft: event.detail.value }),
   },
   actions: {
     async refresh() {
@@ -32,9 +32,9 @@ 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 documents = entries.filter(
+        (entry) => entry.kind === 'file' && entry.path.startsWith('documents/'),
+      );
       const { used, quota } = await this.dash.storage.file.usage();
       const kept = await this.dash.storage.file.stat(PICTURE);
       this.setState({
@@ -57,7 +57,7 @@ export default definePage({
       await this.actions.refresh();
     },
     // Copies an archived setlist back, in place of the current one.
-    async copyBack(_state, event: DotEvent<unknown, { path: string }>) {
+    async copyBack(_state, event: DataEvent<{ path: string }>) {
       await this.dash.storage.file.copy(event.data.path, 'setlist', { overwrite: true });
       await this.actions.refresh();
     },
@@ -68,17 +68,19 @@ export default definePage({
     // 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/*'] });
+        // Undefined when the person closes the picker, which isn't a problem.
+        const file = await unlessCancelled(
+          this.dash.storage.file.pick({ types: ['application/pdf', 'image/*'] }),
+        );
+        if (!file) {
+          return;
+        }
         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 });
-        }
+        this.setState({ attachNote: errorMessage(error) });
       }
     },
     async forgetPicture() {

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

@@ -1,14 +1,11 @@
+import type { FileEntry } from '@monimesl/dot-runtime';
+
 export interface Archive {
   path: string;
   // When it was archived, from its folder's name.
   time: string;
 }
 
-export interface Document {
-  path: string;
-  name: string;
-}
-
 export interface Song {
   path: string;
   text: string;
@@ -22,6 +19,6 @@ export default {
   usage: '',
   picture: '',
   // Files the person attached, kept in the dot's documents folder.
-  documents: [] as Document[],
+  documents: [] as FileEntry[],
   attachNote: '',
 };

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

@@ -1,32 +1,35 @@
-import { HostError } from '@monimesl/dot-runtime';
+import type { PhotoSource } from '@monimesl/dot-runtime';
+import { errorMessage, unlessCancelled } 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' } },
+  // unlessCancelled gives undefined when the person closes the picker or scanner.
   actions: {
-    async pickPhoto(_state, event: DotEvent<unknown, { source: 'library' | 'camera' }>) {
+    async pickPhoto(_state, event: DataEvent<{ source: PhotoSource }>) {
       try {
-        const photo = await this.dash.media.pickPhoto({ source: event.data.source });
+        const photo = await unlessCancelled(
+          this.dash.media.pickPhoto({ source: event.data.source }),
+        );
+        if (!photo) {
+          return;
+        }
         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) });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async scanTicket() {
       try {
-        const { text } = await this.dash.media.scanCode();
-        this.setState({ scanned: text, note: '' });
+        const scanned = await unlessCancelled(this.dash.media.scanCode());
+        if (scanned) {
+          this.setState({ scanned: scanned.text, note: '' });
+        }
       } catch (error) {
-        this.setState({ note: problemToShow(error) });
+        this.setState({ note: errorMessage(error) });
       }
     },
   },

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

@@ -1,3 +1,5 @@
+import { debounce, errorMessage, latest, unlessCancelled } from '@monimesl/dot-runtime';
+
 import type { Release } from './state';
 import state from './state';
 
@@ -14,6 +16,10 @@ interface CatalogAnswer {
   }[];
 }
 
+interface ArtistAnswer {
+  results: { artistId: number; artistName: string; primaryGenreName?: string }[];
+}
+
 interface Echo {
   json: unknown;
   files: Record<string, string>;
@@ -23,28 +29,76 @@ interface Echo {
 const PAGE = 10;
 const MOST = 50;
 
-function searchUrl(artist: string, limit = PAGE): string {
-  const term = encodeURIComponent(artist);
-  return `https://itunes.apple.com/search?entity=song&limit=${limit}&term=${term}`;
+// Songs or artists whose names match `term`, at most `limit` of them.
+function catalogUrl(entity: 'song' | 'musicArtist', term: string, limit: number): string {
+  return `https://itunes.apple.com/search?entity=${entity}&limit=${limit}&term=${encodeURIComponent(term)}`;
 }
 
+// For searching as the person types: a pause in typing, and only the newest search's answer.
+const typingPause = debounce(400);
+const artistSearch = latest();
+
 export default definePage({
   initialState: state,
-  configs: { navigationBar: { title: 'dash.network.http' } },
+  configs: { navigationBar: { title: 'dash.network' } },
   mutations: {
-    setArtist: (_state, event: DotEvent<{ value: string }>) => ({ artist: event.detail.value }),
+    setArtist: (_state, event: ValueEvent) => ({ artist: event.detail.value }),
   },
   actions: {
+    async suggest(_state, event: ValueEvent) {
+      const typed = event.detail.value;
+      this.setState({ typed });
+      if (!typed.trim()) {
+        this.setState({ suggestions: [] });
+        return;
+      }
+      // False while the person is still typing: a later keystroke runs this again.
+      if (!(await typingPause(this.dash))) {
+        return;
+      }
+      try {
+        const answer = await unlessCancelled(
+          artistSearch(
+            this.dash.network.http.request<ArtistAnswer>({
+              url: catalogUrl('musicArtist', typed, 5),
+              as: 'json',
+            }),
+          ),
+        );
+        // Undefined when a newer search took its place.
+        if (answer) {
+          this.setState({
+            suggestions: answer.body.results.map((artist) => ({
+              id: artist.artistId,
+              name: artist.artistName,
+              genre: artist.primaryGenreName ?? '',
+            })),
+          });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async checkStatus() {
+      try {
+        const { online, type } = await this.dash.network.status();
+        this.setState({ connection: online ? `Online, by ${type}` : 'Offline' });
+      } catch (error) {
+        this.setState({ connection: errorMessage(error) });
+      }
+    },
     async searchAsText(state) {
       try {
-        const response = await this.dash.network.http.request({ url: searchUrl(state.artist) });
+        const response = await this.dash.network.http.request({
+          url: catalogUrl('song', state.artist, PAGE),
+        });
         this.setState({
           raw: response.ok
             ? `${response.body.trim().slice(0, 90)}…`
             : `Apple answered ${response.status}`,
         });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async search() {
@@ -63,7 +117,7 @@ export default definePage({
       this.setState({ searching: true, note: '' });
       try {
         const { body } = await this.dash.network.http.request<CatalogAnswer>(
-          { url: searchUrl(state.artist, state.limit), as: 'json' },
+          { url: catalogUrl('song', state.artist, state.limit), as: 'json' },
           { timeout: 10_000 },
         );
         const releases: Release[] = body.results.map((result) => ({
@@ -75,9 +129,10 @@ export default definePage({
         }));
         this.setState({ releases });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
+      } finally {
+        this.setState({ searching: false });
       }
-      this.setState({ searching: false });
     },
     async sendJson(state) {
       try {
@@ -89,7 +144,7 @@ export default definePage({
         });
         this.setState({ echo: JSON.stringify(body.json) });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async download(state) {
@@ -109,7 +164,7 @@ export default definePage({
           this.setState({ note: `Apple answered ${response.status}` });
         }
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async upload(state) {
@@ -125,7 +180,7 @@ export default definePage({
         });
         this.setState({ uploaded: Object.keys(body.files).join(', ') });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async sharePicture(state) {
@@ -135,7 +190,7 @@ export default definePage({
       try {
         await this.dash.system.share({ file: state.picture });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async keep(state) {
@@ -146,14 +201,14 @@ export default definePage({
         await this.dash.storage.file.save(state.picture, PICTURE, { overwrite: true });
         this.setState({ kept: true });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
     async tryUnlistedHost() {
       try {
         await this.dash.network.http.request({ url: 'https://example.com' });
       } catch (error) {
-        this.setState({ note: (error as Error).message });
+        this.setState({ note: errorMessage(error) });
       }
     },
   },

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

@@ -1,5 +1,11 @@
 import type { DotFile } from '@monimesl/dot-runtime';
 
+export interface Suggestion {
+  id: number;
+  name: string;
+  genre: string;
+}
+
 export interface Release {
   id: number;
   title: string;
@@ -9,6 +15,10 @@ export interface Release {
 }
 
 export default {
+  connection: 'Not checked yet',
+  // What the person typed to search as they type, and the artists found.
+  typed: '',
+  suggestions: [] as Suggestion[],
   artist: 'Drizilik',
   // The start of Apple's answer, as the text it came as.
   raw: '',

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

@@ -1,9 +1,20 @@
 <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>
+  <Text variant="title">dash.network</Text>
+  <Text>Whether the phone is online, and the dot's requests, which Dash sends 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="subtitle">status</Text>
+    <Text variant="caption" tone="muted">Whether the phone is online now, and how: wifi, cellular, other or none. Online doesn't promise a server answers.</Text>
+    <View variant="card" direction="row" align="center" gap="medium">
+      <View grow>
+        <Text>{{ connection }}</Text>
+      </View>
+      <Button variant="secondary" onClick="checkStatus">Check</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">http.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" />
@@ -31,6 +42,23 @@
     </Else>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">Searching as you type: debounce and latest</Text>
+    <Text variant="caption" tone="muted">debounce waits for a pause in typing before searching, and latest cancels a search still running when a newer one starts, so an older answer can't replace a newer one.</Text>
+    <View variant="card" gap="small">
+      <Input type="search" placeholder="Type an artist, such as Emmerson" clearable value="{{ typed }}" onChange="suggest" />
+      <For each="{{ suggestions }}" item="artist" key="id">
+        <View direction="row" align="center" gap="medium">
+          <Avatar name="{{ artist.name }}" size="small" />
+          <View gap="none">
+            <Text>{{ artist.name }}</Text>
+            <Text variant="caption" tone="muted">{{ artist.genre }}</Text>
+          </View>
+        </View>
+      </For>
+    </View>
+  </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>
@@ -43,7 +71,7 @@
   </View>
 
   <View gap="small">
-    <Text variant="subtitle">download and upload</Text>
+    <Text variant="subtitle">http.download and http.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">

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

@@ -12,7 +12,7 @@ export default definePage({
     },
   },
   mutations: {
-    setName: (_state, event: DotEvent<{ value: string }>) => ({ name: event.detail.value }),
+    setName: (_state, event: ValueEvent) => ({ name: event.detail.value }),
   },
   actions: {
     async refresh() {