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

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

@@ -10,6 +10,7 @@ const MAX_PLEDGE = 1000;
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Money and codes' } },
   mutations: {
     setAmount: (_state, event: DotEvent<{ value: number | null }>) => {
       const amount = event.detail.value;

package/dist/templates/showcase/pages/{payments → components/money}/view.dml

@@ -1,11 +1,17 @@
 <View>
-  <Text variant="title">Payments</Text>
-  <Text>Fields for money and codes. Tip the band with a QR code. Confirm tickets with a code.</Text>
+  <Text variant="title">Money and codes</Text>
+  <Text>Fields for amounts and codes, and QR codes to scan. Tip the band, pledge to its tour, and confirm your tickets.</Text>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">An amount. It is formatted as you type and sent as a number.</Text>
-    <AmountInput label="Tip for the band" value="{{ amount }}" disabled="{{ locked }}" onChange="setAmount" hint="The QR code below asks for it" />
+    <Text variant="subtitle">AmountInput</Text>
+    <Text variant="caption" tone="muted">Formats the amount as you type. It sends a number in cents, the minor unit, so 150 is SLE 1.50.</Text>
+    <AmountInput label="Tip for the band" placeholder="0.00" value="{{ amount }}" disabled="{{ locked }}" onChange="setAmount" hint="The QR code below asks for it" />
     <Switch label="Lock the tip" checked="{{ locked }}" onChange="setLocked" />
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">QRCode</Text>
+    <Text variant="caption" tone="muted">Shows text, such as a payment link, as a QR code. It's dark on light in every theme, so any camera can read it.</Text>
     <View variant="card" align="center" gap="medium">
       <If condition="{{ request }}">
         <QRCode value="{{ request }}" size="180" label="A QR code to tip SLE {{ amountText }}" />
@@ -18,12 +24,14 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Another currency: US dollars. This one sends dollars, not cents</Text>
-    <AmountInput label="Pledge for the band's Mano River tour" currency="USD" unit="major" value="{{ pledge }}" error="{{ pledgeError }}" hint="Up to USD 1,000" onChange="setPledge" />
+    <Text variant="subtitle">currency, unit and minorUnits</Text>
+    <Text variant="caption" tone="muted">In US dollars. unit="major" sends dollars, not cents, and minorUnits="0" leaves the cents off.</Text>
+    <AmountInput label="Pledge for the band's Mano River tour" currency="USD" unit="major" minorUnits="0" value="{{ pledge }}" error="{{ pledgeError }}" hint="Up to USD 1,000" onChange="setPledge" />
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A one-time code. Type it, paste it, or let the phone fill it from an SMS.</Text>
+    <Text variant="subtitle">CodeInput</Text>
+    <Text variant="caption" tone="muted">A one-time code, one box per digit. Type it, paste it, or let the phone fill it from an SMS. onComplete comes when the last box fills.</Text>
     <If condition="{{ verified }}">
       <Notice tone="success" title="Code accepted">Your two tickets are confirmed.</Notice>
       <Button variant="secondary" onClick="startAgain">Start again</Button>
@@ -34,7 +42,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A PIN. It is hidden as you type and locks when complete.</Text>
+    <Text variant="subtitle">A PIN</Text>
+    <Text variant="caption" tone="muted">length="4" and secure, which hides the digits. Here it locks once complete.</Text>
     <CodeInput label="PIN" length="4" secure value="{{ pin }}" disabled="{{ pin.length === 4 }}" onChange="setPin" />
     <View direction="row" align="center" gap="small">
       <Text tone="muted">{{ pin.length }} of 4 digits</Text>

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

@@ -0,0 +1,6 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Reading' } },
+});

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

@@ -0,0 +1,23 @@
+// As a news app would get an article's body from its server. The lines are joined here so the
+// production build stays on one line.
+const body = [
+  "## What's on sale",
+  '',
+  'Stalls opened before dawn, and by eight the **rice** sellers had a queue. Prices are set each morning and shown at the gate:',
+  '',
+  '- Rice, a cup: SLE 5',
+  '- Palm oil, a pint: SLE 12',
+  '- Pepper, a heap: SLE 3',
+  '',
+  "> The roof keeps the rain off. That's half the battle in July.",
+  '',
+  "Read the [council's notice](https://example.com/lumley-market) for opening hours, or see _Getting there_ below.",
+  '',
+  '### Getting there',
+  '',
+  'Poda-podas from Lumley junction stop at the gate. The car park opens next month.',
+].join('\n');
+
+export default {
+  body,
+};

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

