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

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

@@ -0,0 +1,54 @@
+<View>
+  <Text variant="title">Money and codes</Text>
+  <Text>Fields for amounts and codes, and QR codes to scan. Tip the band, pledge to its tour, and confirm your tickets.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">AmountInput</Text>
+    <Text variant="caption" tone="muted">Formats the amount as you type. It sends a number in cents, the minor unit, so 150 is SLE 1.50.</Text>
+    <AmountInput label="Tip for the band" placeholder="0.00" value="{{ amount }}" disabled="{{ locked }}" onChange="setAmount" hint="The QR code below asks for it" />
+    <Switch label="Lock the tip" checked="{{ locked }}" onChange="setLocked" />
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">QRCode</Text>
+    <Text variant="caption" tone="muted">Shows text, such as a payment link, as a QR code. It's dark on light in every theme, so any camera can read it.</Text>
+    <View variant="card" align="center" gap="medium">
+      <If condition="{{ request }}">
+        <QRCode value="{{ request }}" size="180" label="A QR code to tip SLE {{ amountText }}" />
+        <Text tone="muted">Scan to tip the band SLE {{ amountText }}</Text>
+      </If>
+      <Else>
+        <EmptyState icon="qr-code" title="No tip yet" text="Type an amount above to make a QR code the crowd can scan." />
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">currency, unit and minorUnits</Text>
+    <Text variant="caption" tone="muted">In US dollars. unit="major" sends dollars, not cents, and minorUnits="0" leaves the cents off.</Text>
+    <AmountInput label="Pledge for the band's Mano River tour" currency="USD" unit="major" minorUnits="0" value="{{ pledge }}" error="{{ pledgeError }}" hint="Up to USD 1,000" onChange="setPledge" />
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">CodeInput</Text>
+    <Text variant="caption" tone="muted">A one-time code, one box per digit. Type it, paste it, or let the phone fill it from an SMS. onComplete comes when the last box fills.</Text>
+    <If condition="{{ verified }}">
+      <Notice tone="success" title="Code accepted">Your two tickets are confirmed.</Notice>
+      <Button variant="secondary" onClick="startAgain">Start again</Button>
+    </If>
+    <Else>
+      <CodeInput label="The code we sent to 076 •••• 21" value="{{ code }}" onChange="setCode" onComplete="checkCode" error="{{ codeError }}" hint="Use 123456" />
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">A PIN</Text>
+    <Text variant="caption" tone="muted">length="4" and secure, which hides the digits. Here it locks once complete.</Text>
+    <CodeInput label="PIN" length="4" secure value="{{ pin }}" disabled="{{ pin.length === 4 }}" onChange="setPin" />
+    <View direction="row" align="center" gap="small">
+      <Text tone="muted">{{ pin.length }} of 4 digits</Text>
+      <View grow />
+      <Button variant="secondary" onClick="clearPin" disabled="{{ pin.length === 0 }}">Clear the PIN</Button>
+    </View>
+  </View>
+</View>

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

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

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

@@ -0,0 +1,23 @@
+// As a news app would get an article's body from its server. The lines are joined here so the
+// production build stays on one line.
+const body = [
+  "## What's on sale",
+  '',
+  'Stalls opened before dawn, and by eight the **rice** sellers had a queue. Prices are set each morning and shown at the gate:',
+  '',
+  '- Rice, a cup: SLE 5',
+  '- Palm oil, a pint: SLE 12',
+  '- Pepper, a heap: SLE 3',
+  '',
+  "> The roof keeps the rain off. That's half the battle in July.",
+  '',
+  "Read the [council's notice](https://example.com/lumley-market) for opening hours, or see _Getting there_ below.",
+  '',
+  '### Getting there',
+  '',
+  'Poda-podas from Lumley junction stop at the gate. The car park opens next month.',
+].join('\n');
+
+export default {
+  body,
+};

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

