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

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

@@ -1,36 +0,0 @@
-<View>
-  <Text variant="title">Cache</Text>
-  <Text>The cache saves small values by name. A value can expire after a set time, or stay until it is removed.</Text>
-
-  <Text variant="caption" tone="muted">Tap an artist. It is remembered 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="name">
-        <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>
-
-  <Text variant="caption" tone="muted">Your favourite genre. It stays until you clear the cache.</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 variant="card" gap="small">
-    <Text variant="caption" tone="muted">Keys in the cache: {{ keys || 'none' }}</Text>
-    <Button variant="secondary" onClick="clear" disabled="{{ !keys }}">Clear the cache</Button>
-  </View>
-</View>

package/dist/templates/showcase/pages/device/controller.ts

@@ -1,80 +0,0 @@
-import state from './state';
-
-export default definePage({
-  initialState: state,
-  mutations: {
-    clearToast: () => ({ toast: '' }),
-  },
-  actions: {
-    async greet() {
-      try {
-        const { action } = await this.dash.ui.alert({
-          title: 'Kushé',
-          message: env.GREETING,
-          actions: [
-            { id: 'tenki', label: 'Tenki' },
-            { id: 'close', label: 'Close', role: 'cancel' },
-          ],
-        });
-        this.setState({ choice: action });
-      } catch (error) {
-        this.setState({ note: (error as Error).message });
-      }
-    },
-    async confirmDelete() {
-      try {
-        const { action } = await this.dash.ui.alert({
-          title: 'Remove this song from your library?',
-          message: 'Its download goes too.',
-          actions: [
-            { id: 'keep', label: 'Keep', role: 'cancel' },
-            { id: 'remove', label: 'Remove', role: 'destructive' },
-          ],
-        });
-        this.setState({ choice: action });
-      } catch (error) {
-        this.setState({ note: (error as Error).message });
-      }
-    },
-    async vibrate(_state, event: DotEvent<unknown, { style: 'light' | 'success' | 'error' }>) {
-      await this.dash.system.vibrate({ style: event.data.style });
-    },
-    async copySong() {
-      await this.dash.system.copyText('Exodus, by Drizilik');
-      this.setState({ toast: 'Song copied' });
-    },
-    async shareLink() {
-      try {
-        await this.dash.system.share({
-          title: 'Music of Sierra Leone',
-          url: 'https://en.wikipedia.org/wiki/Music_of_Sierra_Leone',
-        });
-      } catch (error) {
-        this.setState({ note: (error as Error).message });
-      }
-    },
-    async openDrizilik() {
-      try {
-        await this.dash.system.openUrl('https://drizilik.com/');
-      } catch (error) {
-        this.setState({ note: (error as Error).message });
-      }
-    },
-    async countDown() {
-      for (let seconds = 10; seconds > 0; seconds--) {
-        this.setState({ showIn: seconds });
-        await this.dash.system.delay(1000);
-      }
-      this.setState({ showIn: 0, toast: "It's showtime" });
-    },
-    async toggleTorch(state) {
-      const next = state.torch === 'on' ? 'off' : 'on';
-      try {
-        await this.dash.system.torch(next);
-        this.setState({ torch: next, note: '' });
-      } catch (error) {
-        this.setState({ note: (error as Error).message });
-      }
-    },
-  },
-});

package/dist/templates/showcase/pages/device/state.ts

@@ -1,7 +0,0 @@
-export default {
-  choice: '',
-  torch: 'off' as 'on' | 'off',
-  note: '',
-  toast: '',
-  showIn: 0,
-};

package/dist/templates/showcase/pages/device/view.dml