@@ -0,0 +1,42 @@
+<View>
+  <Text variant="title">Reading</Text>
+  <Text>Prose lays out long text, such as a news story, so it reads well. Quote sets someone's words apart. BulletList lists points. RichText draws Markdown from a server.</Text>
+  <Divider />
+
+  <Prose>
+    <Text variant="caption" tone="muted" weight="medium">FREETOWN · 11 OCTOBER</Text>
+    <Text variant="title">Lumley's new market opens to traders and a long queue</Text>
+    <Text variant="lead">More than two hundred traders moved into the covered market on Saturday, the first in the west of the city.</Text>
+    <Text variant="caption" tone="muted">By Mariama Kamara</Text>
+    <Text>The market took two years to build, on the old lorry park by the junction. Each trader has:</Text>
+    <BulletList>
+      <Bullet>
+        <Text>a stall with a lock</Text>
+      </Bullet>
+      <Bullet>
+        <Text>water at both ends of the hall</Text>
+      </Bullet>
+      <Bullet>
+        <Text>a place in the car park, from next month</Text>
+      </Bullet>
+    </BulletList>
+    <Quote cite="Fatmata Conteh, who sells cloth">
+      <Text>For twelve years I sold under an umbrella. Now I have a door that closes.</Text>
+    </Quote>
+    <Text>The council says it will open a second market in Kissy next year. <Text weight="bold">Stalls there are free</Text> for the first six months. To get one:</Text>
+    <BulletList ordered>
+      <Bullet>
+        <Text>Register at the council office in Lumley.</Text>
+      </Bullet>
+      <Bullet>
+        <Text>Bring a photo and your trader's card.</Text>
+      </Bullet>
+      <Bullet>
+        <Text>Wait for an SMS with your stall number.</Text>
+      </Bullet>
+    </BulletList>
+    <Divider />
+    <Text variant="caption" tone="muted">The rest of the story comes as Markdown from the newsroom's server, drawn by RichText.</Text>
+  </Prose>
+  <RichText markdown="{{ body }}" />
+</View>

package/dist/templates/showcase/pages/{lists → components/sheets}/controller.ts

@@ -2,15 +2,17 @@ import state from './state';
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Sheets' } },
   mutations: {
-    choose: (state, event: DotEvent<unknown, { id: string }>) => {
-      const artist = state.artists.find((candidate) => candidate.id === event.data.id);
-      return { chosen: artist?.name ?? '' };
-    },
     openRelease: (state, event: DotEvent<unknown, { id: string }>) => ({
       selected: state.releases.find((release) => release.id === event.data.id) ?? null,
     }),
-    closeSheet: () => ({ selected: null }),
+    // A sheet doesn't close itself: the page sets `open` back to false.
+    closeRelease: () => ({ selected: null }),
+    openRating: () => ({ rating: true }),
+    closeRating: () => ({ rating: false }),
+    setStars: (_state, event: DotEvent<{ value: number }>) => ({ stars: event.detail.value }),
+    saveRating: (state) => ({ rating: false, saved: state.stars, toast: 'Thanks for rating' }),
     clearToast: () => ({ toast: '' }),
   },
   actions: {
@@ -26,12 +28,9 @@ export default definePage({
       if (!state.selected) {
         return;
       }
-      const { title, artist, year, note } = state.selected;
+      const { title, artist, year } = state.selected;
       this.setState({ selected: null });
-      await this.dash.system.share({
-        title,
-        text: `${title}, by ${artist} (${year}): ${note.toLowerCase()}.`,
-      });
+      await this.dash.system.share({ title, text: `${title}, by ${artist} (${year})` });
     },
   },
 });

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

@@ -0,0 +1,26 @@
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+}
+
+export default {
+  releases: [
+    {
+      id: 'rise-and-shine',
+      title: 'Rise & Shine',
+      artist: "Sierra Leone's Refugee All Stars",
+      year: 2010,
+    },
+    { id: 'kormot-bi-en-me', title: 'Kormot Bi En Me', artist: 'Steady Bongo', year: 1996 },
+    { id: 'borbor-bele', title: 'Borbor Bele', artist: 'Emmerson', year: 2004 },
+  ] as Release[],
+  // The record whose actions the sheet shows.
+  selected: null as Release | null,
+  // The rating sheet, and the rating it last saved.
+  rating: false,
+  stars: 3,
+  saved: 0,
+  toast: '',
+};

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