@@ -0,0 +1,42 @@
+<View>
+  <Text variant="title">Reading</Text>
+  <Text>Prose lays out long text, such as a news story, so it reads well. Quote sets someone's words apart. BulletList lists points. RichText draws Markdown from a server.</Text>
+  <Divider />
+
+  <Prose>
+    <Text variant="caption" tone="muted" weight="medium">FREETOWN · 11 OCTOBER</Text>
+    <Text variant="title">Lumley's new market opens to traders and a long queue</Text>
+    <Text variant="lead">More than two hundred traders moved into the covered market on Saturday, the first in the west of the city.</Text>
+    <Text variant="caption" tone="muted">By Mariama Kamara</Text>
+    <Text>The market took two years to build, on the old lorry park by the junction. Each trader has:</Text>
+    <BulletList>
+      <Bullet>
+        <Text>a stall with a lock</Text>
+      </Bullet>
+      <Bullet>
+        <Text>water at both ends of the hall</Text>
+      </Bullet>
+      <Bullet>
+        <Text>a place in the car park, from next month</Text>
+      </Bullet>
+    </BulletList>
+    <Quote cite="Fatmata Conteh, who sells cloth">
+      <Text>For twelve years I sold under an umbrella. Now I have a door that closes.</Text>
+    </Quote>
+    <Text>The council says it will open a second market in Kissy next year. <Text weight="bold">Stalls there are free</Text> for the first six months. To get one:</Text>
+    <BulletList ordered>
+      <Bullet>
+        <Text>Register at the council office in Lumley.</Text>
+      </Bullet>
+      <Bullet>
+        <Text>Bring a photo and your trader's card.</Text>
+      </Bullet>
+      <Bullet>
+        <Text>Wait for an SMS with your stall number.</Text>
+      </Bullet>
+    </BulletList>
+    <Divider />
+    <Text variant="caption" tone="muted">The rest of the story comes as Markdown from the newsroom's server, drawn by RichText.</Text>
+  </Prose>
+  <RichText markdown="{{ body }}" />
+</View>

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

@@ -0,0 +1,36 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Sheets' } },
+  mutations: {
+    openRelease: (state, event: DataEvent<{ id: string }>) => ({
+      selected: state.releases.find((release) => release.id === event.data.id) ?? null,
+    }),
+    // A sheet doesn't close itself: the page sets `open` back to false.
+    closeRelease: () => ({ selected: null }),
+    openRating: () => ({ rating: true }),
+    closeRating: () => ({ rating: false }),
+    setStars: (_state, event: ValueEvent<number>) => ({ stars: event.detail.value }),
+    saveRating: (state) => ({ rating: false, saved: state.stars, toast: 'Thanks for rating' }),
+    clearToast: () => ({ toast: '' }),
+  },
+  actions: {
+    async copyTitle(state) {
+      if (!state.selected) {
+        return;
+      }
+      const { title, artist } = state.selected;
+      await this.dash.system.copyText(`${title}, by ${artist}`);
+      this.setState({ selected: null, toast: 'Title copied' });
+    },
+    async shareRelease(state) {
+      if (!state.selected) {
+        return;
+      }
+      const { title, artist, year } = state.selected;
+      this.setState({ selected: null });
+      await this.dash.system.share({ title, text: `${title}, by ${artist} (${year})` });
+    },
+  },
+});

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

@@ -0,0 +1,26 @@
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+}
+
+export default {
+  releases: [
+    {
+      id: 'rise-and-shine',
+      title: 'Rise & Shine',
+      artist: "Sierra Leone's Refugee All Stars",
+      year: 2010,
+    },
+    { id: 'kormot-bi-en-me', title: 'Kormot Bi En Me', artist: 'Steady Bongo', year: 1996 },
+    { id: 'borbor-bele', title: 'Borbor Bele', artist: 'Emmerson', year: 2004 },
+  ] as Release[],
+  // The record whose actions the sheet shows.
+  selected: null as Release | null,
+  // The rating sheet, and the rating it last saved.
+  rating: false,
+  stars: 3,
+  saved: 0,
+  toast: '',
+};

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

