@monimesl/dot-cli 0.1.0-alpha.14 → 0.1.0-alpha.16

package/dist/templates/showcase/dot.ts

@@ -5,6 +5,7 @@ export default defineDot({
     'index',
     'layout',
     'text',
+    'styles',
     'images',
     'carousel',
     'lists',
@@ -20,5 +21,15 @@ export default defineDot({
     'cache',
     'secrets',
   ],
+  // The showcase's own colours, used by name on the Styles page.
+  theme: {
+    colors: {
+      custom: {
+        gold: { light: '#f5c542', dark: '#d4a72c' },
+        // Dark text that reads on gold in both light and dark.
+        ink: { light: '#1c1c1e', dark: '#1c1c1e' },
+      },
+    },
+  },
   plugins: [logger()],
 });

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

@@ -1,5 +1,13 @@
+import { HostError } from '@monimesl/dot-runtime';
+
 import state from './state';
 
+// Closing a picker or scanner isn't a problem to show.
+function problemToShow(error: unknown): string {
+  const closedByPerson = error instanceof HostError && error.code === 'cancelled';
+  return closedByPerson ? '' : (error as Error).message;
+}
+
 export default definePage({
   initialState: state,
   mutations: {
@@ -67,6 +75,23 @@ export default definePage({
       }
       this.setState({ showIn: 0, toast: "It's showtime" });
     },
+    async pickPhoto(_state, event: DotEvent<unknown, { source: 'library' | 'camera' }>) {
+      try {
+        const photo = await this.dash.media.pickPhoto({ source: event.data.source });
+        const details = `${photo.name}, ${Math.round(photo.size / 1024)} KB as a JPEG`;
+        this.setState({ photo, photoDetails: details, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
+    async scanTicket() {
+      try {
+        const { text } = await this.dash.media.scanCode();
+        this.setState({ scanned: text, note: '' });
+      } catch (error) {
+        this.setState({ note: problemToShow(error) });
+      }
+    },
     async toggleTorch(state) {
       const next = state.torch === 'on' ? 'off' : 'on';
       try {

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

@@ -1,4 +1,13 @@
+export interface Photo {
+  name: string;
+  size: number;
+  url: string;
+}
+
 export default {
+  photo: null as Photo | null,
+  photoDetails: '',
+  scanned: '',
   choice: '',
   torch: 'off' as 'on' | 'off',
   note: '',

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

@@ -37,6 +37,26 @@
     <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.media.pickPhoto, with the photoLibrary and camera permissions</Text>
+  <View variant="card" gap="small">
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" data-source="library" onClick="pickPhoto">Choose a photo</Button>
+      <Button variant="secondary" data-source="camera" onClick="pickPhoto">Take a photo</Button>
+    </View>
+    <If condition="{{ photo }}">
+      <Image src="{{ photo.url }}" alt="The photo you picked" aspect="4:3" fit="contain" />
+      <Text variant="caption" tone="muted">{{ photoDetails }}. It goes when the dot closes, unless the dot saves it.</Text>
+    </If>
+  </View>
+
+  <Text variant="caption" tone="muted">dash.media.scanCode, with Dash's own scanner and the camera permission</Text>
+  <View variant="card" gap="small">
+    <Button variant="secondary" onClick="scanTicket">Scan a ticket's QR code</Button>
+    <If condition="{{ scanned }}">
+      <Text>{{ scanned }}</Text>
+    </If>
+  </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>

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

@@ -1,4 +1,6 @@
-import type { Archive, Song } from './state';
+import { HostError } from '@monimesl/dot-runtime';
+
+import type { Archive, Document, Song } from './state';
 import state from './state';
 
 const PICTURE = 'pictures/artwork.jpg';
@@ -29,11 +31,15 @@ export default definePage({
           time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
         }))
         .reverse();
+      const documents: Document[] = entries
+        .filter((entry) => entry.kind === 'file' && entry.path.startsWith('documents/'))
+        .map((entry) => ({ path: entry.path, name: entry.name }));
       const { used, quota } = await this.dash.storage.file.usage();
       const kept = await this.dash.storage.file.stat(PICTURE);
       this.setState({
         songs,
         archives,
+        documents,
         usage: `${used} bytes used of ${quota / 1024 / 1024} MB`,
         picture: kept ? (await this.dash.storage.file.open(PICTURE)).url : '',
       });
@@ -58,6 +64,22 @@ export default definePage({
       await this.dash.storage.file.remove('setlist', { recursive: true });
       await this.actions.refresh();
     },
+    // A picked file goes when the dot closes, so it's saved into the dot's own folder.
+    async attach() {
+      try {
+        const file = await this.dash.storage.file.pick({ types: ['application/pdf', 'image/*'] });
+        await this.dash.storage.file.createFolder('documents');
+        await this.dash.storage.file.save(file, `documents/${file.name}`, { overwrite: true });
+        this.setState({ attachNote: '' });
+        await this.actions.refresh();
+      } catch (error) {
+        // Closing the picker or scanner isn't a problem to show.
+        const closedByPerson = error instanceof HostError && error.code === 'cancelled';
+        if (!closedByPerson) {
+          this.setState({ attachNote: (error as Error).message });
+        }
+      }
+    },
     async forgetPicture() {
       await this.dash.storage.file.remove(PICTURE);
       await this.actions.refresh();

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

@@ -4,6 +4,11 @@ export interface Archive {
   time: string;
 }
 
+export interface Document {
+  path: string;
+  name: string;
+}
+
 export interface Song {
   path: string;
   text: string;
@@ -16,4 +21,7 @@ export default {
   archives: [] as Archive[],
   usage: '',
   picture: '',
+  // Files the person attached, kept in the dot's documents folder.
+  documents: [] as Document[],
+  attachNote: '',
 };

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

@@ -35,6 +35,20 @@
     </Else>
   </View>
 
+  <Text variant="caption" tone="muted">dash.storage.file.pick, with the files permission, then save to keep it</Text>
+  <View variant="card" gap="small">
+    <Button variant="secondary" onClick="attach">Attach your concert ticket</Button>
+    <For each="{{ documents }}" item="document" key="path">
+      <View gap="none">
+        <Text>{{ document.name }}</Text>
+        <Text variant="caption" tone="muted">{{ document.path }}</Text>
+      </View>
+    </For>
+    <If condition="{{ attachNote }}">
+      <Text variant="caption" tone="muted">{{ attachNote }}</Text>
+    </If>
+  </View>
+
   <Text variant="caption" tone="muted">Artwork saved from the Network page</Text>
   <View variant="card" gap="small">
     <If condition="{{ picture }}">

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

@@ -28,6 +28,12 @@ export default {
           summary: 'Text styles, tones, links and bindings',
           icon: 'edit',
         },
+        {
+          page: 'styles',
+          title: 'Styles',
+          summary: 'Colours, outlines, corners, sizes and layers',
+          icon: 'star',
+        },
         {
           page: 'images',
           title: 'Images',
@@ -95,7 +101,7 @@ export default {
         {
           page: 'device',
           title: 'Alerts and device',
-          summary: 'Alerts, copy, share, links and the torch',
+          summary: 'Alerts, sharing, links, photos, QR codes and the torch',
           icon: 'mobile',
         },
         {
@@ -107,7 +113,7 @@ export default {
         {
           page: 'files',
           title: 'Files',
-          summary: "Saving files in the dot's own folder",
+          summary: "Saving files in the dot's own folder, and picking them",
           icon: 'file',
         },
         {

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

@@ -5,7 +5,7 @@ export interface HookRun {
 
 export default {
   depth: 1,
-  maxDepth: 8,
+  maxDepth: 16,
   // The trail of the page that opened this one.
   from: '',
   trail: '',

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

@@ -0,0 +1,5 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+});

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

@@ -0,0 +1,3 @@
+export default {
+  balance: 'SLE 1,250.00',
+};

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

@@ -0,0 +1,61 @@
+<View>
+  <Text variant="title">Styles</Text>
+  <Text>Colours, outlines, corners and sizes come from the theme, so a dot looks right in light and dark.</Text>
+
+  <Text variant="caption" tone="muted">background="primary", with text tone="onPrimary"</Text>
+  <View background="primary" radius="large" padding="large" gap="small">
+    <Text variant="caption" tone="onPrimary">Your balance</Text>
+    <Text variant="display" tone="onPrimary" numeric>{{ balance }}</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">A tone as a background is a soft tint</Text>
+  <View direction="row" gap="small" wrap>
+    <View background="success" radius="medium" padding="small">
+      <Text tone="success" weight="medium">Paid</Text>
+    </View>
+    <View background="warning" radius="medium" padding="small">
+      <Text tone="warning" weight="medium">Due Friday</Text>
+    </View>
+    <View background="danger" radius="medium" padding="small">
+      <Text tone="danger" weight="medium">Failed</Text>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">The dot's own colours, named in dot.ts</Text>
+  <View direction="row" gap="small" align="center">
+    <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
+      <Text weight="medium" tone="ink">Gold member</Text>
+    </View>
+    <Text tone="gold" weight="bold">Since 2024</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">Outlines, corners and sizes in points</Text>
+  <View direction="row" gap="medium" align="end">
+    <View width="56" height="56" background="muted" radius="small" />
+    <View width="56" height="56" background="muted" radius="medium" />
+    <View width="56" height="56" background="muted" radius="full" />
+    <View width="56" height="56" border="strong" radius="medium" />
+  </View>
+
+  <Text variant="caption" tone="muted">Prices with even digits, and the old one crossed out</Text>
+  <View variant="card" direction="row" align="center" gap="small">
+    <Text variant="subtitle">Freetown Jazz Night</Text>
+    <View grow />
+    <Text tone="muted" decoration="strikethrough" numeric>SLE 150</Text>
+    <Text weight="bold" numeric>SLE 120</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">A Stack lays its children on top of each other</Text>
+  <Stack radius="large" aspect="16:9">
+    <View background="gold" />
+    <View justify="end" padding="large">
+      <Text variant="subtitle" tone="ink">Bo market day</Text>
+      <Text tone="ink">Every Saturday, from 7 am</Text>
+    </View>
+    <View align="end" padding="medium">
+      <View background="primary" radius="full" paddingStart="small" paddingEnd="small">
+        <Text variant="caption" tone="onPrimary" weight="bold">New</Text>
+      </View>
+    </View>
+  </Stack>
+</View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-cli",
-  "version": "0.1.0-alpha.14",
+  "version": "0.1.0-alpha.16",
   "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.14",
-    "@monimesl/dot-core": "0.1.0-alpha.14",
-    "@monimesl/dot-dml-parser": "0.1.0-alpha.14",
-    "@monimesl/dot-simulator": "0.1.0-alpha.14",
-    "@monimesl/dot-script-parser": "0.1.0-alpha.14"
+    "@monimesl/dot-compiler": "0.1.0-alpha.16",
+    "@monimesl/dot-dml-parser": "0.1.0-alpha.16",
+    "@monimesl/dot-simulator": "0.1.0-alpha.16",
+    "@monimesl/dot-script-parser": "0.1.0-alpha.16",
+    "@monimesl/dot-core": "0.1.0-alpha.16"
   },
   "devDependencies": {
     "@types/node": "^22.20.4",