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

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

@@ -0,0 +1,95 @@
+<View>
+  <Text variant="title">Text and links</Text>
+  <Text>Text shows words. Its variant sets the size, and the theme sets the font and colours.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">variant</Text>
+    <View variant="card" gap="small">
+      <Text variant="display" numeric>SLE 1,250</Text>
+      <Text variant="title">Palm-wine, a title</Text>
+      <Text variant="subtitle">S. E. Rogie, a subtitle</Text>
+      <Text variant="lead">A lead opens an article. It's a little bigger than body text.</Text>
+      <Text variant="body">Guitar music for a calm evening. This is body text, the default.</Text>
+      <Text variant="caption">Recorded in Freetown, in a caption</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">tone</Text>
+    <View variant="card" direction="row" wrap gap="medium">
+      <Text tone="default">default</Text>
+      <Text tone="muted">muted</Text>
+      <Text tone="info">info</Text>
+      <Text tone="success">success</Text>
+      <Text tone="warning">warning</Text>
+      <Text tone="danger">danger</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">weight, italic and decoration</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="medium">
+        <Text weight="regular">regular</Text>
+        <Text weight="medium">medium</Text>
+        <Text weight="bold">bold</Text>
+        <Text italic>italic</Text>
+      </View>
+      <View direction="row" wrap gap="medium">
+        <Text decoration="underline">underline</Text>
+        <Text decoration="strikethrough">strikethrough</Text>
+        <Text decoration="none">none</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">align and numeric</Text>
+    <Text variant="caption" tone="muted">numeric gives every digit the same width, so amounts line up.</Text>
+    <View variant="card" gap="small">
+      <Text align="start">At the start</Text>
+      <Text align="center">In the center</Text>
+      <Text align="end">At the end</Text>
+      <Text align="end" numeric>SLE 1,111.11</Text>
+      <Text align="end" numeric>SLE 8,888.88</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">maxLines</Text>
+    <Text variant="caption" tone="muted">Cuts the text off after this many lines.</Text>
+    <View variant="card">
+      <Text maxLines="2">Sierra Leone's Refugee All Stars came together in refugee camps in Guinea, recorded their first album, Living Like a Refugee, back in Freetown, and carried Salone music to stages around the world. Two lines are allowed here, so the rest is cut off.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">leading and selectable</Text>
+    <Text variant="caption" tone="muted">leading moves the lines closer or further apart. selectable lets the person copy the text: hold your finger on the last one.</Text>
+    <View variant="card" gap="medium">
+      <Text leading="tight">Tight lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+      <Text leading="normal">Normal lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+      <Text leading="relaxed" selectable>Relaxed lines, and you can select them. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Text inside text</Text>
+    <View variant="card">
+      <Text>Text can hold <Text weight="bold">bold</Text> and <Text tone="danger">red</Text> words.</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Link</Text>
+    <Text variant="caption" tone="muted">With href, a link opens a web page in the phone's browser. With onTap, it runs a handler.</Text>
+    <View variant="card" gap="small">
+      <Text>Read about <Link href="https://en.wikipedia.org/wiki/Music_of_Sierra_Leone">the music of Sierra Leone</Link>.</Text>
+      <View direction="row" gap="medium">
+        <Link onTap="like">Like the song</Link>
+        <Link tone="danger" onTap="unlike">Take it back</Link>
+      </View>
+      <Text tone="muted">{{ likes }} {{ likes === 1 ? 'like' : 'likes' }}</Text>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,32 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.account' } },
+  mutations: {
+    setNonce: (_state, event: ValueEvent) => ({ nonce: event.detail.value }),
+  },
+  actions: {
+    async signIn(state) {
+      try {
+        const { fullName, alias, accountIdToken } = await this.dash.account.signIn({
+          mode: 'simple',
+          nonce: state.nonce,
+        });
+        this.setState({ fullName, alias, accountIdToken, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async signInWithOidc() {
+      try {
+        const { id } = await this.dash.account.signIn({ mode: 'oidc', scopes: ['profile'] });
+        this.setState({ oidcNote: `Signed in as ${id}` });
+      } catch (error) {
+        this.setState({ oidcNote: errorMessage(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,9 @@
+export default {
+  // A fixed nonce, so the token names the person the same way each time in this dot.
+  nonce: 'salone-sounds',
+  fullName: '',
+  alias: '',
+  accountIdToken: '',
+  note: '',
+  oidcNote: '',
+};

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

@@ -0,0 +1,33 @@
+<View>
+  <Text variant="title">dash.account</Text>
+  <Text>Who is signed in to Dash. It needs the account permission in dot.json.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">signIn</Text>
+    <Text variant="caption" tone="muted">With mode "simple", Dash says who the person is: their full name, the phone number or email address they use Dash with, and a token Monime makes from this dot's id, their Monimeer id and the nonce, with a key only it knows. The same nonce gives the same token, on any phone. It names the person, but proves nothing to the dot's server.</Text>
+    <View variant="card" gap="medium">
+      <Input label="Nonce" value="{{ nonce }}" onChange="setNonce" />
+      <Button onClick="signIn">Sign in with Dash</Button>
+      <If condition="{{ fullName }}">
+        <View gap="none">
+          <DetailRow label="fullName" value="{{ fullName }}" />
+          <DetailRow label="alias" value="{{ alias }}" />
+          <DetailRow label="accountIdToken" value="{{ accountIdToken }}" />
+        </View>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">signIn with OpenID Connect</Text>
+    <Text variant="caption" tone="muted">With mode "oidc", Dash will give an ID token the dot's server checks with Monime's keys, and only the details the person agrees to share. It isn't ready yet, so Dash says so.</Text>
+    <Button variant="secondary" onClick="signInWithOidc">Sign in with OpenID Connect</Button>
+    <If condition="{{ oidcNote }}">
+      <Notice tone="info">{{ oidcNote }}</Notice>
+    </If>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

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

@@ -0,0 +1,50 @@
+import state from './state';
+
+const RECENT = 'recent/';
+const GENRE = 'genre';
+const RECENT_MILLISECONDS = 30_000;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.storage.cache' } },
+  hooks: {
+    async onShow() {
+      await this.actions.refresh();
+    },
+  },
+  actions: {
+    async refresh() {
+      const keys = await this.dash.storage.cache.keys();
+      const recent: string[] = [];
+      for (const key of keys.filter((each) => each.startsWith(RECENT))) {
+        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(', '),
+      });
+    },
+    // 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,
+      });
+      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);
+      await this.actions.refresh();
+    },
+    async forgetGenre() {
+      await this.dash.storage.cache.remove(GENRE);
+      await this.actions.refresh();
+    },
+    async clear() {
+      await this.dash.storage.cache.clear();
+      await this.actions.refresh();
+    },
+  },
+});

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

@@ -0,0 +1,17 @@
+export interface Artist {
+  id: string;
+  name: string;
+}
+
+export default {
+  artists: [
+    { id: 'drizilik', name: 'Drizilik' },
+    { id: 'the-therapist', name: 'The Therapist' },
+    { id: 'emmerson', name: 'Emmerson' },
+    { id: 'kao-denero', name: 'Kao Denero' },
+  ] as Artist[],
+  // The artists viewed in the last 30 seconds, as the cache still has them.
+  recent: [] as string[],
+  genre: '',
+  keys: '',
+};

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

@@ -0,0 +1,48 @@
+<View>
+  <Text variant="title">dash.storage.cache</Text>
+  <Text>The cache keeps small values by name, such as text, numbers or JSON. A value can expire after a while, or stay until it's removed.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">set with a ttl, keys and get</Text>
+    <Text variant="caption" tone="muted">Tap an artist. ttl: 30_000 keeps it for 30 seconds, as times are in milliseconds.</Text>
+    <List>
+      <For each="{{ artists }}" item="artist" key="id">
+        <ListItem icon="microphone" title="{{ artist.name }}" data-id="{{ artist.id }}" data-name="{{ artist.name }}" onTap="view" />
+      </For>
+    </List>
+    <View variant="card" gap="small">
+      <If condition="{{ recent.length > 0 }}">
+        <For each="{{ recent }}" item="name" key="*this">
+          <Text>{{ name }}</Text>
+        </For>
+      </If>
+      <Else>
+        <Text variant="caption" tone="muted">No artists viewed in the last 30 seconds</Text>
+      </Else>
+      <Button variant="secondary" onClick="refresh">Check again</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">set without a ttl, and exists</Text>
+    <Text variant="caption" tone="muted">Your favourite genre stays until it's removed, even after the dot closes.</Text>
+    <View variant="card">
+      <Select label="Genre" placeholder="Choose a genre" value="{{ genre }}" onChange="setGenre">
+        <Option value="Afropop" label="Afropop" />
+        <Option value="Palm-wine" label="Palm-wine" />
+        <Option value="Gumbe" label="Gumbe" />
+      </Select>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">remove and clear</Text>
+    <View variant="card" gap="small">
+      <Text>Keys in the cache: {{ keys || 'none' }}</Text>
+      <View direction="row" wrap gap="small">
+        <Button variant="secondary" onClick="forgetGenre" disabled="{{ !genre }}">Forget the genre</Button>
+        <Button variant="secondary" onClick="clear" disabled="{{ !keys }}">Clear the cache</Button>
+      </View>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,67 @@
+import type { DashRequest } from '@monimesl/dot-runtime';
+import { errorMessage, isDashError } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+// The long wait, kept so the Cancel button can stop it.
+let wait: DashRequest<void> | null = null;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Calls and errors' } },
+  hooks: {
+    async onLoad() {
+      this.setState({ picksPhones: this.dash.supports('contacts.pickPhone') });
+      try {
+        const { apiVersions } = await this.dash.system.info();
+        this.setState({ apiVersions: apiVersions.join(', ') });
+      } catch (error) {
+        this.setState({ apiVersions: errorMessage(error) });
+      }
+    },
+  },
+  actions: {
+    // Makes the call a button names, and shows how it ended.
+    async show(_state, event: DataEvent<{ call: string }>) {
+      this.setState({ code: '', message: '' });
+      try {
+        switch (event.data.call) {
+          case 'timeout':
+            // Gives up after 1 second on a wait of 5.
+            await this.dash.system.delay(5000, { timeout: 1000 });
+            break;
+          case 'cancelled':
+            wait = this.dash.system.delay(10_000);
+            this.setState({ waiting: true });
+            await wait;
+            break;
+          case 'invalid':
+            await this.dash.ui.pickDate({ min: '2026-12-31', max: '2026-01-01' });
+            break;
+          case 'denied':
+            await this.dash.network.http.request({ url: 'https://example.com' });
+            break;
+          case 'missing':
+            await this.dash.storage.file.read('never-saved.txt');
+            break;
+        }
+        this.setState({ code: 'none', message: 'It worked' });
+      } catch (error) {
+        if (isDashError(error)) {
+          this.setState({ code: error.code, message: error.message });
+        } else {
+          this.setState({ code: 'not a DashError', message: errorMessage(error) });
+        }
+      } finally {
+        wait = null;
+        this.setState({ waiting: false });
+      }
+    },
+    async closeDot() {
+      await this.dash.dot.close();
+    },
+    cancelWait() {
+      wait?.cancel();
+    },
+  },
+});

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

@@ -0,0 +1,9 @@
+export default {
+  waiting: false,
+  // The last call's outcome: the DashError's code and message, or how it ended.
+  code: '',
+  message: '',
+  // What this Dash offers, for the supports section.
+  apiVersions: '',
+  picksPhones: false,
+};

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

@@ -0,0 +1,69 @@
+<View>
+  <Text variant="title">Calls and errors</Text>
+  <Text>Every this.dash call goes to Dash and comes back later, so await it. When it fails, it throws a DashError with a code that says why.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">timeout</Text>
+    <Text variant="caption" tone="muted">The last argument of a call can set a timeout, in milliseconds. This waits 5 seconds with a timeout of 1.</Text>
+    <Button variant="secondary" data-call="timeout" onClick="show">Wait too long</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">cancel</Text>
+    <Text variant="caption" tone="muted">A call can be cancelled while it runs. Calls still running when the page closes are cancelled for you.</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" data-call="cancelled" onClick="show" disabled="{{ waiting }}">Wait 10 seconds</Button>
+      <Button variant="secondary" onClick="cancelWait" disabled="{{ !waiting }}">Cancel</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">DashError codes</Text>
+    <Text variant="caption" tone="muted">isDashError(error) tells a Dash call's error from any other, and isDashError(error, 'timeout') also checks its code.</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="cancelled" value="The person closed it, or the call was cancelled" />
+      <DetailRow label="timeout" value="It took longer than the timeout" />
+      <DetailRow label="denied" value="Not allowed, such as a missing permission" />
+      <DetailRow label="invalid" value="The call's options are wrong" />
+      <DetailRow label="unsupported" value="This Dash can't do it" />
+      <DetailRow label="missing" value="There's nothing there, such as a file that isn't saved" />
+      <DetailRow label="failed" value="Anything else went wrong" />
+    </View>
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" data-call="invalid" onClick="show">Pick a date between bad limits</Button>
+      <Button variant="secondary" data-call="denied" onClick="show">Reach an unlisted host</Button>
+      <Button variant="secondary" data-call="missing" onClick="show">Read a file never saved</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">supports</Text>
+    <Text variant="caption" tone="muted">Each call's docs say which Dash API version it came in, and dot.json's dash.minApiVersion says which one the dot needs. To use a newer call and still open on older Dash, check this.dash.supports first.</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="This Dash offers" value="Dash API {{ apiVersions }}" />
+      <DetailRow label="contacts.pickPhone" value="{{ picksPhones ? 'Supported' : 'Not on this Dash' }}" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">dash.dot.close</Text>
+    <Text variant="caption" tone="muted">Closes the dot, as going back from its first page does, such as once a payment is done.</Text>
+    <Button variant="secondary" onClick="closeDot">Close the showcase</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">The last call</Text>
+    <View variant="card" gap="none">
+      <If condition="{{ code }}">
+        <DetailRow label="error.code" value="{{ code }}" weight="bold" />
+        <DetailRow label="error.message" value="{{ message }}" />
+      </If>
+      <ElseIf condition="{{ waiting }}">
+        <Text tone="muted">Waiting…</Text>
+      </ElseIf>
+      <Else>
+        <Text tone="muted">Use a button above</Text>
+      </Else>
+    </View>
+  </View>
+</View>

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

@@ -0,0 +1,30 @@
+import { errorMessage, unlessCancelled } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.contacts' } },
+  actions: {
+    async choose() {
+      try {
+        const contact = await unlessCancelled(this.dash.contacts.pickPhone());
+        if (contact) {
+          this.setState({ contact, note: '' });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async call(state) {
+      if (!state.contact) {
+        return;
+      }
+      try {
+        await this.dash.system.dial(state.contact.phone);
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,6 @@
+import type { PickedContact } from '@monimesl/dot-runtime';
+
+export default {
+  contact: null as PickedContact | null,
+  note: '',
+};

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

@@ -0,0 +1,33 @@
+<View>
+  <Text variant="title">dash.contacts</Text>
+  <Text>The phone's own contacts. The dot sees only the one the person chooses.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">pickPhone</Text>
+    <Text variant="caption" tone="muted">The person chooses one phone number, such as who to send money to. It needs the contacts permission in dot.json.</Text>
+    <View variant="card" gap="medium">
+      <If condition="{{ contact }}">
+        <View direction="row" align="center" gap="medium">
+          <Avatar name="{{ contact.name }}" />
+          <View grow gap="none">
+            <Text weight="medium">{{ contact.name || 'No name' }}</Text>
+            <Text variant="caption" tone="muted">{{ contact.phone }}</Text>
+          </View>
+        </View>
+        <View direction="row" gap="small">
+          <Button variant="secondary" onClick="choose">Choose another</Button>
+          <Button variant="secondary" onClick="call">Call</Button>
+        </View>
+      </If>
+      <Else>
+        <EmptyState icon="users" title="No one chosen" text="Choose a contact to send money to.">
+          <Button onClick="choose">Choose a contact</Button>
+        </EmptyState>
+      </Else>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

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

@@ -0,0 +1,38 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.crypto' } },
+  mutations: {
+    setText: (_state, event: ValueEvent) => ({ text: event.detail.value }),
+    setKey: (_state, event: ValueEvent) => ({ key: event.detail.value }),
+    // dash.utils answers at once, so even a mutation can use it.
+    encode: (state) => ({ encoded: dash.utils.base64.encode(state.text) }),
+  },
+  actions: {
+    async hash(state) {
+      try {
+        const sha256 = await this.dash.crypto.sha256(state.text);
+        const hmac = await this.dash.crypto.hmac({
+          algorithm: 'sha256',
+          key: state.key,
+          data: state.text,
+        });
+        this.setState({ sha256, hmac, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async makeRandom() {
+      try {
+        const random = await this.dash.crypto.randomBytes(16);
+        const uuid = await this.dash.crypto.randomUUID();
+        this.setState({ random, uuid, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,10 @@
+export default {
+  text: 'Salone Sounds Live, Freetown',
+  key: 'shared secret',
+  sha256: '',
+  hmac: '',
+  random: '',
+  uuid: '',
+  encoded: '',
+  note: '',
+};

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

@@ -0,0 +1,48 @@
+<View>
+  <Text variant="title">dash.crypto</Text>
+  <Text>Hashes, signatures and random values, worked out on the phone. Each gives hex, or base64 with { as: 'base64' }.</Text>
+
+  <View variant="card" gap="medium">
+    <Input label="Text" value="{{ text }}" onChange="setText" />
+    <Input label="HMAC key" value="{{ key }}" onChange="setKey" />
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">sha256 and hmac</Text>
+    <Text variant="caption" tone="muted">sha512 works the same way. hmac signs with a key, such as to check a message from the dot's own server.</Text>
+    <Button variant="secondary" onClick="hash">Hash and sign the text</Button>
+    <If condition="{{ sha256 }}">
+      <View variant="card" gap="none">
+        <DetailRow label="sha256" value="{{ sha256 }}" />
+        <DetailRow label="hmac sha256" value="{{ hmac }}" />
+      </View>
+    </If>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">randomBytes and randomUUID</Text>
+    <Text variant="caption" tone="muted">From the phone's secure random source, such as for a nonce.</Text>
+    <Button variant="secondary" onClick="makeRandom">Make random values</Button>
+    <If condition="{{ uuid }}">
+      <View variant="card" gap="none">
+        <DetailRow label="16 random bytes" value="{{ random }}" />
+        <DetailRow label="randomUUID" value="{{ uuid }}" />
+      </View>
+    </If>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">dash.utils</Text>
+    <Text variant="caption" tone="muted">Not Dash calls: dash.utils.base64 and dash.utils.hex run in the dot and answer at once, without await, for UTF-8 text.</Text>
+    <Button variant="secondary" onClick="encode">Encode the text</Button>
+    <If condition="{{ encoded }}">
+      <View variant="card" gap="none">
+        <DetailRow label="utils.base64.encode" value="{{ encoded }}" />
+      </View>
+    </If>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>