@monimesl/dot-cli 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/templates/showcase/dot.ts

@@ -16,6 +16,7 @@ export default defineDot({
     'basics/hooks',
     'basics/bars',
     'basics/colors',
+    'basics/theme',
     'basics/share',
     'basics/concert',
     // What a view can show.
@@ -47,8 +48,18 @@ export default defineDot({
     'dash/secrets',
     'dash/calls',
   ],
-  // The showcase's own colours, used by name on the Styles page, and the Page colours swatches.
+  // How every page looks. The Theme page explains each setting.
   theme: {
+    // Turn one of these on to see it on every page:
+    // font: 'rounded',
+    // headingFont: 'serif',
+    // headingWeight: 'medium',
+    // textSize: 'large',
+    // shape: 'rounded',
+    // density: 'compact',
+    // elevation: 'raised',
+    // components: { Button: { size: 'large' }, View: { variants: { card: { border: 'none' } } } },
+    // The showcase's own colours, used by name on the Styles page, and the Page colours swatches.
     colors: {
       custom: {
         gold: { light: '#f5c542', dark: '#d4a72c' },
@@ -57,6 +68,10 @@ export default defineDot({
         ...swatchColors(),
       },
     },
+    // The showcase's own icon, an SVG in statics/, used by name like Dot's icons.
+    icons: { 'ticket-stub': 'statics/icons/ticket-stub.svg' },
+    // A gradient between two of the theme's colours, for a View's background.
+    gradients: { goldenHour: { from: 'gold', to: 'warning', direction: 'diagonal' } },
   },
   // logger() writes each page load, event, navigation and state change to the console.
   plugins: [logger()],

package/dist/templates/showcase/pages/basics/theme/controller.ts

@@ -0,0 +1,28 @@
+import state from './state';
+
+// Sierra Leone's green and blue, darker in light mode so text in them reads on white.
+const FLAG_TONES = {
+  success: { light: '#178a33', dark: '#4cd471' },
+  info: { light: '#0060a8', dark: '#5aa9ff' },
+} as const;
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Theme' } },
+  actions: {
+    // A page can't change the theme, but setColors changes its colours, tones included. Undefined
+    // puts the theme's own back.
+    setFlagTones(_state, event: CheckedEvent) {
+      const flagTones = event.detail.checked;
+      this.setState({ flagTones });
+      if (flagTones) {
+        this.setColors(FLAG_TONES);
+      } else {
+        this.setColors({
+          success: { light: undefined, dark: undefined },
+          info: { light: undefined, dark: undefined },
+        });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,4 @@
+export default {
+  // Whether the page uses the flag's green and blue for its tones, in place of the theme's.
+  flagTones: false,
+};

package/dist/templates/showcase/pages/basics/theme/view.dml

@@ -0,0 +1,50 @@
+<View>
+  <Text variant="title">Theme</Text>
+  <Text>A dot has no CSS. The theme in dot.ts sets how every page looks, and a page can't change it while it runs. To see a setting below, turn it on in dot.ts, where a commented line has each one, then reload.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">colors</Text>
+    <Text variant="caption" tone="muted">primary, background, surface, text, muted, border and subtle, and the tones info, success, warning and danger, each for light and dark. A colour left out is Dash's. A page can change its own with setColors, as this switch does for two tones.</Text>
+    <View variant="card" gap="small">
+      <View direction="row" gap="small" wrap>
+        <Button tone="info">Details</Button>
+        <Button tone="success">Pay SLE 120</Button>
+        <Button variant="secondary" tone="danger">Refund</Button>
+      </View>
+      <View direction="row" gap="small" wrap>
+        <Badge tone="info">New</Badge>
+        <Badge tone="success">Paid</Badge>
+        <Badge tone="warning">Due Friday</Badge>
+        <Badge tone="danger">Failed</Badge>
+      </View>
+      <Switch label="Use the flag's green and blue" checked="{{ flagTones }}" onChange="setFlagTones" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">shape, density and elevation</Text>
+    <Text variant="caption" tone="muted">shape is how round corners are: square, subtle, soft (the default) or rounded. density is how much room gaps and padding take: compact, regular (the default) or comfortable. elevation: "raised" gives every card and list a soft shadow in place of its hairline.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">font, headingFont, headingWeight and textSize</Text>
+    <Text variant="caption" tone="muted">font is one of the phone's own fonts, so nothing is downloaded: system (the default), rounded, serif or mono. headingFont and headingWeight give titles their own. textSize, small, regular or large, makes all text a tenth smaller or larger.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">components</Text>
+    <Text variant="caption" tone="muted">Default props for every use of a component, or for one of its variants, so a dot sets its look once. Button: { size: "large" } makes every Button large. View: { variants: { card: { elevation: "low" } } } gives only cards a shadow. A prop in the markup still wins.</Text>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">icons and gradients</Text>
+    <Text variant="caption" tone="muted">icons names SVGs in statics/, such as ticket-stub here. They work wherever Dot's icons do, and take the icon's tone. The build refuses an SVG with scripts or links, so export it from your design tool as plain shapes. gradients names a gradient between two of the theme's colours, for a View's background, such as goldenHour.</Text>
+    <View background="goldenHour" radius="large" padding="large" gap="small">
+      <View direction="row" align="center" gap="small">
+        <Icon name="ticket-stub" tone="ink" />
+        <Text weight="bold" tone="ink">Freetown Jazz Night</Text>
+      </View>
+      <Text variant="title" tone="ink">2 tickets</Text>
+    </View>
+  </View>
+</View>

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

@@ -39,8 +39,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="subtitle">Theme colours</Text>
-    <Text variant="caption" tone="muted">The theme in dot.ts can set primary, background, surface, text, muted, border and subtle, for light and dark. Left out, they're Dash's. The theme can also name its own colours, such as gold and ink here. Use them as a background or a text tone.</Text>
+    <Text variant="subtitle">The dot's own colours</Text>
+    <Text variant="caption" tone="muted">The theme in dot.ts can name its own colours, such as gold and ink here. Use them as a background or a text tone. The Theme page has the rest of the theme.</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>
@@ -63,6 +63,41 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">elevation</Text>
+    <Text variant="caption" tone="muted">A shadow lifts a box off the page. low suits a card, and high something that floats over others.</Text>
+    <View direction="row" gap="large" padding="medium">
+      <View grow variant="card" elevation="low" border="none" align="center">
+        <Text>low</Text>
+      </View>
+      <View grow variant="card" elevation="high" border="none" align="center">
+        <Text>high</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Buttons</Text>
+    <Text variant="caption" tone="muted">variant is primary, secondary, outline or ghost. tone colours a button, such as danger for one that deletes. size is small, medium or large.</Text>
+    <View direction="row" gap="small" wrap>
+      <Button>Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+    </View>
+    <View direction="row" gap="small" wrap>
+      <Button tone="danger">Delete</Button>
+      <Button variant="secondary" tone="success">Mark paid</Button>
+      <Button variant="outline" tone="warning">Remind me</Button>
+      <Button variant="ghost" tone="danger">Cancel</Button>
+    </View>
+    <View direction="row" gap="small" align="center" wrap>
+      <Button size="small" variant="secondary">Small</Button>
+      <Button size="medium" variant="secondary">Medium</Button>
+      <Button size="large" variant="secondary">Large</Button>
+    </View>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">width and height</Text>
     <Text variant="caption" tone="muted">In points, or fill for all the room there is.</Text>

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

@@ -1,3 +1,5 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import state from './state';
 
 const RECENT = 'recent/';
@@ -16,37 +18,61 @@ export default definePage({
   // and the cache up to 64 MB. A full cache rejects with 'failed'.
   actions: {
     async refresh() {
-      const keys = await this.dash.storage.cache.keys();
-      const recent: string[] = [];
-      for (const key of keys.filter((each) => each.startsWith(RECENT))) {
-        // get gives null for a key that's missing or expired.
-        recent.push((await this.dash.storage.cache.get<string>(key)) ?? '');
+      try {
+        const keys = await this.dash.storage.cache.keys();
+        const recent: string[] = [];
+        for (const key of keys.filter((each) => each.startsWith(RECENT))) {
+          // get gives null for a key that's missing or expired.
+          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(', '),
+        });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
       }
-      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,
-      });
+      try {
+        await this.dash.storage.cache.set(`${RECENT}${event.data.id}`, event.data.name, {
+          ttl: RECENT_MILLISECONDS,
+        });
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       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);
+      try {
+        await this.dash.storage.cache.set(GENRE, event.detail.value);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async forgetGenre() {
-      await this.dash.storage.cache.remove(GENRE);
+      try {
+        await this.dash.storage.cache.remove(GENRE);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async clear() {
-      await this.dash.storage.cache.clear();
+      try {
+        await this.dash.storage.cache.clear();
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
   },

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

@@ -14,4 +14,5 @@ export default {
   recent: [] as string[],
   genre: '',
   keys: '',
+  note: '',
 };

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

@@ -45,4 +45,8 @@
       </View>
     </View>
   </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
 </View>

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

@@ -1,3 +1,5 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import type { Archive, Song } from './state';
 import state from './state';
 
@@ -18,58 +20,86 @@ export default definePage({
   // there rejects with 'missing', while stat gives null.
   actions: {
     async refresh() {
-      const entries = await this.dash.storage.file.list('', { recursive: true });
-      const songs: Song[] = [];
-      for (const entry of entries) {
-        if (entry.kind === 'file' && entry.path.startsWith('setlist/')) {
-          songs.push({ path: entry.path, text: await this.dash.storage.file.read(entry.path) });
+      try {
+        const entries = await this.dash.storage.file.list('', { recursive: true });
+        const songs: Song[] = [];
+        for (const entry of entries) {
+          if (entry.kind === 'file' && entry.path.startsWith('setlist/')) {
+            songs.push({ path: entry.path, text: await this.dash.storage.file.read(entry.path) });
+          }
         }
+        const archives: Archive[] = entries
+          .filter((entry) => entry.kind === 'folder' && /^archive\/[^/]+$/.test(entry.path))
+          .map((entry) => ({
+            path: entry.path,
+            time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
+          }))
+          .reverse();
+        const documents = entries.filter(
+          (entry) => entry.kind === 'file' && entry.path.startsWith('documents/'),
+        );
+        // In bytes: what the dot's files take, and the most they may take.
+        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 : '',
+        });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
       }
-      const archives: Archive[] = entries
-        .filter((entry) => entry.kind === 'folder' && /^archive\/[^/]+$/.test(entry.path))
-        .map((entry) => ({
-          path: entry.path,
-          time: new Date(Number(entry.name)).toLocaleTimeString('en-GB'),
-        }))
-        .reverse();
-      const documents = entries.filter(
-        (entry) => entry.kind === 'file' && entry.path.startsWith('documents/'),
-      );
-      // In bytes: what the dot's files take, and the most they may take.
-      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 : '',
-      });
     },
     async save(state) {
-      await this.dash.storage.file.write(`setlist/${Date.now()}.txt`, state.draft);
-      this.setState({ draft: '' });
+      try {
+        await this.dash.storage.file.write(`setlist/${Date.now()}.txt`, state.draft);
+        this.setState({ draft: '', note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     // Moves the whole setlist folder into the archive, under the time it was archived.
     async archive() {
-      await this.dash.storage.file.createFolder('archive');
-      await this.dash.storage.file.move('setlist', `archive/${Date.now()}`);
+      try {
+        await this.dash.storage.file.createFolder('archive');
+        await this.dash.storage.file.move('setlist', `archive/${Date.now()}`);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     // Copies an archived setlist back, in place of the current one. Without overwrite, a path
     // that's taken rejects with 'failed'.
     async copyBack(_state, event: DataEvent<{ path: string }>) {
-      await this.dash.storage.file.copy(event.data.path, 'setlist', { overwrite: true });
+      try {
+        await this.dash.storage.file.copy(event.data.path, 'setlist', { overwrite: true });
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     // A folder with files in it needs recursive.
     async clearSetlist() {
-      await this.dash.storage.file.remove('setlist', { recursive: true });
+      try {
+        await this.dash.storage.file.remove('setlist', { recursive: true });
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async forgetPicture() {
-      await this.dash.storage.file.remove(PICTURE);
+      try {
+        await this.dash.storage.file.remove(PICTURE);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
   },

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

@@ -20,4 +20,5 @@ export default {
   picture: '',
   // Files saved into the dot's documents folder, such as a ticket from the dash.media page.
   documents: [] as FileEntry[],
+  note: '',
 };

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

@@ -75,4 +75,8 @@
     <Text variant="subtitle">usage</Text>
     <Text>{{ usage }}</Text>
   </View>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
 </View>

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

@@ -35,7 +35,7 @@ export default definePage({
         this.setState({ note: errorMessage(error) });
       }
     },
-    // A sixth still to come rejects with 'failed', so cancel one first.
+    // A 13th still to come rejects with 'failed', so cancel one first.
     async remindTomorrow() {
       const note = await noteAfter(
         this.dash.reminders.set({

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

@@ -4,7 +4,7 @@
 
   <View gap="small">
     <Text variant="subtitle">set</Text>
-    <Text variant="caption" tone="muted">Once, or repeating as transfer reminders do. It needs the reminders permission in dot.json, and a dot can have 5 still to come.</Text>
+    <Text variant="caption" tone="muted">Once, or repeating as transfer reminders do. It needs the reminders permission in dot.json, and a dot can have 12 still to come.</Text>
     <View direction="row" gap="small" wrap>
       <Button onClick="remindTomorrow">Remind me tomorrow</Button>
       <Button variant="secondary" onClick="remindWeekly">Every Friday</Button>

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

@@ -1,3 +1,5 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
 import state from './state';
 
 const SESSION = 'session';
@@ -16,31 +18,49 @@ export default definePage({
   },
   actions: {
     async refresh() {
-      // null if there's no secret by that name.
-      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 ?? '',
-      });
+      try {
+        // null if there's no secret by that name.
+        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 ?? '',
+        });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
     },
     // A value over 4 KB rejects with 'invalid'. A 33rd secret rejects with 'failed', so remove
     // one first.
     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: '' });
+      try {
+        // 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: '', note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async signOut() {
-      await this.dash.storage.secret.remove(SESSION);
-      await this.dash.storage.cache.remove(NAME);
+      try {
+        await this.dash.storage.secret.remove(SESSION);
+        await this.dash.storage.cache.remove(NAME);
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
     async forgetAll() {
-      await this.dash.storage.secret.clear();
+      try {
+        await this.dash.storage.secret.clear();
+        this.setState({ note: '' });
+      } catch (error) {
+        this.setState({ note: errorMessage(error) });
+      }
       await this.actions.refresh();
     },
   },

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

@@ -2,4 +2,5 @@ export default {
   name: '',
   signedInAs: '',
   token: '',
+  note: '',
 };

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

@@ -23,4 +23,8 @@
   </View>
 
   <Notice tone="warning" title="Keep keys off the phone">Only the token is a secret here: your name is in the cache. Never put API keys in a dot's code or .env, since anyone with the dot can read them.</Notice>
+
+  <If condition="{{ note }}">
+    <Notice tone="danger">{{ note }}</Notice>
+  </If>
 </View>

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

@@ -67,6 +67,12 @@ export default {
           covers: 'configs.colors, setColors, background, primary, surfaces',
           icon: 'water',
         },
+        {
+          page: 'basics/theme',
+          title: 'Theme',
+          covers: 'colors, shape, density, elevation, fonts, components, icons, gradients',
+          icon: 'eye',
+        },
         {
           page: 'basics/share',
           title: 'Share links',
@@ -88,7 +94,7 @@ export default {
         {
           page: 'components/styles',
           title: 'Styles',
-          covers: 'background, border, radius, sizes, theme colours',
+          covers: 'background, border, radius, sizes, elevation, buttons, own colours',
           icon: 'star',
         },
         {

package/dist/templates/showcase/statics/icons/ticket-stub.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 4h14a2 2 0 0 1 2 2v3a3 3 0 0 0 0 6v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a3 3 0 0 0 0-6V6a2 2 0 0 1 2-2zm4 3v2h1.5V7zm0 4v2h1.5v-2zm0 4v2h1.5v-2z"/></svg>

package/package.json

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