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

package/dist/templates/showcase/pages/basics/control-flow/state.ts

@@ -0,0 +1,16 @@
+export interface Show {
+  id: string;
+  title: string;
+  city: string;
+  left: number;
+}
+
+export default {
+  shows: [
+    { id: 'freetown', title: 'Salone Sounds Live', city: 'Freetown', left: 120 },
+    { id: 'bo', title: 'Palm-wine evening', city: 'Bo', left: 6 },
+    { id: 'kenema', title: 'Gospel night', city: 'Kenema', left: 1 },
+  ] as Show[],
+  genres: ['Palm-wine', 'Gumbe', 'Milo jazz', 'Afropop', 'Kriofusion'],
+  signedIn: false,
+};

package/dist/templates/showcase/pages/basics/control-flow/view.dml

@@ -0,0 +1,55 @@
+<View>
+  <Text variant="title">If and For</Text>
+  <Text>If shows a part of the view only when its condition is true. For shows a part once for each item of a list.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">If and Else</Text>
+    <Text variant="caption" tone="muted">Else shows when the If before it doesn't.</Text>
+    <View variant="card" gap="small">
+      <If condition="{{ signedIn }}">
+        <Text>Welcome back, Mariama</Text>
+      </If>
+      <Else>
+        <Text tone="muted">You're not signed in</Text>
+      </Else>
+      <Button variant="secondary" onClick="toggleSignedIn">{{ signedIn ? 'Sign out' : 'Sign in' }}</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">For, with ElseIf inside</Text>
+    <Text variant="caption" tone="muted">item names each show. key gives each a lasting id, so its row stays the same row when the list changes. ElseIf checks another condition when the one above is false.</Text>
+    <View variant="card" gap="medium">
+      <For each="{{ shows }}" item="show" key="id">
+        <View direction="row" align="center" gap="small">
+          <View grow gap="none">
+            <Text weight="medium">{{ show.title }}</Text>
+            <Text variant="caption" tone="muted">{{ show.city }}</Text>
+          </View>
+          <If condition="{{ show.left === 0 }}">
+            <Badge tone="danger">Sold out</Badge>
+          </If>
+          <ElseIf condition="{{ show.left < 10 }}">
+            <Badge tone="warning">{{ show.left }} left</Badge>
+          </ElseIf>
+          <Else>
+            <Badge tone="success">On sale</Badge>
+          </Else>
+          <Button variant="secondary" data-id="{{ show.id }}" onClick="sell" disabled="{{ show.left === 0 }}">Sell 5</Button>
+        </View>
+      </For>
+      <Button variant="secondary" onClick="restock">Restock every show</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">For with index</Text>
+    <Text variant="caption" tone="muted">index counts from 0. A list of plain text has no id, so key="*this" uses the text itself.</Text>
+    <View variant="card" gap="small">
+      <For each="{{ genres }}" item="genre" index="position" key="*this">
+        <Text>{{ position + 1 }}. {{ genre }}</Text>
+      </For>
+      <Button variant="secondary" onClick="shuffle">Move the first to the end</Button>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/basics/events/controller.ts

@@ -0,0 +1,43 @@
+import state from './state';
+
+// What each handler below shows of its event.
+function describe(handler: string, event: DotEvent) {
+  return {
+    handler,
+    type: event.type,
+    detail: JSON.stringify(event.detail),
+    data: JSON.stringify(event.data),
+  };
+}
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Events' } },
+  mutations: {
+    // No detail: a tap is all there is to know.
+    countTap: (state, event: DotEvent) => ({
+      taps: state.taps + 1,
+      ...describe('countTap', event),
+    }),
+    // `detail` is what the component sends: text for an Input...
+    setSong: (_state, event: ValueEvent) => ({
+      song: event.detail.value,
+      ...describe('setSong', event),
+    }),
+    // ...a number for a Slider...
+    setVolume: (_state, event: ValueEvent<number>) => ({
+      volume: event.detail.value,
+      ...describe('setVolume', event),
+    }),
+    // ...and checked for a Switch.
+    setLoud: (_state, event: CheckedEvent) => ({
+      loud: event.detail.checked,
+      ...describe('setLoud', event),
+    }),
+    // `data` holds the element's data- attributes, as text.
+    play: (_state, event: DataEvent<{ artist: string; year: string }>) => ({
+      song: `${event.data.artist}, ${event.data.year}`,
+      ...describe('play', event),
+    }),
+  },
+});

