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

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

@@ -1,7 +1,33 @@
 import state from './state';
 
+// AUDACITY's id in Apple's catalog; its cover's address can change, so the page looks it up.
+const AUDACITY = 6811765244;
+
+interface Lookup {
+  results: { artworkUrl100: string }[];
+}
+
 export default definePage({
   initialState: state,
+  hooks: {
+    async onLoad() {
+      try {
+        const { body } = await this.dash.network.http.request<Lookup>({
+          url: `https://itunes.apple.com/lookup?id=${AUDACITY}`,
+          as: 'json',
+        });
+        const artwork = body.results[0]?.artworkUrl100;
+        // The catalog's artwork comes in any size its address names.
+        this.setState(
+          artwork
+            ? { cover: artwork.replace('100x100bb', '600x600bb') }
+            : { coverNote: "Apple's catalog has no cover for it" },
+        );
+      } catch (error) {
+        this.setState({ coverNote: (error as Error).message });
+      }
+    },
+  },
   mutations: {
     grow: (state) => ({ size: Math.min(state.size + 16, 128) }),
     shrink: (state) => ({ size: Math.max(state.size - 16, 16) }),

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

@@ -4,4 +4,7 @@ export default {
   // Built at run time, so the build doesn't check that the file exists.
   missing: 'statics/missing.png',
   failure: '',
+  // The cover of Drizilik's album AUDACITY, which the page asks Apple's catalog for.
+  cover: '',
+  coverNote: '',
 };

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

@@ -1,6 +1,6 @@
 <View>
   <Text variant="title">Images</Text>
-  <Text>Pictures in the dot's statics/ folder ship with it. The build checks each one.</Text>
+  <Text>Pictures in the statics/ folder come with the dot, and the build checks each one. Pictures from the web load from their address.</Text>
 
   <View variant="card" direction="row" align="end" gap="large">
     <Image src="statics/logo.png" alt="Small logo" width="24" height="24" />
@@ -8,7 +8,22 @@
     <Image src="statics/logo.png" alt="Large logo" width="96" height="96" />
   </View>
 
-  <Text variant="caption" tone="muted">Shapes, and how a picture fills its box</Text>
+  <Text variant="caption" tone="muted">From the web: the cover of Drizilik's album AUDACITY. With aspect="1:1" and no width, it fills the card.</Text>
+  <View variant="card" gap="small">
+    <If condition="{{ cover }}">
+      <Image src="{{ cover }}" alt="The cover of AUDACITY, by Drizilik" aspect="1:1" />
+      <Text weight="medium">AUDACITY</Text>
+      <Text variant="caption" tone="muted">Drizilik raps mostly in Krio, in a style called Kriofusion. He won Best Male Artist at the 2026 SLeDU awards.</Text>
+    </If>
+    <ElseIf condition="{{ coverNote }}">
+      <Text variant="caption" tone="muted">{{ coverNote }}</Text>
+    </ElseIf>
+    <Else>
+      <Skeleton shape="box" height="280" />
+    </Else>
+  </View>
+
+  <Text variant="caption" tone="muted">Shapes, and how a picture fills its space</Text>
   <View variant="card" direction="row" align="center" gap="large">
     <Image src="statics/logo.png" alt="Rounded" width="56" height="56" />
     <Image src="statics/logo.png" alt="Square" width="56" height="56" shape="square" />
@@ -26,7 +41,7 @@
     </View>
   </View>
 
-  <Text variant="caption" tone="muted">An image that fails says why</Text>
+  <Text variant="caption" tone="muted">A broken image shows why it failed</Text>
   <View variant="card">
     <If condition="{{ failure }}">
       <Text>{{ failure }}</Text>

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

@@ -11,7 +11,7 @@ export interface Section {
 }
 
 export default {
-  title: 'Showcase',
+  title: 'Salone Sounds',
   sections: [
     {
       title: 'Views',
@@ -19,55 +19,55 @@ export default {
         {
           page: 'layout',
           title: 'Layout',
-          summary: 'Rows, columns, grids, gaps, alignment and cards',
+          summary: 'Rows, columns, cards, a shelf to scroll and a grid',
           icon: 'grid',
         },
         {
           page: 'text',
           title: 'Text and bindings',
-          summary: 'Text styles and tones, and values from state',
+          summary: 'Text styles, tones, links and bindings',
           icon: 'edit',
         },
         {
           page: 'images',
           title: 'Images',
-          summary: 'Pictures from statics/, their shapes and events',
+          summary: 'Pictures from the dot and from the web',
           icon: 'image',
         },
         {
           page: 'carousel',
           title: 'Carousel',
-          summary: 'Slides to swipe, played by themselves, with dots',
+          summary: 'Slides of Gen Z artists and Salone history',
           icon: 'image',
         },
         {
           page: 'lists',
           title: 'Lists and icons',
-          summary: 'Rows to tap, sheets of actions, badges and icons',
+          summary: 'Rows to tap, badges and icons',
           icon: 'list',
         },
         {
           page: 'filters',
           title: 'Tabs and filters',
-          summary: 'Tabs, chips to narrow a list, and an empty state',
+          summary: 'Tabs, chips and empty states',
           icon: 'search',
         },
         {
           page: 'forms',
           title: 'Forms',
-          summary: 'Fields, choices, switches, and a footer to send them',
+          summary: 'Fields, choices and switches for buying tickets',
           icon: 'check',
         },
         {
           page: 'payments',
           title: 'Payments',
-          summary: 'Amounts, one-time codes, PINs and QR codes',
+          summary: 'Amounts, QR codes and one-time codes',
           icon: 'cash',
         },
         {
           page: 'feedback',
           title: 'Feedback',
-          summary: 'Skeletons, toasts, spinners, progress and notices',
+          summary: 'Loading, toasts, progress and notices',
           icon: 'bell',
         },
       ],
@@ -78,13 +78,13 @@ export default {
         {
           page: 'state',
           title: 'State, mutations and actions',
-          summary: 'A counter, conditions and lists',
+          summary: 'State, conditions and lists',
           icon: 'refresh',
         },
         {
           page: 'navigation',
           title: 'Navigation and hooks',
-          summary: 'The page stack, and when each hook runs',
+          summary: 'Opening pages, going back, and page hooks',
           icon: 'arrow-right',
         },
       ],
@@ -95,7 +95,7 @@ export default {
         {
           page: 'device',
           title: 'Alerts and device',
-          summary: 'Native alerts, the clipboard, sharing, delays and the torch',
+          summary: 'Alerts, copy, share, links and the torch',
           icon: 'mobile',
         },
         {
@@ -107,9 +107,21 @@ export default {
         {
           page: 'files',
           title: 'Files',
-          summary: "The dot's own files, kept between runs",
+          summary: "Saving files in the dot's own folder",
           icon: 'file',
         },
+        {
+          page: 'cache',
+          title: 'Cache',
+          summary: 'Values that expire after a while',
+          icon: 'refresh',
+        },
+        {
+          page: 'secrets',
+          title: 'Secrets',
+          summary: 'Sign-in tokens kept encrypted',
+          icon: 'lock',
+        },
       ],
     },
   ] as Section[],

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

@@ -1,9 +1,9 @@
 <View>
   <View direction="row" align="center" gap="large">
-    <Image src="statics/logo.png" alt="Dot logo" width="48" height="48" />
+    <Image src="statics/logo.png" alt="Salone Sounds logo" width="48" height="48" />
     <View gap="none">
       <Text variant="title">{{ title }}</Text>
-      <Text variant="caption" tone="muted">What a dot can do, one page each</Text>
+      <Text variant="caption" tone="muted">What a dot can do, shown with Sierra Leone's music</Text>
     </View>
   </View>
 

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

@@ -6,17 +6,51 @@ const JUSTIFIES: Justify[] = ['start', 'center', 'end', 'between'];
 const ALIGNS: Align[] = ['stretch', 'start', 'center', 'end'];
 const SPACES: Space[] = ['none', 'small', 'medium', 'large'];
 
+interface Lookup {
+  results: { collectionId: number; artworkUrl100: string }[];
+}
+
 export default definePage({
   initialState: state,
+  hooks: {
+    // The shelf's covers come from Apple's catalog.
+    async onLoad() {
+      const ids = this.state.releases.map((release) => release.id).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', '300x300bb'),
+          ]),
+        );
+        this.setState((current) => ({
+          releases: current.releases.map((release) => ({
+            ...release,
+            cover: covers.get(release.id) ?? '',
+          })),
+        }));
+      } catch {
+        // Without the catalog, the shelf shows its titles alone.
+      }
+    },
+  },
   mutations: {
     nextDirection: (state) => ({ direction: after(DIRECTIONS, state.direction) }),
     nextJustify: (state) => ({ justify: after(JUSTIFIES, state.justify) }),
     nextAlign: (state) => ({ align: after(ALIGNS, state.align) }),
     nextGap: (state) => ({ gap: after(SPACES, state.gap) }),
     toggleWrap: (state) => ({ wrap: !state.wrap }),
-    openService: (_state, event: DotEvent<unknown, { name: string }>) => ({
-      service: event.data.name,
+    openSection: (_state, event: DotEvent<unknown, { name: string }>) => ({
+      section: event.data.name,
     }),
+    showFirst: (_state, event: DotEvent<{ index: number }>) => ({ first: event.detail.index }),
+    shelfStart: () => ({ first: 0 }),
+    shelfEnd: (state) => ({ first: state.releases.length - 1 }),
+    playSong: (state) => ({ playing: !state.playing }),
   },
 });
 

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

@@ -3,12 +3,32 @@ export type Justify = 'start' | 'center' | 'end' | 'between';
 export type Align = 'stretch' | 'start' | 'center' | 'end';
 export type Space = 'none' | 'small' | 'medium' | 'large';
 
+export interface Release {
+  // Its id in Apple's catalog, which has its cover.
+  id: number;
+  title: string;
+  year: number;
+  cover: string;
+}
+
 export default {
   direction: 'row' as Direction,
   justify: 'start' as Justify,
   align: 'center' as Align,
   gap: 'small' as Space,
   wrap: true,
-  // The service tapped in the grid.
-  service: '',
+  // The section tapped in the grid.
+  section: '',
+  // Whether the tapped song card is playing.
+  playing: false,
+  // Drizilik's releases, newest first, for the shelf.
+  releases: [
+    { id: 6811765244, title: 'AUDACITY', year: 2026, cover: '' },
+    { id: 1788321371, title: 'Wait and See', year: 2025, cover: '' },
+    { id: 1745452762, title: 'Send Money', year: 2024, cover: '' },
+    { id: 1638724918, title: 'Ashobi', year: 2022, cover: '' },
+    { id: 1590578915, title: 'Exodus', year: 2021, cover: '' },
+  ] as Release[],
+  // The release at the start of the shelf.
+  first: 0,
 };

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

@@ -1,13 +1,13 @@
 <View>
   <Text variant="title">Layout</Text>
-  <Text>A View lays out what it holds in a column, or in a row. Change the one below.</Text>
+  <Text>A View puts its items in a column or a row. Change the one below.</Text>
 
   <View variant="card" direction="{{ direction }}" justify="{{ justify }}" align="{{ align }}" gap="{{ gap }}" wrap="{{ wrap }}">
-    <Button variant="secondary">One</Button>
-    <Button variant="secondary">Two</Button>
-    <Text variant="title">Three</Text>
-    <Button variant="secondary">Four</Button>
-    <Text variant="caption" tone="muted">Five</Text>
+    <Button variant="secondary">Palm-wine</Button>
+    <Button variant="secondary">Gumbe</Button>
+    <Text variant="title">Afropop</Text>
+    <Button variant="secondary">Bubu</Button>
+    <Text variant="caption" tone="muted">Milo jazz</Text>
   </View>
 
   <View gap="small">
@@ -38,17 +38,38 @@
     </View>
   </View>
 
-  <Text variant="caption" tone="muted">grow takes the space that's left</Text>
+  <Text variant="caption" tone="muted">grow fills the space left over: the song grows, the year does not. Tap the song: a View can be tapped.</Text>
   <View direction="row" gap="small">
-    <View variant="card" grow>
-      <Text>grow</Text>
+    <View variant="card" grow onTap="playSong">
+      <Text>{{ playing ? 'Playing Exodus, by Drizilik' : 'Exodus, by Drizilik' }}</Text>
     </View>
     <View variant="card">
-      <Text>fixed</Text>
+      <Text>2021</Text>
     </View>
   </View>
 
-  <Text variant="caption" tone="muted">padding, on every side or just one</Text>
+  <Text variant="caption" tone="muted">A Scroll moves a row sideways. It stops at the start of each release. The buttons scroll it too.</Text>
+  <Scroll gap="medium" snap="start" index="{{ first }}" onChange="showFirst">
+    <For each="{{ releases }}" item="release" key="id">
+      <View gap="small">
+        <If condition="{{ release.cover }}">
+          <Image src="{{ release.cover }}" alt="{{ release.title }}" width="128" height="128" />
+        </If>
+        <Else>
+          <Skeleton shape="box" height="128" />
+        </Else>
+        <Text weight="medium" maxLines="2">{{ release.title }}</Text>
+        <Text variant="caption" tone="muted">{{ release.year }}</Text>
+      </View>
+    </For>
+  </Scroll>
+  <Text tone="muted">First on the shelf: {{ releases[first].title }}</Text>
+  <View direction="row" gap="small">
+    <Button variant="secondary" onClick="shelfStart" disabled="{{ first === 0 }}">To the start</Button>
+    <Button variant="secondary" onClick="shelfEnd" disabled="{{ first === releases.length - 1 }}">To the end</Button>
+  </View>
+
+  <Text variant="caption" tone="muted">padding, on every side or on one side</Text>
   <View direction="row" gap="small">
     <View variant="card" padding="small">
       <Text>small</Text>
@@ -60,21 +81,23 @@
       <Text>start</Text>
     </View>
   </View>
+  <Text variant="caption" tone="muted">Text, List, Notice and Grid take padding too</Text>
+  <Notice title="Heads up" paddingTop="large" paddingBottom="large">This notice has large padding above and below.</Notice>
 
-  <Text variant="caption" tone="muted">A Grid keeps equal columns, here of services to tap</Text>
+  <Text variant="caption" tone="muted">A Grid keeps its columns the same width</Text>
   <View variant="card" gap="medium">
     <Grid columns="4">
-      <GridItem icon="send" label="Send" data-name="Send" onTap="openService" />
-      <GridItem icon="phone" label="Airtime" data-name="Airtime" onTap="openService" />
-      <GridItem icon="bolt" label="Electricity" badge="New" data-name="Electricity" onTap="openService" />
-      <GridItem icon="water" label="Water" data-name="Water" onTap="openService" />
-      <GridItem icon="qr-code" label="Scan to pay" data-name="Scan to pay" onTap="openService" />
-      <GridItem icon="wallet" label="Save" data-name="Save" onTap="openService" />
-      <GridItem icon="receipt" label="Receipts" data-name="Receipts" onTap="openService" />
-      <GridItem icon="more" label="More" data-name="More" onTap="openService" />
+      <GridItem icon="microphone" label="Artists" data-name="Artists" onTap="openSection" />
+      <GridItem icon="music" label="Albums" data-name="Albums" onTap="openSection" />
+      <GridItem icon="playlist" label="Playlists" data-name="Playlists" onTap="openSection" />
+      <GridItem icon="star" label="Charts" badge="New" data-name="Charts" onTap="openSection" />
+      <GridItem icon="calendar" label="Shows" data-name="Shows" onTap="openSection" />
+      <GridItem icon="ticket" label="Tickets" data-name="Tickets" onTap="openSection" />
+      <GridItem icon="headphones" label="Library" data-name="Library" onTap="openSection" />
+      <GridItem image="statics/logo.png" label="Salone" data-name="Salone" onTap="openSection" />
     </Grid>
-    <If condition="{{ service }}">
-      <Text tone="muted">You tapped {{ service }}</Text>
+    <If condition="{{ section }}">
+      <Text tone="muted">You tapped {{ section }}</Text>
     </If>
   </View>
 </View>

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

@@ -4,32 +4,33 @@ export default definePage({
   initialState: state,
   mutations: {
     choose: (state, event: DotEvent<unknown, { id: string }>) => {
-      const account = state.accounts.find((candidate) => candidate.id === event.data.id);
-      return { chosen: account?.name ?? '' };
+      const artist = state.artists.find((candidate) => candidate.id === event.data.id);
+      return { chosen: artist?.name ?? '' };
     },
-    openPayment: (state, event: DotEvent<unknown, { id: string }>) => ({
-      selected: state.payments.find((payment) => payment.id === event.data.id) ?? null,
+    openRelease: (state, event: DotEvent<unknown, { id: string }>) => ({
+      selected: state.releases.find((release) => release.id === event.data.id) ?? null,
     }),
     closeSheet: () => ({ selected: null }),
     clearToast: () => ({ toast: '' }),
   },
   actions: {
-    async copyReference(state) {
+    async copyTitle(state) {
       if (!state.selected) {
         return;
       }
-      await this.dash.system.copyText(state.selected.reference);
-      this.setState({ selected: null, toast: 'Reference copied' });
+      const { title, artist } = state.selected;
+      await this.dash.system.copyText(`${title}, by ${artist}`);
+      this.setState({ selected: null, toast: 'Title copied' });
     },
-    async shareReceipt(state) {
+    async shareRelease(state) {
       if (!state.selected) {
         return;
       }
-      const { title, amount, status, reference } = state.selected;
+      const { title, artist, year, note } = state.selected;
       this.setState({ selected: null });
       await this.dash.system.share({
-        title: `${title} receipt`,
-        text: `${title}: ${amount}, ${status}. Reference ${reference}.`,
+        title,
+        text: `${title}, by ${artist} (${year}): ${note.toLowerCase()}.`,
       });
     },
   },

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

@@ -1,96 +1,117 @@
-export interface Account {
+export interface Artist {
   id: string;
   name: string;
-  number: string;
-  balance: string;
+  song: string;
+  genre: string;
   icon: string;
 }
 
-export interface Payment {
+export interface Release {
   id: string;
   title: string;
-  date: string;
-  amount: string;
-  status: string;
+  artist: string;
+  year: number;
+  note: string;
   tone: string;
-  reference: string;
 }
 
 export default {
-  accounts: [
+  artists: [
     {
-      id: 'savings',
-      name: 'Savings',
-      number: '•••• 2041',
-      balance: 'Le 1,250,000',
-      icon: 'bank',
+      id: 'drizilik',
+      name: 'Drizilik',
+      song: 'Lemonade, with The Therapist',
+      genre: 'Kriofusion',
+      icon: 'microphone',
     },
+    { id: 'boii', name: 'Boii', song: 'Love Na Scam', genre: 'Afrobeats', icon: 'microphone' },
+    { id: 'apreel', name: 'ApreeL', song: 'Control', genre: 'Afropop', icon: 'microphone' },
+    { id: 'donii-major', name: 'Donii Major', song: 'Hannah', genre: 'R&B', icon: 'microphone' },
     {
-      id: 'wallet',
-      name: 'Mobile wallet',
-      number: '076 •••• 21',
-      balance: 'Le 84,500',
-      icon: 'mobile',
+      id: 'star-zee',
+      name: 'Star Zee',
+      song: 'Leader, with Stonebwoy',
+      genre: 'Hip hop',
+      icon: 'microphone',
     },
-    { id: 'card', name: 'Debit card', number: '•••• 7730', balance: 'Le 310,000', icon: 'card' },
-  ] as Account[],
-  payments: [
     {
-      id: 'p1',
-      title: 'Electricity',
-      date: 'Today',
-      amount: 'Le 50,000',
-      status: 'Paid',
+      id: 'kao-denero',
+      name: 'Kao Denero',
+      song: 'Kenyatta',
+      genre: 'Hip hop',
+      icon: 'microphone',
+    },
+    { id: 'laj', name: 'LAJ', song: 'Shock, with Cassidy', genre: 'Hip hop', icon: 'microphone' },
+    {
+      id: 'k-man',
+      name: 'K-Man',
+      song: 'Leh Wi Make Salone',
+      genre: 'Hip hop',
+      icon: 'microphone',
+    },
+  ] as Artist[],
+  releases: [
+    {
+      id: 'rise-and-shine',
+      title: 'Rise & Shine',
+      artist: "Sierra Leone's Refugee All Stars",
+      year: 2010,
+      note: 'Album of the year',
       tone: 'success',
-      reference: 'EDSA-58213',
     },
     {
-      id: 'p2',
-      title: 'Airtime',
-      date: 'Yesterday',
-      amount: 'Le 10,000',
-      status: 'Pending',
+      id: 'kormot-bi-en-me',
+      title: 'Kormot Bi En Me',
+      artist: 'Steady Bongo',
+      year: 1996,
+      note: 'Best album',
+      tone: 'success',
+    },
+    {
+      id: 'salone',
+      title: 'Salone',
+      artist: 'Bai Kamara Jr.',
+      year: 2020,
+      note: 'Nominated',
       tone: 'warning',
-      reference: 'AIR-11907',
     },
     {
-      id: 'p3',
-      title: 'Water',
-      date: '12 September',
-      amount: 'Le 35,000',
-      status: 'Failed',
-      tone: 'danger',
-      reference: 'GVWC-40022',
+      id: 'red-album',
+      title: 'Red Album',
+      artist: 'LAJ',
+      year: 2013,
+      note: 'Launched at the stadium',
+      tone: 'info',
+    },
+    {
+      id: 'let-me-love-you',
+      title: 'Let Me Love You',
+      artist: 'Bunny Mack',
+      year: 1981,
+      note: 'Gold disc',
+      tone: 'info',
     },
-  ] as Payment[],
+  ] as Release[],
   chosen: '',
-  // The payment whose actions the sheet shows.
-  selected: null as Payment | null,
+  // The record whose actions the sheet shows.
+  selected: null as Release | null,
   toast: '',
   icons: [
-    'home',
-    'search',
-    'bell',
-    'user',
-    'settings',
-    'wallet',
-    'bank',
-    'card',
-    'cash',
-    'send',
-    'receipt',
-    'qr-code',
-    'bolt',
-    'water',
-    'phone',
-    'mail',
-    'calendar',
-    'clock',
-    'location',
-    'lock',
+    'music',
+    'playlist',
+    'microphone',
+    'headphones',
+    'ticket',
+    'video',
+    'globe',
+    'link',
+    'external-link',
+    'heart',
+    'star',
     'share',
-    'copy',
     'download',
-    'star',
+    'calendar',
+    'location',
+    'search',
   ],
 };