@monimesl/dot-cli 0.1.0-alpha.8 → 1.0.0-beta.0

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

@@ -0,0 +1,44 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
+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,
+  configs: { navigationBar: { title: 'Images' } },
+  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: errorMessage(error) });
+      }
+    },
+  },
+  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 → components/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/components/images/view.dml

@@ -0,0 +1,83 @@
+<View>
+  <Text variant="title">Images</Text>
+  <Text>Image shows a picture from the dot's statics/ folder or from the web. Give it alt text, which screen readers say aloud.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">From statics/</Text>
+    <Text variant="caption" tone="muted">These pictures come with the dot, and the build checks each one exists.</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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">From the web</Text>
+    <Text variant="caption" tone="muted">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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">shape and fit</Text>
+    <Text variant="caption" tone="muted">Rounded, square or circle. fit="contain" shows the whole picture; cover, the default, fills the box.</Text>
+    <View variant="card" direction="row" align="center" gap="large">
+      <Image src="statics/logo.png" alt="Rounded" width="56" height="56" shape="rounded" />
+      <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" />
+      <Image src="statics/logo.png" alt="Covered" width="96" height="56" fit="cover" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onLoad</Text>
+    <Text variant="caption" tone="muted">Tells the page the picture's own size once it loads. The size on screen comes from state here.</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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onError</Text>
+    <Text variant="caption" tone="muted">Tells the page why a picture didn't load.</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>
+
+  <View gap="small">
+    <Text variant="subtitle">Avatar</Text>
+    <Text variant="caption" tone="muted">A person's photo, round. Without one, or when it fails to load, their initials show.</Text>
+    <View variant="card" direction="row" align="center" gap="large">
+      <Avatar name="Salone Sounds" image="statics/logo.png" size="large" />
+      <Avatar name="Mariama Kamara" size="large" />
+      <Avatar name="Fatmata Conteh" />
+      <Avatar name="Boii" size="small" />
+      <Avatar name="Kao Denero" image="{{ missing }}" />
+    </View>
+    <Text variant="caption" tone="muted">The last one's picture is missing, so it shows KD.</Text>
+  </View>
+</View>

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

@@ -0,0 +1,61 @@
+import type { Align, Direction, Justify, Space } from './state';
+import state from './state';
+
+const DIRECTIONS: Direction[] = ['row', 'column'];
+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,
+  configs: { navigationBar: { title: 'Layout' } },
+  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 }),
+    openSection: (_state, event: DataEvent<{ name: string }>) => ({
+      section: event.data.name,
+    }),
+    showFirst: (_state, event: IndexEvent) => ({ first: event.detail.index }),
+    shelfStart: () => ({ first: 0 }),
+    shelfEnd: (state) => ({ first: state.releases.length - 1 }),
+    playSong: (state) => ({ playing: !state.playing }),
+  },
+});
+
+function after<Value>(values: Value[], current: Value): Value {
+  const next = (values.indexOf(current) + 1) % values.length;
+  return values[next]!;
+}

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

@@ -0,0 +1,34 @@
+export type Direction = 'row' | 'column';
+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 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/components/layout/view.dml