package/dist/templates/showcase/pages/basics/events/state.ts

@@ -0,0 +1,11 @@
+export default {
+  // The last event, as the handler got it.
+  handler: '',
+  type: '',
+  detail: '',
+  data: '',
+  song: '',
+  volume: 5,
+  loud: false,
+  taps: 0,
+};

package/dist/templates/showcase/pages/basics/events/view.dml

@@ -0,0 +1,51 @@
+<View>
+  <Text variant="title">Events</Text>
+  <Text>An attribute such as onClick or onChange names the handler to run. The handler gets the state and the event.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">The last event</Text>
+    <View variant="card" gap="none">
+      <If condition="{{ handler }}">
+        <DetailRow label="Handler" value="{{ handler }}" />
+        <DetailRow label="event.type" value="{{ type }}" />
+        <DetailRow label="event.detail" value="{{ detail }}" />
+        <DetailRow label="event.data" value="{{ data }}" />
+      </If>
+      <Else>
+        <Text tone="muted">Use anything below to see its event here.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Taps</Text>
+    <Text variant="caption" tone="muted">Button raises click. View, ListItem, Link and Chip raise tap.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <Button variant="secondary" onClick="countTap">Tap me</Button>
+      <View variant="card" grow onTap="countTap">
+        <Text>Or tap this box</Text>
+      </View>
+      <Text numeric>{{ taps }}</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">event.detail</Text>
+    <Text variant="caption" tone="muted">What the component sends, such as the text typed or the switch's new state. In the controller, type the event as ValueEvent, CheckedEvent or IndexEvent.</Text>
+    <View variant="card">
+      <Input label="Song" placeholder="Exodus" value="{{ song }}" onChange="setSong" />
+      <Slider label="Volume" min="0" max="10" showValue value="{{ volume }}" onChange="setVolume" />
+      <Switch label="Loud" checked="{{ loud }}" onChange="setLoud" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">event.data</Text>
+    <Text variant="caption" tone="muted">The data- attributes of the element, such as data-artist. They tell one handler which item was used. Their values arrive as text. In the controller, type the event as DataEvent.</Text>
+    <View variant="card" direction="row" wrap gap="small">
+      <Button variant="secondary" data-artist="Drizilik" data-year="2021" onClick="play">Exodus</Button>
+      <Button variant="secondary" data-artist="ApreeL" data-year="2025" onClick="play">Control</Button>
+      <Button variant="secondary" data-artist="Emmerson" data-year="2004" onClick="play">Borbor Bele</Button>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/basics/hooks/controller.ts

@@ -0,0 +1,43 @@
+import type { HookRun } from './state';
+import state from './state';
+
+// Outside the page, so it outlives each copy of it while the dot runs.
+let lastClosed = '';
+
+function ran(runs: readonly HookRun[], hook: string): HookRun[] {
+  return [...runs, { id: runs.length + 1, hook }];
+}
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Page hooks' } },
+  hooks: {
+    // Runs once, when the page opens, with the options it opened with.
+    onLoad(options) {
+      this.setState({ lastClosed, runs: ran([], `onLoad ${JSON.stringify(options)}`) });
+    },
+    // Runs each time the page comes into view: after onLoad, and when a page above it closes.
+    onShow() {
+      this.setState((current) => ({ runs: ran(current.runs, 'onShow') }));
+    },
+    // Runs when another page opens on top, or the dot goes into the background.
+    onHide() {
+      this.setState((current) => ({ runs: ran(current.runs, 'onHide') }));
+    },
+    // Runs once, when the page closes. Its state goes with it.
+    onUnload() {
+      lastClosed = new Date().toLocaleTimeString('en-GB');
+    },
+    // Runs when the person pulls the page down from its top. The spinner shows until it finishes,
+    // here after a second, as a real page would wait for its server.
+    async onRefresh() {
+      await this.dash.system.delay(1000);
+      this.setState((current) => ({ runs: ran(current.runs, 'onRefresh') }));
+    },
+  },
+  actions: {
+    openAnother() {
+      this.navigation.push('basics/state');
+    },
+  },
+});

