@monimesl/dot-cli 0.1.0-alpha.9 → 1.0.0-beta.1

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/{lists → components/lists}/state.ts

@@ -3,7 +3,6 @@ export interface Artist {
   name: string;
   song: string;
   genre: string;
-  icon: string;
 }
 
 export interface Release {
@@ -15,6 +14,42 @@ export interface Release {
   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: [
     {
@@ -22,32 +57,28 @@ export default {
       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: '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',
-      icon: 'microphone',
     },
     {
       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: 'laj', name: 'LAJ', song: 'Shock, with Cassidy', genre: 'Hip hop' },
     {
       id: 'k-man',
       name: 'K-Man',
       song: 'Leh Wi Make Salone',
       genre: 'Hip hop',
-      icon: 'microphone',
     },
   ] as Artist[],
   releases: [
@@ -93,25 +124,7 @@ export default {
     },
   ] as Release[],
   chosen: '',
-  // The record whose actions the sheet shows.
-  selected: null as Release | null,
-  toast: '',
-  icons: [
-    'music',
-    'playlist',
-    'microphone',
-    'headphones',
-    'ticket',
-    'video',
-    'globe',
-    'link',
-    'external-link',
-    'heart',
-    'star',
-    'share',
-    'download',
-    'calendar',
-    'location',
-    'search',
-  ],
+  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/{payments → components/money}/controller.ts

@@ -1,7 +1,5 @@
 import state from './state';
 
-type Typed = DotEvent<{ value: string }>;
-
 // The code this page accepts; a real dot checks it with its server.
 const RIGHT_CODE = '123456';
 
@@ -10,8 +8,9 @@ const MAX_PLEDGE = 1000;
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Money and codes' } },
   mutations: {
-    setAmount: (_state, event: DotEvent<{ value: number | null }>) => {
+    setAmount: (_state, event: ValueEvent<number | null>) => {
       const amount = event.detail.value;
       if (!amount) {
         return { amount, amountText: '', request: '' };
@@ -22,20 +21,20 @@ export default definePage({
         request: `https://pay.example.com/tip?amount=${amount}&currency=SLE&in=cents`,
       };
     },
-    setCode: (_state, event: Typed) => ({ code: event.detail.value, codeError: '' }),
-    checkCode: (_state, event: Typed) => {
+    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: Typed) => ({ pin: event.detail.value }),
+    setPin: (_state, event: ValueEvent) => ({ pin: event.detail.value }),
     clearPin: () => ({ pin: '' }),
-    setLocked: (_state, event: DotEvent<{ checked: boolean }>) => ({
+    setLocked: (_state, event: CheckedEvent) => ({
       locked: event.detail.checked,
     }),
-    setPledge: (_state, event: DotEvent<{ value: number | null }>) => {
+    setPledge: (_state, event: ValueEvent<number | null>) => {
       const pledge = event.detail.value;
       return {
         pledge,

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

@@ -0,0 +1,54 @@
+<View>
+  <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="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 }}" />
+        <Text tone="muted">Scan to tip the band SLE {{ amountText }}</Text>
+      </If>
+      <Else>
+        <EmptyState icon="qr-code" title="No tip yet" text="Type an amount above to make a QR code the crowd can scan." />
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <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="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>
+    </If>
+    <Else>
+      <CodeInput label="The code we sent to 076 •••• 21" value="{{ code }}" onChange="setCode" onComplete="checkCode" error="{{ codeError }}" hint="Use 123456" />
+    </Else>
+  </View>
+
+  <View gap="small">
+    <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>
+      <View grow />
+      <Button variant="secondary" onClick="clearPin" disabled="{{ pin.length === 0 }}">Clear the PIN</Button>
+    </View>
+  </View>
+</View>

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 }>) => ({
+    openRelease: (state, event: DataEvent<{ 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: ValueEvent<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/components/styles/controller.ts

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