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

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/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. Shows at home and in the Mano River region.</Text>
-    <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
-      <Tab value="home" label="Sierra Leone" />
-      <Tab value="abroad" label="Abroad" />
-    </Tabs>
-    <List>
-      <For each="{{ where === 'home' ? home : abroad }}" item="show" key="id">
-        <ListItem icon="ticket" title="{{ show.title }}" subtitle="{{ show.place }} · {{ show.date }}" value="{{ show.city }}" />
-      </For>
-    </List>
-  </View>
-</View>

package/dist/templates/showcase/pages/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 }];
-}

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

@@ -1,17 +0,0 @@
-export interface HookRun {
-  id: number;
-  hook: string;
-}
-
-export default {
-  depth: 1,
-  maxDepth: 8,
-  // The trail of the page that opened this one.
-  from: '',
-  trail: '',
-  hooks: [] as HookRun[],
-  // What this page set in Dash's bars.
-  colored: false,
-  navigationBarHidden: false,
-  tabBarHidden: false,
-};

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

@@ -1,34 +0,0 @@
-<View>
-  <Text variant="caption" tone="muted">{{ trail }}</Text>
-  <Text variant="title">Navigation and hooks</Text>
-  <Text>Each new page opens on top. Back returns to the page below. A dot can have {{ maxDepth }} pages open at once.</Text>
-
-  <View variant="card" gap="small">
-    <Text>This is page {{ depth }} of {{ maxDepth }}</Text>
-    <View direction="row" wrap gap="small">
-      <Button onClick="openAnother" disabled="{{ depth >= maxDepth }}">Open another</Button>
-      <Button variant="secondary" onClick="replaceThis">Replace this one</Button>
-      <Button variant="secondary" onClick="back">Back</Button>
-      <Button variant="secondary" onClick="backTwo" disabled="{{ depth < 3 }}">Back two</Button>
-      <Button variant="secondary" onClick="home">Start over</Button>
-    </View>
-  </View>
-
-  <Text variant="caption" tone="muted">Each page sets Dash's bars. This page's title is its number.</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="toggleColors">{{ colored ? 'Plain bar' : 'Green bar' }}</Button>
-      <Button variant="secondary" onClick="toggleNavigationBar">{{ navigationBarHidden ? 'Show the navigation bar' : 'Hide the navigation bar' }}</Button>
-      <Button variant="secondary" onClick="toggleTabBar">{{ tabBarHidden ? 'Show the tab bar' : 'Hide the tab bar' }}</Button>
-    </View>
-    <Text variant="caption" tone="muted">Going back shows that page's bars again. Leaving the dot brings back Dash's bars.</Text>
-  </View>
-
-  <Text variant="caption" tone="muted">The hooks this page ran, in order</Text>
-  <View variant="card" gap="small">
-    <For each="{{ hooks }}" item="run" key="id">
-      <Text>{{ run.id }}. {{ run.hook }}</Text>
-    </For>
-    <Text variant="caption" tone="muted">Open another page and come back. This page runs onHide, then onShow.</Text>
-  </View>
-</View>

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

@@ -1,67 +0,0 @@
-<View>
-  <Text variant="title">Network</Text>
-  <Text>Dash sends the dot's requests, only to hosts listed in dot.json. This page searches Apple's music catalog.</Text>
-
-  <View variant="card" gap="small">
-    <Input label="Artist" placeholder="Drizilik" value="{{ artist }}" maxLength="40" onChange="setArtist" onSubmit="search" />
-    <View direction="row" wrap gap="small">
-      <Button onClick="search" loading="{{ searching }}" disabled="{{ !artist }}">Search</Button>
-      <Button variant="secondary" onClick="searchAsText" disabled="{{ !artist }}">Read as text</Button>
-    </View>
-    <If condition="{{ raw }}">
-      <Text variant="caption" tone="muted">The answer as text starts with: {{ raw }}</Text>
-    </If>
-  </View>
-
-  <Text variant="caption" tone="muted">The same answer read as JSON, with artwork. Near the end, the list loads 10 more, up to 50. {{ releases.length }} so far.</Text>
-  <If condition="{{ releases.length > 0 }}">
-    <List onEndReached="loadMore">
-      <For each="{{ releases }}" item="release" key="id">
-        <ListItem image="{{ release.artwork }}" title="{{ release.title }}" subtitle="{{ release.album }} · {{ release.year }}" />
-      </For>
-    </List>
-  </If>
-  <Else>
-    <View variant="card">
-      <EmptyState icon="search" title="No songs yet" text="Search for an artist, such as Drizilik, Kao Denero or Emmerson." />
-    </View>
-  </Else>
-
-  <Text variant="caption" tone="muted">JSON sent to httpbin, which sends it back</Text>
-  <View variant="card" gap="small">
-    <Button variant="secondary" onClick="sendJson">Send the first song as JSON</Button>
-    <If condition="{{ echo }}">
-      <Text>httpbin got {{ echo }}</Text>
-    </If>
-  </View>
-
-  <Text variant="caption" tone="muted">Files: download the first song's artwork, upload it, and save it</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="download" disabled="{{ releases.length === 0 }}">Download</Button>
-      <Button variant="secondary" onClick="upload" disabled="{{ !picture.id }}">Upload</Button>
-      <Button variant="secondary" onClick="sharePicture" disabled="{{ !picture.id }}">Share</Button>
-      <Button variant="secondary" onClick="keep" disabled="{{ !picture.id || kept }}">Keep</Button>
-    </View>
-    <If condition="{{ picture.url }}">
-      <View direction="row" align="center" gap="medium">
-        <Image src="{{ picture.url }}" alt="Artwork" width="64" height="64" />
-        <Text variant="caption" tone="muted">{{ picture.size }} bytes, in a temporary file until the dot closes</Text>
-      </View>
-    </If>
-    <If condition="{{ uploaded }}">
-      <Text>httpbin got the file field "{{ uploaded }}"</Text>
-    </If>
-    <If condition="{{ kept }}">
-      <Text>Saved in the dot's files. See the Files page.</Text>
-    </If>
-  </View>
-
-  <Text variant="caption" tone="muted">A host that dot.json does not list</Text>
-  <View variant="card" gap="small">
-    <Button variant="secondary" onClick="tryUnlistedHost">Reach example.com</Button>
-    <If condition="{{ note }}">
-      <Text variant="caption" tone="muted">{{ note }}</Text>
-    </If>
-  </View>
-</View>

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

