@signalk/app-dock 1.4.0 → 1.4.1

package/public/config.html

@@ -4,232 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>App Dock - Configuration</title>
-    <style>
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: #1a1a2e;
-        color: #e0e0e0;
-        padding: 24px;
-        min-height: 100vh;
-      }
-      h1 {
-        font-size: 22px;
-        font-weight: 600;
-        margin-bottom: 8px;
-      }
-      .subtitle {
-        color: #888;
-        font-size: 13px;
-        margin-bottom: 24px;
-      }
-      .section {
-        margin-bottom: 32px;
-      }
-      .section-title {
-        font-size: 14px;
-        font-weight: 600;
-        color: #aaa;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        margin-bottom: 12px;
-      }
-
-      /* Discover button */
-      .btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        padding: 10px 20px;
-        border: none;
-        border-radius: 8px;
-        font-size: 14px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.15s ease;
-      }
-      .btn-primary {
-        background: #3b82f6;
-        color: #fff;
-      }
-      .btn-primary:hover {
-        background: #2563eb;
-      }
-      .btn-primary:disabled {
-        background: #555;
-        cursor: not-allowed;
-      }
-      .btn-save {
-        background: #10b981;
-        color: #fff;
-      }
-      .btn-save:hover {
-        background: #059669;
-      }
-      .btn-danger {
-        background: #ef4444;
-        color: #fff;
-        padding: 6px 12px;
-        font-size: 12px;
-      }
-      .btn-danger:hover {
-        background: #dc2626;
-      }
-
-      /* App list */
-      .app-list {
-        list-style: none;
-      }
-      .app-item {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 10px 14px;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 10px;
-        margin-bottom: 8px;
-        cursor: grab;
-        transition:
-          background 0.15s ease,
-          border-color 0.15s ease;
-      }
-      .app-item:hover {
-        background: rgba(255, 255, 255, 0.08);
-        border-color: rgba(255, 255, 255, 0.15);
-      }
-      .app-item.dragging {
-        opacity: 0.5;
-        background: rgba(59, 130, 246, 0.15);
-      }
-      .app-item.drag-over {
-        border-color: #3b82f6;
-      }
-
-      .drag-handle {
-        color: #555;
-        font-size: 18px;
-        cursor: grab;
-        user-select: none;
-        flex-shrink: 0;
-        width: 20px;
-        text-align: center;
-      }
-
-      .app-icon-preview {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(58, 58, 62, 0.9);
-        overflow: hidden;
-        flex-shrink: 0;
-        font-size: 20px;
-      }
-      .app-icon-preview img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        padding: 6px;
-      }
-
-      .app-info {
-        flex: 1;
-        min-width: 0;
-      }
-      .app-name {
-        font-size: 14px;
-        font-weight: 600;
-      }
-      .app-url {
-        font-size: 11px;
-        color: #777;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .app-toggle {
-        flex-shrink: 0;
-      }
-      .app-toggle input[type='checkbox'] {
-        width: 18px;
-        height: 18px;
-        cursor: pointer;
-        accent-color: #3b82f6;
-      }
-
-      .app-actions {
-        flex-shrink: 0;
-      }
-
-      .empty-state {
-        text-align: center;
-        padding: 40px 20px;
-        color: #666;
-        font-size: 14px;
-      }
-
-      .status {
-        margin-top: 12px;
-        font-size: 13px;
-        color: #10b981;
-        min-height: 20px;
-      }
-      .status.error {
-        color: #ef4444;
-      }
-
-      .actions-bar {
-        display: flex;
-        gap: 12px;
-        align-items: center;
-        margin-top: 20px;
-      }
-
-      /* Dock preview */
-      .dock-preview {
-        display: flex;
-        align-items: flex-end;
-        justify-content: center;
-        gap: 8px;
-        padding: 14px 20px;
-        background: rgba(30, 30, 32, 0.55);
-        backdrop-filter: blur(60px);
-        border: 1px solid rgba(255, 255, 255, 0.18);
-        border-radius: 22px;
-        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
-        margin: 20px auto;
-        width: fit-content;
-      }
-      .dock-preview-icon {
-        width: 48px;
-        height: 48px;
-        border-radius: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(58, 58, 62, 0.9);
-        overflow: hidden;
-        font-size: 22px;
-        transition: transform 0.15s ease;
-      }
-      .dock-preview-icon:hover {
-        transform: scale(1.3);
-      }
-      .dock-preview-icon img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        padding: 6px;
-      }
-    </style>
+    <style>*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#1a1a2e;min-height:100vh;padding:24px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}h1{margin-bottom:8px;font-size:22px;font-weight:600}.subtitle{color:#888;margin-bottom:24px;font-size:13px}.section{margin-bottom:32px}.section-title{color:#aaa;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-size:14px;font-weight:600}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{color:#fff;background:#3b82f6}.btn-primary:hover{background:#2563eb}.btn-primary:disabled{cursor:not-allowed;background:#555}.btn-save{color:#fff;background:#10b981}.btn-save:hover{background:#059669}.btn-danger{color:#fff;background:#ef4444;padding:6px 12px;font-size:12px}.btn-danger:hover{background:#dc2626}.app-list{list-style:none}.app-item{cursor:grab;background:#ffffff0d;border:1px solid #ffffff14;border-radius:10px;align-items:center;gap:12px;margin-bottom:8px;padding:10px 14px;transition:background .15s,border-color .15s;display:flex}.app-item:hover{background:#ffffff14;border-color:#ffffff26}.app-item.dragging{opacity:.5;background:#3b82f626}.app-item.drag-over{border-color:#3b82f6}.drag-handle{color:#555;cursor:grab;-webkit-user-select:none;user-select:none;text-align:center;flex-shrink:0;width:20px;font-size:18px}.app-icon-preview{background:#3a3a3ee6;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex;overflow:hidden}.app-icon-preview img{object-fit:contain;width:100%;height:100%;padding:6px}.app-info{flex:1;min-width:0}.app-name{font-size:14px;font-weight:600}.app-url{color:#777;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.app-toggle{flex-shrink:0}.app-toggle input[type=checkbox]{cursor:pointer;accent-color:#3b82f6;width:18px;height:18px}.app-actions{flex-shrink:0}.empty-state{text-align:center;color:#666;padding:40px 20px;font-size:14px}.status{color:#10b981;min-height:20px;margin-top:12px;font-size:13px}.status.error{color:#ef4444}.actions-bar{align-items:center;gap:12px;margin-top:20px;display:flex}.dock-preview{-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px);background:#1e1e208c;border:1px solid #ffffff2e;border-radius:22px;justify-content:center;align-items:flex-end;gap:8px;width:-moz-fit-content;width:fit-content;margin:20px auto;padding:14px 20px;display:flex;box-shadow:0 16px 48px #00000080}.dock-preview-icon{background:#3a3a3ee6;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:22px;transition:transform .15s;display:flex;overflow:hidden}.dock-preview-icon:hover{transform:scale(1.3)}.dock-preview-icon img{object-fit:contain;width:100%;height:100%;padding:6px}</style>
+    <script type="module" crossorigin src="./config.js"></script>
   </head>
   <body>
     <h1>App Dock Configuration</h1>