@@ -0,0 +1,143 @@
+<View>
+  <Text variant="title">Layout</Text>
+  <Text>Views hold other components and lay them out. Every page starts with one.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">View</Text>
+    <Text variant="caption" tone="muted">A View puts its items in a column or a row. variant="card" gives it a card's look. Change the one below.</Text>
+    <View variant="card" direction="{{ direction }}" justify="{{ justify }}" align="{{ align }}" gap="{{ gap }}" wrap="{{ wrap }}">
+      <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">
+      <View direction="row" align="center">
+        <Text>direction="{{ direction }}"</Text>
+        <View grow />
+        <Button variant="secondary" onClick="nextDirection">Change</Button>
+      </View>
+      <View direction="row" align="center">
+        <Text>justify="{{ justify }}"</Text>
+        <View grow />
+        <Button variant="secondary" onClick="nextJustify">Change</Button>
+      </View>
+      <View direction="row" align="center">
+        <Text>align="{{ align }}"</Text>
+        <View grow />
+        <Button variant="secondary" onClick="nextAlign">Change</Button>
+      </View>
+      <View direction="row" align="center">
+        <Text>gap="{{ gap }}"</Text>
+        <View grow />
+        <Button variant="secondary" onClick="nextGap">Change</Button>
+      </View>
+      <View direction="row" align="center">
+        <Text>wrap="{{ wrap }}"</Text>
+        <View grow />
+        <Button variant="secondary" onClick="toggleWrap">Change</Button>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">grow and onTap</Text>
+    <Text variant="caption" tone="muted">grow fills the space left over: the song grows, the year does not. A View can be tapped: tap the song.</Text>
+    <View direction="row" gap="small">
+      <View variant="card" grow onTap="playSong">
+        <Text>{{ playing ? 'Playing Exodus, by Drizilik' : 'Exodus, by Drizilik' }}</Text>
+      </View>
+      <View variant="card">
+        <Text>2021</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">padding</Text>
+    <Text variant="caption" tone="muted">The space inside the edges, on every side or on one side. Most components take it.</Text>
+    <View direction="row" gap="small">
+      <View variant="card" padding="small">
+        <Text>small</Text>
+      </View>
+      <View variant="card" padding="large">
+        <Text>large</Text>
+      </View>
+      <View variant="card" padding="small" paddingStart="large">
+        <Text>start</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Stack</Text>
+    <Text variant="caption" tone="muted">A Stack lays its children on top of each other, such as words over a picture.</Text>
+    <Stack radius="large" aspect="16:9">
+      <View background="gold" />
+      <View justify="end" padding="large">
+        <Text variant="subtitle" tone="ink">Bo market day</Text>
+        <Text tone="ink">Every Saturday, from 7 am</Text>
+      </View>
+      <View align="end" padding="medium">
+        <View background="primary" radius="full" paddingStart="small" paddingEnd="small">
+          <Text variant="caption" tone="onPrimary" weight="bold">New</Text>
+        </View>
+      </View>
+    </Stack>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Scroll</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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Grid</Text>
+    <Text variant="caption" tone="muted">A Grid keeps its columns the same width. A GridItem shows an icon or a picture, with a label.</Text>
+    <View variant="card" gap="medium">
+      <Grid columns="4" gap="small">
+        <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="{{ section }}">
+        <Text tone="muted">You tapped {{ section }}</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Divider</Text>
+    <Text variant="caption" tone="muted">A line between parts.</Text>
+    <View variant="card">
+      <Text>Side A</Text>
+      <Divider />
+      <Text>Side B</Text>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,18 @@
+import state, { CHART } from './state';
+
+// Rows to add each time the list's end comes into view.
+const MORE = 5;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Lists' } },
+  mutations: {
+    choose: (state, event: DataEvent<{ id: string }>) => {
+      const artist = state.artists.find((candidate) => candidate.id === event.data.id);
+      return { chosen: artist?.name ?? '' };
+    },
+    showMore: (state) => ({ chart: CHART.slice(0, state.chart.length + MORE) }),
+    saveSome: () => ({ saved: ['Exodus, by Drizilik', 'Control, by ApreeL'] }),
+    clearSaved: () => ({ saved: [] }),
+  },
+});

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

@@ -0,0 +1,130 @@
+export interface Artist {
+  id: string;
+  name: string;
+  song: string;
+  genre: string;
+}
+
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+  note: string;
+  tone: string;
+}
+
+export interface ChartSong {
+  id: number;
+  title: string;
+  plays: string;
+}
+
+const TITLES = [
+  'Lemonade',
+  'Control',
+  'Love Na Scam',
+  'Hannah',
+  'Nack',
+  'Exodus',
+  'Ashobi',
+  'Send Money',
+  'Blunt',
+  "O'way",
+  'Shadow',
+  'Leader',
+  'Kenyatta',
+  'Shock',
+  'Leh Wi Make Salone',
+  'Borbor Bele',
+  'Let Me Love You',
+  'Cry Africa',
+  'Corruption',
+  'Ghetto Struggle',
+];
+
+// This week's chart. The list shows the first few, and more as you scroll.
+export const CHART: ChartSong[] = TITLES.map((title, index) => ({
+  id: index + 1,
+  title,
+  plays: `${(20 - index) * 1000} plays`,
+}));
+
+export default {
+  artists: [
+    {
+      id: 'drizilik',
+      name: 'Drizilik',
+      song: 'Lemonade, with The Therapist',
+      genre: 'Kriofusion',
+    },
+    { id: 'boii', name: 'Boii', song: 'Love Na Scam', genre: 'Afrobeats' },
+    { id: 'apreel', name: 'ApreeL', song: 'Control', genre: 'Afropop' },
+    { id: 'donii-major', name: 'Donii Major', song: 'Hannah', genre: 'R&B' },
+    {
+      id: 'star-zee',
+      name: 'Star Zee',
+      song: 'Leader, with Stonebwoy',
+      genre: 'Hip hop',
+    },
+    {
+      id: 'kao-denero',
+      name: 'Kao Denero',
+      song: 'Kenyatta',
+      genre: 'Hip hop',
+    },
+    { id: 'laj', name: 'LAJ', song: 'Shock, with Cassidy', genre: 'Hip hop' },
+    {
+      id: 'k-man',
+      name: 'K-Man',
+      song: 'Leh Wi Make Salone',
+      genre: 'Hip hop',
+    },
+  ] 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',
+    },
+    {
+      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',
+    },
+    {
+      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 Release[],
+  chosen: '',
+  chart: CHART.slice(0, 8),
+  chartSize: CHART.length,
+  saved: [] as string[],
+};

package/dist/templates/showcase/pages/components/lists/view.dml

