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

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

@@ -0,0 +1,41 @@
+<View>
+  <Text variant="title">Bindings</Text>
+  <Text>Write {{ syntax }} in view.dml to show a value from the page's state. The view changes when the state does.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Values</Text>
+    <View variant="card" gap="small">
+      <Text>Hello, {{ name }}</Text>
+      <Text>{{ genres.length }} favourite genres. The first is {{ genres[0] }}.</Text>
+      <Button variant="secondary" onClick="switchName">Change the name</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Expressions</Text>
+    <Text variant="caption" tone="muted">Maths, comparisons, ? : and ?? work. Calling a function doesn't: work the value out in the controller, as shout is here.</Text>
+    <View variant="card" gap="small">
+      <Text>{{ tickets }} {{ tickets === 1 ? 'ticket' : 'tickets' }} at Le {{ price }} each: Le {{ tickets * price }}</Text>
+      <Text>Stage name: {{ stageName ?? 'none yet' }}</Text>
+      <Text>Shouted: {{ shout }}!</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">In attributes</Text>
+    <Text variant="caption" tone="muted">A binding can set any attribute, such as disabled, or the text on a button.</Text>
+    <View variant="card" direction="row" wrap gap="small">
+      <Button variant="secondary" onClick="addTicket">Add a ticket</Button>
+      <Button variant="secondary" onClick="removeTicket" disabled="{{ tickets === 0 }}">Remove one</Button>
+      <Button variant="secondary" onClick="toggleStageName">{{ stageName === null ? 'Give a stage name' : 'Drop the stage name' }}</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">env</Text>
+    <Text variant="caption" tone="muted">Values in the dot's .env file. Anyone with the dot can read them, so never put a secret there.</Text>
+    <View variant="card">
+      <Text>{{ greeting }}</Text>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,17 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    // Sells five tickets for the show the button belongs to.
+    sell: (state, event: DotEvent<unknown, { id: string }>) => ({
+      shows: state.shows.map((show) =>
+        show.id === event.data.id ? { ...show, left: Math.max(0, show.left - 5) } : show,
+      ),
+    }),
+    restock: (state) => ({ shows: state.shows.map((show) => ({ ...show, left: 20 })) }),
+    toggleSignedIn: (state) => ({ signedIn: !state.signedIn }),
+    // Changes the list's order. The key keeps each row's place right.
+    shuffle: (state) => ({ genres: [...state.genres.slice(1), state.genres[0]!] }),
+  },
+});

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,42 @@
+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,
+  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: DotEvent<{ value: string }>) => ({
+      song: event.detail.value,
+      ...describe('setSong', event),
+    }),
+    // ...a number for a Slider...
+    setVolume: (_state, event: DotEvent<{ value: number }>) => ({
+      volume: event.detail.value,
+      ...describe('setVolume', event),
+    }),
+    // ...and checked for a Switch.
+    setLoud: (_state, event: DotEvent<{ checked: boolean }>) => ({
+      loud: event.detail.checked,
+      ...describe('setLoud', event),
+    }),
+    // `data` holds the element's data- attributes, as text.
+    play: (_state, event: DotEvent<unknown, { 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.</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.</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,36 @@
+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,
+  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');
+    },
+  },
+  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,32 @@
+<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">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,33 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  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');
+    },
+  },
+});

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

@@ -0,0 +1,9 @@
+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: '',
+};

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

@@ -0,0 +1,37 @@
+<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>

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}/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" />

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

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

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

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

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

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