@signalk/app-dock 1.4.0 → 1.4.1

package/README.md

@@ -121,6 +121,10 @@ Visitors who are not admins reach the plugin's routes through `router.access()`,
 ## Development
 
 ```bash
+cd /path/to/app-dock
+npm install
+npm run build     # the server loads dist/ and serves public/; rebuild after a change
+
 cd ~/.signalk     # or a throwaway SK config dir for dev, e.g. ~/.signalk-app-dock
 npm link /path/to/app-dock
 ```
@@ -135,30 +139,37 @@ PORT=4000 npm start -- -c ~/.signalk-app-dock
 
 The repo ships three cooperating surfaces:
 
-- **`plugin/index.js`** -- CommonJS SK-server plugin. Registers the schema, seeds default apps on first run, exposes HTTP endpoints for the dock and config panel, and owns the `environment.mode` PUT handler.
-- **`public/dock.js` + `dock.css` + `index.html`** -- the dock UI itself. Plain JS, served as-is. **No build step**: edit and reload the browser.
-- **`src/configpanel/`** -- React 19 component exposed to the admin UI via Webpack Module Federation. Rebuild with `npm run build:config` after changes here; output lands in `public/remoteEntry.js` and companion chunks.
+- **`src/plugin/`** -- the SK-server plugin, an ES module compiled by `tsc` to `dist/plugin/`. Defines the configuration schema with TypeBox, seeds default apps on first run, exposes HTTP endpoints for the dock and config panel, and owns the `environment.mode` PUT handler.
+- **`src/dock/`** -- the dock UI (`index.html`, `dock.ts`, `dock.css`) and the standalone configurator (`config.html`, `config.ts`), built by Vite into `public/`, which the server serves at `/@signalk/app-dock/`. `src/dock/static/` holds the icons and the web manifest, copied as they are.
+- **`src/configpanel/`** -- React 19 component exposed to the admin UI via Module Federation (`@module-federation/vite`), built into `public/remoteEntry.js` and `public/configpanel/`. It uses the admin UI's own React, which signalk-server 2.27 and later expose.
+
+Everything is strict TypeScript. Vite only transpiles, so both Vite builds run the type checker (`vite-plugin-checker`) and fail on a type error. `public/` and `dist/` are build output and not committed; `npm run build` creates them.
 
 ### Scripts
 
-| Command                | Description                                                       |
-| ---------------------- | ----------------------------------------------------------------- |
-| `npm test`             | Run plugin tests (`node --test`)                                  |
-| `npm run format`       | Prettier + ESLint fix                                             |
-| `npm run lint`         | ESLint check                                                      |
-| `npm run build:config` | Rebuild the admin UI config panel (required after `src/` changes) |
+| Command                    | Description                                                       |
+| -------------------------- | ----------------------------------------------------------------- |
+| `npm run build`            | Build the plugin, the dock pages and the config panel             |
+| `npm run typecheck:config` | Type-check the Vite and ESLint configs                            |
+| `npm run build:server`     | Compile the plugin and its tests to `dist/`                       |
+| `npm run build:dock`       | Build the dock pages into `public/` (empties it first)            |
+| `npm run build:config`     | Build the admin UI config panel into `public/`                    |
+| `npm test`                 | Run the plugin tests (`node --test`) against `dist/`; build first |
+| `npm run format`           | Prettier + ESLint fix                                             |
+| `npm run format:check`     | Prettier check + ESLint, as CI runs them                          |
+| `npm run lint`             | ESLint check                                                      |
 
 ### Icon assets
 
-`public/app-icon.svg` has a transparent background: the artwork sits straight on whatever page shows it, so its colours have to read on light and dark backgrounds alike. Check a change on both before committing.
+`app-icon.svg` has a transparent background: the artwork sits straight on whatever page shows it, so its colours have to read on light and dark backgrounds alike. Check a change on both before committing.
 
 The 180-px apple-touch-icon needs an opaque background, because iOS fills transparency with black, and room for the corners iOS rounds off. Regenerate it from the SVG whenever that changes:
 
 ```bash
-rsvg-convert -w 132 -h 132 public/app-icon.svg | magick - -background '#0f172a' -gravity center -extent 180x180 -alpha remove -alpha off PNG24:public/app-icon-180.png
+rsvg-convert -w 132 -h 132 app-icon.svg | magick - -background '#0f172a' -gravity center -extent 180x180 -alpha remove -alpha off PNG24:src/dock/static/app-icon-180.png
 ```
 