@@ -0,0 +1,38 @@
+<View>
+  <Text variant="title">Sheets</Text>
+  <Text>A Sheet slides up over the page while open is true. Tapping outside it, or its close icon, raises onClose. The page closes it by setting open back to false.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">An action sheet</Text>
+    <Text variant="caption" tone="muted">Tap a record to see what you can do with it.</Text>
+    <List>
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem icon="music" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}" data-id="{{ release.id }}" onTap="openRelease" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">A sheet with a form</Text>
+    <Text variant="caption" tone="muted">Any component can go in a sheet. This one has no close icon, and more room inside.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <View grow>
+        <Text>{{ saved ? 'You gave ' + saved + ' stars' : 'Not rated yet' }}</Text>
+      </View>
+      <Button variant="secondary" onClick="openRating">Rate the show</Button>
+    </View>
+  </View>
+
+  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.year }}" showCloseIcon onClose="closeRelease">
+    <Button variant="secondary" onClick="copyTitle">Copy the title</Button>
+    <Button variant="secondary" onClick="shareRelease">Share it</Button>
+    <Button onClick="closeRelease">Cancel</Button>
+  </Sheet>
+
+  <Sheet open="{{ rating }}" title="Rate Salone Sounds Live" padding="large" onClose="closeRating">
+    <Slider label="Stars" min="1" max="5" showValue value="{{ stars }}" onChange="setStars" />
+    <Button onClick="saveRating">Save</Button>
+  </Sheet>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

package/dist/templates/showcase/pages/{styles → components/styles}/controller.ts

@@ -2,4 +2,5 @@ import state from './state';
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Styles' } },
 });

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

@@ -0,0 +1,101 @@
+<View>
+  <Text variant="title">Styles</Text>
+  <Text>A View's colours, outlines, corners and sizes come from the theme, so a dot looks right in light and dark.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">background</Text>
+    <Text variant="caption" tone="muted">With primary, write text with tone="onPrimary" so it reads.</Text>
+    <View background="primary" radius="large" padding="large" gap="small">
+      <Text variant="caption" tone="onPrimary">Your balance</Text>
+      <Text variant="display" tone="onPrimary" numeric>{{ balance }}</Text>
+    </View>
+    <Text variant="caption" tone="muted">The page's own colours</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="background" border="subtle" radius="medium" padding="small">
+        <Text>background</Text>
+      </View>
+      <View background="surface" border="subtle" radius="medium" padding="small">
+        <Text>surface</Text>
+      </View>
+      <View background="muted" radius="medium" padding="small">
+        <Text>muted</Text>
+      </View>
+    </View>
+    <Text variant="caption" tone="muted">A tone is a soft tint</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="info" radius="medium" padding="small">
+        <Text tone="info" weight="medium">New</Text>
+      </View>
+      <View background="success" radius="medium" padding="small">
+        <Text tone="success" weight="medium">Paid</Text>
+      </View>
+      <View background="warning" radius="medium" padding="small">
+        <Text tone="warning" weight="medium">Due Friday</Text>
+      </View>
+      <View background="danger" radius="medium" padding="small">
+        <Text tone="danger" weight="medium">Failed</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Theme colours</Text>
+    <Text variant="caption" tone="muted">The dot's own colours, named in dot.ts: gold and ink. Use the names as a background or a text tone.</Text>
+    <View direction="row" gap="small" align="center">
+      <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
+        <Text weight="medium" tone="ink">Gold member</Text>
+      </View>
+      <Text tone="gold" weight="bold">Since 2024</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">border and radius</Text>
+    <Text variant="caption" tone="muted">border is none, subtle or strong. radius rounds the corners, and full makes a circle or a pill.</Text>
+    <View direction="row" gap="medium" align="end" wrap>
+      <View width="56" height="56" background="muted" radius="none" />
+      <View width="56" height="56" background="muted" radius="small" />
+      <View width="56" height="56" background="muted" radius="medium" />
+      <View width="56" height="56" background="muted" radius="large" />
+      <View width="56" height="56" background="muted" radius="full" />
+      <View width="56" height="56" border="subtle" radius="medium" />
+      <View width="56" height="56" border="strong" radius="medium" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">width and height</Text>
+    <Text variant="caption" tone="muted">In points, or fill for all the room there is.</Text>
+    <View background="muted" radius="medium" width="120" height="40" justify="center" align="center">
+      <Text>120 points</Text>
+    </View>
+    <View background="muted" radius="medium" width="fill" height="40" justify="center" align="center">
+      <Text>fill</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">minHeight, maxWidth and aspect</Text>
+    <Text variant="caption" tone="muted">minHeight keeps a box tall when it holds little. maxWidth stops it growing too wide. aspect sets its height from its width.</Text>
+    <View variant="card" minHeight="96" justify="center">
+      <Text>At least 96 points tall</Text>
+    </View>
+    <View variant="card" maxWidth="200">
+      <Text>No wider than 200 points, however wide the phone is</Text>
+    </View>
+    <View background="muted" radius="large" aspect="16:9" justify="center" align="center">
+      <Text>16:9</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Together</Text>
+    <Text variant="caption" tone="muted">A price with even digits, and the old one crossed out.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <Text variant="subtitle">Freetown Jazz Night</Text>
+      <View grow />
+      <Text tone="muted" decoration="strikethrough" numeric>SLE 150</Text>
+      <Text weight="bold" numeric>SLE 120</Text>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/{filters → components/tabs}/controller.ts

