@monimesl/dot-cli 0.1.0-alpha.10

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

@@ -0,0 +1,50 @@
+<View>
+  <Text variant="title">Files</Text>
+  <Text>Each dot has its own folder. Other dots can't see it. Files stay after the dot closes.</Text>
+
+  <Text variant="caption" tone="muted">A setlist. Each song is a text file.</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. Add some, then close and reopen the dot. They are still here.</Text>
+    </If>
+  </View>
+
+  <Text variant="caption" tone="muted">Archived setlists. Each one is a folder you can copy back.</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>
+
+  <Text variant="caption" tone="muted">Artwork saved from the 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 Network page, search, download the artwork and tap Keep.</Text>
+    </Else>
+  </View>
+
+  <Text variant="caption" tone="muted">{{ usage }}</Text>
+</View>

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

@@ -0,0 +1,27 @@
+import type { Release } from './state';
+import state from './state';
+
+type Chosen = DotEvent<{ value: string }>;
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    chooseTab: (state, event: Chosen) => {
+      const tab = event.detail.value;
+      return { tab, shown: filter(state.releases, tab, state.genre) };
+    },
+    chooseGenre: (state, event: DotEvent<unknown, { genre: string }>) => {
+      const { genre } = event.data;
+      return { genre, shown: filter(state.releases, state.tab, genre) };
+    },
+    clearFilters: (state) => ({ tab: 'all', genre: 'All', shown: state.releases }),
+    chooseWhere: (_state, event: Chosen) => ({ where: event.detail.value }),
+  },
+});
+
+function filter(releases: readonly Release[], tab: string, genre: string): Release[] {
+  return releases.filter(
+    (release) =>
+      (tab === 'all' || release.kind === tab) && (genre === 'All' || release.genre === genre),
+  );
+}

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

@@ -0,0 +1,118 @@
+export type Kind = 'album' | 'song';
+export type Genre = 'Kriofusion' | 'Afropop' | 'Hip hop' | 'R&B' | 'Palm-wine' | 'Gospel' | 'Bubu';
+
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+  kind: Kind;
+  genre: Genre;
+}
+
+export interface Show {
+  id: string;
+  title: string;
+  place: string;
+  date: string;
+  city: string;
+}
+
+function release(
+  id: string,
+  title: string,
+  artist: string,
+  year: number,
+  kind: Kind,
+  genre: Genre,
+): Release {
+  return { id, title, artist, year, kind, genre };
+}
+
+// Newest first.
+const releases: Release[] = [
+  release('audacity', 'AUDACITY', 'Drizilik', 2026, 'album', 'Kriofusion'),
+  release('money-or-honey', 'Money or Honey', 'Boii', 2025, 'album', 'R&B'),
+  release('control', 'Control', 'ApreeL', 2025, 'song', 'Afropop'),
+  release('wait-and-see', 'Wait and See', 'Drizilik', 2025, 'album', 'Kriofusion'),
+  release('blunt', 'Blunt', 'Donii Major', 2023, 'song', 'R&B'),
+  release('ashobi', 'Ashobi', 'Drizilik', 2022, 'album', 'Kriofusion'),
+  release('nack', 'Nack', 'The Therapist', 2022, 'song', 'Afropop'),
+  release('hannah', 'Hannah', 'Donii Major', 2021, 'song', 'R&B'),
+  release('shukubly', 'Shukubly', 'Drizilik', 2018, 'album', 'Kriofusion'),
+  release('en-yay-sah', 'En Yay Sah', 'Janka Nabay and the Bubu Gang', 2012, 'album', 'Bubu'),
+  release('red-album', 'Red Album', 'LAJ', 2013, 'album', 'Hip hop'),
+  release(
+    'ghetto-struggle',
+    'Ghetto Struggle',
+    'Kao Denero, with Busy Signal',
+    2013,
+    'song',
+    'Hip hop',
+  ),
+  release('borbor-bele', 'Borbor Bele', 'Emmerson', 2004, 'album', 'Afropop'),
+  release('corruption', 'Corruption', 'Daddy Saj', 2003, 'album', 'Hip hop'),
+  release('cry-africa', 'Cry Africa', 'Vicky Fornah', 1999, 'song', 'Gospel'),
+  release('kormot-bi-en-me', 'Kormot Bi En Me', 'Steady Bongo', 1996, 'album', 'Afropop'),
+  release('dead-men', "Dead Men Don't Smoke Marijuana", 'S. E. Rogie', 1994, 'album', 'Palm-wine'),
+  release('let-me-love-you', 'Let Me Love You', 'Bunny Mack', 1981, 'song', 'Afropop'),
+];
+
+export default {
+  releases,
+  // The releases the tab and the chosen genre leave.
+  shown: releases,
+  tab: 'all',
+  albums: releases.filter((item) => item.kind === 'album').length,
+  songs: releases.filter((item) => item.kind === 'song').length,
+  genres: ['All', 'Kriofusion', 'Afropop', 'Hip hop', 'R&B', 'Palm-wine', 'Gospel', 'Bubu'],
+  genre: 'All',
+  // Gen Z's shows, at home in Sierra Leone and abroad.
+  where: 'home',
+  home: [
+    {
+      id: 'sledu-2026',
+      title: 'SLeDU National Music Awards',
+      place: 'Bintumani Conference Centre',
+      date: '27 March 2026',
+      city: 'Freetown',
+    },
+    {
+      id: 'special-guests-4',
+      title: 'Drizilik & Special Guests',
+      place: 'Fourah Bay College Amphitheatre',
+      date: '28 November 2025',
+      city: 'Freetown',
+    },
+  ] as Show[],
+  abroad: [
+    {
+      id: 'detty-rave',
+      title: 'Detty Rave, with Mr Eazi',
+      place: 'Drizilik joins him for "Sabi Road"',
+      date: 'December 2025',
+      city: 'Accra',
+    },
+    {
+      id: 'steel-yard',
+      title: 'Drizilik Live In London',
+      place: 'The Steel Yard',
+      date: '16 November 2025',
+      city: 'London',
+    },
+    {
+      id: 'howard-theatre',
+      title: 'Drizilik live',
+      place: 'Howard Theatre',
+      date: '6 July 2024',
+      city: 'Washington',
+    },
+    {
+      id: 'freedom-festival',
+      title: 'Freedom Festival',
+      place: "In Hull, Freetown's twin city",
+      date: '2–3 September 2022',
+      city: 'Hull',
+    },
+  ] as Show[],
+};

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