@@ -0,0 +1,38 @@
+<View>
+  <Text variant="title">Sheets</Text>
+  <Text>A Sheet slides up over the page while open is true. Tapping outside it, or its close icon, raises onClose. The page closes it by setting open back to false.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">An action sheet</Text>
+    <Text variant="caption" tone="muted">Tap a record to see what you can do with it.</Text>
+    <List>
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem icon="music" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}" data-id="{{ release.id }}" onTap="openRelease" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">A sheet with a form</Text>
+    <Text variant="caption" tone="muted">Any component can go in a sheet. This one has no close icon, and more room inside.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <View grow>
+        <Text>{{ saved ? 'You gave ' + saved + ' stars' : 'Not rated yet' }}</Text>
+      </View>
+      <Button variant="secondary" onClick="openRating">Rate the show</Button>
+    </View>
+  </View>
+
+  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.year }}" showCloseIcon onClose="closeRelease">
+    <Button variant="secondary" onClick="copyTitle">Copy the title</Button>
+    <Button variant="secondary" onClick="shareRelease">Share it</Button>
+    <Button onClick="closeRelease">Cancel</Button>
+  </Sheet>
+
+  <Sheet open="{{ rating }}" title="Rate Salone Sounds Live" padding="large" onClose="closeRating">
+    <Slider label="Stars" min="1" max="5" showValue value="{{ stars }}" onChange="setStars" />
+    <Button onClick="saveRating">Save</Button>
+  </Sheet>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

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

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

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

@@ -0,0 +1,3 @@
+export default {
+  balance: 'SLE 1,250.00',
+};

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

@@ -0,0 +1,101 @@
+<View>
+  <Text variant="title">Styles</Text>
+  <Text>A View's colours, outlines, corners and sizes come from the theme, so a dot looks right in light and dark.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">background</Text>
+    <Text variant="caption" tone="muted">With primary, write text with tone="onPrimary" so it reads.</Text>
+    <View background="primary" radius="large" padding="large" gap="small">
+      <Text variant="caption" tone="onPrimary">Your balance</Text>
+      <Text variant="display" tone="onPrimary" numeric>{{ balance }}</Text>
+    </View>
+    <Text variant="caption" tone="muted">The page's own colours</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="background" border="subtle" radius="medium" padding="small">
+        <Text>background</Text>
+      </View>
+      <View background="surface" border="subtle" radius="medium" padding="small">
+        <Text>surface</Text>
+      </View>
+      <View background="muted" radius="medium" padding="small">
+        <Text>muted</Text>
+      </View>
+    </View>
+    <Text variant="caption" tone="muted">A tone is a soft tint</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="info" radius="medium" padding="small">
+        <Text tone="info" weight="medium">New</Text>
+      </View>
+      <View background="success" radius="medium" padding="small">
+        <Text tone="success" weight="medium">Paid</Text>
+      </View>
+      <View background="warning" radius="medium" padding="small">
+        <Text tone="warning" weight="medium">Due Friday</Text>
+      </View>
+      <View background="danger" radius="medium" padding="small">
+        <Text tone="danger" weight="medium">Failed</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Theme colours</Text>
+    <Text variant="caption" tone="muted">The theme in dot.ts can set primary, background, surface, text, muted, border and subtle, for light and dark, and a page can set its own with configs.colors. Left out, they're Dash's, or worked out from a new background. The theme can also name its own colours, such as gold and ink here, to use as a background or a text tone.</Text>
+    <View direction="row" gap="small" align="center">
+      <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
+        <Text weight="medium" tone="ink">Gold member</Text>
+      </View>
+      <Text tone="gold" weight="bold">Since 2024</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">border and radius</Text>
+    <Text variant="caption" tone="muted">border is none, subtle or strong. radius rounds the corners, and full makes a circle or a pill.</Text>
+    <View direction="row" gap="medium" align="end" wrap>
+      <View width="56" height="56" background="muted" radius="none" />
+      <View width="56" height="56" background="muted" radius="small" />
+      <View width="56" height="56" background="muted" radius="medium" />
+      <View width="56" height="56" background="muted" radius="large" />
+      <View width="56" height="56" background="muted" radius="full" />
+      <View width="56" height="56" border="subtle" radius="medium" />
+      <View width="56" height="56" border="strong" radius="medium" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">width and height</Text>
+    <Text variant="caption" tone="muted">In points, or fill for all the room there is.</Text>
+    <View background="muted" radius="medium" width="120" height="40" justify="center" align="center">
+      <Text>120 points</Text>
+    </View>
+    <View background="muted" radius="medium" width="fill" height="40" justify="center" align="center">
+      <Text>fill</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">minHeight, maxWidth and aspect</Text>
+    <Text variant="caption" tone="muted">minHeight keeps a box tall when it holds little. maxWidth stops it growing too wide. aspect sets its height from its width.</Text>
+    <View variant="card" minHeight="96" justify="center">
+      <Text>At least 96 points tall</Text>
+    </View>
+    <View variant="card" maxWidth="200">
+      <Text>No wider than 200 points, however wide the phone is</Text>
+    </View>
+    <View background="muted" radius="large" aspect="16:9" justify="center" align="center">
+      <Text>16:9</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Together</Text>
+    <Text variant="caption" tone="muted">A price with even digits, and the old one crossed out.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <Text variant="subtitle">Freetown Jazz Night</Text>
+      <View grow />
+      <Text tone="muted" decoration="strikethrough" numeric>SLE 150</Text>
+      <Text weight="bold" numeric>SLE 120</Text>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,41 @@
+import type { Release } from './state';
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Tabs and chips' } },
+  mutations: {
+    chooseTab: (state, event: ValueEvent) => {
+      const tab = event.detail.value;
+      return { tab, shown: filter(state.releases, { ...state, tab }) };
+    },
+    chooseGenre: (state, event: DataEvent<{ genre: string }>) => {
+      const { genre } = event.data;
+      return { genre, shown: filter(state.releases, { ...state, genre }) };
+    },
+    search: (state, event: ValueEvent) => {
+      const query = event.detail.value;
+      return { query, shown: filter(state.releases, { ...state, query }) };
+    },
+    clearFilters: (state) => ({ tab: 'all', genre: 'All', query: '', shown: state.releases }),
+    chooseWhere: (_state, event: ValueEvent) => ({ where: event.detail.value }),
+    toggleLiked: (state) => ({ liked: !state.liked }),
+  },
+});
+
+interface Filters {
+  tab: string;
+  genre: string;
+  // Words the title contains, in any case.
+  query: string;
+}
+
+function filter(releases: readonly Release[], { tab, genre, query }: Filters): Release[] {
+  const words = query.trim().toLowerCase();
+  return releases.filter(
+    (release) =>
+      (tab === 'all' || release.kind === tab) &&
+      (genre === 'All' || release.genre === genre) &&
+      release.title.toLowerCase().includes(words),
+  );
+}

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

