@monimesl/dot-cli 0.1.0-alpha.2 → 0.1.0-alpha.23

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

@@ -0,0 +1,89 @@
+import type { VibrationStyle } from '@monimesl/dot-runtime';
+import { errorMessage } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.system' } },
+  mutations: {
+    clearToast: () => ({ toast: '' }),
+    setNumber: (_state, event: ValueEvent) => ({ number: event.detail.value }),
+  },
+  actions: {
+    async vibrate(_state, event: DataEvent<{ 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 shareText() {
+      try {
+        await this.dash.system.share({
+          text: 'Salone Sounds Live, Freetown, 24 October. See you there!',
+        });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async shareLink() {
+      try {
+        await this.dash.system.share({
+          title: 'Music of Sierra Leone',
+          url: 'https://en.wikipedia.org/wiki/Music_of_Sierra_Leone',
+        });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async openDrizilik() {
+      try {
+        await this.dash.system.openUrl('https://drizilik.com/');
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async countDown() {
+      for (let seconds = 10; seconds > 0; seconds--) {
+        this.setState({ showIn: seconds });
+        await this.dash.system.delay(1000);
+      }
+      this.setState({ showIn: 0, toast: "It's showtime" });
+    },
+    async readInfo() {
+      try {
+        this.setState({ info: await this.dash.system.info(), note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async toggleTicket(state) {
+      const ticketShown = !state.ticketShown;
+      try {
+        await this.dash.system.keepAwake(ticketShown);
+        await this.dash.system.brightness(ticketShown ? 'max' : 'normal');
+        this.setState({ ticketShown, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async dialNumber(state) {
+      try {
+        await this.dash.system.dial(state.number);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async toggleTorch(state) {
+      const torchOn = !state.torchOn;
+      try {
+        await this.dash.system.torch(torchOn);
+        this.setState({ torchOn, note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,13 @@
+import type { SystemInfo, VibrationStyle } from '@monimesl/dot-runtime';
+
+export default {
+  styles: ['light', 'medium', 'heavy', 'success', 'warning', 'error'] as VibrationStyle[],
+  torchOn: false,
+  info: null as SystemInfo | null,
+  // The ticket's QR code shows awake and bright, so a scanner at the door reads it.
+  ticketShown: false,
+  number: '*715#',
+  showIn: 0,
+  note: '',
+  toast: '',
+};

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

@@ -0,0 +1,97 @@
+<View>
+  <Text variant="title">dash.system</Text>
+  <Text>The phone's own features: what it is, its screen, vibration, the clipboard, sharing, the browser, the dialer, timers and the torch.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">info</Text>
+    <Text variant="caption" tone="muted">The phone and the app the dot runs in, without anything that identifies the person or the phone.</Text>
+    <View variant="card" gap="none">
+      <If condition="{{ info }}">
+        <DetailRow label="Platform" value="{{ info.platform }} {{ info.osVersion }}" />
+        <DetailRow label="Language" value="{{ info.language }}{{ info.region ? ' · ' + info.region : '' }}" />
+        <DetailRow label="Time zone" value="{{ info.timeZone }}" />
+        <DetailRow label="Dash" value="{{ info.dashVersion }}" />
+        <DetailRow label="DotHost" value="{{ info.hostVersion }}" />
+      </If>
+      <Else>
+        <Button variant="secondary" onClick="readInfo">Read the phone's details</Button>
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">keepAwake and brightness</Text>
+    <Text variant="caption" tone="muted">Keep the screen on and as bright as it goes while a QR code shows, so a scanner reads it. Dash puts both back when the dot closes.</Text>
+    <View variant="card" align="center" gap="medium">
+      <If condition="{{ ticketShown }}">
+        <QRCode value="TICKET-SSL-0042" size="160" label="Your ticket's QR code" />
+        <Text tone="muted">Show this at the door</Text>
+      </If>
+      <Button variant="secondary" onClick="toggleTicket">{{ ticketShown ? 'Hide the ticket' : 'Show my ticket' }}</Button>
+    </View>
+  </View>
+
+  <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">dial</Text>
+    <Text variant="caption" tone="muted">Opens the phone's dialer with a number ready, or a USSD code such as *715#. The person taps Call.</Text>
+    <View variant="card">
+      <Input label="Number or code" type="phone" value="{{ number }}" onChange="setNumber" onSubmit="dialNumber" />
+      <Button variant="secondary" onClick="dialNumber" disabled="{{ !number }}">Open the dialer</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">{{ torchOn ? '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,70 @@
+import { errorMessage, unlessCancelled } from '@monimesl/dot-runtime';
+
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'dash.ui' } },
+  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: errorMessage(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: errorMessage(error) });
+      }
+    },
+    // unlessCancelled gives undefined when the person closes the picker, which isn't a problem.
+    async chooseNight(state) {
+      try {
+        const night = await unlessCancelled(
+          this.dash.ui.pickDate({
+            title: 'Choose a night',
+            value: state.night || undefined,
+            min: '2026-10-01',
+            max: '2026-12-31',
+          }),
+        );
+        if (night) {
+          this.setState({ night, note: '' });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
+    },
+    async chooseArrival(state) {
+      try {
+        const arrival = await unlessCancelled(
+          this.dash.ui.pickTime({ title: 'Arriving at', value: state.arrival || '18:00' }),
+        );
+        if (arrival) {
+          this.setState({ arrival, note: '' });
+        }
+      } catch (error) {
+        this.setState({ note: errorMessage(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 DashError 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/controller.ts

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  actions: {
+    open(_state, event: DataEvent<{ page: PageId }>) {
+      this.navigation.push(event.data.page);
+    },
+  },
+});

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

@@ -0,0 +1,237 @@
+export interface Topic {
+  page: PageId;
+  title: 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;
+  text: string;
+  topics: Topic[];
+}
+
+export default {
+  title: 'Salone Sounds',
+  sections: [
+    {
+      title: 'Basics',
+      text: 'How a page works: pages/<name>/ with state.ts, view.dml and controller.ts',
+      topics: [
+        {
+          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, pushForResult, backWithResult',
+          icon: 'arrow-right',
+        },
+        {
+          page: 'basics/hooks',
+          title: 'Page hooks',
+          covers: 'onLoad, onShow, onHide, onUnload, onRefresh',
+          icon: 'history',
+        },
+        {
+          page: 'basics/bars',
+          title: "Dash's bars",
+          covers: 'configs, setNavigationBar, setTabBar, setColors',
+          icon: 'settings',
+        },
+        {
+          page: 'basics/colors',
+          title: 'Page colours',
+          covers: 'configs.colors, setColors, background, primary, surfaces',
+          icon: 'water',
+        },
+        {
+          page: 'basics/share',
+          title: 'Share links',
+          covers: "share, opening a link, checking a link's options",
+          icon: 'share',
+        },
+      ],
+    },
+    {
+      title: 'Components',
+      text: 'What a view.dml can show',
+      topics: [
+        {
+          page: 'components/layout',
+          title: 'Layout',
+          covers: 'View, Stack, Scroll, Grid, Divider',
+          icon: 'grid',
+        },
+        {
+          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: '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',
+          covers: 'Image, Avatar',
+          icon: 'image',
+        },
+        {
+          page: 'components/carousel',
+          title: 'Carousel',
+          covers: 'Carousel',
+          icon: 'video',
+        },
+        {
+          page: 'components/lists',
+          title: 'Lists',
+          covers: 'List, ListItem, DetailRow, Disclosure, EmptyState',
+          icon: 'list',
+        },
+        {
+          page: 'components/tabs',
+          title: 'Tabs and chips',
+          covers: 'Tabs, Tab, Chip',
+          icon: 'search',
+        },
+        {
+          page: 'components/forms',
+          title: 'Forms',
+          covers: 'Input, TextArea, Select, Stepper, Checkbox, Radio, Switch, Slider, Footer',
+          icon: 'check',
+        },
+        {
+          page: 'components/money',
+          title: 'Money and codes',
+          covers: 'AmountInput, CodeInput, QRCode',
+          icon: 'cash',
+        },
+        {
+          page: 'components/feedback',
+          title: 'Feedback',
+          covers: 'Spinner, Skeleton, ProgressBar, Notice, Steps, Badge, Toast',
+          icon: 'bell',
+        },
+        {
+          page: 'components/sheets',
+          title: 'Sheets',
+          covers: 'Sheet',
+          icon: 'more',
+        },
+      ],
+    },
+    {
+      title: 'Dash',
+      text: "The phone's features, through this.dash",
+      topics: [
+        {
+          page: 'dash/ui',
+          title: 'dash.ui',
+          covers: 'alert, pickDate, pickTime',
+          icon: 'calendar',
+        },
+        {
+          page: 'dash/system',
+          title: 'dash.system',
+          covers:
+            'info, keepAwake, brightness, vibrate, copyText, share, openUrl, dial, delay, torch',
+          icon: 'mobile',
+        },
+        {
+          page: 'dash/media',
+          title: 'dash.media',
+          covers: 'pickPhoto, pickFile, scanCode',
+          icon: 'image',
+        },
+        {
+          page: 'dash/contacts',
+          title: 'dash.contacts',
+          covers: 'pickPhone',
+          icon: 'users',
+        },
+        {
+          page: 'dash/account',
+          title: 'dash.account',
+          covers: 'readProfile',
+          icon: 'user',
+        },
+        {
+          page: 'dash/crypto',
+          title: 'dash.crypto',
+          covers:
+            'sha256, sha512, hmac, randomBytes, randomUUID, and dash.utils for base64 and hex',
+          icon: 'lock',
+        },
+        {
+          page: 'dash/network',
+          title: 'dash.network',
+          covers: 'status, http.request, http.download, http.upload, debounce, latest',
+          icon: 'wifi',
+        },
+        {
+          page: 'dash/files',
+          title: 'dash.storage.file',
+          covers: 'write, read, list, move, copy, remove, save, stat, open, usage',
+          icon: 'file',
+        },
+        {
+          page: 'dash/cache',
+          title: 'dash.storage.cache',
+          covers: 'set, get, keys, exists, remove, clear',
+          icon: 'history',
+        },
+        {
+          page: 'dash/secrets',
+          title: 'dash.storage.secret',
+          covers: 'set, get, remove, clear',
+          icon: 'lock',
+        },
+        {
+          page: 'dash/calls',
+          title: 'Calls and errors',
+          covers: 'timeout, cancel, DashError, isDashError, isDashCancelled',
+          icon: 'warning',
+        },
+      ],
+    },
+  ] as Section[],
+};

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

@@ -0,0 +1,23 @@
+<View>
+  <View direction="row" align="center" gap="large">
+    <Image src="statics/logo.png" alt="Salone Sounds logo" width="48" height="48" />
+    <View gap="none">
+      <Text variant="title">{{ title }}</Text>
+      <Text variant="caption" tone="muted">What a dot can do, shown with Sierra Leone's music</Text>
+    </View>
+  </View>
+
+  <For each="{{ sections }}" item="section" key="title">
+    <View gap="small">
+      <View gap="none">
+        <Text variant="subtitle">{{ section.title }}</Text>
+        <Text variant="caption" tone="muted">{{ section.text }}</Text>
+      </View>
+      <List>
+        <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>
+  </For>
+</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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-cli",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.23",
   "description": "The dotctl command: build mini apps and run them in the simulator",
   "type": "module",
   "repository": {
@@ -22,18 +22,23 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@monimesl/dot-dml-parser": "0.1.0-alpha.2",
-    "@monimesl/dot-script-parser": "0.1.0-alpha.2",
-    "@monimesl/dot-compiler": "0.1.0-alpha.2",
-    "@monimesl/dot-simulator": "0.1.0-alpha.2"
+    "typescript": "^5.9.3",
+    "uqr": "^0.1.3",
+    "@monimesl/dot-compiler": "0.1.0-alpha.23",
+    "@monimesl/dot-core": "0.1.0-alpha.23",
+    "@monimesl/dot-dml-parser": "0.1.0-alpha.23",
+    "@monimesl/dot-script-parser": "0.1.0-alpha.23",
+    "@monimesl/dot-simulator": "0.1.0-alpha.23"
   },
   "devDependencies": {
     "@types/node": "^22.20.4",
     "publint": "^0.3.24",
     "rimraf": "^6.1.3",
     "tsdown": "^0.23.0",
-    "typescript": "^5.9.3",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.1",
+    "vscode-languageserver": "^9.0.1",
+    "vscode-languageserver-protocol": "^3.17.5",
+    "vscode-languageserver-textdocument": "^1.0.15"
   },
   "publishConfig": {
     "access": "public"

package/dist/template/.env

@@ -1,3 +0,0 @@
-# Public configuration for the dot. Only DOT_PUBLIC_ variables reach it, and anyone with the dot
-# can read them: never put a secret here. Read them in the service as `env.DOT_PUBLIC_…`.
-DOT_PUBLIC_GREETING=Dash draws this alert, not the dot.