@signalk/app-dock 0.2.1 → 0.3.0-beta.1

package/README.md

@@ -9,10 +9,10 @@ A macOS-style app dock for switching between Signal K webapps on touch screens.
 - **macOS dock magnification** -- icons scale up with parabolic falloff as your finger moves along the dock
 - **Frosted glass pill** with spring bounce animation, positioned on any screen edge
 - **Lazy loading** -- apps load only when first tapped (important for Raspberry Pi and low-power devices)
-- **Double-tap corner** to reveal the dock -- works on touch and mouse, no conflict with OS gestures or browser fullscreen
-- **Mouse edge hover** to reveal on desktop
+- **Double-tap anywhere** to reveal the dock -- works on touch and mouse. Single taps and clicks pass through to the underlying webapp unchanged, so interactive elements (e.g. KIP's corner widgets) keep working. The pass-through recurses into nested iframes too, so double-tap still opens the dock when one webapp embeds another (e.g. KIP's split view with Freeboard-SK).
 - **Autostart** -- optionally load a default app immediately on open
 - **keep-alive or destroy** iframe lifecycle
+- **Night/day mode toggle** -- optional sun/moon button that flips `environment.mode` via a PUT handler
 - **Active dot indicator**, label tooltip, haptic feedback
 - **Embedded config panel** in the admin UI with webapp discovery, drag-to-reorder, and live preview
 
@@ -29,9 +29,11 @@ Open: `http://your-sk-server:3000/@signalk/app-dock/`
 
 ## Usage
 
-**Double-tap** the configured screen corner (default: bottom-right) to open the dock. Tap an app icon to switch. The dock auto-dismisses after selection, or tap the backdrop to close it.
+**Double-tap anywhere** on the screen to open the dock. Tap an app icon to switch. The dock auto-dismisses after selection, or tap the backdrop to close it. Double-click works the same way for mouse users.
 
-On desktop, move the mouse to the screen edge corresponding to the dock position.
+Tip: double-tapping a clickable element in the underlying webapp will activate that element once before the dock opens -- aim double-taps at non-interactive regions (maps, gauge backgrounds, empty space).
+
+Config changes made in **Plugin Config** apply automatically within ~5 seconds: structural changes (position, icon size, etc.) reload the dock page; changes to the app list hot-update in place.
 
 ## Configuration
 
@@ -45,38 +47,45 @@ Open **Plugin Config > App Dock** in the admin UI. The embedded configurator pro
 
 ### Settings
 
-| Setting              | Default        | Description                                 |
-| -------------------- | -------------- | ------------------------------------------- |
-| `position`           | `bottom`       | Dock edge: `bottom`, `top`, `left`, `right` |
-| `triggerCorner`      | `bottom-right` | Which corner activates double-tap           |
-| `iframeMode`         | `keep-alive`   | `keep-alive` or `destroy`                   |
-| `iconSize`           | `56`           | Base icon size in px                        |
-| `magnification`      | `true`         | Enable macOS-style magnification effect     |
-| `magnificationScale` | `1.7`          | Max icon scale (1.0-2.5)                    |
+| Setting               | Default      | Description                                                                                      |
+| --------------------- | ------------ | ------------------------------------------------------------------------------------------------ |
+| `position`            | `bottom`     | Dock edge: `bottom`, `top`, `left`, `right`                                                      |
+| `iframeMode`          | `keep-alive` | `keep-alive` loads each app once and hides/shows (faster, more RAM); `destroy` reloads each time |
+| `iconSize`            | `56`         | Base icon size in px                                                                             |
+| `magnification`       | `true`       | Enable macOS-style magnification effect                                                          |
+| `magnificationScale`  | `1.7`        | Max icon scale (1.0-2.5)                                                                         |
+| `showNightModeButton` | `true`       | Show sun/moon button in dock; PUT-writes `environment.mode`                                      |
+| `showExitButton`      | `false`      | Show X button that returns to the Signal K admin UI                                              |
 
 ## Development
 
 ```bash
-cd ~/.signalk
+cd ~/.signalk     # or a throwaway SK config dir for dev, e.g. ~/.signalk-app-dock
 npm link /path/to/app-dock
 ```
 
-Edit files in `public/`, reload the browser. No build step needed for the dock itself.
-
-To rebuild the config panel (after changing `src/configpanel/`):
+For side-by-side development without touching your real SK setup, point the server at a dedicated config dir:
 
 ```bash
-npm run build:config
+PORT=4000 npm start -- -c ~/.signalk-app-dock
 ```
 
+### Architecture
+
+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.
+
 ### Scripts
 
-| Command                | Description                       |
-| ---------------------- | --------------------------------- |
-| `npm test`             | Run tests                         |
-| `npm run format`       | Prettier + ESLint fix             |
-| `npm run lint`         | ESLint check                      |
-| `npm run build:config` | Rebuild the admin UI config panel |
+| 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) |
 
 ## License
 

package/eslint.config.js

@@ -44,7 +44,8 @@ module.exports = [
         requestAnimationFrame: 'readonly',
         Promise: 'readonly',
         Set: 'readonly',
-        Infinity: 'readonly'
+        Infinity: 'readonly',
+        MutationObserver: 'readonly'
       }
     },
     rules: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/app-dock",