@@ -0,0 +1,44 @@
+<View>
+  <Text variant="title">Tabs and filters</Text>
+  <Text>Tabs change what the page shows. Chips narrow it down. An empty state shows when nothing matches. Try Songs with Palm-wine.</Text>
+
+  <Tabs value="{{ tab }}" onChange="chooseTab">
+    <Tab value="all" label="All" />
+    <Tab value="album" label="Albums" badge="{{ albums }}" />
+    <Tab value="song" label="Songs" badge="{{ songs }}" />
+  </Tabs>
+
+  <View direction="row" gap="small" wrap>
+    <For each="{{ genres }}" item="option" key="*this">
+      <Chip label="{{ option }}" selected="{{ option === genre }}" data-genre="{{ option }}" onTap="chooseGenre" />
+    </For>
+  </View>
+
+  <If condition="{{ shown.length > 0 }}">
+    <List>
+      <For each="{{ shown }}" item="release" key="id">
+        <ListItem icon="{{ release.kind === 'album' ? 'playlist' : 'music' }}" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.genre }}">
+          <Badge>{{ release.year }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </If>
+  <Else>
+    <EmptyState icon="search" title="Nothing here" text="No release matches this tab and genre.">
+      <Button variant="secondary" onClick="clearFilters">Clear filters</Button>
+    </EmptyState>
+  </Else>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">Segmented tabs, for a few short choices. Gen Z shows at home and abroad.</Text>
+    <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
+      <Tab value="home" label="Sierra Leone" />
+      <Tab value="abroad" label="Abroad" />
+    </Tabs>
+    <List>
+      <For each="{{ where === 'home' ? home : abroad }}" item="show" key="id">
+        <ListItem icon="ticket" title="{{ show.title }}" subtitle="{{ show.place }} · {{ show.date }}" value="{{ show.city }}" />
+      </For>
+    </List>
+  </View>
+</View>

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

@@ -0,0 +1,68 @@
+import type { TicketType } from './state';
+import state, { SHOWS, TICKETS } from './state';
+
+type Typed = DotEvent<{ value: string }>;
+
+// "2" tickets of a Le 1,200 type -> "Le 2,400"
+function total(tickets: string, ticket: TicketType): string {
+  const leones = (Number(tickets) || 0) * TICKETS[ticket].price;
+  return `Le ${leones.toLocaleString('en-US')}`;
+}
+type Toggled = DotEvent<{ checked: boolean }>;
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    setShow: (_state, event: Typed) => ({
+      show: event.detail.value,
+      showName: SHOWS[event.detail.value] ?? 'Not chosen yet',
+    }),
+    setName: (_state, event: Typed) => ({ name: event.detail.value }),
+    setEmail: (_state, event: Typed) => ({ email: event.detail.value }),
+    setPhone: (_state, event: Typed) => ({ phone: event.detail.value }),
+    setTickets: (state, event: Typed) => ({
+      tickets: event.detail.value,
+      total: total(event.detail.value, state.ticket),
+    }),
+    setShoutOut: (_state, event: Typed) => ({ shoutOut: event.detail.value }),
+    setTicket: (state, event: DotEvent<{ value: TicketType }>) => ({
+      ticket: event.detail.value,
+      ticketName: TICKETS[event.detail.value].name,
+      total: total(state.tickets, event.detail.value),
+    }),
+    setETickets: (_state, event: Toggled) => ({ eTickets: event.detail.checked }),
+    setAgreed: (_state, event: Toggled) => ({ agreed: event.detail.checked }),
+  },
+  actions: {
+    async send(state) {
+      const count = Number(state.tickets);
+      const errors = {
+        show: state.show ? '' : 'Choose a show',
+        phone: state.phone.length < 8 ? 'Enter a phone number, such as 76 123456' : '',
+        tickets: count >= 1 && count <= 10 ? '' : 'Buy from 1 to 10 tickets',
+        shoutOut: state.shoutOut.includes('http')
+          ? 'Links are not read out. Write words only.'
+          : '',
+      };
+      this.setState({ errors, sent: '', failure: '' });
+      if (Object.values(errors).some(Boolean)) {
+        return;
+      }
+      this.setState({ sending: true });
+      try {
+        const { show, name, email, phone, shoutOut, ticket, eTickets } = state;
+        await this.dash.network.http.request({
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+          body: { show, name, email, phone, tickets: count, shoutOut, ticket, eTickets },
+        });
+        this.setState({
+          sent: `${count} ${count === 1 ? 'ticket' : 'tickets'}, sent to +232 ${phone}`,
+        });
+      } catch (error) {
+        this.setState({ failure: (error as Error).message });
+      }
+      this.setState({ sending: false });
+    },
+  },
+});

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

