@monimesl/dot-cli 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/templates/showcase/.env

@@ -1,3 +1,3 @@
 # Public configuration for the dot. Anyone with the dot can read these variables: never put a
 # secret here. Read them in the service as `env.GREETING`.
-GREETING=This message comes from the dot's .env file.
+GREETING=Welcome to Salone Sounds. This message comes from the dot's .env file.

package/dist/templates/showcase/dot.ts

@@ -17,6 +17,8 @@ export default defineDot({
     'device',
     'network',
     'files',
+    'cache',
+    'secrets',
   ],
   plugins: [logger()],
 });

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

@@ -0,0 +1,45 @@
+import state from './state';
+
+const RECENT = 'recent/';
+const GENRE = 'genre';
+const RECENT_SECONDS = 30;
+
+export default definePage({
+  initialState: state,
+  hooks: {
+    async onShow() {
+      await this.actions.refresh();
+    },
+  },
+  actions: {
+    async refresh() {
+      const keys = await this.dash.storage.cache.keys();
+      const recent: string[] = [];
+      for (const key of keys.filter((each) => each.startsWith(RECENT))) {
+        recent.push((await this.dash.storage.cache.get<string>(key)) ?? '');
+      }
+      const hasGenre = await this.dash.storage.cache.exists(GENRE);
+      this.setState({
+        recent,
+        genre: hasGenre ? ((await this.dash.storage.cache.get<string>(GENRE)) ?? '') : '',
+        keys: keys.join(', '),
+      });
+    },
+    // Each view lasts 30 seconds, then the cache forgets it.
+    async view(_state, event: DotEvent<unknown, { 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 }>) {
+      await this.dash.storage.cache.set(GENRE, event.detail.value);
+      await this.actions.refresh();
+    },
+    async clear() {
+      await this.dash.storage.cache.clear();
+      await this.actions.refresh();
+    },
+  },
+});

package/dist/templates/showcase/pages/cache/state.ts

@@ -0,0 +1,17 @@
+export interface Artist {
+  id: string;
+  name: string;
+}
+
+export default {
+  artists: [
+    { id: 'drizilik', name: 'Drizilik' },
+    { id: 'the-therapist', name: 'The Therapist' },
+    { id: 'emmerson', name: 'Emmerson' },
+    { id: 'kao-denero', name: 'Kao Denero' },
+  ] as Artist[],
+  // The artists viewed in the last 30 seconds, as the cache still has them.
+  recent: [] as string[],
+  genre: '',
+  keys: '',
+};

package/dist/templates/showcase/pages/cache/view.dml

@@ -0,0 +1,36 @@
+<View>
+  <Text variant="title">Cache</Text>
+  <Text>The cache saves small values by name. A value can expire after a set time, or stay until it is removed.</Text>
+
+  <Text variant="caption" tone="muted">Tap an artist. It is remembered for 30 seconds.</Text>
+  <List>
+    <For each="{{ artists }}" item="artist" key="id">
+      <ListItem icon="microphone" title="{{ artist.name }}" data-id="{{ artist.id }}" data-name="{{ artist.name }}" onTap="view" />
+    </For>
+  </List>
+  <View variant="card" gap="small">
+    <If condition="{{ recent.length > 0 }}">
+      <For each="{{ recent }}" item="name" key="name">
+        <Text>{{ name }}</Text>
+      </For>
+    </If>
+    <Else>
+      <Text variant="caption" tone="muted">No artists viewed in the last 30 seconds</Text>
+    </Else>
+    <Button variant="secondary" onClick="refresh">Check again</Button>
+  </View>
+
+  <Text variant="caption" tone="muted">Your favourite genre. It stays until you clear the cache.</Text>
+  <View variant="card">
+    <Select label="Genre" placeholder="Choose a genre" value="{{ genre }}" onChange="setGenre">
+      <Option value="Afropop" label="Afropop" />
+      <Option value="Palm-wine" label="Palm-wine" />
+      <Option value="Gumbe" label="Gumbe" />
+    </Select>
+  </View>
+
+  <View variant="card" gap="small">
+    <Text variant="caption" tone="muted">Keys in the cache: {{ keys || 'none' }}</Text>
+    <Button variant="secondary" onClick="clear" disabled="{{ !keys }}">Clear the cache</Button>
+  </View>
+</View>