package/dist/templates/showcase/pages/basics/hooks/state.ts

@@ -0,0 +1,10 @@
+export interface HookRun {
+  id: number;
+  hook: string;
+}
+
+export default {
+  runs: [] as HookRun[],
+  // When the last copy of this page closed, which its onUnload noted.
+  lastClosed: '',
+};

package/dist/templates/showcase/pages/basics/hooks/view.dml

@@ -0,0 +1,37 @@
+<View>
+  <Text variant="title">Page hooks</Text>
+  <Text>Hooks run at points in a page's life, such as when it opens. Use them to load data or to save it.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">The hooks this page ran, in order</Text>
+    <View variant="card" gap="small">
+      <For each="{{ runs }}" item="run" key="id">
+        <Text>{{ run.id }}. {{ run.hook }}</Text>
+      </For>
+    </View>
+    <Text variant="caption" tone="muted">Open another page, then come back: this page runs onHide, then onShow.</Text>
+    <Button variant="secondary" onClick="openAnother">Open another page</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onRefresh</Text>
+    <Text variant="caption" tone="muted">Pull this page down from its top, then let go. Only a page with onRefresh can be pulled, and its spinner shows until the hook finishes.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onUnload</Text>
+    <View variant="card">
+      <If condition="{{ lastClosed }}">
+        <Text>This page last closed at {{ lastClosed }}</Text>
+      </If>
+      <Else>
+        <Text tone="muted">Go back, then open this page again. It says when it closed.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The dot's hooks</Text>
+    <Text variant="caption" tone="muted">dot.ts can have hooks too: onLaunch runs once when the dot starts, and onError gets any error a page doesn't catch.</Text>
+  </View>
+</View>

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