@@ -0,0 +1,127 @@
+export type Kind = 'album' | 'song';
+export type Genre = 'Kriofusion' | 'Afropop' | 'Hip hop' | 'R&B' | 'Palm-wine' | 'Gospel' | 'Bubu';
+
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+  kind: Kind;
+  genre: Genre;
+}
+
+export interface Show {
+  id: string;
+  title: string;
+  place: string;
+  date: string;
+  city: string;
+}
+
+function release(
+  id: string,
+  title: string,
+  artist: string,
+  year: number,
+  kind: Kind,
+  genre: Genre,
+): Release {
+  return { id, title, artist, year, kind, genre };
+}
+
+// Newest first.
+const releases: Release[] = [
+  release('audacity', 'AUDACITY', 'Drizilik', 2026, 'album', 'Kriofusion'),
+  release('money-or-honey', 'Money or Honey', 'Boii', 2025, 'album', 'R&B'),
+  release('control', 'Control', 'ApreeL', 2025, 'song', 'Afropop'),
+  release('wait-and-see', 'Wait and See', 'Drizilik', 2025, 'album', 'Kriofusion'),
+  release('blunt', 'Blunt', 'Donii Major', 2023, 'song', 'R&B'),
+  release('ashobi', 'Ashobi', 'Drizilik', 2022, 'album', 'Kriofusion'),
+  release('nack', 'Nack', 'The Therapist', 2022, 'song', 'Afropop'),
+  release('hannah', 'Hannah', 'Donii Major', 2021, 'song', 'R&B'),
+  release('shukubly', 'Shukubly', 'Drizilik', 2018, 'album', 'Kriofusion'),
+  release('en-yay-sah', 'En Yay Sah', 'Janka Nabay and the Bubu Gang', 2012, 'album', 'Bubu'),
+  release('red-album', 'Red Album', 'LAJ', 2013, 'album', 'Hip hop'),
+  release(
+    'ghetto-struggle',
+    'Ghetto Struggle',
+    'Kao Denero, with Busy Signal',
+    2013,
+    'song',
+    'Hip hop',
+  ),
+  release('borbor-bele', 'Borbor Bele', 'Emmerson', 2004, 'album', 'Afropop'),
+  release('corruption', 'Corruption', 'Daddy Saj', 2003, 'album', 'Hip hop'),
+  release('cry-africa', 'Cry Africa', 'Vicky Fornah', 1999, 'song', 'Gospel'),
+  release('kormot-bi-en-me', 'Kormot Bi En Me', 'Steady Bongo', 1996, 'album', 'Afropop'),
+  release('dead-men', "Dead Men Don't Smoke Marijuana", 'S. E. Rogie', 1994, 'album', 'Palm-wine'),
+  release('let-me-love-you', 'Let Me Love You', 'Bunny Mack', 1981, 'song', 'Afropop'),
+];
+
+export default {
+  releases,
+  // The releases the tab and the chosen genre leave.
+  shown: releases,
+  tab: 'all',
+  albums: releases.filter((item) => item.kind === 'album').length,
+  songs: releases.filter((item) => item.kind === 'song').length,
+  genres: ['All', 'Kriofusion', 'Afropop', 'Hip hop', 'R&B', 'Palm-wine', 'Gospel', 'Bubu'],
+  genre: 'All',
+  query: '',
+  liked: false,
+  // Shows at home in Sierra Leone, and abroad in the Mano River region.
+  where: 'home',
+  home: [
+    {
+      id: 'sledu-2026',
+      title: 'SLeDU National Music Awards',
+      place: 'Bintumani Conference Centre',
+      date: '27 March 2026',
+      city: 'Freetown',
+    },
+    {
+      id: 'special-guests-4',
+      title: 'Drizilik & Special Guests',
+      place: 'Fourah Bay College Amphitheatre',
+      date: '28 November 2025',
+      city: 'Freetown',
+    },
+    {
+      id: 'christmas-jam',
+      title: 'Christmas Jam',
+      place: 'Coronation Field',
+      date: '26 December 2025',
+      city: 'Bo',
+    },
+    {
+      id: 'gospel-night',
+      title: 'Gospel Night',
+      place: 'Kenema City Hall',
+      date: '15 November 2025',
+      city: 'Kenema',
+    },
+  ] as Show[],
+  abroad: [
+    {
+      id: 'monrovia-live',
+      title: 'Salone Sounds Live',
+      place: 'EJS Ministerial Complex',
+      date: '20 December 2025',
+      city: 'Monrovia',
+    },
+    {
+      id: 'mano-river-festival',
+      title: 'Mano River Music Festival',
+      place: 'Palais du Peuple',
+      date: '8 November 2025',
+      city: 'Conakry',
+    },
+    {
+      id: 'abidjan-night',
+      title: 'Salone Night',
+      place: 'Palais de la Culture',
+      date: '13 September 2025',
+      city: 'Abidjan',
+    },
+  ] as Show[],
+};

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