@@ -5,6 +5,7 @@ type Chosen = DotEvent<{ value: string }>;
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Tabs and chips' } },
   mutations: {
     chooseTab: (state, event: Chosen) => {
       const tab = event.detail.value;
@@ -16,6 +17,7 @@ export default definePage({
     },
     clearFilters: (state) => ({ tab: 'all', genre: 'All', shown: state.releases }),
     chooseWhere: (_state, event: Chosen) => ({ where: event.detail.value }),
+    toggleLiked: (state) => ({ liked: !state.liked }),
   },
 });
 

package/dist/templates/showcase/pages/{filters → components/tabs}/state.ts

@@ -67,6 +67,7 @@ export default {
   songs: releases.filter((item) => item.kind === 'song').length,
   genres: ['All', 'Kriofusion', 'Afropop', 'Hip hop', 'R&B', 'Palm-wine', 'Gospel', 'Bubu'],
   genre: 'All',
+  liked: false,
   // Shows at home in Sierra Leone, and abroad in the Mano River region.
   where: 'home',
   home: [

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

@@ -0,0 +1,56 @@
+<View>
+  <Text variant="title">Tabs and chips</Text>
+  <Text>Tabs change what the page shows. Chips narrow it down. Try Songs with Palm-wine: nothing matches.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Tabs and Chip</Text>
+    <Text variant="caption" tone="muted">The underline tabs, with a badge for each count. A chip is selected when the page says so.</Text>
+    <Tabs variant="underline" 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>
+
+  <View gap="small">
+    <Text variant="subtitle">Chip with an icon</Text>
+    <Text variant="caption" tone="muted">A disabled chip can't be tapped, such as a filter with nothing behind it.</Text>
+    <View direction="row" gap="small" wrap>
+      <Chip icon="heart" label="Liked" selected="{{ liked }}" onTap="toggleLiked" />
+      <Chip icon="download" label="Downloaded" disabled />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">variant="segmented"</Text>
+    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region.</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/components/text/controller.ts

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Text and links' } },
+  mutations: {
+    like: (state) => ({ likes: state.likes + 1 }),
+    unlike: (state) => ({ likes: Math.max(0, state.likes - 1) }),
+  },
+});

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

@@ -0,0 +1,3 @@
+export default {
+  likes: 12,
+};

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

