@monimesl/dot-cli 0.1.0-alpha.4 → 0.1.0-alpha.40

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

@@ -0,0 +1,71 @@
+import type { Archive, Song } from './state';
+import state from './state';
+
+const PICTURE = 'pictures/artwork.jpg';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Files' } },
+  hooks: {
+    async onShow() {
+      await this.actions.refresh();
+    },
+  },
+  mutations: {
+    setDraft: (_state, event: ValueEvent) => ({ draft: event.detail.value }),
+  },
+  actions: {
+    async refresh() {
+      const entries = await this.dash.storage.file.list('', { recursive: true });
+      const songs: Song[] = [];
+      for (const entry of entries) {
+        if (entry.kind === 'file' && entry.path.startsWith('setlist/')) {
+          songs.push({ path: entry.path, text: await this.dash.storage.file.read(entry.path) });
+        }
+      }
+      const archives: Archive[] = entries
+        .filter((entry) => entry.kind === 'folder' && /^archive\/[^/]+$/.test(entry.path))
+        .map((entry) => ({
+          path: entry.path,
+          time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
+        }))
+        .reverse();
+      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({
+        songs,
+        archives,
+        documents,
+        usage: `${used} bytes used of ${quota / 1024 / 1024} MB`,
+        picture: kept ? (await this.dash.storage.file.open(PICTURE)).url : '',
+      });
+    },
+    async save(state) {
+      await this.dash.storage.file.write(`setlist/${Date.now()}.txt`, state.draft);
+      this.setState({ draft: '' });
+      await this.actions.refresh();
+    },
+    // Moves the whole setlist folder into the archive, under the time it was archived.
+    async archive() {
+      await this.dash.storage.file.createFolder('archive');
+      await this.dash.storage.file.move('setlist', `archive/${Date.now()}`);
+      await this.actions.refresh();
+    },
+    // Copies an archived setlist back, in place of the current one.
+    async copyBack(_state, event: DataEvent<{ path: string }>) {
+      await this.dash.storage.file.copy(event.data.path, 'setlist', { overwrite: true });
+      await this.actions.refresh();
+    },
+    async clearSetlist() {
+      await this.dash.storage.file.remove('setlist', { recursive: true });
+      await this.actions.refresh();
+    },
+    async forgetPicture() {
+      await this.dash.storage.file.remove(PICTURE);
+      await this.actions.refresh();
+    },
+  },
+});

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

@@ -0,0 +1,23 @@
+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 Song {
+  path: string;
+  text: string;
+}
+
+export default {
+  draft: '',
+  songs: [] as Song[],
+  // The setlists archived in folders of their own, newest first.
+  archives: [] as Archive[],
+  usage: '',
+  picture: '',
+  // Files saved into the dot's documents folder, such as a ticket from the dash.media page.
+  documents: [] as FileEntry[],
+};

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

