@monimesl/dot-cli 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/templates/showcase/.env

@@ -0,0 +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`.
+GREETING=Welcome to Salone Sounds. This message comes from the dot's .env file.

package/dist/templates/showcase/dot.ts

@@ -0,0 +1,60 @@
+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.
+  pages: [
+    'index',
+    // How a page works.
+    'basics/state',
+    'basics/bindings',
+    'basics/control-flow',
+    'basics/events',
+    'basics/navigation',
+    'basics/pick-genre',
+    'basics/hooks',
+    'basics/bars',
+    'basics/colors',
+    'basics/share',
+    'basics/concert',
+    // What a view can show.
+    'components/layout',
+    'components/styles',
+    'components/text',
+    'components/icons',
+    'components/reading',
+    'components/images',
+    'components/carousel',
+    'components/lists',
+    'components/tabs',
+    'components/forms',
+    'components/money',
+    'components/feedback',
+    'components/sheets',
+    // The phone's features, through this.dash.
+    'dash/ui',
+    'dash/system',
+    'dash/media',
+    'dash/contacts',
+    'dash/account',
+    'dash/crypto',
+    'dash/network',
+    'dash/files',
+    'dash/cache',
+    'dash/secrets',
+    'dash/calls',
+  ],
+  // The showcase's own colours, used by name on the Styles page, and the Page colours swatches.
+  theme: {
+    colors: {
+      custom: {
+        gold: { light: '#f5c542', dark: '#d4a72c' },
+        // Dark text that reads on gold in both light and dark.
+        ink: { light: '#1c1c1e', dark: '#1c1c1e' },
+        ...swatchColors(),
+      },
+    },
+  },
+  plugins: [logger()],
+});

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

@@ -0,0 +1,47 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  // What Dash's bars show when the page opens, on top of the configs in dot.ts.
+  configs: { navigationBar: { title: 'Bars' } },
+  mutations: {
+    setTitle: (_state, event: ValueEvent) => ({ title: event.detail.value }),
+  },
+  actions: {
+    // While the page runs, setNavigationBar changes what configs set.
+    showTitle(state) {
+      this.setNavigationBar({ title: state.title || undefined });
+    },
+    toggleColors(state) {
+      const colored = !state.colored;
+      // Undefined puts Dash's own colours back. Without a textColor, Dash picks text that reads on
+      // the bar.
+      this.setNavigationBar({
+        // The green of Sierra Leone's flag.
+        backgroundColor: colored ? '#1EB53A' : undefined,
+      });
+      this.setState({ colored });
+    },
+    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.
+      if (painted) {
+        this.setColors({ background: { light: '#E3F2FD', dark: '#0B1A2E' } });
+      } else {
+        this.setColors({ background: { light: undefined, dark: undefined } });
+      }
+      this.setState({ painted });
+    },
+    toggleNavigationBar(state) {
+      const navigationBarHidden = !state.navigationBarHidden;
+      this.setNavigationBar({ hidden: navigationBarHidden });
+      this.setState({ navigationBarHidden });
+    },
+    toggleTabBar(state) {
+      const tabBarHidden = !state.tabBarHidden;
+      this.setTabBar({ hidden: tabBarHidden });
+      this.setState({ tabBarHidden });
+    },
+  },
+});

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

@@ -0,0 +1,7 @@
+export default {
+  title: 'Bars',
+  colored: false,
+  painted: false,
+  navigationBarHidden: false,
+  tabBarHidden: false,
+};

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

@@ -0,0 +1,36 @@
+<View>
+  <Text variant="title">Dash's bars</Text>
+  <Text>Dash shows a navigation bar above the dot and a tab bar below it. Each page can change them. Going back shows the page below with its own bars, and leaving the dot brings back Dash's.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">configs</Text>
+    <Text variant="caption" tone="muted">definePage({ configs }) sets the bars when the page opens. This page's title is "Bars". defineDot({ configs }) sets them for every page.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">setNavigationBar</Text>
+    <View variant="card" gap="small">
+      <Input label="Title" placeholder="Bars" value="{{ title }}" maxLength="30" onChange="setTitle" onSubmit="showTitle" />
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" onClick="showTitle">Use this title</Button>
+        <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>
+    </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>
+    <View variant="card">
+      <Button variant="secondary" onClick="togglePainted">{{ painted ? 'Theme background' : 'Sky background' }}</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">setTabBar</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="toggleTabBar">{{ tabBarHidden ? 'Show the tab bar' : 'Hide the tab bar' }}</Button>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,15 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Bindings' } },
+  mutations: {
+    addTicket: (state) => ({ tickets: state.tickets + 1 }),
+    removeTicket: (state) => ({ tickets: Math.max(0, state.tickets - 1) }),
+    toggleStageName: (state) => ({ stageName: state.stageName === null ? 'Lady M' : null }),
+    switchName: (state) => {
+      const name = state.name === 'Mariama' ? 'Fatmata' : 'Mariama';
+      return { name, shout: name.toUpperCase() };
+    },
+  },
+});

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

@@ -0,0 +1,14 @@
+export default {
+  // Kept in state, so the view shows the braces rather than reading them as a binding.
+  syntax: '{{ name }}',
+  name: 'Mariama',
+  stageName: null as string | null,
+  // Le, in the leone since 2022, when it dropped three zeros.
+  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.
+  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

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

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

@@ -0,0 +1,112 @@
+import type { HexColor, PageColors, SchemeColor } from '@monimesl/dot-runtime';
+
+import type { Swatch } from './palette';
+import { BACKGROUNDS, BAR_COLORS, OWN_SURFACES, PRIMARIES } from './palette';
+import state from './state';
+
+const HEX_COLOR = /^#[0-9a-fA-F]{6}$/;
+// Undefined for light and dark puts the theme's colour back.
+const THEME: SchemeColor = { light: undefined, dark: undefined };
+
+interface Choices {
+  background: string;
+  primary: string;
+  surfaces: string;
+  customLight: string;
+  customDark: string;
+}
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Page colours' } },
+  mutations: {
+    setCustomLight: (_state, event: ValueEvent) => ({ customLight: event.detail.value }),
+    setCustomDark: (_state, event: ValueEvent) => ({ customDark: event.detail.value }),
+  },
+  actions: {
+    chooseBackground(state, event: DataEvent<{ name: string }>) {
+      const choices = { ...state, background: event.data.name };
+      this.setColors(colorsFor(choices));
+      this.setState({ background: choices.background, code: codeFor(choices) });
+    },
+    useCustom(state) {
+      const light = state.customLight.trim();
+      // One colour is enough: it's used in dark 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' });
+        return;
+      }
+      const choices = { ...state, background: 'custom', customLight: light, customDark: dark };
+      this.setColors(colorsFor(choices));
+      this.setState({ background: 'custom', customError: '', code: codeFor(choices) });
+    },
+    choosePrimary(state, event: DataEvent<{ name: string }>) {
+      const choices = { ...state, primary: event.data.name };
+      this.setColors(colorsFor(choices));
+      this.setState({ primary: choices.primary, code: codeFor(choices) });
+    },
+    chooseSurfaces(state, event: ValueEvent) {
+      const choices = { ...state, surfaces: event.detail.value };
+      this.setColors(colorsFor(choices));
+      this.setState({ surfaces: choices.surfaces, code: codeFor(choices) });
+    },
+    chooseNavigationBar(_state, event: DataEvent<{ name: string }>) {
+      const color = BAR_COLORS.find((swatch) => swatch.name === event.data.name);
+      // Without a textColor, Dash picks text that reads on the bar.
+      this.setNavigationBar({ backgroundColor: color?.light });
+      this.setState({ navigationBar: event.data.name });
+    },
+    reset(state) {
+      const choices = { ...state, background: '', primary: '', surfaces: 'derived' };
+      this.setColors(colorsFor(choices));
+      this.setNavigationBar({ backgroundColor: undefined });
+      this.setState({
+        background: '',
+        primary: '',
+        surfaces: 'derived',
+        navigationBar: '',
+        customError: '',
+        code: codeFor(choices),
+      });
+    },
+  },
+});
+
+// Every colour the page can change here, so one put back to the theme's is cleared too.
+function colorsFor(choices: Choices): PageColors {
+  const own = choices.surfaces === 'own';
+  return {
+    background: backgroundFor(choices),
+    primary: swatchFor(PRIMARIES, choices.primary),
+    surface: own ? OWN_SURFACES.surface : THEME,
+    muted: own ? OWN_SURFACES.muted : THEME,
+    border: own ? OWN_SURFACES.border : THEME,
+  };
+}
+
+function backgroundFor(choices: Choices): SchemeColor {
+  if (choices.background === 'custom') {
+    return { light: choices.customLight as HexColor, dark: choices.customDark as HexColor };
+  }
+  return swatchFor(BACKGROUNDS, choices.background);
+}
+
+function swatchFor(swatches: readonly Swatch[], name: string): SchemeColor {
+  const swatch = swatches.find((candidate) => candidate.name === name);
+  if (!swatch) {
+    return THEME;
+  }
+  return { light: swatch.light, dark: swatch.dark };
+}
+
+// The colours chosen, one line each, as they go in a setColors call.
+function codeFor(choices: Choices): string[] {
+  const lines: string[] = [];
+  for (const [name, color] of Object.entries(colorsFor(choices))) {
+    if (color?.light) {
+      lines.push(`${name}: { light: '${color.light}', dark: '${color.dark}' },`);
+    }
+  }
+  return lines;
+}

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

@@ -0,0 +1,52 @@
+import type { HexColor, SchemeColor } from '@monimesl/dot-runtime';
+
+// Colours the Page colours page offers, each for light and dark. dot.ts names them in the theme too,
+// so the page can show a swatch of each.
+export interface Swatch {
+  name: string;
+  label: string;
+  light: HexColor;
+  dark: HexColor;
+}
+
+export const BACKGROUNDS: Swatch[] = [
+  { name: 'sky', label: 'Freetown sky', light: '#E3F2FD', dark: '#0B1A2E' },
+  { name: 'sand', label: 'Lumley Beach', light: '#FBF1DC', dark: '#2A2416' },
+  { name: 'palm', label: 'Tacugama', light: '#E6F4EA', dark: '#0F2417' },
+  { name: 'sunset', label: 'Bureh sunset', light: '#FFF3E0', dark: '#2B1A0E' },
+  { name: 'lagoon', label: 'Tokeh lagoon', light: '#DDF3F2', dark: '#0B2426' },
+  { name: 'kola', label: 'Kola nut', light: '#F6E3E1', dark: '#2A1312' },
+  // Strong colours, where Dash turns the text and bars light.
+  { name: 'flagGreen', label: 'Flag green', light: '#1EB53A', dark: '#12832A' },
+  { name: 'atlantic', label: 'Atlantic', light: '#0072C6', dark: '#0A3D66' },
+];
+
+export const PRIMARIES: Swatch[] = [
+  { name: 'flagBlue', label: 'Flag blue', light: '#0072C6', dark: '#4DA3E8' },
+  { name: 'kolaRed', label: 'Kola red', light: '#B23A2B', dark: '#E0705F' },
+  { name: 'palmGreen', label: 'Palm green', light: '#1E7A3A', dark: '#5CC27A' },
+  { name: 'diamond', label: 'Diamond gold', light: '#9A6B00', dark: '#F5C542' },
+];
+
+// Bars take one colour, for light and dark alike.
+export const BAR_COLORS: Swatch[] = [
+  { name: 'flagGreen', label: 'Flag green', light: '#1EB53A', dark: '#1EB53A' },
+  { name: 'atlantic', label: 'Atlantic', light: '#0072C6', dark: '#0072C6' },
+  { name: 'ink', label: 'Ink', light: '#1C1C1E', dark: '#1C1C1E' },
+];
+
+// What a page might set for its cards, quiet fills and lines, in place of what Dash works out.
+export const OWN_SURFACES: Record<'surface' | 'muted' | 'border', SchemeColor> = {
+  surface: { light: '#FFFFFF', dark: '#16181B' },
+  muted: { light: '#EEF1F4', dark: '#25282C' },
+  border: { light: '#C9D1D9', dark: '#3A3F45' },
+};
+
+// The theme's custom colours for the swatches, by name.
+export function swatchColors(): Record<string, SchemeColor> {
+  const colors: Record<string, SchemeColor> = {};
+  for (const swatch of [...BACKGROUNDS, ...PRIMARIES]) {
+    colors[swatch.name] = { light: swatch.light, dark: swatch.dark };
+  }
+  return colors;
+}

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

@@ -0,0 +1,17 @@
+import { BACKGROUNDS, PRIMARIES } from './palette';
+
+export default {
+  backgrounds: BACKGROUNDS,
+  primaries: PRIMARIES,
+  // The swatch chosen for each, or '' for the theme's own.
+  background: '',
+  primary: '',
+  navigationBar: '',
+  // 'derived' lets Dash work out cards and fields from the background. 'own' sets them.
+  surfaces: 'derived',
+  customLight: '',
+  customDark: '',
+  customError: '',
+  // The colours the choices add up to, as lines of a setColors call.
+  code: [] as string[],
+};

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

@@ -0,0 +1,142 @@
+<View>
+  <Text variant="title">Page colours</Text>
+  <Text>A page can have its own colours, for light and dark, on top of the theme's. Pick some and watch the page follow. Dash paints the background behind the page, and picks text, bar and status bar colours that read on it. Try each with the phone in dark mode too.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">background</Text>
+    <Text variant="caption" tone="muted">Each swatch has a light and a dark colour. On the strong ones, Dash turns the text and the status bar light.</Text>
+    <View variant="card">
+      <Grid columns="3" gap="medium">
+        <View align="center" gap="small" data-name="" onTap="chooseBackground">
+          <View width="52" height="52" radius="full" background="muted" border="{{ background === '' ? 'strong' : 'subtle' }}" justify="center" align="center">
+            <Icon name="refresh" tone="muted" />
+          </View>
+          <Text variant="caption" align="center" weight="{{ background === '' ? 'bold' : 'regular' }}">Theme's</Text>
+        </View>
+        <For each="{{ backgrounds }}" item="swatch" key="name">
+          <View align="center" gap="small" data-name="{{ swatch.name }}" onTap="chooseBackground">
+            <View width="52" height="52" radius="full" background="{{ swatch.name }}" border="{{ background === swatch.name ? 'strong' : 'subtle' }}" />
+            <Text variant="caption" align="center" maxLines="2" weight="{{ background === swatch.name ? 'bold' : 'regular' }}">{{ swatch.label }}</Text>
+          </View>
+        </For>
+      </Grid>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Your own background</Text>
+    <Text variant="caption" tone="muted">Any colour as # and six digits. Leave dark empty to use the light one in dark too. If text can't be read on it, dotctl dev warns you.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" gap="small">
+        <View grow>
+          <Input label="Light" placeholder="#FFF3E0" value="{{ customLight }}" maxLength="7" onChange="setCustomLight" onSubmit="useCustom" />
+        </View>
+        <View grow>
+          <Input label="Dark" placeholder="#2B1A0E" value="{{ customDark }}" maxLength="7" onChange="setCustomDark" onSubmit="useCustom" />
+        </View>
+      </View>
+      <If condition="{{ customError }}">
+        <Text variant="caption" tone="danger">{{ customError }}</Text>
+      </If>
+      <Button variant="secondary" onClick="useCustom" disabled="{{ !customLight }}">Use this background</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">primary</Text>
+    <Text variant="caption" tone="muted">Buttons, switches, links and selected chips. Text on it, with tone="onPrimary", turns dark or light to read.</Text>
+    <View variant="card">
+      <Grid columns="5" gap="small">
+        <View align="center" gap="small" data-name="" onTap="choosePrimary">
+          <View width="40" height="40" radius="full" background="muted" border="{{ primary === '' ? 'strong' : 'subtle' }}" justify="center" align="center">
+            <Icon name="refresh" size="small" tone="muted" />
+          </View>
+          <Text variant="caption" align="center" weight="{{ primary === '' ? 'bold' : 'regular' }}">Theme's</Text>
+        </View>
+        <For each="{{ primaries }}" item="swatch" key="name">
+          <View align="center" gap="small" data-name="{{ swatch.name }}" onTap="choosePrimary">
+            <View width="40" height="40" radius="full" background="{{ swatch.name }}" border="{{ primary === swatch.name ? 'strong' : 'none' }}" />
+            <Text variant="caption" align="center" maxLines="2" weight="{{ primary === swatch.name ? 'bold' : 'regular' }}">{{ swatch.label }}</Text>
+          </View>
+        </For>
+      </Grid>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">surface, muted and border</Text>
+    <Text variant="caption" tone="muted">Left out, Dash works out cards, fields, quiet fills and lines from the background, so they sit well on it. A page can set them itself instead.</Text>
+    <Tabs variant="segmented" value="{{ surfaces }}" onChange="chooseSurfaces">
+      <Tab value="derived" label="Worked out" />
+      <Tab value="own" label="The page's own" />
+    </Tabs>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The navigation bar</Text>
+    <Text variant="caption" tone="muted">setNavigationBar gives the bar its own colour. Without a textColor, Dash picks text that reads on it.</Text>
+    <View direction="row" gap="small" wrap>
+      <Chip label="Dash's" selected="{{ navigationBar === '' }}" data-name="" onTap="chooseNavigationBar" />
+      <Chip label="Flag green" selected="{{ navigationBar === 'flagGreen' }}" data-name="flagGreen" onTap="chooseNavigationBar" />
+      <Chip label="Atlantic" selected="{{ navigationBar === 'atlantic' }}" data-name="atlantic" onTap="chooseNavigationBar" />
+      <Chip label="Ink" selected="{{ navigationBar === 'ink' }}" data-name="ink" onTap="chooseNavigationBar" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">What follows</Text>
+    <Text variant="caption" tone="muted">Everything on the page takes its colours from these, so nothing here sets one.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" align="center" gap="medium">
+        <Avatar name="Emmerson Bockarie" />
+        <View gap="none" grow>
+          <Text weight="bold">Emmerson</Text>
+          <Text variant="caption" tone="muted">Kill Me Pikin · 2008</Text>
+        </View>
+        <Badge tone="success">New</Badge>
+      </View>
+      <Input label="Your name" placeholder="Aminata Kamara" />
+      <Switch label="Tell me about new songs" checked />
+      <ProgressBar value="60" />
+      <View direction="row" gap="small" wrap>
+        <Chip label="Afropop" selected />
+        <Chip label="Gumbe" />
+        <Chip label="Palm-wine" />
+      </View>
+      <View direction="row" gap="small" wrap>
+        <Button>Play</Button>
+        <Button variant="secondary">Add to a playlist</Button>
+      </View>
+      <Text>Read about <Link href="https://en.wikipedia.org/wiki/Music_of_Sierra_Leone">the music of Sierra Leone</Link>.</Text>
+    </View>
+    <List>
+      <ListItem icon="music" title="Ballot Paper" subtitle="Emmerson" value="4:12" />
+      <ListItem icon="music" title="Salone" subtitle="Drizilik" value="3:48" />
+    </List>
+    <View background="muted" radius="medium" padding="medium">
+      <Text variant="caption">A quiet fill, such as for a note</Text>
+    </View>
+    <View background="primary" radius="medium" padding="medium">
+      <Text tone="onPrimary" weight="medium">On the primary colour</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The call</Text>
+    <Text variant="caption" tone="muted">What you picked, as a dot would write it. configs.colors in definePage takes the same.</Text>
+    <View variant="card" gap="none">
+      <If condition="{{ code.length > 0 }}">
+        <Text selectable>this.setColors({</Text>
+        <For each="{{ code }}" item="line" key="*this">
+          <Text paddingStart="large" selectable>{{ line }}</Text>
+        </For>
+        <Text selectable>});</Text>
+      </If>
+      <Else>
+        <Text tone="muted">The theme's own colours. Pick some above to see the call.</Text>
+      </Else>
+    </View>
+  </View>
+
+  <Button variant="secondary" onClick="reset">Put the theme's colours back</Button>
+</View>

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

@@ -0,0 +1,16 @@
+import { CONCERTS } from '../share/concerts';
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Concert' } },
+  // Dash's Share opens this page, with its concert option and no other.
+  share: { options: ['concert'] },
+  hooks: {
+    // From a link, the options can be anything, so look the concert up rather than trust it.
+    onLoad(options) {
+      const concert = CONCERTS.find((candidate) => candidate.id === options.concert) ?? null;
+      this.setState({ concert, buyer: options.buyer ?? '' });
+    },
+  },
+});

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

@@ -0,0 +1,7 @@
+import type { Concert } from '../share/concerts';
+
+export default {
+  concert: null as Concert | null,
+  // Who the page was opened for. A shared link never carries it.
+  buyer: '',
+};

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

@@ -0,0 +1,20 @@
+<View>
+  <If condition="{{ concert }}">
+    <Text variant="title">{{ concert.title }}</Text>
+    <View variant="card" gap="small">
+      <DetailRow label="Where" value="{{ concert.place }}" />
+      <DetailRow label="When" value="{{ concert.date }}" />
+      <DetailRow label="From" value="{{ concert.price }}" />
+    </View>
+    <If condition="{{ buyer }}">
+      <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>
+    </Else>
+    <Text variant="caption" tone="muted">Tap ••• then Share. The link opens this concert.</Text>
+  </If>
+  <Else>
+    <EmptyState icon="search" title="No such concert" text="The link may be old, or written by hand." />
+  </Else>
+</View>

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

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

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

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