@@ -0,0 +1,95 @@
+<View>
+  <Text variant="title">Text and links</Text>
+  <Text>Text shows words. Its variant sets the size, and the theme sets the font and colours.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">variant</Text>
+    <View variant="card" gap="small">
+      <Text variant="display" numeric>SLE 1,250</Text>
+      <Text variant="title">Palm-wine, a title</Text>
+      <Text variant="subtitle">S. E. Rogie, a subtitle</Text>
+      <Text variant="lead">A lead opens an article. It's a little bigger than body text.</Text>
+      <Text variant="body">Guitar music for a calm evening. This is body text, the default.</Text>
+      <Text variant="caption">Recorded in Freetown, in a caption</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">tone</Text>
+    <View variant="card" direction="row" wrap gap="medium">
+      <Text tone="default">default</Text>
+      <Text tone="muted">muted</Text>
+      <Text tone="info">info</Text>
+      <Text tone="success">success</Text>
+      <Text tone="warning">warning</Text>
+      <Text tone="danger">danger</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">weight, italic and decoration</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="medium">
+        <Text weight="regular">regular</Text>
+        <Text weight="medium">medium</Text>
+        <Text weight="bold">bold</Text>
+        <Text italic>italic</Text>
+      </View>
+      <View direction="row" wrap gap="medium">
+        <Text decoration="underline">underline</Text>
+        <Text decoration="strikethrough">strikethrough</Text>
+        <Text decoration="none">none</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">align and numeric</Text>
+    <Text variant="caption" tone="muted">numeric gives every digit the same width, so amounts line up.</Text>
+    <View variant="card" gap="small">
+      <Text align="start">At the start</Text>
+      <Text align="center">In the center</Text>
+      <Text align="end">At the end</Text>
+      <Text align="end" numeric>SLE 1,111.11</Text>
+      <Text align="end" numeric>SLE 8,888.88</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">maxLines</Text>
+    <Text variant="caption" tone="muted">Cuts the text off after this many lines.</Text>
+    <View variant="card">
+      <Text maxLines="2">Sierra Leone's Refugee All Stars came together in refugee camps in Guinea, recorded their first album, Living Like a Refugee, back in Freetown, and carried Salone music to stages around the world. Two lines are allowed here, so the rest is cut off.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">leading and selectable</Text>
+    <Text variant="caption" tone="muted">leading moves the lines closer or further apart. selectable lets the person copy the text: hold your finger on the last one.</Text>
+    <View variant="card" gap="medium">
+      <Text leading="tight">Tight lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+      <Text leading="normal">Normal lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+      <Text leading="relaxed" selectable>Relaxed lines, and you can select them. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Text inside text</Text>
+    <View variant="card">
+      <Text>Text can hold <Text weight="bold">bold</Text> and <Text tone="danger">red</Text> words.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Link</Text>
+    <Text variant="caption" tone="muted">With href, a link opens a web page in the phone's browser. With onTap, it runs a handler.</Text>
+    <View variant="card" gap="small">
+      <Text>Read about <Link href="https://en.wikipedia.org/wiki/Music_of_Sierra_Leone">the music of Sierra Leone</Link>.</Text>
+      <View direction="row" gap="medium">
+        <Link onTap="like">Like the song</Link>
+        <Link tone="danger" onTap="unlike">Take it back</Link>
+      </View>
+      <Text tone="muted">{{ likes }} {{ likes === 1 ? 'like' : 'likes' }}</Text>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/{cache → dash/cache}/controller.ts

@@ -6,6 +6,7 @@ const RECENT_SECONDS = 30;
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'dash.storage.cache' } },
   hooks: {
     async onShow() {
       await this.actions.refresh();
@@ -37,6 +38,10 @@ export default definePage({
       await this.dash.storage.cache.set(GENRE, event.detail.value);
       await this.actions.refresh();
     },
+    async forgetGenre() {
+      await this.dash.storage.cache.remove(GENRE);
+      await this.actions.refresh();
+    },
     async clear() {
       await this.dash.storage.cache.clear();
       await this.actions.refresh();

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

@@ -0,0 +1,48 @@
+<View>
+  <Text variant="title">dash.storage.cache</Text>
+  <Text>The cache keeps small values by name, such as text, numbers or JSON. A value can expire after a while, or stay until it's removed.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">set with a ttl, keys and get</Text>
+    <Text variant="caption" tone="muted">Tap an artist. ttl: 30 keeps it 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="*this">
+          <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>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">set without a ttl, and exists</Text>
+    <Text variant="caption" tone="muted">Your favourite genre stays until it's removed, even after the dot closes.</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>
+
+  <View gap="small">
+    <Text variant="subtitle">remove and clear</Text>
+    <View variant="card" gap="small">
+      <Text>Keys in the cache: {{ keys || 'none' }}</Text>
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" onClick="forgetGenre" disabled="{{ !genre }}">Forget the genre</Button>
+        <Button variant="secondary" onClick="clear" disabled="{{ !keys }}">Clear the cache</Button>
+      </View>
+    </View>
+  </View>
+</View>