-`public/app-icon-maskable.svg` is hand-authored: the same artwork on the same dark slate, scaled into Android's 80% safe zone. Update it by hand when the artwork changes.
+`src/dock/static/app-icon-maskable.svg` is hand-authored: the same artwork on the same dark slate, scaled into Android's 80% safe zone. Update it by hand when the artwork changes.
 
 ## License
 

package/app-icon.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="72" height="72">
+  <!-- Transparent background: the artwork is drawn straight on the canvas in
+       mid-tone colours that read on light and dark pages alike -->
+  <!-- Compass rose -->
+  <circle cx="36" cy="16" r="11" fill="none" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5"/>
+  <line x1="36" y1="3" x2="36" y2="7" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="23" y1="16" x2="27" y2="16" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="45" y1="16" x2="49" y2="16" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
+  <polygon points="36,8 33,16 36,14 39,16" fill="#ef4444"/>
+  <polygon points="36,24 33,16 36,18 39,16" fill="#64748b"/>
+  <!-- Dock pill -->
+  <rect x="3" y="44" width="66" height="22" rx="11" fill="#3b82f6" fill-opacity="0.15" stroke="#3b82f6" stroke-width="1.5"/>
+  <!-- Dock icons - 3 squares in the pill -->
+  <rect x="9" y="49" width="12" height="12" rx="3" fill="#3b82f6"/>
+  <rect x="30" y="49" width="12" height="12" rx="3" fill="#10b981"/>
+  <rect x="51" y="49" width="12" height="12" rx="3" fill="#f59e0b"/>
+  <!-- Middle icon magnified (popping up) -->
+  <rect x="27" y="29" width="18" height="18" rx="4.5" fill="#10b981"/>
+  <!-- Active dot under middle icon -->
+  <circle cx="36" cy="69.5" r="2" fill="#3b82f6"/>
+</svg>

package/dist/plugin/index.js