@@ -1,49 +0,0 @@
-<View>
-  <Text variant="title">Alerts and device</Text>
-  <Text>Dash shows these, not the dot. The dot asks for them through dash.</Text>
-
-  <Text variant="caption" tone="muted">dash.ui.alert</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="small">
-      <Button onClick="greet">Say kushé</Button>
-      <Button variant="secondary" onClick="confirmDelete">Remove a song</Button>
-    </View>
-    <If condition="{{ choice }}">
-      <Text>You chose "{{ choice }}"</Text>
-    </If>
-    <Text variant="caption" tone="muted">Kushé means hello in Krio, and tenki means thanks. The message comes from GREETING in the .env file.</Text>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.vibrate</Text>
-  <View variant="card" direction="row" wrap gap="small">
-    <Button variant="secondary" data-style="light" onClick="vibrate">Light</Button>
-    <Button variant="secondary" data-style="success" onClick="vibrate">Success</Button>
-    <Button variant="secondary" data-style="error" onClick="vibrate">Error</Button>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.copyText and dash.system.share</Text>
-  <View variant="card" direction="row" wrap gap="small">
-    <Button variant="secondary" onClick="copySong">Copy a song</Button>
-    <Button variant="secondary" onClick="shareLink">Share Sierra Leone's music</Button>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.openUrl opens a web page in the phone's browser</Text>
-  <View variant="card">
-    <Button variant="secondary" onClick="openDrizilik">Open Drizilik's website</Button>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.delay</Text>
-  <View variant="card">
-    <Button variant="secondary" onClick="countDown" disabled="{{ showIn > 0 }}">{{ showIn > 0 ? 'Showtime in ' + showIn + 's' : 'Count down to showtime' }}</Button>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.torch</Text>
-  <View variant="card" gap="small">
-    <Button variant="secondary" onClick="toggleTorch">{{ torch === 'on' ? 'Turn the torch off' : 'Lights up for the slow song' }}</Button>
-    <If condition="{{ note }}">
-      <Text variant="caption" tone="muted">{{ note }}</Text>
-    </If>
-  </View>
-
-  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
-</View>

package/dist/templates/showcase/pages/feedback/state.ts

@@ -1,8 +0,0 @@
-export default {
-  progress: 40,
-  busy: false,
-  loaded: false,
-  toast: '',
-  toastTone: 'default',
-  toastDuration: undefined as number | undefined,
-};

package/dist/templates/showcase/pages/files/view.dml

@@ -1,50 +0,0 @@
-<View>
-  <Text variant="title">Files</Text>
-  <Text>Each dot has its own folder. Other dots can't see it. Files stay after the dot closes.</Text>
-
-  <Text variant="caption" tone="muted">A setlist. Each song is a text file.</Text>
-  <View variant="card" gap="small">
-    <Input label="Song" placeholder="Exodus, by Drizilik" value="{{ draft }}" maxLength="80" onChange="setDraft" onSubmit="save" />
-    <View direction="row" gap="small" wrap>
-      <Button onClick="save" disabled="{{ !draft }}">Add to the setlist</Button>
-      <Button variant="secondary" onClick="archive" disabled="{{ songs.length === 0 }}">Archive it</Button>
-      <Button variant="secondary" onClick="clearSetlist" disabled="{{ songs.length === 0 }}">Clear it</Button>
-    </View>
-    <For each="{{ songs }}" item="song" key="path">
-      <View gap="none">
-        <Text>{{ song.text }}</Text>
-        <Text variant="caption" tone="muted">{{ song.path }}</Text>
-      </View>
-    </For>
-    <If condition="{{ songs.length === 0 }}">
-      <Text variant="caption" tone="muted">No songs yet. Add some, then close and reopen the dot. They are still here.</Text>
-    </If>
-  </View>
-
-  <Text variant="caption" tone="muted">Archived setlists. Each one is a folder you can copy back.</Text>
-  <View variant="card" gap="small">
-    <If condition="{{ archives.length > 0 }}">
-      <List>
-        <For each="{{ archives }}" item="archive" key="path">
-          <ListItem icon="playlist" title="Archived at {{ archive.time }}" subtitle="{{ archive.path }}" value="Copy back" data-path="{{ archive.path }}" onTap="copyBack" />
-        </For>
-      </List>
-    </If>
-    <Else>
-      <Text variant="caption" tone="muted">None yet. Add songs, then archive the setlist.</Text>
-    </Else>
-  </View>
-
-  <Text variant="caption" tone="muted">Artwork saved from the Network page</Text>
-  <View variant="card" gap="small">
-    <If condition="{{ picture }}">
-      <Image src="{{ picture }}" alt="Kept artwork" width="64" height="64" />
-      <Button variant="secondary" onClick="forgetPicture">Forget it</Button>
-    </If>
-    <Else>
-      <Text variant="caption" tone="muted">None yet. On the Network page, search, download the artwork and tap Keep.</Text>
-    </Else>
-  </View>
-
-  <Text variant="caption" tone="muted">{{ usage }}</Text>
-</View>

package/dist/templates/showcase/pages/filters/controller.ts