@@ -0,0 +1,34 @@
+export type TicketType = 'regular' | 'vip' | 'table';
+
+// The made-up shows on sale, and the price of each ticket, in leones.
+export const SHOWS: Record<string, string> = {
+  freetown: 'Salone Sounds Live · Freetown',
+  bo: 'Palm-wine evening · Bo',
+  kenema: 'Gospel night · Kenema',
+};
+
+export const TICKETS: Record<TicketType, { name: string; price: number }> = {
+  regular: { name: 'Regular', price: 150 },
+  vip: { name: 'VIP, near the stage', price: 400 },
+  table: { name: 'Table for four', price: 1200 },
+};
+
+export default {
+  show: '',
+  // The order, as the summary shows it.
+  showName: 'Not chosen yet',
+  ticketName: TICKETS.regular.name,
+  total: 'Le 0',
+  name: '',
+  email: '',
+  phone: '',
+  tickets: '',
+  shoutOut: '',
+  ticket: 'regular' as TicketType,
+  eTickets: true,
+  agreed: false,
+  errors: { show: '', phone: '', tickets: '', shoutOut: '' },
+  sending: false,
+  sent: '',
+  failure: '',
+};

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

@@ -0,0 +1,49 @@
+<View>
+  <Text variant="title">Forms</Text>
+  <Text>Buy tickets for a show. The page checks the form when you send it. Some fields turn off based on your choices.</Text>
+
+  <View variant="card">
+    <Select label="Show" placeholder="Choose a show" hint="Every show has the same prices" value="{{ show }}" error="{{ errors.show }}" disabled="{{ sending }}" onChange="setShow">
+      <Option value="freetown" label="Salone Sounds Live · Freetown" />
+      <Option value="bo" label="Palm-wine evening · Bo" />
+      <Option value="kenema" label="Gospel night · Kenema" />
+    </Select>
+    <Input label="Name" placeholder="Mariama Kamara" value="{{ name }}" maxLength="40" onChange="setName" />
+    <Input label="Email" type="email" placeholder="mariama@example.com" hint="{{ eTickets ? 'For the e-tickets' : 'Turn on e-tickets below to use it' }}" value="{{ email }}" disabled="{{ !eTickets }}" onChange="setEmail" />
+    <Input label="Phone" type="phone" prefix="+232" placeholder="76 123456" value="{{ phone }}" error="{{ errors.phone }}" onChange="setPhone" />
+    <Input label="Tickets" type="number" placeholder="2" suffix="at most 10" value="{{ tickets }}" error="{{ errors.tickets }}" onChange="setTickets" />
+    <TextArea label="Shout-out" placeholder="A message for the band, read out on the night" rows="3" maxLength="140" hint="{{ ticket === 'regular' ? 'Shout-outs come with VIP and table tickets' : shoutOut.length + ' of 140' }}" value="{{ shoutOut }}" error="{{ errors.shoutOut }}" disabled="{{ ticket === 'regular' }}" onChange="setShoutOut" />
+  </View>
+
+  <View variant="card">
+    <RadioGroup label="Ticket" value="{{ ticket }}" onChange="setTicket">
+      <Radio value="regular" label="Regular · Le 150" />
+      <Radio value="vip" label="VIP, near the stage · Le 400" />
+      <Radio value="table" label="Table for four · Le 1,200" />
+    </RadioGroup>
+    <Divider />
+    <Switch label="Email me the e-tickets" checked="{{ eTickets }}" onChange="setETickets" />
+    <Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
+  </View>
+
+  <Text variant="caption" tone="muted">Your order</Text>
+  <View variant="card" gap="none">
+    <DetailRow label="Show" value="{{ showName }}" />
+    <DetailRow label="Ticket" value="{{ ticketName }}" />
+    <DetailRow label="How many" value="{{ tickets || '0' }}" />
+    <Divider />
+    <DetailRow label="Total" value="{{ total }}" weight="bold" paddingTop="medium" />
+    <DetailRow label="Paid" value="{{ sent ? 'Yes' : 'Not yet' }}" tone="{{ sent ? 'success' : 'warning' }}" />
+  </View>
+
+  <If condition="{{ sent }}">
+    <Notice tone="success" title="Booked">{{ sent }}</Notice>
+  </If>
+  <If condition="{{ failure }}">
+    <Notice tone="danger" title="Not booked">{{ failure }}</Notice>
+  </If>
+
+  <Footer>
+    <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
+  </Footer>
+</View>

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

