@monimesl/dot-cli 0.1.0-alpha.10

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

@@ -0,0 +1,151 @@
+import type { Release } from './state';
+import state from './state';
+
+const PICTURE = 'pictures/artwork.jpg';
+
+// 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 {
+  json: unknown;
+  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 searchAsText(state) {
+      try {
+        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}`,
+        });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    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<CatalogAnswer>(
+          { url: searchUrl(state.artist, state.limit), as: 'json' },
+          { timeout: 10_000 },
+        );
+        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(state) {
+      try {
+        const { body } = await this.dash.network.http.request<Echo>({
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+          body: { artist: state.artist, favourite: state.releases[0]?.title ?? null },
+          as: 'json',
+        });
+        this.setState({ echo: JSON.stringify(body.json) });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    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: 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: `Apple answered ${response.status}` });
+        }
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async upload(state) {
+      try {
+        const { body } = await this.dash.network.http.upload<Echo>({
+          url: 'https://httpbin.org/post',
+          fields: { artist: state.artist },
+          files: [{ field: 'artwork', file: state.picture.id }],
+          as: 'json',
+        });
+        this.setState({ uploaded: Object.keys(body.files).join(', ') });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async sharePicture(state) {
+      try {
+        await this.dash.system.share({ file: state.picture.id });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async keep(state) {
+      try {
+        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 });
+      }
+    },
+    async tryUnlistedHost() {
+      try {
+        await this.dash.network.http.request({ url: 'https://example.com' });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,22 @@
+export interface Release {
+  id: number;
+  title: string;
+  album: string;
+  year: string;
+  artwork: string;
+}
+
+export default {
+  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: '',
+  kept: false,
+  note: '',
+};

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

@@ -0,0 +1,67 @@
+<View>
+  <Text variant="title">Network</Text>
+  <Text>Dash sends the dot's requests, only to hosts listed in dot.json. This page searches Apple's music catalog.</Text>
+
+  <View variant="card" gap="small">
+    <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">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>
+  </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 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" 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="Artwork" width="64" height="64" />
+        <Text variant="caption" tone="muted">{{ picture.size }} bytes, in a temporary file until the dot closes</Text>
+      </View>
+    </If>
+    <If condition="{{ uploaded }}">
+      <Text>httpbin got the file field "{{ uploaded }}"</Text>
+    </If>
+    <If condition="{{ kept }}">
+      <Text>Saved in the dot's files. See the Files page.</Text>
+    </If>
+  </View>
+
+  <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 }}">
+      <Text variant="caption" tone="muted">{{ note }}</Text>
+    </If>
+  </View>
+</View>

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

@@ -0,0 +1,46 @@
+import state from './state';
+
+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: {
+    setAmount: (_state, event: DotEvent<{ value: number | null }>) => {
+      const amount = event.detail.value;
+      if (!amount) {
+        return { amount, amountText: '', request: '' };
+      }
+      return {
+        amount,
+        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: '' }),
+    checkCode: (_state, event: Typed) => {
+      if (event.detail.value === RIGHT_CODE) {
+        return { verified: true };
+      }
+      return { code: '', codeError: 'That code is wrong. Try again.' };
+    },
+    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' : '',
+      };
+    },
+  },
+});

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

@@ -0,0 +1,13 @@
+export default {
+  amount: null as number | null,
+  // The amount with its thousands grouped, and what the QR code asks for.
+  amountText: '',
+  request: '',
+  code: '',
+  codeError: '',
+  verified: false,
+  pin: '',
+  locked: false,
+  pledge: null as number | null,
+  pledgeError: '',
+};

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

@@ -0,0 +1,45 @@
+<View>
+  <Text variant="title">Payments</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. 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 tip SLE {{ amountText }}" />
+        <Text tone="muted">Scan to tip the band SLE {{ amountText }}</Text>
+      </If>
+      <Else>
+        <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">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">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="Use 123456" />
+    </Else>
+  </View>
+
+  <View gap="small">
+    <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/controller.ts

@@ -0,0 +1,22 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    increment: (state) => {
+      const count = state.count + 1;
+      return { count, taps: [{ id: count }, ...state.taps] };
+    },
+    reset: () => ({ count: 0, taps: [] }),
+  },
+  actions: {
+    fillUp() {
+      while (this.state.count < this.state.limit) {
+        this.mutations.increment();
+      }
+    },
+    undo() {
+      this.setState((current) => ({ count: current.count - 1, taps: current.taps.slice(1) }));
+    },
+  },
+});

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

@@ -0,0 +1,10 @@
+export interface Tap {
+  id: number;
+}
+
+export default {
+  title: 'cheers for an encore',
+  count: 0,
+  limit: 5,
+  taps: [] as Tap[],
+};

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

@@ -0,0 +1,33 @@
+<View>
+  <Text variant="title">State, mutations and actions</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>Encore! The band comes back on</Text>
+    </If>
+    <ElseIf condition="{{ count > 0 }}">
+      <Text>{{ limit - count }} more and the band comes back</Text>
+    </ElseIf>
+    <Else>
+      <Text>Tap Cheer to start</Text>
+    </Else>
+    <View direction="row" wrap gap="small">
+      <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 cheer, newest first</Text>
+  <View variant="card" gap="small">
+    <For each="{{ taps }}" index="position" item="tap" key="id">
+      <Text>{{ position + 1 }}. Cheer #{{ tap.id }}</Text>
+    </For>
+    <If condition="{{ taps.length === 0 }}">
+      <Text variant="caption" tone="muted">No cheers yet</Text>
+    </If>
+  </View>
+</View>

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

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  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 }),
+  },
+});

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

@@ -0,0 +1,8 @@
+export default {
+  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'],
+};

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

@@ -0,0 +1,58 @@
+<View>
+  <Text variant="title">Text and bindings</Text>
+
+  <View variant="card" gap="small">
+    <Text variant="title">Palm-wine</Text>
+    <Text>Guitar music for a calm evening. This is body text.</Text>
+    <Text variant="caption" tone="muted">S. E. Rogie and Ebenezer Calendar, in a caption</Text>
+    <Text>Text can hold{{ ' ' }}<Text variant="title">bigger</Text>{{ ' ' }}and{{ ' ' }}<Text variant="caption" tone="muted">smaller</Text>{{ ' ' }}words.</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">Links open a web page or run something on this page</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>{{ ' ' }}on Wikipedia, in the phone's browser.</Text>
+    <View direction="row" gap="medium">
+      <Link onTap="addTicket">Add a ticket below</Link>
+      <Link tone="danger" onTap="removeTicket">Remove one</Link>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">Tones, weights and alignment</Text>
+  <View variant="card" gap="small">
+    <View direction="row" wrap gap="medium">
+      <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 direction="row" gap="medium">
+      <Text weight="regular">regular</Text>
+      <Text weight="medium">medium</Text>
+      <Text weight="bold">bold</Text>
+    </View>
+    <Text align="center">In the center</Text>
+    <Text align="end">At the end</Text>
+    <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 went on to play Bonnaroo, open for Aerosmith and appear on Oprah. Two lines are allowed here, so the rest is cut off.</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">Bindings show state in the view</Text>
+  <View variant="card" gap="small">
+    <Text>Hello, {{ name }}</Text>
+    <Text>{{ tickets }} {{ tickets === 1 ? 'ticket' : 'tickets' }} at Le {{ price }} each: Le {{ tickets * price }}</Text>
+    <Text>Stage name: {{ stageName ?? 'none yet' }}</Text>
+    <Text>{{ genres.length }} favourite genres, the first is "{{ genres[0] }}"</Text>
+    <View 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>
+
+  <Text variant="caption" tone="muted">A list, one line per item</Text>
+  <View variant="card" gap="small">
+    <For each="{{ genres }}" item="genre" index="position" key="*this">
+      <Text>{{ position + 1 }}. {{ genre }}</Text>
+    </For>
+  </View>
+</View>

package/dist/templates/starter/.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=Hello from your dot

package/dist/templates/starter/dot.ts

@@ -0,0 +1,3 @@
+export default defineDot({
+  pages: ['index'],
+});

package/dist/templates/starter/pages/index/controller.ts

@@ -0,0 +1,9 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    increment: (state) => ({ count: state.count + 1 }),
+    reset: () => ({ count: 0 }),
+  },
+});

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

@@ -0,0 +1,4 @@
+export default {
+  greeting: env.GREETING,
+  count: 0,
+};

package/dist/templates/starter/pages/index/view.dml

@@ -0,0 +1,16 @@
+<View>
+  <View direction="row" align="center" gap="medium">
+    <Image src="statics/logo.png" alt="Logo" width="40" height="40" />
+    <Text variant="title">{{ greeting }}</Text>
+  </View>
+  <Text>Change pages/index/view.dml and save: the simulator shows it at once.</Text>
+
+  <View variant="card" align="center" gap="medium">
+    <Text variant="title">{{ count }}</Text>
+    <Text tone="muted">{{ count === 1 ? 'tap' : 'taps' }} so far</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
+      <Button onClick="increment">Tap me</Button>
+    </View>
+  </View>
+</View>