@@ -1,27 +0,0 @@
-import type { Release } from './state';
-import state from './state';
-
-type Chosen = DotEvent<{ value: string }>;
-
-export default definePage({
-  initialState: state,
-  mutations: {
-    chooseTab: (state, event: Chosen) => {
-      const tab = event.detail.value;
-      return { tab, shown: filter(state.releases, tab, state.genre) };
-    },
-    chooseGenre: (state, event: DotEvent<unknown, { genre: string }>) => {
-      const { genre } = event.data;
-      return { genre, shown: filter(state.releases, state.tab, genre) };
-    },
-    clearFilters: (state) => ({ tab: 'all', genre: 'All', shown: state.releases }),
-    chooseWhere: (_state, event: Chosen) => ({ where: event.detail.value }),
-  },
-});
-
-function filter(releases: readonly Release[], tab: string, genre: string): Release[] {
-  return releases.filter(
-    (release) =>
-      (tab === 'all' || release.kind === tab) && (genre === 'All' || release.genre === genre),
-  );
-}

package/dist/templates/showcase/pages/filters/view.dml

@@ -1,44 +0,0 @@
-<View>
-  <Text variant="title">Tabs and filters</Text>
-  <Text>Tabs change what the page shows. Chips narrow it down. An empty state shows when nothing matches. Try Songs with Palm-wine.</Text>
-
-  <Tabs 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 gap="small">
-    <Text variant="caption" tone="muted">Segmented tabs, for a few short choices. Gen Z shows at home and abroad.</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/forms/view.dml

@@ -1,49 +0,0 @@
-<View>
-  <Text variant="title">Forms</Text>
-  <Text>Buy tickets for a show. The page checks the form when you send it. Some fields turn off based on your choices.</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>
-    <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" />
-    <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 variant="card">
-    <RadioGroup label="Ticket" value="{{ ticket }}" 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" />
-    </RadioGroup>
-    <Divider />
-    <Switch label="Email me the e-tickets" checked="{{ eTickets }}" onChange="setETickets" />
-    <Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
-  </View>
-
-  <Text variant="caption" tone="muted">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>
-
-  <If condition="{{ sent }}">
-    <Notice tone="success" title="Booked">{{ sent }}</Notice>
-  </If>
-  <If condition="{{ failure }}">
-    <Notice tone="danger" title="Not booked">{{ failure }}</Notice>
-  </If>
-
-  <Footer>
-    <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
-  </Footer>
-</View>

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

@@ -1,53 +0,0 @@
-<View>
-  <Text variant="title">Images</Text>
-  <Text>Pictures in the statics/ folder come with the dot, and the build checks each one. Pictures from the web load from their address.</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>
-
-  <Text variant="caption" tone="muted">From the web: 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>
-
-  <Text variant="caption" tone="muted">Shapes, and how a picture fills its space</Text>
-  <View variant="card" direction="row" align="center" gap="large">
-    <Image src="statics/logo.png" alt="Rounded" width="56" height="56" />
-    <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" />
-  </View>
-
-  <Text variant="caption" tone="muted">Sizes can come from state</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>
-
-  <Text variant="caption" tone="muted">A broken image shows why it failed</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>

package/dist/templates/showcase/pages/layout/view.dml

@@ -1,103 +0,0 @@
-<View>
-  <Text variant="title">Layout</Text>
-  <Text>A View puts its items in a column or a row. 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>
-
-  <Text variant="caption" tone="muted">grow fills the space left over: the song grows, the year does not. Tap the song: a View can be tapped.</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>
-
-  <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>
-
-  <Text variant="caption" tone="muted">padding, on every side or on one side</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>
-  <Text variant="caption" tone="muted">Text, List, Notice and Grid take padding too</Text>
-  <Notice title="Heads up" paddingTop="large" paddingBottom="large">This notice has large padding above and below.</Notice>
-
-  <Text variant="caption" tone="muted">A Grid keeps its columns the same width</Text>
-  <View variant="card" gap="medium">
-    <Grid columns="4">
-      <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>

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