package/dist/templates/showcase/pages/carousel/controller.ts

@@ -1,10 +1,40 @@
 import state from './state';
 
+interface Lookup {
+  results: { collectionId: number; artworkUrl100: string }[];
+}
+
 export default definePage({
   initialState: state,
+  hooks: {
+    // Each artist's photo is the cover of one of their releases, from Apple's catalog.
+    async onLoad() {
+      const ids = this.state.artists.map((artist) => artist.release).join(',');
+      try {
+        const { body } = await this.dash.network.http.request<Lookup>({
+          url: `https://itunes.apple.com/lookup?id=${ids}`,
+          as: 'json',
+        });
+        const covers = new Map(
+          body.results.map((result) => [
+            result.collectionId,
+            result.artworkUrl100.replace('100x100bb', '600x600bb'),
+          ]),
+        );
+        this.setState((current) => ({
+          artists: current.artists.map((artist) => ({
+            ...artist,
+            photo: covers.get(artist.release) ?? '',
+          })),
+        }));
+      } catch {
+        // Without the catalog, the slides go on without photos.
+      }
+    },
+  },
   mutations: {
-    showTip: (_state, event: DotEvent<{ index: number }>) => ({ tip: event.detail.index }),
-    back: (state) => ({ tip: Math.max(state.tip - 1, 0) }),
-    next: (state) => ({ tip: Math.min(state.tip + 1, state.tips.length - 1) }),
+    showChapter: (_state, event: DotEvent<{ index: number }>) => ({ chapter: event.detail.index }),
+    back: (state) => ({ chapter: Math.max(state.chapter - 1, 0) }),
+    next: (state) => ({ chapter: Math.min(state.chapter + 1, state.chapters.length - 1) }),
   },
 });

package/dist/templates/showcase/pages/carousel/state.ts

