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

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

@@ -0,0 +1,90 @@
+<View>
+  <Text variant="title">Forms</Text>
+  <Text>Buy tickets for a show. Each field sends onChange as you use it, and the page keeps its value in state. The page checks the form when you send it.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Select</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>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Input</Text>
+    <Text variant="caption" tone="muted">type sets the keyboard: text, email, phone, number or password. prefix and suffix sit inside the field. error shows under it.</Text>
+    <View variant="card">
+      <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" />
+      <Input label="Promo code" type="password" placeholder="Hidden as you type" value="{{ promo }}" onChange="setPromo" onSubmit="send" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">RadioGroup and Radio</Text>
+    <Text variant="caption" tone="muted">One choice from a few. A Radio, or the whole group, can be disabled.</Text>
+    <View variant="card">
+      <RadioGroup label="Ticket" value="{{ ticket }}" disabled="{{ sending }}" 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" />
+        <Radio value="backstage" label="Backstage · sold out" disabled />
+      </RadioGroup>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">TextArea</Text>
+    <View variant="card">
+      <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>
+
+  <View gap="small">
+    <Text variant="subtitle">Slider</Text>
+    <Text variant="caption" tone="muted">A number between min and max, in steps. showValue shows it beside the label.</Text>
+    <View variant="card">
+      <Slider label="Chairs near the stage" min="0" max="10" showValue value="{{ chairs }}" disabled="{{ ticket === 'regular' }}" hint="{{ ticket === 'regular' ? 'Chairs come with VIP and table tickets' : '' }}" onChange="setChairs" />
+      <Slider label="Tip for the band, in leones" min="0" max="100" step="10" showValue value="{{ tip }}" onChange="setTip" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Switch and Checkbox</Text>
+    <View variant="card">
+      <Switch label="Email me the e-tickets" checked="{{ eTickets }}" onChange="setETickets" />
+      <Switch label="Text me on the night" disabled />
+      <Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
+      <Checkbox label="I'm over 18" checked disabled />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">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>
+  </View>
+
+  <If condition="{{ sent }}">
+    <Notice tone="success" title="Booked">{{ sent }}</Notice>
+  </If>
+  <If condition="{{ failure }}">
+    <Notice tone="danger" title="Not booked">{{ failure }}</Notice>
+  </If>
+
+  <Text variant="caption" tone="muted">A Footer keeps its buttons at the bottom of the screen.</Text>
+  <Footer>
+    <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
+  </Footer>
+</View>

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

@@ -0,0 +1,15 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Icons' } },
+  mutations: {
+    clearToast: () => ({ toast: '' }),
+  },
+  actions: {
+    async copyName(_state, event: DotEvent<unknown, { name: string }>) {
+      await this.dash.system.copyText(event.data.name);
+      this.setState({ toast: `Copied "${event.data.name}"` });
+    },
+  },
+});

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

@@ -0,0 +1,75 @@
+export default {
+  // Every icon name, as Icon's name, and ListItem's, Chip's, GridItem's and EmptyState's icon take.
+  names: [
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'bank',
+    'bell',
+    'bolt',
+    'calendar',
+    'card',
+    'cart',
+    'cash',
+    'check',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'clock',
+    'close',
+    'copy',
+    'download',
+    'edit',
+    'error',
+    'external-link',
+    'eye',
+    'eye-off',
+    'file',
+    'gift',
+    'globe',
+    'grid',
+    'headphones',
+    'heart',
+    'help',
+    'history',
+    'home',
+    'image',
+    'info',
+    'link',
+    'list',
+    'location',
+    'lock',
+    'logout',
+    'mail',
+    'microphone',
+    'minus',
+    'mobile',
+    'more',
+    'music',
+    'phone',
+    'playlist',
+    'plus',
+    'qr-code',
+    'receipt',
+    'refresh',
+    'search',
+    'send',
+    'settings',
+    'share',
+    'star',
+    'success',
+    'ticket',
+    'trash',
+    'upload',
+    'user',
+    'users',
+    'video',
+    'wallet',
+    'warning',
+    'water',
+    'wifi',
+  ],
+  toast: '',
+};

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

@@ -0,0 +1,36 @@
+<View>
+  <Text variant="title">Icons</Text>
+  <Text>Icon shows a small picture by its name. Lists, chips, grids and empty states take the same names.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">size and tone</Text>
+    <View variant="card" direction="row" wrap gap="large" align="center">
+      <Icon name="music" size="small" />
+      <Icon name="music" size="medium" />
+      <Icon name="music" size="large" />
+      <Icon name="info" tone="info" />
+      <Icon name="success" tone="success" />
+      <Icon name="warning" tone="warning" />
+      <Icon name="error" tone="danger" />
+      <Icon name="star" tone="muted" />
+      <Icon name="heart" tone="default" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Every name</Text>
+    <Text variant="caption" tone="muted">Tap one to copy its name.</Text>
+    <View variant="card">
+      <Grid columns="3" gap="medium">
+        <For each="{{ names }}" item="name" key="*this">
+          <View align="center" gap="small" padding="small" data-name="{{ name }}" onTap="copyName">
+            <Icon name="{{ name }}" />
+            <Text variant="caption" tone="muted" align="center">{{ name }}</Text>
+          </View>
+        </For>
+      </Grid>
+    </View>
+  </View>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

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

@@ -9,6 +9,7 @@ interface Lookup {
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Images' } },
   hooks: {
     async onLoad() {
       try {

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

@@ -0,0 +1,70 @@
+<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>

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

@@ -12,6 +12,7 @@ interface Lookup {
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Layout' } },
   hooks: {
     // The shelf's covers come from Apple's catalog.
     async onLoad() {

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: DotEvent<unknown, { 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,70 @@
+<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">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>