@@ -0,0 +1,78 @@
+<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">save</Text>
+    <Text variant="caption" tone="muted">A picked photo or file, or a download, goes when the dot closes. save copies it into the dot's folder to keep it. These are the tickets kept on the dash.media page.</Text>
+    <View variant="card" gap="small">
+      <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="{{ documents.length === 0 }}">
+        <Text variant="caption" tone="muted">None yet. On the dash.media page, attach a ticket and tap Keep it.</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,65 @@
+import type { PhotoSource } from '@monimesl/dot-runtime';
+import { errorMessage, unlessCancelled } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Photos, files and scanning' } },
+  // unlessCancelled gives undefined when the person closes the picker or scanner.
+  actions: {
+    async pickPhoto(_state, event: DataEvent<{ source: PhotoSource }>) {
+      try {
+        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: errorMessage(error) });
+      }
+    },
+    async pickTicket() {
+      try {
+        const ticket = await unlessCancelled(
+          this.dash.media.pickFile({ types: ['application/pdf', 'image/*'] }),
+        );
+        if (!ticket) {
+          return;
+        }
+        const ticketSize = `${Math.round(ticket.size / 1024)} KB`;
+        this.setState({ ticket, ticketSize, ticketKept: false, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    // A picked file goes when the dot closes, so it's saved into the dot's own folder.
+    async keepTicket(state) {
+      if (!state.ticket) {
+        return;
+      }
+      try {
+        await this.dash.storage.file.createFolder('documents');
+        await this.dash.storage.file.save(state.ticket, `documents/${state.ticket.name}`, {
+          overwrite: true,
+        });
+        this.setState({ ticketKept: true, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async scanTicket() {
+      try {
+        const scanned = await unlessCancelled(this.dash.media.scanCode());
+        if (scanned) {
+          this.setState({ scanned: scanned.text, note: '' });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,12 @@
+import type { DotFile } from '@monimesl/dot-runtime';
+
+export default {
+  photo: null as DotFile | null,
+  photoDetails: '',
+  ticket: null as DotFile | null,
+  ticketSize: '',
+  // Whether the ticket was saved into the dot's documents folder.
+  ticketKept: false,
+  scanned: '',
+  note: '',
+};

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

@@ -0,0 +1,53 @@
+<View>
+  <Text variant="title">dash.media</Text>
+  <Text>Photos, files and codes from the phone. 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">pickFile</Text>
+    <Text variant="caption" tone="muted">Lets the person choose a file from the phone, of at most 25 MB, with the files permission. types narrows what they can choose, here a PDF or a picture. Like a photo, it goes when the dot closes, so keep it with dash.storage.file.save.</Text>
+    <View variant="card" gap="small">
+      <Button variant="secondary" onClick="pickTicket">Attach your concert ticket</Button>
+      <If condition="{{ ticket }}">
+        <DetailRow label="Name" value="{{ ticket.name }}" />
+        <DetailRow label="Size" value="{{ ticketSize }}" />
+        <DetailRow label="Type" value="{{ ticket.contentType }}" />
+        <If condition="{{ ticketKept }}">
+          <Text variant="caption" tone="success">Kept in documents/. The dash.storage.file page lists it.</Text>
+        </If>
+        <Else>
+          <Button variant="secondary" onClick="keepTicket">Keep it</Button>
+        </Else>
+      </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/controller.ts

@@ -0,0 +1,215 @@
+import { debounce, errorMessage, latest, unlessCancelled } from '@monimesl/dot-runtime';
+
+import type { Release } from './state';
+import state from './state';
+
+const PICTURE = 'pictures/artwork.jpg';
+
+// Apple's public catalog search, which needs no key: https://performance-partners.apple.com/search-api
+interface CatalogAnswer {
+  results: {
+    trackId: number;
+    trackName: string;
+    collectionName: string;
+    releaseDate: string;
+    artworkUrl100: string;
+  }[];
+}
+
+interface ArtistAnswer {
+  results: { artistId: number; artistName: string; primaryGenreName?: string }[];
+}
+
+interface Echo {
+  json: unknown;
+  files: Record<string, string>;
+}
+
+// Songs to ask for at a time, and at most.
+const PAGE = 10;
+const MOST = 50;
+
+// 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: 'Network' } },
+  mutations: {
+    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: 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: errorMessage(error) });
+      }
+    },
+    async search() {
+      this.setState({ limit: PAGE, releases: [] });
+      await this.actions.load();
+    },
+    // The List asks for this as its last song comes into view: the next page, while there is one.
+    async loadMore(state) {
+      if (state.searching || state.releases.length < state.limit || state.limit >= MOST) {
+        return;
+      }
+      this.setState({ limit: state.limit + PAGE });
+      await this.actions.load();
+    },
+    async load(state) {
+      this.setState({ searching: true, note: '' });
+      try {
+        const { body } = await this.dash.network.http.request<CatalogAnswer>(
+          { url: catalogUrl('song', state.artist, state.limit), as: 'json' },
+          { timeout: 10_000 },
+        );
+        const releases: Release[] = body.results.map((result) => ({
+          id: result.trackId,
+          title: result.trackName,
+          album: result.collectionName,
+          year: result.releaseDate.slice(0, 4),
+          artwork: result.artworkUrl100,
+        }));
+        this.setState({ releases });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      } finally {
+        this.setState({ searching: false });
+      }
+    },
+    async sendJson(state) {
+      try {
+        const { body } = await this.dash.network.http.request<Echo>({
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+          body: { artist: state.artist, favourite: state.releases[0]?.title ?? null },
+          as: 'json',
+        });
+        this.setState({ echo: JSON.stringify(body.json) });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async download(state) {
+      const release = state.releases[0];
+      if (!release) {
+        return;
+      }
+      try {
+        // The catalog's artwork comes in any size its address names.
+        const response = await this.dash.network.http.download({
+          url: release.artwork.replace('100x100bb', '300x300bb'),
+          name: 'artwork.jpg',
+        });
+        if (response.ok) {
+          this.setState({ picture: response.file, kept: false });
+        } else {
+          this.setState({ note: `Apple answered ${response.status}` });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    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 }],
+          as: 'json',
+        });
+        this.setState({ uploaded: Object.keys(body.files).join(', ') });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async sharePicture(state) {
+      if (!state.picture) {
+        return;
+      }
+      try {
+        await this.dash.system.share({ file: state.picture });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async keep(state) {
+      if (!state.picture) {
+        return;
+      }
+      try {
+        await this.dash.storage.file.save(state.picture, PICTURE, { overwrite: true });
+        this.setState({ kept: true });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async tryUnlistedHost() {
+      try {
+        await this.dash.network.http.request({ url: 'https://example.com' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,35 @@
+import type { DotFile } from '@monimesl/dot-runtime';
+
+export interface Suggestion {
+  id: number;
+  name: string;
+  genre: string;
+}
+
+export interface Release {
+  id: number;
+  title: string;
+  album: string;
+  year: string;
+  artwork: string;
+}
+
+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: '',
+  releases: [] as Release[],
+  // How many songs to ask for: more each time the list's end comes into view.
+  limit: 10,
+  searching: false,
+  echo: '',
+  // 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,108 @@
+<View>
+  <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">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" />
+      <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">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>
+    <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">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">
+        <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>