@monimesl/dot-cli 0.1.0-alpha.15 → 0.1.0-alpha.18

package/dist/templates/showcase/pages/{device → dash/system}/controller.ts

@@ -1,3 +1,5 @@
+import type { VibrationStyle } from '@monimesl/dot-runtime';
+
 import state from './state';
 
 export default definePage({
@@ -6,43 +8,22 @@ export default definePage({
     clearToast: () => ({ toast: '' }),
   },
   actions: {
-    async greet() {
-      try {
-        const { action } = await this.dash.ui.alert({
-          title: 'Kushé',
-          message: env.GREETING,
-          actions: [
-            { id: 'tenki', label: 'Tenki' },
-            { id: 'close', label: 'Close', role: 'cancel' },
-          ],
-        });
-        this.setState({ choice: action });
-      } catch (error) {
-        this.setState({ note: (error as Error).message });
-      }
+    async vibrate(_state, event: DotEvent<unknown, { style: VibrationStyle }>) {
+      await this.dash.system.vibrate({ style: event.data.style });
+    },
+    async copySong() {
+      await this.dash.system.copyText('Exodus, by Drizilik');
+      this.setState({ toast: 'Song copied' });
     },
-    async confirmDelete() {
+    async shareText() {
       try {
-        const { action } = await this.dash.ui.alert({
-          title: 'Remove this song from your library?',
-          message: 'Its download goes too.',
-          actions: [
-            { id: 'keep', label: 'Keep', role: 'cancel' },
-            { id: 'remove', label: 'Remove', role: 'destructive' },
-          ],
+        await this.dash.system.share({
+          text: 'Salone Sounds Live, Freetown, 24 October. See you there!',
         });
-        this.setState({ choice: action });
       } catch (error) {
         this.setState({ note: (error as Error).message });
       }
     },
-    async vibrate(_state, event: DotEvent<unknown, { style: 'light' | 'success' | 'error' }>) {
-      await this.dash.system.vibrate({ style: event.data.style });
-    },
-    async copySong() {
-      await this.dash.system.copyText('Exodus, by Drizilik');
-      this.setState({ toast: 'Song copied' });
-    },
     async shareLink() {
       try {
         await this.dash.system.share({

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

@@ -0,0 +1,9 @@
+import type { VibrationStyle } from '@monimesl/dot-runtime';
+
+export default {
+  styles: ['light', 'medium', 'heavy', 'success', 'warning', 'error'] as VibrationStyle[],
+  torch: 'off' as 'on' | 'off',
+  showIn: 0,
+  note: '',
+  toast: '',
+};

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

@@ -0,0 +1,59 @@
+<View>
+  <Text variant="title">dash.system</Text>
+  <Text>The phone's own features: vibration, the clipboard, sharing, the browser, timers and the torch.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">vibrate</Text>
+    <Text variant="caption" tone="muted">A short buzz, in a style that suits what happened.</Text>
+    <View variant="card" direction="row" wrap gap="small">
+      <For each="{{ styles }}" item="style" key="*this">
+        <Button variant="secondary" data-style="{{ style }}" onClick="vibrate">{{ style }}</Button>
+      </For>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">copyText</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="copySong">Copy a song's name</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">share</Text>
+    <Text variant="caption" tone="muted">Opens the phone's share sheet with text, a link or a file. The dash.network page shares a file.</Text>
+    <View variant="card" direction="row" wrap gap="small">
+      <Button variant="secondary" onClick="shareText">Share text</Button>
+      <Button variant="secondary" onClick="shareLink">Share a link</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">openUrl</Text>
+    <Text variant="caption" tone="muted">Opens a web page in the phone's browser.</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="openDrizilik">Open Drizilik's website</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">delay</Text>
+    <Text variant="caption" tone="muted">Waits for a number of milliseconds. Dash keeps time, so it's cancelled when the page closes.</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="countDown" disabled="{{ showIn > 0 }}">{{ showIn > 0 ? 'Showtime in ' + showIn + 's' : 'Count down to showtime' }}</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">torch</Text>
+    <Text variant="caption" tone="muted">Turns the camera's light on or off.</Text>
+    <View variant="card">
+      <Button variant="secondary" onClick="toggleTorch">{{ torch === 'on' ? 'Turn the torch off' : 'Lights up for the slow song' }}</Button>
+    </View>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

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

@@ -0,0 +1,69 @@
+import { HostError } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+// Closing a picker isn't a problem to show. Anything else is.
+function problemToShow(error: unknown): string {
+  const closedByPerson = error instanceof HostError && error.code === 'cancelled';
+  return closedByPerson ? '' : (error as Error).message;
+}
+
+export default definePage({
+  initialState: state,
+  actions: {
+    async greet() {
+      try {
+        const { action } = await this.dash.ui.alert({
+          title: 'Kushé',
+          message: 'Kushé means hello in Krio, and tenki means thanks.',
+          actions: [
+            { id: 'tenki', label: 'Tenki' },
+            { id: 'close', label: 'Close', role: 'cancel' },
+          ],
+        });
+        this.setState({ choice: action, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+    async confirmRemove() {
+      try {
+        const { action } = await this.dash.ui.alert({
+          title: 'Remove this song from your library?',
+          message: 'Its download goes too.',
+          actions: [
+            { id: 'keep', label: 'Keep', role: 'cancel' },
+            { id: 'remove', label: 'Remove', role: 'destructive' },
+          ],
+        });
+        this.setState({ choice: action, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+    async chooseNight(state) {
+      try {
+        const night = await this.dash.ui.pickDate({
+          title: 'Choose a night',
+          value: state.night || undefined,
+          min: '2026-10-01',
+          max: '2026-12-31',
+        });
+        this.setState({ night, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+    async chooseArrival(state) {
+      try {
+        const arrival = await this.dash.ui.pickTime({
+          title: 'Arriving at',
+          value: state.arrival || '18:00',
+        });
+        this.setState({ arrival, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,8 @@
+export default {
+  // The id of the alert button tapped.
+  choice: '',
+  // A date such as "2026-10-24", and a time such as "19:30", from the phone's own pickers.
+  night: '',
+  arrival: '',
+  note: '',
+};

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

@@ -0,0 +1,31 @@
+<View>
+  <Text variant="title">dash.ui</Text>
+  <Text>Dash shows these over the dot, in the phone's own style. Each call waits until the person answers.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">alert</Text>
+    <Text variant="caption" tone="muted">A title, a message and buttons. It gives back the id of the button tapped. role="cancel" and role="destructive" style a button.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" wrap gap="small">
+        <Button onClick="greet">Say kushé</Button>
+        <Button variant="secondary" onClick="confirmRemove">Remove a song</Button>
+      </View>
+      <If condition="{{ choice }}">
+        <Text>You tapped "{{ choice }}"</Text>
+      </If>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">pickDate and pickTime</Text>
+    <Text variant="caption" tone="muted">The phone's own pickers. A date comes back as "2026-10-24" and a time as "19:30". min and max limit the dates. Closing a picker rejects with a HostError coded cancelled.</Text>
+    <List>
+      <ListItem icon="calendar" title="Night" subtitle="Shows run from October to December" value="{{ night || 'Choose' }}" onTap="chooseNight" />
+      <ListItem icon="clock" title="Arriving at" subtitle="Doors open at 18:00" value="{{ arrival || 'Choose' }}" onTap="chooseArrival" />
+    </List>
+  </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
+</View>

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

@@ -1,127 +1,204 @@
-export interface Feature {
+export interface Topic {
   page: PageId;
   title: string;
-  summary: string;
+  // The API names the page shows, so it's easy to find the one you need.
+  covers: string;
   icon: string;
 }
 
 export interface Section {
   title: string;
-  features: Feature[];
+  text: string;
+  topics: Topic[];
 }
 
 export default {
   title: 'Salone Sounds',
   sections: [
     {
-      title: 'Views',
-      features: [
+      title: 'Basics',
+      text: 'How a page works: pages/<name>/ with state.ts, view.dml and controller.ts',
+      topics: [
         {
-          page: 'layout',
+          page: 'basics/state',
+          title: 'State, mutations and actions',
+          covers: 'state.ts, setState, mutations, actions',
+          icon: 'refresh',
+        },
+        {
+          page: 'basics/bindings',
+          title: 'Bindings',
+          covers: '{{ }}, expressions, env',
+          icon: 'link',
+        },
+        {
+          page: 'basics/control-flow',
+          title: 'If and For',
+          covers: 'If, ElseIf, Else, For',
+          icon: 'list',
+        },
+        {
+          page: 'basics/events',
+          title: 'Events',
+          covers: 'onTap, onChange, event.detail, data-*',
+          icon: 'bolt',
+        },
+        {
+          page: 'basics/navigation',
+          title: 'Navigation',
+          covers: 'push, replace, back, reset',
+          icon: 'arrow-right',
+        },
+        {
+          page: 'basics/hooks',
+          title: 'Page hooks',
+          covers: 'onLoad, onShow, onHide, onUnload',
+          icon: 'history',
+        },
+        {
+          page: 'basics/bars',
+          title: "Dash's bars",
+          covers: 'configs, setNavigationBar, setTabBar',
+          icon: 'settings',
+        },
+      ],
+    },
+    {
+      title: 'Components',
+      text: 'What a view.dml can show',
+      topics: [
+        {
+          page: 'components/layout',
           title: 'Layout',
-          summary: 'Rows, columns, cards, a shelf to scroll and a grid',
+          covers: 'View, Stack, Scroll, Grid, Divider',
           icon: 'grid',
         },
         {
-          page: 'text',
-          title: 'Text and bindings',
-          summary: 'Text styles, tones, links and bindings',
+          page: 'components/styles',
+          title: 'Styles',
+          covers: 'background, border, radius, sizes, theme colours',
+          icon: 'star',
+        },
+        {
+          page: 'components/text',
+          title: 'Text and links',
+          covers: 'Text, Link',
           icon: 'edit',
         },
         {
-          page: 'images',
+          page: 'components/icons',
+          title: 'Icons',
+          covers: 'Icon, every name',
+          icon: 'heart',
+        },
+        {
+          page: 'components/reading',
+          title: 'Reading',
+          covers: 'Prose, Quote, BulletList, RichText',
+          icon: 'file',
+        },
+        {
+          page: 'components/images',
           title: 'Images',
-          summary: 'Pictures from the dot and from the web',
+          covers: 'Image',
           icon: 'image',
         },
         {
-          page: 'carousel',
+          page: 'components/carousel',
           title: 'Carousel',
-          summary: 'Slides of Gen Z artists and Salone history',
-          icon: 'image',
+          covers: 'Carousel',
+          icon: 'video',
         },
         {
-          page: 'lists',
-          title: 'Lists and icons',
-          summary: 'Rows to tap, badges and icons',
+          page: 'components/lists',
+          title: 'Lists',
+          covers: 'List, ListItem, DetailRow, EmptyState',
           icon: 'list',
         },
         {
-          page: 'filters',
-          title: 'Tabs and filters',
-          summary: 'Tabs, chips and empty states',
+          page: 'components/tabs',
+          title: 'Tabs and chips',
+          covers: 'Tabs, Tab, Chip',
           icon: 'search',
         },
         {
-          page: 'forms',
+          page: 'components/forms',
           title: 'Forms',
-          summary: 'Fields, choices and switches for buying tickets',
+          covers: 'Input, TextArea, Select, Checkbox, Radio, Switch, Slider, Footer',
           icon: 'check',
         },
         {
-          page: 'payments',
-          title: 'Payments',
-          summary: 'Amounts, QR codes and one-time codes',
+          page: 'components/money',
+          title: 'Money and codes',
+          covers: 'AmountInput, CodeInput, QRCode',
           icon: 'cash',
         },
         {
-          page: 'feedback',
+          page: 'components/feedback',
           title: 'Feedback',
-          summary: 'Loading, toasts, progress and notices',
+          covers: 'Spinner, Skeleton, ProgressBar, Notice, Badge, Toast',
           icon: 'bell',
         },
-      ],
-    },
-    {
-      title: 'Logic',
-      features: [
-        {
-          page: 'state',
-          title: 'State, mutations and actions',
-          summary: 'State, conditions and lists',
-          icon: 'refresh',
-        },
         {
-          page: 'navigation',
-          title: 'Navigation and hooks',
-          summary: 'Opening pages, going back, and page hooks',
-          icon: 'arrow-right',
+          page: 'components/sheets',
+          title: 'Sheets',
+          covers: 'Sheet',
+          icon: 'more',
         },
       ],
     },
     {
       title: 'Dash',
-      features: [
+      text: "The phone's features, through this.dash",
+      topics: [
         {
-          page: 'device',
-          title: 'Alerts and device',
-          summary: 'Alerts, copy, share, links and the torch',
+          page: 'dash/ui',
+          title: 'dash.ui',
+          covers: 'alert, pickDate, pickTime',
+          icon: 'calendar',
+        },
+        {
+          page: 'dash/system',
+          title: 'dash.system',
+          covers: 'vibrate, copyText, share, openUrl, delay, torch',
           icon: 'mobile',
         },
         {
-          page: 'network',
-          title: 'Network',
-          summary: 'Requests, JSON, downloads and uploads',
+          page: 'dash/media',
+          title: 'dash.media',
+          covers: 'pickPhoto, scanCode',
+          icon: 'image',
+        },
+        {
+          page: 'dash/network',
+          title: 'dash.network.http',
+          covers: 'request, download, upload',
           icon: 'wifi',
         },
         {
-          page: 'files',
-          title: 'Files',
-          summary: "Saving files in the dot's own folder",
+          page: 'dash/files',
+          title: 'dash.storage.file',
+          covers: 'write, read, list, move, copy, pick, save',
           icon: 'file',
         },
         {
-          page: 'cache',
-          title: 'Cache',
-          summary: 'Values that expire after a while',
-          icon: 'refresh',
+          page: 'dash/cache',
+          title: 'dash.storage.cache',
+          covers: 'set, get, keys, exists, remove, clear',
+          icon: 'history',
         },
         {
-          page: 'secrets',
-          title: 'Secrets',
-          summary: 'Sign-in tokens kept encrypted',
+          page: 'dash/secrets',
+          title: 'dash.storage.secret',
+          covers: 'set, get, remove, clear',
           icon: 'lock',
         },
+        {
+          page: 'dash/calls',
+          title: 'Calls and errors',
+          covers: 'timeout, cancel, HostError',
+          icon: 'warning',
+        },
       ],
     },
   ] as Section[],

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

@@ -9,10 +9,13 @@
 
   <For each="{{ sections }}" item="section" key="title">
     <View gap="small">
-      <Text variant="caption" tone="muted">{{ section.title }}</Text>
+      <View gap="none">
+        <Text variant="subtitle">{{ section.title }}</Text>
+        <Text variant="caption" tone="muted">{{ section.text }}</Text>
+      </View>
       <List>
-        <For each="{{ section.features }}" item="feature" key="page">
-          <ListItem icon="{{ feature.icon }}" title="{{ feature.title }}" subtitle="{{ feature.summary }}" data-page="{{ feature.page }}" onTap="open" />
+        <For each="{{ section.topics }}" item="topic" key="page">
+          <ListItem icon="{{ topic.icon }}" title="{{ topic.title }}" subtitle="{{ topic.covers }}" data-page="{{ topic.page }}" onTap="open" />
         </For>
       </List>
     </View>

package/package.json

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

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

@@ -1,36 +0,0 @@
-<View>
-  <Text variant="title">Cache</Text>
-  <Text>The cache saves small values by name. A value can expire after a set time, or stay until it is removed.</Text>
-
-  <Text variant="caption" tone="muted">Tap an artist. It is remembered for 30 seconds.</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="name">
-        <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>
-
-  <Text variant="caption" tone="muted">Your favourite genre. It stays until you clear the cache.</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 variant="card" gap="small">
-    <Text variant="caption" tone="muted">Keys in the cache: {{ keys || 'none' }}</Text>
-    <Button variant="secondary" onClick="clear" disabled="{{ !keys }}">Clear the cache</Button>
-  </View>
-</View>

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

@@ -1,7 +0,0 @@
-export default {
-  choice: '',
-  torch: 'off' as 'on' | 'off',
-  note: '',
-  toast: '',
-  showIn: 0,
-};

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

@@ -1,49 +0,0 @@
-<View>
-  <Text variant="title">Alerts and device</Text>
-  <Text>Dash shows these, not the dot. The dot asks for them through dash.</Text>
-
-  <Text variant="caption" tone="muted">dash.ui.alert</Text>
-  <View variant="card" gap="small">
-    <View direction="row" wrap gap="small">
-      <Button onClick="greet">Say kushé</Button>
-      <Button variant="secondary" onClick="confirmDelete">Remove a song</Button>
-    </View>
-    <If condition="{{ choice }}">
-      <Text>You chose "{{ choice }}"</Text>
-    </If>
-    <Text variant="caption" tone="muted">Kushé means hello in Krio, and tenki means thanks. The message comes from GREETING in the .env file.</Text>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.vibrate</Text>
-  <View variant="card" direction="row" wrap gap="small">
-    <Button variant="secondary" data-style="light" onClick="vibrate">Light</Button>
-    <Button variant="secondary" data-style="success" onClick="vibrate">Success</Button>
-    <Button variant="secondary" data-style="error" onClick="vibrate">Error</Button>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.copyText and dash.system.share</Text>
-  <View variant="card" direction="row" wrap gap="small">
-    <Button variant="secondary" onClick="copySong">Copy a song</Button>
-    <Button variant="secondary" onClick="shareLink">Share Sierra Leone's music</Button>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.openUrl opens a web page in the phone's browser</Text>
-  <View variant="card">
-    <Button variant="secondary" onClick="openDrizilik">Open Drizilik's website</Button>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.delay</Text>
-  <View variant="card">
-    <Button variant="secondary" onClick="countDown" disabled="{{ showIn > 0 }}">{{ showIn > 0 ? 'Showtime in ' + showIn + 's' : 'Count down to showtime' }}</Button>
-  </View>
-
-  <Text variant="caption" tone="muted">dash.system.torch</Text>
-  <View variant="card" gap="small">
-    <Button variant="secondary" onClick="toggleTorch">{{ torch === 'on' ? 'Turn the torch off' : 'Lights up for the slow song' }}</Button>
-    <If condition="{{ note }}">
-      <Text variant="caption" tone="muted">{{ note }}</Text>
-    </If>
-  </View>
-
-  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
-</View>