@@ -0,0 +1,41 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Navigation' } },
+  hooks: {
+    // Options come from the page that opened this one, as text.
+    onLoad(options) {
+      const depth = Number(options.depth ?? '1') + 1;
+      const from = options.trail ?? 'Home';
+      this.setState({ depth, from, trail: `${from} › ${depth}`, options: JSON.stringify(options) });
+    },
+  },
+  actions: {
+    openAnother(state) {
+      this.navigation.push('basics/navigation', { depth: String(state.depth), trail: state.trail });
+    },
+    replaceThis(state) {
+      this.navigation.replace('basics/navigation', {
+        depth: String(state.depth - 1),
+        trail: state.from,
+      });
+    },
+    back() {
+      this.navigation.back();
+    },
+    backTwo() {
+      this.navigation.back(2);
+    },
+    home() {
+      this.navigation.reset('index');
+    },
+    async chooseGenre() {
+      const genre = await this.navigation.pushForResult<string>('basics/pick-genre');
+      // Undefined when the person went back without choosing.
+      if (genre) {
+        this.setState({ genre });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,11 @@
+export default {
+  depth: 1,
+  maxDepth: 16,
+  // The trail of the page that opened this one.
+  from: '',
+  trail: '',
+  // The options this page opened with, as text.
+  options: '',
+  // What the genre page gave back.
+  genre: '',
+};

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

@@ -0,0 +1,48 @@
+<View>
+  <Text variant="caption" tone="muted">{{ trail }}</Text>
+  <Text variant="title">Navigation</Text>
+  <Text>Actions open pages with this.navigation. Each new page opens on top, and back returns to the one below. A dot can have {{ maxDepth }} pages open at once.</Text>
+
+  <View variant="card" gap="small">
+    <Text>This is page {{ depth }} of {{ maxDepth }}</Text>
+    <Text variant="caption" tone="muted">It opened with {{ options }}</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">push</Text>
+    <Text variant="caption" tone="muted">Opens a page on top, with options it reads in onLoad.</Text>
+    <Button onClick="openAnother" disabled="{{ depth >= maxDepth }}">Open another</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">replace</Text>
+    <Text variant="caption" tone="muted">Opens a page in this one's place, so back skips this one.</Text>
+    <Button variant="secondary" onClick="replaceThis">Replace this one</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">back</Text>
+    <Text variant="caption" tone="muted">Closes this page, or as many as you ask. On the first page, it closes the dot.</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="back">Back</Button>
+      <Button variant="secondary" onClick="backTwo" disabled="{{ depth < 3 }}">Back two</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">reset</Text>
+    <Text variant="caption" tone="muted">Closes every page and opens one, such as the home page.</Text>
+    <Button variant="secondary" onClick="home">Start over</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">pushForResult and backWithResult</Text>
+    <Text variant="caption" tone="muted">Opens a page that gives something back, such as a choice. It gives undefined when the person goes back without choosing.</Text>
+    <View variant="card" direction="row" align="center" gap="medium">
+      <View grow>
+        <Text>{{ genre ? 'Your genre: ' + genre : 'No genre chosen yet' }}</Text>
+      </View>
+      <Button variant="secondary" onClick="chooseGenre">Choose a genre</Button>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/basics/pick-genre/controller.ts

@@ -0,0 +1,18 @@
+import state from './state';
+
+// Opened by the navigation page with pushForResult. It gives back the genre the person taps.
+export default definePage({
+  initialState: state,
+  configs: {
+    navigationBar: { title: 'Choose a genre' },
+    // This page's own background: a warm Salone sunset by day, the evening after it by dark. Dash
+    // paints it behind the page, makes the list's cards to match, and picks text and bar colours
+    // that read on it. Going back shows the page below in its own colours again.
+    colors: { background: { light: '#FFF3E0', dark: '#2B1A0E' } },
+  },
+  actions: {
+    pick(_state, event: DataEvent<{ genre: string }>) {
+      this.navigation.backWithResult(event.data.genre);
+    },
+  },
+});

package/dist/templates/showcase/pages/basics/pick-genre/state.ts

@@ -0,0 +1,3 @@
+export default {
+  genres: ['Palm-wine', 'Gumbe', 'Milo jazz', 'Afropop', 'Kriofusion', 'Gospel'],
+};

package/dist/templates/showcase/pages/basics/pick-genre/view.dml

@@ -0,0 +1,10 @@
+<View>
+  <Text variant="title">Choose a genre</Text>
+  <Text>Tap one to give it back to the page that opened this one. Going back gives nothing.</Text>
+  <Text variant="caption" tone="muted">This page sets its own background in configs.colors, and its cards follow it. Going back shows the page below in its own colours.</Text>
+  <List>
+    <For each="{{ genres }}" item="genre" key="*this">
+      <ListItem icon="music" title="{{ genre }}" data-genre="{{ genre }}" onTap="pick" />
+    </For>
+  </List>
+</View>

package/dist/templates/showcase/pages/basics/share/concerts.ts

@@ -0,0 +1,31 @@
+export interface Concert {
+  id: string;
+  title: string;
+  place: string;
+  date: string;
+  price: string;
+}
+
+export const CONCERTS: Concert[] = [
+  {
+    id: 'jazz-night',
+    title: 'Freetown Jazz Night',
+    place: 'Family Kingdom, Freetown',
+    date: 'Saturday 24 October',
+    price: 'SLE 150',
+  },
+  {
+    id: 'emmerson-live',
+    title: 'Emmerson Live',
+    place: 'National Stadium, Freetown',
+    date: 'Friday 18 December',
+    price: 'SLE 300',
+  },
+  {
+    id: 'gumbe-night',
+    title: 'Gumbe Night',
+    place: 'Coronation Field, Bo',
+    date: 'Saturday 7 November',
+    price: 'SLE 100',
+  },
+];

package/dist/templates/showcase/pages/basics/share/controller.ts

@@ -0,0 +1,12 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Share links' } },
+  actions: {
+    // buyer is for this person only. The concert page leaves it out of its link.
+    open(_state, event: DataEvent<{ concert: string }>) {
+      this.navigation.push('basics/concert', { concert: event.data.concert, buyer: 'Aminata' });
+    },
+  },
+});

package/dist/templates/showcase/pages/basics/share/state.ts

@@ -0,0 +1,5 @@
+import { CONCERTS } from './concerts';
+
+export default {
+  concerts: CONCERTS,
+};

package/dist/templates/showcase/pages/basics/share/view.dml

@@ -0,0 +1,21 @@
+<View>
+  <Text variant="title">Share links</Text>
+  <Text>Dash's ••• menu has Share. It shares a link to the dot, which opens its first page. A page can let the link open it instead, with some of its options.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">definePage({ share })</Text>
+    <Text variant="caption" tone="muted">share: { options: ['concert'] } lets the link open the page with its concert option. Options not on the list stay out of the link, so nothing private goes in it. Write share out in place: the build reads it.</Text>
+    <Text variant="caption" tone="muted">Open a concert, then tap ••• and Share.</Text>
+    <List>
+      <For each="{{ concerts }}" item="concert" key="id">
+        <ListItem icon="ticket" title="{{ concert.title }}" subtitle="{{ concert.place }} · {{ concert.date }}" data-concert="{{ concert.id }}" onTap="open" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Opening a link</Text>
+    <Text variant="caption" tone="muted">Dash opens the dot on its first page, with the linked page on top, so Back leads home. If the dot is open, it starts again from the link. A page that doesn't share, or that the dot no longer has, opens the first page.</Text>
+    <Notice tone="warning">Anyone can write a link, so check its options in onLoad, as the concert page does.</Notice>
+  </View>
+</View>

package/dist/templates/showcase/pages/{state → basics/state}/controller.ts

@@ -2,6 +2,7 @@ import state from './state';
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'State' } },
   mutations: {
     increment: (state) => {
       const count = state.count + 1;

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

@@ -0,0 +1,46 @@
+<View>
+  <Text variant="title">State, mutations and actions</Text>
+  <Text>A page keeps its data in state.ts. Handlers in controller.ts change it, and the view shows the change. Here, the crowd wants one more song.</Text>
+
+  <View variant="card" gap="small">
+    <Text variant="subtitle">{{ 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="reset" disabled="{{ count === 0 }}">Reset</Button>
+      <Button variant="secondary" onClick="fillUp" disabled="{{ count >= limit }}">Whole crowd</Button>
+      <Button variant="secondary" onClick="undo" disabled="{{ count === 0 }}">Undo</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Mutations</Text>
+    <Text>Cheer and Reset are mutations. A mutation gets the state and returns the changes to make, such as { count: 1 }. It can't wait for anything.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Actions</Text>
+    <Text>Whole crowd and Undo are actions. An action can take several steps, call other handlers with this.mutations and this.actions, and wait for Dash.</Text>
+    <Text>Whole crowd calls the Cheer mutation until the crowd is full. Undo calls this.setState with a function, which gets the latest state.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">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>
+</View>

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

@@ -6,6 +6,7 @@ interface Lookup {
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Carousel' } },
   hooks: {
     // Each artist's photo is the cover of one of their releases, from Apple's catalog.
     async onLoad() {
@@ -33,7 +34,7 @@ export default definePage({
     },
   },
   mutations: {
-    showChapter: (_state, event: DotEvent<{ index: number }>) => ({ chapter: event.detail.index }),
+    showChapter: (_state, event: IndexEvent) => ({ chapter: event.detail.index }),
     back: (state) => ({ chapter: Math.max(state.chapter - 1, 0) }),
     next: (state) => ({ chapter: Math.min(state.chapter + 1, state.chapters.length - 1) }),
   },

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

@@ -18,28 +18,28 @@ export default {
     {
       id: 'drizilik',
       name: 'Drizilik',
-      text: 'Kriofusion rapped in Krio. "Lemonade", from Wait and See, made Rolling Stone\'s best Afropop of 2025.',
+      text: 'Kriofusion rapped in Krio. "Lemonade" is from his album Wait and See.',
       release: 1788321371,
       photo: '',
     },
     {
       id: 'the-therapist',
       name: 'The Therapist',
-      text: 'Had two million TikTok followers before his first single, "Nack", in 2022.',
+      text: 'Had a big following online before his first single, "Nack", in 2022.',
       release: 1612124616,
       photo: '',
     },
     {
       id: 'boii',
       name: 'Boii',
-      text: "Spotify's most-streamed Sierra Leonean woman of 2024. Her first EP, Money or Honey, came in 2025.",
+      text: 'One of the most-streamed Sierra Leonean women of 2024. Her first EP, Money or Honey, came in 2025.',
       release: 1776449163,
       photo: '',
     },
     {
       id: 'apreel',
       name: 'ApreeL',
-      text: '"O\'way", and "Control", a Krio love song that made Rolling Stone\'s best Afropop of 2025.',
+      text: '"O\'way", and "Control", a Krio love song.',
       release: 1831185667,
       photo: '',
     },
@@ -70,7 +70,7 @@ export default {
     },
     {
       title: 'Gen Z',
-      text: 'Drizilik, Boii and ApreeL sing in Krio over Afrobeats, even amapiano, and new stars break through on Audiomack and TikTok.',
+      text: 'Drizilik, Boii and ApreeL sing in Krio over Afrobeats, and new stars break through online.',
     },
   ] as Chapter[],
   chapter: 0,

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

@@ -1,10 +1,11 @@
 <View>
   <Text variant="title">Carousel</Text>
-  <Text>A carousel shows one slide at a time. Swipe, or tap a dot.</Text>
+  <Text>A Carousel shows one slide at a time. Swipe, or tap a dot.</Text>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Gen Z artists. The slides move on their own, start over at the end, and pause when you touch them.</Text>
-    <Carousel autoplay loop interval="3000" gap="medium" effect="scale">
+    <Text variant="subtitle">autoplay, loop and effect</Text>
+    <Text variant="caption" tone="muted">Gen Z artists. The slides move on their own every 3 seconds, start over at the end, and pause when you touch them. effect="scale" shrinks the slides beside the one in view.</Text>
+    <Carousel autoplay loop interval="3000" gap="medium" effect="scale" indicator="dots">
       <For each="{{ artists }}" item="artist" key="id">
         <View variant="card" align="center" gap="medium">
           <If condition="{{ artist.photo }}">
@@ -21,8 +22,9 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">How Salone music grew, from palm-wine to Gen Z. The buttons move the slides, so there are no dots.</Text>
-    <Carousel index="{{ chapter }}" indicator="none" onChange="showChapter">
+    <Text variant="subtitle">index and onChange</Text>
+    <Text variant="caption" tone="muted">How Salone music grew, from palm-wine to Gen Z. The page sets the slide with index, and onChange tells it when you swipe. The buttons move the slides, so indicator="none" hides the dots.</Text>
+    <Carousel index="{{ chapter }}" indicator="none" effect="slide" gap="small" padding="small" onChange="showChapter">
       <For each="{{ chapters }}" item="card" key="title">
         <View variant="card" align="center" gap="medium">
           <Image src="statics/logo.png" alt="" width="48" height="48" />