@@ -237,7 +13,7 @@
 
     <div class="section">
       <div class="section-title">Webapps</div>
-      <button class="btn btn-primary" id="discover-btn" onclick="discover()">Discover Installed Webapps</button>
+      <button class="btn btn-primary" id="discover-btn">Discover Installed Webapps</button>
       <div class="status" id="status"></div>
     </div>
 
@@ -253,217 +29,8 @@
     </div>
 
     <div class="actions-bar">
-      <button class="btn btn-save" onclick="save()">Save Configuration</button>
+      <button class="btn btn-save" id="save-btn">Save Configuration</button>
     </div>
 
-    <script>
-      let apps = []
-
-      async function loadCurrent() {
-        try {
-          const res = await fetch('/plugins/signalk-app-dock/config')
-          if (res.ok) {
-            const data = await res.json()
-            apps = (data.configuration && data.configuration.apps) || []
-            render()
-          }
-        } catch (e) {
-          console.warn('Could not load current config', e)
-        }
-      }
-
-      async function discover() {
-        const btn = document.getElementById('discover-btn')
-        const status = document.getElementById('status')
-        btn.disabled = true
-        btn.textContent = 'Discovering...'
-        status.textContent = ''
-        status.className = 'status'
-
-        try {
-          const res = await fetch('/skServer/webapps')
-          const allWebapps = await res.json()
-          const webapps = allWebapps
-            .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}` : null
-            }))
-
-          if (webapps.length === 0) {
-            status.textContent = 'No webapps found. Is the server fully started?'
-            status.className = 'status error'
-            btn.disabled = false
-            btn.textContent = 'Discover Installed Webapps'
-            return
-          }
-
-          const existingUrls = new Set(apps.map((a) => a.url))
-          let added = 0
-          for (const w of webapps) {
-            if (!existingUrls.has(w.url)) {
-              apps.push({
-                enabled: true,
-                url: w.url,
-                label: w.label || '',
-                icon: w.icon || '',
-                color: ''
-              })
-              added++
-            }
-          }
-
-          status.textContent =
-            added > 0
-              ? `Found ${webapps.length} webapps, added ${added} new.`
-              : `All ${webapps.length} webapps already in list.`
-          render()
-        } catch (e) {
-          status.textContent = 'Discovery failed: ' + e.message
-          status.className = 'status error'
-        }
-
-        btn.disabled = false
-        btn.textContent = 'Discover Installed Webapps'
-      }
-
-      async function save() {
-        const status = document.getElementById('status')
-        try {
-          const cfgRes = await fetch('/plugins/signalk-app-dock/config')
-          const current = await cfgRes.json()
-          const newConfig = {
-            ...current,
-            configuration: {
-              ...(current.configuration || {}),
-              apps: apps
-            }
-          }
-
-          const res = await fetch('/plugins/signalk-app-dock/config', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(newConfig)
-          })
-
-          if (res.ok) {
-            status.textContent = 'Saved! Plugin will restart with new config.'
-            status.className = 'status'
-          } else {
-            status.textContent = 'Save failed: ' + res.statusText
-            status.className = 'status error'
-          }
-        } catch (e) {
-          status.textContent = 'Save failed: ' + e.message
-          status.className = 'status error'
-        }
-      }
-
-      function removeApp(index) {
-        apps.splice(index, 1)
-        render()
-      }
-
-      function toggleApp(index) {
-        apps[index].enabled = !apps[index].enabled
-        render()
-      }
-
-      function renderIcon(app) {
-        const iconVal = app.icon || ''
-        if (iconVal.startsWith('/') || iconVal.startsWith('http')) {
-          return `<img src="${iconVal}" alt="${app.label}" onerror="this.parentNode.textContent='${(app.label || app.url || '??').slice(0, 2).toUpperCase()}'">`
-        }
-        return iconVal || (app.label || app.url || '??').slice(0, 2).toUpperCase()
-      }
-
-      function render() {
-        const list = document.getElementById('app-list')
-        const empty = document.getElementById('empty-state')
-        const preview = document.getElementById('dock-preview')
-
-        if (apps.length === 0) {
-          list.innerHTML = ''
-          empty.style.display = ''
-          preview.innerHTML = '<span style="color:#555;font-size:13px">No apps</span>'
-          return
-        }
-
-        empty.style.display = 'none'
-
-        list.innerHTML = apps
-          .map(
-            (app, i) => `
-        <li class="app-item" draggable="true" data-index="${i}" style="opacity:${app.enabled === false ? 0.4 : 1}">
-          <span class="drag-handle">\u2261</span>
-          <div class="app-icon-preview" ${app.color ? `style="background:${app.color}"` : ''}>
-            ${renderIcon(app)}
-          </div>
-          <div class="app-info">
-            <div class="app-name">${app.label || app.url}</div>
-            <div class="app-url">${app.url}</div>
-          </div>
-          <div class="app-toggle">
-            <input type="checkbox" ${app.enabled !== false ? 'checked' : ''} onchange="toggleApp(${i})" title="Enable/disable">
-          </div>
-          <div class="app-actions">
-            <button class="btn btn-danger" onclick="removeApp(${i})">Remove</button>
-          </div>
-        </li>
-      `
-          )
-          .join('')
-
-        initDragDrop()
-
-        preview.innerHTML = apps
-          .filter((a) => a.enabled !== false)
-          .map(
-            (app) => `
-          <div class="dock-preview-icon" ${app.color ? `style="background:${app.color}"` : ''}>
-            ${renderIcon(app)}
-          </div>
-        `
-          )
-          .join('')
-      }
-
-      let dragIndex = null
-      function initDragDrop() {
-        const items = document.querySelectorAll('.app-item')
-        items.forEach((item) => {
-          item.addEventListener('dragstart', (e) => {
-            dragIndex = parseInt(item.dataset.index)
-            item.classList.add('dragging')
-            e.dataTransfer.effectAllowed = 'move'
-          })
-          item.addEventListener('dragend', () => {
-            item.classList.remove('dragging')
-            document.querySelectorAll('.app-item').forEach((el) => el.classList.remove('drag-over'))
-          })
-          item.addEventListener('dragover', (e) => {
-            e.preventDefault()
-            e.dataTransfer.dropEffect = 'move'
-            item.classList.add('drag-over')
-          })
-          item.addEventListener('dragleave', () => {
-            item.classList.remove('drag-over')
-          })
-          item.addEventListener('drop', (e) => {
-            e.preventDefault()
-            const dropIndex = parseInt(item.dataset.index)
-            if (dragIndex !== null && dragIndex !== dropIndex) {
-              const moved = apps.splice(dragIndex, 1)[0]
-              apps.splice(dropIndex, 0, moved)
-              render()
-            }
-          })
-        })
-      }
-
-      loadCurrent()
-    </script>
   </body>
 </html>

package/public/config.js

@@ -0,0 +1,22 @@
+function e(e){let t=document.getElementById(e);if(!t)throw Error(`config.html: #${e} is missing`);return t}function t(e){return e instanceof Error?e.message:String(e)}var n=e(`discover-btn`),r=e(`save-btn`),i=e(`status`),a=e(`app-list`),o=e(`empty-state`),s=e(`dock-preview`),c=[];async function l(){try{let e=await fetch(`/plugins/signalk-app-dock/config`);if(e.ok){let t=await e.json();c=t.configuration&&t.configuration.apps||[],h()}}catch(e){console.warn(`Could not load current config`,e)}}async function u(){n.disabled=!0,n.textContent=`Discovering...`,i.textContent=``,i.className=`status`;try{let e=(await(await fetch(`/skServer/webapps`)).json()).filter(e=>e.name!==`@signalk/app-dock`&&e.name!==`@signalk/server-admin-ui`).map(e=>({name:e.name,label:e.signalk?.displayName||e.name,url:`/${e.name}/`,icon:e.signalk?.appIcon?`/${e.name}/${e.signalk.appIcon}`:null}));if(e.length===0){i.textContent=`No webapps found. Is the server fully started?`,i.className=`status error`,n.disabled=!1,n.textContent=`Discover Installed Webapps`;return}let t=new Set(c.map(e=>e.url)),r=0;for(let n of e)t.has(n.url)||(c.push({enabled:!0,url:n.url,label:n.label||``,icon:n.icon||``,color:``}),r++);i.textContent=r>0?`Found ${e.length} webapps, added ${r} new.`:`All ${e.length} webapps already in list.`,h()}catch(e){i.textContent=`Discovery failed: `+t(e),i.className=`status error`}n.disabled=!1,n.textContent=`Discover Installed Webapps`}async function d(){try{let e=await(await fetch(`/plugins/signalk-app-dock/config`)).json(),t={...e,configuration:{...e.configuration||{},apps:c}},n=await fetch(`/plugins/signalk-app-dock/config`,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify(t)});n.ok?(i.textContent=`Saved! Plugin will restart with new config.`,i.className=`status`):(i.textContent=`Save failed: `+n.statusText,i.className=`status error`)}catch(e){i.textContent=`Save failed: `+t(e),i.className=`status error`}}function f(e){c.splice(e,1),h()}function p(e){c[e].enabled=!c[e].enabled,h()}function m(e){let t=e.icon||``;return t.startsWith(`/`)||t.startsWith(`http`)?`<img src="${t}" alt="${e.label}" onerror="this.parentNode.textContent='${(e.label||e.url||`??`).slice(0,2).toUpperCase()}'">`:t||(e.label||e.url||`??`).slice(0,2).toUpperCase()}function h(){c.length===0?(a.innerHTML=``,o.style.display=``,s.innerHTML=`<span style="color:#555;font-size:13px">No apps</span>`):(o.style.display=`none`,a.innerHTML=c.map((e,t)=>`
+        <li class="app-item" draggable="true" data-index="${t}" style="opacity:${e.enabled===!1?.4:1}">
+          <span class="drag-handle">≡</span>
+          <div class="app-icon-preview" ${e.color?`style="background:${e.color}"`:``}>
+            ${m(e)}
+          </div>
+          <div class="app-info">
+            <div class="app-name">${e.label||e.url}</div>
+            <div class="app-url">${e.url}</div>
+          </div>
+          <div class="app-toggle">
+            <input type="checkbox" ${e.enabled===!1?``:`checked`} data-action="toggle" title="Enable/disable">
+          </div>
+          <div class="app-actions">
+            <button class="btn btn-danger" data-action="remove">Remove</button>
+          </div>
+        </li>
+      `).join(``),_(),s.innerHTML=c.filter(e=>e.enabled!==!1).map(e=>`
+          <div class="dock-preview-icon" ${e.color?`style="background:${e.color}"`:``}>
+            ${m(e)}
+          </div>
+        `).join(``))}var g=null;function _(){document.querySelectorAll(`.app-item`).forEach(e=>{e.addEventListener(`dragstart`,t=>{g=parseInt(e.dataset.index||``,10),e.classList.add(`dragging`),t.dataTransfer&&(t.dataTransfer.effectAllowed=`move`)}),e.addEventListener(`dragend`,()=>{e.classList.remove(`dragging`),document.querySelectorAll(`.app-item`).forEach(e=>e.classList.remove(`drag-over`))}),e.addEventListener(`dragover`,t=>{t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect=`move`),e.classList.add(`drag-over`)}),e.addEventListener(`dragleave`,()=>{e.classList.remove(`drag-over`)}),e.addEventListener(`drop`,t=>{t.preventDefault();let n=parseInt(e.dataset.index||``,10);if(g!==null&&g!==n){let e=c.splice(g,1)[0];c.splice(n,0,e),h()}})})}function v(e){let t=e.target instanceof HTMLElement?e.target.closest(`[data-action]`):null,n=t?.closest(`.app-item`);return!t||!n?null:{action:t.dataset.action||``,index:parseInt(n.dataset.index||``,10)}}a.addEventListener(`change`,e=>{let t=v(e);t?.action===`toggle`&&p(t.index)}),a.addEventListener(`click`,e=>{let t=v(e);t?.action===`remove`&&f(t.index)}),n.addEventListener(`click`,()=>void u()),r.addEventListener(`click`,()=>void d()),l();

package/public/configpanel/PluginConfigurationPanel.js

@@ -0,0 +1 @@
+var e=window.__SK_REACT__;if(!e)throw Error(`App Dock: window.__SK_REACT__ is not set. The host signalk-server admin UI must expose React on window for plugin federation. Requires signalk-server 2.27.0 or newer.`);var{Activity:t,Children:n,Component:r,Fragment:i,Profiler:a,PureComponent:o,StrictMode:s,Suspense:c,cache:l,cacheSignal:u,cloneElement:d,createContext:f,createElement:p,createRef:m,forwardRef:h,isValidElement:g,lazy:_,memo:v,startTransition:y,use:b,useActionState:x,useCallback:S,useContext:C,useDebugValue:w,useDeferredValue:T,useEffect:E,useEffectEvent:D,useId:O,useImperativeHandle:k,useInsertionEffect:A,useLayoutEffect:j,useMemo:M,useOptimistic:N,useReducer:ee,useRef:P,useState:F,useSyncExternalStore:I,useTransition:L,version:R}=e,z=window.__SK_REACT_JSX_RUNTIME__;if(!z)throw Error(`App Dock: window.__SK_REACT_JSX_RUNTIME__ is not set by the host.`);var B=z,{Fragment:V,jsx:H,jsxs:U}=B;B.jsxDEV;function W(e){return e instanceof Error?e.message:String(e)}var G={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 K({icon:e,label:t,color:n,size:r}){let i=r||36,a={...G.iconBox,width:i,height:i,borderRadius:i*.22,...n?{background:n}:{}},o=e||``;return o.startsWith(`/`)||o.startsWith(`http`)?H(`div`,{style:a,children:H(`img`,{src:o,alt:t,style:{...G.iconImg,padding:i*.12},onError:e=>{let n=e.currentTarget;n.style.display=`none`,n.parentElement&&(n.parentElement.textContent=(t||`??`).slice(0,2).toUpperCase())}})}):H(`div`,{style:a,children:o||(t||`??`).slice(0,2).toUpperCase()})}function q({label:e,value:t,options:n,onChange:r,hint:i}){return U(`div`,{style:G.fieldRow,children:[H(`span`,{style:G.label,children:e}),H(`select`,{style:G.select,value:t,onChange:e=>r(e.target.value),children:n.map(e=>H(`option`,{value:e.value,children:e.label},e.value))}),i&&H(`span`,{style:G.hint,children:i})]})}function J({label:e,value:t,onChange:n,hint:r}){return U(`div`,{style:G.fieldRow,children:[H(`span`,{style:G.label,children:e}),H(`input`,{style:G.input,type:`number`,value:t,onChange:e=>n(Number(e.target.value))}),r&&H(`span`,{style:G.hint,children:r})]})}function Y({label:e,checked:t,onChange:n,hint:r}){return U(`div`,{style:G.fieldRow,children:[H(`span`,{style:G.label,children:e}),H(`input`,{type:`checkbox`,style:G.checkboxField,checked:t,onChange:e=>n(e.target.checked)}),r&&H(`span`,{style:G.hint,children:r})]})}function X({configuration:e,save:t}){let n=e||{},[r,i]=F(()=>n.apps||[]),[a,o]=F(n.position||`bottom`),[s,c]=F(n.iframeMode||`keep-alive`),[l,u]=F(n.iconSize||56),[d,f]=F(n.magnification!==!1),[p,m]=F(n.magnificationScale||1.7),[h,g]=F(n.showNightModeButton||!1),[_,v]=F(n.showFullscreenButton||!1),[y,b]=F(n.showExitButton||!1),x=n.tourDismissed||!1,[C,w]=F(``),[T,D]=F(!1),[O,k]=F(!1),[A,j]=F(!1),[M,N]=F(null),[ee,I]=F(null),L=P(r);E(()=>{L.current=r},[r]);let R=P(null);E(()=>()=>{R.current&&clearTimeout(R.current)},[]);let z=S(e=>({position:a,iframeMode:s,iconSize:l,magnification:d,magnificationScale:p,showNightModeButton:h,showFullscreenButton:_,showExitButton:y,tourDismissed:x,apps:e}),[a,s,l,d,p,h,_,y,x]),B=S(async()=>{R.current&&clearTimeout(R.current),j(!0),w(`Saving…`),D(!1);try{await t(z(r)),w(`Configuration saved — plugin will restart`),D(!1),R.current=setTimeout(()=>w(``),5e3)}catch(e){w(`Save failed: `+W(e)),D(!0)}finally{j(!1)}},[r,z,t]),X=async()=>{k(!0),w(``),D(!1);try{let e=(await(await fetch(`/skServer/webapps`)).json()).filter(e=>e.name!==`@signalk/app-dock`).map(e=>e.name===`@signalk/server-admin-ui`?{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(e.length===0){w(`No webapps found. Is the server fully started?`),D(!0),k(!1);return}let t=L.current,n=new Set(t.map(e=>e.url)),r=0,a=[...t];for(let t of e)n.has(t.url)||(a.push({enabled:!0,autostart:!1,url:t.url,label:t.label||``,icon:t.icon||``,color:t.isAdmin?`#78788c`:``}),r++);i(a),w(r>0?`Found ${e.length} webapps, added ${r} new.`:`All ${e.length} webapps already in list.`),D(!1)}catch(e){w(`Discovery failed: `+W(e)),D(!0)}k(!1)},Z=e=>i(r.map((t,n)=>n===e?{...t,enabled:!t.enabled}:t)),Q=e=>i(r.map((t,n)=>n===e?{...t,autostart:!t.autostart}:{...t,autostart:!1})),te=e=>i(r.filter((t,n)=>n!==e)),ne=e=>N(e),re=(e,t)=>{e.preventDefault(),I(t)},ie=()=>I(null),ae=(e,t)=>{if(e.preventDefault(),I(null),M!==null&&M!==t){let e=[...r],[n]=e.splice(M,1);e.splice(t,0,n),i(e)}N(null)},oe=()=>{N(null),I(null)},$=r.filter(e=>e.enabled!==!1);return U(`div`,{style:G.root,children:[H(`div`,{style:G.sectionTitle,children:`Dock Settings`}),H(q,{label:`Dock position`,value:a,onChange:o,options:[{value:`bottom`,label:`Bottom`},{value:`top`,label:`Top`},{value:`left`,label:`Left`},{value:`right`,label:`Right`}]}),H(q,{label:`iFrame lifecycle`,value:s,onChange:c,options:[{value:`keep-alive`,label:`Keep-alive (faster switching, more RAM)`},{value:`destroy`,label:`Destroy (reload each time, less RAM)`}]}),H(J,{label:`Icon size`,value:l,onChange:u,hint:`px`}),H(Y,{label:`Magnification effect`,checked:d,onChange:f}),d&&H(J,{label:`Magnification scale`,value:p,onChange:m,hint:`1.0 - 2.5`}),H(`div`,{style:G.sectionTitle,children:`Utility Buttons`}),H(Y,{label:`Night/Day mode toggle`,checked:h,onChange:g,hint:`Sun/moon button to toggle environment.mode`}),H(Y,{label:`Fullscreen toggle`,checked:_,onChange:v,hint:`Toggles browser fullscreen. Hidden on devices without Fullscreen API support (e.g. iPadOS Safari).`}),H(Y,{label:`Exit button`,checked:y,onChange:b,hint:`X button to return to Signal K admin UI`}),H(`div`,{style:G.sectionTitle,children:`Webapps`}),H(`button`,{style:{...G.btn,...G.btnPrimary,...O?{opacity:.6}:{}},onClick:()=>void X(),disabled:O,children:O?`Discovering…`:`Discover Installed Webapps`}),C&&H(`div`,{style:{...G.status,color:T?`#ef4444`:`#10b981`},children:C}),H(`div`,{style:G.sectionTitle,children:`Dock Apps (drag to reorder)`}),r.length===0?H(`div`,{style:G.empty,children:`No apps yet. Click Discover above.`}):H(`div`,{children:r.map((e,t)=>U(`div`,{draggable:!0,onDragStart:()=>ne(t),onDragOver:e=>re(e,t),onDragLeave:ie,onDrop:e=>ae(e,t),onDragEnd:oe,style:{...G.item,...e.enabled===!1?G.itemDisabled:{},...ee===t?G.dragOver:{},...M===t?{opacity:.4}:{}},children:[H(`span`,{style:G.handle,children:`≡`}),H(K,{icon:e.icon,label:e.label||e.url,color:e.color}),U(`div`,{style:G.info,children:[H(`div`,{style:G.name,children:e.label||e.url}),H(`div`,{style:G.url,children:e.url})]}),H(`div`,{style:G.toggle,title:`Enabled`,children:H(`input`,{type:`checkbox`,checked:e.enabled!==!1,onChange:()=>Z(t),style:G.checkbox})}),H(`div`,{style:{...G.toggle,cursor:`pointer`,fontSize:16,opacity:e.autostart?1:.25},onClick:()=>Q(t),title:e.autostart?`Autostart: ON (click to disable)`:`Click to set as autostart app`,children:`▶`}),H(`button`,{style:{...G.btn,...G.btnDanger},onClick:()=>te(t),children:`Remove`})]},e.url+t))}),($.length>0||h||_||y)&&U(V,{children:[H(`div`,{style:G.sectionTitle,children:`Preview`}),U(`div`,{style:G.preview,children:[h&&H(`div`,{style:{...G.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},children:`☀️`}),_&&H(`div`,{style:{...G.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,color:`#fff`},children:`⛶`}),(h||_)&&H(`div`,{style:{width:1,height:24,background:`rgba(255,255,255,0.15)`,alignSelf:`center`}}),$.map((e,t)=>H(K,{icon:e.icon,label:e.label||e.url,color:e.color,size:40},t)),y&&U(V,{children:[H(`div`,{style:{width:1,height:24,background:`rgba(255,255,255,0.15)`,alignSelf:`center`}}),H(`div`,{style:{...G.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`},children:`✕`})]})]})]}),U(`div`,{style:G.actions,children:[H(`button`,{style:{...G.btn,...G.btnSave,...A?{opacity:.6}:{}},onClick:()=>void B(),disabled:A,children:A?`Saving…`:`Save Configuration`}),C&&H(`div`,{style:{...G.status,color:T?`#ef4444`:`#10b981`},children:C})]})]})}export{X as default};

package/public/configpanel/_virtual_mf-localSharedImportMap___mfe_internal___signalk_app_dock__mf_owner__1-_R-vaMcG.js

@@ -0,0 +1 @@
+import"./dist-D1jGdgWH.js";var e={},t=[];export{t as usedRemotes,e as usedShared};