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

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/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/{device → dash/media}/state.ts

@@ -8,9 +8,5 @@ export default {
   photo: null as Photo | null,
   photoDetails: '',
   scanned: '',
-  choice: '',
-  torch: 'off' as 'on' | 'off',
   note: '',
-  toast: '',
-  showIn: 0,
 };

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>

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

@@ -0,0 +1,61 @@
+import type { VibrationStyle } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  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>

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

@@ -0,0 +1,69 @@
+import { HostError } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+// Closing a picker isn't a problem to show. Anything else is.
+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 greet() {
+      try {
+        const { action } = await this.dash.ui.alert({
+          title: 'Kushé',
+          message: 'Kushé means hello in Krio, and tenki means thanks.',
+          actions: [
+            { id: 'tenki', label: 'Tenki' },
+            { id: 'close', label: 'Close', role: 'cancel' },
+          ],
+        });
+        this.setState({ choice: action, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+    async confirmRemove() {
+      try {
+        const { action } = await this.dash.ui.alert({
+          title: 'Remove this song from your library?',
+          message: 'Its download goes too.',
+          actions: [
+            { id: 'keep', label: 'Keep', role: 'cancel' },
+            { id: 'remove', label: 'Remove', role: 'destructive' },
+          ],
+        });
+        this.setState({ choice: action, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+    async chooseNight(state) {
+      try {
+        const night = await this.dash.ui.pickDate({
+          title: 'Choose a night',
+          value: state.night || undefined,
+          min: '2026-10-01',
+          max: '2026-12-31',
+        });
+        this.setState({ night, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+    async chooseArrival(state) {
+      try {
+        const arrival = await this.dash.ui.pickTime({
+          title: 'Arriving at',
+          value: state.arrival || '18:00',
+        });
+        this.setState({ arrival, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,8 @@
+export default {
+  // The id of the alert button tapped.
+  choice: '',
+  // A date such as "2026-10-24", and a time such as "19:30", from the phone's own pickers.
+  night: '',
+  arrival: '',
+  note: '',
+};

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

@@ -0,0 +1,31 @@
+<View>
+  <Text variant="title">dash.ui</Text>
+  <Text>Dash shows these over the dot, in the phone's own style. Each call waits until the person answers.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">alert</Text>
+    <Text variant="caption" tone="muted">A title, a message and buttons. It gives back the id of the button tapped. role="cancel" and role="destructive" style a button.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="small">
+        <Button onClick="greet">Say kushé</Button>
+        <Button variant="secondary" onClick="confirmRemove">Remove a song</Button>
+      </View>
+      <If condition="{{ choice }}">
+        <Text>You tapped "{{ choice }}"</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">pickDate and pickTime</Text>
+    <Text variant="caption" tone="muted">The phone's own pickers. A date comes back as "2026-10-24" and a time as "19:30". min and max limit the dates. Closing a picker rejects with a HostError coded cancelled.</Text>
+    <List>
+      <ListItem icon="calendar" title="Night" subtitle="Shows run from October to December" value="{{ night || 'Choose' }}" onTap="chooseNight" />
+      <ListItem icon="clock" title="Arriving at" subtitle="Doors open at 18:00" value="{{ arrival || 'Choose' }}" onTap="chooseArrival" />
+    </List>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>