@monimesl/dot-cli 0.1.0-alpha.8 → 0.1.0-alpha.9

package/dist/templates/showcase/pages/lists/view.dml

@@ -1,12 +1,12 @@
 <View>
   <Text variant="title">Lists and icons</Text>
-  <Text>A List draws rows in a card. Small is the default for compact information; medium keeps a roomier hierarchy. A row shows an icon or a picture, a value or anything at its end, and a chevron when it can be tapped.</Text>
+  <Text>A List shows rows in a card. Small lists are compact, and medium lists have more room. A row can show an icon or a picture, a value at its end, and an arrow when you can tap it.</Text>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Default small list; rows know which one was tapped from their data- attributes</Text>
+    <Text variant="caption" tone="muted">Artists in a small list. Tap one: its data- attributes tell the page which one.</Text>
     <List>
-      <For each="{{ accounts }}" item="account" key="id">
-        <ListItem icon="{{ account.icon }}" title="{{ account.name }}" subtitle="{{ account.number }}" value="{{ account.balance }}" data-id="{{ account.id }}" onTap="choose" />
+      <For each="{{ artists }}" item="artist" key="id">
+        <ListItem icon="{{ artist.icon }}" title="{{ artist.name }}" subtitle="{{ artist.song }}" value="{{ artist.genre }}" data-id="{{ artist.id }}" onTap="choose" />
       </For>
     </List>
     <If condition="{{ chosen }}">
@@ -15,18 +15,18 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Explicit medium list with a badge at the end of each row</Text>
+    <Text variant="caption" tone="muted">Famous records in a medium list, each with a badge. Tap one to see its actions.</Text>
     <List size="md">
-      <For each="{{ payments }}" item="payment" key="id">
-        <ListItem title="{{ payment.title }}" subtitle="{{ payment.date }} · {{ payment.amount }}" data-id="{{ payment.id }}" onTap="openPayment">
-          <Badge tone="{{ payment.tone }}">{{ payment.status }}</Badge>
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}" data-id="{{ release.id }}" onTap="openRelease">
+          <Badge tone="{{ release.tone }}">{{ release.note }}</Badge>
         </ListItem>
       </For>
     </List>
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Icons, by name, in any tone</Text>
+    <Text variant="caption" tone="muted">Icons by name, in any tone, including music icons</Text>
     <View variant="card" direction="row" wrap gap="large">
       <For each="{{ icons }}" item="icon" key="*this">
         <Icon name="{{ icon }}" />
@@ -42,17 +42,17 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A divider between things</Text>
+    <Text variant="caption" tone="muted">A divider</Text>
     <View variant="card">
-      <Text>Above the line</Text>
+      <Text>Side A</Text>
       <Divider />
-      <Text>Below the line</Text>
+      <Text>Side B</Text>
     </View>
   </View>
 
-  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.amount }}" showCloseIcon onClose="closeSheet">
-    <Button variant="secondary" onClick="copyReference">Copy reference {{ selected.reference }}</Button>
-    <Button variant="secondary" onClick="shareReceipt">Share receipt</Button>
+  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.year }}" showCloseIcon onClose="closeSheet">
+    <Button variant="secondary" onClick="copyTitle">Copy the title</Button>
+    <Button variant="secondary" onClick="shareRelease">Share it</Button>
     <Button onClick="closeSheet">Cancel</Button>
   </Sheet>
   <Toast message="{{ toast }}" tone="success" onHide="clearToast" />

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