@@ -0,0 +1,57 @@
+<View>
+  <Text variant="title">Tabs and chips</Text>
+  <Text>Tabs change what the page shows. Chips and a search narrow it down. Try Songs with Palm-wine: nothing matches.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Tabs and Chip</Text>
+    <Text variant="caption" tone="muted">The underline tabs, with a badge for each count. A chip is selected when the page says so. An Input with type="search" and clearable makes a search box.</Text>
+    <Tabs variant="underline" value="{{ tab }}" onChange="chooseTab">
+      <Tab value="all" label="All" />
+      <Tab value="album" label="Albums" badge="{{ albums }}" />
+      <Tab value="song" label="Songs" badge="{{ songs }}" />
+    </Tabs>
+    <Input type="search" placeholder="Search by title" clearable value="{{ query }}" onChange="search" />
+    <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, genre and search.">
+        <Button variant="secondary" onClick="clearFilters">Clear filters</Button>
+      </EmptyState>
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Chip with an icon</Text>
+    <Text variant="caption" tone="muted">A disabled chip can't be tapped, such as a filter with nothing behind it.</Text>
+    <View direction="row" gap="small" wrap>
+      <Chip icon="heart" label="Liked" selected="{{ liked }}" onTap="toggleLiked" />
+      <Chip icon="download" label="Downloaded" disabled />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">variant="segmented"</Text>
+    <Text variant="caption" tone="muted">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/components/text/controller.ts

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Text and links' } },
+  mutations: {
+    like: (state) => ({ likes: state.likes + 1 }),
+    unlike: (state) => ({ likes: Math.max(0, state.likes - 1) }),
+  },
+});

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

@@ -0,0 +1,3 @@
+export default {
+  likes: 12,
+};