-  "version": "0.2.1",
+  "version": "0.3.0-beta.1",
   "description": "macOS-style configurable app dock for switching between SignalK webapps on touch screens",
   "repository": {
     "url": "https://github.com/SignalK/app-dock"

package/plugin/index.js

@@ -141,14 +141,6 @@ module.exports = (app) => {
           default: 'bottom'
         },
 
-        triggerCorner: {
-          type: 'string',
-          title: 'Double-tap corner',
-          description: 'Screen corner that activates the dock on double-tap',
-          enum: ['bottom-right', 'bottom-left', 'top-right', 'top-left'],
-          default: 'bottom-right'
-        },
-
         iframeMode: {
           type: 'string',
           title: 'iFrame lifecycle',

package/public/805.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_signalk_app_dock=self.webpackChunk_signalk_app_dock||[]).push([[805],{805(e,t,n){n.r(t),n.d(t,{default:()=>s});var a=n(231);const l={root:{fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',color:"#333",padding:"16px 0"},sectionTitle:{fontSize:13,fontWeight:600,color:"#888",textTransform:"uppercase",letterSpacing:"0.05em",marginBottom:10,marginTop:24},btn:{display:"inline-flex",alignItems:"center",gap:8,padding:"8px 16px",border:"none",borderRadius:6,fontSize:13,fontWeight:600,cursor:"pointer"},btnPrimary:{background:"#3b82f6",color:"#fff"},btnSave:{background:"#10b981",color:"#fff"},btnDanger:{background:"#ef4444",color:"#fff",padding:"4px 10px",fontSize:11},status:{marginTop:8,fontSize:12,minHeight:18},item:{display:"flex",alignItems:"center",gap:10,padding:"8px 12px",background:"#f8f9fa",border:"1px solid #e0e0e0",borderRadius:8,marginBottom:6,cursor:"grab"},itemDisabled:{opacity:.4},dragOver:{borderColor:"#3b82f6",background:"#eef4ff"},handle:{color:"#bbb",fontSize:16,cursor:"grab",userSelect:"none",flexShrink:0,width:18,textAlign:"center"},iconBox:{width:36,height:36,borderRadius:8,display:"flex",alignItems:"center",justifyContent:"center",background:"#e2e8f0",overflow:"hidden",flexShrink:0,fontSize:18},iconImg:{width:"100%",height:"100%",objectFit:"contain",padding:5},info:{flex:1,minWidth:0},name:{fontSize:13,fontWeight:600,color:"#333"},url:{fontSize:10,color:"#999",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},toggle:{flexShrink:0},checkbox:{width:16,height:16,cursor:"pointer",accentColor:"#3b82f6"},preview:{display:"flex",alignItems:"flex-end",justifyContent:"center",gap:6,padding:"12px 18px",background:"rgba(30,30,32,0.85)",border:"1px solid rgba(255,255,255,0.18)",borderRadius:18,margin:"16px auto",width:"fit-content"},actions:{display:"flex",gap:10,alignItems:"center",marginTop:16},empty:{textAlign:"center",padding:"30px 16px",color:"#999",fontSize:13},fieldRow:{display:"flex",alignItems:"center",gap:12,marginBottom:10},label:{fontSize:13,fontWeight:500,color:"#555",width:160,flexShrink:0},select:{padding:"6px 10px",borderRadius:6,border:"1px solid #ccc",fontSize:13,background:"#fff",color:"#333"},input:{padding:"6px 10px",borderRadius:6,border:"1px solid #ccc",fontSize:13,width:80,background:"#fff",color:"#333"},checkboxField:{width:16,height:16,accentColor:"#3b82f6"},hint:{fontSize:11,color:"#aaa",marginLeft:8}};function o({icon:e,label:t,color:n,size:o}){const i=o||36,r={...l.iconBox,width:i,height:i,borderRadius:.22*i,...n?{background:n}:{}},c=e||"";return c.startsWith("/")||c.startsWith("http")?a.createElement("div",{style:r},a.createElement("img",{src:c,alt:t,style:{...l.iconImg,padding:.12*i},onError:e=>{e.target.style.display="none",e.target.parentNode.textContent=(t||"??").slice(0,2).toUpperCase()}})):a.createElement("div",{style:r},c||(t||"??").slice(0,2).toUpperCase())}function i({label:e,value:t,options:n,onChange:o,hint:i}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("select",{style:l.select,value:t,onChange:e=>o(e.target.value)},n.map(e=>a.createElement("option",{key:e.value,value:e.value},e.label))),i&&a.createElement("span",{style:l.hint},i))}function r({label:e,value:t,onChange:n,hint:o}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("input",{style:l.input,type:"number",value:t,onChange:e=>n(Number(e.target.value))}),o&&a.createElement("span",{style:l.hint},o))}function c({label:e,checked:t,onChange:n,hint:o}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("input",{type:"checkbox",style:l.checkboxField,checked:t,onChange:e=>n(e.target.checked)}),o&&a.createElement("span",{style:l.hint},o))}function s({configuration:e,save:t}){const n=e||{},[s,d]=(0,a.useState)(()=>n.apps||[]),[u,g]=(0,a.useState)(n.position||"bottom"),[p,m]=(0,a.useState)(n.triggerCorner||"bottom-right"),[b,f]=(0,a.useState)(n.iframeMode||"keep-alive"),[h,v]=(0,a.useState)(n.iconSize||56),[y,k]=(0,a.useState)(!1!==n.magnification),[E,S]=(0,a.useState)(n.magnificationScale||1.7),[x,w]=(0,a.useState)(n.showNightModeButton||!1),[C,z]=(0,a.useState)(n.showExitButton||!1),[D,R]=(0,a.useState)(""),[B,T]=(0,a.useState)(!1),[I,F]=(0,a.useState)(!1),[A,M]=(0,a.useState)(!1),[N,W]=(0,a.useState)(null),[$,_]=(0,a.useState)(null),O=(0,a.useRef)(s);O.current=s;const U=(0,a.useRef)(null);(0,a.useEffect)(()=>()=>{U.current&&clearTimeout(U.current)},[]);const j=(0,a.useCallback)(e=>({position:u,triggerCorner:p,iframeMode:b,iconSize:h,magnification:y,magnificationScale:E,showNightModeButton:x,showExitButton:C,apps:e}),[u,p,b,h,y,E,x,C]),L=(0,a.useCallback)(async()=>{U.current&&clearTimeout(U.current),M(!0),R("Saving…"),T(!1);try{const e=t(j(s));e&&"function"==typeof e.then&&await e,R("Configuration saved — plugin will restart"),T(!1),U.current=setTimeout(()=>R(""),5e3)}catch(e){R("Save failed: "+(e.message||e)),T(!0)}finally{M(!1)}},[s,j,t]),P=()=>_(null),K=()=>{W(null),_(null)},H=s.filter(e=>!1!==e.enabled);return a.createElement("div",{style:l.root},a.createElement("div",{style:l.sectionTitle},"Dock Settings"),a.createElement(i,{label:"Dock position",value:u,onChange:g,options:[{value:"bottom",label:"Bottom"},{value:"top",label:"Top"},{value:"left",label:"Left"},{value:"right",label:"Right"}]}),a.createElement(i,{label:"Double-tap corner",value:p,onChange:m,options:[{value:"bottom-right",label:"Bottom-right"},{value:"bottom-left",label:"Bottom-left"},{value:"top-right",label:"Top-right"},{value:"top-left",label:"Top-left"}]}),a.createElement(i,{label:"iFrame lifecycle",value:b,onChange:f,options:[{value:"keep-alive",label:"Keep-alive (faster switching, more RAM)"},{value:"destroy",label:"Destroy (reload each time, less RAM)"}]}),a.createElement(r,{label:"Icon size",value:h,onChange:v,hint:"px"}),a.createElement(c,{label:"Magnification effect",checked:y,onChange:k}),y&&a.createElement(r,{label:"Magnification scale",value:E,onChange:S,hint:"1.0 - 2.5"}),a.createElement("div",{style:l.sectionTitle},"Utility Buttons"),a.createElement(c,{label:"Night/Day mode toggle",checked:x,onChange:w,hint:"Sun/moon button to toggle environment.mode"}),a.createElement(c,{label:"Exit button",checked:C,onChange:z,hint:"X button to return to Signal K admin UI"}),a.createElement("div",{style:l.sectionTitle},"Webapps"),a.createElement("button",{style:{...l.btn,...l.btnPrimary,...I?{opacity:.6}:{}},onClick:async()=>{F(!0),R(""),T(!1);try{const e=await fetch("/skServer/webapps"),t=(await e.json()).filter(e=>"@signalk/app-dock"!==e.name).map(e=>"@signalk/server-admin-ui"===e.name?{name:e.name,label:"Settings",url:"/admin/",icon:"/@signalk/app-dock/icon-settings.svg",isAdmin:!0}:{name:e.name,label:e.signalk?.displayName||e.name,url:`/${e.name}/`,icon:e.signalk?.appIcon?`/${e.name}/${e.signalk.appIcon}`:null});if(0===t.length)return R("No webapps found. Is the server fully started?"),T(!0),void F(!1);const n=O.current,a=new Set(n.map(e=>e.url));let l=0;const o=[...n];for(const e of t)a.has(e.url)||(o.push({enabled:!0,autostart:!1,url:e.url,label:e.label||"",icon:e.icon||"",color:e.isAdmin?"#78788c":""}),l++);d(o),R(l>0?`Found ${t.length} webapps, added ${l} new.`:`All ${t.length} webapps already in list.`),T(!1)}catch(e){R("Discovery failed: "+e.message),T(!0)}F(!1)},disabled:I},I?"Discovering…":"Discover Installed Webapps"),D&&a.createElement("div",{style:{...l.status,color:B?"#ef4444":"#10b981"}},D),a.createElement("div",{style:l.sectionTitle},"Dock Apps (drag to reorder)"),0===s.length?a.createElement("div",{style:l.empty},"No apps yet. Click Discover above."):a.createElement("div",null,s.map((e,t)=>a.createElement("div",{key:e.url+t,draggable:!0,onDragStart:()=>(e=>W(e))(t),onDragOver:e=>((e,t)=>{e.preventDefault(),_(t)})(e,t),onDragLeave:P,onDrop:e=>((e,t)=>{if(e.preventDefault(),_(null),null!==N&&N!==t){const e=[...s],[n]=e.splice(N,1);e.splice(t,0,n),d(e)}W(null)})(e,t),onDragEnd:K,style:{...l.item,...!1===e.enabled?l.itemDisabled:{},...$===t?l.dragOver:{},...N===t?{opacity:.4}:{}}},a.createElement("span",{style:l.handle},"≡"),a.createElement(o,{icon:e.icon,label:e.label||e.url,color:e.color}),a.createElement("div",{style:l.info},a.createElement("div",{style:l.name},e.label||e.url),a.createElement("div",{style:l.url},e.url)),a.createElement("div",{style:l.toggle,title:"Enabled"},a.createElement("input",{type:"checkbox",checked:!1!==e.enabled,onChange:()=>(e=>d(s.map((t,n)=>n===e?{...t,enabled:!t.enabled}:t)))(t),style:l.checkbox})),a.createElement("div",{style:{...l.toggle,cursor:"pointer",fontSize:16,opacity:e.autostart?1:.25},onClick:()=>(e=>d(s.map((t,n)=>n===e?{...t,autostart:!t.autostart}:{...t,autostart:!1})))(t),title:e.autostart?"Autostart: ON (click to disable)":"Click to set as autostart app"},"▶"),a.createElement("button",{style:{...l.btn,...l.btnDanger},onClick:()=>(e=>d(s.filter((t,n)=>n!==e)))(t)},"Remove")))),(H.length>0||x||C)&&a.createElement(a.Fragment,null,a.createElement("div",{style:l.sectionTitle},"Preview"),a.createElement("div",{style:l.preview},x&&a.createElement(a.Fragment,null,a.createElement("div",{style:{...l.iconBox,width:40,height:40,background:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.12)",fontSize:20,borderRadius:10}},"☀️"),a.createElement("div",{style:{width:1,height:24,background:"rgba(255,255,255,0.15)",alignSelf:"center"}})),H.map((e,t)=>a.createElement(o,{key:t,icon:e.icon,label:e.label||e.url,color:e.color,size:40})),C&&a.createElement(a.Fragment,null,a.createElement("div",{style:{width:1,height:24,background:"rgba(255,255,255,0.15)",alignSelf:"center"}}),a.createElement("div",{style:{...l.iconBox,width:40,height:40,background:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.12)",fontSize:16,borderRadius:10,color:"#fff"}},"✕")))),a.createElement("div",{style:l.actions},a.createElement("button",{style:{...l.btn,...l.btnSave,...A?{opacity:.6}:{}},onClick:L,disabled:A},A?"Saving…":"Save Configuration"),D&&a.createElement("div",{style:{...l.status,color:B?"#ef4444":"#10b981"}},D)))}}}]);
+"use strict";(self.webpackChunk_signalk_app_dock=self.webpackChunk_signalk_app_dock||[]).push([[805],{805(e,t,n){n.r(t),n.d(t,{default:()=>s});var a=n(231);const l={root:{fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',color:"#333",padding:"16px 0"},sectionTitle:{fontSize:13,fontWeight:600,color:"#888",textTransform:"uppercase",letterSpacing:"0.05em",marginBottom:10,marginTop:24},btn:{display:"inline-flex",alignItems:"center",gap:8,padding:"8px 16px",border:"none",borderRadius:6,fontSize:13,fontWeight:600,cursor:"pointer"},btnPrimary:{background:"#3b82f6",color:"#fff"},btnSave:{background:"#10b981",color:"#fff"},btnDanger:{background:"#ef4444",color:"#fff",padding:"4px 10px",fontSize:11},status:{marginTop:8,fontSize:12,minHeight:18},item:{display:"flex",alignItems:"center",gap:10,padding:"8px 12px",background:"#f8f9fa",border:"1px solid #e0e0e0",borderRadius:8,marginBottom:6,cursor:"grab"},itemDisabled:{opacity:.4},dragOver:{borderColor:"#3b82f6",background:"#eef4ff"},handle:{color:"#bbb",fontSize:16,cursor:"grab",userSelect:"none",flexShrink:0,width:18,textAlign:"center"},iconBox:{width:36,height:36,borderRadius:8,display:"flex",alignItems:"center",justifyContent:"center",background:"#e2e8f0",overflow:"hidden",flexShrink:0,fontSize:18},iconImg:{width:"100%",height:"100%",objectFit:"contain",padding:5},info:{flex:1,minWidth:0},name:{fontSize:13,fontWeight:600,color:"#333"},url:{fontSize:10,color:"#999",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},toggle:{flexShrink:0},checkbox:{width:16,height:16,cursor:"pointer",accentColor:"#3b82f6"},preview:{display:"flex",alignItems:"flex-end",justifyContent:"center",gap:6,padding:"12px 18px",background:"rgba(30,30,32,0.85)",border:"1px solid rgba(255,255,255,0.18)",borderRadius:18,margin:"16px auto",width:"fit-content"},actions:{display:"flex",gap:10,alignItems:"center",marginTop:16},empty:{textAlign:"center",padding:"30px 16px",color:"#999",fontSize:13},fieldRow:{display:"flex",alignItems:"center",gap:12,marginBottom:10},label:{fontSize:13,fontWeight:500,color:"#555",width:160,flexShrink:0},select:{padding:"6px 10px",borderRadius:6,border:"1px solid #ccc",fontSize:13,background:"#fff",color:"#333"},input:{padding:"6px 10px",borderRadius:6,border:"1px solid #ccc",fontSize:13,width:80,background:"#fff",color:"#333"},checkboxField:{width:16,height:16,accentColor:"#3b82f6"},hint:{fontSize:11,color:"#aaa",marginLeft:8}};function o({icon:e,label:t,color:n,size:o}){const i=o||36,r={...l.iconBox,width:i,height:i,borderRadius:.22*i,...n?{background:n}:{}},c=e||"";return c.startsWith("/")||c.startsWith("http")?a.createElement("div",{style:r},a.createElement("img",{src:c,alt:t,style:{...l.iconImg,padding:.12*i},onError:e=>{e.target.style.display="none",e.target.parentNode.textContent=(t||"??").slice(0,2).toUpperCase()}})):a.createElement("div",{style:r},c||(t||"??").slice(0,2).toUpperCase())}function i({label:e,value:t,options:n,onChange:o,hint:i}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("select",{style:l.select,value:t,onChange:e=>o(e.target.value)},n.map(e=>a.createElement("option",{key:e.value,value:e.value},e.label))),i&&a.createElement("span",{style:l.hint},i))}function r({label:e,value:t,onChange:n,hint:o}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("input",{style:l.input,type:"number",value:t,onChange:e=>n(Number(e.target.value))}),o&&a.createElement("span",{style:l.hint},o))}function c({label:e,checked:t,onChange:n,hint:o}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("input",{type:"checkbox",style:l.checkboxField,checked:t,onChange:e=>n(e.target.checked)}),o&&a.createElement("span",{style:l.hint},o))}function s({configuration:e,save:t}){const n=e||{},[s,d]=(0,a.useState)(()=>n.apps||[]),[u,g]=(0,a.useState)(n.position||"bottom"),[p,m]=(0,a.useState)(n.iframeMode||"keep-alive"),[b,f]=(0,a.useState)(n.iconSize||56),[h,y]=(0,a.useState)(!1!==n.magnification),[v,k]=(0,a.useState)(n.magnificationScale||1.7),[E,S]=(0,a.useState)(n.showNightModeButton||!1),[x,w]=(0,a.useState)(n.showExitButton||!1),[C,D]=(0,a.useState)(n.tourDismissed||!1),[z,R]=(0,a.useState)(""),[I,B]=(0,a.useState)(!1),[T,F]=(0,a.useState)(!1),[A,M]=(0,a.useState)(!1),[N,W]=(0,a.useState)(null),[$,_]=(0,a.useState)(null),O=(0,a.useRef)(s);O.current=s;const U=(0,a.useRef)(null);(0,a.useEffect)(()=>()=>{U.current&&clearTimeout(U.current)},[]);const j=(0,a.useCallback)(e=>({position:u,iframeMode:p,iconSize:b,magnification:h,magnificationScale:v,showNightModeButton:E,showExitButton:x,tourDismissed:C,apps:e}),[u,p,b,h,v,E,x,C]),L=(0,a.useCallback)(async()=>{U.current&&clearTimeout(U.current),M(!0),R("Saving…"),B(!1);try{const e=t(j(s));e&&"function"==typeof e.then&&await e,R("Configuration saved — plugin will restart"),B(!1),U.current=setTimeout(()=>R(""),5e3)}catch(e){R("Save failed: "+(e.message||e)),B(!0)}finally{M(!1)}},[s,j,t]),P=()=>_(null),K=()=>{W(null),_(null)},H=s.filter(e=>!1!==e.enabled);return a.createElement("div",{style:l.root},a.createElement("div",{style:l.sectionTitle},"Dock Settings"),a.createElement(i,{label:"Dock position",value:u,onChange:g,options:[{value:"bottom",label:"Bottom"},{value:"top",label:"Top"},{value:"left",label:"Left"},{value:"right",label:"Right"}]}),a.createElement(i,{label:"iFrame lifecycle",value:p,onChange:m,options:[{value:"keep-alive",label:"Keep-alive (faster switching, more RAM)"},{value:"destroy",label:"Destroy (reload each time, less RAM)"}]}),a.createElement(r,{label:"Icon size",value:b,onChange:f,hint:"px"}),a.createElement(c,{label:"Magnification effect",checked:h,onChange:y}),h&&a.createElement(r,{label:"Magnification scale",value:v,onChange:k,hint:"1.0 - 2.5"}),a.createElement("div",{style:l.sectionTitle},"Utility Buttons"),a.createElement(c,{label:"Night/Day mode toggle",checked:E,onChange:S,hint:"Sun/moon button to toggle environment.mode"}),a.createElement(c,{label:"Exit button",checked:x,onChange:w,hint:"X button to return to Signal K admin UI"}),a.createElement("div",{style:l.sectionTitle},"Webapps"),a.createElement("button",{style:{...l.btn,...l.btnPrimary,...T?{opacity:.6}:{}},onClick:async()=>{F(!0),R(""),B(!1);try{const e=await fetch("/skServer/webapps"),t=(await e.json()).filter(e=>"@signalk/app-dock"!==e.name).map(e=>"@signalk/server-admin-ui"===e.name?{name:e.name,label:"Settings",url:"/admin/",icon:"/@signalk/app-dock/icon-settings.svg",isAdmin:!0}:{name:e.name,label:e.signalk?.displayName||e.name,url:`/${e.name}/`,icon:e.signalk?.appIcon?`/${e.name}/${e.signalk.appIcon}`:null});if(0===t.length)return R("No webapps found. Is the server fully started?"),B(!0),void F(!1);const n=O.current,a=new Set(n.map(e=>e.url));let l=0;const o=[...n];for(const e of t)a.has(e.url)||(o.push({enabled:!0,autostart:!1,url:e.url,label:e.label||"",icon:e.icon||"",color:e.isAdmin?"#78788c":""}),l++);d(o),R(l>0?`Found ${t.length} webapps, added ${l} new.`:`All ${t.length} webapps already in list.`),B(!1)}catch(e){R("Discovery failed: "+e.message),B(!0)}F(!1)},disabled:T},T?"Discovering…":"Discover Installed Webapps"),z&&a.createElement("div",{style:{...l.status,color:I?"#ef4444":"#10b981"}},z),a.createElement("div",{style:l.sectionTitle},"Dock Apps (drag to reorder)"),0===s.length?a.createElement("div",{style:l.empty},"No apps yet. Click Discover above."):a.createElement("div",null,s.map((e,t)=>a.createElement("div",{key:e.url+t,draggable:!0,onDragStart:()=>(e=>W(e))(t),onDragOver:e=>((e,t)=>{e.preventDefault(),_(t)})(e,t),onDragLeave:P,onDrop:e=>((e,t)=>{if(e.preventDefault(),_(null),null!==N&&N!==t){const e=[...s],[n]=e.splice(N,1);e.splice(t,0,n),d(e)}W(null)})(e,t),onDragEnd:K,style:{...l.item,...!1===e.enabled?l.itemDisabled:{},...$===t?l.dragOver:{},...N===t?{opacity:.4}:{}}},a.createElement("span",{style:l.handle},"≡"),a.createElement(o,{icon:e.icon,label:e.label||e.url,color:e.color}),a.createElement("div",{style:l.info},a.createElement("div",{style:l.name},e.label||e.url),a.createElement("div",{style:l.url},e.url)),a.createElement("div",{style:l.toggle,title:"Enabled"},a.createElement("input",{type:"checkbox",checked:!1!==e.enabled,onChange:()=>(e=>d(s.map((t,n)=>n===e?{...t,enabled:!t.enabled}:t)))(t),style:l.checkbox})),a.createElement("div",{style:{...l.toggle,cursor:"pointer",fontSize:16,opacity:e.autostart?1:.25},onClick:()=>(e=>d(s.map((t,n)=>n===e?{...t,autostart:!t.autostart}:{...t,autostart:!1})))(t),title:e.autostart?"Autostart: ON (click to disable)":"Click to set as autostart app"},"▶"),a.createElement("button",{style:{...l.btn,...l.btnDanger},onClick:()=>(e=>d(s.filter((t,n)=>n!==e)))(t)},"Remove")))),(H.length>0||E||x)&&a.createElement(a.Fragment,null,a.createElement("div",{style:l.sectionTitle},"Preview"),a.createElement("div",{style:l.preview},E&&a.createElement(a.Fragment,null,a.createElement("div",{style:{...l.iconBox,width:40,height:40,background:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.12)",fontSize:20,borderRadius:10}},"☀️"),a.createElement("div",{style:{width:1,height:24,background:"rgba(255,255,255,0.15)",alignSelf:"center"}})),H.map((e,t)=>a.createElement(o,{key:t,icon:e.icon,label:e.label||e.url,color:e.color,size:40})),x&&a.createElement(a.Fragment,null,a.createElement("div",{style:{width:1,height:24,background:"rgba(255,255,255,0.15)",alignSelf:"center"}}),a.createElement("div",{style:{...l.iconBox,width:40,height:40,background:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.12)",fontSize:16,borderRadius:10,color:"#fff"}},"✕")))),a.createElement("div",{style:l.actions},a.createElement("button",{style:{...l.btn,...l.btnSave,...A?{opacity:.6}:{}},onClick:L,disabled:A},A?"Saving…":"Save Configuration"),z&&a.createElement("div",{style:{...l.status,color:I?"#ef4444":"#10b981"}},z)))}}}]);

package/public/dock.css

@@ -396,19 +396,6 @@ body {
   background: rgba(239, 68, 68, 0.25);
 }
 
-/* ─── Invisible corner trigger zone ────────────────────────────────────────── */
-#trigger-corner {
-  position: fixed;
-  z-index: 9;
-  width: 120px;
-  height: 120px;
-  pointer-events: auto;
-  touch-action: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
 /* ─── Loading overlay ───────────────────────────────────────────────────────── */
 #loading-overlay {
   position: fixed;

package/public/dock.js

@@ -3,12 +3,11 @@
 
   const DEFAULTS = {
     position: 'bottom',
-    triggerCorner: 'bottom-right',
     iframeMode: 'keep-alive',
     iconSize: 56,
     magnification: true,
     magnificationScale: 1.7,
-    showNightModeButton: false,
+    showNightModeButton: true,
     showExitButton: false,
     apps: []
   }
@@ -44,7 +43,6 @@
   const $backdrop = document.getElementById('dock-backdrop')
   const $dock = document.getElementById('dock')
   const $dockInner = document.getElementById('dock-inner')
-  const $triggerCorner = document.getElementById('trigger-corner')
   const $loadingOverlay = document.getElementById('loading-overlay')
   const $loadingLabel = document.getElementById('loading-label')
   const $idleHint = document.getElementById('idle-hint')
@@ -130,18 +128,8 @@
       return
     }
 
-    const cornerNames = {
-      'bottom-right': 'bottom-right',
-      'bottom-left': 'bottom-left',
-      'top-right': 'top-right',
-      'top-left': 'top-left'
-    }
-    const corner = cornerNames[cfg.triggerCorner] || 'bottom-right'
-
     $idleHintText.innerHTML =
-      'Double-tap the <strong>' +
-      corner +
-      ' corner</strong> to open the dock' +
+      'Double-tap <strong>anywhere</strong> to open the dock' +
       '<br><br><span style="font-size:12px;opacity:0.6">Configure in Admin UI \u2192 Plugin Config \u2192 App Dock</span>'
   }
 
@@ -479,82 +467,111 @@
     hideDock()
   }
 
-  // ─── Corner trigger zone: position it ────────────────────────────────────────
-  function positionCornerZone() {
-    const [vert, horiz] = cfg.triggerCorner.split('-')
-    const sz = 120
-
-    $triggerCorner.style.width = sz + 'px'
-    $triggerCorner.style.height = sz + 'px'
-
-    $triggerCorner.style.top = ''
-    $triggerCorner.style.bottom = ''
-    $triggerCorner.style.left = ''
-    $triggerCorner.style.right = ''
+  // ─── Gesture: full-screen double-tap ────────────────────────────────────────
+  // No overlay element. We attach passive, non-preventDefault listeners to the
+  // parent document AND each same-origin iframe's contentDocument (recursively,
+  // to handle webapps like KIP that embed other apps), so webapps receive every
+  // tap/click normally. A double-tap anywhere opens the dock. Side effect:
+  // double-tapping a button fires that button once before the dock opens —
+  // users are expected to aim double-taps at non-interactive regions.
+  const DOUBLE_TAP_MS = 280
+  const DOUBLE_TAP_MIN_GAP_MS = 60
+  const DOUBLE_TAP_SLOP = 24
+
+  let lastTapTime = 0
+  let lastTapX = 0
+  let lastTapY = 0
+
+  function triggerDock() {
+    if (dockVisible) return
+    showDock()
+    if (navigator.vibrate) navigator.vibrate(8)
+  }
 
-    $triggerCorner.style[vert] = '0'
-    $triggerCorner.style[horiz] = '0'
+  function handleTap(clientX, clientY) {
+    if (dockVisible) return
+    const now = Date.now()
+    const dx = clientX - lastTapX
+    const dy = clientY - lastTapY
+    const close = dx * dx + dy * dy <= DOUBLE_TAP_SLOP * DOUBLE_TAP_SLOP
+    const gap = now - lastTapTime
+    if (gap >= DOUBLE_TAP_MIN_GAP_MS && gap < DOUBLE_TAP_MS && close) {
+      lastTapTime = 0
+      triggerDock()
+    } else {
+      lastTapTime = now
+      lastTapX = clientX
+      lastTapY = clientY
+    }
   }
 
-  // ─── Gesture: double-tap on corner (touch) + double-click (mouse) ─────────────
-  {
-    let lastTapTime = 0
-    const DOUBLE_TAP_MS = 400
+  function attachTapListener(doc, frameEl) {
+    if (!doc || doc.__dockListenersAttached) return
+    doc.__dockListenersAttached = true
 
-    $triggerCorner.addEventListener(
-      'touchend',
+    const offset = () => {
+      if (!frameEl) return { x: 0, y: 0 }
+      const r = frameEl.getBoundingClientRect()
+      return { x: r.left, y: r.top }
+    }
+
+    doc.addEventListener(
+      'pointerdown',
       (e) => {
-        const now = Date.now()
-        if (now - lastTapTime < DOUBLE_TAP_MS) {
-          e.preventDefault()
-          lastTapTime = 0
-          showDock()
-          if (navigator.vibrate) navigator.vibrate(8)
-        } else {
-          lastTapTime = now
-        }
+        const o = offset()
+        handleTap(e.clientX + o.x, e.clientY + o.y)
       },
-      { passive: false }
+      { passive: true, capture: true }
     )
+  }
 
-    $triggerCorner.addEventListener('dblclick', (e) => {
-      e.preventDefault()
-      showDock()
-    })
+  // Recursively attach to iframes at any nesting depth. Webapps like KIP
+  // embed other webapps (e.g. FSK) in their own iframes, so we walk the tree
+  // and observe each same-origin contentDocument for future iframe additions.
+  const attachedDocs = new WeakSet()
 
-    $triggerCorner.addEventListener('contextmenu', (e) => e.preventDefault())
-  }
-
-  // ─── Gesture: mouse hover at screen edge ─────────────────────────────────────
-  {
-    const EDGE_ZONE = 4
-    let edgeTimer = null
-
-    document.addEventListener('mousemove', (e) => {
-      if (dockVisible) return
-      const W = window.innerWidth
-      const H = window.innerHeight
-      let atEdge = false
-
-      if (pos === 'bottom' && e.clientY >= H - EDGE_ZONE) atEdge = true
-      if (pos === 'top' && e.clientY <= EDGE_ZONE) atEdge = true
-      if (pos === 'left' && e.clientX <= EDGE_ZONE) atEdge = true
-      if (pos === 'right' && e.clientX >= W - EDGE_ZONE) atEdge = true
-
-      if (atEdge && !edgeTimer) {
-        edgeTimer = setTimeout(() => {
-          showDock()
-          edgeTimer = null
-        }, 300)
-      } else if (!atEdge && edgeTimer) {
-        clearTimeout(edgeTimer)
-        edgeTimer = null
+  function attachToIframe(frame) {
+    const wire = () => {
+      let doc
+      try {
+        doc = frame.contentDocument
+      } catch {
+        return // cross-origin; can't reach
+      }
+      if (!doc || attachedDocs.has(doc)) return
+      attachedDocs.add(doc)
+      attachTapListener(doc, frame)
+      scanAndObserveDoc(doc)
+    }
+    frame.addEventListener('load', wire)
+    wire()
+  }
+
+  function scanAndObserveDoc(doc) {
+    // Attach to iframes already in this document.
+    doc.querySelectorAll('iframe').forEach((f) => attachToIframe(f))
+
+    // Observe future iframe additions anywhere in the doc tree.
+    const root = doc.documentElement || doc.body || doc
+    const obs = new MutationObserver((records) => {
+      for (const r of records) {
+        r.addedNodes.forEach((n) => {
+          if (!n || n.nodeType !== 1) return
+          if (n.tagName === 'IFRAME') attachToIframe(n)
+          // Descendants: catch iframes added as part of a subtree.
+          const nested = n.querySelectorAll && n.querySelectorAll('iframe')
+          if (nested) nested.forEach((f) => attachToIframe(f))
+        })
       }
     })
+    obs.observe(root, { childList: true, subtree: true })
   }
 
+  attachTapListener(document, null)
+  attachedDocs.add(document)
+  scanAndObserveDoc(document)
+
   // ─── Init ────────────────────────────────────────────────────────────────────
-  positionCornerZone()
   buildDock()
 
   if (cfg.showNightModeButton) {
@@ -562,26 +579,47 @@
     setInterval(fetchCurrentMode, 5000)
   }
 
+  // Changes to any of these require a full rebuild (dock classes, magnification
+  // constants, dock items, etc.) — easiest to just reload the page.
+  const STRUCTURAL_KEYS = [
+    'position',
+    'iframeMode',
+    'iconSize',
+    'magnification',
+    'magnificationScale',
+    'showNightModeButton',
+    'showExitButton'
+  ]
+
   async function refreshConfig() {
     try {
       const [configRes, settingsRes] = await Promise.all([
         fetch('/plugins/signalk-app-dock/config'),
         fetch('/plugins/signalk-app-dock/settings')
       ])
-      const prev = JSON.stringify(cfg)
+      const prev = cfg
+      let next = cfg
       if (configRes.ok) {
         const data = await configRes.json()
         const pluginCfg = data.configuration || data
-        cfg = { ...DEFAULTS, ...pluginCfg }
+        next = { ...DEFAULTS, ...pluginCfg, apps: prev.apps }
       }
       if (settingsRes.ok) {
         const data = await settingsRes.json()
         if (Array.isArray(data.apps) && data.apps.length > 0) {
-          cfg.apps = data.apps
+          next = { ...next, apps: data.apps }
         }
       }
-      if (JSON.stringify(cfg) !== prev) {
+      const structuralChanged = STRUCTURAL_KEYS.some((k) => prev[k] !== next[k])
+      if (structuralChanged) {
+        window.location.reload()
+        return
+      }
+      if (JSON.stringify(next.apps) !== JSON.stringify(prev.apps)) {
+        cfg = next
         buildDock()
+      } else {
+        cfg = next
       }
     } catch {
       // ignore transient errors (e.g. during plugin restart)

package/public/index.html

@@ -27,9 +27,6 @@
       <div id="dock-inner"></div>
     </nav>
 
-    <!-- Invisible corner hot-zone for long-press trigger -->
-    <div id="trigger-corner" aria-hidden="true"></div>
-
     <!-- Loading indicator shown while an iframe is loading for the first time -->
     <div id="loading-overlay" aria-hidden="true">
       <div class="spinner"></div>
@@ -43,8 +40,7 @@
         <div id="tour-body">
           <p>App Dock gives you a macOS-style dock to quickly switch between Signal K webapps on touch screens.</p>
           <p>
-            <strong>Double-tap the bottom-right corner</strong> of the screen to open the dock, then tap an icon to
-            launch that app.
+            <strong>Double-tap anywhere</strong> on the screen to open the dock, then tap an icon to launch that app.
           </p>
           <p>
             Freeboard-SK is loading in the background and KIP is one tap away. Customize the apps, dock position, and

package/src/configpanel/PluginConfigurationPanel.js

@@ -175,13 +175,13 @@ export default function PluginConfigurationPanel({ configuration, save }) {
   const cfg = configuration || {}
   const [apps, setApps] = useState(() => cfg.apps || [])
   const [position, setPosition] = useState(cfg.position || 'bottom')
-  const [triggerCorner, setTriggerCorner] = useState(cfg.triggerCorner || 'bottom-right')
   const [iframeMode, setIframeMode] = useState(cfg.iframeMode || 'keep-alive')
   const [iconSize, setIconSize] = useState(cfg.iconSize || 56)
   const [magnification, setMagnification] = useState(cfg.magnification !== false)
   const [magnificationScale, setMagnificationScale] = useState(cfg.magnificationScale || 1.7)
   const [showNightModeButton, setShowNightModeButton] = useState(cfg.showNightModeButton || false)
   const [showExitButton, setShowExitButton] = useState(cfg.showExitButton || false)
+  const [tourDismissed, setTourDismissed] = useState(cfg.tourDismissed || false)
 
   const [status, setStatus] = useState('')
   const [statusError, setStatusError] = useState(false)
@@ -203,24 +203,24 @@ export default function PluginConfigurationPanel({ configuration, save }) {
   const buildConfig = useCallback(
     (appsList) => ({
       position,
-      triggerCorner,
       iframeMode,
       iconSize,
       magnification,
       magnificationScale,
       showNightModeButton,
       showExitButton,
+      tourDismissed,
       apps: appsList
     }),
     [
       position,
-      triggerCorner,
       iframeMode,
       iconSize,
       magnification,
       magnificationScale,
       showNightModeButton,
-      showExitButton
+      showExitButton,
+      tourDismissed
     ]
   )
 
@@ -356,18 +356,6 @@ export default function PluginConfigurationPanel({ configuration, save }) {
         ]}
       />
 
-      <SelectField
-        label="Double-tap corner"
-        value={triggerCorner}
-        onChange={setTriggerCorner}
-        options={[
-          { value: 'bottom-right', label: 'Bottom-right' },
-          { value: 'bottom-left', label: 'Bottom-left' },
-          { value: 'top-right', label: 'Top-right' },
-          { value: 'top-left', label: 'Top-left' }
-        ]}
-      />
-
       <SelectField
         label="iFrame lifecycle"
         value={iframeMode}

package/test/plugin.test.js

@@ -58,12 +58,13 @@ describe('schema', () => {
     const plugin = pluginFactory(createMockApp())
     const props = Object.keys(plugin.schema.properties)
     assert.ok(props.includes('position'))
-    assert.ok(props.includes('triggerCorner'))
     assert.ok(props.includes('iframeMode'))
     assert.ok(props.includes('iconSize'))
     assert.ok(props.includes('magnification'))
     assert.ok(props.includes('magnificationScale'))
     assert.ok(props.includes('apps'))
+    assert.ok(!props.includes('triggerCorner'), 'triggerCorner should be removed')
+    assert.ok(!props.includes('longPressActivation'), 'longPressActivation should be removed')
   })
 
   it('position enum contains all four edges', () => {
@@ -92,11 +93,6 @@ describe('schema', () => {
     assert.equal(prop.default, false)
   })
 
-  it('triggerCorner defaults to bottom-right', () => {
-    const plugin = pluginFactory(createMockApp())
-    assert.equal(plugin.schema.properties.triggerCorner.default, 'bottom-right')
-  })
-
   it('defines tourDismissed with default false', () => {
     const plugin = pluginFactory(createMockApp())
     const prop = plugin.schema.properties.tourDismissed