@@ -0,0 +1,88 @@
+<View>
+  <Text variant="title">Lists</Text>
+  <Text>A List shows rows in a card. A ListItem can show an icon or a picture, a subtitle, and a value or a badge at its end. A row you can tap shows an arrow.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">List and ListItem</Text>
+    <Text variant="caption" tone="muted">Artists in a small list. Tap one: its data-id tells the page which one.</Text>
+    <List>
+      <For each="{{ artists }}" item="artist" key="id">
+        <ListItem icon="microphone" title="{{ artist.name }}" subtitle="{{ artist.song }}" value="{{ artist.genre }}" data-id="{{ artist.id }}" onTap="choose" />
+      </For>
+    </List>
+    <If condition="{{ chosen }}">
+      <Text>You chose {{ chosen }}</Text>
+    </If>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">size="md", with a picture and a badge</Text>
+    <Text variant="caption" tone="muted">Medium lists have more room. A ListItem's children show at its end, in place of value.</Text>
+    <List size="md">
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem image="statics/logo.png" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}">
+          <Badge tone="{{ release.tone }}">{{ release.note }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onEndReached</Text>
+    <Text variant="caption" tone="muted">Comes when the last row scrolls into view, so the page can add more. {{ chart.length }} of {{ chartSize }} songs so far.</Text>
+    <List onEndReached="showMore">
+      <For each="{{ chart }}" item="song" key="id">
+        <ListItem title="{{ song.id }}. {{ song.title }}" value="{{ song.plays }}" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">DetailRow</Text>
+    <Text variant="caption" tone="muted">A label with its value, such as on a receipt. tone and weight change the value.</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="Show" value="Salone Sounds Live" />
+      <DetailRow label="Seats" value="2, near the stage" tone="muted" />
+      <DetailRow label="Doors open" value="18:00" tone="info" />
+      <DetailRow label="Status" value="Paid" tone="success" />
+      <DetailRow label="Refunds" value="Not after Friday" tone="warning" />
+      <DetailRow label="Total" value="SLE 800" weight="bold" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Disclosure</Text>
+    <Text variant="caption" tone="muted">A row that opens to show more, such as an answer. The person opens and closes it, and open sets how it starts.</Text>
+    <View variant="card" gap="none">
+      <Disclosure title="Can I get a refund?" subtitle="Tickets and refunds" open>
+        <Text>Yes, until the Friday before the show. After that, you can give your ticket to someone else.</Text>
+      </Disclosure>
+      <Divider />
+      <Disclosure title="When do doors open?">
+        <Text>At 6 pm. The music starts at 7.</Text>
+      </Disclosure>
+      <Divider />
+      <Disclosure title="Is there parking?">
+        <Text>Yes, at the Lumley junction car park, a short walk away.</Text>
+      </Disclosure>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">EmptyState</Text>
+    <Text variant="caption" tone="muted">Shows when a list has nothing in it, with a way forward.</Text>
+    <View variant="card">
+      <If condition="{{ saved.length > 0 }}">
+        <For each="{{ saved }}" item="title" key="*this">
+          <Text>{{ title }}</Text>
+        </For>
+        <Button variant="secondary" onClick="clearSaved">Clear</Button>
+      </If>
+      <Else>
+        <EmptyState icon="heart" title="No saved songs" text="Save a song to find it here later.">
+          <Button variant="secondary" onClick="saveSome">Save two songs</Button>
+        </EmptyState>
+      </Else>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/components/money/controller.ts

@@ -0,0 +1,45 @@
+import state from './state';
+
+// The code this page accepts; a real dot checks it with its server.
+const RIGHT_CODE = '123456';
+
+// In dollars, as the pledge field sends them.
+const MAX_PLEDGE = 1000;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Money and codes' } },
+  mutations: {
+    setAmount: (_state, event: ValueEvent<number | null>) => {
+      const amount = event.detail.value;
+      if (!amount) {
+        return { amount, amountText: '', request: '' };
+      }
+      return {
+        amount,
+        amountText: (amount / 100).toLocaleString('en-US', { minimumFractionDigits: 2 }),
+        request: `https://pay.example.com/tip?amount=${amount}&currency=SLE&in=cents`,
+      };
+    },
+    setCode: (_state, event: ValueEvent) => ({ code: event.detail.value, codeError: '' }),
+    checkCode: (_state, event: ValueEvent) => {
+      if (event.detail.value === RIGHT_CODE) {
+        return { verified: true };
+      }
+      return { code: '', codeError: 'That code is wrong. Try again.' };
+    },
+    startAgain: () => ({ verified: false, code: '' }),
+    setPin: (_state, event: ValueEvent) => ({ pin: event.detail.value }),
+    clearPin: () => ({ pin: '' }),
+    setLocked: (_state, event: CheckedEvent) => ({
+      locked: event.detail.checked,
+    }),
+    setPledge: (_state, event: ValueEvent<number | null>) => {
+      const pledge = event.detail.value;
+      return {
+        pledge,
+        pledgeError: pledge !== null && pledge > MAX_PLEDGE ? 'Pledge up to USD 1,000' : '',
+      };
+    },
+  },
+});

package/dist/templates/showcase/pages/{payments → components/money}/state.ts

@@ -7,4 +7,7 @@ export default {
   codeError: '',
   verified: false,
   pin: '',
+  locked: false,
+  pledge: null as number | null,
+  pledgeError: '',
 };