@@ -1,40 +1,77 @@
-export interface Promo {
+export interface Artist {
   id: string;
-  title: string;
+  name: string;
   text: string;
-  icon: string;
+  // A release whose cover shows the artist, by its id in Apple's catalog.
+  release: number;
+  photo: string;
 }
 
-export interface Tip {
+export interface Chapter {
   title: string;
   text: string;
 }
 
 export default {
-  promos: [
+  // Gen Z, the new school.
+  artists: [
+    {
+      id: 'drizilik',
+      name: 'Drizilik',
+      text: 'Kriofusion rapped in Krio. "Lemonade", from Wait and See, made Rolling Stone\'s best Afropop of 2025.',
+      release: 1788321371,
+      photo: '',
+    },
+    {
+      id: 'the-therapist',
+      name: 'The Therapist',
+      text: 'Had two million TikTok followers before his first single, "Nack", in 2022.',
+      release: 1612124616,
+      photo: '',
+    },
+    {
+      id: 'boii',
+      name: 'Boii',
+      text: "Spotify's most-streamed Sierra Leonean woman of 2024. Her first EP, Money or Honey, came in 2025.",
+      release: 1776449163,
+      photo: '',
+    },
+    {
+      id: 'apreel',
+      name: 'ApreeL',
+      text: '"O\'way", and "Control", a Krio love song that made Rolling Stone\'s best Afropop of 2025.',
+      release: 1831185667,
+      photo: '',
+    },
+    {
+      id: 'donii-major',
+      name: 'Donii Major',
+      text: 'R&B from Freetown, from "Hannah" in 2021 to "Shadow" in 2026.',
+      release: 6770467984,
+      photo: '',
+    },
+  ] as Artist[],
+  chapters: [
+    {
+      title: 'Palm-wine and gumbe',
+      text: 'Ebenezer Calendar & His Maringa Band made Creole palm-wine and gumbe popular, and S. E. Rogie sang palm-wine in four languages.',
+    },
+    {
+      title: 'Milo jazz',
+      text: 'Dr. Oloh led Milo Jazz, a street-band sound grown out of gumbe.',
+    },
     {
-      id: 'send',
-      title: 'Send money home',
-      text: 'Free transfers to any mobile wallet this week',
-      icon: 'send',
+      title: 'Afropop',
+      text: 'Bunny Mack\'s "Let Me Love You" was a disco hit in 1981, and Emmerson\'s Borbor Bele sang against corruption in 2004.',
     },
     {
-      id: 'bills',
-      title: 'Pay bills in seconds',
-      text: 'Electricity, water and airtime in one place',
-      icon: 'bolt',
+      title: 'Salone hip hop',
+      text: 'Rapped mostly in Krio, it rose after the civil war with Daddy Saj, K-Man, LAJ, Kao Denero and Star Zee.',
     },
     {
-      id: 'save',
-      title: 'Save a little each day',
-      text: 'Set a goal and watch it grow',
-      icon: 'wallet',
+      title: 'Gen Z',
+      text: 'Drizilik, Boii and ApreeL sing in Krio over Afrobeats, even amapiano, and new stars break through on Audiomack and TikTok.',
     },
-  ] as Promo[],
-  tips: [
-    { title: 'Welcome', text: 'Swipe, tap a dot, or use the buttons below.' },
-    { title: 'The page decides', text: "The carousel's index comes from state." },
-    { title: 'And hears back', text: 'A swipe raises change, which sets the index again.' },
-  ] as Tip[],
-  tip: 0,
+  ] as Chapter[],
+  chapter: 0,
 };

package/dist/templates/showcase/pages/carousel/view.dml

@@ -1,26 +1,29 @@
 <View>
   <Text variant="title">Carousel</Text>
-  <Text>A Carousel shows its children one at a time. Swipe between them, or tap a dot.</Text>
+  <Text>A carousel shows one slide at a time. Swipe, or tap a dot.</Text>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Plays by itself and loops, pausing while touched, with a gap between slides that scale in as they come</Text>
+    <Text variant="caption" tone="muted">Gen Z artists. The slides move on their own, start over at the end, and pause when you touch them.</Text>
     <Carousel autoplay loop interval="3000" gap="medium" effect="scale">
-      <For each="{{ promos }}" item="promo" key="id">
-        <View variant="card" direction="row" align="center" gap="large">
-          <Icon name="{{ promo.icon }}" size="large" tone="info" />
-          <View gap="small" grow>
-            <Text weight="bold">{{ promo.title }}</Text>
-            <Text tone="muted">{{ promo.text }}</Text>
-          </View>
+      <For each="{{ artists }}" item="artist" key="id">
+        <View variant="card" align="center" gap="medium">
+          <If condition="{{ artist.photo }}">
+            <Image src="{{ artist.photo }}" alt="{{ artist.name }}" aspect="1:1" />
+          </If>
+          <Else>
+            <Skeleton shape="box" height="240" />
+          </Else>
+          <Text weight="bold">{{ artist.name }}</Text>
+          <Text tone="muted" align="center">{{ artist.text }}</Text>
         </View>
       </For>
     </Carousel>
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">The page chooses the slide, and hears when a swipe changes it</Text>
-    <Carousel index="{{ tip }}" onChange="showTip">
-      <For each="{{ tips }}" item="card" key="title">
+    <Text variant="caption" tone="muted">How Salone music grew, from palm-wine to Gen Z. The buttons move the slides, so there are no dots.</Text>
+    <Carousel index="{{ chapter }}" indicator="none" onChange="showChapter">
+      <For each="{{ chapters }}" item="card" key="title">
         <View variant="card" align="center" gap="medium">
           <Image src="statics/logo.png" alt="" width="48" height="48" />
           <Text weight="bold">{{ card.title }}</Text>
@@ -29,9 +32,9 @@
       </For>
     </Carousel>
     <View direction="row" gap="small">
-      <Button variant="secondary" onClick="back" disabled="{{ tip === 0 }}">Back</Button>
-      <Button onClick="next" disabled="{{ tip === tips.length - 1 }}">Next</Button>
+      <Button variant="secondary" onClick="back" disabled="{{ chapter === 0 }}">Back</Button>
+      <Button onClick="next" disabled="{{ chapter === chapters.length - 1 }}">Next</Button>
     </View>
-    <Text>Tip {{ tip + 1 }} of {{ tips.length }}</Text>
+    <Text>Chapter {{ chapter + 1 }} of {{ chapters.length }}</Text>
   </View>
 </View>

package/dist/templates/showcase/pages/device/controller.ts

@@ -9,10 +9,10 @@ export default definePage({
     async greet() {
       try {
         const { action } = await this.dash.ui.alert({
-          title: 'Hello',
+          title: 'Kushé',
           message: env.GREETING,
           actions: [
-            { id: 'nice', label: 'Nice' },
+            { id: 'tenki', label: 'Tenki' },
             { id: 'close', label: 'Close', role: 'cancel' },
           ],
         });
@@ -24,11 +24,11 @@ export default definePage({
     async confirmDelete() {
       try {
         const { action } = await this.dash.ui.alert({
-          title: 'Delete everything?',
-          message: "This can't be undone.",
+          title: 'Remove this song from your library?',
+          message: 'Its download goes too.',
           actions: [
             { id: 'keep', label: 'Keep', role: 'cancel' },
-            { id: 'delete', label: 'Delete', role: 'destructive' },
+            { id: 'remove', label: 'Remove', role: 'destructive' },
           ],
         });
         this.setState({ choice: action });
@@ -39,23 +39,33 @@ export default definePage({
     async vibrate(_state, event: DotEvent<unknown, { style: 'light' | 'success' | 'error' }>) {
       await this.dash.system.vibrate({ style: event.data.style });
     },
-    async copyAccount() {
-      await this.dash.system.copyText('AC-2041');
-      this.setState({ toast: 'Account number copied' });
+    async copySong() {
+      await this.dash.system.copyText('Exodus, by Drizilik');
+      this.setState({ toast: 'Song copied' });
     },
     async shareLink() {
       try {
-        await this.dash.system.share({ title: 'Dot', url: 'https://github.com/monime-lab/dot' });
+        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 sendCode() {
+    async countDown() {
       for (let seconds = 10; seconds > 0; seconds--) {
-        this.setState({ resendIn: seconds });
+        this.setState({ showIn: seconds });
         await this.dash.system.delay(1000);
       }
-      this.setState({ resendIn: 0 });
+      this.setState({ showIn: 0, toast: "It's showtime" });
     },
     async toggleTorch(state) {
       const next = state.torch === 'on' ? 'off' : 'on';

package/dist/templates/showcase/pages/device/state.ts

@@ -3,5 +3,5 @@ export default {
   torch: 'off' as 'on' | 'off',
   note: '',
   toast: '',
-  resendIn: 0,
+  showIn: 0,
 };

package/dist/templates/showcase/pages/device/view.dml

@@ -1,17 +1,17 @@
 <View>
   <Text variant="title">Alerts and device</Text>
-  <Text>Dash draws these, not the dot: a dot calls them through the global dash object.</Text>
+  <Text>Dash shows these, not the dot. The dot asks for them through dash.</Text>
 
   <Text variant="caption" tone="muted">dash.ui.alert</Text>
   <View variant="card" gap="small">
     <View direction="row" wrap gap="small">
-      <Button onClick="greet">Say hello</Button>
-      <Button variant="secondary" onClick="confirmDelete">Ask to delete</Button>
+      <Button onClick="greet">Say kushé</Button>
+      <Button variant="secondary" onClick="confirmDelete">Remove a song</Button>
     </View>
     <If condition="{{ choice }}">
       <Text>You chose "{{ choice }}"</Text>
     </If>
-    <Text variant="caption" tone="muted">The hello message is GREETING in the dot's .env file.</Text>
+    <Text variant="caption" tone="muted">Kushé means hello in Krio, and tenki means thanks. The message comes from GREETING in the .env file.</Text>
   </View>
 
   <Text variant="caption" tone="muted">dash.system.vibrate</Text>
@@ -23,18 +23,23 @@
 
   <Text variant="caption" tone="muted">dash.system.copyText and dash.system.share</Text>
   <View variant="card" direction="row" wrap gap="small">
-    <Button variant="secondary" onClick="copyAccount">Copy AC-2041</Button>
-    <Button variant="secondary" onClick="shareLink">Share a link</Button>
+    <Button variant="secondary" onClick="copySong">Copy a song</Button>
+    <Button variant="secondary" onClick="shareLink">Share Sierra Leone's music</Button>
+  </View>
+
+  <Text variant="caption" tone="muted">dash.system.openUrl opens a web page in the phone's browser</Text>
+  <View variant="card">
+    <Button variant="secondary" onClick="openDrizilik">Open Drizilik's website</Button>
   </View>
 
   <Text variant="caption" tone="muted">dash.system.delay</Text>
   <View variant="card">
-    <Button variant="secondary" onClick="sendCode" disabled="{{ resendIn > 0 }}">{{ resendIn > 0 ? 'Resend in ' + resendIn + 's' : 'Send a code' }}</Button>
+    <Button variant="secondary" onClick="countDown" disabled="{{ showIn > 0 }}">{{ showIn > 0 ? 'Showtime in ' + showIn + 's' : 'Count down to showtime' }}</Button>
   </View>
 
   <Text variant="caption" tone="muted">dash.system.torch</Text>
   <View variant="card" gap="small">
-    <Button variant="secondary" onClick="toggleTorch">{{ torch === 'on' ? 'Turn the torch off' : 'Turn the torch on' }}</Button>
+    <Button variant="secondary" onClick="toggleTorch">{{ torch === 'on' ? 'Turn the torch off' : 'Lights up for the slow song' }}</Button>
     <If condition="{{ note }}">
       <Text variant="caption" tone="muted">{{ note }}</Text>
     </If>

package/dist/templates/showcase/pages/feedback/controller.ts

@@ -7,9 +7,14 @@ export default definePage({
     restart: () => ({ progress: 0 }),
     toggleBusy: (state) => ({ busy: !state.busy }),
     toggleLoaded: (state) => ({ loaded: !state.loaded }),
-    showToast: (_state, event: DotEvent<unknown, { message: string; tone: string }>) => ({
+    // A toast lasts its default time unless the button gives one, in milliseconds.
+    showToast: (
+      _state,
+      event: DotEvent<unknown, { message: string; tone: string; duration?: string }>,
+    ) => ({
       toast: event.data.message,
       toastTone: event.data.tone,
+      toastDuration: event.data.duration ? Number(event.data.duration) : undefined,
     }),
     clearToast: () => ({ toast: '' }),
   },

package/dist/templates/showcase/pages/feedback/state.ts

@@ -4,4 +4,5 @@ export default {
   loaded: false,
   toast: '',
   toastTone: 'default',
+  toastDuration: undefined as number | undefined,
 };

package/dist/templates/showcase/pages/feedback/view.dml

@@ -1,6 +1,6 @@
 <View>
   <Text variant="title">Feedback</Text>
-  <Text>Show that something is happening, how far along it is, and how it went.</Text>
+  <Text>Show that something is loading, how far it has gone, and how it ended.</Text>
 
   <View gap="small">
     <Text variant="caption" tone="muted">Spinners, while something loads</Text>
@@ -12,14 +12,14 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Skeletons, in the shape of what's loading</Text>
+    <Text variant="caption" tone="muted">Skeletons show the shape of what is loading</Text>
     <View variant="card">
       <If condition="{{ loaded }}">
         <View direction="row" align="center" gap="large">
           <Image src="statics/logo.png" alt="Logo" width="40" height="40" shape="circle" />
           <View gap="none">
-            <Text weight="medium">Dot Showcase</Text>
-            <Text variant="caption" tone="muted">Loaded, in place of the skeleton</Text>
+            <Text weight="medium">Salone Sounds Radio</Text>
+            <Text variant="caption" tone="muted">The loaded content, in place of the skeleton</Text>
           </View>
         </View>
         <Image src="statics/logo.png" alt="Banner" width="320" height="80" fit="contain" />
@@ -36,18 +36,18 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Toasts, which go away on their own</Text>
+    <Text variant="caption" tone="muted">Toasts disappear on their own. The offline one stays for 6 seconds.</Text>
     <View direction="row" gap="small">
-      <Button variant="secondary" data-message="Saved" data-tone="success" onClick="showToast">Saved</Button>
-      <Button variant="secondary" data-message="You're offline" data-tone="warning" onClick="showToast">Offline</Button>
+      <Button variant="secondary" data-message="Added to your library" data-tone="success" onClick="showToast">Add a song</Button>
+      <Button variant="secondary" data-message="You're offline. Only downloads will play." data-tone="warning" data-duration="6000" onClick="showToast">Go offline</Button>
     </View>
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A progress bar, from 0 to 100</Text>
+    <Text variant="caption" tone="muted">A progress bar for an album download, from 0 to 100</Text>
     <View variant="card">
       <ProgressBar value="{{ progress }}" />
-      <Text>{{ progress }}% done</Text>
+      <Text>{{ progress }}% downloaded</Text>
       <View direction="row" gap="small">
         <Button variant="secondary" onClick="advance" disabled="{{ progress >= 100 }}">Advance</Button>
         <Button variant="secondary" onClick="restart" disabled="{{ progress === 0 }}">Restart</Button>
@@ -56,32 +56,32 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A button that's busy ignores taps</Text>
+    <Text variant="caption" tone="muted">A busy button ignores taps</Text>
     <View variant="card">
-      <Button loading="{{ busy }}">{{ busy ? 'Paying…' : 'Pay Le 50,000' }}</Button>
+      <Button loading="{{ busy }}">{{ busy ? 'Paying…' : 'Pay Le 300 for two tickets' }}</Button>
       <Switch label="Busy" checked="{{ busy }}" onChange="toggleBusy" />
     </View>
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Notices, in the flow of the page</Text>
-    <Notice title="Heads up">Your meter number is on the bill.</Notice>
-    <Notice tone="info" title="New">You can now pay water bills.</Notice>
-    <Notice tone="success" title="Paid">Le 50,000 for electricity.</Notice>
-    <Notice tone="warning" title="Almost out">Your wallet has Le 2,000 left.</Notice>
+    <Text variant="caption" tone="muted">Notices sit inside the page</Text>
+    <Notice title="Heads up">Doors open at 7 pm, and the music starts at 8.</Notice>
+    <Notice tone="info" title="New">Tickets for gospel night in Kenema are on sale.</Notice>
+    <Notice tone="success" title="Booked">Two tickets for Salone Sounds Live.</Notice>
+    <Notice tone="warning" title="Almost sold out">Twelve VIP tickets are left.</Notice>
     <Notice tone="danger" title="Payment failed">The bank didn't answer. Try again.</Notice>
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Badges, for a status</Text>
+    <Text variant="caption" tone="muted">Badges show a status</Text>
     <View direction="row" wrap gap="small">
-      <Badge>Draft</Badge>
-      <Badge tone="info">New</Badge>
-      <Badge tone="success">Paid</Badge>
-      <Badge tone="warning">Pending</Badge>
-      <Badge tone="danger">Failed</Badge>
+      <Badge>Demo</Badge>
+      <Badge tone="info">New release</Badge>
+      <Badge tone="success">Booked</Badge>
+      <Badge tone="warning">Few left</Badge>
+      <Badge tone="danger">Sold out</Badge>
     </View>
   </View>
 
-  <Toast message="{{ toast }}" tone="{{ toastTone }}" onHide="clearToast" />
+  <Toast message="{{ toast }}" tone="{{ toastTone }}" duration="{{ toastDuration }}" onHide="clearToast" />
 </View>