@monimesl/dot-cli 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/templates/showcase/dot.ts

@@ -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',
@@ -47,16 +50,31 @@ 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/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/forms/view.dml

@@ -90,7 +90,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. Put it last in the page's View.</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/layout/view.dml

@@ -111,6 +111,19 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">Cards in a Scroll</Text>
+    <Text variant="caption" tone="muted">A Scroll leaves room above and below for a low shadow, so a card's shadow isn't cut. A high shadow needs more than that, so use low here. paddingStart and paddingEnd give the first and last card room at the sides.</Text>
+    <Scroll gap="medium" paddingStart="medium" paddingEnd="medium">
+      <For each="{{ releases }}" item="release" key="id">
+        <View variant="card" elevation="low" border="none" width="144" gap="none">
+          <Text weight="medium" maxLines="1">{{ release.title }}</Text>
+          <Text variant="caption" tone="muted">{{ release.year }}</Text>
+        </View>
+      </For>
+    </Scroll>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">Grid</Text>
     <Text variant="caption" tone="muted">A Grid keeps its columns the same width, 4 unless columns says. A GridItem shows an icon or a picture, with a label and an optional badge.</Text>

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

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  // This page has its own tabs at the bottom, so it hides Dash's. Dash brings them back on leaving.
+  configs: { navigationBar: { title: 'Pinned bars' }, tabBar: { hidden: true } },
+  mutations: {
+    chooseTab: (_state, event: ValueEvent) => ({ tab: event.detail.value }),
+  },
+});

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

@@ -0,0 +1,25 @@
+export default {
+  tab: 'shows',
+  shows: [
+    { id: 'lumley', title: 'Lumley Beach Sundown', place: 'Lumley Beach, Freetown', day: 'Fri' },
+    { id: 'aberdeen', title: 'Aberdeen Live', place: 'Aberdeen, Freetown', day: 'Fri' },
+    { id: 'wilberforce', title: 'Hilltop Sessions', place: 'Wilberforce, Freetown', day: 'Sat' },
+    { id: 'bo', title: 'Bo Town Jam', place: 'Coronation Field, Bo', day: 'Sat' },
+    { id: 'kenema', title: 'Eastern Beats', place: 'Kenema', day: 'Sat' },
+    { id: 'makeni', title: 'Makeni Nights', place: 'Wusum Stadium, Makeni', day: 'Sun' },
+    { id: 'tokeh', title: 'Tokeh Sands', place: 'Tokeh Beach', day: 'Sun' },
+    { id: 'kono', title: 'Koidu Block Party', place: 'Koidu, Kono', day: 'Sun' },
+    { id: 'bonthe', title: 'Bonthe Island Drums', place: 'Bonthe, Sherbro Island', day: 'Sun' },
+    { id: 'monrovia', title: 'Mano River Night', place: 'Sinkor, Monrovia', day: 'Mon' },
+  ],
+  saved: [
+    { id: 'lumley', title: 'Lumley Beach Sundown', place: 'Lumley Beach, Freetown' },
+    { id: 'bo', title: 'Bo Town Jam', place: 'Coronation Field, Bo' },
+  ],
+  venues: [
+    { id: 'national', name: 'National Stadium', town: 'Freetown' },
+    { id: 'bintumani', name: 'Bintumani Hotel', town: 'Freetown' },
+    { id: 'coronation', name: 'Coronation Field', town: 'Bo' },
+    { id: 'wusum', name: 'Wusum Stadium', town: 'Makeni' },
+  ],
+};

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