@@ -0,0 +1,41 @@
+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) }),
+    logoLoaded: (_state, event: DotEvent<{ width: number; height: number }>) => ({
+      loaded: `${event.detail.width} × ${event.detail.height}`,
+    }),
+    missingFailed: (_state, event: DotEvent<{ message: string }>) => ({
+      failure: event.detail.message,
+    }),
+  },
+});

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

@@ -0,0 +1,10 @@
+export default {
+  size: 64,
+  loaded: '',
+  // 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

@@ -0,0 +1,53 @@
+<View>
+  <Text variant="title">Images</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" />
+    <Image src="statics/logo.png" alt="Medium logo" width="48" height="48" />
+    <Image src="statics/logo.png" alt="Large logo" width="96" height="96" />
+  </View>
+
+  <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" />
+    <Image src="statics/logo.png" alt="Circle" width="56" height="56" shape="circle" />
+    <Image src="statics/logo.png" alt="Contained" width="96" height="56" fit="contain" />
+  </View>
+
+  <Text variant="caption" tone="muted">Sizes can come from state</Text>
+  <View variant="card" gap="small">
+    <Image src="statics/logo.png" alt="Logo" width="{{ size }}" height="{{ size }}" onLoad="logoLoaded" />
+    <Text>{{ size }} × {{ size }} on screen, {{ loaded }} in the file</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="shrink" disabled="{{ size <= 16 }}">Smaller</Button>
+      <Button variant="secondary" onClick="grow" disabled="{{ size >= 128 }}">Bigger</Button>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">A broken image shows why it failed</Text>
+  <View variant="card">
+    <If condition="{{ failure }}">
+      <Text>{{ failure }}</Text>
+    </If>
+    <Else>
+      <Image src="{{ missing }}" alt="" width="48" height="48" onError="missingFailed" />
+    </Else>
+  </View>
+</View>

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

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  actions: {
+    open(_state, event: DotEvent<unknown, { page: PageId }>) {
+      this.navigation.push(event.data.page);
+    },
+  },
+});

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

