@monimesl/dot-cli 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/templates/showcase/.env

@@ -1,3 +1,3 @@
-# Public configuration for the dot. Anyone with the dot can read these variables: never put a
-# secret here. Read them in the service as `env.GREETING`.
+# Public settings for the dot. Code reads each one from `env`, such as `env.GREETING`.
+# They're built into the dot, so anyone who has it can read them. Never put a secret here.
 GREETING=Welcome to Salone Sounds. This message comes from the dot's .env file.

package/dist/templates/showcase/dot.ts

@@ -3,7 +3,7 @@ import { logger } from '@monimesl/dot-runtime';
 import { swatchColors } from './pages/basics/colors/palette';
 
 export default defineDot({
-  // Folders under pages/, as the home page lists them. The first opens when the dot starts.
+  // Each page is a folder under pages/, here in the home page's order. The dot opens on the first.
   pages: [
     'index',
     // How a page works.
@@ -16,6 +16,7 @@ export default defineDot({
     'basics/hooks',
     'basics/bars',
     'basics/colors',
+    'basics/theme',
     'basics/share',
     'basics/concert',
     // What a view can show.
@@ -28,6 +29,8 @@ export default defineDot({
     'components/carousel',
     'components/lists',
     'components/tabs',
+    'components/pinned',
+    'components/capture',
     'components/forms',
     'components/money',
     'components/feedback',
@@ -37,6 +40,7 @@ export default defineDot({
     'dash/system',
     'dash/media',
     'dash/contacts',
+    'dash/reminders',
     'dash/account',
     'dash/payments',
     'dash/crypto',
@@ -46,16 +50,32 @@ export default defineDot({
     'dash/secrets',
     'dash/calls',
   ],
-  // The showcase's own colours, used by name on the Styles page, and the Page colours swatches.
+  // How every page looks. The Theme page explains each setting.
   theme: {
+    // Turn one of these on to see it on every page:
+    // font: 'rounded',
+    // headingFont: 'serif',
+    // headingWeight: 'medium',
+    // textSize: 'large',
+    // shape: 'rounded',
+    // density: 'compact',
+    // elevation: 'raised',
+    // components: { Button: { size: 'large' }, View: { variants: { card: { border: 'none' } } } },
+    // The showcase's own colours, used by name on the Styles page, and the Page colours swatches.
     colors: {
       custom: {
         gold: { light: '#f5c542', dark: '#d4a72c' },
         // Dark text that reads on gold in both light and dark.
         ink: { light: '#1c1c1e', dark: '#1c1c1e' },
+        amber: { light: '#e8952a', dark: '#f0a63a' },
         ...swatchColors(),
       },
     },
+    // The showcase's own icon, an SVG in statics/, used by name like Dot's icons.
+    icons: { 'ticket-stub': 'statics/icons/ticket-stub.svg' },
+    // A gradient between two of the theme's colours, for a View's background.
+    gradients: { goldenHour: { from: 'gold', to: 'amber', direction: 'diagonal' } },
   },
+  // logger() writes each page load, event, navigation and state change to the console.
   plugins: [logger()],
 });

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

@@ -24,8 +24,8 @@ export default definePage({
     },
     togglePainted(state) {
       const painted = !state.painted;
-      // A pale sky by day, the night over Freetown by dark. Undefined puts the theme's back. Cards,
-      // fields and quieter text follow the background, unless the page sets those too.
+      // A pale sky in light mode, the night over Freetown in dark. Undefined puts the theme's back.
+      // Cards, fields and quieter text follow the background, unless the page sets those too.
       if (painted) {
         this.setColors({ background: { light: '#E3F2FD', dark: '#0B1A2E' } });
       } else {

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

@@ -16,12 +16,13 @@
         <Button variant="secondary" onClick="toggleColors">{{ colored ? 'Plain bar' : 'Green bar' }}</Button>
         <Button variant="secondary" onClick="toggleNavigationBar">{{ navigationBarHidden ? 'Show the bar' : 'Hide the bar' }}</Button>
       </View>
+      <Text variant="caption" tone="muted">A title can be up to 60 characters. With the bar hidden, Dash still shows a capsule at the top right with the dot's menu, so keep that corner free.</Text>
     </View>
   </View>
 
   <View gap="small">
     <Text variant="subtitle">setColors</Text>
-    <Text variant="caption" tone="muted">configs.colors or setColors give a page its own colours, for light and dark, such as its background. Dash paints the background behind the page too, makes cards and fields that sit on it, and picks text, bar and status bar colours that read on it. The Page colours page has more.</Text>
+    <Text variant="caption" tone="muted">configs.colors or setColors give a page its own colours, for light and dark, such as its background. Dash picks text and bar colours that read on it. The Page colours page has more.</Text>
     <View variant="card">
       <Button variant="secondary" onClick="togglePainted">{{ painted ? 'Theme background' : 'Sky background' }}</Button>
     </View>

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

@@ -3,11 +3,11 @@ export default {
   syntax: '{{ name }}',
   name: 'Mariama',
   stageName: null as string | null,
-  // Le, in the leone since 2022, when it dropped three zeros.
+  // In leones (SLE), the new leone of 2022.
   price: 150,
   tickets: 4,
   genres: ['kriofusion', 'palm-wine', 'gumbe'],
-  // state.ts runs in the service, so it can read the .env file's values too.
+  // A binding reads only the page's state, so a value from .env goes in it first.
   greeting: env.GREETING,
   // Worked out in the controller, since a binding can't call a function.
   shout: 'MARIAMA',

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

@@ -13,7 +13,7 @@
 
   <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>
+    <Text variant="caption" tone="muted">Maths, comparisons, ? : and ?? work. A binding can't call a function, so 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>
@@ -33,7 +33,7 @@
 
   <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>
+    <Text variant="caption" tone="muted">Values in the dot's .env file, copied into state.ts to show here. Anyone with the dot can read them, so never put a secret there.</Text>
     <View variant="card">
       <Text>{{ greeting }}</Text>
     </View>

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

@@ -31,7 +31,7 @@ export default definePage({
     },
     useCustom(state) {
       const light = state.customLight.trim();
-      // One colour is enough: it's used in dark too.
+      // One colour is enough. It's used in dark mode too.
       const dark = state.customDark.trim() || light;
       if (!HEX_COLOR.test(light) || !HEX_COLOR.test(dark)) {
         this.setState({ customError: 'Write a colour as # and six digits, such as #FFF3E0' });

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

@@ -10,7 +10,7 @@
       <Notice tone="info">Opened for {{ buyer }}. buyer isn't in share's options, so a shared link leaves it out.</Notice>
     </If>
     <Else>
-      <Notice tone="success">Opened from a link: it carried the concert, and nothing else.</Notice>
+      <Notice tone="success">Opened from a link. It carried the concert and nothing else.</Notice>
     </Else>
     <Text variant="caption" tone="muted">Tap ••• then Share. The link opens this concert.</Text>
   </If>

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

@@ -12,7 +12,7 @@ export default definePage({
     }),
     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.
+    // Changes the list's order. The For's key lets each row move with its item.
     shuffle: (state) => ({ genres: [...state.genres.slice(1), state.genres[0]!] }),
   },
 });

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

@@ -18,7 +18,7 @@
 
   <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>
+    <Text variant="caption" tone="muted">item names each show. key names the field that tells the shows apart, so each row stays with its show 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">

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

@@ -14,7 +14,7 @@ export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Events' } },
   mutations: {
-    // No detail: a tap is all there is to know.
+    // A tap has no detail. It only says the tap happened.
     countTap: (state, event: DotEvent) => ({
       taps: state.taps + 1,
       ...describe('countTap', event),

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

@@ -19,7 +19,7 @@
 
   <View gap="small">
     <Text variant="subtitle">Taps</Text>
-    <Text variant="caption" tone="muted">Button raises click. View, ListItem, Link and Chip raise tap.</Text>
+    <Text variant="caption" tone="muted">A Button raises click, so it takes onClick. View, ListItem, Link and Chip raise tap, so they take onTap.</Text>
     <View variant="card" direction="row" align="center" gap="small">
       <Button variant="secondary" onClick="countTap">Tap me</Button>
       <View variant="card" grow onTap="countTap">

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

@@ -16,7 +16,8 @@ export default definePage({
     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.
+    // Runs each time the page comes into view: after onLoad, when a page above it closes, and when
+    // the dot comes back from the background.
     onShow() {
       this.setState((current) => ({ runs: ran(current.runs, 'onShow') }));
     },

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

@@ -9,7 +9,7 @@
         <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>
+    <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>
 
@@ -32,6 +32,6 @@
 
   <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>
+    <Text variant="caption" tone="muted">dot.ts can have hooks too. onLaunch runs once when the dot starts. onError gets any error a page doesn't catch.</Text>
   </View>
 </View>

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

@@ -11,6 +11,7 @@ export default definePage({
       this.setState({ depth, from, trail: `${from} › ${depth}`, options: JSON.stringify(options) });
     },
   },
+  // Only actions have this.navigation, so only they open and close pages.
   actions: {
     openAnother(state) {
       this.navigation.push('basics/navigation', { depth: String(state.depth), trail: state.trail });

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

@@ -22,7 +22,7 @@
 
   <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>
+    <Text variant="caption" tone="muted">Closes this page, or as many as you ask. It never closes the first page. To close the dot, call this.dash.dot.close().</Text>
     <View direction="row" gap="small">
       <Button variant="secondary" onClick="back">Back</Button>
       <Button variant="secondary" onClick="backTwo" disabled="{{ depth < 3 }}">Back two</Button>

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

@@ -5,9 +5,9 @@ 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.
+    // This page's own background, a warm Salone sunset in light mode and the evening after it in
+    // 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: {

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

@@ -1,10 +1,10 @@
 <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>
+  <Text>Dash's menu, ••• (⋮ on Android), 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">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, as the build reads it without running the code.</Text>
     <Text variant="caption" tone="muted">Open a concert, then tap ••• and Share.</Text>
     <List>
       <For each="{{ concerts }}" item="concert" key="id">

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

@@ -2,21 +2,30 @@ import state from './state';
 
 export default definePage({
   initialState: state,
+  // What Dash's bars show on this page. The Bars page has more.
   configs: { navigationBar: { title: 'State' } },
+  // A mutation gets the state and returns only the fields that change. It can't wait, so it can't
+  // call Dash.
   mutations: {
     increment: (state) => {
       const count = state.count + 1;
+      // State is read-only, so make a new list rather than change the old one.
       return { count, taps: [{ id: count }, ...state.taps] };
     },
     reset: () => ({ count: 0, taps: [] }),
   },
+  // An action can wait, call Dash, open pages and run other handlers. It changes the state with
+  // this.setState or a mutation.
   actions: {
     fillUp() {
+      // this.state is the latest state. The state an action gets is from when it started, so it
+      // wouldn't see the cheers this loop adds.
       while (this.state.count < this.state.limit) {
         this.mutations.increment();
       }
     },
     undo() {
+      // setState takes the fields to change, or a function that gets the latest state.
       this.setState((current) => ({ count: current.count - 1, taps: current.taps.slice(1) }));
     },
   },

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

@@ -2,9 +2,12 @@ export interface Tap {
   id: number;
 }
 
+// State is plain data, as in JSON: text, numbers, true and false, null, lists and objects. Each
+// open copy of the page gets its own. For "no value", use null, as setState skips undefined fields.
 export default {
   title: 'cheers for an encore',
   count: 0,
   limit: 5,
+  // `as Tap[]` tells TypeScript what the empty list will hold.
   taps: [] as Tap[],
 };

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

@@ -0,0 +1,28 @@
+import state from './state';
+
+// Sierra Leone's green and blue, darker in light mode so text in them reads on white.
+const FLAG_TONES = {
+  success: { light: '#178a33', dark: '#4cd471' },
+  info: { light: '#0060a8', dark: '#5aa9ff' },
+} as const;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Theme' } },
+  actions: {
+    // A page can't change the theme, but setColors changes its colours, tones included. Undefined
+    // puts the theme's own back.
+    setFlagTones(_state, event: CheckedEvent) {
+      const flagTones = event.detail.checked;
+      this.setState({ flagTones });
+      if (flagTones) {
+        this.setColors(FLAG_TONES);
+      } else {
+        this.setColors({
+          success: { light: undefined, dark: undefined },
+          info: { light: undefined, dark: undefined },
+        });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,4 @@
+export default {
+  // Whether the page uses the flag's green and blue for its tones, in place of the theme's.
+  flagTones: false,
+};

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

@@ -0,0 +1,50 @@
+<View>
+  <Text variant="title">Theme</Text>
+  <Text>A dot has no CSS. The theme in dot.ts sets how every page looks, and a page can't change it while it runs. To see a setting below, turn it on in dot.ts, where a commented line has each one, then reload.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">colors</Text>
+    <Text variant="caption" tone="muted">primary, background, surface, text, muted, border and subtle, and the tones info, success, warning and danger, each for light and dark. A colour left out is Dash's. A page can change its own with setColors, as this switch does for two tones.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" gap="small" wrap>
+        <Button tone="info">Details</Button>
+        <Button tone="success">Pay SLE 120</Button>
+        <Button variant="secondary" tone="danger">Refund</Button>
+      </View>
+      <View direction="row" gap="small" wrap>
+        <Badge tone="info">New</Badge>
+        <Badge tone="success">Paid</Badge>
+        <Badge tone="warning">Due Friday</Badge>
+        <Badge tone="danger">Failed</Badge>
+      </View>
+      <Switch label="Use the flag's green and blue" checked="{{ flagTones }}" onChange="setFlagTones" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">shape, density and elevation</Text>
+    <Text variant="caption" tone="muted">shape is how round corners are: square, subtle, soft (the default) or rounded. density is how much room gaps and padding take: compact, regular (the default) or comfortable. elevation: "raised" gives every card and list a soft shadow in place of its hairline.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">font, headingFont, headingWeight and textSize</Text>
+    <Text variant="caption" tone="muted">font is one of the phone's own fonts, so nothing is downloaded: system (the default), rounded, serif or mono. headingFont and headingWeight give titles their own. textSize, small, regular or large, makes text a tenth smaller or larger, except what's typed into fields, amounts and codes.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">components</Text>
+    <Text variant="caption" tone="muted">Default props for every use of a component, or for one of its variants, so a dot sets its look once. Button: { size: "large" } makes every Button large. View: { variants: { card: { elevation: "low" } } } gives only cards a shadow. A prop in the markup still wins.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">icons and gradients</Text>
+    <Text variant="caption" tone="muted">icons names SVGs in statics/, such as ticket-stub here. They work wherever Dot's icons do, and take the icon's tone. The build refuses an SVG with scripts or links, so export it from your design tool as plain shapes. gradients names a gradient between two of the theme's colours, for a View's background, such as goldenHour.</Text>
+    <View background="goldenHour" radius="large" padding="large" gap="small">
+      <View direction="row" align="center" gap="small">
+        <Icon name="ticket-stub" tone="ink" />
+        <Text weight="bold" tone="ink">Freetown Jazz Night</Text>
+      </View>
+      <Text variant="title" tone="ink">2 tickets</Text>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,25 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Pictures of a View' } },
+  actions: {
+    async capture() {
+      this.setState({ capturing: true, note: '' });
+      try {
+        const picture = await this.captureView('ticket');
+        this.setState({ picture, note: `${Math.round(picture.size / 1024)} KB` });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      } finally {
+        this.setState({ capturing: false });
+      }
+    },
+    async share() {
+      const { picture } = this.state;
+      if (picture) {
+        await this.dash.system.share({ file: picture });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,7 @@
+import type { DotFile } from '@monimesl/dot-runtime';
+
+export default {
+  capturing: false,
+  picture: null as DotFile | null,
+  note: '',
+};

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

@@ -0,0 +1,32 @@
+<View>
+  <Text variant="title">Pictures of a View</Text>
+  <Text>Give a View an id, and this.captureView makes a PNG of it, such as a ticket to share. It draws the whole View, even past the bottom of the screen.</Text>
+
+  <View id="ticket" variant="card" gap="medium">
+    <View direction="row" justify="between" align="center">
+      <Text variant="subtitle">Lumley Beach Sundown</Text>
+      <Icon name="ticket-stub" tone="gold" />
+    </View>
+    <Divider />
+    <DetailRow label="Name" value="Mariama Kamara" />
+    <DetailRow label="Where" value="Lumley Beach, Freetown" />
+    <DetailRow label="When" value="Friday, 6 pm" />
+    <DetailRow label="Paid" value="Le 300" />
+    <View align="center">
+      <QRCode value="SALONE-SOUNDS-4471" />
+    </View>
+  </View>
+
+  <Button loading="{{ capturing }}" onClick="capture">Make a picture</Button>
+  <If condition="{{ note }}">
+    <Text variant="caption" tone="muted">{{ note }}</Text>
+  </If>
+
+  <If condition="{{ picture }}">
+    <View gap="medium">
+      <Text variant="caption" tone="muted">captureView gives back a file, as a download does. Show it with an Image, or pass it to dash.system.share. A new picture of a View replaces the last one. A picture from another site shows only if that site allows CORS.</Text>
+      <Image src="{{ picture.url }}" alt="The ticket as a picture" />
+      <Button variant="secondary" onClick="share">Share the picture</Button>
+    </View>
+  </If>
+</View>

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

@@ -4,7 +4,7 @@
 
   <View gap="small">
     <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>
+    <Text variant="caption" tone="muted">Gen Z artists. autoplay moves the slides every interval, here 3000 milliseconds, and pauses while you touch them. loop goes on from the last slide to the first. 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">
@@ -23,7 +23,7 @@
 
   <View gap="small">
     <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>
+    <Text variant="caption" tone="muted">How Salone music grew, from palm-wine to Gen Z. index sets the slide. When you swipe, onChange sends the new slide's index. The buttons move the slides here, 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">

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

@@ -8,7 +8,8 @@ export default definePage({
     restart: () => ({ progress: 0 }),
     toggleBusy: (state) => ({ busy: !state.busy }),
     toggleLoaded: (state) => ({ loaded: !state.loaded }),
-    // A toast lasts its default time unless the button gives one, in milliseconds.
+    // A button's data-duration, in milliseconds, is how long its Toast stays. Without one, the
+    // Toast stays for its default time.
     showToast: (
       _state,
       event: DataEvent<{ message: string; tone: string; duration?: string }>,

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

@@ -6,9 +6,9 @@ export interface PaymentStep {
   status: StepStatus;
 }
 
-// Sending Le 500 to Fatmata Conteh in Bo.
+// Sending SLE 500 to Fatmata Conteh in Bo.
 const PAYMENT = [
-  { title: 'Paid', text: 'Le 500 from your wallet' },
+  { title: 'Paid', text: 'SLE 500 from your wallet' },
   { title: 'Sent', text: 'On its way to Bo' },
   { title: 'Received', text: 'By Fatmata Conteh' },
 ];

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

@@ -14,7 +14,7 @@
 
   <View gap="small">
     <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>
+    <Text variant="caption" tone="muted">Shows the shape of what's loading, as lines of text, a circle or a box.</Text>
     <View variant="card">
       <If condition="{{ loaded }}">
         <View direction="row" align="center" gap="large">
@@ -65,7 +65,7 @@
     <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>
+      <Button loading="{{ busy }}">{{ busy ? 'Paying…' : 'Pay SLE 300 for two tickets' }}</Button>
       <Switch label="Busy" checked="{{ busy }}" onChange="toggleBusy" />
     </View>
   </View>

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

@@ -3,10 +3,10 @@ import { errorMessage } from '@monimesl/dot-runtime';
 import type { TicketType } from './state';
 import state, { SHOWS, TICKETS } from './state';
 
-// 2 tickets of a Le 1,200 type -> "Le 2,400"
+// 2 tickets of an SLE 1,200 type -> "SLE 2,400"
 function total(tickets: number, ticket: TicketType): string {
   const leones = tickets * TICKETS[ticket].price;
-  return `Le ${leones.toLocaleString('en-US')}`;
+  return `SLE ${leones.toLocaleString('en-US')}`;
 }
 
 export default definePage({

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

@@ -18,7 +18,7 @@ export default {
   // The order, as the summary shows it.
   showName: 'Not chosen yet',
   ticketName: TICKETS.regular.name,
-  total: `Le ${2 * TICKETS.regular.price}`,
+  total: `SLE ${2 * TICKETS.regular.price}`,
   name: '',
   email: '',
   phone: '',

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

@@ -9,13 +9,14 @@
         <Option value="freetown" label="Salone Sounds Live · Freetown" />
         <Option value="bo" label="Palm-wine evening · Bo" />
         <Option value="kenema" label="Gospel night · Kenema" />
+        <Option value="makeni" label="Sold out · Makeni" disabled />
       </Select>
     </View>
   </View>
 
   <View gap="small">
     <Text variant="subtitle">Input</Text>
-    <Text variant="caption" tone="muted">type sets the keyboard: text, email, phone, number or password. prefix and suffix sit inside the field. error shows under it.</Text>
+    <Text variant="caption" tone="muted">type sets the keyboard, such as email, phone, number or password. prefix and suffix sit inside the field. error shows under it, in place of hint. onSubmit comes when the person presses return, here in the promo code.</Text>
     <View variant="card">
       <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" />
@@ -37,9 +38,9 @@
     <Text variant="caption" tone="muted">One choice from a few. A Radio, or the whole group, can be disabled.</Text>
     <View variant="card">
       <RadioGroup label="Ticket" value="{{ ticket }}" disabled="{{ sending }}" 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" />
+        <Radio value="regular" label="Regular · SLE 150" />
+        <Radio value="vip" label="VIP, near the stage · SLE 400" />
+        <Radio value="table" label="Table for four · SLE 1,200" />
         <Radio value="backstage" label="Backstage · sold out" disabled />
       </RadioGroup>
     </View>
@@ -90,7 +91,7 @@
     <Notice tone="danger" title="Not booked">{{ failure }}</Notice>
   </If>
 
-  <Text variant="caption" tone="muted">A Footer keeps its buttons at the bottom of the screen.</Text>
+  <Text variant="caption" tone="muted">A Footer keeps its buttons at the bottom of the screen, on a bar from side to side. Put it last in the page's View.</Text>
   <Footer>
     <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
   </Footer>

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

@@ -4,6 +4,7 @@ export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Icons' } },
   mutations: {
+    // The Toast raises onHide once it goes. Clearing its message lets the same one show again.
     clearToast: () => ({ toast: '' }),
   },
   actions: {