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

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

@@ -1,7 +1,8 @@
-import state from './state';
+import state, { paymentSteps } from './state';
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Feedback' } },
   mutations: {
     advance: (state) => ({ progress: Math.min(100, state.progress + 20) }),
     restart: () => ({ progress: 0 }),
@@ -10,12 +11,22 @@ export default definePage({
     // A toast lasts its default time unless the button gives one, in milliseconds.
     showToast: (
       _state,
-      event: DotEvent<unknown, { message: string; tone: string; duration?: string }>,
+      event: DataEvent<{ message: string; tone: string; duration?: string }>,
     ) => ({
       toast: event.data.message,
       toastTone: event.data.tone,
       toastDuration: event.data.duration ? Number(event.data.duration) : undefined,
     }),
     clearToast: () => ({ toast: '' }),
+    hideTip: () => ({ tipShown: false }),
+    advancePayment: (state) => {
+      const paymentStage = state.paymentStage + 1;
+      return { paymentStage, payment: paymentSteps(paymentStage) };
+    },
+    failPayment: (state) => ({
+      paymentFailed: true,
+      payment: paymentSteps(state.paymentStage, true),
+    }),
+    restartPayment: () => ({ paymentStage: 0, paymentFailed: false, payment: paymentSteps(0) }),
   },
 });

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

@@ -0,0 +1,41 @@
+export type StepStatus = 'done' | 'current' | 'upcoming' | 'failed';
+
+export interface PaymentStep {
+  title: string;
+  text: string;
+  status: StepStatus;
+}
+
+// Sending Le 500 to Fatmata Conteh in Bo.
+const PAYMENT = [
+  { title: 'Paid', text: 'Le 500 from your wallet' },
+  { title: 'Sent', text: 'On its way to Bo' },
+  { title: 'Received', text: 'By Fatmata Conteh' },
+];
+
+// The payment's steps when `stage` of them are done. The next one is under way, or failed.
+export function paymentSteps(stage: number, failed = false): PaymentStep[] {
+  return PAYMENT.map((step, index) => {
+    let status: StepStatus = 'upcoming';
+    if (index < stage) {
+      status = 'done';
+    } else if (index === stage) {
+      status = failed ? 'failed' : 'current';
+    }
+    return { ...step, status };
+  });
+}
+
+export default {
+  progress: 40,
+  busy: false,
+  loaded: false,
+  toast: '',
+  toastTone: 'default',
+  toastDuration: undefined as number | undefined,
+  tipShown: true,
+  // How many steps are done, and whether the next one failed, which ends the payment.
+  paymentStage: 0,
+  paymentFailed: false,
+  payment: paymentSteps(0),
+};

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,11 @@
   </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. With onClose it shows a close button, and the page hides it.</Text>
+    <If condition="{{ tipShown }}">
+      <Notice tone="info" title="Tip" onClose="hideTip">Hold a song to add it to a playlist.</Notice>
+    </If>
     <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 +84,25 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Badges show a status</Text>
+    <Text variant="subtitle">Steps</Text>
+    <Text variant="caption" tone="muted">What happened and what comes next, such as a payment's progress. Each Step is done, current, upcoming or failed.</Text>
+    <View variant="card">
+      <Steps>
+        <For each="{{ payment }}" item="step" key="title">
+          <Step title="{{ step.title }}" text="{{ step.text }}" status="{{ step.status }}" />
+        </For>
+      </Steps>
+      <View direction="row" gap="small">
+        <Button variant="secondary" onClick="advancePayment" disabled="{{ paymentFailed || paymentStage === payment.length }}">Next step</Button>
+        <Button variant="secondary" onClick="failPayment" disabled="{{ paymentFailed || paymentStage === payment.length }}">Fail it</Button>
+        <Button variant="secondary" onClick="restartPayment" disabled="{{ paymentStage === 0 }}">Start over</Button>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <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

@@ -1,45 +1,47 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import type { TicketType } from './state';
 import state, { SHOWS, TICKETS } from './state';
 