@@ -0,0 +1,141 @@
+import { ConfigSchema } from './schema.js';
+const DEFAULT_APPS = [
+    {
+        enabled: true,
+        autostart: true,
+        url: '/@signalk/freeboard-sk/',
+        label: 'Freeboard-SK',
+        icon: '/@signalk/freeboard-sk/assets/icons/icon-72x72.png',
+        color: ''
+    },
+    {
+        enabled: true,
+        autostart: false,
+        url: '/@halos-org/skip/',
+        label: 'Skip',
+        icon: '/@halos-org/skip/assets/icon-72x72.png',
+        color: ''
+    },
+    {
+        enabled: true,
+        autostart: false,
+        url: '/admin/',
+        label: 'Settings',
+        icon: '/@signalk/app-dock/icon-settings.svg',
+        color: '#78788c'
+    }
+];
+export default function appDock(app) {
+    let pluginSettings = {};
+    let resolvedApps = [];
+    let running = false;
+    function resolveApps(settings) {
+        return (Array.isArray(settings.apps) ? settings.apps : [])
+            .filter((a) => a.enabled !== false)
+            .map((a) => ({
+            label: a.label || a.url,
+            url: a.url,
+            icon: a.icon || null,
+            color: a.color || null,
+            autostart: a.autostart || false
+        }));
+    }
+    // The configuration as saved, the one /config serves. While the plugin is
+    // not running, pluginSettings is empty (never started) or holds what the
+    // last start() got, which a later save may have replaced.
+    function savedSettings() {
+        return app.readPluginOptions().configuration || {};
+    }
+    function getWebapps() {
+        return (app.webapps || [])
+            .filter((w) => w.name !== '@signalk/app-dock' && w.name !== '@signalk/server-admin-ui')
+            .map((w) => ({
+            name: w.name,
+            label: w.signalk?.displayName || w.name,
+            url: `/${w.name}/`,
+            icon: w.signalk?.appIcon ? `/${w.name}/${w.signalk.appIcon.replace(/^\.\//, '')}` : null
+        }));
+    }
+    const plugin = {
+        id: 'signalk-app-dock',
+        name: 'App Dock',
+        start(config) {
+            let settings = config;
+            if (!Array.isArray(settings.apps)) {
+                const seeded = DEFAULT_APPS.map((a) => ({ ...a }));
+                const seededSettings = {
+                    showNightModeButton: true,
+                    showFullscreenButton: false,
+                    showExitButton: false,
+                    ...settings,
+                    apps: seeded
+                };
+                app.debug('App Dock: first run, seeding %d default apps', seeded.length);
+                app.savePluginOptions(seededSettings, (err) => {
+                    if (err)
+                        app.error('App Dock: failed to save default apps: ' + err.message);
+                    else
+                        app.debug('App Dock: saved default apps to config');
+                });
+                settings = seededSettings;
+            }
+            pluginSettings = settings;
+            if (settings.showNightModeButton) {
+                app.registerPutHandler('vessels.self', 'environment.mode', (_context, _path, value) => {
+                    if (value !== 'day' && value !== 'night') {
+                        return { state: 'COMPLETED', statusCode: 400, message: 'Invalid mode' };
+                    }
+                    app.handleMessage(plugin.id, {
+                        updates: [{ values: [{ path: 'environment.mode', value }] }]
+                    });
+                    return { state: 'COMPLETED', statusCode: 200 };
+                }, plugin.id);
+            }
+            resolvedApps = resolveApps(settings);
+            running = true;
+            app.debug('App Dock: resolved %d apps: %s', resolvedApps.length, resolvedApps.map((a) => a.label).join(', '));
+        },
+        stop() {
+            running = false;
+        },
+        registerWithRouter(router) {
+            // Routes registered on the router itself are admin-only. signalk-server
+            // 2.31 and later add router.access(), which opens a route to readonly or
+            // readwrite users; on older servers every route stays admin-only.
+            // PluginRouter declares access() unconditionally, so older servers are
+            // told apart at runtime.
+            const access = router.access;
+            const openTo = (level) => typeof access === 'function' ? access.call(router, level) : router;
+            openTo('readonly').get('/settings', (_req, res) => {
+                const settings = running ? pluginSettings : savedSettings();
+                res.json({
+                    ...settings,
+                    apps: running ? resolvedApps : resolveApps(settings)
+                });
+            });
+            router.get('/webapps', (_req, res) => {
+                res.json(getWebapps());
+            });
+            openTo('readonly').get('/mode', (_req, res) => {
+                const current = app.getSelfPath('environment.mode');
+                res.json({ value: current?.value || 'day' });
+            });
+            openTo('readwrite').post('/dismiss-tour', (_req, res) => {
+                // savePluginOptions replaces the whole saved configuration, so the
+                // update starts from a complete one.
+                const updated = { ...(running ? pluginSettings : savedSettings()), tourDismissed: true };
+                app.savePluginOptions(updated, (err) => {
+                    if (err) {
+                        app.error('App Dock: failed to save tourDismissed: ' + err.message);
+                        res.status(500).json({ error: err.message });
+                        return;
+                    }
+                    pluginSettings = updated;
+                    res.json({ tourDismissed: true });
+                });
+            });
+        },
+        schema: ConfigSchema
+    };
+    return plugin;
+}

package/dist/plugin/schema.js