@@ -41,7 +41,8 @@ export default definePage({
       const colored = !state.colored;
       // Undefined puts Dash's own colors back.
       this.setNavigationBar({
-        backgroundColor: colored ? '#1A73E8' : undefined,
+        // The green of Sierra Leone's flag.
+        backgroundColor: colored ? '#1EB53A' : undefined,
         textColor: colored ? '#FFFFFF' : undefined,
       });
       this.setState({ colored });

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

@@ -1,7 +1,7 @@
 <View>
   <Text variant="caption" tone="muted">{{ trail }}</Text>
   <Text variant="title">Navigation and hooks</Text>
-  <Text>Each page opens on top of the one before it; back returns to the one below. A dot has room for {{ maxDepth }} pages at once.</Text>
+  <Text>Each new page opens on top. Back returns to the page below. A dot can have {{ maxDepth }} pages open at once.</Text>
 
   <View variant="card" gap="small">
     <Text>This is page {{ depth }} of {{ maxDepth }}</Text>
@@ -14,14 +14,14 @@
     </View>
   </View>
 
-  <Text variant="caption" tone="muted">Dash's bars, which each page sets: this one's title is its number</Text>
+  <Text variant="caption" tone="muted">Each page sets Dash's bars. This page's title is its number.</Text>
   <View variant="card" gap="small">
     <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="toggleColors">{{ colored ? 'Plain bar' : 'Blue bar' }}</Button>
+      <Button variant="secondary" onClick="toggleColors">{{ colored ? 'Plain bar' : 'Green bar' }}</Button>
       <Button variant="secondary" onClick="toggleNavigationBar">{{ navigationBarHidden ? 'Show the navigation bar' : 'Hide the navigation bar' }}</Button>
       <Button variant="secondary" onClick="toggleTabBar">{{ tabBarHidden ? 'Show the tab bar' : 'Hide the tab bar' }}</Button>
     </View>
-    <Text variant="caption" tone="muted">Going back to a page shows its bars again, and leaving the dot puts Dash's own back.</Text>
+    <Text variant="caption" tone="muted">Going back shows that page's bars again. Leaving the dot brings back Dash's bars.</Text>
   </View>
 
   <Text variant="caption" tone="muted">The hooks this page ran, in order</Text>
@@ -29,6 +29,6 @@
     <For each="{{ hooks }}" item="run" key="id">
       <Text>{{ run.id }}. {{ run.hook }}</Text>
     </For>
-    <Text variant="caption" tone="muted">Open another page and come back: this one runs onHide, then onShow.</Text>
+    <Text variant="caption" tone="muted">Open another page and come back. This page runs onHide, then onShow.</Text>
   </View>
 </View>

package/dist/templates/showcase/pages/network/controller.ts

@@ -1,11 +1,17 @@
+import type { Release } from './state';
 import state from './state';
 
-const PICTURE = 'pictures/octocat.png';
+const PICTURE = 'pictures/artwork.jpg';
 
-interface GitHubUser {
-  login: string;
-  name: string | null;
-  followers: number;
+// Apple's public catalog search, which needs no key: https://performance-partners.apple.com/search-api
+interface CatalogAnswer {
+  results: {
+    trackId: number;
+    trackName: string;
+    collectionName: string;
+    releaseDate: string;
+    artworkUrl100: string;
+  }[];
 }
 
 interface Echo {
@@ -13,38 +19,71 @@ interface Echo {
   files: Record<string, string>;
 }
 
+// Songs to ask for at a time, and at most.
+const PAGE = 10;
+const MOST = 50;
+
+function searchUrl(artist: string, limit = PAGE): string {
+  const term = encodeURIComponent(artist);
+  return `https://itunes.apple.com/search?entity=song&limit=${limit}&term=${term}`;
+}
+
 export default definePage({
   initialState: state,
+  mutations: {
+    setArtist: (_state, event: DotEvent<{ value: string }>) => ({ artist: event.detail.value }),
+  },
   actions: {
-    async fetchZen() {
+    async searchAsText(state) {
       try {
-        const response = await this.dash.network.http.request({
-          url: 'https://api.github.com/zen',
+        const response = await this.dash.network.http.request({ url: searchUrl(state.artist) });
+        this.setState({
+          raw: response.ok
+            ? `${response.body.trim().slice(0, 90)}…`
+            : `Apple answered ${response.status}`,
         });
-        this.setState({ zen: response.ok ? response.body : `GitHub answered ${response.status}` });
       } catch (error) {
         this.setState({ note: (error as Error).message });
       }
     },
-    async fetchProfile() {
+    async search() {
+      this.setState({ limit: PAGE, releases: [] });
+      await this.actions.load();
+    },
+    // The List asks for this as its last song comes into view: the next page, while there is one.
+    async loadMore(state) {
+      if (state.searching || state.releases.length < state.limit || state.limit >= MOST) {
+        return;
+      }
+      this.setState({ limit: state.limit + PAGE });
+      await this.actions.load();
+    },
+    async load(state) {
+      this.setState({ searching: true, note: '' });
       try {
-        const { body } = await this.dash.network.http.request<GitHubUser>(
-          { url: 'https://api.github.com/users/octocat', as: 'json' },
+        const { body } = await this.dash.network.http.request<CatalogAnswer>(
+          { url: searchUrl(state.artist, state.limit), as: 'json' },
           { timeout: 10_000 },
         );
-        this.setState({
-          profile: { login: body.login, name: body.name ?? body.login, followers: body.followers },
-        });
+        const releases: Release[] = body.results.map((result) => ({
+          id: result.trackId,
+          title: result.trackName,
+          album: result.collectionName,
+          year: result.releaseDate.slice(0, 4),
+          artwork: result.artworkUrl100,
+        }));
+        this.setState({ releases });
       } catch (error) {
         this.setState({ note: (error as Error).message });
       }
+      this.setState({ searching: false });
     },
-    async sendJson() {
+    async sendJson(state) {
       try {
         const { body } = await this.dash.network.http.request<Echo>({
           url: 'https://httpbin.org/post',
           method: 'POST',
-          body: { item: 'rice', count: 2 },
+          body: { artist: state.artist, favourite: state.releases[0]?.title ?? null },
           as: 'json',
         });
         this.setState({ echo: JSON.stringify(body.json) });
@@ -52,17 +91,22 @@ export default definePage({
         this.setState({ note: (error as Error).message });
       }
     },
-    async download() {
+    async download(state) {
+      const release = state.releases[0];
+      if (!release) {
+        return;
+      }
       try {
+        // The catalog's artwork comes in any size its address names.
         const response = await this.dash.network.http.download({
-          url: 'https://avatars.githubusercontent.com/u/583231?s=128',
-          name: 'octocat.png',
+          url: release.artwork.replace('100x100bb', '300x300bb'),
+          name: 'artwork.jpg',
         });
         if (response.ok) {
           const { id, url, size } = response.file;
           this.setState({ picture: { id, url, size }, kept: false });
         } else {
-          this.setState({ note: `GitHub answered ${response.status}` });
+          this.setState({ note: `Apple answered ${response.status}` });
         }
       } catch (error) {
         this.setState({ note: (error as Error).message });
@@ -72,8 +116,8 @@ export default definePage({
       try {
         const { body } = await this.dash.network.http.upload<Echo>({
           url: 'https://httpbin.org/post',
-          fields: { title: 'Octocat' },
-          files: [{ field: 'picture', file: state.picture.id }],
+          fields: { artist: state.artist },
+          files: [{ field: 'artwork', file: state.picture.id }],
           as: 'json',
         });
         this.setState({ uploaded: Object.keys(body.files).join(', ') });
@@ -90,7 +134,7 @@ export default definePage({
     },
     async keep(state) {
       try {
-        await this.dash.file.save(state.picture.id, PICTURE, { overwrite: true });
+        await this.dash.storage.file.save(state.picture.id, PICTURE, { overwrite: true });
         this.setState({ kept: true });
       } catch (error) {
         this.setState({ note: (error as Error).message });

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

@@ -1,12 +1,19 @@
-export interface Profile {
-  login: string;
-  name: string;
-  followers: number;
+export interface Release {
+  id: number;
+  title: string;
+  album: string;
+  year: string;
+  artwork: string;
 }
 
 export default {
-  zen: '',
-  profile: null as Profile | null,
+  artist: 'Drizilik',
+  // The start of Apple's answer, as the text it came as.
+  raw: '',
+  releases: [] as Release[],
+  // How many songs to ask for: more each time the list's end comes into view.
+  limit: 10,
+  searching: false,
   echo: '',
   picture: { id: '', url: '', size: 0 },
   uploaded: '',

package/dist/templates/showcase/pages/network/view.dml

@@ -1,40 +1,51 @@
 <View>
   <Text variant="title">Network</Text>
-  <Text>Dash sends a dot's requests, and only to the hosts its dot.json lists.</Text>
+  <Text>Dash sends the dot's requests, only to hosts listed in dot.json. This page searches Apple's music catalog.</Text>
 
-  <Text variant="caption" tone="muted">A request, read as text</Text>
   <View variant="card" gap="small">
-    <Button variant="secondary" onClick="fetchZen">Ask GitHub for wisdom</Button>
-    <If condition="{{ zen }}">
-      <Text>"{{ zen }}"</Text>
+    <Input label="Artist" placeholder="Drizilik" value="{{ artist }}" maxLength="40" onChange="setArtist" onSubmit="search" />
+    <View direction="row" wrap gap="small">
+      <Button onClick="search" loading="{{ searching }}" disabled="{{ !artist }}">Search</Button>
+      <Button variant="secondary" onClick="searchAsText" disabled="{{ !artist }}">Read as text</Button>
+    </View>
+    <If condition="{{ raw }}">
+      <Text variant="caption" tone="muted">The answer as text starts with: {{ raw }}</Text>
     </If>
   </View>
 
-  <Text variant="caption" tone="muted">JSON, parsed with as: 'json'</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="fetchProfile">Load a profile</Button>
-      <Button variant="secondary" onClick="sendJson">Send JSON</Button>
+  <Text variant="caption" tone="muted">The same answer read as JSON, with artwork. Near the end, the list loads 10 more, up to 50. {{ releases.length }} so far.</Text>
+  <If condition="{{ releases.length > 0 }}">
+    <List onEndReached="loadMore">
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem image="{{ release.artwork }}" title="{{ release.title }}" subtitle="{{ release.album }} · {{ release.year }}" />
+      </For>
+    </List>
+  </If>
+  <Else>
+    <View variant="card">
+      <EmptyState icon="search" title="No songs yet" text="Search for an artist, such as Drizilik, Kao Denero or Emmerson." />
     </View>
-    <If condition="{{ profile }}">
-      <Text>{{ profile.name }} (@{{ profile.login }}) has {{ profile.followers }} followers</Text>
-    </If>
+  </Else>
+
+  <Text variant="caption" tone="muted">JSON sent to httpbin, which sends it back</Text>
+  <View variant="card" gap="small">
+    <Button variant="secondary" onClick="sendJson">Send the first song as JSON</Button>
     <If condition="{{ echo }}">
       <Text>httpbin got {{ echo }}</Text>
     </If>
   </View>
 
-  <Text variant="caption" tone="muted">Files: download, upload and keep</Text>
+  <Text variant="caption" tone="muted">Files: download the first song's artwork, upload it, and save it</Text>
   <View variant="card" gap="small">
     <View direction="row" wrap gap="small">
-      <Button variant="secondary" onClick="download">Download</Button>
+      <Button variant="secondary" onClick="download" disabled="{{ releases.length === 0 }}">Download</Button>
       <Button variant="secondary" onClick="upload" disabled="{{ !picture.id }}">Upload</Button>
       <Button variant="secondary" onClick="sharePicture" disabled="{{ !picture.id }}">Share</Button>
       <Button variant="secondary" onClick="keep" disabled="{{ !picture.id || kept }}">Keep</Button>
     </View>
     <If condition="{{ picture.url }}">
       <View direction="row" align="center" gap="medium">
-        <Image src="{{ picture.url }}" alt="Octocat" width="64" height="64" />
+        <Image src="{{ picture.url }}" alt="Artwork" width="64" height="64" />
         <Text variant="caption" tone="muted">{{ picture.size }} bytes, in a temporary file until the dot closes</Text>
       </View>
     </If>
@@ -42,11 +53,11 @@
       <Text>httpbin got the file field "{{ uploaded }}"</Text>
     </If>
     <If condition="{{ kept }}">
-      <Text>Kept in the dot's own files: see the Files page</Text>
+      <Text>Saved in the dot's files. See the Files page.</Text>
     </If>
   </View>
 
-  <Text variant="caption" tone="muted">A host dot.json doesn't list</Text>
+  <Text variant="caption" tone="muted">A host that dot.json does not list</Text>
   <View variant="card" gap="small">
     <Button variant="secondary" onClick="tryUnlistedHost">Reach example.com</Button>
     <If condition="{{ note }}">

package/dist/templates/showcase/pages/payments/controller.ts

@@ -5,6 +5,9 @@ type Typed = DotEvent<{ value: string }>;
 // The code this page accepts; a real dot checks it with its server.
 const RIGHT_CODE = '123456';
 
+// In dollars, as the pledge field sends them.
+const MAX_PLEDGE = 1000;
+
 export default definePage({
   initialState: state,
   mutations: {
@@ -15,8 +18,8 @@ export default definePage({
       }
       return {
         amount,
-        amountText: groupThousands(amount),
-        request: `https://pay.example.com/request?amount=${amount}&currency=SLE`,
+        amountText: (amount / 100).toLocaleString('en-US', { minimumFractionDigits: 2 }),
+        request: `https://pay.example.com/tip?amount=${amount}&currency=SLE&in=cents`,
       };
     },
     setCode: (_state, event: Typed) => ({ code: event.detail.value, codeError: '' }),
@@ -28,15 +31,16 @@ export default definePage({
     },
     startAgain: () => ({ verified: false, code: '' }),
     setPin: (_state, event: Typed) => ({ pin: event.detail.value }),
+    clearPin: () => ({ pin: '' }),
+    setLocked: (_state, event: DotEvent<{ checked: boolean }>) => ({
+      locked: event.detail.checked,
+    }),
+    setPledge: (_state, event: DotEvent<{ value: number | null }>) => {
+      const pledge = event.detail.value;
+      return {
+        pledge,
+        pledgeError: pledge !== null && pledge > MAX_PLEDGE ? 'Pledge up to USD 1,000' : '',
+      };
+    },
   },
 });
-
-// 1250000 -> "1,250,000"
-function groupThousands(amount: number): string {
-  const digits = String(Math.round(amount));
-  const groups: string[] = [];
-  for (let end = digits.length; end > 0; end -= 3) {
-    groups.unshift(digits.slice(Math.max(0, end - 3), end));
-  }
-  return groups.join(',');
-}

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

@@ -7,4 +7,7 @@ export default {
   codeError: '',
   verified: false,
   pin: '',
+  locked: false,
+  pledge: null as number | null,
+  pledgeError: '',
 };

package/dist/templates/showcase/pages/payments/view.dml

@@ -1,35 +1,45 @@
 <View>
   <Text variant="title">Payments</Text>
-  <Text>Fields for money and codes, and a QR code to be paid with.</Text>
+  <Text>Fields for money and codes. Tip the band with a QR code. Confirm tickets with a code.</Text>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">An amount, grouped as it's typed and sent to the page as a number</Text>
-    <AmountInput label="Amount to request" currency="Le" value="{{ amount }}" onChange="setAmount" hint="The QR code below asks for it" />
+    <Text variant="caption" tone="muted">An amount. It is formatted as you type and sent as a number.</Text>
+    <AmountInput label="Tip for the band" value="{{ amount }}" disabled="{{ locked }}" onChange="setAmount" hint="The QR code below asks for it" />
+    <Switch label="Lock the tip" checked="{{ locked }}" onChange="setLocked" />
     <View variant="card" align="center" gap="medium">
       <If condition="{{ request }}">
-        <QRCode value="{{ request }}" size="180" label="A QR code to pay Le {{ amountText }}" />
-        <Text tone="muted">Scan to pay Le {{ amountText }}</Text>
+        <QRCode value="{{ request }}" size="180" label="A QR code to tip SLE {{ amountText }}" />
+        <Text tone="muted">Scan to tip the band SLE {{ amountText }}</Text>
       </If>
       <Else>
-        <EmptyState icon="qr-code" title="No amount yet" text="Type an amount above to make a QR code for it." />
+        <EmptyState icon="qr-code" title="No tip yet" text="Type an amount above to make a QR code the crowd can scan." />
       </Else>
     </View>
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A one-time code: type it, paste it, or let the phone fill it in from an SMS</Text>
+    <Text variant="caption" tone="muted">Another currency: US dollars. This one sends dollars, not cents</Text>
+    <AmountInput label="Pledge for the band's tour" currency="USD" unit="major" value="{{ pledge }}" error="{{ pledgeError }}" hint="Up to USD 1,000" onChange="setPledge" />
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A one-time code. Type it, paste it, or let the phone fill it from an SMS.</Text>
     <If condition="{{ verified }}">
-      <Notice tone="success" title="Code accepted">The payment is confirmed.</Notice>
+      <Notice tone="success" title="Code accepted">Your two tickets are confirmed.</Notice>
       <Button variant="secondary" onClick="startAgain">Start again</Button>
     </If>
     <Else>
-      <CodeInput label="The code we sent to 076 •••• 21" value="{{ code }}" onChange="setCode" onComplete="checkCode" error="{{ codeError }}" hint="For this page, it's 123456" />
+      <CodeInput label="The code we sent to 076 •••• 21" value="{{ code }}" onChange="setCode" onComplete="checkCode" error="{{ codeError }}" hint="Use 123456" />
     </Else>
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A PIN, hidden as it's typed</Text>
-    <CodeInput label="PIN" length="4" secure value="{{ pin }}" onChange="setPin" />
-    <Text tone="muted">{{ pin.length }} of 4 digits</Text>
+    <Text variant="caption" tone="muted">A PIN. It is hidden as you type and locks when complete.</Text>
+    <CodeInput label="PIN" length="4" secure value="{{ pin }}" disabled="{{ pin.length === 4 }}" onChange="setPin" />
+    <View direction="row" align="center" gap="small">
+      <Text tone="muted">{{ pin.length }} of 4 digits</Text>
+      <View grow />
+      <Button variant="secondary" onClick="clearPin" disabled="{{ pin.length === 0 }}">Clear the PIN</Button>
+    </View>
   </View>
 </View>

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

@@ -0,0 +1,43 @@
+import state from './state';
+
+const SESSION = 'session';
+const NAME = 'session-name';
+
+export default definePage({
+  initialState: state,
+  hooks: {
+    async onShow() {
+      await this.actions.refresh();
+    },
+  },
+  mutations: {
+    setName: (_state, event: DotEvent<{ value: string }>) => ({ name: event.detail.value }),
+  },
+  actions: {
+    async refresh() {
+      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 ?? '',
+      });
+    },
+    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: '' });
+      await this.actions.refresh();
+    },
+    async signOut() {
+      await this.dash.storage.secret.remove(SESSION);
+      await this.dash.storage.cache.remove(NAME);
+      await this.actions.refresh();
+    },
+    async forgetAll() {
+      await this.dash.storage.secret.clear();
+      await this.actions.refresh();
+    },
+  },
+});

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

@@ -0,0 +1,5 @@
+export default {
+  name: '',
+  signedInAs: '',
+  token: '',
+};

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

@@ -0,0 +1,24 @@
+<View>
+  <Text variant="title">Secrets</Text>
+  <Text>Secrets hold sign-in tokens from the dot's own server. Dash keeps them encrypted on the phone. A dot can keep up to 8.</Text>
+
+  <Text variant="caption" tone="muted">A sign-in that stays</Text>
+  <View variant="card" gap="small">
+    <If condition="{{ token }}">
+      <Text>Signed in as {{ signedInAs }}</Text>
+      <Text variant="caption" tone="muted">Session token {{ token }}</Text>
+      <View direction="row" gap="small">
+        <Button variant="secondary" onClick="signOut">Sign out</Button>
+        <Button variant="secondary" onClick="forgetAll">Forget every secret</Button>
+      </View>
+    </If>
+    <Else>
+      <Input label="Name" placeholder="Mariama" value="{{ name }}" maxLength="40" onChange="setName" onSubmit="signIn" />
+      <Button onClick="signIn" disabled="{{ !name }}">Sign in</Button>
+      <Text variant="caption" tone="muted">Sign in, then close and reopen the dot. You stay signed in.</Text>
+    </Else>
+  </View>
+
+  <Text variant="caption" tone="muted">Your name is saved in the cache. Only the token is a secret.</Text>
+  <Text variant="caption" tone="muted">Never put your API keys in the dot's code: it is open to read.</Text>
+</View>

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

@@ -3,7 +3,7 @@ export interface Tap {
 }
 
 export default {
-  title: 'taps',
+  title: 'cheers for an encore',
   count: 0,
   limit: 5,
   taps: [] as Tap[],

package/dist/templates/showcase/pages/state/view.dml

@@ -1,33 +1,33 @@
 <View>
   <Text variant="title">State, mutations and actions</Text>
-  <Text>The page's state lives in the controller. A mutation turns an event into new state; an action can run several, or wait for Dash.</Text>
+  <Text>The page keeps its data in state. A mutation changes state when something happens. An action can run several steps or wait for Dash. Here, the crowd wants one more song.</Text>
 
   <View variant="card" gap="small">
     <Text variant="title">{{ count }} of {{ limit }} {{ title }}</Text>
     <If condition="{{ count >= limit }}">
-      <Text>That's the limit</Text>
+      <Text>Encore! The band comes back on</Text>
     </If>
     <ElseIf condition="{{ count > 0 }}">
-      <Text>{{ limit - count }} to go</Text>
+      <Text>{{ limit - count }} more and the band comes back</Text>
     </ElseIf>
     <Else>
-      <Text>Tap Add one to start</Text>
+      <Text>Tap Cheer to start</Text>
     </Else>
     <View direction="row" wrap gap="small">
-      <Button onClick="increment" disabled="{{ count >= limit }}">Add one</Button>
-      <Button variant="secondary" onClick="fillUp" disabled="{{ count >= limit }}">Fill up</Button>
+      <Button onClick="increment" disabled="{{ count >= limit }}">Cheer</Button>
+      <Button variant="secondary" onClick="fillUp" disabled="{{ count >= limit }}">Whole crowd</Button>
       <Button variant="secondary" onClick="undo" disabled="{{ count === 0 }}">Undo</Button>
       <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
     </View>
   </View>
 
-  <Text variant="caption" tone="muted">Each tap, newest first</Text>
+  <Text variant="caption" tone="muted">Each cheer, newest first</Text>
   <View variant="card" gap="small">
     <For each="{{ taps }}" index="position" item="tap" key="id">
-      <Text>{{ position + 1 }}. Tap #{{ tap.id }}</Text>
+      <Text>{{ position + 1 }}. Cheer #{{ tap.id }}</Text>
     </For>
     <If condition="{{ taps.length === 0 }}">
-      <Text variant="caption" tone="muted">No taps yet</Text>
+      <Text variant="caption" tone="muted">No cheers yet</Text>
     </If>
   </View>
 </View>