@@ -0,0 +1,42 @@
+<View>
+  <Pinned edge="top" background="surface" border="subtle" paddingTop="medium" paddingBottom="medium">
+    <Text weight="bold">Salone gig guide</Text>
+  </Pinned>
+
+  <Text variant="title">Pinned bars</Text>
+  <Text>A Pinned keeps its children on an edge of the screen while the page scrolls. Scroll this page: the title above and the tabs below stay put. Put edge="top" first in the page's View, and edge="bottom" last. At the bottom, use a Pinned or a Footer, not both.</Text>
+  <Text variant="caption" tone="muted">The bar reaches past the page's padding to both sides of the screen, and its children line up with the page. background fills the bar, and border draws a line on the side facing the page.</Text>
+  <Text variant="caption" tone="muted">Tabs in a Pinned make the page's own navigation. variant="bar" shares the width equally, with each Tab's icon over its label and its badge on the icon. The page shows the content for the chosen tab, so the state of each tab stays. This page sets tabBar: { hidden: true } in its configs, so Dash's tabs don't show under its own.</Text>
+
+  <If condition="{{ tab === 'shows' }}">
+    <List>
+      <For each="{{ shows }}" item="show" key="id">
+        <ListItem icon="music" title="{{ show.title }}" subtitle="{{ show.place }}">
+          <Badge>{{ show.day }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </If>
+  <ElseIf condition="{{ tab === 'saved' }}">
+    <List>
+      <For each="{{ saved }}" item="show" key="id">
+        <ListItem icon="heart" title="{{ show.title }}" subtitle="{{ show.place }}" />
+      </For>
+    </List>
+  </ElseIf>
+  <Else>
+    <List>
+      <For each="{{ venues }}" item="venue" key="id">
+        <ListItem icon="home" title="{{ venue.name }}" subtitle="{{ venue.town }}" />
+      </For>
+    </List>
+  </Else>
+
+  <Pinned edge="bottom" background="surface" border="subtle" paddingBottom="medium">
+    <Tabs variant="bar" value="{{ tab }}" onChange="chooseTab">
+      <Tab value="shows" label="Shows" icon="music" />
+      <Tab value="saved" label="Saved" icon="heart" badge="{{ saved.length }}" />
+      <Tab value="venues" label="Venues" icon="location" />
+    </Tabs>
+  </Pinned>
+</View>

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

@@ -39,8 +39,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="subtitle">Theme colours</Text>
-    <Text variant="caption" tone="muted">The theme in dot.ts can set primary, background, surface, text, muted, border and subtle, for light and dark. Left out, they're Dash's. The theme can also name its own colours, such as gold and ink here. Use them as a background or a text tone.</Text>
+    <Text variant="subtitle">The dot's own colours</Text>
+    <Text variant="caption" tone="muted">The theme in dot.ts can name its own colours, such as gold and ink here. Use them as a background or a text tone. The Theme page has the rest of the theme.</Text>
     <View direction="row" gap="small" align="center">
       <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
         <Text weight="medium" tone="ink">Gold member</Text>
@@ -63,6 +63,41 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">elevation</Text>
+    <Text variant="caption" tone="muted">A shadow lifts a box off the page. low suits a card, and high something that floats over others.</Text>
+    <View direction="row" gap="large" padding="medium">
+      <View grow variant="card" elevation="low" border="none" align="center">
+        <Text>low</Text>
+      </View>
+      <View grow variant="card" elevation="high" border="none" align="center">
+        <Text>high</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Buttons</Text>
+    <Text variant="caption" tone="muted">variant is primary, secondary, outline or ghost. tone colours a button, such as danger for one that deletes. size is small, medium or large.</Text>
+    <View direction="row" gap="small" wrap>
+      <Button>Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+    </View>
+    <View direction="row" gap="small" wrap>
+      <Button tone="danger">Delete</Button>
+      <Button variant="secondary" tone="success">Mark paid</Button>
+      <Button variant="outline" tone="warning">Remind me</Button>
+      <Button variant="ghost" tone="danger">Cancel</Button>
+    </View>
+    <View direction="row" gap="small" align="center" wrap>
+      <Button size="small" variant="secondary">Small</Button>
+      <Button size="medium" variant="secondary">Medium</Button>
+      <Button size="large" variant="secondary">Large</Button>
+    </View>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">width and height</Text>
     <Text variant="caption" tone="muted">In points, or fill for all the room there is.</Text>

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

@@ -4,11 +4,11 @@
 
   <View gap="small">
     <Text variant="subtitle">Tabs and Chip</Text>
-    <Text variant="caption" tone="muted">Tabs sends onChange with the chosen tab's value in event.detail.value. A Tab's badge shows a count. A Chip is selected only when the page says so. An Input with type="search" and clearable makes a search box.</Text>
+    <Text variant="caption" tone="muted">Tabs sends onChange with the chosen tab's value in event.detail.value. A Tab's icon goes before its label, and its badge shows a count. A Chip is selected only when the page says so. An Input with type="search" and clearable makes a search box.</Text>
     <Tabs variant="underline" value="{{ tab }}" onChange="chooseTab">
       <Tab value="all" label="All" />
-      <Tab value="album" label="Albums" badge="{{ albums }}" />
-      <Tab value="song" label="Songs" badge="{{ songs }}" />
+      <Tab value="album" label="Albums" icon="playlist" badge="{{ albums }}" />
+      <Tab value="song" label="Songs" icon="music" badge="{{ songs }}" />
     </Tabs>
     <Input type="search" placeholder="Search by title" clearable value="{{ query }}" onChange="search" />
     <View direction="row" gap="small" wrap>
@@ -43,7 +43,7 @@
 
   <View gap="small">
     <Text variant="subtitle">variant="segmented"</Text>
-    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region.</Text>
+    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region. For a page's own navigation, variant="bar" is on the Pinned bars page.</Text>
     <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
       <Tab value="home" label="Sierra Leone" />
       <Tab value="abroad" label="Abroad" />

package/dist/templates/showcase/pages/dash/cache/controller.ts

@@ -1,3 +1,5 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import state from './state';
 
 const RECENT = 'recent/';
@@ -16,37 +18,61 @@ export default definePage({
   // and the cache up to 64 MB. A full cache rejects with 'failed'.
   actions: {
     async refresh() {
-      const keys = await this.dash.storage.cache.keys();
-      const recent: string[] = [];
-      for (const key of keys.filter((each) => each.startsWith(RECENT))) {
-        // get gives null for a key that's missing or expired.
-        recent.push((await this.dash.storage.cache.get<string>(key)) ?? '');
+      try {
+        const keys = await this.dash.storage.cache.keys();
+        const recent: string[] = [];
+        for (const key of keys.filter((each) => each.startsWith(RECENT))) {
+          // get gives null for a key that's missing or expired.
+          recent.push((await this.dash.storage.cache.get<string>(key)) ?? '');
+        }
+        const hasGenre = await this.dash.storage.cache.exists(GENRE);
+        this.setState({
+          recent,
+          genre: hasGenre ? ((await this.dash.storage.cache.get<string>(GENRE)) ?? '') : '',
+          keys: keys.join(', '),
+        });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
       }
-      const hasGenre = await this.dash.storage.cache.exists(GENRE);
-      this.setState({
-        recent,
-        genre: hasGenre ? ((await this.dash.storage.cache.get<string>(GENRE)) ?? '') : '',
-        keys: keys.join(', '),
-      });
     },
     // Each view lasts 30 seconds, then the cache forgets it.
     async view(_state, event: DataEvent<{ id: string; name: string }>) {
-      await this.dash.storage.cache.set(`${RECENT}${event.data.id}`, event.data.name, {
-        ttl: RECENT_MILLISECONDS,
-      });
+      try {
+        await this.dash.storage.cache.set(`${RECENT}${event.data.id}`, event.data.name, {
+          ttl: RECENT_MILLISECONDS,
+        });
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     // With no ttl, the genre lasts until it's removed.
     async setGenre(_state, event: ValueEvent) {
-      await this.dash.storage.cache.set(GENRE, event.detail.value);
+      try {
+        await this.dash.storage.cache.set(GENRE, event.detail.value);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async forgetGenre() {
-      await this.dash.storage.cache.remove(GENRE);
+      try {
+        await this.dash.storage.cache.remove(GENRE);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async clear() {
-      await this.dash.storage.cache.clear();
+      try {
+        await this.dash.storage.cache.clear();
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
   },

package/dist/templates/showcase/pages/dash/cache/state.ts

@@ -14,4 +14,5 @@ export default {
   recent: [] as string[],
   genre: '',
   keys: '',
+  note: '',
 };

package/dist/templates/showcase/pages/dash/cache/view.dml

@@ -45,4 +45,8 @@
       </View>
     </View>
   </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
 </View>

package/dist/templates/showcase/pages/dash/files/controller.ts

@@ -1,3 +1,5 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import type { Archive, Song } from './state';
 import state from './state';
 
@@ -18,58 +20,86 @@ export default definePage({
   // there rejects with 'missing', while stat gives null.
   actions: {
     async refresh() {
-      const entries = await this.dash.storage.file.list('', { recursive: true });
-      const songs: Song[] = [];
-      for (const entry of entries) {
-        if (entry.kind === 'file' && entry.path.startsWith('setlist/')) {
-          songs.push({ path: entry.path, text: await this.dash.storage.file.read(entry.path) });
+      try {
+        const entries = await this.dash.storage.file.list('', { recursive: true });
+        const songs: Song[] = [];
+        for (const entry of entries) {
+          if (entry.kind === 'file' && entry.path.startsWith('setlist/')) {
+            songs.push({ path: entry.path, text: await this.dash.storage.file.read(entry.path) });
+          }
         }
+        const archives: Archive[] = entries
+          .filter((entry) => entry.kind === 'folder' && /^archive\/[^/]+$/.test(entry.path))
+          .map((entry) => ({
+            path: entry.path,
+            time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
+          }))
+          .reverse();
+        const documents = entries.filter(
+          (entry) => entry.kind === 'file' && entry.path.startsWith('documents/'),
+        );
+        // In bytes: what the dot's files take, and the most they may take.
+        const { used, quota } = await this.dash.storage.file.usage();
+        const kept = await this.dash.storage.file.stat(PICTURE);
+        this.setState({
+          songs,
+          archives,
+          documents,
+          usage: `${used} bytes used of ${quota / 1024 / 1024} MB`,
+          picture: kept ? (await this.dash.storage.file.open(PICTURE)).url : '',
+        });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
       }
-      const archives: Archive[] = entries
-        .filter((entry) => entry.kind === 'folder' && /^archive\/[^/]+$/.test(entry.path))
-        .map((entry) => ({
-          path: entry.path,
-          time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
-        }))
-        .reverse();
-      const documents = entries.filter(
-        (entry) => entry.kind === 'file' && entry.path.startsWith('documents/'),
-      );
-      // In bytes: what the dot's files take, and the most they may take.
-      const { used, quota } = await this.dash.storage.file.usage();
-      const kept = await this.dash.storage.file.stat(PICTURE);
-      this.setState({
-        songs,
-        archives,
-        documents,
-        usage: `${used} bytes used of ${quota / 1024 / 1024} MB`,
-        picture: kept ? (await this.dash.storage.file.open(PICTURE)).url : '',
-      });
     },
     async save(state) {
-      await this.dash.storage.file.write(`setlist/${Date.now()}.txt`, state.draft);
-      this.setState({ draft: '' });
+      try {
+        await this.dash.storage.file.write(`setlist/${Date.now()}.txt`, state.draft);
+        this.setState({ draft: '', note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     // Moves the whole setlist folder into the archive, under the time it was archived.
     async archive() {
-      await this.dash.storage.file.createFolder('archive');
-      await this.dash.storage.file.move('setlist', `archive/${Date.now()}`);
+      try {
+        await this.dash.storage.file.createFolder('archive');
+        await this.dash.storage.file.move('setlist', `archive/${Date.now()}`);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     // Copies an archived setlist back, in place of the current one. Without overwrite, a path
     // that's taken rejects with 'failed'.
     async copyBack(_state, event: DataEvent<{ path: string }>) {
-      await this.dash.storage.file.copy(event.data.path, 'setlist', { overwrite: true });
+      try {
+        await this.dash.storage.file.copy(event.data.path, 'setlist', { overwrite: true });
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     // A folder with files in it needs recursive.
     async clearSetlist() {
-      await this.dash.storage.file.remove('setlist', { recursive: true });
+      try {
+        await this.dash.storage.file.remove('setlist', { recursive: true });
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async forgetPicture() {
-      await this.dash.storage.file.remove(PICTURE);
+      try {
+        await this.dash.storage.file.remove(PICTURE);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
   },

package/dist/templates/showcase/pages/dash/files/state.ts

@@ -20,4 +20,5 @@ export default {
   picture: '',
   // Files saved into the dot's documents folder, such as a ticket from the dash.media page.
   documents: [] as FileEntry[],
+  note: '',
 };

package/dist/templates/showcase/pages/dash/files/view.dml

@@ -75,4 +75,8 @@
     <Text variant="subtitle">usage</Text>
     <Text>{{ usage }}</Text>
   </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
 </View>

package/dist/templates/showcase/pages/dash/secrets/controller.ts

@@ -1,3 +1,5 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import state from './state';
 
 const SESSION = 'session';
@@ -16,31 +18,49 @@ export default definePage({
   },
   actions: {
     async refresh() {
-      // null if there's no secret by that name.
-      const token = await this.dash.storage.secret.get(SESSION);
-      const signedInAs = await this.dash.storage.cache.get<string>(NAME);
-      this.setState({
-        token: token ? `${token.slice(0, 12)}…` : '',
-        signedInAs: signedInAs ?? '',
-      });
+      try {
+        // null if there's no secret by that name.
+        const token = await this.dash.storage.secret.get(SESSION);
+        const signedInAs = await this.dash.storage.cache.get<string>(NAME);
+        this.setState({
+          token: token ? `${token.slice(0, 12)}…` : '',
+          signedInAs: signedInAs ?? '',
+        });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
     },
     // A value over 4 KB rejects with 'invalid'. A 33rd secret rejects with 'failed', so remove
     // one first.
     async signIn(state) {
-      // A real dot gets its token from its own API, once the person signs in there.
-      const token = `demo-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
-      await this.dash.storage.secret.set(SESSION, token);
-      await this.dash.storage.cache.set(NAME, state.name);
-      this.setState({ name: '' });
+      try {
+        // A real dot gets its token from its own API, once the person signs in there.
+        const token = `demo-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+        await this.dash.storage.secret.set(SESSION, token);
+        await this.dash.storage.cache.set(NAME, state.name);
+        this.setState({ name: '', note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async signOut() {
-      await this.dash.storage.secret.remove(SESSION);
-      await this.dash.storage.cache.remove(NAME);
+      try {
+        await this.dash.storage.secret.remove(SESSION);
+        await this.dash.storage.cache.remove(NAME);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async forgetAll() {
-      await this.dash.storage.secret.clear();
+      try {
+        await this.dash.storage.secret.clear();
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
   },

package/dist/templates/showcase/pages/dash/secrets/state.ts

@@ -2,4 +2,5 @@ export default {
   name: '',
   signedInAs: '',
   token: '',
+  note: '',
 };

package/dist/templates/showcase/pages/dash/secrets/view.dml

@@ -23,4 +23,8 @@
   </View>
 
   <Notice tone="warning" title="Keep keys off the phone">Only the token is a secret here: your name is in the cache. Never put API keys in a dot's code or .env, since anyone with the dot can read them.</Notice>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
 </View>

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

@@ -67,6 +67,12 @@ export default {
           covers: 'configs.colors, setColors, background, primary, surfaces',
           icon: 'water',
         },
+        {
+          page: 'basics/theme',
+          title: 'Theme',
+          covers: 'colors, shape, density, elevation, fonts, components, icons, gradients',
+          icon: 'eye',
+        },
         {
           page: 'basics/share',
           title: 'Share links',
@@ -88,7 +94,7 @@ export default {
         {
           page: 'components/styles',
           title: 'Styles',
-          covers: 'background, border, radius, sizes, theme colours',
+          covers: 'background, border, radius, sizes, elevation, buttons, own colours',
           icon: 'star',
         },
         {
@@ -130,9 +136,21 @@ export default {
         {
           page: 'components/tabs',
           title: 'Tabs and chips',
-          covers: 'Tabs, Tab, Chip',
+          covers: 'Tabs, Tab, Tab icons, Chip',
           icon: 'search',
         },
+        {
+          page: 'components/pinned',
+          title: 'Pinned bars',
+          covers: 'Pinned, Tabs variant="bar"',
+          icon: 'location',
+        },
+        {
+          page: 'components/capture',
+          title: 'Pictures of a View',
+          covers: 'View id, captureView',
+          icon: 'image',
+        },
         {
           page: 'components/forms',
           title: 'Forms',

package/dist/templates/showcase/statics/icons/ticket-stub.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 4h14a2 2 0 0 1 2 2v3a3 3 0 0 0 0 6v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a3 3 0 0 0 0-6V6a2 2 0 0 1 2-2zm4 3v2h1.5V7zm0 4v2h1.5v-2zm0 4v2h1.5v-2z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-cli",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.9",
   "description": "The dotctl command: build mini apps and run them in the simulator",
   "type": "module",
   "repository": {
@@ -24,11 +24,11 @@
   "dependencies": {
     "typescript": "^5.9.3",
     "uqr": "^0.1.3",
-    "@monimesl/dot-compiler": "1.0.0-beta.7",
-    "@monimesl/dot-core": "1.0.0-beta.7",
-    "@monimesl/dot-dml-parser": "1.0.0-beta.7",
-    "@monimesl/dot-script-parser": "1.0.0-beta.7",
-    "@monimesl/dot-simulator": "1.0.0-beta.7"
+    "@monimesl/dot-compiler": "1.0.0-beta.9",
+    "@monimesl/dot-core": "1.0.0-beta.9",
+    "@monimesl/dot-dml-parser": "1.0.0-beta.9",
+    "@monimesl/dot-script-parser": "1.0.0-beta.9",
+    "@monimesl/dot-simulator": "1.0.0-beta.9"
   },
   "devDependencies": {
     "@types/node": "^22.20.4",