@@ -0,0 +1,128 @@
+export interface Feature {
+  page: PageId;
+  title: string;
+  summary: string;
+  icon: string;
+}
+
+export interface Section {
+  title: string;
+  features: Feature[];
+}
+
+export default {
+  title: 'Salone Sounds',
+  sections: [
+    {
+      title: 'Views',
+      features: [
+        {
+          page: 'layout',
+          title: 'Layout',
+          summary: 'Rows, columns, cards, a shelf to scroll and a grid',
+          icon: 'grid',
+        },
+        {
+          page: 'text',
+          title: 'Text and bindings',
+          summary: 'Text styles, tones, links and bindings',
+          icon: 'edit',
+        },
+        {
+          page: 'images',
+          title: 'Images',
+          summary: 'Pictures from the dot and from the web',
+          icon: 'image',
+        },
+        {
+          page: 'carousel',
+          title: 'Carousel',
+          summary: 'Slides of Gen Z artists and Salone history',
+          icon: 'image',
+        },
+        {
+          page: 'lists',
+          title: 'Lists and icons',
+          summary: 'Rows to tap, badges and icons',
+          icon: 'list',
+        },
+        {
+          page: 'filters',
+          title: 'Tabs and filters',
+          summary: 'Tabs, chips and empty states',
+          icon: 'search',
+        },
+        {
+          page: 'forms',
+          title: 'Forms',
+          summary: 'Fields, choices and switches for buying tickets',
+          icon: 'check',
+        },
+        {
+          page: 'payments',
+          title: 'Payments',
+          summary: 'Amounts, QR codes and one-time codes',
+          icon: 'cash',
+        },
+        {
+          page: 'feedback',
+          title: 'Feedback',
+          summary: 'Loading, toasts, progress and notices',
+          icon: 'bell',
+        },
+      ],
+    },
+    {
+      title: 'Logic',
+      features: [
+        {
+          page: 'state',
+          title: 'State, mutations and actions',
+          summary: 'State, conditions and lists',
+          icon: 'refresh',
+        },
+        {
+          page: 'navigation',
+          title: 'Navigation and hooks',
+          summary: 'Opening pages, going back, and page hooks',
+          icon: 'arrow-right',
+        },
+      ],
+    },
+    {
+      title: 'Dash',
+      features: [
+        {
+          page: 'device',
+          title: 'Alerts and device',
+          summary: 'Alerts, copy, share, links and the torch',
+          icon: 'mobile',
+        },
+        {
+          page: 'network',
+          title: 'Network',
+          summary: 'Requests, JSON, downloads and uploads',
+          icon: 'wifi',
+        },
+        {
+          page: 'files',
+          title: 'Files',
+          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

@@ -0,0 +1,20 @@
+<View>
+  <View direction="row" align="center" gap="large">
+    <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, shown with Sierra Leone's music</Text>
+    </View>
+  </View>
+
+  <For each="{{ sections }}" item="section" key="title">
+    <View gap="small">
+      <Text variant="caption" tone="muted">{{ section.title }}</Text>
+      <List>
+        <For each="{{ section.features }}" item="feature" key="page">
+          <ListItem icon="{{ feature.icon }}" title="{{ feature.title }}" subtitle="{{ feature.summary }}" data-page="{{ feature.page }}" onTap="open" />
+        </For>
+      </List>
+    </View>
+  </For>
+</View>