@@ -0,0 +1,58 @@
+import { Type } from 'typebox';
+// One definition is both the admin UI's configuration form (a TypeBox schema
+// is JSON Schema at runtime) and the TypeScript type of the saved
+// configuration. Every field is optional: a configuration saved by an older
+// release, or by hand, may lack any of them.
+export const AppEntrySchema = Type.Object({
+    enabled: Type.Optional(Type.Boolean({ title: 'Enabled', default: true })),
+    autostart: Type.Optional(Type.Boolean({
+        title: 'Autostart',
+        description: 'Load this app automatically when the dock page opens',
+        default: false
+    })),
+    url: Type.String({ title: 'URL' }),
+    label: Type.Optional(Type.String({ title: 'Label override' })),
+    icon: Type.Optional(Type.String({ title: 'Icon override', description: 'Emoji or image path' })),
+    color: Type.Optional(Type.String({ title: 'Background color' }))
+});
+export const ConfigSchema = Type.Object({
+    position: Type.Optional(Type.Enum(['bottom', 'top', 'left', 'right'], { type: 'string', title: 'Dock position', default: 'bottom' })),
+    iframeMode: Type.Optional(Type.Enum(['keep-alive', 'destroy'], {
+        type: 'string',
+        title: 'iFrame lifecycle',
+        description: 'keep-alive: load once and hide/show (faster switching, more RAM). ' +
+            'destroy: reload on every switch (slower, minimal RAM).',
+        default: 'keep-alive'
+    })),
+    iconSize: Type.Optional(Type.Number({ title: 'Icon size (px)', default: 56 })),
+    magnification: Type.Optional(Type.Boolean({ title: 'Enable dock magnification effect', default: true })),
+    magnificationScale: Type.Optional(Type.Number({ title: 'Magnification scale (1.0 = none, 2.5 = maximum)', default: 1.7 })),
+    showNightModeButton: Type.Optional(Type.Boolean({
+        title: 'Show night/day mode toggle',
+        description: 'Adds a sun/moon button to the dock that toggles environment.mode',
+        default: true
+    })),
+    showFullscreenButton: Type.Optional(Type.Boolean({
+        title: 'Show fullscreen toggle',
+        description: 'Adds a button to the dock that toggles browser fullscreen. ' +
+            'Hidden automatically when the Fullscreen API is not available (e.g. iPadOS Safari — use Add to Home Screen instead).',
+        default: false
+    })),
+    showExitButton: Type.Optional(Type.Boolean({
+        title: 'Show exit button',
+        description: 'Adds an X button to the dock that returns to Signal K admin UI',
+        default: false
+    })),
+    tourDismissed: Type.Optional(Type.Boolean({
+        title: 'Welcome tour dismissed',
+        description: 'Set automatically when a user clicks "Don\'t show again" in the welcome tour. Uncheck to show the tour again on all devices.',
+        default: false
+    })),
+    apps: Type.Optional(Type.Array(AppEntrySchema, {
+        title: 'Dock Apps',
+        description: 'Installed webapps are added here automatically. Reorder, disable, or override labels/icons as needed.',
+        default: []
+    }))
+}, {
+    description: 'Open /@signalk/app-dock/config.html for the visual configurator with discover button and drag-to-reorder.'
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/app-dock",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "macOS-style configurable app dock for switching between SignalK webapps on touch screens",
   "repository": {
     "url": "https://github.com/SignalK/app-dock"
@@ -21,33 +21,51 @@
       "./docs/screenshots/3_app-dock_config.png"
     ]
   },
-  "main": "plugin/index.js",
+  "type": "module",
+  "main": "dist/plugin/index.js",
   "files": [
-    "plugin/",
+    "app-icon.svg",
+    "dist/plugin/",
     "public/",
     "docs/screenshots/"
   ],
   "scripts": {
-    "build:config": "webpack",
-    "prepublishOnly": "webpack",
-    "format": "prettier --write '**/*.{js,json,md,css,html}' && eslint --fix .",
+    "build": "npm run build:server && npm run build:dock && npm run build:config",
+    "build:server": "tsc",
+    "build:dock": "vite build --config vite.dock.config.ts",
+    "build:config": "vite build --config vite.configpanel.config.ts",
+    "prepublishOnly": "npm run build",
+    "format": "prettier --write . && eslint --fix .",
     "lint": "eslint .",
-    "test": "node --test test/plugin.test.js"
+    "format:check": "prettier --check . && eslint .",
+    "test": "node --test \"dist/test/**/*.test.js\""
   },
   "author": "Dirk Wahrheit <dirkwahrheit@gmail.com>",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=18"
+    "node": ">=22"
+  },
+  "dependencies": {
+    "typebox": "^1.3.37"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-react": "^7.28.5",
-    "babel-loader": "^10.1.1",
+    "@eslint/js": "^10.0.1",
+    "@module-federation/vite": "^1.23.5",
+    "@signalk/server-api": "^2.33.0",
+    "@types/express": "^5.0.6",
+    "@types/node": "^22.19.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
     "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.13.0",
+    "jiti": "^2.7.0",
     "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "webpack": "^5.105.4",
-    "webpack-cli": "^7.0.2"
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.71.2",
+    "vite": "^8.3.4",
+    "vite-plugin-checker": "^0.14.5"
   }
 }