@monimesl/dot-cli 0.1.0-alpha.15 → 0.1.0-alpha.18

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

@@ -3,7 +3,8 @@
   <Text>Show that something is loading, how far it has gone, and how it ended.</Text>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Spinners, while something loads</Text>
+    <Text variant="subtitle">Spinner</Text>
+    <Text variant="caption" tone="muted">While something loads, in three sizes.</Text>
     <View variant="card" direction="row" gap="large" align="center">
       <Spinner size="small" />
       <Spinner />
@@ -12,7 +13,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Skeletons show the shape of what is loading</Text>
+    <Text variant="subtitle">Skeleton</Text>
+    <Text variant="caption" tone="muted">Shows the shape of what is loading: lines of text, a circle or a box.</Text>
     <View variant="card">
       <If condition="{{ loaded }}">
         <View direction="row" align="center" gap="large">
@@ -27,7 +29,7 @@
       <Else>
         <View direction="row" align="center" gap="large">
           <Skeleton shape="circle" />
-          <Skeleton lines="2" />
+          <Skeleton shape="text" lines="2" />
         </View>
         <Skeleton shape="box" height="80" />
       </Else>
@@ -36,15 +38,19 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Toasts disappear on their own. The offline one stays for 6 seconds.</Text>
-    <View direction="row" gap="small">
+    <Text variant="subtitle">Toast</Text>
+    <Text variant="caption" tone="muted">A short message over the page that goes on its own. The offline one stays for 6 seconds.</Text>
+    <View direction="row" wrap gap="small">
       <Button variant="secondary" data-message="Added to your library" data-tone="success" onClick="showToast">Add a song</Button>
       <Button variant="secondary" data-message="You're offline. Only downloads will play." data-tone="warning" data-duration="6000" onClick="showToast">Go offline</Button>
+      <Button variant="secondary" data-message="A new song from Boii" data-tone="info" onClick="showToast">New song</Button>
+      <Button variant="secondary" data-message="That song can't play here" data-tone="danger" onClick="showToast">Fail</Button>
     </View>
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A progress bar for an album download, from 0 to 100</Text>
+    <Text variant="subtitle">ProgressBar</Text>
+    <Text variant="caption" tone="muted">How far something has gone, from 0 to 100, such as an album download.</Text>
     <View variant="card">
       <ProgressBar value="{{ progress }}" />
       <Text>{{ progress }}% downloaded</Text>
@@ -56,7 +62,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A busy button ignores taps</Text>
+    <Text variant="subtitle">A busy Button</Text>
+    <Text variant="caption" tone="muted">loading shows a spinner, and the button ignores taps.</Text>
     <View variant="card">
       <Button loading="{{ busy }}">{{ busy ? 'Paying…' : 'Pay Le 300 for two tickets' }}</Button>
       <Switch label="Busy" checked="{{ busy }}" onChange="toggleBusy" />
@@ -64,7 +71,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Notices sit inside the page</Text>
+    <Text variant="subtitle">Notice</Text>
+    <Text variant="caption" tone="muted">A message that stays in the page, in a tone.</Text>
     <Notice title="Heads up">Doors open at 7 pm, and the music starts at 8.</Notice>
     <Notice tone="info" title="New">Tickets for gospel night in Kenema are on sale.</Notice>
     <Notice tone="success" title="Booked">Two tickets for Salone Sounds Live.</Notice>
@@ -73,7 +81,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Badges show a status</Text>
+    <Text variant="subtitle">Badge</Text>
+    <Text variant="caption" tone="muted">A short status.</Text>
     <View direction="row" wrap gap="small">
       <Badge>Demo</Badge>
       <Badge tone="info">New release</Badge>

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

@@ -2,13 +2,13 @@ import type { TicketType } from './state';
 import state, { SHOWS, TICKETS } from './state';
 
 type Typed = DotEvent<{ value: string }>;
+type Toggled = DotEvent<{ checked: boolean }>;
 
 // "2" tickets of a Le 1,200 type -> "Le 2,400"
 function total(tickets: string, ticket: TicketType): string {
   const leones = (Number(tickets) || 0) * TICKETS[ticket].price;
   return `Le ${leones.toLocaleString('en-US')}`;
 }
-type Toggled = DotEvent<{ checked: boolean }>;
 
 export default definePage({
   initialState: state,
@@ -25,6 +25,9 @@ export default definePage({
       total: total(event.detail.value, state.ticket),
     }),
     setShoutOut: (_state, event: Typed) => ({ shoutOut: event.detail.value }),
+    setPromo: (_state, event: Typed) => ({ promo: event.detail.value }),
+    setChairs: (_state, event: DotEvent<{ value: number }>) => ({ chairs: event.detail.value }),
+    setTip: (_state, event: DotEvent<{ value: number }>) => ({ tip: event.detail.value }),
     setTicket: (state, event: DotEvent<{ value: TicketType }>) => ({
       ticket: event.detail.value,
       ticketName: TICKETS[event.detail.value].name,

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

@@ -23,6 +23,9 @@ export default {
   email: '',
   phone: '',
   tickets: '',
+  promo: '',
+  chairs: 2,
+  tip: 20,
   shoutOut: '',
   ticket: 'regular' as TicketType,
   eTickets: true,

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,14 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  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/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/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,17 @@
+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,
+  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: [] }),
+  },
+});