@@ -1,59 +0,0 @@
-<View>
-  <Text variant="title">Lists and icons</Text>
-  <Text>A List shows rows in a card. Small lists are compact, and medium lists have more room. A row can show an icon or a picture, a value at its end, and an arrow when you can tap it.</Text>
-
-  <View gap="small">
-    <Text variant="caption" tone="muted">Artists in a small list. Tap one: its data- attributes tell the page which one.</Text>
-    <List>
-      <For each="{{ artists }}" item="artist" key="id">
-        <ListItem icon="{{ artist.icon }}" 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="caption" tone="muted">Famous records in a medium list, each with a badge. Tap one to see its actions.</Text>
-    <List size="md">
-      <For each="{{ releases }}" item="release" key="id">
-        <ListItem title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}" data-id="{{ release.id }}" onTap="openRelease">
-          <Badge tone="{{ release.tone }}">{{ release.note }}</Badge>
-        </ListItem>
-      </For>
-    </List>
-  </View>
-
-  <View gap="small">
-    <Text variant="caption" tone="muted">Icons by name, in any tone, including music icons</Text>
-    <View variant="card" direction="row" wrap gap="large">
-      <For each="{{ icons }}" item="icon" key="*this">
-        <Icon name="{{ icon }}" />
-      </For>
-    </View>
-    <View variant="card" direction="row" wrap gap="large" align="center">
-      <Icon name="info" tone="info" size="small" />
-      <Icon name="success" tone="success" />
-      <Icon name="warning" tone="warning" size="large" />
-      <Icon name="error" tone="danger" size="large" />
-      <Icon name="star" tone="muted" />
-    </View>
-  </View>
-
-  <View gap="small">
-    <Text variant="caption" tone="muted">A divider</Text>
-    <View variant="card">
-      <Text>Side A</Text>
-      <Divider />
-      <Text>Side B</Text>
-    </View>
-  </View>
-
-  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.year }}" showCloseIcon onClose="closeSheet">
-    <Button variant="secondary" onClick="copyTitle">Copy the title</Button>
-    <Button variant="secondary" onClick="shareRelease">Share it</Button>
-    <Button onClick="closeSheet">Cancel</Button>
-  </Sheet>
-  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
-</View>

package/dist/templates/showcase/pages/navigation/controller.ts

@@ -1,65 +0,0 @@
-import type { HookRun } from './state';
-import state from './state';
-
-export default definePage({
-  initialState: state,
-  // What Dash's navigation bar shows until the page changes it.
-  configs: { navigationBar: { title: 'Navigation' } },
-  hooks: {
-    // Options come from the page that opened this one, as strings.
-    onLoad(options) {
-      const depth = Number(options.depth ?? '1') + 1;
-      const from = options.trail ?? 'Home';
-      this.setState({ depth, from, trail: `${from} › ${depth}` });
-      this.setNavigationBar({ title: `Page ${depth}` });
-      this.setState((current) => ({ hooks: ran(current.hooks, 'onLoad') }));
-    },
-    onShow() {
-      this.setState((current) => ({ hooks: ran(current.hooks, 'onShow') }));
-    },
-    onHide() {
-      this.setState((current) => ({ hooks: ran(current.hooks, 'onHide') }));
-    },
-  },
-  actions: {
-    openAnother(state) {
-      this.navigation.push('navigation', { depth: String(state.depth), trail: state.trail });
-    },
-    replaceThis(state) {
-      this.navigation.replace('navigation', { depth: String(state.depth - 1), trail: state.from });
-    },
-    back() {
-      this.navigation.back();
-    },
-    backTwo() {
-      this.navigation.back(2);
-    },
-    home() {
-      this.navigation.reset('index');
-    },
-    toggleColors(state) {
-      const colored = !state.colored;
-      // Undefined puts Dash's own colors back.
-      this.setNavigationBar({
-        // The green of Sierra Leone's flag.
-        backgroundColor: colored ? '#1EB53A' : undefined,
-        textColor: colored ? '#FFFFFF' : undefined,
-      });
-      this.setState({ colored });
-    },
-    toggleNavigationBar(state) {
-      const navigationBarHidden = !state.navigationBarHidden;
-      this.setNavigationBar({ hidden: navigationBarHidden });
-      this.setState({ navigationBarHidden });
-    },
-    toggleTabBar(state) {
-      const tabBarHidden = !state.tabBarHidden;
-      this.setTabBar({ hidden: tabBarHidden });
-      this.setState({ tabBarHidden });
-    },
-  },
-});
-
-function ran(hooks: readonly HookRun[], hook: string): HookRun[] {
-  return [...hooks, { id: hooks.length + 1, hook }];
-}