@@ -1,24 +0,0 @@
-<View>
-  <Text variant="title">Secrets</Text>
-  <Text>Secrets hold sign-in tokens from the dot's own server. Dash keeps them encrypted on the phone. A dot can keep up to 8.</Text>
-
-  <Text variant="caption" tone="muted">A sign-in that stays</Text>
-  <View variant="card" gap="small">
-    <If condition="{{ token }}">
-      <Text>Signed in as {{ signedInAs }}</Text>
-      <Text variant="caption" tone="muted">Session token {{ token }}</Text>
-      <View direction="row" gap="small">
-        <Button variant="secondary" onClick="signOut">Sign out</Button>
-        <Button variant="secondary" onClick="forgetAll">Forget every secret</Button>
-      </View>
-    </If>
-    <Else>
-      <Input label="Name" placeholder="Mariama" value="{{ name }}" maxLength="40" onChange="setName" onSubmit="signIn" />
-      <Button onClick="signIn" disabled="{{ !name }}">Sign in</Button>
-      <Text variant="caption" tone="muted">Sign in, then close and reopen the dot. You stay signed in.</Text>
-    </Else>
-  </View>
-
-  <Text variant="caption" tone="muted">Your name is saved in the cache. Only the token is a secret.</Text>
-  <Text variant="caption" tone="muted">Never put your API keys in the dot's code: it is open to read.</Text>
-</View>

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

@@ -1,33 +0,0 @@
-<View>
-  <Text variant="title">State, mutations and actions</Text>
-  <Text>The page keeps its data in state. A mutation changes state when something happens. An action can run several steps or wait for Dash. Here, the crowd wants one more song.</Text>
-
-  <View variant="card" gap="small">
-    <Text variant="title">{{ count }} of {{ limit }} {{ title }}</Text>
-    <If condition="{{ count >= limit }}">
-      <Text>Encore! The band comes back on</Text>
-    </If>
-    <ElseIf condition="{{ count > 0 }}">
-      <Text>{{ limit - count }} more and the band comes back</Text>
-    </ElseIf>
-    <Else>
-      <Text>Tap Cheer to start</Text>
-    </Else>
-    <View direction="row" wrap gap="small">
-      <Button onClick="increment" disabled="{{ count >= limit }}">Cheer</Button>
-      <Button variant="secondary" onClick="fillUp" disabled="{{ count >= limit }}">Whole crowd</Button>
-      <Button variant="secondary" onClick="undo" disabled="{{ count === 0 }}">Undo</Button>
-      <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
-    </View>
-  </View>
-
-  <Text variant="caption" tone="muted">Each cheer, newest first</Text>
-  <View variant="card" gap="small">
-    <For each="{{ taps }}" index="position" item="tap" key="id">
-      <Text>{{ position + 1 }}. Cheer #{{ tap.id }}</Text>
-    </For>
-    <If condition="{{ taps.length === 0 }}">
-      <Text variant="caption" tone="muted">No cheers yet</Text>
-    </If>
-  </View>
-</View>

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

@@ -1,8 +0,0 @@
-export default {
-  name: 'Mariama',
-  stageName: null as string | null,
-  // Le, in the leone since 2022, when it dropped three zeros.
-  price: 150,
-  tickets: 4,
-  genres: ['kriofusion', 'palm-wine', 'gumbe'],
-};