-type Typed = DotEvent<{ value: string }>;
-
-// "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;
+// 2 tickets of a Le 1,200 type -> "Le 2,400"
+function total(tickets: number, ticket: TicketType): string {
+  const leones = tickets * TICKETS[ticket].price;
   return `Le ${leones.toLocaleString('en-US')}`;
 }
-type Toggled = DotEvent<{ checked: boolean }>;
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Forms' } },
   mutations: {
-    setShow: (_state, event: Typed) => ({
+    setShow: (_state, event: ValueEvent) => ({
       show: event.detail.value,
       showName: SHOWS[event.detail.value] ?? 'Not chosen yet',
     }),
-    setName: (_state, event: Typed) => ({ name: event.detail.value }),
-    setEmail: (_state, event: Typed) => ({ email: event.detail.value }),
-    setPhone: (_state, event: Typed) => ({ phone: event.detail.value }),
-    setTickets: (state, event: Typed) => ({
+    setName: (_state, event: ValueEvent) => ({ name: event.detail.value }),
+    setEmail: (_state, event: ValueEvent) => ({ email: event.detail.value }),
+    setPhone: (_state, event: ValueEvent) => ({ phone: event.detail.value }),
+    setTickets: (state, event: ValueEvent<number>) => ({
       tickets: event.detail.value,
       total: total(event.detail.value, state.ticket),
     }),
-    setShoutOut: (_state, event: Typed) => ({ shoutOut: event.detail.value }),
-    setTicket: (state, event: DotEvent<{ value: TicketType }>) => ({
+    setShoutOut: (_state, event: ValueEvent) => ({ shoutOut: event.detail.value }),
+    setPromo: (_state, event: ValueEvent) => ({ promo: event.detail.value }),
+    setChairs: (_state, event: ValueEvent<number>) => ({ chairs: event.detail.value }),
+    setTip: (_state, event: ValueEvent<number>) => ({ tip: event.detail.value }),
+    setTicket: (state, event: ValueEvent<TicketType>) => ({
       ticket: event.detail.value,
       ticketName: TICKETS[event.detail.value].name,
       total: total(state.tickets, event.detail.value),
     }),
-    setETickets: (_state, event: Toggled) => ({ eTickets: event.detail.checked }),
-    setAgreed: (_state, event: Toggled) => ({ agreed: event.detail.checked }),
+    setETickets: (_state, event: CheckedEvent) => ({ eTickets: event.detail.checked }),
+    setAgreed: (_state, event: CheckedEvent) => ({ agreed: event.detail.checked }),
   },
   actions: {
     async send(state) {
-      const count = Number(state.tickets);
+      const count = state.tickets;
       const errors = {
         show: state.show ? '' : 'Choose a show',
         phone: state.phone.length < 8 ? 'Enter a phone number, such as 76 123456' : '',
-        tickets: count >= 1 && count <= 10 ? '' : 'Buy from 1 to 10 tickets',
         shoutOut: state.shoutOut.includes('http')
           ? 'Links are not read out. Write words only.'
           : '',
@@ -60,9 +62,11 @@ export default definePage({
           sent: `${count} ${count === 1 ? 'ticket' : 'tickets'}, sent to +232 ${phone}`,
         });
       } catch (error) {
-        this.setState({ failure: (error as Error).message });
+        this.setState({ failure: errorMessage(error) });
+      } finally {
+        // However the request ends, the button stops spinning and takes taps again.
+        this.setState({ sending: false });
       }
-      this.setState({ sending: false });
     },
   },
 });

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

@@ -18,16 +18,19 @@ export default {
   // The order, as the summary shows it.
   showName: 'Not chosen yet',
   ticketName: TICKETS.regular.name,
-  total: 'Le 0',
+  total: `Le ${2 * TICKETS.regular.price}`,
   name: '',
   email: '',
   phone: '',
-  tickets: '',
+  tickets: 2,
+  promo: '',
+  chairs: 2,
+  tip: 20,
   shoutOut: '',
   ticket: 'regular' as TicketType,
   eTickets: true,
   agreed: false,
-  errors: { show: '', phone: '', tickets: '', shoutOut: '' },
+  errors: { show: '', phone: '', shoutOut: '' },
   sending: false,
   sent: '',
   failure: '',

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

@@ -0,0 +1,97 @@
+<View>
+  <Text variant="title">Forms</Text>
+  <Text>Buy tickets for a show. Each field sends onChange as you use it, and the page keeps its value in state. The page checks the form when you send it.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Select</Text>
+    <View variant="card">
+      <Select label="Show" placeholder="Choose a show" hint="Every show has the same prices" value="{{ show }}" error="{{ errors.show }}" disabled="{{ sending }}" onChange="setShow">
+        <Option value="freetown" label="Salone Sounds Live · Freetown" />
+        <Option value="bo" label="Palm-wine evening · Bo" />
+        <Option value="kenema" label="Gospel night · Kenema" />
+      </Select>
+    </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>
+    <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" />
+      <Input label="Phone" type="phone" prefix="+232" placeholder="76 123456" value="{{ phone }}" error="{{ errors.phone }}" onChange="setPhone" />
+      <Input label="Promo code" type="password" placeholder="Hidden as you type" value="{{ promo }}" onChange="setPromo" onSubmit="send" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Stepper</Text>
+    <Text variant="caption" tone="muted">A count changed one at a time. min and max keep it in range, so there's nothing to check.</Text>
+    <View variant="card">
+      <Stepper label="Tickets" min="1" max="10" hint="At most 10 for each person" value="{{ tickets }}" onChange="setTickets" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">RadioGroup and Radio</Text>
+    <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="backstage" label="Backstage · sold out" disabled />
+      </RadioGroup>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">TextArea</Text>
+    <View variant="card">
+      <TextArea label="Shout-out" placeholder="A message for the band, read out on the night" rows="3" maxLength="140" hint="{{ ticket === 'regular' ? 'Shout-outs come with VIP and table tickets' : shoutOut.length + ' of 140' }}" value="{{ shoutOut }}" error="{{ errors.shoutOut }}" disabled="{{ ticket === 'regular' }}" onChange="setShoutOut" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Slider</Text>
+    <Text variant="caption" tone="muted">A number between min and max, in steps. showValue shows it beside the label.</Text>
+    <View variant="card">
+      <Slider label="Chairs near the stage" min="0" max="10" showValue value="{{ chairs }}" disabled="{{ ticket === 'regular' }}" hint="{{ ticket === 'regular' ? 'Chairs come with VIP and table tickets' : '' }}" onChange="setChairs" />
+      <Slider label="Tip for the band, in leones" min="0" max="100" step="10" showValue value="{{ tip }}" onChange="setTip" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Switch and Checkbox</Text>
+    <View variant="card">
+      <Switch label="Email me the e-tickets" checked="{{ eTickets }}" onChange="setETickets" />
+      <Switch label="Text me on the night" disabled />
+      <Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
+      <Checkbox label="I'm over 18" checked disabled />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Your order</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="Show" value="{{ showName }}" />
+      <DetailRow label="Ticket" value="{{ ticketName }}" />
+      <DetailRow label="How many" value="{{ tickets }}" />
+      <Divider />
+      <DetailRow label="Total" value="{{ total }}" weight="bold" paddingTop="medium" />
+      <DetailRow label="Paid" value="{{ sent ? 'Yes' : 'Not yet' }}" tone="{{ sent ? 'success' : 'warning' }}" />
+    </View>
+  </View>
+
+  <If condition="{{ sent }}">
+    <Notice tone="success" title="Booked">{{ sent }}</Notice>
+  </If>
+  <If condition="{{ failure }}">
+    <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>
+  <Footer>
+    <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
+  </Footer>
+</View>

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

@@ -0,0 +1,15 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Icons' } },
+  mutations: {
+    clearToast: () => ({ toast: '' }),
+  },
+  actions: {
+    async copyName(_state, event: DataEvent<{ name: string }>) {
+      await this.dash.system.copyText(event.data.name);
+      this.setState({ toast: `Copied "${event.data.name}"` });
+    },
+  },
+});

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

@@ -0,0 +1,75 @@
+export default {
+  // Every icon name, as Icon's name, and ListItem's, Chip's, GridItem's and EmptyState's icon take.
+  names: [
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'bank',
+    'bell',
+    'bolt',
+    'calendar',
+    'card',
+    'cart',
+    'cash',
+    'check',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'clock',
+    'close',
+    'copy',
+    'download',
+    'edit',
+    'error',
+    'external-link',
+    'eye',
+    'eye-off',
+    'file',
+    'gift',
+    'globe',
+    'grid',
+    'headphones',
+    'heart',
+    'help',
+    'history',
+    'home',
+    'image',
+    'info',
+    'link',
+    'list',
+    'location',
+    'lock',
+    'logout',
+    'mail',
+    'microphone',
+    'minus',
+    'mobile',
+    'more',
+    'music',
+    'phone',
+    'playlist',
+    'plus',
+    'qr-code',
+    'receipt',
+    'refresh',
+    'search',
+    'send',
+    'settings',
+    'share',
+    'star',
+    'success',
+    'ticket',
+    'trash',
+    'upload',
+    'user',
+    'users',
+    'video',
+    'wallet',
+    'warning',
+    'water',
+    'wifi',
+  ],
+  toast: '',
+};

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

@@ -0,0 +1,36 @@
+<View>
+  <Text variant="title">Icons</Text>
+  <Text>Icon shows a small picture by its name. Lists, chips, grids and empty states take the same names.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">size and tone</Text>
+    <View variant="card" direction="row" wrap gap="large" align="center">
+      <Icon name="music" size="small" />
+      <Icon name="music" size="medium" />
+      <Icon name="music" size="large" />
+      <Icon name="info" tone="info" />
+      <Icon name="success" tone="success" />
+      <Icon name="warning" tone="warning" />
+      <Icon name="error" tone="danger" />
+      <Icon name="star" tone="muted" />
+      <Icon name="heart" tone="default" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Every name</Text>
+    <Text variant="caption" tone="muted">Tap one to copy its name.</Text>
+    <View variant="card">
+      <Grid columns="3" gap="medium">
+        <For each="{{ names }}" item="name" key="*this">
+          <View align="center" gap="small" padding="small" data-name="{{ name }}" onTap="copyName">
+            <Icon name="{{ name }}" />
+            <Text variant="caption" tone="muted" align="center">{{ name }}</Text>
+          </View>
+        </For>
+      </Grid>
+    </View>
+  </View>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

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

@@ -1,3 +1,5 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import state from './state';
 
 // AUDACITY's id in Apple's catalog; its cover's address can change, so the page looks it up.
@@ -9,6 +11,7 @@ interface Lookup {
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Images' } },
   hooks: {
     async onLoad() {
       try {
@@ -24,7 +27,7 @@ export default definePage({
             : { coverNote: "Apple's catalog has no cover for it" },
         );
       } catch (error) {
-        this.setState({ coverNote: (error as Error).message });
+        this.setState({ coverNote: errorMessage(error) });
       }
     },
   },

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

@@ -0,0 +1,83 @@
+<View>
+  <Text variant="title">Images</Text>
+  <Text>Image shows a picture from the dot's statics/ folder or from the web. Give it alt text, which screen readers say aloud.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">From statics/</Text>
+    <Text variant="caption" tone="muted">These pictures come with the dot, and the build checks each one exists.</Text>
+    <View variant="card" direction="row" align="end" gap="large">
+      <Image src="statics/logo.png" alt="Small logo" width="24" height="24" />
+      <Image src="statics/logo.png" alt="Medium logo" width="48" height="48" />
+      <Image src="statics/logo.png" alt="Large logo" width="96" height="96" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">From the web</Text>
+    <Text variant="caption" tone="muted">The cover of Drizilik's album AUDACITY. With aspect="1:1" and no width, it fills the card.</Text>
+    <View variant="card" gap="small">
+      <If condition="{{ cover }}">
+        <Image src="{{ cover }}" alt="The cover of AUDACITY, by Drizilik" aspect="1:1" />
+        <Text weight="medium">AUDACITY</Text>
+        <Text variant="caption" tone="muted">Drizilik raps mostly in Krio, in a style called Kriofusion. He won Best Male Artist at the 2026 SLeDU awards.</Text>
+      </If>
+      <ElseIf condition="{{ coverNote }}">
+        <Text variant="caption" tone="muted">{{ coverNote }}</Text>
+      </ElseIf>
+      <Else>
+        <Skeleton shape="box" height="280" />
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">shape and fit</Text>
+    <Text variant="caption" tone="muted">Rounded, square or circle. fit="contain" shows the whole picture; cover, the default, fills the box.</Text>
+    <View variant="card" direction="row" align="center" gap="large">
+      <Image src="statics/logo.png" alt="Rounded" width="56" height="56" shape="rounded" />
+      <Image src="statics/logo.png" alt="Square" width="56" height="56" shape="square" />
+      <Image src="statics/logo.png" alt="Circle" width="56" height="56" shape="circle" />
+      <Image src="statics/logo.png" alt="Contained" width="96" height="56" fit="contain" />
+      <Image src="statics/logo.png" alt="Covered" width="96" height="56" fit="cover" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onLoad</Text>
+    <Text variant="caption" tone="muted">Tells the page the picture's own size once it loads. The size on screen comes from state here.</Text>
+    <View variant="card" gap="small">
+      <Image src="statics/logo.png" alt="Logo" width="{{ size }}" height="{{ size }}" onLoad="logoLoaded" />
+      <Text>{{ size }} × {{ size }} on screen, {{ loaded }} in the file</Text>
+      <View direction="row" gap="small">
+        <Button variant="secondary" onClick="shrink" disabled="{{ size <= 16 }}">Smaller</Button>
+        <Button variant="secondary" onClick="grow" disabled="{{ size >= 128 }}">Bigger</Button>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onError</Text>
+    <Text variant="caption" tone="muted">Tells the page why a picture didn't load.</Text>
+    <View variant="card">
+      <If condition="{{ failure }}">
+        <Text>{{ failure }}</Text>
+      </If>
+      <Else>
+        <Image src="{{ missing }}" alt="" width="48" height="48" onError="missingFailed" />
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Avatar</Text>
+    <Text variant="caption" tone="muted">A person's photo, round. Without one, or when it fails to load, their initials show.</Text>
+    <View variant="card" direction="row" align="center" gap="large">
+      <Avatar name="Salone Sounds" image="statics/logo.png" size="large" />
+      <Avatar name="Mariama Kamara" size="large" />
+      <Avatar name="Fatmata Conteh" />
+      <Avatar name="Boii" size="small" />
+      <Avatar name="Kao Denero" image="{{ missing }}" />
+    </View>
+    <Text variant="caption" tone="muted">The last one's picture is missing, so it shows KD.</Text>
+  </View>
+</View>

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

@@ -12,6 +12,7 @@ interface Lookup {
 
 export default definePage({
   initialState: state,
+  configs: { navigationBar: { title: 'Layout' } },
   hooks: {
     // The shelf's covers come from Apple's catalog.
     async onLoad() {
@@ -44,10 +45,10 @@ export default definePage({
     nextAlign: (state) => ({ align: after(ALIGNS, state.align) }),
     nextGap: (state) => ({ gap: after(SPACES, state.gap) }),
     toggleWrap: (state) => ({ wrap: !state.wrap }),
-    openSection: (_state, event: DotEvent<unknown, { name: string }>) => ({
+    openSection: (_state, event: DataEvent<{ name: string }>) => ({
       section: event.data.name,
     }),
-    showFirst: (_state, event: DotEvent<{ index: number }>) => ({ first: event.detail.index }),
+    showFirst: (_state, event: IndexEvent) => ({ first: event.detail.index }),
     shelfStart: () => ({ first: 0 }),
     shelfEnd: (state) => ({ first: state.releases.length - 1 }),
     playSong: (state) => ({ playing: !state.playing }),